orionplace-nuxt 0.1.2 → 0.2.0

package/templates/app/composables/useOrionplaceAddressEditor.ts

@@ -0,0 +1,343 @@
+import { computed, onMounted, onScopeDispose, reactive, ref } from 'vue';
+import { useOrionplaceGeolocation } from '@/composables/useOrionplaceGeolocation';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import {
+  useOrionplaceFeatureApi,
+  useOrionplaceTask,
+} from '@/composables/useOrionplaceFeature';
+import { featureLabels } from '@/utils/orionplace/featureLabels';
+import { uniqueAddressRegions } from '@/utils/orionplace/addressRegions';
+import {
+  refinedAddressFields,
+  type RefinableAddressField,
+} from '@/utils/orionplace/addressChanges';
+import type {
+  IUserAddress,
+  IUserAddressRequest,
+} from '@/interfaces/orionplace/address/IUserAddress';
+import type { IAddressCountryOption } from '@/interfaces/orionplace/address/IAddressEditor';
+import type { IAddressRegion } from '@/interfaces/orionplace/address/IAddressRegionSearch';
+import type { IAddressCitySuggestion } from '@/interfaces/orionplace/address/IAddressCitySuggestion';
+import type { IAddressSuggestion } from '@/interfaces/orionplace/address/IAddressSuggestion';
+import type { IAddressLocationSuggestion } from '@/interfaces/orionplace/address/IAddressLocationSuggestion';
+
+// The form values of a saved address, or empty values for a new one.
+function addressFields(address?: IUserAddress): IUserAddressRequest {
+  return {
+    address_label: address?.address_label ?? '',
+    country: address?.country?.id ?? 0,
+    state: address?.state?.id ?? 0,
+    city: address?.city ?? '',
+    line1: address?.line1 ?? '',
+    line2: address?.line2 ?? '',
+    house_number: address?.house_number ?? '',
+    postcode: address?.postcode ?? '',
+    entrance: address?.entrance ?? '',
+    intercom: address?.intercom ?? '',
+    floor: address?.floor ?? '',
+    apt_number: address?.apt_number ?? '',
+    is_default_for_shipping: address?.is_default_for_shipping ?? false,
+  };
+}
+
+export function useOrionplaceAddressEditor(address?: IUserAddress) {
+  const api           = useOrionplaceFeatureApi();
+  const readLocation  = useOrionplaceGeolocation();
+  const store         = useOrionplaceStore();
+  const task          = useOrionplaceTask();
+  const optionsTask   = useOrionplaceTask();
+  const countries     = ref<IAddressCountryOption[]>([]);
+  const regions       = ref<IAddressRegion[]>([]);
+  const region        = ref<IAddressRegion | null>(address?.state ?? null);
+  const cities        = ref<IAddressCitySuggestion[]>([]);
+  const streets       = ref<IAddressSuggestion[]>([]);
+  const hintError     = ref('');
+  const hintPending   = ref<'' | 'city' | 'street'>('');
+  const regionError   = ref('');
+  const regionPending = ref(false);
+  const geoError      = ref('');
+  const geoPending    = ref(false);
+  const geoAbort      = new AbortController();
+  // The address as the last save returned it; later saves edit it.
+  const saved         = ref<IUserAddress | undefined>(address);
+  const reviewing     = ref(false);
+  const refined       = ref<RefinableAddressField[]>([]);
+  const fields        = reactive<IUserAddressRequest>(addressFields(address));
+  const country       = computed(() =>
+    countries.value.find((item) => item.value === fields.country),
+  );
+  const suggestions   = computed(() =>
+    Boolean(country.value?.suggestions && fields.state),
+  );
+  let alive           = true;
+  let regionAbort: AbortController | undefined;
+  let hintAbort: AbortController | undefined;
+  let hintTimer: ReturnType<typeof setTimeout> | undefined;
+
+  async function loadRegions(search = '') {
+    regionAbort?.abort();
+    const controller    = new AbortController();
+    regionAbort         = controller;
+    regionPending.value = Boolean(fields.country);
+    regionError.value   = '';
+    if (!fields.country) {
+      regions.value = [];
+      return;
+    }
+    try {
+      const values = await api.request<IAddressRegion[]>(
+        'address_hints_region_search',
+        { filters: { country: fields.country, region_name: search } },
+        controller.signal,
+      );
+      if (!controller.signal.aborted && alive) {
+        regions.value = uniqueAddressRegions(values);
+      }
+    } catch {
+      if (!controller.signal.aborted && alive) {
+        regionError.value = featureLabels(
+          store.localeCode,
+        ).addresses.regionFailed;
+      }
+    } finally {
+      if (regionAbort === controller && alive) {
+        regionPending.value = false;
+      }
+    }
+  }
+
+  function clearHints() {
+    clearTimeout(hintTimer);
+    hintAbort?.abort();
+    cities.value      = [];
+    streets.value     = [];
+    hintPending.value = '';
+  }
+
+  function selectCountry(value: string) {
+    clearHints();
+    fields.country      = Number(value);
+    fields.state        = 0;
+    fields.city         = '';
+    fields.line1        = '';
+    fields.house_number = '';
+    fields.postcode     = '';
+    regions.value       = [];
+    region.value        = null;
+    void loadRegions();
+  }
+
+  function selectRegion(value: string) {
+    clearHints();
+    fields.state        = Number(value);
+    region.value        =
+      regions.value.find((item) => item.id === fields.state) ?? null;
+    fields.city         = '';
+    fields.line1        = '';
+    fields.house_number = '';
+    fields.postcode     = '';
+  }
+
+  function suggest(mode: 'city' | 'street') {
+    clearHints();
+    const query = mode === 'city' ? fields.city : fields.line1;
+    if (
+      !suggestions.value ||
+      query.trim().length < 2 ||
+      (mode === 'street' && !fields.city)
+    ) {
+      return;
+    }
+    hintTimer   = setTimeout(async () => {
+      const controller  = new AbortController();
+      hintAbort         = controller;
+      hintPending.value = mode;
+      try {
+        const data = { country: fields.country, region: fields.state };
+        if (mode === 'city') {
+          const values = await api.request<IAddressCitySuggestion[]>(
+            'address_hints_suggest_city',
+            { ...data, search_string: query },
+            controller.signal,
+          );
+          if (!controller.signal.aborted && alive) {
+            cities.value = values;
+          }
+        } else {
+          const values = await api.request<IAddressSuggestion[]>(
+            'address_hints_suggest',
+            { ...data, city: fields.city, address_string: query },
+            controller.signal,
+          );
+          if (!controller.signal.aborted && alive) {
+            streets.value = values;
+          }
+        }
+        if (!controller.signal.aborted && alive) {
+          hintError.value = '';
+        }
+      } catch {
+        if (!controller.signal.aborted && alive) {
+          hintError.value = featureLabels(
+            store.localeCode,
+          ).addresses.hintsFailed;
+        }
+      } finally {
+        if (hintAbort === controller && alive) {
+          hintPending.value = '';
+        }
+      }
+    }, 300);
+  }
+
+  function selectCity(value: IAddressCitySuggestion) {
+    clearHints();
+    fields.city     = value.city;
+    fields.line1    = '';
+    fields.postcode = value.postal_code ?? '';
+  }
+
+  function selectStreet(value: IAddressSuggestion) {
+    clearHints();
+    fields.line1    = value.street;
+    fields.postcode = value.postal_code ?? fields.postcode;
+  }
+
+  function loadCountries() {
+    return optionsTask.run('countries', async (signal) => {
+      countries.value = await api.request<IAddressCountryOption[]>(
+        'reload_customer_app',
+        { form: 'fUserAddress', field_name: 'country', filters: {} },
+        signal,
+      );
+      await loadRegions();
+    });
+  }
+
+  async function locate() {
+    if (geoPending.value || !store.init?.geo_location_enabled) {
+      return;
+    }
+    geoPending.value = true;
+    geoError.value   = '';
+    try {
+      const position      = await readLocation();
+      if (!alive) {
+        return;
+      }
+      const values        = await api.request<IAddressLocationSuggestion[]>(
+        'address_hints_suggest_location',
+        {
+          latitude: position.latitude.toFixed(7),
+          longitude: position.longitude.toFixed(7),
+        },
+        geoAbort.signal,
+      );
+      const location      = values[0];
+      const selected      = countries.value.find(
+        (item) =>
+          item.iso_3166_1_a2.toUpperCase() ===
+          location?.country_code?.toUpperCase(),
+      );
+      if (!alive) {
+        return;
+      }
+      if (!location || !selected) {
+        throw new Error('Address unavailable');
+      }
+      fields.country      = selected.value;
+      await loadRegions();
+      const matched       = regions.value.find(
+        (item) =>
+          item.region_iso.toUpperCase() ===
+          location.region_code?.toUpperCase(),
+      );
+      clearHints();
+      fields.state        = matched?.id ?? 0;
+      region.value        = matched ?? null;
+      fields.city         = location.city ?? '';
+      fields.line1        = location.street ?? '';
+      fields.house_number = location.house ?? '';
+      fields.postcode     = location.postal_code ?? '';
+    } catch {
+      if (alive) {
+        geoError.value = featureLabels(
+          store.localeCode,
+        ).addresses.locationFailed;
+      }
+    } finally {
+      if (alive) {
+        geoPending.value = false;
+      }
+    }
+  }
+
+  // The form then shows the address as the backend saved it: an address
+  // plugin may have normalized city, street, house, second line and postcode.
+  async function save() {
+    const sent    = { ...fields };
+    const current = saved.value;
+    const result  = await task.run('save', (signal) =>
+      api.request<IUserAddress[]>(
+        current ? 'address_edit' : 'address_add',
+        sent,
+        signal,
+        current ? { address_id: current.id } : {},
+      ),
+    );
+    const value   = result?.[0];
+    if (value && alive) {
+      clearHints();
+      saved.value     = value;
+      refined.value   = refinedAddressFields(sent, value);
+      region.value    = value.state;
+      reviewing.value = true;
+      Object.assign(fields, addressFields(value));
+    }
+    return result;
+  }
+
+  // «Edit» returns from the saved address to the form with its saved values.
+  function edit() {
+    reviewing.value = false;
+    refined.value   = [];
+  }
+
+  onMounted(() => void loadCountries());
+  onScopeDispose(() => {
+    alive = false;
+    regionAbort?.abort();
+    geoAbort.abort();
+    clearHints();
+  });
+  return {
+    fields,
+    saved,
+    reviewing,
+    refined,
+    task,
+    optionsTask,
+    countries,
+    regions,
+    region,
+    cities,
+    streets,
+    suggestions,
+    hintError,
+    hintPending,
+    regionError,
+    regionPending,
+    geoError,
+    geoPending,
+    loadCountries,
+    loadRegions,
+    selectCountry,
+    selectRegion,
+    suggest,
+    selectCity,
+    selectStreet,
+    locate,
+    save,
+    edit,
+  };
+}

