@graphcommerce/magento-cart-shipping-address 3.0.19 → 3.0.22

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 (4) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/components/CustomerAddressForm/CustomerAddressForm.tsx +41 -110
  3. package/index.ts +1 -0
  4. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,36 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.0.22
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`d6262de71`](https://github.com/graphcommerce-org/graphcommerce/commit/d6262de71d2254a2b0b492e1a60f9e141767470e), [`c8c246b8a`](https://github.com/graphcommerce-org/graphcommerce/commit/c8c246b8aaab0621b68a2fca2a1c529a56fad962), [`e3005fe63`](https://github.com/graphcommerce-org/graphcommerce/commit/e3005fe6306093d47b08c6756c21c8175649e30b)]:
8
+ - @graphcommerce/magento-customer@4.4.0
9
+ - @graphcommerce/magento-cart@4.3.2
10
+ - @graphcommerce/next-ui@4.8.2
11
+ - @graphcommerce/magento-store@4.2.6
12
+
13
+ ## 3.0.21
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies [[`a9df81310`](https://github.com/graphcommerce-org/graphcommerce/commit/a9df81310c051876dd82fb2819105dece47cc213), [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
18
+ - @graphcommerce/next-ui@4.8.1
19
+ - @graphcommerce/magento-cart@4.3.1
20
+ - @graphcommerce/magento-customer@4.3.2
21
+ - @graphcommerce/magento-store@4.2.5
22
+ - @graphcommerce/image@3.1.6
23
+
24
+ ## 3.0.20
25
+
26
+ ### Patch Changes
27
+
28
+ - [#1476](https://github.com/graphcommerce-org/graphcommerce/pull/1476) [`4cda98ea6`](https://github.com/graphcommerce-org/graphcommerce/commit/4cda98ea6f5f0cbb68fd67956b69524618c396fa) Thanks [@paales](https://github.com/paales)! - move CustomerAddressForm import to package root
29
+
30
+ - Updated dependencies [[`a12db31b9`](https://github.com/graphcommerce-org/graphcommerce/commit/a12db31b9db9d27d86f59c1bfe58a0879999b9d3), [`cf575395c`](https://github.com/graphcommerce-org/graphcommerce/commit/cf575395c16e9c571f75d4563004c3018a29aeaa)]:
31
+ - @graphcommerce/magento-customer@4.3.1
32
+ - @graphcommerce/magento-cart@4.3.0
33
+
3
34
  ## 3.0.19
4
35
 
5
36
  ### Patch Changes
package/components/CustomerAddressForm/CustomerAddressForm.tsx CHANGED
@@ -6,6 +6,10 @@ import {
6
6
  } from '@graphcommerce/magento-cart'
7
7
  import { CustomerDocument } from '@graphcommerce/magento-customer'
8
8
  import { iconHome, IconSvg, ActionCardList, ActionCard, Form, Button } from '@graphcommerce/next-ui'
9
+ import {
10
+ ActionCardItem,
11
+ ActionCardListForm,
12
+ } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
9
13
  import {
10
14
  useFormPersist,
11
15
  useFormCompose,
@@ -15,10 +19,9 @@ import {
15
19
  import { Trans } from '@lingui/react'
16
20
  import { Box, FormControl, NoSsr } from '@mui/material'
17
21
  import { useRouter } from 'next/router'
18
- import React from 'react'
22
+ import React, { useMemo } from 'react'
19
23
  import { isSameAddress } from '../../utils/isSameAddress'
20
24
  import { GetAddressesDocument } from '../ShippingAddressForm/GetAddresses.gql'
21
- import { SetCustomerBillingAddressOnCartDocument } from './SetCustomerBillingAddressOnCart.gql'
22
25
  import { SetCustomerShippingAddressOnCartDocument } from './SetCustomerShippingAddressOnCart.gql'
23
26
  import { SetCustomerShippingBillingAddressOnCartDocument } from './SetCustomerShippingBillingAddressOnCart.gql'
24
27
 
@@ -28,7 +31,7 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
28
31
  const customerAddresses = useQuery(CustomerDocument)
29
32
  const addresses = customerAddresses.data?.customer?.addresses
30
33
  const { step, children } = props
31
- const router = useRouter()
34
+ const { push } = useRouter()
32
35
 
33
36
  const { data: cartQuery } = useCartQuery(GetAddressesDocument)
34
37
 
@@ -58,10 +61,7 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
58
61
  // Mutation = SetCustomerBillingAddressOnCartDocument
59
62
  // }
60
63
 
61
- const form = useFormGqlMutationCart(Mutation, {
62
- // defaultValues: { customerAddressId: defaultCustomerAddressId },
63
- mode: 'onChange',
64
- })
64
+ const form = useFormGqlMutationCart(Mutation, { mode: 'onChange' })
65
65
  const { handleSubmit, error, control, watch } = form
66
66
 
67
67
  // If customer selects 'new address' then we do not have to submit anything so we provide an empty submit function.
@@ -76,113 +76,44 @@ export function CustomerAddressForm(props: CustomerAddressListProps) {
76
76
 
77
77
  return (
78
78
  <>
79
- {' '}
80
79
  <Form onSubmit={submit} noValidate>
81
80
  <FormControl>
82
- <Controller
81
+ <ActionCardListForm
83
82
  control={control}
84
- defaultValue={found && found.id ? found.id : 0}
85
83
  name='customerAddressId'
86
- rules={{ required: true }}
87
- render={({ field: { onChange, value }, fieldState, formState }) => (
88
- <NoSsr>
89
- <ActionCardList
90
- required
91
- value={String(value)}
92
- onChange={(event, incomming) => {
93
- onChange(Number(incomming))
94
- }}
95
- error={formState.isSubmitted && !!fieldState.error}
96
- >
97
- {addresses.map((address) => (
98
- <ActionCard
99
- value={String(address?.id)}
100
- key={address?.id}
101
- action={
102
- <Button disableRipple variant='text' color='secondary'>
103
- <Trans id='Select' />
104
- </Button>
105
- }
106
- image={<IconSvg src={iconHome} size='large' />}
107
- title={`${address?.firstname} ${address?.lastname}`}
108
- details={
109
- <Box>
110
- {address?.street?.join(' ')}, {address?.postcode}, {address?.city},{' '}
111
- {address?.country_code}
112
- </Box>
113
- }
114
- onClick={onChange}
115
- secondaryAction={
116
- <Button
117
- disableRipple
118
- color='secondary'
119
- variant='text'
120
- onClick={(e) => {
121
- e.stopPropagation()
122
-
123
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
124
- router.push(
125
- `/checkout/customer/addresses/edit?addressId=${address?.id}`,
126
- )
127
- }}
128
- >
129
- <Trans id='Edit address' />
130
- </Button>
131
- }
132
- selected={value === address?.id}
133
- hidden={!!value && value !== address?.id}
134
- reset={
135
- <Button
136
- disableRipple
137
- variant='text'
138
- color='secondary'
139
- onClick={(e) => {
140
- e.preventDefault()
141
- onChange(null)
142
- }}
143
- >
144
- <Trans id='Change' />
145
- </Button>
146
- }
147
- />
148
- ))}
149
- <ActionCard
150
- value='-1'
151
- key='new-address'
152
- title={<Trans id='New address' />}
153
- selected={value === -1}
154
- hidden={!!value && value !== -1}
155
- details={<Trans id='Add new address' />}
156
- image={<IconSvg src={iconHome} size='large' />}
157
- action={
158
- <Button
159
- disableRipple
160
- variant='text'
161
- color='secondary'
162
- onClick={(e) => {
163
- e.preventDefault()
164
- }}
165
- >
166
- <Trans id='Select' />
167
- </Button>
168
- }
169
- reset={
170
- <Button
171
- disableRipple
172
- variant='text'
173
- color='secondary'
174
- onClick={(e) => {
175
- e.preventDefault()
176
- onChange(null)
177
- }}
178
- >
179
- <Trans id='Change' />
180
- </Button>
181
- }
182
- />
183
- </ActionCardList>
184
- </NoSsr>
185
- )}
84
+ items={[
85
+ ...(addresses ?? []).map((address) => ({
86
+ value: Number(address?.id),
87
+ title: `${address?.firstname} ${address?.lastname}`,
88
+ image: <IconSvg src={iconHome} size='large' />,
89
+ details: (
90
+ <Box>
91
+ {address?.street?.join(' ')}, {address?.postcode}, {address?.city},{' '}
92
+ {address?.country_code}
93
+ </Box>
94
+ ),
95
+ secondaryAction: (
96
+ <Button
97
+ disableRipple
98
+ color='secondary'
99
+ variant='text'
100
+ onClick={(e) => {
101
+ e.stopPropagation()
102
+ // eslint-disable-next-line @typescript-eslint/no-floating-promises
103
+ push(`/checkout/customer/addresses/edit?addressId=${address?.id}`)
104
+ }}
105
+ >
106
+ <Trans id='Edit address' />
107
+ </Button>
108
+ ),
109
+ })),
110
+ {
111
+ value: '-1',
112
+ title: <Trans id='New address' />,
113
+ details: <Trans id='Add new address' />,
114
+ image: <IconSvg src={iconHome} size='large' />,
115
+ },
116
+ ]}
186
117
  />
187
118
  </FormControl>
188
119
  <ApolloCartErrorAlert error={error} />
package/index.ts CHANGED
@@ -2,3 +2,4 @@ export * from './Api/BillingAddress.gql'
2
2
  export * from './Api/ShippingAddress.gql'
3
3
 
4
4
  export * from './components/ShippingAddressForm/ShippingAddressForm'
5
+ export * from './components/CustomerAddressForm/CustomerAddressForm'
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-cart-shipping-address",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "3.0.19",
5
+ "version": "3.0.22",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -19,11 +19,11 @@
19
19
  },
20
20
  "dependencies": {
21
21
  "@graphcommerce/graphql": "3.1.3",
22
- "@graphcommerce/image": "3.1.5",
23
- "@graphcommerce/magento-cart": "4.2.15",
24
- "@graphcommerce/magento-customer": "4.3.0",
25
- "@graphcommerce/magento-store": "4.2.4",
26
- "@graphcommerce/next-ui": "4.8.0",
22
+ "@graphcommerce/image": "3.1.6",
23
+ "@graphcommerce/magento-cart": "4.3.2",
24
+ "@graphcommerce/magento-customer": "4.4.0",
25
+ "@graphcommerce/magento-store": "4.2.6",
26
+ "@graphcommerce/next-ui": "4.8.2",
27
27
  "@graphcommerce/react-hook-form": "3.1.3"
28
28
  },
29
29
  "peerDependencies": {