orionplace-react 0.1.0 → 0.2.0

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

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