orionplace-react 0.1.0 → 0.2.0

package/templates/hooks/useOrionplaceMap.tsx

@@ -0,0 +1,230 @@
+'use client';
+
+import { createContext, useContext, type ReactNode } from 'react';
+import type {
+  DeliveryMapFactory,
+  IDeliveryMapMarker,
+  IDeliveryMapOptions,
+  IDeliveryMapView,
+} from '@/interfaces/orionplace/cart/IDeliveryMap';
+
+interface YandexEvents {
+  add: (type: string, handler: () => void) => void;
+  remove: (type: string, handler: () => void) => void;
+}
+
+interface YandexPlacemark {
+  events: YandexEvents;
+  options: { set: (name: string, value: string) => void };
+}
+
+interface YandexCollection {
+  add: (placemark: YandexPlacemark) => void;
+  removeAll: () => void;
+  getBounds: () => number[][] | null;
+}
+
+interface YandexMap {
+  geoObjects: { add: (collection: YandexCollection) => void };
+  setCenter: (
+    center: number[],
+    zoom?: number,
+    options?: { duration?: number },
+  ) => void;
+  setBounds: (
+    bounds: number[][],
+    options?: { checkZoomRange?: boolean; zoomMargin?: number },
+  ) => void;
+  destroy: () => void;
+}
+
+export interface YandexMapsApi {
+  ready: (success: () => void, failure?: (error: unknown) => void) => void;
+  Map: new (
+    container: HTMLElement,
+    state: { center: number[]; zoom: number; controls: string[] },
+    options?: Record<string, unknown>,
+  ) => YandexMap;
+  Placemark: new (
+    coordinates: number[],
+    properties: Record<string, string>,
+    options: Record<string, string>,
+  ) => YandexPlacemark;
+  GeoObjectCollection: new () => YandexCollection;
+}
+
+type YandexWindow = Window & { ymaps?: YandexMapsApi };
+
+const SCRIPT_URL = 'https://api-maps.yandex.ru/2.1/';
+const LOAD_TIMEOUT = 20_000;
+const SINGLE_ZOOM = 14;
+const ACTIVE_PRESET = 'islands#blackDotIcon';
+const DEFAULT_PRESET = 'islands#grayDotIcon';
+const loaders = new WeakMap<Window, Promise<YandexMapsApi>>();
+const MapFactoryContext = createContext<DeliveryMapFactory | null>(null);
+
+function escapeHtml(value: string) {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+function whenReady(api: YandexMapsApi) {
+  return new Promise<YandexMapsApi>((resolve, reject) => {
+    api.ready(() => resolve(api), reject);
+  });
+}
+
+function injectScript(target: YandexWindow, apiKey: string, language: string) {
+  return new Promise<YandexMapsApi>((resolve, reject) => {
+    const script = target.document.createElement('script');
+    const timer = target.setTimeout(fail, LOAD_TIMEOUT);
+
+    function fail() {
+      target.clearTimeout(timer);
+      script.remove();
+      reject(new Error('Map script failed to load'));
+    }
+
+    script.async = true;
+    script.src =
+      `${SCRIPT_URL}?apikey=${encodeURIComponent(apiKey)}` +
+      `&lang=${encodeURIComponent(language)}`;
+    script.onerror = fail;
+    script.onload = () => {
+      target.clearTimeout(timer);
+      if (!target.ymaps) {
+        reject(new Error('Map script did not provide ymaps'));
+        return;
+      }
+      whenReady(target.ymaps).then(resolve, reject);
+    };
+    target.document.head.appendChild(script);
+  });
+}
+
+export function loadYandexMaps(
+  apiKey: string,
+  language: string,
+  target: YandexWindow = window,
+) {
+  const pending = loaders.get(target);
+  if (pending) {
+    return pending;
+  }
+
+  const loading = target.ymaps
+    ? whenReady(target.ymaps)
+    : injectScript(target, apiKey, language);
+  loaders.set(target, loading);
+  void loading.catch(() => loaders.delete(target));
+  return loading;
+}
+
+export function createYandexMapView(
+  api: YandexMapsApi,
+  options: IDeliveryMapOptions,
+): IDeliveryMapView {
+  const map = new api.Map(
+    options.container,
+    {
+      center: [options.center.latitude, options.center.longitude],
+      zoom: SINGLE_ZOOM,
+      controls: ['zoomControl'],
+    },
+    { suppressMapOpenBlock: true },
+  );
+  const collection = new api.GeoObjectCollection();
+  const placemarks = new Map<string, YandexPlacemark>();
+  const listeners: Array<() => void> = [];
+  let markers: IDeliveryMapMarker[] = [];
+  let activeId = options.activeId;
+
+  function removeListeners() {
+    listeners.splice(0).forEach((remove) => remove());
+  }
+
+  function preset(id: string) {
+    return id === activeId ? ACTIVE_PRESET : DEFAULT_PRESET;
+  }
+
+  function addPlacemark(marker: IDeliveryMapMarker) {
+    const placemark = new api.Placemark(
+      [marker.latitude, marker.longitude],
+      { hintContent: escapeHtml(marker.title) },
+      { preset: preset(marker.id) },
+    );
+    const select = () => options.onSelect(marker.id);
+    placemark.events.add('click', select);
+    listeners.push(() => placemark.events.remove('click', select));
+    placemarks.set(marker.id, placemark);
+    collection.add(placemark);
+  }
+
+  function showAll() {
+    const bounds = collection.getBounds();
+    if (markers.length > 1 && bounds) {
+      map.setBounds(bounds, { checkZoomRange: true, zoomMargin: 32 });
+    } else if (markers[0]) {
+      map.setCenter([markers[0].latitude, markers[0].longitude], SINGLE_ZOOM);
+    }
+  }
+
+  function setMarkers(next: IDeliveryMapMarker[]) {
+    removeListeners();
+    collection.removeAll();
+    placemarks.clear();
+    markers = next;
+    markers.forEach(addPlacemark);
+    showAll();
+  }
+
+  function setActive(id?: string) {
+    activeId = id;
+    placemarks.forEach((placemark, key) => {
+      placemark.options.set('preset', preset(key));
+    });
+    const active = markers.find((marker) => marker.id === id);
+    if (active) {
+      map.setCenter([active.latitude, active.longitude], SINGLE_ZOOM, {
+        duration: 300,
+      });
+    }
+  }
+
+  function destroy() {
+    removeListeners();
+    placemarks.clear();
+    map.destroy();
+  }
+
+  map.geoObjects.add(collection);
+  setMarkers(options.markers);
+  return { setMarkers, setActive, destroy };
+}
+
+export async function createYandexMap(options: IDeliveryMapOptions) {
+  const api = await loadYandexMaps(options.apiKey, options.language);
+  return createYandexMapView(api, options);
+}
+
+export function OrionplaceMapProvider({
+  factory,
+  children,
+}: {
+  factory: DeliveryMapFactory;
+  children: ReactNode;
+}) {
+  return (
+    <MapFactoryContext.Provider value={factory}>
+      {children}
+    </MapFactoryContext.Provider>
+  );
+}
+
+export function useOrionplaceMap() {
+  return useContext(MapFactoryContext) ?? createYandexMap;
+}

package/templates/hooks/useOrionplaceMediaFormat.ts

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { TBannerFormats } from '@/interfaces/orionplace';
+
+function formatForWidth(width: number): TBannerFormats {
+  if (width < 640) {
+    return 'mobile';
+  }
+  if (width < 1024) {
+    return 'tablet';
+  }
+  if (width < 1280) {
+    return 'wide';
+  }
+  return 'desktop';
+}
+
+export function useOrionplaceMediaFormat(): TBannerFormats {
+  const [format, setFormat] = useState<TBannerFormats>('desktop');
+
+  useEffect(() => {
+    function update() {
+      setFormat(formatForWidth(window.innerWidth));
+    }
+
+    update();
+    window.addEventListener('resize', update, { passive: true });
+    return () => window.removeEventListener('resize', update);
+  }, []);
+
+  return format;
+}

package/templates/hooks/useOrionplaceProduct.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+import { useOrionplaceProducts } from '@/providers/OrionplaceProvider';
+import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
+import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
+
+export const OrionplaceSuppliedProductContext = createContext<
+  IProduct | undefined
+>(undefined);
+
+export function useOrionplaceProduct(
+  productId: number,
+  collection: OrionplaceProductCollection = 'products',
+) {
+  const supplied = useContext(OrionplaceSuppliedProductContext);
+  const stored = useOrionplaceProducts((state) => {
+    const base =
+      collection === 'featured' ? state.init?.featured : state.init?.products;
+
+    return (
+      state.updates[collection][productId] ??
+      base?.find((item) => item.id === productId)
+    );
+  });
+
+  return stored ?? (supplied?.id === productId ? supplied : undefined);
+}

package/templates/hooks/useOrionplaceProfile.ts

@@ -0,0 +1,347 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+  useOrionplaceStore,
+} from '@/providers/OrionplaceProvider';
+import {
+  selectIsAuthenticated,
+  selectIsReady,
+  selectProfile,
+} from '@/stores/orionplace';
+import type { IProfileData } from '@/interfaces/orionplace/accounts/IProfileData';
+import type {
+  IStorefrontProfileAction,
+  IStorefrontProfileState,
+} from '@/interfaces/orionplace/accounts/IStorefrontProfile';
+import type { OrionplaceApi } from '@/lib/orionplace/api';
+import { useOrionplaceApi } from '@/hooks/useOrionplaceApi';
+import { useOrionplaceAppLoad } from '@/hooks/useOrionplaceAppLoad';
+import { requestBrowserAppLoad } from '@/lib/orionplace/appLoadClient';
+import {
+  profileFailure,
+  profileResponse,
+  profileResponseState,
+  profileState,
+  restartProfileAuthentication,
+} from '@/lib/orionplace/profile';
+import { profileLabels } from '@/lib/orionplace/profileLabels';
+
+/**
+ * The signed-in customer's profile: loading it, saving the details, photo,
+ * e-mail preferences and password, and the sign-in steps. `api` replaces the
+ * storefront's own client (the documentation previews pass theirs), as in
+ * the Nuxt and Svelte `useOrionplaceProfile`.
+ */
+export function useOrionplaceProfile(
+  options: {
+    api?: Pick<OrionplaceApi, 'requestResponse'>;
+    loadOnMount?: boolean;
+    onAuthenticated?: () => unknown;
+  } = {},
+) {
+  const storefrontApi     = useOrionplaceApi();
+  const api               = options.api ?? storefrontApi;
+  const appLoad           = useOrionplaceAppLoad();
+  const store             = useOrionplaceStore();
+  const authenticated     = useOrionplace(selectIsAuthenticated);
+  const locale            = useOrionplaceSelections((value) => value.localeCode);
+  const [state, setState] = useState<IStorefrontProfileState>(profileState);
+  const stateRef          = useRef(state);
+  const verifiedEmail     = useRef('');
+  const active            = useRef<AbortController | undefined>(undefined);
+  const mounted           = useRef(true);
+  const reads             = useRef(new Set<AbortController>());
+
+  function update(
+    value:
+      | Partial<IStorefrontProfileState>
+      | ((current: IStorefrontProfileState) => IStorefrontProfileState),
+  ) {
+    const current    = stateRef.current;
+    const next       =
+      typeof value === 'function' ? value(current) : { ...current, ...value };
+    stateRef.current = next;
+    setState(next);
+  }
+
+  async function call(name: string, data: object | FormData, steps = false) {
+    const controller = active.current;
+    const response   = await api.requestResponse(name, data, controller?.signal);
+    controller?.signal.throwIfAborted();
+    if (!mounted.current || controller !== active.current) {
+      throw new Error('Disposed profile request');
+    }
+    update((current) => profileResponseState(current, name, response));
+    return profileResponse(response, steps);
+  }
+
+  async function load() {
+    const data     = await call('profile_get', { filters: {} });
+    const profiles = data.profile_info as IProfileData[] | undefined;
+    const found    = profiles?.find(
+      (item) => item.id === selectProfile(store.getState())?.id,
+    );
+    if (!found) {
+      throw new Error('Current profile missing');
+    }
+    store.getState().patchProfile({
+      first_name: found.first_name,
+      last_name: found.last_name,
+      phone: found.phone,
+      dob: found.dob || null,
+      email: found.email,
+      avatar: found.profile_avatar,
+      notifications_enabled: found.notifications_enabled,
+    });
+    update({
+      loaded: true,
+      notificationLocale: found.email_notification_locale || '',
+    });
+  }
+
+  async function refreshSession() {
+    const controller = active.current;
+    await appLoad.refresh();
+    controller?.signal.throwIfAborted();
+    if (
+      !mounted.current ||
+      !selectIsReady(store.getState()) ||
+      !selectIsAuthenticated(store.getState())
+    ) {
+      throw new Error('Account refresh failed');
+    }
+    update({ refreshRequired: false });
+    await options.onAuthenticated?.();
+    if (mounted.current && !controller?.signal.aborted) {
+      await load();
+    }
+  }
+
+  async function getNotificationSettings() {
+    const controller = new AbortController();
+    reads.current.add(controller);
+    try {
+      const response = await api.requestResponse(
+        'profile_notification_settings_get',
+        {},
+        controller.signal,
+      );
+      controller.signal.throwIfAborted();
+      return profileResponse(response);
+    } finally {
+      reads.current.delete(controller);
+    }
+  }
+
+  async function request(event: IStorefrontProfileAction) {
+    if (
+      !mounted.current ||
+      stateRef.current.pending ||
+      (event.action === 'authenticate' &&
+        event.data.step === 'step_phone' &&
+        stateRef.current.otpDelay > 0)
+    ) {
+      return;
+    }
+    if (event.action === 'auth-restart') {
+      update(restartProfileAuthentication);
+      return;
+    }
+    if (stateRef.current.refreshRequired && event.action !== 'refresh') {
+      return;
+    }
+    if (
+      !selectIsAuthenticated(store.getState()) &&
+      !['authenticate', 'auth-resend', 'refresh'].includes(event.action)
+    ) {
+      return;
+    }
+    active.current?.abort();
+    const controller = new AbortController();
+    active.current   = controller;
+    update({ pending: event.action, error: '', errors: {}, message: '' });
+    try {
+      switch (event.action) {
+        case 'load':
+          await load();
+          break;
+        case 'refresh':
+          await refreshSession();
+          break;
+        case 'details':
+          await call('profile_update_info', {
+            ...event.data,
+            email: selectProfile(store.getState())?.email ?? '',
+          });
+          store.getState().patchProfile({
+            first_name: event.data.first_name,
+            last_name: event.data.last_name,
+            dob: event.data.dob || null,
+          });
+          break;
+        case 'password':
+          await call('profile_update_password', event.data);
+          store.getState().patchProfile({ password: true });
+          break;
+        case 'delete-account':
+          await call('profile_delete', event.data);
+          // The backend has signed the customer out: the guest state shows at
+          // once and the guest Application Load follows in the background.
+          void store
+            .getState()
+            .endSession((signal) => requestBrowserAppLoad(signal, locale));
+          break;
+        case 'avatar-add': {
+          const form = new FormData();
+          form.append('profile_avatar', event.file);
+          const data = await call('profile_avatar_add', form);
+          if (typeof data.avatar !== 'string') {
+            throw new Error('Avatar URL missing');
+          }
+          store.getState().patchProfile({ avatar: data.avatar });
+          break;
+        }
+        case 'avatar-delete':
+          await call('profile_avatar_delete', {});
+          store.getState().patchProfile({ avatar: null });
+          break;
+        case 'notifications': {
+          // Keep the state the backend saved, not the requested one.
+          const data = await call(
+            'profile_notification_settings_update',
+            event.data,
+          );
+          if (typeof data.notifications_enabled !== 'boolean') {
+            throw new Error('Notification state missing');
+          }
+          store.getState().patchProfile({
+            notifications_enabled: data.notifications_enabled,
+          });
+          break;
+        }
+        case 'notification-locale': {
+          const data     = await call(
+            'profile_email_notification_locale_update',
+            event.data,
+          );
+          const selected = data.email_notification_locale as
+            | {
+                locale_key?: string;
+              }
+            | undefined;
+          if (!selected?.locale_key) {
+            throw new Error('Locale missing');
+          }
+          update({ notificationLocale: selected.locale_key });
+          break;
+        }
+        case 'email': {
+          const data = await call('email_enroll', event.data, true);
+          if (
+            data.next_step === 'step_email_code' &&
+            event.data.step === 'step_email'
+          ) {
+            verifiedEmail.current = event.data.email;
+            update({ emailStep: 'step_email_code' });
+          } else if (
+            event.data.step === 'step_email_code' &&
+            !data.next_step &&
+            verifiedEmail.current
+          ) {
+            store.getState().patchProfile({
+              email: verifiedEmail.current,
+            });
+            verifiedEmail.current = '';
+            update({ emailStep: 'step_email' });
+          } else {
+            throw new Error('Unexpected email step');
+          }
+          break;
+        }
+        case 'authenticate': {
+          const data  = await call('auth_signin_signup', event.data, true);
+          const steps = [
+            'step_phone',
+            'step_password',
+            'step_otp',
+            'step_additional',
+          ];
+          if (steps.includes(String(data.next_step))) {
+            break;
+          } else if (typeof data.active_id === 'number') {
+            update({ refreshRequired: true });
+            await refreshSession();
+          } else {
+            throw new Error('Unexpected authentication step');
+          }
+          break;
+        }
+        case 'auth-resend':
+          if (
+            stateRef.current.authStep === 'step_otp' &&
+            stateRef.current.otpDelay <= 0
+          ) {
+            await call('auth_new_otp_request', {
+              purpose: stateRef.current.authPurpose,
+            });
+          }
+          break;
+      }
+      if (
+        !['load', 'refresh', 'authenticate', 'auth-resend'].includes(
+          event.action,
+        ) &&
+        !(
+          event.action === 'email' &&
+          stateRef.current.emailStep === 'step_email_code'
+        )
+      ) {
+        update((current) => ({
+          ...current,
+          message: event.action,
+          saved: current.saved + 1,
+        }));
+      }
+    } catch (reason) {
+      if (!controller.signal.aborted && mounted.current) {
+        update(profileFailure(reason, profileLabels(locale).failed));
+      }
+    } finally {
+      if (active.current === controller) {
+        active.current = undefined;
+        update({ pending: '' });
+      }
+    }
+  }
+
+  useEffect(() => {
+    mounted.current = true;
+    const timer     = window.setInterval(() => {
+      if (stateRef.current.otpDelay > 0) {
+        update({ otpDelay: stateRef.current.otpDelay - 1 });
+      }
+    }, 1000);
+    return () => {
+      mounted.current  = false;
+      window.clearInterval(timer);
+      active.current?.abort();
+      active.current   = undefined;
+      stateRef.current = { ...stateRef.current, pending: '' };
+      for (const controller of reads.current) {
+        controller.abort();
+      }
+      reads.current.clear();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (authenticated && options.loadOnMount !== false) {
+      void request({ action: 'load' });
+    }
+  }, [authenticated, options.loadOnMount]);
+
+  return { state, request, getNotificationSettings };
+}