@graphcommerce/magento-cart-email 3.0.37 → 3.0.38

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## 3.0.38
+
+### Patch Changes
+
+- [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`4ad45a2f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4ad45a2f3389838c33da8c447f9647c1cd17aa91) Thanks [@NickdeK](https://github.com/NickdeK)! - Made the EmailForm much simpler, so it doesn't rerender as often by stripping out the registration flow inside that form
+
+- Updated dependencies [[`1afc6a547`](https://github.com/graphcommerce-org/graphcommerce/commit/1afc6a5473d6e31f47b5d0188801803b31865290), [`03d01c06c`](https://github.com/graphcommerce-org/graphcommerce/commit/03d01c06c6dc13df8d38ab5b40bd100c567a9e8d), [`4a4579bb2`](https://github.com/graphcommerce-org/graphcommerce/commit/4a4579bb2f7da378f3fcc504405caf2560dc10f6), [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4), [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df), [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50), [`d03f0860b`](https://github.com/graphcommerce-org/graphcommerce/commit/d03f0860b882db4f280d9467aef9d66e56c1c030), [`b68d0b44a`](https://github.com/graphcommerce-org/graphcommerce/commit/b68d0b44a87688c80fb0aa4a5c840f262ce48d2f)]:
+  - @graphcommerce/graphql@3.4.2
+  - @graphcommerce/magento-cart@4.6.0
+  - @graphcommerce/magento-customer@4.8.0
+  - @graphcommerce/react-hook-form@3.3.1
+  - @graphcommerce/next-ui@4.14.0
+  - @graphcommerce/magento-product@4.4.16
+  - @graphcommerce/magento-store@4.2.18
+
 ## 3.0.37
 
 ### Patch Changes

package/EmailForm/EmailForm.tsx

@@ -1,77 +1,58 @@
-import { useMutation } from '@graphcommerce/graphql'
+import { useQuery } from '@graphcommerce/graphql'
 import {
   ApolloCartErrorAlert,
   useCartQuery,
-  useMergeCustomerCart,
+  useFormGqlMutationCart,
 } from '@graphcommerce/magento-cart'
+import { IsEmailAvailableDocument } from '@graphcommerce/magento-customer'
+import { extendableComponent, FormRow } from '@graphcommerce/next-ui'
 import {
-  SignInFormInline,
-  SignUpFormInline,
-  useFormIsEmailAvailable,
-} from '@graphcommerce/magento-customer'
-import { AnimatedRow, extendableComponent, FormDiv, FormRow } from '@graphcommerce/next-ui'
-import { emailPattern, useFormCompose, UseFormComposeOptions } from '@graphcommerce/react-hook-form'
+  emailPattern,
+  useFormAutoSubmit,
+  useFormCompose,
+  UseFormComposeOptions,
+} from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/react'
-import { CircularProgress, TextField, Typography, Alert, Button } from '@mui/material'
-import { AnimatePresence } from 'framer-motion'
+import { TextField, Typography, Button, NoSsr, SxProps, Box, Theme } from '@mui/material'
 import PageLink from 'next/link'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { CartEmailDocument } from './CartEmail.gql'
 import { SetGuestEmailOnCartDocument } from './SetGuestEmailOnCart.gql'
 
 export type EmailFormProps = Pick<UseFormComposeOptions, 'step'> & {
   children?: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
 const name = 'EmailForm' as const
 const parts = ['root', 'formRow'] as const
 const { classes } = extendableComponent(name, parts)
 
-export function EmailForm(props: EmailFormProps) {
-  const { step, children } = props
+export const EmailForm = React.memo<EmailFormProps>((props) => {
+  const { step, sx } = props
 
-  const [setGuestEmailOnCart] = useMutation(SetGuestEmailOnCartDocument)
-  const { data: cartData } = useCartQuery(CartEmailDocument)
+  const cartEmail = useCartQuery(CartEmailDocument, { hydration: true })
 
-  const { mode, form, submit } = useFormIsEmailAvailable({ email: cartData?.cart?.email })
+  const email = cartEmail.data?.cart?.email ?? ''
 
-  const { formState, muiRegister, required, watch, error, getValues } = form
+  const form = useFormGqlMutationCart(SetGuestEmailOnCartDocument, {
+    mode: 'onChange',
+    defaultValues: { email },
+  })
 
-  useFormCompose({ form, step, submit, key: 'EmailForm' })
-
-  useEffect(() => {
-    if (!cartData?.cart?.id) return
-
-    // Customer isn't logged in, but we do have a valid email
-    if (mode === 'signin' || mode === 'signup') {
-      const [email] = getValues(['email'])
-
-      if (cartData.cart.email === email) return
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      setGuestEmailOnCart({ variables: { email, cartId: cartData.cart.id } })
-    }
-  }, [mode, getValues, cartData?.cart?.id, setGuestEmailOnCart, cartData?.cart?.email])
+  const isEmailAvailable = useQuery(IsEmailAvailableDocument, {
+    variables: { email },
+    skip: !email,
+  })
 
-  let endAdornment: React.ReactNode = null
+  const { formState, muiRegister, required, error, handleSubmit } = form
+  const submit = handleSubmit(() => {})
 
-  if (mode === 'signin') {
-    endAdornment = (
-      <PageLink href='/account/signin' passHref>
-        <Button color='secondary' style={{ whiteSpace: 'nowrap' }}>
-          <Trans id='Sign in' />
-        </Button>
-      </PageLink>
-    )
-  }
-  if (formState.isSubmitting) endAdornment = <CircularProgress />
+  useFormCompose({ form, step, submit, key: 'EmailForm' })
+  useFormAutoSubmit({ form, submit })
 
   return (
-    <form noValidate onSubmit={submit}>
-      <FormRow>
-        <Typography variant='h5' component='h2' gutterBottom>
-          <Trans id='Personal details' />
-        </Typography>
-      </FormRow>
+    <Box component='form' noValidate onSubmit={submit} sx={sx}>
       <FormRow className={classes.formRow} sx={{ py: 0 }}>
         <TextField
           variant='outlined'
@@ -80,18 +61,28 @@ export function EmailForm(props: EmailFormProps) {
           helperText={formState.isSubmitted && formState.errors.email?.message}
           label={<Trans id='Email' />}
           required={required.email}
+          disabled={cartEmail.loading}
           {...muiRegister('email', {
             required: required.email,
             pattern: { value: emailPattern, message: '' },
           })}
           InputProps={{
             autoComplete: 'email',
-            endAdornment,
-            readOnly: mode === 'signedin' || mode === 'session-expired',
+            endAdornment: (
+              <NoSsr>
+                {isEmailAvailable.data?.isEmailAvailable && (
+                  <PageLink href='/account/signin' passHref>
+                    <Button color='secondary' style={{ whiteSpace: 'nowrap' }}>
+                      <Trans id='Sign in' />
+                    </Button>
+                  </PageLink>
+                )}
+              </NoSsr>
+            ),
           }}
         />
       </FormRow>
       <ApolloCartErrorAlert error={error} />
-    </form>
+    </Box>
   )
-}
+})

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-cart-email",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.0.37",
+  "version": "3.0.38",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,14 +18,14 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.4.1",
+    "@graphcommerce/graphql": "3.4.2",
     "@graphcommerce/image": "3.1.7",
-    "@graphcommerce/magento-cart": "4.5.2",
-    "@graphcommerce/magento-customer": "4.7.2",
-    "@graphcommerce/magento-product": "4.4.15",
-    "@graphcommerce/magento-store": "4.2.17",
-    "@graphcommerce/next-ui": "4.13.1",
-    "@graphcommerce/react-hook-form": "3.3.0"
+    "@graphcommerce/magento-cart": "4.6.0",
+    "@graphcommerce/magento-customer": "4.8.0",
+    "@graphcommerce/magento-product": "4.4.16",
+    "@graphcommerce/magento-store": "4.2.18",
+    "@graphcommerce/next-ui": "4.14.0",
+    "@graphcommerce/react-hook-form": "3.3.1"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",