[PWA-893] My Account: Order History - Remove @client directive

packages/peregrine/lib/talons/OrderHistoryPage/__tests__/useOrderHistoryPage.spec.js

@@ -12,18 +12,23 @@ jest.mock('react-router-dom', () => {
     };
 });
 
-jest.mock('@apollo/client', () => ({
-    useQuery: jest.fn().mockReturnValue({
-        data: {
-            customer: {
-                orders: {
-                    items: ['order1', 'order2']
+jest.mock('@apollo/client', () => {
+    const apolloClient = jest.requireActual('@apollo/client');
+
+    return {
+        ...apolloClient,
+        useQuery: jest.fn().mockReturnValue({
+            data: {
+                customer: {
+                    orders: {
+                        items: ['order1', 'order2']
+                    }
                 }
-            }
-        },
-        loading: false
-    })
-}));
+            },
+            loading: false
+        })
+    };
+});
 
 jest.mock('@magento/peregrine/lib/context/app', () => {
     const state = {};

packages/peregrine/lib/talons/OrderHistoryPage/__tests__/useOrderRow.spec.js

@@ -5,9 +5,14 @@ import { useQuery } from '@apollo/client';
 import createTestInstance from '../../../util/createTestInstance';
 import { useOrderRow } from '../useOrderRow';
 
-jest.mock('@apollo/client', () => ({
-    useQuery: jest.fn()
-}));
+jest.mock('@apollo/client', () => {
+    const apolloClient = jest.requireActual('@apollo/client');
+
+    return {
+        ...apolloClient,
+        useQuery: jest.fn()
+    };
+});
 
 const log = jest.fn();
 const Component = props => {

packages/peregrine/lib/talons/OrderHistoryPage/orderHistoryPage.gql.js

@@ -0,0 +1,99 @@
+import { gql } from '@apollo/client';
+
+export const GET_CUSTOMER_ORDERS = gql`
+    query GetCustomerOrders {
+        customer {
+            id
+            orders {
+                items {
+                    billing_address {
+                        city
+                        country_code
+                        firstname
+                        lastname
+                        postcode
+                        region
+                        street
+                        telephone
+                    }
+                    id
+                    invoices {
+                        id
+                    }
+                    items {
+                        id
+                        product_name
+                        product_sale_price {
+                            currency
+                            value
+                        }
+                        product_sku
+                        product_url_key
+                        selected_options {
+                            label
+                            value
+                        }
+                        quantity_ordered
+                    }
+                    number
+                    order_date
+                    payment_methods {
+                        name
+                        type
+                        additional_data {
+                            name
+                            value
+                        }
+                    }
+                    shipments {
+                        id
+                        tracking {
+                            carrier
+                            number
+                        }
+                    }
+                    shipping_address {
+                        city
+                        country_code
+                        firstname
+                        lastname
+                        postcode
+                        region
+                        street
+                        telephone
+                    }
+                    shipping_method
+                    status
+                    total {
+                        discounts {
+                            amount {
+                                currency
+                                value
+                            }
+                        }
+                        grand_total {
+                            currency
+                            value
+                        }
+                        subtotal {
+                            currency
+                            value
+                        }
+                        total_shipping {
+                            currency
+                            value
+                        }
+                        total_tax {
+                            currency
+                            value
+                        }
+                    }
+                }
+            }
+        }
+    }
+`;
+
+export default {
+    getCustomerOrdersQuery: GET_CUSTOMER_ORDERS
+};

packages/venia-ui/lib/components/OrderHistoryPage/orderRow.gql.js → packages/peregrine/lib/talons/OrderHistoryPage/orderRow.gql.js

@@ -1,8 +1,8 @@
 import { gql } from '@apollo/client';
 
-export const GET_PRODUCT_THUMBNAILS_BY_SKU = gql`
-    query GetProductThumbnailsBySku($skus: [String!]!) {
-        products(filter: { sku: { in: $skus } }) {
+export const GET_PRODUCT_THUMBNAILS_BY_URL_KEY = gql`
+    query GetProductThumbnailsByURLKey($urlKeys: [String!]!) {
+        products(filter: { url_key: { in: $urlKeys } }) {
             items {
                 id
                 sku
@@ -18,7 +18,5 @@ export const GET_PRODUCT_THUMBNAILS_BY_SKU = gql`
 `;
 
 export default {
-    queries: {
-        getProductThumbnailsQuery: GET_PRODUCT_THUMBNAILS_BY_SKU
-    }
+    getProductThumbnailsQuery: GET_PRODUCT_THUMBNAILS_BY_URL_KEY
 };

packages/peregrine/lib/talons/OrderHistoryPage/useOrderHistoryPage.js

@@ -4,13 +4,11 @@ import { useQuery } from '@apollo/client';
 
 import { useAppContext } from '../../context/app';
 import { useUserContext } from '../../context/user';
-import { useTypePolicies } from '../../hooks/useTypePolicies';
+import DEFAULT_OPERATIONS from './orderHistoryPage.gql';
 
-export const useOrderHistoryPage = props => {
-    const { queries, types } = props;
-    const { getCustomerOrdersQuery } = queries;
-
-    useTypePolicies(types);
+export const useOrderHistoryPage = (props = {}) => {
+    const { operations = DEFAULT_OPERATIONS } = props;
+    const { getCustomerOrdersQuery } = operations;
 
     const [
         ,

packages/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js

@@ -1,6 +1,8 @@
 import { useCallback, useState, useMemo } from 'react';
 import { useQuery } from '@apollo/client';
 
+import DEFAULT_OPERATIONS from './orderRow.gql';
+
 /**
  * @function
  *
@@ -11,18 +13,18 @@ import { useQuery } from '@apollo/client';
  * @returns {OrderRowTalonProps}
  */
 export const useOrderRow = props => {
-    const { items, queries } = props;
-    const { getProductThumbnailsQuery } = queries;
+    const { items, operations = DEFAULT_OPERATIONS } = props;
+    const { getProductThumbnailsQuery } = operations;
 
-    const skus = useMemo(() => {
-        return items.map(item => item.product_sku).sort();
+    const urlKeys = useMemo(() => {
+        return items.map(item => item.product_url_key).sort();
     }, [items]);
 
     const { data, loading } = useQuery(getProductThumbnailsQuery, {
         fetchPolicy: 'cache-and-network',
         nextFetchPolicy: 'cache-first',
         variables: {
-            skus
+            urlKeys
         }
     });
     const imagesData = useMemo(() => {

packages/venia-ui/__mocks__/react-intl.js

@@ -7,6 +7,6 @@ const intl = reactIntl.createIntl({
 
 module.exports = {
     ...reactIntl,
-    FormattedMessage: jest.fn(({ defaultMessage }) => defaultMessage),
+    FormattedMessage: jest.fn(({ defaultMessage, id }) => defaultMessage || id),
     useIntl: jest.fn(() => intl)
 };

packages/venia-ui/i18n/en_US.json

@@ -336,5 +336,6 @@
     "wishlistPage.disabledMessage": "Sorry, this feature has been disabled.",
     "wishlistPage.fetchErrorMessage": "Something went wrong. Please refresh and try again.",
     "wishlistPage.headingText": "Favorites Lists",
-    "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available."
+    "wishlistPage.wishlistDisabledMessage": "The wishlist is not currently available.",
+    "orderDetails.waitingOnTracking": "Waiting for tracking information"
 }

packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/billingInformation.spec.js.snap

@@ -11,20 +11,14 @@ exports[`should render properly 1`] = `
   </div>
   <div>
     <span>
-      Gooseton
-    </span>
-    <span>
-      Jr
+      Gooseton Jr
     </span>
   </div>
   <div>
     2134, Apt 123, Goose Drive
   </div>
   <div>
-    Austin, TX, 78451
-  </div>
-  <div>
-    USA
+    Austin, TX 78451 USA
   </div>
 </div>
 `;

packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/item.spec.js.snap

@@ -4,7 +4,7 @@ exports[`should render properly 1`] = `
 <div>
   <div
     componentName="Link Component"
-    to="/carina-cardigan.html"
+    to="carina-cardigan.html"
   >
     <div
       className="undefined undefined"
@@ -23,14 +23,23 @@ exports[`should render properly 1`] = `
         onError={[Function]}
         onLoad={[Function]}
         sizes="50px"
-        srcSet=""
+        src="https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=50&height=62.5&fit=cover"
+        srcSet="https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=40&height=50&fit=cover 40w,
+https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=80&height=100&fit=cover 80w,
+https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=160&height=200&fit=cover 160w,
+https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=320&height=400&fit=cover 320w,
+https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=640&height=800&fit=cover 640w,
+https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=960&height=1200&fit=cover 960w,
+https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=1280&height=1600&fit=cover 1280w,
+https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=1600&height=2000&fit=cover 1600w,
+https://www.venia.com/product1-thumbnail.jpg?auto=webp&format=pjpg&width=2560&height=3200&fit=cover 2560w"
         width={50}
       />
     </div>
   </div>
   <div
     componentName="Link Component"
-    to="/carina-cardigan.html"
+    to="carina-cardigan.html"
   >
     Product 1
   </div>
@@ -45,30 +54,29 @@ exports[`should render properly 1`] = `
     </div>
   </dl>
   <span>
-    <div
-      componentName="Formatted Message Component"
-      id="orderDetails.quantity"
-      values={
-        Object {
-          "quantity": 3,
-        }
-      }
-    />
-  </span>
-  <span>
-    $100.00
+    orderDetails.quantity
   </span>
+  <div>
+    <span>
+      $
+    </span>
+    <span>
+      100
+    </span>
+    <span>
+      .
+    </span>
+    <span>
+      00
+    </span>
+  </div>
   <button
     disabled={false}
     onClick={[Function]}
     type="button"
   >
     <span>
-      <div
-        componentName="Formatted Message Component"
-        defaultMessage="Buy Again"
-        id="orderDetails.buyAgain"
-      />
+      Buy Again
     </span>
   </button>
   <button
@@ -77,11 +85,7 @@ exports[`should render properly 1`] = `
     type="button"
   >
     <span>
-      <div
-        componentName="Formatted Message Component"
-        defaultMessage="Return This"
-        id="orderDetails.returnThis"
-      />
+      Return This
     </span>
   </button>
 </div>

packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/items.spec.js.snap

@@ -8,6 +8,7 @@ exports[`should render properly 1`] = `
     product_name="Product 3"
     product_sale_price="$100.00"
     product_sku="VA03"
+    product_url_key="valeria-two-layer-tank"
     quantity_ordered={1}
     selected_options={
       Array [
@@ -32,6 +33,7 @@ exports[`should render properly 1`] = `
     product_name="Product 4"
     product_sale_price="$100.00"
     product_sku="VP08"
+    product_url_key="chloe-silk-shell"
     quantity_ordered={1}
     selected_options={
       Array [
@@ -56,6 +58,7 @@ exports[`should render properly 1`] = `
     product_name="Product 5"
     product_sale_price="$100.00"
     product_sku="VSW09"
+    product_url_key="helena-cardigan"
     quantity_ordered={1}
     selected_options={
       Array [

packages/venia-ui/lib/components/OrderHistoryPage/OrderDetails/__tests__/__snapshots__/orderDetails.spec.js.snap

@@ -225,11 +225,7 @@ exports[`should render properly 1`] = `
         </svg>
       </span>
       <span>
-        <div
-          componentName="Formatted Message Component"
-          defaultMessage="Print Receipt"
-          id="orderDetails.printLabel"
-        />
+        Print Receipt
       </span>
     </span>
   </button>