Skip to content

Commit

Permalink
fix(order): CHECKOUT-4809 Improve message for orders in pending and i…
Browse files Browse the repository at this point in the history 
…ncomplete status
  • Loading branch information
@davidchin
davidchin committed Apr 7, 2020
1 parent 50a0eb6 commit 846fbbd
Show file tree
Hide file tree
Showing 4 changed files with 243 additions and 236 deletions.
2 changes: 2 additions & 0 deletions src/app/locale/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,6 +299,8 @@
"order_confirmation": {
"order_number_text": "Your order number is <strong>{orderNumber}</strong>",
"order_pending_review_text": "Your order was sent to us but is currently awaiting payment. Once we receive the payment for your order, it will be completed. If you've already provided payment details then we will process your order manually and send you an email when it's completed.",
"order_pending_status_text": "We've received your order and are processing your payment. Once the payment is verified, your order will be completed. We will send you an email when it's completed. Please note, this process may take a few minutes depending on the processing times of your chosen method. If you have any questions about your purchase, email us at <a href=\"mailto:{supportEmail}?Subject=Order {orderNumber}\" target=\"_top\">{supportEmail}</a>.",
"order_incomplete_status_text": "We’ve received your order and payment. Your order is now being processed by our system. Please note, processing may take a few minutes. If you have any questions about your purchase, email us at <a href=\"mailto:{supportEmail}?Subject=Order {orderNumber}\" target=\"_top\">{supportEmail}</a>.",
"order_with_downloadable_digital_items_text": "You can download your digital purchases by clicking the links on this page, or by logging into your account at any time. There is also a download link in your confirmation email, which should be arriving shortly.",
"order_with_support_number_text": "An email will be sent containing information about your purchase. If you have any questions about your purchase, email us at <a href=\"mailto:{supportEmail}?Subject=Order {orderNumber}\" target=\"_top\">{supportEmail}</a> or call us at <a href=\"tel://{supportPhoneNumber}\">{supportPhoneNumber}</a>.",
"order_without_downloadable_digital_items_text": "Once we receive your payment, we’ll send a confirmation email with a link to download your digital purchases.",
Expand Down
252 changes: 188 additions & 64 deletions src/app/order/OrderStatus.spec.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,187 @@
import { Order } from '@bigcommerce/checkout-sdk';
import { shallow, ShallowWrapper } from 'enzyme';
import React from 'react';
import { createCheckoutService, CheckoutService, Order } from '@bigcommerce/checkout-sdk';
import { mount } from 'enzyme';
import React, { FunctionComponent } from 'react';

import { TranslatedString } from '../locale';
import { LocaleProvider, TranslatedHtml, TranslatedString } from '../locale';

import { getOrder } from './orders.mock';
import OrderStatus from './OrderStatus';

let order: Order;
let orderStatus: ShallowWrapper;
import OrderStatus, { OrderStatusProps } from './OrderStatus';

describe('OrderStatus', () => {
describe('when order is not waiting manual verification', () => {
let checkoutService: CheckoutService;
let defaultProps: OrderStatusProps;
let order: Order;
let OrderStatusTest: FunctionComponent<OrderStatusProps>;

beforeEach(() => {
checkoutService = createCheckoutService();
order = getOrder();

defaultProps = {
order,
supportEmail: 'test@example.com',
};

OrderStatusTest = props => (
<LocaleProvider checkoutService={ checkoutService }>
<OrderStatus { ...props } />
</LocaleProvider>
);
});

describe('when order is complete', () => {
it('renders confirmation message with contact email and phone number if both are provided', () => {
const orderStatus = mount(
<OrderStatusTest
{ ...defaultProps }
supportPhoneNumber="990"
/>
);
const translationProps = orderStatus.find('[data-test="order-confirmation-order-status-text"]')
.find(TranslatedHtml)
.props();

expect(translationProps)
.toEqual({
data: {
orderNumber: defaultProps.order.orderId,
supportEmail: defaultProps.supportEmail,
supportPhoneNumber: '990',
},
id: 'order_confirmation.order_with_support_number_text',
});
});

it('renders confirmation message without contact phone number if it is not provided', () => {
const orderStatus = mount(
<OrderStatusTest
{ ...defaultProps }
/>
);
const translationProps = orderStatus.find('[data-test="order-confirmation-order-status-text"]')
.find(TranslatedHtml)
.props();

expect(translationProps)
.toEqual({
data: {
orderNumber: defaultProps.order.orderId,
supportEmail: defaultProps.supportEmail,
},
id: 'order_confirmation.order_without_support_number_text',
});
});
});

describe('when order requires manual verification', () => {
beforeEach(() => {
order = getOrder();
order = {
...getOrder(),
status: 'MANUAL_VERIFICATION_REQUIRED',
};
});

describe('and has support data', () => {
beforeEach(() => {
orderStatus = shallow(<OrderStatus
it('renders message indicating order is pending review', () => {
const orderStatus = mount(
<OrderStatusTest
{ ...defaultProps }
order={ order }
supportEmail="test@example.com"
supportPhoneNumber="990"
/>);
});
/>
);
const translationProps = orderStatus.find('[data-test="order-confirmation-order-status-text"]')
.find(TranslatedString)
.props();

expect(translationProps)
.toEqual({
id: 'order_confirmation.order_pending_review_text',
});
});
});

it('renders status with contact information', () => {
expect(orderStatus).toMatchSnapshot();
});
describe('when order is awaiting payment', () => {
beforeEach(() => {
order = {
...getOrder(),
status: 'AWAITING_PAYMENT',
};
});

describe('and has no support data', () => {
beforeEach(() => {
orderStatus = shallow(<OrderStatus
it('renders message indicating order is awaiting payment', () => {
const orderStatus = mount(
<OrderStatusTest
{ ...defaultProps }
order={ order }
/>);
});

it('renders status', () => {
expect(orderStatus).toMatchSnapshot();
});
/>
);
const translationProps = orderStatus.find('[data-test="order-confirmation-order-status-text"]')
.find(TranslatedString)
.props();

expect(translationProps)
.toEqual({
id: 'order_confirmation.order_pending_review_text',
});
});
});

describe('when order is waiting manual verification', () => {
describe('when order is pending', () => {
beforeEach(() => {
orderStatus = shallow(<OrderStatus
order={ {
...getOrder(),
status: 'MANUAL_VERIFICATION_REQUIRED',
} }
/>);
order = {
...getOrder(),
status: 'PENDING',
};
});

it('renders status with special text', () => {
expect(orderStatus).toMatchSnapshot();
it('renders message indicating order is pending', () => {
const orderStatus = mount(
<OrderStatusTest
{ ...defaultProps }
order={ order }
/>
);
const translationProps = orderStatus.find('[data-test="order-confirmation-order-status-text"]')
.find(TranslatedString)
.props();

expect(translationProps)
.toEqual({
data: {
orderNumber: defaultProps.order.orderId,
supportEmail: defaultProps.supportEmail,
},
id: 'order_confirmation.order_pending_status_text',
});
});
});

describe('when order is awaiting payment', () => {
describe('when order is incomplete', () => {
beforeEach(() => {
orderStatus = shallow(<OrderStatus
order={ {
...getOrder(),
status: 'AWAITING_PAYMENT',
} }
/>);
order = {
...getOrder(),
status: 'INCOMPLETE',
};
});

it('displays order is pending text', () => {
expect(orderStatus.find(TranslatedString).prop('id'))
.toEqual('order_confirmation.order_pending_review_text');
it('renders message indicating order is incomplete', () => {
const orderStatus = mount(
<OrderStatusTest
{ ...defaultProps }
order={ order }
/>
);
const translationProps = orderStatus.find('[data-test="order-confirmation-order-status-text"]')
.find(TranslatedString)
.props();

expect(translationProps)
.toEqual({
data: {
orderNumber: defaultProps.order.orderId,
supportEmail: defaultProps.supportEmail,
},
id: 'order_confirmation.order_incomplete_status_text',
});
});
});

Expand All @@ -83,24 +193,38 @@ describe('OrderStatus', () => {
};
});

describe('and has downloadable items', () => {
beforeEach(() => {
order.isDownloadable = true;
});

it('renders status with downloadable items text', () => {
expect(shallow(<OrderStatus order={ order } />)).toMatchSnapshot();
});
it('renders status with downloadable items text if order is downloadable', () => {
const orderStatus = mount(
<OrderStatusTest
{ ...defaultProps }
order={ { ...order, isDownloadable: true } }
/>
);
const translationProps = orderStatus.find('[data-test="order-confirmation-digital-items-text"]')
.find(TranslatedHtml)
.props();

expect(translationProps)
.toEqual({
id: 'order_confirmation.order_with_downloadable_digital_items_text',
});
});

describe('and does not have downloadable items', () => {
beforeEach(() => {
order.isDownloadable = false;
});

it('renders status without downloadable items text', () => {
expect(shallow(<OrderStatus order={ order } />)).toMatchSnapshot();
});
it('renders status without downloadable items text if order it not yet downloadable', () => {
const orderStatus = mount(
<OrderStatusTest
{ ...defaultProps }
order={ { ...order, isDownloadable: false } }
/>
);
const translationProps = orderStatus.find('[data-test="order-confirmation-digital-items-text"]')
.find(TranslatedHtml)
.props();

expect(translationProps)
.toEqual({
id: 'order_confirmation.order_without_downloadable_digital_items_text',
});
});
});
});
Loading

0 comments on commit 846fbbd

Please sign in to comment.