@graphcommerce/magento-cart-coupon 2.109.41 → 3.0.1
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/ApplyCouponForm/ApplyCouponForm.tsx +24 -18
- package/CHANGELOG.md +95 -77
- package/CouponAccordion/CouponAccordion.tsx +79 -63
- package/RemoveCouponForm/RemoveCouponForm.tsx +20 -24
- package/package.json +18 -24
|
@@ -1,32 +1,37 @@
|
|
|
1
1
|
import { useFormGqlMutationCart, ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
|
|
2
|
-
import {
|
|
2
|
+
import { responsiveVal, Button, extendableComponent } from '@graphcommerce/next-ui'
|
|
3
3
|
import { Trans } from '@lingui/macro'
|
|
4
|
-
import { FormControl,
|
|
5
|
-
import React from 'react'
|
|
4
|
+
import { Box, FormControl, SxProps, TextField, Theme } from '@mui/material'
|
|
6
5
|
import { ApplyCouponFormDocument } from './ApplyCouponForm.gql'
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
couponForm: {
|
|
10
|
-
display: 'grid',
|
|
11
|
-
alignItems: 'center',
|
|
12
|
-
gridTemplateColumns: `1fr minmax(min-content, ${responsiveVal(70, 140)})`,
|
|
13
|
-
gridColumnGap: theme.spacings.sm,
|
|
14
|
-
},
|
|
15
|
-
button: {
|
|
16
|
-
whiteSpace: 'nowrap',
|
|
17
|
-
},
|
|
18
|
-
}))
|
|
7
|
+
export type ApplyCouponFormProps = { sx?: SxProps<Theme> }
|
|
19
8
|
|
|
20
|
-
|
|
9
|
+
const name = 'ApplyCouponForm' as const
|
|
10
|
+
const parts = ['couponForm', 'button'] as const
|
|
11
|
+
const { classes } = extendableComponent(name, parts)
|
|
21
12
|
|
|
22
13
|
export default function ApplyCouponForm(props: ApplyCouponFormProps) {
|
|
14
|
+
const { sx = [] } = props
|
|
23
15
|
const form = useFormGqlMutationCart(ApplyCouponFormDocument)
|
|
24
16
|
const { handleSubmit, muiRegister, formState, required, error } = form
|
|
25
17
|
const submitHandler = handleSubmit(() => {})
|
|
26
|
-
const classes = useStyles(props)
|
|
27
18
|
|
|
28
19
|
return (
|
|
29
|
-
<
|
|
20
|
+
<Box
|
|
21
|
+
component='form'
|
|
22
|
+
onSubmit={submitHandler}
|
|
23
|
+
noValidate
|
|
24
|
+
className={classes.couponForm}
|
|
25
|
+
sx={[
|
|
26
|
+
(theme) => ({
|
|
27
|
+
display: 'grid',
|
|
28
|
+
alignItems: 'center',
|
|
29
|
+
gridTemplateColumns: `1fr minmax(min-content, ${responsiveVal(70, 140)})`,
|
|
30
|
+
gridColumnGap: theme.spacings.sm,
|
|
31
|
+
}),
|
|
32
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
33
|
+
]}
|
|
34
|
+
>
|
|
30
35
|
<TextField
|
|
31
36
|
variant='outlined'
|
|
32
37
|
type='text'
|
|
@@ -43,12 +48,13 @@ export default function ApplyCouponForm(props: ApplyCouponFormProps) {
|
|
|
43
48
|
loading={formState.isSubmitting}
|
|
44
49
|
color='secondary'
|
|
45
50
|
variant='pill'
|
|
51
|
+
sx={{ whiteSpace: 'nowrap' }}
|
|
46
52
|
>
|
|
47
53
|
<Trans>Apply</Trans>
|
|
48
54
|
</Button>
|
|
49
55
|
</FormControl>
|
|
50
56
|
|
|
51
57
|
<ApolloCartErrorAlert error={error} />
|
|
52
|
-
</
|
|
58
|
+
</Box>
|
|
53
59
|
)
|
|
54
60
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,141 +1,159 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
3
|
+
## 3.0.1
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
### Bug Fixes
|
|
10
|
-
|
|
11
|
-
* borderRadius ([ea38c8a](https://github.com/ho-nl/m2-pwa/commit/ea38c8a0d55e3cb8d975082952ad174721fab888))
|
|
5
|
+
### Patch Changes
|
|
12
6
|
|
|
7
|
+
- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
|
|
8
|
+
Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
|
|
9
|
+
so that the packages link to back to the website and repository
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
[[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
12
|
+
- @graphcommerce/graphql@3.0.1
|
|
13
|
+
- @graphcommerce/image@3.0.1
|
|
14
|
+
- @graphcommerce/magento-cart@4.0.1
|
|
15
|
+
- @graphcommerce/magento-store@4.0.1
|
|
16
|
+
- @graphcommerce/next-ui@4.0.1
|
|
17
|
+
- @graphcommerce/react-hook-form@3.0.1
|
|
13
18
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
* borderRadius based on theme.shape.borderRadius ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
|
|
19
|
+
## 3.0.0
|
|
17
20
|
|
|
21
|
+
### Major Changes
|
|
18
22
|
|
|
23
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
24
|
+
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
25
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
19
26
|
|
|
27
|
+
### Patch Changes
|
|
20
28
|
|
|
29
|
+
- Updated dependencies
|
|
30
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
31
|
+
- @graphcommerce/graphql@3.0.0
|
|
32
|
+
- @graphcommerce/image@3.0.0
|
|
33
|
+
- @graphcommerce/magento-cart@4.0.0
|
|
34
|
+
- @graphcommerce/magento-store@4.0.0
|
|
35
|
+
- @graphcommerce/next-ui@4.0.0
|
|
36
|
+
- @graphcommerce/react-hook-form@3.0.0
|
|
21
37
|
|
|
22
|
-
|
|
38
|
+
All notable changes to this project will be documented in this file. See
|
|
39
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
23
40
|
|
|
41
|
+
# [2.109.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-coupon@2.108.4...@graphcommerce/magento-cart-coupon@2.109.0) (2021-12-01)
|
|
24
42
|
|
|
25
43
|
### Bug Fixes
|
|
26
44
|
|
|
27
|
-
|
|
28
|
-
|
|
45
|
+
- borderRadius
|
|
46
|
+
([ea38c8a](https://github.com/ho-nl/m2-pwa/commit/ea38c8a0d55e3cb8d975082952ad174721fab888))
|
|
29
47
|
|
|
30
48
|
### Features
|
|
31
49
|
|
|
32
|
-
|
|
50
|
+
- borderRadius based on theme.shape.borderRadius
|
|
51
|
+
([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
|
|
33
52
|
|
|
53
|
+
# [2.108.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-coupon@2.107.22...@graphcommerce/magento-cart-coupon@2.108.0) (2021-11-12)
|
|
34
54
|
|
|
55
|
+
### Bug Fixes
|
|
35
56
|
|
|
57
|
+
- even more translations
|
|
58
|
+
([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
|
|
36
59
|
|
|
60
|
+
### Features
|
|
37
61
|
|
|
38
|
-
|
|
62
|
+
- added tons of translations
|
|
63
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
39
64
|
|
|
65
|
+
## [2.107.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-coupon@2.107.0...@graphcommerce/magento-cart-coupon@2.107.1) (2021-11-02)
|
|
40
66
|
|
|
41
67
|
### Bug Fixes
|
|
42
68
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
69
|
+
- RemoveCoupon Button and fix pill-link style to match buttons
|
|
70
|
+
([6838812](https://github.com/ho-nl/m2-pwa/commit/68388123773fb4f79a3e4b1beb7ecca601d7748e))
|
|
48
71
|
|
|
49
72
|
# [2.107.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-coupon@2.106.8...@graphcommerce/magento-cart-coupon@2.107.0) (2021-11-02)
|
|
50
73
|
|
|
51
|
-
|
|
52
74
|
### Features
|
|
53
75
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
76
|
+
- darkTheme
|
|
77
|
+
([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
|
|
59
78
|
|
|
60
79
|
## [2.106.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-coupon@2.106.3...@graphcommerce/magento-cart-coupon@2.106.4) (2021-10-28)
|
|
61
80
|
|
|
62
|
-
|
|
63
81
|
### Bug Fixes
|
|
64
82
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
83
|
+
- External SVG's can't have alt tags
|
|
84
|
+
([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
|
|
70
85
|
|
|
71
86
|
## [2.106.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-coupon@2.106.2...@graphcommerce/magento-cart-coupon@2.106.3) (2021-10-28)
|
|
72
87
|
|
|
73
|
-
|
|
74
88
|
### Bug Fixes
|
|
75
89
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
90
|
+
- bigger apply coupon button
|
|
91
|
+
([700d8ee](https://github.com/ho-nl/m2-pwa/commit/700d8ee2daedbcdffa63e8e14c9d837feeb29cbc))
|
|
92
|
+
- update SvgImage to SvgImageSimple
|
|
93
|
+
([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
|
|
82
94
|
|
|
83
95
|
# [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-coupon@2.105.35...@graphcommerce/magento-cart-coupon@2.106.0) (2021-10-27)
|
|
84
96
|
|
|
85
|
-
|
|
86
97
|
### Features
|
|
87
98
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
99
|
+
- **nextjs:** upgraded to nextjs 12
|
|
100
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
93
101
|
|
|
94
102
|
## [2.105.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart-coupon@2.105.0...@graphcommerce/magento-cart-coupon@2.105.1) (2021-09-27)
|
|
95
103
|
|
|
96
104
|
**Note:** Version bump only for package @graphcommerce/magento-cart-coupon
|
|
97
105
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
106
|
# 2.105.0 (2021-09-27)
|
|
103
107
|
|
|
104
|
-
|
|
105
108
|
### Bug Fixes
|
|
106
109
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
110
|
+
- coupon animations, spacing, rippl;ie
|
|
111
|
+
([cef3a08](https://github.com/ho-nl/m2-pwa/commit/cef3a08d0545947518873c5257c59fc1b98f1a21))
|
|
112
|
+
- coupon stylign
|
|
113
|
+
([796bbb2](https://github.com/ho-nl/m2-pwa/commit/796bbb2ad5eda6dc9c5aa37034586705b24a0023))
|
|
114
|
+
- ignore md files from triggering version updates
|
|
115
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
116
|
+
- implement next-ui barrel imports
|
|
117
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
118
|
+
- remove coupon form style was too large
|
|
119
|
+
([30df274](https://github.com/ho-nl/m2-pwa/commit/30df274ecdffdcebd76710a5304d6fa248e81211))
|
|
120
|
+
- rename NextButton to Button, change imports
|
|
121
|
+
([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
|
|
114
122
|
|
|
115
123
|
### Features
|
|
116
124
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
125
|
+
- **cart:** when a cart is not active anymore show a clear cart button
|
|
126
|
+
([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
|
|
127
|
+
- coupon form on payment page
|
|
128
|
+
([a163961](https://github.com/ho-nl/m2-pwa/commit/a1639617be756b357177fcce255cf662c5314499))
|
|
129
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
130
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
131
|
+
- **image:** introduced completely rewritten Image component
|
|
132
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
133
|
+
- **magento-customer:** introduced ApolloCustomerErrorAlert
|
|
134
|
+
([e5406d9](https://github.com/ho-nl/m2-pwa/commit/e5406d91f914de290c5f097955e312312e567972))
|
|
135
|
+
- next.js 11
|
|
136
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
137
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
138
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
139
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
140
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
141
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
142
|
+
- **theme:** restructured fonts and applied to home and category page
|
|
143
|
+
([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
|
|
144
|
+
- upgraded to nextjs 11
|
|
145
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
146
|
+
- useFormMutationCart and simpler imports
|
|
147
|
+
([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
|
|
129
148
|
|
|
130
149
|
### Reverts
|
|
131
150
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
151
|
+
- Revert "chore: upgrade @apollo/client"
|
|
152
|
+
([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
|
|
153
|
+
- Revert "style: coupon input conform design"
|
|
154
|
+
([3ac7182](https://github.com/ho-nl/m2-pwa/commit/3ac7182eb6bb7c86ccba6464d1f206dc30a5a1da))
|
|
155
|
+
- Revert "style: coupon accordion icon/button alignment"
|
|
156
|
+
([165f91c](https://github.com/ho-nl/m2-pwa/commit/165f91c8f0e587ea26bcf441f48a6a13df74891c))
|
|
139
157
|
|
|
140
158
|
# Change Log
|
|
141
159
|
|
|
@@ -4,71 +4,28 @@ import {
|
|
|
4
4
|
iconChevronDown,
|
|
5
5
|
iconChevronUp,
|
|
6
6
|
responsiveVal,
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
SvgIcon,
|
|
8
|
+
extendableComponent,
|
|
9
9
|
} from '@graphcommerce/next-ui'
|
|
10
10
|
import { Trans } from '@lingui/macro'
|
|
11
|
-
import { Button,
|
|
12
|
-
import clsx from 'clsx'
|
|
11
|
+
import { Box, Button, styled, SxProps, Theme, Typography } from '@mui/material'
|
|
13
12
|
import { AnimatePresence, m } from 'framer-motion'
|
|
14
|
-
import
|
|
13
|
+
import { useState } from 'react'
|
|
15
14
|
import ApplyCouponForm from '../ApplyCouponForm/ApplyCouponForm'
|
|
16
15
|
import RemoveCouponForm from '../RemoveCouponForm/RemoveCouponForm'
|
|
17
16
|
import { GetCouponDocument } from './GetCoupon.gql'
|
|
18
17
|
|
|
19
|
-
|
|
20
|
-
(theme: Theme) => ({
|
|
21
|
-
accordion: {
|
|
22
|
-
'&:before': {
|
|
23
|
-
background: 'none',
|
|
24
|
-
},
|
|
25
|
-
boxShadow: 'none',
|
|
26
|
-
border: `1px solid ${theme.palette.divider}`,
|
|
27
|
-
borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
|
|
28
|
-
overflow: 'hidden',
|
|
29
|
-
},
|
|
30
|
-
button: {
|
|
31
|
-
padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
|
|
32
|
-
width: '100%',
|
|
18
|
+
export type CouponAccordionProps = { sx?: SxProps<Theme> }
|
|
33
19
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
marginLeft: 'auto',
|
|
39
|
-
},
|
|
40
|
-
},
|
|
41
|
-
'& > span': {
|
|
42
|
-
display: 'inline',
|
|
43
|
-
'& > h6': {
|
|
44
|
-
textAlign: 'left',
|
|
45
|
-
marginRight: theme.spacings.sm,
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
|
-
couponFormWrap: {
|
|
50
|
-
background: 'rgba(0,0,0,0.04)',
|
|
51
|
-
padding: `0 ${theme.spacings.sm} ${theme.spacings.xs}`,
|
|
52
|
-
},
|
|
53
|
-
buttonOpen: {
|
|
54
|
-
background: 'rgba(0,0,0,0.04)',
|
|
55
|
-
borderBottomLeftRadius: 0,
|
|
56
|
-
borderBottomRightRadius: 0,
|
|
57
|
-
},
|
|
58
|
-
disabled: {
|
|
59
|
-
cursor: 'default',
|
|
60
|
-
'&:hover': {
|
|
61
|
-
background: 'transparent',
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
}),
|
|
65
|
-
{ name: 'CouponAccordion' },
|
|
66
|
-
)
|
|
20
|
+
type OwnerState = { open: boolean; disabled: boolean }
|
|
21
|
+
const name = 'CouponAccordion' as const
|
|
22
|
+
const parts = ['accordion', 'button', 'couponFormWrap'] as const
|
|
23
|
+
const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
|
|
67
24
|
|
|
68
|
-
|
|
25
|
+
const MotionDiv = styled(m.div)({})
|
|
69
26
|
|
|
70
27
|
export default function CouponAccordion(props: CouponAccordionProps) {
|
|
71
|
-
const
|
|
28
|
+
const { sx = [] } = props
|
|
72
29
|
const { data } = useCartQuery(GetCouponDocument)
|
|
73
30
|
const [open, setOpen] = useState<boolean>(false)
|
|
74
31
|
|
|
@@ -76,21 +33,74 @@ export default function CouponAccordion(props: CouponAccordionProps) {
|
|
|
76
33
|
|
|
77
34
|
const coupon = data?.cart?.applied_coupons?.[0]?.code
|
|
78
35
|
|
|
36
|
+
const classes = withState({
|
|
37
|
+
open: Boolean(!coupon && open),
|
|
38
|
+
disabled: Boolean(coupon),
|
|
39
|
+
})
|
|
40
|
+
|
|
79
41
|
return (
|
|
80
42
|
<AnimatedRow key='discount-codes'>
|
|
81
|
-
<
|
|
43
|
+
<MotionDiv
|
|
44
|
+
className={classes.accordion}
|
|
45
|
+
sx={[
|
|
46
|
+
(theme) => ({
|
|
47
|
+
'&:before': {
|
|
48
|
+
background: 'none',
|
|
49
|
+
},
|
|
50
|
+
boxShadow: 'none',
|
|
51
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
52
|
+
borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
|
|
53
|
+
overflow: 'hidden',
|
|
54
|
+
}),
|
|
55
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
56
|
+
]}
|
|
57
|
+
>
|
|
82
58
|
<Button
|
|
83
59
|
component={coupon ? 'div' : 'button'}
|
|
84
60
|
onClick={() => setOpen(!open)}
|
|
85
61
|
disableRipple={!!coupon}
|
|
86
|
-
className={
|
|
87
|
-
|
|
88
|
-
|
|
62
|
+
className={classes.button}
|
|
63
|
+
sx={(theme) => ({
|
|
64
|
+
justifyContent: 'space-between',
|
|
65
|
+
padding: `${theme.spacings.xs} ${theme.spacings.sm}`,
|
|
66
|
+
width: '100%',
|
|
67
|
+
borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
|
|
68
|
+
|
|
69
|
+
'& .MuiButton-label': {
|
|
70
|
+
display: 'flex',
|
|
71
|
+
justifyContent: 'flex-start',
|
|
72
|
+
'& span:last-of-type': {
|
|
73
|
+
marginLeft: 'auto',
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
'& > span': {
|
|
77
|
+
display: 'inline',
|
|
78
|
+
'& > h6': {
|
|
79
|
+
textAlign: 'left',
|
|
80
|
+
marginRight: theme.spacings.sm,
|
|
81
|
+
},
|
|
82
|
+
},
|
|
83
|
+
|
|
84
|
+
'&.open': {
|
|
85
|
+
background: 'rgba(0,0,0,0.04)',
|
|
86
|
+
borderBottomLeftRadius: 0,
|
|
87
|
+
borderBottomRightRadius: 0,
|
|
88
|
+
},
|
|
89
|
+
'&.disabled': {
|
|
90
|
+
cursor: 'default',
|
|
91
|
+
'&:hover': {
|
|
92
|
+
background: 'transparent',
|
|
93
|
+
},
|
|
94
|
+
},
|
|
89
95
|
})}
|
|
90
96
|
endIcon={
|
|
91
97
|
<>
|
|
92
|
-
{!coupon && open &&
|
|
93
|
-
|
|
98
|
+
{!coupon && open && (
|
|
99
|
+
<SvgIcon src={iconChevronUp} size='large' sx={{ display: 'inherit' }} />
|
|
100
|
+
)}
|
|
101
|
+
{!coupon && !open && (
|
|
102
|
+
<SvgIcon src={iconChevronDown} size='large' sx={{ display: 'inherit' }} />
|
|
103
|
+
)}
|
|
94
104
|
</>
|
|
95
105
|
}
|
|
96
106
|
>
|
|
@@ -114,13 +124,19 @@ export default function CouponAccordion(props: CouponAccordionProps) {
|
|
|
114
124
|
<AnimatePresence>
|
|
115
125
|
{open && !coupon && (
|
|
116
126
|
<AnimatedRow key='discount-codes-form-wrap'>
|
|
117
|
-
<
|
|
127
|
+
<Box
|
|
128
|
+
className={classes.couponFormWrap}
|
|
129
|
+
sx={(theme) => ({
|
|
130
|
+
background: 'rgba(0,0,0,0.04)',
|
|
131
|
+
padding: `0 ${theme.spacings.sm} ${theme.spacings.xs}`,
|
|
132
|
+
})}
|
|
133
|
+
>
|
|
118
134
|
<ApplyCouponForm />
|
|
119
|
-
</
|
|
135
|
+
</Box>
|
|
120
136
|
</AnimatedRow>
|
|
121
137
|
)}
|
|
122
138
|
</AnimatePresence>
|
|
123
|
-
</
|
|
139
|
+
</MotionDiv>
|
|
124
140
|
</AnimatedRow>
|
|
125
141
|
)
|
|
126
142
|
}
|
|
@@ -1,46 +1,42 @@
|
|
|
1
1
|
import { useFormGqlMutationCart, ApolloCartErrorAlert } from '@graphcommerce/magento-cart'
|
|
2
|
-
import {
|
|
3
|
-
import { lighten,
|
|
4
|
-
import React from 'react'
|
|
2
|
+
import { SvgIcon, iconCancelAlt, extendableComponent } from '@graphcommerce/next-ui'
|
|
3
|
+
import { lighten, Button, Box, SxProps, Theme } from '@mui/material'
|
|
5
4
|
import { CouponFragment } from '../Api/Coupon.gql'
|
|
6
5
|
import { RemoveCouponFormDocument } from './RemoveCouponForm.gql'
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
(theme: Theme) => ({
|
|
10
|
-
inlineCoupon: {
|
|
11
|
-
fontWeight: 600,
|
|
12
|
-
background: lighten(theme.palette.secondary.light, theme.palette.action.hoverOpacity),
|
|
13
|
-
'& svg': {
|
|
14
|
-
stroke: 'transparent',
|
|
15
|
-
fill: theme.palette.secondary.main,
|
|
16
|
-
},
|
|
17
|
-
},
|
|
18
|
-
}),
|
|
19
|
-
{ name: 'RemoveCouponForm' },
|
|
20
|
-
)
|
|
7
|
+
export type RemoveCouponFormProps = CouponFragment & { sx?: SxProps<Theme> }
|
|
21
8
|
|
|
22
|
-
|
|
9
|
+
const name = 'RemoveCouponForm' as const
|
|
10
|
+
const parts = ['root', 'button'] as const
|
|
11
|
+
const { classes } = extendableComponent(name, parts)
|
|
23
12
|
|
|
24
|
-
export default function RemoveCouponForm(props:
|
|
25
|
-
const { applied_coupons } = props
|
|
26
|
-
const classes = useStyles(props)
|
|
13
|
+
export default function RemoveCouponForm(props: RemoveCouponFormProps) {
|
|
14
|
+
const { applied_coupons, sx } = props
|
|
27
15
|
const form = useFormGqlMutationCart(RemoveCouponFormDocument)
|
|
28
16
|
|
|
29
17
|
const { handleSubmit, error } = form
|
|
30
18
|
const submitHandler = handleSubmit(() => {})
|
|
31
19
|
|
|
32
20
|
return (
|
|
33
|
-
<form onSubmit={submitHandler} noValidate>
|
|
21
|
+
<Box component='form' onSubmit={submitHandler} noValidate className={classes.root} sx={sx}>
|
|
34
22
|
<Button
|
|
35
23
|
type='submit'
|
|
36
24
|
variant='text'
|
|
37
25
|
color='secondary'
|
|
38
|
-
className={classes.
|
|
39
|
-
endIcon={<
|
|
26
|
+
className={classes.button}
|
|
27
|
+
endIcon={<SvgIcon src={iconCancelAlt} />}
|
|
28
|
+
sx={(theme) => ({
|
|
29
|
+
fontWeight: 600,
|
|
30
|
+
background: lighten(theme.palette.secondary.light, theme.palette.action.hoverOpacity),
|
|
31
|
+
'& svg': {
|
|
32
|
+
stroke: 'transparent',
|
|
33
|
+
fill: theme.palette.secondary.main,
|
|
34
|
+
},
|
|
35
|
+
})}
|
|
40
36
|
>
|
|
41
37
|
{applied_coupons?.[0]?.code}
|
|
42
38
|
</Button>
|
|
43
39
|
<ApolloCartErrorAlert error={error} />
|
|
44
|
-
</
|
|
40
|
+
</Box>
|
|
45
41
|
)
|
|
46
42
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-cart-coupon",
|
|
3
|
-
"
|
|
3
|
+
"homepage": "https://www.graphcommerce.org/",
|
|
4
|
+
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
+
"version": "3.0.1",
|
|
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,28 +12,23 @@
|
|
|
13
12
|
}
|
|
14
13
|
},
|
|
15
14
|
"devDependencies": {
|
|
16
|
-
"@graphcommerce/
|
|
17
|
-
"@graphcommerce/
|
|
18
|
-
"@graphcommerce/
|
|
19
|
-
"@
|
|
20
|
-
"@playwright/test": "^1.17.1"
|
|
15
|
+
"@graphcommerce/eslint-config-pwa": "^4.0.1",
|
|
16
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.1",
|
|
17
|
+
"@graphcommerce/typescript-config-pwa": "^4.0.1",
|
|
18
|
+
"@playwright/test": "^1.18.1"
|
|
21
19
|
},
|
|
22
20
|
"dependencies": {
|
|
23
|
-
"@
|
|
24
|
-
"@graphcommerce/
|
|
25
|
-
"@graphcommerce/
|
|
26
|
-
"@graphcommerce/magento-
|
|
27
|
-
"@graphcommerce/
|
|
28
|
-
"@graphcommerce/
|
|
29
|
-
"@
|
|
30
|
-
"@
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"clsx": "^1.1.1",
|
|
34
|
-
"framer-motion": "^5.5.5",
|
|
35
|
-
"next": "^12.0.7",
|
|
21
|
+
"@graphcommerce/graphql": "^3.0.1",
|
|
22
|
+
"@graphcommerce/image": "^3.0.1",
|
|
23
|
+
"@graphcommerce/magento-cart": "^4.0.1",
|
|
24
|
+
"@graphcommerce/magento-store": "^4.0.1",
|
|
25
|
+
"@graphcommerce/next-ui": "^4.0.1",
|
|
26
|
+
"@graphcommerce/react-hook-form": "^3.0.1",
|
|
27
|
+
"@lingui/macro": "^3.13.2",
|
|
28
|
+
"@mui/material": "^5.4.1",
|
|
29
|
+
"framer-motion": "^6.2.4",
|
|
30
|
+
"next": "^12.0.10",
|
|
36
31
|
"react": "^17.0.2",
|
|
37
32
|
"react-dom": "^17.0.2"
|
|
38
|
-
}
|
|
39
|
-
"gitHead": "110ddb032ee3ce6e363b9f5f7d21af71fb51b527"
|
|
33
|
+
}
|
|
40
34
|
}
|