@instockng/storefront-ui 1.0.10 → 1.0.11

package/src/components/DiscountCodeInput.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DiscountCodeInput } from './DiscountCodeInput';
+import { MockCartProvider } from '@/test-utils/MockCartProvider';
+
+const meta = {
+  title: 'Components/DiscountCodeInput',
+  component: DiscountCodeInput,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DiscountCodeInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [
+    (Story) => (
+      <MockCartProvider>
+        <Story />
+      </MockCartProvider>
+    ),
+  ],
+  args: {
+    onSuccess: () => {
+      console.log('Discount applied successfully');
+    },
+  },
+};
+
+export const WithCurrentCode: Story = {
+  decorators: [
+    (Story) => (
+      <MockCartProvider
+        cart={{
+          pricing: {
+            discount: {
+              code: 'SAVE20',
+              type: 'percentage',
+              value: 20,
+              amount: 2000,
+              description: '20% off your order',
+            },
+            subtotal: 10000,
+            deliveryCharge: 0,
+            total: 8000,
+          },
+        }}
+      >
+        <Story />
+      </MockCartProvider>
+    ),
+  ],
+  args: {
+    onSuccess: () => {
+      console.log('Discount applied successfully');
+    },
+  },
+};
+
+export const WithCustomPlaceholder: Story = {
+  decorators: [
+    (Story) => (
+      <MockCartProvider>
+        <Story />
+      </MockCartProvider>
+    ),
+  ],
+  args: {
+    placeholder: 'Enter promo code here',
+    onSuccess: () => {
+      console.log('Discount applied successfully');
+    },
+  },
+};

package/src/components/DiscountCodeInput.tsx

