orionplace-react 0.7.7 → 0.8.0

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

@@ -1,261 +0,0 @@
-'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

@@ -1,53 +0,0 @@
-# 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

@@ -1,118 +0,0 @@
-'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

@@ -1,108 +0,0 @@
-# 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

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