orionplace-react 0.1.0 → 0.2.0

package/templates/hooks/useOrionplaceAddressForm.ts

@@ -0,0 +1,262 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import type { AddressFormProps } from '@/components/orionplace/address/AddressForm';
+import type { IAddressCountryOption } from '@/interfaces/orionplace/address/IAddressEditor';
+import type { IAddressCitySuggestion } from '@/interfaces/orionplace/address/IAddressCitySuggestion';
+import type { IAddressLocationSuggestion } from '@/interfaces/orionplace/address/IAddressLocationSuggestion';
+import type { IAddressRegion } from '@/interfaces/orionplace/address/IAddressRegionSearch';
+import type { IAddressSuggestion } from '@/interfaces/orionplace/address/IAddressSuggestion';
+import type { IUserAddress } from '@/interfaces/orionplace/address/IUserAddress';
+import { uniqueAddressRegions } from '@/lib/orionplace/addressPresentation';
+import { fieldErrorText, OrionplaceApiError } from '@/lib/orionplace/api';
+import type { OrionplaceApi } from '@/lib/orionplace/api';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { useOrionplaceApi } from './useOrionplaceApi';
+
+// The backend's field messages, or the localized fallback (as the Nuxt
+// task shows them).
+function message(reason: unknown, fallback: string) {
+  return reason instanceof OrionplaceApiError
+    ? fieldErrorText(reason.fields) || fallback
+    : fallback;
+}
+
+function geolocation() {
+  return new Promise<GeolocationCoordinates>((resolve, reject) => {
+    if (!navigator.geolocation) {
+      reject(new Error('Geolocation is unavailable'));
+      return;
+    }
+    navigator.geolocation.getCurrentPosition(
+      ({ coords }) => resolve(coords),
+      reject,
+      { enableHighAccuracy: false, timeout: 10_000 },
+    );
+  });
+}
+
+// The position the location button fills the address from.
+export type AddressLocate = () => Promise<
+  Pick<GeolocationCoordinates, 'latitude' | 'longitude'>
+>;
+
+// `api` replaces the storefront's own client and `locate` the browser's
+// geolocation (the documentation previews pass theirs: a preview never asks
+// for the reader's location).
+export function useOrionplaceAddressForm(
+  options: {
+    api?: Pick<OrionplaceApi, 'request'>;
+    locate?: AddressLocate;
+  } = {},
+): Omit<
+  AddressFormProps,
+  'address' | 'onSaved' | 'onCancel' | 'onDone'
+> {
+  const storefrontApi = useOrionplaceApi();
+  const api = options.api ?? storefrontApi;
+  const locate = options.locate ?? geolocation;
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = featureLabels(locale);
+  const regionRequest = useRef<AbortController | undefined>(undefined);
+  const hintRequest = useRef<AbortController | undefined>(undefined);
+  const [countries, setCountries] = useState<IAddressCountryOption[]>([]);
+  const [regions, setRegions] = useState<IAddressRegion[]>([]);
+  const [cities, setCities] = useState<IAddressCitySuggestion[]>([]);
+  const [streets, setStreets] = useState<IAddressSuggestion[]>([]);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState('');
+  const [fieldErrors, setFieldErrors] = useState<Record<string, string>>({});
+  const [optionsPending, setOptionsPending] = useState(false);
+  const [optionsError, setOptionsError] = useState('');
+  const [regionPending, setRegionPending] = useState(false);
+  const [regionError, setRegionError] = useState('');
+  const [hintPending, setHintPending] = useState<'' | 'city' | 'street'>('');
+  const [hintError, setHintError] = useState('');
+  const [geoPending, setGeoPending] = useState(false);
+  const [geoError, setGeoError] = useState('');
+
+  useEffect(
+    () => () => {
+      regionRequest.current?.abort();
+      hintRequest.current?.abort();
+    },
+    [],
+  );
+
+  async function loadRegions(country: number, query = '') {
+    regionRequest.current?.abort();
+    const controller = new AbortController();
+    regionRequest.current = controller;
+    setRegionPending(true);
+    setRegionError('');
+    try {
+      const values = await api.request<IAddressRegion[]>(
+        'address_hints_region_search',
+        { filters: { country, region_name: query } },
+        controller.signal,
+      );
+      if (!controller.signal.aborted) {
+        const unique = uniqueAddressRegions(values);
+        setRegions(unique);
+        return unique;
+      }
+    } catch {
+      if (!controller.signal.aborted) {
+        setRegionError(labels.addresses.regionFailed);
+      }
+    } finally {
+      if (regionRequest.current === controller) {
+        regionRequest.current = undefined;
+        setRegionPending(false);
+      }
+    }
+    return [];
+  }
+
+  function loadHints(
+    kind: 'city' | 'street',
+    endpoint: 'address_hints_suggest_city' | 'address_hints_suggest',
+    request: object,
+  ) {
+    hintRequest.current?.abort();
+    const controller = new AbortController();
+    hintRequest.current = controller;
+    setHintPending(kind);
+    setHintError('');
+    void api
+      .request<IAddressCitySuggestion[] | IAddressSuggestion[]>(
+        endpoint,
+        request,
+        controller.signal,
+      )
+      .then((values) => {
+        if (controller.signal.aborted) {
+          return;
+        }
+        if (kind === 'city') {
+          setCities(values as IAddressCitySuggestion[]);
+        } else {
+          setStreets(values as IAddressSuggestion[]);
+        }
+      })
+      .catch(() => {
+        if (!controller.signal.aborted) {
+          setHintError(labels.addresses.hintsFailed);
+        }
+      })
+      .finally(() => {
+        if (hintRequest.current === controller) {
+          hintRequest.current = undefined;
+          setHintPending('');
+        }
+      });
+  }
+
+  return {
+    countries,
+    regions,
+    cities,
+    streets,
+    pending,
+    error,
+    fieldErrors,
+    optionsPending,
+    optionsError,
+    regionPending,
+    regionError,
+    hintPending,
+    hintError,
+    geoPending,
+    geoError,
+    onLoadCountries: async (action) => {
+      setOptionsPending(true);
+      setOptionsError('');
+      try {
+        setCountries(
+          await api.request<IAddressCountryOption[]>(
+            action.endpoint,
+            action.request,
+          ),
+        );
+      } catch (reason) {
+        setOptionsError(message(reason, labels.failed));
+        throw reason;
+      } finally {
+        setOptionsPending(false);
+      }
+    },
+    onSearchRegions: (request) => {
+      const country = request.filters?.country;
+      if (!country) {
+        setRegions([]);
+        return;
+      }
+      void loadRegions(country, request.filters?.region_name);
+    },
+    onSuggestCity: (request) =>
+      loadHints('city', 'address_hints_suggest_city', request),
+    onSuggestStreet: (request) =>
+      loadHints('street', 'address_hints_suggest', request),
+    onLocate: async () => {
+      setGeoPending(true);
+      setGeoError('');
+      try {
+        const coordinates = await locate();
+        const values = await api.request<IAddressLocationSuggestion[]>(
+          'address_hints_suggest_location',
+          {
+            latitude: coordinates.latitude.toFixed(7),
+            longitude: coordinates.longitude.toFixed(7),
+          },
+        );
+        const location = values[0];
+        const country = countries.find(
+          (item) =>
+            item.iso_3166_1_a2.toUpperCase() ===
+            location?.country_code?.toUpperCase(),
+        );
+        if (!location || !country) {
+          throw new Error('Address unavailable');
+        }
+        const availableRegions = await loadRegions(country.value);
+        return {
+          location,
+          countryId: country.value,
+          region: availableRegions.find(
+            (item) =>
+              item.region_iso.toUpperCase() ===
+              location.region_code?.toUpperCase(),
+          ),
+        };
+      } catch (reason) {
+        setGeoError(labels.addresses.locationFailed);
+        throw reason;
+      } finally {
+        setGeoPending(false);
+      }
+    },
+    onSave: async (action) => {
+      setPending(true);
+      setError('');
+      setFieldErrors({});
+      try {
+        return await api.request<IUserAddress[]>(
+          action.endpoint,
+          action.request,
+          undefined,
+          action.addressId ? { address_id: action.addressId } : {},
+        );
+      } catch (reason) {
+        setError(message(reason, labels.failed));
+        if (reason instanceof OrionplaceApiError) {
+          setFieldErrors(reason.fields);
+        }
+        throw reason;
+      } finally {
+        setPending(false);
+      }
+    },
+  };
+}

