@graphcommerce/magento-cart-shipping-method 3.4.0 → 3.5.2

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 (5) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/components/ShippingMethodForm/ShippingMethodActionCard.tsx +1 -2
  3. package/components/ShippingMethodForm/ShippingMethodForm.graphql +1 -0
  4. package/components/ShippingMethodForm/ShippingMethodForm.tsx +58 -50
  5. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,43 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`e167992df`](https://github.com/graphcommerce-org/graphcommerce/commit/e167992dfdc6964a392af719667f8a188626ab1b), [`9c2504b4e`](https://github.com/graphcommerce-org/graphcommerce/commit/9c2504b4ed75f41d3003c4d3339814010e85e37e)]:
8
+ - @graphcommerce/next-ui@4.15.0
9
+ - @graphcommerce/framer-scroller@2.1.25
10
+ - @graphcommerce/magento-cart@4.6.2
11
+ - @graphcommerce/magento-cart-shipping-address@3.3.2
12
+ - @graphcommerce/magento-store@4.2.20
13
+
14
+ ## 3.5.1
15
+
16
+ ### Patch Changes
17
+
18
+ - Updated dependencies [[`01f1588c9`](https://github.com/graphcommerce-org/graphcommerce/commit/01f1588c9200bb39dd61146e260bfa2b32060612), [`2ce406727`](https://github.com/graphcommerce-org/graphcommerce/commit/2ce406727c01a3367cea26c331d8455748592ce9)]:
19
+ - @graphcommerce/graphql@3.4.3
20
+ - @graphcommerce/magento-cart@4.6.1
21
+ - @graphcommerce/magento-store@4.2.19
22
+ - @graphcommerce/magento-cart-shipping-address@3.3.1
23
+
24
+ ## 3.5.0
25
+
26
+ ### Minor Changes
27
+
28
+ - [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`db5d485a2`](https://github.com/graphcommerce-org/graphcommerce/commit/db5d485a23b6b90cfabc9a1320d3c05acbaeb8e2) Thanks [@NickdeK](https://github.com/NickdeK)! - Pickup in store functionality added to checkout
29
+
30
+ ### Patch Changes
31
+
32
+ - Updated dependencies [[`1afc6a547`](https://github.com/graphcommerce-org/graphcommerce/commit/1afc6a5473d6e31f47b5d0188801803b31865290), [`03d01c06c`](https://github.com/graphcommerce-org/graphcommerce/commit/03d01c06c6dc13df8d38ab5b40bd100c567a9e8d), [`4a4579bb2`](https://github.com/graphcommerce-org/graphcommerce/commit/4a4579bb2f7da378f3fcc504405caf2560dc10f6), [`db5d485a2`](https://github.com/graphcommerce-org/graphcommerce/commit/db5d485a23b6b90cfabc9a1320d3c05acbaeb8e2), [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4), [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df), [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50), [`d03f0860b`](https://github.com/graphcommerce-org/graphcommerce/commit/d03f0860b882db4f280d9467aef9d66e56c1c030), [`b68d0b44a`](https://github.com/graphcommerce-org/graphcommerce/commit/b68d0b44a87688c80fb0aa4a5c840f262ce48d2f)]:
33
+ - @graphcommerce/graphql@3.4.2
34
+ - @graphcommerce/magento-cart@4.6.0
35
+ - @graphcommerce/react-hook-form@3.3.1
36
+ - @graphcommerce/magento-cart-shipping-address@3.3.0
37
+ - @graphcommerce/next-ui@4.14.0
38
+ - @graphcommerce/magento-store@4.2.18
39
+ - @graphcommerce/framer-scroller@2.1.24
40
+
3
41
  ## 3.4.0
4
42
 
5
43
  ### Minor Changes
package/components/ShippingMethodForm/ShippingMethodActionCard.tsx CHANGED
@@ -1,6 +1,5 @@
1
1
  import { Money } from '@graphcommerce/magento-store'
2
- import { ActionCard } from '@graphcommerce/next-ui'
3
- import { ActionCardItemRenderProps } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
2
+ import { ActionCard, ActionCardItemRenderProps } from '@graphcommerce/next-ui'
4
3
  import { Trans } from '@lingui/react'
5
4
  import { Box, Button } from '@mui/material'
6
5
  import { AvailableShippingMethodFragment } from '../../AvailableShippingMethod/AvailableShippingMethod.gql'
package/components/ShippingMethodForm/ShippingMethodForm.graphql CHANGED
@@ -9,6 +9,7 @@ mutation ShippingMethodForm($cartId: String!, $carrier: String!, $method: String
9
9
  id
10
10
  __typename
11
11
  ...ShippingMethodSelected
12
+ ...ShippingAddress
12
13
  }
13
14
  }
14
15
  }
package/components/ShippingMethodForm/ShippingMethodForm.tsx CHANGED
@@ -3,20 +3,26 @@ import {
3
3
  useCartQuery,
4
4
  useFormGqlMutationCart,
5
5
  } from '@graphcommerce/magento-cart'
6
- import { Form, FormHeader } from '@graphcommerce/next-ui'
7
6
  import {
7
+ Form,
8
+ FormHeader,
8
9
  ActionCardItemBase,
9
10
  ActionCardItemRenderProps,
10
11
  ActionCardListForm,
11
- } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
12
+ } from '@graphcommerce/next-ui'
12
13
  import {
14
+ FormProvider,
15
+ useForm,
16
+ useFormAutoSubmit,
13
17
  useFormCompose,
14
18
  UseFormComposeOptions,
15
19
  useFormPersist,
20
+ useWatch,
16
21
  } from '@graphcommerce/react-hook-form'
17
22
  import { i18n } from '@lingui/core'
18
23
  import { Trans } from '@lingui/react'
19
- import { FC, useEffect, useMemo } from 'react'
24
+ import { Box, SxProps, Theme } from '@mui/material'
25
+ import { useMemo } from 'react'
20
26
  import { GetShippingMethodsDocument } from './GetShippingMethods.gql'
21
27
  import { ShippingMethodActionCard } from './ShippingMethodActionCard'
22
28
  import {
@@ -25,84 +31,86 @@ import {
25
31
  ShippingMethodFormMutationVariables,
26
32
  } from './ShippingMethodForm.gql'
27
33
 
28
- export type ShippingMethodFormProps = Pick<UseFormComposeOptions, 'step'>
34
+ export type ShippingMethodFormProps = Pick<UseFormComposeOptions, 'step'> & {
35
+ sx?: SxProps<Theme>
36
+ children?: React.ReactNode
37
+ }
38
+
39
+ function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
40
+ return value !== null && value !== undefined
41
+ }
29
42
 
30
43
  export function ShippingMethodForm(props: ShippingMethodFormProps) {
31
- const { step } = props
44
+ const { step, sx, children } = props
32
45
  const { data: cartQuery, loading } = useCartQuery(GetShippingMethodsDocument)
33
- const currentAddress = cartQuery?.cart?.shipping_addresses?.[0]
34
- const available = currentAddress?.available_shipping_methods
35
- const selected = currentAddress?.selected_shipping_method
36
- const carrier = selected?.carrier_code ?? available?.[0]?.carrier_code
37
- const method = selected?.method_code ?? available?.[0]?.method_code ?? undefined
38
- const carrierMethod = `${carrier}-${method}`
46
+ const availableMethods = (
47
+ cartQuery?.cart?.shipping_addresses?.[0]?.available_shipping_methods ?? []
48
+ ).filter(notEmpty)
49
+ const selectedMethod = cartQuery?.cart?.shipping_addresses?.[0]?.selected_shipping_method
39
50
 
40
- const sortedAvailableShippingMethods = useMemo(
51
+ const items = useMemo(
41
52
  () =>
42
- [
43
- ...(currentAddress?.available_shipping_methods ?? []),
44
- // eslint-disable-next-line no-nested-ternary
45
- ].sort((a, b) => (a === b ? 0 : a ? -1 : 1)),
46
- [currentAddress?.available_shipping_methods],
53
+ availableMethods
54
+ // Move disabled items to the bottom
55
+ .sort((a, b) => (a.available ? -1 : 1))
56
+ .map((method) => ({
57
+ ...method,
58
+ disabled: !method?.available,
59
+ value: `${method?.carrier_code}-${method?.method_code ?? ''}`,
60
+ })),
61
+ [availableMethods],
47
62
  )
48
63
 
64
+ // The default: When there is only a single shipping method, select that one.
65
+ let carrierMethod: string | undefined = items.length === 1 ? items[0]?.value : undefined
66
+
67
+ // Override with the currently selected method if there is one.
68
+ if (selectedMethod?.method_code)
69
+ carrierMethod = `${selectedMethod.carrier_code}-${selectedMethod.method_code}`
70
+
49
71
  const form = useFormGqlMutationCart<
50
72
  ShippingMethodFormMutation,
51
73
  ShippingMethodFormMutationVariables & { carrierMethod?: string }
52
74
  >(ShippingMethodFormDocument, {
53
- defaultValues: { carrier, method },
75
+ defaultValues: { carrierMethod },
54
76
  onBeforeSubmit: (variables) => {
55
- const splitCarrierMethod = variables?.carrierMethod?.split('-')
56
- return {
57
- ...variables,
58
- carrier: splitCarrierMethod?.[0] ?? available?.[0]?.carrier_code ?? '',
59
- method: splitCarrierMethod?.[1] ?? available?.[0]?.method_code ?? '',
60
- }
77
+ const [carrier, method] = (variables.carrierMethod ?? '').split('-')
78
+ return { ...variables, carrier, method }
61
79
  },
62
80
  })
63
81
 
64
- const { handleSubmit, control, error, setValue } = form
82
+ const { handleSubmit, control, error } = form
65
83
  const submit = handleSubmit(() => {})
66
84
 
67
85
  useFormPersist({ form, name: 'ShippingMethodForm' })
68
86
  useFormCompose({ form, step, submit, key: 'ShippingMethodForm' })
87
+ useFormAutoSubmit({ form, submit, fields: ['carrierMethod'] })
69
88
 
70
- useEffect(() => {
71
- const availableMethods = sortedAvailableShippingMethods.filter((m) => m?.available)
72
- if (availableMethods.length === 1) {
73
- setValue('carrierMethod', `${carrier}-${method}`)
74
- }
75
- }, [
76
- carrier,
77
- method,
78
- selected?.carrier_code,
79
- selected?.method_code,
80
- setValue,
81
- sortedAvailableShippingMethods,
82
- ])
89
+ if (loading || items.length === 0) return null
83
90
 
84
91
  return (
85
- <>
86
- {!loading && sortedAvailableShippingMethods.length > 0 && (
87
- <FormHeader variant='h5' sx={{ marginBottom: 0 }}>
92
+ <FormProvider {...form}>
93
+ <Form onSubmit={submit} noValidate sx={sx}>
94
+ <FormHeader variant='h3' sx={(theme) => ({ marginBottom: 0, mb: theme.spacings.sm })}>
88
95
  <Trans id='Shipping method' />
89
96
  </FormHeader>
90
- )}
91
97
 
92
- <Form onSubmit={submit} noValidate>
93
98
  <ActionCardListForm
94
99
  control={control}
95
100
  name='carrierMethod'
96
101
  errorMessage={i18n._(/* i18n */ 'Please select a shipping method')}
97
- items={sortedAvailableShippingMethods.filter(Boolean).map((sortedMethod) => ({
98
- ...sortedMethod,
99
- disabled: !sortedMethod?.available,
100
- value: `${sortedMethod?.carrier_code}-${sortedMethod?.method_code}`,
101
- }))}
102
- render={ShippingMethodActionCard as FC<ActionCardItemRenderProps<ActionCardItemBase>>}
102
+ items={items}
103
+ render={
104
+ ShippingMethodActionCard as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
105
+ }
103
106
  />
104
107
  <ApolloCartErrorAlert error={error} />
105
108
  </Form>
106
- </>
109
+ {children}
110
+ </FormProvider>
107
111
  )
108
112
  }
113
+
114
+ export function useShippingMethod() {
115
+ return useWatch<{ carrierMethod?: string }>({ name: 'carrierMethod' })
116
+ }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-cart-shipping-method",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "3.4.0",
5
+ "version": "3.5.2",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -19,14 +19,14 @@
19
19
  "type-fest": "^2.12.2"
20
20
  },
21
21
  "dependencies": {
22
- "@graphcommerce/framer-scroller": "2.1.23",
23
- "@graphcommerce/graphql": "3.4.1",
22
+ "@graphcommerce/framer-scroller": "2.1.25",
23
+ "@graphcommerce/graphql": "3.4.3",
24
24
  "@graphcommerce/image": "3.1.7",
25
- "@graphcommerce/magento-cart": "4.5.2",
26
- "@graphcommerce/magento-cart-shipping-address": "3.2.7",
27
- "@graphcommerce/magento-store": "4.2.17",
28
- "@graphcommerce/next-ui": "4.13.1",
29
- "@graphcommerce/react-hook-form": "3.3.0"
25
+ "@graphcommerce/magento-cart": "4.6.2",
26
+ "@graphcommerce/magento-cart-shipping-address": "3.3.2",
27
+ "@graphcommerce/magento-store": "4.2.20",
28
+ "@graphcommerce/next-ui": "4.15.0",
29
+ "@graphcommerce/react-hook-form": "3.3.1"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "@lingui/react": "^3.13.2",