From e66a170fcee05e7fefd9fd484a986ad243b5673d Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Fri, 13 May 2022 14:25:13 +0200
Subject: [PATCH 1/2] feat: show configurable option values in order history

M2-510
---
 .../MyAccount/OrderHistory/SingleOrder.vue     | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
index 25409a119..837759d87 100644
--- a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
@@ -29,6 +29,13 @@
           >
             <SfTableData class="products__name">
               {{ item.name }}
+              <div
+                v-for="option in item.configurableProductOptions"
+                :key="option.label"
+              >
+                <span class="configurable-option-label">{{ option.label }}</span>
+                <span>{{ option.value }}</span>
+              </div>
             </SfTableData>
             <SfTableData>{{ item.quantity }}</SfTableData>
             <SfTableData>{{ $fc(item.price) }}</SfTableData>
@@ -102,10 +109,15 @@ export default defineComponent({
           },
         ],
         items: order.items?.map(({
-          product_sku, product_name, quantity_ordered = 0, product_sale_price = { value: 0 },
+          product_sku,
+          product_name,
+          quantity_ordered = 0,
+          product_sale_price = { value: 0 },
+          selected_options = [],
         }) => ({
           key: product_sku,
           name: product_name,
+          configurableProductOptions: selected_options,
           quantity: quantity_ordered,
           price: product_sale_price.value ?? 0,
         })) ?? [],
@@ -143,6 +155,10 @@ export default defineComponent({
   }
 }
 
