В этом руководстве вы узнаете, как включить встроенное автозаполнение адреса через DaData при оформлении заказа или добавить собственный провайдер для другой страны или сервиса.

Ввод адреса на шаге оформления заказа реализован как подключаемый провайдер, а не как фиксированный набор полей. Витрина поставляется с одним реальным провайдером (DaData для российских адресов), обычным полем адреса как резервным вариантом и режимом ручного ввода, на который покупатель может переключиться в любой момент.

AddressAutocomplete считывает активный провайдер из переменной окружения и переключается по нему:

src/modules/common/components/address-autocomplete/index.tsx
1const renderAutocomplete = () => {
2  switch (true) {
3    case isDaData(addressAutocompleteProvider):
4      return <DaDataAddressInput {...props} />
5    default:
6      return <PlainAddressInput {...props} />
7  }
8}

addressAutocompleteProvider и isDaData оба определены в src/lib/constants.tsx. Любое значение кроме dadata, включая незаданную переменную, проваливается в PlainAddressInput (providers/plain.tsx), который отрисовывает одно поле адреса без какого-либо автозаполнения.

Задайте две переменные окружения в apps/storefront/.env.local:

apps/storefront/.env.local
1NEXT_PUBLIC_ADDRESS_AUTOCOMPLETE_PROVIDER=dadata
2NEXT_PUBLIC_ADDRESS_AUTOCOMPLETE_PROVIDER_API_KEY=

Получите API-ключ в своём аккаунте DaData. DaDataAddressInput (src/modules/common/components/address-autocomplete/providers/dadata.tsx) передаёт его напрямую в компонент AddressSuggestions библиотеки react-dadata. Этот компонент подсказывает только российские адреса.

Каждый компонент-провайдер принимает одни и те же props: AddressFields на входе, AddressFields на выходе:

src/modules/common/components/address-autocomplete/types.ts
1export type AddressFields = {
2  address_1: string
3  postal_code: string
4  city: string
5  province: string
6}
7
8export type AddressAutocompleteProps = {
9  values: AddressFields
10  onChange: (fields: AddressFields) => void
11  required?: boolean
12}

Чтобы добавить провайдер для другой страны или сервиса:

1. Создайте файл в providers/, реализующий AddressAutocompleteProps, который вызывает onChange с объектом AddressFields каждый раз, когда посетитель выбирает подсказку.
2. Добавьте для него case в переключателе renderAutocomplete выше и небольшой хелпер isYourProvider(provider?: string) рядом с isDaData в src/lib/constants.tsx.
3. Укажите в NEXT_PUBLIC_ADDRESS_AUTOCOMPLETE_PROVIDER тот id, который проверяют ваш case и хелпер.

На форму props и вызовы onChange у PlainAddressInput можно ориентироваться при написании нового провайдера: это рабочий минимальный пример. Сам он, впрочем, не обращается ни к какому внешнему API.