@graphcommerce/magento-cart-shipping-method 3.1.0 → 3.2.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.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,43 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 3.2.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`d140fca34`](https://github.com/graphcommerce-org/graphcommerce/commit/d140fca3463b73e761e23fd1d9216305727f0c1a), [`9ec0338df`](https://github.com/graphcommerce-org/graphcommerce/commit/9ec0338dfe34d37b0f2c24e36ffa6ed13ea1145e), [`735b78672`](https://github.com/graphcommerce-org/graphcommerce/commit/735b786724d5401cbe6e88f2515e121a1a0945b2)]:
|
|
8
|
+
- @graphcommerce/magento-cart@4.4.6
|
|
9
|
+
- @graphcommerce/next-ui@4.11.0
|
|
10
|
+
- @graphcommerce/magento-store@4.2.12
|
|
11
|
+
- @graphcommerce/graphql@3.3.0
|
|
12
|
+
- @graphcommerce/magento-cart-shipping-address@3.2.2
|
|
13
|
+
- @graphcommerce/framer-scroller@2.1.18
|
|
14
|
+
|
|
15
|
+
## 3.2.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies []:
|
|
20
|
+
- @graphcommerce/magento-cart@4.4.5
|
|
21
|
+
- @graphcommerce/magento-cart-shipping-address@3.2.1
|
|
22
|
+
|
|
23
|
+
## 3.2.0
|
|
24
|
+
|
|
25
|
+
### Minor Changes
|
|
26
|
+
|
|
27
|
+
- [#1515](https://github.com/graphcommerce-org/graphcommerce/pull/1515) [`371e6cf52`](https://github.com/graphcommerce-org/graphcommerce/commit/371e6cf52916a3b6c44192bd40cc8271bd608832) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - - Shipping method UI improvements in checkout, like working ripple effect, auto select and other styling changes.
|
|
28
|
+
- Added new inline button variant
|
|
29
|
+
|
|
30
|
+
* [#1518](https://github.com/graphcommerce-org/graphcommerce/pull/1518) [`4143483f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4143483f37c038d2bbf218be2685e27a31a35745) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - New ActionCardListForm implementation for Payment Methods
|
|
31
|
+
|
|
32
|
+
### Patch Changes
|
|
33
|
+
|
|
34
|
+
- Updated dependencies [[`371e6cf52`](https://github.com/graphcommerce-org/graphcommerce/commit/371e6cf52916a3b6c44192bd40cc8271bd608832), [`4143483f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4143483f37c038d2bbf218be2685e27a31a35745)]:
|
|
35
|
+
- @graphcommerce/magento-cart-shipping-address@3.2.0
|
|
36
|
+
- @graphcommerce/next-ui@4.10.0
|
|
37
|
+
- @graphcommerce/magento-cart@4.4.4
|
|
38
|
+
- @graphcommerce/framer-scroller@2.1.17
|
|
39
|
+
- @graphcommerce/magento-store@4.2.11
|
|
40
|
+
|
|
3
41
|
## 3.1.0
|
|
4
42
|
|
|
5
43
|
### Minor Changes
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { Money } from '@graphcommerce/magento-store'
|
|
2
|
+
import { ActionCard } from '@graphcommerce/next-ui'
|
|
3
|
+
import { ActionCardItemRenderProps } from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
|
|
4
|
+
import { Trans } from '@lingui/react'
|
|
5
|
+
import { Box, Button } from '@mui/material'
|
|
6
|
+
import { AvailableShippingMethodFragment } from '../../AvailableShippingMethod/AvailableShippingMethod.gql'
|
|
7
|
+
|
|
8
|
+
type ShippingMethodActionCardProps = ActionCardItemRenderProps<
|
|
9
|
+
AvailableShippingMethodFragment | null | undefined
|
|
10
|
+
>
|
|
11
|
+
|
|
12
|
+
export function ShippingMethodActionCard(props: ShippingMethodActionCardProps) {
|
|
13
|
+
const { available, amount, error_message, carrier_title, carrier_code, onReset, ...cardProps } =
|
|
14
|
+
props
|
|
15
|
+
let { hidden = false } = props
|
|
16
|
+
|
|
17
|
+
const isFree = amount && amount.value === 0
|
|
18
|
+
|
|
19
|
+
if (carrier_code !== 'freeshipping') hidden = !available ? true : hidden
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<ActionCard
|
|
23
|
+
{...cardProps}
|
|
24
|
+
hidden={hidden}
|
|
25
|
+
title={carrier_title}
|
|
26
|
+
details={error_message}
|
|
27
|
+
action={
|
|
28
|
+
<Button
|
|
29
|
+
variant='inline'
|
|
30
|
+
color='secondary'
|
|
31
|
+
sx={{ display: available ? undefined : 'none' }}
|
|
32
|
+
disableRipple
|
|
33
|
+
>
|
|
34
|
+
<Trans id='Select' />
|
|
35
|
+
</Button>
|
|
36
|
+
}
|
|
37
|
+
price={!isFree ? <Money {...amount} /> : <Box sx={{ color: '#05C642' }}>Free</Box>}
|
|
38
|
+
reset={
|
|
39
|
+
<Button variant='inline' color='secondary' onClick={onReset} disableRipple size='small'>
|
|
40
|
+
<Trans id='Change' />
|
|
41
|
+
</Button>
|
|
42
|
+
}
|
|
43
|
+
/>
|
|
44
|
+
)
|
|
45
|
+
}
|
|
@@ -3,17 +3,22 @@ import {
|
|
|
3
3
|
useCartQuery,
|
|
4
4
|
useFormGqlMutationCart,
|
|
5
5
|
} from '@graphcommerce/magento-cart'
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
|
|
6
|
+
import { Form, FormHeader } from '@graphcommerce/next-ui'
|
|
7
|
+
import {
|
|
8
|
+
ActionCardItemBase,
|
|
9
|
+
ActionCardItemRenderProps,
|
|
10
|
+
ActionCardListForm,
|
|
11
|
+
} from '@graphcommerce/next-ui/ActionCard/ActionCardListForm'
|
|
9
12
|
import {
|
|
10
13
|
useFormCompose,
|
|
11
14
|
UseFormComposeOptions,
|
|
12
15
|
useFormPersist,
|
|
13
16
|
} from '@graphcommerce/react-hook-form'
|
|
17
|
+
import { i18n } from '@lingui/core'
|
|
14
18
|
import { Trans } from '@lingui/react'
|
|
15
|
-
import {
|
|
19
|
+
import { useEffect, useMemo, VFC } from 'react'
|
|
16
20
|
import { GetShippingMethodsDocument } from './GetShippingMethods.gql'
|
|
21
|
+
import { ShippingMethodActionCard } from './ShippingMethodActionCard'
|
|
17
22
|
import {
|
|
18
23
|
ShippingMethodFormDocument,
|
|
19
24
|
ShippingMethodFormMutation,
|
|
@@ -22,29 +27,9 @@ import {
|
|
|
22
27
|
|
|
23
28
|
export type ShippingMethodFormProps = Pick<UseFormComposeOptions, 'step'>
|
|
24
29
|
|
|
25
|
-
function ShippingMethodDetails(props: {
|
|
26
|
-
available: boolean | null | undefined
|
|
27
|
-
price: MoneyProps | null | undefined
|
|
28
|
-
errorMessage: string | null | undefined
|
|
29
|
-
}) {
|
|
30
|
-
const { available, price, errorMessage } = props
|
|
31
|
-
const isFree = price && price.value === 0
|
|
32
|
-
const amount = !isFree ? <Money {...price} /> : 'Free'
|
|
33
|
-
const amountColor = !isFree ? 'text.primary' : '#05C642'
|
|
34
|
-
return (
|
|
35
|
-
<Typography
|
|
36
|
-
variant={available ? 'h5' : 'body1'}
|
|
37
|
-
sx={{ display: 'flex', justifyContent: available ? 'flex-end' : 'flex-start' }}
|
|
38
|
-
color={!available ? undefined : amountColor}
|
|
39
|
-
>
|
|
40
|
-
{available ? amount : errorMessage}
|
|
41
|
-
</Typography>
|
|
42
|
-
)
|
|
43
|
-
}
|
|
44
|
-
|
|
45
30
|
export function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
46
31
|
const { step } = props
|
|
47
|
-
const { data: cartQuery } = useCartQuery(GetShippingMethodsDocument)
|
|
32
|
+
const { data: cartQuery, loading } = useCartQuery(GetShippingMethodsDocument)
|
|
48
33
|
const currentAddress = cartQuery?.cart?.shipping_addresses?.[0]
|
|
49
34
|
const available = currentAddress?.available_shipping_methods
|
|
50
35
|
const selected = currentAddress?.selected_shipping_method
|
|
@@ -52,10 +37,14 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
|
52
37
|
const method = selected?.method_code ?? available?.[0]?.method_code ?? undefined
|
|
53
38
|
const carrierMethod = `${carrier}-${method}`
|
|
54
39
|
|
|
55
|
-
const sortedAvailableShippingMethods =
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
40
|
+
const sortedAvailableShippingMethods = useMemo(
|
|
41
|
+
() =>
|
|
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],
|
|
47
|
+
)
|
|
59
48
|
|
|
60
49
|
const form = useFormGqlMutationCart<
|
|
61
50
|
ShippingMethodFormMutation,
|
|
@@ -72,62 +61,51 @@ export function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
|
72
61
|
},
|
|
73
62
|
})
|
|
74
63
|
|
|
75
|
-
const { handleSubmit, control, error } = form
|
|
64
|
+
const { handleSubmit, control, error, setValue } = form
|
|
76
65
|
const submit = handleSubmit(() => {})
|
|
77
66
|
|
|
78
67
|
useFormPersist({ form, name: 'ShippingMethodForm' })
|
|
79
68
|
useFormCompose({ form, step, submit, key: 'ShippingMethodForm' })
|
|
80
69
|
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
const availableMethods = sortedAvailableShippingMethods.filter((m) => m?.available)
|
|
72
|
+
if (availableMethods.length === 1) {
|
|
73
|
+
setValue(
|
|
74
|
+
'carrierMethod',
|
|
75
|
+
`${availableMethods[0]?.carrier_code}-${availableMethods[0]?.method_code}`,
|
|
76
|
+
)
|
|
77
|
+
}
|
|
78
|
+
}, [
|
|
79
|
+
carrier,
|
|
80
|
+
method,
|
|
81
|
+
selected?.carrier_code,
|
|
82
|
+
selected?.method_code,
|
|
83
|
+
setValue,
|
|
84
|
+
sortedAvailableShippingMethods,
|
|
85
|
+
])
|
|
86
|
+
|
|
81
87
|
return (
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
88
|
+
<>
|
|
89
|
+
{!loading && sortedAvailableShippingMethods.length > 0 && (
|
|
90
|
+
<FormHeader variant='h5' sx={{ marginBottom: 0 }}>
|
|
91
|
+
<Trans id='Shipping method' />
|
|
92
|
+
</FormHeader>
|
|
93
|
+
)}
|
|
94
|
+
|
|
95
|
+
<Form onSubmit={submit} noValidate>
|
|
96
|
+
<ActionCardListForm
|
|
97
|
+
control={control}
|
|
98
|
+
name='carrierMethod'
|
|
99
|
+
errorMessage={i18n._(/* i18n */ `Please select a shipping method`)}
|
|
100
|
+
items={sortedAvailableShippingMethods.filter(Boolean).map((sortedMethod) => ({
|
|
89
101
|
...sortedMethod,
|
|
90
|
-
title: sortedMethod?.carrier_title,
|
|
91
102
|
disabled: !sortedMethod?.available,
|
|
92
|
-
details: (
|
|
93
|
-
<ShippingMethodDetails
|
|
94
|
-
available={sortedMethod?.available}
|
|
95
|
-
price={sortedMethod?.amount}
|
|
96
|
-
errorMessage={sortedMethod?.error_message}
|
|
97
|
-
/>
|
|
98
|
-
),
|
|
99
103
|
value: `${sortedMethod?.carrier_code}-${sortedMethod?.method_code}`,
|
|
100
|
-
}))
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
hidden={false}
|
|
107
|
-
action={
|
|
108
|
-
<Button
|
|
109
|
-
disableRipple
|
|
110
|
-
variant='text'
|
|
111
|
-
color='secondary'
|
|
112
|
-
sx={{ display: actionCardProps.available ? 'contents' : 'none' }}
|
|
113
|
-
>
|
|
114
|
-
<Trans id='Select' />
|
|
115
|
-
</Button>
|
|
116
|
-
}
|
|
117
|
-
reset={
|
|
118
|
-
<Button
|
|
119
|
-
disableRipple
|
|
120
|
-
variant='text'
|
|
121
|
-
color='secondary'
|
|
122
|
-
onClick={actionCardProps.onReset}
|
|
123
|
-
>
|
|
124
|
-
<Trans id='Change' />
|
|
125
|
-
</Button>
|
|
126
|
-
}
|
|
127
|
-
/>
|
|
128
|
-
)}
|
|
129
|
-
/>
|
|
130
|
-
<ApolloCartErrorAlert error={error} />
|
|
131
|
-
</Form>
|
|
104
|
+
}))}
|
|
105
|
+
render={ShippingMethodActionCard as VFC<ActionCardItemRenderProps<ActionCardItemBase>>}
|
|
106
|
+
/>
|
|
107
|
+
<ApolloCartErrorAlert error={error} />
|
|
108
|
+
</Form>
|
|
109
|
+
</>
|
|
132
110
|
)
|
|
133
111
|
}
|
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.
|
|
5
|
+
"version": "3.2.2",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -19,13 +19,13 @@
|
|
|
19
19
|
"type-fest": "^2.12.2"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@graphcommerce/framer-scroller": "2.1.
|
|
23
|
-
"@graphcommerce/graphql": "3.
|
|
22
|
+
"@graphcommerce/framer-scroller": "2.1.18",
|
|
23
|
+
"@graphcommerce/graphql": "3.3.0",
|
|
24
24
|
"@graphcommerce/image": "3.1.7",
|
|
25
|
-
"@graphcommerce/magento-cart": "4.4.
|
|
26
|
-
"@graphcommerce/magento-cart-shipping-address": "3.
|
|
27
|
-
"@graphcommerce/magento-store": "4.2.
|
|
28
|
-
"@graphcommerce/next-ui": "4.
|
|
25
|
+
"@graphcommerce/magento-cart": "4.4.6",
|
|
26
|
+
"@graphcommerce/magento-cart-shipping-address": "3.2.2",
|
|
27
|
+
"@graphcommerce/magento-store": "4.2.12",
|
|
28
|
+
"@graphcommerce/next-ui": "4.11.0",
|
|
29
29
|
"@graphcommerce/react-hook-form": "3.2.2"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|