@graphcommerce/magento-cart-email 3.0.37 → 3.0.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/EmailForm/EmailForm.tsx +44 -52
  3. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,44 @@
1
1
  # Change Log
2
2
 
3
+ ## 3.0.40
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [[`e167992df`](https://github.com/graphcommerce-org/graphcommerce/commit/e167992dfdc6964a392af719667f8a188626ab1b), [`9c2504b4e`](https://github.com/graphcommerce-org/graphcommerce/commit/9c2504b4ed75f41d3003c4d3339814010e85e37e)]:
8
+ - @graphcommerce/next-ui@4.15.0
9
+ - @graphcommerce/magento-cart@4.6.2
10
+ - @graphcommerce/magento-customer@4.8.2
11
+ - @graphcommerce/magento-product@4.4.18
12
+ - @graphcommerce/magento-store@4.2.20
13
+
14
+ ## 3.0.39
15
+
16
+ ### Patch Changes
17
+
18
+ - [#1557](https://github.com/graphcommerce-org/graphcommerce/pull/1557) [`84428ccab`](https://github.com/graphcommerce-org/graphcommerce/commit/84428ccab8d1d263893766197076651eae68759c) Thanks [@paales](https://github.com/paales)! - Use WaitForQuery component to handle the loading state
19
+
20
+ - Updated dependencies [[`01f1588c9`](https://github.com/graphcommerce-org/graphcommerce/commit/01f1588c9200bb39dd61146e260bfa2b32060612), [`84428ccab`](https://github.com/graphcommerce-org/graphcommerce/commit/84428ccab8d1d263893766197076651eae68759c), [`2ce406727`](https://github.com/graphcommerce-org/graphcommerce/commit/2ce406727c01a3367cea26c331d8455748592ce9)]:
21
+ - @graphcommerce/graphql@3.4.3
22
+ - @graphcommerce/magento-customer@4.8.1
23
+ - @graphcommerce/magento-cart@4.6.1
24
+ - @graphcommerce/magento-product@4.4.17
25
+ - @graphcommerce/magento-store@4.2.19
26
+
27
+ ## 3.0.38
28
+
29
+ ### Patch Changes
30
+
31
+ - [#1553](https://github.com/graphcommerce-org/graphcommerce/pull/1553) [`4ad45a2f3`](https://github.com/graphcommerce-org/graphcommerce/commit/4ad45a2f3389838c33da8c447f9647c1cd17aa91) Thanks [@NickdeK](https://github.com/NickdeK)! - Made the EmailForm much simpler, so it doesn't rerender as often by stripping out the registration flow inside that form
32
+
33
+ - Updated dependencies [[`1afc6a547`](https://github.com/graphcommerce-org/graphcommerce/commit/1afc6a5473d6e31f47b5d0188801803b31865290), [`03d01c06c`](https://github.com/graphcommerce-org/graphcommerce/commit/03d01c06c6dc13df8d38ab5b40bd100c567a9e8d), [`4a4579bb2`](https://github.com/graphcommerce-org/graphcommerce/commit/4a4579bb2f7da378f3fcc504405caf2560dc10f6), [`afcd8e4bf`](https://github.com/graphcommerce-org/graphcommerce/commit/afcd8e4bfb7010da4d5faeed85b61991ed7975f4), [`02e1988e5`](https://github.com/graphcommerce-org/graphcommerce/commit/02e1988e5f361c6f66ae30d3bbee38ef2ac062df), [`323fdee4b`](https://github.com/graphcommerce-org/graphcommerce/commit/323fdee4b15ae23e0e84dd0588cb2c6446dcfd50), [`d03f0860b`](https://github.com/graphcommerce-org/graphcommerce/commit/d03f0860b882db4f280d9467aef9d66e56c1c030), [`b68d0b44a`](https://github.com/graphcommerce-org/graphcommerce/commit/b68d0b44a87688c80fb0aa4a5c840f262ce48d2f)]:
34
+ - @graphcommerce/graphql@3.4.2
35
+ - @graphcommerce/magento-cart@4.6.0
36
+ - @graphcommerce/magento-customer@4.8.0
37
+ - @graphcommerce/react-hook-form@3.3.1
38
+ - @graphcommerce/next-ui@4.14.0
39
+ - @graphcommerce/magento-product@4.4.16
40
+ - @graphcommerce/magento-store@4.2.18
41
+
3
42
  ## 3.0.37
4
43
 
5
44
  ### Patch Changes
package/EmailForm/EmailForm.tsx CHANGED
@@ -1,77 +1,59 @@
1
- import { useMutation } from '@graphcommerce/graphql'
1
+ import { WaitForQueries } from '@graphcommerce/ecommerce-ui'
2
+ import { useQuery } from '@graphcommerce/graphql'
2
3
  import {
3
4
  ApolloCartErrorAlert,
4
5
  useCartQuery,
5
- useMergeCustomerCart,
6
+ useFormGqlMutationCart,
6
7
  } from '@graphcommerce/magento-cart'
8
+ import { IsEmailAvailableDocument } from '@graphcommerce/magento-customer'
9
+ import { extendableComponent, FormRow } from '@graphcommerce/next-ui'
7
10
  import {
8
- SignInFormInline,
9
- SignUpFormInline,
10
- useFormIsEmailAvailable,
11
- } from '@graphcommerce/magento-customer'
12
- import { AnimatedRow, extendableComponent, FormDiv, FormRow } from '@graphcommerce/next-ui'
13
- import { emailPattern, useFormCompose, UseFormComposeOptions } from '@graphcommerce/react-hook-form'
11
+ emailPattern,
12
+ useFormAutoSubmit,
13
+ useFormCompose,
14
+ UseFormComposeOptions,
15
+ } from '@graphcommerce/react-hook-form'
14
16
  import { Trans } from '@lingui/react'
15
- import { CircularProgress, TextField, Typography, Alert, Button } from '@mui/material'
16
- import { AnimatePresence } from 'framer-motion'
17
+ import { TextField, Typography, Button, NoSsr, SxProps, Box, Theme } from '@mui/material'
17
18
  import PageLink from 'next/link'
18
- import React, { useEffect, useState } from 'react'
19
+ import React from 'react'
19
20
  import { CartEmailDocument } from './CartEmail.gql'
20
21
  import { SetGuestEmailOnCartDocument } from './SetGuestEmailOnCart.gql'
21
22
 
22
23
  export type EmailFormProps = Pick<UseFormComposeOptions, 'step'> & {
23
24
  children?: React.ReactNode
25
+ sx?: SxProps<Theme>
24
26
  }
25
27
 
26
28
  const name = 'EmailForm' as const
27
29
  const parts = ['root', 'formRow'] as const
28
30
  const { classes } = extendableComponent(name, parts)
29
31
 
30
- export function EmailForm(props: EmailFormProps) {
31
- const { step, children } = props
32
+ export const EmailForm = React.memo<EmailFormProps>((props) => {
33
+ const { step, sx } = props
32
34
 
33
- const [setGuestEmailOnCart] = useMutation(SetGuestEmailOnCartDocument)
34
- const { data: cartData } = useCartQuery(CartEmailDocument)
35
+ const cartEmail = useCartQuery(CartEmailDocument, { hydration: true })
35
36
 
36
- const { mode, form, submit } = useFormIsEmailAvailable({ email: cartData?.cart?.email })
37
+ const email = cartEmail.data?.cart?.email ?? ''
37
38
 
38
- const { formState, muiRegister, required, watch, error, getValues } = form
39
+ const form = useFormGqlMutationCart(SetGuestEmailOnCartDocument, {
40
+ mode: 'onChange',
41
+ defaultValues: { email },
42
+ })
39
43
 
40
- useFormCompose({ form, step, submit, key: 'EmailForm' })
41
-
42
- useEffect(() => {
43
- if (!cartData?.cart?.id) return
44
-
45
- // Customer isn't logged in, but we do have a valid email
46
- if (mode === 'signin' || mode === 'signup') {
47
- const [email] = getValues(['email'])
48
-
49
- if (cartData.cart.email === email) return
50
- // eslint-disable-next-line @typescript-eslint/no-floating-promises
51
- setGuestEmailOnCart({ variables: { email, cartId: cartData.cart.id } })
52
- }
53
- }, [mode, getValues, cartData?.cart?.id, setGuestEmailOnCart, cartData?.cart?.email])
44
+ const isEmailAvailable = useQuery(IsEmailAvailableDocument, {
45
+ variables: { email },
46
+ skip: !email,
47
+ })
54
48
 
55
- let endAdornment: React.ReactNode = null
49
+ const { formState, muiRegister, required, error, handleSubmit } = form
50
+ const submit = handleSubmit(() => {})
56
51
 
57
- if (mode === 'signin') {
58
- endAdornment = (
59
- <PageLink href='/account/signin' passHref>
60
- <Button color='secondary' style={{ whiteSpace: 'nowrap' }}>
61
- <Trans id='Sign in' />
62
- </Button>
63
- </PageLink>
64
- )
65
- }
66
- if (formState.isSubmitting) endAdornment = <CircularProgress />
52
+ useFormCompose({ form, step, submit, key: 'EmailForm' })
53
+ useFormAutoSubmit({ form, submit })
67
54
 
68
55
  return (
69
- <form noValidate onSubmit={submit}>
70
- <FormRow>
71
- <Typography variant='h5' component='h2' gutterBottom>
72
- <Trans id='Personal details' />
73
- </Typography>
74
- </FormRow>
56
+ <Box component='form' noValidate onSubmit={submit} sx={sx}>
75
57
  <FormRow className={classes.formRow} sx={{ py: 0 }}>
76
58
  <TextField
77
59
  variant='outlined'
@@ -80,18 +62,28 @@ export function EmailForm(props: EmailFormProps) {
80
62
  helperText={formState.isSubmitted && formState.errors.email?.message}
81
63
  label={<Trans id='Email' />}
82
64
  required={required.email}
65
+ disabled={cartEmail.loading}
83
66
  {...muiRegister('email', {
84
67
  required: required.email,
85
68
  pattern: { value: emailPattern, message: '' },
86
69
  })}
87
70
  InputProps={{
88
71
  autoComplete: 'email',
89
- endAdornment,
90
- readOnly: mode === 'signedin' || mode === 'session-expired',
72
+ endAdornment: (
73
+ <WaitForQueries waitFor={isEmailAvailable}>
74
+ {isEmailAvailable.data?.isEmailAvailable && (
75
+ <PageLink href='/account/signin' passHref>
76
+ <Button color='secondary' style={{ whiteSpace: 'nowrap' }}>
77
+ <Trans id='Sign in' />
78
+ </Button>
79
+ </PageLink>
80
+ )}
81
+ </WaitForQueries>
82
+ ),
91
83
  }}
92
84
  />
93
85
  </FormRow>
94
86
  <ApolloCartErrorAlert error={error} />
95
- </form>
87
+ </Box>
96
88
  )
97
- }
89
+ })
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/magento-cart-email",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "3.0.37",
5
+ "version": "3.0.40",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -18,14 +18,14 @@
18
18
  "@playwright/test": "^1.21.1"
19
19
  },
20
20
  "dependencies": {
21
- "@graphcommerce/graphql": "3.4.1",
21
+ "@graphcommerce/graphql": "3.4.3",
22
22
  "@graphcommerce/image": "3.1.7",
23
- "@graphcommerce/magento-cart": "4.5.2",
24
- "@graphcommerce/magento-customer": "4.7.2",
25
- "@graphcommerce/magento-product": "4.4.15",
26
- "@graphcommerce/magento-store": "4.2.17",
27
- "@graphcommerce/next-ui": "4.13.1",
28
- "@graphcommerce/react-hook-form": "3.3.0"
23
+ "@graphcommerce/magento-cart": "4.6.2",
24
+ "@graphcommerce/magento-customer": "4.8.2",
25
+ "@graphcommerce/magento-product": "4.4.18",
26
+ "@graphcommerce/magento-store": "4.2.20",
27
+ "@graphcommerce/next-ui": "4.15.0",
28
+ "@graphcommerce/react-hook-form": "3.3.1"
29
29
  },
30
30
  "peerDependencies": {
31
31
  "@lingui/react": "^3.13.2",