@graphcommerce/magento-cart-shipping-method 3.3.0 → 3.5.0

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 +44 -0
  2. package/components/ShippingMethodForm/ShippingMethodActionCard.tsx +1 -2
  3. package/components/ShippingMethodForm/ShippingMethodForm.graphql +1 -0
  4. package/components/ShippingMethodForm/ShippingMethodForm.tsx +57 -61
  5. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,49 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#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
8
+
9
+ ### Patch Changes
10
+
11
+ - 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)]:
12
+ - @graphcommerce/graphql@3.4.2
13
+ - @graphcommerce/magento-cart@4.6.0
14
+ - @graphcommerce/react-hook-form@3.3.1
15
+ - @graphcommerce/magento-cart-shipping-address@3.3.0
16
+ - @graphcommerce/next-ui@4.14.0
17
+ - @graphcommerce/magento-store@4.2.18
18
+ - @graphcommerce/framer-scroller@2.1.24
19
+
20
+ ## 3.4.0
21
+
22
+ ### Minor Changes
23
+
24
+ - [#1548](https://github.com/graphcommerce-org/graphcommerce/pull/1548) [`4b8c0a3ef`](https://github.com/graphcommerce-org/graphcommerce/commit/4b8c0a3efa163bc7e4e590f1c251a2a78e000a81) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Fix for empty shipping methods in checkout
25
+
26
+ ### Patch Changes
27
+
28
+ - Updated dependencies [[`18054c441`](https://github.com/graphcommerce-org/graphcommerce/commit/18054c441962ba750bed3acc39ab46c8d3a341ce), [`c5c539c44`](https://github.com/graphcommerce-org/graphcommerce/commit/c5c539c44eeac524cd62ce649e132d2e00333794), [`6f69bc54c`](https://github.com/graphcommerce-org/graphcommerce/commit/6f69bc54c6e0224452817c532ae58d9c332b61ea), [`21886d6fa`](https://github.com/graphcommerce-org/graphcommerce/commit/21886d6fa64a48d9e932bfaf8d138c9b13c36e43), [`b4936e961`](https://github.com/graphcommerce-org/graphcommerce/commit/b4936e96175fe80717895822e245274db05638bd)]:
29
+ - @graphcommerce/graphql@3.4.1
30
+ - @graphcommerce/next-ui@4.13.1
31
+ - @graphcommerce/framer-scroller@2.1.23
32
+ - @graphcommerce/magento-cart@4.5.2
33
+ - @graphcommerce/magento-cart-shipping-address@3.2.7
34
+ - @graphcommerce/magento-store@4.2.17
35
+
36
+ ## 3.3.1
37
+
38
+ ### Patch Changes
39
+
40
+ - Updated dependencies [[`8d8fda262`](https://github.com/graphcommerce-org/graphcommerce/commit/8d8fda2623e561cb43441110c67ffa34b692668a), [`d41cff721`](https://github.com/graphcommerce-org/graphcommerce/commit/d41cff7211230561ceeb7786cf75790efd6377cd), [`cefa7b365`](https://github.com/graphcommerce-org/graphcommerce/commit/cefa7b3652b55108d2178927e3c5d98a111cf373), [`584b683a2`](https://github.com/graphcommerce-org/graphcommerce/commit/584b683a2aedcdf5067644c8dcc0e63a5b9e894c)]:
41
+ - @graphcommerce/next-ui@4.13.0
42
+ - @graphcommerce/magento-store@4.2.16
43
+ - @graphcommerce/framer-scroller@2.1.22
44
+ - @graphcommerce/magento-cart@4.5.1
45
+ - @graphcommerce/magento-cart-shipping-address@3.2.6
46
+
3
47
  ## 3.3.0
4
48
 
5
49
  ### 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,96 +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
 
49
- console.log(
50
- 'sortedAvailableShippingMethods',
51
- sortedAvailableShippingMethods.filter(Boolean).map((sortedMethod) => ({
52
- ...sortedMethod,
53
- disabled: !sortedMethod?.available,
54
- value: `${sortedMethod?.carrier_code}-${sortedMethod?.method_code}`,
55
- })),
56
- )
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}`
57
70
 
58
71
  const form = useFormGqlMutationCart<
59
72
  ShippingMethodFormMutation,
60
73
  ShippingMethodFormMutationVariables & { carrierMethod?: string }
61
74
  >(ShippingMethodFormDocument, {
62
- defaultValues: { carrierMethod, carrier, method },
75
+ defaultValues: { carrierMethod },
63
76
  onBeforeSubmit: (variables) => {
64
- const splitCarrierMethod = variables?.carrierMethod?.split('-')
65
- return {
66
- ...variables,
67
- carrier: splitCarrierMethod?.[0] ?? available?.[0]?.carrier_code ?? '',
68
- method: splitCarrierMethod?.[1] ?? available?.[0]?.method_code ?? '',
69
- }
77
+ const [carrier, method] = (variables.carrierMethod ?? '').split('-')
78
+ return { ...variables, carrier, method }
70
79
  },
71
80
  })
72
81
 
73
- const { handleSubmit, control, error, setValue } = form
82
+ const { handleSubmit, control, error } = form
74
83
  const submit = handleSubmit(() => {})
75
84
 
76
85
  useFormPersist({ form, name: 'ShippingMethodForm' })
77
86
  useFormCompose({ form, step, submit, key: 'ShippingMethodForm' })
87
+ useFormAutoSubmit({ form, submit, fields: ['carrierMethod'] })
78
88
 
79
- useEffect(() => {
80
- const availableMethods = sortedAvailableShippingMethods.filter((m) => m?.available)
81
- if (availableMethods.length === 1) {
82
- setValue(
83
- 'carrierMethod',
84
- `${availableMethods[0]?.carrier_code}-${availableMethods[0]?.method_code}`,
85
- )
86
- }
87
- }, [
88
- carrier,
89
- method,
90
- selected?.carrier_code,
91
- selected?.method_code,
92
- setValue,
93
- sortedAvailableShippingMethods,
94
- ])
89
+ if (loading || items.length === 0) return null
95
90
 
96
91
  return (
97
- <>
98
- {!loading && sortedAvailableShippingMethods.length > 0 && (
99
- <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 })}>
100
95
  <Trans id='Shipping method' />
101
96
  </FormHeader>
102
- )}
103
97
 
104
- <Form onSubmit={submit} noValidate>
105
98
  <ActionCardListForm
106
99
  control={control}
107
100
  name='carrierMethod'
108
101
  errorMessage={i18n._(/* i18n */ 'Please select a shipping method')}
109
- items={sortedAvailableShippingMethods.filter(Boolean).map((sortedMethod) => ({
110
- ...sortedMethod,
111
- disabled: !sortedMethod?.available,
112
- value: `${sortedMethod?.carrier_code}-${sortedMethod?.method_code}`,
113
- }))}
114
- render={ShippingMethodActionCard as FC<ActionCardItemRenderProps<ActionCardItemBase>>}
102
+ items={items}
103
+ render={
104
+ ShippingMethodActionCard as React.FC<ActionCardItemRenderProps<ActionCardItemBase>>
105
+ }
115
106
  />
116
107
  <ApolloCartErrorAlert error={error} />
117
108
  </Form>
118
- </>
109
+ {children}
110
+ </FormProvider>
119
111
  )
120
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.3.0",
5
+ "version": "3.5.0",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,21 +12,21 @@
12
12
  }
13
13
  },
14
14
  "devDependencies": {
15
- "@graphcommerce/eslint-config-pwa": "^4.1.8",
15
+ "@graphcommerce/eslint-config-pwa": "^4.1.9",
16
16
  "@graphcommerce/prettier-config-pwa": "^4.0.6",
17
- "@graphcommerce/typescript-config-pwa": "^4.0.3",
17
+ "@graphcommerce/typescript-config-pwa": "^4.0.4",
18
18
  "@playwright/test": "^1.21.1",
19
19
  "type-fest": "^2.12.2"
20
20
  },
21
21
  "dependencies": {
22
- "@graphcommerce/framer-scroller": "2.1.21",
23
- "@graphcommerce/graphql": "3.4.0",
22
+ "@graphcommerce/framer-scroller": "2.1.24",
23
+ "@graphcommerce/graphql": "3.4.2",
24
24
  "@graphcommerce/image": "3.1.7",
25
- "@graphcommerce/magento-cart": "4.5.0",
26
- "@graphcommerce/magento-cart-shipping-address": "3.2.5",
27
- "@graphcommerce/magento-store": "4.2.15",
28
- "@graphcommerce/next-ui": "4.12.0",
29
- "@graphcommerce/react-hook-form": "3.3.0"
25
+ "@graphcommerce/magento-cart": "4.6.0",
26
+ "@graphcommerce/magento-cart-shipping-address": "3.3.0",
27
+ "@graphcommerce/magento-store": "4.2.18",
28
+ "@graphcommerce/next-ui": "4.14.0",
29
+ "@graphcommerce/react-hook-form": "3.3.1"
30
30
  },
31
31
  "peerDependencies": {
32
32
  "@lingui/react": "^3.13.2",