@graphcommerce/magento-customer 4.1.5 → 4.2.1

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Change Log
 
+## 4.2.1
+
+### Patch Changes
+
+- [#1378](https://github.com/graphcommerce-org/graphcommerce/pull/1378) [`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5) Thanks [@paales](https://github.com/paales)! - Pin all versions internally so we can’t end up in an unfixable state for the user
+
+- Updated dependencies [[`b610a6e40`](https://github.com/graphcommerce-org/graphcommerce/commit/b610a6e4049e8c9e8b5d2aeff31b8e1bfc24abe5), [`22ff9df16`](https://github.com/graphcommerce-org/graphcommerce/commit/22ff9df1677742ae8e07d9b7e5b12fbb487580dc)]:
+  - @graphcommerce/ecommerce-ui@1.0.5
+  - @graphcommerce/graphql@3.0.7
+  - @graphcommerce/image@3.1.3
+  - @graphcommerce/magento-graphql@3.0.6
+  - @graphcommerce/magento-store@4.1.5
+  - @graphcommerce/next-ui@4.5.1
+  - @graphcommerce/react-hook-form@3.0.7
+
+## 4.2.0
+
+### Minor Changes
+
+- [#1368](https://github.com/graphcommerce-org/graphcommerce/pull/1368) [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a) Thanks [@paales](https://github.com/paales)! - Add a feature to set CUSTOMER_REQUIRE_EMAIL_CONFIRMATION in the env
+
+### Patch Changes
+
+- [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
+
+* [#1362](https://github.com/graphcommerce-org/graphcommerce/pull/1362) [`6213f0b0f`](https://github.com/graphcommerce-org/graphcommerce/commit/6213f0b0f5f53d622b993d9f7ea96cbbeb5bd670) Thanks [@timhofman](https://github.com/timhofman)! - persistence layer not purged at logout
+
+* Updated dependencies [[`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a)]:
+  - @graphcommerce/graphql@3.0.6
+  - @graphcommerce/next-ui@4.5.0
+  - @graphcommerce/ecommerce-ui@1.0.4
+  - @graphcommerce/image@3.1.2
+  - @graphcommerce/magento-graphql@3.0.5
+  - @graphcommerce/magento-store@4.1.4
+  - @graphcommerce/react-hook-form@3.0.6
+
+## 4.1.6
+
+### Patch Changes
+
+- [#1353](https://github.com/graphcommerce-org/graphcommerce/pull/1353) [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba) Thanks [@paales](https://github.com/paales)! - Eslint: enable rules that were previously disabled and make fixes
+
+- Updated dependencies [[`49a2d6617`](https://github.com/graphcommerce-org/graphcommerce/commit/49a2d661712e1787fba46c6195f7b559189e23d9), [`f67da3cfb`](https://github.com/graphcommerce-org/graphcommerce/commit/f67da3cfbe2dcf5ea23519d088c5aa0074029182), [`218766869`](https://github.com/graphcommerce-org/graphcommerce/commit/218766869f7468c067a590857c942f3819f8add4), [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c)]:
+  - @graphcommerce/next-ui@4.4.0
+
 ## 4.1.5
 
 ### Patch Changes

package/components/ApolloCustomerError/ApolloCustomerErrorSnackbar.tsx

@@ -0,0 +1,7 @@
+import { ApolloErrorSnackbar, ApolloErrorSnackbarProps } from '@graphcommerce/ecommerce-ui'
+
+type ApolloCustomerErrorSnackbarProps = ApolloErrorSnackbarProps
+
+export function ApolloCustomerErrorSnackbar(props: ApolloCustomerErrorSnackbarProps) {
+  return <ApolloErrorSnackbar {...props} />
+}

package/components/CustomerFab/CustomerFab.tsx

@@ -31,7 +31,7 @@ function CustomerFabContent(props: CustomerFabContentProps) {
     <PageLink href={requireAuth ? guestHref : authHref} passHref>
       <Fab
         color='inherit'
-        data-test-id='customer-fab'
+        id='account'
         aria-label={t`Account`}
         size='large'
         className={classes.root}

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -27,7 +27,7 @@ export function ForgotPasswordForm(props: { sx?: SxProps<Theme> }) {
           marginBottom: theme.spacings.sm,
         })}
       >
-        <Trans>We've send a password reset link to your email address!</Trans>
+        <Trans>We’ve send a password reset link to your email address!</Trans>
       </Alert>
     )
   }

package/components/SignOutForm/SignOutForm.tsx

@@ -3,16 +3,20 @@ import { useRouter } from 'next/router'
 import React from 'react'
 import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignOutFormDocument } from './SignOutForm.gql'
+import { useApolloClient } from '@graphcommerce/graphql'
 
 type SignOutFormProps = { button: (props: { formState: FormState<unknown> }) => React.ReactNode }
 
 export function SignOutForm(props: SignOutFormProps) {
   const { button } = props
   const router = useRouter()
+  const client = useApolloClient()
+
   const { handleSubmit, formState, error } = useFormGqlMutation(
     SignOutFormDocument,
     {
       onComplete: () => {
+        client.clearStore()
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
         router.push('/')
       },

package/components/SignUpForm/SignUp.graphql

@@ -11,25 +11,7 @@ mutation SignUp(
   $isSubscribed: Boolean = false
   $dateOfBirth: String
 ) {
-  createCustomer(
-    input: {
-      email: $email
-      password: $password
-      prefix: $prefix
-      firstname: $firstname
-      middlename: $middlename
-      lastname: $lastname
-      suffix: $suffix
-      taxvat: $taxvat
-      gender: $gender
-      is_subscribed: $isSubscribed
-      date_of_birth: $dateOfBirth
-    }
-  ) {
-    customer {
-      ...CustomerInfo
-    }
-  }
+  ...CreateCustomerMutationFragment
   generateCustomerToken(email: $email, password: $password) {
     token
   }

package/components/SignUpForm/SignUpConfirm.graphql

@@ -0,0 +1,15 @@
+mutation SignUpConfirm(
+  $email: String!
+  $password: String!
+  $prefix: String!
+  $firstname: String!
+  $middlename: String
+  $lastname: String!
+  $suffix: String
+  $taxvat: String
+  $gender: Int
+  $isSubscribed: Boolean = false
+  $dateOfBirth: String
+) {
+  ...CreateCustomerMutationFragment
+}

package/components/SignUpForm/SignUpForm.tsx

@@ -1,22 +1,30 @@
+import { useQuery } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
 import { t, Trans } from '@lingui/macro'
-import { FormControlLabel, Switch, TextField } from '@mui/material'
-import { ApolloCustomerErrorAlert } from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { Alert, FormControlLabel, Switch, TextField } from '@mui/material'
+import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
 import { NameFields } from '../NameFields/NameFields'
 import { SignUpDocument, SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
+import { SignUpConfirmDocument } from './SignUpConfirm.gql'
 
-type SignUpFormProps = {
-  email?: string
-}
+type SignUpFormProps = { email: string }
+
+const requireEmailValidation = process.env.CUSTOMER_REQUIRE_EMAIL_CONFIRMATION === '1'
 
 export function SignUpForm(props: SignUpFormProps) {
   const { email } = props
+
+  const storeConfig = useQuery(StoreConfigDocument).data?.storeConfig
+
+  const Mutation = requireEmailValidation ? SignUpConfirmDocument : SignUpDocument
+
   const form = useFormGqlMutation<
     SignUpMutation,
     SignUpMutationVariables & { confirmPassword?: string }
-  >(SignUpDocument, { defaultValues: { email } }, { errorPolicy: 'all' })
+  >(Mutation, { defaultValues: { email } }, { errorPolicy: 'all' })
 
   const { muiRegister, handleSubmit, required, watch, formState, error } = form
   const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })
@@ -26,6 +34,14 @@ export function SignUpForm(props: SignUpFormProps) {
 
   useFormPersist({ form, name: 'SignUp', exclude: ['password', 'confirmPassword'] })
 
+  if (requireEmailValidation && form.formState.isSubmitSuccessful) {
+    return (
+      <Alert>
+        <Trans>Please check your inbox to validate your email ({email})</Trans>
+      </Alert>
+    )
+  }
+
   return (
     <form onSubmit={submitHandler} noValidate>
       <FormRow>
@@ -39,7 +55,10 @@ export function SignUpForm(props: SignUpFormProps) {
           required={required.password}
           {...muiRegister('password', {
             required: required.password,
-            minLength: { value: 8, message: t`Password must have at least 8 characters` },
+            minLength: {
+              value: Number(storeConfig?.minimum_password_length ?? 8),
+              message: t`Password must have at least 8 characters`,
+            },
           })}
           helperText={formState.errors.password?.message || inputError?.message}
           disabled={formState.isSubmitting}
@@ -69,12 +88,12 @@ export function SignUpForm(props: SignUpFormProps) {
         label={<Trans>Subscribe to newsletter</Trans>}
       />
 
-      <ApolloCustomerErrorAlert error={remainingError} />
+      <ApolloCustomerErrorSnackbar error={remainingError} />
 
       <FormActions>
         <Button
           type='submit'
-          data-test-id='create-account'
+          id='create-account'
           variant='contained'
           color='primary'
           size='large'

package/components/SignUpForm/SignUpFormInline.tsx

@@ -1,6 +1,8 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { Box, TextField } from '@mui/material'
 import React, { PropsWithChildren } from 'react'
 import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
@@ -42,6 +44,10 @@ export function SignUpFormInline({
   const submitHandler = handleSubmit(onSubmitted)
   const watchPassword = watch('password')
 
+  const minPasswordLength = Number(
+    useQuery(StoreConfigDocument).data?.storeConfig?.minimum_password_length ?? 8,
+  )
+
   return (
     <Form onSubmit={submitHandler} noValidate className={classes.form} sx={{ padding: 0 }}>
       <FormRow key='inline-signup' className={classes.row} sx={{ padding: 0 }}>
@@ -54,7 +60,13 @@ export function SignUpFormInline({
           autoComplete='new-password'
           id='new-password'
           required={required.password}
-          {...muiRegister('password', { required: required.password })}
+          {...muiRegister('password', {
+            required: required.password,
+            minLength: {
+              value: minPasswordLength,
+              message: t`Password must have at least 8 characters`,
+            },
+          })}
           helperText={error?.message}
           disabled={formState.isSubmitting}
         />

package/components/SignUpForm/SignUpMutationFragment.graphql

@@ -0,0 +1,21 @@
+fragment CreateCustomerMutationFragment on Mutation {
+  createCustomer(
+    input: {
+      email: $email
+      password: $password
+      prefix: $prefix
+      firstname: $firstname
+      middlename: $middlename
+      lastname: $lastname
+      suffix: $suffix
+      taxvat: $taxvat
+      gender: $gender
+      is_subscribed: $isSubscribed
+      date_of_birth: $dateOfBirth
+    }
+  ) {
+    customer {
+      ...CustomerInfo
+    }
+  }
+}

package/components/index.ts

@@ -5,6 +5,7 @@ export * from './AddressMultiLine/AddressMultiLine'
 export * from './AddressSingleLine/AddressSingleLine'
 export * from './ApolloCustomerError/ApolloCustomerErrorAlert'
 export * from './ApolloCustomerError/ApolloCustomerErrorFullPage'
+export * from './ApolloCustomerError/ApolloCustomerErrorSnackbar'
 export * from './ChangeNameForm/ChangeNameForm'
 export * from './ChangePasswordForm/ChangePassword.gql'
 export * from './ChangePasswordForm/ChangePasswordForm'

package/graphql/CustomerStoreConfig.graphql

@@ -0,0 +1,5 @@
+fragment CustomerStoreConfig on StoreConfig @inject(into: ["StoreConfigFragment"]) {
+  autocomplete_on_storefront
+  minimum_password_length
+  required_character_classes_number
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-customer",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.5",
+  "version": "4.2.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,25 +12,25 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
-    "@graphcommerce/prettier-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.1.4",
+    "@graphcommerce/prettier-config-pwa": "^4.0.5",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
-    "@playwright/test": "^1.19.2"
+    "@playwright/test": "^1.20.1"
   },
   "dependencies": {
-    "@graphcommerce/ecommerce-ui": "^1.0.3",
-    "@graphcommerce/graphql": "^3.0.4",
-    "@graphcommerce/image": "^3.1.1",
-    "@graphcommerce/magento-graphql": "^3.0.4",
-    "@graphcommerce/magento-store": "^4.1.3",
-    "@graphcommerce/next-ui": "^4.3.0",
-    "@graphcommerce/react-hook-form": "^3.0.4"
+    "@graphcommerce/ecommerce-ui": "1.0.5",
+    "@graphcommerce/graphql": "3.0.7",
+    "@graphcommerce/image": "3.1.3",
+    "@graphcommerce/magento-graphql": "3.0.6",
+    "@graphcommerce/magento-store": "4.1.5",
+    "@graphcommerce/next-ui": "4.5.1",
+    "@graphcommerce/react-hook-form": "3.0.7"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.2",
-    "@mui/material": "^5.4.1",
+    "@mui/material": "5.5.3",
     "framer-motion": "^6.2.4",
-    "next": "^12.0.10",
+    "next": "12.1.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   }

package/typePolicies.ts

@@ -1,15 +1,13 @@
-import { FieldPolicy , CustomerToken, MigrateCache, Mutation, TypedTypePolicies } from '@graphcommerce/graphql'
+import {
+  FieldPolicy,
+  CustomerToken,
+  MigrateCache,
+  Mutation,
+  TypedTypePolicies,
+} from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from './hooks/CustomerToken.gql'
 import { IsEmailAvailableDocument } from './hooks/IsEmailAvailable.gql'
 
-const revokeCustomerToken: FieldPolicy<Mutation['revokeCustomerToken']> = {
-  merge(_existing, incoming, options) {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    options.cache.reset()
-    return incoming
-  },
-}
-
 const TOKEN_EXPIRATION_MS = 60 * 60 * 1000
 
 const valid: FieldPolicy<CustomerToken['valid']> = {
@@ -74,7 +72,7 @@ const createCustomer: FieldPolicy<Mutation['createCustomer']> = {
 
 export const customerTypePolicies: TypedTypePolicies = {
   // Query: { fields: { customer } },
-  Mutation: { fields: { generateCustomerToken, revokeCustomerToken, createCustomer } },
+  Mutation: { fields: { generateCustomerToken, createCustomer } },
   CustomerToken: { fields: { valid } },
 }