@graphcommerce/magento-product 9.1.0-canary.35 → 9.1.0-canary.36
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,11 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 9.1.0-canary.36
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`c8aa135`](https://github.com/graphcommerce-org/graphcommerce/commit/c8aa13561f2a25b658466c0f3cddaa1bd338c443) - Add support for price prefix and suffix to be able to customize rendering ([@paales](https://github.com/paales))
|
|
8
|
+
|
|
3
9
|
## 9.1.0-canary.35
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1,47 +1,87 @@
|
|
|
1
1
|
import { PrivateQueryMask } from '@graphcommerce/graphql'
|
|
2
2
|
import { Money } from '@graphcommerce/magento-store'
|
|
3
|
-
import { extendableComponent } from '@graphcommerce/next-ui'
|
|
4
|
-
import type
|
|
5
|
-
import { Typography } from '@mui/material'
|
|
3
|
+
import { extendableComponent, sxx } from '@graphcommerce/next-ui'
|
|
4
|
+
import { Box, type TypographyProps } from '@mui/material'
|
|
6
5
|
import type { ProductListPriceFragment } from './ProductListPrice.gql'
|
|
7
6
|
|
|
8
7
|
export const productListPrice = extendableComponent('ProductListPrice', [
|
|
8
|
+
'prefix',
|
|
9
9
|
'root',
|
|
10
10
|
'finalPrice',
|
|
11
11
|
'discountPrice',
|
|
12
|
+
'suffix',
|
|
12
13
|
] as const)
|
|
13
14
|
|
|
14
15
|
const { classes, selectors } = productListPrice
|
|
15
16
|
|
|
16
|
-
export type ProductListPriceProps = ProductListPriceFragment &
|
|
17
|
+
export type ProductListPriceProps = ProductListPriceFragment &
|
|
18
|
+
Pick<TypographyProps, 'sx'> & {
|
|
19
|
+
prefix?: React.ReactNode
|
|
20
|
+
suffix?: React.ReactNode
|
|
21
|
+
}
|
|
17
22
|
|
|
18
23
|
export function ProductListPrice(props: ProductListPriceProps) {
|
|
19
|
-
const { regular_price, final_price, sx } = props
|
|
24
|
+
const { regular_price, final_price, sx, prefix, suffix } = props
|
|
20
25
|
|
|
21
26
|
return (
|
|
22
|
-
<
|
|
27
|
+
<Box
|
|
28
|
+
className={classes.root}
|
|
29
|
+
sx={sxx({ typography: 'body1', display: 'inline-flex', columnGap: '0.3em' }, sx)}
|
|
30
|
+
>
|
|
31
|
+
{prefix && (
|
|
32
|
+
<PrivateQueryMask
|
|
33
|
+
component='span'
|
|
34
|
+
skeleton={{
|
|
35
|
+
variant: 'text',
|
|
36
|
+
sx: { width: '3.5em', transform: 'none' },
|
|
37
|
+
}}
|
|
38
|
+
className={classes.prefix}
|
|
39
|
+
>
|
|
40
|
+
{prefix}
|
|
41
|
+
</PrivateQueryMask>
|
|
42
|
+
)}
|
|
43
|
+
|
|
23
44
|
{regular_price.value !== final_price.value && (
|
|
24
45
|
<PrivateQueryMask
|
|
25
46
|
component='span'
|
|
26
47
|
sx={{
|
|
27
48
|
textDecoration: 'line-through',
|
|
28
49
|
color: 'text.disabled',
|
|
29
|
-
marginRight: '8px',
|
|
30
50
|
}}
|
|
31
|
-
skeleton={{
|
|
51
|
+
skeleton={{
|
|
52
|
+
variant: 'text',
|
|
53
|
+
sx: { width: '3.5em', transform: 'none' },
|
|
54
|
+
}}
|
|
32
55
|
className={classes.discountPrice}
|
|
33
56
|
>
|
|
34
57
|
<Money {...regular_price} />
|
|
35
58
|
</PrivateQueryMask>
|
|
36
59
|
)}
|
|
60
|
+
|
|
37
61
|
<PrivateQueryMask
|
|
38
62
|
className={classes.finalPrice}
|
|
39
63
|
component='span'
|
|
40
|
-
skeleton={{
|
|
64
|
+
skeleton={{
|
|
65
|
+
variant: 'text',
|
|
66
|
+
sx: { width: '3.5em', transform: 'none' },
|
|
67
|
+
}}
|
|
41
68
|
>
|
|
42
69
|
<Money {...final_price} />
|
|
43
70
|
</PrivateQueryMask>
|
|
44
|
-
|
|
71
|
+
|
|
72
|
+
{suffix && (
|
|
73
|
+
<PrivateQueryMask
|
|
74
|
+
component='span'
|
|
75
|
+
skeleton={{
|
|
76
|
+
variant: 'text',
|
|
77
|
+
sx: { width: '3.5em', transform: 'none' },
|
|
78
|
+
}}
|
|
79
|
+
className={classes.suffix}
|
|
80
|
+
>
|
|
81
|
+
{suffix}
|
|
82
|
+
</PrivateQueryMask>
|
|
83
|
+
)}
|
|
84
|
+
</Box>
|
|
45
85
|
)
|
|
46
86
|
}
|
|
47
87
|
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { useWatch } from '@graphcommerce/ecommerce-ui'
|
|
2
2
|
import { PrivateQueryMask } from '@graphcommerce/graphql'
|
|
3
3
|
import { Money } from '@graphcommerce/magento-store'
|
|
4
|
-
import { extendableComponent } from '@graphcommerce/next-ui'
|
|
4
|
+
import { extendableComponent, sxx } from '@graphcommerce/next-ui'
|
|
5
|
+
import { Box, type SxProps, type Theme } from '@mui/material'
|
|
5
6
|
import type { AddToCartItemSelector } from '../AddProductsToCart'
|
|
6
7
|
import { useFormAddProductsToCart } from '../AddProductsToCart'
|
|
7
8
|
import { getProductTierPrice } from './getProductTierPrice'
|
|
@@ -9,16 +10,23 @@ import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
|
|
|
9
10
|
import type { UseCustomizableOptionPriceProps } from './useCustomizableOptionPrice'
|
|
10
11
|
import { useCustomizableOptionPrice } from './useCustomizableOptionPrice'
|
|
11
12
|
|
|
12
|
-
export type ProductPagePriceProps = {
|
|
13
|
+
export type ProductPagePriceProps = {
|
|
14
|
+
product: ProductPagePriceFragment
|
|
15
|
+
prefix?: React.ReactNode
|
|
16
|
+
suffix?: React.ReactNode
|
|
17
|
+
sx?: SxProps<Theme>
|
|
18
|
+
} & AddToCartItemSelector &
|
|
13
19
|
UseCustomizableOptionPriceProps
|
|
14
20
|
|
|
15
21
|
const { classes } = extendableComponent('ProductPagePrice', [
|
|
16
22
|
'finalPrice',
|
|
17
23
|
'discountPrice',
|
|
24
|
+
'prefix',
|
|
25
|
+
'suffix',
|
|
18
26
|
] as const)
|
|
19
27
|
|
|
20
28
|
export function ProductPagePrice(props: ProductPagePriceProps) {
|
|
21
|
-
const { product, index = 0 } = props
|
|
29
|
+
const { product, index = 0, prefix, suffix, sx } = props
|
|
22
30
|
|
|
23
31
|
const { control } = useFormAddProductsToCart()
|
|
24
32
|
const quantity = useWatch({ control, name: `cartItems.${index}.quantity` })
|
|
@@ -29,24 +37,48 @@ export function ProductPagePrice(props: ProductPagePriceProps) {
|
|
|
29
37
|
const regularPrice = product.price_range.minimum_price.regular_price
|
|
30
38
|
|
|
31
39
|
return (
|
|
32
|
-
|
|
40
|
+
<Box component='span' sx={sxx({ display: 'inline-flex', columnGap: '0.3em' }, sx)}>
|
|
41
|
+
{prefix && (
|
|
42
|
+
<PrivateQueryMask
|
|
43
|
+
component='span'
|
|
44
|
+
className={classes.prefix}
|
|
45
|
+
skeleton={{
|
|
46
|
+
variant: 'text',
|
|
47
|
+
sx: { width: '3.5em', transform: 'none' },
|
|
48
|
+
}}
|
|
49
|
+
>
|
|
50
|
+
{prefix}
|
|
51
|
+
</PrivateQueryMask>
|
|
52
|
+
)}
|
|
33
53
|
{regularPrice.value !== price.value && (
|
|
34
54
|
<PrivateQueryMask
|
|
35
55
|
component='span'
|
|
36
56
|
className={classes.discountPrice}
|
|
37
|
-
skeleton={{ variant: 'text', sx: { width: '
|
|
38
|
-
sx={[{ textDecoration: 'line-through', color: 'text.disabled'
|
|
57
|
+
skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
|
|
58
|
+
sx={[{ textDecoration: 'line-through', color: 'text.disabled' }]}
|
|
39
59
|
>
|
|
40
60
|
<Money {...regularPrice} />
|
|
41
61
|
</PrivateQueryMask>
|
|
42
62
|
)}
|
|
43
63
|
<PrivateQueryMask
|
|
44
64
|
component='span'
|
|
45
|
-
skeleton={{ variant: 'text', sx: { width: '
|
|
65
|
+
skeleton={{ variant: 'text', sx: { width: '3.5em', transform: 'none' } }}
|
|
46
66
|
className={classes.finalPrice}
|
|
47
67
|
>
|
|
48
68
|
<Money {...price} value={priceValue} />
|
|
49
69
|
</PrivateQueryMask>
|
|
50
|
-
|
|
70
|
+
{suffix && (
|
|
71
|
+
<PrivateQueryMask
|
|
72
|
+
component='span'
|
|
73
|
+
className={classes.suffix}
|
|
74
|
+
skeleton={{
|
|
75
|
+
variant: 'text',
|
|
76
|
+
sx: { width: '3.5em', transform: 'none' },
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
{suffix}
|
|
80
|
+
</PrivateQueryMask>
|
|
81
|
+
)}
|
|
82
|
+
</Box>
|
|
51
83
|
)
|
|
52
84
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { PrivateQueryMask } from '@graphcommerce/graphql'
|
|
2
|
-
import { Money } from '@graphcommerce/magento-store'
|
|
3
2
|
import { filterNonNullableKeys } from '@graphcommerce/next-ui'
|
|
4
3
|
import { Trans } from '@lingui/react'
|
|
5
4
|
import type { SxProps, Theme } from '@mui/material'
|
|
5
|
+
import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
|
|
6
6
|
import type { ProductPagePriceFragment } from './ProductPagePrice.gql'
|
|
7
7
|
|
|
8
8
|
export type ProductPagePriceTiersProps = {
|
|
@@ -27,7 +27,9 @@ export function ProductPagePriceTiers(props: ProductPagePriceTiersProps) {
|
|
|
27
27
|
<div key={quantity}>
|
|
28
28
|
<Trans
|
|
29
29
|
id='Buy {quantity} for <0/> and save {percent}%'
|
|
30
|
-
components={{
|
|
30
|
+
components={{
|
|
31
|
+
0: <ProductListPrice final_price={final_price} regular_price={final_price} />,
|
|
32
|
+
}}
|
|
31
33
|
values={{ quantity, percent: discount.percent_off }}
|
|
32
34
|
/>
|
|
33
35
|
</div>
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/magento-product",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "9.1.0-canary.
|
|
5
|
+
"version": "9.1.0-canary.36",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -18,18 +18,18 @@
|
|
|
18
18
|
"typescript": "5.7.2"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
|
-
"@graphcommerce/ecommerce-ui": "^9.1.0-canary.
|
|
22
|
-
"@graphcommerce/eslint-config-pwa": "^9.1.0-canary.
|
|
23
|
-
"@graphcommerce/framer-next-pages": "^9.1.0-canary.
|
|
24
|
-
"@graphcommerce/framer-scroller": "^9.1.0-canary.
|
|
25
|
-
"@graphcommerce/graphql": "^9.1.0-canary.
|
|
26
|
-
"@graphcommerce/graphql-mesh": "^9.1.0-canary.
|
|
27
|
-
"@graphcommerce/image": "^9.1.0-canary.
|
|
28
|
-
"@graphcommerce/magento-cart": "^9.1.0-canary.
|
|
29
|
-
"@graphcommerce/magento-store": "^9.1.0-canary.
|
|
30
|
-
"@graphcommerce/next-ui": "^9.1.0-canary.
|
|
31
|
-
"@graphcommerce/prettier-config-pwa": "^9.1.0-canary.
|
|
32
|
-
"@graphcommerce/typescript-config-pwa": "^9.1.0-canary.
|
|
21
|
+
"@graphcommerce/ecommerce-ui": "^9.1.0-canary.36",
|
|
22
|
+
"@graphcommerce/eslint-config-pwa": "^9.1.0-canary.36",
|
|
23
|
+
"@graphcommerce/framer-next-pages": "^9.1.0-canary.36",
|
|
24
|
+
"@graphcommerce/framer-scroller": "^9.1.0-canary.36",
|
|
25
|
+
"@graphcommerce/graphql": "^9.1.0-canary.36",
|
|
26
|
+
"@graphcommerce/graphql-mesh": "^9.1.0-canary.36",
|
|
27
|
+
"@graphcommerce/image": "^9.1.0-canary.36",
|
|
28
|
+
"@graphcommerce/magento-cart": "^9.1.0-canary.36",
|
|
29
|
+
"@graphcommerce/magento-store": "^9.1.0-canary.36",
|
|
30
|
+
"@graphcommerce/next-ui": "^9.1.0-canary.36",
|
|
31
|
+
"@graphcommerce/prettier-config-pwa": "^9.1.0-canary.36",
|
|
32
|
+
"@graphcommerce/typescript-config-pwa": "^9.1.0-canary.36",
|
|
33
33
|
"@lingui/core": "^4.2.1",
|
|
34
34
|
"@lingui/macro": "^4.2.1",
|
|
35
35
|
"@lingui/react": "^4.2.1",
|