@graphcommerce/magento-customer 6.0.1-canary.2 → 6.0.1-canary.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 6.0.1-canary.3
+
+### Patch Changes
+
+- [#1855](https://github.com/graphcommerce-org/graphcommerce/pull/1855) [`0f789d3be`](https://github.com/graphcommerce-org/graphcommerce/commit/0f789d3be1aa6d724bd98bceee092e1da6701915) - Added registration email validation to inline registration form. ([@mikekeehnen](https://github.com/mikekeehnen))
+
 ## 6.0.1-canary.2
 
 ## 6.0.1-canary.1

package/components/SignUpForm/SignUpForm.tsx

@@ -13,7 +13,7 @@ import { SignUpConfirmDocument } from './SignUpConfirm.gql'
 
 type SignUpFormProps = { email: string }
 
-const requireEmailValidation = process.env.BUILD_FLAG_CUSTOMER_REQUIRE_EMAIL_CONFIRMATION === '1'
+const requireEmailValidation = import.meta.graphCommerce.customerRequireEmailConfirmation ?? false
 
 export function SignUpForm(props: SignUpFormProps) {
   const { email } = props

package/components/SignUpForm/SignUpFormInline.tsx

@@ -4,9 +4,10 @@ import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { Box, TextField } from '@mui/material'
+import { Alert, Box, TextField } from '@mui/material'
 import React from 'react'
 import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
+import { SignUpConfirmDocument } from './SignUpConfirm.gql'
 
 type SignUpFormInlineProps = Pick<SignUpMutationVariables, 'email'> & {
   children?: React.ReactNode
@@ -22,6 +23,8 @@ const { classes } = extendableComponent('SignUpFormInline', [
   'buttonContainer',
 ] as const)
 
+const requireEmailValidation = import.meta.graphCommerce.customerRequireEmailConfirmation ?? false
+
 export function SignUpFormInline({
   email,
   children,
@@ -29,10 +32,12 @@ export function SignUpFormInline({
   lastname,
   onSubmitted = () => {},
 }: SignUpFormInlineProps) {
+  const Mutation = requireEmailValidation ? SignUpConfirmDocument : SignUpDocument
+
   const form = useFormGqlMutation<
     SignUpMutation,
     SignUpMutationVariables & { confirmPassword?: string }
-  >(SignUpDocument, {
+  >(Mutation, {
     // todo(paales): This causes dirty data to be send to the backend.
     defaultValues: {
       email,
@@ -51,6 +56,14 @@ export function SignUpFormInline({
     useQuery(StoreConfigDocument).data?.storeConfig?.minimum_password_length ?? 8,
   )
 
+  if (requireEmailValidation && form.formState.isSubmitSuccessful) {
+    return (
+      <Alert>
+        <Trans id='Please check your inbox to validate your email ({email})' values={{ email }} />
+      </Alert>
+    )
+  }
+
   return (
     <Form onSubmit={submitHandler} noValidate className={classes.form} sx={{ padding: 0 }}>
       <FormRow key='inline-signup' className={classes.row} sx={{ padding: 0 }}>
@@ -84,9 +97,7 @@ export function SignUpFormInline({
             required: true,
             validate: (value) => value === watchPassword,
           })}
-          helperText={
-            !!formState.errors.confirmPassword && <Trans id="Passwords should match" />
-          }
+          helperText={!!formState.errors.confirmPassword && <Trans id='Passwords should match' />}
           disabled={formState.isSubmitting}
         />
       </FormRow>

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "6.0.1-canary.2",
+  "version": "6.0.1-canary.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "6.0.1-canary.2",
-    "@graphcommerce/prettier-config-pwa": "6.0.1-canary.2",
-    "@graphcommerce/typescript-config-pwa": "6.0.1-canary.2"
+    "@graphcommerce/eslint-config-pwa": "6.0.1-canary.3",
+    "@graphcommerce/prettier-config-pwa": "6.0.1-canary.3",
+    "@graphcommerce/typescript-config-pwa": "6.0.1-canary.3"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "6.0.1-canary.2",
-    "@graphcommerce/framer-utils": "6.0.1-canary.2",
-    "@graphcommerce/graphql": "6.0.1-canary.2",
-    "@graphcommerce/graphql-mesh": "6.0.1-canary.2",
-    "@graphcommerce/image": "6.0.1-canary.2",
-    "@graphcommerce/magento-graphql": "6.0.1-canary.2",
-    "@graphcommerce/magento-store": "6.0.1-canary.2",
-    "@graphcommerce/next-ui": "6.0.1-canary.2",
-    "@graphcommerce/react-hook-form": "6.0.1-canary.2"
+    "@graphcommerce/ecommerce-ui": "6.0.1-canary.3",
+    "@graphcommerce/framer-utils": "6.0.1-canary.3",
+    "@graphcommerce/graphql": "6.0.1-canary.3",
+    "@graphcommerce/graphql-mesh": "6.0.1-canary.3",
+    "@graphcommerce/image": "6.0.1-canary.3",
+    "@graphcommerce/magento-graphql": "6.0.1-canary.3",
+    "@graphcommerce/magento-store": "6.0.1-canary.3",
+    "@graphcommerce/next-ui": "6.0.1-canary.3",
+    "@graphcommerce/react-hook-form": "6.0.1-canary.3"
   },
   "peerDependencies": {
     "@lingui/react": "^3.13.2",