package/templates/app/composables/useOrionplaceAddresses.ts

@@ -0,0 +1,75 @@
+import { onMounted, ref } from 'vue';
+import {
+  useOrionplaceFeatureApi,
+  useOrionplaceTask,
+} from '@/composables/useOrionplaceFeature';
+import type {
+  IUserAddress,
+  IUserAddressListResponse,
+} from '@/interfaces/orionplace/address/IUserAddress';
+
+export function useOrionplaceAddresses() {
+  const api          = useOrionplaceFeatureApi();
+  const task         = useOrionplaceTask();
+  const addresses    = ref<IUserAddress[]>([]);
+  const loaded       = ref(false);
+  const editor       = ref<IUserAddress | null>();
+  const confirmation = ref<number>();
+
+  async function refresh(signal: AbortSignal) {
+    const data      = await api.request<
+      NonNullable<IUserAddressListResponse['page_data']>
+    >('address_get', { filters: {} }, signal);
+    addresses.value = data.addresses;
+    loaded.value    = true;
+  }
+
+  function load() {
+    return task.run('load', refresh);
+  }
+
+  // The form stays open on the saved address until the customer closes it.
+  function saved() {
+    return load();
+  }
+
+  function setDefault(address: IUserAddress) {
+    return task.run('default', async (signal) => {
+      await api.request(
+        'address_set_shipping',
+        {
+          is_default_for_shipping: !address.is_default_for_shipping,
+        },
+        signal,
+        { address_id: address.id },
+      );
+      await refresh(signal);
+    });
+  }
+
+  function remove(address: IUserAddress) {
+    return task.run('delete', async (signal) => {
+      await api.request('address_delete', {}, signal, {
+        address_id: address.id,
+      });
+      addresses.value    = addresses.value.filter(
+        (item) => item.id !== address.id,
+      );
+      confirmation.value = undefined;
+      await refresh(signal);
+    });
+  }
+
+  onMounted(() => void load());
+  return {
+    task,
+    addresses,
+    loaded,
+    editor,
+    confirmation,
+    load,
+    saved,
+    setDefault,
+    remove,
+  };
+}

