@graphcommerce/magento-customer 4.6.2 → 4.7.1

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Change Log
 
+## 4.7.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)]:
+  - @graphcommerce/next-ui@4.13.0
+  - @graphcommerce/magento-store@4.2.16
+  - @graphcommerce/ecommerce-ui@1.1.1
+
+## 4.7.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), [`c756f42e5`](https://github.com/graphcommerce-org/graphcommerce/commit/c756f42e503761a497e4a5a7a02d02141df231c3)]:
+  - @graphcommerce/ecommerce-ui@1.1.0
+  - @graphcommerce/graphql@3.4.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
+
+## 4.6.3
+
+### 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/next-ui@4.11.2
+  - @graphcommerce/ecommerce-ui@1.0.23
+  - @graphcommerce/magento-store@4.2.14
+
 ## 4.6.2
 
 ### Patch Changes

package/components/AddressFields/AddressFields.tsx

@@ -80,7 +80,7 @@ export function AddressFields(props: AddressFieldsProps) {
             required: required?.houseNumber,
             pattern: {
               value: houseNumberPattern,
-              message: i18n._(/* i18n */ `Please provide a valid house number`),
+              message: i18n._(/* i18n */ 'Please provide a valid house number'),
             },
           })}
           helperText={formState.isSubmitted && formState.errors.houseNumber?.message}

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -16,7 +16,7 @@ export type ApolloCustomerErrorFullPageProps = {
 
 export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPageProps) {
   const { error, icon, altButton, button, ...alertProps } = props
-  const [newError, unauthorized] = useAuthorizationErrorMasked()
+  const [newError, unauthorized] = useAuthorizationErrorMasked(error)
   const { token } = useCustomerSession()
 
   return (
@@ -28,7 +28,7 @@ export function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPagePr
         unauthorized ? (
           <PageLink href='/account/signin' passHref>
             <Button variant='contained' color='primary' size='large'>
-              {token ? <Trans id='Sign in' /> : <Trans id='Create Account' />}
+              {token ? <Trans id='Sign in' /> : <Trans id='Sign in or create an account!' />}
             </Button>
           </PageLink>
         ) : (

package/components/ApolloCustomerError/useAuthorizationErrorMasked.ts

@@ -10,8 +10,8 @@ export function useAuthorizationErrorMasked(error?: ApolloError) {
     category: 'graphql-authorization',
     error,
     mask: token
-      ? i18n._(/* i18n */ `Please reauthenticate and try again`)
-      : i18n._(/* i18n */ `You must sign in to continue`),
+      ? i18n._(/* i18n */ 'Please reauthenticate and try again')
+      : i18n._(/* i18n */ 'You must sign in to continue'),
     extract: false,
   })
 }

package/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -61,7 +61,7 @@ export function ChangePasswordForm() {
           required
           {...muiRegister('confirmPassword', {
             required: true,
-            validate: (value) => value === pass || i18n._(/* i18n */ `Passwords don't match`),
+            validate: (value) => value === pass || i18n._(/* i18n */ "Passwords don't match"),
           })}
           helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}

package/components/CreateCustomerAddressForm/CreateCustomerAddressForm.tsx

@@ -69,7 +69,7 @@ export function CreateCustomerAddressForm() {
             label={<Trans id='Telephone' />}
             {...muiRegister('telephone', {
               required: required.telephone,
-              pattern: { value: phonePattern, message: i18n._(/* i18n */ `Invalid phone number`) },
+              pattern: { value: phonePattern, message: i18n._(/* i18n */ 'Invalid phone number') },
             })}
             helperText={formState.isSubmitted && formState.errors.telephone?.message}
             disabled={formState.isSubmitting}

package/components/CustomerFab/CustomerFab.tsx

@@ -31,7 +31,7 @@ function CustomerFabContent(props: CustomerFabContentProps) {
       <Fab
         color='inherit'
         id='account'
-        aria-label={i18n._(/* i18n */ `Account`)}
+        aria-label={i18n._(/* i18n */ 'Account')}
         size='large'
         className={classes.root}
         {...FabProps}

package/components/EditAddressForm/EditAddressForm.tsx

@@ -92,7 +92,7 @@ export function EditAddressForm(props: EditAddressFormProps) {
             label={<Trans id='Telephone' />}
             {...muiRegister('telephone', {
               required: required.telephone,
-              pattern: { value: phonePattern, message: i18n._(/* i18n */ `Invalid phone number`) },
+              pattern: { value: phonePattern, message: i18n._(/* i18n */ 'Invalid phone number') },
             })}
             helperText={formState.isSubmitted && formState.errors.telephone?.message}
             disabled={formState.isSubmitting}

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -44,7 +44,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
           required={required.email}
           {...muiRegister('email', {
             required: required.email,
-            pattern: { value: emailPattern, message: i18n._(/* i18n */ `Invalid email address`) },
+            pattern: { value: emailPattern, message: i18n._(/* i18n */ 'Invalid email address') },
           })}
           helperText={formState.errors.email?.message}
           disabled={formState.isSubmitting}

package/components/NameFields/NameFields.tsx

@@ -20,9 +20,9 @@ type NameFieldProps = {
 }
 
 export function NameFields(props: NameFieldProps) {
-  const mr = i18n._(/* i18n */ `Mr`)
-  const mrs = i18n._(/* i18n */ `Mrs`)
-  const other = i18n._(/* i18n */ `Other`)
+  const mr = i18n._(/* i18n */ 'Mr')
+  const mrs = i18n._(/* i18n */ 'Mrs')
+  const other = i18n._(/* i18n */ 'Other')
 
   const { prefix, form, readOnly, prefixes = [mr, mrs, other] } = props
   assertFormGqlOperation<NameFieldValues>(form)

package/components/SignUpForm/SignUpForm.tsx

@@ -62,7 +62,7 @@ export function SignUpForm(props: SignUpFormProps) {
             required: required.password,
             minLength: {
               value: Number(storeConfig?.minimum_password_length ?? 8),
-              message: i18n._(/* i18n */ `Password must have at least 8 characters`),
+              message: i18n._(/* i18n */ 'Password must have at least 8 characters'),
             },
           })}
           helperText={formState.errors.password?.message || inputError?.message}
@@ -78,7 +78,7 @@ export function SignUpForm(props: SignUpFormProps) {
           {...muiRegister('confirmPassword', {
             required: true,
             validate: (value) =>
-              value === watchPassword || i18n._(/* i18n */ `Passwords don't match`),
+              value === watchPassword || i18n._(/* i18n */ "Passwords don't match"),
           })}
           helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}

package/components/SignUpForm/SignUpFormInline.tsx

@@ -67,7 +67,7 @@ export function SignUpFormInline({
             required: required.password,
             minLength: {
               value: minPasswordLength,
-              message: i18n._(/* i18n */ `Password must have at least 8 characters`),
+              message: i18n._(/* i18n */ 'Password must have at least 8 characters'),
             },
           })}
           helperText={error?.message}

package/components/UpdateCustomerEmailForm/UpdateCustomerEmailForm.tsx

@@ -90,7 +90,7 @@ export function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
           required
           {...muiRegister('confirmEmail', {
             required: true,
-            validate: (value) => value === watchNewEmail || i18n._(/* i18n */ `Emails don't match`),
+            validate: (value) => value === watchNewEmail || i18n._(/* i18n */ "Emails don't match"),
           })}
         />
       </FormRow>

package/hooks/useCustomerQuery.ts

@@ -1,11 +1,36 @@
-import { useQuery, TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
+import {
+  useQuery,
+  TypedDocumentNode,
+  QueryHookOptions,
+  QueryResult,
+  ApolloError,
+} from '@graphcommerce/graphql'
+import { GraphQLError } from 'graphql'
 import { useCustomerSession } from './useCustomerSession'
 
+const notLoggedInError = new ApolloError({
+  graphQLErrors: [
+    new GraphQLError('Not authorized', {
+      extensions: { category: 'graphql-authorization' },
+    }),
+  ],
+})
+
 /** Will only execute when the customer is signed in. */
 export function useCustomerQuery<Q, V>(
   document: TypedDocumentNode<Q, V>,
   queryOptions: QueryHookOptions<Q, V> = {},
-) {
-  const { loggedIn } = useCustomerSession()
-  return useQuery(document, { ...queryOptions, ssr: false, skip: !loggedIn })
+): QueryResult<Q, V> {
+  const { loggedIn, called } = useCustomerSession()
+
+  const result = useQuery(document, {
+    ...queryOptions,
+    ssr: false,
+    skip: !loggedIn,
+  })
+
+  return {
+    ...result,
+    error: called && !loggedIn ? notLoggedInError : result.error,
+  }
 }

package/hooks/useCustomerSession.ts

@@ -1,19 +1,35 @@
+import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
 import { useQuery } from '@graphcommerce/graphql'
+import { useState } from 'react'
 import { CustomerTokenDocument, CustomerTokenQuery } from './CustomerToken.gql'
 
-type TokenResponse = Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'>
+type TokenResponse = Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'> & {
+  called: boolean
+}
 
 export type UseCustomerSessionReturn =
   | Partial<TokenResponse> & { loggedIn: boolean; requireAuth: boolean }
 
 export function useCustomerSession(): UseCustomerSessionReturn {
-  const token = useQuery(CustomerTokenDocument, { ssr: false, fetchPolicy: 'cache-only' }).data
-    ?.customerToken
+  const [skip, setSkip] = useState(true)
+
+  const { called, data } = useQuery(CustomerTokenDocument, {
+    ssr: false,
+    fetchPolicy: 'cache-only',
+    skip,
+  })
+
+  const token = data?.customerToken
+
+  useIsomorphicLayoutEffect(() => {
+    if (skip) setSkip(false)
+  }, [skip])
 
-  if (!token) return { loggedIn: false, requireAuth: true }
+  if (!token) return { called, loggedIn: false, requireAuth: true }
 
   return {
     ...token,
+    called,
     loggedIn: Boolean(token?.token && token.valid),
     requireAuth: Boolean(!token || !token.valid),
   }

package/link/createCustomerTokenLink.ts

@@ -6,7 +6,7 @@ import {
   setContext,
 } from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from '../hooks'
-import { onAuthenticationError } from './onAuthenticationError'
+import { onAuthorizationError } from './onAuthenticationError'
 
 export const addTokenHeader = setContext((_, context: ClientContext) => {
   if (!context.headers) context.headers = {}
@@ -22,7 +22,7 @@ export const addTokenHeader = setContext((_, context: ClientContext) => {
   }
 })
 
-export const customerTokenLink = ApolloLink.from([addTokenHeader, onAuthenticationError])
+export const customerTokenLink = ApolloLink.from([addTokenHeader, onAuthorizationError])
 
 /** Not really required anymore, you can use customerTokenLink directly */
 export const createCustomerTokenLink = (_: ApolloCache<NormalizedCacheObject>) => customerTokenLink

package/link/onAuthenticationError.ts

@@ -22,14 +22,14 @@ function invalidateToken(cache: InMemoryCache) {
   }
 }
 
-export const onAuthenticationError = onError(({ graphQLErrors, operation }) => {
+export const onAuthorizationError = onError(({ graphQLErrors, operation }) => {
   const { cache } = operation.getContext()
   if (graphQLErrors) {
     for (const err of graphQLErrors) {
       if (err.extensions?.category === 'graphql-authorization') {
         // Modify the operation context with a new token
         invalidateToken(cache as InMemoryCache)
-        break;
+        break
       }
     }
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.6.2",
+  "version": "4.7.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,14 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.0.22",
-    "@graphcommerce/graphql": "3.3.0",
+    "@graphcommerce/ecommerce-ui": "1.1.1",
+    "@graphcommerce/framer-utils": "3.1.4",
+    "@graphcommerce/graphql": "3.4.0",
     "@graphcommerce/graphql-mesh": "4.1.4",
     "@graphcommerce/image": "3.1.7",
-    "@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-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",
@@ -35,6 +36,7 @@
     "framer-motion": "^6.2.4",
     "next": "^12.1.2",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "graphql": "16.5.0"
   }
 }