Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | 3x 3x 3x 3x 13x 13x 13x 13x 2x 13x 2x 4x 2x 13x 3x 13x 13x 13x 13x 13x 2x 1x 1x 9x 3x | import { Order } from '@bigcommerce/checkout-sdk';
import React, { memo, useCallback, FunctionComponent } from 'react';
import { TranslatedHtml, TranslatedString } from '../locale';
import OrderConfirmationSection from './OrderConfirmationSection';
export interface OrderStatusProps {
supportEmail: string;
supportPhoneNumber?: string;
order: Order;
}
const OrderStatus: FunctionComponent<OrderStatusProps> = ({
order,
supportEmail,
supportPhoneNumber,
}) => {
const getMandateProvider = useCallback(() => {
return order?.payments?.[0].description;
}, [order]);
const getMandateTextId = useCallback(() => {
const Mandates = [
{ method: 'Stripe (SEPA)', value: 'sepa_link_text' },
{ method: 'OXXO (via Checkout.com)', value: 'oxxo_link_text' },
{ method: 'Boleto Bancário (via Checkout.com)', value: 'boleto_link_text' },
];
const mandateText = Mandates.find(pair => pair.method === order?.payments?.[0].description);
return mandateText ? mandateText.value : 'mandate_link_text';
}, [order]);
return <OrderConfirmationSection>
{ order.orderId &&
<p data-test="order-confirmation-order-number-text">
<TranslatedHtml
data={ { orderNumber: order.orderId } }
id="order_confirmation.order_number_text"
/>
</p> }
<p data-test="order-confirmation-order-status-text">
<OrderStatusMessage
orderNumber={ order.orderId }
orderStatus={ order.status }
supportEmail={ supportEmail }
supportPhoneNumber={ supportPhoneNumber }
/>
</p>
{ order.mandateUrl && <a data-test="order-confirmation-mandate-link-text" href={ order.mandateUrl } rel="noopener noreferrer" target="_blank">
<TranslatedString
data={ { provider : getMandateProvider() } }
id={ 'order_confirmation.' + getMandateTextId() }
/>
</a> }
{ order.hasDigitalItems &&
<p data-test="order-confirmation-digital-items-text">
<TranslatedHtml
id={ order.isDownloadable ?
'order_confirmation.order_with_downloadable_digital_items_text' :
'order_confirmation.order_without_downloadable_digital_items_text' }
/>
</p> }
</OrderConfirmationSection>;
};
interface OrderStatusMessageProps {
orderNumber: number;
orderStatus: string;
supportEmail?: string;
supportPhoneNumber?: string;
}
const OrderStatusMessage: FunctionComponent<OrderStatusMessageProps> = ({
orderNumber,
orderStatus,
supportEmail,
supportPhoneNumber,
}) => {
switch (orderStatus) {
case 'MANUAL_VERIFICATION_REQUIRED':
case 'AWAITING_PAYMENT':
return <TranslatedHtml
id="order_confirmation.order_pending_review_text"
/>;
case 'PENDING':
return <TranslatedHtml
data={ { orderNumber, supportEmail } }
id="order_confirmation.order_pending_status_text"
/>;
case 'INCOMPLETE':
return <TranslatedHtml
data={ { orderNumber, supportEmail } }
id="order_confirmation.order_incomplete_status_text"
/>;
default:
return <TranslatedHtml
data={ { orderNumber, supportEmail, supportPhoneNumber } }
id={ supportPhoneNumber ?
'order_confirmation.order_with_support_number_text' :
'order_confirmation.order_without_support_number_text' }
/>;
}
};
export default memo(OrderStatus);
|