@graphcommerce/magento-cart 6.0.2-canary.8 → 6.1.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.
Files changed (6) hide show
  1. package/CHANGELOG.md +52 -0
  2. package/components/CartAdded/Crosssells.graphql +1 -1
  3. package/components/CartAgreementsForm/CartAgreementsForm.tsx +26 -33
  4. package/hooks/useCartQuery.ts +2 -4
  5. package/hooks/useCurrentCartId.ts +3 -21
  6. package/package.json +15 -15
package/CHANGELOG.md CHANGED
@@ -1,5 +1,57 @@
1
1
  # Change Log
2
2
 
3
+ ## 6.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#1869](https://github.com/graphcommerce-org/graphcommerce/pull/1869) [`82111fa35`](https://github.com/graphcommerce-org/graphcommerce/commit/82111fa351b68a76ff053ebb7e0261ee507a826d) - Faster page rendering on all pages that use Apollo Client: Revert to classical useEffect strategy for Apollo cache persist restore and remove custom hydration strategies from the cart/customer.
8
+
9
+ This comes with a caviat: When using `<Suspense>` to defer rendering you might run into hydration errors. In the case where the Suspense boundaries are used to improve performance, you are required to remove those. We have a follow-up [PR](https://github.com/graphcommerce-org/graphcommerce/pull/1878) in the works that allows getting the hydration performance improvement, but not have the hydration errors. ([@paales](https://github.com/paales))
10
+
11
+ ### Patch Changes
12
+
13
+ - [#1871](https://github.com/graphcommerce-org/graphcommerce/pull/1871) [`bc4181e74`](https://github.com/graphcommerce-org/graphcommerce/commit/bc4181e74392b899f62612de764fdb41f5716dd7) - Make checkout newsletter and agreements checkboxes persistent ([@bramvanderholst](https://github.com/bramvanderholst))
14
+
15
+ - [#1871](https://github.com/graphcommerce-org/graphcommerce/pull/1871) [`601a0d3a7`](https://github.com/graphcommerce-org/graphcommerce/commit/601a0d3a7de702d4cee277549595f8d0d7e968f3) - Only use agreement name as link when agreement text contains the name, so the rest of the text can be used as checkbox label ([@bramvanderholst](https://github.com/bramvanderholst))
16
+
17
+ ## 6.0.2-canary.22
18
+
19
+ ## 6.0.2-canary.21
20
+
21
+ ## 6.0.2-canary.20
22
+
23
+ ## 6.0.2-canary.19
24
+
25
+ ## 6.0.2-canary.18
26
+
27
+ ## 6.0.2-canary.17
28
+
29
+ ## 6.0.2-canary.16
30
+
31
+ ## 6.0.2-canary.15
32
+
33
+ ## 6.0.2-canary.14
34
+
35
+ ## 6.0.2-canary.13
36
+
37
+ ### Patch Changes
38
+
39
+ - [#1869](https://github.com/graphcommerce-org/graphcommerce/pull/1869) [`82111fa35`](https://github.com/graphcommerce-org/graphcommerce/commit/82111fa351b68a76ff053ebb7e0261ee507a826d) - Revert to classical useEffect strategy for Apollo cache persist restore and remove custom hydration strategies from the cart. ([@paales](https://github.com/paales))
40
+
41
+ ## 6.0.2-canary.12
42
+
43
+ ### Patch Changes
44
+
45
+ - [#1871](https://github.com/graphcommerce-org/graphcommerce/pull/1871) [`bc4181e74`](https://github.com/graphcommerce-org/graphcommerce/commit/bc4181e74392b899f62612de764fdb41f5716dd7) - Make checkout newsletter and agreements checkboxes persistent ([@bramvanderholst](https://github.com/bramvanderholst))
46
+
47
+ - [#1871](https://github.com/graphcommerce-org/graphcommerce/pull/1871) [`601a0d3a7`](https://github.com/graphcommerce-org/graphcommerce/commit/601a0d3a7de702d4cee277549595f8d0d7e968f3) - Checkout: Only use agreement name as link when agreement text contains the name, so the rest of the text can be used as checkbox label ([@bramvanderholst](https://github.com/bramvanderholst))
48
+
49
+ ## 6.0.2-canary.11
50
+
51
+ ## 6.0.2-canary.10
52
+
53
+ ## 6.0.2-canary.9
54
+
3
55
  ## 6.0.2-canary.8
4
56
 
5
57
  ## 6.0.2-canary.7
package/components/CartAdded/Crosssells.graphql CHANGED
@@ -1,5 +1,5 @@
1
1
  query Crosssells(
2
- $pageSize: Int = 8
2
+ $pageSize: Int = 1
3
3
  $currentPage: Int = 1
4
4
  $filters: ProductAttributeFilterInput = {}
5
5
  ) {
package/components/CartAgreementsForm/CartAgreementsForm.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { CheckboxElement } from '@graphcommerce/ecommerce-ui'
1
2
  import { useQuery } from '@graphcommerce/graphql'
2
3
  import { extendableComponent, FormDiv } from '@graphcommerce/next-ui'
3
4
  import {
@@ -65,46 +66,38 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
65
66
  sortedAgreements?.map((agreement) => {
66
67
  if (!agreement) return null
67
68
  const href = `/checkout/terms/${agreement.name?.toLowerCase().replace(/\s+/g, '-')}`
69
+ const agreementTextParts = agreement.checkbox_text.split(agreement.name)
70
+
68
71
  return (
69
72
  <React.Fragment key={agreement.agreement_id}>
70
73
  {agreement.mode === 'MANUAL' ? (
71
- <Controller
72
- defaultValue=''
73
- name={`agreement[${agreement.agreement_id}]`}
74
+ <CheckboxElement
74
75
  control={control}
76
+ color='secondary'
77
+ formControl={{
78
+ sx: {
79
+ display: 'block',
80
+ },
81
+ }}
82
+ name={`agreement${agreement.agreement_id}`}
75
83
  rules={{
76
84
  required: i18n._(/* i18n */ 'You have to agree in order to proceed'),
77
85
  }}
78
- render={({
79
- field: { onChange, value, name, ref, onBlur },
80
- fieldState: { error },
81
- }) => (
82
- <FormControl
83
- error={!!formState.errors[String(agreement.agreement_id)]}
84
- className={classes.formControlRoot}
85
- sx={{ display: 'block' }}
86
- >
87
- <FormControlLabel
88
- control={
89
- <Checkbox
90
- color='secondary'
91
- required
92
- checked={!!value}
93
- name={name}
94
- inputRef={ref}
95
- onBlur={onBlur}
96
- onChange={(e) => onChange(e)}
97
- />
98
- }
99
- label={
100
- <Link href={href} color='secondary' underline='hover'>
101
- {agreement.checkbox_text}
102
- </Link>
103
- }
104
- />
105
- {error?.message && <FormHelperText error>{error.message}</FormHelperText>}
106
- </FormControl>
107
- )}
86
+ label={
87
+ agreement.checkbox_text.includes(agreement.name) ? (
88
+ <>
89
+ {agreementTextParts[0]}
90
+ <Link href={href} color='secondary' underline='hover'>
91
+ {agreement.name}
92
+ </Link>
93
+ {agreementTextParts[1]}
94
+ </>
95
+ ) : (
96
+ <Link href={href} color='secondary' underline='hover'>
97
+ {agreement.checkbox_text}
98
+ </Link>
99
+ )
100
+ }
108
101
  />
109
102
  ) : (
110
103
  <Box className={classes.manualCheck} sx={{ padding: `9px 0` }}>
package/hooks/useCartQuery.ts CHANGED
@@ -16,12 +16,11 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
16
16
  document: TypedDocumentNode<Q, V>,
17
17
  options: QueryHookOptions<Q, Omit<V, 'cartId'>> & {
18
18
  allowUrl?: boolean
19
- hydration?: boolean
20
19
  } = {},
21
20
  ) {
22
- const { allowUrl = true, hydration, ...queryOptions } = options
21
+ const { allowUrl = true, ...queryOptions } = options
23
22
  const router = useRouter()
24
- const { currentCartId } = useCurrentCartId({ hydration })
23
+ const { currentCartId } = useCurrentCartId()
25
24
 
26
25
  const urlCartId = router.query.cart_id
27
26
  const usingUrl = allowUrl && typeof urlCartId === 'string'
@@ -34,7 +33,6 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
34
33
 
35
34
  queryOptions.variables = { cartId, ...options?.variables } as V
36
35
  queryOptions.skip = queryOptions?.skip || !cartId
37
- queryOptions.ssr = !!hydration
38
36
 
39
37
  const result = useQuery(document, queryOptions)
40
38
 
package/hooks/useCurrentCartId.ts CHANGED
@@ -1,32 +1,14 @@
1
- import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
2
1
  import { OperationVariables, QueryHookOptions, useQuery } from '@graphcommerce/graphql'
3
- import { startTransition, useState } from 'react'
4
2
  import { CurrentCartIdDocument, CurrentCartIdQuery } from './CurrentCartId.gql'
5
- import {} from 'react-dom'
6
3
 
7
4
  type UseCurrentCartIdOptions<Q, V extends OperationVariables> = QueryHookOptions<
8
5
  Q & Pick<CurrentCartIdQuery, 'currentCartId'>,
9
6
  V
10
- > & { hydration?: boolean }
7
+ >
11
8
 
12
9
  export function useCurrentCartId<Q, V extends OperationVariables>(
13
10
  options: UseCurrentCartIdOptions<Q, V> = {},
14
11
  ) {
15
- const { hydration = false, ...queryOptions } = options
16
- const [hydrating, setHydrating] = useState(!hydration)
17
-
18
- useIsomorphicLayoutEffect(() => {
19
- if (!hydrating) return
20
- startTransition(() => setHydrating(false))
21
- }, [hydrating])
22
-
23
- const skip = options.skip !== undefined ? options.skip : hydrating
24
-
25
- const { data, ...queryResults } = useQuery(CurrentCartIdDocument, { ...queryOptions, skip })
26
-
27
- return {
28
- currentCartId: data?.currentCartId?.id || '',
29
- data,
30
- ...queryResults,
31
- }
12
+ const queryResults = useQuery(CurrentCartIdDocument, { ...options })
13
+ return { currentCartId: queryResults.data?.currentCartId?.id || '', ...queryResults }
32
14
  }
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": "6.0.2-canary.8",
5
+ "version": "6.1.0",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -12,22 +12,22 @@
12
12
  }
13
13
  },
14
14
  "devDependencies": {
15
- "@graphcommerce/eslint-config-pwa": "6.0.2-canary.8",
16
- "@graphcommerce/prettier-config-pwa": "6.0.2-canary.8",
17
- "@graphcommerce/typescript-config-pwa": "6.0.2-canary.8"
15
+ "@graphcommerce/eslint-config-pwa": "6.1.0",
16
+ "@graphcommerce/prettier-config-pwa": "6.1.0",
17
+ "@graphcommerce/typescript-config-pwa": "6.1.0"
18
18
  },
19
19
  "dependencies": {
20
- "@graphcommerce/ecommerce-ui": "6.0.2-canary.8",
21
- "@graphcommerce/framer-utils": "6.0.2-canary.8",
22
- "@graphcommerce/framer-next-pages": "6.0.2-canary.8",
23
- "@graphcommerce/framer-scroller": "6.0.2-canary.8",
24
- "@graphcommerce/graphql": "6.0.2-canary.8",
25
- "@graphcommerce/image": "6.0.2-canary.8",
26
- "@graphcommerce/magento-customer": "6.0.2-canary.8",
27
- "@graphcommerce/magento-graphql": "6.0.2-canary.8",
28
- "@graphcommerce/magento-store": "6.0.2-canary.8",
29
- "@graphcommerce/next-ui": "6.0.2-canary.8",
30
- "@graphcommerce/react-hook-form": "6.0.2-canary.8"
20
+ "@graphcommerce/ecommerce-ui": "6.1.0",
21
+ "@graphcommerce/framer-utils": "6.1.0",
22
+ "@graphcommerce/framer-next-pages": "6.1.0",
23
+ "@graphcommerce/framer-scroller": "6.1.0",
24
+ "@graphcommerce/graphql": "6.1.0",
25
+ "@graphcommerce/image": "6.1.0",
26
+ "@graphcommerce/magento-customer": "6.1.0",
27
+ "@graphcommerce/magento-graphql": "6.1.0",
28
+ "@graphcommerce/magento-store": "6.1.0",
29
+ "@graphcommerce/next-ui": "6.1.0",
30
+ "@graphcommerce/react-hook-form": "6.1.0"
31
31
  },
32
32
  "peerDependencies": {
33
33
  "@lingui/react": "^3.13.2",