PWA-3178::Order statuses are decoupled from the back-end

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

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

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,