@wakastellar/ui 3.2.0 → 3.3.2

package/src/components/waka-credit-top-up/index.tsx

@@ -0,0 +1,403 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Card, CardContent } from "../card"
+import { Button } from "../button"
+import { Input } from "../input"
+import { Slider } from "../slider"
+import { Separator } from "../separator"
+import { Coins, ShoppingCart, Plus } from "lucide-react"
+import type { CreditPack } from "../waka-credit-balance/types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface WakaCreditTopUpProps {
+  /** Available credit packs to choose from */
+  packs: CreditPack[]
+  /** Current balance (shown in summary if provided) */
+  currentBalance?: number
+  /** Allow custom amount entry */
+  customAmount?: boolean
+  /** Minimum custom credits */
+  minAmount?: number
+  /** Maximum custom credits */
+  maxAmount?: number
+  /** Currency label */
+  currency?: string
+  /** Called when user confirms purchase */
+  onPurchase: (selection: CreditPack | { credits: number; price: number }) => void
+  /** Called when user cancels */
+  onCancel?: () => void
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const DEFAULT_RATE = 0.01 // euros per credit
+const DEFAULT_MIN = 100
+const DEFAULT_MAX = 50000
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function computeCustomPrice(
+  credits: number,
+  packs: CreditPack[]
+): number {
+  if (packs.length === 0) {
+    return credits * DEFAULT_RATE
+  }
+
+  const sorted = [...packs].sort((a, b) => a.credits - b.credits)
+
+  // Below smallest pack -> use smallest pack rate
+  if (credits <= sorted[0].credits) {
+    const rate = sorted[0].price / sorted[0].credits
+    return Math.round(credits * rate * 100) / 100
+  }
+
+  // Above largest pack -> use largest pack rate
+  if (credits >= sorted[sorted.length - 1].credits) {
+    const rate = sorted[sorted.length - 1].price / sorted[sorted.length - 1].credits
+    return Math.round(credits * rate * 100) / 100
+  }
+
+  // Linear interpolation between surrounding packs
+  for (let i = 0; i < sorted.length - 1; i++) {
+    if (credits >= sorted[i].credits && credits <= sorted[i + 1].credits) {
+      const lower = sorted[i]
+      const upper = sorted[i + 1]
+      const ratio = (credits - lower.credits) / (upper.credits - lower.credits)
+      const price = lower.price + ratio * (upper.price - lower.price)
+      return Math.round(price * 100) / 100
+    }
+  }
+
+  return credits * DEFAULT_RATE
+}
+
+function formatCurrency(value: number, currency: string): string {
+  return `${value.toFixed(2)} ${currency}`
+}
+
+function formatCredits(value: number): string {
+  return value.toLocaleString("en-US")
+}
+
+// ============================================================================
+// Pack Card (inline, no external dependency)
+// ============================================================================
+
+interface PackCardProps {
+  pack: CreditPack
+  selected: boolean
+  currency: string
+  onSelect: () => void
+}
+
+function PackCard({ pack, selected, currency, onSelect }: PackCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={cn(
+        "relative flex flex-col items-center gap-2 rounded-lg border p-4 text-left transition-all",
+        "hover:border-primary/50 hover:shadow-sm",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        selected
+          ? "border-primary bg-primary/5 shadow-sm ring-1 ring-primary"
+          : "border-border bg-card",
+        pack.highlighted && !selected && "border-primary/30"
+      )}
+    >
+      {/* Highlight label */}
+      {pack.highlighted && pack.highlightLabel && (
+        <span className="absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full bg-primary px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-primary-foreground whitespace-nowrap">
+          {pack.highlightLabel}
+        </span>
+      )}
+
+      {/* Credits */}
+      <div className="flex items-center gap-1.5">
+        <Coins className="h-4 w-4 text-muted-foreground" />
+        <span className="text-lg font-bold tabular-nums">
+          {formatCredits(pack.credits)}
+        </span>
+      </div>
+
+      {/* Pack name */}
+      <span className="text-xs text-muted-foreground font-medium">
+        {pack.name}
+      </span>
+
+      {/* Price */}
+      <span className="text-sm font-semibold">
+        {formatCurrency(pack.price, pack.currency ?? currency)}
+      </span>
+
+      {/* Bonus badge */}
+      {pack.bonusPercent != null && pack.bonusPercent > 0 && (
+        <span className="rounded-full bg-green-100 dark:bg-green-900/30 px-2 py-0.5 text-[10px] font-semibold text-green-700 dark:text-green-400">
+          +{pack.bonusPercent}% bonus
+        </span>
+      )}
+
+      {/* Unit price */}
+      {pack.unitPrice != null && (
+        <span className="text-[10px] text-muted-foreground">
+          {pack.unitPrice.toFixed(4)} {pack.currency ?? currency}/credit
+        </span>
+      )}
+    </button>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditTopUp({
+  packs,
+  currentBalance,
+  customAmount = false,
+  minAmount = DEFAULT_MIN,
+  maxAmount = DEFAULT_MAX,
+  currency = "EUR",
+  onPurchase,
+  onCancel,
+  className,
+}: WakaCreditTopUpProps) {
+  // Selection state: either a pack ID or "custom"
+  const [selectedPackId, setSelectedPackId] = React.useState<string | null>(null)
+  const [isCustom, setIsCustom] = React.useState(false)
+  const [customCredits, setCustomCredits] = React.useState(minAmount)
+
+  // Derived values
+  const selectedPack = packs.find((p) => p.id === selectedPackId) ?? null
+  const customPrice = computeCustomPrice(customCredits, packs)
+
+  const hasSelection = selectedPack !== null || (isCustom && customCredits >= minAmount)
+
+  const selectionCredits = isCustom ? customCredits : (selectedPack?.credits ?? 0)
+  const selectionPrice = isCustom ? customPrice : (selectedPack?.price ?? 0)
+
+  // Handlers
+  function handleSelectPack(packId: string) {
+    setSelectedPackId(packId)
+    setIsCustom(false)
+  }
+
+  function handleEnableCustom() {
+    setIsCustom(true)
+    setSelectedPackId(null)
+  }
+
+  function handleCustomCreditsChange(value: number) {
+    const clamped = Math.max(minAmount, Math.min(maxAmount, Math.round(value)))
+    setCustomCredits(clamped)
+  }
+
+  function handleCustomInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value
+    if (raw === "") {
+      setCustomCredits(minAmount)
+      return
+    }
+    const parsed = parseInt(raw, 10)
+    if (!isNaN(parsed)) {
+      handleCustomCreditsChange(parsed)
+    }
+  }
+
+  function handleSliderChange(values: number[]) {
+    if (values[0] != null) {
+      handleCustomCreditsChange(values[0])
+    }
+  }
+
+  function handlePurchase() {
+    if (!hasSelection) return
+
+    if (isCustom) {
+      onPurchase({ credits: customCredits, price: customPrice })
+    } else if (selectedPack) {
+      onPurchase(selectedPack)
+    }
+  }
+
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardContent className="p-6 space-y-6">
+        {/* ---------------------------------------------------------------- */}
+        {/* Header */}
+        {/* ---------------------------------------------------------------- */}
+        <div className="flex items-center gap-2">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-primary/10">
+            <ShoppingCart className="h-5 w-5 text-primary" />
+          </div>
+          <div>
+            <h3 className="text-lg font-semibold">Top Up Credits</h3>
+            <p className="text-sm text-muted-foreground">
+              Select a pack or enter a custom amount
+            </p>
+          </div>
+        </div>
+
+        {/* ---------------------------------------------------------------- */}
+        {/* Pack Grid */}
+        {/* ---------------------------------------------------------------- */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+          {packs.map((pack) => (
+            <PackCard
+              key={pack.id}
+              pack={pack}
+              selected={selectedPackId === pack.id && !isCustom}
+              currency={currency}
+              onSelect={() => handleSelectPack(pack.id)}
+            />
+          ))}
+        </div>
+
+        {/* ---------------------------------------------------------------- */}
+        {/* Custom Amount */}
+        {/* ---------------------------------------------------------------- */}
+        {customAmount && (
+          <>
+            <div className="relative">
+              <Separator />
+              <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-3 text-xs text-muted-foreground font-medium">
+                Or enter custom amount
+              </span>
+            </div>
+
+            <div className="space-y-4">
+              {/* Custom toggle / active state */}
+              {!isCustom ? (
+                <Button
+                  variant="outline"
+                  className="w-full"
+                  onClick={handleEnableCustom}
+                >
+                  <Plus className="h-4 w-4" />
+                  Enter custom amount
+                </Button>
+              ) : (
+                <div className="space-y-4 rounded-lg border border-primary/30 bg-primary/5 p-4">
+                  <div className="flex items-center justify-between">
+                    <label
+                      htmlFor="custom-credits"
+                      className="text-sm font-medium"
+                    >
+                      Credits
+                    </label>
+                    <span className="text-sm text-muted-foreground">
+                      {formatCurrency(customPrice, currency)}
+                    </span>
+                  </div>
+
+                  <Input
+                    id="custom-credits"
+                    type="number"
+                    min={minAmount}
+                    max={maxAmount}
+                    step={100}
+                    value={customCredits}
+                    onChange={handleCustomInputChange}
+                    className="tabular-nums"
+                  />
+
+                  <Slider
+                    value={[customCredits]}
+                    onValueChange={handleSliderChange}
+                    min={minAmount}
+                    max={maxAmount}
+                    step={100}
+                  />
+
+                  <div className="flex justify-between text-[10px] text-muted-foreground tabular-nums">
+                    <span>{formatCredits(minAmount)}</span>
+                    <span>{formatCredits(maxAmount)}</span>
+                  </div>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+
+        {/* ---------------------------------------------------------------- */}
+        {/* Summary */}
+        {/* ---------------------------------------------------------------- */}
+        {hasSelection && (
+          <>
+            <Separator />
+
+            <div className="space-y-2 rounded-lg bg-muted/50 p-4">
+              <h4 className="text-sm font-semibold">Summary</h4>
+
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Credits</span>
+                <span className="font-medium tabular-nums">
+                  {formatCredits(selectionCredits)}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-muted-foreground">Price</span>
+                <span className="font-medium tabular-nums">
+                  {formatCurrency(selectionPrice, currency)}
+                </span>
+              </div>
+
+              {currentBalance != null && (
+                <>
+                  <Separator className="my-1" />
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">
+                      Current balance
+                    </span>
+                    <span className="tabular-nums">
+                      {formatCredits(currentBalance)}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between text-sm font-semibold">
+                    <span>New balance</span>
+                    <span className="tabular-nums text-green-600 dark:text-green-400">
+                      {formatCredits(currentBalance + selectionCredits)}
+                    </span>
+                  </div>
+                </>
+              )}
+            </div>
+          </>
+        )}
+
+        {/* ---------------------------------------------------------------- */}
+        {/* Action Buttons */}
+        {/* ---------------------------------------------------------------- */}
+        <div className="flex items-center justify-end gap-3">
+          {onCancel && (
+            <Button variant="outline" onClick={onCancel}>
+              Cancel
+            </Button>
+          )}
+          <Button
+            onClick={handlePurchase}
+            disabled={!hasSelection}
+          >
+            <ShoppingCart className="h-4 w-4" />
+            Purchase
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default WakaCreditTopUp

package/src/components/waka-credit-transaction/WakaCreditTransaction.stories.tsx

@@ -0,0 +1,218 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCreditTransaction } from './index'
+import type { CreditTransaction } from '../waka-credit-balance/types'
+
+const meta: Meta<typeof WakaCreditTransaction> = {
+  title: 'Components/Credit/WakaCreditTransaction',
+  component: WakaCreditTransaction,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Displays a single credit transaction row, color-coded by type with icon, description, amount, date, and optional status badge.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    compact: {
+      control: 'boolean',
+      description: 'Use compact single-line layout',
+    },
+    showService: {
+      control: 'boolean',
+      description: 'Show the service name',
+    },
+    showStatus: {
+      control: 'boolean',
+      description: 'Show the status badge',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditTransaction>
+
+// ============================================================================
+// Sample data
+// ============================================================================
+
+const debitTransaction: CreditTransaction = {
+  id: 'tx-001',
+  type: 'debit',
+  amount: 150,
+  description: 'VM Instance - 4 vCPU, 16GB RAM',
+  service: 'Compute Engine',
+  timestamp: '2026-02-10T14:30:00Z',
+  status: 'completed',
+  balanceAfter: 2300,
+}
+
+const creditTransaction: CreditTransaction = {
+  id: 'tx-002',
+  type: 'credit',
+  amount: 500,
+  description: 'Credit Pack Purchase - Standard',
+  service: 'Billing',
+  timestamp: '2026-02-09T10:15:00Z',
+  status: 'completed',
+  balanceAfter: 2450,
+}
+
+const refundTransaction: CreditTransaction = {
+  id: 'tx-003',
+  type: 'refund',
+  amount: 75,
+  description: 'Refund - Service downtime compensation',
+  service: 'Support',
+  timestamp: '2026-02-08T09:00:00Z',
+  status: 'completed',
+  balanceAfter: 1950,
+}
+
+const bonusTransaction: CreditTransaction = {
+  id: 'tx-004',
+  type: 'bonus',
+  amount: 200,
+  description: 'Welcome bonus - New account promotion',
+  service: 'Promotions',
+  timestamp: '2026-02-07T12:00:00Z',
+  status: 'completed',
+  balanceAfter: 1875,
+}
+
+const expiryTransaction: CreditTransaction = {
+  id: 'tx-005',
+  type: 'expiry',
+  amount: 50,
+  description: 'Expired credits - Monthly cleanup',
+  service: 'System',
+  timestamp: '2026-02-01T00:00:00Z',
+  status: 'completed',
+  balanceAfter: 1675,
+}
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Debit: Story = {
+  args: {
+    transaction: debitTransaction,
+    showService: true,
+    showStatus: true,
+  },
+}
+
+export const Credit: Story = {
+  args: {
+    transaction: creditTransaction,
+    showService: true,
+    showStatus: true,
+  },
+}
+
+export const Refund: Story = {
+  args: {
+    transaction: refundTransaction,
+    showService: true,
+    showStatus: true,
+  },
+}
+
+export const Bonus: Story = {
+  args: {
+    transaction: bonusTransaction,
+    showService: true,
+    showStatus: true,
+  },
+}
+
+export const Expiry: Story = {
+  args: {
+    transaction: expiryTransaction,
+    showService: true,
+    showStatus: true,
+  },
+}
+
+export const Compact: Story = {
+  render: () => (
+    <div className="space-y-1">
+      <WakaCreditTransaction transaction={debitTransaction} compact />
+      <WakaCreditTransaction transaction={creditTransaction} compact />
+      <WakaCreditTransaction transaction={refundTransaction} compact />
+      <WakaCreditTransaction transaction={bonusTransaction} compact />
+      <WakaCreditTransaction transaction={expiryTransaction} compact />
+    </div>
+  ),
+}
+
+export const WithService: Story = {
+  render: () => (
+    <div className="space-y-1 divide-y">
+      <WakaCreditTransaction transaction={debitTransaction} showService />
+      <WakaCreditTransaction transaction={creditTransaction} showService />
+      <WakaCreditTransaction transaction={refundTransaction} showService />
+      <WakaCreditTransaction transaction={bonusTransaction} showService />
+      <WakaCreditTransaction transaction={expiryTransaction} showService />
+    </div>
+  ),
+}
+
+export const Clickable: Story = {
+  render: () => (
+    <div className="space-y-1">
+      <WakaCreditTransaction
+        transaction={debitTransaction}
+        showService
+        showStatus
+        onClick={(tx) => alert(`Clicked transaction: ${tx.id}\nType: ${tx.type}\nAmount: ${tx.amount}`)}
+      />
+      <WakaCreditTransaction
+        transaction={creditTransaction}
+        showService
+        showStatus
+        onClick={(tx) => alert(`Clicked transaction: ${tx.id}\nType: ${tx.type}\nAmount: ${tx.amount}`)}
+      />
+      <WakaCreditTransaction
+        transaction={refundTransaction}
+        showService
+        showStatus
+        onClick={(tx) => alert(`Clicked transaction: ${tx.id}\nType: ${tx.type}\nAmount: ${tx.amount}`)}
+      />
+    </div>
+  ),
+}
+
+export const AllStatuses: Story = {
+  name: 'All Statuses',
+  render: () => (
+    <div className="space-y-1">
+      <WakaCreditTransaction
+        transaction={{ ...debitTransaction, status: 'completed' }}
+        showStatus
+      />
+      <WakaCreditTransaction
+        transaction={{ ...creditTransaction, status: 'pending', id: 'tx-pending' }}
+        showStatus
+      />
+      <WakaCreditTransaction
+        transaction={{ ...refundTransaction, status: 'failed', id: 'tx-failed' }}
+        showStatus
+      />
+      <WakaCreditTransaction
+        transaction={{ ...bonusTransaction, status: 'cancelled', id: 'tx-cancelled' }}
+        showStatus
+      />
+    </div>
+  ),
+}