@graphcommerce/magento-newsletter 8.0.6-canary.1 → 8.0.6-canary.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 8.0.6-canary.3
+
+## 8.0.6-canary.2
+
+### Patch Changes
+
+- [#2234](https://github.com/graphcommerce-org/graphcommerce/pull/2234) [`530076e`](https://github.com/graphcommerce-org/graphcommerce/commit/530076e3664703cb8b577b7fcf1998a420819f60) - Moved all usages of useFormPersist to the <FormPersist/> component to prevent rerenders.
+  ([@FrankHarland](https://github.com/FrankHarland))
+
 ## 8.0.6-canary.1
 
 ## 8.0.6-canary.0

package/components/CheckoutNewsletter/CheckoutNewsletter.tsx

@@ -2,7 +2,7 @@ import { CheckboxElement, useFormCompose } from '@graphcommerce/ecommerce-ui'
 import { DocumentNode } from '@graphcommerce/graphql'
 import { useCartQuery } from '@graphcommerce/magento-cart'
 import { useCustomerQuery, useCustomerSession } from '@graphcommerce/magento-customer'
-import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
+import { FormPersist, useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
 import { Box, SxProps, Theme } from '@mui/material'
 import { GetCustomerNewsletterToggleDocument } from '../CustomerNewsletterToggle/GetCustomerNewsLetterToggle.gql'
 import { GetCartEmailDocument } from '../SignupNewsletter/GetCartEmail.gql'
@@ -43,14 +43,13 @@ export function SubscribeToNewsletter(props: CheckoutNewsletterProps) {
   const { control, handleSubmit } = form
   const submit = handleSubmit(() => {})
 
-  useFormPersist({ form, name: 'NewsletterSubscribeForm' })
-
   useFormCompose({ form, step, submit, key: 'NewsletterSubscribeForm' })
 
   if (isCustomerSubscribed) return null
 
   return (
     <Box sx={sx}>
+      <FormPersist form={form} name='NewsletterSubscribeForm' />
       <form onSubmit={submit} noValidate>
         <CheckboxElement color='secondary' control={control} name='subscribe' label={label} />
       </form>

package/components/CustomerNewsletterToggle/CustomerNewsletterToggle.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from '@graphcommerce/graphql'
 import { ApolloCustomerErrorAlert } from '@graphcommerce/magento-customer'
-import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Controller, FormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import {
   Box,
   FormControl,
@@ -31,12 +31,12 @@ export function CustomerNewsletterToggle(props: CustomerNewsletterToggleProps) {
 
   const { handleSubmit, control, formState, error } = form
   const submit = handleSubmit(() => {})
-  useFormAutoSubmit({ form, submit })
 
   if (disabled || loading) return <Switch disabled color='primary' {...switchProps} />
 
   return (
     <Box component='form' onSubmit={submit} noValidate sx={sx}>
+      <FormAutoSubmit control={control} submit={submit} />
       <Controller
         name='isSubscribed'
         control={control}

package/components/GuestNewsletterToggle/GuestNewsletterToggle.tsx

@@ -1,7 +1,7 @@
 import { useCartQuery } from '@graphcommerce/magento-cart'
 import { ApolloCustomerErrorAlert } from '@graphcommerce/magento-customer'
 import { Form } from '@graphcommerce/next-ui'
-import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { Controller, FormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import {
   FormControl,
   FormControlLabel,
@@ -33,13 +33,13 @@ export function GuestNewsletterToggle(props: GuestNewsletterToggleProps) {
 
   const { handleSubmit, control, formState, error, register } = form
   const submit = handleSubmit(() => {})
-  useFormAutoSubmit({ form, submit })
 
   if (formState.isSubmitted) return <Switch color='primary' {...switchProps} checked disabled />
 
   return (
     <Form noValidate sx={sx}>
       <input type='hidden' {...register('email')} value={email} />
+      <FormAutoSubmit control={control} submit={submit} />
       <Controller
         name='isSubscribed'
         control={control}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-newsletter",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.0.6-canary.1",
+  "version": "8.0.6-canary.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,15 +12,15 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.1",
-    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.1",
-    "@graphcommerce/graphql": "^8.0.6-canary.1",
-    "@graphcommerce/magento-cart": "^8.0.6-canary.1",
-    "@graphcommerce/magento-customer": "^8.0.6-canary.1",
-    "@graphcommerce/next-ui": "^8.0.6-canary.1",
-    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.1",
-    "@graphcommerce/react-hook-form": "^8.0.6-canary.1",
-    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.1",
+    "@graphcommerce/ecommerce-ui": "^8.0.6-canary.3",
+    "@graphcommerce/eslint-config-pwa": "^8.0.6-canary.3",
+    "@graphcommerce/graphql": "^8.0.6-canary.3",
+    "@graphcommerce/magento-cart": "^8.0.6-canary.3",
+    "@graphcommerce/magento-customer": "^8.0.6-canary.3",
+    "@graphcommerce/next-ui": "^8.0.6-canary.3",
+    "@graphcommerce/prettier-config-pwa": "^8.0.6-canary.3",
+    "@graphcommerce/react-hook-form": "^8.0.6-canary.3",
+    "@graphcommerce/typescript-config-pwa": "^8.0.6-canary.3",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",