Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[PWA-893] My Account: Order History - Remove @client directive #2786

Merged
merged 23 commits into from
Nov 11, 2020
Merged
Changes from 1 commit
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
fbd6689
Remove client directive and work through errors from using live data
tjwiebell Oct 16, 2020
c4e4b3d
Fixup region display so its not rendering ids
tjwiebell Oct 16, 2020
eb62267
Fix payment method display and remove extra comma in addresses
tjwiebell Oct 16, 2020
cf1750f
Merge remote-tracking branch 'origin/develop' into tommy/orders-remov…
tjwiebell Oct 19, 2020
c1e4000
Additional tweaks from UX feedback
tjwiebell Oct 19, 2020
63c515b
Fixup failing tests
tjwiebell Oct 20, 2020
75ab886
Fix couple tests failing after gql move
tjwiebell Oct 20, 2020
77cd793
Fix bug where tracking information doesn't exist for shipped order
tjwiebell Oct 20, 2020
f10bdcf
Updated Intl FormattedMessage component mock. (#2792)
revanth0212 Oct 20, 2020
a9e3194
- Adjust item grid based on UX feedback
tjwiebell Oct 21, 2020
d8025cf
Merge branch 'develop' into tommy/orders-remove-mock
tjwiebell Oct 22, 2020
2943abf
Fixup failing tests
tjwiebell Oct 22, 2020
299b560
Merge branch 'develop' into tommy/orders-remove-mock
tjwiebell Nov 3, 2020
6d3da3c
Address PR feedback
tjwiebell Nov 3, 2020
bb4d380
Cover new context with tests
tjwiebell Nov 3, 2020
115c3ac
Merge remote-tracking branch 'origin/develop' into tommy/orders-remov…
tjwiebell Nov 3, 2020
1c1a478
Address QA feedback
tjwiebell Nov 5, 2020
5ccd567
Fixup tests and hide incomplete features
tjwiebell Nov 5, 2020
5604e84
Address additional edges found in QA
tjwiebell Nov 9, 2020
41d2595
Merge branch 'develop' into tommy/orders-remove-mock
tjwiebell Nov 10, 2020
b8eb620
Dependently render discount row
tjwiebell Nov 10, 2020
af521e9
Update snaps with new mock
tjwiebell Nov 10, 2020
a1a069b
Allow empty string as quantity value to support backspace
tjwiebell Nov 10, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Address QA feedback
  • Loading branch information
tjwiebell committed Nov 5, 2020
commit 1c1a478e36e7465e72a798553aab8ef60d8eba5d
Original file line number Diff line number Diff line change
@@ -8,11 +8,13 @@ Object {
"thumbnail": Object {
"url": "sku1 thumbnail url",
},
"url_key": "sku1",
},
Object {
"thumbnail": Object {
"url": "sku2 thumbnail url",
},
"url_key": "sku2",
},
],
"isOpen": false,
Original file line number Diff line number Diff line change
@@ -25,36 +25,58 @@ const Component = props => {
return null;
};

const defaultProps = {
queries: { getProductThumbnailsQuery: 'getProductThumbnailsQuery' },
items: [{ product_url_key: 'sku1' }, { product_url_key: 'sku2' }]
};
const items = [
{ thumbnail: { url: 'sku1 thumbnail url' }, url_key: 'sku1' },
{ thumbnail: { url: 'sku2 thumbnail url' }, url_key: 'sku2' }
];
const dataResponse = {
data: {
products: {
items
}
},
loading: false
};

test('returns correct shape', () => {
const items = [
{ thumbnail: { url: 'sku1 thumbnail url' } },
{ thumbnail: { url: 'sku2 thumbnail url' } }
];
useQuery.mockReturnValue({ data: { products: { items } }, loading: false });
createTestInstance(
<Component
queries={{ getProductThumbnailsQuery: 'getProductThumbnailsQuery' }}
items={[{ product_sku: 'sku1' }, { product_sku: 'sku2' }]}
/>
);
useQuery.mockReturnValue(dataResponse);
createTestInstance(<Component {...defaultProps} />);

const talonProps = log.mock.calls[0][0];

expect(talonProps).toMatchSnapshot();
});

test('filters out items not in the request', () => {
useQuery.mockReturnValue({
data: {
products: {
items: [
...items,
{
thumbnail: { url: 'bundle-sku thumbnail url' },
url_key: 'bundle-sku'
}
]
}
},
loading: false
});

createTestInstance(<Component {...defaultProps} />);

const talonProps = log.mock.calls[0][0];

expect(talonProps.imagesData).toHaveLength(2);
});

