@graphcommerce/magento-cart-pickup 3.1.2 → 3.1.5
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 +31 -0
- package/components/PickupLocationForm.tsx +121 -0
- package/components/PickupLocationSelector.tsx +3 -115
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 3.1.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1578](https://github.com/graphcommerce-org/graphcommerce/pull/1578) [`b93988eee`](https://github.com/graphcommerce-org/graphcommerce/commit/b93988eeea007ced5ed365971f01913601fc2603) Thanks [@paales](https://github.com/paales)! - Make sure the pickup location form is unmounted so that it doesn’t get submitted when navigating to the payment step
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`49370878a`](https://github.com/graphcommerce-org/graphcommerce/commit/49370878a48b90a4579026a7c56c54f97840cebb), [`b6ce5548c`](https://github.com/graphcommerce-org/graphcommerce/commit/b6ce5548c66a8ca62d3aee29467045f7f07f30c8)]:
|
|
10
|
+
- @graphcommerce/graphql@3.4.4
|
|
11
|
+
- @graphcommerce/next-ui@4.17.0
|
|
12
|
+
- @graphcommerce/magento-cart-shipping-method@3.5.5
|
|
13
|
+
- @graphcommerce/magento-store@4.2.23
|
|
14
|
+
|
|
15
|
+
## 3.1.4
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies [[`02023d8d8`](https://github.com/graphcommerce-org/graphcommerce/commit/02023d8d89c8138144243edce67290bd79ff49a7), [`87a188d6f`](https://github.com/graphcommerce-org/graphcommerce/commit/87a188d6f216b7f7b9ec95afbe74f1146cb07ce4), [`1eb131766`](https://github.com/graphcommerce-org/graphcommerce/commit/1eb131766c32db6fcb0a8e83dba2c3d241658595)]:
|
|
20
|
+
- @graphcommerce/react-hook-form@3.3.2
|
|
21
|
+
- @graphcommerce/next-ui@4.16.0
|
|
22
|
+
- @graphcommerce/magento-cart-shipping-method@3.5.4
|
|
23
|
+
- @graphcommerce/magento-store@4.2.22
|
|
24
|
+
|
|
25
|
+
## 3.1.3
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- Updated dependencies [[`a88f166f0`](https://github.com/graphcommerce-org/graphcommerce/commit/a88f166f0115c58254fe47171da51a5850658a32)]:
|
|
30
|
+
- @graphcommerce/next-ui@4.15.1
|
|
31
|
+
- @graphcommerce/magento-cart-shipping-method@3.5.3
|
|
32
|
+
- @graphcommerce/magento-store@4.2.21
|
|
33
|
+
|
|
3
34
|
## 3.1.2
|
|
4
35
|
|
|
5
36
|
### Patch Changes
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ApolloErrorAlert,
|
|
3
|
+
useFormCompose,
|
|
4
|
+
UseFormComposeOptions,
|
|
5
|
+
} from '@graphcommerce/ecommerce-ui'
|
|
6
|
+
import { useQuery } from '@graphcommerce/graphql'
|
|
7
|
+
import { ProductInfoInput } from '@graphcommerce/graphql-mesh'
|
|
8
|
+
import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart'
|
|
9
|
+
import { useShippingMethod } from '@graphcommerce/magento-cart-shipping-method'
|
|
10
|
+
import { GetShippingMethodsDocument } from '@graphcommerce/magento-cart-shipping-method/components/ShippingMethodForm/GetShippingMethods.gql'
|
|
11
|
+
import { ActionCardItemBase, ActionCardListForm, FormRow } from '@graphcommerce/next-ui'
|
|
12
|
+
import { Trans } from '@lingui/react'
|
|
13
|
+
import { TextField } from '@mui/material'
|
|
14
|
+
import { useMemo, useDeferredValue } from 'react'
|
|
15
|
+
import { GetPickupLocationsForProductsDocument } from '../graphql/GetPickupLocationsForProducts.gql'
|
|
16
|
+
import {
|
|
17
|
+
SetPickupLocationOnCartDocument,
|
|
18
|
+
SetPickupLocationOnCartMutation,
|
|
19
|
+
SetPickupLocationOnCartMutationVariables,
|
|
20
|
+
} from '../graphql/SetPickupLocationOnCart.gql'
|
|
21
|
+
import { PickupLocationActionCard, Location } from './PickupLocationActionCard'
|
|
22
|
+
|
|
23
|
+
export type PickupLocationFormProps = Pick<UseFormComposeOptions, 'step'>
|
|
24
|
+
|
|
25
|
+
function nonNullable<T>(value: T): value is NonNullable<T> {
|
|
26
|
+
return value !== null && value !== undefined
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export function PickupLocationForm(props: PickupLocationFormProps) {
|
|
30
|
+
const { step } = props
|
|
31
|
+
const currentShippingMethod = useShippingMethod()
|
|
32
|
+
|
|
33
|
+
const availableMethods = useCartQuery(GetShippingMethodsDocument, { fetchPolicy: 'cache-only' })
|
|
34
|
+
const productInput = (availableMethods.data?.cart?.items ?? [])?.map<ProductInfoInput>((i) =>
|
|
35
|
+
i?.__typename === 'ConfigurableCartItem'
|
|
36
|
+
? { sku: i.configured_variant.sku ?? '' }
|
|
37
|
+
: { sku: i?.product.sku ?? '' },
|
|
38
|
+
)
|
|
39
|
+
const shippingAddress = availableMethods.data?.cart?.shipping_addresses?.[0]
|
|
40
|
+
|
|
41
|
+
const isAvailable = currentShippingMethod === 'instore-pickup' && productInput.length > 0
|
|
42
|
+
|
|
43
|
+
const defaultSearchTerm = shippingAddress?.pickup_location_code
|
|
44
|
+
? undefined
|
|
45
|
+
: shippingAddress?.postcode ?? undefined
|
|
46
|
+
const form = useFormGqlMutationCart<
|
|
47
|
+
SetPickupLocationOnCartMutation,
|
|
48
|
+
SetPickupLocationOnCartMutationVariables & { searchTerm?: string }
|
|
49
|
+
>(SetPickupLocationOnCartDocument, {
|
|
50
|
+
mode: 'onChange',
|
|
51
|
+
defaultValues: {
|
|
52
|
+
searchTerm: defaultSearchTerm,
|
|
53
|
+
pickupLocationCode: shippingAddress?.pickup_location_code ?? undefined,
|
|
54
|
+
},
|
|
55
|
+
onBeforeSubmit: ({ cartId, pickupLocationCode }) => ({
|
|
56
|
+
cartId,
|
|
57
|
+
pickupLocationCode,
|
|
58
|
+
pickupLocationAddress: {
|
|
59
|
+
firstname: shippingAddress?.firstname ?? '',
|
|
60
|
+
lastname: shippingAddress?.lastname ?? '',
|
|
61
|
+
city: '_',
|
|
62
|
+
country_code: shippingAddress?.country.code ?? '',
|
|
63
|
+
street: ['_'],
|
|
64
|
+
telephone: shippingAddress?.telephone ?? '_',
|
|
65
|
+
postcode: '_',
|
|
66
|
+
},
|
|
67
|
+
}),
|
|
68
|
+
})
|
|
69
|
+
|
|
70
|
+
const { control, handleSubmit, muiRegister } = form
|
|
71
|
+
const submit = handleSubmit(() => {})
|
|
72
|
+
|
|
73
|
+
useFormCompose({ form, step, submit, key: 'PickupLocationForm' })
|
|
74
|
+
|
|
75
|
+
const searchTerm = useDeferredValue((form.watch('searchTerm') || defaultSearchTerm) ?? '')
|
|
76
|
+
const locationsQuery = useQuery(GetPickupLocationsForProductsDocument, {
|
|
77
|
+
variables: {
|
|
78
|
+
productInput,
|
|
79
|
+
searchTerm: `${searchTerm.length < 4 ? '' : searchTerm}:${shippingAddress?.country.code}`,
|
|
80
|
+
},
|
|
81
|
+
skip: !availableMethods.data,
|
|
82
|
+
})
|
|
83
|
+
|
|
84
|
+
const locationData = locationsQuery.data ?? locationsQuery.previousData
|
|
85
|
+
const locations = useMemo(
|
|
86
|
+
() => (locationData?.pickupLocations?.items ?? []).filter(nonNullable),
|
|
87
|
+
[locationData?.pickupLocations?.items],
|
|
88
|
+
)
|
|
89
|
+
|
|
90
|
+
const selected = form.watch('pickupLocationCode')
|
|
91
|
+
|
|
92
|
+
// What to do when shippingForm is pickup but there aren't any available pickup locations?
|
|
93
|
+
if (!isAvailable) return null
|
|
94
|
+
|
|
95
|
+
return (
|
|
96
|
+
<form onSubmit={submit} noValidate>
|
|
97
|
+
{!selected && (
|
|
98
|
+
<FormRow>
|
|
99
|
+
<TextField
|
|
100
|
+
label={<Trans id='Zip code or city' />}
|
|
101
|
+
type='text'
|
|
102
|
+
{...muiRegister('searchTerm', { required: false, minLength: 4 })}
|
|
103
|
+
/>
|
|
104
|
+
</FormRow>
|
|
105
|
+
)}
|
|
106
|
+
|
|
107
|
+
<ActionCardListForm<Location & ActionCardItemBase>
|
|
108
|
+
control={control}
|
|
109
|
+
name='pickupLocationCode'
|
|
110
|
+
errorMessage='Please select a pickup location'
|
|
111
|
+
items={locations.map((location) => ({
|
|
112
|
+
...location,
|
|
113
|
+
value: String(location?.pickup_location_code),
|
|
114
|
+
}))}
|
|
115
|
+
render={PickupLocationActionCard}
|
|
116
|
+
/>
|
|
117
|
+
|
|
118
|
+
<ApolloErrorAlert error={availableMethods.error} />
|
|
119
|
+
</form>
|
|
120
|
+
)
|
|
121
|
+
}
|
|
@@ -1,120 +1,8 @@
|
|
|
1
|
-
import {
|
|
2
|
-
ApolloErrorAlert,
|
|
3
|
-
useFormAutoSubmit,
|
|
4
|
-
useFormCompose,
|
|
5
|
-
UseFormComposeOptions,
|
|
6
|
-
} from '@graphcommerce/ecommerce-ui'
|
|
7
|
-
import { useLazyQuery, useQuery } from '@graphcommerce/graphql'
|
|
8
|
-
import { ProductInfoInput } from '@graphcommerce/graphql-mesh'
|
|
9
1
|
import { useShippingMethod } from '@graphcommerce/magento-cart-shipping-method'
|
|
10
|
-
import {
|
|
11
|
-
import { useCartQuery, useFormGqlMutationCart } from '@graphcommerce/magento-cart/hooks'
|
|
12
|
-
import { ActionCardItemBase, ActionCardListForm, FormRow } from '@graphcommerce/next-ui'
|
|
13
|
-
import { Trans } from '@lingui/react'
|
|
14
|
-
import { debounce, TextField } from '@mui/material'
|
|
15
|
-
import { useCallback, useEffect, useMemo } from 'react'
|
|
16
|
-
import { GetPickupLocationsForProductsDocument } from '../graphql/GetPickupLocationsForProducts.gql'
|
|
17
|
-
import {
|
|
18
|
-
SetPickupLocationOnCartDocument,
|
|
19
|
-
SetPickupLocationOnCartMutation,
|
|
20
|
-
SetPickupLocationOnCartMutationVariables,
|
|
21
|
-
} from '../graphql/SetPickupLocationOnCart.gql'
|
|
22
|
-
import { PickupLocationActionCard, Location } from './PickupLocationActionCard'
|
|
2
|
+
import { PickupLocationForm, PickupLocationFormProps } from './PickupLocationForm'
|
|
23
3
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
function nonNullable<T>(value: T): value is NonNullable<T> {
|
|
27
|
-
return value !== null && value !== undefined
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
export function PickupLocationSelector(props: PickupProps) {
|
|
31
|
-
const { step } = props
|
|
4
|
+
export function PickupLocationSelector(props: PickupLocationFormProps) {
|
|
32
5
|
const currentShippingMethod = useShippingMethod()
|
|
33
6
|
|
|
34
|
-
|
|
35
|
-
const productInput = (availableMethods.data?.cart?.items ?? [])?.map<ProductInfoInput>((i) =>
|
|
36
|
-
i?.__typename === 'ConfigurableCartItem'
|
|
37
|
-
? { sku: i.configured_variant.sku ?? '' }
|
|
38
|
-
: { sku: i?.product.sku ?? '' },
|
|
39
|
-
)
|
|
40
|
-
const shippingAddress = availableMethods.data?.cart?.shipping_addresses?.[0]
|
|
41
|
-
|
|
42
|
-
const isAvailable = currentShippingMethod === 'instore-pickup' && productInput.length > 0
|
|
43
|
-
|
|
44
|
-
const form = useFormGqlMutationCart<
|
|
45
|
-
SetPickupLocationOnCartMutation,
|
|
46
|
-
SetPickupLocationOnCartMutationVariables & { searchTerm?: string }
|
|
47
|
-
>(SetPickupLocationOnCartDocument, {
|
|
48
|
-
mode: 'onChange',
|
|
49
|
-
defaultValues: {
|
|
50
|
-
searchTerm: shippingAddress?.pickup_location_code
|
|
51
|
-
? undefined
|
|
52
|
-
: shippingAddress?.postcode ?? undefined,
|
|
53
|
-
pickupLocationCode: shippingAddress?.pickup_location_code ?? undefined,
|
|
54
|
-
},
|
|
55
|
-
onBeforeSubmit: ({ cartId, pickupLocationCode }) => ({
|
|
56
|
-
cartId,
|
|
57
|
-
pickupLocationCode,
|
|
58
|
-
pickupLocationAddress: {
|
|
59
|
-
firstname: shippingAddress?.firstname ?? '',
|
|
60
|
-
lastname: shippingAddress?.lastname ?? '',
|
|
61
|
-
city: '_',
|
|
62
|
-
country_code: shippingAddress?.country.code ?? '',
|
|
63
|
-
street: ['_'],
|
|
64
|
-
telephone: shippingAddress?.telephone ?? '_',
|
|
65
|
-
postcode: '_',
|
|
66
|
-
},
|
|
67
|
-
}),
|
|
68
|
-
})
|
|
69
|
-
|
|
70
|
-
const { control, handleSubmit, muiRegister } = form
|
|
71
|
-
const submit = handleSubmit(() => {})
|
|
72
|
-
|
|
73
|
-
useFormCompose({ form, step, submit, key: 'PickupLocationForm' })
|
|
74
|
-
|
|
75
|
-
const searchTerm = form.watch('searchTerm') ?? ''
|
|
76
|
-
const locationsQuery = useQuery(GetPickupLocationsForProductsDocument, {
|
|
77
|
-
variables: {
|
|
78
|
-
productInput,
|
|
79
|
-
searchTerm: `${searchTerm.length < 4 ? '' : searchTerm}:${shippingAddress?.country.code}`,
|
|
80
|
-
},
|
|
81
|
-
})
|
|
82
|
-
|
|
83
|
-
const locationData = locationsQuery.data ?? locationsQuery.previousData
|
|
84
|
-
const locations = useMemo(
|
|
85
|
-
() => (locationData?.pickupLocations?.items ?? []).filter(nonNullable),
|
|
86
|
-
[locationData?.pickupLocations?.items],
|
|
87
|
-
)
|
|
88
|
-
|
|
89
|
-
const selected = form.watch('pickupLocationCode')
|
|
90
|
-
|
|
91
|
-
// What to do when shippingForm is pickup but there aren't any available pickup locations?
|
|
92
|
-
if (!isAvailable) return null
|
|
93
|
-
|
|
94
|
-
return (
|
|
95
|
-
<form onSubmit={submit} noValidate>
|
|
96
|
-
{!selected && (
|
|
97
|
-
<FormRow>
|
|
98
|
-
<TextField
|
|
99
|
-
label={<Trans id='Zip code or city' />}
|
|
100
|
-
type='text'
|
|
101
|
-
{...muiRegister('searchTerm', { required: false, minLength: 4 })}
|
|
102
|
-
/>
|
|
103
|
-
</FormRow>
|
|
104
|
-
)}
|
|
105
|
-
|
|
106
|
-
<ActionCardListForm<Location & ActionCardItemBase>
|
|
107
|
-
control={control}
|
|
108
|
-
name='pickupLocationCode'
|
|
109
|
-
errorMessage='Please select a pickup location'
|
|
110
|
-
items={locations.map((location) => ({
|
|
111
|
-
...location,
|
|
112
|
-
value: String(location?.pickup_location_code),
|
|
113
|
-
}))}
|
|
114
|
-
render={PickupLocationActionCard}
|
|
115
|
-
/>
|
|
116
|
-
|
|
117
|
-
<ApolloErrorAlert error={availableMethods.error} />
|
|
118
|
-
</form>
|
|
119
|
-
)
|
|
7
|
+
return currentShippingMethod === 'instore-pickup' ? <PickupLocationForm {...props} /> : null
|
|
120
8
|
}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/magento-cart-pickup",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "3.1.
|
|
5
|
+
"version": "3.1.5",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -18,12 +18,12 @@
|
|
|
18
18
|
"@playwright/test": "^1.21.1"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@graphcommerce/graphql": "3.4.
|
|
21
|
+
"@graphcommerce/graphql": "3.4.4",
|
|
22
22
|
"@graphcommerce/image": "3.1.7",
|
|
23
|
-
"@graphcommerce/magento-cart-shipping-method": "3.5.
|
|
24
|
-
"@graphcommerce/magento-store": "4.2.
|
|
25
|
-
"@graphcommerce/next-ui": "4.
|
|
26
|
-
"@graphcommerce/react-hook-form": "3.3.
|
|
23
|
+
"@graphcommerce/magento-cart-shipping-method": "3.5.5",
|
|
24
|
+
"@graphcommerce/magento-store": "4.2.23",
|
|
25
|
+
"@graphcommerce/next-ui": "4.17.0",
|
|
26
|
+
"@graphcommerce/react-hook-form": "3.3.2"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@lingui/core": "^3.13.2",
|