@graphcommerce/magento-customer 3.6.13 → 3.6.17

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.6.17](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-customer@3.6.16...@graphcommerce/magento-customer@3.6.17) (2021-12-17)
+
+
+### Bug Fixes
+
+* added various translations ([66c089d](https://github.com/ho-nl/m2-pwa/commit/66c089dc458e2d7b9f0318b2e14d88cb0e6effc8))
+
+
+
+
+
 # [3.6.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-customer@3.5.6...@graphcommerce/magento-customer@3.6.0) (2021-11-12)
 
 

package/components/AccountAddresses/index.tsx

@@ -89,10 +89,6 @@ export default function AccountAddresses(props: AccountAddressesProps) {
               <Trans>Add new address</Trans>
             </Button>
           </Link>
-
-          <MessageSnackbar sticky open={router.query.confirm_delete !== undefined}>
-            <Trans>Successfully deleted address</Trans>
-          </MessageSnackbar>
         </SectionContainer>
       )}
     </>

package/components/AddressSingleLine/index.tsx

@@ -21,14 +21,16 @@ export default function AddressSingleLine(props: CustomerAddressFragment) {
   // todo: detect correct format by locale
   // for now, US format will be returned by default
 
-  let address = `$company ${prefix}, ${firstname}, $middlename ${lastname}, $suffix ${
-    street?.[0]
-  }, ${street?.slice(1).join(' ')}, ${postcode}, ${city}, ${regionName} $countryName`
-
-  address = address.replace('$company', company ? `${company},` : '')
-  address = address.replace('$middlename', middlename ? `${middlename},` : '')
-  address = address.replace('$suffix', suffix ? `${suffix},` : '')
-  address = address.replace('$countryName', countryName ? `${countryName},` : '')
+  const addressLine = [
+    company,
+    `${prefix} ${firstname} ${middlename} ${lastname} ${suffix}`,
+    `${street?.[0]} ${street?.[1]}`,
+    ...(street?.slice(2) ?? []),
+    `${postcode} ${city}`,
+    `${regionName} ${countryName}`,
+  ]
+    .map((v) => (v ?? '').replaceAll('null', '').replace(/\s\s+/g, ' ').trim())
+    .filter(Boolean)
 
-  return <>{address}</>
+  return <>{addressLine.join(', ')}</>
 }

package/components/CustomerFab/index.tsx

@@ -26,7 +26,13 @@ function CustomerFabContent(props: CustomerFabContentProps) {
 
   return (
     <PageLink href={requireAuth ? guestHref : authHref} passHref>
-      <Fab color='inherit' aria-label={t`Account`} size='large' {...FabProps}>
+      <Fab
+        color='inherit'
+        data-test-id='customer-fab'
+        aria-label={t`Account`}
+        size='large'
+        {...FabProps}
+      >
         <StyledBadge
           badgeContent={customerToken?.token ? 1 : 0}
           color={customerToken?.valid ? 'primary' : 'error'}

package/components/DeleteCustomerAddressForm/index.tsx

@@ -1,47 +1,29 @@
+import { ApolloErrorSnackbar } from '@graphcommerce/next-ui'
 import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
-import { Button, makeStyles, Theme } from '@material-ui/core'
-import { useRouter } from 'next/router'
+import { Button } from '@material-ui/core'
 import React from 'react'
-import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
 import { DeleteCustomerAddressFormDocument } from './DeleteCustomerAddressForm.gql'
 
 export type DeleteCustomerAddressFormProps = {
   addressId?: number
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  button: {
-    display: 'block',
-    color: theme.palette.primary.contrastText,
-  },
-}))
-
 export default function DeleteCustomerAddressForm(props: DeleteCustomerAddressFormProps) {
   const { addressId } = props
-  const router = useRouter()
-  const classes = useStyles()
   const { handleSubmit, error } = useFormGqlMutation(
     DeleteCustomerAddressFormDocument,
-    {
-      defaultValues: {
-        id: addressId,
-      },
-      onComplete: () => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
-        router.push({ pathname: '/account/addresses', query: 'confirm_delete' })
-      },
-    },
+    { defaultValues: { id: addressId } },
     { errorPolicy: 'all' },
   )
   const submitHandler = handleSubmit(() => {})
 
   return (
     <form onSubmit={submitHandler} noValidate>
-      <Button type='submit' variant='text' color='inherit' className={classes.button}>
+      <Button type='submit' variant='text' color='primary'>
         <Trans>Delete this address</Trans>
       </Button>
-      <ApolloCustomerErrorAlert error={error} />
+      <ApolloErrorSnackbar error={error} />
     </form>
   )
 }

package/components/NameFields/index.tsx

