@graphcommerce/magento-customer 4.8.3 → 4.9.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # Change Log
 
+## 4.9.0
+
+### Minor Changes
+
+- [#1572](https://github.com/graphcommerce-org/graphcommerce/pull/1572) [`8e3b24500`](https://github.com/graphcommerce-org/graphcommerce/commit/8e3b24500a55fa2a1fb4a3ef08c1f1990a46a0ae) Thanks [@paales](https://github.com/paales)! - Added an WaitForCustomer component to allow for easy wrapping of pages and handle loading of queries, handle errors and make sure the customer is logged in.
+
+### Patch Changes
+
+- [#1572](https://github.com/graphcommerce-org/graphcommerce/pull/1572) [`3c809a3a4`](https://github.com/graphcommerce-org/graphcommerce/commit/3c809a3a438995503f6d2290d6c0bb90fbc489be) Thanks [@paales](https://github.com/paales)! - Make sure the useCustomerSession returns the full query so it can be awaited
+
+* [#1572](https://github.com/graphcommerce-org/graphcommerce/pull/1572) [`2c66cca15`](https://github.com/graphcommerce-org/graphcommerce/commit/2c66cca154098a09445977428983e05fe19b9510) Thanks [@paales](https://github.com/paales)! - useGuestQuery also should accept the hydration prop to allow it to return earlier
+
+- [#1572](https://github.com/graphcommerce-org/graphcommerce/pull/1572) [`2c66cca15`](https://github.com/graphcommerce-org/graphcommerce/commit/2c66cca154098a09445977428983e05fe19b9510) Thanks [@paales](https://github.com/paales)! - useFormIsEmailAvailable now always checks if the email is available to prevent issues with it returning the wrong value.
+
+* [#1572](https://github.com/graphcommerce-org/graphcommerce/pull/1572) [`2c66cca15`](https://github.com/graphcommerce-org/graphcommerce/commit/2c66cca154098a09445977428983e05fe19b9510) Thanks [@paales](https://github.com/paales)! - When an authentication error occurs, remove the invalid token from the storage.
+
+* Updated dependencies [[`02023d8d8`](https://github.com/graphcommerce-org/graphcommerce/commit/02023d8d89c8138144243edce67290bd79ff49a7), [`87a188d6f`](https://github.com/graphcommerce-org/graphcommerce/commit/87a188d6f216b7f7b9ec95afbe74f1146cb07ce4), [`199dc8599`](https://github.com/graphcommerce-org/graphcommerce/commit/199dc859989c376281243b59a59addc35138f119), [`1eb131766`](https://github.com/graphcommerce-org/graphcommerce/commit/1eb131766c32db6fcb0a8e83dba2c3d241658595)]:
+  - @graphcommerce/react-hook-form@3.3.2
+  - @graphcommerce/next-ui@4.16.0
+  - @graphcommerce/ecommerce-ui@1.1.7
+  - @graphcommerce/magento-store@4.2.22
+
 ## 4.8.3
 
 ### Patch Changes

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -0,0 +1,76 @@
+import { mergeErrors, WaitForQueries, WaitForQueriesProps } from '@graphcommerce/ecommerce-ui'
+import { FullPageMessage, IconSvg, iconPerson } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Button, CircularProgress } from '@mui/material'
+import PageLink from 'next/link'
+import { useCustomerSession } from '../../hooks/useCustomerSession'
+import { ApolloCustomerErrorFullPage } from '../ApolloCustomerError/ApolloCustomerErrorFullPage'
+
+type WaitForCustomerProps = Omit<WaitForQueriesProps, 'fallback' | 'waitFor'> & {
+  waitFor?: WaitForQueriesProps['waitFor']
+}
+
+export function nonNullable<T>(value: T): value is NonNullable<T> {
+  return value !== null && value !== undefined
+}
+
+/**
+ * A full page wrapper to render customer specific information.
+ *
+ * - Shows a loading spinner during: SSR, Hydration and Query Loading.
+ * - Will show a login message if the customer isn't logged in.
+ * - Will show an error message for any query that has that are passed.
+ * - Will show the contents if none of the above matches.
+ *
+ * ```tsx
+ * import { useQuery } from '@graphcommerce/graphql'
+ * import { WaitForCustomer } from '@graphcommerce/magento-customer'
+ *
+ * function MyComponent() {
+ *   const optionalAdditionalQuery = useQuery(MyQueryDocument)
+ *   return (
+ *     <WaitForCustomer waitFor={optionalAdditionalQuery}>
+ *       Customer logged in and {optionalAdditionalQuery.data.myField} data available
+ *     </WaitForCustomer>
+ *   )
+ * }
+ * ```
+ */
+export function WaitForCustomer(props: WaitForCustomerProps) {
+  const { waitFor = [], children } = props
+
+  const session = useCustomerSession()
+  const queries = Array.isArray(waitFor) ? waitFor : [waitFor]
+  const error = mergeErrors(queries.map((query) => query.error).filter(nonNullable))
+
+  return (
+    <WaitForQueries
+      waitFor={!session.loggedIn ? session.query : queries}
+      fallback={
+        <FullPageMessage icon={<CircularProgress />} title={<Trans id='Loading your data' />}>
+          <Trans id='This may take a second' />
+        </FullPageMessage>
+      }
+    >
+      {!session.loggedIn && (
+        <FullPageMessage
+          icon={<IconSvg src={iconPerson} size='xxl' />}
+          title={<Trans id='You must sign in to continue' />}
+          button={
+            <PageLink href='/account/signin' passHref>
+              <Button variant='contained' color='secondary' size='large'>
+                {!session.valid ? (
+                  <Trans id='Sign in' />
+                ) : (
+                  <Trans id='Sign in or create an account!' />
+                )}
+              </Button>
+            </PageLink>
+          }
+        />
+      )}
+      {session.loggedIn && error && <ApolloCustomerErrorFullPage error={error} />}
+      {session.loggedIn && !error && children}
+    </WaitForQueries>
+  )
+}

package/hooks/useCustomerQuery.ts

@@ -22,7 +22,7 @@ export function useCustomerQuery<Q, V>(
   options: QueryHookOptions<Q, V> & { hydration?: boolean } = {},
 ): QueryResult<Q, V> {
   const { hydration, ...queryOptions } = options
-  const { loggedIn, called } = useCustomerSession({ hydration })
+  const { loggedIn, query } = useCustomerSession({ hydration })
 
   const result = useQuery(document, {
     ...queryOptions,
@@ -32,6 +32,6 @@ export function useCustomerQuery<Q, V>(
 
   return {
     ...result,
-    error: called && !loggedIn ? notLoggedInError : result.error,
+    error: query.called && !loggedIn ? notLoggedInError : result.error,
   }
 }

package/hooks/useCustomerSession.ts

@@ -1,35 +1,39 @@
 import { useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
-import { useQuery } from '@graphcommerce/graphql'
+import { QueryResult, useQuery } from '@graphcommerce/graphql'
 import { startTransition, useState } from 'react'
-import { CustomerTokenDocument, CustomerTokenQuery } from './CustomerToken.gql'
+import {
+  CustomerTokenDocument,
+  CustomerTokenQuery,
+  CustomerTokenQueryVariables,
+} from './CustomerToken.gql'
 
 export type UseCustomerSessionOptions = { hydration?: boolean }
 
 export type UseCustomerSessionReturn =
-  | Partial<
-      Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'> & {
-        called: boolean
-      }
-    > & { loggedIn: boolean; requireAuth: boolean }
+  | {
+      loggedIn: boolean
+      requireAuth: boolean
+      query: QueryResult<CustomerTokenQuery, CustomerTokenQueryVariables>
+    } & Partial<Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'>>
 
 export function useCustomerSession(
   options: UseCustomerSessionOptions = {},
 ): UseCustomerSessionReturn {
-  const { hydration = false } = options
+  const { hydration = true } = options
   const [hydrating, setHydrating] = useState(!hydration)
+
   useIsomorphicLayoutEffect(() => startTransition(() => setHydrating(false)), [])
-  const skip = hydrating
 
-  const { called, data } = useQuery(CustomerTokenDocument, { skip })
+  const skip = hydrating
 
-  const token = data?.customerToken
+  const query = useQuery(CustomerTokenDocument, { skip })
 
-  if (!token) return { called, loggedIn: false, requireAuth: true }
+  const token = query.data?.customerToken
 
   return {
     ...token,
-    called,
     loggedIn: Boolean(token?.token && token.valid),
     requireAuth: Boolean(!token || !token.valid),
+    query,
   }
 }

package/hooks/useFormIsEmailAvailable.tsx

@@ -12,13 +12,13 @@ export type UseFormIsEmailAvailableProps = {
 
 export function useFormIsEmailAvailable(props: UseFormIsEmailAvailableProps) {
   const { email, onSubmitted } = props
-  const { loggedIn, requireAuth } = useCustomerSession()
+  const { loggedIn, requireAuth } = useCustomerSession({ hydration: false })
   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
 

package/hooks/useGuestQuery.ts

@@ -4,8 +4,8 @@ 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> = {},
+  queryOptions: QueryHookOptions<Q, V> & { hydration?: boolean } = {},
 ) {
-  const { token } = useCustomerSession()
+  const { token } = useCustomerSession({ hydration: queryOptions.hydration })
   return useQuery(document, { ...queryOptions, ssr: false, skip: !!token })
 }

package/link/onAuthenticationError.ts

@@ -13,6 +13,7 @@ function invalidateToken(cache: InMemoryCache) {
       data: {
         customerToken: {
           ...res.customerToken,
+          token: null,
           createdAt: new Date('2000').toUTCString(),
           valid: false,
         },

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.8.3",
+  "version": "4.9.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,15 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.1.6",
+    "@graphcommerce/ecommerce-ui": "1.1.7",
     "@graphcommerce/framer-utils": "3.1.4",
     "@graphcommerce/graphql": "3.4.3",
     "@graphcommerce/graphql-mesh": "4.1.6",
     "@graphcommerce/image": "3.1.7",
     "@graphcommerce/magento-graphql": "3.1.3",
-    "@graphcommerce/magento-store": "4.2.21",
-    "@graphcommerce/next-ui": "4.15.1",
-    "@graphcommerce/react-hook-form": "3.3.1"
+    "@graphcommerce/magento-store": "4.2.22",
+    "@graphcommerce/next-ui": "4.16.0",
+    "@graphcommerce/react-hook-form": "3.3.2"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",