@graphcommerce/magento-cart-payment-method 10.0.0-canary.67 → 10.0.0-canary.68

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,7 @@
1
1
  # Change Log
2
2
 
3
+ ## 10.0.0-canary.68
4
+
3
5
  ## 10.0.0-canary.67
4
6
 
5
7
  ## 10.0.0-canary.66
@@ -1,7 +1,7 @@
1
1
  import type { ActionCardItemRenderProps } from '@graphcommerce/ecommerce-ui'
2
2
  import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
3
3
  import type { ActionCardProps } from '@graphcommerce/next-ui'
4
- import { ActionCard, Button, FormDiv } from '@graphcommerce/next-ui'
4
+ import { ActionCard, Button, FormDiv, sxx } from '@graphcommerce/next-ui'
5
5
  import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
6
6
  import { FormPersist, useForm, useFormCompose } from '@graphcommerce/react-hook-form'
7
7
  import { t } from '@lingui/core/macro'
@@ -31,14 +31,14 @@ function PaymentMethodActionCard(
31
31
  <Card
32
32
  code={code}
33
33
  child={child}
34
- sx={[
34
+ sx={sxx(
35
35
  {
36
36
  '& .ActionCard-title': { typography: 'h6' },
37
37
  '& .ActionCard-details': { lineHeight: 1.5 },
38
38
  '& .ActionCard-image svg, .ActionCard-image img': { width: '32px', height: '32px' },
39
39
  },
40
- ...(Array.isArray(sx) ? sx : [sx]),
41
- ]}
40
+ sx,
41
+ )}
42
42
  action={
43
43
  <Button disableRipple variant='inline' color='secondary' tabIndex={-1}>
44
44
  <Trans>Select</Trans>
@@ -1,4 +1,4 @@
1
- import { extendableComponent } from '@graphcommerce/next-ui'
1
+ import { extendableComponent, sxx } from '@graphcommerce/next-ui'
2
2
  import type { SxProps, Theme } from '@mui/material'
3
3
  import { Box } from '@mui/material'
4
4
  import type { PaymentMethodOptionsProps } from '../Api/PaymentMethod'
@@ -17,10 +17,7 @@ export function PaymentMethodOptions(props: PaymentMethodOptionsProps & { sx?: S
17
17
  const { selectedMethod, selectedModule } = usePaymentMethodContext()
18
18
 
19
19
  return (
20
- <Box
21
- className={classes.root}
22
- sx={[(theme) => ({ marginBottom: theme.spacings.sm }), ...(Array.isArray(sx) ? sx : [sx])]}
23
- >
20
+ <Box className={classes.root} sx={sxx((theme) => ({ marginBottom: theme.spacings.sm }), sx)}>
24
21
  {selectedModule && selectedMethod && (
25
22
  <Box key={selectedMethod.code}>
26
23
  <selectedModule.PaymentOptions {...selectedMethod} {...optionsProps} />
@@ -7,6 +7,7 @@ import {
7
7
  iconChevronRight,
8
8
  IconSvg,
9
9
  responsiveVal,
10
+ sxx,
10
11
  ToggleButton,
11
12
  } from '@graphcommerce/next-ui'
12
13
  import type { UseFormComposeOptions } from '@graphcommerce/react-hook-form'
@@ -83,12 +84,12 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
83
84
  onSubmit={submitHandler}
84
85
  noValidate
85
86
  className={classes.formRoot}
86
- sx={[
87
+ sx={sxx(
87
88
  {
88
89
  padding: '5px 0',
89
90
  },
90
- ...(Array.isArray(sx) ? sx : [sx]),
91
- ]}
91
+ sx,
92
+ )}
92
93
  >
93
94
  <input type='hidden' {...register('code', { required: true })} required />
94
95
  <FormRow className={classes.root} sx={{ position: 'relative', padding: 0 }}>
@@ -101,12 +102,12 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
101
102
  direction='left'
102
103
  className={(classes.buttonRoot, classes.leftButtonRoot)}
103
104
  sx={(theme) => ({
104
- background: theme.palette.background.paper,
105
+ background: theme.vars.palette.background.paper,
105
106
  borderRadius: 0,
106
107
  width: 30,
107
108
  height: responsiveVal(60, 85),
108
109
  boxShadow: 'none',
109
- border: `1px solid ${theme.palette.divider}`,
110
+ border: `1px solid ${theme.vars.palette.divider}`,
110
111
  '&:focus': {
111
112
  boxShadow: 'none',
112
113
  },
@@ -159,16 +160,16 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
159
160
  selected={value === buttonValue}
160
161
  sx={(theme) => ({
161
162
  typography: 'h6',
162
- border: `1px solid ${theme.palette.divider}`,
163
+ border: `1px solid ${theme.vars.palette.divider}`,
163
164
  boxShadow: 'none',
164
165
  transition: 'color .15s ease',
165
166
  whiteSpace: 'nowrap',
166
167
  '&.selected': {
167
- border: `1px solid ${theme.palette.secondary.main}`,
168
- background: `${theme.palette.secondary.main}`,
169
- color: `${theme.palette.secondary.contrastText}`,
168
+ border: `1px solid ${theme.vars.palette.secondary.main}`,
169
+ background: `${theme.vars.palette.secondary.main}`,
170
+ color: `${theme.vars.palette.secondary.contrastText}`,
170
171
  '&:hover': {
171
- background: `${theme.palette.secondary.main}`,
172
+ background: `${theme.vars.palette.secondary.main}`,
172
173
  },
173
174
  },
174
175
  })}
@@ -196,12 +197,12 @@ export function PaymentMethodToggles(props: PaymentMethodTogglesProps) {
196
197
  direction='right'
197
198
  className={`${classes.buttonRoot} ${classes.rightButtonRoot}`}
198
199
  sx={(theme) => ({
199
- background: theme.palette.background.paper,
200
+ background: theme.vars.palette.background.paper,
200
201
  borderRadius: 0,
201
202
  width: 30,
202
203
  height: responsiveVal(60, 85),
203
204
  boxShadow: 'none',
204
- border: `1px solid ${theme.palette.divider}`,
205
+ border: `1px solid ${theme.vars.palette.divider}`,
205
206
  '&:focus': {
206
207
  boxShadow: 'none',
207
208
  },
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-cart-payment-method",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "10.0.0-canary.67",
5
+ "version": "10.0.0-canary.68",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -18,22 +18,22 @@
18
18
  "./PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop": "./PaymentMethodPlaceOrderNoop/PaymentMethodPlaceOrderNoop.tsx"
19
19
  },
20
20
  "peerDependencies": {
21
- "@graphcommerce/ecommerce-ui": "^10.0.0-canary.67",
22
- "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.67",
23
- "@graphcommerce/framer-scroller": "^10.0.0-canary.67",
24
- "@graphcommerce/graphql": "^10.0.0-canary.67",
25
- "@graphcommerce/image": "^10.0.0-canary.67",
26
- "@graphcommerce/magento-cart": "^10.0.0-canary.67",
27
- "@graphcommerce/magento-cart-shipping-address": "^10.0.0-canary.67",
28
- "@graphcommerce/magento-store": "^10.0.0-canary.67",
29
- "@graphcommerce/next-ui": "^10.0.0-canary.67",
30
- "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.67",
31
- "@graphcommerce/react-hook-form": "^10.0.0-canary.67",
32
- "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.67",
21
+ "@graphcommerce/ecommerce-ui": "^10.0.0-canary.68",
22
+ "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
23
+ "@graphcommerce/framer-scroller": "^10.0.0-canary.68",
24
+ "@graphcommerce/graphql": "^10.0.0-canary.68",
25
+ "@graphcommerce/image": "^10.0.0-canary.68",
26
+ "@graphcommerce/magento-cart": "^10.0.0-canary.68",
27
+ "@graphcommerce/magento-cart-shipping-address": "^10.0.0-canary.68",
28
+ "@graphcommerce/magento-store": "^10.0.0-canary.68",
29
+ "@graphcommerce/next-ui": "^10.0.0-canary.68",
30
+ "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
31
+ "@graphcommerce/react-hook-form": "^10.0.0-canary.68",
32
+ "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
33
33
  "@lingui/core": "^5",
34
34
  "@lingui/macro": "^5",
35
35
  "@lingui/react": "^5",
36
- "@mui/material": "^5.10.16",
36
+ "@mui/material": "^7.0.0",
37
37
  "framer-motion": "^11.0.0",
38
38
  "next": "*",
39
39
  "react": "^19.2.0",