@graphcommerce/magento-customer 4.2.11 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Change Log
 
+## 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
+
+- [#1463](https://github.com/graphcommerce-org/graphcommerce/pull/1463) [`7159d3ab3`](https://github.com/graphcommerce-org/graphcommerce/commit/7159d3ab31e937c9c921023c46e80db5813e789c) Thanks [@paales](https://github.com/paales)! - Make the CustomerToken injectable
+
+* [#1466](https://github.com/graphcommerce-org/graphcommerce/pull/1466) [`ed2b67a06`](https://github.com/graphcommerce-org/graphcommerce/commit/ed2b67a0618d9db97e79ed2a8226e0ae12403943) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Added a new useCustomerSession hook to allow for more fine grained control over loading data for customers.
+
+### Patch Changes
+
+- [#1466](https://github.com/graphcommerce-org/graphcommerce/pull/1466) [`00f6167ff`](https://github.com/graphcommerce-org/graphcommerce/commit/00f6167ff4096bf7432f3d8e8e739ecbf6ab0dd2) Thanks [@FrankHarland](https://github.com/FrankHarland)! - Signing in requested client fields which weren't available on the server
+
+* [#1465](https://github.com/graphcommerce-org/graphcommerce/pull/1465) [`32370574b`](https://github.com/graphcommerce-org/graphcommerce/commit/32370574bef6345b857ae911049ca27a64bc7e08) Thanks [@paales](https://github.com/paales)! - make sure the createCustomerV2 also marks the currenly registered email as known and also check the network if an email exists
+
+- [#1461](https://github.com/graphcommerce-org/graphcommerce/pull/1461) [`4c146c682`](https://github.com/graphcommerce-org/graphcommerce/commit/4c146c68242e6edc616807fb73173cc959c26034) Thanks [@mikekeehnen](https://github.com/mikekeehnen)! - User is now able to change their email after the email check. Before the submit, the emailaddress gets checked from the props
+
+- Updated dependencies [[`0363b9671`](https://github.com/graphcommerce-org/graphcommerce/commit/0363b9671db7c2932321d97faf6f1eb385238397), [`3ac90b57c`](https://github.com/graphcommerce-org/graphcommerce/commit/3ac90b57c68b96f9d81771d6664ed9435a28fc1d)]:
+  - @graphcommerce/next-ui@4.8.0
+  - @graphcommerce/ecommerce-ui@1.0.12
+  - @graphcommerce/magento-store@4.2.4
+
+## 4.2.12
+
+### Patch Changes
+
+- Updated dependencies [[`c30893857`](https://github.com/graphcommerce-org/graphcommerce/commit/c3089385791291e812a48c2691a39a2325ee0439)]:
+  - @graphcommerce/magento-store@4.2.3
+
 ## 4.2.11
 
 ### Patch Changes

package/components/CreateCustomerAddressForm/CustomerAddress.graphql

@@ -19,4 +19,5 @@ fragment CustomerAddress on CustomerAddress {
   telephone
 
   vat_id
+  default_shipping
 }

package/components/CustomerFab/CustomerFab.tsx

@@ -9,7 +9,7 @@ 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 } from '../../hooks'
+import { CustomerTokenDocument, CustomerTokenQuery, useCustomerSession } from '../../hooks'
 
 type CustomerFabContentProps = CustomerTokenQuery & {
   icon?: React.ReactNode
@@ -25,7 +25,7 @@ const { classes } = extendableComponent(name, parts)
 
 function CustomerFabContent(props: CustomerFabContentProps) {
   const { customerToken, icon, guestHref, authHref, FabProps, sx } = props
-  const requireAuth = Boolean(!customerToken || !customerToken.valid)
+  const { requireAuth } = useCustomerSession()
 
   return (
     <PageLink href={requireAuth ? guestHref : authHref} passHref>

package/components/EditAddressForm/EditAddressForm.tsx

@@ -1,3 +1,4 @@
+import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { useQuery } from '@graphcommerce/graphql'
 import { CountryRegionsDocument } from '@graphcommerce/magento-store'
 import {
@@ -19,12 +20,18 @@ import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerE
 import { NameFields } from '../NameFields/NameFields'
 import { UpdateCustomerAddressDocument } from './UpdateCustomerAddress.gql'
 
-type EditAddressFormProps = { address?: AccountAddressFragment; sx?: SxProps<Theme> }
+type EditAddressFormProps = {
+  address?: AccountAddressFragment
+  sx?: SxProps<Theme>
+  onCompleteRoute?: string
+}
 
 export function EditAddressForm(props: EditAddressFormProps) {
   const countries = useQuery(CountryRegionsDocument).data?.countries
   const { address, sx } = props
-  const router = useRouter()
+
+  const { closeSteps } = usePageContext()
+  const onComplete = useGo(closeSteps * -1)
 
   const form = useFormGqlMutation(
     UpdateCustomerAddressDocument,
@@ -62,10 +69,7 @@ export function EditAddressForm(props: EditAddressFormProps) {
           ...regionData,
         }
       },
-      onComplete: () => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        router.push('/account/addresses')
-      },
+      onComplete,
     },
     { errorPolicy: 'all' },
   )

package/components/EditAddressForm/UpdateCustomerAddress.graphql

@@ -39,5 +39,6 @@ mutation UpdateCustomerAddress(
     }
   ) {
     id
+    ...CustomerAddress
   }
 }

package/components/SignInForm/SignIn.graphql

@@ -1,5 +1,5 @@
 mutation SignIn($email: String!, $password: String!) {
   generateCustomerToken(email: $email, password: $password) {
-    token
+    ...CustomerTokenFragment
   }
 }

package/components/SignInForm/SignInForm.tsx

@@ -13,7 +13,7 @@ export function SignInForm(props: SignInFormProps) {
   const { email, sx } = props
   const form = useFormGqlMutation(
     SignInDocument,
-    { defaultValues: { 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/components/index.ts

@@ -1,4 +1,5 @@
 export * from './AccountAddress/AccountAddress'
+export * from './AccountAddresses/AccountAddresses.gql'
 export * from './AccountAddresses/AccountAddresses'
 export * from './AddressFields/AddressFields'
 export * from './AddressMultiLine/AddressMultiLine'

package/hooks/CustomerToken.graphql

@@ -1,8 +1,7 @@
 query CustomerToken {
   customerToken @client {
-    __typename
-    token
-    valid
+    ...CustomerTokenFragment
     createdAt
+    valid
   }
 }

package/hooks/CustomerTokenFragment.graphql

@@ -0,0 +1,4 @@
+fragment CustomerTokenFragment on CustomerToken @injectable {
+  __typename
+  token
+}

package/hooks/index.ts

@@ -4,3 +4,5 @@ export * from './CustomerToken.gql'
 export * from './IsEmailAvailable.gql'
 export * from './useExtractCustomerErrors'
 export * from './useFormIsEmailAvailable'
+export * from './useCustomerQuery'
+export * from './useCustomerSession'

package/hooks/useCustomerQuery.ts

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

package/hooks/useCustomerSession.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { CustomerTokenDocument } from './CustomerToken.gql'
+import { CustomerTokenFragment } from './CustomerTokenFragment.gql'
+
+export type UseCustomerTokenReturn =
+  | (CustomerTokenFragment & {
+      loggedIn: boolean
+      requireAuth: boolean
+    })
+  | (Partial<CustomerTokenFragment> & { loggedIn: false; requireAuth: true })
+
+export function useCustomerSession(): UseCustomerTokenReturn {
+  const token = useQuery(CustomerTokenDocument, { ssr: false, fetchPolicy: 'cache-only' }).data
+    ?.customerToken
+
+  if (!token) return { loggedIn: false, requireAuth: true }
+
+  return {
+    ...token,
+    loggedIn: Boolean(token?.token && token.valid),
+    requireAuth: Boolean(!token || !token.valid),
+  }
+}

package/hooks/useFormIsEmailAvailable.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { CustomerDocument } from './Customer.gql'
 import { CustomerTokenDocument } from './CustomerToken.gql'
 import { IsEmailAvailableDocument } from './IsEmailAvailable.gql'
+import { useCustomerQuery } from './useCustomerQuery'
 
 export type UseFormIsEmailAvailableProps = {
   email?: string | null
@@ -13,15 +14,13 @@ export type UseFormIsEmailAvailableProps = {
 export function useFormIsEmailAvailable(props: UseFormIsEmailAvailableProps) {
   const { email, onSubmitted } = props
   const { data: token } = useQuery(CustomerTokenDocument)
-  const customerQuery = useQuery(CustomerDocument, {
-    ssr: false,
-    skip: typeof token === 'undefined',
-  })
+  const customerQuery = useCustomerQuery(CustomerDocument)
 
-  const form = useFormGqlQuery(IsEmailAvailableDocument, {
-    mode: 'onChange',
-    defaultValues: { email: email ?? '' },
-  })
+  const form = useFormGqlQuery(
+    IsEmailAvailableDocument,
+    { mode: 'onChange', defaultValues: { email: email ?? '' } },
+    { fetchPolicy: 'cache-and-network' },
+  )
   const { formState, data, handleSubmit } = form
 
   const submit = handleSubmit(onSubmitted || (() => {}))

package/package.json

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

package/typePolicies.ts

@@ -67,7 +67,7 @@ const createCustomer: FieldPolicy<Mutation['createCustomer']> = {
 
 export const customerTypePolicies: StrictTypedTypePolicies = {
   // Query: { fields: { customer } },
-  Mutation: { fields: { generateCustomerToken, createCustomer } },
+  Mutation: { fields: { generateCustomerToken, createCustomer, createCustomerV2: createCustomer } },
   CustomerToken: { fields: { valid } },
 }