Skip to content

Commit

Permalink
PWA-3178::Order statuses are decoupled from the back-end (#4229)
Browse files Browse the repository at this point in the history
* PWA-3178::Order statuses are decoupled from the back-end

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

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

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

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

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

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

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

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

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

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

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

* Resolved issue

* Resolved issue

* Resolved issue
  • Loading branch information
glo82145 committed Jun 5, 2024
1 parent 063cb1e commit 3d56e3c
Show file tree
Hide file tree
Showing 6 changed files with 39 additions and 92 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ const CustomerOrdersFragment = gql`
}
shipping_method
status
state
total {
discounts {
amount {
Expand Down
10 changes: 7 additions & 3 deletions packages/venia-ui/i18n/en_US.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -278,11 +277,10 @@ exports[`it renders collapsed order row 1`] = `
<span
className="orderStatusBadge"
>
Delivered
Complete
</span>
<div
componentName="OrderProgressBar"
status="Delivered"
/>
</div>
<button
Expand Down Expand Up @@ -565,11 +563,10 @@ exports[`it renders open order row 1`] = `
<span
className="orderStatusBadge"
>
Delivered
Complete
</span>
<div
componentName="OrderProgressBar"
status="Delivered"
/>
</div>
<button
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
36 changes: 5 additions & 31 deletions packages/venia-ui/lib/components/OrderHistoryPage/orderRow.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -88,7 +64,6 @@ const OrderRow = props => {
) : (
'-'
);

return (
<li className={classes.root}>
<div className={classes.orderNumberContainer}>
Expand Down Expand Up @@ -125,7 +100,7 @@ const OrderRow = props => {
<span className={classes.orderStatusBadge}>
{derivedStatus}
</span>
<OrderProgressBar status={derivedStatus} />
<OrderProgressBar status={derivedProgress} />
</div>
<button
className={classes.contentToggleContainer}
Expand All @@ -141,7 +116,6 @@ const OrderRow = props => {
};

export default OrderRow;

OrderRow.propTypes = {
classes: shape({
root: string,
Expand Down

0 comments on commit 3d56e3c

Please sign in to comment.