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

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

import { BackButton } from "@/app/_components";
import { Checkbox, MobileShell } from "@/app/_components/core";
import { PaymentMethodSelector } from "@/app/_components/payment/payment-method-selector";
import { usePaymentMethodSelection } from "@/app/_hooks/use-payment-method-selection";
import { usePaymentPlanAnalytics } from "@/app/_hooks/use-payment-plan-analytics";
import { AppConstants } from "@/core/app_constants";
import type { PayChannel } from "@/data/schemas/payment";
import type { SubscriptionReturnTo } from "@/lib/navigation/subscription_exit";
import { DEFAULT_CHARACTER_SLUG } from "@/data/constants/character";
import {
  behaviorAnalytics,
  getDefaultPaymentAnalyticsContext,
  type PaymentAnalyticsContext,
} from "@/lib/analytics";
import { getPaymentMethodConfig } from "@/lib/payment/payment_method";
import { useUserState } from "@/stores/user/user-context";

import {
  SubscriptionCheckoutButton,
  SubscriptionCoinsOfferSection,
  SubscriptionPaymentSuccessDialog,
  SubscriptionVipOfferSection,
} from "./components";
import styles from "./components/subscription-screen.module.css";
import {
  findSelectedSubscriptionPlan,
  getFirstRechargeOfferView,
  getDefaultSubscriptionPlanId,
  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?: SubscriptionReturnTo;
  initialPayChannel?: PayChannel | null;
  analyticsContext?: PaymentAnalyticsContext;
  characterSlug?: string;
}

export function SubscriptionScreen({
  subscriptionType = "vip",
  shouldResumePendingOrder = false,
  returnTo = null,
  initialPayChannel = null,
  analyticsContext: providedAnalyticsContext,
  characterSlug = DEFAULT_CHARACTER_SLUG,
}: SubscriptionScreenProps) {
  const userState = useUserState();
  const countryCode = userState.currentUser?.countryCode;
  const paymentMethodConfig = getPaymentMethodConfig({
    countryCode,
    requestedPayChannel: initialPayChannel,
  });
  const {
    payment,
    paymentDispatch,
    showPaymentSuccessDialog,
    handleBackClick,
    handlePaymentSuccessClose,
  } = useSubscriptionPaymentFlow({
    subscriptionType,
    shouldResumePendingOrder,
    returnTo,
    characterSlug,
    initialPayChannel: paymentMethodConfig.initialPayChannel,
  });
  const canSubscribeVip = subscriptionType === "vip";
  const analyticsContext =
    providedAnalyticsContext ??
    getDefaultPaymentAnalyticsContext(subscriptionType);

  const vipOfferPlans = useMemo(
    () => toVipOfferPlanViews(payment.plans),
    [payment.plans],
  );
  const directCoinsPlans = useMemo(
    () => toCoinsOfferPlanViews(payment.plans),
    [payment.plans],
  );
  const displayedPlans = useMemo(() => {
    const displayedPlanIds = [
      ...(canSubscribeVip ? vipOfferPlans : []),
      ...directCoinsPlans,
    ].map((plan) => plan.id);
    return displayedPlanIds.flatMap((planId) => {
      const plan = payment.plans.find((item) => item.planId === planId);
      return plan ? [plan] : [];
    });
  }, [canSubscribeVip, directCoinsPlans, payment.plans, vipOfferPlans]);
  usePaymentPlanAnalytics(displayedPlans, analyticsContext);
  const firstRechargeOffer = useMemo(
    () =>
      getFirstRechargeOfferView({
        isFirstRecharge: payment.isFirstRecharge,
        subscriptionType,
        vipPlans: vipOfferPlans,
        coinPlans: directCoinsPlans,
      }),
    [
      directCoinsPlans,
      payment.isFirstRecharge,
      subscriptionType,
      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;

  const handleSelectPlan = (planId: string) => {
    const plan = payment.plans.find((item) => item.planId === planId);
    if (plan) behaviorAnalytics.planClick(plan, analyticsContext);
    paymentDispatch({ type: "PaymentPlanSelected", planId });
  };

  const handlePaymentMethodChange = (payChannel: PayChannel) => {
    paymentDispatch({
      type: "PaymentPayChannelChanged",
      payChannel,
    });
  };

  usePaymentMethodSelection({
    config: paymentMethodConfig,
    currentPayChannel: payment.payChannel,
    isPaymentBusy,
    requestedPayChannel: initialPayChannel,
    onChange: handlePaymentMethodChange,
  });

  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"
            analyticsKey="subscription.back"
          />
        </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>
              {firstRechargeOffer.renewalNotice ? (
                <p className={styles.firstRechargeRenewalNotice}>
                  {firstRechargeOffer.renewalNotice}
                </p>
              ) : null}
            </div>
          </section>
        ) : null}

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

        {paymentMethodConfig.canChoosePaymentMethod ? (
          <section className={styles.paymentMethodSlot}>
            <PaymentMethodSelector
              value={payment.payChannel}
              defaultChannel={paymentMethodConfig.initialPayChannel}
              disabled={isPaymentBusy}
              caption="GCash by default in the Philippines"
              analyticsKey="subscription.payment_method"
              onChange={handlePaymentMethodChange}
            />
          </section>
        ) : null}

        <div className={styles.ctaSlot}>
          <SubscriptionCheckoutButton
            disabled={!canActivate}
            subscriptionType={subscriptionType}
            returnTo={returnTo}
            characterSlug={characterSlug}
          />
        </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>
  );
}