@graphcommerce/magento-customer 4.1.4 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # Change Log
 
+## 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
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`3b4d46de2`](https://github.com/graphcommerce-org/graphcommerce/commit/3b4d46de2555db9eed733c8fac574bc809d75da4) Thanks [@paales](https://github.com/paales)! - CustomerMenuFabItem badge was rendered with the wrong size
+
+- Updated dependencies [[`5266388ea`](https://github.com/graphcommerce-org/graphcommerce/commit/5266388eaffda41592623ef7a3ddbbe03c8e0dad), [`9b35403d9`](https://github.com/graphcommerce-org/graphcommerce/commit/9b35403d9dbb2606ac7cf3bb641a0f9cc3d8a2ba), [`0298a0de1`](https://github.com/graphcommerce-org/graphcommerce/commit/0298a0de1d13e543c4124a6a099297b4e27e2b05), [`815132ea4`](https://github.com/graphcommerce-org/graphcommerce/commit/815132ea43937b4b84b59ec9974ac593cb4eb456), [`3326742a0`](https://github.com/graphcommerce-org/graphcommerce/commit/3326742a0dceb45f0cac4741ca09dc4d4f09ad90), [`7a3799bfc`](https://github.com/graphcommerce-org/graphcommerce/commit/7a3799bfc107f26aa9991a91db5f228e3476f4aa), [`9a77f88ed`](https://github.com/graphcommerce-org/graphcommerce/commit/9a77f88ed26cbecdae9a135c3cb234a5b7ecf4df), [`0eeaad304`](https://github.com/graphcommerce-org/graphcommerce/commit/0eeaad30461b1d5b486438f0287fa76d49429044), [`bc5213547`](https://github.com/graphcommerce-org/graphcommerce/commit/bc52135471479c83d989449dad24798112e898f4), [`3f1912f55`](https://github.com/graphcommerce-org/graphcommerce/commit/3f1912f553318d5888f8af2b841918ef4ae96a84), [`b6c68cda8`](https://github.com/graphcommerce-org/graphcommerce/commit/b6c68cda8836a1d0c78ef351899cec9ec1037385)]:
+  - @graphcommerce/next-ui@4.3.0
+  - @graphcommerce/magento-store@4.1.3
+
 ## 4.1.4
 
 ### 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/CustomerMenuFabItem/CustomerMenuFabItem.tsx

@@ -1,11 +1,6 @@
 import { useQuery } from '@graphcommerce/graphql'
-import {
-  MenuFabSecondaryItem,
-  DesktopHeaderBadge,
-  iconPerson,
-  IconSvg,
-} from '@graphcommerce/next-ui'
-import { NoSsr, SxProps, Theme } from '@mui/material'
+import { MenuFabSecondaryItem, iconPerson, IconSvg } from '@graphcommerce/next-ui'
+import { Badge, NoSsr, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { CustomerTokenDocument, CustomerTokenQuery } from '../../hooks'
 
@@ -25,14 +20,14 @@ function CustomerMenuFabItemContent(props: CustomerMenuFabItemProps) {
     <MenuFabSecondaryItem
       sx={sx}
       icon={
-        <DesktopHeaderBadge
+        <Badge
           badgeContent={customerToken?.token ? 1 : 0}
           color={customerToken?.valid ? 'primary' : 'error'}
           variant='dot'
           overlap='circular'
         >
           {icon ?? <IconSvg src={iconPerson} size='medium' />}
-        </DesktopHeaderBadge>
+        </Badge>
       }
       href={requireAuth ? guestHref : authHref}
     >

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.4",
+  "version": "4.2.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,19 +12,19 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.5",
-    "@graphcommerce/prettier-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.1.3",
+    "@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.2",
-    "@graphcommerce/next-ui": "^4.2.4",
-    "@graphcommerce/react-hook-form": "^3.0.4"
+    "@graphcommerce/ecommerce-ui": "^1.0.4",
+    "@graphcommerce/graphql": "^3.0.6",
+    "@graphcommerce/image": "^3.1.2",
+    "@graphcommerce/magento-graphql": "^3.0.5",
+    "@graphcommerce/magento-store": "^4.1.4",
+    "@graphcommerce/next-ui": "^4.5.0",
+    "@graphcommerce/react-hook-form": "^3.0.6"
   },
   "peerDependencies": {
     "@lingui/macro": "^3.13.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 } },
 }