@graphcommerce/magento-cart 8.1.0-canary.24 → 8.1.0-canary.26
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,14 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 8.1.0-canary.26
|
|
4
|
+
|
|
5
|
+
## 8.1.0-canary.25
|
|
6
|
+
|
|
7
|
+
### Patch Changes
|
|
8
|
+
|
|
9
|
+
- [#2266](https://github.com/graphcommerce-org/graphcommerce/pull/2266) [`0d1fe7a`](https://github.com/graphcommerce-org/graphcommerce/commit/0d1fe7a26ed2d18510c8767795294654c478fb88) - Enable the use of one or more anchor links within the 'checkbox_text' field and customize their paths.
|
|
10
|
+
([@carlocarels90](https://github.com/carlocarels90))
|
|
11
|
+
|
|
3
12
|
## 8.1.0-canary.24
|
|
4
13
|
|
|
5
14
|
## 8.1.0-canary.23
|
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
UseFormComposeOptions,
|
|
9
9
|
} from '@graphcommerce/react-hook-form'
|
|
10
10
|
import { i18n } from '@lingui/core'
|
|
11
|
-
import { Box, Link, SxProps, Theme } from '@mui/material'
|
|
11
|
+
import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
|
|
12
12
|
import React from 'react'
|
|
13
13
|
import { CartAgreementsDocument } from './CartAgreements.gql'
|
|
14
14
|
|
|
@@ -18,16 +18,27 @@ const componentName = 'CartAgreementsForm' as const
|
|
|
18
18
|
const parts = ['form', 'formInner', 'formControlRoot', 'manualCheck'] as const
|
|
19
19
|
const { classes } = extendableComponent(componentName, parts)
|
|
20
20
|
|
|
21
|
+
/**
|
|
22
|
+
* Checks if a string contains an anchor tag (<a> ... </a>).
|
|
23
|
+
* @param {string} str - The string to check.
|
|
24
|
+
* @returns {boolean} - True if the string contains an anchor tag, otherwise false.
|
|
25
|
+
*/
|
|
26
|
+
const containsAnchorTag = (str: string): boolean => {
|
|
27
|
+
const anchorTagRegex = /<a\s+[^>]*>(.*?)<\/a>/i
|
|
28
|
+
return anchorTagRegex.test(str)
|
|
29
|
+
}
|
|
30
|
+
|
|
21
31
|
export function CartAgreementsForm(props: CartAgreementsFormProps) {
|
|
22
32
|
const { step, sx = [] } = props
|
|
23
33
|
const { data } = useQuery(CartAgreementsDocument)
|
|
24
34
|
|
|
25
35
|
// sort conditions so checkboxes will be placed first
|
|
26
36
|
const sortedAgreements = data?.checkoutAgreements
|
|
27
|
-
? [...data.checkoutAgreements]
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
37
|
+
? [...data.checkoutAgreements]?.sort((a, b) => {
|
|
38
|
+
if (a?.mode === 'MANUAL') return -1
|
|
39
|
+
if (b?.mode === 'MANUAL') return 1
|
|
40
|
+
return 0
|
|
41
|
+
})
|
|
31
42
|
: []
|
|
32
43
|
|
|
33
44
|
const form = useForm()
|
|
@@ -56,6 +67,45 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
|
|
|
56
67
|
if (!agreement) return null
|
|
57
68
|
const href = `/checkout/terms/${agreement.name?.toLowerCase().replace(/\s+/g, '-')}`
|
|
58
69
|
const agreementTextParts = agreement.checkbox_text.split(agreement.name)
|
|
70
|
+
// check if the agreement text contains an anchor tag
|
|
71
|
+
const containsLink = containsAnchorTag(agreement.checkbox_text)
|
|
72
|
+
let labelContent: React.ReactNode
|
|
73
|
+
|
|
74
|
+
if (containsLink) {
|
|
75
|
+
labelContent = (
|
|
76
|
+
<Typography
|
|
77
|
+
dangerouslySetInnerHTML={{ __html: agreement.checkbox_text }}
|
|
78
|
+
sx={{
|
|
79
|
+
'& a': {
|
|
80
|
+
color: 'secondary.main',
|
|
81
|
+
textDecoration: 'none',
|
|
82
|
+
'&:hover, &:focus, &:active': {
|
|
83
|
+
textDecoration: 'underline',
|
|
84
|
+
},
|
|
85
|
+
},
|
|
86
|
+
}}
|
|
87
|
+
/>
|
|
88
|
+
)
|
|
89
|
+
} else if (
|
|
90
|
+
agreement.mode === 'MANUAL' &&
|
|
91
|
+
agreement.checkbox_text.includes(agreement.name)
|
|
92
|
+
) {
|
|
93
|
+
labelContent = (
|
|
94
|
+
<>
|
|
95
|
+
{agreementTextParts[0]}
|
|
96
|
+
<Link href={href} color='secondary' underline='hover'>
|
|
97
|
+
{agreement.name}
|
|
98
|
+
</Link>
|
|
99
|
+
{agreementTextParts[1]}
|
|
100
|
+
</>
|
|
101
|
+
)
|
|
102
|
+
} else {
|
|
103
|
+
labelContent = (
|
|
104
|
+
<Link href={href} color='secondary' underline='hover'>
|
|
105
|
+
{agreement.checkbox_text}
|
|
106
|
+
</Link>
|
|
107
|
+
)
|
|
108
|
+
}
|
|
59
109
|
|
|
60
110
|
return (
|
|
61
111
|
<React.Fragment key={agreement.agreement_id}>
|
|
@@ -72,27 +122,11 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
|
|
|
72
122
|
rules={{
|
|
73
123
|
required: i18n._(/* i18n */ 'You have to agree in order to proceed'),
|
|
74
124
|
}}
|
|
75
|
-
label={
|
|
76
|
-
agreement.checkbox_text.includes(agreement.name) ? (
|
|
77
|
-
<>
|
|
78
|
-
{agreementTextParts[0]}
|
|
79
|
-
<Link href={href} color='secondary' underline='hover'>
|
|
80
|
-
{agreement.name}
|
|
81
|
-
</Link>
|
|
82
|
-
{agreementTextParts[1]}
|
|
83
|
-
</>
|
|
84
|
-
) : (
|
|
85
|
-
<Link href={href} color='secondary' underline='hover'>
|
|
86
|
-
{agreement.checkbox_text}
|
|
87
|
-
</Link>
|
|
88
|
-
)
|
|
89
|
-
}
|
|
125
|
+
label={labelContent}
|
|
90
126
|
/>
|
|
91
127
|
) : (
|
|
92
128
|
<Box className={classes.manualCheck} sx={{ padding: `9px 0` }}>
|
|
93
|
-
|
|
94
|
-
{agreement.checkbox_text}
|
|
95
|
-
</Link>
|
|
129
|
+
{labelContent}
|
|
96
130
|
</Box>
|
|
97
131
|
)}
|
|
98
132
|
</React.Fragment>
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/magento-cart",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "8.1.0-canary.
|
|
5
|
+
"version": "8.1.0-canary.26",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -12,20 +12,20 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"@graphcommerce/ecommerce-ui": "^8.1.0-canary.
|
|
16
|
-
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.
|
|
17
|
-
"@graphcommerce/framer-next-pages": "^8.1.0-canary.
|
|
18
|
-
"@graphcommerce/framer-scroller": "^8.1.0-canary.
|
|
19
|
-
"@graphcommerce/framer-utils": "^8.1.0-canary.
|
|
20
|
-
"@graphcommerce/graphql": "^8.1.0-canary.
|
|
21
|
-
"@graphcommerce/image": "^8.1.0-canary.
|
|
22
|
-
"@graphcommerce/magento-customer": "^8.1.0-canary.
|
|
23
|
-
"@graphcommerce/magento-graphql": "^8.1.0-canary.
|
|
24
|
-
"@graphcommerce/magento-store": "^8.1.0-canary.
|
|
25
|
-
"@graphcommerce/next-ui": "^8.1.0-canary.
|
|
26
|
-
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.
|
|
27
|
-
"@graphcommerce/react-hook-form": "^8.1.0-canary.
|
|
28
|
-
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.
|
|
15
|
+
"@graphcommerce/ecommerce-ui": "^8.1.0-canary.26",
|
|
16
|
+
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.26",
|
|
17
|
+
"@graphcommerce/framer-next-pages": "^8.1.0-canary.26",
|
|
18
|
+
"@graphcommerce/framer-scroller": "^8.1.0-canary.26",
|
|
19
|
+
"@graphcommerce/framer-utils": "^8.1.0-canary.26",
|
|
20
|
+
"@graphcommerce/graphql": "^8.1.0-canary.26",
|
|
21
|
+
"@graphcommerce/image": "^8.1.0-canary.26",
|
|
22
|
+
"@graphcommerce/magento-customer": "^8.1.0-canary.26",
|
|
23
|
+
"@graphcommerce/magento-graphql": "^8.1.0-canary.26",
|
|
24
|
+
"@graphcommerce/magento-store": "^8.1.0-canary.26",
|
|
25
|
+
"@graphcommerce/next-ui": "^8.1.0-canary.26",
|
|
26
|
+
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.26",
|
|
27
|
+
"@graphcommerce/react-hook-form": "^8.1.0-canary.26",
|
|
28
|
+
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.26",
|
|
29
29
|
"@lingui/core": "^4.2.1",
|
|
30
30
|
"@lingui/macro": "^4.2.1",
|
|
31
31
|
"@lingui/react": "^4.2.1",
|