<commit_before><template>
  <div class="mb35">
    <!-- My order header -->
    <div class="row mb15">
      <div class="col-xs-12 col-md-2 col-lg-1">
        <return-icon class="p12 icon pointer" />
      </div>
      <div class="col-xs-12 col-md-6">
        <h3 class="m0 mb5 mt5">
          {{ $t('Order #') }}{{ order.increment_id }}
          <span class="brdr-1 brdr-cl-bg-secondary py5 px10 ml20 sans-serif fs-medium-small weight-400 cl-secondary">
            {{ order.status | capitalize }}
          </span>
        </h3>
      </div>
    </div>
    <!-- My order body -->
    <div class="row fs16 mb20">
      <div class="col-xs-12 h4">
        <p>{{ order.created_at | date('MMMM D, YYYY') }}</p>
        <p class="mt35">
          <a href="#" class="underline" @click.prevent="remakeOrder(skipGrouped(order.items))">{{ $t('Remake order') }}</a>
        </p>
      </div>
    </div>
    <div class="row fs16 mb35">
      <div class="col-xs-12 h4">
        <h4>{{ $t('Items ordered') }}</h4>
        <table class="brdr-1 brdr-cl-bg-secondary">
          <thead>
            <tr>
              <th class="serif lh20">
                {{ $t('Product Name') }}
              </th>
              <th class="serif lh20">
                {{ $t('SKU') }}
              </th>
              <th class="serif lh20">
                {{ $t('Price') }}
              </th>
              <th class="serif lh20">
                {{ $t('Qty') }}
              </th>
              <th class="serif lh20">
                {{ $t('Subtotal') }}
              </th>
              <th class="serif lh20">
                {{ $t('Thumbnail') }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="brdr-top-1 brdr-cl-bg-secondary" v-for="item in skipGrouped(order.items)" :key="item.item_id">
              <td class="fs-medium lh25" :data-th="$t('Product Name')">
                {{ item.name }}
              </td>
              <td class="fs-medium lh25" :data-th="$t('SKU')">
                {{ item.sku }}
              </td>
              <td class="fs-medium lh25" :data-th="$t('Price')">
                {{ item.price_incl_tax | price }}
              </td>
              <td class="fs-medium lh25 align-right" :data-th="$t('Qty')">
                {{ item.qty_ordered }}
              </td>
              <td class="fs-medium lh25" :data-th="$t('Subtotal')">
                {{ item.row_total_incl_tax | price }}
              </td>
              <td class="fs-medium lh25">
                <product-image :image="{src: itemThumbnail[item.sku]}" />
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr class="brdr-top-1 brdr-cl-bg-secondary">
              <td colspan="5" class="align-right">
                {{ $t('Subtotal') }}
              </td>
              <td>{{ order.subtotal | price }}</td>
            </tr>
            <tr>
              <td colspan="5" class="align-right">
                {{ $t('Shipping') }}
              </td>
              <td>{{ order.shipping_amount | price }}</td>
            </tr>
            <tr>
              <td colspan="5" class="align-right">
                {{ $t('Tax') }}
              </td>
              <td>{{ order.tax_amount + order.discount_tax_compensation_amount | price }}</td>
            </tr>
            <tr v-if="order.discount_amount">
              <td colspan="5" class="align-right">
                {{ $t('Discount') }}
              </td>
              <td>{{ order.discount_amount | price }}</td>
            </tr>
            <tr>
              <td colspan="5" class="align-right">
                {{ $t('Grand total') }}
              </td>
              <td>{{ order.grand_total | price }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="row fs16 mb35">
      <div class="col-xs-12 h4">
        <h4>{{ $t('Order informations') }}</h4>
        <div class="row">
          <div class="col-sm-6 col-md-3">
            <h5>{{ $t('Shipping address') }}</h5>
            <address>
              <p>{{ shippingAddress.firstname }} {{ shippingAddress.lastname }}</p>
              <p>{{ shippingAddress.street[0] }} {{ shippingAddress.street[1] }}</p>
              <p>{{ shippingAddress.postcode }} {{ shippingAddress.city }}</p>
              <p>{{ shippingAddress.country }}</p>
            </address>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5>{{ $t('Shipping method') }}</h5>
            <p>{{ order.shipping_description }}</p>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5>{{ $t('Billing address') }}</h5>
            <address>
              <p>{{ billingAddress.firstname }} {{ billingAddress.lastname }}</p>
              <p>{{ billingAddress.street[0] }} {{ billingAddress.street[1] }}</p>
              <p>{{ billingAddress.postcode }} {{ billingAddress.city }}</p>
              <p>{{ billingAddress.country }}</p>
            </address>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5>{{ $t('Payment method') }}</h5>
            <p>{{ paymentMethod }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import MyOrder from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder'
import ReturnIcon from 'theme/components/core/blocks/Header/ReturnIcon'
import ProductImage from 'theme/components/core/ProductImage'
import { getThumbnailPath } from '@vue-storefront/core/helpers'
import { mapActions } from 'vuex'

export default {
  mixins: [MyOrder],
  components: {
    ReturnIcon,
    ProductImage
  },
  data () {
    return {
      itemThumbnail: []
    }
  },
  methods: {
    ...mapActions({
      getProduct: 'product/single'
    })
  },
  beforeMount () {
    const vm = this
    this.skipGrouped(this.order.items).forEach(async item => {
      if (this.itemThumbnail[item.sku] === undefined || this.itemThumbnail[item.sku] === null) {
        const product = await this.getProduct({ options: { sku: item.sku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false})
        Vue.set(this.itemThumbnail, item.sku, getThumbnailPath(product.image, 80, 80))
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import '~theme/css/variables/colors';
@import '~theme/css/helpers/functions/color';<commit_msg>cleaning<commit_after><template>
  <div class="mb35">
    <!-- My order header -->
    <div class="row mb15">
      <div class="col-xs-12 col-md-2 col-lg-1">
        <return-icon class="p12 icon pointer" />
      </div>
      <div class="col-xs-12 col-md-6">
        <h3 class="m0 mb5 mt5">
          {{ $t('Order #') }}{{ order.increment_id }}
          <span class="brdr-1 brdr-cl-bg-secondary py5 px10 ml20 sans-serif fs-medium-small weight-400 cl-secondary">
            {{ order.status | capitalize }}
          </span>
        </h3>
      </div>
    </div>
    <!-- My order body -->
    <div class="row fs16 mb20">
      <div class="col-xs-12 h4">
        <p>{{ order.created_at | date('MMMM D, YYYY') }}</p>
        <p class="mt35">
          <a href="#" class="underline" @click.prevent="remakeOrder(skipGrouped(order.items))">{{ $t('Remake order') }}</a>
        </p>
      </div>
    </div>
    <div class="row fs16 mb35">
      <div class="col-xs-12 h4">
        <h4>{{ $t('Items ordered') }}</h4>
        <table class="brdr-1 brdr-cl-bg-secondary">
          <thead>
            <tr>
              <th class="serif lh20">
                {{ $t('Product Name') }}
              </th>
              <th class="serif lh20">
                {{ $t('SKU') }}
              </th>
              <th class="serif lh20">
                {{ $t('Price') }}
              </th>
              <th class="serif lh20">
                {{ $t('Qty') }}
              </th>
              <th class="serif lh20">
                {{ $t('Subtotal') }}
              </th>
              <th class="serif lh20">
                {{ $t('Thumbnail') }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr class="brdr-top-1 brdr-cl-bg-secondary" v-for="item in skipGrouped(order.items)" :key="item.item_id">
              <td class="fs-medium lh25" :data-th="$t('Product Name')">
                {{ item.name }}
              </td>
              <td class="fs-medium lh25" :data-th="$t('SKU')">
                {{ item.sku }}
              </td>
              <td class="fs-medium lh25" :data-th="$t('Price')">
                {{ item.price_incl_tax | price }}
              </td>
              <td class="fs-medium lh25 align-right" :data-th="$t('Qty')">
                {{ item.qty_ordered }}
              </td>
              <td class="fs-medium lh25" :data-th="$t('Subtotal')">
                {{ item.row_total_incl_tax | price }}
              </td>
              <td class="fs-medium lh25">
                <product-image :image="{src: itemThumbnail[item.sku]}" />
              </td>
            </tr>
          </tbody>
          <tfoot>
            <tr class="brdr-top-1 brdr-cl-bg-secondary">
              <td colspan="5" class="align-right">
                {{ $t('Subtotal') }}
              </td>
              <td>{{ order.subtotal | price }}</td>
            </tr>
            <tr>
              <td colspan="5" class="align-right">
                {{ $t('Shipping') }}
              </td>
              <td>{{ order.shipping_amount | price }}</td>
            </tr>
            <tr>
              <td colspan="5" class="align-right">
                {{ $t('Tax') }}
              </td>
              <td>{{ order.tax_amount + order.discount_tax_compensation_amount | price }}</td>
            </tr>
            <tr v-if="order.discount_amount">
              <td colspan="5" class="align-right">
                {{ $t('Discount') }}
              </td>
              <td>{{ order.discount_amount | price }}</td>
            </tr>
            <tr>
              <td colspan="5" class="align-right">
                {{ $t('Grand total') }}
              </td>
              <td>{{ order.grand_total | price }}</td>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
    <div class="row fs16 mb35">
      <div class="col-xs-12 h4">
        <h4>{{ $t('Order informations') }}</h4>
        <div class="row">
          <div class="col-sm-6 col-md-3">
            <h5>{{ $t('Shipping address') }}</h5>
            <address>
              <p>{{ shippingAddress.firstname }} {{ shippingAddress.lastname }}</p>
              <p>{{ shippingAddress.street[0] }} {{ shippingAddress.street[1] }}</p>
              <p>{{ shippingAddress.postcode }} {{ shippingAddress.city }}</p>
              <p>{{ shippingAddress.country }}</p>
            </address>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5>{{ $t('Shipping method') }}</h5>
            <p>{{ order.shipping_description }}</p>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5>{{ $t('Billing address') }}</h5>
            <address>
              <p>{{ billingAddress.firstname }} {{ billingAddress.lastname }}</p>
              <p>{{ billingAddress.street[0] }} {{ billingAddress.street[1] }}</p>
              <p>{{ billingAddress.postcode }} {{ billingAddress.city }}</p>
              <p>{{ billingAddress.country }}</p>
            </address>
          </div>
          <div class="col-sm-6 col-md-3">
            <h5>{{ $t('Payment method') }}</h5>
            <p>{{ paymentMethod }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import MyOrder from '@vue-storefront/core/compatibility/components/blocks/MyAccount/MyOrder'
import ReturnIcon from 'theme/components/core/blocks/Header/ReturnIcon'
import ProductImage from 'theme/components/core/ProductImage'
import { getThumbnailPath } from '@vue-storefront/core/helpers'
import { mapActions } from 'vuex'

export default {
  mixins: [MyOrder],
  components: {
    ReturnIcon,
    ProductImage
  },
  data () {
    return {
      itemThumbnail: []
    }
  },
  methods: {
    ...mapActions({
      getProduct: 'product/single'
    })
  },
  beforeMount () {
    this.skipGrouped(this.order.items).forEach(async item => {
      if (this.itemThumbnail[item.sku] === undefined || this.itemThumbnail[item.sku] === null) {
        const product = await this.getProduct({ options: { sku: item.sku }, setCurrentProduct: false, setCurrentCategoryPath: false, selectDefaultVariant: false})
        Vue.set(this.itemThumbnail, item.sku, getThumbnailPath(product.image, 80, 80))
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import '~theme/css/variables/colors';
@import '~theme/css/helpers/functions/color';
{'fraction_non_alphanumeric': 0.18443421976136629, 'fraction_numerical': 0.017156671605708492, 'mean_word_length': 1.6284074605451937, 'pattern_counts': {'":': 0, '<': 305, '<?xml version=': 0, '>': 307, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '936914', 'n_tokens_mistral': 4234, 'n_tokens_neox': 4041, 'n_words': 800}