@graphcommerce/magento-customer 3.6.44 → 4.0.0

package/components/SignInForm/SignInForm.tsx

@@ -1,30 +1,16 @@
-import { useQuery } from '@apollo/client'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
-import { FormRow, Button, FormActions } from '@graphcommerce/next-ui'
+import { Button, FormRow, FormActions } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { FormControl, Link, makeStyles, TextField } from '@material-ui/core'
-import { Alert } from '@material-ui/lab'
+import { Box, FormControl, Link, SxProps, TextField, Theme } from '@mui/material'
 import PageLink from 'next/link'
-import React from 'react'
-import { CustomerTokenDocument } from '../../hooks'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { SignInDocument } from './SignIn.gql'
 
-const useStyles = makeStyles(
-  {
-    forgotPass: {
-      whiteSpace: 'nowrap',
-    },
-  },
-  { name: 'SignIn' },
-)
-
-type SignInFormProps = { email: string }
+type SignInFormProps = { email: string; sx?: SxProps<Theme> }
 
 export default function SignInForm(props: SignInFormProps) {
-  const { email } = props
-  const classes = useStyles()
+  const { email, sx } = props
   const form = useFormGqlMutation(
     SignInDocument,
     { defaultValues: { email } },
@@ -39,7 +25,7 @@ export default function SignInForm(props: SignInFormProps) {
   const submitHandler = handleSubmit(() => {})
 
   return (
-    <form onSubmit={submitHandler} noValidate>
+    <Box component='form' onSubmit={submitHandler} noValidate sx={sx}>
       <FormRow>
         <TextField
           key='password'
@@ -55,7 +41,7 @@ export default function SignInForm(props: SignInFormProps) {
           InputProps={{
             endAdornment: (
               <PageLink href='/account/forgot-password' key='forgot-password' passHref>
-                <Link className={classes.forgotPass}>
+                <Link underline='hover' sx={{ whiteSpace: 'nowrap' }}>
                   <Trans>Forgot password?</Trans>
                 </Link>
               </PageLink>
@@ -81,6 +67,6 @@ export default function SignInForm(props: SignInFormProps) {
           </Button>
         </FormControl>
       </FormActions>
-    </form>
+    </Box>
   )
 }

package/components/SignInForm/SignInFormInline.tsx

@@ -1,34 +1,17 @@
-import { Button } from '@graphcommerce/next-ui'
+import { Button, extendableComponent } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { makeStyles, TextField, Theme } from '@material-ui/core'
+import { Box, SxProps, TextField, Theme } from '@mui/material'
 import PageLink from 'next/link'
-import React, { PropsWithChildren } from 'react'
+import { PropsWithChildren } from 'react'
 import { SignInDocument, SignInMutationVariables } from './SignIn.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    form: {
-      display: 'grid',
-      alignItems: 'center',
-      gridRowGap: theme.spacings.sm,
-      gridColumnGap: theme.spacings.xs,
-      gridTemplateColumns: '1fr',
-      [theme.breakpoints.up('sm')]: {
-        gridTemplateColumns: '5fr 1fr',
-      },
-    },
-    button: {
-      minWidth: 'max-content',
-    },
-  }),
-  { name: 'SignInFormInline' },
-)
+type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'> & { sx?: SxProps<Theme> }
 
-type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'>
+const { classes } = extendableComponent('SignInFormInline', ['form', 'button'] as const)
 
-export default function SignInFormInline({ email }: PropsWithChildren<InlineSignInFormProps>) {
-  const classes = useStyles()
+export default function SignInFormInline(props: PropsWithChildren<InlineSignInFormProps>) {
+  const { email, sx = [] } = props
   const form = useFormGqlMutation(
     SignInDocument,
     { defaultValues: { email } },
@@ -38,7 +21,25 @@ export default function SignInFormInline({ email }: PropsWithChildren<InlineSign
   const submitHandler = handleSubmit(() => {})
 
   return (
-    <form onSubmit={submitHandler} noValidate className={classes.form}>
+    <Box
+      component='form'
+      onSubmit={submitHandler}
+      noValidate
+      className={classes.form}
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          alignItems: 'center',
+          gridRowGap: theme.spacings.sm,
+          gridColumnGap: theme.spacings.xs,
+          gridTemplateColumns: '1fr',
+          [theme.breakpoints.up('sm')]: {
+            gridTemplateColumns: '5fr 1fr',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <TextField
         variant='outlined'
         type='password'
@@ -54,16 +55,21 @@ export default function SignInFormInline({ email }: PropsWithChildren<InlineSign
         InputProps={{
           endAdornment: (
             <PageLink href='/account/forgot-password' key='forgot-password' passHref>
-              <Button color='secondary' variant='text' className={classes.button}>
-                Forgot password?
+              <Button
+                color='secondary'
+                variant='text'
+                className={classes.button}
+                sx={{ minWidth: 'max-content' }}
+              >
+                <Trans>Forgot password?</Trans>
               </Button>
             </PageLink>
           ),
         }}
       />
       <Button type='submit' loading={formState.isSubmitting} color='secondary' variant='pill'>
-        Sign in
+        <Trans>Sign in</Trans>
       </Button>
-    </form>
+    </Box>
   )
 }

package/components/SignUpForm/SignUpForm.tsx

@@ -2,8 +2,7 @@ import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 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 '@material-ui/core'
-import React from 'react'
+import { FormControlLabel, Switch, TextField } from '@mui/material'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import NameFields from '../NameFields'
 import { SignUpDocument, SignUpMutation, SignUpMutationVariables } from './SignUp.gql'

package/components/SignUpForm/SignUpFormInline.tsx

@@ -1,49 +1,31 @@
-import { Button, Form, FormRow } from '@graphcommerce/next-ui'
+import { Button, extendableComponent, Form, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { makeStyles, TextField, Theme } from '@material-ui/core'
+import { Box, TextField } from '@mui/material'
 import React, { PropsWithChildren } from 'react'
 import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    buttonFormRow: {
-      padding: 0,
-      [theme.breakpoints.up('sm')]: {
-        gridTemplateColumns: 'minmax(200px, 3.5fr) 1fr',
-      },
-    },
-    form: {
-      padding: 0,
-    },
-    row: {
-      padding: 0,
-    },
-    button: {
-      minWidth: 'max-content',
-    },
-    buttonContainer: {
-      alignSelf: 'center',
-    },
-  }),
-  { name: 'SignUpFormInline' },
-)
-
 type SignUpFormInlineProps = Pick<SignUpMutationVariables, 'email'> & {
-  helperList?: React.ReactNode
+  children?: React.ReactNode
   firstname?: string
   lastname?: string
   onSubmitted?: () => void
 }
 
+const { classes } = extendableComponent('SignUpFormInline', [
+  'form',
+  'buttonFormRow',
+  'row',
+  'buttonContainer',
+] as const)
+
 export default function SignUpFormInline({
   email,
-  helperList,
+  children,
   firstname,
   lastname,
   onSubmitted = () => {},
 }: PropsWithChildren<SignUpFormInlineProps>) {
-  const classes = useStyles()
   const form = useFormGqlMutation<
     SignUpMutation,
     SignUpMutationVariables & { confirmPassword?: string }
@@ -61,8 +43,8 @@ export default function SignUpFormInline({
   const watchPassword = watch('password')
 
   return (
-    <Form onSubmit={submitHandler} noValidate classes={{ root: classes.form }}>
-      <FormRow key='inline-signup' classes={{ root: classes.row }}>
+    <Form onSubmit={submitHandler} noValidate className={classes.form} sx={{ padding: 0 }}>
+      <FormRow key='inline-signup' className={classes.row} sx={{ padding: 0 }}>
         <TextField
           variant='outlined'
           type='password'
@@ -93,9 +75,17 @@ export default function SignUpFormInline({
       </FormRow>
 
       <FormRow key='signup-submit'>
-        <FormRow classes={{ root: classes.buttonFormRow }}>
-          <div>{helperList}</div>
-          <div className={classes.buttonContainer}>
+        <FormRow
+          className={classes.buttonFormRow}
+          sx={(theme) => ({
+            padding: 0,
+            [theme.breakpoints.up('sm')]: {
+              gridTemplateColumns: 'minmax(200px, 3.5fr) 1fr',
+            },
+          })}
+        >
+          <div>{children}</div>
+          <Box className={classes.buttonContainer} sx={{ alignSelf: 'center' }}>
             <Button
               fullWidth
               type='submit'
@@ -105,7 +95,7 @@ export default function SignUpFormInline({
             >
               Create Account
             </Button>
-          </div>
+          </Box>
         </FormRow>
       </FormRow>
     </Form>

package/components/UpdateCustomerEmailForm/index.tsx

@@ -8,8 +8,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { t, Trans } from '@lingui/macro'
-import { TextField } from '@material-ui/core'
-import React from 'react'
+import { TextField } from '@mui/material'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import {
   UpdateCustomerEmailDocument,

package/components/UpdateDefaultAddressForm/index.tsx

@@ -1,6 +1,6 @@
 import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { FormControl, FormControlLabel, FormHelperText, Switch } from '@material-ui/core'
+import { FormControl, FormControlLabel, FormHelperText, Switch } from '@mui/material'
 import React, { useEffect, useMemo } from 'react'
 import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
 import { UpdateDefaultAddressDocument } from '../AccountAddresses/UpdateDefaultAddress.gql'
@@ -24,18 +24,13 @@ export default function UpdateDefaultAddressForm(props: AccountAddressProps) {
 
   const form = useFormGqlMutation(
     UpdateDefaultAddressDocument,
-    {
-      mode: 'onChange',
-      defaultValues,
-    },
+    { mode: 'onChange', defaultValues },
     { errorPolicy: 'all' },
   )
 
   const { handleSubmit, control, error, reset, formState } = form
 
-  const submit = handleSubmit(() => {
-    //
-  })
+  const submit = handleSubmit(() => {})
   useFormAutoSubmit({ form, submit })
 
   useEffect(() => {

package/hooks/useExtractCustomerErrors.tsx

@@ -1,4 +1,4 @@
-import { ApolloError, useApolloClient } from '@apollo/client'
+import { ApolloError, useApolloClient } from '@graphcommerce/graphql'
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { t } from '@lingui/macro'
 import { useEffect } from 'react'

package/hooks/useFormIsEmailAvailable.tsx

@@ -1,4 +1,4 @@
-import { useQuery } from '@apollo/client'
+import { useQuery } from '@graphcommerce/graphql'
 import { useFormAutoSubmit, useFormGqlQuery, useFormPersist } from '@graphcommerce/react-hook-form'
 import { useEffect, useState } from 'react'
 import { CustomerDocument } from './Customer.gql'

package/index.ts

@@ -1,6 +1,4 @@
 export * from './components'
 export * from './hooks'
-
 export * from './typePolicies'
-
-export * from './link/createAuthLink'
+export * from './link/createCustomerTokenLink'

package/link/{createAuthLink.ts → createCustomerTokenLink.ts}

@@ -1,8 +1,7 @@
-import { ApolloCache, NormalizedCacheObject } from '@apollo/client'
-import { setContext } from '@apollo/client/link/context'
+import { ApolloCache, NormalizedCacheObject, setContext } from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from '../hooks/CustomerToken.gql'
 
-export const createAuthLink = (cache: ApolloCache<NormalizedCacheObject>) =>
+export const createCustomerTokenLink = (cache: ApolloCache<NormalizedCacheObject>) =>
   setContext((_, context) => {
     if (!context.headers) context.headers = {}
     try {

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@graphcommerce/magento-customer",
-  "version": "3.6.44",
+  "version": "4.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
@@ -13,28 +10,23 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.10",
-    "@graphcommerce/prettier-config-pwa": "^3.0.5",
-    "@graphcommerce/typescript-config-pwa": "^3.1.2",
-    "@playwright/test": "^1.17.1"
+    "@graphcommerce/eslint-config-pwa": "^4.0.0",
+    "@graphcommerce/prettier-config-pwa": "^4.0.0",
+    "@graphcommerce/typescript-config-pwa": "^4.0.0",
+    "@playwright/test": "^1.18.1"
   },
   "dependencies": {
-    "@apollo/client": "^3.5.6",
-    "@graphcommerce/graphql": "^2.105.13",
-    "@graphcommerce/image": "^2.105.13",
-    "@graphcommerce/magento-graphql": "^2.104.13",
-    "@graphcommerce/magento-store": "^3.4.12",
-    "@graphcommerce/next-ui": "^3.25.3",
-    "@graphcommerce/react-hook-form": "^2.104.7",
-    "@lingui/macro": "^3.13.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "clsx": "^1.1.1",
-    "framer-motion": "^5.5.5",
-    "next": "^12.0.7",
+    "@graphcommerce/graphql": "^3.0.0",
+    "@graphcommerce/image": "^3.0.0",
+    "@graphcommerce/magento-graphql": "^3.0.0",
+    "@graphcommerce/magento-store": "^4.0.0",
+    "@graphcommerce/next-ui": "^4.0.0",
+    "@graphcommerce/react-hook-form": "^3.0.0",
+    "@lingui/macro": "^3.13.2",
+    "@mui/material": "^5.4.1",
+    "framer-motion": "^6.2.4",
+    "next": "^12.0.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
-  },
-  "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
+  }
 }

package/typePolicies.ts

@@ -1,4 +1,4 @@
-import { FieldPolicy } from '@apollo/client'
+import { FieldPolicy } from '@graphcommerce/graphql'
 import { CustomerToken, MigrateCache, Mutation, TypedTypePolicies } from '@graphcommerce/graphql'
 import { CustomerTokenDocument } from './hooks/CustomerToken.gql'
 import { IsEmailAvailableDocument } from './hooks/IsEmailAvailable.gql'