test('callback toggles open state', () => {
const items = [
{ thumbnail: { url: 'sku1 thumbnail url' } },
{ thumbnail: { url: 'sku2 thumbnail url' } }
];
useQuery.mockReturnValue({ data: { products: { items } }, loading: false });
createTestInstance(
<Component
queries={{ getProductThumbnailsQuery: 'getProductThumbnailsQuery' }}
items={[{ product_sku: 'sku1' }, { product_sku: 'sku2' }]}
/>
);
useQuery.mockReturnValue(dataResponse);
createTestInstance(<Component {...defaultProps} />);

const talonProps = log.mock.calls[0][0];

Original file line number Diff line number Diff line change
@@ -48,7 +48,6 @@ export const GET_CUSTOMER_ORDERS = gql`
shipments {
id
tracking {
carrier
number
}
}
8 changes: 6 additions & 2 deletions packages/peregrine/lib/talons/OrderHistoryPage/useOrderRow.js
Original file line number Diff line number Diff line change
@@ -31,11 +31,15 @@ export const useOrderRow = props => {
});
const imagesData = useMemo(() => {
if (data) {
return data.products.items;
// filter out items returned that we didn't query for
const filteredItems = data.products.items.filter(item =>
urlKeys.includes(item.url_key)
);
return filteredItems;
} else {
return [];
}
}, [data]);
}, [data, urlKeys]);

const [isOpen, setIsOpen] = useState(false);

2 changes: 1 addition & 1 deletion packages/venia-ui/i18n/en_US.json
Original file line number Diff line number Diff line change
@@ -230,7 +230,7 @@
"orderDetails.subtotal": "Subtotal",
"orderDetails.tax": "Tax",
"orderDetails.total": "Total",
"orderDetails.trackingInformation": "{carrier} Tracking: {number}",
"orderDetails.trackingInformation": "<strong>Tracking number:</strong> {number}",
"orderHistoryPage.emptyDataMessage": "You don't have any orders yet.",
"orderHistoryPage.pageTitleText": "Order History",
"orderProgressBar.deliveredText": "Delivered",
Original file line number Diff line number Diff line change
@@ -4,19 +4,6 @@
}

.heading {
grid-row: 1 / span 1;
font-weight: var(--venia-global-fontWeight-bold);
padding-bottom: 0.375rem;
}

.name {
grid-row: 2 / span 1;
}

.addressLine1 {
grid-row: 3 / span 1;
}

.addressLine2 {
grid-row: 4 / span 1;
}
Original file line number Diff line number Diff line change
@@ -21,6 +21,13 @@ const BillingInformation = props => {

const additionalAddressString = `${city}, ${region} ${postcode} ${country_code}`;
const fullName = `${firstname} ${lastname}`;
const streetRows = street.map((row, index) => {
return (
<span className={classes.streetRow} key={index}>
{row}
</span>
);
});

return (
<div className={classes.root}>
@@ -31,8 +38,8 @@ const BillingInformation = props => {
/>
</div>
<span className={classes.name}>{fullName}</span>
<div className={classes.addressLine1}>{street}</div>
<div className={classes.addressLine2}>
{streetRows}
<div className={classes.additionalAddress}>
{additionalAddressString}
</div>
</div>
@@ -46,16 +53,16 @@ BillingInformation.propTypes = {
root: string,
heading: string,
name: string,
addressLine1: string,
addressLine2: string
streetRow: string,
additionalAddress: string
}),
data: shape({
city: string,
country_code: string,
firstname: string,
lastname: string,
postcode: string,
region_id: string,
region: string,
street: arrayOf(string)
})
};
Original file line number Diff line number Diff line change
@@ -4,19 +4,6 @@
}

.heading {
grid-row: 1 / span 1;
font-weight: var(--venia-global-fontWeight-bold);
padding-bottom: 0.375rem;
}

.name {
grid-row: 2 / span 1;
}

.addressLine1 {
grid-row: 3 / span 1;
}

.addressLine2 {
grid-row: 4 / span 1;
}
Original file line number Diff line number Diff line change
@@ -21,6 +21,13 @@ const ShippingInformation = props => {

const additionalAddressString = `${city}, ${region} ${postcode} ${country_code}`;
const fullName = `${firstname} ${lastname}`;
const streetRows = street.map((row, index) => {
return (
<span className={classes.streetRow} key={index}>
{row}
</span>
);
});

return (
<div className={classes.root}>
@@ -31,8 +38,8 @@ const ShippingInformation = props => {
/>
</div>
<span className={classes.name}>{fullName}</span>
<div className={classes.addressLine1}>{street}</div>
<div className={classes.addressLine2}>
{streetRows}
<div className={classes.additionalAddress}>
{additionalAddressString}
</div>
</div>
@@ -46,16 +53,16 @@ ShippingInformation.propTypes = {
root: string,
heading: string,
name: string,
addressLine1: string,
addressLine2: string
streetRow: string,
additionalAddress: string
}),
data: shape({
city: string,
country_code: string,
firstname: string,
lastname: string,
postcode: string,
region_id: string,
region: string,
street: arrayOf(string),
telephone: string
})
Original file line number Diff line number Diff line change
@@ -14,5 +14,7 @@
}

.tracking {
display: grid;
grid-row: 3 / span 1;
row-gap: 0.375rem;
}
Original file line number Diff line number Diff line change
@@ -17,21 +17,24 @@ const ShippingMethod = props => {
*/
let trackingElement;
if (shipments.length) {
const [{ tracking }] = shipments;
trackingElement = shipments.map(shipment => {
const { tracking } = shipment;
if (tracking.length) {
const [{ number }] = tracking;

if (tracking.length) {
const [{ carrier, number }] = tracking;

trackingElement = (
<FormattedMessage
id="orderDetails.trackingInformation"
values={{
carrier,
number
}}
/>
);
}
return (
<span className={classes.trackingRow}>
<FormattedMessage
id="orderDetails.trackingInformation"
values={{
number,
strong: chunks => <strong>{chunks}</strong>
}}
/>
</span>
);
}
});
} else {
trackingElement = (
<FormattedMessage
@@ -62,7 +65,8 @@ ShippingMethod.propTypes = {
root: string,
heading: string,
method: string,
tracking: string
tracking: string,
trackingRow: string
}),
data: shape({
shippingMethod: string,
@@ -71,7 +75,6 @@ ShippingMethod.propTypes = {
id: string,
tracking: arrayOf(
shape({
carrier: string,
number: string
})
)
Original file line number Diff line number Diff line change
@@ -189,7 +189,7 @@ OrderRow.propTypes = {
),
invoices: arrayOf(
shape({
id: number
id: string
})
),
number: string,
@@ -221,7 +221,6 @@ OrderRow.propTypes = {
id: string,
tracking: arrayOf(
shape({
carrier: string,
number: string
})
)