feat: implemented user order details

packages/commercetools/api-client/src/fragments/index.ts

@@ -133,6 +133,7 @@ export const CartFragment = `
 
 export const OrderFragment = `
   ${LineItemFragment}
+  ${AddressFragment}
 
   fragment DefaultOrder on Order {
     lineItems {
@@ -141,7 +142,29 @@ export const OrderFragment = `
     totalPrice {
       centAmount
     }
+    billingAddress {
+      ...DefaultAddress
+    }
+    shippingAddress {
+      ...DefaultAddress
+    }
+    orderNumber
     orderState
+    taxedPrice {
+      totalNet {
+        centAmount
+      }
+      totalGross {
+        centAmount
+      }
+      taxPortions {
+        rate
+        amount {
+          centAmount
+        }
+        name
+      }
+    }
     id
     version
     createdAt

packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts

@@ -2,33 +2,77 @@ import {
   getOrderDate,
   getOrderId,
   getOrderStatus,
-  getOrderPrice
+  getOrderPrice,
+  getOrderItems,
+  getOrderBillingAddress,
+  getOrderShippingAddress
 } from './../../src/getters/orderGetters';
 import { OrderState, Order } from './../../src/types/GraphQL';
 
-const order: Order = {
+const generatePrice = (centAmount: number) => ({
+  centAmount,
+  currencyCode: 'USD'
+});
+
+const order: Order = Object.freeze({
   createdAt: 123456789,
   id: '645ygdf',
   orderState: OrderState.Complete,
-  totalPrice: {
-    centAmount: 12345,
-    currencyCode: 'USD'
-  }
-} as any;
+  totalPrice: generatePrice(12345),
+  taxedPrice: {
+    totalNet: generatePrice(1111),
+    totalGross: generatePrice(2222),
+    taxPortions: [
+      {
+        name: '15% incl.',
+        amount: generatePrice(3333),
+        rate: 0.15
+      },
+      {
+        name: '25% incl.',
+        amount: generatePrice(4444),
+        rate: 0.25
+      }
+    ]
+  },
+  billingAddress: {
+    id: '1234',
+    firstName: 'Vue',
+    lastName: 'Developer',
+    __typename: 'Address'
+  },
+  shippingAddress: {
+    id: '5678',
+    firstName: 'Java',
+    lastName: 'Script',
+    __typename: 'Address'
+  },
+  lineItems: [
+    {
+      id: 'product-1'
+    },
+    {
+      id: 'product-2'
+    }
+  ]
+}) as any;
 
 describe('[commercetools-getters] order getters', () => {
   it('returns default values', () => {
     expect(getOrderDate(null)).toBe('');
     expect(getOrderId(null)).toBe('');
     expect(getOrderStatus(null)).toBe('');
-    expect(getOrderPrice(null)).toBe(null);
+    expect(typeof getOrderPrice(null)).toBe('object');
+    expect(typeof getOrderBillingAddress(null as any)).toEqual('string');
+    expect(typeof getOrderShippingAddress(null as any)).toEqual('string');
+    expect(getOrderItems(null as any)).toHaveLength(0);
   });
 
   it('returns date', () => {
     expect(getOrderDate(order)).toEqual(123456789);
   });
 
-  it('returns order number', () => {
+  it('returns order id', () => {
     expect(getOrderId(order)).toEqual('645ygdf');
   });
 
@@ -37,6 +81,23 @@ describe('[commercetools-getters] order getters', () => {
   });
 
   it('returns total gross', () => {
-    expect(getOrderPrice(order)).toEqual(123.45);
+    expect(getOrderPrice(order).regular).toEqual(123.45);
+  });
+
+  it('returns billing address', () => {
+    expect(typeof getOrderBillingAddress(order)).toEqual('string');
+  });
+
+  it('returns shipping address', () => {
+    expect(typeof getOrderShippingAddress(order)).toEqual('string');
+  });
+
+  it('returns line items', () => {
+    const items = getOrderItems(order);
+
+    expect(Array.isArray(items)).toBeTruthy();
+    expect(items).toHaveLength(2);
+    expect(items[0].id).toEqual('product-1');
+    expect(items[1].id).toEqual('product-2');
   });
 });

packages/commercetools/composables/src/getters/orderGetters.ts

@@ -1,5 +1,5 @@
-import { UserOrderGetters, AgnosticOrderStatus } from '@vue-storefront/interfaces';
-import { Order, OrderState } from './../types/GraphQL';
+import { UserOrderGetters, AgnosticOrderStatus, AgnosticPrice } from '@vue-storefront/interfaces';
+import { Order, OrderState, LineItem, Money, Address } from './../types/GraphQL';
 
 export const getOrderDate = (order: Order): string => order?.createdAt || '';
 
@@ -12,15 +12,33 @@ const orderStatusMap = {
   [OrderState.Cancelled]: AgnosticOrderStatus.Cancelled
 };
 
+const getPrice = (money: Money): AgnosticPrice => ({
+  regular: money?.centAmount ? money.centAmount / 100 : 0
+});
+
 export const getOrderStatus = (order: Order): AgnosticOrderStatus | '' => order?.orderState ? orderStatusMap[order.orderState] : '';
 
-export const getOrderPrice = (order: Order): number | null => order ? order.totalPrice.centAmount / 100 : null;
+export const getOrderItems = (order: Order): LineItem[] => order?.lineItems || [];
+
+export const getOrderPrice = (order: Order): AgnosticPrice => getPrice(order?.totalPrice);
+
+// TODO: billing and shipping addresses are returned as string temporary. It's a part of discussion now: https://github.com/DivanteLtd/next/pull/361
+const transformAddressToString = (address: Address): string => (
+  `${address.country}, ${address.postalCode}, ${address.city}, ${address.streetName}, ${address.streetNumber}`
+);
+
+export const getOrderBillingAddress = (order: Order): string => transformAddressToString(order?.billingAddress || {} as Address);
+
+export const getOrderShippingAddress = (order: Order): string => transformAddressToString(order?.shippingAddress || {} as Address);
 
-const orderGetters: UserOrderGetters<Order> = {
+const orderGetters: UserOrderGetters<Order, LineItem> = {
   getDate: getOrderDate,
   getId: getOrderId,
   getStatus: getOrderStatus,
-  getPrice: getOrderPrice
+  getPrice: getOrderPrice,
+  getItems: getOrderItems,
+  getBillingAddress: getOrderBillingAddress,
+  getShippingAddress: getOrderShippingAddress
 };
 
 export default orderGetters;

packages/core/interfaces/src/index.ts

@@ -207,11 +207,14 @@ export interface CheckoutGetters<SHIPPING_METHOD> {
   [getterName: string]: (element: any, options?: any) => unknown;
 }
 
-export interface UserOrderGetters<ORDER> {
+export interface UserOrderGetters<ORDER, ORDER_ITEM> {
   getDate: (order: ORDER) => string;
   getId: (order: ORDER) => string;
   getStatus: (order: ORDER) => string;
-  getPrice: (order: ORDER) => number;
+  getPrice: (order: ORDER) => AgnosticPrice;
+  getItems: (order: ORDER) => ORDER_ITEM[];
+  getBillingAddress: (address: ORDER) => string;
+  getShippingAddress: (address: ORDER) => string;
   [getterName: string]: (element: any, options?: any) => unknown;
 }
 

packages/core/theme-module/index.js

@@ -90,7 +90,7 @@ module.exports = function DefaultThemeModule(moduleOptions) {
     });
     routes.push({
       name: 'my-account',
-      path: '/my-account/:pageName?',
+      path: '/my-account/:pageName?/:id?',
       component: resolve(projectLocalThemeDir, 'pages/MyAccount.vue')
     });
     routes.push({

packages/core/theme-module/theme/pages/MyAccount.vue

@@ -37,18 +37,23 @@
         <SfContentPage title="My reviews">
           <MyReviews />
         </SfContentPage>
+        <SfContentPage title="Order details">
+          <OrderDetails />
+        </SfContentPage>
       </SfContentCategory>
       <SfContentPage title="Log out" />
     </SfContentPages>
   </div>
 </template>
 <script>
 import { SfBreadcrumbs, SfContentPages } from '@storefront-ui/vue';
+import { ref } from '@vue/composition-api';
 import MyProfile from './MyAccount/MyProfile';
 import ShippingDetails from './MyAccount/ShippingDetails';
 import LoyaltyCard from './MyAccount/LoyaltyCard';
 import MyNewsletter from './MyAccount/MyNewsletter';
 import OrderHistory from './MyAccount/OrderHistory';
+import OrderDetails from './MyAccount/OrderDetails';
 import MyReviews from './MyAccount/MyReviews';
 import auth from '../middleware/auth';
 
@@ -63,10 +68,36 @@ export default {
     LoyaltyCard,
     MyNewsletter,
     OrderHistory,
+    OrderDetails,
     MyReviews
   },
-  data() {
+  setup(props, context) {
+    const { $route, $router } = context.root;
+    const activePage = ref('My profile');
+    const entityId = ref(null);
+
+    const changeActivePage = (title) => {
+      if (title === 'Log out') {
+        return;
+      }
+
+      $router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
+    };
+
+    const { pageName, id } = $route.params;
+
+    if (pageName) {
+      activePage.value = (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ');
+    }
+
+    if (id) {
+      entityId.value = id;
+    }
+
     return {
+      changeActivePage,
+      activePage,
+      entityId,
       breadcrumbs: [
         {
           text: 'Home',
@@ -118,26 +149,6 @@ export default {
         ]
       }
     };
-  },
-  computed: {
-    activePage() {
-      const { pageName } = this.$route.params;
-
-      if (pageName) {
-        return (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ');
-      }
-
-      return 'My profile';
-    }
-  },
-  methods: {
-    changeActivePage(title) {
-      if (title === 'Log out') {
-        return;
-      }
-
-      this.$router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
-    }
   }
 };
 </script>