Cancellation Policy

Component 1

About

Cancellation Policy This component displays tiered refund information and a list of policies in a modal-like card. It is designed to be highly reusable by accepting all content through props.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cancellation Policy to your project and fits it to your theme.

Code

How Cancellation Policy is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React, { useState } from "react";
import { CancellationPolicy, CancellationTier } from "@/components/ui/cancellation-policy";
import { Button } from "@/components/ui/button";

export default function CancellationPolicyDemo() {
  const [isPolicyOpen, setIsPolicyOpen] = useState(false);

  // --- Sample Data ---
  const showtimeDetails = "Tuesday, 07 Oct 08:20 PM";

  const tiers: CancellationTier[] = [
    {
      icon: "refund",
      title: "₹448.5 Refund | 75% of ticket price",
      description: "before 7 October, 06:20 PM",
    },
    {
      icon: "partial-refund",
      title: "₹299 Refund | 50% of ticket price",
      description: "between 7 October, 06:20 PM - 08:00 PM",
    },
    {
      icon: "no-refund",
      title: "No refund",
      description: "after 7 October, 08:00 PM",
    },
  ];

  const policyNotes = [
    "Partial cancellation is not allowed. If you cancel, the whole booking will be cancelled.",
    "Booking charges, taxes, and any other charges are non-refundable.",
    "You can cancel up to 3 times within 30 days.",
    "If you used discounts or promotional offers, your refund will be reduced accordingly.",
    "Theatre may change this policy at any time, without prior notice.",
  ];
  
  const refundInfoNote = "The refund amount shown is an estimate and may vary based on offers or discounts applied.";

  return (
    <div className="flex min-h-[350px] w-full items-center justify-center">
      <Button onClick={() => setIsPolicyOpen(true)}>
        View Cancellation Policy
      </Button>

      <CancellationPolicy
        isOpen={isPolicyOpen}
        onClose={() => setIsPolicyOpen(false)}
        showtime={showtimeDetails}
        cancellationTiers={tiers}
        infoNote={refundInfoNote}
        thingsToKnow={policyNotes}
      />
    </div>
  );
}