@4alldigital/foundation-ui--core 3.4.1 → 3.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.4.1",
+  "version": "3.5.1",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,5 +32,5 @@
   },
   "author": "Joe Mewes",
   "license": "MIT",
-  "gitHead": "c0bf0a089038c5d82870b126bec475a1b16f0f37"
+  "gitHead": "e8ca79ab96c86064d214da737e4d87df759c1d29"
 }

package/src/components/AddressForm/AddressForm.tsx

@@ -0,0 +1,211 @@
+import * as React from 'react';
+import { useState, useEffect } from 'react';
+import { cn } from '../../utils';
+import { AddressFormProps, ShippingAddress, AddressErrors } from './AddressForm.types';
+import TextInput from '../TextInput';
+import FormSelect from '../FormSelect';
+
+// Common countries
+const COUNTRIES = [
+  { value: 'GB', label: 'United Kingdom' },
+  { value: 'US', label: 'United States' },
+  { value: 'CA', label: 'Canada' },
+  { value: 'AU', label: 'Australia' },
+  { value: 'DE', label: 'Germany' },
+  { value: 'FR', label: 'France' },
+  { value: 'ES', label: 'Spain' },
+  { value: 'IT', label: 'Italy' },
+  { value: 'NL', label: 'Netherlands' },
+  { value: 'IE', label: 'Ireland' },
+];
+
+export const AddressForm = React.forwardRef<HTMLDivElement, AddressFormProps>(
+  ({ value = {}, onChange, onValidationChange, disabled = false, className, testID }, ref) => {
+    const [address, setAddress] = useState<Partial<ShippingAddress>>(value);
+    const [errors, setErrors] = useState<AddressErrors>({});
+    const [touched, setTouched] = useState<Record<string, boolean>>({});
+
+    // Validate field
+    const validateField = (name: keyof ShippingAddress, val: string): string | undefined => {
+      if (!val && name !== 'line2' && name !== 'phone') {
+        return 'This field is required';
+      }
+
+      if (name === 'postal_code' && val) {
+        // Basic postal code validation
+        if (val.length < 3) {
+          return 'Invalid postal code';
+        }
+      }
+
+      if (name === 'phone' && val) {
+        // Basic phone validation
+        if (val.length < 10) {
+          return 'Invalid phone number';
+        }
+      }
+
+      return undefined;
+    };
+
+    // Validate all fields
+    const validateForm = (): boolean => {
+      const newErrors: AddressErrors = {};
+      let isValid = true;
+
+      (['name', 'line1', 'city', 'state', 'postal_code', 'country'] as const).forEach((field) => {
+        const error = validateField(field, address[field] || '');
+        if (error) {
+          newErrors[field] = error;
+          isValid = false;
+        }
+      });
+
+      setErrors(newErrors);
+      return isValid;
+    };
+
+    // Handle field change
+    const handleChange = (name: keyof ShippingAddress, newValue: string) => {
+      const updated = { ...address, [name]: newValue };
+      setAddress(updated);
+
+      // Validate on change if already touched
+      if (touched[name]) {
+        const error = validateField(name, newValue);
+        setErrors((prev) => ({ ...prev, [name]: error }));
+      }
+
+      // Check if form is complete and valid
+      if (
+        updated.name &&
+        updated.line1 &&
+        updated.city &&
+        updated.state &&
+        updated.postal_code &&
+        updated.country
+      ) {
+        onChange(updated as ShippingAddress);
+      }
+    };
+
+    // Handle field blur
+    const handleBlur = (name: keyof ShippingAddress) => {
+      setTouched((prev) => ({ ...prev, [name]: true }));
+      const error = validateField(name, address[name] || '');
+      setErrors((prev) => ({ ...prev, [name]: error }));
+    };
+
+    // Notify validation state
+    useEffect(() => {
+      const isValid = validateForm();
+      onValidationChange?.(isValid);
+    }, [address, onValidationChange]);
+
+    return (
+      <div ref={ref} data-testid={testID || 'AddressForm'} className={cn('space-y-4', className)}>
+        <h3 className="text-lg font-semibold">Shipping Address</h3>
+
+        {/* Full Name */}
+        <TextInput
+          id="shipping-name"
+          placeholder="Full Name"
+          value={address.name || ''}
+          onChange={(e) => handleChange('name', e.target.value)}
+          onBlur={() => handleBlur('name')}
+          disabled={disabled}
+          error={touched.name && errors.name}
+          required
+        />
+
+        {/* Address Line 1 */}
+        <TextInput
+          id="shipping-line1"
+          placeholder="Street Address"
+          value={address.line1 || ''}
+          onChange={(e) => handleChange('line1', e.target.value)}
+          onBlur={() => handleBlur('line1')}
+          disabled={disabled}
+          error={touched.line1 && errors.line1}
+          required
+        />
+
+        {/* Address Line 2 */}
+        <TextInput
+          id="shipping-line2"
+          placeholder="Apartment, suite, etc. (optional)"
+          value={address.line2 || ''}
+          onChange={(e) => handleChange('line2', e.target.value)}
+          disabled={disabled}
+        />
+
+        {/* City and State */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <TextInput
+            id="shipping-city"
+            placeholder="City"
+            value={address.city || ''}
+            onChange={(e) => handleChange('city', e.target.value)}
+            onBlur={() => handleBlur('city')}
+            disabled={disabled}
+            error={touched.city && errors.city}
+            required
+          />
+
+          <TextInput
+            id="shipping-state"
+            placeholder="State / County / Province"
+            value={address.state || ''}
+            onChange={(e) => handleChange('state', e.target.value)}
+            onBlur={() => handleBlur('state')}
+            disabled={disabled}
+            error={touched.state && errors.state}
+            required
+          />
+        </div>
+
+        {/* Postal Code and Country */}
+        <div className="grid gap-4 sm:grid-cols-2">
+          <TextInput
+            id="shipping-postal-code"
+            placeholder="Postal / ZIP Code"
+            value={address.postal_code || ''}
+            onChange={(e) => handleChange('postal_code', e.target.value)}
+            onBlur={() => handleBlur('postal_code')}
+            disabled={disabled}
+            error={touched.postal_code && errors.postal_code}
+            required
+          />
+
+          <FormSelect
+            id="shipping-country"
+            placeholder="Country"
+            value={address.country || ''}
+            onChange={(value) => handleChange('country', value)}
+            onBlur={() => handleBlur('country')}
+            options={COUNTRIES}
+            disabled={disabled}
+            error={touched.country && errors.country}
+            required
+          />
+        </div>
+
+        {/* Phone */}
+        <TextInput
+          id="shipping-phone"
+          type="tel"
+          placeholder="Phone Number (optional)"
+          value={address.phone || ''}
+          onChange={(e) => handleChange('phone', e.target.value)}
+          onBlur={() => handleBlur('phone')}
+          disabled={disabled}
+          error={touched.phone && errors.phone}
+        />
+      </div>
+    );
+  },
+);
+
+AddressForm.displayName = 'AddressForm';
+
+export type { AddressFormProps, ShippingAddress };

package/src/components/AddressForm/AddressForm.types.ts

@@ -0,0 +1,29 @@
+export interface ShippingAddress {
+  name: string;
+  line1: string;
+  line2?: string;
+  city: string;
+  state: string;
+  postal_code: string;
+  country: string;
+  phone?: string;
+}
+
+export interface AddressFormProps {
+  value?: Partial<ShippingAddress>;
+  onChange: (address: ShippingAddress) => void;
+  onValidationChange?: (isValid: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  testID?: string;
+}
+
+export interface AddressErrors {
+  name?: string;
+  line1?: string;
+  city?: string;
+  state?: string;
+  postal_code?: string;
+  country?: string;
+  phone?: string;
+}

package/src/components/AddressForm/index.ts

@@ -0,0 +1,2 @@
+export { AddressForm } from './AddressForm';
+export type { AddressFormProps, ShippingAddress } from './AddressForm.types';

package/src/components/ProductDetail/ProductDetail.tsx

@@ -14,6 +14,7 @@ import {
 } from '../ShadcnCarousel';
 import Image from '../Image';
 import Tabs from '../Tabs';
+import { AddressForm, type ShippingAddress } from '../AddressForm';
 import { Minus, Plus, ShoppingCart } from 'lucide-react';
 
 export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps>(
@@ -21,6 +22,8 @@ export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps
     const [selectedSize, setSelectedSize] = useState<string | undefined>();
     const [selectedColor, setSelectedColor] = useState<string | undefined>();
     const [quantity, setQuantity] = useState(1);
+    const [shippingAddress, setShippingAddress] = useState<ShippingAddress | undefined>();
+    const [isShippingValid, setIsShippingValid] = useState(false);
 
     const formatPrice = (price: number, currency: string) => {
       return new Intl.NumberFormat('en-GB', {
@@ -70,6 +73,7 @@ export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps
         selectedSize,
         selectedColor,
         quantity,
+        shippingAddress,
       };
       onPurchase(state);
     };
@@ -78,7 +82,8 @@ export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps
     const canPurchase =
       !isLoading &&
       (sizeOptions.length === 0 || selectedSize) &&
-      (colorOptions.length === 0 || selectedColor);
+      (colorOptions.length === 0 || selectedColor) &&
+      (!isAuthenticated || (isAuthenticated && isShippingValid));
 
     // Tab content
     const tabItems = [
@@ -205,6 +210,18 @@ export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps
             </div>
           )}
 
+          {/* Shipping Address Form (only for authenticated users) */}
+          {isAuthenticated && (
+            <div className="border-t pt-6">
+              <AddressForm
+                value={shippingAddress}
+                onChange={setShippingAddress}
+                onValidationChange={setIsShippingValid}
+                disabled={isLoading}
+              />
+            </div>
+          )}
+
           {/* Purchase Button or Auth Message */}
           {!isAuthenticated ? (
             <div className="rounded-lg border border-primary bg-primary/10 p-6 text-center">
@@ -230,7 +247,8 @@ export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps
               {!canPurchase && !isLoading && (
                 <p className="text-sm text-muted-foreground">
                   {!selectedSize && sizeOptions.length > 0 && 'Please select a size. '}
-                  {!selectedColor && colorOptions.length > 0 && 'Please select a color.'}
+                  {!selectedColor && colorOptions.length > 0 && 'Please select a color. '}
+                  {!isShippingValid && 'Please complete shipping address.'}
                 </p>
               )}
             </>

package/src/components/ProductDetail/ProductDetail.types.ts

@@ -1,9 +1,11 @@
-import { Product } from '../ProductCard/ProductCard.types';
+import { Product } from '../ProductCard';
+import { ShippingAddress } from '../AddressForm';
 
 export interface ProductDetailState {
   selectedSize?: string;
   selectedColor?: string;
   quantity: number;
+  shippingAddress?: ShippingAddress;
 }
 
 export interface ProductDetailProps {

package/src/components/index.ts

@@ -25,6 +25,7 @@ export { default as Avatar } from './Avatar';
 export { default as Banner } from './Banner';
 
 // MOLECULES
+export { AddressForm } from './AddressForm';
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as Card } from './Card';
 export { default as DisplayHeading } from './DisplayHeading';
@@ -155,6 +156,7 @@ export type { Props as HeaderProps } from './Header/Header.types';
 export type { ShadcnButtonProps } from './ShadcnButton';
 
 // PRODUCT COMPONENT TYPES
+export type { AddressFormProps, ShippingAddress } from './AddressForm';
 export type { ProductCardProps, ProductCardVariantProps, Product } from './ProductCard';
 export type { VariantSelectorProps, VariantOption } from './VariantSelector';
 export type { ProductDetailProps, ProductDetailState } from './ProductDetail';

package/src/templates/OrderDetailScreen/OrderDetailScreen.tsx

@@ -0,0 +1,188 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import DisplayHeading from '../../components/DisplayHeading';
+import { format } from 'date-fns';
+import { OrderDetailScreenProps } from './OrderDetailScreen.types';
+
+const OrderDetailScreen = ({
+  testID,
+  order,
+  isLoading = false,
+  error,
+  onBackClick,
+}: OrderDetailScreenProps) => {
+  const formatPrice = (amount: number, currency: string) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: currency.toUpperCase(),
+    }).format(amount / 100);
+  };
+
+  const formatStatus = (status: string) => {
+    return status
+      .split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'succeeded':
+        return 'bg-success/10 text-success';
+      case 'processing':
+        return 'bg-warning/10 text-warning';
+      case 'requires_payment_method':
+      case 'requires_confirmation':
+      case 'requires_action':
+        return 'bg-warning/10 text-warning';
+      case 'canceled':
+        return 'bg-muted text-muted-foreground';
+      default:
+        return 'bg-muted text-body-text';
+    }
+  };
+
+  return (
+    <Screen data-testid={testID || 'OrderDetailScreen'}>
+      <div className="container mx-auto px-4 py-8">
+        {onBackClick && (
+          <button onClick={onBackClick} className="mb-8 text-primary hover:underline">
+            ← Back to Orders
+          </button>
+        )}
+
+        {isLoading && (
+          <div className="flex items-center justify-center py-16">
+            <div className="h-12 w-12 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+          </div>
+        )}
+
+        {error && (
+          <div className="rounded-lg bg-destructive/10 p-8 text-center">
+            <h2 className="mb-2 text-2xl font-bold text-destructive">Unable to Load Order</h2>
+            <p className="text-muted-foreground">{error.message || 'Please try again later.'}</p>
+          </div>
+        )}
+
+        {!isLoading && !error && order && (
+          <div className="space-y-6">
+            {/* Order Header */}
+            <div className="rounded-lg border border-border bg-card p-6">
+              <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+                <div>
+                  <h2 className="mb-2 text-2xl font-bold">
+                    Order #{order.id.slice(-8).toUpperCase()}
+                  </h2>
+                  <p className="text-muted-foreground">
+                    Placed on {format(new Date(order.created * 1000), 'MMMM d, yyyy')}
+                  </p>
+                </div>
+                <div
+                  className={`inline-block rounded-full px-4 py-2 text-sm font-medium ${getStatusColor(order.status)}`}
+                >
+                  {formatStatus(order.status)}
+                </div>
+              </div>
+            </div>
+
+            {/* Product Details */}
+            <div className="rounded-lg border border-border bg-card p-6">
+              <h3 className="mb-4 text-xl font-semibold">Product Details</h3>
+              <div className="space-y-3">
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Product</span>
+                  <span className="font-medium">{order.productName}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-muted-foreground">Quantity</span>
+                  <span className="font-medium">{order.quantity}</span>
+                </div>
+                {order.selectedVariants && Object.keys(order.selectedVariants).length > 0 && (
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Options</span>
+                    <span className="font-medium">
+                      {Object.entries(order.selectedVariants)
+                        .map(([key, value]) => `${key}: ${value}`)
+                        .join(', ')}
+                    </span>
+                  </div>
+                )}
+                <div className="flex justify-between border-t pt-3">
+                  <span className="font-medium">Total</span>
+                  <span className="text-2xl font-bold">
+                    {formatPrice(order.amount, order.currency)}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Shipping Address */}
+            {order.shipping && (
+              <div className="rounded-lg border border-border bg-card p-6">
+                <h3 className="mb-4 text-xl font-semibold">Shipping Address</h3>
+                <div className="space-y-1">
+                  <p className="font-medium">{order.shipping.name}</p>
+                  <p>{order.shipping.address.line1}</p>
+                  {order.shipping.address.line2 && <p>{order.shipping.address.line2}</p>}
+                  <p>
+                    {order.shipping.address.city}, {order.shipping.address.state}{' '}
+                    {order.shipping.address.postal_code}
+                  </p>
+                  <p>{order.shipping.address.country}</p>
+                  {order.shipping.phone && (
+                    <p className="mt-2 text-muted-foreground">Phone: {order.shipping.phone}</p>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Tracking Information */}
+            {(order.trackingNumber || order.trackingUrl) && (
+              <div className="rounded-lg border border-border bg-card p-6">
+                <h3 className="mb-4 text-xl font-semibold">Tracking Information</h3>
+                <div className="space-y-3">
+                  {order.trackingNumber && (
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Tracking Number</span>
+                      <span className="font-medium">{order.trackingNumber}</span>
+                    </div>
+                  )}
+                  {order.trackingUrl && (
+                    <a
+                      href={order.trackingUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block w-full rounded-md bg-primary px-6 py-2 text-center text-white hover:bg-primary/90"
+                    >
+                      Track Package
+                    </a>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Receipt */}
+            {order.receiptUrl && (
+              <div className="rounded-lg border border-border bg-card p-6">
+                <h3 className="mb-4 text-xl font-semibold">Receipt</h3>
+                <a
+                  href={order.receiptUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="block w-full rounded-md border border-border bg-secondary px-6 py-2 text-center hover:bg-secondary/80"
+                >
+                  View Receipt
+                </a>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </Screen>
+  );
+};
+
+OrderDetailScreen.displayName = 'OrderDetailScreen';
+
+export default OrderDetailScreen;
+export type { OrderDetailScreenProps };

package/src/templates/OrderDetailScreen/OrderDetailScreen.types.ts

@@ -0,0 +1,39 @@
+export interface ShippingAddress {
+  line1: string;
+  line2?: string;
+  city: string;
+  state: string;
+  postal_code: string;
+  country: string;
+}
+
+export interface Shipping {
+  name: string;
+  phone?: string;
+  address: ShippingAddress;
+}
+
+export interface OrderDetail {
+  id: string;
+  status: string;
+  amount: number;
+  currency: string;
+  created: number;
+  productId: string;
+  productName: string;
+  quantity: string;
+  partnerId?: string;
+  selectedVariants?: Record<string, string>;
+  shipping?: Shipping;
+  trackingNumber?: string;
+  trackingUrl?: string;
+  receiptUrl?: string;
+}
+
+export interface OrderDetailScreenProps {
+  testID?: string;
+  order?: OrderDetail;
+  isLoading?: boolean;
+  error?: Error | null;
+  onBackClick?: () => void;
+}

package/src/templates/OrderDetailScreen/index.ts

@@ -0,0 +1,2 @@
+export { default } from './OrderDetailScreen';
+export type { OrderDetailScreenProps, OrderDetail } from './OrderDetailScreen.types';

package/src/templates/OrdersHistoryScreen/OrdersHistoryScreen.tsx

@@ -0,0 +1,132 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import DisplayHeading from '../../components/DisplayHeading';
+import { formatDistance } from 'date-fns';
+import { OrdersHistoryScreenProps } from './OrdersHistoryScreen.types';
+
+const OrdersHistoryScreen = ({
+  testID,
+  orders = [],
+  isLoading = false,
+  error,
+  onOrderClick,
+}: OrdersHistoryScreenProps) => {
+  const formatPrice = (amount: number, currency: string) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: currency.toUpperCase(),
+    }).format(amount / 100);
+  };
+
+  const formatStatus = (status: string) => {
+    return status
+      .split('_')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'succeeded':
+        return 'text-success';
+      case 'processing':
+        return 'text-warning';
+      case 'requires_payment_method':
+      case 'requires_confirmation':
+      case 'requires_action':
+        return 'text-warning';
+      case 'canceled':
+        return 'text-muted-foreground';
+      default:
+        return 'text-body-text';
+    }
+  };
+
+  return (
+    <Screen data-testid={testID || 'OrdersHistoryScreen'}>
+      <DisplayHeading text="Order History" />
+      
+      <div className="container mx-auto px-4 py-8">
+        {isLoading && (
+          <div className="flex items-center justify-center py-16">
+            <div className="h-12 w-12 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
+          </div>
+        )}
+
+        {error && (
+          <div className="rounded-lg bg-destructive/10 p-8 text-center">
+            <h2 className="mb-2 text-2xl font-bold text-destructive">Unable to Load Orders</h2>
+            <p className="text-muted-foreground">{error.message || 'Please try again later.'}</p>
+          </div>
+        )}
+
+        {!isLoading && !error && orders.length === 0 && (
+          <div className="rounded-lg border border-border bg-card p-12 text-center">
+            <h3 className="mb-2 text-xl font-semibold">No Orders Yet</h3>
+            <p className="mb-4 text-muted-foreground">
+              You haven&apos;t made any partnership product purchases yet.
+            </p>
+            <a href="/partnership" className="inline-block rounded-md bg-primary px-6 py-2 text-white hover:bg-primary/90">
+              Browse Products
+            </a>
+          </div>
+        )}
+
+        {!isLoading && !error && orders.length > 0 && (
+          <div className="space-y-4">
+            {orders.map((order) => (
+              <div
+                key={order.id}
+                className="cursor-pointer rounded-lg border border-border bg-card p-6 transition-all hover:shadow-lg"
+                onClick={() => onOrderClick?.(order.id)}
+              >
+                <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                  <div className="flex-1">
+                    <div className="mb-2 flex items-center gap-3">
+                      <h4 className="text-lg font-semibold">{order.productName}</h4>
+                      <span className={`text-sm font-medium ${getStatusColor(order.status)}`}>
+                        {formatStatus(order.status)}
+                      </span>
+                    </div>
+                    <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
+                      <span>Order #{order.id.slice(-8).toUpperCase()}</span>
+                      <span>
+                        {formatDistance(new Date(order.created * 1000), new Date(), {
+                          addSuffix: true,
+                        })}
+                      </span>
+                      {order.quantity && <span>Qty: {order.quantity}</span>}
+                      {order.selectedVariants && (
+                        <span>
+                          {Object.entries(order.selectedVariants)
+                            .map(([key, value]) => `${key}: ${value}`)
+                            .join(', ')}
+                        </span>
+                      )}
+                    </div>
+                    {order.trackingNumber && (
+                      <div className="mt-2 text-sm">
+                        Tracking: <span className="font-medium">{order.trackingNumber}</span>
+                      </div>
+                    )}
+                  </div>
+                  <div className="text-right">
+                    <p className="text-2xl font-bold">{formatPrice(order.amount, order.currency)}</p>
+                    <button className="mt-2 text-sm text-primary hover:underline">
+                      View Details
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Screen>
+  );
+};
+
+OrdersHistoryScreen.displayName = 'OrdersHistoryScreen';
+
+export default OrdersHistoryScreen;
+export type { OrdersHistoryScreenProps };

package/src/templates/OrdersHistoryScreen/OrdersHistoryScreen.types.ts

@@ -0,0 +1,22 @@
+export interface Order {
+  id: string;
+  status: string;
+  amount: number;
+  currency: string;
+  created: number;
+  productId: string;
+  productName: string;
+  quantity: string;
+  partnerId?: string;
+  selectedVariants?: Record<string, string>;
+  trackingNumber?: string;
+  trackingUrl?: string;
+}
+
+export interface OrdersHistoryScreenProps {
+  testID?: string;
+  orders: Order[];
+  isLoading?: boolean;
+  error?: Error | null;
+  onOrderClick?: (orderId: string) => void;
+}

package/src/templates/OrdersHistoryScreen/index.ts

@@ -0,0 +1,2 @@
+export { default } from './OrdersHistoryScreen';
+export type { OrdersHistoryScreenProps, Order } from './OrdersHistoryScreen.types';

package/src/templates/PurchaseConfirmationScreen/PurchaseConfirmationScreen.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PurchaseConfirmationScreen from './PurchaseConfirmationScreen';
+
+const meta: Meta<typeof PurchaseConfirmationScreen> = {
+  title: 'Templates/PurchaseConfirmationScreen',
+  component: PurchaseConfirmationScreen,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PurchaseConfirmationScreen>;
+
+export const Default: Story = {
+  args: {
+    onContinueShopping: () => console.log('Continue Shopping'),
+    onGoToDashboard: () => console.log('Go to Dashboard'),
+  },
+};
+
+export const WithOrderDetails: Story = {
+  args: {
+    orderDetails: {
+      orderId: 'ORD-2024-001234',
+      orderDate: 'December 21, 2024',
+      items: [
+        {
+          name: 'NRG Performance Leggings',
+          quantity: 1,
+          price: 4500,
+        },
+        {
+          name: 'Athletic Tank Top',
+          quantity: 2,
+          price: 2500,
+        },
+      ],
+      total: 9500,
+      currency: 'gbp',
+      estimatedDelivery: 'December 28-30, 2024',
+    },
+    onContinueShopping: () => console.log('Continue Shopping'),
+    onViewOrders: () => console.log('View Orders'),
+    onGoToDashboard: () => console.log('Go to Dashboard'),
+  },
+};
+
+export const CustomMessage: Story = {
+  args: {
+    title: 'Order Confirmed!',
+    message: 'Your order has been successfully placed and is being processed. You will receive shipping updates via email.',
+    onContinueShopping: () => console.log('Continue Shopping'),
+  },
+};
+
+export const MinimalActions: Story = {
+  args: {
+    orderDetails: {
+      orderId: 'ORD-2024-001234',
+      total: 4500,
+      currency: 'gbp',
+    },
+    onContinueShopping: () => console.log('Continue Shopping'),
+  },
+};

package/src/templates/PurchaseConfirmationScreen/PurchaseConfirmationScreen.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { Props } from './PurchaseConfirmationScreen.types';
+import { ShadcnButton } from '../../components/ShadcnButton';
+import { CheckCircle } from 'lucide-react';
+
+const PurchaseConfirmationScreen = ({
+  testID,
+  title = 'Purchase Successful!',
+  message = 'Thank you for your purchase. A confirmation email has been sent to your email address with your order details.',
+  orderDetails,
+  onContinueShopping,
+  onViewOrders,
+  onGoToDashboard,
+}: Props) => {
+  const formatPrice = (price: number, currency: string = 'gbp') => {
+    return new Intl.NumberFormat('en-GB', {
+      style: 'currency',
+      currency: currency.toUpperCase(),
+    }).format(price / 100);
+  };
+
+  return (
+    <Screen data-testid={testID || 'PurchaseConfirmationScreen'}>
+      <div className="container mx-auto px-4 py-16">
+        <div className="mx-auto max-w-2xl">
+          <div className="rounded-lg border border-border bg-card p-8 text-center shadow-lg">
+            {/* Success Icon */}
+            <div className="mb-6 flex justify-center">
+              <CheckCircle className="h-20 w-20 text-green-500" />
+            </div>
+
+            {/* Title */}
+            <h1 className="mb-4 text-3xl font-bold">{title}</h1>
+
+            {/* Message */}
+            <p className="mb-8 text-lg text-muted-foreground">{message}</p>
+
+            {/* Order Details */}
+            {orderDetails && (
+              <div className="mb-8 rounded-md bg-muted p-6 text-left">
+                <h2 className="mb-4 font-semibold">Order Details</h2>
+                
+                {orderDetails.orderId && (
+                  <div className="mb-2 flex justify-between text-sm">
+                    <span className="text-muted-foreground">Order ID:</span>
+                    <span className="font-medium">{orderDetails.orderId}</span>
+                  </div>
+                )}
+
+                {orderDetails.orderDate && (
+                  <div className="mb-2 flex justify-between text-sm">
+                    <span className="text-muted-foreground">Order Date:</span>
+                    <span className="font-medium">{orderDetails.orderDate}</span>
+                  </div>
+                )}
+
+                {orderDetails.items && orderDetails.items.length > 0 && (
+                  <div className="my-4 border-t border-border pt-4">
+                    <h3 className="mb-2 text-sm font-semibold">Items:</h3>
+                    {orderDetails.items.map((item, index) => (
+                      <div key={index} className="mb-2 flex justify-between text-sm">
+                        <span>
+                          {item.name} x {item.quantity}
+                        </span>
+                        <span className="font-medium">
+                          {formatPrice(item.price * item.quantity, orderDetails.currency)}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                )}
+
+                {orderDetails.total !== undefined && (
+                  <div className="mt-4 flex justify-between border-t border-border pt-4 text-base font-bold">
+                    <span>Total:</span>
+                    <span>{formatPrice(orderDetails.total, orderDetails.currency)}</span>
+                  </div>
+                )}
+
+                {orderDetails.estimatedDelivery && (
+                  <div className="mt-4 text-sm text-muted-foreground">
+                    Estimated Delivery: {orderDetails.estimatedDelivery}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Information Box */}
+            <div className="mb-8 rounded-md bg-muted p-6 text-left">
+              <h2 className="mb-3 font-semibold">What happens next?</h2>
+              <ul className="space-y-2 text-sm text-muted-foreground">
+                <li>✓ You'll receive an order confirmation email shortly</li>
+                <li>✓ Your order will be processed and shipped within 3-5 business days</li>
+                <li>✓ You'll receive a tracking number once your order ships</li>
+                <li>✓ If you have any questions, contact support</li>
+              </ul>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
+              {onContinueShopping && (
+                <ShadcnButton
+                  size="lg"
+                  onClick={onContinueShopping}
+                  className="w-full sm:w-auto"
+                >
+                  Continue Shopping
+                </ShadcnButton>
+              )}
+              
+              {onViewOrders && (
+                <ShadcnButton
+                  size="lg"
+                  variant="outline"
+                  onClick={onViewOrders}
+                  className="w-full sm:w-auto"
+                >
+                  View Orders
+                </ShadcnButton>
+              )}
+              
+              {onGoToDashboard && (
+                <ShadcnButton
+                  size="lg"
+                  variant="outline"
+                  onClick={onGoToDashboard}
+                  className="w-full sm:w-auto"
+                >
+                  Go to Dashboard
+                </ShadcnButton>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Screen>
+  );
+};
+
+PurchaseConfirmationScreen.displayName = 'PurchaseConfirmationScreen';
+
+export default PurchaseConfirmationScreen;
+export type { Props };

package/src/templates/PurchaseConfirmationScreen/PurchaseConfirmationScreen.types.ts

@@ -0,0 +1,30 @@
+export interface OrderDetails {
+  orderId?: string;
+  orderDate?: string;
+  items?: Array<{
+    name: string;
+    quantity: number;
+    price: number;
+  }>;
+  total?: number;
+  currency?: string;
+  shippingAddress?: {
+    line1: string;
+    line2?: string;
+    city: string;
+    state: string;
+    postal_code: string;
+    country: string;
+  };
+  estimatedDelivery?: string;
+}
+
+export interface Props {
+  testID?: string;
+  title?: string;
+  message?: string;
+  orderDetails?: OrderDetails;
+  onContinueShopping?: () => void;
+  onViewOrders?: () => void;
+  onGoToDashboard?: () => void;
+}

package/src/templates/PurchaseConfirmationScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './PurchaseConfirmationScreen';

package/src/templates/index.ts

@@ -11,11 +11,14 @@ export { default as HomeScreen } from './HomeScreen';
 export { default as LogoutScreen } from './LogoutScreen';
 export { default as MenuScreen } from './MenuScreen';
 export { default as NotFoundScreen } from './NotFoundScreen';
+export { default as OrderDetailScreen } from './OrderDetailScreen';
+export { default as OrdersHistoryScreen } from './OrdersHistoryScreen';
 export { default as PasswordResetScreen } from './PasswordResetScreen';
 export { default as PasswordResetAuthScreen } from './PasswordResetAuthScreen';
 export { default as ProductDetailScreen } from './ProductDetailScreen';
 export { default as ProductListScreen } from './ProductListScreen';
 export { default as ProfileScreen } from './ProfileScreen';
+export { default as PurchaseConfirmationScreen } from './PurchaseConfirmationScreen';
 export { default as ScheduleScreen } from './ScheduleScreen';
 export { default as SubscriptionScreen } from './SubscriptionScreen';
 export { default as WorkoutScreen } from './WorkoutScreen';
@@ -34,11 +37,14 @@ export type { Props as HomeScreenProps } from './HomeScreen/HomeScreen.types';
 export type { Props as LogoutScreenProps } from './LogoutScreen/LogoutScreen.types';
 export type { Props as MenuScreenProps } from './MenuScreen/MenuScreen.types';
 export type { Props as NotFoundScreenProps } from './NotFoundScreen/NotFoundScreen.types';
+export type { OrderDetailScreenProps, OrderDetail } from './OrderDetailScreen';
+export type { OrdersHistoryScreenProps, Order } from './OrdersHistoryScreen';
 export type { Props as PasswordResetScreenProps } from './PasswordResetScreen/PasswordResetScreen.types';
 export type { Props as PasswordResetAuthScreenProps } from './PasswordResetAuthScreen/PasswordResetAuthScreen.types';
 export type { Props as ProductDetailScreenProps } from './ProductDetailScreen/ProductDetailScreen.types';
 export type { Props as ProductListScreenProps } from './ProductListScreen/ProductListScreen.types';
 export type { Props as ProfileScreenProps } from './ProfileScreen/ProfileScreen.types';
+export type { Props as PurchaseConfirmationScreenProps } from './PurchaseConfirmationScreen/PurchaseConfirmationScreen.types';
 export type { Props as ScheduleScreenProps } from './ScheduleScreen/ScheduleScreen.types';
 export type { Props as SubscriptionScreenProps } from './SubscriptionScreen/SubscriptionScreen.types';
 export type { Props as WorkoutScreenProps } from './WorkoutScreen/WorkoutScreen.types';