@@ -0,0 +1,162 @@
+/**
+ * DiscountCodeInput Component
+ *
+ * Input field for applying/removing discount codes with validation feedback.
+ * Uses CartProvider for cart operations.
+ */
+
+import { useState } from 'react';
+import { useCart } from '../contexts/CartContext';
+import { Card, CardContent } from './ui/card';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import { Tag, X, CheckCircle, AlertCircle } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export interface DiscountCodeInputProps {
+  /** Callback on successful apply/remove */
+  onSuccess?: () => void;
+  /** Custom class name */
+  className?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Custom class name for the input */
+  inputClassName?: string;
+  /** Custom class name for the apply button */
+  buttonClassName?: string;
+}
+
+export function DiscountCodeInput({
+  onSuccess,
+  className,
+  placeholder = 'Enter discount code',
+  inputClassName,
+  buttonClassName,
+}: DiscountCodeInputProps) {
+  const [code, setCode] = useState('');
+  const [successMessage, setSuccessMessage] = useState('');
+  const [isApplying, setIsApplying] = useState(false);
+  const [isRemoving, setIsRemoving] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('');
+
+  const { applyDiscount, removeDiscount, cart } = useCart();
+
+  const handleApply = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!code.trim()) return;
+
+    setIsApplying(true);
+    setErrorMessage('');
+    try {
+      await applyDiscount(code.trim());
+      setSuccessMessage('Discount code applied!');
+      setCode('');
+      setTimeout(() => setSuccessMessage(''), 3000);
+      onSuccess?.();
+    } catch (err: any) {
+      setErrorMessage(err?.message || 'Invalid or expired discount code');
+    } finally {
+      setIsApplying(false);
+    }
+  };
+
+  const handleRemove = async () => {
+    setIsRemoving(true);
+    setErrorMessage('');
+    try {
+      await removeDiscount();
+      setSuccessMessage('Discount code removed');
+      setTimeout(() => setSuccessMessage(''), 3000);
+      onSuccess?.();
+    } catch (err: any) {
+      setErrorMessage(err?.message || 'Failed to remove discount code');
+    } finally {
+      setIsRemoving(false);
+    }
+  };
+
+  return (
+    <div className={cn('', className)}>
+      <div className="pt-6">
+        <div className="space-y-3">
+          {/* Label */}
+          <div className="flex items-center gap-2 text-sm font-medium">
+            <Tag className="h-4 w-4" />
+            Discount Code
+          </div>
+
+          {/* Current Code Display */}
+          {cart && cart.pricing.discount && (
+            <div className="flex items-center justify-between rounded-md bg-green-50 p-3">
+              <div className="flex items-center gap-2">
+                <CheckCircle className="h-4 w-4 text-green-600" />
+                <span className="text-sm font-medium text-green-900">
+                  Code Applied:
+                </span>
+                <Badge className="bg-green-600 text-white">{cart.pricing.discount.code}</Badge>
+              </div>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleRemove}
+                disabled={isRemoving}
+                className="h-8 px-2 text-green-700 hover:text-green-800"
+              >
+                {isRemoving ? (
+                  'Removing...'
+                ) : (
+                  <>
+                    <X className="h-4 w-4" />
+                  </>
+                )}
+              </Button>
+            </div>
+          )}
+
+          {/* Input Form */}
+          {!cart?.pricing?.discount && (
+            <form onSubmit={handleApply} className="flex gap-2">
+              <input
+                type="text"
+                value={code}
+                onChange={(e) => setCode(e.target.value.toUpperCase())}
+                placeholder={placeholder}
+                disabled={isApplying}
+                className={cn(
+                  'flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm',
+                  'focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50',
+                  'disabled:cursor-not-allowed disabled:opacity-50',
+                  errorMessage && 'border-red-500 focus:border-red-500 focus:ring-red-500',
+                  inputClassName
+                )}
+              />
+              <Button
+                type="submit"
+                disabled={!code.trim() || isApplying}
+                className={cn('bg-accent-500 text-white hover:bg-accent-600', buttonClassName)}
+              >
+                {isApplying ? 'Applying...' : 'Apply'}
+              </Button>
+            </form>
+          )}
+
+          {/* Error Message */}
+          {errorMessage && (
+            <div className="flex items-center gap-2 text-sm text-red-600">
+              <AlertCircle className="h-4 w-4" />
+              {errorMessage}
+            </div>
+          )}
+
+          {/* Success Message */}
+          {successMessage && (
+            <div className="flex items-center gap-2 text-sm text-green-600">
+              <CheckCircle className="h-4 w-4" />
+              {successMessage}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/OrderConfirmation.stories.tsx

@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { OrderConfirmation } from './OrderConfirmation';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { fn } from '@storybook/test';
+
+// Mock order data
+const mockOrderResponse = {
+  order: {
+    id: 'order-123',
+    orderNumber: 1234,
+    status: 'prospect' as const,
+    brand: {
+      name: 'Fashion Store',
+      logoUrl: 'https://via.placeholder.com/150x50/4F46E5/FFFFFF?text=Fashion+Store',
+    },
+    customer: {
+      firstName: 'John',
+      lastName: 'Doe',
+      phone: '+1234567890',
+      address: '123 Main St',
+      city: 'New York',
+    },
+    items: [
+      {
+        id: 'item-1',
+        variant: {
+          name: 'Medium - Blue',
+          price: '29.99',
+          sku: 'TSHIRT-MD-BLUE',
+          product: {
+            name: 'Premium Cotton T-Shirt',
+            imageUrl: 'https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=400',
+          },
+        },
+        quantity: 2,
+        subtotal: '59.98',
+      },
+      {
+        id: 'item-2',
+        variant: {
+          name: 'Large - Black',
+          price: '59.99',
+          sku: 'JEANS-LG-BLACK',
+          product: {
+            name: 'Slim Fit Jeans',
+            imageUrl: 'https://images.unsplash.com/photo-1542272604-787c3835535d?w=400',
+          },
+        },
+        quantity: 1,
+        subtotal: '59.99',
+      },
+    ],
+    subtotal: '119.97',
+    deliveryFee: '5.99',
+    total: '125.96',
+    deliveryZone: {
+      name: 'Manhattan Downtown',
+    },
+    paymentMethod: 'cod' as const,
+    createdAt: new Date().toISOString(),
+  },
+  canConfirm: true,
+  confirmationMessage: 'Please review your order details and click confirm to proceed.',
+};
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      queryFn: async () => mockOrderResponse,
+    },
+  },
+});
+
+const meta: Meta<typeof OrderConfirmation> = {
+  title: 'Components/OrderConfirmation',
+  component: OrderConfirmation,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <Story />
+      </QueryClientProvider>
+    ),
+  ],
+} satisfies Meta<typeof OrderConfirmation>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    orderId: 'order-123',
+    token: 'token-abc',
+  },
+};
+
+export const WithBrandLogo: Story = {
+  args: {
+    orderId: 'order-123',
+    token: 'token-abc',
+  },
+};
+
+export const CustomCurrency: Story = {
+  args: {
+    orderId: 'order-123',
+    token: 'token-abc',
+    currency: 'EUR',
+    locale: 'de-DE',
+  },
+};
+
+export const CustomWhatsApp: Story = {
+  args: {
+    orderId: 'order-123',
+    token: 'token-abc',
+    whatsappHelpLink: 'https://wa.me/1234567890',
+    whatsappHelpNumber: '+1 (234) 567-890',
+  },
+};
+
+export const WithCallbacks: Story = {
+  args: {
+    orderId: 'order-123',
+    token: 'token-abc',
+  },
+};
+
+export const CustomStyling: Story = {
+  args: {
+    orderId: 'order-123',
+    token: 'token-abc',
+    className: 'bg-blue-50',
+    headerClassName: 'text-blue-900',
+    buttonClassName: 'bg-blue-600 hover:bg-blue-700',
+    cardClassName: 'border-blue-200 shadow-xl',
+  },
+};

