cozsweet-frontend-nextjs/src/app/subscription/subscription-screen.tsx

"use client";
import { useEffect, useMemo, useRef } from "react";

import { BackButton } from "@/app/_components";
import { Checkbox, MobileShell } from "@/app/_components/core";
import { AppConstants } from "@/core/app_constants";
import type { PayChannel } from "@/data/dto/payment";
import { useUserState } from "@/stores/user/user-context";

import {
  SubscriptionCheckoutButton,
  SubscriptionCoinsOfferSection,
  SubscriptionPaymentMethod,
  SubscriptionPaymentSuccessDialog,
  SubscriptionVipOfferSection,
} from "./components";
import styles from "./components/subscription-screen.module.css";
import {
  findSelectedSubscriptionPlan,
  canChooseSubscriptionPayChannel,
  getFirstRechargeOfferView,
  getDefaultSubscriptionPlanId,
  resolveSubscriptionPayChannel,
  toCoinsOfferPlanViews,
  toVipOfferPlanViews,
  type SubscriptionType,
} from "./subscription-screen.helpers";
import { useSubscriptionPaymentFlow } from "./use-subscription-payment-flow";

export type { SubscriptionType } from "./subscription-screen.helpers";

export interface SubscriptionScreenProps {
  subscriptionType?: SubscriptionType;
  shouldResumePendingOrder?: boolean;
  returnTo?: "chat" | null;
  initialPayChannel?: PayChannel | null;
}

