💳 `Subscription`

SubscriptionPage is a protected React component that displays available subscription plans to authenticated users using the Subscription component from @zezosoft/zezo-ott-react-ui-kit.

The subscription data is fetched server-side using zezoClient with auth headers from cookies, and passed into a client component for rendering.

🛠️ Server Component – `page.tsx`

This file is responsible for authentication and data fetching. If the user is not authenticated, it redirects to /email-login.


import React from "react";
import SubscriptionPage from "../_components/SubscriptionPage";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { zezoClient } from "@/lib/zezoClient";
 
async function Page() {
  const cookieStore = cookies();
 
  const headers: Record<string, string> = {
    "x-zezo-ott-auth": (await cookieStore).get("zezo-ott-auth")?.value || "",
  };
 
  const client = zezoClient(headers);
 
  const session = await client.auth.whoamI().catch(() => null);
  if (!session) {
    redirect("/email-login");
  }
 
  const res = await client.subscriptions
    .get()
    .catch(() => ({ data: { data: [] } }));
  const plans = res.data?.data || [];
 
  return (
    <div>
      <SubscriptionPage plans={[...plans]} key={plans.length} />
    </div>
  );
}
 
export default Page;

🧩 Client Component – `SubscriptionPage`

This client component receives the plans prop and renders the UI using the Subscription component from the Zezo UI Kit.


"use client";
 
import React from "react";
import { Subscription as ZezoSubscriptionPlans } from "@zezosoft/zezo-ott-react-ui-kit";
import { useRouter } from "next/navigation";
 
export interface Props {
  plans: any[];
}
 
function SubscriptionPage({ plans }: Props) {
  const router = useRouter();
 
  return (
    <ZezoSubscriptionPlans
      plans={plans}
      loading={false}
      backButton={{
        title: "Subscription Plans",
        onClick: () => router.push("/"),
      }}
    />
  );
}
 
export default SubscriptionPage;

📦 Props

Prop	Type	Required	Description
`plans`	`ISubscriptionData[]`	✅ Yes	Array of subscription plans to display.
`loading`	`boolean`	❌ No	Whether to show loading UI (skeletons or spinner).
`onSelect`	`(plan: ISubscriptionData) => void`	❌ No	Callback fired when a user selects a subscription plan.
`backButton`	`GoBackViewProps`	❌ No	Configuration for the back button (e.g., title and `onClick` handler).

🧪 Behavior

✅ Authenticated users will see the available subscription plans.
🔁 Unauthenticated users are redirected to /email-login.
↩️ The back button navigates the user back to the homepage (/).

🖼️ UI Preview

Here’s how the Subscription component looks in action:

Subscription UI

📁 Notes

The Subscription component is fully reusable — you are not required to use the Zezo API.
If you’re not using zezoClient().subscriptions.get(), you can pass your own custom plans array to the component manually.
Each item in the plans array should follow this structure:

💳 Subscription

🛠️ Server Component – page.tsx

🧩 Client Component – SubscriptionPage