@wakastellar/ui 3.1.0 → 3.3.0

package/src/components/waka-credit-receipt/index.tsx

@@ -0,0 +1,247 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Card, CardContent, CardHeader, CardTitle } from "../card"
+import { Button } from "../button"
+import { Badge } from "../badge"
+import { Separator } from "../separator"
+import { Download, Receipt, CheckCircle } from "lucide-react"
+import type { CreditTransaction } from "../waka-credit-balance/types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CreditReceiptTransaction extends CreditTransaction {
+  paymentMethod?: string
+  credits?: number
+  price?: number
+}
+
+export interface WakaCreditReceiptProps {
+  /** Transaction data to display on the receipt */
+  transaction: CreditReceiptTransaction
+  /** Organization details */
+  organization?: { name: string; id: string }
+  /** Whether the receipt can be downloaded as PDF */
+  downloadable?: boolean
+  /** Callback when download button is clicked */
+  onDownload?: () => void
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function formatDate(timestamp: string | Date): string {
+  const date = typeof timestamp === "string" ? new Date(timestamp) : timestamp
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+function formatCredits(amount: number): string {
+  const prefix = amount >= 0 ? "+" : ""
+  return `${prefix}${amount.toLocaleString("en-US")}`
+}
+
+function formatPrice(price: number): string {
+  return price.toLocaleString("en-US", {
+    style: "currency",
+    currency: "EUR",
+  })
+}
+
+function getTypeBadgeVariant(
+  type: CreditReceiptTransaction["type"]
+): "default" | "secondary" | "destructive" | "outline" {
+  switch (type) {
+    case "credit":
+      return "default"
+    case "debit":
+      return "secondary"
+    case "refund":
+      return "destructive"
+    case "bonus":
+      return "default"
+    case "expiry":
+      return "outline"
+    default:
+      return "secondary"
+  }
+}
+
+function getStatusBadgeVariant(
+  status: CreditReceiptTransaction["status"]
+): "default" | "secondary" | "destructive" | "outline" {
+  switch (status) {
+    case "completed":
+      return "default"
+    case "pending":
+      return "outline"
+    case "failed":
+      return "destructive"
+    case "cancelled":
+      return "secondary"
+    default:
+      return "outline"
+  }
+}
+
+function capitalizeFirst(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1)
+}
+
+// ============================================================================
+// Detail Row
+// ============================================================================
+
+interface DetailRowProps {
+  label: string
+  children: React.ReactNode
+}
+
+function DetailRow({ label, children }: DetailRowProps) {
+  return (
+    <div className="flex items-center justify-between py-1.5 print:py-1">
+      <span className="text-sm text-muted-foreground print:text-gray-500">
+        {label}
+      </span>
+      <div className="text-sm font-medium text-right">{children}</div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditReceipt({
+  transaction,
+  organization,
+  downloadable = false,
+  onDownload,
+  className,
+}: WakaCreditReceiptProps) {
+  return (
+    <Card
+      className={cn(
+        "w-full max-w-md print:shadow-none print:border-gray-300",
+        className
+      )}
+    >
+      {/* Header */}
+      <CardHeader className="pb-4 print:pb-2">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Receipt className="h-5 w-5 text-muted-foreground print:text-gray-500" />
+            <CardTitle className="text-lg print:text-base">Receipt</CardTitle>
+          </div>
+          <CheckCircle className="h-5 w-5 text-green-500 print:text-gray-700" />
+        </div>
+        <p className="text-xs font-mono text-muted-foreground mt-1 print:text-gray-400">
+          {transaction.id}
+        </p>
+      </CardHeader>
+
+      <Separator className="print:bg-gray-300" />
+
+      {/* Details */}
+      <CardContent className="pt-4 print:pt-2">
+        <div className="space-y-0.5">
+          <DetailRow label="Date">
+            {formatDate(transaction.timestamp)}
+          </DetailRow>
+
+          <DetailRow label="Type">
+            <Badge
+              variant={getTypeBadgeVariant(transaction.type)}
+              className="print:border-gray-400 print:bg-transparent print:text-gray-700"
+            >
+              {capitalizeFirst(transaction.type)}
+            </Badge>
+          </DetailRow>
+
+          {transaction.credits !== undefined && (
+            <DetailRow label="Credits">
+              <span
+                className={cn(
+                  "tabular-nums font-semibold",
+                  transaction.credits >= 0
+                    ? "text-green-600 dark:text-green-400 print:text-gray-900"
+                    : "text-red-600 dark:text-red-400 print:text-gray-900"
+                )}
+              >
+                {formatCredits(transaction.credits)} credits
+              </span>
+            </DetailRow>
+          )}
+
+          {transaction.price !== undefined && (
+            <DetailRow label="Amount">
+              <span className="tabular-nums">
+                {formatPrice(transaction.price)}
+              </span>
+            </DetailRow>
+          )}
+
+          {transaction.paymentMethod && (
+            <DetailRow label="Payment">
+              <span className="font-mono text-xs">
+                {transaction.paymentMethod}
+              </span>
+            </DetailRow>
+          )}
+
+          <DetailRow label="Status">
+            <Badge
+              variant={getStatusBadgeVariant(transaction.status)}
+              className="print:border-gray-400 print:bg-transparent print:text-gray-700"
+            >
+              {capitalizeFirst(transaction.status)}
+            </Badge>
+          </DetailRow>
+
+          {organization && (
+            <DetailRow label="Organization">{organization.name}</DetailRow>
+          )}
+
+          {transaction.description && (
+            <DetailRow label="Description">
+              <span className="max-w-[200px] truncate inline-block">
+                {transaction.description}
+              </span>
+            </DetailRow>
+          )}
+        </div>
+
+        {/* Footer */}
+        {downloadable && (
+          <>
+            <Separator className="my-4 print:hidden" />
+            <div className="print:hidden">
+              <Button
+                variant="outline"
+                size="sm"
+                className="w-full"
+                onClick={onDownload}
+              >
+                <Download className="h-4 w-4 mr-2" />
+                Download PDF
+              </Button>
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+export default WakaCreditReceipt

package/src/components/waka-credit-top-up/WakaCreditTopUp.stories.tsx

@@ -0,0 +1,196 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCreditTopUp } from "./index"
+import type { CreditPack } from "../waka-credit-balance/types"
+
+const meta: Meta<typeof WakaCreditTopUp> = {
+  title: "Components/Credit/WakaCreditTopUp",
+  component: WakaCreditTopUp,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Complete top-up selector with predefined packs, optional custom amount input, and purchase summary.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    customAmount: {
+      control: "boolean",
+      description: "Allow entering a custom credit amount",
+    },
+    currency: {
+      control: "text",
+      description: "Currency label",
+    },
+    currentBalance: {
+      control: { type: "number", min: 0, max: 100000 },
+      description: "Current credit balance shown in summary",
+    },
+    minAmount: {
+      control: { type: "number", min: 1 },
+      description: "Minimum custom amount",
+    },
+    maxAmount: {
+      control: { type: "number", min: 1 },
+      description: "Maximum custom amount",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[640px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditTopUp>
+
+// ============================================================================
+// Sample data
+// ============================================================================
+
+const samplePacks: CreditPack[] = [
+  {
+    id: "starter",
+    name: "Starter",
+    credits: 1000,
+    price: 9.99,
+    unitPrice: 0.01,
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    credits: 5000,
+    price: 39.99,
+    unitPrice: 0.008,
+    bonusPercent: 10,
+    highlighted: true,
+    highlightLabel: "Most Popular",
+  },
+  {
+    id: "enterprise",
+    name: "Enterprise",
+    credits: 20000,
+    price: 129.99,
+    unitPrice: 0.0065,
+    bonusPercent: 25,
+  },
+]
+
+const minimalPacks: CreditPack[] = [
+  {
+    id: "small",
+    name: "Small",
+    credits: 500,
+    price: 4.99,
+  },
+  {
+    id: "medium",
+    name: "Medium",
+    credits: 2000,
+    price: 14.99,
+  },
+]
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Default: Story = {
+  args: {
+    packs: samplePacks,
+    currency: "EUR",
+    onPurchase: (selection) => {
+      console.log("Purchase:", selection)
+    },
+    onCancel: () => {
+      console.log("Cancelled")
+    },
+  },
+}
+
+export const WithCustomAmount: Story = {
+  args: {
+    packs: samplePacks,
+    customAmount: true,
+    minAmount: 100,
+    maxAmount: 50000,
+    currency: "EUR",
+    onPurchase: (selection) => {
+      console.log("Purchase:", selection)
+    },
+    onCancel: () => {
+      console.log("Cancelled")
+    },
+  },
+}
+
+export const PreselectedPack: Story = {
+  render: () => (
+    <WakaCreditTopUp
+      packs={samplePacks}
+      currency="EUR"
+      onPurchase={(selection) => {
+        console.log("Purchase:", selection)
+      }}
+      onCancel={() => {
+        console.log("Cancelled")
+      }}
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Users can click on any pack to select it. The summary section appears once a pack is selected.",
+      },
+    },
+  },
+}
+
+export const WithBalance: Story = {
+  args: {
+    packs: samplePacks,
+    currentBalance: 3500,
+    customAmount: true,
+    minAmount: 100,
+    maxAmount: 50000,
+    currency: "EUR",
+    onPurchase: (selection) => {
+      console.log("Purchase:", selection)
+    },
+    onCancel: () => {
+      console.log("Cancelled")
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When currentBalance is provided, the summary section shows the projected new balance after purchase.",
+      },
+    },
+  },
+}
+
+export const MinimalPacks: Story = {
+  args: {
+    packs: minimalPacks,
+    currency: "USD",
+    onPurchase: (selection) => {
+      console.log("Purchase:", selection)
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Minimal configuration with only two packs, no cancel button, and no custom amount option.",
+      },
+    },
+  },
+}