@graphcommerce/magento-customer 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 4.4.0
+
+### Minor Changes
+
+- [#1485](https://github.com/graphcommerce-org/graphcommerce/pull/1485) [`d6262de71`](https://github.com/graphcommerce-org/graphcommerce/commit/d6262de71d2254a2b0b492e1a60f9e141767470e) Thanks [@paales](https://github.com/paales)! - move to useCustomerSession instead of using the tokenquery directly and fix ssr issues
+
+### Patch Changes
+
+- Updated dependencies [[`c8c246b8a`](https://github.com/graphcommerce-org/graphcommerce/commit/c8c246b8aaab0621b68a2fca2a1c529a56fad962)]:
+  - @graphcommerce/next-ui@4.8.2
+  - @graphcommerce/ecommerce-ui@1.0.14
+  - @graphcommerce/magento-store@4.2.6
+
+## 4.3.2
+
+### Patch Changes
+
+- Updated dependencies [[`a9df81310`](https://github.com/graphcommerce-org/graphcommerce/commit/a9df81310c051876dd82fb2819105dece47cc213), [`f167f9963`](https://github.com/graphcommerce-org/graphcommerce/commit/f167f99630966a7de43717937d43669e66132494)]:
+  - @graphcommerce/next-ui@4.8.1
+  - @graphcommerce/ecommerce-ui@1.0.13
+  - @graphcommerce/magento-store@4.2.5
+  - @graphcommerce/image@3.1.6
+
+## 4.3.1
+
+### Patch Changes
+
+- [#1476](https://github.com/graphcommerce-org/graphcommerce/pull/1476) [`a12db31b9`](https://github.com/graphcommerce-org/graphcommerce/commit/a12db31b9db9d27d86f59c1bfe58a0879999b9d3) Thanks [@paales](https://github.com/paales)! - make sure the SignUp and SignIn forms can handle changes to the email field
+
 ## 4.3.0
 
 ### Minor Changes

package/components/CustomerFab/CustomerFab.tsx

@@ -1,4 +1,3 @@
-import { useQuery } from '@graphcommerce/graphql'
 import {
   iconPerson,
   DesktopHeaderBadge,
@@ -9,14 +8,15 @@ import { i18n } from '@lingui/core'
 import { Fab, FabProps as FabPropsType, NoSsr, SxProps, Theme } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
-import { CustomerTokenDocument, CustomerTokenQuery, useCustomerSession } from '../../hooks'
+import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks'
 
-type CustomerFabContentProps = CustomerTokenQuery & {
+type CustomerFabContentProps = {
   icon?: React.ReactNode
   authHref: string
   guestHref: string
   FabProps?: Omit<FabPropsType, 'children'>
   sx?: SxProps<Theme>
+  session?: UseCustomerSessionReturn
 }
 
 const name = 'CustomerFab'
@@ -24,11 +24,10 @@ const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 
 function CustomerFabContent(props: CustomerFabContentProps) {
-  const { customerToken, icon, guestHref, authHref, FabProps, sx } = props
-  const { requireAuth } = useCustomerSession()
+  const { session, icon, guestHref, authHref, FabProps, sx } = props
 
   return (
-    <PageLink href={requireAuth ? guestHref : authHref} passHref>
+    <PageLink href={session?.requireAuth ? guestHref : authHref} passHref>
       <Fab
         color='inherit'
         id='account'
@@ -39,8 +38,8 @@ function CustomerFabContent(props: CustomerFabContentProps) {
         sx={sx}
       >
         <DesktopHeaderBadge
-          badgeContent={customerToken?.token ? 1 : 0}
-          color={customerToken?.valid ? 'primary' : 'error'}
+          badgeContent={session?.token ? 1 : 0}
+          color={session?.valid ? 'primary' : 'error'}
           variant='dot'
           overlap='circular'
         >
@@ -51,12 +50,14 @@ function CustomerFabContent(props: CustomerFabContentProps) {
   )
 }
 
-export function CustomerFab(props: CustomerFabContentProps) {
-  const { data } = useQuery(CustomerTokenDocument)
+export type CustomerFabProps = Omit<CustomerFabContentProps, 'session'>
+
+export function CustomerFab(props: CustomerFabProps) {
+  const session = useCustomerSession()
 
   return (
     <NoSsr fallback={<CustomerFabContent {...props} />}>
-      <CustomerFabContent customerToken={data?.customerToken} {...props} />
+      <CustomerFabContent session={session} {...props} />
     </NoSsr>
   )
 }

package/components/CustomerMenuFabItem/CustomerMenuFabItem.tsx

@@ -1,35 +1,34 @@
-import { useQuery } from '@graphcommerce/graphql'
 import { MenuFabSecondaryItem, iconPerson, IconSvg } from '@graphcommerce/next-ui'
 import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { CustomerTokenDocument, CustomerTokenQuery } from '../../hooks'
+import { useCustomerSession, UseCustomerSessionReturn } from '../../hooks/useCustomerSession'
 
-type CustomerMenuFabItemProps = CustomerTokenQuery & {
+type CustomerMenuFabItemProps = {
   icon?: React.ReactNode
   children: React.ReactNode
   authHref: string
   guestHref: string
   sx?: SxProps<Theme>
+  session?: UseCustomerSessionReturn
 }
 
 function CustomerMenuFabItemContent(props: CustomerMenuFabItemProps) {
-  const { customerToken, icon, children, guestHref, authHref, sx = [] } = props
-  const requireAuth = Boolean(!customerToken || !customerToken.valid)
+  const { session, icon, children, guestHref, authHref, sx = [] } = props
 
   return (
     <MenuFabSecondaryItem
       sx={sx}
       icon={
         <Badge
-          badgeContent={customerToken?.token ? 1 : 0}
-          color={customerToken?.valid ? 'primary' : 'error'}
+          badgeContent={session?.token ? 1 : 0}
+          color={session?.valid ? 'primary' : 'error'}
           variant='dot'
           overlap='circular'
         >
           {icon ?? <IconSvg src={iconPerson} size='medium' />}
         </Badge>
       }
-      href={requireAuth ? guestHref : authHref}
+      href={session?.requireAuth ? guestHref : authHref}
     >
       {children}
     </MenuFabSecondaryItem>
@@ -37,11 +36,11 @@ function CustomerMenuFabItemContent(props: CustomerMenuFabItemProps) {
 }
 
 export function CustomerMenuFabItem(props: CustomerMenuFabItemProps) {
-  const { data } = useQuery(CustomerTokenDocument)
+  const session = useCustomerSession()
 
   return (
     <NoSsr fallback={<CustomerMenuFabItemContent {...props} />}>
-      <CustomerMenuFabItemContent customerToken={data?.customerToken} {...props} />
+      <CustomerMenuFabItemContent session={session} {...props} />
     </NoSsr>
   )
 }

package/components/SignInForm/SignInForm.tsx

@@ -13,13 +13,7 @@ export function SignInForm(props: SignInFormProps) {
   const { email, sx } = props
   const form = useFormGqlMutation(
     SignInDocument,
-    {
-      defaultValues: { email },
-      onBeforeSubmit: (values) => ({
-        ...values,
-        email,
-      }),
-    },
+    { defaultValues: { email }, onBeforeSubmit: (values) => ({ ...values, email }) },
     { errorPolicy: 'all' },
   )
 

package/components/SignInForm/SignInFormInline.tsx

@@ -14,7 +14,7 @@ export function SignInFormInline(props: PropsWithChildren<InlineSignInFormProps>
   const { email, sx = [] } = props
   const form = useFormGqlMutation(
     SignInDocument,
-    { defaultValues: { email } },
+    { defaultValues: { email }, onBeforeSubmit: (values) => ({ ...values, email }) },
     { errorPolicy: 'all' },
   )
   const { muiRegister, handleSubmit, required, formState, error } = form

package/components/SignUpForm/SignUpForm.tsx

@@ -25,7 +25,11 @@ export function SignUpForm(props: SignUpFormProps) {
   const form = useFormGqlMutation<
     SignUpMutation,
     SignUpMutationVariables & { confirmPassword?: string }
-  >(Mutation, { defaultValues: { email } }, { errorPolicy: 'all' })
+  >(
+    Mutation,
+    { defaultValues: { email }, onBeforeSubmit: (values) => ({ ...values, email }) },
+    { errorPolicy: 'all' },
+  )
 
   const { muiRegister, handleSubmit, required, watch, formState, error } = form
   const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })

package/components/SignUpForm/SignUpFormInline.tsx

@@ -40,7 +40,9 @@ export function SignUpFormInline({
       firstname: firstname ?? '-',
       lastname: lastname ?? '-',
     },
+    onBeforeSubmit: (values) => ({ ...values, email }),
   })
+
   const { muiRegister, watch, handleSubmit, required, formState, error } = form
   const submitHandler = handleSubmit(onSubmitted)
   const watchPassword = watch('password')

package/hooks/index.ts

@@ -2,7 +2,8 @@ export * from './Customer.gql'
 export * from './CustomerInfo.gql'
 export * from './CustomerToken.gql'
 export * from './IsEmailAvailable.gql'
-export * from './useExtractCustomerErrors'
-export * from './useFormIsEmailAvailable'
 export * from './useCustomerQuery'
 export * from './useCustomerSession'
+export * from './useExtractCustomerErrors'
+export * from './useFormIsEmailAvailable'
+export * from './useGuestQuery'

package/hooks/useCustomerSession.ts

@@ -1,15 +1,15 @@
 import { useQuery } from '@graphcommerce/graphql'
-import { CustomerTokenDocument } from './CustomerToken.gql'
-import { CustomerTokenFragment } from './CustomerTokenFragment.gql'
+import { CustomerTokenDocument, CustomerTokenQuery } from './CustomerToken.gql'
 
-export type UseCustomerTokenReturn =
-  | (CustomerTokenFragment & {
+type TokenResponse = Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'>
+
+export type UseCustomerSessionReturn =
+  | TokenResponse & {
       loggedIn: boolean
       requireAuth: boolean
-    })
-  | (Partial<CustomerTokenFragment> & { loggedIn: false; requireAuth: true })
+    }
 
-export function useCustomerSession(): UseCustomerTokenReturn {
+export function useCustomerSession(): UseCustomerSessionReturn {
   const token = useQuery(CustomerTokenDocument, { ssr: false, fetchPolicy: 'cache-only' }).data
     ?.customerToken
 

package/hooks/useFormIsEmailAvailable.tsx

@@ -1,10 +1,9 @@
-import { useQuery } from '@graphcommerce/graphql'
 import { useFormAutoSubmit, useFormGqlQuery, useFormPersist } from '@graphcommerce/react-hook-form'
 import { useEffect, useState } from 'react'
 import { CustomerDocument } from './Customer.gql'
-import { CustomerTokenDocument } from './CustomerToken.gql'
 import { IsEmailAvailableDocument } from './IsEmailAvailable.gql'
 import { useCustomerQuery } from './useCustomerQuery'
+import { useCustomerSession } from './useCustomerSession'
 
 export type UseFormIsEmailAvailableProps = {
   email?: string | null
@@ -13,7 +12,7 @@ export type UseFormIsEmailAvailableProps = {
 
 export function useFormIsEmailAvailable(props: UseFormIsEmailAvailableProps) {
   const { email, onSubmitted } = props
-  const { data: token } = useQuery(CustomerTokenDocument)
+  const { loggedIn, requireAuth } = useCustomerSession()
   const customerQuery = useCustomerQuery(CustomerDocument)
 
   const form = useFormGqlQuery(
@@ -29,16 +28,14 @@ export function useFormIsEmailAvailable(props: UseFormIsEmailAvailableProps) {
   const hasAccount = data?.isEmailAvailable?.is_email_available === false
   const { isDirty, isSubmitSuccessful, isSubmitted, isSubmitting, isValid } = formState
 
-  const isLoggedIn = token?.customerToken && token?.customerToken.valid
-
   const [mode, setMode] = useState<'email' | 'signin' | 'signup' | 'signedin' | 'session-expired'>(
-    token?.customerToken && token?.customerToken.valid ? 'signedin' : 'email',
+    loggedIn ? 'signedin' : 'email',
   )
 
   useFormPersist({ form, name: 'IsEmailAvailable' })
 
   useEffect(() => {
-    if (isLoggedIn) {
+    if (loggedIn) {
       setMode('signedin')
       return
     }
@@ -47,19 +44,19 @@ export function useFormIsEmailAvailable(props: UseFormIsEmailAvailableProps) {
     if (!isDirty && isSubmitted && isSubmitSuccessful && isValid)
       setMode(hasAccount ? 'signin' : 'signup')
 
-    if (customerQuery.data?.customer && token && token.customerToken && !token.customerToken.valid)
+    if (customerQuery.data?.customer && requireAuth)
       setMode(isSubmitSuccessful ? 'signin' : 'session-expired')
   }, [
     customerQuery.data?.customer,
     hasAccount,
     isDirty,
-    isLoggedIn,
     isSubmitSuccessful,
     isSubmitted,
     isSubmitting,
     isValid,
-    token,
+    loggedIn,
+    requireAuth,
   ])
 
-  return { mode, form, token, submit, autoSubmitting, hasAccount }
+  return { mode, form, submit, autoSubmitting, hasAccount }
 }

package/hooks/useGuestQuery.ts

@@ -0,0 +1,11 @@
+import { useQuery, TypedDocumentNode, QueryHookOptions } from '@graphcommerce/graphql'
+import { useCustomerSession } from './useCustomerSession'
+
+/** Will only execute when the customer is not signed in. */
+export function useGuestQuery<Q, V>(
+  document: TypedDocumentNode<Q, V>,
+  queryOptions: QueryHookOptions<Q, V> = {},
+) {
+  const { token } = useCustomerSession()
+  return useQuery(document, { ...queryOptions, ssr: false, skip: !!token })
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,13 +18,13 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.0.12",
+    "@graphcommerce/ecommerce-ui": "1.0.14",
     "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/graphql-mesh": "4.1.3",
-    "@graphcommerce/image": "3.1.5",
+    "@graphcommerce/image": "3.1.6",
     "@graphcommerce/magento-graphql": "3.0.12",
-    "@graphcommerce/magento-store": "4.2.4",
-    "@graphcommerce/next-ui": "4.8.0",
+    "@graphcommerce/magento-store": "4.2.6",
+    "@graphcommerce/next-ui": "4.8.2",
     "@graphcommerce/react-hook-form": "3.1.3"
   },
   "peerDependencies": {