Merge branch 'develop' into PWA-3229-v2

CREATE_RELEASE_NOTES.md

@@ -14,6 +14,7 @@ Here are the steps you need to follow to create PWA Studio release notes. :
 
 **PART 2: Docs repo tasks** (`AdobeDocs/commerce-pwa-studio`):
 
+
 1. Clone the `AdobeDocs/commerce-pwa-studio` repo.
 2. Create a `release` branch from `main`.
 3. Replace auto-generated docs.

packages/peregrine/lib/Apollo/links/__tests__/__snapshots__/index.spec.js.snap

@@ -4,7 +4,6 @@ exports[`returns a map with expected keys and values 1`] = `
 Map {
   "MUTATION_QUEUE" => "mutationQueue",
   "RETRY" => "retry",
-  "AUTH" => "auth",
   "GQL_CACHE" => "gqlCache",
   "STORE" => "store",
   "ERROR" => "error",

packages/peregrine/lib/Apollo/links/__tests__/index.spec.js

@@ -7,10 +7,6 @@ jest.mock('@apollo/client', () => ({
     __esModule: true,
     createHttpLink: jest.fn(() => 'http')
 }));
-jest.mock('@magento/peregrine/lib/Apollo/links/authLink', () => ({
-    __esModule: true,
-    default: jest.fn(() => 'auth')
-}));
 jest.mock('@magento/peregrine/lib/Apollo/links/errorLink', () => ({
     __esModule: true,
     default: jest.fn(() => 'error')

packages/peregrine/lib/Apollo/links/index.js

@@ -1,6 +1,5 @@
 import { createHttpLink } from '@apollo/client';
 
-import createAuthLink from '@magento/peregrine/lib/Apollo/links/authLink';
 import createErrorLink from '@magento/peregrine/lib/Apollo/links/errorLink';
 import createGqlCacheLink from '@magento/peregrine/lib/Apollo/links/gqlCacheLink';
 import createMutationQueueLink from '@magento/peregrine/lib/Apollo/links/mutationQueueLink';
@@ -32,7 +31,6 @@ export const customFetchToShrinkQuery = (uri, options) => {
 };
 
 const getLinks = apiBase => {
-    const authLink = createAuthLink();
     const storeLink = createStoreLink();
     const errorLink = createErrorLink();
     const retryLink = createRetryLink();
@@ -54,7 +52,6 @@ const getLinks = apiBase => {
     const links = new Map()
         .set('MUTATION_QUEUE', mutationQueueLink)
         .set('RETRY', retryLink)
-        .set('AUTH', authLink)
         .set('GQL_CACHE', gqlCacheLink)
         .set('STORE', storeLink)
         .set('ERROR', errorLink)

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

@@ -60,6 +60,7 @@ const CustomerOrdersFragment = gql`
             }
             shipping_method
             status
