@graphcommerce/magento-customer 4.3.2 → 4.4.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## 4.4.2
+
+### Patch Changes
+
+- Updated dependencies [[`858a3b3a3`](https://github.com/graphcommerce-org/graphcommerce/commit/858a3b3a3601cd00491219daf45557c2f1cc804b)]:
+  - @graphcommerce/react-hook-form@3.2.0
+  - @graphcommerce/ecommerce-ui@1.0.16
+
+## 4.4.1
+
+### Patch Changes
+
+- [#1487](https://github.com/graphcommerce-org/graphcommerce/pull/1487) [`238aa4d34`](https://github.com/graphcommerce-org/graphcommerce/commit/238aa4d3478773b8cb0973f4112c9829e59e16d6) Thanks [@paales](https://github.com/paales)! - When @injecting mandatory fields into the CustomerTokenFragment it would throw a typescript error.
+
+- Updated dependencies [[`afc67103d`](https://github.com/graphcommerce-org/graphcommerce/commit/afc67103d0e00583e274465036fd287537f95e79)]:
+  - @graphcommerce/next-ui@4.8.3
+  - @graphcommerce/ecommerce-ui@1.0.15
+  - @graphcommerce/magento-store@4.2.7
+
+## 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

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/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,12 @@
 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 & {
-      loggedIn: boolean
-      requireAuth: boolean
-    })
-  | (Partial<CustomerTokenFragment> & { loggedIn: false; requireAuth: true })
+type TokenResponse = Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'>
 
-export function useCustomerSession(): UseCustomerTokenReturn {
+export type UseCustomerSessionReturn =
+  | Partial<TokenResponse> & { loggedIn: boolean; requireAuth: boolean }
+
+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,32 +12,31 @@ 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(
     IsEmailAvailableDocument,
     { mode: 'onChange', defaultValues: { email: email ?? '' } },
-    { fetchPolicy: 'cache-and-network' },
+    // { fetchPolicy: 'cache-and-network' },
   )
   const { formState, data, handleSubmit } = form
 
   const submit = handleSubmit(onSubmitted || (() => {}))
-  const autoSubmitting = useFormAutoSubmit({ form, submit })
+  const autoSubmitting = useFormAutoSubmit({ form, submit, forceInitialSubmit: true })
 
   const hasAccount = data?.isEmailAvailable?.is_email_available === false
-  const { isDirty, isSubmitSuccessful, isSubmitted, isSubmitting, isValid } = formState
 
-  const isLoggedIn = token?.customerToken && token?.customerToken.valid
+  const { isDirty, isSubmitSuccessful, isSubmitted, isSubmitting, isValid } = formState
 
   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 +45,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.2",
+  "version": "4.4.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,14 +18,14 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.0.13",
+    "@graphcommerce/ecommerce-ui": "1.0.16",
     "@graphcommerce/graphql": "3.1.3",
     "@graphcommerce/graphql-mesh": "4.1.3",
     "@graphcommerce/image": "3.1.6",
     "@graphcommerce/magento-graphql": "3.0.12",
-    "@graphcommerce/magento-store": "4.2.5",
-    "@graphcommerce/next-ui": "4.8.1",
-    "@graphcommerce/react-hook-form": "3.1.3"
+    "@graphcommerce/magento-store": "4.2.7",
+    "@graphcommerce/next-ui": "4.8.3",
+    "@graphcommerce/react-hook-form": "3.2.0"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",