@graphcommerce/magento-cart-shipping-address 3.0.17 → 3.0.18
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.
- package/CHANGELOG.md +10 -0
- package/components/CustomerAddressForm/CustomerAddressForm.tsx +193 -0
- package/components/CustomerAddressForm/SetCustomerBillingAddressOnCart.graphql +11 -0
- package/components/CustomerAddressForm/SetCustomerShippingAddressOnCart.graphql +11 -0
- package/components/CustomerAddressForm/SetCustomerShippingBillingAddressOnCart.graphql +21 -0
- package/components/ShippingAddressForm/GetAddresses.graphql +1 -0
- package/components/ShippingAddressForm/ShippingAddressForm.tsx +24 -19
- package/package.json +5 -5
- package/utils/isSameAddress.ts +9 -3
- package/components/ShippingAddressIdForm/ShippingAddressIdForm.graphql +0 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 3.0.18
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`0363b9671`](https://github.com/graphcommerce-org/graphcommerce/commit/0363b9671db7c2932321d97faf6f1eb385238397), [`3ac90b57c`](https://github.com/graphcommerce-org/graphcommerce/commit/3ac90b57c68b96f9d81771d6664ed9435a28fc1d), [`00f6167ff`](https://github.com/graphcommerce-org/graphcommerce/commit/00f6167ff4096bf7432f3d8e8e739ecbf6ab0dd2), [`7159d3ab3`](https://github.com/graphcommerce-org/graphcommerce/commit/7159d3ab31e937c9c921023c46e80db5813e789c), [`32370574b`](https://github.com/graphcommerce-org/graphcommerce/commit/32370574bef6345b857ae911049ca27a64bc7e08), [`ed2b67a06`](https://github.com/graphcommerce-org/graphcommerce/commit/ed2b67a0618d9db97e79ed2a8226e0ae12403943), [`4c146c682`](https://github.com/graphcommerce-org/graphcommerce/commit/4c146c68242e6edc616807fb73173cc959c26034)]:
|
|
8
|
+
- @graphcommerce/next-ui@4.8.0
|
|
9
|
+
- @graphcommerce/magento-customer@4.3.0
|
|
10
|
+
- @graphcommerce/magento-cart@4.2.15
|
|
11
|
+
- @graphcommerce/magento-store@4.2.4
|
|
12
|
+
|
|
3
13
|
## 3.0.17
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
import { useQuery } from '@graphcommerce/graphql'
|
|
2
|
+
import {
|
|
3
|
+
ApolloCartErrorAlert,
|
|
4
|
+
useCartQuery,
|
|
5
|
+
useFormGqlMutationCart,
|
|
6
|
+
} from '@graphcommerce/magento-cart'
|
|
7
|
+
import { CustomerDocument } from '@graphcommerce/magento-customer'
|
|
8
|
+
import { iconHome, IconSvg, ActionCardList, ActionCard, Form, Button } from '@graphcommerce/next-ui'
|
|
9
|
+
import {
|
|
10
|
+
useFormPersist,
|
|
11
|
+
useFormCompose,
|
|
12
|
+
UseFormComposeOptions,
|
|
13
|
+
Controller,
|
|
14
|
+
} from '@graphcommerce/react-hook-form'
|
|
15
|
+
import { Trans } from '@lingui/react'
|
|
16
|
+
import { Box, FormControl, NoSsr } from '@mui/material'
|
|
17
|
+
import { useRouter } from 'next/router'
|
|
18
|
+
import React from 'react'
|
|
19
|
+
import { isSameAddress } from '../../utils/isSameAddress'
|
|
20
|
+
import { GetAddressesDocument } from '../ShippingAddressForm/GetAddresses.gql'
|
|
21
|
+
import { SetCustomerBillingAddressOnCartDocument } from './SetCustomerBillingAddressOnCart.gql'
|
|
22
|
+
import { SetCustomerShippingAddressOnCartDocument } from './SetCustomerShippingAddressOnCart.gql'
|
|
23
|
+
import { SetCustomerShippingBillingAddressOnCartDocument } from './SetCustomerShippingBillingAddressOnCart.gql'
|
|
24
|
+
|
|
25
|
+
type CustomerAddressListProps = Pick<UseFormComposeOptions, 'step'> & { children?: React.ReactNode }
|
|
26
|
+
|
|
27
|
+
export function CustomerAddressForm(props: CustomerAddressListProps) {
|
|
28
|
+
const customerAddresses = useQuery(CustomerDocument)
|
|
29
|
+
const addresses = customerAddresses.data?.customer?.addresses
|
|
30
|
+
const { step, children } = props
|
|
31
|
+
const router = useRouter()
|
|
32
|
+
|
|
33
|
+
const { data: cartQuery } = useCartQuery(GetAddressesDocument)
|
|
34
|
+
|
|
35
|
+
const shippingAddress = cartQuery?.cart?.shipping_addresses?.[0]
|
|
36
|
+
const billingAddress = cartQuery?.cart?.billing_address
|
|
37
|
+
|
|
38
|
+
const found = customerAddresses.data?.customer?.addresses?.find(
|
|
39
|
+
(customerAddr) =>
|
|
40
|
+
[
|
|
41
|
+
customerAddr?.firstname === shippingAddress?.firstname,
|
|
42
|
+
customerAddr?.lastname === shippingAddress?.lastname,
|
|
43
|
+
customerAddr?.city === shippingAddress?.city,
|
|
44
|
+
customerAddr?.postcode === shippingAddress?.postcode,
|
|
45
|
+
customerAddr?.street?.[0] === shippingAddress?.street[0],
|
|
46
|
+
customerAddr?.street?.[1] === shippingAddress?.street[1],
|
|
47
|
+
customerAddr?.street?.[2] === shippingAddress?.street[2],
|
|
48
|
+
customerAddr?.country_code === shippingAddress?.country.code,
|
|
49
|
+
customerAddr?.region?.region_code === shippingAddress?.region?.code,
|
|
50
|
+
].filter((v) => !v).length === 0,
|
|
51
|
+
)
|
|
52
|
+
|
|
53
|
+
const Mutation = isSameAddress(shippingAddress, billingAddress)
|
|
54
|
+
? SetCustomerShippingBillingAddressOnCartDocument
|
|
55
|
+
: SetCustomerShippingAddressOnCartDocument
|
|
56
|
+
|
|
57
|
+
// if (cartQuery?.cart?.is_virtual) {
|
|
58
|
+
// Mutation = SetCustomerBillingAddressOnCartDocument
|
|
59
|
+
// }
|
|
60
|
+
|
|
61
|
+
const form = useFormGqlMutationCart(Mutation, {
|
|
62
|
+
// defaultValues: { customerAddressId: defaultCustomerAddressId },
|
|
63
|
+
mode: 'onChange',
|
|
64
|
+
})
|
|
65
|
+
const { handleSubmit, error, control, watch } = form
|
|
66
|
+
|
|
67
|
+
// If customer selects 'new address' then we do not have to submit anything so we provide an empty submit function.
|
|
68
|
+
const customerAddressId = watch('customerAddressId')
|
|
69
|
+
|
|
70
|
+
const submit = customerAddressId === -1 ? async () => {} : handleSubmit(() => {})
|
|
71
|
+
|
|
72
|
+
useFormPersist({ form, name: 'CustomerAddressForm' })
|
|
73
|
+
useFormCompose({ form, step, submit, key: 'CustomerAddressForm' })
|
|
74
|
+
|
|
75
|
+
if (customerAddresses.loading || !addresses || addresses.length === 0) return null
|
|
76
|
+
|
|
77
|
+
return (
|
|
78
|
+
<>
|
|
79
|
+
{' '}
|
|
80
|
+
<Form onSubmit={submit} noValidate>
|
|
81
|
+
<FormControl>
|
|
82
|
+
<Controller
|
|
83
|
+
control={control}
|
|
84
|
+
defaultValue={found && found.id ? found.id : 0}
|
|
85
|
+
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
|
+
)}
|
|
186
|
+
/>
|
|
187
|
+
</FormControl>
|
|
188
|
+
<ApolloCartErrorAlert error={error} />
|
|
189
|
+
</Form>
|
|
190
|
+
{customerAddressId === -1 && children}
|
|
191
|
+
</>
|
|
192
|
+
)
|
|
193
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
mutation SetCustomerBillingAddressOnCart($cartId: String!, $customerAddressId: Int!) {
|
|
2
|
+
setBillingAddressOnCart(
|
|
3
|
+
input: { cart_id: $cartId, billing_address: { customer_address_id: $customerAddressId } }
|
|
4
|
+
) {
|
|
5
|
+
cart {
|
|
6
|
+
id
|
|
7
|
+
__typename
|
|
8
|
+
...BillingAddress
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
mutation SetCustomerShippingAddressOnCart($cartId: String!, $customerAddressId: Int!) {
|
|
2
|
+
setShippingAddressesOnCart(
|
|
3
|
+
input: { cart_id: $cartId, shipping_addresses: [{ customer_address_id: $customerAddressId }] }
|
|
4
|
+
) {
|
|
5
|
+
cart {
|
|
6
|
+
id
|
|
7
|
+
__typename
|
|
8
|
+
...ShippingAddress
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
mutation SetCustomerShippingBillingAddressOnCart($cartId: String!, $customerAddressId: Int!) {
|
|
2
|
+
setShippingAddressesOnCart(
|
|
3
|
+
input: { cart_id: $cartId, shipping_addresses: [{ customer_address_id: $customerAddressId }] }
|
|
4
|
+
) {
|
|
5
|
+
cart {
|
|
6
|
+
id
|
|
7
|
+
__typename
|
|
8
|
+
...ShippingAddress
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
setBillingAddressOnCart(
|
|
13
|
+
input: { cart_id: $cartId, billing_address: { customer_address_id: $customerAddressId } }
|
|
14
|
+
) {
|
|
15
|
+
cart {
|
|
16
|
+
id
|
|
17
|
+
__typename
|
|
18
|
+
...BillingAddress
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -24,10 +24,12 @@ import { GetAddressesDocument } from './GetAddresses.gql'
|
|
|
24
24
|
import { SetShippingAddressDocument } from './SetShippingAddress.gql'
|
|
25
25
|
import { SetShippingBillingAddressDocument } from './SetShippingBillingAddress.gql'
|
|
26
26
|
|
|
27
|
-
export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'>
|
|
27
|
+
export type ShippingAddressFormProps = Pick<UseFormComposeOptions, 'step'> & {
|
|
28
|
+
ignoreCache?: boolean
|
|
29
|
+
}
|
|
28
30
|
|
|
29
31
|
export function ShippingAddressForm(props: ShippingAddressFormProps) {
|
|
30
|
-
const { step } = props
|
|
32
|
+
const { step, ignoreCache = false } = props
|
|
31
33
|
const { data: cartQuery } = useCartQuery(GetAddressesDocument)
|
|
32
34
|
const { data: config } = useQuery(StoreConfigDocument)
|
|
33
35
|
const { data: countriesData } = useQuery(CountryRegionsDocument)
|
|
@@ -46,22 +48,27 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
|
|
|
46
48
|
? SetShippingBillingAddressDocument
|
|
47
49
|
: SetShippingAddressDocument
|
|
48
50
|
|
|
51
|
+
// If address is an existing customer address then this form is rendered to add a new address so we don't want any default values.
|
|
52
|
+
|
|
49
53
|
const form = useFormGqlMutationCart(Mutation, {
|
|
50
|
-
defaultValues:
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
54
|
+
defaultValues: ignoreCache
|
|
55
|
+
? {}
|
|
56
|
+
: {
|
|
57
|
+
// todo(paales): change to something more sustainable
|
|
58
|
+
firstname: currentAddress?.firstname ?? currentCustomer?.firstname ?? '',
|
|
59
|
+
lastname: currentAddress?.lastname ?? currentCustomer?.lastname ?? '',
|
|
60
|
+
telephone:
|
|
61
|
+
currentAddress?.telephone !== '000 - 000 0000' ? currentAddress?.telephone : '',
|
|
62
|
+
city: currentAddress?.city ?? '',
|
|
63
|
+
company: currentAddress?.company ?? '',
|
|
64
|
+
postcode: currentAddress?.postcode ?? '',
|
|
65
|
+
street: currentAddress?.street?.[0] ?? '',
|
|
66
|
+
houseNumber: currentAddress?.street?.[1] ?? '',
|
|
67
|
+
addition: currentAddress?.street?.[2] ?? '',
|
|
68
|
+
regionId: currentAddress?.region?.region_id ?? null,
|
|
69
|
+
countryCode: currentCountryCode, // todo: replace by the default shipping country of the store + geoip,
|
|
70
|
+
saveInAddressBook: true,
|
|
71
|
+
},
|
|
65
72
|
mode: 'onChange',
|
|
66
73
|
onBeforeSubmit: (variables) => {
|
|
67
74
|
const regionId = countriesData?.countries
|
|
@@ -94,7 +101,6 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
|
|
|
94
101
|
<AnimatePresence initial={false}>
|
|
95
102
|
<NameFields form={form} key='name' readOnly={readOnly} />
|
|
96
103
|
<AddressFields form={form} key='addressfields' readOnly={readOnly} />
|
|
97
|
-
|
|
98
104
|
<FormRow key='telephone'>
|
|
99
105
|
<TextField
|
|
100
106
|
variant='outlined'
|
|
@@ -113,7 +119,6 @@ export function ShippingAddressForm(props: ShippingAddressFormProps) {
|
|
|
113
119
|
}}
|
|
114
120
|
/>
|
|
115
121
|
</FormRow>
|
|
116
|
-
|
|
117
122
|
<ApolloCartErrorAlert error={error} />
|
|
118
123
|
</AnimatePresence>
|
|
119
124
|
</Form>
|
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.
|
|
5
|
+
"version": "3.0.18",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@graphcommerce/graphql": "3.1.3",
|
|
22
22
|
"@graphcommerce/image": "3.1.5",
|
|
23
|
-
"@graphcommerce/magento-cart": "4.2.
|
|
24
|
-
"@graphcommerce/magento-customer": "4.
|
|
25
|
-
"@graphcommerce/magento-store": "4.2.
|
|
26
|
-
"@graphcommerce/next-ui": "4.
|
|
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",
|
|
27
27
|
"@graphcommerce/react-hook-form": "3.1.3"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
package/utils/isSameAddress.ts
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { CartAddressFragment } from '@graphcommerce/magento-cart/components/CartAddress/CartAddress.gql'
|
|
2
2
|
|
|
3
|
+
type PartialNullable<T> = {
|
|
4
|
+
[P in keyof T]?: T[P] | null
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
type AddressSignature = PartialNullable<Omit<CartAddressFragment, '__typename'>>
|
|
8
|
+
|
|
3
9
|
const pluckAddress = ({
|
|
4
10
|
firstname,
|
|
5
11
|
lastname,
|
|
@@ -10,7 +16,7 @@ const pluckAddress = ({
|
|
|
10
16
|
company,
|
|
11
17
|
postcode,
|
|
12
18
|
region,
|
|
13
|
-
}:
|
|
19
|
+
}: AddressSignature): AddressSignature => ({
|
|
14
20
|
firstname,
|
|
15
21
|
lastname,
|
|
16
22
|
street,
|
|
@@ -23,8 +29,8 @@ const pluckAddress = ({
|
|
|
23
29
|
})
|
|
24
30
|
|
|
25
31
|
export function isSameAddress(
|
|
26
|
-
address1:
|
|
27
|
-
address2:
|
|
32
|
+
address1: AddressSignature | null | undefined,
|
|
33
|
+
address2: AddressSignature | null | undefined,
|
|
28
34
|
) {
|
|
29
35
|
// check if both are undefined/null
|
|
30
36
|
// eslint-disable-next-line eqeqeq
|