@graphcommerce/magento-cart-coupon 2.109.40 → 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/ApplyCouponForm/ApplyCouponForm.tsx +24 -18
- package/CHANGELOG.md +80 -78
- package/CouponAccordion/CouponAccordion.tsx +79 -63
- package/RemoveCouponForm/RemoveCouponForm.tsx +20 -24
- package/package.json +16 -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,143 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
# [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)
|
|
3
|
+
## 3.0.0
|
|
7
4
|
|
|
5
|
+
### Major Changes
|
|
8
6
|
|
|
9
|
-
|
|
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
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
### Patch Changes
|
|
12
12
|
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
15
|
+
- @graphcommerce/graphql@3.0.0
|
|
16
|
+
- @graphcommerce/image@3.0.0
|
|
17
|
+
- @graphcommerce/magento-cart@4.0.0
|
|
18
|
+
- @graphcommerce/magento-store@4.0.0
|
|
19
|
+
- @graphcommerce/next-ui@4.0.0
|
|
20
|
+
- @graphcommerce/react-hook-form@3.0.0
|
|
13
21
|
|
|
14
|
-
|
|
22
|
+
All notable changes to this project will be documented in this file. See
|
|
23
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
15
24
|
|
|
16
|
-
|
|
25
|
+
# [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)
|
|
17
26
|
|
|
27
|
+
### Bug Fixes
|
|
18
28
|
|
|
29
|
+
- borderRadius
|
|
30
|
+
([ea38c8a](https://github.com/ho-nl/m2-pwa/commit/ea38c8a0d55e3cb8d975082952ad174721fab888))
|
|
19
31
|
|
|
32
|
+
### Features
|
|
20
33
|
|
|
34
|
+
- borderRadius based on theme.shape.borderRadius
|
|
35
|
+
([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
|
|
21
36
|
|
|
22
37
|
# [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)
|
|
23
38
|
|
|
24
|
-
|
|
25
39
|
### Bug Fixes
|
|
26
40
|
|
|
27
|
-
|
|
28
|
-
|
|
41
|
+
- even more translations
|
|
42
|
+
([1a1f988](https://github.com/ho-nl/m2-pwa/commit/1a1f98837c704b978f6b42b619d9c52f540b2d48))
|
|
29
43
|
|
|
30
44
|
### Features
|
|
31
45
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
46
|
+
- added tons of translations
|
|
47
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
37
48
|
|
|
38
49
|
## [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)
|
|
39
50
|
|
|
40
|
-
|
|
41
51
|
### Bug Fixes
|
|
42
52
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
53
|
+
- RemoveCoupon Button and fix pill-link style to match buttons
|
|
54
|
+
([6838812](https://github.com/ho-nl/m2-pwa/commit/68388123773fb4f79a3e4b1beb7ecca601d7748e))
|
|
48
55
|
|
|
49
56
|
# [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
57
|
|
|
51
|
-
|
|
52
58
|
### Features
|
|
53
59
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
60
|
+
- darkTheme
|
|
61
|
+
([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
|
|
59
62
|
|
|
60
63
|
## [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
64
|
|
|
62
|
-
|
|
63
65
|
### Bug Fixes
|
|
64
66
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
67
|
+
- External SVG's can't have alt tags
|
|
68
|
+
([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
|
|
70
69
|
|
|
71
70
|
## [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
71
|
|
|
73
|
-
|
|
74
72
|
### Bug Fixes
|
|
75
73
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
74
|
+
- bigger apply coupon button
|
|
75
|
+
([700d8ee](https://github.com/ho-nl/m2-pwa/commit/700d8ee2daedbcdffa63e8e14c9d837feeb29cbc))
|
|
76
|
+
- update SvgImage to SvgImageSimple
|
|
77
|
+
([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
|
|
82
78
|
|
|
83
79
|
# [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
80
|
|
|
85
|
-
|
|
86
81
|
### Features
|
|
87
82
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
83
|
+
- **nextjs:** upgraded to nextjs 12
|
|
84
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
93
85
|
|
|
94
86
|
## [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
87
|
|
|
96
88
|
**Note:** Version bump only for package @graphcommerce/magento-cart-coupon
|
|
97
89
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
90
|
# 2.105.0 (2021-09-27)
|
|
103
91
|
|
|
104
|
-
|
|
105
92
|
### Bug Fixes
|
|
106
93
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
94
|
+
- coupon animations, spacing, rippl;ie
|
|
95
|
+
([cef3a08](https://github.com/ho-nl/m2-pwa/commit/cef3a08d0545947518873c5257c59fc1b98f1a21))
|
|
96
|
+
- coupon stylign
|
|
97
|
+
([796bbb2](https://github.com/ho-nl/m2-pwa/commit/796bbb2ad5eda6dc9c5aa37034586705b24a0023))
|
|
98
|
+
- ignore md files from triggering version updates
|
|
99
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
100
|
+
- implement next-ui barrel imports
|
|
101
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
102
|
+
- remove coupon form style was too large
|
|
103
|
+
([30df274](https://github.com/ho-nl/m2-pwa/commit/30df274ecdffdcebd76710a5304d6fa248e81211))
|
|
104
|
+
- rename NextButton to Button, change imports
|
|
105
|
+
([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
|
|
114
106
|
|
|
115
107
|
### Features
|
|
116
108
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
109
|
+
- **cart:** when a cart is not active anymore show a clear cart button
|
|
110
|
+
([5d04a14](https://github.com/ho-nl/m2-pwa/commit/5d04a14726c040b20b34c0b88f923aee1dff22e5))
|
|
111
|
+
- coupon form on payment page
|
|
112
|
+
([a163961](https://github.com/ho-nl/m2-pwa/commit/a1639617be756b357177fcce255cf662c5314499))
|
|
113
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
114
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
115
|
+
- **image:** introduced completely rewritten Image component
|
|
116
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
117
|
+
- **magento-customer:** introduced ApolloCustomerErrorAlert
|
|
118
|
+
([e5406d9](https://github.com/ho-nl/m2-pwa/commit/e5406d91f914de290c5f097955e312312e567972))
|
|
119
|
+
- next.js 11
|
|
120
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
121
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
122
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
123
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
124
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
125
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
126
|
+
- **theme:** restructured fonts and applied to home and category page
|
|
127
|
+
([6adf5f1](https://github.com/ho-nl/m2-pwa/commit/6adf5f11321bdfbf499125f1161c5abf5a1bfe4a))
|
|
128
|
+
- upgraded to nextjs 11
|
|
129
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
130
|
+
- useFormMutationCart and simpler imports
|
|
131
|
+
([012f090](https://github.com/ho-nl/m2-pwa/commit/012f090e8f54d09f35d393c61ad1e2319f5a90ff))
|
|
129
132
|
|
|
130
133
|
### Reverts
|
|
131
134
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
135
|
+
- Revert "chore: upgrade @apollo/client"
|
|
136
|
+
([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
|
|
137
|
+
- Revert "style: coupon input conform design"
|
|
138
|
+
([3ac7182](https://github.com/ho-nl/m2-pwa/commit/3ac7182eb6bb7c86ccba6464d1f206dc30a5a1da))
|
|
139
|
+
- Revert "style: coupon accordion icon/button alignment"
|
|
140
|
+
([165f91c](https://github.com/ho-nl/m2-pwa/commit/165f91c8f0e587ea26bcf441f48a6a13df74891c))
|
|
139
141
|
|
|
140
142
|
# Change Log
|
|
141
143
|
|
|
@@ -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,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-cart-coupon",
|
|
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,28 +10,23 @@
|
|
|
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/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",
|
|
19
|
+
"@graphcommerce/graphql": "^3.0.0",
|
|
20
|
+
"@graphcommerce/image": "^3.0.0",
|
|
21
|
+
"@graphcommerce/magento-cart": "^4.0.0",
|
|
22
|
+
"@graphcommerce/magento-store": "^4.0.0",
|
|
23
|
+
"@graphcommerce/next-ui": "^4.0.0",
|
|
24
|
+
"@graphcommerce/react-hook-form": "^3.0.0",
|
|
25
|
+
"@lingui/macro": "^3.13.2",
|
|
26
|
+
"@mui/material": "^5.4.1",
|
|
27
|
+
"framer-motion": "^6.2.4",
|
|
28
|
+
"next": "^12.0.10",
|
|
36
29
|
"react": "^17.0.2",
|
|
37
30
|
"react-dom": "^17.0.2"
|
|
38
|
-
}
|
|
39
|
-
"gitHead": "4f7fd2440fa20b9ad619b1172bc12deaaf8b2456"
|
|
31
|
+
}
|
|
40
32
|
}
|