@spacemade/ui 0.0.1

package/src/pages/cart/[productPlanSlug].tsx

@@ -0,0 +1,631 @@
+// pages/cart/[productPlanSlug].tsx
+/* eslint-disable @next/next/no-img-element */
+import type { NextPage, GetServerSideProps } from 'next'
+import Link from 'next/link'
+import WithAuth from '@components/hoc/WithAuth'
+import { PageProps } from '@helpers/types/page-props'
+import { formatDateWithOrdinal } from '@helpers/date'
+import { SiteLogoIcon } from '@helpers/images'
+import {
+  Product,
+  ProductPlan,
+  ProductFeatureEntitlement,
+  ProductPlanUsageTier,
+} from '@store/model'
+import { wrapper } from '@store/store'
+
+import { getOneProductPlan, productPlansApiSlice } from '@store/slice/api/productPlansApiSlice'
+import { getOneProduct, productsApiSlice } from '@store/slice/api/productsApiSlice'
+
+type PlanWithProduct = ProductPlan & {
+  product?: Product | null
+  usageTiers?: ProductPlanUsageTier[] | null
+}
+
+type CartProps = PageProps & {
+  plan: PlanWithProduct | null
+  product: Product | null
+  period: string
+  // when coming from a model bundle (allplans=true), this will contain all plan slugs
+  selectedPlanSlugs?: string[]
+}
+
+const fmtCurrency = (n: number, currency = 'USD') =>
+  new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(n)
+
+const fmtNum = (n?: number | null) =>
+  typeof n === 'number' ? n.toLocaleString() : undefined
+
+const prettyLabel = (slug: string): string => {
+  const s = slug?.toLowerCase?.() ?? ''
+  if (s === 'request' || s === 'requests') return 'request'
+  if (s === 'token' || s === 'tokens') return 'token'
+  return s.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+const pluralize = (word: string, n: number | null) =>
+  !n || n === 1 ? word : `${word}${word.endsWith('s') ? '' : 's'}`
+
+const fmtTierRange = (first: number, last: number | null) =>
+  last == null ? `${first}+` : `${first}–${last}`
+
+const Cart: NextPage<CartProps> = ({ plan, product, period, selectedPlanSlugs }) => {
+  if (!plan || !product) {
+    return (
+      <div className="container py-8">
+        <h1 className="fw-bold mb-3">Checkout</h1>
+        <div className="bg-white rounded-md p-4 shadow-xs">
+          <p className="mb-3">Plan not found.</p>
+          <Link href="/pricing" className="btn btn-secondary">
+            Back to Pricing
+          </Link>
+        </div>
+      </div>
+    )
+  }
+
+  const productIcon =
+    product?.productIconMedia?.media?.sourceUrl ||
+    (product as any)?.imageUrl ||
+    (product as any)?.imageURL ||
+    SiteLogoIcon
+
+  const logoUrl = productIcon || SiteLogoIcon
+
+  // Product-level feature entitlements
+  const featureEntitlements: ProductFeatureEntitlement[] =
+    (product?.featureEntitlements as any) ??
+    (product as any)?.entitlements ??
+    []
+
+  // Plans on the product (for bundle display)
+  const productPlans: PlanWithProduct[] =
+    (((product as any)?.productPlans as PlanWithProduct[]) ??
+      ((product as any)?.plans as PlanWithProduct[]) ??
+      [])
+
+  const selectedSlugs =
+    selectedPlanSlugs && selectedPlanSlugs.length > 0 ? selectedPlanSlugs : []
+
+  const selectedPlansForDisplay: PlanWithProduct[] =
+    selectedSlugs.length > 0
+      ? productPlans.filter((p: any) => selectedSlugs.includes(String(p.slug)))
+      : [plan]
+
+  const selectedPlanNames = selectedPlansForDisplay
+    .map((p: any) => p?.name)
+    .filter(Boolean)
+
+  const isBundle = selectedPlansForDisplay.length > 1
+
+  // Title: for bundles show product name/slug; for single plan show plan name
+  const displayTitle =
+    isBundle
+      ? (product?.name || (product as any)?.slug || 'Plan')
+      : (((plan as any).name ?? 'Plan').trim() || 'Plan')
+
+  // Helper: get base fee for a single plan (flat tier → amount → 0)
+  const getPlanBaseRaw = (p: any): number => {
+    const pTiers = Array.isArray(p.usageTiers)
+      ? [...p.usageTiers].sort((a, b) => a.rank - b.rank)
+      : []
+
+    const pFlatFeeTier = pTiers.find((t: any) => Number(t.flatFee) > 0)
+    if (pFlatFeeTier) {
+      return Number(pFlatFeeTier.flatFee) || 0
+    }
+
+    if (p.amount && Number(p.amount) > 0) {
+      return Number(p.amount) || 0
+    }
+
+    return 0
+  }
+
+  // Usage tiers (for the primary plan – used for usage display)
+  const tiers = Array.isArray(plan.usageTiers)
+    ? [...plan.usageTiers].sort((a, b) => a.rank - b.rank)
+    : []
+
+  const currency = (plan as any).currency || 'USD'
+
+  const primaryBaseRaw = getPlanBaseRaw(plan as any)
+  const bundleBaseRaw = isBundle
+    ? selectedPlansForDisplay.reduce(
+        (sum, p) => sum + getPlanBaseRaw(p as any),
+        0
+      )
+    : primaryBaseRaw
+
+  const basePrice =
+    bundleBaseRaw > 0 ? fmtCurrency(bundleBaseRaw, currency) : null
+
+  const usageTier = tiers.find((t) => Number(t.unitAmount) > 0)
+  const usageRate =
+    usageTier && Number(usageTier.unitAmount) > 0
+      ? fmtCurrency(Number(usageTier.unitAmount), currency)
+      : null
+
+  const displayPrice =
+    (plan as any).pricingModel === 'usage' && basePrice ? (
+      <div className="fw-bold">
+        {basePrice}
+        <small className="text-muted ms-1" style={{ fontSize: '0.85rem' }}>
+          per {(plan as any).billingPeriod}
+        </small>
+        {usageRate && (
+          <small className="text-muted ms-2" style={{ fontSize: '0.85rem' }}>
+            + usage
+          </small>
+        )}
+      </div>
+    ) : (
+      <div className="fw-bold">
+        {fmtCurrency(bundleBaseRaw || (plan as any).amount || 0, currency)}
+        <small className="text-muted ms-1" style={{ fontSize: '0.85rem' }}>
+          /{(plan as any).billingPeriod}
+        </small>
+      </div>
+    )
+
+  // Checkout URL:
+  // - Bundle: /checkout/<product-slug>?allplans=true
+  // - Single: /checkout/<plan-slug>
+  const checkoutHref = isBundle
+    ? `/checkout/${(product as any).slug}?allplans=true`
+    : `/checkout/${(plan as any).slug}`
+
+  return (
+    <div className="container">
+      <div className="mx-auto text-center pt-8">
+        <h1 className="fw-bold mb-0">Review Order</h1>
+      </div>
+
+      <style jsx>{`
+        :global(.plan-card) {
+          border: 1px solid #dee2e6;
+          border-radius: 0.75rem;
+          background-color: #fff;
+          transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
+            border-color 0.2s ease-in-out;
+          display: block;
+        }
+        .plan-card-inner {
+          border-radius: inherit;
+          overflow: hidden;
+        }
+        .logo-wrap {
+          width: 48px;
+          height: 48px;
+          min-width: 48px;
+          border-radius: 8px;
+          overflow: hidden;
+          background: #f8f9fa;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        .logo-wrap img {
+          max-width: 100%;
+          max-height: 100%;
+          object-fit: cover;
+        }
+      `}</style>
+
+      <div className="row gx-lg-6 mt-5">
+        {/* LEFT: Product + Plan details */}
+        <div className="col-lg-8">
+          <div
+            className="plan-card"
+            aria-label={`Selected plan ${displayTitle}`}
+            tabIndex={0}
+          >
+            <div className="plan-card-inner">
+              <div className="d-flex gap-3 p-3 p-xl-4">
+                <div className="logo-wrap">
+                  <img src={logoUrl} alt="Product logo" />
+                </div>
+
+                <div className="w-100">
+                  <div className="d-flex align-items-center justify-content-between gap-2">
+                    <div className="d-flex align-items-center gap-2">
+                      <h2 className="fw-bold mb-0">{displayTitle}</h2>
+                    </div>
+
+                    <div className="h5 mb-0 text-dark d-flex flex-column align-items-end">
+                      {displayPrice}
+                    </div>
+                  </div>
+
+                  {(plan as any).description && (
+                    <p className="mt-3 fw-bold small-md">
+                      {(plan as any).description}
+                    </p>
+                  )}
+
+                  {/* Bundle info: which plans are included (for allplans=true case) */}
+                  {selectedPlanNames.length > 1 && (
+                    <div className="mt-2 small text-muted">
+                      This subscription includes:&nbsp;
+                      {selectedPlanNames.join(', ')}
+                    </div>
+                  )}
+
+                  {featureEntitlements.length > 0 && (
+                    <div className="mt-3">
+                      <div className="small text-muted fw-bold mb-1">
+                        What’s included
+                      </div>
+                      <ul className="list-unstyled mb-0 d-flex flex-column gap-2">
+                        {featureEntitlements.map((e: any, i: number) => {
+                          const slug = e?.slug ?? e?.key ?? ''
+                          if (!slug) return null
+                          const label = prettyLabel(slug)
+                          const limit =
+                            e?.limit ??
+                            e?.includedUnits ??
+                            e?.included_units ??
+                            null
+                          const unitWord = pluralize(label, limit ?? 0)
+                          return (
+                            <li className="small-md" key={`${slug}-${i}`}>
+                              <span className="bi bi-check-circle me-2 text-primary"></span>
+                              {limit != null ? (
+                                <>
+                                  Up to {fmtNum(Number(limit))} {unitWord}
+                                </>
+                              ) : (
+                                <>Includes {unitWord}</>
+                              )}
+                            </li>
+                          )
+                        })}
+                      </ul>
+                    </div>
+                  )}
+
+                  {/* Usage pricing */}
+                  {!isBundle && tiers.length > 0 && (
+                    <div className="mt-3">
+                      <div className="small text-muted fw-bold mb-1">
+                        Usage pricing
+                      </div>
+                      <ul className="list-unstyled d-flex flex-column gap-1 mb-0">
+                        {tiers.map((t) => (
+                          <li
+                            className="small-md"
+                            key={`tier-${plan.id}-${t.rank}`}
+                          >
+                            <span className="bi bi-graph-up-arrow me-2 text-primary"></span>
+                            Tier {t.rank}:{' '}
+                            {fmtTierRange(
+                              Number(t.firstUnit ?? (t as any).first ?? 0),
+                              t.lastUnit ?? (t as any).last ?? null
+                            )}
+                            {t.unitAmount != null && (
+                              <>
+                                {' '}
+                                @ {fmtCurrency(Number(t.unitAmount), currency)}{' '}
+                                / unit
+                              </>
+                            )}
+                            {t.flatFee != null && Number(t.flatFee) > 0 && (
+                              <>
+                                {' '}
+                                + {fmtCurrency(Number(t.flatFee), currency)} flat
+                              </>
+                            )}
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
+
+                  {isBundle && (
+                    <div className="mt-3">
+                      <ul className="list-unstyled d-flex flex-column gap-2 mb-0">
+                        {selectedPlansForDisplay.map((bundlePlan: any) => {
+                          const planTiers = Array.isArray(bundlePlan.usageTiers)
+                            ? [...bundlePlan.usageTiers].sort(
+                                (a, b) => a.rank - b.rank
+                              )
+                            : []
+
+                          if (planTiers.length === 0) return null
+
+                          return (
+                            <li
+                              key={`bundle-plan-usage-${bundlePlan.id}`}
+                              className="small-md"
+                            >
+                              <div className="fw-bold small mb-1">
+                                {bundlePlan.name || 'Plan'}
+                              </div>
+                              <ul className="list-unstyled d-flex flex-column gap-1 mb-0">
+                                {planTiers.map((t: any) => (
+                                  <li
+                                    className="small-md"
+                                    key={`tier-${bundlePlan.id}-${t.rank}`}
+                                  >
+                                    <span className="bi bi-graph-up-arrow me-2 text-primary"></span>
+                                    Tier {t.rank}:{' '}
+                                    {fmtTierRange(
+                                      Number(
+                                        t.firstUnit ?? (t as any).first ?? 0
+                                      ),
+                                      t.lastUnit ??
+                                        (t as any).last ??
+                                        null
+                                    )}
+                                    {t.unitAmount != null && (
+                                      <>
+                                        {' '}
+                                        @{' '}
+                                        {fmtCurrency(
+                                          Number(t.unitAmount),
+                                          (bundlePlan as any).currency ||
+                                            currency
+                                        )}{' '}
+                                        / unit
+                                      </>
+                                    )}
+                                    {t.flatFee != null &&
+                                      Number(t.flatFee) > 0 && (
+                                        <>
+                                          {' '}
+                                          +{' '}
+                                          {fmtCurrency(
+                                            Number(t.flatFee),
+                                            (bundlePlan as any).currency ||
+                                              currency
+                                          )}{' '}
+                                          flat
+                                        </>
+                                      )}
+                                  </li>
+                                ))}
+                              </ul>
+                            </li>
+                          )
+                        })}
+                      </ul>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* RIGHT: Order Summary */}
+        <div className="col-lg-4 mt-4 mt-lg-0">
+          <div className="w-100 bg-background rounded-md p-3 p-xl-4">
+            <h2 className="h4 fw-bold mb-4">Order Summary</h2>
+
+            <div className="d-flex justify-content-between">
+              <div>
+                <span className="fw-bold d-block">{displayTitle}</span>
+                <span className="small d-block opacity-7">{period}</span>
+                {product?.name && (
+                  <span className="small d-block opacity-7">
+                    Product: {product.name}
+                  </span>
+                )}
+                {selectedPlanNames.length > 1 && (
+                  <span className="small d-block opacity-7">
+                    Includes plans: {selectedPlanNames.join(', ')}
+                  </span>
+                )}
+              </div>
+              <span>
+                {basePrice || fmtCurrency((plan as any).amount || 0, currency)}
+                /{(plan as any).billingPeriod}
+              </span>
+            </div>
+
+            <hr className="text-light-gray opacity-100 my-4" />
+
+            <div className="d-flex align-items-center justify-content-between">
+              <h2 className="h5 fw-bold">
+                Subtotal <small className="fw-light">(USD)</small>
+              </h2>
+              <h2 className="h5 fw-bold">
+                {basePrice || fmtCurrency((plan as any).amount || 0, currency)}
+                /{(plan as any).billingPeriod}
+              </h2>
+            </div>
+
+            {/* Checkout: bundle => /checkout/<productSlug>?allplans=true */}
+            <Link href={checkoutHref} className="btn btn-primary d-block mt-4">
+              I&apos;m Ready to Pay
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const getServerSideProps: GetServerSideProps =
+  wrapper.getServerSideProps((store) => async (context) => {
+    context.res.setHeader('Cache-Control', 'no-store')
+
+    const { productPlanSlug, allplans } = context.query
+    const cookie = context.req?.headers?.cookie ?? ''
+
+    // ========= MODE 1: Model bundle flow (allplans=true, productPlanSlug is actually product slug) =========
+    const isAllPlans =
+      typeof allplans === 'string'
+        ? allplans.toLowerCase() === 'true'
+        : Array.isArray(allplans)
+        ? allplans.some((v) => v.toLowerCase() === 'true')
+        : false
+
+    if (isAllPlans) {
+      if (typeof productPlanSlug !== 'string' || !productPlanSlug) {
+        return {
+          props: { pageTitle: 'Cart', plan: null, product: null, period: '' },
+        }
+      }
+
+      // productPlanSlug here is the product slug
+      const productResult = await store.dispatch(
+        getOneProduct.initiate({
+          id: productPlanSlug,
+          include: ['plans', 'plans.usageTiers'],
+          includePlanFeatures: true,
+          // @ts-ignore: extra headers for SSR
+          headers: cookie ? { cookie } : undefined,
+        } as any)
+      )
+
+      const product = (productResult.data as Product | undefined) ?? null
+      if (!product) {
+        await Promise.all([
+          store.dispatch(productsApiSlice.util.getRunningQueriesThunk()),
+        ])
+        return {
+          props: { pageTitle: 'Cart', plan: null, product: null, period: '' },
+        }
+      }
+
+      const plans: PlanWithProduct[] =
+        (((product as any).productPlans as PlanWithProduct[]) ??
+          ((product as any).plans as PlanWithProduct[]) ??
+          [])
+
+      const primaryPlan: PlanWithProduct | null = plans[0] ?? null
+      if (!primaryPlan) {
+        await Promise.all([
+          store.dispatch(productsApiSlice.util.getRunningQueriesThunk()),
+        ])
+        return {
+          props: { pageTitle: 'Cart', plan: null, product: null, period: '' },
+        }
+      }
+
+      const selectedPlanSlugs = plans
+        .map((p: any) => p.slug)
+        .filter((s: any) => typeof s === 'string' && s.length > 0)
+
+      // Redirect if already subscribed to a plan product (for safety; product here should be type 'model')
+      const isPlanType =
+        (product as any)?.type === 'plan' || (product as any)?.type === 'Plan'
+      if (isPlanType && (product as any)?.isSubscribed) {
+        return { redirect: { destination: '/u?goto=billing', permanent: false } }
+      }
+
+      // Compute period (month → month, clamped)
+      function addMonthClamped(d: Date) {
+        const y = d.getFullYear(),
+          m = d.getMonth(),
+          day = d.getDate()
+        const lastDayNextMonth = new Date(y, m + 2, 0).getDate()
+        return new Date(y, m + 1, Math.min(day, lastDayNextMonth))
+      }
+      const now = new Date()
+      const nextBillingDate = addMonthClamped(now)
+      const isSameYear = now.getFullYear() === nextBillingDate.getFullYear()
+      const period = `${formatDateWithOrdinal(
+        now,
+        !isSameYear
+      )} - ${formatDateWithOrdinal(
+        nextBillingDate,
+        !isSameYear
+      )}${isSameYear ? `, ${now.getFullYear()}` : ''}`
+
+      await Promise.all([
+        store.dispatch(productsApiSlice.util.getRunningQueriesThunk()),
+      ])
+
+      return {
+        props: {
+          pageTitle: 'Cart',
+          plan: primaryPlan,
+          product,
+          period,
+          selectedPlanSlugs,
+        },
+      }
+    }
+
+    // ========= MODE 2: Legacy / single-plan flow (plan slug → product) =========
+    if (typeof productPlanSlug !== 'string' || !productPlanSlug) {
+      return {
+        props: { pageTitle: 'Cart', plan: null, product: null, period: '' },
+      }
+    }
+
+    // 1) Use getOneProductPlan and pass slug as id
+    const planResult = await store.dispatch(
+      getOneProductPlan.initiate({
+        id: productPlanSlug,
+        // @ts-ignore allow headers param if your slice supports it
+        headers: cookie ? { cookie } : undefined,
+      } as any)
+    )
+
+    const plan = (planResult.data as PlanWithProduct | undefined) ?? null
+    const productId = plan?.productId
+    if (!plan || !productId) {
+      await store.dispatch(productPlansApiSlice.util.getRunningQueriesThunk())
+      return {
+        props: { pageTitle: 'Cart', plan: null, product: null, period: '' },
+      }
+    }
+
+    // 2) Fetch product (include plans + usage tiers + features). Cookie forwarded.
+    const productResult = await store.dispatch(
+      getOneProduct.initiate({
+        id: productId,
+        include: ['plans', 'plans.usageTiers'],
+        includePlanFeatures: true,
+        // @ts-ignore allow headers param if your slice supports it
+        headers: cookie ? { cookie } : undefined,
+      } as any)
+    )
+
+    const product = (productResult.data as Product | undefined) ?? null
+    if (!product) {
+      await Promise.all([
+        store.dispatch(productsApiSlice.util.getRunningQueriesThunk()),
+        store.dispatch(productPlansApiSlice.util.getRunningQueriesThunk()),
+      ])
+      return {
+        props: { pageTitle: 'Cart', plan: null, product: null, period: '' },
+      }
+    }
+
+    const isPlanType =
+      (product as any)?.type === 'plan' || (product as any)?.type === 'Plan'
+    if (isPlanType && (product as any)?.isSubscribed) {
+      return { redirect: { destination: '/u?goto=billing', permanent: false } }
+    }
+
+    function addMonthClamped(d: Date) {
+      const y = d.getFullYear(),
+        m = d.getMonth(),
+        day = d.getDate()
+      const lastDayNextMonth = new Date(y, m + 2, 0).getDate()
+      return new Date(y, m + 1, Math.min(day, lastDayNextMonth))
+    }
+    const now = new Date()
+    const nextBillingDate = addMonthClamped(now)
+    const isSameYear = now.getFullYear() === nextBillingDate.getFullYear()
+    const period = `${formatDateWithOrdinal(
+      now,
+      !isSameYear
+    )} - ${formatDateWithOrdinal(
+      nextBillingDate,
+      !isSameYear
+    )}${isSameYear ? `, ${now.getFullYear()}` : ''}`
+
+    await Promise.all([
+      store.dispatch(productsApiSlice.util.getRunningQueriesThunk()),
+      store.dispatch(productPlansApiSlice.util.getRunningQueriesThunk()),
+    ])
+
+    return { props: { pageTitle: 'Cart', plan, product, period } }
+  })
+
+export default WithAuth(Cart)