@graphcommerce/magento-product 9.1.0-canary.53 → 9.1.0-canary.55
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 +8 -0
- package/components/AddProductsToCart/AddProductsToCartForm.tsx +22 -19
- package/components/AddProductsToCart/AddProductsToCartSnackbar.tsx +9 -3
- package/components/AddProductsToCart/AddProductsToCartSnackbarMessage.tsx +5 -1
- package/components/AddProductsToCart/useFormAddProductsToCart.ts +6 -7
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 9.1.0-canary.55
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#2539](https://github.com/graphcommerce-org/graphcommerce/pull/2539) [`21686e3`](https://github.com/graphcommerce-org/graphcommerce/commit/21686e3dd5673de7ada5e1741e4b77e00aeaef48) - Forward the cart to AddProductsToCartSnackbarMessage ([@paales](https://github.com/paales))
|
|
8
|
+
|
|
9
|
+
## 9.1.0-canary.54
|
|
10
|
+
|
|
3
11
|
## 9.1.0-canary.53
|
|
4
12
|
|
|
5
13
|
## 9.1.0-canary.52
|
|
@@ -8,13 +8,17 @@ import type { SxProps, Theme } from '@mui/material'
|
|
|
8
8
|
import { Box } from '@mui/material'
|
|
9
9
|
import { useRouter } from 'next/router'
|
|
10
10
|
import { useMemo, useRef } from 'react'
|
|
11
|
-
import type
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
import { AddProductsToCartDocument, type AddProductsToCartMutation } from './AddProductsToCart.gql'
|
|
12
|
+
import {
|
|
13
|
+
AddProductsToCartSnackbar,
|
|
14
|
+
type AddProductsToCartSnackbarProps,
|
|
15
|
+
} from './AddProductsToCartSnackbar'
|
|
15
16
|
import { toUserErrors } from './toUserErrors'
|
|
16
|
-
import
|
|
17
|
-
|
|
17
|
+
import {
|
|
18
|
+
AddProductsToCartContext,
|
|
19
|
+
type AddProductsToCartFields,
|
|
20
|
+
type RedirectType,
|
|
21
|
+
} from './useFormAddProductsToCart'
|
|
18
22
|
|
|
19
23
|
export type AddProductsToCartFormProps = {
|
|
20
24
|
children: React.ReactNode
|
|
@@ -37,24 +41,22 @@ const name = 'AddProductsToCartForm'
|
|
|
37
41
|
* - Redirects the user to the cart/checkout/added page after successful submission.
|
|
38
42
|
*/
|
|
39
43
|
export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
|
|
40
|
-
|
|
44
|
+
const { children, redirect, onComplete, sx, snackbarProps, ...formProps } = props
|
|
41
45
|
const router = useRouter()
|
|
42
46
|
const client = useApolloClient()
|
|
43
47
|
const crosssellsQuery = useRef<Promise<ApolloQueryResult<CrosssellsQuery>>>()
|
|
44
48
|
|
|
45
|
-
if (typeof redirect !== 'undefined' && redirect !== 'added' && router.pathname === redirect)
|
|
46
|
-
redirect = undefined
|
|
47
|
-
|
|
48
49
|
const form = useFormGqlMutationCart<AddProductsToCartMutation, AddProductsToCartFields>(
|
|
49
50
|
AddProductsToCartDocument,
|
|
50
51
|
{
|
|
51
52
|
...formProps,
|
|
53
|
+
defaultValues: { redirect },
|
|
52
54
|
// We're stripping out incomplete entered options.
|
|
53
55
|
onBeforeSubmit: async (variables) => {
|
|
54
56
|
const variables2 = (await formProps.onBeforeSubmit?.(variables)) ?? variables
|
|
55
57
|
if (variables2 === false) return false
|
|
56
58
|
|
|
57
|
-
const { cartId, cartItems } = variables2
|
|
59
|
+
const { cartId, cartItems, ...rest } = variables2
|
|
58
60
|
|
|
59
61
|
const requestData = {
|
|
60
62
|
cartId,
|
|
@@ -85,11 +87,12 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
|
|
|
85
87
|
],
|
|
86
88
|
}),
|
|
87
89
|
),
|
|
90
|
+
...rest,
|
|
88
91
|
}
|
|
89
92
|
|
|
90
93
|
const sku = requestData.cartItems[requestData.cartItems.length - 1]?.sku
|
|
91
94
|
|
|
92
|
-
if (sku && redirect === 'added') {
|
|
95
|
+
if (sku && requestData.redirect === 'added') {
|
|
93
96
|
// Preload crosssells
|
|
94
97
|
crosssellsQuery.current = client.query({
|
|
95
98
|
query: CrosssellsDocument,
|
|
@@ -109,9 +112,9 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
|
|
|
109
112
|
if (item.sku && !item.keep_sku) form.setValue(`cartItems.${index}.sku`, '')
|
|
110
113
|
})
|
|
111
114
|
|
|
112
|
-
if (toUserErrors(result.data).length || result.errors?.length || !redirect) return
|
|
115
|
+
if (toUserErrors(result.data).length || result.errors?.length || !variables.redirect) return
|
|
113
116
|
|
|
114
|
-
if (redirect === 'added') {
|
|
117
|
+
if (variables.redirect === 'added') {
|
|
115
118
|
await crosssellsQuery.current
|
|
116
119
|
const method = router.pathname.startsWith('/checkout/added')
|
|
117
120
|
? router.replace
|
|
@@ -120,9 +123,11 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
|
|
|
120
123
|
pathname: '/checkout/added',
|
|
121
124
|
query: { sku: variables.cartItems.map((i) => i.sku) },
|
|
122
125
|
})
|
|
123
|
-
} else {
|
|
124
|
-
await router.push({ pathname: redirect })
|
|
126
|
+
} else if (variables.redirect) {
|
|
127
|
+
await router.push({ pathname: variables.redirect })
|
|
125
128
|
}
|
|
129
|
+
|
|
130
|
+
form.resetField('redirect', { defaultValue: redirect })
|
|
126
131
|
},
|
|
127
132
|
},
|
|
128
133
|
)
|
|
@@ -130,9 +135,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
|
|
|
130
135
|
const submit = form.handleSubmit(() => {})
|
|
131
136
|
|
|
132
137
|
return (
|
|
133
|
-
<AddProductsToCartContext.Provider
|
|
134
|
-
value={useMemo(() => ({ ...form, redirect }), [form, redirect])}
|
|
135
|
-
>
|
|
138
|
+
<AddProductsToCartContext.Provider value={useMemo(() => ({ ...form }), [form])}>
|
|
136
139
|
<Box component='form' onSubmit={submit} noValidate sx={sx} className={name}>
|
|
137
140
|
{children}
|
|
138
141
|
</Box>
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { useFormState } from '@graphcommerce/ecommerce-ui'
|
|
1
|
+
import { useFormState, useWatch } from '@graphcommerce/ecommerce-ui'
|
|
2
2
|
import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
|
|
3
3
|
import { nonNullable } from '@graphcommerce/next-ui'
|
|
4
|
+
import { useRouter } from 'next/router'
|
|
4
5
|
import { useMemo } from 'react'
|
|
5
6
|
import { AddProductsToCartSnackbarMessage } from './AddProductsToCartSnackbarMessage'
|
|
6
7
|
import { findAddedItems } from './findAddedItems'
|
|
@@ -15,10 +16,14 @@ export type AddProductsToCartSnackbarProps = {
|
|
|
15
16
|
|
|
16
17
|
export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps) {
|
|
17
18
|
const { errorSnackbar, successSnackbar, disableSuccessSnackbar } = props
|
|
18
|
-
const { error, data,
|
|
19
|
+
const { error, data, control, submittedVariables } = useFormAddProductsToCart()
|
|
20
|
+
const router = useRouter()
|
|
21
|
+
let redirect = useWatch({ control, name: 'redirect' })
|
|
19
22
|
|
|
20
|
-
|
|
23
|
+
if (typeof redirect !== 'undefined' && redirect !== 'added' && router.pathname === redirect)
|
|
24
|
+
redirect = undefined
|
|
21
25
|
|
|
26
|
+
const formState = useFormState({ control })
|
|
22
27
|
const userErrors = toUserErrors(data)
|
|
23
28
|
|
|
24
29
|
const showSuccess =
|
|
@@ -42,6 +47,7 @@ export function AddProductsToCartSnackbar(props: AddProductsToCartSnackbarProps)
|
|
|
42
47
|
addedItems={addedItems.map((item) => item.itemInCart?.product.name).filter(nonNullable)}
|
|
43
48
|
errorSnackbar={errorSnackbar}
|
|
44
49
|
successSnackbar={successSnackbar}
|
|
50
|
+
cart={data?.addProductsToCart?.cart}
|
|
45
51
|
/>
|
|
46
52
|
)
|
|
47
53
|
}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import type { ApolloError } from '@graphcommerce/graphql'
|
|
2
2
|
import type { CartUserInputError } from '@graphcommerce/graphql-mesh'
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
ApolloCartErrorSnackbar,
|
|
5
|
+
type CartItemCountChangedFragment,
|
|
6
|
+
} from '@graphcommerce/magento-cart'
|
|
4
7
|
import type { ErrorSnackbarProps, MessageSnackbarProps } from '@graphcommerce/next-ui'
|
|
5
8
|
import {
|
|
6
9
|
Button,
|
|
@@ -19,6 +22,7 @@ export type AddProductsToCartSnackbarMessageProps = {
|
|
|
19
22
|
userErrors?: Pick<CartUserInputError, 'message'>[]
|
|
20
23
|
showSuccess: boolean
|
|
21
24
|
addedItems: string[]
|
|
25
|
+
cart?: CartItemCountChangedFragment | null | undefined
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
export function AddProductsToCartSnackbarMessage(props: AddProductsToCartSnackbarMessageProps) {
|
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import type { UseFormGqlMutationReturn } from '@graphcommerce/ecommerce-ui'
|
|
2
2
|
import type { CartItemInput } from '@graphcommerce/graphql-mesh'
|
|
3
3
|
import { createContext, useContext } from 'react'
|
|
4
|
-
import type { LiteralUnion
|
|
5
|
-
import type {
|
|
6
|
-
AddProductsToCartMutation,
|
|
7
|
-
AddProductsToCartMutationVariables,
|
|
8
|
-
} from './AddProductsToCart.gql'
|
|
4
|
+
import type { LiteralUnion } from 'type-fest'
|
|
5
|
+
import type { AddProductsToCartMutation } from './AddProductsToCart.gql'
|
|
9
6
|
|
|
10
7
|
export type RedirectType = LiteralUnion<'added' | undefined | false, `/${string}`>
|
|
11
8
|
|
|
@@ -39,12 +36,14 @@ type Item = CartItemInput & {
|
|
|
39
36
|
keep_sku?: boolean
|
|
40
37
|
}
|
|
41
38
|
|
|
42
|
-
export type AddProductsToCartFields =
|
|
39
|
+
export type AddProductsToCartFields = {
|
|
40
|
+
cartId: string
|
|
43
41
|
cartItems: Item[]
|
|
42
|
+
redirect: RedirectType
|
|
44
43
|
}
|
|
45
44
|
|
|
46
45
|
/** https://react-hook-form.com/api/useform/watch/ */
|
|
47
|
-
export type AddProductsToCartContextType =
|
|
46
|
+
export type AddProductsToCartContextType = Omit<
|
|
48
47
|
UseFormGqlMutationReturn<AddProductsToCartMutation, AddProductsToCartFields>,
|
|
49
48
|
'formState' | 'watch'
|
|
50
49
|
>
|
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.55",
|
|
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.55",
|
|
22
|
+
"@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
|
|
23
|
+
"@graphcommerce/framer-next-pages": "^9.1.0-canary.55",
|
|
24
|
+
"@graphcommerce/framer-scroller": "^9.1.0-canary.55",
|
|
25
|
+
"@graphcommerce/graphql": "^9.1.0-canary.55",
|
|
26
|
+
"@graphcommerce/graphql-mesh": "^9.1.0-canary.55",
|
|
27
|
+
"@graphcommerce/image": "^9.1.0-canary.55",
|
|
28
|
+
"@graphcommerce/magento-cart": "^9.1.0-canary.55",
|
|
29
|
+
"@graphcommerce/magento-store": "^9.1.0-canary.55",
|
|
30
|
+
"@graphcommerce/next-ui": "^9.1.0-canary.55",
|
|
31
|
+
"@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55",
|
|
32
|
+
"@graphcommerce/typescript-config-pwa": "^9.1.0-canary.55",
|
|
33
33
|
"@lingui/core": "^4.2.1",
|
|
34
34
|
"@lingui/macro": "^4.2.1",
|
|
35
35
|
"@lingui/react": "^4.2.1",
|