fix(order): CHECKOUT-4575 Display different message if order is await…

…ing payment

src/app/order/OrderStatus.spec.tsx

@@ -2,6 +2,8 @@ import { Order } from '@bigcommerce/checkout-sdk';
 import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
 
+import { TranslatedString } from '../locale';
+
 import { getOrder } from './orders.mock';
 import OrderStatus from './OrderStatus';
 
@@ -57,6 +59,22 @@ describe('OrderStatus', () => {
         });
     });
 
+    describe('when order is awaiting payment', () => {
+        beforeEach(() => {
+            orderStatus = shallow(<OrderStatus
+                order={ {
+                    ...getOrder(),
+                    status: 'AWAITING_PAYMENT',
+                } }
+            />);
+        });
+
+        it('displays order is pending text', () => {
+            expect(orderStatus.find(TranslatedString).prop('id'))
+                .toEqual('order_confirmation.order_pending_review_text');
+        });
+    });
+
     describe('when order has digital items', () => {
         beforeEach(() => {
             order = {

src/app/order/OrderStatus.tsx

@@ -17,6 +17,7 @@ const OrderStatus: FunctionComponent<OrderStatusProps> = ({
     supportPhoneNumber,
 }) => {
     const isPendingReview = order.status === 'MANUAL_VERIFICATION_REQUIRED';
+    const isAwaitingPayment = order.status === 'AWAITING_PAYMENT';
     const orderNumber = order.orderId;
 
     return <OrderConfirmationSection>
@@ -28,14 +29,14 @@ const OrderStatus: FunctionComponent<OrderStatusProps> = ({
             />
         </p> }
 
-        { isPendingReview &&
+        { (isPendingReview || isAwaitingPayment) &&
         <p>
             <TranslatedString
                 id="order_confirmation.order_pending_review_text"
             />
         </p> }
 
-        { !isPendingReview &&
+        { !(isPendingReview || isAwaitingPayment) &&
         <p>
             <TranslatedHtml
                 data={ { orderNumber, supportEmail, supportPhoneNumber } }