orionplace-react 0.7.7 → 0.8.0

package/templates/hooks/useOrionplaceAddressForm.ts

@@ -1,262 +0,0 @@
-'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

@@ -1,98 +0,0 @@
-'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,66 +0,0 @@
-'use client';
-
-import { useCallback } from 'react';
-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;
-  status: AppLoadStatus;
-  failure: AppLoadFailure | null;
-  isReady: boolean;
-  initialize: () => Promise<void>;
-  refresh: () => Promise<void>;
-  reset: () => void;
-}
-
-/**
- * Explicit browser actions. Calling this hook does not start a request: the
- * server render initializes the marketplace and hydration reuses that snapshot.
- * After a confirmed login or logout, call reset and then refresh.
- */
-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((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 };
-}