orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,634 @@
+'use client';
+
+import '@/components/orionplace/shared/dialogs.css';
+
+import {
+  useEffect,
+  useId,
+  useState,
+  type FormEvent,
+  type MouseEvent,
+} from 'react';
+import {
+  useOrionplaceCatalog,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { useOrionplaceDialog } from '@/hooks/useOrionplaceDialog';
+import type {
+  ISubscribeTariff,
+  ISubscribeTariffOption,
+} from '@/interfaces/orionplace/subscribeTariff/ISubscribeTariff';
+import type {
+  ICustomerSubscription,
+  ISubscriptionChangeRequest,
+} from '@/interfaces/orionplace/subscribes/ISubscriptionApi';
+import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
+import {
+  subscriptionChangeIsAboveBalance,
+  subscriptionChangePeriods,
+  subscriptionChangeTotal,
+  subscriptionOptionChoices,
+  subscriptionPlanChoices,
+  subscriptionRefundAmount,
+} from '@/lib/orionplace/subscriptionChanges';
+import {
+  subscriptionDays,
+  subscriptionManageLabels,
+} from '@/lib/orionplace/subscriptionManageLabels';
+import { tariffMoney } from '@/lib/orionplace/tariffs';
+import { OrionplaceInfoHint } from '@/components/orionplace/shared/OrionplaceInfoHint';
+import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
+import { SubscriptionPlanSummary } from './SubscriptionPlanSummary';
+import styles from './SubscriptionDialog.module.css';
+
+export interface SubscriptionChangeDialogProps {
+  subscription?: ICustomerSubscription;
+  mode?: 'plan' | 'option';
+  plan?: ISubscribeTariff;
+  pending?: boolean;
+  error?: string;
+  fields?: Record<string, string>;
+  modal?: boolean;
+  balance?: number;
+  walletHref?: (locale: string) => string;
+  onSubmit?: (request: ISubscriptionChangeRequest) => void;
+  onClose?: () => void;
+}
+
+function defaultOption(
+  plan: ISubscribeTariff | undefined,
+  current: number | null | undefined,
+  changingPlan: boolean,
+) {
+  const options = plan?.options ?? [];
+  const kept = options.find((option) => option.id === current);
+  return changingPlan
+    ? (kept ?? options[0])
+    : (options.find((option) => option.id !== current) ?? options[0]);
+}
+
+export function SubscriptionChangeDialog({
+  subscription,
+  mode = 'plan',
+  plan,
+  pending = false,
+  error = '',
+  fields = {},
+  modal = true,
+  balance: balanceOverride,
+  walletHref = (locale) => `/wallet?locale=${encodeURIComponent(locale)}`,
+  onSubmit,
+  onClose,
+}: SubscriptionChangeDialogProps) {
+  const tariffs = 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 storedBalance = useOrionplaceSelections(
+    (state) => state.init?.wallet?.[state.currencyId]?.transform_value,
+  );
+  const balance = balanceOverride ?? storedBalance;
+  const copy = subscriptionManageLabels(locale);
+  const id = useId();
+  const changingPlan = mode === 'plan';
+  const plans =
+    subscription && changingPlan
+      ? subscriptionPlanChoices(
+          subscription,
+          tariffs?.data ?? [],
+          tariffs?.subscriptions ?? [],
+        )
+      : [];
+  const firstPlan = changingPlan ? plans[0] : plan;
+  const firstOption = defaultOption(
+    firstPlan,
+    subscription?.option,
+    changingPlan,
+  );
+  const firstPeriods = subscriptionChangePeriods(
+    firstPlan,
+    firstOption,
+    currencyId,
+  );
+  const firstPeriod =
+    firstPeriods.find(
+      (choice) => choice.days === subscription?.renew_period?.days,
+    ) ?? firstPeriods[0];
+  const [planChoice, setPlanChoice] = useState(
+    changingPlan && firstPlan ? String(firstPlan.id) : '',
+  );
+  const [optionChoice, setOptionChoice] = useState(
+    firstOption ? String(firstOption.id) : '',
+  );
+  const [period, setPeriod] = useState<number | undefined>(firstPeriod?.id);
+  const [renewalChoice, setRenewalChoice] = useState(
+    subscription?.renew_period && firstPeriod ? String(firstPeriod.id) : '',
+  );
+  const [promo, setPromo] = useState('');
+  const [confirming, setConfirming] = useState(false);
+  const { dialog, initialFocus } = useOrionplaceDialog(
+    subscription ? `${subscription.id}:${mode}` : undefined,
+    modal,
+  );
+  const targetPlan = changingPlan
+    ? plans.find((item) => String(item.id) === planChoice)
+    : plan;
+  const options = subscriptionOptionChoices(targetPlan);
+  const targetOption = options.find((item) => String(item.id) === optionChoice);
+  const periods = subscriptionChangePeriods(
+    targetPlan,
+    targetOption,
+    currencyId,
+  ).map((choice) => ({
+    ...choice,
+    length: subscriptionDays(choice.days, locale),
+    price: tariffMoney(choice.amount, locale, currency),
+  }));
+  const chosen = periods.find((choice) => choice.id === period);
+  const renewal = periods.find((choice) => String(choice.id) === renewalChoice);
+  const refund = subscriptionRefundAmount(subscription, currencyId);
+  const available =
+    balance === undefined || refund === undefined
+      ? undefined
+      : balance + refund;
+  const low = subscriptionChangeIsAboveBalance(chosen, balance, refund);
+  const hasFieldError = Object.entries(fields).some(
+    ([name, message]) => name !== '__all__' && Boolean(message),
+  );
+  const generalError = fields.__all__ || (hasFieldError ? '' : error);
+  const ready = Boolean(
+    subscription &&
+    chosen &&
+    (!changingPlan || targetPlan) &&
+    (changingPlan
+      ? !(options.length > 0 && !targetOption)
+      : targetOption && targetOption.id !== subscription.option),
+  );
+
+  function money(amount: number | undefined) {
+    return tariffMoney(amount, locale, currency);
+  }
+
+  function planName(item: ISubscribeTariff | undefined) {
+    return (
+      getAvailableNestedValueFromObject(item?.locales, locale, 'tariff_name') ||
+      copy.manage
+    );
+  }
+
+  function optionName(item: ISubscribeTariffOption | undefined) {
+    return (
+      getAvailableNestedValueFromObject(item?.locale, locale, 'option_name') ||
+      copy.optionPrice
+    );
+  }
+
+  const currentOption = options.find(
+    (item) => item.id === subscription?.option,
+  );
+  const current = changingPlan
+    ? copy.changeCurrentPlan.replace('{plan}', planName(plan))
+    : copy.changeCurrentOption.replace(
+        '{option}',
+        currentOption ? optionName(currentOption) : copy.changeNoOption,
+      );
+  const unavailable =
+    changingPlan && !plans.length
+      ? copy.changeNoPlans
+      : !changingPlan && !options.length
+        ? copy.changeNoOptions
+        : targetPlan && !periods.length
+          ? copy.changeNoPeriods
+          : '';
+  const renewalNote = renewal
+    ? copy.renewalEffectOn
+        .replace('{price}', renewal.price)
+        .replace('{days}', renewal.length)
+    : copy.renewalEffectOff;
+  const afterTemplate = changingPlan
+    ? refund === undefined
+      ? copy.changeAfterPlan
+      : copy.changeAfterPlanRefund
+    : refund === undefined
+      ? copy.changeAfterOption
+      : copy.changeAfterOptionRefund;
+  const after = afterTemplate
+    .replace('{plan}', planName(targetPlan))
+    .replace(
+      '{option}',
+      targetOption ? optionName(targetOption) : copy.changeNoOption,
+    )
+    .replace('{period}', chosen?.length || '—')
+    .replace('{refund}', money(refund))
+    .replace('{price}', money(subscriptionChangeTotal(chosen)));
+  const planOptions = Object.fromEntries(
+    plans.map((item) => [String(item.id), planName(item)]),
+  );
+  const optionOptions = Object.fromEntries(
+    options.map((item) => [String(item.id), optionName(item)]),
+  );
+  const renewalOptions: Record<string, string> = {
+    '': copy.renewalOff,
+    ...Object.fromEntries(
+      periods.map((choice) => [
+        String(choice.id),
+        `${choice.length} · ${choice.price}`,
+      ]),
+    ),
+  };
+  const plansKey = plans.map((item) => item.id).join(',');
+  const periodsKey = periods.map((item) => item.id).join(',');
+
+  useEffect(() => {
+    const nextPlan = changingPlan ? plans[0] : plan;
+    const nextOption = defaultOption(
+      nextPlan,
+      subscription?.option,
+      changingPlan,
+    );
+    setPlanChoice(changingPlan && nextPlan ? String(nextPlan.id) : '');
+    setOptionChoice(nextOption ? String(nextOption.id) : '');
+    setPromo('');
+    setConfirming(false);
+  }, [subscription?.id, mode, plan?.id, plansKey]);
+
+  useEffect(() => {
+    const valid = targetPlan?.options.some(
+      (item) => String(item.id) === optionChoice,
+    );
+    if (changingPlan && targetPlan && !valid) {
+      const next = defaultOption(targetPlan, subscription?.option, true);
+      setOptionChoice(next ? String(next.id) : '');
+    }
+  }, [changingPlan, targetPlan?.id, optionChoice, subscription?.option]);
+
+  useEffect(() => {
+    const matching = periods.find(
+      (choice) => choice.days === subscription?.renew_period?.days,
+    );
+    const next = matching ?? periods[0];
+    setPeriod(next?.id);
+    // Automatic renewal stays as it was: off stays off, on moves to the
+    // same length of the new plan, else to its first period.
+    setRenewalChoice(subscription?.renew_period && next ? String(next.id) : '');
+  }, [
+    targetPlan?.id,
+    optionChoice,
+    periodsKey,
+    subscription?.renew_period?.days,
+  ]);
+
+  useEffect(() => {
+    if (hasFieldError) {
+      setConfirming(false);
+    }
+  }, [hasFieldError]);
+
+  function close() {
+    if (!pending) {
+      onClose?.();
+    }
+  }
+
+  function back() {
+    if (confirming) {
+      setConfirming(false);
+    } else {
+      close();
+    }
+  }
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (pending || !ready || !subscription || !chosen) {
+      return;
+    }
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+    const common = {
+      existed_subscription: subscription.id,
+      period: chosen.id,
+      ...(renewal ? { renew_period: renewal.id } : {}),
+      ...(promo.trim() ? { attach_issue: promo.trim() } : {}),
+    };
+    const request: ISubscriptionChangeRequest = changingPlan
+      ? {
+          ...common,
+          new_tariff: targetPlan!.id,
+          ...(targetOption ? { option: targetOption.id } : {}),
+        }
+      : { ...common, option: targetOption!.id };
+    onSubmit?.(request);
+  }
+
+  function backdrop(event: MouseEvent<HTMLDialogElement>) {
+    const bounds = dialog.current?.getBoundingClientRect();
+    if (
+      modal &&
+      event.target === dialog.current &&
+      bounds &&
+      (event.clientX < bounds.left ||
+        event.clientX > bounds.right ||
+        event.clientY < bounds.top ||
+        event.clientY > bounds.bottom)
+    ) {
+      close();
+    }
+  }
+
+  if (!subscription) {
+    return null;
+  }
+
+  const showOptions = options.length > (changingPlan ? 1 : 0);
+  return (
+    <dialog
+      data-stable-modal="wide"
+      ref={dialog}
+      className={`${styles.dialog} ${styles.wide} ${modal ? '' : styles.inline}`.trim()}
+      aria-labelledby={`${id}-title`}
+      aria-describedby={`${id}-summary`}
+      aria-busy={pending}
+      data-feature-part="SubscriptionChangeDialog"
+      data-subscription-change-dialog
+      onCancel={(event) => {
+        event.preventDefault();
+        close();
+      }}
+      onKeyDown={(event) => {
+        // Escape belongs to this window, not to the page behind it.
+        if (event.key === 'Escape') {
+          event.stopPropagation();
+        }
+      }}
+      onClick={backdrop}
+    >
+      <form
+        className={styles.form}
+        onSubmit={submit}
+      >
+        <header className={styles.header}>
+          <div>
+            <p className={styles.eyebrow}>{current}</p>
+            <h2
+              id={`${id}-title`}
+              className={styles.title}
+            >
+              {changingPlan ? copy.changePlanTitle : copy.changeOptionTitle}
+            </h2>
+          </div>
+          <button
+            ref={initialFocus}
+            type="button"
+            className={styles.close}
+            disabled={pending}
+            aria-label={copy.close}
+            onClick={close}
+          >
+            ×
+          </button>
+        </header>
+        <div className={styles.columns}>
+          <div className={styles.controls}>
+            <p
+              id={`${id}-summary`}
+              className={styles.description}
+            >
+              {changingPlan ? copy.changePlanSummary : copy.changeOptionSummary}
+            </p>
+            {unavailable ? (
+              <p
+                className={styles.attention}
+                role="status"
+              >
+                {unavailable}
+              </p>
+            ) : null}
+            {changingPlan && !confirming && plans.length ? (
+              <div className={styles.selectField}>
+                <OrionplaceSelect
+                  value={planChoice}
+                  options={planOptions}
+                  label={copy.changePlanField}
+                  disabled={pending}
+                  onValueChange={setPlanChoice}
+                />
+                {fields.new_tariff ? (
+                  <span
+                    role="alert"
+                    className={styles.fieldError}
+                  >
+                    {fields.new_tariff}
+                  </span>
+                ) : null}
+              </div>
+            ) : null}
+            {!confirming && (showOptions || fields.option) ? (
+              <div className={styles.selectField}>
+                {showOptions ? (
+                  <OrionplaceSelect
+                    value={optionChoice}
+                    options={optionOptions}
+                    label={copy.changeOptionField}
+                    disabled={pending}
+                    onValueChange={setOptionChoice}
+                  />
+                ) : null}
+                {fields.option ? (
+                  <span
+                    role="alert"
+                    className={styles.fieldError}
+                  >
+                    {fields.option}
+                  </span>
+                ) : null}
+              </div>
+            ) : null}
+            {!confirming && periods.length > 1 ? (
+              <fieldset className={styles.fieldset}>
+                <legend>{copy.period}</legend>
+                {periods.map((choice) => (
+                  <label
+                    key={choice.id}
+                    className={styles.choice}
+                  >
+                    <span>
+                      <input
+                        type="radio"
+                        name="period"
+                        value={choice.id}
+                        checked={period === choice.id}
+                        disabled={pending}
+                        onChange={() => setPeriod(choice.id)}
+                      />
+                      <span>{choice.length}</span>
+                    </span>
+                    <span>{choice.price}</span>
+                  </label>
+                ))}
+              </fieldset>
+            ) : null}
+            {!confirming && fields.period ? (
+              <span
+                role="alert"
+                className={styles.fieldError}
+              >
+                {fields.period}
+              </span>
+            ) : null}
+            {!confirming && periods.length ? (
+              <label className={styles.label}>
+                <span>{copy.promo}</span>
+                <input
+                  name="attach_issue"
+                  maxLength={20}
+                  autoComplete="off"
+                  placeholder={copy.promoHint}
+                  value={promo}
+                  disabled={pending}
+                  onChange={(event) => setPromo(event.currentTarget.value)}
+                />
+                {fields.attach_issue ? (
+                  <span
+                    role="alert"
+                    className={styles.fieldError}
+                  >
+                    {fields.attach_issue}
+                  </span>
+                ) : null}
+              </label>
+            ) : null}
+            {!confirming && periods.length ? (
+              <div className={styles.selectField}>
+                <OrionplaceSelect
+                  value={renewalChoice}
+                  options={renewalOptions}
+                  label={copy.renewalSettings}
+                  disabled={pending}
+                  onValueChange={setRenewalChoice}
+                />
+                <span className={styles.renewalNote}>{renewalNote}</span>
+                {fields.renew_period ? (
+                  <span
+                    role="alert"
+                    className={styles.fieldError}
+                  >
+                    {fields.renew_period}
+                  </span>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          <aside
+            className={styles.summaryColumn}
+            data-subscription-change-plan
+          >
+            <SubscriptionPlanSummary
+              plan={targetPlan}
+              className={styles.planBox}
+            />
+            {periods.length ? (
+              <dl className={styles.summary}>
+                <div>
+                  <dt>{copy.period}</dt>
+                  <dd>{chosen?.length || '—'}</dd>
+                </div>
+                <div>
+                  <dt>{copy.planPrice}</dt>
+                  <dd>{chosen?.price || '—'}</dd>
+                </div>
+                {targetOption ? (
+                  <div>
+                    <dt>{optionName(targetOption)}</dt>
+                    <dd>{money(chosen?.optionAmount)}</dd>
+                  </div>
+                ) : null}
+                <div>
+                  <dt>
+                    {copy.changeRefund}
+                    <OrionplaceInfoHint
+                      label={copy.changeRefund}
+                      text={
+                        refund === undefined
+                          ? copy.changeRefundUnknown
+                          : copy.changeRefundHint
+                      }
+                    />
+                  </dt>
+                  <dd>{money(refund)}</dd>
+                </div>
+                <div className={styles.total}>
+                  <dt>{copy.balance}</dt>
+                  <dd className={styles.balance}>
+                    <span>{money(balance)}</span>
+                    {low ? (
+                      <a
+                        className={styles.wallet}
+                        href={walletHref(locale)}
+                      >
+                        {copy.topUp}
+                      </a>
+                    ) : null}
+                  </dd>
+                </div>
+                {available !== undefined ? (
+                  <div>
+                    <dt>{copy.changeAvailable}</dt>
+                    <dd>{money(available)}</dd>
+                  </div>
+                ) : null}
+              </dl>
+            ) : null}
+          </aside>
+        </div>
+        {confirming ? (
+          <p
+            className={styles.notice}
+            role="status"
+          >
+            {after}
+          </p>
+        ) : null}
+        {low ? (
+          <p className={styles.attention}>
+            {refund === undefined ? copy.changeInsufficient : copy.changeShort}
+          </p>
+        ) : null}
+        {generalError ? (
+          <p
+            role="alert"
+            className={styles.error}
+          >
+            {generalError}
+          </p>
+        ) : null}
+        <div className={styles.actions}>
+          <button
+            type="button"
+            className={styles.secondary}
+            disabled={pending}
+            onClick={back}
+          >
+            {confirming ? copy.cancel : copy.close}
+          </button>
+          <button
+            type="submit"
+            className={styles.primary}
+            disabled={pending || !ready}
+          >
+            {pending ? <span className={styles.spinner} aria-hidden="true" /> : null}
+            {pending
+              ? copy.changePending
+              : confirming
+                ? copy.changeSubmit
+                : copy.changeConfirm}
+          </button>
+        </div>
+      </form>
+    </dialog>
+  );
+}