@graphcommerce/magento-product-configurable 8.1.0-canary.44 → 8.1.0-canary.46
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 +4 -0
- package/ConfigurableProductAddToCart/ConfigurableProductAddToCart.tsx +6 -8
- package/components/ProductListItemConfigurable/ProductListItemConfigurable.graphql +0 -15
- package/components/ProductListItemConfigurable/ProductListItemConfigurable.tsx +0 -37
- package/package.json +18 -18
package/CHANGELOG.md
CHANGED
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
MessageSnackbar,
|
|
9
9
|
IconSvg,
|
|
10
10
|
} from '@graphcommerce/next-ui'
|
|
11
|
-
import { Trans } from '@lingui/
|
|
11
|
+
import { Trans } from '@lingui/macro'
|
|
12
12
|
import { Divider, Typography, Alert, Box, SxProps, Theme } from '@mui/material'
|
|
13
13
|
import React from 'react'
|
|
14
14
|
import { useConfigurableContext } from '../ConfigurableContext/ConfigurableContext'
|
|
@@ -140,7 +140,7 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
|
|
|
140
140
|
width: '100%',
|
|
141
141
|
})}
|
|
142
142
|
>
|
|
143
|
-
<Trans
|
|
143
|
+
<Trans>Add to Cart</Trans>
|
|
144
144
|
</Button>
|
|
145
145
|
{additionalButtons}
|
|
146
146
|
</Box>
|
|
@@ -172,15 +172,13 @@ export function ConfigurableProductAddToCart(props: ConfigurableProductAddToCart
|
|
|
172
172
|
color='secondary'
|
|
173
173
|
endIcon={<IconSvg src={iconChevronRight} />}
|
|
174
174
|
>
|
|
175
|
-
<Trans
|
|
175
|
+
<Trans>View shopping cart</Trans>
|
|
176
176
|
</Button>
|
|
177
177
|
}
|
|
178
178
|
>
|
|
179
|
-
<Trans
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
values={{ name }}
|
|
183
|
-
/>
|
|
179
|
+
<Trans>
|
|
180
|
+
<strong>{name}</strong> has been added to your shopping cart!
|
|
181
|
+
</Trans>
|
|
184
182
|
</MessageSnackbar>
|
|
185
183
|
</Box>
|
|
186
184
|
)
|
|
@@ -13,19 +13,4 @@ fragment ProductListItemConfigurable on ConfigurableProduct @inject(into: ["Prod
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
variants {
|
|
17
|
-
attributes {
|
|
18
|
-
value_index
|
|
19
|
-
uid
|
|
20
|
-
code
|
|
21
|
-
}
|
|
22
|
-
product {
|
|
23
|
-
uid
|
|
24
|
-
sku
|
|
25
|
-
name
|
|
26
|
-
small_image {
|
|
27
|
-
...ProductImage
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
16
|
}
|
|
@@ -2,16 +2,10 @@ import {
|
|
|
2
2
|
ProductListItem,
|
|
3
3
|
OverlayAreaKeys,
|
|
4
4
|
ProductListItemProps,
|
|
5
|
-
useProductListParamsContext,
|
|
6
|
-
isFilterTypeEqual,
|
|
7
5
|
} from '@graphcommerce/magento-product'
|
|
8
6
|
import { SwatchList } from '../../SwatchList'
|
|
9
7
|
import { ProductListItemConfigurableFragment } from './ProductListItemConfigurable.gql'
|
|
10
8
|
|
|
11
|
-
export type ProductListItemConfigurableActionProps = ProductListItemConfigurableFragment & {
|
|
12
|
-
variant?: NonNullable<ProductListItemConfigurableFragment['variants']>[0]
|
|
13
|
-
}
|
|
14
|
-
|
|
15
9
|
export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragment &
|
|
16
10
|
ProductListItemProps & {
|
|
17
11
|
swatchLocations?: Partial<Record<OverlayAreaKeys, string[]>>
|
|
@@ -19,7 +13,6 @@ export type ProdustListItemConfigurableProps = ProductListItemConfigurableFragme
|
|
|
19
13
|
|
|
20
14
|
export function ProductListItemConfigurable(props: ProdustListItemConfigurableProps) {
|
|
21
15
|
const {
|
|
22
|
-
variants,
|
|
23
16
|
configurable_options,
|
|
24
17
|
children,
|
|
25
18
|
swatchLocations = { bottomLeft: [], bottomRight: [], topLeft: [], topRight: [] },
|
|
@@ -29,40 +22,10 @@ export function ProductListItemConfigurable(props: ProdustListItemConfigurablePr
|
|
|
29
22
|
topRight,
|
|
30
23
|
...configurableProduct
|
|
31
24
|
} = props
|
|
32
|
-
const { params } = useProductListParamsContext()
|
|
33
|
-
|
|
34
|
-
const options: [string, string[]][] =
|
|
35
|
-
configurable_options
|
|
36
|
-
?.filter(
|
|
37
|
-
(option) =>
|
|
38
|
-
option?.attribute_code &&
|
|
39
|
-
params.filters[option.attribute_code] &&
|
|
40
|
-
isFilterTypeEqual(params.filters[option.attribute_code]),
|
|
41
|
-
)
|
|
42
|
-
.map((option) => {
|
|
43
|
-
const filter = params.filters[option?.attribute_code ?? '']
|
|
44
|
-
return [option?.attribute_code ?? '', (filter?.in as string[]) ?? []]
|
|
45
|
-
}) ?? []
|
|
46
|
-
|
|
47
|
-
const selected = {}
|
|
48
|
-
|
|
49
|
-
options.forEach(([attr, values]) => {
|
|
50
|
-
if (!selected[attr]) selected[attr] = values
|
|
51
|
-
})
|
|
52
|
-
|
|
53
|
-
const matchingVariants = variants?.filter(
|
|
54
|
-
(variant) =>
|
|
55
|
-
variant?.attributes?.filter(
|
|
56
|
-
(attribute) =>
|
|
57
|
-
selected[attribute?.code ?? ''] !== undefined &&
|
|
58
|
-
selected[attribute?.code ?? ''].includes(String(attribute?.value_index)),
|
|
59
|
-
).length,
|
|
60
|
-
)
|
|
61
25
|
|
|
62
26
|
return (
|
|
63
27
|
<ProductListItem
|
|
64
28
|
{...configurableProduct}
|
|
65
|
-
small_image={matchingVariants?.[0]?.product?.small_image ?? configurableProduct.small_image}
|
|
66
29
|
topLeft={
|
|
67
30
|
<>
|
|
68
31
|
{topLeft}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/magento-product-configurable",
|
|
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.46",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -12,23 +12,23 @@
|
|
|
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/graphql": "^8.1.0-canary.
|
|
18
|
-
"@graphcommerce/graphql-mesh": "^8.1.0-canary.
|
|
19
|
-
"@graphcommerce/image": "^8.1.0-canary.
|
|
20
|
-
"@graphcommerce/lingui-next": "8.1.0-canary.
|
|
21
|
-
"@graphcommerce/magento-cart": "^8.1.0-canary.
|
|
22
|
-
"@graphcommerce/magento-cart-items": "^8.1.0-canary.
|
|
23
|
-
"@graphcommerce/magento-category": "^8.1.0-canary.
|
|
24
|
-
"@graphcommerce/magento-customer": "^8.1.0-canary.
|
|
25
|
-
"@graphcommerce/magento-product": "^8.1.0-canary.
|
|
26
|
-
"@graphcommerce/magento-product-simple": "^8.1.0-canary.
|
|
27
|
-
"@graphcommerce/magento-store": "^8.1.0-canary.
|
|
28
|
-
"@graphcommerce/next-ui": "^8.1.0-canary.
|
|
29
|
-
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.
|
|
30
|
-
"@graphcommerce/react-hook-form": "^8.1.0-canary.
|
|
31
|
-
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.
|
|
15
|
+
"@graphcommerce/ecommerce-ui": "^8.1.0-canary.46",
|
|
16
|
+
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.46",
|
|
17
|
+
"@graphcommerce/graphql": "^8.1.0-canary.46",
|
|
18
|
+
"@graphcommerce/graphql-mesh": "^8.1.0-canary.46",
|
|
19
|
+
"@graphcommerce/image": "^8.1.0-canary.46",
|
|
20
|
+
"@graphcommerce/lingui-next": "8.1.0-canary.46",
|
|
21
|
+
"@graphcommerce/magento-cart": "^8.1.0-canary.46",
|
|
22
|
+
"@graphcommerce/magento-cart-items": "^8.1.0-canary.46",
|
|
23
|
+
"@graphcommerce/magento-category": "^8.1.0-canary.46",
|
|
24
|
+
"@graphcommerce/magento-customer": "^8.1.0-canary.46",
|
|
25
|
+
"@graphcommerce/magento-product": "^8.1.0-canary.46",
|
|
26
|
+
"@graphcommerce/magento-product-simple": "^8.1.0-canary.46",
|
|
27
|
+
"@graphcommerce/magento-store": "^8.1.0-canary.46",
|
|
28
|
+
"@graphcommerce/next-ui": "^8.1.0-canary.46",
|
|
29
|
+
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.46",
|
|
30
|
+
"@graphcommerce/react-hook-form": "^8.1.0-canary.46",
|
|
31
|
+
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.46",
|
|
32
32
|
"@lingui/core": "^4.2.1",
|
|
33
33
|
"@lingui/macro": "^4.2.1",
|
|
34
34
|
"@lingui/react": "^4.2.1",
|