feat: show configurable option values in order history AND feat: show more order details

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 {

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>

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>