@graphcommerce/magento-customer 3.6.14 → 3.6.18
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.
- package/CHANGELOG.md +11 -0
- package/components/AccountAddresses/index.tsx +0 -4
- package/components/CustomerFab/index.tsx +7 -1
- package/components/DeleteCustomerAddressForm/index.tsx +5 -23
- package/components/NameFields/index.tsx +4 -3
- package/components/SignInForm/SignInForm.tsx +4 -11
- package/components/SignUpForm/SignUpForm.tsx +7 -6
- package/package.json +10 -10
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [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)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* added various translations ([66c089d](https://github.com/ho-nl/m2-pwa/commit/66c089dc458e2d7b9f0318b2e14d88cb0e6effc8))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [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)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -89,10 +89,6 @@ export default function AccountAddresses(props: AccountAddressesProps) {
|
|
|
89
89
|
<Trans>Add new address</Trans>
|
|
90
90
|
</Button>
|
|
91
91
|
</Link>
|
|
92
|
-
|
|
93
|
-
<MessageSnackbar sticky open={router.query.confirm_delete !== undefined}>
|
|
94
|
-
<Trans>Successfully deleted address</Trans>
|
|
95
|
-
</MessageSnackbar>
|
|
96
92
|
</SectionContainer>
|
|
97
93
|
)}
|
|
98
94
|
</>
|
|
@@ -26,7 +26,13 @@ function CustomerFabContent(props: CustomerFabContentProps) {
|
|
|
26
26
|
|
|
27
27
|
return (
|
|
28
28
|
<PageLink href={requireAuth ? guestHref : authHref} passHref>
|
|
29
|
-
<Fab
|
|
29
|
+
<Fab
|
|
30
|
+
color='inherit'
|
|
31
|
+
data-test-id='customer-fab'
|
|
32
|
+
aria-label={t`Account`}
|
|
33
|
+
size='large'
|
|
34
|
+
{...FabProps}
|
|
35
|
+
>
|
|
30
36
|
<StyledBadge
|
|
31
37
|
badgeContent={customerToken?.token ? 1 : 0}
|
|
32
38
|
color={customerToken?.valid ? 'primary' : 'error'}
|
|
@@ -1,47 +1,29 @@
|
|
|
1
|
+
import { ApolloErrorSnackbar } from '@graphcommerce/next-ui'
|
|
1
2
|
import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
|
|
2
3
|
import { Trans } from '@lingui/macro'
|
|
3
|
-
import { Button
|
|
4
|
-
import { useRouter } from 'next/router'
|
|
4
|
+
import { Button } from '@material-ui/core'
|
|
5
5
|
import React from 'react'
|
|
6
|
-
import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
|
|
7
6
|
import { DeleteCustomerAddressFormDocument } from './DeleteCustomerAddressForm.gql'
|
|
8
7
|
|
|
9
8
|
export type DeleteCustomerAddressFormProps = {
|
|
10
9
|
addressId?: number
|
|
11
10
|
}
|
|
12
11
|
|
|
13
|
-
const useStyles = makeStyles((theme: Theme) => ({
|
|
14
|
-
button: {
|
|
15
|
-
display: 'block',
|
|
16
|
-
color: theme.palette.primary.contrastText,
|
|
17
|
-
},
|
|
18
|
-
}))
|
|
19
|
-
|
|
20
12
|
export default function DeleteCustomerAddressForm(props: DeleteCustomerAddressFormProps) {
|
|
21
13
|
const { addressId } = props
|
|
22
|
-
const router = useRouter()
|
|
23
|
-
const classes = useStyles()
|
|
24
14
|
const { handleSubmit, error } = useFormGqlMutation(
|
|
25
15
|
DeleteCustomerAddressFormDocument,
|
|
26
|
-
{
|
|
27
|
-
defaultValues: {
|
|
28
|
-
id: addressId,
|
|
29
|
-
},
|
|
30
|
-
onComplete: () => {
|
|
31
|
-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
32
|
-
router.push({ pathname: '/account/addresses', query: 'confirm_delete' })
|
|
33
|
-
},
|
|
34
|
-
},
|
|
16
|
+
{ defaultValues: { id: addressId } },
|
|
35
17
|
{ errorPolicy: 'all' },
|
|
36
18
|
)
|
|
37
19
|
const submitHandler = handleSubmit(() => {})
|
|
38
20
|
|
|
39
21
|
return (
|
|
40
22
|
<form onSubmit={submitHandler} noValidate>
|
|
41
|
-
<Button type='submit' variant='text' color='
|
|
23
|
+
<Button type='submit' variant='text' color='primary'>
|
|
42
24
|
<Trans>Delete this address</Trans>
|
|
43
25
|
</Button>
|
|
44
|
-
<
|
|
26
|
+
<ApolloErrorSnackbar error={error} />
|
|
45
27
|
</form>
|
|
46
28
|
)
|
|
47
29
|
}
|
|
@@ -14,10 +14,11 @@ type NameFieldProps = {
|
|
|
14
14
|
form: UseFormReturn<any>
|
|
15
15
|
readOnly?: boolean
|
|
16
16
|
prefix?: boolean
|
|
17
|
+
prefixes?: string[]
|
|
17
18
|
}
|
|
18
19
|
|
|
19
20
|
export default function NameFields(props: NameFieldProps) {
|
|
20
|
-
const { prefix, form, readOnly } = props
|
|
21
|
+
const { prefix, form, readOnly, prefixes = [t`Mr`, t`Mrs`, t`Other`] } = props
|
|
21
22
|
assertFormGqlOperation<NameFieldValues>(form)
|
|
22
23
|
|
|
23
24
|
const { control, formState, muiRegister, required, valid } = form
|
|
@@ -27,7 +28,7 @@ export default function NameFields(props: NameFieldProps) {
|
|
|
27
28
|
{prefix && (
|
|
28
29
|
<FormRow>
|
|
29
30
|
<Controller
|
|
30
|
-
defaultValue=
|
|
31
|
+
defaultValue={prefixes[0]}
|
|
31
32
|
control={control}
|
|
32
33
|
name='prefix'
|
|
33
34
|
render={({ field: { ref, onChange, ...field }, fieldState }) => (
|
|
@@ -46,7 +47,7 @@ export default function NameFields(props: NameFieldProps) {
|
|
|
46
47
|
}}
|
|
47
48
|
{...field}
|
|
48
49
|
>
|
|
49
|
-
{
|
|
50
|
+
{prefixes.map((option) => (
|
|
50
51
|
<MenuItem key={option} value={option}>
|
|
51
52
|
{option}
|
|
52
53
|
</MenuItem>
|
|
@@ -25,7 +25,6 @@ type SignInFormProps = { email: string }
|
|
|
25
25
|
export default function SignInForm(props: SignInFormProps) {
|
|
26
26
|
const { email } = props
|
|
27
27
|
const classes = useStyles()
|
|
28
|
-
const { data } = useQuery(CustomerTokenDocument)
|
|
29
28
|
const form = useFormGqlMutation(
|
|
30
29
|
SignInDocument,
|
|
31
30
|
{ defaultValues: { email } },
|
|
@@ -39,16 +38,8 @@ export default function SignInForm(props: SignInFormProps) {
|
|
|
39
38
|
})
|
|
40
39
|
const submitHandler = handleSubmit(() => {})
|
|
41
40
|
|
|
42
|
-
const requireAuth = Boolean(data?.customerToken && !data?.customerToken.valid)
|
|
43
|
-
|
|
44
41
|
return (
|
|
45
42
|
<form onSubmit={submitHandler} noValidate>
|
|
46
|
-
{requireAuth && (
|
|
47
|
-
<Alert severity='error' variant='standard'>
|
|
48
|
-
Your session has expired, please reauthenticate
|
|
49
|
-
</Alert>
|
|
50
|
-
)}
|
|
51
|
-
|
|
52
43
|
<FormRow>
|
|
53
44
|
<TextField
|
|
54
45
|
key='password'
|
|
@@ -64,7 +55,9 @@ export default function SignInForm(props: SignInFormProps) {
|
|
|
64
55
|
InputProps={{
|
|
65
56
|
endAdornment: (
|
|
66
57
|
<PageLink href='/account/forgot-password' key='forgot-password' passHref>
|
|
67
|
-
<Link className={classes.forgotPass}>
|
|
58
|
+
<Link className={classes.forgotPass}>
|
|
59
|
+
<Trans>Forgot password?</Trans>
|
|
60
|
+
</Link>
|
|
68
61
|
</PageLink>
|
|
69
62
|
),
|
|
70
63
|
}}
|
|
@@ -84,7 +77,7 @@ export default function SignInForm(props: SignInFormProps) {
|
|
|
84
77
|
variant='contained'
|
|
85
78
|
size='large'
|
|
86
79
|
>
|
|
87
|
-
Log In
|
|
80
|
+
<Trans>Log In</Trans>
|
|
88
81
|
</Button>
|
|
89
82
|
</FormControl>
|
|
90
83
|
</FormActions>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
|
|
2
2
|
import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
|
|
3
3
|
import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
|
|
4
|
-
import { Trans } from '@lingui/macro'
|
|
4
|
+
import { t, Trans } from '@lingui/macro'
|
|
5
5
|
import { FormControlLabel, Switch, TextField } from '@material-ui/core'
|
|
6
6
|
import React from 'react'
|
|
7
7
|
import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
|
|
@@ -40,7 +40,7 @@ export default function SignUpForm(props: SignUpFormProps) {
|
|
|
40
40
|
required={required.password}
|
|
41
41
|
{...muiRegister('password', {
|
|
42
42
|
required: required.password,
|
|
43
|
-
minLength: { value: 8, message:
|
|
43
|
+
minLength: { value: 8, message: t`Password must have at least 8 characters` },
|
|
44
44
|
})}
|
|
45
45
|
helperText={formState.errors.password?.message || inputError?.message}
|
|
46
46
|
disabled={formState.isSubmitting}
|
|
@@ -49,12 +49,12 @@ export default function SignUpForm(props: SignUpFormProps) {
|
|
|
49
49
|
variant='outlined'
|
|
50
50
|
type='password'
|
|
51
51
|
error={!!formState.errors.confirmPassword}
|
|
52
|
-
label=
|
|
52
|
+
label={<Trans>Confirm Password</Trans>}
|
|
53
53
|
autoComplete='new-password'
|
|
54
54
|
required
|
|
55
55
|
{...muiRegister('confirmPassword', {
|
|
56
56
|
required: true,
|
|
57
|
-
validate: (value) => value === watchPassword ||
|
|
57
|
+
validate: (value) => value === watchPassword || t`Passwords don't match`,
|
|
58
58
|
})}
|
|
59
59
|
helperText={formState.errors.confirmPassword?.message}
|
|
60
60
|
disabled={formState.isSubmitting}
|
|
@@ -67,7 +67,7 @@ export default function SignUpForm(props: SignUpFormProps) {
|
|
|
67
67
|
control={<Switch color='primary' />}
|
|
68
68
|
{...muiRegister('isSubscribed', { required: required.isSubscribed })}
|
|
69
69
|
disabled={formState.isSubmitting}
|
|
70
|
-
label=
|
|
70
|
+
label={<Trans>Subscribe to newsletter</Trans>}
|
|
71
71
|
/>
|
|
72
72
|
|
|
73
73
|
<ApolloCustomerErrorAlert error={remainingError} />
|
|
@@ -75,12 +75,13 @@ export default function SignUpForm(props: SignUpFormProps) {
|
|
|
75
75
|
<FormActions>
|
|
76
76
|
<Button
|
|
77
77
|
type='submit'
|
|
78
|
+
data-test-id='create-account'
|
|
78
79
|
variant='contained'
|
|
79
80
|
color='primary'
|
|
80
81
|
size='large'
|
|
81
82
|
loading={formState.isSubmitting}
|
|
82
83
|
>
|
|
83
|
-
Create Account
|
|
84
|
+
<Trans>Create Account</Trans>
|
|
84
85
|
</Button>
|
|
85
86
|
</FormActions>
|
|
86
87
|
</form>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-customer",
|
|
3
|
-
"version": "3.6.
|
|
3
|
+
"version": "3.6.18",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
6
|
"browserslist": [
|
|
@@ -14,27 +14,27 @@
|
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@graphcommerce/browserslist-config-pwa": "^3.0.2",
|
|
17
|
-
"@graphcommerce/eslint-config-pwa": "^3.1.
|
|
17
|
+
"@graphcommerce/eslint-config-pwa": "^3.1.8",
|
|
18
18
|
"@graphcommerce/prettier-config-pwa": "^3.0.4",
|
|
19
19
|
"@graphcommerce/typescript-config-pwa": "^3.1.1",
|
|
20
20
|
"@playwright/test": "^1.17.1"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@apollo/client": "^3.5.6",
|
|
24
|
-
"@graphcommerce/graphql": "^2.105.
|
|
25
|
-
"@graphcommerce/image": "^2.105.
|
|
26
|
-
"@graphcommerce/magento-graphql": "^2.104.
|
|
27
|
-
"@graphcommerce/magento-store": "^3.3.
|
|
28
|
-
"@graphcommerce/next-ui": "^3.
|
|
29
|
-
"@graphcommerce/react-hook-form": "^2.104.
|
|
24
|
+
"@graphcommerce/graphql": "^2.105.9",
|
|
25
|
+
"@graphcommerce/image": "^2.105.8",
|
|
26
|
+
"@graphcommerce/magento-graphql": "^2.104.9",
|
|
27
|
+
"@graphcommerce/magento-store": "^3.3.18",
|
|
28
|
+
"@graphcommerce/next-ui": "^3.21.1",
|
|
29
|
+
"@graphcommerce/react-hook-form": "^2.104.4",
|
|
30
30
|
"@lingui/macro": "^3.13.0",
|
|
31
31
|
"@material-ui/core": "^4.12.3",
|
|
32
32
|
"@material-ui/lab": "^4.0.0-alpha.60",
|
|
33
33
|
"clsx": "^1.1.1",
|
|
34
|
-
"framer-motion": "^5.
|
|
34
|
+
"framer-motion": "^5.5.1",
|
|
35
35
|
"next": "^12.0.7",
|
|
36
36
|
"react": "^17.0.2",
|
|
37
37
|
"react-dom": "^17.0.2"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "6cab980582a62a8eee8d5f9bd77583cabc32c6f8"
|
|
40
40
|
}
|