orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/subscriptions/StorefrontSubscriptions.tsx

@@ -1,884 +0,0 @@
-'use client';
-
-import { useEffect, useId, useRef, useState, type ReactNode } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceCatalog,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectIsAuthenticated, selectProfile } from '@/stores/orionplace';
-import { useOrionplaceActionMenu } from '@/hooks/useOrionplaceActionMenu';
-import type { IProfileResponse } from '@/interfaces/orionplace/accounts/IProfileData';
-import type { ITransformValue } from '@/interfaces/orionplace/shared/ITransformValue';
-import type { ISubscribeTariff } from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
-import type {
-  ICustomerSubscription,
-  ICustomerSubscriptionsResponse,
-  ISubscriptionCancelRequest,
-  ISubscriptionChangeOptionRequest,
-  ISubscriptionChangeTariffRequest,
-  ISubscriptionRenewalSettingRequest,
-  ISubscriptionRenewRequest,
-} from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import {
-  subscriptionCanChangeOption,
-  subscriptionIsCancelled,
-  subscriptionPlanChoices,
-} from '@/lib/orionplace/subscriptionChanges';
-import { subscriptionLabels } from '@/lib/orionplace/subscriptionLabels';
-import {
-  subscriptionDays,
-  subscriptionManageLabels,
-} from '@/lib/orionplace/subscriptionManageLabels';
-import {
-  renewalTotalAmount,
-  subscriptionOption,
-  subscriptionPeriodChoices,
-  subscriptionPlan,
-  subscriptionStatus,
-} from '@/lib/orionplace/subscriptionPlans';
-import { tariffMoney } from '@/lib/orionplace/tariffs';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { SubscriptionCancelDialog } from './SubscriptionCancelDialog';
-import { SubscriptionChangeDialog } from './SubscriptionChangeDialog';
-import { SubscriptionExtendDialog } from './SubscriptionExtendDialog';
-import { SubscriptionPlanSummary } from './SubscriptionPlanSummary';
-import { SubscriptionRemoteDetails } from './SubscriptionRemoteDetails';
-import { SubscriptionRenewalDialog } from './SubscriptionRenewalDialog';
-import styles from './StorefrontSubscriptions.module.css';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-
-type SubscriptionsPage = NonNullable<
-  ICustomerSubscriptionsResponse['page_data']
->;
-type ProfilePage = NonNullable<IProfileResponse['page_data']>;
-type ActionKey =
-  'extend' | 'renewal' | 'plan' | 'option' | 'support' | 'cancel';
-type DialogState =
-  | { kind: 'extend' | 'renewal' | 'cancel'; id: number }
-  | { kind: 'change'; id: number; mode: 'plan' | 'option' };
-
-export interface SubscriptionLoadAction {
-  endpoint: 'subscriptions_get';
-  request: Record<string, never>;
-  signal: AbortSignal;
-}
-
-export interface SubscriptionProfileAction {
-  endpoint: 'profile_get';
-  request: { filters: Record<string, never> };
-  signal: AbortSignal;
-}
-
-export interface SubscriptionMutationAction<Request> {
-  endpoint:
-    | 'subscriptions_renew'
-    | 'subscriptions_change_renew'
-    | 'subscriptions_change_tariff'
-    | 'subscriptions_change_option'
-    | 'subscriptions_cancel';
-  request: Request;
-  signal: AbortSignal;
-}
-
-export interface StorefrontSubscriptionsProps {
-  initialData?: SubscriptionsPage;
-  initialError?: string;
-  loadOnMount?: boolean;
-  plansHref?: (locale: string) => string;
-  walletHref?: (locale: string) => string;
-  ticketsHref?: (subscriptionId: number, locale: string) => string;
-  onLoad: (
-    action: SubscriptionLoadAction,
-  ) => Promise<SubscriptionsPage> | SubscriptionsPage;
-  onLoadProfile: (
-    action: SubscriptionProfileAction,
-  ) => Promise<ProfilePage> | ProfilePage;
-  onRenew: (
-    action: SubscriptionMutationAction<ISubscriptionRenewRequest>,
-  ) => Promise<void> | void;
-  onSetRenewal: (
-    action: SubscriptionMutationAction<ISubscriptionRenewalSettingRequest>,
-  ) => Promise<void> | void;
-  onChangeTariff: (
-    action: SubscriptionMutationAction<ISubscriptionChangeTariffRequest>,
-  ) => Promise<void> | void;
-  onChangeOption: (
-    action: SubscriptionMutationAction<ISubscriptionChangeOptionRequest>,
-  ) => Promise<void> | void;
-  onCancel: (
-    action: SubscriptionMutationAction<ISubscriptionCancelRequest>,
-  ) => Promise<void> | void;
-  onRequireSignIn?: (returnPath: string) => void;
-  onSupport?: (subscriptionId: number, href: string) => void;
-  onAccountLoaded?: (
-    subscriptions: SubscriptionsPage,
-    profile: ProfilePage,
-  ) => void;
-  renderPlanSummary?: (
-    plan: ISubscribeTariff | undefined,
-    subscription: ICustomerSubscription,
-  ) => ReactNode;
-  renderRemoteDetails?: (subscription: ICustomerSubscription) => ReactNode;
-}
-
-interface SubscriptionAction {
-  key: ActionKey;
-  label: string;
-  hint: string;
-  icon: string;
-  disabled: boolean;
-  run: () => void;
-}
-
-const statusKeys = {
-  active: 'statusActive',
-  ended: 'statusExpired',
-  pending: 'statusPending',
-} as const;
-
-function fieldMessages(value: unknown) {
-  if (!value || typeof value !== 'object' || Array.isArray(value)) {
-    return {};
-  }
-  return Object.fromEntries(
-    Object.entries(value).flatMap(([key, entry]) => {
-      if (typeof entry === 'string') {
-        return [[key, entry]];
-      }
-      if (Array.isArray(entry)) {
-        const messages = entry
-          .map((item) =>
-            typeof item === 'string'
-              ? item
-              : item && typeof item === 'object' && 'message' in item
-                ? String(item.message)
-                : '',
-          )
-          .filter(Boolean);
-        return messages.length ? [[key, messages.join('\n')]] : [];
-      }
-      return [];
-    }),
-  );
-}
-
-function failure(reason: unknown, fallback: string) {
-  const record =
-    reason && typeof reason === 'object'
-      ? (reason as Record<string, unknown>)
-      : {};
-  return {
-    message:
-      apiErrorMessage(reason) ||
-      (typeof record.message === 'string' && record.message
-        ? record.message
-        : fallback),
-    fields: fieldMessages(record.fields ?? record.form_errors),
-  };
-}
-
-function Icon({ path }: { path: string }) {
-  return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-    >
-      <path d={path} />
-    </svg>
-  );
-}
-
-const icons      = {
-  active: 'm5 12.5 4.5 4.5L19 7.5',
-  ended: 'M6 6l12 12M18 6 6 18',
-  pending: 'M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z',
-  cancelled: 'M9 9l6 6M15 9l-6 6M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z',
-  plans: 'M4 7.5 12 3l8 4.5v9L12 21l-8-4.5zM4 7.5 12 12l8-4.5M12 12v9',
-  menu: 'M4 7h16M4 12h16M4 17h16',
-  created: 'M4 6h16v14H4zM4 10h16M8 3v4M16 3v4',
-  until: 'M6 3h12M6 21h12M7 3c0 5 10 5 10 9s-10 4-10 9M17 3c0 5-10 5-10 9',
-  renewal:
-    'M4 12a8 8 0 0 1 14-5.3L20 9M20 4v5h-5M20 12a8 8 0 0 1-14 5.3L4 15M4 20v-5h5',
-  extend: 'M4 6h16v14H4zM4 10h16M8 3v4M16 3v4M12 13v5M9.5 15.5h5',
-  plan: 'M7 7h13l-3-3M17 17H4l3 3',
-  option: 'M4 7h10M18 7h2M4 17h4M12 17h8M16 5v4M10 15v4',
-  support: 'M4 5h16v11H9l-5 4V5Z',
-  cancel: 'M6 6l12 12M18 6 6 18',
-};
-
-export function StorefrontSubscriptions({
-  initialData,
-  initialError = '',
-  loadOnMount = true,
-  plansHref = (locale) => `/tariffs?locale=${encodeURIComponent(locale)}`,
-  walletHref = (locale) => `/wallet?locale=${encodeURIComponent(locale)}`,
-  ticketsHref = (id, locale) =>
-    `/tickets?subscription=${id}&locale=${encodeURIComponent(locale)}`,
-  onLoad,
-  onLoadProfile,
-  onRenew,
-  onSetRenewal,
-  onChangeTariff,
-  onChangeOption,
-  onCancel,
-  onRequireSignIn,
-  onSupport,
-  onAccountLoaded,
-  renderPlanSummary,
-  renderRemoteDetails,
-}: StorefrontSubscriptionsProps) {
-  const authenticated                       = useOrionplace(selectIsAuthenticated);
-  const profile                             = useOrionplace(selectProfile);
-  const catalogTariffs                      = useOrionplaceCatalog((state) => state.storeTariffs);
-  const locale                              = useOrionplaceSelections((state) => state.localeCode);
-  const currencyId                          = useOrionplaceSelections((state) => state.currencyId);
-  const currency                            = useOrionplaceSelections(
-    (state) => state.init?.currencies[state.currencyId],
-  );
-  const storedWallet                        =
-    useOrionplaceSelections((state) => state.init?.wallet);
-  const labels                              = subscriptionLabels(locale);
-  const manage                              = subscriptionManageLabels(locale);
-  const common                              = featureLabels(locale);
-  const menuId                              = useId();
-  const menu                                = useOrionplaceActionMenu<number>();
-  const callbacks                           = useRef({
-    onLoad,
-    onLoadProfile,
-    onRenew,
-    onSetRenewal,
-    onChangeTariff,
-    onChangeOption,
-    onCancel,
-    onAccountLoaded,
-  });
-  callbacks.current                         = {
-    onLoad,
-    onLoadProfile,
-    onRenew,
-    onSetRenewal,
-    onChangeTariff,
-    onChangeOption,
-    onCancel,
-    onAccountLoaded,
-  };
-  const active                              = useRef<AbortController | undefined>(undefined);
-  const requested                           = useRef(false);
-  const rememberedPlans                     = useRef(new Map<number, ISubscribeTariff>());
-  const [subscriptions, setSubscriptions]   = useState(initialData?.data ?? []);
-  const [accountTariffs, setAccountTariffs] = useState(
-    initialData?.tariffs ?? [],
-  );
-  const [loaded, setLoaded]                 = useState(initialData !== undefined);
-  const [wallet, setWallet]                 = useState<Record<string, ITransformValue>>();
-  const [pending, setPending]               = useState(false);
-  const [error, setError]                   = useState(initialError);
-  const [fields, setFields]                 = useState<Record<string, string>>({});
-  const [needsRefresh, setNeedsRefresh]     = useState(false);
-  const [opened, setOpened]                 = useState<DialogState>();
-  const automaticLoad                       =
-    loadOnMount && initialData === undefined && authenticated;
-  const balance                             =
-    (wallet ?? storedWallet)?.[currencyId]?.transform_value;
-  const openedSubscription                  = opened
-    ? subscriptions.find((item) => item.id === opened.id)
-    : undefined;
-
-  function knownPlan(item: ICustomerSubscription) {
-    const tariffs = new Map(
-      (catalogTariffs?.data ?? []).map((tariff) => [tariff.id, tariff]),
-    );
-    for (const tariff of accountTariffs) {
-      tariffs.set(tariff.id, tariff);
-    }
-    const plan    = subscriptionPlan(item, [...tariffs.values()]);
-    if (plan) {
-      rememberedPlans.current.set(item.id, plan);
-    }
-    return rememberedPlans.current.get(item.id);
-  }
-
-  const openedPlan                          = openedSubscription
-    ? knownPlan(openedSubscription)
-    : undefined;
-  const openedOption                        = openedSubscription
-    ? subscriptionOption(openedSubscription, openedPlan)
-    : undefined;
-
-  function clearFeedback() {
-    setError('');
-    setFields({});
-  }
-
-  async function loadAccount(controller: AbortController) {
-    const page           = await callbacks.current.onLoad({
-      endpoint: 'subscriptions_get',
-      request: {},
-      signal: controller.signal,
-    });
-    if (controller.signal.aborted) {
-      return;
-    }
-    setSubscriptions(page.data);
-    setAccountTariffs(page.tariffs);
-    setLoaded(true);
-    const profilePage    = await callbacks.current.onLoadProfile({
-      endpoint: 'profile_get',
-      request: { filters: {} },
-      signal: controller.signal,
-    });
-    if (controller.signal.aborted) {
-      return;
-    }
-    const currentProfile = profilePage.profile_info.find(
-      (item) => item.id === profile?.id,
-    );
-    if (currentProfile?.wallet) {
-      setWallet(currentProfile.wallet);
-    }
-    callbacks.current.onAccountLoaded?.(page, profilePage);
-    setNeedsRefresh(false);
-  }
-
-  async function run(work: (controller: AbortController) => Promise<void>) {
-    if (active.current) {
-      return false;
-    }
-    const controller = new AbortController();
-    active.current   = controller;
-    setPending(true);
-    clearFeedback();
-    try {
-      await work(controller);
-      return !controller.signal.aborted;
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        const next = failure(reason, common.failed);
-        setError(next.message);
-        setFields(next.fields);
-      }
-      return false;
-    } finally {
-      if (active.current === controller) {
-        active.current = undefined;
-        setPending(false);
-      }
-    }
-  }
-
-  function requireAccount() {
-    if (authenticated) {
-      return true;
-    }
-    onRequireSignIn?.(`/subscriptions?locale=${encodeURIComponent(locale)}`);
-    return false;
-  }
-
-  async function mutate<Request>(
-    endpoint: SubscriptionMutationAction<Request>['endpoint'],
-    request: Request,
-    action: (
-      value: SubscriptionMutationAction<Request>,
-    ) => Promise<void> | void,
-  ) {
-    if (!requireAccount() || needsRefresh || pending) {
-      return false;
-    }
-    return run(async (controller) => {
-      await action({ endpoint, request, signal: controller.signal });
-      if (controller.signal.aborted) {
-        return;
-      }
-      setNeedsRefresh(true);
-      await loadAccount(controller);
-    });
-  }
-
-  async function load() {
-    if (!authenticated) {
-      return false;
-    }
-    return run(loadAccount);
-  }
-
-  async function refresh() {
-    if (!needsRefresh || pending) {
-      return false;
-    }
-    return run(loadAccount);
-  }
-
-  function closeDialogs() {
-    if (!pending) {
-      setOpened(undefined);
-      clearFeedback();
-    }
-  }
-
-  async function sendRenew(request: ISubscriptionRenewRequest) {
-    if (
-      await mutate('subscriptions_renew', request, callbacks.current.onRenew)
-    ) {
-      setOpened(undefined);
-    }
-  }
-
-  async function sendRenewal(request: ISubscriptionRenewalSettingRequest) {
-    if (
-      await mutate(
-        'subscriptions_change_renew',
-        request,
-        callbacks.current.onSetRenewal,
-      )
-    ) {
-      setOpened(undefined);
-    }
-  }
-
-  async function sendChange(
-    request:
-      ISubscriptionChangeTariffRequest | ISubscriptionChangeOptionRequest,
-  ) {
-    const changed =
-      'new_tariff' in request
-        ? await mutate(
-            'subscriptions_change_tariff',
-            request,
-            callbacks.current.onChangeTariff,
-          )
-        : await mutate(
-            'subscriptions_change_option',
-            request,
-            callbacks.current.onChangeOption,
-          );
-    if (changed) {
-      setOpened(undefined);
-    }
-  }
-
-  async function sendCancel(request: ISubscriptionCancelRequest) {
-    if (
-      await mutate('subscriptions_cancel', request, callbacks.current.onCancel)
-    ) {
-      setOpened(undefined);
-    }
-  }
-
-  function support(id: number) {
-    const href = ticketsHref(id, locale);
-    if (onSupport) {
-      onSupport(id, href);
-    } else {
-      window.location.assign(href);
-    }
-  }
-
-  useEffect(() => {
-    if (!requested.current && automaticLoad) {
-      requested.current = true;
-      void load();
-    }
-    return () => {
-      active.current?.abort();
-      active.current    = undefined;
-      requested.current = false;
-    };
-  }, []);
-
-  const entries                             = subscriptions.map((item) => {
-    const plan           = knownPlan(item);
-    const status         = subscriptionStatus(item);
-    const cancelled      = subscriptionIsCancelled(item);
-    const paid           = subscriptionPeriodChoices(plan, currencyId).length > 0;
-    const renewable      = paid || Boolean(item.renew_period);
-    const otherPlans     = subscriptionPlanChoices(
-      item,
-      catalogTariffs?.data ?? [],
-      catalogTariffs?.subscriptions ?? [],
-    );
-    const planName       =
-      getAvailableNestedValueFromObject(plan?.locales, locale, 'tariff_name') ||
-      '';
-    const renewal        = item.renew_period;
-    const renewalLabel   = renewal
-      ? `${subscriptionDays(renewal.days, locale)} · ${tariffMoney(
-          renewalTotalAmount(renewal, currencyId),
-          locale,
-          currency,
-        )}`
-      : labels.disabled;
-    const until          = item.active_until?.date;
-    const cancelledState = until
-      ? manage.cancelledState.replace('{date}', until)
-      : manage.cancelledStateNoDate;
-    return {
-      item,
-      plan,
-      planName,
-      status,
-      statusLabel: manage[statusKeys[status]],
-      cancelled,
-      cancelledState,
-      renewalLabel,
-      showRenewal: renewable,
-      canExtend: paid,
-      canSetRenewal: renewable,
-      canChangePlan:
-        status !== 'ended' && Boolean(plan) && otherPlans.length > 0,
-      canChangeOption:
-        status !== 'ended' && subscriptionCanChangeOption(item, plan),
-      canCancel: status === 'active' && !cancelled && renewable,
-    };
-  });
-
-  function actions(entry: (typeof entries)[number]): SubscriptionAction[] {
-    const id                         = entry.item.id;
-    const locked                     = pending || needsRefresh;
-    const list: SubscriptionAction[] = [];
-    if (entry.canExtend) {
-      list.push({
-        key: 'extend',
-        label: manage.extend,
-        hint: manage.extendHint,
-        icon: icons.extend,
-        disabled: locked,
-        run: () => setOpened({ kind: 'extend', id }),
-      });
-    }
-    if (entry.canSetRenewal) {
-      list.push({
-        key: 'renewal',
-        label: manage.renewalSettings,
-        hint: manage.renewalHint,
-        icon: icons.renewal,
-        disabled: locked,
-        run: () => setOpened({ kind: 'renewal', id }),
-      });
-    }
-    if (entry.canChangePlan) {
-      list.push({
-        key: 'plan',
-        label: manage.changePlan,
-        hint: manage.changePlanHint,
-        icon: icons.plan,
-        disabled: locked,
-        run: () => setOpened({ kind: 'change', id, mode: 'plan' }),
-      });
-    }
-    if (entry.canChangeOption) {
-      list.push({
-        key: 'option',
-        label: manage.changeOption,
-        hint: manage.changeOptionHint,
-        icon: icons.option,
-        disabled: locked,
-        run: () => setOpened({ kind: 'change', id, mode: 'option' }),
-      });
-    }
-    const count                      = entry.item.c_tickets;
-    const supportLabel               = count
-      ? `${labels.support} (${count})`
-      : labels.support;
-    list.push({
-      key: 'support',
-      label: supportLabel,
-      hint: supportLabel,
-      icon: icons.support,
-      disabled: false,
-      run: () => support(id),
-    });
-    if (entry.canCancel) {
-      list.push({
-        key: 'cancel',
-        label: manage.cancelSubscription,
-        hint: manage.cancelHint,
-        icon: icons.cancel,
-        disabled: locked,
-        run: () => setOpened({ kind: 'cancel', id }),
-      });
-    }
-    return list;
-  }
-
-  function choose(action: SubscriptionAction) {
-    if (!action.disabled) {
-      menu.close(action.key !== 'support');
-      clearFeedback();
-      action.run();
-    }
-  }
-
-  const listError                           = openedSubscription ? '' : error;
-  return (
-    <section
-      className={styles.root}
-      data-feature-part="StorefrontSubscriptions"
-      aria-busy={pending}
-    >
-      <header className={styles.pageHeader}>
-        <h1>{labels.mine}</h1>
-        <a href={plansHref(locale)}>
-          <Icon path={icons.plans} />
-          {labels.choose}
-        </a>
-      </header>
-      {listError ? (
-        <div
-          className={`${styles.notice} ${styles.error}`}
-          role="alert"
-        >
-          <p>{listError}</p>
-          <button
-            type="button"
-            disabled={pending}
-            onClick={() => void (needsRefresh ? refresh() : load())}
-          >
-            {common.retry}
-          </button>
-        </div>
-      ) : null}
-      {needsRefresh ? (
-        <div
-          className={styles.notice}
-          role="status"
-        >
-          <p>{labels.refreshRequired}</p>
-          <button
-            type="button"
-            disabled={pending}
-            onClick={() => void refresh()}
-          >
-            {common.refresh}
-          </button>
-        </div>
-      ) : null}
-      {!loaded ? (
-        <div className={styles.loading}>
-          {pending ? (
-            <p
-              className="op-feature-loading"
-              role="status"
-            >
-              <span className={styles.screenReaderOnly}>{common.loading}</span>
-            </p>
-          ) : null}
-        </div>
-      ) : !entries.length ? (
-        <OrionplaceEmptyState
-          kind="subscriptions"
-          message={labels.empty}
-        />
-      ) : null}
-      {entries.map((entry) => {
-        const itemActions = actions(entry);
-        const menuOpen    = menu.openKey === entry.item.id;
-        const itemLabel   = entry.planName || labels.subscription;
-        return (
-          <article
-            key={entry.item.id}
-            className={styles.card}
-            data-subscription={entry.item.id}
-          >
-            <header className={styles.cardHeader}>
-              <div className={styles.identity}>
-                <h2>
-                  <Icon path={icons.plans} />
-                  {itemLabel} #{entry.item.id}
-                </h2>
-                <div className={styles.states}>
-                  <span
-                    className={styles.state}
-                    data-state={entry.status}
-                    title={
-                      entry.status === 'pending'
-                        ? manage.statusPendingHint
-                        : undefined
-                    }
-                  >
-                    <Icon path={icons[entry.status]} />
-                    {entry.statusLabel}
-                  </span>
-                  {entry.cancelled ? (
-                    <span
-                      className={styles.state}
-                      data-state="cancelled"
-                      title={
-                        entry.item.cancelled_date?.date
-                          ? manage.cancelledOn.replace(
-                              '{date}',
-                              entry.item.cancelled_date.date,
-                            )
-                          : undefined
-                      }
-                    >
-                      <Icon path={icons.cancelled} />
-                      {manage.cancelled}
-                    </span>
-                  ) : null}
-                </div>
-              </div>
-              <div
-                ref={(element) => menu.rememberRoot(entry.item.id, element)}
-                className={styles.menuRoot}
-              >
-                <button
-                  ref={(element) =>
-                    menu.rememberTrigger(entry.item.id, element)
-                  }
-                  type="button"
-                  className={styles.menuTrigger}
-                  aria-haspopup="menu"
-                  aria-expanded={menuOpen}
-                  aria-controls={
-                    menuOpen ? `${menuId}-${entry.item.id}` : undefined
-                  }
-                  aria-label={`${manage.actions}: ${itemLabel} #${entry.item.id}`}
-                  data-subscription-menu
-                  onClick={() => menu.toggle(entry.item.id)}
-                  onKeyDown={(event) =>
-                    menu.onTriggerKeyDown(event, entry.item.id)
-                  }
-                >
-                  <Icon path={icons.menu} />
-                </button>
-                {menuOpen ? (
-                  <div
-                    id={`${menuId}-${entry.item.id}`}
-                    role="menu"
-                    aria-label={manage.actions}
-                    className={styles.menu}
-                  >
-                    {itemActions.map((action, index) => (
-                      <button
-                        key={action.key}
-                        ref={(element) => menu.rememberItem(index, element)}
-                        type="button"
-                        role="menuitem"
-                        tabIndex={-1}
-                        disabled={action.disabled}
-                        title={action.hint}
-                        data-subscription-action={action.key}
-                        data-danger={action.key === 'cancel' || undefined}
-                        onClick={() => choose(action)}
-                        onKeyDown={menu.onItemKeyDown}
-                      >
-                        <Icon path={action.icon} />
-                        {action.label}
-                      </button>
-                    ))}
-                  </div>
-                ) : null}
-              </div>
-            </header>
-            {entry.cancelled && entry.status !== 'ended' ? (
-              <div className={styles.part}>
-                <p
-                  className={styles.attention}
-                  role="status"
-                >
-                  {entry.cancelledState}
-                </p>
-              </div>
-            ) : null}
-            <dl className={`${styles.facts} ${styles.part}`}>
-              <div>
-                <Icon path={icons.created} />
-                <dt>{labels.created}</dt>
-                <dd>{entry.item.creation_date.date}</dd>
-              </div>
-              <div>
-                <Icon path={icons.until} />
-                <dt>{labels.until}</dt>
-                <dd>{entry.item.active_until?.date || '—'}</dd>
-              </div>
-              {entry.showRenewal ? (
-                <div>
-                  <Icon path={icons.renewal} />
-                  <dt>{labels.renewal}</dt>
-                  <dd>{entry.renewalLabel}</dd>
-                </div>
-              ) : null}
-            </dl>
-            {renderPlanSummary ? (
-              <div className={styles.part}>
-                {renderPlanSummary(entry.plan, entry.item)}
-              </div>
-            ) : (
-              <SubscriptionPlanSummary
-                className={styles.part}
-                plan={entry.plan}
-                subscription={entry.item}
-              />
-            )}
-            {renderRemoteDetails ? (
-              <div className={styles.part}>
-                {renderRemoteDetails(entry.item)}
-              </div>
-            ) : (
-              <SubscriptionRemoteDetails
-                className={styles.part}
-                subscription={entry.item}
-              />
-            )}
-          </article>
-        );
-      })}
-      <SubscriptionExtendDialog
-        subscription={
-          opened?.kind === 'extend' ? openedSubscription : undefined
-        }
-        plan={openedPlan}
-        option={openedOption}
-        pending={pending}
-        error={opened?.kind === 'extend' ? error : ''}
-        balance={balance}
-        walletHref={walletHref}
-        onSubmit={(request) => void sendRenew(request)}
-        onClose={closeDialogs}
-      />
-      <SubscriptionRenewalDialog
-        subscription={
-          opened?.kind === 'renewal' ? openedSubscription : undefined
-        }
-        plan={openedPlan}
-        pending={pending}
-        error={opened?.kind === 'renewal' ? error : ''}
-        onSubmit={(request) => void sendRenewal(request)}
-        onClose={closeDialogs}
-      />
-      <SubscriptionChangeDialog
-        subscription={
-          opened?.kind === 'change' ? openedSubscription : undefined
-        }
-        mode={opened?.kind === 'change' ? opened.mode : 'plan'}
-        plan={openedPlan}
-        pending={pending}
-        error={opened?.kind === 'change' ? error : ''}
-        fields={opened?.kind === 'change' ? fields : {}}
-        balance={balance}
-        walletHref={walletHref}
-        onSubmit={(request) => void sendChange(request)}
-        onClose={closeDialogs}
-      />
-      <SubscriptionCancelDialog
-        subscription={
-          opened?.kind === 'cancel' ? openedSubscription : undefined
-        }
-        plan={openedPlan}
-        pending={pending}
-        error={opened?.kind === 'cancel' ? error : ''}
-        fields={opened?.kind === 'cancel' ? fields : {}}
-        onSubmit={(request) => void sendCancel(request)}
-        onClose={closeDialogs}
-      />
-    </section>
-  );
-}