🎁 Flow Preview — Milestone & Gift

Complete Client Gift Journey — All 4 Steps

Click any row to jump to that step's preview card below.

🎉 Celebration Hero + Choose 3 Gifts Client picks any 3 products from 27 handcrafted items across 3 categories: Soaps, Body Scrubs, Lotions

Required

🌸

Melody's Bloom Add-On — Size & Flavor Selection 2oz ($12) or 4oz ($17) · 🍊 Orange or 🍦 Vanilla · Stripe payment · Ships free in same box

✨ NEW

Optional

📦 Shipping Info US address form: Name, Street, Apt, City, State, ZIP + optional note to counselor

Required

✅ Confirm & Send → Airtable + Formspree Review gifts, address, Bloom add-on. Submit → logs to fts_shipments + notifies Camille via email

Final Step

Step 1 of 4

🎉 Celebration Hero & Gift Selection

Clients land on a confetti-bursting celebration page and choose exactly 3 holistic body-care products from a curated collection.

4-Step Indicator (new)

Step indicator — client sees this at the top of the page:

Choose
3 Gifts

🌸

Melody's
Bloom

Shipping
Info

Confirm
& Send

Purple/Gold Celebration Hero
Full-width banner with confetti canvas animation that auto-fires on load

Confetti Burst Animation
140 canvas particles in brand colors, fires on load for ~7 seconds

Sticky Selection Bar
3 live slots that fill in as products are chosen; counter "0 / 3 chosen"

3 Product Categories
Soaps (8), Body Scrubs (7), Lotions & Magnesium Lotions (12)

Auto-locks at 3
Remaining products dim when max selected; toast message appears

Proceed → Melody's Bloom
Button enabled when exactly 3 gifts selected; leads to Step 🌸

Sample Products Available

🌸 Lavender Soap 🌼 Chamomile Soap 🌿 Eucalyptus Soap 🍋 Lemongrass Soap 🍯 Oatmeal & Honey Soap ✨ Cedarwood & Turmeric Soap 🔥 Frankincense Soap 🌾 Non-Scented Colloidal Soap 🌸 Lavender Body Scrub 🌿 Eucalyptus Body Scrub 🌼 Chamomile Body Scrub 🍋 Lemongrass Scrub 🍯 Oatmeal & Honey Scrub ✨ Cedarwood & Turmeric Scrub 🔥 Frankincense Scrub 🌸 Lavender Lotion 🌼 Chamomile Lotion 🌿 Eucalyptus Lotion 🌟 Frankincense Magnesium ⭐ 🌲 Cedarwood Magnesium ⭐ 🌿 Eucalyptus Magnesium ⭐ 🌱 Peppermint Magnesium ⭐ 🍯 Oatmeal & Honey Lotion ✨ Cedarwood & Turmeric Lotion 🔥 Frankincense Lotion 🌾 Non-Scented Colloidal Lotion 🍋 Lemongrass Lotion

Step 🌸 of 4 — NEW

🌸 Melody's Bloom Add-On

Optional herbal wellness tincture add-on. Client selects a size (2oz / 4oz) then a flavor (🍊 Orange or 🍦 Vanilla). Stripe payment opens in new tab, then flow continues to shipping automatically.

Melody's Bloom · Ships free in the same gift box

"A mother. A daughter. A tree God planted in our garden. At 12 years old, Melody discovered a mimosa tree growing quietly in their backyard — and had the curiosity to find out why it mattered. What she uncovered changed everything: centuries of traditional use for mood, depression, PTSD, and inflammation. Every drop carries that discovery — a family's gift to your healing journey."

After choosing 3 gifts, clients land here before entering their shipping address. They can add Melody's Bloom (Stripe payment in new tab) or click Skip to go directly to shipping. Either way, the gift continues to ship free.

Size Selection (Step A)

2oz Bottle

$12

~30–40 servings · Great starter size · Stripe link: bJeaEZcl…

4oz Bottle ⭐ Popular

$17

~60–80 servings · Best value for daily use · Stripe link: 8x200ldp…