package/templates/hooks/useOrionplaceApi.ts

@@ -0,0 +1,98 @@
+'use client';
+
+import { useMemo } from 'react';
+import {
+  useOrionplaceSelectionsStore,
+  useOrionplaceStore,
+} from '@/providers/OrionplaceProvider';
+import { requestBrowserAppLoad } from '@/lib/orionplace/appLoadClient';
+import {
+  OrionplaceApi,
+  type OrionplaceApiRequest,
+  type OrionplaceApiResponse,
+} from '@/lib/orionplace/api';
+import {
+  APP_ORIGIN,
+  nativeAppCookies,
+  nativeAppRequest,
+} from '@/lib/orionplace/nativeApp';
+
+function queryValue(value: unknown) {
+  return value !== null && typeof value === 'object'
+    ? JSON.stringify(value)
+    : String(value ?? '');
+}
+
+export async function transport(
+  path: string,
+  request: OrionplaceApiRequest,
+): Promise<OrionplaceApiResponse> {
+  // The Android app sends its requests to the public storefront; see
+  // lib/orionplace/nativeApp.ts. Empty on the website.
+  if (APP_ORIGIN) {
+    return nativeAppRequest(APP_ORIGIN, path, request);
+  }
+  const url         = new URL(path, window.location.origin);
+  if (request.method === 'GET' && !(request.data instanceof FormData)) {
+    for (const [key, value] of Object.entries(request.data)) {
+      url.searchParams.set(key, queryValue(value));
+    }
+  }
+
+  const response    = await fetch(url, {
+    method: request.method,
+    headers: request.headers,
+    body:
+      request.method === 'GET'
+        ? undefined
+        : request.data instanceof FormData
+          ? request.data
+          : JSON.stringify(request.data),
+    credentials: 'same-origin',
+    cache: 'no-store',
+    signal: request.signal
+      ? AbortSignal.any([request.signal, AbortSignal.timeout(35_000)])
+      : AbortSignal.timeout(35_000),
+  });
+  const contentType = response.headers.get('content-type') ?? '';
+  const body        = contentType.includes('application/json')
+    ? await response.json().catch(() => null)
+    : await response.blob();
+  return {
+    body,
+    status: response.status,
+    cookies: [],
+    headers: {
+      'content-type': contentType,
+      'content-disposition': response.headers.get('content-disposition') ?? '',
+    },
+  };
+}
+
+export function useOrionplaceApi() {
+  const store      = useOrionplaceStore();
+  const selections = useOrionplaceSelectionsStore();
+
+  return useMemo(
+    () =>
+      new OrionplaceApi({
+        transport,
+        endpoints: () => store.getState().endpoints,
+        cookies: () => (APP_ORIGIN ? nativeAppCookies() : document.cookie),
+        locale: () => selections.getState().localeCode,
+        // The customer's currency for orders and plan purchases (CURRENCY_REQUESTS).
+        currency: () => selections.getState().currencyId,
+        isSignedIn: () =>
+          Boolean(
+            store.getState().result?.response.page_data.init.is_authenticated,
+          ),
+        onSessionEnded: async () => {
+          const locale = selections.getState().localeCode;
+          await store
+            .getState()
+            .endSession((signal) => requestBrowserAppLoad(signal, locale));
+        },
+      }),
+    [selections, store],
+  );
+}

