orionplace-react 0.7.7 → 0.8.0

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

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