package/templates/app/composables/useOrionplaceApi.ts

@@ -0,0 +1,174 @@
+import {
+  useNuxtApp,
+  usePinia,
+  useRequestFetch,
+  useRequestHeader,
+  useResponseHeader,
+  useRuntimeConfig,
+} from '#imports';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
+import { useOrionplaceAppLoad } from '@/composables/useOrionplaceAppLoad';
+import { OrionplaceApi } from '@/utils/orionplace/api';
+import type {
+  OrionplaceApiRequest,
+  OrionplaceApiResponse,
+} from '@/utils/orionplace/api';
+import { createOrionplaceCookieJar } from '@/utils/orionplace/serverCookies';
+import {
+  nativeAppCookies,
+  nativeAppOrigin,
+  nativeAppRequest,
+} from '@/utils/orionplace/nativeApp';
+
+interface OrionplaceClients {
+  browser: OrionplaceApi;
+  server: OrionplaceApi;
+}
+
+// One entry per Nuxt application: one browser session, or one server render.
+const clients = new WeakMap<object, OrionplaceClients>();
+
+function createClients(): OrionplaceClients {
+  const nuxt            = useNuxtApp();
+  const store           = useOrionplaceStore(usePinia());
+  const selections      = useOrionplaceSelectionsStore();
+  const requestFetch    = useRequestFetch();
+  // A server render sends the visitor's cookies and the cookies the backend
+  // set earlier in the same render; see utils/orionplace/serverCookies.ts.
+  const jar             = import.meta.server
+    ? createOrionplaceCookieJar(useRequestHeader('cookie'))
+    : undefined;
+  const responseCookies = import.meta.server
+    ? useResponseHeader('set-cookie')
+    : undefined;
+  // The Android app sends its requests to the public storefront; see
+  // utils/orionplace/nativeApp.ts. Empty on the website.
+  const appOrigin       = nativeAppOrigin(
+    useRuntimeConfig().public.orionplaceAppOrigin,
+  );
+
+  // Every cookie the backend sets during a server render reaches the
+  // browser as its own Set-Cookie header, unchanged.
+  function relay(cookies: string[]) {
+    if (!responseCookies || !cookies.length) {
+      return;
+    }
+
+    const existing        = responseCookies.value;
+    const existingCookies = Array.isArray(existing) ? [...existing] : [];
+
+    if (existing && !Array.isArray(existing)) {
+      existingCookies.push(String(existing));
+    }
+
+    responseCookies.value = [...existingCookies, ...cookies];
+  }
+
+  const transport       = async (
+    path: string,
+    request: OrionplaceApiRequest,
+  ): Promise<OrionplaceApiResponse> => {
+    if (appOrigin) {
+      return nativeAppRequest(appOrigin, path, request);
+    }
+    let received: OrionplaceApiResponse | undefined;
+    const headers = jar
+      ? { ...request.headers, cookie: jar.header() }
+      : request.headers;
+
+    await requestFetch<unknown>(path, {
+      method: request.method,
+      headers,
+      body: request.method === 'GET' ? undefined : request.data,
+      query:
+        request.method === 'GET' && !(request.data instanceof FormData)
+          ? request.data
+          : undefined,
+      signal: request.signal,
+      credentials: 'same-origin',
+      cache: 'no-store',
+      retry: 0,
+      timeout: 35_000,
+      ignoreResponseError: true,
+      onResponse({ response }) {
+        received = {
+          body: response._data,
+          status: response.status,
+          cookies: import.meta.server ? response.headers.getSetCookie() : [],
+          headers: {
+            'content-type': response.headers.get('content-type') ?? '',
+            'content-disposition':
+              response.headers.get('content-disposition') ?? '',
+          },
+        };
+      },
+    });
+
+    if (!received) {
+      throw new Error('The API returned no response.');
+    }
+
+    jar?.apply(received.cookies);
+    relay(received.cookies);
+
+    return received;
+  };
+
+  const shared          = {
+    transport,
+    endpoints: () => store.endpoints,
+    cookies: () =>
+      jar ? jar.header() : appOrigin ? nativeAppCookies() : document.cookie,
+    locale: () => store.localeCode,
+    isSignedIn: () => store.isAuthenticated,
+    // The customer's currency for orders and plan purchases (CURRENCY_REQUESTS).
+    currency: () => selections.currencyId,
+  };
+
+  return {
+    // Components send their requests in the browser. During a server render
+    // this client sends only Application Load, so a request started while
+    // the page renders cannot outlive the render.
+    browser: new OrionplaceApi({
+      ...shared,
+      canRequest: () => import.meta.client,
+      // HTTP 401 ended the customer's session: show the guest storefront.
+      // This never opens sign-in and never repeats the failed request.
+      onSessionEnded: () =>
+        nuxt.runWithContext(() => useOrionplaceAppLoad().endSession()),
+    }),
+    // Page data that the server render awaits; see useOrionplaceServerData.
+    // A failed server request leaves the page to the browser, which loads
+    // the data again and handles an ended session there.
+    server: new OrionplaceApi(shared),
+  };
+}
+
+function useOrionplaceClients() {
+  const nuxt     = useNuxtApp();
+  const existing = clients.get(nuxt);
+
+  if (existing) {
+    return existing;
+  }
+
+  const created  = createClients();
+  clients.set(nuxt, created);
+
+  return created;
+}
+
+export function useOrionplaceApi() {
+  return useOrionplaceClients().browser;
+}
+
+/**
+ * The client for page data loaded during a server render. It shares the
+ * transport, endpoint discovery, cookies and CSRF handling with
+ * `useOrionplaceApi`. Use it through `useOrionplaceServerData`, which
+ * awaits the request before the page renders.
+ */
+export function useOrionplaceServerApi() {
+  return useOrionplaceClients().server;
+}

