import { useMemo, useState } from "react"; type Variant = { id: string; name: string; description: string; priceAdjustment: number; }; type UpsellItem = { id: string; title: string; description: string; price: number; bestSeller?: boolean; }; const baseProductPrice = 48; const variants: Variant[] = [ { id: "standard", name: "Standard 1.7oz", description: "Perfect for daily use", priceAdjustment: 0, }, { id: "deluxe", name: "Deluxe 3.4oz", description: "Best value size", priceAdjustment: 22, }, { id: "travel", name: "Travel 0.8oz", description: "Carry-on friendly", priceAdjustment: -12, }, ]; const upsells: UpsellItem[] = [ { id: "vitamin-c", title: "Vitamin C Booster", description: "Brightens and evens skin tone in 7 days.", price: 28, bestSeller: true, }, { id: "gel-cleanser", title: "Gentle Gel Cleanser", description: "pH-balanced cleanser to prep your skin.", price: 18, }, { id: "night-mask", title: "Overnight Renewal Mask", description: "Lock in moisture while you sleep.", price: 32, }, ]; const formatCurrency = (value: number) => value.toLocaleString("en-US", { style: "currency", currency: "USD" }); function UpsellProductPage(): JSX.Element { const [selectedVariantId, setSelectedVariantId] = useState(variants[0].id); const [quantity, setQuantity] = useState(1); const [selectedUpsellIds, setSelectedUpsellIds] = useState([]); const [expandedUpsellId, setExpandedUpsellId] = useState(null); const [isAdding, setIsAdding] = useState(false); const [hasAdded, setHasAdded] = useState(false); const selectedVariant = useMemo( () => variants.find((variant) => variant.id === selectedVariantId) ?? variants[0], [selectedVariantId] ); const selectedUpsellItems = useMemo( () => upsells.filter((item) => selectedUpsellIds.includes(item.id)), [selectedUpsellIds] ); const pricing = useMemo(() => { const variantPrice = baseProductPrice + selectedVariant.priceAdjustment; const productSubtotal = variantPrice * quantity; const upsellSubtotal = selectedUpsellItems.reduce((total, item) => total + item.price, 0); const discount = selectedUpsellItems.length > 0 ? upsellSubtotal * 0.1 : 0; const grandTotal = productSubtotal + upsellSubtotal - discount; return { variantPrice, productSubtotal, upsellSubtotal, discount, grandTotal, }; }, [quantity, selectedVariant, selectedUpsellItems]); const handleVariantChange = (id: string) => { setSelectedVariantId(id); setHasAdded(false); }; const handleUpsellToggle = (id: string) => { setSelectedUpsellIds((previous) => { if (previous.includes(id)) { return previous.filter((value) => value !== id); } return [...previous, id]; }); setHasAdded(false); }; const handleQuantityChange = (change: number) => { setQuantity((current) => { const next = current + change; return next < 1 ? 1 : next; }); setHasAdded(false); }; const handleAddToCart = () => { setIsAdding(true); setHasAdded(false); window.setTimeout(() => { setIsAdding(false); setHasAdded(true); }, 800); }; const isUpsellExpanded = (id: string) => expandedUpsellId === id; const toggleUpsellDetails = (id: string) => { setExpandedUpsellId((current) => (current === id ? null : id)); }; return (

Hydrating Serum

Dermatologist-tested hyaluronic serum for all skin types.

{formatCurrency(pricing.variantPrice)}

What makes it special

• Clinically proven hydration for 72 hours.
• Fragrance-free and non-comedogenic.
• Pairs perfectly with our booster collection.

Choose your size

{variants.map((variant) => (

{variant.name} {variant.description}

handleVariantChange(variant.id)} className="h-4 w-4 text-black focus:ring-black" />

{formatCurrency(baseProductPrice + variant.priceAdjustment)} ))}

Quantity

handleQuantityChange(-1)} className="px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50" aria-label="Decrease quantity" > − {quantity} handleQuantityChange(1)} className="px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50" aria-label="Increase quantity" > +

Complete your routine

Save 10% on add-ons

{upsells.map((item) => { const isSelected = selectedUpsellIds.includes(item.id); const expanded = isUpsellExpanded(item.id); return (

{item.title} {item.bestSeller && ( Best seller )}

{expanded ? item.description : `${item.description.slice(0, 60)}...`}

toggleUpsellDetails(item.id)} className="mt-2 text-xs font-medium text-emerald-700 hover:text-emerald-800" > {expanded ? "Hide details" : "View details"}

{formatCurrency(item.price)} handleUpsellToggle(item.id)} className="h-4 w-4 text-black focus:ring-black" /> Add

); })}

Order summary

Product subtotal {formatCurrency(pricing.productSubtotal)}

Add-ons {formatCurrency(pricing.upsellSubtotal)}

{pricing.discount > 0 && (

Bundle savings − {formatCurrency(pricing.discount)}

)}

Total {formatCurrency(pricing.grandTotal)}

{isAdding ? "Adding..." : "Add bundle to cart"} {hasAdded && (

Bundle added to cart! Customers also loved checking out with these add-ons.

)}

Free shipping over $60

30-day returns

Secure checkout

); } export default UpsellProductPage;

EAU DE PARFUM SPRAY 0.05 OZ VIAL

How to Use

1. Cleanse your skin and pat dry
2. Apply a small amount using gentle circular motions
3. Allow to absorb fully before applying additional products
4. Use as directed, typically morning and/or evening
5. For best results, use consistently as part of your daily routine

Pro Tip: For enhanced results, pair with other products from the same collection.

Product Excellence

Professional Grade

Why This Product Stands Out

This carefully curated beauty essential represents the pinnacle of luxury and effectiveness. Each product in our collection is selected for its exceptional quality, innovative formulation, and ability to deliver professional results.

• Premium formulation with carefully selected ingredients
• Professional-grade quality for discerning customers
• Elegant packaging that reflects the luxury within
• Proven results backed by beauty expertise

Professional Application

For optimal results, follow these expert recommendations from our beauty professionals:

1. Prepare your skin with a gentle cleanse and allow to completely dry
2. Apply using precise, controlled movements for even distribution
3. Allow proper setting time before layering additional products
4. Build coverage gradually for the most natural, refined finish
5. Complete your routine with complementary products for lasting results

Luxury Benefits

Premium Quality

Formulated with the finest ingredients for superior performance and lasting results

Long-Lasting

Designed for extended wear without compromising comfort or appearance

Professional Results

Achieve salon-quality results in the comfort of your own space

Thoughtfully Made

Crafted with care using responsible sourcing and premium materials

Ingredients & Specifications

This product contains carefully selected ingredients chosen for their effectiveness and quality. For a complete ingredient list, please refer to the product packaging.

Shipping & Returns

Free shipping on orders over $75

30-day returns - Easy return process

Fast delivery - 2-5 business days

Product Care & Storage

• Store in a cool, dry place away from direct sunlight
• Keep tightly closed when not in use
• Use within 12 months of opening for optimal freshness
• Do not expose to extreme temperatures
• Keep away from children