@@ -14,10 +14,11 @@ type NameFieldProps = {
   form: UseFormReturn<any>
   readOnly?: boolean
   prefix?: boolean
+  prefixes?: string[]
 }
 
 export default function NameFields(props: NameFieldProps) {
-  const { prefix, form, readOnly } = props
+  const { prefix, form, readOnly, prefixes = [t`Mr`, t`Mrs`, t`Other`] } = props
   assertFormGqlOperation<NameFieldValues>(form)
 
   const { control, formState, muiRegister, required, valid } = form
@@ -27,7 +28,7 @@ export default function NameFields(props: NameFieldProps) {
       {prefix && (
         <FormRow>
           <Controller
-            defaultValue='Dhr.'
+            defaultValue={prefixes[0]}
             control={control}
             name='prefix'
             render={({ field: { ref, onChange, ...field }, fieldState }) => (
@@ -46,7 +47,7 @@ export default function NameFields(props: NameFieldProps) {
                 }}
                 {...field}
               >
-                {[t`Mr`, t`Mrs`, t`Other`].map((option) => (
+                {prefixes.map((option) => (
                   <MenuItem key={option} value={option}>
                     {option}
                   </MenuItem>

package/components/SignInForm/SignInForm.tsx

@@ -25,7 +25,6 @@ type SignInFormProps = { email: string }
 export default function SignInForm(props: SignInFormProps) {
   const { email } = props
   const classes = useStyles()
-  const { data } = useQuery(CustomerTokenDocument)
   const form = useFormGqlMutation(
     SignInDocument,
     { defaultValues: { email } },
@@ -39,16 +38,8 @@ export default function SignInForm(props: SignInFormProps) {
   })
   const submitHandler = handleSubmit(() => {})
 
-  const requireAuth = Boolean(data?.customerToken && !data?.customerToken.valid)
-
   return (
     <form onSubmit={submitHandler} noValidate>
-      {requireAuth && (
-        <Alert severity='error' variant='standard'>
-          Your session has expired, please reauthenticate
-        </Alert>
-      )}
-
       <FormRow>
         <TextField
           key='password'
@@ -64,7 +55,9 @@ export default function SignInForm(props: SignInFormProps) {
           InputProps={{
             endAdornment: (
               <PageLink href='/account/forgot-password' key='forgot-password' passHref>
-                <Link className={classes.forgotPass}>Forgot password?</Link>
+                <Link className={classes.forgotPass}>
+                  <Trans>Forgot password?</Trans>
+                </Link>
               </PageLink>
             ),
           }}
@@ -84,7 +77,7 @@ export default function SignInForm(props: SignInFormProps) {
             variant='contained'
             size='large'
           >
-            Log In
+            <Trans>Log In</Trans>
           </Button>
         </FormControl>
       </FormActions>

package/components/SignUpForm/SignUpForm.tsx

@@ -1,7 +1,7 @@
 import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
 import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
 import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
-import { Trans } from '@lingui/macro'
+import { t, Trans } from '@lingui/macro'
 import { FormControlLabel, Switch, TextField } from '@material-ui/core'
 import React from 'react'
 import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
@@ -40,7 +40,7 @@ export default function SignUpForm(props: SignUpFormProps) {
           required={required.password}
           {...muiRegister('password', {
             required: required.password,
-            minLength: { value: 8, message: 'Password must have at least 8 characters' },
+            minLength: { value: 8, message: t`Password must have at least 8 characters` },
           })}
           helperText={formState.errors.password?.message || inputError?.message}
           disabled={formState.isSubmitting}
@@ -49,12 +49,12 @@ export default function SignUpForm(props: SignUpFormProps) {
           variant='outlined'
           type='password'
           error={!!formState.errors.confirmPassword}
-          label='Confirm Password'
+          label={<Trans>Confirm Password</Trans>}
           autoComplete='new-password'
           required
           {...muiRegister('confirmPassword', {
             required: true,
-            validate: (value) => value === watchPassword || "Passwords don't match",
+            validate: (value) => value === watchPassword || t`Passwords don't match`,
           })}
           helperText={formState.errors.confirmPassword?.message}
           disabled={formState.isSubmitting}
@@ -67,7 +67,7 @@ export default function SignUpForm(props: SignUpFormProps) {
         control={<Switch color='primary' />}
         {...muiRegister('isSubscribed', { required: required.isSubscribed })}
         disabled={formState.isSubmitting}
-        label='Subscribe to newsletter'
+        label={<Trans>Subscribe to newsletter</Trans>}
       />
 
       <ApolloCustomerErrorAlert error={remainingError} />
@@ -75,12 +75,13 @@ export default function SignUpForm(props: SignUpFormProps) {
       <FormActions>
         <Button
           type='submit'
+          data-test-id='create-account'
           variant='contained'
           color='primary'
           size='large'
           loading={formState.isSubmitting}
         >
-          Create Account
+          <Trans>Create Account</Trans>
         </Button>
       </FormActions>
     </form>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-customer",
-  "version": "3.6.13",
+  "version": "3.6.17",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,27 +14,27 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.7",
+    "@graphcommerce/eslint-config-pwa": "^3.1.8",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.17.1"
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/graphql": "^2.105.7",
-    "@graphcommerce/image": "^2.105.6",
-    "@graphcommerce/magento-graphql": "^2.104.7",
-    "@graphcommerce/magento-store": "^3.3.13",
-    "@graphcommerce/next-ui": "^3.20.6",
-    "@graphcommerce/react-hook-form": "^2.104.2",
+    "@graphcommerce/graphql": "^2.105.9",
+    "@graphcommerce/image": "^2.105.8",
+    "@graphcommerce/magento-graphql": "^2.104.9",
+    "@graphcommerce/magento-store": "^3.3.17",
+    "@graphcommerce/next-ui": "^3.21.0",
+    "@graphcommerce/react-hook-form": "^2.104.4",
     "@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": "^4.1.17",
+    "framer-motion": "^5.5.1",
     "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "d1e17a76798279be4ceb3429238e1e736061899b"
+  "gitHead": "f18eba6b141623d926f5ae3a6efc1409d3bd365c"
 }