@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/ecommerce/coupon-wallet/coupon-wallet-types.ts

@@ -0,0 +1,21 @@
+export type StoreCoupon = {
+  readonly applicableCategory?: string
+  readonly code: string
+  readonly description: string
+  readonly discountText: string
+  readonly expiresAt: string
+  readonly id: string
+  readonly isApplied?: boolean
+  readonly minimumOrderValue?: number
+  readonly terms?: string
+  readonly title: string
+}
+
+export type CouponWalletProps = {
+  readonly appliedCouponId?: string
+  readonly className?: string
+  readonly coupons: readonly StoreCoupon[]
+  readonly onApplyCoupon?: (code: string) => void
+  readonly onCopyCode?: (code: string) => void
+  readonly onRemoveCoupon?: () => void
+}

package/src/blocks/ecommerce/coupon-wallet/coupon-wallet.tsx

@@ -0,0 +1,154 @@
+import { useState } from 'react'
+import { CheckIcon, CopyIcon, SparklesIcon, TagIcon, TicketIcon } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Button } from '../../../components/button'
+import { Badge } from '../../../components/badge'
+import type { CouponWalletProps } from './coupon-wallet-types'
+
+export function CouponWallet({
+  appliedCouponId,
+  className,
+  coupons,
+  onApplyCoupon,
+  onCopyCode,
+  onRemoveCoupon,
+}: CouponWalletProps) {
+  const [copiedCode, setCopiedCode] = useState<string | null>(null)
+  const [customCode, setCustomCode] = useState('')
+
+  const handleCopy = (code: string) => {
+    navigator.clipboard?.writeText(code)
+    setCopiedCode(code)
+    onCopyCode?.(code)
+    setTimeout(() => setCopiedCode(null), 2000)
+  }
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {/* Top Input for manual code entry */}
+      <div className="flex flex-col sm:flex-row gap-2 rounded-2xl border border-border/80 bg-card p-4 shadow-xs">
+        <div className="relative flex-1">
+          <TagIcon className="size-4 text-muted-foreground absolute left-3 top-1/2 -translate-y-1/2" />
+          <input
+            type="text"
+            value={customCode}
+            onChange={(e) => setCustomCode(e.target.value.toUpperCase())}
+            placeholder="Have a promo code? Enter here..."
+            className="w-full rounded-xl border border-input bg-muted/20 pl-9 pr-3 py-2 text-xs font-mono uppercase placeholder:font-sans placeholder:normal-case focus:outline-none focus:ring-1 focus:ring-primary"
+          />
+        </div>
+        <Button
+          size="sm"
+          disabled={!customCode.trim()}
+          onClick={() => {
+            onApplyCoupon?.(customCode)
+            setCustomCode('')
+          }}
+          className="text-xs"
+        >
+          Apply Promo
+        </Button>
+      </div>
+
+      {/* Available Coupons Grid */}
+      <div className="space-y-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <TicketIcon className="size-4 text-primary" />
+            <h4 className="text-sm font-bold text-foreground">Available Coupons & Vouchers</h4>
+          </div>
+          <span className="text-xs text-muted-foreground">{coupons.length} vouchers</span>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {coupons.map((coupon) => {
+            const isApplied = appliedCouponId === coupon.id
+            const isCopied = copiedCode === coupon.code
+
+            return (
+              <div
+                key={coupon.id}
+                className={cn(
+                  'relative flex flex-col justify-between overflow-hidden rounded-2xl border p-4 shadow-xs transition-all',
+                  isApplied
+                    ? 'border-primary bg-primary/5 ring-1 ring-primary'
+                    : 'border-border/80 bg-card hover:border-border',
+                )}
+              >
+                {/* Coupon Scallop Cutouts */}
+                <div className="absolute -left-2 top-1/2 -translate-y-1/2 size-4 rounded-full bg-background border-r border-border" />
+                <div className="absolute -right-2 top-1/2 -translate-y-1/2 size-4 rounded-full bg-background border-l border-border" />
+
+                <div className="space-y-2">
+                  <div className="flex items-start justify-between gap-2">
+                    <div>
+                      <span className="text-base font-black text-primary tracking-tight">
+                        {coupon.discountText}
+                      </span>
+                      <h5 className="text-xs font-bold text-foreground mt-0.5">{coupon.title}</h5>
+                    </div>
+                    {isApplied ? (
+                      <Badge variant="default" className="gap-1 text-[10px] font-bold">
+                        <SparklesIcon className="size-3" />
+                        <span>Applied</span>
+                      </Badge>
+                    ) : (
+                      <span className="text-[10px] text-muted-foreground font-semibold">
+                        Expires {coupon.expiresAt}
+                      </span>
+                    )}
+                  </div>
+
+                  <p className="text-xs text-muted-foreground">{coupon.description}</p>
+
+                  {coupon.minimumOrderValue && (
+                    <div className="text-[11px] text-muted-foreground/90">
+                      Min. spend: <strong>${coupon.minimumOrderValue}</strong>
+                    </div>
+                  )}
+                </div>
+
+                {/* Bottom Actions */}
+                <div className="mt-4 pt-3 border-t border-border/60 border-dashed flex items-center justify-between gap-2">
+                  {/* Code pill */}
+                  <button
+                    type="button"
+                    onClick={() => handleCopy(coupon.code)}
+                    className="flex items-center gap-1.5 rounded-lg border border-border/80 bg-muted/40 px-2.5 py-1 text-xs font-mono font-bold text-foreground hover:bg-muted transition-colors"
+                  >
+                    <span>{coupon.code}</span>
+                    {isCopied ? (
+                      <CheckIcon className="size-3 text-emerald-600" />
+                    ) : (
+                      <CopyIcon className="size-3 text-muted-foreground" />
+                    )}
+                  </button>
+
+                  {isApplied ? (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="h-7 text-xs text-destructive hover:bg-destructive/10"
+                      onClick={onRemoveCoupon}
+                    >
+                      Remove
+                    </Button>
+                  ) : (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="h-7 text-xs"
+                      onClick={() => onApplyCoupon?.(coupon.code)}
+                    >
+                      Apply Code
+                    </Button>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/blocks/ecommerce/coupon-wallet/index.ts

@@ -0,0 +1,2 @@
+export * from './coupon-wallet'
+export * from './coupon-wallet-types'

package/src/blocks/ecommerce/delivery-tracker/delivery-tracker-types.ts

@@ -0,0 +1,20 @@
+export type DeliveryMilestone = {
+  readonly date?: string
+  readonly description?: string
+  readonly id: string
+  readonly location?: string
+  readonly status: 'completed' | 'current' | 'pending'
+  readonly time?: string
+  readonly title: string
+}
+
+export type DeliveryTrackerProps = {
+  readonly carrierName?: string
+  readonly className?: string
+  readonly deliveryAddress?: string
+  readonly estimatedDelivery: string
+  readonly milestones: readonly DeliveryMilestone[]
+  readonly orderId: string
+  readonly onTrackCarrier?: () => void
+  readonly trackingNumber: string
+}

package/src/blocks/ecommerce/delivery-tracker/delivery-tracker.tsx

@@ -0,0 +1,169 @@
+import { CheckCircle2Icon, ClockIcon, ExternalLinkIcon, MapPinIcon, TruckIcon } from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Button } from '../../../components/button'
+import { Badge } from '../../../components/badge'
+import type { DeliveryTrackerProps } from './delivery-tracker-types'
+
+export function DeliveryTracker({
+  carrierName = 'FedEx Express',
+  className,
+  deliveryAddress,
+  estimatedDelivery,
+  milestones,
+  onTrackCarrier,
+  orderId,
+  trackingNumber,
+}: DeliveryTrackerProps) {
+  const currentMilestone =
+    milestones.find((m) => m.status === 'current') ?? milestones[milestones.length - 1]
+
+  return (
+    <div
+      className={cn(
+        'space-y-6 rounded-2xl border border-border/80 bg-card p-6 shadow-xs',
+        className,
+      )}
+    >
+      {/* Header Info */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-border/60 pb-5">
+        <div>
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-semibold text-muted-foreground">Order #{orderId}</span>
+            <Badge variant="secondary" className="text-[10px] font-bold">
+              {carrierName}
+            </Badge>
+          </div>
+          <h3 className="text-lg font-bold text-foreground mt-0.5">
+            Estimated Delivery: <span className="text-primary">{estimatedDelivery}</span>
+          </h3>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Tracking Number:{' '}
+            <span className="font-mono font-semibold text-foreground">{trackingNumber}</span>
+          </p>
+        </div>
+
+        {onTrackCarrier && (
+          <Button
+            size="sm"
+            variant="outline"
+            className="gap-1.5 text-xs self-start sm:self-auto"
+            onClick={onTrackCarrier}
+          >
+            <span>Track on {carrierName}</span>
+            <ExternalLinkIcon className="size-3.5" />
+          </Button>
+        )}
+      </div>
+
+      {/* Horizontal Milestone Tracker */}
+      <div className="py-2">
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+          {milestones.map((step, idx) => {
+            const isCompleted = step.status === 'completed'
+            const isCurrent = step.status === 'current'
+
+            return (
+              <div key={step.id} className="relative flex flex-col items-start space-y-2">
+                {/* Step indicator circle */}
+                <div className="flex items-center w-full">
+                  <div
+                    className={cn(
+                      'flex size-8 shrink-0 items-center justify-center rounded-full text-xs font-bold transition-all',
+                      isCompleted && 'bg-emerald-600 text-white',
+                      isCurrent &&
+                        'bg-primary text-primary-foreground ring-4 ring-primary/20 animate-pulse',
+                      !isCompleted && !isCurrent && 'bg-muted text-muted-foreground',
+                    )}
+                  >
+                    {isCompleted ? (
+                      <CheckCircle2Icon className="size-4" />
+                    ) : isCurrent ? (
+                      <TruckIcon className="size-4" />
+                    ) : (
+                      <span>{idx + 1}</span>
+                    )}
+                  </div>
+                  {idx < milestones.length - 1 && (
+                    <div
+                      className={cn(
+                        'h-1 w-full ml-2 rounded-full hidden sm:block',
+                        isCompleted ? 'bg-emerald-600' : 'bg-border/60',
+                      )}
+                    />
+                  )}
+                </div>
+
+                <div className="text-left space-y-0.5">
+                  <h5
+                    className={cn(
+                      'text-xs font-bold',
+                      isCurrent ? 'text-primary' : 'text-foreground',
+                    )}
+                  >
+                    {step.title}
+                  </h5>
+                  {step.date && <p className="text-[11px] text-muted-foreground">{step.date}</p>}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Status Highlights & Destination */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 rounded-xl border border-border/60 bg-muted/20 p-4 text-xs">
+        <div className="space-y-1">
+          <div className="flex items-center gap-1.5 font-bold text-foreground">
+            <ClockIcon className="size-3.5 text-primary" />
+            <span>Latest Update</span>
+          </div>
+          <p className="text-muted-foreground">{currentMilestone?.description ?? 'In transit'}</p>
+          {currentMilestone?.location && (
+            <p className="text-[11px] text-muted-foreground/80 font-medium">
+              Location: {currentMilestone.location}
+            </p>
+          )}
+        </div>
+
+        {deliveryAddress && (
+          <div className="space-y-1 md:border-l md:border-border/60 md:pl-4">
+            <div className="flex items-center gap-1.5 font-bold text-foreground">
+              <MapPinIcon className="size-3.5 text-primary" />
+              <span>Destination Address</span>
+            </div>
+            <p className="text-muted-foreground">{deliveryAddress}</p>
+          </div>
+        )}
+      </div>
+
+      {/* Detailed Tracking Events List */}
+      <div className="space-y-3 pt-2">
+        <h5 className="text-xs font-bold text-foreground uppercase tracking-wider">
+          Tracking History
+        </h5>
+        <div className="space-y-3 border-l-2 border-border/80 pl-4 ml-1">
+          {milestones.map((m) => (
+            <div key={m.id} className="relative space-y-0.5 text-xs">
+              <div
+                className={cn(
+                  'absolute -left-[21px] top-1 size-2 rounded-full',
+                  m.status === 'completed'
+                    ? 'bg-emerald-600'
+                    : m.status === 'current'
+                      ? 'bg-primary ring-2 ring-primary/30'
+                      : 'bg-muted-foreground/40',
+                )}
+              />
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="font-semibold text-foreground">{m.title}</span>
+                <span className="text-[11px] text-muted-foreground">{m.time ?? m.date}</span>
+              </div>
+              {m.description && <p className="text-muted-foreground">{m.description}</p>}
+              {m.location && <p className="text-[10px] text-muted-foreground/70">{m.location}</p>}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/blocks/ecommerce/delivery-tracker/index.ts

@@ -0,0 +1,2 @@
+export * from './delivery-tracker'
+export * from './delivery-tracker-types'

package/src/blocks/ecommerce/index.ts

@@ -0,0 +1,12 @@
+export * from './cart'
+export * from './categories'
+export * from './checkout'
+export * from './comparison'
+export * from './coupon-wallet'
+export * from './delivery-tracker'
+export * from './payment-methods'
+export * from './price-history'
+export * from './reviews'
+export * from './wishlist'
+export * from '../product-card'
+export * from '../pricing'

package/src/blocks/ecommerce/payment-methods/index.ts

@@ -0,0 +1,2 @@
+export * from './payment-method-selector'
+export * from './payment-methods-types'

package/src/blocks/ecommerce/payment-methods/payment-method-selector.tsx

@@ -0,0 +1,224 @@
+import { useState } from 'react'
+import {
+  BanknoteIcon,
+  CreditCardIcon,
+  PlusIcon,
+  QrCodeIcon,
+  ShieldCheckIcon,
+  WalletIcon,
+} from 'lucide-react'
+import { cn } from '../../../lib/utils'
+import { Button } from '../../../components/button'
+import { Badge } from '../../../components/badge'
+import type { PaymentMethodSelectorProps } from './payment-methods-types'
+
+export function PaymentMethodSelector({
+  allowCOD = true,
+  className,
+  onAddNewCard,
+  onSelectMethod,
+  savedCards,
+  selectedMethod: initialMethod = 'card',
+}: PaymentMethodSelectorProps) {
+  const [method, setMethod] = useState<'card' | 'upi' | 'wallet' | 'cod'>(initialMethod)
+  const [selectedCardId, setSelectedCardId] = useState<string>(
+    savedCards.find((c) => c.isDefault)?.id ?? savedCards[0]?.id ?? '',
+  )
+  const [cvv, setCvv] = useState('')
+  const [upiId, setUpiId] = useState('')
+
+  const handleMethodChange = (newMethod: 'card' | 'upi' | 'wallet' | 'cod') => {
+    setMethod(newMethod)
+    onSelectMethod?.(newMethod, { cardId: selectedCardId, upiId })
+  }
+
+  return (
+    <div
+      className={cn(
+        'space-y-6 rounded-2xl border border-border/80 bg-card p-6 shadow-xs',
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between border-b border-border/60 pb-4">
+        <div>
+          <h3 className="text-base font-bold text-foreground">Payment Options</h3>
+          <p className="text-xs text-muted-foreground">
+            Select how you would like to complete your purchase.
+          </p>
+        </div>
+        <div className="flex items-center gap-1.5 text-xs text-emerald-600 font-semibold">
+          <ShieldCheckIcon className="size-4" />
+          <span>PCI-DSS Compliant</span>
+        </div>
+      </div>
+
+      {/* Main Method Selector Tabs */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        {[
+          { id: 'card', label: 'Cards', icon: CreditCardIcon },
+          { id: 'upi', label: 'UPI / QR', icon: QrCodeIcon },
+          { id: 'wallet', label: 'Wallets', icon: WalletIcon },
+          ...(allowCOD ? [{ id: 'cod', label: 'Cash on Delivery', icon: BanknoteIcon }] : []),
+        ].map((m) => {
+          const Icon = m.icon
+          const isSelected = method === m.id
+
+          return (
+            <button
+              key={m.id}
+              type="button"
+              onClick={() => handleMethodChange(m.id as 'card' | 'upi' | 'wallet' | 'cod')}
+              className={cn(
+                'flex flex-col items-center justify-center p-3 rounded-xl border text-xs font-bold transition-all gap-2',
+                isSelected
+                  ? 'border-primary bg-primary/10 text-primary ring-1 ring-primary shadow-xs'
+                  : 'border-border/80 bg-muted/20 text-muted-foreground hover:border-border hover:text-foreground',
+              )}
+            >
+              <Icon className="size-5" />
+              <span>{m.label}</span>
+            </button>
+          )
+        })}
+      </div>
+
+      {/* 1. Credit / Debit Cards Mode */}
+      {method === 'card' && (
+        <div className="space-y-4 pt-2">
+          <div className="flex items-center justify-between">
+            <span className="text-xs font-bold text-foreground">Your Saved Cards</span>
+            {onAddNewCard && (
+              <Button
+                size="sm"
+                variant="ghost"
+                className="h-7 text-xs gap-1"
+                onClick={onAddNewCard}
+              >
+                <PlusIcon className="size-3.5" />
+                <span>Add Card</span>
+              </Button>
+            )}
+          </div>
+
+          <div className="space-y-2.5">
+            {savedCards.map((card) => {
+              const isSelected = selectedCardId === card.id
+
+              return (
+                <div
+                  key={card.id}
+                  onClick={() => {
+                    setSelectedCardId(card.id)
+                    onSelectMethod?.('card', { cardId: card.id })
+                  }}
+                  className={cn(
+                    'flex flex-col sm:flex-row sm:items-center justify-between gap-3 p-3.5 rounded-xl border cursor-pointer transition-all text-xs',
+                    isSelected
+                      ? 'border-primary bg-primary/5 ring-1 ring-primary'
+                      : 'border-border/80 bg-muted/10 hover:border-border',
+                  )}
+                >
+                  <div className="flex items-center gap-3">
+                    <div className="flex size-9 items-center justify-center rounded-lg bg-background border border-border/80 font-mono font-bold uppercase text-[10px]">
+                      {card.brand}
+                    </div>
+                    <div>
+                      <div className="flex items-center gap-2 font-bold text-foreground">
+                        <span>•••• •••• •••• {card.last4}</span>
+                        {card.isDefault && (
+                          <Badge variant="secondary" className="text-[10px] py-0 font-semibold">
+                            Default
+                          </Badge>
+                        )}
+                      </div>
+                      <div className="text-[11px] text-muted-foreground mt-0.5">
+                        {card.cardholderName} • Expires {card.expiryMonth}/{card.expiryYear}
+                      </div>
+                    </div>
+                  </div>
+
+                  {isSelected && (
+                    <div
+                      className="flex items-center gap-2 self-end sm:self-center"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <span className="text-[11px] font-semibold text-foreground">CVV:</span>
+                      <input
+                        type="password"
+                        maxLength={4}
+                        placeholder="•••"
+                        value={cvv}
+                        onChange={(e) => setCvv(e.target.value)}
+                        className="w-14 rounded border border-input bg-background px-2 py-1 text-center font-mono text-xs focus:outline-none focus:ring-1 focus:ring-primary"
+                      />
+                    </div>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* 2. UPI / QR Mode */}
+      {method === 'upi' && (
+        <div className="space-y-3 rounded-xl border border-border/80 bg-muted/20 p-4 text-xs">
+          <div className="flex items-center gap-2 font-bold text-foreground">
+            <QrCodeIcon className="size-4 text-primary" />
+            <span>Instant UPI Payment</span>
+          </div>
+          <p className="text-muted-foreground">
+            Pay directly from Google Pay, PhonePe, Paytm, or BHIM.
+          </p>
+          <div className="flex gap-2 pt-1">
+            <input
+              type="text"
+              placeholder="e.g. mobileNumber@upi or user@okhdfcbank"
+              value={upiId}
+              onChange={(e) => setUpiId(e.target.value)}
+              className="flex-1 rounded-lg border border-input bg-background px-3 py-2 text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
+            />
+            <Button
+              size="sm"
+              disabled={!upiId.includes('@')}
+              onClick={() => onSelectMethod?.('upi', { upiId })}
+            >
+              Verify UPI ID
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* 3. Wallets Mode */}
+      {method === 'wallet' && (
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 pt-1">
+          {['Apple Pay', 'Google Pay', 'PayPal'].map((wallet) => (
+            <button
+              key={wallet}
+              type="button"
+              onClick={() => onSelectMethod?.('wallet')}
+              className="flex items-center justify-center gap-2 p-4 rounded-xl border border-border/80 bg-muted/20 hover:border-primary hover:bg-primary/5 transition-all text-xs font-bold text-foreground"
+            >
+              <WalletIcon className="size-4 text-primary" />
+              <span>{wallet}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* 4. Cash on Delivery Mode */}
+      {method === 'cod' && (
+        <div className="rounded-xl border border-border/80 bg-muted/20 p-4 text-xs space-y-2">
+          <div className="flex items-center gap-2 font-bold text-foreground">
+            <BanknoteIcon className="size-4 text-primary" />
+            <span>Pay with Cash Upon Delivery</span>
+          </div>
+          <p className="text-muted-foreground">
+            You can pay the courier agent via cash or mobile QR scan at your doorstep. Please keep
+            exact change ready.
+          </p>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/blocks/ecommerce/payment-methods/payment-methods-types.ts

@@ -0,0 +1,21 @@
+export type SavedCard = {
+  readonly brand: 'visa' | 'mastercard' | 'amex' | 'discover'
+  readonly cardholderName: string
+  readonly expiryMonth: string
+  readonly expiryYear: string
+  readonly id: string
+  readonly isDefault?: boolean
+  readonly last4: string
+}
+
+export type PaymentMethodSelectorProps = {
+  readonly allowCOD?: boolean
+  readonly className?: string
+  readonly onAddNewCard?: () => void
+  readonly onSelectMethod?: (
+    method: 'card' | 'upi' | 'wallet' | 'cod',
+    details?: { cardId?: string; upiId?: string },
+  ) => void
+  readonly savedCards: readonly SavedCard[]
+  readonly selectedMethod?: 'card' | 'upi' | 'wallet' | 'cod'
+}

package/src/blocks/ecommerce/price-history/index.ts

@@ -0,0 +1,2 @@
+export * from './price-history-chart'
+export * from './price-history-types'