+.configurable-option-label {
+  font-weight: var(--font-weight--semibold)
+}
+
 .products {
   --table-column-flex: 1;
 

From e654e360d4d81eab5787d57543625f64017a9149 Mon Sep 17 00:00:00 2001
From: Artur Tagisow <atagisow@vuestorefront.io>
Date: Sun, 15 May 2022 11:20:09 +0200
Subject: [PATCH 2/2] feat: more order details in order history single order
 view

M2-509
---
 .../src/api/customerOrders/customerOrders.ts  |  12 ++
 .../OrderHistory/OrderSummaryAddressRow.vue   |  58 +++++
 .../OrderHistory/OrderSummaryRow.vue          |  64 ++++++
 .../MyAccount/OrderHistory/SingleOrder.vue    | 198 +++++++++---------
 4 files changed, 231 insertions(+), 101 deletions(-)
 create mode 100644 packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryAddressRow.vue
 create mode 100644 packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryRow.vue

diff --git a/packages/api-client/src/api/customerOrders/customerOrders.ts b/packages/api-client/src/api/customerOrders/customerOrders.ts
index d23a10675..2c2e95f2e 100644
--- a/packages/api-client/src/api/customerOrders/customerOrders.ts
+++ b/packages/api-client/src/api/customerOrders/customerOrders.ts
@@ -238,6 +238,18 @@ export default gql`
             suffix
             telephone
           }
+          billing_address {
+            city
+            country_code
+            firstname
+            lastname
+            postcode
+            prefix
+            region
+            street
+            suffix
+            telephone
+          }
           shipping_method
         }
         page_info {
diff --git a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryAddressRow.vue b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryAddressRow.vue
new file mode 100644
index 000000000..376b8411e
--- /dev/null
+++ b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryAddressRow.vue
@@ -0,0 +1,58 @@
+<template>
+  <OrderSummaryRow>
+    <template #label>
+      <slot name="label" />
+    </template>
+    <template #value>
+      <div>
+        {{ address.firstname }} {{ address.lastname }}
+      </div>
+      <div>
+        {{ address.street.join(' ') }}
+      </div>
+      <div>
+        {{ address.city }},
+        {{ address.region }},
+        {{ address.postcode }},
+      </div>
+      <div>
+        {{ countryName }},
+      </div>
+      <div>
+        {{ address.telephone }}
+      </div>
+    </template>
+  </OrderSummaryRow>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, PropType } from '@nuxtjs/composition-api';
+import type { CustomerOrder, Country } from '~/modules/GraphQL/types';
+import OrderSummaryRow from '~/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryRow.vue';
+
+type Address = CustomerOrder['billing_address'] | CustomerOrder['shipping_address'];
+export default defineComponent({
+  components: {
+    OrderSummaryRow,
+  },
+  props: {
+    address: {
+      type: Object as PropType<Address>,
+      required: true,
+    },
+    countries: {
+      type: Array as PropType<Country[]>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const countryName = computed(
+      () => props.countries.find(({ id }) => props.address.country_code === id).full_name_locale,
+    );
+
+    return {
+      countryName,
+    };
+  },
+});
+</script>
diff --git a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryRow.vue b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryRow.vue
new file mode 100644
index 000000000..870f7752f
--- /dev/null
+++ b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryRow.vue
@@ -0,0 +1,64 @@
+<template>
+  <SfTableRow :class="['order-summary', {'order-summary--bold': bold }]">
+    <SfTableData class="order-summary__spacer" />
+
+    <SfTableData><slot name="label" /></SfTableData>
+    <SfTableData><slot name="value" /></SfTableData>
+  </SfTableRow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@nuxtjs/composition-api';
+
+export default defineComponent({
+  props: {
+    bold: { type: Boolean, default: false },
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.order-summary {
+  position: relative;
+  display: block;
+  background-color: var(--c-light);
+  pointer-events: none;
+
+  @include for-mobile {
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      display: block;
+      background-color: var(--c-light);
+      top: 0;
+      height: 100%;
+      width: var(--spacer-sm);
+    }
+
+    &:before {
+      left: calc(-1 * var(--spacer-sm));
+    }
+
+    &:after {
+      right: calc(-1 * var(--spacer-sm));
+    }
+  }
+
+  ::v-deep tr {
+    --table-row-padding: var(--spacer-xs) var(--spacer-sm);
+  }
+
+  &--bold {
+    td {
+      --table-data-font-weight: var(--font-weight--semibold);
+    }
+  }
+
+  &__spacer {
+    @include for-desktop {
+      --table-column-flex: 2;
+    }
+  }
+}
+</style>
diff --git a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
index 837759d87..27b5e418a 100644
--- a/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
+++ b/packages/theme/modules/customer/pages/MyAccount/OrderHistory/SingleOrder.vue
@@ -4,7 +4,7 @@
       data-cy="order-history-tab_my-orders"
       :title="$t('My orders')"
     >
-      <div v-if="loading || currentOrder === null">
+      <div v-if="asyncData === null">
         <SfLoader />
       </div>
       <div v-else>
@@ -24,31 +24,94 @@
             <SfTableHeader>{{ $t('Price') }}</SfTableHeader>
           </SfTableHeading>
           <SfTableRow
-            v-for="item in currentOrder.items"
-            :key="item.key"
+            v-for="item in asyncData.order.items"
+            :key="item.product_sku"
           >
             <SfTableData class="products__name">
-              {{ item.name }}
+              {{ item.product_name }}
               <div
-                v-for="option in item.configurableProductOptions"
+                v-for="option in item.selected_options"
                 :key="option.label"
               >
                 <span class="configurable-option-label">{{ option.label }}</span>
                 <span>{{ option.value }}</span>
               </div>
             </SfTableData>
-            <SfTableData>{{ item.quantity }}</SfTableData>
-            <SfTableData>{{ $fc(item.price) }}</SfTableData>
+            <SfTableData>{{ item.quantity_ordered }}</SfTableData>
+            <SfTableData>{{ $fc(item.product_sale_price.value) }}</SfTableData>
           </SfTableRow>
-          <SfTableRow
-            v-for="property in currentOrder.properties"
-            :key="property.name"
-            class="order-summary"
+
+          <OrderSummaryRow>
+            <template #label>
+              {{ $t('Order ID') }}
+            </template>
+            <template #value>
+              {{ asyncData.order.number }}
+            </template>
+          </OrderSummaryRow>
+
+          <OrderSummaryRow>
+            <template #label>
+              {{ $t('Date') }}
+            </template>
+            <template #value>
+              {{ getDate(asyncData.order) }}
+            </template>
+          </OrderSummaryRow>
+
+          <OrderSummaryRow>
+            <template #label>
+              {{ $t('Status') }}
+            </template>
+            <template #value>
+              {{ getStatus(asyncData.order) }}
+            </template>
+          </OrderSummaryRow>
+
+          <OrderSummaryRow bold>
+            <template #label>
+              {{ $t('Price') }}
+            </template>
+            <template #value>
+              {{ $fc(asyncData.order.total.base_grand_total.value) }}
+            </template>
+          </OrderSummaryRow>
+
+          <OrderSummaryAddressRow
+            :address="asyncData.order.shipping_address"
+            :countries="asyncData.countries"
           >
-            <SfTableData class="order-summary__spacer" />
-            <SfTableData>{{ property.name }}</SfTableData>
-            <SfTableData>{{ property.value }}</SfTableData>
-          </SfTableRow>
+            <template #label>
+              {{ $t('Shipping Address') }}
+            </template>
+          </OrderSummaryAddressRow>
+
+          <OrderSummaryRow>
+            <template #label>
+              {{ $t('Shipping Method') }}
+            </template>
+            <template #value>
+              {{ asyncData.order.shipping_method }}
+            </template>
+          </OrderSummaryRow>
+
+          <OrderSummaryAddressRow
+            :address="asyncData.order.billing_address"
+            :countries="asyncData.countries"
+          >
+            <template #label>
+              {{ $t('Billing Address') }}
+            </template>
+          </OrderSummaryAddressRow>
+
+          <OrderSummaryRow>
+            <template #label>
+              {{ $t('Payment Method') }}
+            </template>
+            <template #value>
+              {{ asyncData.order.payment_methods[0].name }}
+            </template>
+          </OrderSummaryRow>
         </SfTable>
       </div>
     </SfTab>
@@ -63,10 +126,13 @@ import {
   SfLoader,
 } from '@storefront-ui/vue';
 import {
-  computed, defineComponent, useAsync, useContext,
+  defineComponent, useAsync, useContext,
 } from '@nuxtjs/composition-api';
 import { useUserOrder } from '~/modules/customer/composables/useUserOrder';
-import { orderGetters } from '~/getters';
+import orderGetters from '~/modules/checkout/getters/orderGetters';
+import OrderSummaryRow from '~/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryRow.vue';
+import OrderSummaryAddressRow from '~/modules/customer/pages/MyAccount/OrderHistory/OrderSummaryAddressRow.vue';
+import { useCountrySearch } from '~/composables';
 
 export default defineComponent({
   name: 'SingleOrder',
@@ -75,62 +141,36 @@ export default defineComponent({
     SfTable,
     SfTabs,
     SfLoader,
+    OrderSummaryRow,
+    OrderSummaryAddressRow,
   },
   props: { orderId: { type: String, required: true } },
   setup(props) {
     const context = useContext();
     const { search, loading } = useUserOrder();
-    const currentOrderRawData = useAsync(() => search({ filter: { number: { eq: props.orderId } } }), props.orderId);
-
-    const currentOrder = computed(() => {
-      const order = currentOrderRawData.value?.items[0] ?? null;
+    const { search: searchCountries } = useCountrySearch();
+    const asyncData = useAsync(async () => {
+      const orderResult = await search({ filter: { number: { eq: props.orderId } } });
+      const order = orderResult.items[0] ?? null;
 
-      if (order === null) {
-        return null;
-      }
+      const uniqueCountryCodePromises = [...new Set([order.shipping_address.country_code, order.billing_address.country_code])]
+        .map((countryCode) => searchCountries({ id: countryCode }));
+      const countries = await Promise.all(uniqueCountryCodePromises);
 
       return {
-        properties: [
-          {
-            name: context.i18n.t('Order ID'),
-            value: orderGetters.getId(order),
-          },
-          {
-            name: context.i18n.t('Date'),
-            value: orderGetters.getDate(order),
-          },
-          {
-            name: context.i18n.t('Status'),
-            value: orderGetters.getStatus(order),
-          },
-          {
-            name: context.i18n.t('Price'),
-            value: context.$fc(orderGetters.getPrice(order)),
-          },
-        ],
-        items: order.items?.map(({
-          product_sku,
-          product_name,
-          quantity_ordered = 0,
-          product_sale_price = { value: 0 },
-          selected_options = [],
-        }) => ({
-          key: product_sku,
-          name: product_name,
-          configurableProductOptions: selected_options,
-          quantity: quantity_ordered,
-          price: product_sale_price.value ?? 0,
-        })) ?? [],
+        order,
+        countries,
       };
     });
 
     const ordersRoute = context.localeRoute({ name: 'customer-order-history' });
 
     return {
-      currentOrder,
       loading,
       ordersRoute,
-      currentOrderRawData,
+      asyncData,
+      getDate: orderGetters.getDate,
+      getStatus: orderGetters.getStatus,
     };
   },
 });
@@ -179,50 +219,6 @@ export default defineComponent({
   }
 }
 
-.order-summary {
-  position: relative;
-  display: block;
-  background-color: var(--c-light);
-  pointer-events: none;
-
-  @include for-mobile {
-    &:before,
-    &:after {
-      content: "";
-      position: absolute;
-      display: block;
-      background-color: var(--c-light);
-      top: 0;
-      height: 100%;
-      width: var(--spacer-sm);
-    }
-
-    &:before {
-      left: calc(-1 * var(--spacer-sm));
-    }
-
-    &:after {
-      right: calc(-1 * var(--spacer-sm));
-    }
-  }
-
-  ::v-deep tr {
-    --table-row-padding: var(--spacer-xs) var(--spacer-sm);
-  }
-
-  &:last-of-type {
-    td {
-      --table-data-font-weight: var(--font-weight--semibold);
-    }
-  }
-
-  &__spacer {
-    @include for-desktop {
-      --table-column-flex: 2;
-    }
-  }
-}
-
 .products {
   box-sizing: border-box;
   flex: 1;