orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/cart/CartDeliverySelector.README.md

@@ -1,166 +0,0 @@
-# CartDeliverySelector · React
-
-## English
-
-Delivery method and pickup-point selection for one physical shipment.
-
-## Contract and dependencies
-
-`delivery` is one entry from `cart_get.page_data.cart_data` while the cart is in
-checkout. The component shows its saved tariff, carrier, address, dates and
-customer-visible delivery messages during server rendering. A missing
-`delivery.delivery_data.method` shows the required-selection notice.
-
-Pressing Choose calls `onLoadMethods` with
-`cart_customer_delivery_get` and
-`filters.load_delivery_types_for_dlf = delivery.delivery_from_id`. The resolved
-methods are shown with the carrier logo, or a pickup or courier icon when no
-logo is supplied. `pending` and `disabled` block every selection and request;
-`error` shows a parent request error.
-
-Choosing a courier tariff exposes Confirm. It calls `onChange` with
-`cart_customer_delivery_courier_set`, `delivery_from` and `delivery_type`.
-Resolve `onChange` after the storefront has saved the choice and refreshed the
-cart; the panel then closes. A rejected callback keeps the panel open and shows
-the error.
-
-Choosing a pickup tariff calls `onLoadPoints` with
-`cart_customer_delivery_points_get`. Results are cached per tariff while the
-panel is open. Search matches the point address and postal code. A point can be
-confirmed only when it has both `address` and `city_code`; `onChange` receives
-`cart_customer_delivery_pickup_set` with that complete point object. When a map
-key and valid point coordinates exist, `DeliveryMap` appears beside the same
-list. A marker highlights and scrolls to its row; its Choose button confirms it.
-
-`onLoadMethods` and `onLoadPoints` receive an `AbortSignal`. Reopening the
-selector, changing an in-flight tariff or unmounting cancels the obsolete
-request. Changing `delivery.from_store.deliveries` removes tariffs that are no
-longer available and clears a removed selection.
-
-Source is maintained in
-`components/orionplace/cart/CartDeliverySelector.tsx`; its physical data
-interfaces are in `interfaces/orionplace/cart/ICartData.ts` and
-`ICartDeliveryActions.ts`.
-
-### Props
-
-| Prop                                                                                                                                                                     | Meaning                                                                                  |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
-| `delivery: ICartDelivery`                                                                                                                                                | Checkout shipment whose delivery method is being selected.                               |
-| `disabled?: boolean`                                                                                                                                                     | Disables the component controls and prevents new actions.                                |
-| `pending?: boolean`                                                                                                                                                      | Shows the loading state and blocks duplicate actions.                                    |
-| `error?: string`                                                                                                                                                         | Customer-visible error for the component request; omit it when no request failed.        |
-| `onLoadMethods?: (action: CartDeliveryMethodsAction) => Promise<readonly IDeliveryType[] \| null \| undefined> \| readonly IDeliveryType[] \| null \| undefined`         | Called when available methods must be loaded. The callback payload is shown in its type. |
-| `onLoadPoints?: (action: CartDeliveryPointsAction) => Promise<readonly ICartDeliveryPoint[] \| null \| undefined> \| readonly ICartDeliveryPoint[] \| null \| undefined` | Called when pickup points must be loaded. The callback payload is shown in its type.     |
-| `onChange?: (action: CartDeliveryChangeAction) => Promise<unknown> \| unknown`                                                                                           | Called when the visitor confirms a new value. The callback payload is shown in its type. |
-
-## Русский
-
-Компонент выбирает способ доставки и пункт выдачи для одного отправления с
-физическими товарами.
-
-`delivery` — один элемент `cart_get.page_data.cart_data` на шаге оформления.
-Уже при серверном рендеринге компонент показывает сохранённый тариф,
-перевозчика, адрес, даты и сообщения об изменении доставки. Если
-`delivery.delivery_data.method` не задан, появляется сообщение о необходимости
-выбрать доставку.
-
-Кнопка «Выбрать» вызывает `onLoadMethods` для
-`cart_customer_delivery_get`; в
-`filters.load_delivery_types_for_dlf` передаётся
-`delivery.delivery_from_id`. Для каждого результата показан логотип перевозчика
-или значок пункта выдачи либо курьера. `pending` и `disabled` блокируют запросы и
-выбор, а `error` показывает ошибку, полученную родительским компонентом.
-
-Для курьерского тарифа кнопка подтверждения передаёт в `onChange` действие
-`cart_customer_delivery_courier_set` с `delivery_from` и `delivery_type`.
-Завершайте `onChange` после сохранения выбора и обновления корзины: после этого
-панель закроется. При отклонённом Promise панель остаётся открытой и показывает
-ошибку.
-
-Для тарифа с самовывозом `onLoadPoints` получает запрос
-`cart_customer_delivery_points_get`. Результаты сохраняются отдельно для
-каждого тарифа, пока открыта панель. Поиск проверяет адрес и индекс. Подтвердить
-можно пункт, у которого есть `address` и `city_code`; `onChange` получает
-`cart_customer_delivery_pickup_set` и полный объект этого пункта. Если задан
-ключ карты и у пунктов есть корректные координаты, рядом с тем же списком
-появляется `DeliveryMap`. Выбор метки выделяет и прокручивает соответствующую
-строку, а кнопка в строке подтверждает пункт.
-
-`onLoadMethods` и `onLoadPoints` получают `AbortSignal`. Повторное открытие,
-смена тарифа во время запроса и размонтирование отменяют устаревший запрос.
-Изменение `delivery.from_store.deliveries` удаляет недоступные тарифы и очищает
-выбор, если выбранный тариф исчез.
-
-Исходный файл:
-`components/orionplace/cart/CartDeliverySelector.tsx`; физические интерфейсы:
-`interfaces/orionplace/cart/ICartData.ts` и `ICartDeliveryActions.ts`.
-
-### Свойства
-
-| Свойство                                                                                                                                                                 | Назначение                                                                                       |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
-| `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`                                                                                           | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |
-## Response fields and application actions
-
-The following tables describe the response and the supplied composition’s follow-up actions. The framework-specific props and events above identify which work belongs to the component and which belongs to its parent.
-
-### English
-
-### Shipment fields and identifiers
-
-`delivery` — One shipment passed by `StorefrontCart`. These values come from the latest cart response.
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| `delivery_from_id` | Shipment-group ID. Send it as `filters.load_delivery_types_for_dlf` to `cart_customer_delivery_get`, then as `delivery_from` when reading pickup points or saving a method. |
-| `from_store.deliveries` | Eligible delivery types keyed by type ID. The selected type’s `id` becomes request `delivery_type`. A store ID and a delivery-type ID identify different records. |
-| `delivery_data.method` | Confirmed delivery-type ID, or `null` when no method is selected. Opening a tariff or highlighting a map marker does not save it. A physical shipment needs a confirmed method before the supplied cart enables order creation. |
-| `delivery_data.delivery_to_code` / `delivery_to_city_code` | Confirmed pickup-point and carrier-city codes. Keep codes as strings. `delivery_address` is the confirmed destination text; `delivery_date_from` and `delivery_date_to` are the estimated arrival range. |
-| `delivery_data.delivery_is_changed` | `true` records a delivery change detected by the server. Read the returned method, address and prices. If `method` is `null`, choose delivery again. Reading clears the notification; a later `false` does not restore the old method. `cart_guest_get` describes the full lifecycle. |
-| `delivery_price_is_estimate` | `true` means this shipment’s delivery price is provisional. Use the refreshed shipment prices and cart totals; a saved delivery selection does not make an estimate final. |
-
-### Requests and confirmed results
-
-| Field or condition | Meaning and application action |
-| --- | --- |
-| Confirm courier delivery | Send `delivery_from` and `delivery_type` to `cart_customer_delivery_courier_set`. The destination is the cart address. |
-| Choose a pickup point | `cart_customer_delivery_points_get` receives the same shipment/type IDs and returns `page_data.items`. Send the chosen `point` object, including its code, city code and address, with those IDs to `cart_customer_delivery_pickup_set`. |
-| After either successful save | The response contains `page_data.delivery_price_is_estimate`, not the updated shipment. The supplied cart controller closes the chooser and reloads `cart_guest_get` for the confirmed method, destination, dates and totals. A rejected save shows the error. If only the reload fails, refresh the cart without repeating the successful save. |
-
-### Русский
-
-### Поля отправления и идентификаторы
-
-`delivery` — Одно отправление, переданное `StorefrontCart`. Значения берутся из последнего ответа корзины.
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| `delivery_from_id` | ID группы отправления. Передавайте его как `filters.load_delivery_types_for_dlf` в `cart_customer_delivery_get`, затем как `delivery_from` при запросе пунктов выдачи или сохранении доставки. |
-| `from_store.deliveries` | Доступные типы доставки с ID типа в качестве ключа. Поле `id` выбранного типа отправляется как `delivery_type`. ID магазина и ID типа доставки относятся к разным записям. |
-| `delivery_data.method` | Подтверждённый ID типа доставки или `null`, если способ не выбран. Открытие тарифа или выделение маркера карты ничего не сохраняет. Для физического отправления нужен подтверждённый способ, прежде чем готовая корзина разрешит создание заказа. |
-| `delivery_data.delivery_to_code` / `delivery_to_city_code` | Коды подтверждённого пункта выдачи и города перевозчика. Сохраняйте коды строками. `delivery_address` содержит адрес назначения, а `delivery_date_from` и `delivery_date_to` — ожидаемый интервал прибытия. |
-| `delivery_data.delivery_is_changed` | `true` сообщает об изменении доставки, обнаруженном сервером. Читайте возвращённые способ, адрес и цены. Если `method` равен `null`, выберите доставку заново. Чтение сбрасывает уведомление; последующий `false` не возвращает прежний способ. Полный цикл описан в `cart_guest_get`. |
-| `delivery_price_is_estimate` | `true` означает предварительную стоимость доставки этого отправления. Используйте новые цены отправления и итоги корзины: сохранение способа доставки само по себе не делает оценку окончательной. |
-
-### Запросы и подтверждённый результат
-
-| Поле или условие | Значение и действие приложения |
-| --- | --- |
-| Подтвердить курьерскую доставку | Передайте `delivery_from` и `delivery_type` в `cart_customer_delivery_courier_set`. Место назначения берётся из адреса корзины. |
-| Выбрать пункт выдачи | Запрос `cart_customer_delivery_points_get` получает те же ID отправления и типа, возвращая `page_data.items`. Передайте выбранный объект `point`, включая код, код города и адрес, вместе с этими ID в `cart_customer_delivery_pickup_set`. |
-| После успешного сохранения | Ответ содержит `page_data.delivery_price_is_estimate`, без обновлённого отправления. Контроллер корзины закрывает выбор и вызывает `cart_guest_get`, чтобы получить подтверждённые способ, адрес, даты и итоги. При отказе показывается ошибка. Если не удалась только повторная загрузка, обновите корзину без повторения успешного сохранения. |
-
-[English guide](https://orionmarket.place/en/sandbox/components/react/cart-delivery-selector) · [Русский](https://orionmarket.place/ru/sandbox/components/react/cart-delivery-selector)
-
-## Parent cart loading / Загрузка корзины
-
-The cart shows loading until a snapshot or a request error is available. After a failed load, Refresh retries the request. Delivery selection becomes available after the cart reaches checkout.
-
-Пока нет данных корзины или ошибки запроса, отображается загрузка. После ошибки кнопка «Обновить» повторяет загрузку. Выбор доставки доступен после перехода корзины к оформлению.

package/templates/components/orionplace/cart/CartDeliverySelector.module.css

@@ -1,105 +0,0 @@
-.root,
-.panel,
-.methodCopy,
-.pointColumn,
-.pointCopy {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-}
-
-.root { gap: 1.25rem; color: var(--orionplace-text); }
-.panel { gap: 1.25rem; padding: 1.25rem; border: 1px solid var(--orionplace-border); background: var(--orionplace-surface); container-type: inline-size; }
-.heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
-.heading h3 { margin: 0; padding: 0; font-size: 0.875rem; line-height: calc(1.25 / 0.875); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
-/* The field label style of the Nuxt reference (commerce-label). */
-.methods legend { margin: 0; padding: 0; color: var(--orionplace-muted); font-size: 0.75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
-.methods { display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; border: 0; }
-.methods legend { margin-bottom: 0.75rem; }
-.method,
-.current { box-sizing: border-box; display: flex; min-width: 0; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem; }
-.current { border: 1px solid var(--orionplace-text); }
-.method { align-items: center; border: 1px solid var(--orionplace-border); cursor: pointer; }
-.method:has(input:focus-visible) { border-color: var(--orionplace-text); background: var(--orionplace-hover); }
-@media (hover: hover) {
-  .method:hover {
-    border-color: var(--orionplace-text);
-  }
-  .point:hover {
-    background: var(--orionplace-hover);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .point { transition: none; }
-}
-.methodActive { border-color: var(--orionplace-text); background: var(--orionplace-hover); }
-.methodCopy,
-.pointCopy { flex: 1; gap: 0.25rem; }
-.methodName,
-.address { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; }
-.description,
-.meta,
-.pointDetail { color: var(--orionplace-muted); font-size: 0.75rem; line-height: 1.25rem; }
-.meta { line-height: 1rem; text-transform: uppercase; letter-spacing: 0.08em; }
-.pointDetail { display: flex; align-items: flex-start; gap: 0.375rem; line-height: 1rem; }
-.tile { display: flex; box-sizing: border-box; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; overflow: hidden; align-items: center; justify-content: center; border: 1px solid var(--orionplace-border); background: var(--orionplace-surface); }
-.logo { box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; padding: 0.25rem; }
-.icon { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
-.iconSmall { width: 1rem; height: 1rem; margin-top: 0.125rem; }
-.check { margin-left: auto; color: var(--orionplace-accent); }
-.notice { box-sizing: border-box; margin: 0; padding: 0.75rem 1rem; border: 1px solid var(--orionplace-border); background: var(--orionplace-surface); font-size: 0.875rem; line-height: 1.5rem; }
-.attention { border-color: var(--orionplace-attention); color: var(--orionplace-attention); background: var(--orionplace-attention-surface); }
-.error { border-color: var(--orionplace-danger); color: var(--orionplace-danger); background: var(--orionplace-danger-surface); }
-/* The Nuxt op-notice tones: the decorative icon in the left padding, drawn by CSS. */
-.notice.attention,
-.notice.error { position: relative; padding-left: 44px; }
-.notice.attention::before,
-.notice.error::before { position: absolute; top: 0.875rem; left: 0.875rem; width: 1.25rem; height: 1.25rem; content: ""; background: currentColor; -webkit-mask: var(--delivery-notice-icon) center / contain no-repeat; mask: var(--delivery-notice-icon) center / contain no-repeat; }
-.notice.attention { --delivery-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19Z'/%3E%3Cpath d='M12 10v4.5m0 2.5h.01'/%3E%3C/svg%3E"); }
-.notice.error { --delivery-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v6m0 4h.01'/%3E%3C/svg%3E"); }
-.button { box-sizing: border-box; display: inline-flex; width: fit-content; height: 2.75rem; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1.5rem; border: 1px solid var(--orionplace-text); border-radius: 0; color: var(--orionplace-text); background: transparent; font: inherit; font-size: 0.75rem; line-height: calc(1 / 0.75); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
-.button:focus-visible { background: var(--orionplace-hover); outline: none; }
-@media (hover: hover) {
-  .button:hover {
-    background: var(--orionplace-hover);
-    outline: none;
-  }
-}
-.button:disabled,
-.textButton:disabled { cursor: not-allowed; opacity: 0.4; }
-.primary { border-color: var(--orionplace-accent); color: var(--orionplace-surface); background: var(--orionplace-accent); }
-.primary:focus-visible { background: var(--orionplace-accent); opacity: 0.85; }
-@media (hover: hover) {
-  .primary:hover { background: var(--orionplace-accent); opacity: 0.85; }
-}
-.textButton { align-self: flex-start; padding: 0 0 0.125rem; border: 0; border-bottom: 1px solid currentColor; color: inherit; background: transparent; font: inherit; font-size: 0.75rem; line-height: calc(1 / 0.75); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
-.copy { margin: 0; color: var(--orionplace-muted); font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
-.pickup { display: grid; min-width: 0; align-items: start; gap: 1rem; }
-.pointColumn { gap: 0.75rem; }
-.searchLabel { display: flex; min-width: 0; flex-direction: column; gap: 0.5rem; color: var(--orionplace-muted); font-size: 0.75rem; line-height: calc(1 / 0.75); text-transform: uppercase; letter-spacing: 0.08em; }
-.input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.75rem; padding: 0.65rem 0.75rem; border: 1px solid var(--orionplace-border); border-radius: 0; color: var(--orionplace-text); background: var(--orionplace-surface); font: inherit; font-size: 0.875rem; line-height: calc(1.25 / 0.875); text-transform: none; letter-spacing: normal; outline: none; }
-.input:focus-visible { border-color: var(--orionplace-text); }
-.points { position: relative; display: flex; max-height: 24rem; min-width: 0; flex-direction: column; margin: 0; padding: 0; overflow-y: auto; border-top: 1px solid var(--orionplace-border); list-style: none; }
-.point { box-sizing: border-box; display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.75rem; padding: 1rem 0.75rem; border-bottom: 1px solid var(--orionplace-border); cursor: pointer; transition: background-color 150ms; }
-.point > .button { grid-column: 2; }
-.pointActive { border-left: 2px solid var(--orionplace-text); background: var(--orionplace-hover); }
-.badge { width: fit-content; margin-top: 0.25rem; padding: 0.15rem 0.45rem; color: var(--orionplace-surface); background: var(--orionplace-accent); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; }
-.screenReaderOnly { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
-
-/*
- * The panel's own width, as in the other packages: a pickup point puts its
- * button on its row from 28rem, the list and the map share a row from 42rem;
- * the panel's padding follows the cart around it.
- */
-@container (min-width: 28rem) {
-  .point { grid-template-columns: auto minmax(0, 1fr) auto; }
-  .point > .button { grid-column: auto; }
-}
-
-@container (min-width: 42rem) {
-  .withMap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-
-@container (min-width: 592px) {
-  .panel { padding: 1.5rem; }
-}