Skip to Content
WebComponentUserPurchase-History

📦 PurchaseHistory Component

The PurchaseHistory component renders a paginated list of purchased content (TVOD or owned) using
<PurchaseContent /> from @zezosoft/zezo-ott-react-ui-kit.
It supports infinite pagination, item click handling, and server-authenticated usage.

✨ Features

  • 🔁 Infinite pagination with react-query
  • 🎞 Displays posters, titles, and thumbnails
  • 🔗 Navigates to details page on item click
  • 🔐 Authenticated via server using getSession
  • 📡 Powered by Zezo OTT API client

🧩 Props

PropTypeRequiredDescription
fetchPurchaseList({ pageParam?: number }) => Promise<IPageData>✅ YesFunction to fetch paginated purchase data
onItemClick(item: IPurchaseItem) => void❌ NoCustom click handler for purchase items

🚀 Server Component (Protected Route)

import { zezoClient } from "@/lib/zezoClient";
import { getSession } from "@/auth";
import PurchaseClient2 from "./_components/PurchaseClient2";
import { redirect } from "next/navigation";
 
export default async function Page() {
  const session = await getSession();
 
  if (!session) {
    redirect("/email-login");
  }
 
  const fetchPurchaseList = async () => {
    "use server";
    const res = await zezoClient().contents.getTvod();
    return res?.data ?? [];
  };
 
  return <PurchaseClient2 fetchPurchaseList={fetchPurchaseList} />;
}

🎯 Client Component

"use client";
import React from "react";
import { useRouter } from "next/navigation";
import { PurchaseContent as ZezoPurchaseContent } from "@zezosoft/zezo-ott-react-ui-kit";
 
interface IPurchaseItem {
  _id: string;
  name: string;
  poster: string;
  thumbnail: string;
  slug: string;
}
 
interface IPageData {
  data: IPurchaseItem[];
  meta: {
    pagination: {
      total: number;
      page: number;
      pages: number;
      limit: number;
      hasNextPage: boolean;
      nextPage: number | null;
    };
  };
}
 
interface Props {
  fetchPurchaseList: ({
    pageParam,
  }: {
    pageParam?: number;
  }) => Promise<IPageData>;
}
 
const PurchaseClient2: React.FC<Props> = ({ fetchPurchaseList }) => {
  const router = useRouter();
  return (
    <ZezoPurchaseContent
      fetchPurchaseList={fetchPurchaseList}
      onItemClick={(item) => {
        router.push(`/details/${item.slug}`);
      }}
    />
  );
};
 
export default PurchaseClient2;

🧾 PurchaseHistory

The PurchaseHistory component renders a fully typed, paginated purchase list (TVOD or owned content) using
<PurchaseContent /> from @zezosoft/zezo-ott-react-ui-kit. It is auth-protected and fetches data using the
@zezosoft/zezo-ott-api-client.

✨ Features

  • 🔐 Auth-protected with redirect fallback
  • 📦 Displays purchased items using pagination
  • 📍 Handles click-to-details routing
  • 🔌 Integrated with react-query + zezoClient
  • 🧱 Reusable & easily extendable

🖼️ Preview

watch-history

Last updated on
Manage-DevicesWatch-History