+            state
             total {
                 discounts {
                     amount {

packages/peregrine/lib/talons/SignIn/__tests__/useSignIn.spec.js

@@ -227,3 +227,17 @@ test('mutation error is returned by talon', async () => {
         `[Error: Uh oh! There was an error signing in :(]`
     );
 });
+
+it('should call handleForgotPassword when Enter key is pressed', () => {
+    const { result } = renderHookWithProviders();
+    const { forgotPasswordHandleEnterKeyPress } = result.current;
+    const enterKeyEvent = { key: 'Enter' };
+    renderHook(() => forgotPasswordHandleEnterKeyPress(enterKeyEvent));
+});
+
+it('should call handleEnterKeyPress when Enter key is pressed', () => {
+    const { result } = renderHookWithProviders();
+    const { handleEnterKeyPress } = result.current;
+    const enterKeyEvent = { key: 'Enter' };
+    renderHook(() => handleEnterKeyPress(enterKeyEvent));
+});

packages/peregrine/lib/talons/SignIn/useSignIn.js

@@ -68,6 +68,7 @@ export const useSignIn = props => {
         async ({ email, password }) => {
             setIsSigningIn(true);
             handleTriggerClick();
+
             try {
                 // Get source cart id (guest cart id).
                 const sourceCartId = cartId;
@@ -159,13 +160,14 @@ export const useSignIn = props => {
         showForgotPassword();
     }, [setDefaultUsername, showForgotPassword]);
 
-    const forgotPasswordHandleEnterKeyPress = useCallback(() => {
+    const forgotPasswordHandleEnterKeyPress = useCallback(
         event => {
             if (event.key === 'Enter') {
                 handleForgotPassword();
             }
-        };
-    }, [handleForgotPassword]);
+        },
+        [handleForgotPassword]
+    );
 
     const handleCreateAccount = useCallback(() => {
         const { current: formApi } = formApiRef;
@@ -177,21 +179,23 @@ export const useSignIn = props => {
         showCreateAccount();
     }, [setDefaultUsername, showCreateAccount]);
 
-    const handleEnterKeyPress = useCallback(() => {
+    const handleEnterKeyPress = useCallback(
         event => {
             if (event.key === 'Enter') {
                 handleCreateAccount();
             }
-        };
-    }, [handleCreateAccount]);
+        },
+        [handleCreateAccount]
+    );
 
-    const signinHandleEnterKeyPress = useCallback(() => {
+    const signinHandleEnterKeyPress = useCallback(
         event => {
             if (event.key === 'Enter') {
                 handleSubmit();
             }
-        };
-    }, [handleSubmit]);
+        },
+        [handleSubmit]
+    );
 
     const errors = useMemo(
         () =>

packages/venia-ui/i18n/en_US.json

@@ -313,11 +313,15 @@
     "orderHistoryPage.ordersCount": "You have {count} orders in your history",
     "orderHistoryPage.search": "Search by Order Number",
     "orderItems.itemsHeading": "Items",
-    "orderProgressBar.deliveredText": "Delivered",
-    "orderProgressBar.processingText": "Processing",
+    "orderProgressBar.deliveredText": "complete",
+    "orderProgressBar.processingText": "processing",
+    "orderProgressBar.newText": "new",
+    "orderProgressBar.pendingPaymentText": "Pending Payment",
+    "orderProgressBar.paymentReviewText": "Payment Review",
     "orderProgressBar.readyToShipText": "Ready to ship",
     "orderProgressBar.shippedText": "Shipped",
-    "orderRow.deliveredText": "Delivered",
+    "orderRow.deliveredText": "complete",
+    "orderProgressBar.closedText": "Closed",
     "orderRow.orderDateText": "Order Date",
     "orderRow.orderNumberText": "Order #",
     "orderRow.orderTotalText": "Order Total",

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

@@ -119,11 +119,10 @@ exports[`it does not render order details if loading is true 1`] = `
     <span
       className="orderStatusBadge"
     >
-      Delivered
+      Complete
     </span>
     <div
       componentName="OrderProgressBar"
-      status="Delivered"
     />
   </div>
   <button
@@ -278,11 +277,10 @@ exports[`it renders collapsed order row 1`] = `
     <span
       className="orderStatusBadge"
     >
-      Delivered
+      Complete
     </span>
     <div
       componentName="OrderProgressBar"
-      status="Delivered"
     />
   </div>
   <button
@@ -565,11 +563,10 @@ exports[`it renders open order row 1`] = `
     <span
       className="orderStatusBadge"
     >
-      Delivered
+      Complete
     </span>
     <div
       componentName="OrderProgressBar"
-      status="Delivered"
     />
   </div>
   <button
@@ -862,11 +859,10 @@ exports[`it renders with missing order information 1`] = `
     <span
       className="orderStatusBadge"
     >
-      Shipped
+      Received
     </span>
     <div
       componentName="OrderProgressBar"
-      status="Shipped"
     />
   </div>
   <button

packages/venia-ui/lib/components/OrderHistoryPage/__tests__/orderRow.spec.js

@@ -226,48 +226,6 @@ test('it renders open order row', () => {
     expect(tree.toJSON()).toMatchSnapshot();
 });
 
-test('it renders shipped status', () => {
-    useOrderRow.mockReturnValue({
-        loading: false,
-        imagesData,
-        isOpen: false,
-        handleContentToggle: jest.fn()
-    });
-
-    const orderWithInvoice = {
-        ...mockOrder,
-        invoices: [1]
-    };
-    const tree = createTestInstance(<OrderRow order={orderWithInvoice} />);
-    const { root } = tree;
-    const orderProgressProps = root.findByProps({
-        componentName: 'OrderProgressBar'
-    }).props;
-
-    expect(orderProgressProps.status).toBe('Delivered');
-});
-
-test('it renders delivered status', () => {
-    useOrderRow.mockReturnValue({
-        loading: false,
-        imagesData,
-        isOpen: false,
-        handleContentToggle: jest.fn()
-    });
-
-    const completedOrder = {
-        ...mockOrder,
-        status: 'Complete'
-    };
-    const tree = createTestInstance(<OrderRow order={completedOrder} />);
-    const { root } = tree;
-    const orderProgressProps = root.findByProps({
-        componentName: 'OrderProgressBar'
-    }).props;
-
-    expect(orderProgressProps.status).toBe('Delivered');
-});
-
 test('it renders with missing order information', () => {
     useOrderRow.mockReturnValue({
         loading: false,

packages/venia-ui/lib/components/OrderHistoryPage/orderProgressBar.js

@@ -13,35 +13,49 @@ const OrderProgressBar = props => {
     const statusStepMap = new Map([
         [
             formatMessage({
-                id: 'orderProgressBar.processingText',
-                defaultMessage: 'Processing'
+                id: 'orderProgressBar.newText',
+                defaultMessage: 'new'
             }),
             1
         ],
         [
             formatMessage({
-                id: 'orderProgressBar.readyToShipText',
-                defaultMessage: 'Ready to ship'
+                id: 'orderProgressBar.processingText',
+                defaultMessage: 'Progressing'
             }),
             2
         ],
         [
             formatMessage({
-                id: 'orderProgressBar.shippedText',
-                defaultMessage: 'Shipped'
+                id: 'orderProgressBar.pendingPaymentText',
+                defaultMessage: 'pending_payment'
+            }),
+            3
+        ],
+        [
+            formatMessage({
+                id: 'orderProgressBar.paymentReviewText',
+                defaultMessage: 'payment_review'
             }),
             3
         ],
         [
             formatMessage({
                 id: 'orderProgressBar.deliveredText',
-                defaultMessage: 'Delivered'
+                defaultMessage: 'complete'
             }),
             4
+        ],
+        [
+            formatMessage({
+                id: 'orderProgressBar.closedText',
+                defaultMessage: 'Closed'
+            }),
+            0
         ]
     ]);
-    const currentStep = statusStepMap.get(status);
 
+    const currentStep = statusStepMap.get(status);
     const classes = useStyle(defaultClasses, props.classes);
 
     const stepElements = useMemo(() => {

packages/venia-ui/lib/components/OrderHistoryPage/orderRow.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { arrayOf, number, shape, string } from 'prop-types';
 import { ChevronDown, ChevronUp } from 'react-feather';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import Price from '@magento/venia-ui/lib/components/Price';
 import { useOrderRow } from '@magento/peregrine/lib/talons/OrderHistoryPage/useOrderRow';
 
@@ -14,14 +14,12 @@ import defaultClasses from './orderRow.module.css';
 
 const OrderRow = props => {
     const { order } = props;
-    const { formatMessage } = useIntl();
     const {
-        invoices,
         items,
         number: orderNumber,
         order_date: orderDate,
-        shipments,
         status,
+        state,
         total
     } = order;
     const { grand_total: grandTotal } = total;
@@ -38,30 +36,8 @@ const OrderRow = props => {
         }
     );
 
-    const hasInvoice = !!invoices.length;
-    const hasShipment = !!shipments.length;
-    let derivedStatus;
-    if (status === 'Complete') {
-        derivedStatus = formatMessage({
-            id: 'orderRow.deliveredText',
-            defaultMessage: 'Delivered'
-        });
-    } else if (hasShipment) {
-        derivedStatus = formatMessage({
-            id: 'orderRow.shippedText',
-            defaultMessage: 'Shipped'
-        });
-    } else if (hasInvoice) {
-        derivedStatus = formatMessage({
-            id: 'orderRow.readyToShipText',
-            defaultMessage: 'Ready to ship'
-        });
-    } else {
-        derivedStatus = formatMessage({
-            id: 'orderRow.processingText',
-            defaultMessage: 'Processing'
-        });
-    }
+    const derivedStatus = status;
+    const derivedProgress = state;
 
     const talonProps = useOrderRow({ items });
     const { loading, isOpen, handleContentToggle, imagesData } = talonProps;
@@ -88,7 +64,6 @@ const OrderRow = props => {
         ) : (
             '-'
         );
-
     return (
         <li className={classes.root}>
             <div className={classes.orderNumberContainer}>
@@ -125,7 +100,7 @@ const OrderRow = props => {
                 <span className={classes.orderStatusBadge}>
                     {derivedStatus}
                 </span>
-                <OrderProgressBar status={derivedStatus} />
+                <OrderProgressBar status={derivedProgress} />
             </div>
             <button
                 className={classes.contentToggleContainer}
@@ -141,7 +116,6 @@ const OrderRow = props => {
 };
 
 export default OrderRow;
-
 OrderRow.propTypes = {
     classes: shape({
         root: string,