@graphcommerce/magento-cart 4.4.7 → 4.5.1

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Change Log
 
+## 4.5.1
+
+### Patch Changes
+
+- Updated dependencies [[`8d8fda262`](https://github.com/graphcommerce-org/graphcommerce/commit/8d8fda2623e561cb43441110c67ffa34b692668a), [`d41cff721`](https://github.com/graphcommerce-org/graphcommerce/commit/d41cff7211230561ceeb7786cf75790efd6377cd), [`cefa7b365`](https://github.com/graphcommerce-org/graphcommerce/commit/cefa7b3652b55108d2178927e3c5d98a111cf373), [`584b683a2`](https://github.com/graphcommerce-org/graphcommerce/commit/584b683a2aedcdf5067644c8dcc0e63a5b9e894c)]:
+  - @graphcommerce/next-ui@4.13.0
+  - @graphcommerce/magento-store@4.2.16
+  - @graphcommerce/framer-scroller@2.1.22
+  - @graphcommerce/ecommerce-ui@1.1.1
+  - @graphcommerce/magento-customer@4.7.1
+
+## 4.5.0
+
+### Minor Changes
+
+- [#1544](https://github.com/graphcommerce-org/graphcommerce/pull/1544) [`5f927ebdc`](https://github.com/graphcommerce-org/graphcommerce/commit/5f927ebdc6f0331833e02b96e4f169bfe475ac6b) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - Fixed hydration errors on account, cart and wishlist
+
+### Patch Changes
+
+- [#1545](https://github.com/graphcommerce-org/graphcommerce/pull/1545) [`c87a28e7d`](https://github.com/graphcommerce-org/graphcommerce/commit/c87a28e7dad87bffd0bd125ad5fdca65aaa389cc) Thanks [@paales](https://github.com/paales)! - Faster hydration with useLayoutEffect
+
+- Updated dependencies [[`5f927ebdc`](https://github.com/graphcommerce-org/graphcommerce/commit/5f927ebdc6f0331833e02b96e4f169bfe475ac6b), [`c87a28e7d`](https://github.com/graphcommerce-org/graphcommerce/commit/c87a28e7dad87bffd0bd125ad5fdca65aaa389cc), [`c756f42e5`](https://github.com/graphcommerce-org/graphcommerce/commit/c756f42e503761a497e4a5a7a02d02141df231c3)]:
+  - @graphcommerce/ecommerce-ui@1.1.0
+  - @graphcommerce/graphql@3.4.0
+  - @graphcommerce/magento-customer@4.7.0
+  - @graphcommerce/magento-graphql@3.1.0
+  - @graphcommerce/react-hook-form@3.3.0
+  - @graphcommerce/next-ui@4.12.0
+  - @graphcommerce/magento-store@4.2.15
+  - @graphcommerce/framer-scroller@2.1.21
+
+## 4.4.8
+
+### Patch Changes
+
+- [#1538](https://github.com/graphcommerce-org/graphcommerce/pull/1538) [`fe4baa42d`](https://github.com/graphcommerce-org/graphcommerce/commit/fe4baa42db0081ed960d62aef688bd36a7ac974f) Thanks [@paales](https://github.com/paales)! - add missing translations
+
+- Updated dependencies [[`fe4baa42d`](https://github.com/graphcommerce-org/graphcommerce/commit/fe4baa42db0081ed960d62aef688bd36a7ac974f)]:
+  - @graphcommerce/magento-customer@4.6.3
+  - @graphcommerce/next-ui@4.11.2
+  - @graphcommerce/ecommerce-ui@1.0.23
+  - @graphcommerce/framer-scroller@2.1.20
+  - @graphcommerce/magento-store@4.2.14
+
 ## 4.4.7
 
 ### Patch Changes

package/components/CartAgreementsForm/CartAgreementsForm.tsx

@@ -74,7 +74,7 @@ export function CartAgreementsForm(props: CartAgreementsFormProps) {
                       name={`agreement[${agreement.agreement_id}]`}
                       control={control}
                       rules={{
-                        required: i18n._(/* i18n */ `You have to agree in order to proceed`),
+                        required: i18n._(/* i18n */ 'You have to agree in order to proceed'),
                       }}
                       render={({
                         field: { onChange, value, name, ref, onBlur },

package/components/CartFab/CartFab.tsx

@@ -58,7 +58,7 @@ function CartFabContent(props: CartFabContentProps) {
       <PageLink href='/cart' passHref>
         <MotionFab
           className={classes.cart}
-          aria-label={i18n._(/* i18n */ `Cart`)}
+          aria-label={i18n._(/* i18n */ 'Cart')}
           color='inherit'
           size='responsive'
           style={{ backgroundColor }}
@@ -109,15 +109,15 @@ function CartFabContent(props: CartFabContentProps) {
  * product to the cart. This would mean that it would immediately start executing this query.
  */
 export function CartFab(props: CartFabProps) {
-  const { data } = useCartQuery(CartFabDocument, {
+  const { data, loading, called } = useCartQuery(CartFabDocument, {
     fetchPolicy: 'cache-only',
     nextFetchPolicy: 'cache-first',
   })
   const qty = data?.cart?.total_quantity ?? 0
 
-  return (
-    <NoSsr fallback={<CartFabContent {...props} total_quantity={0} />}>
-      <CartFabContent total_quantity={qty} {...props} />
-    </NoSsr>
-  )
+  if (loading || !called) {
+    return <CartFabContent {...props} total_quantity={0} />
+  }
+
+  return <CartFabContent total_quantity={qty} {...props} />
 }

package/hooks/useCartIdCreate.ts

@@ -5,15 +5,15 @@ import { useAssignCurrentCartId } from './useAssignCurrentCartId'
 import { useCurrentCartId } from './useCurrentCartId'
 
 export function useCartIdCreate() {
-  const cartId = useCurrentCartId()
+  const { currentCartId } = useCurrentCartId()
   const [create] = useMutation(CreateEmptyCartDocument)
   const assignCurrentCartId = useAssignCurrentCartId()
 
   return async (): Promise<string> => {
-    if (cartId) return cartId
+    if (currentCartId) return currentCartId
 
     const { data } = await create()
-    if (!data?.createEmptyCart) throw Error(i18n._(/* i18n */ `Could not create an empty cart`))
+    if (!data?.createEmptyCart) throw Error(i18n._(/* i18n */ 'Could not create an empty cart'))
 
     // We store the cartId that is returned as the currentCartId result
     assignCurrentCartId(data.createEmptyCart)

package/hooks/useCartQuery.ts

@@ -1,5 +1,6 @@
 import { useQuery, TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
 import { useCurrentCartId } from './useCurrentCartId'
 
 /**
@@ -17,12 +18,10 @@ export function useCartQuery<Q, V extends { cartId: string; [index: string]: unk
   options: QueryHookOptions<Q, Omit<V, 'cartId'>> & { allowUrl?: boolean } = {},
 ) {
   const { allowUrl = true, ...queryOptions } = options
-
   const router = useRouter()
-  const currentCartId = useCurrentCartId()
+  const { currentCartId } = useCurrentCartId()
   const urlCartId = router.query.cart_id
   const usingUrl = allowUrl && typeof urlCartId === 'string'
-
   const cartId = usingUrl ? urlCartId : currentCartId
 
   if (usingUrl && typeof queryOptions.fetchPolicy === 'undefined')

package/hooks/useCurrentCartId.ts

@@ -1,6 +1,23 @@
-import { useQuery } from '@graphcommerce/graphql'
-import { CurrentCartIdDocument } from './CurrentCartId.gql'
+import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
+import { QueryHookOptions, useQuery } from '@graphcommerce/graphql'
+import { useState } from 'react'
+import { CurrentCartIdDocument, CurrentCartIdQuery } from './CurrentCartId.gql'
 
-export function useCurrentCartId() {
-  return useQuery(CurrentCartIdDocument, { ssr: false }).data?.currentCartId?.id ?? undefined
+export function useCurrentCartId<Q, V>(
+  options: QueryHookOptions<Q & Pick<CurrentCartIdQuery, 'currentCartId'>, Omit<V, 'skip'>> = {},
+) {
+  const [skip, setSkip] = useState(true)
+  const { data, ...queryResults } = useQuery(CurrentCartIdDocument, {
+    ...options,
+    skip,
+  })
+
+  useIsomorphicLayoutEffect(() => {
+    if (skip) setSkip(false)
+  }, [skip])
+
+  return {
+    currentCartId: data?.currentCartId?.id || '',
+    ...queryResults,
+  }
 }

package/hooks/useMergeCustomerCart.ts

@@ -13,7 +13,7 @@ import { useCurrentCartId } from './useCurrentCartId'
  * @todo: Implement the assignCustomerToGuestCart when available: https://github.com/magento/magento2/pull/33106
  */
 export function useMergeCustomerCart() {
-  const sourceCartId = useCurrentCartId()
+  const { currentCartId } = useCurrentCartId()
   const assignCurrentCartId = useAssignCurrentCartId()
   const [merge] = useMutation(UseMergeCustomerCartDocument, { errorPolicy: 'all' })
 
@@ -27,21 +27,21 @@ export function useMergeCustomerCart() {
     if (!destinationCartId) return
 
     // If the vistor cart is the same as the customer cart, we're done
-    if (sourceCartId === destinationCartId) return
+    if (currentCartId === destinationCartId) return
 
     // If there is no visitor cart, assign the customer cart as the current cart
-    if (!sourceCartId) {
+    if (!currentCartId) {
       assignCurrentCartId(destinationCartId)
       return
     }
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
-      const result = await merge({ variables: { sourceCartId, destinationCartId } })
+      const result = await merge({ variables: { sourceCartId: currentCartId, destinationCartId } })
 
       if (!result.data?.mergeCarts.id) return
 
       assignCurrentCartId(result.data?.mergeCarts.id)
     })()
-  }, [assignCurrentCartId, sourceCartId, destinationCartId, merge])
+  }, [assignCurrentCartId, destinationCartId, merge, currentCartId])
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.4.7",
+  "version": "4.5.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,16 +18,17 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.0.22",
+    "@graphcommerce/ecommerce-ui": "1.1.1",
+    "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/framer-next-pages": "3.2.3",
-    "@graphcommerce/framer-scroller": "2.1.19",
-    "@graphcommerce/graphql": "3.3.0",
+    "@graphcommerce/framer-scroller": "2.1.22",
+    "@graphcommerce/graphql": "3.4.0",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-customer": "4.6.2",
-    "@graphcommerce/magento-graphql": "3.0.15",
-    "@graphcommerce/magento-store": "4.2.13",
-    "@graphcommerce/next-ui": "4.11.1",
-    "@graphcommerce/react-hook-form": "3.2.2"
+    "@graphcommerce/magento-customer": "4.7.1",
+    "@graphcommerce/magento-graphql": "3.1.0",
+    "@graphcommerce/magento-store": "4.2.16",
+    "@graphcommerce/next-ui": "4.13.0",
+    "@graphcommerce/react-hook-form": "3.3.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",