orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/stores/StorefrontStores.module.css

@@ -0,0 +1,218 @@
+/*
+ * The layout follows the width of this component, not of the screen. 592,
+ * 720 and 960px are the widths the full-width stores page gives it on 640,
+ * 768 and 1024px screens (the screen minus the page padding of the Nuxt
+ * reference), so the page looks as it did with those screen breakpoints.
+ */
+.root {
+  composes: feature from '../shared/features.module.css';
+  display: grid;
+  gap: 1.25rem;
+  container: stores / inline-size;
+}
+
+.title {
+  composes: title from '../shared/features.module.css';
+}
+
+.search {
+  composes: featureActions from '../account/account.module.css';
+  align-items: flex-end;
+}
+
+.label {
+  composes: featureLabel from '../account/account.module.css';
+  flex: 1;
+}
+
+.input {
+  composes: featureInput from '../account/account.module.css';
+}
+
+/* Search, retry, map and products use the shared feature button. */
+.searchButton,
+.retry,
+.mapButton,
+.products {
+  composes: button from '../shared/features.module.css';
+}
+
+.searchButton:disabled,
+.retry:disabled {
+  cursor: wait;
+}
+
+.error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--orionplace-danger);
+  color: var(--orionplace-danger);
+}
+
+.retry {
+  min-height: 2.5rem;
+  border-color: currentColor;
+  color: inherit;
+}
+
+.layout {
+  display: grid;
+  min-width: 0;
+  gap: 1.5rem;
+}
+
+.map {
+  min-width: 0;
+}
+
+/* The map is taller from 592px here; DeliveryMap elsewhere keeps its own
+   height rule. */
+.map [data-delivery-map] {
+  height: 18rem;
+}
+
+.list {
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.list > li {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+  gap: 1.25rem;
+  padding: 1.25rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+}
+
+.list > li.active {
+  border-color: var(--orionplace-text);
+}
+
+.storeHeading {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.storeHeading h2,
+.address {
+  margin: 0;
+}
+
+.storeHeading h2 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.mapButton {
+  min-height: 2.25rem;
+  flex: none;
+  padding-inline: 0.75rem;
+}
+
+.address {
+  line-height: 1.75rem;
+}
+
+/* One grid per list, as in the other packages: the labels share a column,
+   so the values of all rows start at the same place. */
+.access,
+.hours {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: baseline;
+  gap: 0.25rem 1rem;
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.access div,
+.hours div {
+  display: contents;
+}
+
+.access dt {
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.access dd,
+.hours dd {
+  margin: 0;
+}
+
+.phone {
+  composes: featureLink from '../account/account.module.css';
+  width: fit-content;
+}
+
+.products {
+  width: fit-content;
+}
+
+.list summary {
+  cursor: pointer;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hours {
+  grid-template-columns: minmax(0, 1fr) auto;
+  margin-top: 0.75rem;
+  gap: 0.5rem 1rem;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@container stores (min-width: 592px) {
+  .map [data-delivery-map] {
+    height: 24rem;
+  }
+}
+
+@container stores (min-width: 720px) {
+  .listWide {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container stores (min-width: 960px) {
+  .withMap {
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
+    align-items: start;
+  }
+
+  .withMap .map {
+    position: sticky;
+    top: 1.5rem;
+    order: 2;
+  }
+}

package/templates/components/orionplace/stores/StorefrontStores.tsx

@@ -0,0 +1,396 @@
+'use client';
+
+import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type {
+  IPhysicalStore,
+  IStoreDirectoryRequest,
+  IStoreDirectoryResponse,
+} from '@/interfaces/orionplace/stores/IStoreDirectory';
+import { directoryLabels } from '@/lib/orionplace/directoryLabels';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { mergePagination } from '@/lib/orionplace/featureData';
+import {
+  canShowDeliveryMap,
+  deliveryMapKey,
+} from '@/lib/orionplace/deliveryMap';
+import {
+  storeAddress,
+  storeMapMarkers,
+  storeMarkerId,
+  storePhoneLink,
+} from '@/lib/orionplace/storeDirectory';
+import { DeliveryMap } from '@/components/orionplace/cart/DeliveryMap';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
+import styles from './StorefrontStores.module.css';
+import { apiErrorMessage } from '@/lib/orionplace/api';
+
+type StorePage = NonNullable<IStoreDirectoryResponse['page_data']>;
+type StoreAccessField = 'entrance' | 'floor' | 'apt_number' | 'intercom';
+
+export interface StoresLoadAction {
+  endpoint: 'stores_get';
+  request: IStoreDirectoryRequest;
+  signal: AbortSignal;
+}
+
+export interface StorefrontStoresProps {
+  storeId?: number;
+  /** The search and the page the list opens with (from the address). */
+  initialQuery?: string;
+  initialPage?: number;
+  initial?: StorePage;
+  initialError?: string;
+  loadOnMount?: boolean;
+  disabled?: boolean;
+  productsHref?: (store: IPhysicalStore, locale: string) => string;
+  onLoad: (action: StoresLoadAction) => Promise<StorePage> | StorePage;
+  onSearch?: (query: string) => void;
+  onPageChange?: (page: number, query: string) => void;
+}
+
+export function StorefrontStores({
+  storeId,
+  initialQuery = '',
+  initialPage = 1,
+  initial,
+  initialError = '',
+  loadOnMount = true,
+  disabled = false,
+  productsHref = (store, locale) =>
+    `/browse?store=${store.id}&locale=${encodeURIComponent(locale)}`,
+  onLoad,
+  onSearch,
+  onPageChange,
+}: StorefrontStoresProps) {
+  const init                                       = useOrionplace(selectInit);
+  const locale                                     =
+    useOrionplaceSelections((state) => state.localeCode);
+  const labels                                     = directoryLabels(locale);
+  const common                                     = featureLabels(locale);
+  const initialAutomatic                           = loadOnMount && !initial && !initialError;
+  const [query, setQuery]                          = useState(initialQuery);
+  const [stores, setStores]                        =
+    useState<IPhysicalStore[]>(initial?.data ?? []);
+  const [pagination, setPagination]                = useState<Partial<IApiPagination>>(
+    initial?.rpag ?? {},
+  );
+  const [loaded, setLoaded]                        = useState(Boolean(initial));
+  const [pending, setPending]                      = useState(initialAutomatic);
+  const [error, setError]                          = useState(initialError);
+  const [activeId, setActiveId]                    = useState<string>();
+  const activeRequest                              = useRef<AbortController | undefined>(undefined);
+  const requested                                  = useRef(false);
+  const previousStoreId                            = useRef(storeId);
+  const loadCallback                               = useRef(onLoad);
+  const mapArea                                    = useRef<HTMLDivElement>(null);
+  const list                                       = useRef<HTMLUListElement>(null);
+  loadCallback.current                             = onLoad;
+  const markers                                    = useMemo(
+    () => storeMapMarkers(stores, locale),
+    [stores, locale],
+  );
+  const mapKey                                     = deliveryMapKey(init?.public_keys);
+  const showMap                                    = canShowDeliveryMap(mapKey, markers);
+  const markerIds                                  = useMemo(
+    () => new Set(markers.map((marker) => marker.id)),
+    [markers],
+  );
+  const accessLabels: [StoreAccessField, string][] = [
+    ['entrance', labels.entrance],
+    ['floor', labels.floor],
+    ['apt_number', labels.office],
+    ['intercom', labels.intercom],
+  ];
+
+  async function load(page = 1, nextStoreId = storeId, nextQuery = query) {
+    if (disabled || activeRequest.current) {
+      return;
+    }
+    const controller      = new AbortController();
+    activeRequest.current = controller;
+    setPending(true);
+    setError('');
+
+    try {
+      const data = await loadCallback.current({
+        endpoint: 'stores_get',
+        request: {
+          filters: nextStoreId
+            ? { id: nextStoreId }
+            : { search_string: nextQuery.trim() },
+          paginate: { page, pp_items: 5 },
+        },
+        signal: controller.signal,
+      });
+      if (controller.signal.aborted) {
+        return;
+      }
+      if (!Array.isArray(data.data)) {
+        throw new Error('Missing store list');
+      }
+      setStores(data.data);
+      setPagination((previous) =>
+        mergePagination(page === 1 ? {} : previous, data.rpag),
+      );
+      setLoaded(true);
+    } catch (reason) {
+      if (!controller.signal.aborted) {
+        setError(
+          apiErrorMessage(reason) || common.failed,
+        );
+      }
+    } finally {
+      if (activeRequest.current === controller) {
+        activeRequest.current = undefined;
+        setPending(false);
+      }
+    }
+  }
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    const normalized = query.trim();
+    setQuery(normalized);
+    onSearch?.(normalized);
+    void load(1, storeId, normalized);
+  }
+
+  function changePage(page: number) {
+    onPageChange?.(page, query.trim());
+    void load(page);
+  }
+
+  function scrollIntoView(element: Element | null | undefined) {
+    const reduce = window.matchMedia?.(
+      '(prefers-reduced-motion: reduce)',
+    ).matches;
+    element?.scrollIntoView({
+      block: 'nearest',
+      behavior: reduce ? 'auto' : 'smooth',
+    });
+  }
+
+  function showOnMap(store: IPhysicalStore) {
+    setActiveId(storeMarkerId(store));
+    scrollIntoView(mapArea.current);
+  }
+
+  function selectFromMap(id: string) {
+    setActiveId(id);
+    requestAnimationFrame(() => {
+      scrollIntoView(list.current?.querySelector(`[data-store-id="${id}"]`));
+    });
+  }
+
+  useEffect(() => {
+    if (activeId && !markerIds.has(activeId)) {
+      setActiveId(undefined);
+    }
+  }, [activeId, markerIds]);
+
+  useEffect(() => {
+    if (!requested.current && initialAutomatic) {
+      requested.current = true;
+      void load(initialPage);
+    }
+    return () => {
+      activeRequest.current?.abort();
+      activeRequest.current = undefined;
+      requested.current     = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (previousStoreId.current === storeId) {
+      return;
+    }
+    previousStoreId.current = storeId;
+    activeRequest.current?.abort();
+    activeRequest.current   = undefined;
+    setQuery('');
+    setStores(initial?.data ?? []);
+    setPagination(initial?.rpag ?? {});
+    setLoaded(Boolean(initial));
+    setPending(false);
+    setError(initialError);
+    setActiveId(undefined);
+    if (loadOnMount && !initial && !initialError) {
+      void load(1, storeId, '');
+    }
+  }, [storeId]);
+
+  return (
+    <section
+      className={styles.root}
+      data-feature-part="StorefrontStores"
+    >
+      <h1 className={styles.title}>{labels.stores}</h1>
+      {!storeId ? (
+        <form
+          className={styles.search}
+          onSubmit={submit}
+        >
+          <label className={styles.label}>
+            <span>{labels.searchStore}</span>
+            <input
+              className={styles.input}
+              type="search"
+              value={query}
+              disabled={pending || disabled}
+              data-store-search
+              onChange={(event) => setQuery(event.currentTarget.value)}
+            />
+          </label>
+          <button
+            type="submit"
+            className={styles.searchButton}
+            disabled={pending || disabled}
+          >
+            {common.search}
+          </button>
+        </form>
+      ) : null}
+      {error ? (
+        <div
+          className={styles.error}
+          role="alert"
+        >
+          <span>{error}</span>
+          <button
+            type="button"
+            className={styles.retry}
+            disabled={pending || disabled}
+            onClick={() => void load()}
+          >
+            {common.retry}
+          </button>
+        </div>
+      ) : null}
+      {pending ? (
+        <p
+          className="op-feature-loading"
+          role="status"
+        >
+          <span className={styles.screenReaderOnly}>{common.loading}</span>
+        </p>
+      ) : null}
+
+      {stores.length ? (
+        <div
+          className={`${styles.layout} ${showMap ? styles.withMap : ''}`}
+          data-store-layout
+        >
+          {showMap ? (
+            <div
+              ref={mapArea}
+              className={styles.map}
+              data-store-map
+            >
+              <DeliveryMap
+                markers={markers}
+                activeId={activeId}
+                label={labels.storesMap}
+                onSelect={selectFromMap}
+              />
+            </div>
+          ) : null}
+          <ul
+            ref={list}
+            className={`${styles.list} ${showMap ? '' : styles.listWide}`}
+          >
+            {stores.map((store) => {
+              const markerId   = storeMarkerId(store);
+              const accessRows = accessLabels.filter(([field]) => store[field]);
+              const active     = activeId === markerId;
+              return (
+                <li
+                  key={store.id}
+                  className={active ? styles.active : ''}
+                  data-store-id={markerId}
+                  data-store-active={active || undefined}
+                >
+                  <div className={styles.storeHeading}>
+                    <h2>{store.store_name}</h2>
+                    {showMap && markerIds.has(markerId) ? (
+                      <button
+                        type="button"
+                        className={styles.mapButton}
+                        aria-pressed={active}
+                        aria-label={`${labels.map}: ${store.store_name}`}
+                        data-store-show-on-map
+                        onClick={() => showOnMap(store)}
+                      >
+                        {labels.map}
+                      </button>
+                    ) : null}
+                  </div>
+                  <p className={styles.address}>
+                    {storeAddress(store, locale)}
+                  </p>
+                  {accessRows.length ? (
+                    <dl className={styles.access}>
+                      {accessRows.map(([field, label]) => (
+                        <div key={field}>
+                          <dt>{label}</dt>
+                          <dd>{store[field]}</dd>
+                        </div>
+                      ))}
+                    </dl>
+                  ) : null}
+                  {store.phone_number ? (
+                    <a
+                      className={styles.phone}
+                      href={storePhoneLink(store.phone_number)}
+                    >
+                      {store.phone_number}
+                    </a>
+                  ) : null}
+                  {store.working_hours ? (
+                    <details>
+                      <summary>{labels.hours}</summary>
+                      <dl className={styles.hours}>
+                        {Object.entries(store.working_hours).map(
+                          ([day, hours]) => (
+                            <div key={day}>
+                              <dt>{labels.weekdays[Number(day) - 1]}</dt>
+                              <dd>
+                                {hours.open}–{hours.close}
+                              </dd>
+                            </div>
+                          ),
+                        )}
+                      </dl>
+                    </details>
+                  ) : null}
+                  <a
+                    className={styles.products}
+                    href={productsHref(store, locale)}
+                  >
+                    {labels.products} →
+                  </a>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ) : loaded && !pending ? (
+        <OrionplaceEmptyState
+          kind="stores"
+          message={labels.noStores}
+        />
+      ) : null}
+      <StorefrontPagination
+        pagination={pagination}
+        pending={pending || disabled}
+        onChange={changePage}
+      />
+    </section>
+  );
+}