Flavor Selection (Step B — appears after size chosen)

🍊 Orange

🍦 Vanilla

Both flavors are available in both sizes. Stripe links are price-based only (not flavor-specific). The flavor choice is stored in sessionStorage.fts_bloom_addon as a combined string like '2oz-orange' or '4oz-vanilla'.

6 Medicinal Benefit Cards
Cognitive clarity, sleep, hormones, immunity, stress relief, anti-inflammatory

Two Sizes
2oz ($12) and 4oz ($17) — same Stripe links regardless of flavor selected

Two Flavors
🍊 Orange and 🍦 Vanilla — flavor selection shown AFTER size is picked

Stripe Payment → New Tab
Payment opens in new tab; flow auto-advances to shipping after 600ms

Skip Option
"Skip — No Thanks" button bypasses Bloom and goes straight to shipping

Logged to Airtable
Bloom choice appended to fts_shipments.notes and Formspree email

Proceed Button State

The "Add to Gift Box & Pay via Stripe" button remains disabled until BOTH a size AND a flavor are selected. This prevents incomplete add-on data from being saved.

Step 2 of 4

📦 Shipping Information

Client enters their US mailing address. Form validates all required fields including ZIP format before allowing them to proceed.

US Shipping Only — A note reminds clients that shipping is limited to US addresses. Allow 5–10 business days for delivery. Gift packaging is free. Melody's Bloom (if added) ships in the same box at no extra shipping charge.

First + Last Name
Required — used for mailing label and Airtable record

Street Address
Required + optional Apartment/Suite/Unit field

City, State, ZIP
State = 50-state dropdown + DC; ZIP validated for US format (5 or 9 digit)

Note to Counselor
Optional free-text field for milestone reflections or packaging requests

Validation Toast
Missing fields or invalid ZIP triggers a branded toast notification

Back Button
"Back to Gift Selection" returns to Step 1 (Bloom panel skipped if revisiting)

Step 3 of 4

✅ Confirm & Send

Client reviews everything — their 3 chosen gifts, shipping address, note, and Melody's Bloom add-on (if selected) — then submits. Data logs to Airtable and triggers a Formspree email to Camille.

What Client Sees Before Submitting

🎁 Your 3 Gift Items

🎁 Gift 1Lavender Soap

🎁 Gift 2Frankincense Magnesium Lotion ⭐

🎁 Gift 3Chamomile Body Scrub

📦 Shipping Address

Sarah Johnson
1234 Healing Lane, Apt 2B
Atlanta, GA 30301
United States

🌸 Melody's Bloom Add-On

🌸 Melody's Bloom — 4oz 🍊 Orange · $17 · Ships in your gift box · Payment via Stripe ✅

Airtable: fts_shipments
Creates record with client_name, email, milestone type, product_1/2/3, address, city, state, zip, bloom addon in notes

Formspree Email to Camille
Sends all order details including Melody's Bloom size, flavor, and price to Formspree xvzdjana

Inventory Deduction
Automatically deducts stock from fts_inventory for each of the 3 chosen products (background, non-blocking)

Milestone Label
URL param ?type=milestone or ?type=graduation determines which label is stored in Airtable

Success Panel + Confetti
After submission, confetti fires and success panel shows all items including Bloom chip

Return to Dashboard
Success panel links back to client-dashboard.html to continue their journey

Airtable + Formspree Data Sample

Airtable notes field:


            Client note text here...


            Melody's Bloom Add-On: 4oz Orange flavor · $17 · paid via Stripe

Formspree field: Melody's Bloom Add-On: 4oz Orange flavor — paid via Stripe

Step 1 of 4

Quick Launch

Open the real pages with a pre-seeded test session — no login needed. No real data is submitted during preview.

Milestone & GiftFlow Preview 🎁

Complete Client Gift Journey — All 4 Steps

🎉 Celebration Hero & Gift Selection

🌸 Melody's Bloom Add-On

📦 Shipping Information

✅ Confirm & Send

Quick Launch

Milestone & Gift
Flow Preview 🎁