@graphcommerce/magento-cart-shipping-method 2.106.47 → 3.0.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.
Files changed (4) hide show
  1. package/AvailableShippingMethod/AvailableShippingMethod.tsx +70 -65
  2. package/CHANGELOG.md +135 -72
  3. package/ShippingMethodForm/ShippingMethodForm.tsx +107 -114
  4. package/package.json +24 -28
package/AvailableShippingMethod/AvailableShippingMethod.tsx CHANGED
@@ -1,54 +1,21 @@
1
1
  import { Money } from '@graphcommerce/magento-store'
2
- import { UseStyles, ToggleButton, ToggleButtonProps } from '@graphcommerce/next-ui'
3
- import { FormHelperText, makeStyles, Theme } from '@material-ui/core'
4
- import clsx from 'clsx'
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
- UseStyles<typeof useStyles>
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
- const {
68
- amountLabel,
69
- amountLabelFree,
70
- methodTitle,
71
- methodAdditional,
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
- classes={classes}
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
- <div className={methodTitle}>
67
+ <Box
68
+ className={classes.title}
69
+ sx={{
70
+ typography: 'subtitle1',
71
+ gridArea: 'title',
72
+ }}
73
+ >
86
74
  {carrier_title} {method_title}
87
- </div>
75
+ </Box>
88
76
 
89
- {amount?.value === 0 ? (
90
- <div className={clsx(amountLabel, amountLabelFree)}>Free</div>
91
- ) : (
92
- <div className={amountLabel}>
93
- <Money {...amount} />
94
- </div>
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 className={errorMessage} disabled>
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 && <div className={methodAdditional}>{children}</div>
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,188 @@
1
1
  # Change Log
2
2
 
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
3
+ ## 3.0.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
8
+ [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
9
+ Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
10
+ `dependencies` to `peerDependencies`. The result of this is that there will be significantly less
11
+ duplicate packages in the node_modules folders.
12
+
13
+ * [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
14
+ [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
15
+ Thanks [@paales](https://github.com/paales)! - Upgraded to
16
+ [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
17
+ implementing
18
+ [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
19
+ soon.
20
+
21
+ This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
22
+ frontend to be able to revalidate pages manually.
23
+
24
+ * Updated dependencies
25
+ [[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
26
+ [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
27
+ [`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b),
28
+ [`b08a8eb1d`](https://github.com/ho-nl/m2-pwa/commit/b08a8eb1d024b9d3e7712ef034029151670db275),
29
+ [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d),
30
+ [`5a4809b1a`](https://github.com/ho-nl/m2-pwa/commit/5a4809b1a705aa32f620f520085df48ee25f9949)]:
31
+ - @graphcommerce/magento-cart@4.1.1
32
+ - @graphcommerce/next-ui@4.1.1
33
+ - @graphcommerce/react-hook-form@3.0.2
34
+ - @graphcommerce/framer-scroller@2.0.2
35
+ - @graphcommerce/graphql@3.0.2
36
+ - @graphcommerce/image@3.0.2
37
+ - @graphcommerce/magento-cart-shipping-address@3.0.2
38
+ - @graphcommerce/magento-store@4.0.2
39
+
40
+ ## 3.0.1
41
+
42
+ ### Patch Changes
43
+
44
+ - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
45
+ Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
46
+ so that the packages link to back to the website and repository
47
+ - Updated dependencies
48
+ [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
49
+ - @graphcommerce/framer-scroller@2.0.1
50
+ - @graphcommerce/graphql@3.0.1
51
+ - @graphcommerce/image@3.0.1
52
+ - @graphcommerce/magento-cart@4.0.1
53
+ - @graphcommerce/magento-cart-shipping-address@3.0.1
54
+ - @graphcommerce/magento-store@4.0.1
55
+ - @graphcommerce/next-ui@4.0.1
56
+ - @graphcommerce/react-hook-form@3.0.1
57
+
58
+ ## 3.0.0
59
+
60
+ ### Major Changes
61
+
62
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
63
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
64
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
65
+
66
+ ### Patch Changes
67
+
68
+ - Updated dependencies
69
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
70
+ - @graphcommerce/framer-scroller@2.0.0
71
+ - @graphcommerce/graphql@3.0.0
72
+ - @graphcommerce/image@3.0.0
73
+ - @graphcommerce/magento-cart@4.0.0
74
+ - @graphcommerce/magento-cart-shipping-address@3.0.0
75
+ - @graphcommerce/magento-store@4.0.0
76
+ - @graphcommerce/next-ui@4.0.0
77
+ - @graphcommerce/react-hook-form@3.0.0
5
78
 
6
- # [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)
79
+ All notable changes to this project will be documented in this file. See
80
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
7
81
 
82
+ # [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)
8
83
 
9
84
  ### Features
10
85
 
11
- * added tons of translations ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
12
-
13
-
14
-
15
-
86
+ - added tons of translations
87
+ ([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
16
88
 
17
89
  ## [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
90
 
19
-
20
91
  ### Bug Fixes
21
92
 
22
- * font sizes ([1cf7d45](https://github.com/ho-nl/m2-pwa/commit/1cf7d451c3f8bdd064fdf351dffafced97387aff))
23
- * styling when only 2 methods available. Hide buttons. ([6a90516](https://github.com/ho-nl/m2-pwa/commit/6a90516833e4fd1ea618111b278ecbdb76c9554a))
24
-
25
-
26
-
27
-
93
+ - font sizes
94
+ ([1cf7d45](https://github.com/ho-nl/m2-pwa/commit/1cf7d451c3f8bdd064fdf351dffafced97387aff))
95
+ - styling when only 2 methods available. Hide buttons.
96
+ ([6a90516](https://github.com/ho-nl/m2-pwa/commit/6a90516833e4fd1ea618111b278ecbdb76c9554a))
28
97
 
29
98
  ## [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
99
 
31
-
32
100
  ### Bug Fixes
33
101
 
34
- * Shipping method scroller styles ([d48d248](https://github.com/ho-nl/m2-pwa/commit/d48d2486fabb9059dbb0c27a5331784ee676a201))
35
-
36
-
37
-
38
-
102
+ - Shipping method scroller styles
103
+ ([d48d248](https://github.com/ho-nl/m2-pwa/commit/d48d2486fabb9059dbb0c27a5331784ee676a201))
39
104
 
40
105
  # [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
106
 
42
-
43
107
  ### Bug Fixes
44
108
 
45
- * **shipping-method-form:** stretch scroller items when there are only two methods ([6c925fc](https://github.com/ho-nl/m2-pwa/commit/6c925fcd029ad89b2527e63703660e53d3f69265))
46
-
109
+ - **shipping-method-form:** stretch scroller items when there are only two methods
110
+ ([6c925fc](https://github.com/ho-nl/m2-pwa/commit/6c925fcd029ad89b2527e63703660e53d3f69265))
47
111
 
48
112
  ### Features
49
113
 
50
- * shipping methods scroller ([3cc4413](https://github.com/ho-nl/m2-pwa/commit/3cc441320d2a3dd003c499be358a118a17e528c3))
51
-
52
-
53
-
54
-
114
+ - shipping methods scroller
115
+ ([3cc4413](https://github.com/ho-nl/m2-pwa/commit/3cc441320d2a3dd003c499be358a118a17e528c3))
55
116
 
56
117
  # [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
118
 
58
-
59
119
  ### Features
60
120
 
61
- * **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
62
-
63
-
64
-
65
-
121
+ - **nextjs:** upgraded to nextjs 12
122
+ ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
66
123
 
67
124
  ## [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
125
 
69
-
70
126
  ### Bug Fixes
71
127
 
72
- * **shipping:** sort available shipping methods by availability ([27d13ab](https://github.com/ho-nl/m2-pwa/commit/27d13ab1a0d923197bb13557256307f60a243f4a))
73
-
74
-
75
-
76
-
128
+ - **shipping:** sort available shipping methods by availability
129
+ ([27d13ab](https://github.com/ho-nl/m2-pwa/commit/27d13ab1a0d923197bb13557256307f60a243f4a))
77
130
 
78
131
  ## [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
132
 
80
133
  **Note:** Version bump only for package @graphcommerce/magento-cart-shipping-method
81
134
 
82
-
83
-
84
-
85
-
86
135
  # 2.103.0 (2021-09-27)
87
136
 
88
-
89
137
  ### Bug Fixes
90
138
 
91
- * amount label optional for shippingplaceholder ([a650a18](https://github.com/ho-nl/m2-pwa/commit/a650a18f01f76d9269bfb3926fc626189b803076))
92
- * error message when no shipping method chosen ([f948ce1](https://github.com/ho-nl/m2-pwa/commit/f948ce19cbf46db8fd7e8115c93f4f7549ad4e64))
93
- * ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
94
- * implement next-ui barrel imports ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
95
- * make amount optional ([3be1471](https://github.com/ho-nl/m2-pwa/commit/3be1471ec1f43eebf73415ec1adc12e0a16630e6))
96
- * make amout optional for shipping method ([f744859](https://github.com/ho-nl/m2-pwa/commit/f74485927c979f76a5bdb746aab3eca5186ba4d9))
97
- * make sure ComposedForm actually submits correctly ([c6499d9](https://github.com/ho-nl/m2-pwa/commit/c6499d9d36f874cd65b310cbf7f63f5a88fa86cd))
98
- * **next-ui:** toggle button stylign ([c806d35](https://github.com/ho-nl/m2-pwa/commit/c806d358aed030c54d568275ee497f8cb9b01359))
99
- * use SetOptional for amount ([06c3330](https://github.com/ho-nl/m2-pwa/commit/06c3330d997c0fb19ca46b0c1ff4d96f681b145c))
100
-
139
+ - amount label optional for shippingplaceholder
140
+ ([a650a18](https://github.com/ho-nl/m2-pwa/commit/a650a18f01f76d9269bfb3926fc626189b803076))
141
+ - error message when no shipping method chosen
142
+ ([f948ce1](https://github.com/ho-nl/m2-pwa/commit/f948ce19cbf46db8fd7e8115c93f4f7549ad4e64))
143
+ - ignore md files from triggering version updates
144
+ ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
145
+ - implement next-ui barrel imports
146
+ ([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
147
+ - make amount optional
148
+ ([3be1471](https://github.com/ho-nl/m2-pwa/commit/3be1471ec1f43eebf73415ec1adc12e0a16630e6))
149
+ - make amout optional for shipping method
150
+ ([f744859](https://github.com/ho-nl/m2-pwa/commit/f74485927c979f76a5bdb746aab3eca5186ba4d9))
151
+ - make sure ComposedForm actually submits correctly
152
+ ([c6499d9](https://github.com/ho-nl/m2-pwa/commit/c6499d9d36f874cd65b310cbf7f63f5a88fa86cd))
153
+ - **next-ui:** toggle button stylign
154
+ ([c806d35](https://github.com/ho-nl/m2-pwa/commit/c806d358aed030c54d568275ee497f8cb9b01359))
155
+ - use SetOptional for amount
156
+ ([06c3330](https://github.com/ho-nl/m2-pwa/commit/06c3330d997c0fb19ca46b0c1ff4d96f681b145c))
101
157
 
102
158
  ### Features
103
159
 
104
- * **cart:** when a cart is not active anymore show a clear cart button ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
105
- * **graphql:** introduced new graphql package that holds all generated files ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
106
- * **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
107
- * implemented purchase order ([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
108
- * next.js 11 ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
109
- * **playwright:** added new playwright package to enable browser testing ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
110
- * renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
111
- * submit composed form sequentially ([890d839](https://github.com/ho-nl/m2-pwa/commit/890d8393d635c3777aa17cfa8d4dafc13c2e6cdc))
112
- * upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
113
- * useFormMutationCart and simpler imports ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
114
-
160
+ - **cart:** when a cart is not active anymore show a clear cart button
161
+ ([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
162
+ - **graphql:** introduced new graphql package that holds all generated files
163
+ ([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
164
+ - **image:** introduced completely rewritten Image component
165
+ ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
166
+ - implemented purchase order
167
+ ([3a40033](https://github.com/ho-nl/m2-pwa/commit/3a40033cd4d6712a17bb9c41a8841ebf7aa2f025))
168
+ - next.js 11
169
+ ([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
170
+ - **playwright:** added new playwright package to enable browser testing
171
+ ([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
172
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
173
+ [@reachdigital](https://github.com/reachdigital)
174
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
175
+ - submit composed form sequentially
176
+ ([890d839](https://github.com/ho-nl/m2-pwa/commit/890d8393d635c3777aa17cfa8d4dafc13c2e6cdc))
177
+ - upgraded to nextjs 11
178
+ ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
179
+ - useFormMutationCart and simpler imports
180
+ ([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
115
181
 
116
182
  ### Reverts
117
183
 
118
- * Revert "chore: upgrade @apollo/client" ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
119
-
120
-
121
-
122
-
184
+ - Revert "chore: upgrade @apollo/client"
185
+ ([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
123
186
 
124
187
  # Change Log
125
188
 
package/ShippingMethodForm/ShippingMethodForm.tsx CHANGED
@@ -9,15 +9,12 @@ import {
9
9
  FormRow,
10
10
  iconChevronLeft,
11
11
  iconChevronRight,
12
- SvgImageSimple,
13
- UseStyles,
12
+ SvgIcon,
13
+ extendableComponent,
14
14
  } from '@graphcommerce/next-ui'
15
15
  import { Controller, useFormCompose, UseFormComposeOptions } from '@graphcommerce/react-hook-form'
16
- import { FormControl, makeStyles, Theme } from '@material-ui/core'
17
- import { Alert } from '@material-ui/lab'
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
- const useStyles = makeStyles(
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
- export type ShippingMethodFormProps = Pick<UseFormComposeOptions, 'step'> &
100
- UseStyles<typeof useStyles>
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 className={classes.root}>
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
- <m.div className={classes.buttonContainer}>
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
- classes={{
141
- root: clsx(
142
- classes.buttonRoot,
143
- classes.leftButtonRoot,
144
- sortedAvailableShippingMethods.length <= 2 && classes.buttonRootTwoItems,
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
- <SvgImageSimple
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
- </m.div>
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={clsx(
167
- classes.scrollerRoot,
168
- sortedAvailableShippingMethods.length <= 2 && classes.scrollerRootTwoItems,
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 classes={{ root: classes.alert }} severity='error'>
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
- <m.div className={clsx(classes.buttonContainer, classes.buttonContainerRight)}>
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
- classes={{
222
- root: clsx(
223
- classes.buttonRoot,
224
- classes.rightButtonRoot,
225
- sortedAvailableShippingMethods.length <= 2 && classes.buttonRootTwoItems,
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
- <SvgImageSimple
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
- </m.div>
229
+ </Box>
237
230
  </ScrollerProvider>
238
231
  </FormRow>
239
232
 
package/package.json CHANGED
@@ -1,11 +1,10 @@
1
1
  {
2
2
  "name": "@graphcommerce/magento-cart-shipping-method",
3
- "version": "2.106.47",
3
+ "homepage": "https://www.graphcommerce.org/",
4
+ "repository": "github:graphcommerce-org/graphcommerce",
5
+ "version": "3.0.2",
4
6
  "sideEffects": false,
5
7
  "prettier": "@graphcommerce/prettier-config-pwa",
6
- "browserslist": [
7
- "extends @graphcommerce/browserslist-config-pwa"
8
- ],
9
8
  "eslintConfig": {
10
9
  "extends": "@graphcommerce/eslint-config-pwa",
11
10
  "parserOptions": {
@@ -13,31 +12,28 @@
13
12
  }
14
13
  },
15
14
  "devDependencies": {
16
- "@graphcommerce/browserslist-config-pwa": "^3.0.3",
17
- "@graphcommerce/eslint-config-pwa": "^3.1.10",
18
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
19
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
20
- "@playwright/test": "^1.17.1"
15
+ "@graphcommerce/eslint-config-pwa": "^4.0.2",
16
+ "@graphcommerce/prettier-config-pwa": "^4.0.1",
17
+ "@graphcommerce/typescript-config-pwa": "^4.0.1",
18
+ "@playwright/test": "^1.19.1"
21
19
  },
22
20
  "dependencies": {
23
- "@apollo/client": "^3.5.6",
24
- "@graphcommerce/framer-scroller": "^1.2.12",
25
- "@graphcommerce/graphql": "^2.105.13",
26
- "@graphcommerce/image": "^2.105.13",
27
- "@graphcommerce/magento-cart": "^3.10.3",
28
- "@graphcommerce/magento-cart-shipping-address": "^2.106.47",
29
- "@graphcommerce/magento-store": "^3.4.12",
30
- "@graphcommerce/next-ui": "^3.25.3",
31
- "@graphcommerce/react-hook-form": "^2.104.7",
32
- "@lingui/macro": "^3.13.0",
33
- "@material-ui/core": "^4.12.3",
34
- "@material-ui/lab": "^4.0.0-alpha.60",
35
- "clsx": "^1.1.1",
36
- "framer-motion": "^5.5.5",
37
- "next": "^12.0.7",
38
- "react": "^17.0.2",
39
- "react-dom": "^17.0.2",
40
- "type-fest": "^2.8.0"
21
+ "@graphcommerce/framer-scroller": "^2.0.2",
22
+ "@graphcommerce/graphql": "^3.0.2",
23
+ "@graphcommerce/image": "^3.0.2",
24
+ "@graphcommerce/magento-cart": "^4.1.1",
25
+ "@graphcommerce/magento-cart-shipping-address": "^3.0.2",
26
+ "@graphcommerce/magento-store": "^4.0.2",
27
+ "@graphcommerce/next-ui": "^4.1.1",
28
+ "@graphcommerce/react-hook-form": "^3.0.2",
29
+ "type-fest": "^2.11.2"
41
30
  },
42
- "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
31
+ "peerDependencies": {
32
+ "@lingui/macro": "^3.13.2",
33
+ "@mui/material": "^5.4.1",
34
+ "framer-motion": "^6.2.4",
35
+ "next": "^12.0.10",
36
+ "react": "^17.0.2",
37
+ "react-dom": "^17.0.2"
38
+ }
43
39
  }