@graphcommerce/magento-product-bundle 7.0.0-canary.21 → 7.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/BundleItemsForm/BundleItemsForm.tsx +1 -0
- package/CHANGELOG.md +165 -1
- package/components/BundleCartItem/BundleCartItem.graphql +6 -1
- package/components/BundleCartItem/BundleCartItem.tsx +2 -2
- package/components/BundleProductCartItemOptions/BundleProductCartItemOptions.tsx +34 -0
- package/components/BundleProductOptions/BundleOption.tsx +1 -3
- package/components/BundleProductOptions/BundleOptionValue.tsx +1 -1
- package/components/BundleProductOptions/BundleProductOptions.tsx +2 -2
- package/package.json +18 -16
- package/plugins/BundleCartItemActionCard.tsx +31 -0
- package/CartBundleItem.graphql +0 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,170 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
## 7.0.0
|
|
3
|
+
## 7.0.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`609b384de`](https://github.com/graphcommerce-org/graphcommerce/commit/609b384de8cded7a9dd2f29bd516ded810ab970a) - Created a new version of the cart using ActionCards for each CartItem. Different types of CartItems can have different ActionCards. These ActionCards will be overridden with the use of Plugins. An example can be found in the @graphcommerce/magento-product-configurable package. ([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
8
|
+
|
|
9
|
+
## 6.2.0-canary.98
|
|
10
|
+
|
|
11
|
+
## 6.2.0-canary.97
|
|
12
|
+
|
|
13
|
+
## 6.2.0-canary.96
|
|
14
|
+
|
|
15
|
+
## 6.2.0-canary.95
|
|
16
|
+
|
|
17
|
+
## 6.2.0-canary.94
|
|
18
|
+
|
|
19
|
+
## 6.2.0-canary.93
|
|
20
|
+
|
|
21
|
+
## 6.2.0-canary.92
|
|
22
|
+
|
|
23
|
+
## 6.2.0-canary.91
|
|
24
|
+
|
|
25
|
+
## 6.2.0-canary.90
|
|
26
|
+
|
|
27
|
+
## 6.2.0-canary.89
|
|
28
|
+
|
|
29
|
+
## 6.2.0-canary.88
|
|
30
|
+
|
|
31
|
+
## 6.2.0-canary.87
|
|
32
|
+
|
|
33
|
+
## 6.2.0-canary.86
|
|
34
|
+
|
|
35
|
+
## 6.2.0-canary.85
|
|
36
|
+
|
|
37
|
+
## 6.2.0-canary.84
|
|
38
|
+
|
|
39
|
+
## 6.2.0-canary.83
|
|
40
|
+
|
|
41
|
+
## 6.2.0-canary.82
|
|
42
|
+
|
|
43
|
+
## 6.2.0-canary.81
|
|
44
|
+
|
|
45
|
+
### Minor Changes
|
|
46
|
+
|
|
47
|
+
- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`609b384de`](https://github.com/graphcommerce-org/graphcommerce/commit/609b384de8cded7a9dd2f29bd516ded810ab970a) - Created a new version of the cart using ActionCards for each CartItem. Different types of CartItems can have different ActionCards. These ActionCards will be overridden with the use of Plugins. An example can be found in the @graphcommerce/magento-product-configurable package. ([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
48
|
+
|
|
49
|
+
## 6.2.0-canary.80
|
|
50
|
+
|
|
51
|
+
## 6.2.0-canary.79
|
|
52
|
+
|
|
53
|
+
## 6.2.0-canary.78
|
|
54
|
+
|
|
55
|
+
## 6.2.0-canary.77
|
|
56
|
+
|
|
57
|
+
## 6.2.0-canary.76
|
|
58
|
+
|
|
59
|
+
## 6.2.0-canary.75
|
|
60
|
+
|
|
61
|
+
## 6.2.0-canary.74
|
|
62
|
+
|
|
63
|
+
## 6.2.0-canary.73
|
|
64
|
+
|
|
65
|
+
## 6.2.0-canary.72
|
|
66
|
+
|
|
67
|
+
## 6.2.0-canary.71
|
|
68
|
+
|
|
69
|
+
## 6.2.0-canary.70
|
|
70
|
+
|
|
71
|
+
## 6.2.0-canary.69
|
|
72
|
+
|
|
73
|
+
## 6.2.0-canary.68
|
|
74
|
+
|
|
75
|
+
## 6.2.0-canary.67
|
|
76
|
+
|
|
77
|
+
## 6.2.0-canary.66
|
|
78
|
+
|
|
79
|
+
## 6.2.0-canary.65
|
|
80
|
+
|
|
81
|
+
## 6.2.0-canary.64
|
|
82
|
+
|
|
83
|
+
## 6.2.0-canary.63
|
|
84
|
+
|
|
85
|
+
## 6.2.0-canary.62
|
|
86
|
+
|
|
87
|
+
## 6.2.0-canary.61
|
|
88
|
+
|
|
89
|
+
## 6.2.0-canary.60
|
|
90
|
+
|
|
91
|
+
## 6.2.0-canary.59
|
|
92
|
+
|
|
93
|
+
## 6.2.0-canary.58
|
|
94
|
+
|
|
95
|
+
## 6.2.0-canary.57
|
|
96
|
+
|
|
97
|
+
## 6.2.0-canary.56
|
|
98
|
+
|
|
99
|
+
## 6.2.0-canary.55
|
|
100
|
+
|
|
101
|
+
## 6.2.0-canary.54
|
|
102
|
+
|
|
103
|
+
## 6.2.0-canary.53
|
|
104
|
+
|
|
105
|
+
## 6.2.0-canary.52
|
|
106
|
+
|
|
107
|
+
## 6.2.0-canary.51
|
|
108
|
+
|
|
109
|
+
## 6.2.0-canary.50
|
|
110
|
+
|
|
111
|
+
## 6.2.0-canary.49
|
|
112
|
+
|
|
113
|
+
## 6.2.0-canary.48
|
|
114
|
+
|
|
115
|
+
## 6.2.0-canary.47
|
|
116
|
+
|
|
117
|
+
## 6.2.0-canary.46
|
|
118
|
+
|
|
119
|
+
## 6.2.0-canary.45
|
|
120
|
+
|
|
121
|
+
## 6.2.0-canary.44
|
|
122
|
+
|
|
123
|
+
## 6.2.0-canary.43
|
|
124
|
+
|
|
125
|
+
## 6.2.0-canary.42
|
|
126
|
+
|
|
127
|
+
## 6.2.0-canary.41
|
|
128
|
+
|
|
129
|
+
## 6.2.0-canary.40
|
|
130
|
+
|
|
131
|
+
## 6.2.0-canary.39
|
|
132
|
+
|
|
133
|
+
## 6.2.0-canary.38
|
|
134
|
+
|
|
135
|
+
## 6.2.0-canary.37
|
|
136
|
+
|
|
137
|
+
## 6.2.0-canary.36
|
|
138
|
+
|
|
139
|
+
## 6.2.0-canary.35
|
|
140
|
+
|
|
141
|
+
## 6.2.0-canary.34
|
|
142
|
+
|
|
143
|
+
## 6.2.0-canary.33
|
|
144
|
+
|
|
145
|
+
## 6.2.0-canary.32
|
|
146
|
+
|
|
147
|
+
## 6.2.0-canary.31
|
|
148
|
+
|
|
149
|
+
## 6.2.0-canary.30
|
|
150
|
+
|
|
151
|
+
## 6.2.0-canary.29
|
|
152
|
+
|
|
153
|
+
## 6.2.0-canary.28
|
|
154
|
+
|
|
155
|
+
## 6.2.0-canary.27
|
|
156
|
+
|
|
157
|
+
## 6.2.0-canary.26
|
|
158
|
+
|
|
159
|
+
## 6.2.0-canary.25
|
|
160
|
+
|
|
161
|
+
## 6.2.0-canary.24
|
|
162
|
+
|
|
163
|
+
## 6.2.0-canary.23
|
|
164
|
+
|
|
165
|
+
## 6.2.0-canary.22
|
|
166
|
+
|
|
167
|
+
## 6.2.0-canary.21
|
|
4
168
|
|
|
5
169
|
## 6.2.0-canary.20
|
|
6
170
|
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
fragment BundleCartItem on BundleCartItem @inject(into: ["CartItem"]) {
|
|
2
|
+
prices {
|
|
3
|
+
price {
|
|
4
|
+
currency
|
|
5
|
+
}
|
|
6
|
+
}
|
|
2
7
|
bundle_options {
|
|
3
8
|
uid
|
|
4
9
|
label
|
|
@@ -10,7 +15,7 @@ fragment BundleCartItem on BundleCartItem @inject(into: ["CartItem"]) {
|
|
|
10
15
|
price
|
|
11
16
|
}
|
|
12
17
|
}
|
|
13
|
-
|
|
18
|
+
customizable_options {
|
|
14
19
|
...SelectedCustomizableOption
|
|
15
20
|
}
|
|
16
21
|
}
|
|
@@ -4,7 +4,7 @@ import { Typography } from '@mui/material'
|
|
|
4
4
|
import { BundleCartItemFragment } from './BundleCartItem.gql'
|
|
5
5
|
|
|
6
6
|
export function BundleCartItem(props: BundleCartItemFragment) {
|
|
7
|
-
const { bundle_options,
|
|
7
|
+
const { bundle_options, customizable_options } = props
|
|
8
8
|
return (
|
|
9
9
|
<>
|
|
10
10
|
{bundle_options.map((option) => {
|
|
@@ -26,7 +26,7 @@ export function BundleCartItem(props: BundleCartItemFragment) {
|
|
|
26
26
|
</div>
|
|
27
27
|
)
|
|
28
28
|
})}
|
|
29
|
-
<SelectedCustomizableOptions customizable_options={
|
|
29
|
+
<SelectedCustomizableOptions customizable_options={customizable_options} />
|
|
30
30
|
</>
|
|
31
31
|
)
|
|
32
32
|
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { SelectedCustomizableOptions } from '@graphcommerce/magento-cart-items'
|
|
2
|
+
import { Money } from '@graphcommerce/magento-store'
|
|
3
|
+
import { Box } from '@mui/material'
|
|
4
|
+
import { BundleCartItemFragment } from '../BundleCartItem/BundleCartItem.gql'
|
|
5
|
+
|
|
6
|
+
type BundleProductCartItemOptionsProps = BundleCartItemFragment
|
|
7
|
+
|
|
8
|
+
export function BundleProductCartItemOptions(props: BundleProductCartItemOptionsProps) {
|
|
9
|
+
const { bundle_options, customizable_options, prices } = props
|
|
10
|
+
|
|
11
|
+
return (
|
|
12
|
+
<>
|
|
13
|
+
{bundle_options?.map((option) =>
|
|
14
|
+
option?.values.map((option_value) => (
|
|
15
|
+
<Box
|
|
16
|
+
key={option_value?.uid}
|
|
17
|
+
sx={(theme) => ({
|
|
18
|
+
display: 'flex',
|
|
19
|
+
gap: theme.spacings.xxs,
|
|
20
|
+
[theme.breakpoints.down('sm')]: {
|
|
21
|
+
fontSize: theme.typography.caption.fontSize,
|
|
22
|
+
},
|
|
23
|
+
})}
|
|
24
|
+
>
|
|
25
|
+
<Box sx={{ color: 'text.primary' }}>{option_value?.label}</Box>
|
|
26
|
+
<Money currency={prices?.price.currency} value={option_value?.price} />
|
|
27
|
+
</Box>
|
|
28
|
+
)),
|
|
29
|
+
)}
|
|
30
|
+
|
|
31
|
+
<SelectedCustomizableOptions customizable_options={customizable_options} />
|
|
32
|
+
</>
|
|
33
|
+
)
|
|
34
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import {
|
|
2
2
|
AddProductsToCartMutationVariables,
|
|
3
3
|
useFormAddProductsToCart,
|
|
4
|
-
} from '@graphcommerce/magento-product
|
|
4
|
+
} from '@graphcommerce/magento-product'
|
|
5
5
|
import {
|
|
6
6
|
SectionHeader,
|
|
7
7
|
ActionCardListForm,
|
|
@@ -17,7 +17,6 @@ export const BundleOption = React.memo<BundleOptionProps>((props) => {
|
|
|
17
17
|
const { idx, index, options, title, color, layout, size, variant, required: _required } = props
|
|
18
18
|
const { control } = useFormAddProductsToCart()
|
|
19
19
|
|
|
20
|
-
const can_change_quantity = options?.some((o) => o?.can_change_quantity)
|
|
21
20
|
const required = _required ?? false
|
|
22
21
|
|
|
23
22
|
return (
|
|
@@ -44,7 +43,6 @@ export const BundleOption = React.memo<BundleOptionProps>((props) => {
|
|
|
44
43
|
? `cartItems.${index}.entered_options.${idx}.uid`
|
|
45
44
|
: `cartItems.${index}.selected_options.${idx}`
|
|
46
45
|
}
|
|
47
|
-
// collapse={can_change_quantity}
|
|
48
46
|
render={BundleOptionValue}
|
|
49
47
|
items={useMemo(
|
|
50
48
|
() =>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
|
|
2
2
|
import { Image } from '@graphcommerce/image'
|
|
3
|
-
import { useFormAddProductsToCart } from '@graphcommerce/magento-product
|
|
3
|
+
import { useFormAddProductsToCart } from '@graphcommerce/magento-product'
|
|
4
4
|
import { Money } from '@graphcommerce/magento-store'
|
|
5
5
|
import {
|
|
6
6
|
responsiveVal,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AddToCartItemSelector } from '@graphcommerce/magento-product'
|
|
1
2
|
import { ActionCardListProps, filterNonNullableKeys } from '@graphcommerce/next-ui'
|
|
2
3
|
import { BundleOption } from './BundleOption'
|
|
3
4
|
import { BundleOptionValue } from './BundleOptionValue'
|
|
@@ -9,9 +10,8 @@ type BundelProductOptionsProps = Pick<
|
|
|
9
10
|
'size' | 'layout' | 'color' | 'variant'
|
|
10
11
|
> & {
|
|
11
12
|
renderer?: React.FC<BundleOptionValueProps>
|
|
12
|
-
index?: number
|
|
13
13
|
product: BundleProductOptionsFragment
|
|
14
|
-
}
|
|
14
|
+
} & AddToCartItemSelector
|
|
15
15
|
|
|
16
16
|
export function BundleProductOptions(props: BundelProductOptionsProps) {
|
|
17
17
|
const { product, index = 0 } = props
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/magento-product-bundle",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "7.0.0
|
|
5
|
+
"version": "7.0.0",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -12,25 +12,27 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@graphcommerce/eslint-config-pwa": "7.0.0
|
|
16
|
-
"@graphcommerce/prettier-config-pwa": "7.0.0
|
|
17
|
-
"@graphcommerce/typescript-config-pwa": "7.0.0
|
|
15
|
+
"@graphcommerce/eslint-config-pwa": "7.0.0",
|
|
16
|
+
"@graphcommerce/prettier-config-pwa": "7.0.0",
|
|
17
|
+
"@graphcommerce/typescript-config-pwa": "7.0.0"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@graphcommerce/ecommerce-ui": "7.0.0
|
|
21
|
-
"@graphcommerce/graphql": "7.0.0
|
|
22
|
-
"@graphcommerce/image": "7.0.0
|
|
23
|
-
"@graphcommerce/magento-cart": "7.0.0
|
|
24
|
-
"@graphcommerce/magento-cart-items": "7.0.0
|
|
25
|
-
"@graphcommerce/magento-product": "7.0.0
|
|
26
|
-
"@graphcommerce/magento-product-simple": "7.0.0
|
|
27
|
-
"@graphcommerce/magento-product-virtual": "7.0.0
|
|
28
|
-
"@graphcommerce/magento-store": "7.0.0
|
|
29
|
-
"@graphcommerce/next-ui": "7.0.0
|
|
20
|
+
"@graphcommerce/ecommerce-ui": "7.0.0",
|
|
21
|
+
"@graphcommerce/graphql": "7.0.0",
|
|
22
|
+
"@graphcommerce/image": "7.0.0",
|
|
23
|
+
"@graphcommerce/magento-cart": "7.0.0",
|
|
24
|
+
"@graphcommerce/magento-cart-items": "7.0.0",
|
|
25
|
+
"@graphcommerce/magento-product": "7.0.0",
|
|
26
|
+
"@graphcommerce/magento-product-simple": "7.0.0",
|
|
27
|
+
"@graphcommerce/magento-product-virtual": "7.0.0",
|
|
28
|
+
"@graphcommerce/magento-store": "7.0.0",
|
|
29
|
+
"@graphcommerce/next-ui": "7.0.0"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
|
-
"@lingui/react": "^
|
|
33
|
-
"@lingui/core": "^
|
|
32
|
+
"@lingui/react": "^4.2.1",
|
|
33
|
+
"@lingui/core": "^4.2.1",
|
|
34
|
+
"@lingui/macro": "^4.2.1",
|
|
35
|
+
"@mui/material": "^5.10.16",
|
|
34
36
|
"next": "^13.2.0",
|
|
35
37
|
"react": "^18.2.0",
|
|
36
38
|
"react-dom": "^18.2.0"
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { type CartItemActionCard } from '@graphcommerce/magento-cart-items'
|
|
2
|
+
import type { PluginProps } from '@graphcommerce/next-config'
|
|
3
|
+
import { isTypename } from '@graphcommerce/next-ui'
|
|
4
|
+
import { BundleProductCartItemOptions } from '../components/BundleProductCartItemOptions/BundleProductCartItemOptions'
|
|
5
|
+
|
|
6
|
+
export const component = 'CartItemActionCard'
|
|
7
|
+
export const exported =
|
|
8
|
+
'@graphcommerce/magento-cart-items/components/CartItemActionCard/CartItemActionCard'
|
|
9
|
+
|
|
10
|
+
export function BundleCartItemActionCard(
|
|
11
|
+
props: PluginProps<React.ComponentProps<typeof CartItemActionCard>>,
|
|
12
|
+
) {
|
|
13
|
+
const { Prev, ...rest } = props
|
|
14
|
+
|
|
15
|
+
if (!isTypename(rest.cartItem, ['BundleCartItem'])) return <Prev {...rest} />
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<Prev
|
|
19
|
+
{...rest}
|
|
20
|
+
details={
|
|
21
|
+
<BundleProductCartItemOptions
|
|
22
|
+
prices={rest.cartItem.prices}
|
|
23
|
+
bundle_options={rest.cartItem.bundle_options}
|
|
24
|
+
customizable_options={rest.cartItem.customizable_options}
|
|
25
|
+
/>
|
|
26
|
+
}
|
|
27
|
+
/>
|
|
28
|
+
)
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export const Plugin = BundleCartItemActionCard
|