@spacemade/ui 0.0.1

package/src/components/pricing/block/CompletePurchase.tsx

@@ -0,0 +1,546 @@
+'use client'
+
+import Link from 'next/link'
+import { ProductPlan, ProductPlanPricingModel } from '@store/model'
+import { useGetUserPaymentMethodQuery } from '@store/slice/api/userApiSlice'
+import { useCheckoutContext } from '@context/CheckoutContext'
+import { useUserAuthContext } from '@context/UserAuthContext'
+import Button from '@components/common/button/Button'
+import {
+  useGetSubscriptionQuery,
+  useGetUpdateSubscriptionPlanPreviewQuery,
+  useSubscribeMutation,
+  useUpdateSubscriptionPlanMutation,
+} from '@store/slice/api/stripeApiSlice'
+import { useGetOneProductQuery } from '@store/slice/api/productsApiSlice'
+import { useRouter } from 'next/router'
+import { toast } from 'react-toastify'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { useState, useMemo } from 'react'
+import Spinner from '@components/common/loading/Spinner'
+import { currencyPipe } from '@helpers/string'
+import { centsToDollars } from '@helpers/data-transform'
+import { CouponCodeForm } from '@components/pricing/form/CouponCodeForm'
+import { useTrackingEvents } from '@hooks'
+
+// 🔹 Extended props to support bundles but keep backwards compatible
+type CompletePurchaseProps = {
+  plan: ProductPlan
+  isBundle?: boolean
+  bundlePlans?: ProductPlan[]
+  selectedPlanSlugs?: string[]
+  product?: any
+}
+
+export const CompletePurchase = ({
+  plan,
+  isBundle,
+  bundlePlans,
+  selectedPlanSlugs,
+  product,
+}: CompletePurchaseProps) => {
+  const [isSubmitted, setIsSubmitted] = useState(false)
+  const router = useRouter()
+  const [subscribe, { isLoading: isLoadingSubscribe }] = useSubscribeMutation()
+  const [updateSubscriptionPlan, { isLoading: isLoadingSubscriptionChange }] =
+    useUpdateSubscriptionPlanMutation()
+
+  const { user } = useUserAuthContext()
+  const { identifyUserForCustomerIO, trackEvent } = useTrackingEvents()
+  const { isBillingCompleted, couponCode, appliedCoupon } = useCheckoutContext()
+
+  const toNumber = (v: unknown): number | null => {
+    if (typeof v === 'number') return Number.isFinite(v) ? v : null
+    if (typeof v === 'string') {
+      const n = Number(v.replace(/[$,]/g, ''))
+      return Number.isFinite(n) ? n : null
+    }
+    if (typeof v === 'bigint') return Number(v)
+    if (v && typeof (v as any).toNumber === 'function') return (v as any).toNumber()
+    if (v && typeof (v as any).toString === 'function') {
+      const n = Number((v as any).toString())
+      return Number.isFinite(n) ? n : null
+    }
+    return null
+  }
+
+  const norm = (v: any) => (v == null ? '' : String(v).trim().toLowerCase())
+
+  // 🔄 Hydrate product for this plan (plan only has productId)
+  const productId = plan.productId
+  const {
+    data: hydratedProduct,
+    isFetching: isFetchingProduct,
+  } = useGetOneProductQuery({ id: String(productId) }, { skip: !productId })
+
+  // 🔒 Only treat as "plan" swap if the hydrated product is a plan
+  const isPlanProduct =
+    ((hydratedProduct?.type ?? '') as string).toLowerCase() === 'plan'
+
+  // ---- Get subscriptions (array) without auto-refetch thrash during submit
+  const { data: subscriptionData, isFetching: isFetchingSubscription } =
+    useGetSubscriptionQuery(undefined, {
+      skip: isSubmitted,
+      refetchOnFocus: false,
+      refetchOnReconnect: false,
+      pollingInterval: 0,
+    })
+
+  const subscriptions = useMemo(() => {
+    const d: any = subscriptionData
+    if (Array.isArray(d?.subscriptions)) return d.subscriptions
+    if (d?.subscription) return [d.subscription]
+    return []
+  }, [subscriptionData])
+
+  // (A) Same-slug already subscribed? (only meaningful for plan products)
+  const subscribeSlug = useMemo(
+    () => String(product?.slug || (plan as any)?.product?.slug || plan?.slug || '').trim(),
+    [product?.slug, plan?.slug]
+  )
+  const planSlugNorm = useMemo(() => norm(subscribeSlug), [subscribeSlug])
+  const isSubscribedToSameSlug = useMemo(() => {
+    if (!isPlanProduct || !planSlugNorm) return false
+    return subscriptions.some(
+      (s: any) =>
+        Array.isArray(s?.productPlans) &&
+        s.productPlans.some(
+          (pp: any) =>
+            norm(pp?.slug) === planSlugNorm && norm(pp?.product?.type) === 'plan'
+        )
+    )
+  }, [subscriptions, planSlugNorm, isPlanProduct])
+
+  // (B) Any active plan-type subscription (ignore product match to catch upgrades/downgrades)
+  const ACTIVE = new Set(['active', 'trialing'])
+  const hasAnyPlanTypeActive = useMemo(() => {
+    if (!isPlanProduct) return false
+    return subscriptions.some((s: any) => {
+      if (!ACTIVE.has(String(s?.status))) return false
+      const plans = Array.isArray(s?.productPlans) ? s.productPlans : []
+      return plans.some((pp: any) => norm(pp?.product?.type) === 'plan')
+    })
+  }, [subscriptions, isPlanProduct])
+
+  // 🟦 Identify the active "plan-type" subscription and its plan meta
+  const activePlanSub: any | undefined = useMemo(
+    () =>
+      subscriptions.find((s: any) => {
+        if (!ACTIVE.has(String(s?.status))) return false
+        const plans = Array.isArray(s?.productPlans) ? s.productPlans : []
+        return plans.some((pp: any) => norm(pp?.product?.type) === 'plan')
+      }),
+    [subscriptions]
+  )
+
+  const previousPlanPP: any | undefined = useMemo(() => {
+    const plans = Array.isArray(activePlanSub?.productPlans)
+      ? activePlanSub.productPlans
+      : []
+    return plans.find((pp: any) => norm(pp?.product?.type) === 'plan')
+  }, [activePlanSub])
+
+  // 🪝 Stripe item id (from backend: subscription.subscription_item_id)
+  const activePlanSubItemId: string | null = useMemo(
+    () =>
+      (activePlanSub as any)?.subscriptionItemId ??
+      (activePlanSub as any)?.subscription_item_id ??
+      null,
+    [activePlanSub]
+  )
+
+  // ✅ Swap only if the selected product is a PLAN and either same slug or any active plan exists
+  const shouldSwap = isPlanProduct && (isSubscribedToSameSlug || hasAnyPlanTypeActive)
+
+  // —— PRICE COMPARISON for label ——
+  const fmtUSD = (cents?: number | null) =>
+    typeof cents === 'number' && Number.isFinite(cents)
+      ? currencyPipe(centsToDollars(cents))
+      : '—'
+
+  const getPlanBasePriceCents = (p?: any): number | null => {
+    if (!p) return null
+    if (p.pricingModel === ProductPlanPricingModel.Fixed) {
+      const amt = toNumber(p.amount)
+      return typeof amt === 'number' ? Math.round(amt) : null
+    }
+    const tiers = Array.isArray(p.usageTiers)
+      ? [...p.usageTiers].sort((a, b) => (a.rank ?? 0) - (b.rank ?? 0))
+      : []
+    const flat = tiers.find(
+      (t) => toNumber(t.flatFee) && Number(t.flatFee) > 0
+    )
+    if (flat?.flatFee != null) {
+      const feeNum = toNumber(flat.flatFee) ?? 0
+      return feeNum >= 100 ? Math.round(feeNum) : Math.round(feeNum * 100)
+    }
+    const fallback = toNumber(p.amount)
+    return typeof fallback === 'number' ? Math.round(fallback) : null
+  }
+
+  const previousAmountCents: number | null = useMemo(() => {
+    const subAmt = toNumber(activePlanSub?.amount)
+    if (typeof subAmt === 'number') return Math.round(subAmt)
+    const ppAmt = toNumber(previousPlanPP?.amount)
+    return typeof ppAmt === 'number' ? Math.round(ppAmt) : null
+  }, [activePlanSub, previousPlanPP])
+
+  const previousPlanName = previousPlanPP?.name ?? 'Current plan'
+  const newAmountCents = useMemo(
+    () => getPlanBasePriceCents(plan),
+    [plan]
+  )
+
+  // —— PREVIEW: now sends explicit IDs so server preview == commit ——
+  const {
+    data: subscriptionPreview,
+    isFetching: isFetchingSubscriptionPreview,
+  } = useGetUpdateSubscriptionPlanPreviewQuery(
+    {
+      plan: subscribeSlug as any,
+      nextPlanId: plan.id, // ⭐ new deterministic id
+      currentPlanId: previousPlanPP?.id, // optional but good
+      currentSubscriptionItemId: activePlanSubItemId || undefined, // ⭐ critical
+      couponCode: couponCode || undefined,
+    },
+    {
+      skip: isSubmitted || !shouldSwap,
+      refetchOnFocus: false,
+      refetchOnReconnect: false,
+      pollingInterval: 0,
+    }
+  )
+
+  const { data: userPaymentMethod } = useGetUserPaymentMethodQuery(
+    { userId: user?.id || '' },
+    { skip: !user?.id || isSubmitted }
+  )
+
+  const isUpgradeByPrice: boolean | null = useMemo(() => {
+    if (previousAmountCents == null || newAmountCents == null) return null
+    return newAmountCents > previousAmountCents
+  }, [previousAmountCents, newAmountCents])
+
+  const isUpgrade = useMemo(() => {
+    if (isUpgradeByPrice != null) return isUpgradeByPrice
+    const amountDue = subscriptionPreview?.amountDue || 0
+    return amountDue > 0
+  }, [isUpgradeByPrice, subscriptionPreview])
+
+  const billingSuffix = plan.billingPeriod ? `/${plan.billingPeriod}` : '/month'
+
+  // 🔹 Generalized price display helper (works for any plan)
+  const getDisplayPriceForPlan = (p: ProductPlan): string => {
+    const billing = (p as any).billingPeriod
+      ? `/${(p as any).billingPeriod}`
+      : billingSuffix
+
+    if (p.pricingModel === ProductPlanPricingModel.Fixed) {
+      const amt = toNumber((p as any).amount)
+      const basePrice = amt && amt > 0 ? amt.toFixed(2) : null
+      return basePrice ? `$${basePrice}${billing}` : 'Free'
+    }
+
+    const tiers = Array.isArray((p as any).usageTiers)
+      ? [...(p as any).usageTiers].sort((a, b) => (a.rank ?? 0) - (b.rank ?? 0))
+      : []
+
+    const flatFeeTier = tiers.find(
+      (t) => toNumber(t.flatFee) && Number(t.flatFee) > 0
+    )
+
+    let flatFeeValue = 0
+    if (flatFeeTier?.flatFee != null) {
+      const feeNum = toNumber(flatFeeTier.flatFee) ?? 0
+      flatFeeValue = feeNum >= 100 ? feeNum / 100 : feeNum
+    }
+
+    if (!flatFeeValue) {
+      const amt = toNumber((p as any).amount) ?? 0
+      flatFeeValue = amt
+    }
+
+    const basePrice = flatFeeValue > 0 ? flatFeeValue.toFixed(2) : null
+    return basePrice ? `$${basePrice}${billing}` : 'Free'
+  }
+
+  // Backwards-compatible wrapper for existing usage
+  const getDisplayPrice = () => getDisplayPriceForPlan(plan)
+
+  // 🔹 Bundle-aware summary: which plans should we show in the card?
+  const selectedPlansForSummary: ProductPlan[] = useMemo(() => {
+    if (!isBundle || !Array.isArray(bundlePlans) || bundlePlans.length === 0) {
+      return [plan]
+    }
+    const slugSet = new Set(
+      (selectedPlanSlugs || []).map((s) => String(s).toLowerCase())
+    )
+    if (slugSet.size === 0) {
+      return bundlePlans
+    }
+    return bundlePlans.filter((p: any) =>
+      slugSet.has(String(p.slug).toLowerCase())
+    )
+  }, [isBundle, bundlePlans, selectedPlanSlugs, plan])
+
+    const selectedPlanIds = useMemo(
+    () => selectedPlansForSummary.map((p) => p.id),
+    [selectedPlansForSummary]
+  )
+
+  const selectedPlanSlugsForSubscribe = useMemo(
+    () => selectedPlansForSummary.map((p: any) => String(p.slug)),
+    [selectedPlansForSummary]
+  )
+
+  const itemCount = selectedPlansForSummary.length
+  const isBundleDisplay =
+    isBundle && itemCount > 1 && !shouldSwap // never override swap preview
+
+  const bundleSubtotalCents = useMemo(
+    () =>
+      selectedPlansForSummary.reduce((sum, p) => {
+        const cents = getPlanBasePriceCents(p as any)
+        return sum + (cents ?? 0)
+      }, 0),
+    [selectedPlansForSummary]
+  )
+
+  const bundleSubtotalLabel = useMemo(() => {
+    if (!isBundleDisplay || bundleSubtotalCents <= 0) return getDisplayPrice()
+    return `${fmtUSD(bundleSubtotalCents)}${billingSuffix}`
+  }, [isBundleDisplay, bundleSubtotalCents, billingSuffix])
+
+  const { data: _userPaymentMethod } = { data: userPaymentMethod } // keep name below
+
+  const onSubscribe = async () => {
+    try {
+      if (!subscribeSlug) {
+        toast.error('Plan is missing. Please select a plan and try again.')
+        return
+      }
+
+      setIsSubmitted(true)
+
+      if (shouldSwap) {
+        await updateSubscriptionPlan({
+          plan: subscribeSlug as any,
+          couponCode: couponCode || undefined,
+          nextPlanId: plan.id,
+          currentPlanId: previousPlanPP?.id,
+          currentSubscriptionItemId: activePlanSubItemId || undefined,
+        }).unwrap()
+      } else {
+        await subscribe({
+          plan: subscribeSlug as any,
+          planSlugs: selectedPlanSlugsForSubscribe, // all sub-plan slugs
+          couponCode: couponCode || undefined,
+        }).unwrap()
+      }
+
+      if (user) {
+        identifyUserForCustomerIO(user, plan.slug)
+      }
+      trackEvent('subscription_updated', { plan_name: plan.slug })
+
+      toast.success('Your order has been successfully placed!')
+      router.replace('/')
+    } catch (error) {
+      toast.error(DEFAULT_ERROR_MESSAGE)
+      setIsSubmitted(false)
+    }
+  }
+
+  return (
+    <div className="w-100 bg-background rounded-md p-3 p-xl-4">
+      <div className="d-flex align-items-center justify-content-between">
+        <h2 className="h4 fw-bold mb-3">Order Summary</h2>
+        <Link
+          href="/pricing"
+          className="text-primary text-decoration-underline"
+        >
+          Edit Order
+        </Link>
+      </div>
+
+      {isFetchingProduct ||
+      isFetchingSubscription ||
+      isFetchingSubscriptionPreview ? (
+        <div className="w-100 d-flex justify-content-center py-4">
+          <Spinner color="primary" />
+        </div>
+      ) : (
+        <>
+          {/* Only show swap/credit banner for plan swaps */}
+          {shouldSwap && subscriptionPreview && (
+            <div className="alert alert-warning p-2" role="alert">
+              {(() => {
+                const amountDue = subscriptionPreview.amountDue || 0
+                const credit = subscriptionPreview.credit || 0
+                const label = isUpgrade ? 'upgrade' : 'downgrade'
+                const prevAmt = previousAmountCents
+                const nextAmt = newAmountCents
+
+                const fmt = (c?: number | null) =>
+                  typeof c === 'number' && Number.isFinite(c)
+                    ? currencyPipe(centsToDollars(c))
+                    : '—'
+
+                return (
+                  <>
+                    <p className="small mb-2">
+                      You are moving from <strong>{previousPlanName}</strong>{' '}
+                      {prevAmt != null ? `(${fmt(prevAmt)}/mo)` : ''} to{' '}
+                      <strong>{plan.name}</strong>{' '}
+                      {nextAmt != null ? `(${fmt(nextAmt)}/mo)` : ''}. This is
+                      classified as an <strong>{label}</strong>.
+                    </p>
+
+                    {isUpgrade ? (
+                      <>
+                        <p className="small mb-2">
+                          We’ll apply a credit of{' '}
+                          <span className="fw-bold">{fmt(credit)}</span> from
+                          your existing plan toward the cost of your new plan.
+                          Any remaining balance will be charged once you confirm
+                          the change.
+                        </p>
+                        <p className="mb-0 small">
+                          Your card will be charged{' '}
+                          <span className="fw-bold">{fmt(amountDue)}</span> for
+                          the {label}.
+                        </p>
+                      </>
+                    ) : (
+                      <>
+                        <p className="small mb-0">
+                          A credit of{' '}
+                          <span className="fw-bold">{fmt(credit)}</span> will be
+                          applied for the difference between your previous and
+                          new plans. You won’t be charged now.
+                        </p>
+                      </>
+                    )}
+                  </>
+                )
+              })()}
+            </div>
+          )}
+
+          <div className="mb-3">
+            <CouponCodeForm plans={selectedPlansForSummary} variant="inline" />
+          </div>
+
+          {/* 🔹 Items count (bundle-aware) */}
+          <div className="d-flex justify-content-between">
+            <span className="fw-bold d-block">
+              {itemCount} {itemCount === 1 ? 'Item' : 'Items'}
+            </span>
+          </div>
+
+          {/* 🔹 Line items (bundle-aware) */}
+          <div className="mt-3">
+            {selectedPlansForSummary.map((p) => (
+              <div
+                key={p.id}
+                className="d-flex align-items-center justify-content-between py-1"
+              >
+                <p className="mb-0">{p.name}</p>
+                <p className="mb-0">{getDisplayPriceForPlan(p)}</p>
+              </div>
+            ))}
+          </div>
+
+          <hr className="text-light-gray opacity-100" />
+
+          {/* 🔹 Subtotal (bundle-aware, but swap-preview wins if present) */}
+          <div className="d-flex align-items-center justify-content-between">
+            <p className="mb-0">Subtotal</p>
+            <p className="mb-0">
+              {shouldSwap && subscriptionPreview
+                ? currencyPipe(centsToDollars(subscriptionPreview.amountDue))
+                : appliedCoupon
+                ? currencyPipe(centsToDollars(appliedCoupon.subtotal))
+                : isBundleDisplay
+                ? bundleSubtotalLabel
+                : getDisplayPrice()}
+            </p>
+          </div>
+
+          {appliedCoupon && !shouldSwap ? (
+            <>
+              <hr className="text-light-gray opacity-100" />
+              <div className="d-flex align-items-center justify-content-between text-success">
+                <p className="mb-0">Coupon ({appliedCoupon.code})</p>
+                <p className="mb-0">-{currencyPipe(centsToDollars(appliedCoupon.discountAmount))}</p>
+              </div>
+            </>
+          ) : null}
+
+          <hr className="text-light-gray opacity-100" />
+
+          {/* 🔹 Total (same logic as subtotal) */}
+          <div className="d-flex align-items-center justify-content-between">
+            <h2 className="h4 fw-bold mb-0">
+              Total <small className="fw-light fs-dec-85">(USD)</small>
+            </h2>
+            <h2 className="h4 mb-0">
+              {shouldSwap && subscriptionPreview
+                ? currencyPipe(centsToDollars(subscriptionPreview.amountDue))
+                : appliedCoupon
+                ? currencyPipe(centsToDollars(appliedCoupon.total))
+                : isBundleDisplay
+                ? bundleSubtotalLabel
+                : getDisplayPrice()}
+            </h2>
+          </div>
+
+          <Button
+            type="button"
+            className="w-100 no-min-size h2 py-2 mt-4 text-white"
+            color="success"
+            disabled={
+              !isBillingCompleted ||
+              !userPaymentMethod ||
+              isLoadingSubscribe ||
+              isLoadingSubscriptionChange ||
+              isSubmitted ||
+              isFetchingProduct
+            }
+            isLoading={isLoadingSubscribe || isLoadingSubscriptionChange}
+            onClick={onSubscribe}
+          >
+            {shouldSwap ? 'Complete Upgrade' : 'Complete Purchase'}
+          </Button>
+
+          <p className="mt-4 mb-0 small">
+            By clicking &quot;Complete {shouldSwap ? 'Upgrade' : 'Purchase'}
+            &quot;, you agree to the{' '}
+            <Link
+              href="/terms"
+              className="text-dark text-decoration-underline fw-bold"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Terms &amp; Conditions
+            </Link>{' '}
+            and{' '}
+            <Link
+              href="/privacy"
+              className="text-dark text-decoration-underline fw-bold"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Privacy Policy
+            </Link>{' '}
+            and consent to enroll your product(s) in our automatic renewal
+            service, which can be cancelled at any time. Your payment is being
+            processed in the United States.
+          </p>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default CompletePurchase

package/src/components/pricing/block/PlanPicker.tsx

@@ -0,0 +1,76 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { ProductPlan, ProductPlanType } from '@store/model'
+import { useDisclosure } from '@chakra-ui/react'
+import { currencyPipe } from '@helpers/string'
+
+export const PlanPicker = ({
+	plans,
+	onChange,
+} : {
+	plans: ProductPlan[]
+	onChange: (plan: ProductPlan) => void
+}) => {
+	const pickerRef = useRef<HTMLDivElement | null>(null);
+
+	const {
+		isOpen,
+		onClose,
+		onToggle,
+	} = useDisclosure()
+
+	const [plan, setPlan] = useState(plans[0])
+
+	useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {
+        onClose()
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('click', handleClickOutside);
+    } else {
+      document.removeEventListener('click', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, onClose]);
+
+	return (
+		<div ref={pickerRef} className='w-xs-300p position-relative w-100'>
+			<div onClick={onToggle} className='border p-2 d-flex justify-content-between align-items-center pointer'>
+				<p className='mb-0'>{plan.name}</p>
+				<div>
+					<span className='fw-bold lead'>{currencyPipe(plan.amount)}</span>
+					<span>{plan.type === ProductPlanType.Recurring ? `/${plan.billingPeriod}` : ''}</span>
+					<span className={`bi bi-chevron-${isOpen ? 'up' : 'down' } opacity-7 ms-3`}></span>
+				</div>
+			</div>
+			{isOpen && (
+				<div className='position-absolute bottom-n3r left-0 right-0 bg-white shadow-xs fadeIn rounded overflow-hidden'>
+					{plans.filter(p => p.id !== plan.id).map((item, key) => (
+						<div onClick={() => {
+								setPlan(item)
+								onChange(item)
+								onClose()
+							}}
+							key={key}
+							role='button'
+							className='d-flex align-items-center justify-content-between gap-2 border-bottom p-2 w-100 bg-hover-background pointer'
+						>
+							<div className='d-flex align-items-center gap-2'>
+								<p className='mb-0'>{item.name}</p>
+								<div>
+									<span className='fw-bold lead'>{currencyPipe(item.amount)}</span>
+									<span>{item.type === ProductPlanType.Recurring ? `/${item.billingPeriod}` : ''}</span>
+								</div>
+							</div>
+						</div>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}