@graphcommerce/address-fields-nl 5.2.0-canary.8
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 +7 -0
- package/README.md +17 -0
- package/components/PostcodeNLAddressFields.tsx +161 -0
- package/graphql/PostcodeNL.graphql +6 -0
- package/graphql/PostcodeNL.graphqls +8 -0
- package/helpers/usePostcodeService.ts +55 -0
- package/index.ts +1 -0
- package/lib/nationaalgeoregister/.meshrc.yaml +13 -0
- package/lib/nationaalgeoregister/resolver.ts +40 -0
- package/lib/nationaalgeoregister/responseSample.json +329 -0
- package/next-env.d.ts +4 -0
- package/package.json +34 -0
- package/plugins/AddPostcodeNLAddressFields.tsx +15 -0
- package/tsconfig.json +5 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
# @graphcommerce/address-fields-nl
|
|
2
|
+
|
|
3
|
+
## 5.2.0-canary.8
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1779](https://github.com/graphcommerce-org/graphcommerce/pull/1779) [`6c6d7e4d7`](https://github.com/graphcommerce-org/graphcommerce/commit/6c6d7e4d7cf5d68a39acc82b91e1f3acce366517) - Implementation of the Dutch address fields, add an autocomplete field for the street name and city based of the customers postcode + street number + addition. ([@Jessevdpoel](https://github.com/Jessevdpoel))
|
package/README.md
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
# Address fields nl
|
|
2
|
+
|
|
3
|
+
Implementation of the Dutch address fields, add an autocomplete field for the
|
|
4
|
+
street name and city based of the customers postcode + street number + addition.
|
|
5
|
+
|
|
6
|
+
When a dutch country is selected it will automatically switch the address fields
|
|
7
|
+
to give a postcode + housenumber + addition field first and street + city
|
|
8
|
+
second.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
1. Find current version of your `@graphcommerce/next-ui` in your package.json.
|
|
13
|
+
2. `yarn add @graphcommerce/address-fields-nl@1.2.3` (replace 1.2.3 with the
|
|
14
|
+
version of the step above)
|
|
15
|
+
3. Copy `@graphcommerce/address-fields-nl/lib/natationaalgeoregister` to
|
|
16
|
+
`lib/nationaalgeoregister` in your project.
|
|
17
|
+
4. Copy the contents of `lib/nationaalgeoregister/.meshrc.yml` in `.meshrc.yml`
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import {
|
|
2
|
+
TextFieldElement,
|
|
3
|
+
SelectElement,
|
|
4
|
+
assertFormGqlOperation,
|
|
5
|
+
houseNumberPattern,
|
|
6
|
+
} from '@graphcommerce/ecommerce-ui'
|
|
7
|
+
import { useQuery } from '@graphcommerce/graphql'
|
|
8
|
+
import { AddressFieldsProps, AddressFieldValues } from '@graphcommerce/magento-customer'
|
|
9
|
+
import { CountryRegionsDocument } from '@graphcommerce/magento-store'
|
|
10
|
+
import { FormRow, InputCheckmark, filterNonNullableKeys } from '@graphcommerce/next-ui'
|
|
11
|
+
import { i18n } from '@lingui/core'
|
|
12
|
+
import { Trans } from '@lingui/react'
|
|
13
|
+
import { useMemo } from 'react'
|
|
14
|
+
import { usePostcodeService } from '../helpers/usePostcodeService'
|
|
15
|
+
|
|
16
|
+
export function PostcodeNLAddressFields(props: AddressFieldsProps) {
|
|
17
|
+
const { form, readOnly } = props
|
|
18
|
+
|
|
19
|
+
const countryQuery = useQuery(CountryRegionsDocument, { fetchPolicy: 'cache-and-network' })
|
|
20
|
+
const countries = countryQuery.data?.countries ?? countryQuery.previousData?.countries
|
|
21
|
+
|
|
22
|
+
assertFormGqlOperation<AddressFieldValues>(form)
|
|
23
|
+
const { watch, required, valid, control } = form
|
|
24
|
+
|
|
25
|
+
const country = watch('countryCode')
|
|
26
|
+
|
|
27
|
+
usePostcodeService(form)
|
|
28
|
+
|
|
29
|
+
const countryList = useMemo(() => {
|
|
30
|
+
const countriesWithLocale = (countries ?? [])?.filter((c) => c?.full_name_locale)
|
|
31
|
+
return countriesWithLocale.sort((a, b) =>
|
|
32
|
+
(a?.full_name_locale ?? '')?.localeCompare(b?.full_name_locale ?? ''),
|
|
33
|
+
)
|
|
34
|
+
}, [countries])
|
|
35
|
+
|
|
36
|
+
const regionList = useMemo(() => {
|
|
37
|
+
const availableRegions = Object.values(
|
|
38
|
+
countryList.find((c) => c?.two_letter_abbreviation === country)?.available_regions ?? {},
|
|
39
|
+
)
|
|
40
|
+
type Region = typeof availableRegions[0]
|
|
41
|
+
|
|
42
|
+
const compare: (a: Region, b: Region) => number = (a, b) =>
|
|
43
|
+
(a?.name ?? '')?.localeCompare(b?.name ?? '')
|
|
44
|
+
|
|
45
|
+
return availableRegions?.sort(compare)
|
|
46
|
+
}, [country, countryList])
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<>
|
|
50
|
+
<FormRow>
|
|
51
|
+
<TextFieldElement
|
|
52
|
+
control={control}
|
|
53
|
+
name='postcode'
|
|
54
|
+
variant='outlined'
|
|
55
|
+
type='text'
|
|
56
|
+
required={required.postcode}
|
|
57
|
+
label={<Trans id='Postcode' />}
|
|
58
|
+
InputProps={{
|
|
59
|
+
readOnly,
|
|
60
|
+
endAdornment: <InputCheckmark show={valid.postcode} />,
|
|
61
|
+
}}
|
|
62
|
+
/>
|
|
63
|
+
<TextFieldElement
|
|
64
|
+
control={control}
|
|
65
|
+
name='houseNumber'
|
|
66
|
+
required={required.houseNumber}
|
|
67
|
+
validation={{
|
|
68
|
+
pattern: {
|
|
69
|
+
value: houseNumberPattern,
|
|
70
|
+
message: i18n._(/* i18n */ 'Please provide a valid house number'),
|
|
71
|
+
},
|
|
72
|
+
}}
|
|
73
|
+
variant='outlined'
|
|
74
|
+
type='text'
|
|
75
|
+
label={<Trans id='Housenumber' />}
|
|
76
|
+
autoComplete='address-line2'
|
|
77
|
+
InputProps={{
|
|
78
|
+
readOnly,
|
|
79
|
+
endAdornment: <InputCheckmark show={valid.houseNumber} />,
|
|
80
|
+
}}
|
|
81
|
+
/>
|
|
82
|
+
<TextFieldElement
|
|
83
|
+
control={control}
|
|
84
|
+
name='addition'
|
|
85
|
+
variant='outlined'
|
|
86
|
+
type='text'
|
|
87
|
+
required={required.addition}
|
|
88
|
+
label={<Trans id='Addition' />}
|
|
89
|
+
autoComplete='address-line3'
|
|
90
|
+
InputProps={{
|
|
91
|
+
readOnly,
|
|
92
|
+
endAdornment: <InputCheckmark show={valid.addition} />,
|
|
93
|
+
}}
|
|
94
|
+
/>
|
|
95
|
+
</FormRow>
|
|
96
|
+
<FormRow>
|
|
97
|
+
<TextFieldElement
|
|
98
|
+
variant='outlined'
|
|
99
|
+
control={control}
|
|
100
|
+
required={required.street}
|
|
101
|
+
name='street'
|
|
102
|
+
type='text'
|
|
103
|
+
label={<Trans id='Street' />}
|
|
104
|
+
autoComplete='address-line1'
|
|
105
|
+
InputProps={{
|
|
106
|
+
readOnly,
|
|
107
|
+
endAdornment: <InputCheckmark show={valid.street} />,
|
|
108
|
+
}}
|
|
109
|
+
/>
|
|
110
|
+
<TextFieldElement
|
|
111
|
+
control={control}
|
|
112
|
+
name='city'
|
|
113
|
+
variant='outlined'
|
|
114
|
+
type='text'
|
|
115
|
+
required={required.city}
|
|
116
|
+
label={<Trans id='City' />}
|
|
117
|
+
InputProps={{
|
|
118
|
+
readOnly,
|
|
119
|
+
endAdornment: <InputCheckmark show={valid.city} />,
|
|
120
|
+
}}
|
|
121
|
+
/>
|
|
122
|
+
</FormRow>
|
|
123
|
+
<FormRow>
|
|
124
|
+
<SelectElement
|
|
125
|
+
control={control}
|
|
126
|
+
name='countryCode'
|
|
127
|
+
SelectProps={{ autoWidth: true }}
|
|
128
|
+
variant='outlined'
|
|
129
|
+
label={<Trans id='Country' />}
|
|
130
|
+
required={required.countryCode}
|
|
131
|
+
InputProps={{
|
|
132
|
+
readOnly,
|
|
133
|
+
endAdornment: <InputCheckmark show={valid.countryCode} select />,
|
|
134
|
+
}}
|
|
135
|
+
options={filterNonNullableKeys(countryList, [
|
|
136
|
+
'two_letter_abbreviation',
|
|
137
|
+
'full_name_locale',
|
|
138
|
+
]).map(({ two_letter_abbreviation: id, full_name_locale: label }) => ({ id, label }))}
|
|
139
|
+
/>
|
|
140
|
+
|
|
141
|
+
{regionList.length > 0 && (
|
|
142
|
+
<SelectElement
|
|
143
|
+
control={control}
|
|
144
|
+
name='regionId'
|
|
145
|
+
// SelectProps={{ native: true, displayEmpty: true }}
|
|
146
|
+
variant='outlined'
|
|
147
|
+
label={<Trans id='Region' />}
|
|
148
|
+
required
|
|
149
|
+
InputProps={{
|
|
150
|
+
readOnly,
|
|
151
|
+
endAdornment: <InputCheckmark show={valid.regionId} select />,
|
|
152
|
+
}}
|
|
153
|
+
options={filterNonNullableKeys(regionList, ['id', 'name']).map(
|
|
154
|
+
({ id, name: label }) => ({ id, label }),
|
|
155
|
+
)}
|
|
156
|
+
/>
|
|
157
|
+
)}
|
|
158
|
+
</FormRow>
|
|
159
|
+
</>
|
|
160
|
+
)
|
|
161
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { useLazyQuery } from "@graphcommerce/graphql"
|
|
2
|
+
import { AddressFieldValues } from "@graphcommerce/magento-customer"
|
|
3
|
+
import { UseFormReturn } from "@graphcommerce/react-hook-form"
|
|
4
|
+
import { useEffect } from "react"
|
|
5
|
+
import { postcodeNLDocument } from "../graphql/PostcodeNL.gql"
|
|
6
|
+
|
|
7
|
+
const postCodeRegex = /^[1-9][0-9]{3}[a-z]{2}$/i
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
const defaultPostcodeFieldnames = {
|
|
11
|
+
postcode: 'postcode',
|
|
12
|
+
houseNumber: 'houseNumber',
|
|
13
|
+
addition: 'addition',
|
|
14
|
+
street: 'street',
|
|
15
|
+
city: 'city',
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export function usePostcodeService(
|
|
19
|
+
form: UseFormReturn<any>,
|
|
20
|
+
fieldNames: AddressFieldValues = defaultPostcodeFieldnames
|
|
21
|
+
) {
|
|
22
|
+
const { watch, setValue, resetField } = form
|
|
23
|
+
|
|
24
|
+
const postcode = watch(fieldNames.postcode ?? '', '') as string
|
|
25
|
+
const houseNumber = watch(fieldNames.houseNumber ?? '', '') as string
|
|
26
|
+
const addition = watch(fieldNames.addition ?? '', '') as string
|
|
27
|
+
const [execute, result] = useLazyQuery(postcodeNLDocument)
|
|
28
|
+
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
if (!houseNumber || !postcode || !postCodeRegex.test(postcode.trim().replace(/ /g, ''))) return () => {}
|
|
31
|
+
|
|
32
|
+
const handler = () => execute({ variables: { postcode: postcode.trim().replace(/ /g, ''), housenumber: addition ? houseNumber + addition : houseNumber } })
|
|
33
|
+
const clear = setTimeout(handler, 300)
|
|
34
|
+
|
|
35
|
+
return () => clearInterval(clear)
|
|
36
|
+
}, [execute, houseNumber, postcode, addition])
|
|
37
|
+
|
|
38
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
39
|
+
if (result.error) {
|
|
40
|
+
console.warn(result.error)
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
const { street, city } = result.data?.postcodeNL ?? {}
|
|
46
|
+
if (street && city) {
|
|
47
|
+
setValue(fieldNames.street ?? '', street, { shouldValidate: true })
|
|
48
|
+
setValue(fieldNames.city ?? '', city, { shouldValidate: true })
|
|
49
|
+
} else {
|
|
50
|
+
resetField(fieldNames.street ?? '')
|
|
51
|
+
resetField(fieldNames.city?? '')
|
|
52
|
+
}
|
|
53
|
+
}, [result.data?.postcodeNL, setValue, resetField, fieldNames.street, fieldNames.city])
|
|
54
|
+
return [result.data?.postcodeNL, result.loading] as const
|
|
55
|
+
}
|
package/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './components/PostcodeNLAddressFields'
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
sources:
|
|
2
|
+
- name: nationaalgeoregister
|
|
3
|
+
handler:
|
|
4
|
+
jsonSchema:
|
|
5
|
+
endpoint: https://geodata.nationaalgeoregister.nl/locatieserver/v3/
|
|
6
|
+
operations:
|
|
7
|
+
- type: Query
|
|
8
|
+
field: nationaalgeoregisterPostcodeService
|
|
9
|
+
path: /free?fq=type:adres&fq=postcode:{args.postcode}&q={args.housenumber}
|
|
10
|
+
method: GET
|
|
11
|
+
responseSample: 'lib/nationaalgeoregister/responseSample.json'
|
|
12
|
+
additionalResolvers:
|
|
13
|
+
- 'lib/nationaalgeoregister/nationaalgeoregister.ts'
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import type { Resolvers } from '@graphcommerce/graphql-mesh'
|
|
2
|
+
|
|
3
|
+
const simplify = (str: string | null | undefined) => str?.replace(/-|\s/g, '').toUpperCase()
|
|
4
|
+
|
|
5
|
+
const resolvers: Resolvers = {
|
|
6
|
+
Query: {
|
|
7
|
+
postcodeNL: async (root, args, context, info) => {
|
|
8
|
+
const postcode = simplify(args.postcode)
|
|
9
|
+
const housenumber = simplify(args.housenumber)
|
|
10
|
+
|
|
11
|
+
const ressie = await context.nationaalgeoregister.Query.nationaalgeoregisterPostcodeService({
|
|
12
|
+
selectionSet: `{
|
|
13
|
+
response {
|
|
14
|
+
docs {
|
|
15
|
+
straatnaam
|
|
16
|
+
huis_nlt
|
|
17
|
+
postcode
|
|
18
|
+
woonplaatsnaam
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}`,
|
|
22
|
+
args: { housenumber, postcode },
|
|
23
|
+
context,
|
|
24
|
+
info,
|
|
25
|
+
})
|
|
26
|
+
|
|
27
|
+
const found = ressie?.response?.docs?.find((d) => {
|
|
28
|
+
if (simplify(d?.postcode) !== postcode) return false
|
|
29
|
+
if (simplify(d?.huis_nlt) !== housenumber) return false
|
|
30
|
+
return true
|
|
31
|
+
})
|
|
32
|
+
|
|
33
|
+
if (!found?.woonplaatsnaam || !found.straatnaam) throw Error(`Can't find matching address`)
|
|
34
|
+
|
|
35
|
+
return { city: found.woonplaatsnaam, street: found.straatnaam }
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export default resolvers
|
|
@@ -0,0 +1,329 @@
|
|
|
1
|
+
{
|
|
2
|
+
"response": {
|
|
3
|
+
"numFound": 53688,
|
|
4
|
+
"start": 0,
|
|
5
|
+
"maxScore": 27.928503,
|
|
6
|
+
"docs": [
|
|
7
|
+
{
|
|
8
|
+
"bron": "BAG",
|
|
9
|
+
"woonplaatscode": "3042",
|
|
10
|
+
"type": "adres",
|
|
11
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
12
|
+
"wijkcode": "WK188400",
|
|
13
|
+
"huis_nlt": "85",
|
|
14
|
+
"openbareruimtetype": "Weg",
|
|
15
|
+
"buurtnaam": "Roelofarendsveen",
|
|
16
|
+
"gemeentecode": "1884",
|
|
17
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/nummeraanduiding/1884200000043362",
|
|
18
|
+
"weergavenaam": "Noordplein 85, 2371DJ Roelofarendsveen",
|
|
19
|
+
"straatnaam_verkort": "Noordpln",
|
|
20
|
+
"id": "adr-73290e78d2e9f7c6931a9b4cf2e15a4e",
|
|
21
|
+
"gekoppeld_perceel": ["AKM01-K-2657", "AKM01-K-2656"],
|
|
22
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
23
|
+
"buurtcode": "BU18840000",
|
|
24
|
+
"wijknaam": "Wijk 00 Roelofarendsveen",
|
|
25
|
+
"identificatie": "1884010000001700-1884200000043362",
|
|
26
|
+
"openbareruimte_id": "1884300000000258",
|
|
27
|
+
"waterschapsnaam": "Hoogheemraadschap van Rijnland",
|
|
28
|
+
"provinciecode": "PV28",
|
|
29
|
+
"postcode": "2371DJ",
|
|
30
|
+
"provincienaam": "Zuid-Holland",
|
|
31
|
+
"centroide_ll": "POINT(4.63324886 52.20155963)",
|
|
32
|
+
"nummeraanduiding_id": "1884200000043362",
|
|
33
|
+
"waterschapscode": "13",
|
|
34
|
+
"adresseerbaarobject_id": "1884010000001700",
|
|
35
|
+
"huisnummer": 85,
|
|
36
|
+
"provincieafkorting": "ZH",
|
|
37
|
+
"centroide_rd": "POINT(103458 468428.86)",
|
|
38
|
+
"straatnaam": "Noordplein",
|
|
39
|
+
"gekoppeld_appartement": ["AKM01-K-2661-A-2", "AKM01-K-2661-A-32"],
|
|
40
|
+
"score": 27.928503
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
"bron": "BAG",
|
|
44
|
+
"identificatie": "2371",
|
|
45
|
+
"provinciecode": "PV28",
|
|
46
|
+
"woonplaatscode": "2371",
|
|
47
|
+
"type": "woonplaats",
|
|
48
|
+
"woonplaatsnaam": "Klaaswaal",
|
|
49
|
+
"provincienaam": "Zuid-Holland",
|
|
50
|
+
"centroide_ll": "POINT(4.45477662 51.76834514)",
|
|
51
|
+
"gemeentecode": "1963",
|
|
52
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/woonplaats/2371",
|
|
53
|
+
"weergavenaam": "Klaaswaal, Hoeksche Waard, Zuid-Holland",
|
|
54
|
+
"provincieafkorting": "ZH",
|
|
55
|
+
"centroide_rd": "POINT(90639.083 420375.067)",
|
|
56
|
+
"id": "wpl-3bc7421f578b77df8a5953c27e79425f",
|
|
57
|
+
"gemeentenaam": "Hoeksche Waard",
|
|
58
|
+
"score": 22.305634
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"bron": "BAG",
|
|
62
|
+
"woonplaatscode": "3042",
|
|
63
|
+
"type": "postcode",
|
|
64
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
65
|
+
"openbareruimtetype": "Weg",
|
|
66
|
+
"gemeentecode": "1884",
|
|
67
|
+
"weergavenaam": "Noordplein, 2371DJ Roelofarendsveen",
|
|
68
|
+
"straatnaam_verkort": "Noordpln",
|
|
69
|
+
"id": "pcd-50ef0991732f93e3dacbb936fee68cb9",
|
|
70
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
71
|
+
"identificatie": "1884300000000258_2371DJ_3042",
|
|
72
|
+
"openbareruimte_id": "1884300000000258",
|
|
73
|
+
"provinciecode": "PV28",
|
|
74
|
+
"postcode": "2371DJ",
|
|
75
|
+
"provincienaam": "Zuid-Holland",
|
|
76
|
+
"centroide_ll": "POINT(4.63310353 52.20181642)",
|
|
77
|
+
"provincieafkorting": "ZH",
|
|
78
|
+
"centroide_rd": "POINT(103448.362 468457.534)",
|
|
79
|
+
"straatnaam": "Noordplein",
|
|
80
|
+
"score": 21.495378
|
|
81
|
+
},
|
|
82
|
+
{
|
|
83
|
+
"bron": "BAG",
|
|
84
|
+
"woonplaatscode": "3042",
|
|
85
|
+
"type": "adres",
|
|
86
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
87
|
+
"wijkcode": "WK188400",
|
|
88
|
+
"huis_nlt": "45",
|
|
89
|
+
"openbareruimtetype": "Weg",
|
|
90
|
+
"buurtnaam": "Roelofarendsveen",
|
|
91
|
+
"gemeentecode": "1884",
|
|
92
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/nummeraanduiding/1884200000043342",
|
|
93
|
+
"weergavenaam": "Noordplein 45, 2371DJ Roelofarendsveen",
|
|
94
|
+
"straatnaam_verkort": "Noordpln",
|
|
95
|
+
"id": "adr-0791d685d314aaaeb48a4dc362416ffd",
|
|
96
|
+
"gekoppeld_perceel": ["AKM01-K-2657", "AKM01-K-2656"],
|
|
97
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
98
|
+
"buurtcode": "BU18840000",
|
|
99
|
+
"wijknaam": "Wijk 00 Roelofarendsveen",
|
|
100
|
+
"identificatie": "1884010000001680-1884200000043342",
|
|
101
|
+
"openbareruimte_id": "1884300000000258",
|
|
102
|
+
"waterschapsnaam": "Hoogheemraadschap van Rijnland",
|
|
103
|
+
"provinciecode": "PV28",
|
|
104
|
+
"postcode": "2371DJ",
|
|
105
|
+
"provincienaam": "Zuid-Holland",
|
|
106
|
+
"centroide_ll": "POINT(4.63337382 52.20157507)",
|
|
107
|
+
"nummeraanduiding_id": "1884200000043342",
|
|
108
|
+
"waterschapscode": "13",
|
|
109
|
+
"adresseerbaarobject_id": "1884010000001680",
|
|
110
|
+
"huisnummer": 45,
|
|
111
|
+
"provincieafkorting": "ZH",
|
|
112
|
+
"centroide_rd": "POINT(103466.56 468430.489)",
|
|
113
|
+
"straatnaam": "Noordplein",
|
|
114
|
+
"gekoppeld_appartement": ["AKM01-K-2661-A-12", "AKM01-K-2661-A-2"],
|
|
115
|
+
"score": 19.354504
|
|
116
|
+
},
|
|
117
|
+
{
|
|
118
|
+
"bron": "BAG",
|
|
119
|
+
"woonplaatscode": "3042",
|
|
120
|
+
"type": "adres",
|
|
121
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
122
|
+
"wijkcode": "WK188400",
|
|
123
|
+
"huis_nlt": "47",
|
|
124
|
+
"openbareruimtetype": "Weg",
|
|
125
|
+
"buurtnaam": "Roelofarendsveen",
|
|
126
|
+
"gemeentecode": "1884",
|
|
127
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/nummeraanduiding/1884200000043343",
|
|
128
|
+
"weergavenaam": "Noordplein 47, 2371DJ Roelofarendsveen",
|
|
129
|
+
"straatnaam_verkort": "Noordpln",
|
|
130
|
+
"id": "adr-56e4ab42e1bd41b2885d62b32ed080a5",
|
|
131
|
+
"gekoppeld_perceel": ["AKM01-K-2657", "AKM01-K-2656"],
|
|
132
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
133
|
+
"buurtcode": "BU18840000",
|
|
134
|
+
"wijknaam": "Wijk 00 Roelofarendsveen",
|
|
135
|
+
"identificatie": "1884010000001681-1884200000043343",
|
|
136
|
+
"openbareruimte_id": "1884300000000258",
|
|
137
|
+
"waterschapsnaam": "Hoogheemraadschap van Rijnland",
|
|
138
|
+
"provinciecode": "PV28",
|
|
139
|
+
"postcode": "2371DJ",
|
|
140
|
+
"provincienaam": "Zuid-Holland",
|
|
141
|
+
"centroide_ll": "POINT(4.63335819 52.20163245)",
|
|
142
|
+
"nummeraanduiding_id": "1884200000043343",
|
|
143
|
+
"waterschapscode": "13",
|
|
144
|
+
"adresseerbaarobject_id": "1884010000001681",
|
|
145
|
+
"huisnummer": 47,
|
|
146
|
+
"provincieafkorting": "ZH",
|
|
147
|
+
"centroide_rd": "POINT(103465.558 468436.885)",
|
|
148
|
+
"straatnaam": "Noordplein",
|
|
149
|
+
"gekoppeld_appartement": ["AKM01-K-2661-A-2", "AKM01-K-2661-A-11"],
|
|
150
|
+
"score": 19.354504
|
|
151
|
+
},
|
|
152
|
+
{
|
|
153
|
+
"bron": "BAG",
|
|
154
|
+
"woonplaatscode": "3042",
|
|
155
|
+
"type": "adres",
|
|
156
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
157
|
+
"wijkcode": "WK188400",
|
|
158
|
+
"huis_nlt": "49",
|
|
159
|
+
"openbareruimtetype": "Weg",
|
|
160
|
+
"buurtnaam": "Roelofarendsveen",
|
|
161
|
+
"gemeentecode": "1884",
|
|
162
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/nummeraanduiding/1884200000043344",
|
|
163
|
+
"weergavenaam": "Noordplein 49, 2371DJ Roelofarendsveen",
|
|
164
|
+
"straatnaam_verkort": "Noordpln",
|
|
165
|
+
"id": "adr-6801e369a4ab154ebc047f7e4082cdf1",
|
|
166
|
+
"gekoppeld_perceel": ["AKM01-K-2657", "AKM01-K-2656"],
|
|
167
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
168
|
+
"buurtcode": "BU18840000",
|
|
169
|
+
"wijknaam": "Wijk 00 Roelofarendsveen",
|
|
170
|
+
"identificatie": "1884010000001682-1884200000043344",
|
|
171
|
+
"openbareruimte_id": "1884300000000258",
|
|
172
|
+
"waterschapsnaam": "Hoogheemraadschap van Rijnland",
|
|
173
|
+
"provinciecode": "PV28",
|
|
174
|
+
"postcode": "2371DJ",
|
|
175
|
+
"provincienaam": "Zuid-Holland",
|
|
176
|
+
"centroide_ll": "POINT(4.63333439 52.20169335)",
|
|
177
|
+
"nummeraanduiding_id": "1884200000043344",
|
|
178
|
+
"waterschapscode": "13",
|
|
179
|
+
"adresseerbaarobject_id": "1884010000001682",
|
|
180
|
+
"huisnummer": 49,
|
|
181
|
+
"provincieafkorting": "ZH",
|
|
182
|
+
"centroide_rd": "POINT(103464.001 468443.677)",
|
|
183
|
+
"straatnaam": "Noordplein",
|
|
184
|
+
"gekoppeld_appartement": ["AKM01-K-2661-A-10", "AKM01-K-2661-A-2"],
|
|
185
|
+
"score": 19.354504
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
"bron": "BAG",
|
|
189
|
+
"woonplaatscode": "3042",
|
|
190
|
+
"type": "adres",
|
|
191
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
192
|
+
"wijkcode": "WK188400",
|
|
193
|
+
"huis_nlt": "51",
|
|
194
|
+
"openbareruimtetype": "Weg",
|
|
195
|
+
"buurtnaam": "Roelofarendsveen",
|
|
196
|
+
"gemeentecode": "1884",
|
|
197
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/nummeraanduiding/1884200000043345",
|
|
198
|
+
"weergavenaam": "Noordplein 51, 2371DJ Roelofarendsveen",
|
|
199
|
+
"straatnaam_verkort": "Noordpln",
|
|
200
|
+
"id": "adr-170282875cbea7fd506f8c157babbbcc",
|
|
201
|
+
"gekoppeld_perceel": ["AKM01-K-2656", "AKM01-K-2657"],
|
|
202
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
203
|
+
"buurtcode": "BU18840000",
|
|
204
|
+
"wijknaam": "Wijk 00 Roelofarendsveen",
|
|
205
|
+
"identificatie": "1884010000001683-1884200000043345",
|
|
206
|
+
"openbareruimte_id": "1884300000000258",
|
|
207
|
+
"waterschapsnaam": "Hoogheemraadschap van Rijnland",
|
|
208
|
+
"provinciecode": "PV28",
|
|
209
|
+
"postcode": "2371DJ",
|
|
210
|
+
"provincienaam": "Zuid-Holland",
|
|
211
|
+
"centroide_ll": "POINT(4.63332084 52.20174949)",
|
|
212
|
+
"nummeraanduiding_id": "1884200000043345",
|
|
213
|
+
"waterschapscode": "13",
|
|
214
|
+
"adresseerbaarobject_id": "1884010000001683",
|
|
215
|
+
"huisnummer": 51,
|
|
216
|
+
"provincieafkorting": "ZH",
|
|
217
|
+
"centroide_rd": "POINT(103463.14 468449.933)",
|
|
218
|
+
"straatnaam": "Noordplein",
|
|
219
|
+
"gekoppeld_appartement": ["AKM01-K-2661-A-2", "AKM01-K-2661-A-9"],
|
|
220
|
+
"score": 19.354504
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"bron": "BAG",
|
|
224
|
+
"woonplaatscode": "3042",
|
|
225
|
+
"type": "adres",
|
|
226
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
227
|
+
"wijkcode": "WK188400",
|
|
228
|
+
"huis_nlt": "53",
|
|
229
|
+
"openbareruimtetype": "Weg",
|
|
230
|
+
"buurtnaam": "Roelofarendsveen",
|
|
231
|
+
"gemeentecode": "1884",
|
|
232
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/nummeraanduiding/1884200000043346",
|
|
233
|
+
"weergavenaam": "Noordplein 53, 2371DJ Roelofarendsveen",
|
|
234
|
+
"straatnaam_verkort": "Noordpln",
|
|
235
|
+
"id": "adr-99e473e3a621e98558c7d18c0e94e97c",
|
|
236
|
+
"gekoppeld_perceel": ["AKM01-K-2657", "AKM01-K-2656"],
|
|
237
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
238
|
+
"buurtcode": "BU18840000",
|
|
239
|
+
"wijknaam": "Wijk 00 Roelofarendsveen",
|
|
240
|
+
"identificatie": "1884010000001684-1884200000043346",
|
|
241
|
+
"openbareruimte_id": "1884300000000258",
|
|
242
|
+
"waterschapsnaam": "Hoogheemraadschap van Rijnland",
|
|
243
|
+
"provinciecode": "PV28",
|
|
244
|
+
"postcode": "2371DJ",
|
|
245
|
+
"provincienaam": "Zuid-Holland",
|
|
246
|
+
"centroide_ll": "POINT(4.63329779 52.20180538)",
|
|
247
|
+
"nummeraanduiding_id": "1884200000043346",
|
|
248
|
+
"waterschapscode": "13",
|
|
249
|
+
"adresseerbaarobject_id": "1884010000001684",
|
|
250
|
+
"huisnummer": 53,
|
|
251
|
+
"provincieafkorting": "ZH",
|
|
252
|
+
"centroide_rd": "POINT(103461.629 468456.167)",
|
|
253
|
+
"straatnaam": "Noordplein",
|
|
254
|
+
"gekoppeld_appartement": ["AKM01-K-2661-A-2", "AKM01-K-2661-A-8"],
|
|
255
|
+
"score": 19.354504
|
|
256
|
+
},
|
|
257
|
+
{
|
|
258
|
+
"bron": "BAG",
|
|
259
|
+
"woonplaatscode": "3042",
|
|
260
|
+
"type": "adres",
|
|
261
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
262
|
+
"wijkcode": "WK188400",
|
|
263
|
+
"huis_nlt": "55",
|
|
264
|
+
"openbareruimtetype": "Weg",
|
|
265
|
+
"buurtnaam": "Roelofarendsveen",
|
|
266
|
+
"gemeentecode": "1884",
|
|
267
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/nummeraanduiding/1884200000043347",
|
|
268
|
+
"weergavenaam": "Noordplein 55, 2371DJ Roelofarendsveen",
|
|
269
|
+
"straatnaam_verkort": "Noordpln",
|
|
270
|
+
"id": "adr-f42e856b83a2803c859695e420153b9f",
|
|
271
|
+
"gekoppeld_perceel": ["AKM01-K-2656", "AKM01-K-2657"],
|
|
272
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
273
|
+
"buurtcode": "BU18840000",
|
|
274
|
+
"wijknaam": "Wijk 00 Roelofarendsveen",
|
|
275
|
+
"identificatie": "1884010000001685-1884200000043347",
|
|
276
|
+
"openbareruimte_id": "1884300000000258",
|
|
277
|
+
"waterschapsnaam": "Hoogheemraadschap van Rijnland",
|
|
278
|
+
"provinciecode": "PV28",
|
|
279
|
+
"postcode": "2371DJ",
|
|
280
|
+
"provincienaam": "Zuid-Holland",
|
|
281
|
+
"centroide_ll": "POINT(4.63328119 52.20186089)",
|
|
282
|
+
"nummeraanduiding_id": "1884200000043347",
|
|
283
|
+
"waterschapscode": "13",
|
|
284
|
+
"adresseerbaarobject_id": "1884010000001685",
|
|
285
|
+
"huisnummer": 55,
|
|
286
|
+
"provincieafkorting": "ZH",
|
|
287
|
+
"centroide_rd": "POINT(103460.558 468462.355)",
|
|
288
|
+
"straatnaam": "Noordplein",
|
|
289
|
+
"gekoppeld_appartement": ["AKM01-K-2661-A-2", "AKM01-K-2661-A-7"],
|
|
290
|
+
"score": 19.354504
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"bron": "BAG",
|
|
294
|
+
"woonplaatscode": "3042",
|
|
295
|
+
"type": "adres",
|
|
296
|
+
"woonplaatsnaam": "Roelofarendsveen",
|
|
297
|
+
"wijkcode": "WK188400",
|
|
298
|
+
"huis_nlt": "57",
|
|
299
|
+
"openbareruimtetype": "Weg",
|
|
300
|
+
"buurtnaam": "Roelofarendsveen",
|
|
301
|
+
"gemeentecode": "1884",
|
|
302
|
+
"rdf_seealso": "http://bag.basisregistraties.overheid.nl/bag/id/nummeraanduiding/1884200000043348",
|
|
303
|
+
"weergavenaam": "Noordplein 57, 2371DJ Roelofarendsveen",
|
|
304
|
+
"straatnaam_verkort": "Noordpln",
|
|
305
|
+
"id": "adr-5576c5cc34623e9d5fbc9e53b6c5beb9",
|
|
306
|
+
"gekoppeld_perceel": ["AKM01-K-2656", "AKM01-K-2657"],
|
|
307
|
+
"gemeentenaam": "Kaag en Braassem",
|
|
308
|
+
"buurtcode": "BU18840000",
|
|
309
|
+
"wijknaam": "Wijk 00 Roelofarendsveen",
|
|
310
|
+
"identificatie": "1884010000001686-1884200000043348",
|
|
311
|
+
"openbareruimte_id": "1884300000000258",
|
|
312
|
+
"waterschapsnaam": "Hoogheemraadschap van Rijnland",
|
|
313
|
+
"provinciecode": "PV28",
|
|
314
|
+
"postcode": "2371DJ",
|
|
315
|
+
"provincienaam": "Zuid-Holland",
|
|
316
|
+
"centroide_ll": "POINT(4.63306636 52.20200817)",
|
|
317
|
+
"nummeraanduiding_id": "1884200000043348",
|
|
318
|
+
"waterschapscode": "13",
|
|
319
|
+
"adresseerbaarobject_id": "1884010000001686",
|
|
320
|
+
"huisnummer": 57,
|
|
321
|
+
"provincieafkorting": "ZH",
|
|
322
|
+
"centroide_rd": "POINT(103446.043 468478.893)",
|
|
323
|
+
"straatnaam": "Noordplein",
|
|
324
|
+
"gekoppeld_appartement": ["AKM01-K-2661-A-6", "AKM01-K-2661-A-2"],
|
|
325
|
+
"score": 19.354504
|
|
326
|
+
}
|
|
327
|
+
]
|
|
328
|
+
}
|
|
329
|
+
}
|
package/next-env.d.ts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@graphcommerce/address-fields-nl",
|
|
3
|
+
"homepage": "https://www.graphcommerce.org/",
|
|
4
|
+
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
+
"version": "5.2.0-canary.8",
|
|
6
|
+
"sideEffects": false,
|
|
7
|
+
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
|
+
"eslintConfig": {
|
|
9
|
+
"extends": "@graphcommerce/eslint-config-pwa",
|
|
10
|
+
"parserOptions": {
|
|
11
|
+
"project": "./tsconfig.json"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"devDependencies": {
|
|
15
|
+
"@graphcommerce/eslint-config-pwa": "5.2.0-canary.8",
|
|
16
|
+
"@graphcommerce/prettier-config-pwa": "5.2.0-canary.8",
|
|
17
|
+
"@graphcommerce/typescript-config-pwa": "5.2.0-canary.8"
|
|
18
|
+
},
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"@graphcommerce/ecommerce-ui": "5.2.0-canary.8",
|
|
21
|
+
"@graphcommerce/graphql": "5.2.0-canary.8",
|
|
22
|
+
"@graphcommerce/magento-customer": "5.2.0-canary.8",
|
|
23
|
+
"@graphcommerce/magento-store": "5.2.0-canary.8",
|
|
24
|
+
"@graphcommerce/next-ui": "5.2.0-canary.8"
|
|
25
|
+
},
|
|
26
|
+
"peerDependencies": {
|
|
27
|
+
"@lingui/react": "^3.13.2",
|
|
28
|
+
"@lingui/core": "^3.13.2",
|
|
29
|
+
"@mui/material": "^5.10.16",
|
|
30
|
+
"next": "^12.1.2",
|
|
31
|
+
"react": "^18.2.0",
|
|
32
|
+
"react-dom": "^18.2.0"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { AddressFieldsProps } from '@graphcommerce/magento-customer'
|
|
2
|
+
import type { PluginProps } from '@graphcommerce/next-config'
|
|
3
|
+
import { PostcodeNLAddressFields } from '../components/PostcodeNLAddressFields'
|
|
4
|
+
|
|
5
|
+
export const component = 'AddressFields'
|
|
6
|
+
|
|
7
|
+
export const exported = '@graphcommerce/magento-customer'
|
|
8
|
+
|
|
9
|
+
function AddPostcodeNLAddressFields(props: PluginProps<AddressFieldsProps>) {
|
|
10
|
+
const { form, Prev } = props
|
|
11
|
+
const country = form.watch('countryCode')
|
|
12
|
+
return country === 'NL' ? <PostcodeNLAddressFields {...props} /> : <Prev {...props} />
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export const Plugin = AddPostcodeNLAddressFields
|