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.

Sign up for GitHub

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

Jump to bottom

Cart types update #1237

Merged
merged 8 commits into from
Jun 7, 2022
Merged

Cart types update #1237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
1c4faab
saving progress
frehner May 9, 2022
52c502a
Merge branch 'v1.x-2022-07' into cart-types-update
frehner May 9, 2022
3f5f62a
update queries, types, and add documentation
frehner May 9, 2022
bfc542f
Saving progress; I think I'm done but the SFAPI may be down?
frehner May 9, 2022
28cdeeb
Update docs
frehner May 10, 2022
f647ba6
Update .changeset/wet-dingos-kick.md
frehner May 12, 2022
ebf9e18
Merge branch 'v1.x-2022-07' into cart-types-update
frehner Jun 7, 2022
03e2007
Update types and make a small update to CartLinePrice
frehner Jun 7, 2022
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
8 changes: 8 additions & 0 deletions .changeset/wet-dingos-kick.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@shopify/hydrogen': minor
---

Updated Cart queries in two ways, one of which requires you to be using Storefront API `2022-07`:

1. [`CartLine`](https://shopify.dev/api/storefront/2022-04/objects/CartLine#fields) now uses [`CartLineEstimatedCost`'s `totalAmount`](https://shopify.dev/api/storefront/2022-04/objects/CartLineEstimatedCost) field for calculating the Line's total, instead of doing it manually.
2. Cart now uses [`totalQuantity`](https://shopify.dev/api/storefront/2022-07/objects/Cart#field-cart-totalquantity) for calculating how many items are in the cart, instead of doing this manually. **Note that this feature is only available in Storefront API `2022-07` and newer.**
11 changes: 11 additions & 0 deletions docs/components/cart/cartprovider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ If you don't provide a `cartFragment` argument, then the following default value
fragment CartFragment on Cart {
id
checkoutUrl
totalQuantity
buyerIdentity {
countryCode
customer {
Expand All @@ -74,6 +75,16 @@ fragment CartFragment on Cart {
key
value
}
estimatedCost {
totalAmount {
amount
currencyCode
}
compareAtAmount {
amount
currencyCode
}
}
merchandise {
... on ProductVariant {
id
Expand Down
2 changes: 1 addition & 1 deletion packages/hydrogen/graphql.schema.json
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 5 additions & 13 deletions packages/hydrogen/src/components/CartLinePrice/CartLinePrice.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,14 @@ export function CartLinePrice(
const cartLine = useCartLine();
const {priceType = 'regular', ...passthroughProps} = props;

const price =
const moneyV2 =
priceType === 'regular'
? cartLine.merchandise.priceV2
: cartLine.merchandise.compareAtPriceV2;
? cartLine.estimatedCost.totalAmount
: cartLine.estimatedCost.compareAtAmount;

if (price == null) {
if (moneyV2 == null) {
return null;
}

return (
<Money
{...passthroughProps}
data={{
amount: `${parseFloat(price.amount) * cartLine.quantity}`,
currencyCode: price.currencyCode,
}}
/>
);
return <Money {...passthroughProps} data={moneyV2} />;
}
36 changes: 6 additions & 30 deletions packages/hydrogen/src/components/CartLinePrice/tests/CartLinePrice.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ describe('<CartLinePrice />', () => {
it('renders <Money /> with the regular price by default', () => {
const line = {
...CART_LINE,
merchandise: {
...CART_LINE.merchandise,
priceV2: {
estimatedCost: {
...CART_LINE.estimatedCost,
totalAmount: {
amount: '50',
currencyCode: CurrencyCode.Usd,
},
Expand All @@ -33,9 +33,9 @@ describe('<CartLinePrice />', () => {
it('renders <Money /> with the compareAt price when `priceType` is `compareAt`', () => {
const line = {
...CART_LINE,
merchandise: {
...CART_LINE.merchandise,
compareAtPriceV2: {
estimatedCost: {
...CART_LINE.estimatedCost,
compareAtAmount: {
amount: '60',
currencyCode: CurrencyCode.Usd,
},
Expand All @@ -53,30 +53,6 @@ describe('<CartLinePrice />', () => {
});
});

it('factors in quantity for the amount passed to <Money />', () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No longer needed since we don't manually calculate this anymore.

const line = {
...CART_LINE,
quantity: 2,
merchandise: {
...CART_LINE.merchandise,
priceV2: {
amount: '50',
currencyCode: CurrencyCode.Usd,
},
},
};

const wrapper = mountWithProviders(
<CartLineProvider line={line}>
<CartLinePrice />
</CartLineProvider>
);

expect(wrapper).toContainReactComponent(Money, {
data: {amount: '100', currencyCode: CurrencyCode.Usd},
});
});

it('allows passthrough props', () => {
const line = {
...CART_LINE,
Expand Down
10 changes: 10 additions & 0 deletions packages/hydrogen/src/components/CartLineProvider/tests/fixtures.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,14 @@ export const CART_LINE = {
selectedOptions: [{name: 'size', value: 'large'}],
title: 'Product Name - Large',
},
estimatedCost: {
totalAmount: {
amount: '123',
currencyCode: CurrencyCode.Usd,
},
compareAtAmount: {
amount: '125',
currencyCode: CurrencyCode.Usd,
},
},
};
7 changes: 1 addition & 6 deletions packages/hydrogen/src/components/CartProvider/CartProvider.client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -698,12 +698,7 @@ export function CartProvider({
}),
status: state.status,
error: 'error' in state ? state.error : undefined,
totalQuantity:
'cart' in state
? state.cart.lines.reduce((previous, current) => {
return previous + current.quantity;
}, 0)
: 0,
totalQuantity: 'cart' in state ? state?.cart?.totalQuantity ?? 0 : 0,
cartCreate,
linesAdd(lines: CartLineInput[]) {
if ('cart' in state && state.cart.id) {
Expand Down
11 changes: 11 additions & 0 deletions packages/hydrogen/src/components/CartProvider/cart-queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ export const defaultCartFragment = `
fragment CartFragment on Cart {
id
checkoutUrl
totalQuantity
buyerIdentity {
countryCode
customer {
Expand All @@ -134,6 +135,16 @@ fragment CartFragment on Cart {
key
value
}
estimatedCost {
totalAmount {
amount
currencyCode
}
compareAtAmount {
amount
currencyCode
}
}
merchandise {
... on ProductVariant {
id
Expand Down
14 changes: 13 additions & 1 deletion packages/hydrogen/src/components/CartProvider/graphql/CartAttributesUpdateMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export type CartAttributesUpdateMutation = {__typename?: 'Mutation'} & {
cart?: Types.Maybe<
{__typename?: 'Cart'} & Pick<
Types.Cart,
'id' | 'checkoutUrl' | 'note'
'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
> & {
buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
Types.CartBuyerIdentity,
Expand All @@ -44,6 +44,18 @@ export type CartAttributesUpdateMutation = {__typename?: 'Mutation'} & {
'key' | 'value'
>
>;
estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
totalAmount: {__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>;
compareAtAmount?: Types.Maybe<
{__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>
>;
};
merchandise: {__typename?: 'ProductVariant'} & Pick<
Types.ProductVariant,
'id' | 'availableForSale' | 'requiresShipping' | 'title'
Expand Down
14 changes: 13 additions & 1 deletion packages/hydrogen/src/components/CartProvider/graphql/CartBuyerIdentityUpdateMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export type CartBuyerIdentityUpdateMutation = {__typename?: 'Mutation'} & {
cart?: Types.Maybe<
{__typename?: 'Cart'} & Pick<
Types.Cart,
'id' | 'checkoutUrl' | 'note'
'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
> & {
buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
Types.CartBuyerIdentity,
Expand All @@ -44,6 +44,18 @@ export type CartBuyerIdentityUpdateMutation = {__typename?: 'Mutation'} & {
'key' | 'value'
>
>;
estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
totalAmount: {__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>;
compareAtAmount?: Types.Maybe<
{__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>
>;
};
merchandise: {__typename?: 'ProductVariant'} & Pick<
Types.ProductVariant,
'id' | 'availableForSale' | 'requiresShipping' | 'title'
Expand Down
14 changes: 13 additions & 1 deletion packages/hydrogen/src/components/CartProvider/graphql/CartCreateMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export type CartCreateMutation = {__typename?: 'Mutation'} & {
cart?: Types.Maybe<
{__typename?: 'Cart'} & Pick<
Types.Cart,
'id' | 'checkoutUrl' | 'note'
'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
> & {
buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
Types.CartBuyerIdentity,
Expand All @@ -43,6 +43,18 @@ export type CartCreateMutation = {__typename?: 'Mutation'} & {
'key' | 'value'
>
>;
estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
totalAmount: {__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>;
compareAtAmount?: Types.Maybe<
{__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>
>;
};
merchandise: {__typename?: 'ProductVariant'} & Pick<
Types.ProductVariant,
'id' | 'availableForSale' | 'requiresShipping' | 'title'
Expand Down
14 changes: 13 additions & 1 deletion packages/hydrogen/src/components/CartProvider/graphql/CartDiscountCodesUpdateMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export type CartDiscountCodesUpdateMutation = {__typename?: 'Mutation'} & {
cart?: Types.Maybe<
{__typename?: 'Cart'} & Pick<
Types.Cart,
'id' | 'checkoutUrl' | 'note'
'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
> & {
buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
Types.CartBuyerIdentity,
Expand All @@ -46,6 +46,18 @@ export type CartDiscountCodesUpdateMutation = {__typename?: 'Mutation'} & {
'key' | 'value'
>
>;
estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
totalAmount: {__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>;
compareAtAmount?: Types.Maybe<
{__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>
>;
};
merchandise: {__typename?: 'ProductVariant'} & Pick<
Types.ProductVariant,
'id' | 'availableForSale' | 'requiresShipping' | 'title'
Expand Down
11 changes: 11 additions & 0 deletions packages/hydrogen/src/components/CartProvider/graphql/CartFragment.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
fragment CartFragment on Cart {
id
checkoutUrl
totalQuantity
buyerIdentity {
countryCode
customer {
Expand All @@ -24,6 +25,16 @@ fragment CartFragment on Cart {
key
value
}
estimatedCost {
totalAmount {
amount
currencyCode
}
compareAtAmount {
amount
currencyCode
}
}
merchandise {
... on ProductVariant {
id
Expand Down
14 changes: 13 additions & 1 deletion packages/hydrogen/src/components/CartProvider/graphql/CartFragment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import * as Types from '../../../storefront-api-types';

export type CartFragmentFragment = {__typename?: 'Cart'} & Pick<
Types.Cart,
'id' | 'checkoutUrl' | 'note'
'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
> & {
buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
Types.CartBuyerIdentity,
Expand All @@ -33,6 +33,18 @@ export type CartFragmentFragment = {__typename?: 'Cart'} & Pick<
'key' | 'value'
>
>;
estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
totalAmount: {__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>;
compareAtAmount?: Types.Maybe<
{__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>
>;
};
merchandise: {__typename?: 'ProductVariant'} & Pick<
Types.ProductVariant,
'id' | 'availableForSale' | 'requiresShipping' | 'title'
Expand Down
14 changes: 13 additions & 1 deletion packages/hydrogen/src/components/CartProvider/graphql/CartLineAddMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export type CartLineAddMutation = {__typename?: 'Mutation'} & {
cart?: Types.Maybe<
{__typename?: 'Cart'} & Pick<
Types.Cart,
'id' | 'checkoutUrl' | 'note'
'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
> & {
buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
Types.CartBuyerIdentity,
Expand All @@ -44,6 +44,18 @@ export type CartLineAddMutation = {__typename?: 'Mutation'} & {
'key' | 'value'
>
>;
estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
totalAmount: {__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>;
compareAtAmount?: Types.Maybe<
{__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>
>;
};
merchandise: {__typename?: 'ProductVariant'} & Pick<
Types.ProductVariant,
'id' | 'availableForSale' | 'requiresShipping' | 'title'
Expand Down
14 changes: 13 additions & 1 deletion packages/hydrogen/src/components/CartProvider/graphql/CartLineRemoveMutation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export type CartLineRemoveMutation = {__typename?: 'Mutation'} & {
cart?: Types.Maybe<
{__typename?: 'Cart'} & Pick<
Types.Cart,
'id' | 'checkoutUrl' | 'note'
'id' | 'checkoutUrl' | 'totalQuantity' | 'note'
> & {
buyerIdentity: {__typename?: 'CartBuyerIdentity'} & Pick<
Types.CartBuyerIdentity,
Expand All @@ -44,6 +44,18 @@ export type CartLineRemoveMutation = {__typename?: 'Mutation'} & {
'key' | 'value'
>
>;
estimatedCost: {__typename?: 'CartLineEstimatedCost'} & {
totalAmount: {__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>;
compareAtAmount?: Types.Maybe<
{__typename?: 'MoneyV2'} & Pick<
Types.MoneyV2,
'amount' | 'currencyCode'
>
>;
};
merchandise: {__typename?: 'ProductVariant'} & Pick<
Types.ProductVariant,
'id' | 'availableForSale' | 'requiresShipping' | 'title'
Expand Down
Loading