@graphcommerce/magento-cart-shipping-method 2.106.45 → 3.0.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.
- package/AvailableShippingMethod/AvailableShippingMethod.tsx +70 -65
- package/CHANGELOG.md +77 -69
- package/ShippingMethodForm/ShippingMethodForm.tsx +107 -114
- package/package.json +19 -27
|
@@ -1,54 +1,21 @@
|
|
|
1
1
|
import { Money } from '@graphcommerce/magento-store'
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
2
|
+
import { ToggleButton, ToggleButtonProps, extendableComponent } from '@graphcommerce/next-ui'
|
|
3
|
+
import { Trans } from '@lingui/macro'
|
|
4
|
+
import { Box, FormHelperText } from '@mui/material'
|
|
5
5
|
import React from 'react'
|
|
6
6
|
import { SetOptional } from 'type-fest'
|
|
7
7
|
import { AvailableShippingMethodFragment } from './AvailableShippingMethod.gql'
|
|
8
8
|
|
|
9
|
-
const useStyles = makeStyles(
|
|
10
|
-
(theme: Theme) => ({
|
|
11
|
-
root: {
|
|
12
|
-
textAlign: 'left',
|
|
13
|
-
justifyContent: 'space-between',
|
|
14
|
-
alignItems: 'normal',
|
|
15
|
-
},
|
|
16
|
-
label: {
|
|
17
|
-
...theme.typography.body2,
|
|
18
|
-
display: 'grid',
|
|
19
|
-
gridTemplate: `
|
|
20
|
-
"title amount"
|
|
21
|
-
"additional additional"
|
|
22
|
-
"error error"
|
|
23
|
-
`,
|
|
24
|
-
gridTemplateColumns: 'auto min-content',
|
|
25
|
-
columnGap: theme.spacings.xxs,
|
|
26
|
-
},
|
|
27
|
-
methodTitle: {
|
|
28
|
-
...theme.typography.subtitle2,
|
|
29
|
-
gridArea: 'title',
|
|
30
|
-
},
|
|
31
|
-
methodAdditional: {
|
|
32
|
-
...theme.typography.body2,
|
|
33
|
-
gridArea: 'additional',
|
|
34
|
-
},
|
|
35
|
-
errorMessage: {
|
|
36
|
-
gridArea: 'error',
|
|
37
|
-
},
|
|
38
|
-
amountLabel: {
|
|
39
|
-
gridArea: 'amount',
|
|
40
|
-
fontWeight: theme.typography.fontWeightBold,
|
|
41
|
-
},
|
|
42
|
-
amountLabelFree: {
|
|
43
|
-
color: theme.palette.success.main,
|
|
44
|
-
},
|
|
45
|
-
}),
|
|
46
|
-
{ name: 'ShippingMethodToggleButton' },
|
|
47
|
-
)
|
|
48
|
-
|
|
49
9
|
export type AvailableShippingMethodProps = SetOptional<AvailableShippingMethodFragment, 'amount'> &
|
|
50
|
-
Omit<ToggleButtonProps, 'size'>
|
|
51
|
-
|
|
10
|
+
Omit<ToggleButtonProps, 'size'>
|
|
11
|
+
|
|
12
|
+
type OwnerProps = {
|
|
13
|
+
free?: boolean
|
|
14
|
+
error?: boolean
|
|
15
|
+
}
|
|
16
|
+
const name = 'AvailableShippingMethod' as const
|
|
17
|
+
const parts = ['root', 'title', 'additional', 'error', 'amount'] as const
|
|
18
|
+
const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
|
|
52
19
|
|
|
53
20
|
const AvailableShippingMethod = React.forwardRef<any, AvailableShippingMethodProps>(
|
|
54
21
|
(props, ref) => {
|
|
@@ -62,44 +29,82 @@ const AvailableShippingMethod = React.forwardRef<any, AvailableShippingMethodPro
|
|
|
62
29
|
method_code,
|
|
63
30
|
method_title,
|
|
64
31
|
children,
|
|
32
|
+
sx = [],
|
|
65
33
|
...toggleProps
|
|
66
34
|
} = props
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
errorMessage,
|
|
73
|
-
...classes
|
|
74
|
-
} = useStyles(props)
|
|
35
|
+
|
|
36
|
+
const classes = withState({
|
|
37
|
+
free: amount?.value === 0,
|
|
38
|
+
error: !!error_message,
|
|
39
|
+
})
|
|
75
40
|
|
|
76
41
|
return (
|
|
77
42
|
<ToggleButton
|
|
78
43
|
{...toggleProps}
|
|
79
|
-
|
|
44
|
+
className={classes.root}
|
|
80
45
|
ref={ref}
|
|
81
46
|
disabled={!available}
|
|
82
47
|
size='large'
|
|
83
48
|
color='secondary'
|
|
49
|
+
sx={[
|
|
50
|
+
(theme) => ({
|
|
51
|
+
typography: 'body2',
|
|
52
|
+
textAlign: 'left',
|
|
53
|
+
justifyContent: 'space-between',
|
|
54
|
+
alignItems: 'normal',
|
|
55
|
+
display: 'grid',
|
|
56
|
+
gridTemplate: `
|
|
57
|
+
"title amount"
|
|
58
|
+
"additional additional"
|
|
59
|
+
"error error"
|
|
60
|
+
`,
|
|
61
|
+
gridTemplateColumns: 'auto min-content',
|
|
62
|
+
columnGap: theme.spacings.xxs,
|
|
63
|
+
}),
|
|
64
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
65
|
+
]}
|
|
84
66
|
>
|
|
85
|
-
<
|
|
67
|
+
<Box
|
|
68
|
+
className={classes.title}
|
|
69
|
+
sx={{
|
|
70
|
+
typography: 'subtitle1',
|
|
71
|
+
gridArea: 'title',
|
|
72
|
+
}}
|
|
73
|
+
>
|
|
86
74
|
{carrier_title} {method_title}
|
|
87
|
-
</
|
|
75
|
+
</Box>
|
|
88
76
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
77
|
+
<Box
|
|
78
|
+
className={classes.amount}
|
|
79
|
+
sx={{
|
|
80
|
+
gridArea: 'amount',
|
|
81
|
+
typography: 'subtitle2',
|
|
82
|
+
'&.free': {
|
|
83
|
+
color: 'success.main',
|
|
84
|
+
},
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
{amount?.value === 0 ? <Trans>Free</Trans> : <Money {...amount} />}
|
|
88
|
+
</Box>
|
|
96
89
|
|
|
97
90
|
{error_message ? (
|
|
98
|
-
<FormHelperText
|
|
91
|
+
<FormHelperText
|
|
92
|
+
className={classes.error}
|
|
93
|
+
disabled={!available}
|
|
94
|
+
variant='standard'
|
|
95
|
+
sx={{ gridArea: 'error' }}
|
|
96
|
+
>
|
|
99
97
|
{error_message}
|
|
100
98
|
</FormHelperText>
|
|
101
99
|
) : (
|
|
102
|
-
children &&
|
|
100
|
+
children && (
|
|
101
|
+
<Box
|
|
102
|
+
className={classes.additional}
|
|
103
|
+
sx={{ typography: 'body2', gridArea: 'additional' }}
|
|
104
|
+
>
|
|
105
|
+
{children}
|
|
106
|
+
</Box>
|
|
107
|
+
)
|
|
103
108
|
)}
|
|
104
109
|
</ToggleButton>
|
|
105
110
|
)
|
package/CHANGELOG.md
CHANGED
|
@@ -1,125 +1,133 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
3
|
+
## 3.0.0
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
### Major Changes
|
|
7
6
|
|
|
7
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
8
|
+
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
9
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
8
10
|
|
|
9
|
-
###
|
|
11
|
+
### Patch Changes
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
15
|
+
- @graphcommerce/framer-scroller@2.0.0
|
|
16
|
+
- @graphcommerce/graphql@3.0.0
|
|
17
|
+
- @graphcommerce/image@3.0.0
|
|
18
|
+
- @graphcommerce/magento-cart@4.0.0
|
|
19
|
+
- @graphcommerce/magento-cart-shipping-address@3.0.0
|
|
20
|
+
- @graphcommerce/magento-store@4.0.0
|
|
21
|
+
- @graphcommerce/next-ui@4.0.0
|
|
22
|
+
- @graphcommerce/react-hook-form@3.0.0
|
|
12
23
|
|
|
24
|
+
All notable changes to this project will be documented in this file. See
|
|
25
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
13
26
|
|
|
27
|
+
# [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-method@2.105.20...@graphcommerce/magento-cart-shipping-method@2.106.0) (2021-11-12)
|
|
14
28
|
|
|
29
|
+
### Features
|
|
15
30
|
|
|
31
|
+
- added tons of translations
|
|
32
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
16
33
|
|
|
17
34
|
## [2.105.13](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-method@2.105.12...@graphcommerce/magento-cart-shipping-method@2.105.13) (2021-11-09)
|
|
18
35
|
|
|
19
|
-
|
|
20
36
|
### Bug Fixes
|
|
21
37
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
38
|
+
- font sizes
|
|
39
|
+
([1cf7d45](https://github.com/ho-nl/m2-pwa/commit/1cf7d451c3f8bdd064fdf351dffafced97387aff))
|
|
40
|
+
- styling when only 2 methods available. Hide buttons.
|
|
41
|
+
([6a90516](https://github.com/ho-nl/m2-pwa/commit/6a90516833e4fd1ea618111b278ecbdb76c9554a))
|
|
28
42
|
|
|
29
43
|
## [2.105.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-method@2.105.6...@graphcommerce/magento-cart-shipping-method@2.105.7) (2021-11-04)
|
|
30
44
|
|
|
31
|
-
|
|
32
45
|
### Bug Fixes
|
|
33
46
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
47
|
+
- Shipping method scroller styles
|
|
48
|
+
([d48d248](https://github.com/ho-nl/m2-pwa/commit/d48d2486fabb9059dbb0c27a5331784ee676a201))
|
|
39
49
|
|
|
40
50
|
# [2.105.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-method@2.104.10...@graphcommerce/magento-cart-shipping-method@2.105.0) (2021-11-02)
|
|
41
51
|
|
|
42
|
-
|
|
43
52
|
### Bug Fixes
|
|
44
53
|
|
|
45
|
-
|
|
46
|
-
|
|
54
|
+
- **shipping-method-form:** stretch scroller items when there are only two methods
|
|
55
|
+
([6c925fc](https://github.com/ho-nl/m2-pwa/commit/6c925fcd029ad89b2527e63703660e53d3f69265))
|
|
47
56
|
|
|
48
57
|
### Features
|
|
49
58
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
59
|
+
- shipping methods scroller
|
|
60
|
+
([3cc4413](https://github.com/ho-nl/m2-pwa/commit/3cc441320d2a3dd003c499be358a118a17e528c3))
|
|
55
61
|
|
|
56
62
|
# [2.104.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-method@2.103.36...@graphcommerce/magento-cart-shipping-method@2.104.0) (2021-10-27)
|
|
57
63
|
|
|
58
|
-
|
|
59
64
|
### Features
|
|
60
65
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
+
- **nextjs:** upgraded to nextjs 12
|
|
67
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
66
68
|
|
|
67
69
|
## [2.103.10](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-method@2.103.9...@graphcommerce/magento-cart-shipping-method@2.103.10) (2021-10-04)
|
|
68
70
|
|
|
69
|
-
|
|
70
71
|
### Bug Fixes
|
|
71
72
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
- **shipping:** sort available shipping methods by availability
|
|
74
|
+
([27d13ab](https://github.com/ho-nl/m2-pwa/commit/27d13ab1a0d923197bb13557256307f60a243f4a))
|
|
77
75
|
|
|
78
76
|
## [2.103.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-shipping-method@2.103.0...@graphcommerce/magento-cart-shipping-method@2.103.1) (2021-09-27)
|
|
79
77
|
|
|
80
78
|
**Note:** Version bump only for package @graphcommerce/magento-cart-shipping-method
|
|
81
79
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
80
|
# 2.103.0 (2021-09-27)
|
|
87
81
|
|
|
88
|
-
|
|
89
82
|
### Bug Fixes
|
|
90
83
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
84
|
+
- amount label optional for shippingplaceholder
|
|
85
|
+
([a650a18](https://github.com/ho-nl/m2-pwa/commit/a650a18f01f76d9269bfb3926fc626189b803076))
|
|
86
|
+
- error message when no shipping method chosen
|
|
87
|
+
([f948ce1](https://github.com/ho-nl/m2-pwa/commit/f948ce19cbf46db8fd7e8115c93f4f7549ad4e64))
|
|
88
|
+
- ignore md files from triggering version updates
|
|
89
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
90
|
+
- implement next-ui barrel imports
|
|
91
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
92
|
+
- make amount optional
|
|
93
|
+
([3be1471](https://github.com/ho-nl/m2-pwa/commit/3be1471ec1f43eebf73415ec1adc12e0a16630e6))
|
|
94
|
+
- make amout optional for shipping method
|
|
95
|
+
([f744859](https://github.com/ho-nl/m2-pwa/commit/f74485927c979f76a5bdb746aab3eca5186ba4d9))
|
|
96
|
+
- make sure ComposedForm actually submits correctly
|
|
97
|
+
([c6499d9](https://github.com/ho-nl/m2-pwa/commit/c6499d9d36f874cd65b310cbf7f63f5a88fa86cd))
|
|
98
|
+
- **next-ui:** toggle button stylign
|
|
99
|
+
([c806d35](https://github.com/ho-nl/m2-pwa/commit/c806d358aed030c54d568275ee497f8cb9b01359))
|
|
100
|
+
- use SetOptional for amount
|
|
101
|
+
([06c3330](https://github.com/ho-nl/m2-pwa/commit/06c3330d997c0fb19ca46b0c1ff4d96f681b145c))
|
|
101
102
|
|
|
102
103
|
### Features
|
|
103
104
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
105
|
+
- **cart:** when a cart is not active anymore show a clear cart button
|
|
106
|
+
([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
|
|
107
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
108
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
109
|
+
- **image:** introduced completely rewritten Image component
|
|
110
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
111
|
+
- implemented purchase order
|
|
112
|
+
([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
|
|
113
|
+
- next.js 11
|
|
114
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
115
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
116
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
117
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
118
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
119
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
120
|
+
- submit composed form sequentially
|
|
121
|
+
([890d839](https://github.com/ho-nl/m2-pwa/commit/890d8393d635c3777aa17cfa8d4dafc13c2e6cdc))
|
|
122
|
+
- upgraded to nextjs 11
|
|
123
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
124
|
+
- useFormMutationCart and simpler imports
|
|
125
|
+
([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
|
|
115
126
|
|
|
116
127
|
### Reverts
|
|
117
128
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
129
|
+
- Revert "chore: upgrade @apollo/client"
|
|
130
|
+
([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
|
|
123
131
|
|
|
124
132
|
# Change Log
|
|
125
133
|
|
|
@@ -9,15 +9,12 @@ import {
|
|
|
9
9
|
FormRow,
|
|
10
10
|
iconChevronLeft,
|
|
11
11
|
iconChevronRight,
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
SvgIcon,
|
|
13
|
+
extendableComponent,
|
|
14
14
|
} from '@graphcommerce/next-ui'
|
|
15
15
|
import { Controller, useFormCompose, UseFormComposeOptions } from '@graphcommerce/react-hook-form'
|
|
16
|
-
import {
|
|
17
|
-
import { Alert } from '@material
|
|
18
|
-
import clsx from 'clsx'
|
|
19
|
-
import { m } from 'framer-motion'
|
|
20
|
-
import React from 'react'
|
|
16
|
+
import { t, Trans } from '@lingui/macro'
|
|
17
|
+
import { FormControl, Alert, Box } from '@mui/material'
|
|
21
18
|
import AvailableShippingMethod from '../AvailableShippingMethod/AvailableShippingMethod'
|
|
22
19
|
import { GetShippingMethodsDocument } from './GetShippingMethods.gql'
|
|
23
20
|
import {
|
|
@@ -26,83 +23,19 @@ import {
|
|
|
26
23
|
ShippingMethodFormMutationVariables,
|
|
27
24
|
} from './ShippingMethodForm.gql'
|
|
28
25
|
|
|
29
|
-
|
|
30
|
-
(theme: Theme) => ({
|
|
31
|
-
root: {
|
|
32
|
-
marginTop: theme.spacings.xs,
|
|
33
|
-
position: 'relative',
|
|
34
|
-
padding: 0,
|
|
35
|
-
},
|
|
36
|
-
itemtest: {
|
|
37
|
-
background: 'silver',
|
|
38
|
-
width: 300,
|
|
39
|
-
},
|
|
40
|
-
alert: {
|
|
41
|
-
marginTop: theme.spacings.xxs,
|
|
42
|
-
},
|
|
43
|
-
toggleGroup: {
|
|
44
|
-
display: 'inline-flex',
|
|
45
|
-
gap: 10,
|
|
46
|
-
},
|
|
47
|
-
buttonRoot: {
|
|
48
|
-
background: theme.palette.background.default,
|
|
49
|
-
borderRadius: 0,
|
|
50
|
-
width: 30,
|
|
51
|
-
height: '100%',
|
|
52
|
-
boxShadow: 'none',
|
|
53
|
-
border: `1px solid ${theme.palette.divider}`,
|
|
54
|
-
'&:focus': {
|
|
55
|
-
boxShadow: 'none',
|
|
56
|
-
},
|
|
57
|
-
},
|
|
58
|
-
leftButtonRoot: {
|
|
59
|
-
borderTopLeftRadius: 4,
|
|
60
|
-
borderBottomLeftRadius: 4,
|
|
61
|
-
},
|
|
62
|
-
rightButtonRoot: {
|
|
63
|
-
borderTopRightRadius: 4,
|
|
64
|
-
borderBottomRightRadius: 4,
|
|
65
|
-
},
|
|
66
|
-
buttonContainer: {
|
|
67
|
-
position: 'absolute',
|
|
68
|
-
left: 0,
|
|
69
|
-
zIndex: 2,
|
|
70
|
-
height: '100%',
|
|
71
|
-
'& > div': {
|
|
72
|
-
height: '100%',
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
buttonContainerRight: {
|
|
76
|
-
left: 'unset',
|
|
77
|
-
right: 0,
|
|
78
|
-
},
|
|
79
|
-
scrollerRoot: {
|
|
80
|
-
gridTemplateRows: `100%`,
|
|
81
|
-
gridTemplateColumns: `repeat(2, calc(50% - 20px))`,
|
|
82
|
-
gap: 6,
|
|
83
|
-
borderRadius: 0,
|
|
84
|
-
padding: '1px 1px',
|
|
85
|
-
'&:focus': {
|
|
86
|
-
outline: 'unset',
|
|
87
|
-
},
|
|
88
|
-
},
|
|
89
|
-
scrollerRootTwoItems: {
|
|
90
|
-
gridTemplateColumns: `repeat(2, calc(50% - 4px))`,
|
|
91
|
-
},
|
|
92
|
-
buttonRootTwoItems: {
|
|
93
|
-
display: 'none',
|
|
94
|
-
},
|
|
95
|
-
}),
|
|
96
|
-
{ name: 'ShippingMethodForm' },
|
|
97
|
-
)
|
|
26
|
+
export type ShippingMethodFormProps = Pick<UseFormComposeOptions, 'step'>
|
|
98
27
|
|
|
99
|
-
|
|
100
|
-
|
|
28
|
+
type OwnerProps = {
|
|
29
|
+
itemCount?: number
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
const name = 'ShippingMethodForm' as const
|
|
33
|
+
const parts = ['root', 'alert', 'buttonRoot', 'buttonContainer', 'scrollerRoot'] as const
|
|
34
|
+
const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
|
|
101
35
|
|
|
102
36
|
export default function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
103
37
|
const { step } = props
|
|
104
38
|
const { data: cartQuery } = useCartQuery(GetShippingMethodsDocument)
|
|
105
|
-
const classes = useStyles(props)
|
|
106
39
|
|
|
107
40
|
const currentAddress = cartQuery?.cart?.shipping_addresses?.[0]
|
|
108
41
|
const available = currentAddress?.available_shipping_methods
|
|
@@ -113,6 +46,7 @@ export default function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
|
113
46
|
|
|
114
47
|
const sortedAvailableShippingMethods = [
|
|
115
48
|
...(currentAddress?.available_shipping_methods ?? []),
|
|
49
|
+
// eslint-disable-next-line no-nested-ternary
|
|
116
50
|
].sort((a, b) => (a === b ? 0 : a ? -1 : 1))
|
|
117
51
|
|
|
118
52
|
const form = useFormGqlMutationCart<
|
|
@@ -127,32 +61,55 @@ export default function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
|
127
61
|
const submit = handleSubmit(() => {})
|
|
128
62
|
useFormCompose({ form, step, submit, key: 'ShippingMethodForm' })
|
|
129
63
|
|
|
64
|
+
const classes = withState({ itemCount: sortedAvailableShippingMethods.length })
|
|
130
65
|
return (
|
|
131
66
|
<Form onSubmit={submit} noValidate>
|
|
132
67
|
<input type='hidden' {...register('carrier', { required: required.carrier })} />
|
|
133
68
|
<input type='hidden' {...register('method', { required: required.method })} />
|
|
134
69
|
|
|
135
|
-
<FormRow
|
|
70
|
+
<FormRow
|
|
71
|
+
className={classes.root}
|
|
72
|
+
sx={(theme) => ({
|
|
73
|
+
marginTop: theme.spacings.xs,
|
|
74
|
+
position: 'relative',
|
|
75
|
+
padding: 0,
|
|
76
|
+
})}
|
|
77
|
+
>
|
|
136
78
|
<ScrollerProvider scrollSnapAlign='center'>
|
|
137
|
-
<
|
|
79
|
+
<Box
|
|
80
|
+
className={classes.buttonContainer}
|
|
81
|
+
sx={{
|
|
82
|
+
position: 'absolute',
|
|
83
|
+
left: 0,
|
|
84
|
+
zIndex: 2,
|
|
85
|
+
height: '100%',
|
|
86
|
+
'& > div': { height: '100%' },
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
138
89
|
<ScrollerButton
|
|
139
90
|
direction='left'
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
91
|
+
className={classes.buttonRoot}
|
|
92
|
+
sx={{
|
|
93
|
+
bgcolor: 'background.default',
|
|
94
|
+
borderRadius: 0,
|
|
95
|
+
width: '30px',
|
|
96
|
+
height: '100%',
|
|
97
|
+
boxShadow: 'none',
|
|
98
|
+
borderWidth: 1,
|
|
99
|
+
borderColor: 'divider',
|
|
100
|
+
'&:focus': {
|
|
101
|
+
boxShadow: 'none',
|
|
102
|
+
},
|
|
103
|
+
borderTopLeftRadius: 4,
|
|
104
|
+
borderBottomLeftRadius: 4,
|
|
105
|
+
'&.itemCount1, &.itemCount2': {
|
|
106
|
+
display: 'none',
|
|
107
|
+
},
|
|
146
108
|
}}
|
|
147
109
|
>
|
|
148
|
-
<
|
|
149
|
-
src={iconChevronLeft}
|
|
150
|
-
alt='chevron left'
|
|
151
|
-
size='small'
|
|
152
|
-
loading='eager'
|
|
153
|
-
/>
|
|
110
|
+
<SvgIcon src={iconChevronLeft} size='small' aria-label={t`Scroll Left`} />
|
|
154
111
|
</ScrollerButton>
|
|
155
|
-
</
|
|
112
|
+
</Box>
|
|
156
113
|
|
|
157
114
|
<FormControl>
|
|
158
115
|
<Controller
|
|
@@ -163,10 +120,25 @@ export default function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
|
163
120
|
render={({ field: { onChange, value, onBlur }, fieldState: { invalid } }) => (
|
|
164
121
|
<>
|
|
165
122
|
<Scroller
|
|
166
|
-
className={
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
123
|
+
className={classes.scrollerRoot}
|
|
124
|
+
sx={[
|
|
125
|
+
{
|
|
126
|
+
gridTemplateRows: `100%`,
|
|
127
|
+
gridTemplateColumns: `repeat(2, calc(50% - 20px))`,
|
|
128
|
+
gap: `6px`,
|
|
129
|
+
borderRadius: 0,
|
|
130
|
+
padding: '1px 1px',
|
|
131
|
+
'&:focus': {
|
|
132
|
+
outline: 'unset',
|
|
133
|
+
},
|
|
134
|
+
},
|
|
135
|
+
sortedAvailableShippingMethods.length === 2 && {
|
|
136
|
+
gridTemplateColumns: `repeat(2, calc(50% - 4px))`,
|
|
137
|
+
},
|
|
138
|
+
sortedAvailableShippingMethods.length === 1 && {
|
|
139
|
+
gridTemplateColumns: `repeat(2, calc(100% - 8px))`,
|
|
140
|
+
},
|
|
141
|
+
]}
|
|
170
142
|
hideScrollbar
|
|
171
143
|
tabIndex={0}
|
|
172
144
|
>
|
|
@@ -200,13 +172,19 @@ export default function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
|
200
172
|
carrier_code='none'
|
|
201
173
|
carrier_title='No shipping methods available'
|
|
202
174
|
>
|
|
203
|
-
Please fill in your address to see shipping methods
|
|
175
|
+
<Trans>Please fill in your address to see shipping methods</Trans>
|
|
204
176
|
</AvailableShippingMethod>
|
|
205
177
|
)}
|
|
206
178
|
</Scroller>
|
|
207
179
|
|
|
208
180
|
{invalid && currentAddress?.available_shipping_methods && (
|
|
209
|
-
<Alert
|
|
181
|
+
<Alert
|
|
182
|
+
className={classes.alert}
|
|
183
|
+
severity='error'
|
|
184
|
+
sx={(theme) => ({
|
|
185
|
+
marginTop: theme.spacings.xxs,
|
|
186
|
+
})}
|
|
187
|
+
>
|
|
210
188
|
Please select a shipping method
|
|
211
189
|
</Alert>
|
|
212
190
|
)}
|
|
@@ -215,25 +193,40 @@ export default function ShippingMethodForm(props: ShippingMethodFormProps) {
|
|
|
215
193
|
/>
|
|
216
194
|
</FormControl>
|
|
217
195
|
|
|
218
|
-
<
|
|
196
|
+
<Box
|
|
197
|
+
sx={{
|
|
198
|
+
position: 'absolute',
|
|
199
|
+
right: 0,
|
|
200
|
+
zIndex: 2,
|
|
201
|
+
height: '100%',
|
|
202
|
+
'& > div': { height: '100%' },
|
|
203
|
+
}}
|
|
204
|
+
className={classes.buttonContainer}
|
|
205
|
+
>
|
|
219
206
|
<ScrollerButton
|
|
220
207
|
direction='right'
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
208
|
+
sx={{
|
|
209
|
+
bgcolor: 'background.default',
|
|
210
|
+
borderRadius: 0,
|
|
211
|
+
width: '30px',
|
|
212
|
+
height: '100%',
|
|
213
|
+
boxShadow: 'none',
|
|
214
|
+
borderWidth: 1,
|
|
215
|
+
borderColor: 'divider',
|
|
216
|
+
'&:focus': {
|
|
217
|
+
boxShadow: 'none',
|
|
218
|
+
},
|
|
219
|
+
borderTopRightRadius: 4,
|
|
220
|
+
borderBottomRightRadius: 4,
|
|
221
|
+
'&.itemCount1, &.itemCount2': {
|
|
222
|
+
display: 'none',
|
|
223
|
+
},
|
|
227
224
|
}}
|
|
225
|
+
className={classes.buttonRoot}
|
|
228
226
|
>
|
|
229
|
-
<
|
|
230
|
-
src={iconChevronRight}
|
|
231
|
-
alt='chevron right'
|
|
232
|
-
size='small'
|
|
233
|
-
loading='eager'
|
|
234
|
-
/>
|
|
227
|
+
<SvgIcon src={iconChevronRight} size='small' aria-label={t`Scroll Right`} />
|
|
235
228
|
</ScrollerButton>
|
|
236
|
-
</
|
|
229
|
+
</Box>
|
|
237
230
|
</ScrollerProvider>
|
|
238
231
|
</FormRow>
|
|
239
232
|
|
package/package.json
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-cart-shipping-method",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
|
-
"browserslist": [
|
|
7
|
-
"extends @graphcommerce/browserslist-config-pwa"
|
|
8
|
-
],
|
|
9
6
|
"eslintConfig": {
|
|
10
7
|
"extends": "@graphcommerce/eslint-config-pwa",
|
|
11
8
|
"parserOptions": {
|
|
@@ -13,31 +10,26 @@
|
|
|
13
10
|
}
|
|
14
11
|
},
|
|
15
12
|
"devDependencies": {
|
|
16
|
-
"@graphcommerce/
|
|
17
|
-
"@graphcommerce/
|
|
18
|
-
"@graphcommerce/
|
|
19
|
-
"@
|
|
20
|
-
"@playwright/test": "^1.17.1"
|
|
13
|
+
"@graphcommerce/eslint-config-pwa": "^4.0.0",
|
|
14
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.0",
|
|
15
|
+
"@graphcommerce/typescript-config-pwa": "^4.0.0",
|
|
16
|
+
"@playwright/test": "^1.18.1"
|
|
21
17
|
},
|
|
22
18
|
"dependencies": {
|
|
23
|
-
"@
|
|
24
|
-
"@graphcommerce/
|
|
25
|
-
"@graphcommerce/
|
|
26
|
-
"@graphcommerce/
|
|
27
|
-
"@graphcommerce/magento-cart": "^3.
|
|
28
|
-
"@graphcommerce/magento-
|
|
29
|
-
"@graphcommerce/
|
|
30
|
-
"@graphcommerce/
|
|
31
|
-
"@
|
|
32
|
-
"@
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"clsx": "^1.1.1",
|
|
36
|
-
"framer-motion": "^5.5.5",
|
|
37
|
-
"next": "^12.0.7",
|
|
19
|
+
"@graphcommerce/framer-scroller": "^2.0.0",
|
|
20
|
+
"@graphcommerce/graphql": "^3.0.0",
|
|
21
|
+
"@graphcommerce/image": "^3.0.0",
|
|
22
|
+
"@graphcommerce/magento-cart": "^4.0.0",
|
|
23
|
+
"@graphcommerce/magento-cart-shipping-address": "^3.0.0",
|
|
24
|
+
"@graphcommerce/magento-store": "^4.0.0",
|
|
25
|
+
"@graphcommerce/next-ui": "^4.0.0",
|
|
26
|
+
"@graphcommerce/react-hook-form": "^3.0.0",
|
|
27
|
+
"@lingui/macro": "^3.13.2",
|
|
28
|
+
"@mui/material": "^5.4.1",
|
|
29
|
+
"framer-motion": "^6.2.4",
|
|
30
|
+
"next": "^12.0.10",
|
|
38
31
|
"react": "^17.0.2",
|
|
39
32
|
"react-dom": "^17.0.2",
|
|
40
|
-
"type-fest": "^2.
|
|
41
|
-
}
|
|
42
|
-
"gitHead": "4f7fd2440fa20b9ad619b1172bc12deaaf8b2456"
|
|
33
|
+
"type-fest": "^2.11.2"
|
|
34
|
+
}
|
|
43
35
|
}
|