export function SubscriptionScreen({
  subscriptionType = "vip",
  shouldResumePendingOrder = false,
  returnTo = null,
  initialPayChannel = null,
}: SubscriptionScreenProps) {
  const userState = useUserState();
  const countryCode = userState.currentUser?.countryCode;
  const canChoosePaymentMethod =
    canChooseSubscriptionPayChannel(countryCode);
  const resolvedInitialPayChannel = resolveSubscriptionPayChannel({
    countryCode,
    requestedPayChannel: initialPayChannel,
  });
  const phDefaultPayChannelAppliedRef = useRef(false);
  const {
    payment,
    paymentDispatch,
    showPaymentSuccessDialog,
    handleBackClick,
    handlePaymentSuccessClose,
  } = useSubscriptionPaymentFlow({
    subscriptionType,
    shouldResumePendingOrder,
    returnTo,
    initialPayChannel: resolvedInitialPayChannel,
  });
  const canSubscribeVip = subscriptionType === "vip";

  const vipOfferPlans = useMemo(
    () => toVipOfferPlanViews(payment.plans),
    [payment.plans],
  );
  const directCoinsPlans = useMemo(
    () => toCoinsOfferPlanViews(payment.plans),
    [payment.plans],
  );
  const firstRechargeOffer = useMemo(
    () =>
      getFirstRechargeOfferView({
        isFirstRecharge: payment.isFirstRecharge,
        vipPlans: vipOfferPlans,
        coinPlans: directCoinsPlans,
      }),
    [directCoinsPlans, payment.isFirstRecharge, vipOfferPlans],
  );

  const selectedPlan = findSelectedSubscriptionPlan({
    canSubscribeVip,
    selectedPlanId: payment.selectedPlanId,
    vipPlans: vipOfferPlans,
    coinPlans: directCoinsPlans,
  });
  const isPaymentBusy =
    payment.isCreatingOrder ||
    payment.isPollingOrder;
  const canActivate =
    selectedPlan !== null && payment.agreed && !isPaymentBusy;

  useEffect(() => {
    if (isPaymentBusy) return;

    if (!canChoosePaymentMethod) {
      if (payment.payChannel === "stripe") return;
      paymentDispatch({
        type: "PaymentPayChannelChanged",
        payChannel: "stripe",
      });
      return;
    }

    if (initialPayChannel !== null) return;
    if (phDefaultPayChannelAppliedRef.current) return;
    phDefaultPayChannelAppliedRef.current = true;

    if (payment.payChannel === resolvedInitialPayChannel) return;
    paymentDispatch({
      type: "PaymentPayChannelChanged",
      payChannel: resolvedInitialPayChannel,
    });
  }, [
    canChoosePaymentMethod,
    initialPayChannel,
    isPaymentBusy,
    payment.payChannel,
    paymentDispatch,
    resolvedInitialPayChannel,
  ]);

  useEffect(() => {
    const defaultPlanId = getDefaultSubscriptionPlanId({
      canSubscribeVip,
      selectedPlanId: payment.selectedPlanId,
      status: payment.status,
      isLoadingPlans: payment.isLoadingPlans,
      selectedPlan,
      vipPlans: vipOfferPlans,
      coinPlans: directCoinsPlans,
    });
    if (!defaultPlanId) return;

    paymentDispatch({
      type: "PaymentPlanSelected",
      planId: defaultPlanId,
    });
  }, [
    canSubscribeVip,
    directCoinsPlans,
    payment.isLoadingPlans,
    paymentDispatch,
    payment.selectedPlanId,
    payment.status,
    selectedPlan,
    vipOfferPlans,
  ]);

  return (
    <MobileShell>
      <div className={styles.shell}>
        <header className={styles.header}>
          <BackButton
            className={styles.backSlot}
            onClick={handleBackClick}
            variant="soft"
          />
        </header>

        {firstRechargeOffer ? (
          <section
            className={styles.firstRechargeBanner}
            aria-label="First recharge offer"
          >
            <span className={styles.firstRechargeBadge}>
              {firstRechargeOffer.badgeText}
            </span>
            <div className={styles.firstRechargeCopy}>
              <h2 className={styles.firstRechargeTitle}>
                {firstRechargeOffer.title}
              </h2>
              <p className={styles.firstRechargeSubtitle}>
                {firstRechargeOffer.subtitle}
              </p>
            </div>
          </section>
        ) : null}

        <div className={styles.offerStack}>
          {canSubscribeVip ? (
            <SubscriptionVipOfferSection
              plans={vipOfferPlans}
              selectedPlanId={payment.selectedPlanId || selectedPlan?.id || null}
              onSelectPlan={(planId) =>
                paymentDispatch({
                  type: "PaymentPlanSelected",
                  planId,
                })
              }
            />
          ) : null}
          <SubscriptionCoinsOfferSection
            plans={directCoinsPlans}
            selectedPlanId={payment.selectedPlanId || selectedPlan?.id || null}
            onSelectPlan={(planId) =>
              paymentDispatch({
                type: "PaymentPlanSelected",
                planId,
              })
            }
          />
        </div>

        {canChoosePaymentMethod ? (
          <section className={styles.paymentMethodSlot}>
            <SubscriptionPaymentMethod
              value={payment.payChannel}
              defaultChannel={resolvedInitialPayChannel}
              disabled={isPaymentBusy}
              caption="GCash by default in the Philippines"
              onChange={(payChannel) => {
                paymentDispatch({
                  type: "PaymentPayChannelChanged",
                  payChannel,
                });
              }}
            />
          </section>
        ) : null}

        <div className={styles.ctaSlot}>
          <SubscriptionCheckoutButton
            disabled={!canActivate}
            subscriptionType={subscriptionType}
            returnTo={returnTo}
          />
        </div>

        <div className={styles.agreementSlot}>
          <Checkbox
            checked={payment.agreed}
            onChange={(agreed) =>
              paymentDispatch({
                type: "PaymentAgreementChanged",
                agreed,
              })
            }
            label={
              <span className={styles.agreementLabel}>
                I agree to the{" "}
                <a
                  href={AppConstants.membershipAgreementUrl}
                  target="_blank"
                  rel="noreferrer"
                  className={styles.agreementLink}
                >
                  VIP Membership Benefits Agreement
                </a>{" "}
                and{" "}
                <a
                  href={AppConstants.autoRenewalAgreementUrl}
                  target="_blank"
                  rel="noreferrer"
                  className={styles.agreementLink}
                >
                  Automatic renewal Agreement
                </a>
              </span>
            }
          />
        </div>

        <SubscriptionPaymentSuccessDialog
          open={showPaymentSuccessDialog}
          subscriptionType={subscriptionType}
          onClose={handlePaymentSuccessClose}
        />
      </div>
    </MobileShell>
  );
}