@graphcommerce/magento-customer 4.11.6 → 4.12.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Change Log
 
+## 4.12.0
+
+### Minor Changes
+
+- [#1670](https://github.com/graphcommerce-org/graphcommerce/pull/1670) [`8a34f8081`](https://github.com/graphcommerce-org/graphcommerce/commit/8a34f808186274a6fe1d4f309472f1a9c6d00efd) Thanks [@Jessevdpoel](https://github.com/Jessevdpoel)! - Added cache resetting when token expires and logging in with a different account than cached.
+
+### Patch Changes
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6) Thanks [@paales](https://github.com/paales)! - Added crosssel functionality
+
+- Updated dependencies [[`9e630670f`](https://github.com/graphcommerce-org/graphcommerce/commit/9e630670ff6c952ab7b938d890b5509804985cf3), [`cf3518499`](https://github.com/graphcommerce-org/graphcommerce/commit/cf351849999ad6fe73ce2bb258098a7dd301d517), [`2e9fa5984`](https://github.com/graphcommerce-org/graphcommerce/commit/2e9fa5984a07ff14fc1b3a4f62189a26e8e3ecdd), [`adf13069a`](https://github.com/graphcommerce-org/graphcommerce/commit/adf13069af6460c960276b402237371c12fc6dec), [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6), [`8a34f8081`](https://github.com/graphcommerce-org/graphcommerce/commit/8a34f808186274a6fe1d4f309472f1a9c6d00efd), [`6c2e27b1b`](https://github.com/graphcommerce-org/graphcommerce/commit/6c2e27b1be4aaa888e65a2bd69eaeb467a54a023), [`3dde492ad`](https://github.com/graphcommerce-org/graphcommerce/commit/3dde492ad3a49d96481eeb7453fb305d0017b1a5)]:
+  - @graphcommerce/next-ui@4.28.1
+  - @graphcommerce/graphql@3.5.0
+  - @graphcommerce/framer-utils@3.2.1
+  - @graphcommerce/ecommerce-ui@1.5.4
+  - @graphcommerce/magento-store@4.3.2
+  - @graphcommerce/magento-graphql@3.1.9
+  - @graphcommerce/image@3.1.10
+
+## 4.11.7
+
+### Patch Changes
+
+- Updated dependencies [[`1f2e14ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/1f2e14ba8b674b87257a123e8cb215157890eb22), [`fc32b9ab3`](https://github.com/graphcommerce-org/graphcommerce/commit/fc32b9ab3818eb99c546a89e7f42045a6fbfba81)]:
+  - @graphcommerce/react-hook-form@3.3.5
+  - @graphcommerce/ecommerce-ui@1.5.3
+
 ## 4.11.6
 
 ### Patch Changes

package/components/SessionDebugger/SessionDebugger.tsx

@@ -0,0 +1,38 @@
+import { useApolloClient } from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from '@graphcommerce/magento-customer'
+import { Button } from '@mui/material'
+
+export function SessionDebugger() {
+  const client = useApolloClient()
+
+  return (
+    <div style={{ position: 'fixed', bottom: 0, right: 0, zIndex: 1, opacity: 0.3 }}>
+      <Button
+        type='button'
+        variant='text'
+        size='small'
+        onClick={() => {
+          const currentToken = client.readQuery({ query: CustomerTokenDocument })
+          if (!currentToken?.customerToken?.token) {
+            console.log('No customerToken available, nothing to break')
+          } else {
+            console.log(`Changing current token to a random one)`)
+
+            client.writeQuery({
+              query: CustomerTokenDocument,
+              data: {
+                customerToken: {
+                  ...currentToken?.customerToken,
+                  valid: false,
+                },
+              },
+              broadcast: true,
+            })
+          }
+        }}
+      >
+        break magento token
+      </Button>
+    </div>
+  )
+}

package/components/SignInForm/SignInForm.tsx

@@ -1,9 +1,11 @@
+import { useApolloClient } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { Button, FormRow, FormActions } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
 import { Box, FormControl, Link, SxProps, TextField, Theme } from '@mui/material'
 import PageLink from 'next/link'
+import { CustomerDocument } from '../../hooks'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignInDocument } from './SignIn.gql'
 
@@ -11,9 +13,20 @@ type SignInFormProps = { email: string; sx?: SxProps<Theme> }
 
 export function SignInForm(props: SignInFormProps) {
   const { email, sx } = props
+
+  const client = useApolloClient()
   const form = useFormGqlMutation(
     SignInDocument,
-    { defaultValues: { email }, onBeforeSubmit: (values) => ({ ...values, email }) },
+    {
+      defaultValues: { email },
+      onBeforeSubmit: async (values) => {
+        const oldEmail = client.cache.readQuery({ query: CustomerDocument })
+        if (oldEmail?.customer?.email !== email) {
+          await client.resetStore()
+        }
+        return { ...values, email }
+      },
+    },
     { errorPolicy: 'all' },
   )
 

package/components/SignOutForm/SignOutForm.tsx

@@ -19,8 +19,7 @@ export function SignOutForm(props: SignOutFormProps) {
     {
       onComplete: async () => {
         await client.clearStore()
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        router.push('/')
+        await router.push('/')
       },
     },
     { errorPolicy: 'all' },

package/components/WaitForCustomer/WaitForCustomer.tsx

@@ -41,7 +41,9 @@ export function WaitForCustomer(props: WaitForCustomerProps) {
 
   const session = useCustomerSession()
   const queries = Array.isArray(waitFor) ? waitFor : [waitFor]
-  const error = mergeErrors(queries.map((query) => query.error).filter(nonNullable))
+  const error = mergeErrors(
+    queries.map((query) => (typeof query === 'boolean' ? null : query.error)).filter(nonNullable),
+  )
 
   return (
     <WaitForQueries

package/hooks/useCustomerSession.ts

@@ -16,13 +16,28 @@ export type UseCustomerSessionReturn =
       query: QueryResult<CustomerTokenQuery, CustomerTokenQueryVariables>
     } & Partial<Omit<NonNullable<CustomerTokenQuery['customerToken']>, '__typename'>>
 
-export function useCustomerSession(
-  options: UseCustomerSessionOptions = {},
-): UseCustomerSessionReturn {
+export function useCustomerSession(options: UseCustomerSessionOptions = {}) {
+  /**
+   * We current always assume the initial render is during hydration.
+   *
+   * How can we determine we're not actually hydrating? Classically you could just use some global
+   * state to track this because when the initial render is done, we're not hydrating anymore.
+   *
+   * However, <Suspense/> can be used to defer the rendering to a later moment. This means that the
+   * useCustomerSession hook is called later and we're still in the hydration phase for this
+   * component while other components are rendering for the second time.
+   */
   const { hydration = false } = options
   const [hydrating, setHydrating] = useState(!hydration)
 
-  useIsomorphicLayoutEffect(() => startTransition(() => setHydrating(false)), [])
+  /**
+   * After the initital render we are definitely sure we're not hydrating anymore so we can flip the
+   * switch and rerender.
+   */
+  useIsomorphicLayoutEffect(() => {
+    if (!hydrating) return
+    startTransition(() => setHydrating(false))
+  }, [hydrating])
 
   const skip = hydrating
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.11.6",
+  "version": "4.12.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,15 +19,15 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "1.5.2",
-    "@graphcommerce/framer-utils": "3.2.0",
-    "@graphcommerce/graphql": "3.4.8",
+    "@graphcommerce/ecommerce-ui": "1.5.4",
+    "@graphcommerce/framer-utils": "3.2.1",
+    "@graphcommerce/graphql": "3.5.0",
     "@graphcommerce/graphql-mesh": "4.2.0",
-    "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/magento-graphql": "3.1.8",
-    "@graphcommerce/magento-store": "4.3.1",
-    "@graphcommerce/next-ui": "4.28.0",
-    "@graphcommerce/react-hook-form": "3.3.4"
+    "@graphcommerce/image": "3.1.10",
+    "@graphcommerce/magento-graphql": "3.1.9",
+    "@graphcommerce/magento-store": "4.3.2",
+    "@graphcommerce/next-ui": "4.28.1",
+    "@graphcommerce/react-hook-form": "3.3.5"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",