orionplace-react 0.1.0 → 0.2.1

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

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