@graphcommerce/magento-cart 9.1.0-canary.18 → 9.1.0-canary.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/components/CartItemSummary/CartItemSummary.tsx +20 -41
  3. package/components/CartTotals/CartPrices.graphql +21 -0
  4. package/components/CartTotals/CartTaxItem.graphql +6 -0
  5. package/components/CartTotals/CartTotals.graphql +1 -25
  6. package/components/CartTotals/CartTotals.tsx +4 -4
  7. package/components/CartTotals/Discount.graphql +6 -0
  8. package/components/EditBillingAddressForm/EditBillingAddressForm.tsx +107 -0
  9. package/components/index.ts +1 -0
  10. package/graphql/fragments/CartBillingAddress.graphql +10 -0
  11. package/graphql/index.ts +3 -0
  12. package/graphql/queries/GetBillingAddress.graphql +5 -0
  13. package/index.ts +1 -1
  14. package/package.json +15 -15
  15. /package/{Api → graphql/fragments}/CartItemCountChanged.graphql +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # Change Log
2
2
 
3
+ ## 9.1.0-canary.19
4
+
5
+ ### Patch Changes
6
+
7
+ - [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`35fdadd`](https://github.com/graphcommerce-org/graphcommerce/commit/35fdadd8896619a2c84e91e39279f5928c0c9007) - Removed deprecated fields from AddProductsToCartForm ([@paales](https://github.com/paales))
8
+
9
+ - [#2499](https://github.com/graphcommerce-org/graphcommerce/pull/2499) [`b26f573`](https://github.com/graphcommerce-org/graphcommerce/commit/b26f57307ab1d08f628183dd86e487ec9aa1e5cf) - Moved all functionality from the @graphcommerce/magento-cart-billing-address package to the @graphcommerce/magento-cart package. All occurences of @graphcommerce/magento-cart-billing-address should be removed for your codebase. ([@paales](https://github.com/paales))
10
+
3
11
  ## 9.1.0-canary.18
4
12
 
5
13
  ## 9.1.0-canary.17
package/components/CartItemSummary/CartItemSummary.tsx CHANGED
@@ -16,18 +16,7 @@ import { CartTotals } from '../CartTotals/CartTotals'
16
16
  import { CartItemSummaryDocument } from './GetCartItemSummary.gql'
17
17
 
18
18
  const name = 'CartItemSummary'
19
- const parts = [
20
- 'root',
21
- 'imageScrollerContainer',
22
- 'image',
23
- 'scrollerContainer',
24
- 'scroller',
25
- 'prevNext',
26
- 'prev',
27
- 'next',
28
- 'sectionHeaderWrapper',
29
- 'divider',
30
- ] as const
19
+ const parts = ['root', 'items', 'actionCard', 'divider'] as const
31
20
  const { classes } = extendableComponent(name, parts)
32
21
 
33
22
  export type OrderSummaryProps = ActionCardLayoutProps & {
@@ -66,37 +55,27 @@ export function CartItemSummary(props: OrderSummaryProps) {
66
55
  <SectionContainer
67
56
  sx={{ '& .SectionHeader-root': { mt: 0 } }}
68
57
  labelLeft={<Trans id='Order summary' />}
69
- // labelRight={
70
- // <PageLink href='/download' passHref>
71
- // <Link color='secondary'>Download invoice</Link>
72
- // </PageLink>
73
- // }
74
58
  variantLeft='h6'
59
+ className={classes.items}
75
60
  >
76
- <Box className={classes.imageScrollerContainer} sx={{ position: 'relative' }}>
77
- <ActionCardLayout
78
- sx={(theme) => ({
79
- marginBottom: theme.spacings.md,
80
- '&.layoutStack': {
81
- gap: 0,
82
- },
83
- })}
84
- className={classes.scrollerContainer}
85
- {...cardLayout}
86
- >
87
- {(items ?? []).filter(nonNullable).map((item) => (
88
- <CartItemActionCard
89
- readOnly
90
- key={item.uid}
91
- cartItem={item}
92
- {...itemProps}
93
- layout={layout}
94
- size={size}
95
- variant='default'
96
- />
97
- ))}
98
- </ActionCardLayout>
99
- </Box>
61
+ <ActionCardLayout
62
+ sx={(theme) => ({ marginBottom: theme.spacings.md, '&.layoutStack': { gap: 0 } })}
63
+ className={classes.actionCard}
64
+ {...cardLayout}
65
+ >
66
+ {(items ?? []).filter(nonNullable).map((item) => (
67
+ <CartItemActionCard
68
+ readOnly
69
+ key={item.uid}
70
+ cartItem={item}
71
+ variant='default'
72
+ {...itemProps}
73
+ layout={layout}
74
+ size={size}
75
+ />
76
+ ))}
77
+ </ActionCardLayout>
78
+
100
79
  <Divider
101
80
  classes={{ root: classes.divider }}
102
81
  sx={(theme) => ({
package/components/CartTotals/CartPrices.graphql ADDED
@@ -0,0 +1,21 @@
1
+ fragment CartPrices on CartPrices {
2
+ __typename
3
+ applied_taxes {
4
+ ...CartTaxItem
5
+ }
6
+ discounts {
7
+ ...Discount
8
+ }
9
+ grand_total {
10
+ ...Money
11
+ }
12
+ subtotal_excluding_tax {
13
+ ...Money
14
+ }
15
+ subtotal_including_tax {
16
+ ...Money
17
+ }
18
+ subtotal_with_discount_excluding_tax {
19
+ ...Money
20
+ }
21
+ }
package/components/CartTotals/CartTaxItem.graphql ADDED
@@ -0,0 +1,6 @@
1
+ fragment CartTaxItem on CartTaxItem {
2
+ label
3
+ amount {
4
+ ...Money
5
+ }
6
+ }
package/components/CartTotals/CartTotals.graphql CHANGED
@@ -28,30 +28,6 @@ fragment CartTotals on Cart @inject(into: ["CartItemCountChanged", "PaymentMetho
28
28
  }
29
29
  }
30
30
  prices {
31
- __typename
32
- applied_taxes {
33
- amount {
34
- ...Money
35
- }
36
- label
37
- }
38
- discounts {
39
- amount {
40
- ...Money
41
- }
42
- label
43
- }
44
- grand_total {
45
- ...Money
46
- }
47
- subtotal_excluding_tax {
48
- ...Money
49
- }
50
- subtotal_including_tax {
51
- ...Money
52
- }
53
- subtotal_with_discount_excluding_tax {
54
- ...Money
55
- }
31
+ ...CartPrices
56
32
  }
57
33
  }
package/components/CartTotals/CartTotals.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Money } from '@graphcommerce/magento-store'
2
- import { breakpointVal, extendableComponent } from '@graphcommerce/next-ui'
2
+ import { breakpointVal, extendableComponent, sxx } from '@graphcommerce/next-ui'
3
3
  import { Trans } from '@lingui/react'
4
4
  import type { SxProps, Theme } from '@mui/material'
5
5
  import { Box, Divider, lighten } from '@mui/material'
@@ -62,7 +62,7 @@ export function CartTotals(props: CartTotalsProps) {
62
62
  return (
63
63
  <Box
64
64
  className={classes.root}
65
- sx={[
65
+ sx={sxx(
66
66
  (theme) => ({
67
67
  ...breakpointVal(
68
68
  'borderRadius',
@@ -81,8 +81,8 @@ export function CartTotals(props: CartTotalsProps) {
81
81
  px: theme.spacings.xs,
82
82
  },
83
83
  }),
84
- ...(Array.isArray(sx) ? sx : [sx]),
85
- ]}
84
+ sx,
85
+ )}
86
86
  key='total-costs'
87
87
  >
88
88
  {prices?.subtotal_including_tax && (
package/components/CartTotals/Discount.graphql ADDED
@@ -0,0 +1,6 @@
1
+ fragment Discount on Discount {
2
+ amount {
3
+ ...Money
4
+ }
5
+ label
6
+ }
package/components/EditBillingAddressForm/EditBillingAddressForm.tsx ADDED
@@ -0,0 +1,107 @@
1
+ import { TelephoneElement } from '@graphcommerce/ecommerce-ui'
2
+ import { useHistoryGo } from '@graphcommerce/framer-next-pages'
3
+ import { useQuery } from '@graphcommerce/graphql'
4
+ import {
5
+ SetBillingAddressDocument,
6
+ type SetBillingAddressMutationVariables,
7
+ } from '@graphcommerce/magento-cart-shipping-address'
8
+ import {
9
+ AddressFields,
10
+ ApolloCustomerErrorAlert,
11
+ CompanyFields,
12
+ NameFields,
13
+ } from '@graphcommerce/magento-customer'
14
+ import { CountryRegionsDocument } from '@graphcommerce/magento-store'
15
+ import { Button, Form, FormActions, FormDivider, FormRow } from '@graphcommerce/next-ui'
16
+ import { Trans } from '@lingui/react'
17
+ import type { SxProps, Theme } from '@mui/material'
18
+ import { GetBillingAddressDocument } from '../../graphql'
19
+ import { useCartQuery, useFormGqlMutationCart } from '../../hooks'
20
+
21
+ export type EditBillingAddressFormProps = { sx?: SxProps<Theme> }
22
+
23
+ export function EditBillingAddressForm(props: EditBillingAddressFormProps) {
24
+ const { sx } = props
25
+ const countryQuery = useQuery(CountryRegionsDocument, { fetchPolicy: 'cache-and-network' })
26
+ const countries = countryQuery.data?.countries ?? countryQuery.previousData?.countries
27
+ const address = useCartQuery(GetBillingAddressDocument)?.data?.cart?.billing_address
28
+
29
+ const goToCheckout = useHistoryGo({ href: '/checkout/payment' })
30
+
31
+ const form = useFormGqlMutationCart(SetBillingAddressDocument, {
32
+ defaultValues: {
33
+ firstname: address?.firstname,
34
+ lastname: address?.lastname,
35
+ postcode: address?.postcode ?? '',
36
+ city: address?.city,
37
+ countryCode: address?.country.code,
38
+ street: address?.street?.[0] ?? '',
39
+ telephone: address?.telephone,
40
+ houseNumber: address?.street?.[1] ?? '',
41
+ addition: address?.street?.[2] ?? '',
42
+ company: address?.company ?? '',
43
+ vatId: address?.vat_id ?? '',
44
+ isCompany: Boolean(address?.company || !!address?.vat_id),
45
+ saveInAddressBook: true,
46
+ },
47
+ onBeforeSubmit: (variables) => {
48
+ const regionId = countries
49
+ ?.find((country) => country?.two_letter_abbreviation === variables.countryCode)
50
+ ?.available_regions?.find((region) => region?.id === variables.regionId)?.id
51
+
52
+ if (!variables.isCompany) {
53
+ variables.company = ''
54
+ variables.vatId = ''
55
+ }
56
+
57
+ return {
58
+ ...variables,
59
+ telephone: variables.telephone || '000 - 000 0000',
60
+ regionId,
61
+ }
62
+ },
63
+ onComplete: async ({ errors }) => {
64
+ if (!errors) await goToCheckout()
65
+ },
66
+ })
67
+
68
+ const { handleSubmit, formState, required, error, control } = form
69
+ const submitHandler = handleSubmit(() => {})
70
+
71
+ return (
72
+ <>
73
+ <Form onSubmit={submitHandler} noValidate sx={sx}>
74
+ <CompanyFields<SetBillingAddressMutationVariables> form={form} />
75
+ <NameFields form={form} prefix />
76
+ <AddressFields<SetBillingAddressMutationVariables> form={form} />
77
+
78
+ <FormRow>
79
+ <TelephoneElement
80
+ variant='outlined'
81
+ required={required.telephone}
82
+ control={control}
83
+ name='telephone'
84
+ disabled={formState.isSubmitting}
85
+ showValid
86
+ />
87
+ </FormRow>
88
+
89
+ <FormDivider />
90
+
91
+ <FormActions sx={{ paddingBottom: 0 }}>
92
+ <Button
93
+ type='submit'
94
+ variant='pill'
95
+ color='primary'
96
+ size='large'
97
+ loading={formState.isSubmitting}
98
+ >
99
+ <Trans id='Save changes' />
100
+ </Button>
101
+ </FormActions>
102
+ </Form>
103
+
104
+ <ApolloCustomerErrorAlert error={error} />
105
+ </>
106
+ )
107
+ }
package/components/index.ts CHANGED
@@ -12,3 +12,4 @@ export * from './CartSummary/CartSummary.gql'
12
12
  export * from './CartTotals/CartTotals'
13
13
  export * from './EmptyCart/EmptyCart'
14
14
  export * from './InlineAccount/InlineAccount'
15
+ export * from './EditBillingAddressForm/EditBillingAddressForm'
package/graphql/fragments/CartBillingAddress.graphql ADDED
@@ -0,0 +1,10 @@
1
+ fragment CartBillingAddress on Cart {
2
+ id
3
+ __typename
4
+ billing_address {
5
+ ...CartAddress
6
+ }
7
+ shipping_addresses {
8
+ ...CartAddress
9
+ }
10
+ }
package/graphql/index.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './fragments/CartItemCountChanged.gql'
2
+ export * from './fragments/CartBillingAddress.gql'
3
+ export * from './queries/GetBillingAddress.gql'
package/graphql/queries/GetBillingAddress.graphql ADDED
@@ -0,0 +1,5 @@
1
+ query GetBillingAddress($cartId: String!) {
2
+ cart(cart_id: $cartId) {
3
+ ...CartBillingAddress
4
+ }
5
+ }
package/index.ts CHANGED
@@ -1,5 +1,5 @@
1
- export * from './Api/CartItemCountChanged.gql'
2
1
  export * from './components'
2
+ export * from './graphql'
3
3
  export * from './hooks'
4
4
  export * from './link/cartLink'
5
5
  export * from './typePolicies'
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-cart",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "9.1.0-canary.18",
5
+ "version": "9.1.0-canary.19",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,20 +12,20 @@
12
12
  }
13
13
  },
14
14
  "peerDependencies": {
15
- "@graphcommerce/ecommerce-ui": "^9.1.0-canary.18",
16
- "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.18",
17
- "@graphcommerce/framer-next-pages": "^9.1.0-canary.18",
18
- "@graphcommerce/framer-scroller": "^9.1.0-canary.18",
19
- "@graphcommerce/framer-utils": "^9.1.0-canary.18",
20
- "@graphcommerce/graphql": "^9.1.0-canary.18",
21
- "@graphcommerce/image": "^9.1.0-canary.18",
22
- "@graphcommerce/magento-customer": "^9.1.0-canary.18",
23
- "@graphcommerce/magento-graphql": "^9.1.0-canary.18",
24
- "@graphcommerce/magento-store": "^9.1.0-canary.18",
25
- "@graphcommerce/next-ui": "^9.1.0-canary.18",
26
- "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.18",
27
- "@graphcommerce/react-hook-form": "^9.1.0-canary.18",
28
- "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.18",
15
+ "@graphcommerce/ecommerce-ui": "^9.1.0-canary.19",
16
+ "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.19",
17
+ "@graphcommerce/framer-next-pages": "^9.1.0-canary.19",
18
+ "@graphcommerce/framer-scroller": "^9.1.0-canary.19",
19
+ "@graphcommerce/framer-utils": "^9.1.0-canary.19",
20
+ "@graphcommerce/graphql": "^9.1.0-canary.19",
21
+ "@graphcommerce/image": "^9.1.0-canary.19",
22
+ "@graphcommerce/magento-customer": "^9.1.0-canary.19",
23
+ "@graphcommerce/magento-graphql": "^9.1.0-canary.19",
24
+ "@graphcommerce/magento-store": "^9.1.0-canary.19",
25
+ "@graphcommerce/next-ui": "^9.1.0-canary.19",
26
+ "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.19",
27
+ "@graphcommerce/react-hook-form": "^9.1.0-canary.19",
28
+ "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.19",
29
29
  "@lingui/core": "^4.2.1",
30
30
  "@lingui/macro": "^4.2.1",
31
31
  "@lingui/react": "^4.2.1",