@graphcommerce/magento-customer 6.0.2-canary.17 → 6.0.2-canary.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 +6 -0
- package/components/AddressFields/AddressFields.tsx +48 -38
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 6.0.2-canary.18
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1889](https://github.com/graphcommerce-org/graphcommerce/pull/1889) [`38bf4b6bc`](https://github.com/graphcommerce-org/graphcommerce/commit/38bf4b6bc6e705d9d124d50b775ba3f440599482) - put the country field first, so the address fields will not be changed afterwards when postcode service is active. ([@carlocarels90](https://github.com/carlocarels90))
|
|
8
|
+
|
|
3
9
|
## 6.0.2-canary.17
|
|
4
10
|
|
|
5
11
|
## 6.0.2-canary.16
|
|
@@ -22,10 +22,14 @@ export type AddressFieldValues = {
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
25
|
-
export type AddressFieldsProps = {
|
|
25
|
+
export type AddressFieldsProps = {
|
|
26
|
+
form: UseFormReturn<any>
|
|
27
|
+
readOnly?: boolean
|
|
28
|
+
countryFirst?: boolean
|
|
29
|
+
}
|
|
26
30
|
|
|
27
31
|
export function AddressFields(props: AddressFieldsProps) {
|
|
28
|
-
const { form, readOnly } = props
|
|
32
|
+
const { form, readOnly, countryFirst } = props
|
|
29
33
|
|
|
30
34
|
const countryQuery = useQuery(CountryRegionsDocument, { fetchPolicy: 'cache-and-network' })
|
|
31
35
|
const countries = countryQuery.data?.countries ?? countryQuery.previousData?.countries
|
|
@@ -54,8 +58,49 @@ export function AddressFields(props: AddressFieldsProps) {
|
|
|
54
58
|
return availableRegions?.sort(compare)
|
|
55
59
|
}, [country, countryList])
|
|
56
60
|
|
|
61
|
+
const countryFields = (
|
|
62
|
+
<FormRow>
|
|
63
|
+
<SelectElement
|
|
64
|
+
control={control}
|
|
65
|
+
name='countryCode'
|
|
66
|
+
SelectProps={{ autoWidth: true }}
|
|
67
|
+
variant='outlined'
|
|
68
|
+
label={<Trans id='Country' />}
|
|
69
|
+
required={required.countryCode}
|
|
70
|
+
InputProps={{
|
|
71
|
+
readOnly,
|
|
72
|
+
endAdornment: <InputCheckmark show={valid.countryCode} select />,
|
|
73
|
+
}}
|
|
74
|
+
options={filterNonNullableKeys(countryList, [
|
|
75
|
+
'two_letter_abbreviation',
|
|
76
|
+
'full_name_locale',
|
|
77
|
+
]).map(({ two_letter_abbreviation: id, full_name_locale: label }) => ({ id, label }))}
|
|
78
|
+
/>
|
|
79
|
+
|
|
80
|
+
{regionList.length > 0 && (
|
|
81
|
+
<SelectElement
|
|
82
|
+
control={control}
|
|
83
|
+
name='regionId'
|
|
84
|
+
// SelectProps={{ native: true, displayEmpty: true }}
|
|
85
|
+
variant='outlined'
|
|
86
|
+
label={<Trans id='Region' />}
|
|
87
|
+
required
|
|
88
|
+
InputProps={{
|
|
89
|
+
readOnly,
|
|
90
|
+
endAdornment: <InputCheckmark show={valid.regionId} select />,
|
|
91
|
+
}}
|
|
92
|
+
options={filterNonNullableKeys(regionList, ['id', 'name']).map(({ id, name: label }) => ({
|
|
93
|
+
id,
|
|
94
|
+
label,
|
|
95
|
+
}))}
|
|
96
|
+
/>
|
|
97
|
+
)}
|
|
98
|
+
</FormRow>
|
|
99
|
+
)
|
|
100
|
+
|
|
57
101
|
return (
|
|
58
102
|
<>
|
|
103
|
+
{countryFirst && countryFields}
|
|
59
104
|
<FormRow>
|
|
60
105
|
<TextFieldElement
|
|
61
106
|
variant='outlined'
|
|
@@ -129,42 +174,7 @@ export function AddressFields(props: AddressFieldsProps) {
|
|
|
129
174
|
}}
|
|
130
175
|
/>
|
|
131
176
|
</FormRow>
|
|
132
|
-
|
|
133
|
-
<SelectElement
|
|
134
|
-
control={control}
|
|
135
|
-
name='countryCode'
|
|
136
|
-
SelectProps={{ autoWidth: true }}
|
|
137
|
-
variant='outlined'
|
|
138
|
-
label={<Trans id='Country' />}
|
|
139
|
-
required={required.countryCode}
|
|
140
|
-
InputProps={{
|
|
141
|
-
readOnly,
|
|
142
|
-
endAdornment: <InputCheckmark show={valid.countryCode} select />,
|
|
143
|
-
}}
|
|
144
|
-
options={filterNonNullableKeys(countryList, [
|
|
145
|
-
'two_letter_abbreviation',
|
|
146
|
-
'full_name_locale',
|
|
147
|
-
]).map(({ two_letter_abbreviation: id, full_name_locale: label }) => ({ id, label }))}
|
|
148
|
-
/>
|
|
149
|
-
|
|
150
|
-
{regionList.length > 0 && (
|
|
151
|
-
<SelectElement
|
|
152
|
-
control={control}
|
|
153
|
-
name='regionId'
|
|
154
|
-
// SelectProps={{ native: true, displayEmpty: true }}
|
|
155
|
-
variant='outlined'
|
|
156
|
-
label={<Trans id='Region' />}
|
|
157
|
-
required
|
|
158
|
-
InputProps={{
|
|
159
|
-
readOnly,
|
|
160
|
-
endAdornment: <InputCheckmark show={valid.regionId} select />,
|
|
161
|
-
}}
|
|
162
|
-
options={filterNonNullableKeys(regionList, ['id', 'name']).map(
|
|
163
|
-
({ id, name: label }) => ({ id, label }),
|
|
164
|
-
)}
|
|
165
|
-
/>
|
|
166
|
-
)}
|
|
167
|
-
</FormRow>
|
|
177
|
+
{!countryFirst && countryFields}
|
|
168
178
|
</>
|
|
169
179
|
)
|
|
170
180
|
}
|
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": "6.0.2-canary.
|
|
5
|
+
"version": "6.0.2-canary.18",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -12,20 +12,20 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"devDependencies": {
|
|
15
|
-
"@graphcommerce/eslint-config-pwa": "6.0.2-canary.
|
|
16
|
-
"@graphcommerce/prettier-config-pwa": "6.0.2-canary.
|
|
17
|
-
"@graphcommerce/typescript-config-pwa": "6.0.2-canary.
|
|
15
|
+
"@graphcommerce/eslint-config-pwa": "6.0.2-canary.18",
|
|
16
|
+
"@graphcommerce/prettier-config-pwa": "6.0.2-canary.18",
|
|
17
|
+
"@graphcommerce/typescript-config-pwa": "6.0.2-canary.18"
|
|
18
18
|
},
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@graphcommerce/ecommerce-ui": "6.0.2-canary.
|
|
21
|
-
"@graphcommerce/framer-utils": "6.0.2-canary.
|
|
22
|
-
"@graphcommerce/graphql": "6.0.2-canary.
|
|
23
|
-
"@graphcommerce/graphql-mesh": "6.0.2-canary.
|
|
24
|
-
"@graphcommerce/image": "6.0.2-canary.
|
|
25
|
-
"@graphcommerce/magento-graphql": "6.0.2-canary.
|
|
26
|
-
"@graphcommerce/magento-store": "6.0.2-canary.
|
|
27
|
-
"@graphcommerce/next-ui": "6.0.2-canary.
|
|
28
|
-
"@graphcommerce/react-hook-form": "6.0.2-canary.
|
|
20
|
+
"@graphcommerce/ecommerce-ui": "6.0.2-canary.18",
|
|
21
|
+
"@graphcommerce/framer-utils": "6.0.2-canary.18",
|
|
22
|
+
"@graphcommerce/graphql": "6.0.2-canary.18",
|
|
23
|
+
"@graphcommerce/graphql-mesh": "6.0.2-canary.18",
|
|
24
|
+
"@graphcommerce/image": "6.0.2-canary.18",
|
|
25
|
+
"@graphcommerce/magento-graphql": "6.0.2-canary.18",
|
|
26
|
+
"@graphcommerce/magento-store": "6.0.2-canary.18",
|
|
27
|
+
"@graphcommerce/next-ui": "6.0.2-canary.18",
|
|
28
|
+
"@graphcommerce/react-hook-form": "6.0.2-canary.18"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|
|
31
31
|
"@lingui/react": "^3.13.2",
|