package/templates/hooks/useOrionplaceAppLoad.ts

@@ -1,10 +1,23 @@
 'use client';
 
 import { useCallback } from 'react';
-import { useOrionplace, useOrionplaceStore } from '../providers/OrionplaceProvider';
-import { requestBrowserAppLoad } from '../lib/orionplace/appLoadClient';
-import { selectFailure, selectIsReady, selectResult, selectStatus } from '../stores/orionplace';
-import type { AppLoadFailure, AppLoadResult, AppLoadStatus } from '../interfaces/orionplace';
+import {
+  useOrionplace,
+  useOrionplaceStore,
+  useOrionplaceSelectionsStore,
+} from '@/providers/OrionplaceProvider';
+import { requestBrowserAppLoad } from '@/lib/orionplace/appLoadClient';
+import {
+  selectFailure,
+  selectIsReady,
+  selectResult,
+  selectStatus,
+} from '@/stores/orionplace';
+import type {
+  AppLoadFailure,
+  AppLoadResult,
+  AppLoadStatus,
+} from '@/interfaces/orionplace';
 
 export interface OrionplaceAppLoad {
   result: AppLoadResult | null;
@@ -23,12 +36,31 @@ export interface OrionplaceAppLoad {
  */
 export function useOrionplaceAppLoad(): OrionplaceAppLoad {
   const store      = useOrionplaceStore();
+  const selections = useOrionplaceSelectionsStore();
   const result     = useOrionplace(selectResult);
   const status     = useOrionplace(selectStatus);
   const failure    = useOrionplace(selectFailure);
   const isReady    = useOrionplace(selectIsReady);
-  const initialize = useCallback(() => store.getState().load(requestBrowserAppLoad), [store]);
-  const refresh    = useCallback(() => store.getState().load(requestBrowserAppLoad, true), [store]);
+  const initialize = useCallback(
+    () =>
+      store
+        .getState()
+        .load((signal) =>
+          requestBrowserAppLoad(signal, selections.getState().localeCode),
+        ),
+    [store, selections],
+  );
+  const refresh    = useCallback(
+    () =>
+      store
+        .getState()
+        .load(
+          (signal) =>
+            requestBrowserAppLoad(signal, selections.getState().localeCode),
+          true,
+        ),
+    [store, selections],
+  );
   const reset      = useCallback(() => store.getState().reset(), [store]);
   return { result, status, failure, isReady, initialize, refresh, reset };
 }