orionplace-react 0.7.7 → 0.8.0

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

@@ -1,218 +0,0 @@
-/*
- * 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

@@ -1,397 +0,0 @@
-'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}
-        linked={!storeId}
-        onChange={changePage}
-      />
-    </section>
-  );
-}