orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/cart/CartDeliverySelector.tsx

@@ -1,679 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type ChangeEvent,
-  type ReactNode,
-} from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import type {
-  ICartDelivery,
-  IDeliveryType,
-} from '@/interfaces/orionplace/cart/ICartData';
-import type {
-  ICartDeliveryPoint,
-  ICartDeliverySelectionRequest,
-  ICartPickupSelectionRequest,
-} from '@/interfaces/orionplace/cart/ICartDeliveryActions';
-import {
-  canShowDeliveryMap,
-  deliveryMapKey,
-  pickupMapMarkers,
-} from '@/lib/orionplace/deliveryMap';
-import { getAvailableValueFromObject } from '@/lib/orionplace/presentation';
-import { cartLabels } from '@/lib/orionplace/cartLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import { DeliveryMap } from './DeliveryMap';
-import styles from './CartDeliverySelector.module.css';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-
-export interface CartDeliveryMethodsAction {
-  endpoint: 'cart_customer_delivery_get';
-  request: {
-    filters: { load_delivery_types_for_dlf: number };
-  };
-  signal: AbortSignal;
-}
-
-export interface CartDeliveryPointsAction {
-  endpoint: 'cart_customer_delivery_points_get';
-  request: ICartDeliverySelectionRequest;
-  signal: AbortSignal;
-}
-
-export type CartDeliveryChangeAction =
-  | {
-      endpoint: 'cart_customer_delivery_courier_set';
-      request: ICartDeliverySelectionRequest;
-    }
-  | {
-      endpoint: 'cart_customer_delivery_pickup_set';
-      request: ICartPickupSelectionRequest;
-    };
-
-export interface CartDeliverySelectorProps {
-  delivery: ICartDelivery;
-  disabled?: boolean;
-  pending?: boolean;
-  error?: string;
-  onLoadMethods?: (
-    action: CartDeliveryMethodsAction,
-  ) => Promise<readonly IDeliveryType[] | null | undefined> |
-    readonly IDeliveryType[] |
-    null |
-    undefined;
-  onLoadPoints?: (
-    action: CartDeliveryPointsAction,
-  ) => Promise<readonly ICartDeliveryPoint[] | null | undefined> |
-    readonly ICartDeliveryPoint[] |
-    null |
-    undefined;
-  onChange?: (
-    action: CartDeliveryChangeAction,
-  ) => Promise<unknown> | unknown;
-}
-
-const icons = {
-  pickup: [
-    'M4 10v10h16V10',
-    'M3 10 5 4h14l2 6',
-    'M10 20v-5h4v5',
-  ],
-  courier: [
-    'M3 6h11v10H3z',
-    'M14 9h4l3 3v4h-7',
-    'M7 16a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3',
-    'M17 16a1.5 1.5 0 1 0 0 3a1.5 1.5 0 1 0 0-3',
-  ],
-  pin: [
-    'M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10Z',
-    'M12 9a2 2 0 1 0 0 4a2 2 0 1 0 0-4',
-  ],
-  clock: [
-    'M12 4a8 8 0 1 0 0 16a8 8 0 1 0 0-16',
-    'M12 8v4l3 2',
-  ],
-  check: ['m5 12 4 4 10-10'],
-};
-
-export function CartDeliverySelector({
-  delivery,
-  disabled = false,
-  pending = false,
-  error = '',
-  onLoadMethods,
-  onLoadPoints,
-  onChange,
-}: CartDeliverySelectorProps) {
-  const init = useOrionplace(selectInit);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = cartLabels(locale);
-  const common = featureLabels(locale);
-  const [open, setOpen] = useState(false);
-  const [methods, setMethods] = useState<readonly IDeliveryType[]>([]);
-  const [selected, setSelected] = useState(0);
-  const [points, setPoints] = useState<readonly ICartDeliveryPoint[]>();
-  const [query, setQuery] = useState('');
-  const [highlighted, setHighlighted] = useState<string>();
-  const [taskPending, setTaskPending] = useState(false);
-  const [taskError, setTaskError] = useState('');
-  const request = useRef<AbortController | undefined>(undefined);
-  const pointCache = useRef(new Map<number, readonly ICartDeliveryPoint[]>());
-  const selectedRef = useRef(selected);
-  const pointList = useRef<HTMLUListElement>(null);
-  selectedRef.current = selected;
-  const busy = disabled || pending || taskPending;
-  const method = methods.find((item) => item.id === selected);
-  const current = Object.values(
-    delivery.from_store?.deliveries ?? {},
-  ).find((item) => item.id === delivery.delivery_data.method);
-  const confirmedCode = selected === delivery.delivery_data.method
-    ? delivery.delivery_data.delivery_to_code
-    : undefined;
-  const activePoint = highlighted ?? confirmedCode;
-  const visiblePoints = useMemo(() => {
-    const normalized = query.toLocaleLowerCase();
-    return (points ?? []).filter((point) =>
-      `${point.address ?? ''} ${point.postal_code ?? ''}`
-        .toLocaleLowerCase()
-        .includes(normalized),
-    );
-  }, [points, query]);
-  const mapMarkers = useMemo(
-    () => pickupMapMarkers(visiblePoints),
-    [visiblePoints],
-  );
-  const showMap = canShowDeliveryMap(
-    deliveryMapKey(init?.public_keys),
-    mapMarkers,
-  );
-
-  useEffect(() => () => request.current?.abort(), []);
-
-  useEffect(() => {
-    if (!open) {
-      return;
-    }
-    const ids = new Set(
-      Object.values(delivery.from_store?.deliveries ?? {})
-        .map((item) => item.id),
-    );
-    setMethods((currentMethods) =>
-      currentMethods.filter((item) => ids.has(item.id)),
-    );
-    if (selectedRef.current && !ids.has(selectedRef.current)) {
-      request.current?.abort();
-      resetPoints();
-      setSelected(0);
-    }
-  }, [delivery.from_store?.deliveries]);
-
-  function resetPoints() {
-    setPoints(undefined);
-    setQuery('');
-    setHighlighted(undefined);
-  }
-
-  function methodName(value: IDeliveryType) {
-    return getAvailableValueFromObject(value.locales, locale)?.tariff_name ||
-      `#${value.id}`;
-  }
-
-  function methodDescription(value: IDeliveryType) {
-    return getAvailableValueFromObject(value.locales, locale)
-      ?.tariff_desc_external;
-  }
-
-  function carrierName(value: IDeliveryType) {
-    return getAvailableValueFromObject(value.carrier?.locale, locale)
-      ?.carrier_name;
-  }
-
-  function methodType(value: IDeliveryType) {
-    return value.delivery_to_carrier_point
-      ? labels.pickupType
-      : labels.courierType;
-  }
-
-  function methodIcon(value: IDeliveryType) {
-    return value.delivery_to_carrier_point ? icons.pickup : icons.courier;
-  }
-
-  function selectionInput(deliveryType = selected) {
-    return {
-      delivery_from: delivery.delivery_from_id,
-      delivery_type: deliveryType,
-    };
-  }
-
-  async function show() {
-    if (busy) {
-      return;
-    }
-    request.current?.abort();
-    const controller = new AbortController();
-    request.current = controller;
-    setTaskPending(true);
-    setTaskError('');
-    try {
-      const loaded = await onLoadMethods?.({
-        endpoint: 'cart_customer_delivery_get',
-        request: {
-          filters: {
-            load_delivery_types_for_dlf: delivery.delivery_from_id,
-          },
-        },
-        signal: controller.signal,
-      });
-      if (controller.signal.aborted) {
-        return;
-      }
-      setMethods(loaded ?? []);
-      setOpen(true);
-      setSelected(0);
-      pointCache.current.clear();
-      resetPoints();
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setTaskError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      if (request.current === controller) {
-        request.current = undefined;
-        setTaskPending(false);
-      }
-    }
-  }
-
-  async function loadPoints(deliveryType: number) {
-    const cached = pointCache.current.get(deliveryType);
-    if (cached) {
-      setPoints(cached);
-      return;
-    }
-
-    request.current?.abort();
-    const controller = new AbortController();
-    request.current = controller;
-    setTaskPending(true);
-    setTaskError('');
-    try {
-      const loaded = await onLoadPoints?.({
-        endpoint: 'cart_customer_delivery_points_get',
-        request: selectionInput(deliveryType),
-        signal: controller.signal,
-      });
-      if (controller.signal.aborted) {
-        return;
-      }
-      const nextPoints = loaded ?? [];
-      pointCache.current.set(deliveryType, nextPoints);
-      if (selectedRef.current === deliveryType) {
-        setPoints(nextPoints);
-      }
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setTaskError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      if (request.current === controller) {
-        request.current = undefined;
-        setTaskPending(false);
-      }
-    }
-  }
-
-  function selectMethod(value: IDeliveryType) {
-    if (busy) {
-      return;
-    }
-    if (value.id !== selected) {
-      setSelected(value.id);
-      selectedRef.current = value.id;
-      resetPoints();
-    }
-    if (value.delivery_to_carrier_point) {
-      void loadPoints(value.id);
-    }
-  }
-
-  async function confirm(action: CartDeliveryChangeAction) {
-    if (busy) {
-      return;
-    }
-    setTaskPending(true);
-    setTaskError('');
-    try {
-      await onChange?.(action);
-      setOpen(false);
-      resetPoints();
-    } catch (reason) {
-      setTaskError(
-        apiErrorMessage(reason) || common.failed,
-      );
-    } finally {
-      setTaskPending(false);
-    }
-  }
-
-  function confirmCourier() {
-    void confirm({
-      endpoint: 'cart_customer_delivery_courier_set',
-      request: selectionInput(),
-    });
-  }
-
-  function choosePoint(point: ICartDeliveryPoint) {
-    void confirm({
-      endpoint: 'cart_customer_delivery_pickup_set',
-      request: { ...selectionInput(), point },
-    });
-  }
-
-  function highlightFromMap(code: string) {
-    setHighlighted(code);
-    requestAnimationFrame(() => {
-      const row = Array.from(
-        pointList.current?.querySelectorAll<HTMLElement>('[data-point-code]') ?? [],
-      ).find((item) => item.dataset.pointCode === code);
-      if (pointList.current && row) {
-        const reduced = window.matchMedia?.(
-          '(prefers-reduced-motion: reduce)',
-        ).matches;
-        pointList.current.scrollTo({
-          top: row.offsetTop,
-          behavior: reduced ? 'auto' : 'smooth',
-        });
-      }
-    });
-  }
-
-  return (
-    <section
-      className={styles.root}
-      aria-busy={busy}
-      data-feature-part="CartDeliverySelector"
-    >
-      <div className={styles.heading}>
-        <h3>{labels.delivery}</h3>
-        <button
-          type="button"
-          className={styles.button}
-          disabled={busy}
-          aria-label={labels.chooseDelivery}
-          data-cart-delivery-open
-          onClick={() => void show()}
-        >
-          {labels.choose}
-        </button>
-      </div>
-
-      {!delivery.delivery_data.method ? (
-        <p
-          className={`${styles.notice} ${styles.attention}`.trim()}
-          role="status"
-          data-cart-delivery-required
-        >
-          {labels.selectDelivery}
-        </p>
-      ) : null}
-
-      {current ? (
-        <MethodSummary
-          method={current}
-          name={methodName(current)}
-          description={methodDescription(current)}
-          type={methodType(current)}
-          carrier={carrierName(current)}
-          icon={methodIcon(current)}
-        >
-          {delivery.delivery_data.delivery_address ? (
-            <span className={styles.address}>
-              {delivery.delivery_data.delivery_address}
-            </span>
-          ) : null}
-          {delivery.delivery_data.delivery_date_from?.date ||
-          delivery.delivery_data.delivery_date_to?.date ? (
-            <span className={styles.meta}>
-              {delivery.delivery_data.delivery_date_from?.date} —{' '}
-              {delivery.delivery_data.delivery_date_to?.date}
-            </span>
-          ) : null}
-        </MethodSummary>
-      ) : null}
-
-      {delivery.delivery_data.delivery_error ? (
-        <p className={`${styles.notice} ${styles.error}`} role="alert">
-          {delivery.delivery_data.delivery_error}
-        </p>
-      ) : null}
-      {delivery.delivery_data.delivery_is_changed ? (
-        <p className={styles.notice} role="status">
-          {labels.deliveryChanged}
-        </p>
-      ) : null}
-      {error || taskError ? (
-        <p className={`${styles.notice} ${styles.error}`} role="alert">
-          {error || taskError}
-        </p>
-      ) : null}
-
-      {open ? (
-        <div className={styles.panel}>
-          {!methods.length ? (
-            <p className={styles.copy}>{labels.noDelivery}</p>
-          ) : (
-            <>
-              <fieldset className={styles.methods}>
-                <legend>{labels.delivery}</legend>
-                {methods.map((item) => (
-                  <label
-                    key={item.id}
-                    className={`${styles.method} ${
-                      item.id === selected ? styles.methodActive : ''
-                    }`.trim()}
-                    data-delivery-method={
-                      item.delivery_to_carrier_point ? 'pickup' : 'courier'
-                    }
-                  >
-                    <input
-                      className={styles.screenReaderOnly}
-                      type="radio"
-                      name={`delivery-method-${delivery.delivery_from_id}`}
-                      value={item.id}
-                      checked={item.id === selected}
-                      disabled={busy}
-                      onChange={() => selectMethod(item)}
-                    />
-                    <MethodTile method={item} icon={methodIcon(item)} />
-                    <span className={styles.methodCopy}>
-                      <span className={styles.methodName}>{methodName(item)}</span>
-                      {methodDescription(item) ? (
-                        <span
-                          className={styles.description}
-                          data-delivery-description
-                        >
-                          {methodDescription(item)}
-                        </span>
-                      ) : null}
-                      <span className={styles.meta}>
-                        {methodType(item)}
-                        {carrierName(item) ? ` · ${carrierName(item)}` : ''}
-                      </span>
-                    </span>
-                    {item.id === selected ? (
-                      <DeliveryIcon paths={icons.check} className={styles.check} />
-                    ) : null}
-                  </label>
-                ))}
-              </fieldset>
-
-              {method && !method.delivery_to_carrier_point ? (
-                <button
-                  type="button"
-                  className={`${styles.button} ${styles.primary}`.trim()}
-                  disabled={busy}
-                  aria-label={labels.courier}
-                  data-cart-delivery-continue
-                  onClick={confirmCourier}
-                >
-                  {labels.courierAction}
-                </button>
-              ) : null}
-
-              {method?.delivery_to_carrier_point && points ? (
-                <div
-                  className={`${styles.pickup} ${showMap ? styles.withMap : ''}`.trim()}
-                  data-delivery-pickup
-                >
-                  {showMap ? (
-                    <DeliveryMap
-                      key={`pickup-${method.id}`}
-                      markers={mapMarkers}
-                      activeId={activePoint}
-                      label={labels.pickupMap}
-                      onSelect={highlightFromMap}
-                    />
-                  ) : null}
-                  <div className={styles.pointColumn}>
-                    <label className={styles.searchLabel}>
-                      {labels.pointSearch}
-                      <input
-                        className={styles.input}
-                        value={query}
-                        type="search"
-                        onChange={(event: ChangeEvent<HTMLInputElement>) =>
-                          setQuery(event.target.value)
-                        }
-                      />
-                    </label>
-                    {!visiblePoints.length ? (
-                      <p className={styles.copy}>{labels.noPoints}</p>
-                    ) : (
-                      <ul ref={pointList} className={styles.points}>
-                        {visiblePoints.map((point) => (
-                          <li
-                            key={point.code}
-                            className={`${styles.point} ${
-                              point.code === activePoint ? styles.pointActive : ''
-                            }`.trim()}
-                            data-point-code={point.code}
-                            aria-current={
-                              point.code === confirmedCode ? 'true' : undefined
-                            }
-                            onClick={() => setHighlighted(point.code)}
-                          >
-                            <DeliveryIcon paths={icons.pin} />
-                            <div className={styles.pointCopy}>
-                              <span className={styles.address}>
-                                {point.address || point.code}
-                              </span>
-                              {point.postal_code ? (
-                                <span className={styles.meta}>
-                                  {labels.postalCode} {point.postal_code}
-                                </span>
-                              ) : null}
-                              {point.work_time ? (
-                                <span className={styles.pointDetail}>
-                                  <DeliveryIcon paths={icons.clock} small />
-                                  {point.work_time}
-                                </span>
-                              ) : null}
-                              {point.comment ? (
-                                <span className={styles.description}>
-                                  {point.comment}
-                                </span>
-                              ) : null}
-                              {point.code === confirmedCode ? (
-                                <span className={styles.badge}>
-                                  {labels.selectedPoint}
-                                </span>
-                              ) : null}
-                            </div>
-                            <button
-                              type="button"
-                              className={styles.button}
-                              disabled={busy || !point.address || !point.city_code}
-                              aria-label={`${labels.pickup}: ${
-                                point.address ?? point.code
-                              }`}
-                              onFocus={() => setHighlighted(point.code)}
-                              onClick={(event) => {
-                                event.stopPropagation();
-                                choosePoint(point);
-                              }}
-                            >
-                              {labels.pickupAction}
-                            </button>
-                          </li>
-                        ))}
-                      </ul>
-                    )}
-                  </div>
-                </div>
-              ) : null}
-            </>
-          )}
-          <button
-            type="button"
-            className={styles.textButton}
-            disabled={busy}
-            onClick={() => setOpen(false)}
-          >
-            {common.close}
-          </button>
-        </div>
-      ) : null}
-    </section>
-  );
-}
-
-function MethodSummary({
-  method,
-  name,
-  description,
-  type,
-  carrier,
-  icon,
-  children,
-}: {
-  method: IDeliveryType;
-  name: string;
-  description?: string;
-  type: string;
-  carrier?: string;
-  icon: string[];
-  children?: ReactNode;
-}) {
-  return (
-    <div className={styles.current}>
-      <MethodTile method={method} icon={icon} />
-      <div className={styles.methodCopy}>
-        <span className={styles.methodName}>{name}</span>
-        {description ? (
-          <span className={styles.description}>{description}</span>
-        ) : null}
-        <span className={styles.meta}>
-          {type}{carrier ? ` · ${carrier}` : ''}
-        </span>
-        {children}
-      </div>
-    </div>
-  );
-}
-
-function MethodTile({
-  method,
-  icon,
-}: {
-  method: IDeliveryType;
-  icon: string[];
-}) {
-  return (
-    <span className={styles.tile} aria-hidden="true" data-delivery-tile>
-      {method.carrier?.carrier_logo ? (
-        <OrionplaceImage
-          src={method.carrier.carrier_logo}
-          width={48}
-          height={48}
-          className={styles.logo}
-          ariaHidden
-        />
-      ) : (
-        <DeliveryIcon paths={icon} />
-      )}
-    </span>
-  );
-}
-
-function DeliveryIcon({
-  paths,
-  className = '',
-  small = false,
-}: {
-  paths: string[];
-  className?: string;
-  small?: boolean;
-}) {
-  return (
-    <svg
-      className={`${styles.icon} ${small ? styles.iconSmall : ''} ${className}`.trim()}
-      viewBox="0 0 24 24"
-      aria-hidden="true"
-    >
-      {paths.map((path) => <path key={path} d={path} />)}
-    </svg>
-  );
-}