orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/support/TicketMessageForm.tsx

@@ -0,0 +1,261 @@
+'use client';
+
+import {
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type FormEvent,
+} from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { ticketLabels } from '@/lib/orionplace/ticketLabels';
+import type { OrderRefundWindow } from '@/interfaces/orionplace/orders/IOrderHistory';
+import styles from './Support.module.css';
+
+export interface TicketMessageFormProps {
+  pending?: boolean;
+  creating?: boolean;
+  // Locks the form and explains why: the backend would reject a new message
+  // now (see `ticketReplyWaitText`).
+  waitHint?: string;
+  // Turns a new return request into a choice about a defect: optional
+  // inside the regular return period, required (and fixed) after it.
+  refundWindow?: OrderRefundWindow | null;
+  onSubmit?: (text: string, files: File[], isDefect: boolean) => void;
+  onCancel?: () => void;
+}
+
+function Icon({ path }: { path: string }) {
+  return (
+    <svg
+      className={styles.icon}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d={path} />
+    </svg>
+  );
+}
+
+export function TicketMessageForm({
+  pending = false,
+  creating = false,
+  waitHint = '',
+  refundWindow = null,
+  onSubmit,
+  onCancel,
+}: TicketMessageFormProps) {
+  const locale                = useOrionplaceSelections((state) => state.localeCode);
+  const labels                = ticketLabels(locale);
+  const common                = featureLabels(locale);
+  const id                    = useId();
+  const textarea              = useRef<HTMLTextAreaElement>(null);
+  const fileInput             = useRef<HTMLInputElement>(null);
+  const [message, setMessage] = useState('');
+  const [files, setFiles]     = useState<File[]>([]);
+  const [chosen, setChosen]   = useState(false);
+  const tooMany               = files.length > 5;
+  const locked                = pending || Boolean(waitHint);
+  const defectOnly            = refundWindow === 'defect';
+  const isDefect              = defectOnly || chosen;
+
+  useLayoutEffect(() => {
+    const field = textarea.current;
+    if (!field) {
+      return;
+    }
+    field.style.height = 'auto';
+    field.style.height = `${field.scrollHeight + 2}px`;
+  }, [message]);
+
+  function chooseFiles(event: ChangeEvent<HTMLInputElement>) {
+    // Copy the files first: clearing the input empties its live FileList
+    // before React runs the state update.
+    const picked = Array.from(event.target.files ?? []);
+    setFiles((current) => [...current, ...picked]);
+    event.target.value = '';
+  }
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!tooMany && !locked) {
+      onSubmit?.(message, files, isDefect);
+    }
+  }
+
+  return (
+    <form
+      className={`${styles.root} ${styles.stack} ${styles.form}`}
+      data-feature-part="TicketMessageForm"
+      onSubmit={submit}
+    >
+      <label
+        className={styles.label}
+        htmlFor={`${id}-message`}
+      >
+        {labels.message}{' '}
+        <span
+          className={styles.required}
+          aria-hidden="true"
+        >
+          *
+        </span>
+      </label>
+      <textarea
+        ref={textarea}
+        id={`${id}-message`}
+        className={styles.textarea}
+        name="ticket_body"
+        rows={3}
+        required
+        minLength={2}
+        maxLength={2048}
+        disabled={locked}
+        value={message}
+        onChange={(event) => setMessage(event.target.value)}
+      />
+      {creating && refundWindow ? (
+        <div
+          className={styles.defect}
+          data-ticket-defect
+          data-refund-window={refundWindow}
+        >
+          <label className={styles.defectChoice}>
+            <input
+              type="checkbox"
+              name="is_defect"
+              checked={isDefect}
+              disabled={locked || defectOnly}
+              aria-describedby={defectOnly ? `${id}-defect` : undefined}
+              onChange={(event) => setChosen(event.target.checked)}
+            />
+            <span>{defectOnly ? labels.defect : labels.defectOptional}</span>
+          </label>
+          {defectOnly ? (
+            <p
+              id={`${id}-defect`}
+              data-ticket-defect-hint
+            >
+              {labels.defectOnly}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+      <input
+        ref={fileInput}
+        id={`${id}-files`}
+        className={styles.screenReaderOnly}
+        type="file"
+        accept=".jpg,.jpeg,.gif,.png,.webp,.ico"
+        multiple
+        tabIndex={-1}
+        aria-label={labels.images}
+        disabled={locked}
+        onChange={chooseFiles}
+      />
+      {files.length ? (
+        <ul
+          className={styles.files}
+          aria-label={labels.images}
+        >
+          {files.map((file, index) => (
+            <li
+              key={`${file.name}:${file.lastModified}:${index}`}
+              className={styles.file}
+            >
+              <svg
+                className={styles.icon}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.6"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M4 4h16v16H4Z" />
+                <circle
+                  cx="9"
+                  cy="9"
+                  r="2"
+                />
+                <path d="m20 15-5-5L4 20" />
+              </svg>
+              <span className={styles.fileName}>{file.name}</span>
+              <button
+                className={`${styles.tool} ${styles.iconButton}`}
+                type="button"
+                aria-label={`${labels.removeImage}: ${file.name}`}
+                title={labels.removeImage}
+                disabled={locked}
+                onClick={() =>
+                  setFiles((current) =>
+                    current.filter((_, item) => item !== index),
+                  )
+                }
+              >
+                <Icon path="M6 6l12 12M18 6 6 18" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {waitHint ? (
+        <p
+          className={styles.notice}
+          role="status"
+          data-ticket-wait
+        >
+          {waitHint}
+        </p>
+      ) : null}
+      {tooMany ? (
+        <p
+          className={`${styles.notice} ${styles.noticeError}`}
+          role="alert"
+        >
+          {labels.tooMany}
+        </p>
+      ) : null}
+      <div className={styles.formActions}>
+        <button
+          className={styles.tool}
+          type="button"
+          data-ticket-attach
+          disabled={locked}
+          onClick={() => fileInput.current?.click()}
+        >
+          <Icon path="m20 11.5-8.2 8.2a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.5 8.5a1.7 1.7 0 0 1-2.4-2.4l7.8-7.8" />
+          {labels.attach}
+        </button>
+        <div className={styles.actions}>
+          {creating ? (
+            <button
+              className={styles.button}
+              type="button"
+              disabled={pending}
+              onClick={() => onCancel?.()}
+            >
+              {common.cancel}
+            </button>
+          ) : null}
+          <button
+            className={`${styles.button} ${styles.primary}`}
+            type="submit"
+            disabled={locked || tooMany}
+          >
+            <Icon path="M4 12 20 4l-4 16-4-7Zm8 1 8-9" />
+            {creating ? labels.create : labels.send}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}

package/templates/components/orionplace/support/TicketSubscriptionCard.README.md

@@ -0,0 +1,53 @@
+# TicketSubscriptionCard · React
+
+## English
+
+`TicketSubscriptionCard` identifies the customer subscription that a support
+conversation is about. `subscription` is an item returned by
+`subscriptions_get`; `plan` is the matching tariff. The card shows the plan's
+first small image in a reserved 96 by 96 area, or a plan icon, plus the
+localized plan name and subscription number.
+
+The state comes from the subscription data: active while `active_until` is in
+the future, ended after that date, and pending while the remote service is
+still being set up. The facts show the paid-until date and automatic renewal.
+Renewal displays its length and the combined plan and option amount in the
+selected currency; a missing `renew_period` displays Off.
+
+The name links to `subscriptionsHref(locale)`. The component makes no request
+and reports no action. Source is maintained in
+`components/orionplace/support/TicketSubscriptionCard.tsx`.
+
+### Props
+
+| Prop                                             | Meaning                                                           |
+| ------------------------------------------------ | ----------------------------------------------------------------- |
+| `subscription: ICustomerSubscription`            | Customer subscription displayed or changed by the component.      |
+| `plan?: ISubscribeTariff`                        | Tariff plan associated with the current card or subscription.     |
+| `subscriptionsHref?: (locale: string) => string` | Builds the subscriptions destination from the callback arguments. |
+
+## Русский
+
+`TicketSubscriptionCard` показывает подписку покупателя, к которой относится
+обращение. `subscription` — элемент ответа `subscriptions_get`, а `plan` —
+соответствующий тариф. Карточка выводит первое малое изображение тарифа в
+заранее выделенной области 96 на 96 или значок тарифа, локализованное название
+и номер подписки.
+
+Состояние определяется данными подписки: подписка активна, пока
+`active_until` находится в будущем, завершена после этой даты и настраивается,
+пока внешний сервис ещё не подтвердил её. Ниже показаны дата оплаты и
+автопродление. Для автопродления выводятся срок и общая стоимость тарифа и
+дополнения в выбранной валюте; без `renew_period` выводится «Выключено».
+
+Название ведёт по адресу `subscriptionsHref(locale)`. Компонент не выполняет
+запросы и не сообщает о действиях. Исходный файл:
+`components/orionplace/support/TicketSubscriptionCard.tsx`.
+
+### Свойства
+
+| Свойство                                         | Назначение                                                      |
+| ------------------------------------------------ | --------------------------------------------------------------- |
+| `subscription: ICustomerSubscription`            | Подписка покупателя, которую показывает или изменяет компонент. |
+| `plan?: ISubscribeTariff`                        | Тарифный план текущей карточки или подписки.                    |
+| `subscriptionsHref?: (locale: string) => string` | Строит адрес ссылки подписок из аргументов обработчика.         |

package/templates/components/orionplace/support/TicketSubscriptionCard.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+import type { ICustomerSubscription } from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import { subscriptionLabels } from '@/lib/orionplace/subscriptionLabels';
+import {
+  subscriptionDays,
+  subscriptionManageLabels,
+} from '@/lib/orionplace/subscriptionManageLabels';
+import {
+  renewalTotalAmount,
+  subscriptionStatus,
+} from '@/lib/orionplace/subscriptionPlans';
+import { tariffMoney } from '@/lib/orionplace/tariffs';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import styles from './Support.module.css';
+
+export interface TicketSubscriptionCardProps {
+  subscription: ICustomerSubscription;
+  plan?: ISubscribeTariff;
+  subscriptionsHref?: (locale: string) => string;
+}
+
+const statusKeys = {
+  active: 'statusActive',
+  ended: 'statusExpired',
+  pending: 'statusPending',
+} as const;
+
+export function TicketSubscriptionCard({
+  subscription,
+  plan,
+  subscriptionsHref = (locale) =>
+    `/subscriptions?locale=${encodeURIComponent(locale)}`,
+}: TicketSubscriptionCardProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const currencyId = useOrionplaceSelections((state) => state.currencyId);
+  const currency = useOrionplaceSelections(
+    (state) => state.init?.currencies[state.currencyId],
+  );
+  const labels = subscriptionLabels(locale);
+  const manage = subscriptionManageLabels(locale);
+  const planName =
+    getAvailableNestedValueFromObject(plan?.locales, locale, 'tariff_name') ||
+    labels.subscription;
+  const picture = plan?.tariff_image?.small?.[0];
+  const status = subscriptionStatus(subscription);
+  const period = subscription.renew_period;
+  const renewal = period
+    ? `${subscriptionDays(period.days, locale)} · ${tariffMoney(
+        renewalTotalAmount(period, currencyId),
+        locale,
+        currency,
+      )}`
+    : labels.disabled;
+
+  return (
+    <div
+      className={`${styles.root} ${styles.item}`}
+      data-feature-part="TicketSubscriptionCard"
+      data-ticket-subscription
+    >
+      <div
+        className={styles.subscriptionPhoto}
+        data-ticket-subscription-picture
+      >
+        {picture ? (
+          <OrionplaceImage
+            src={picture}
+            alt={planName}
+            width={96}
+            height={96}
+          />
+        ) : (
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <path d="M4 7.5 12 3l8 4.5v9L12 21l-8-4.5zM4 7.5 12 12l8-4.5M12 12v9" />
+          </svg>
+        )}
+      </div>
+      <div className={styles.itemBody}>
+        <div className={styles.subscriptionHeading}>
+          <a
+            className={styles.link}
+            href={subscriptionsHref(locale)}
+          >
+            {planName} #{subscription.id}
+          </a>
+          <span
+            className={styles.subscriptionState}
+            data-state={status}
+          >
+            {manage[statusKeys[status]]}
+          </span>
+        </div>
+        <dl className={styles.facts}>
+          <div>
+            <dt>{labels.until}</dt>
+            <dd>{subscription.active_until?.date || '—'}</dd>
+          </div>
+          <div>
+            <dt>{labels.renewal}</dt>
+            <dd>{renewal}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  );
+}

package/templates/components/orionplace/tariffs/TariffCard.README.md

@@ -0,0 +1,108 @@
+# TariffCard · React
+
+## English
+
+`TariffCard` composes the image, localized name, descriptions, feature limits,
+additional option, paid periods and trial action for the plan identified by
+`tariffId`. The image and name link to the localized plan address. Use
+`tariffHref(tariff, locale)` when the application has a different router.
+`image`, `title`, `description`, `features` and `prices(choose)` replace the
+corresponding regions while preserving the card and dialog behavior.
+
+Choosing an available paid period or trial calls
+`onSelect({ tariff, price })` and opens `TariffSubscriptionModal`. The selected
+additional option is passed to the dialog. `open` restores the same selection
+after navigation when it still belongs to this plan and remains available.
+Changes to the tariff catalog close a choice whose period, trial, plan or
+parent subscription is no longer available. `disabled` and `pending` block a
+new choice. `suspended`, `error` and `completed` control the open dialog, and
+its confirmed request is passed unchanged to `onSubscribe(request)`.
+
+With `guest`, the price action calls `onRequireSignIn(returnPath)` and does not
+open the dialog. `periodLabel` and `label` customize the price controls.
+`subscriptionsHref` and `walletHref` customize the dialog links.
+
+The component makes no request. Source is maintained in
+`components/orionplace/tariffs/TariffCard.tsx`; the selection and submit
+contracts are in
+`interfaces/orionplace/subscribeTariff/ITariffSelection.ts`.
+
+### Props
+
+| Prop                                                                    | Meaning                                                                                                       |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `tariffId: number`                                                      | ID of the tariff handled by TariffCard.                                                                       |
+| `disabled?: boolean`                                                    | Disables the component controls and prevents new actions.                                                     |
+| `pending?: boolean`                                                     | Shows the loading state and blocks duplicate actions.                                                         |
+| `suspended?: boolean`                                                   | Keeps entered purchase values visible while a recoverable external step is open.                              |
+| `error?: string`                                                        | Customer-visible error for the component request; omit it when no request failed.                             |
+| `completed?: boolean`                                                   | Successful result displayed after the action finishes.                                                        |
+| `periodLabel?: string`                                                  | Visible or accessible label for period.                                                                       |
+| `label?: string`                                                        | Visible or accessible name for the component’s main control or region.                                        |
+| `guest?: boolean`                                                       | Uses the signed-out purchase path and sign-in action.                                                         |
+| `open?: ITariffSelection`                                               | Controls whether the panel or dialog is open.                                                                 |
+| `image?: ReactNode`                                                     | Image region or replacement renderer for the current card.                                                    |
+| `title?: ReactNode`                                                     | Title region or replacement renderer for the current card.                                                    |
+| `description?: ReactNode`                                               | Supporting text shown below the main message.                                                                 |
+| `features?: ReactNode`                                                  | Feature-summary region or replacement renderer for the tariff card.                                           |
+| `prices?: (choose: (selection: ITariffSelection) => void) => ReactNode` | Price region or replacement renderer for the tariff card.                                                     |
+| `tariffHref?: (tariff: ISubscribeTariff, locale: string) => string`     | Builds the tariff destination from the callback arguments.                                                    |
+| `subscriptionsHref?: (locale: string) => string`                        | Builds the subscriptions destination from the callback arguments.                                             |
+| `walletHref?: (locale: string) => string`                               | Builds the wallet destination from the callback arguments.                                                    |
+| `onSelect?: (selection: ITariffSelection) => void`                      | Passes `tariff` and `price` after saving the selected subscription choice and opening confirmation. A trial has `price: null`. |
+| `onSubscribe?: (request: ITariffSubscribeRequest) => void`              | Confirmation passes the tariff ID in `tariff`, selected `period`, `option` and a nonempty `attach_issue` promo code where applicable. A trial omits `period` and the promo code; the application submits the request. |
+| `onRequireSignIn?: (returnPath: string) => void`                        | Called when the visitor must sign in before continuing. The callback payload is shown in its type.            |
+
+## Русский
+
+`TariffCard` объединяет изображение, локализованное название, описания,
+ограничения возможностей, дополнительную опцию, платные периоды и пробное
+подключение тарифа с указанным `tariffId`. Изображение и название ведут на
+локализованную страницу тарифа. Для другого маршрутизатора передайте
+`tariffHref(tariff, locale)`. Свойства `image`, `title`, `description`,
+`features` и `prices(choose)` заменяют соответствующие области, сохраняя
+поведение карточки и окна оформления.
+
+Выбор доступного платного периода или пробного подключения вызывает
+`onSelect({ tariff, price })` и открывает `TariffSubscriptionModal`. Выбранная
+дополнительная опция передаётся в окно. `open` восстанавливает тот же выбор
+после перехода, если он относится к карточке и остаётся доступным. При
+обновлении каталога окно закрывается, если тариф, его родительская подписка,
+период или пробное подключение стали недоступны. `disabled` и `pending`
+блокируют новый выбор. `suspended`, `error` и `completed` управляют открытым
+окном, а подтверждённый запрос без изменений передаётся в
+`onSubscribe(request)`.
+
+С `guest` действие периода вызывает `onRequireSignIn(returnPath)` и не
+открывает окно. `periodLabel` и `label` меняют подписи элементов цены.
+`subscriptionsHref` и `walletHref` задают ссылки окна.
+
+Компонент не отправляет запросы. Исходный файл:
+`components/orionplace/tariffs/TariffCard.tsx`; контракты выбора и отправки:
+`interfaces/orionplace/subscribeTariff/ITariffSelection.ts`.
+
+### Свойства
+
+| Свойство                                                                | Назначение                                                                                                         |
+| ----------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `tariffId: number`                                                      | ID тарифа, с которым работает TariffCard.                                                                          |
+| `disabled?: boolean`                                                    | Блокирует элементы компонента и новые действия.                                                                    |
+| `pending?: boolean`                                                     | Показывает загрузку и блокирует повторные действия.                                                                |
+| `suspended?: boolean`                                                   | Сохраняет введённые данные покупки во время внешнего шага, после которого можно продолжить.                        |
+| `error?: string`                                                        | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                               |
+| `completed?: boolean`                                                   | Успешный результат после завершения действия.                                                                      |
+| `periodLabel?: string`                                                  | Видимая или доступная подпись для периода.                                                                         |
+| `label?: string`                                                        | Видимое или доступное название основного элемента компонента.                                                      |
+| `guest?: boolean`                                                       | Использует сценарий покупки без входа и действие входа.                                                            |
+| `open?: ITariffSelection`                                               | Управляет открытым состоянием панели или диалога.                                                                  |
+| `image?: ReactNode`                                                     | Блок изображения или функция, которая его заменяет.                                                                |
+| `title?: ReactNode`                                                     | Блок названия карточки или функция, которая его заменяет.                                                          |
+| `description?: ReactNode`                                               | Пояснение под основным сообщением.                                                                                 |
+| `features?: ReactNode`                                                  | Блок характеристик тарифа или функция, которая его заменяет.                                                       |
+| `prices?: (choose: (selection: ITariffSelection) => void) => ReactNode` | Блок цен тарифа или функция, которая его заменяет.                                                                 |
+| `tariffHref?: (tariff: ISubscribeTariff, locale: string) => string`     | Строит адрес ссылки тарифа из аргументов обработчика.                                                              |
+| `subscriptionsHref?: (locale: string) => string`                        | Строит адрес ссылки подписок из аргументов обработчика.                                                            |
+| `walletHref?: (locale: string) => string`                               | Строит адрес ссылки кошелька из аргументов обработчика.                                                            |
+| `onSelect?: (selection: ITariffSelection) => void`                      | Передаёт `tariff` и `price` после сохранения выбранного подключения и открытия подтверждения. Для пробного подключения `price` равен `null`. |
+| `onSubscribe?: (request: ITariffSubscribeRequest) => void`              | Подтверждение передаёт ID тарифа `tariff`, выбранные `period`, `option` и непустой промокод `attach_issue`, когда они применимы. Пробное подключение пропускает `period` и промокод; приложение отправляет запрос. |
+| `onRequireSignIn?: (returnPath: string) => void`                        | Вызывается, когда покупателю нужно войти перед продолжением. Данные обработчика указаны в его типе.                |

package/templates/components/orionplace/tariffs/TariffCard.module.css

@@ -0,0 +1,86 @@
+.card {
+  box-sizing: border-box;
+  display: grid;
+  min-width: 0;
+  grid-row: span 11;
+  grid-template-rows: subgrid;
+  gap: 0;
+  padding: 1.5rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: calc(1.25 / 0.875);
+}
+
+.imageLink {
+  display: block;
+  min-width: 0;
+  grid-row: 1;
+  color: inherit;
+  text-decoration: none;
+}
+
+.trial {
+  width: fit-content;
+  grid-row: 2;
+  margin-top: 1.25rem;
+  padding: 0.125rem 0.5rem;
+  background: var(--orionplace-inverse-surface);
+  color: var(--orionplace-inverse-text);
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.title {
+  grid-row: 3;
+  margin-top: 0.75rem;
+}
+
+.title a {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+}
+
+.title a:focus-visible,
+.imageLink:focus-visible {
+  opacity: 0.7;
+}
+
+@media (hover: hover) {
+  .title a:hover,
+  .imageLink:hover {
+    opacity: 0.7;
+  }
+}
+
+/* The description takes two rows of the card grid and the features three,
+   as in the other packages, so their parts start level across a row. */
+.description {
+  display: grid;
+  grid-row: 4 / span 2;
+  grid-template-rows: subgrid;
+  gap: 0;
+  margin-top: 0.75rem;
+}
+
+.features {
+  display: grid;
+  grid-row: 6 / span 3;
+  grid-template-rows: subgrid;
+  gap: 0;
+  margin-top: 1.25rem;
+}
+
+.prices {
+  display: grid;
+  grid-row: 9 / span 3;
+  grid-template-rows: subgrid;
+  gap: 0;
+  margin-top: 1.25rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--orionplace-border);
+}