orionplace-react 0.7.7 → 0.8.0

package/templates/hooks/useOrionplaceMap.tsx

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

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

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

@@ -1,347 +0,0 @@
-'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 };
-}