package/src/components/OrderConfirmation.tsx

@@ -0,0 +1,301 @@
+/**
+ * OrderConfirmation Component
+ *
+ * A pre-built order confirmation page for e-commerce sites.
+ * Displays order details and allows customers to confirm prospect orders.
+ */
+
+import { useState } from 'react';
+import { useGetOrder, useConfirmOrder } from '@oms/api-client';
+import { WHATSAPP_HELP_LINK, WHATSAPP_HELP_NUMBER_FORMATTED } from '@oms/shared';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import { CheckCircle, XCircle, Loader2, Package } from 'lucide-react';
+import { formatCurrency, formatDateTime, cn } from '../lib/utils';
+
+export interface OrderConfirmationProps {
+  /** Order UUID */
+  orderId: string;
+  /** User action token for authentication */
+  token: string;
+
+  /** Custom class name for root container */
+  className?: string;
+  /** Custom class name for header section */
+  headerClassName?: string;
+  /** Custom class name for buttons */
+  buttonClassName?: string;
+  /** Custom class name for cards */
+  cardClassName?: string;
+
+  /** WhatsApp help link (defaults to shared constant) */
+  whatsappHelpLink?: string;
+  /** WhatsApp help number formatted (defaults to shared constant) */
+  whatsappHelpNumber?: string;
+
+  /** Currency code for formatting */
+  currency?: string;
+  /** Locale for date/currency formatting */
+  locale?: string;
+}
+
+export function OrderConfirmation({
+  orderId,
+  token,
+  className,
+  headerClassName,
+  buttonClassName,
+  cardClassName,
+  whatsappHelpLink = WHATSAPP_HELP_LINK,
+  whatsappHelpNumber = WHATSAPP_HELP_NUMBER_FORMATTED,
+  currency = 'NGN',
+  locale = 'en-NG',
+}: OrderConfirmationProps) {
+  const [confirmed, setConfirmed] = useState(false);
+
+  const { data, isLoading, error } = useGetOrder(orderId, token, {
+    retry: false,
+  });
+
+  const confirmMutation = useConfirmOrder({
+    onSuccess: (response) => {
+      setConfirmed(true);
+    },
+    onError: (err) => {
+      // TODO: Sentry
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <div className={cn("min-h-screen bg-gray-50 flex items-center justify-center", className)}>
+        <div className="text-center">
+          <Loader2 className="h-12 w-12 animate-spin text-blue-500 mx-auto mb-4" />
+          <p className="text-gray-600">Loading order details...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !data || "error" in data) {
+    return (
+      <div className={cn("min-h-screen bg-gray-50 flex items-center justify-center p-4", className)}>
+        <Card className={cn("max-w-md w-full", cardClassName)}>
+          <CardHeader>
+            <div className="flex items-center space-x-2">
+              <XCircle className="h-6 w-6 text-red-500" />
+              <CardTitle>Order Not Found</CardTitle>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <p className="text-gray-600">
+              We couldn't find this order. The link may be invalid or expired. Please contact support if you need assistance.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  // The order is returned directly from the API now
+  const order = data;
+
+  return (
+    <div className={cn("min-h-screen bg-gray-50 py-8 px-4", className)}>
+      <div className="max-w-3xl mx-auto space-y-6">
+        {/* Header */}
+        <div className={cn("text-center", headerClassName)}>
+          {order.brand.logoUrl ? (
+            <div className="inline-flex items-center justify-center w-24 h-16 mb-4">
+              <img
+                src={order.brand.logoUrl}
+                alt={`${order.brand.name} logo`}
+                className="max-w-full max-h-full object-contain"
+              />
+            </div>
+          ) : (
+            <div className="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
+              <Package className="h-8 w-8 text-blue-600" />
+            </div>
+          )}
+          <h1 className="text-3xl font-bold text-gray-900">Order #{order.orderNumber}</h1>
+          <p className="text-gray-600 mt-2">{order.brand.name}</p>
+        </div>
+
+        {/* Confirmation Status */}
+        {confirmed && (
+          <Card className={cn("border-green-200 bg-green-50", cardClassName)}>
+            <CardContent className="pt-6">
+              <div className="flex items-start space-x-3">
+                <CheckCircle className="h-6 w-6 text-green-600 mt-0.5" />
+                <div>
+                  <h3 className="font-semibold text-green-900">Order Confirmed!</h3>
+                  <p className="text-green-700 mt-1">
+                    Thank you for confirming your order. We will contact you soon to arrange delivery.
+                  </p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Status Message */}
+        {!confirmed && order.confirmationMessage && (
+          <Card className={cn(order.canConfirm ? 'border-orange-200 bg-orange-50' : '', cardClassName)}>
+            <CardContent className="pt-6">
+              <p className={order.canConfirm ? 'text-orange-900' : 'text-gray-700'}>
+                {order.confirmationMessage}
+              </p>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Confirm Button */}
+        {order.canConfirm && !confirmed && (
+          <Card className={cardClassName}>
+            <CardContent className="pt-6">
+              <Button
+                onClick={() => confirmMutation.mutate({ orderId, token })}
+                disabled={confirmMutation.isPending}
+                className={cn("w-full", buttonClassName)}
+                size="lg"
+              >
+                {confirmMutation.isPending ? (
+                  <>
+                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                    Confirming...
+                  </>
+                ) : (
+                  'Confirm Order'
+                )}
+              </Button>
+              {confirmMutation.isError && (
+                <p className="text-red-600 text-sm mt-2 text-center">
+                  Failed to confirm order. Please try again or contact support.
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Order Details */}
+        <Card className={cardClassName}>
+          <CardHeader>
+            <CardTitle>Order Details</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <p className="text-sm text-gray-600">Status</p>
+                <Badge className="mt-1">{order.status}</Badge>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Order Date</p>
+                <p className="font-medium">{order.createdAt ? formatDateTime(order.createdAt) : 'N/A'}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Payment Method</p>
+                <p className="font-medium">{order.paymentMethod === 'cod' ? 'Cash on Delivery' : 'Online Payment'}</p>
+              </div>
+              <div>
+                <p className="text-sm text-gray-600">Estimated Delivery</p>
+                <p className="font-medium">{order.estimatedDays ? `${order.estimatedDays} days` : 'TBD'}</p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Delivery Information */}
+        <Card className={cardClassName}>
+          <CardHeader>
+            <CardTitle>Delivery Information</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div>
+              <p className="text-sm text-gray-600">Customer</p>
+              <p className="font-medium">{order.firstName} {order.lastName}</p>
+              <p className="text-sm text-gray-600">{order.phone}</p>
+            </div>
+            <div>
+              <p className="text-sm text-gray-600">Address</p>
+              <p className="font-medium">{order.address}</p>
+              <p className="text-sm text-gray-600">{order.city}, {order.deliveryZone.state.name}</p>
+              <p className="text-sm text-gray-600">{order.deliveryZone.name}</p>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Order Items */}
+        <Card className={cardClassName}>
+          <CardHeader>
+            <CardTitle>Items</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {order.items?.map((item) => (
+                <div key={item.id} className="flex items-start justify-between border-b pb-4 last:border-0">
+                  <div className="flex items-start space-x-4 flex-1">
+                    {(item.variant.thumbnailUrl || item.variant.product.thumbnailUrl) && (
+                      <img
+                        src={item.variant.thumbnailUrl || item.variant.product.thumbnailUrl || undefined}
+                        alt={item.variant.product.name}
+                        className="w-16 h-16 object-cover rounded"
+                      />
+                    )}
+                    <div className="flex-1">
+                      <p className="font-medium">{item.variant.product.name}</p>
+                      {item.variant.name && (
+                        <Badge variant="outline" className="mt-1">{item.variant.name}</Badge>
+                      )}
+                      <p className="text-sm text-gray-600 mt-1">Quantity: {item.quantity}</p>
+                      <p className="text-sm text-gray-600">SKU: {item.variant.sku}</p>
+                    </div>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-medium">{formatCurrency(item.priceAtPurchase * item.quantity)}</p>
+                    <p className="text-sm text-gray-600">{formatCurrency(item.priceAtPurchase)} each</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* Order Summary */}
+            <div className="mt-6 border-t pt-4 space-y-2">
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600">Subtotal</span>
+                <span className="font-medium">{formatCurrency(order.subtotal)}</span>
+              </div>
+              {order.discountAmount && order.discountAmount > 0 && (
+                <div className="flex justify-between text-sm text-green-600">
+                  <span>Discount</span>
+                  <span>-{formatCurrency(order.discountAmount)}</span>
+                </div>
+              )}
+              <div className="flex justify-between text-sm">
+                <span className="text-gray-600">Delivery Charge</span>
+                <span className="font-medium">{formatCurrency(order.deliveryCharge)}</span>
+              </div>
+              <div className="flex justify-between text-lg font-bold border-t pt-2">
+                <span>Total</span>
+                <span>{formatCurrency(order.totalPrice)}</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Support */}
+        <Card className={cardClassName}>
+          <CardContent className="pt-6">
+            <p className="text-sm text-gray-600 text-center">
+              Need help with your order? Call us on {whatsappHelpNumber} or contact us on{' '}
+              <a href={whatsappHelpLink} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
+                WhatsApp
+              </a>
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}