package/templates/app/composables/useOrionplaceAppLoad.ts

@@ -0,0 +1,74 @@
+import { createError, usePinia, useResponseHeader } from '#imports';
+import { computed } from 'vue';
+import { storeToRefs } from 'pinia';
+import { useOrionplaceStore } from '@/stores/orionplace';
+import type {
+  AppLoadFailure,
+  AppLoadResult,
+} from '@/interfaces/orionplace/transport';
+import { useOrionplaceApi } from '@/composables/useOrionplaceApi';
+import { appLoadResult, inspectAppLoad } from '@/utils/orionplaceAppLoad';
+
+/** Transport and explicit actions. Calling this accessor does not start a request. */
+export function useOrionplaceAppLoad() {
+  // SSR forwards the current request's domain, cookies and authorization to our own gateway.
+  const store   = useOrionplaceStore(usePinia());
+  const refs    = storeToRefs(store);
+  const api     = useOrionplaceApi();
+  if (import.meta.server) {
+    useResponseHeader('cache-control').value = 'private, no-store';
+  }
+
+  const request = async (
+    signal: AbortSignal,
+    locale = '',
+  ): Promise<AppLoadResult> => {
+    let received:
+      { body: unknown; status: number; cookies: string[] } | undefined;
+    try {
+      received = await api.applicationLoad(signal, locale);
+    } catch {
+      throw createError({
+        message: 'Could not reach the marketplace API.',
+        data: {
+          kind: 'network',
+          httpStatus: null,
+          fields: [],
+        } satisfies AppLoadFailure,
+      });
+    }
+    if (!received) {
+      throw createError({
+        message: 'The API returned no response.',
+        data: {
+          kind: 'network',
+          httpStatus: null,
+          fields: [],
+        } satisfies AppLoadFailure,
+      });
+    }
+    // A cookie that AppLoad sets during a server render (a new guest session
+    // or CSRF token) is relayed to the browser by the shared API transport,
+    // which also sends it with the later requests of the same render.
+    const failure = inspectAppLoad(received.body, received.status);
+    if (failure) {
+      throw createError({
+        message: 'Marketplace initialization failed.',
+        data: failure,
+      });
+    }
+    return appLoadResult(received.body, received.status);
+  };
+  return {
+    store,
+    data: refs.result,
+    status: refs.status,
+    error: computed(() => (store.failure ? { data: store.failure } : null)),
+    initialize: (locale = '') =>
+      store.load((signal) => request(signal, locale)),
+    refresh: () => store.load(request, true),
+    // Called by the shared API client after HTTP 401 in a signed-in session.
+    endSession: () => store.endSession(request),
+    reset: () => store.reset(),
+  };
+}