@graphcommerce/magento-customer 10.0.4-canary.0 → 10.1.0-canary.13
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
CHANGED
|
@@ -1,5 +1,55 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 10.1.0-canary.13
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#2620](https://github.com/graphcommerce-org/graphcommerce/pull/2620) [`43a0ed2`](https://github.com/graphcommerce-org/graphcommerce/commit/43a0ed29a39a40c6af619fd70fb25fd800ccbf69) - `SignUpForm` now accepts `fieldsets` and `render` props (mirroring `CustomerUpdateForm`), so consumers can group dynamic customer attributes into custom labelled sections via `AttributesFormAutoLayout`. Defaults to the existing `[nameFieldset(attributes)]` / `CustomerAttributeField` behaviour, so unchanged for projects that don't supply the props.
|
|
8
|
+
|
|
9
|
+
This avoids the unstyled, untranslated `Other` fallback header that `AttributesFormAutoLayout` adds whenever attributes don't fit any registered fieldset — projects that extend the customer schema (e.g. with a `club` attribute) can now declare their own fieldset alongside `nameFieldset`.
|
|
10
|
+
|
|
11
|
+
The fallback header itself in `AttributesFormAutoLayout` is now wrapped in `<Trans>Other</Trans>` so it picks up project translations instead of rendering as a hardcoded English string.
|
|
12
|
+
|
|
13
|
+
Bug fix in `nameFieldset`: when a store doesn't register `dob`/`gender` on the registration form, the `additional` row was empty and the helper produced `grid-template-areas: "firstname lastname" ""`, which is invalid CSS and made the whole declaration fall back to the default single-column layout — firstname/lastname stacked on separate rows even at md+. Empty rows are now filtered out, so the side-by-side md layout works as intended. ([@paales](https://github.com/paales))
|
|
14
|
+
|
|
15
|
+
## 10.1.0-canary.12
|
|
16
|
+
|
|
17
|
+
## 10.1.0-canary.11
|
|
18
|
+
|
|
19
|
+
## 10.1.0-canary.10
|
|
20
|
+
|
|
21
|
+
### Minor Changes
|
|
22
|
+
|
|
23
|
+
- [#2620](https://github.com/graphcommerce-org/graphcommerce/pull/2620) [`43a0ed2`](https://github.com/graphcommerce-org/graphcommerce/commit/43a0ed29a39a40c6af619fd70fb25fd800ccbf69) - `SignUpForm` now accepts `fieldsets` and `render` props (mirroring `CustomerUpdateForm`), so consumers can group dynamic customer attributes into custom labelled sections via `AttributesFormAutoLayout`. Defaults to the existing `[nameFieldset(attributes)]` / `CustomerAttributeField` behaviour, so unchanged for projects that don't supply the props.
|
|
24
|
+
|
|
25
|
+
This avoids the unstyled, untranslated `Other` fallback header that `AttributesFormAutoLayout` adds whenever attributes don't fit any registered fieldset — projects that extend the customer schema (e.g. with a `club` attribute) can now declare their own fieldset alongside `nameFieldset`.
|
|
26
|
+
|
|
27
|
+
The fallback header itself in `AttributesFormAutoLayout` is now wrapped in `<Trans>Other</Trans>` so it picks up project translations instead of rendering as a hardcoded English string.
|
|
28
|
+
|
|
29
|
+
Bug fix in `nameFieldset`: when a store doesn't register `dob`/`gender` on the registration form, the `additional` row was empty and the helper produced `grid-template-areas: "firstname lastname" ""`, which is invalid CSS and made the whole declaration fall back to the default single-column layout — firstname/lastname stacked on separate rows even at md+. Empty rows are now filtered out, so the side-by-side md layout works as intended. ([@paales](https://github.com/paales))
|
|
30
|
+
|
|
31
|
+
## 10.1.0-canary.9
|
|
32
|
+
|
|
33
|
+
## 10.1.0-canary.8
|
|
34
|
+
|
|
35
|
+
## 10.1.0-canary.7
|
|
36
|
+
|
|
37
|
+
## 10.1.0-canary.6
|
|
38
|
+
|
|
39
|
+
## 10.1.0-canary.5
|
|
40
|
+
|
|
41
|
+
## 10.1.0-canary.4
|
|
42
|
+
|
|
43
|
+
## 10.1.0-canary.3
|
|
44
|
+
|
|
45
|
+
## 10.0.4-canary.2
|
|
46
|
+
|
|
47
|
+
### Patch Changes
|
|
48
|
+
|
|
49
|
+
- [#2598](https://github.com/graphcommerce-org/graphcommerce/pull/2598) [`fa1eeae`](https://github.com/graphcommerce-org/graphcommerce/commit/fa1eeaeb10db1d465dd0f7a07d643862921c3c04) - Override signup props and update strings ([@paales](https://github.com/paales))
|
|
50
|
+
|
|
51
|
+
## 10.0.4-canary.1
|
|
52
|
+
|
|
3
53
|
## 10.0.4-canary.0
|
|
4
54
|
|
|
5
55
|
## 10.0.3
|
|
@@ -30,13 +30,34 @@ import { SignUpForm } from '../SignUpForm/SignUpForm'
|
|
|
30
30
|
export type AccountSignInUpFormProps = {
|
|
31
31
|
sx?: SxProps<Theme>
|
|
32
32
|
signUpDisabled?: React.ReactNode
|
|
33
|
+
/** Override the title shown in the initial email step */
|
|
34
|
+
emailTitle?: React.ReactNode
|
|
35
|
+
/** Override the subtitle shown in the initial email step */
|
|
36
|
+
emailSubtitle?: React.ReactNode
|
|
37
|
+
/** Override the title shown in the sign-in step */
|
|
38
|
+
signInTitle?: React.ReactNode
|
|
39
|
+
/** Override the subtitle shown in the sign-in step */
|
|
40
|
+
signInSubtitle?: React.ReactNode
|
|
41
|
+
/** Override the title shown in the sign-up step */
|
|
42
|
+
signUpTitle?: React.ReactNode
|
|
43
|
+
/** Override the subtitle shown in the sign-up step */
|
|
44
|
+
signUpSubtitle?: React.ReactNode
|
|
33
45
|
}
|
|
34
46
|
|
|
35
47
|
const parts = ['root', 'titleContainer'] as const
|
|
36
48
|
const { classes } = extendableComponent('AccountSignInUpForm', parts)
|
|
37
49
|
|
|
38
50
|
export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
|
|
39
|
-
const {
|
|
51
|
+
const {
|
|
52
|
+
sx = [],
|
|
53
|
+
signUpDisabled,
|
|
54
|
+
emailTitle,
|
|
55
|
+
emailSubtitle,
|
|
56
|
+
signInTitle,
|
|
57
|
+
signInSubtitle,
|
|
58
|
+
signUpTitle,
|
|
59
|
+
signUpSubtitle,
|
|
60
|
+
} = props
|
|
40
61
|
const customerEmailQuery = useCustomerQuery(UseCustomerValidateTokenDocument)
|
|
41
62
|
const customerQuery = useCustomerQuery(CustomerDocument)
|
|
42
63
|
|
|
@@ -69,10 +90,10 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
|
|
|
69
90
|
{mode === 'email' && (
|
|
70
91
|
<>
|
|
71
92
|
<LayoutTitle variant='h2' gutterBottom={false}>
|
|
72
|
-
<Trans>Sign in or create an account!</Trans>
|
|
93
|
+
{emailTitle ?? <Trans>Sign in or create an account!</Trans>}
|
|
73
94
|
</LayoutTitle>
|
|
74
95
|
<Typography variant='h6' align='center'>
|
|
75
|
-
<Trans>Fill in your e-mail to login or create an account</Trans>
|
|
96
|
+
{emailSubtitle ?? <Trans>Fill in your e-mail to login or create an account</Trans>}
|
|
76
97
|
</Typography>
|
|
77
98
|
</>
|
|
78
99
|
)}
|
|
@@ -80,10 +101,10 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
|
|
|
80
101
|
{(mode === 'signin' || (mode === 'signup' && !canSignUp)) && (
|
|
81
102
|
<>
|
|
82
103
|
<LayoutTitle variant='h2' gutterBottom={false}>
|
|
83
|
-
<Trans>Sign in</Trans>
|
|
104
|
+
{signInTitle ?? <Trans>Sign in</Trans>}
|
|
84
105
|
</LayoutTitle>
|
|
85
106
|
<Typography variant='h6' align='center'>
|
|
86
|
-
<Trans>Fill in your password</Trans>
|
|
107
|
+
{signInSubtitle ?? <Trans>Fill in your password</Trans>}
|
|
87
108
|
</Typography>
|
|
88
109
|
</>
|
|
89
110
|
)}
|
|
@@ -91,10 +112,10 @@ export function AccountSignInUpForm(props: AccountSignInUpFormProps) {
|
|
|
91
112
|
{mode === 'signup' && canSignUp && (
|
|
92
113
|
<>
|
|
93
114
|
<LayoutTitle variant='h2' gutterBottom={false}>
|
|
94
|
-
<Trans>Create account!</Trans>
|
|
115
|
+
{signUpTitle ?? <Trans>Create account!</Trans>}
|
|
95
116
|
</LayoutTitle>
|
|
96
117
|
<Typography variant='h6' align='center'>
|
|
97
|
-
<Trans>
|
|
118
|
+
{signUpSubtitle ?? <Trans>Enter your details to create your account</Trans>}
|
|
98
119
|
</Typography>
|
|
99
120
|
</>
|
|
100
121
|
)}
|
|
@@ -19,13 +19,21 @@ export function nameFieldset(
|
|
|
19
19
|
|
|
20
20
|
const additional = extractAttributes(attributes, ['dob', 'gender'])[0].map((f) => f.code)
|
|
21
21
|
|
|
22
|
+
// Skip empty rows — an empty `""` row produces invalid `grid-template-areas`
|
|
23
|
+
// and silently makes the whole declaration fall back to the default
|
|
24
|
+
// single-column layout. Hit when a store doesn't register `dob`/`gender` on
|
|
25
|
+
// the registration form, leaving `additional` empty.
|
|
26
|
+
const rows = [nameFields, additional]
|
|
27
|
+
.filter((row) => row.length > 0)
|
|
28
|
+
.map((row) => `"${row.join(' ')}"`)
|
|
29
|
+
|
|
22
30
|
return {
|
|
23
31
|
label: withLabel ? <Trans>Name</Trans> : undefined,
|
|
24
32
|
gridAreas: [...nameFields, ...additional],
|
|
25
33
|
// xs is shown in one column by default
|
|
26
34
|
sx: {
|
|
27
35
|
gridTemplateAreas: {
|
|
28
|
-
md:
|
|
36
|
+
md: rows.join(' '),
|
|
29
37
|
},
|
|
30
38
|
},
|
|
31
39
|
}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { FormPersist, PasswordRepeatElement, SwitchElement } from '@graphcommerce/ecommerce-ui'
|
|
2
2
|
import { useQuery } from '@graphcommerce/graphql'
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
AttributesFormAutoLayout,
|
|
5
|
+
StoreConfigDocument,
|
|
6
|
+
type AttributeFormAutoLayoutProps,
|
|
7
|
+
} from '@graphcommerce/magento-store'
|
|
4
8
|
import { magentoVersion } from '@graphcommerce/next-config/config'
|
|
5
9
|
import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
|
|
6
10
|
import type { UseFormClearErrors, UseFormSetError } from '@graphcommerce/react-hook-form'
|
|
@@ -11,18 +15,24 @@ import { useSignInForm } from '../../hooks/useSignInForm'
|
|
|
11
15
|
import { ApolloCustomerErrorSnackbar } from '../ApolloCustomerError/ApolloCustomerErrorSnackbar'
|
|
12
16
|
import { CustomerAttributeField } from '../CustomerForms/CustomerAttributeField'
|
|
13
17
|
import { nameFieldset } from '../CustomerForms/nameFieldset'
|
|
14
|
-
import {
|
|
18
|
+
import {
|
|
19
|
+
useCustomerCreateForm,
|
|
20
|
+
type CreateCustomerFormValues,
|
|
21
|
+
} from '../CustomerForms/useCustomerCreateForm'
|
|
15
22
|
import { NameFields } from '../NameFields/NameFields'
|
|
16
23
|
import { ValidatedPasswordElement } from '../ValidatedPasswordElement/ValidatedPasswordElement'
|
|
17
24
|
|
|
18
|
-
type SignUpFormProps =
|
|
25
|
+
export type SignUpFormProps = Pick<
|
|
26
|
+
AttributeFormAutoLayoutProps<CreateCustomerFormValues, 'CustomerAttributeMetadata'>,
|
|
27
|
+
'fieldsets' | 'render'
|
|
28
|
+
> & {
|
|
19
29
|
email?: string
|
|
20
30
|
setError: UseFormSetError<{ email?: string; requestedMode?: 'signin' | 'signup' }>
|
|
21
31
|
clearErrors: UseFormClearErrors<{ email?: string; requestedMode?: 'signin' | 'signup' }>
|
|
22
32
|
}
|
|
23
33
|
|
|
24
34
|
export function SignUpForm(props: SignUpFormProps) {
|
|
25
|
-
const { email, setError, clearErrors } = props
|
|
35
|
+
const { email, setError, clearErrors, fieldsets, render } = props
|
|
26
36
|
|
|
27
37
|
const storeConfig = useQuery(StoreConfigDocument)
|
|
28
38
|
|
|
@@ -109,8 +119,8 @@ export function SignUpForm(props: SignUpFormProps) {
|
|
|
109
119
|
<AttributesFormAutoLayout
|
|
110
120
|
attributes={attributes}
|
|
111
121
|
control={control}
|
|
112
|
-
render={CustomerAttributeField}
|
|
113
|
-
fieldsets={[nameFieldset(attributes)]}
|
|
122
|
+
render={render ?? CustomerAttributeField}
|
|
123
|
+
fieldsets={fieldsets ?? [nameFieldset(attributes)]}
|
|
114
124
|
/>
|
|
115
125
|
)}
|
|
116
126
|
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/magento-customer",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "10.0
|
|
5
|
+
"version": "10.1.0-canary.13",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -21,20 +21,20 @@
|
|
|
21
21
|
"./plugins/magentoCustomerPrivateQueryContext": "./plugins/magentoCustomerPrivateQueryContext.ts"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@graphcommerce/ecommerce-ui": "^10.0
|
|
25
|
-
"@graphcommerce/eslint-config-pwa": "^10.0
|
|
26
|
-
"@graphcommerce/framer-next-pages": "^10.0
|
|
27
|
-
"@graphcommerce/framer-utils": "^10.0
|
|
28
|
-
"@graphcommerce/graphql": "^10.0
|
|
29
|
-
"@graphcommerce/graphql-mesh": "^10.0
|
|
30
|
-
"@graphcommerce/image": "^10.0
|
|
31
|
-
"@graphcommerce/magento-graphql": "^10.0
|
|
32
|
-
"@graphcommerce/magento-store": "^10.0
|
|
33
|
-
"@graphcommerce/next-config": "^10.0
|
|
34
|
-
"@graphcommerce/next-ui": "^10.0
|
|
35
|
-
"@graphcommerce/prettier-config-pwa": "^10.0
|
|
36
|
-
"@graphcommerce/react-hook-form": "^10.0
|
|
37
|
-
"@graphcommerce/typescript-config-pwa": "^10.0
|
|
24
|
+
"@graphcommerce/ecommerce-ui": "^10.1.0-canary.13",
|
|
25
|
+
"@graphcommerce/eslint-config-pwa": "^10.1.0-canary.13",
|
|
26
|
+
"@graphcommerce/framer-next-pages": "^10.1.0-canary.13",
|
|
27
|
+
"@graphcommerce/framer-utils": "^10.1.0-canary.13",
|
|
28
|
+
"@graphcommerce/graphql": "^10.1.0-canary.13",
|
|
29
|
+
"@graphcommerce/graphql-mesh": "^10.1.0-canary.13",
|
|
30
|
+
"@graphcommerce/image": "^10.1.0-canary.13",
|
|
31
|
+
"@graphcommerce/magento-graphql": "^10.1.0-canary.13",
|
|
32
|
+
"@graphcommerce/magento-store": "^10.1.0-canary.13",
|
|
33
|
+
"@graphcommerce/next-config": "^10.1.0-canary.13",
|
|
34
|
+
"@graphcommerce/next-ui": "^10.1.0-canary.13",
|
|
35
|
+
"@graphcommerce/prettier-config-pwa": "^10.1.0-canary.13",
|
|
36
|
+
"@graphcommerce/react-hook-form": "^10.1.0-canary.13",
|
|
37
|
+
"@graphcommerce/typescript-config-pwa": "^10.1.0-canary.13",
|
|
38
38
|
"@lingui/core": "^5",
|
|
39
39
|
"@lingui/macro": "^5",
|
|
40
40
|
"@lingui/react": "^5",
|