Compare commits
7
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Unchained
|
a6ebcf408c | ||
|
Unchained
|
85e41bfcc4 | ||
|
Unchained
|
84b85f5291 | ||
|
Unchained
|
c98677405a | ||
|
Unchained
|
4d428b3ff0 | ||
|
Unchained
|
9c2e4e1383 | ||
|
Unchained
|
d0e3ee3201 |
@@ -0,0 +1,666 @@
|
|||||||
|
# Storefront Feature Roadmap
|
||||||
|
|
||||||
|
> Strategic roadmap for increasing profitability, conversion rates, and SEO traffic.
|
||||||
|
|
||||||
|
## Quick Stats
|
||||||
|
- **Total Features:** 20
|
||||||
|
- **Estimated Timeline:** 12-16 weeks
|
||||||
|
- **Priority Categories:** Foundation → Quick Wins → Revenue → Growth
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 1: Foundation (Weeks 1-3)
|
||||||
|
*These features must be completed first as they enable other features*
|
||||||
|
|
||||||
|
### 1. Enhanced Product Reviews System
|
||||||
|
**Impact:** High | **Effort:** Medium | **Revenue Impact:** +15-30% conversion
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Allow customers to submit reviews with photos
|
||||||
|
- Star ratings display on product cards
|
||||||
|
- "Verified Purchase" badges
|
||||||
|
- Review moderation dashboard
|
||||||
|
- Review request email automation
|
||||||
|
|
||||||
|
**Why First:**
|
||||||
|
- Required for Rich Snippets (SEO feature #9)
|
||||||
|
- Social proof enables all conversion optimizations
|
||||||
|
- Reviews feed into email sequences
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Database schema for reviews
|
||||||
|
- Image upload/storage (S3/MinIO)
|
||||||
|
- Moderation workflow
|
||||||
|
- Saleor integration or standalone system
|
||||||
|
|
||||||
|
**Dependencies:** None (foundation feature)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2. Structured Data / Rich Snippets (JSON-LD)
|
||||||
|
**Impact:** High | **Effort:** Low | **Revenue Impact:** +10-20% CTR
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Product Schema (price, availability, ratings)
|
||||||
|
- Review Schema (star ratings in Google)
|
||||||
|
- Organization Schema (brand info)
|
||||||
|
- BreadcrumbList Schema (navigation in SERPs)
|
||||||
|
- FAQ Schema for product pages
|
||||||
|
|
||||||
|
**Why First:**
|
||||||
|
- Needs reviews system (#1) for review schema
|
||||||
|
- Immediate SEO benefit
|
||||||
|
- No dependencies after reviews
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- next/head component for JSON-LD injection
|
||||||
|
- Dynamic schema generation per page
|
||||||
|
- Testing with Google's Rich Results Test
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ✅ Product Reviews System (#1) - for review ratings
|
||||||
|
- ⏳ Product catalog (already exists)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3. Open Graph & Twitter Card Meta Tags
|
||||||
|
**Impact:** Medium | **Effort:** Low | **Revenue Impact:** Social sharing boost
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- og:title, og:description, og:image for all pages
|
||||||
|
- Twitter Card meta tags
|
||||||
|
- Dynamic meta tags for product pages
|
||||||
|
- Social share preview optimization
|
||||||
|
|
||||||
|
**Why First:**
|
||||||
|
- Quick win, low effort
|
||||||
|
- Improves social media traffic quality
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Extend existing metadata.ts
|
||||||
|
- Generate dynamic OG images (optional)
|
||||||
|
|
||||||
|
**Dependencies:** None (parallel with #2)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 2: Quick Wins (Weeks 4-5)
|
||||||
|
*High impact, low effort features that show immediate results*
|
||||||
|
|
||||||
|
### 4. Free Shipping Progress Bar
|
||||||
|
**Impact:** High | **Effort:** Low | **Revenue Impact:** +15-25% AOV
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Visual progress bar in cart drawer
|
||||||
|
- "Add X RSD more for free shipping" messaging
|
||||||
|
- Animated progress indicator
|
||||||
|
- Threshold: 5,000 RSD (already configured)
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Increases average order value immediately
|
||||||
|
- Simple cart component modification
|
||||||
|
- No backend dependencies
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Cart drawer component update
|
||||||
|
- Real-time calculation based on cart total
|
||||||
|
- Confetti animation when threshold reached (optional)
|
||||||
|
|
||||||
|
**Dependencies:** None
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 5. Sticky "Add to Cart" Button (Mobile)
|
||||||
|
**Impact:** High | **Effort:** Low | **Revenue Impact:** +10-20% mobile conversion
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Fixed position button on mobile product pages
|
||||||
|
- Price and "Add to Cart" always visible while scrolling
|
||||||
|
- Smooth scroll to variant selector if needed
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Mobile is likely 60%+ of traffic
|
||||||
|
- Single component change
|
||||||
|
- High conversion impact
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- CSS position: sticky/fixed
|
||||||
|
- Mobile breakpoint detection
|
||||||
|
- Smooth scroll behavior
|
||||||
|
|
||||||
|
**Dependencies:** None
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 6. Trust Signals Enhancement
|
||||||
|
**Impact:** Medium | **Effort:** Low | **Revenue Impact:** +5-10% conversion
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Payment method icons (Visa, Mastercard, PayPal) in footer/checkout
|
||||||
|
- "Secure SSL Checkout" badge
|
||||||
|
- 30-day money-back guarantee badge
|
||||||
|
- "Made in Serbia" / local production badge
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Reduces checkout anxiety
|
||||||
|
- Visual asset creation only
|
||||||
|
- No code complexity
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- SVG icons for payment methods
|
||||||
|
- Badge component updates
|
||||||
|
- Footer component modification
|
||||||
|
|
||||||
|
**Dependencies:** None
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 3: Revenue Optimization (Weeks 6-10)
|
||||||
|
*Features that directly increase revenue and LTV*
|
||||||
|
|
||||||
|
### 7. Abandoned Cart Recovery System
|
||||||
|
**Impact:** Critical | **Effort:** Medium | **Revenue Impact:** 10-15% cart recovery
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- 3-email sequence: 1 hour, 24 hours, 72 hours
|
||||||
|
- Email 3 includes 10% discount code
|
||||||
|
- Exit intent detection
|
||||||
|
- SMS fallback (optional)
|
||||||
|
- Recovery tracking dashboard
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Highest ROI feature
|
||||||
|
- Requires email infrastructure
|
||||||
|
- Builds on existing order system
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Cart abandonment detection
|
||||||
|
- Email template system (extend existing)
|
||||||
|
- Discount code generation
|
||||||
|
- Cron job or queue system
|
||||||
|
- Tracking pixel for recovery attribution
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ✅ Email service (Resend already configured)
|
||||||
|
- ✅ Order notification service (already exists)
|
||||||
|
- ⏳ Discount code system (if not in Saleor)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 8. One-Click Upsells at Checkout
|
||||||
|
**Impact:** High | **Effort:** Medium | **Revenue Impact:** +20-30% AOV
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- "Complete your routine" modal after add-to-cart
|
||||||
|
- Smart product recommendations based on cart contents
|
||||||
|
- One-click add (no page reload)
|
||||||
|
- Bundle discounts (buy 2 get 10% off)
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Increases AOV significantly
|
||||||
|
- Leverages existing cart system
|
||||||
|
- Works well with skincare routines
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Upsell algorithm (category-based)
|
||||||
|
- Modal component
|
||||||
|
- Cart API updates
|
||||||
|
- Bundle pricing logic
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ✅ Cart system (already exists)
|
||||||
|
- ⏳ Product relationships data (manual or AI-based)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 9. Exit-Intent Lead Capture Popup
|
||||||
|
**Impact:** Medium | **Effort:** Low | **Revenue Impact:** +5-15% email list growth
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Detects when user moves mouse to close tab/address bar
|
||||||
|
- Shows email signup with 10% discount offer
|
||||||
|
- Mobile: scroll-up detection or time-based
|
||||||
|
- Dismissible with "No thanks" option
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Captures leaving traffic
|
||||||
|
- Builds email list for newsletters
|
||||||
|
- Simple implementation
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Exit intent detection library (ouibounce or custom)
|
||||||
|
- Email capture form
|
||||||
|
- Discount code integration
|
||||||
|
- Cookie/session management (show once per user)
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ⏳ Email list management (CRM or Mailchimp)
|
||||||
|
- ⏳ Discount code system
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 10. Subscription / Recurring Orders
|
||||||
|
**Impact:** High | **Effort:** High | **Revenue Impact:** Predictable recurring revenue
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- "Subscribe & Save 15%" option on product pages
|
||||||
|
- Monthly/quarterly delivery intervals
|
||||||
|
- Automatic billing (Stripe subscriptions)
|
||||||
|
- Skip/pause/cancel management portal
|
||||||
|
- Replenishment reminders
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Skincare has high reorder rates
|
||||||
|
- Predictable revenue stream
|
||||||
|
- Increases LTV significantly
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Stripe Subscription integration
|
||||||
|
- Customer portal for management
|
||||||
|
- Inventory forecasting
|
||||||
|
- Email notifications for upcoming orders
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ✅ Stripe integration (check existing)
|
||||||
|
- ⏳ Customer account system (if not exists)
|
||||||
|
- ⏳ Inventory management enhancements
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 4: Engagement & Support (Weeks 11-12)
|
||||||
|
*Features that improve customer experience and reduce friction*
|
||||||
|
|
||||||
|
### 11. Live Chat Widget (WhatsApp Business)
|
||||||
|
**Impact:** Medium | **Effort:** Low | **Revenue Impact:** +10-15% conversion
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- WhatsApp Business integration (most popular in Serbia)
|
||||||
|
- Floating chat button
|
||||||
|
- Auto-reply for common questions
|
||||||
|
- Business hours indicator
|
||||||
|
- Chat history
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Real-time customer support
|
||||||
|
- High trust factor for skincare advice
|
||||||
|
- Low implementation cost
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- WhatsApp Business API or click-to-chat
|
||||||
|
- Floating button component
|
||||||
|
- Auto-response templates
|
||||||
|
- Mobile-optimized
|
||||||
|
|
||||||
|
**Dependencies:** None
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 12. Product Comparison Tool
|
||||||
|
**Impact:** Medium | **Effort:** Medium | **Revenue Impact:** +5-10% conversion
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Compare 2-3 products side-by-side
|
||||||
|
- Compare ingredients, benefits, price, reviews
|
||||||
|
- Save comparison for later
|
||||||
|
- "Help me choose" quiz (optional)
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Reduces decision paralysis
|
||||||
|
- Increases time on site
|
||||||
|
- Helps customers find right product
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Comparison table component
|
||||||
|
- Product selection interface
|
||||||
|
- Data normalization across products
|
||||||
|
- Persistent state (URL params or session)
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ✅ Product data (already in Saleor)
|
||||||
|
- ⏳ Enhanced product attributes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 13. Enhanced Urgency Elements
|
||||||
|
**Impact:** Medium | **Effort:** Low | **Revenue Impact:** +5-15% conversion
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Real stock counter ("Only 3 left in stock")
|
||||||
|
- Countdown timer for limited promotions
|
||||||
|
- Recent purchase notifications ("Sarah from Belgrade just bought...")
|
||||||
|
- Low stock email alerts
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Scarcity drives action
|
||||||
|
- Builds on existing urgency text
|
||||||
|
- Simple implementation
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Real-time stock display
|
||||||
|
- Countdown timer component
|
||||||
|
- Fake social proof (recent purchase ticker)
|
||||||
|
- Sale scheduling system
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ✅ Inventory data from Saleor
|
||||||
|
- ⏳ Sale/promotion management system
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 5: Content & SEO Growth (Weeks 13-16)
|
||||||
|
*Long-term traffic growth through content and SEO*
|
||||||
|
|
||||||
|
### 14. Blog / Content Marketing Hub
|
||||||
|
**Impact:** High | **Effort:** High | **Revenue Impact:** Organic traffic growth
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Blog section with categories
|
||||||
|
- Skincare guides and tutorials
|
||||||
|
- Ingredient education
|
||||||
|
- Before/after case studies
|
||||||
|
- Video content integration
|
||||||
|
- SEO-optimized articles
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Long-term organic traffic
|
||||||
|
- Positions brand as authority
|
||||||
|
- Content for social media
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Blog CMS (Headless CMS or markdown)
|
||||||
|
- Category/tags system
|
||||||
|
- Author profiles
|
||||||
|
- Related articles
|
||||||
|
- Comment system (optional)
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ⏳ Headless CMS (Strapi, Sanity, or Contentful)
|
||||||
|
- ⏳ Content strategy and writing resources
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 15. Enhanced Product Pages (Video & Guides)
|
||||||
|
**Impact:** Medium | **Effort:** Medium | **Revenue Impact:** +10-20% conversion
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Product application tutorial videos
|
||||||
|
- Ingredient glossary popup
|
||||||
|
- "How to use" photo guides
|
||||||
|
- Skin type recommendations
|
||||||
|
- Routine builder tool
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Increases product understanding
|
||||||
|
- Reduces returns
|
||||||
|
- Video content for social
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Video hosting (Vimeo/YouTube)
|
||||||
|
- Accordion components for guides
|
||||||
|
- Skin type quiz logic
|
||||||
|
- Rich media product gallery
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ⏳ Video production
|
||||||
|
- ⏳ Content creation
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 16. FAQ Section with Schema Markup
|
||||||
|
**Impact:** Medium | **Effort:** Low | **Revenue Impact:** SEO + reduced support
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Comprehensive FAQ page
|
||||||
|
- Product-specific FAQs
|
||||||
|
- Searchable FAQ
|
||||||
|
- FAQ schema markup for Google
|
||||||
|
- Categorized questions
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Reduces customer service load
|
||||||
|
- SEO benefit with FAQ schema
|
||||||
|
- Easy content creation
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- FAQ accordion component
|
||||||
|
- Search functionality
|
||||||
|
- JSON-LD FAQ schema
|
||||||
|
- Category filtering
|
||||||
|
|
||||||
|
**Dependencies:** None
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 6: Email Marketing Automation (Weeks 14-16)
|
||||||
|
*Leveraging email for retention and LTV*
|
||||||
|
|
||||||
|
### 17. Post-Purchase Email Sequence
|
||||||
|
**Impact:** High | **Effort:** Medium | **Revenue Impact:** +20-30% retention
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Order confirmation (already exists ✓)
|
||||||
|
- Shipping notification (already exists ✓)
|
||||||
|
- Delivery confirmation
|
||||||
|
- "How's your product?" (7 days later)
|
||||||
|
- Review request (14 days later)
|
||||||
|
- Replenishment reminder (30/60 days)
|
||||||
|
- Win-back campaign (90 days no purchase)
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Maximizes LTV
|
||||||
|
- Uses existing email infrastructure
|
||||||
|
- Automated revenue
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Email sequence automation
|
||||||
|
- Timing logic based on delivery
|
||||||
|
- Dynamic content based on purchase
|
||||||
|
- Unsubscribe management
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ✅ Email service (Resend)
|
||||||
|
- ✅ Order tracking (already exists)
|
||||||
|
- ⏳ Delivery tracking integration (optional)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 18. Segment-Based Email Campaigns
|
||||||
|
**Impact:** Medium | **Effort:** Medium | **Revenue Impact:** +15-25% email revenue
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- VIP customers segment (high LTV)
|
||||||
|
- Inactive customers (win-back offers)
|
||||||
|
- Product-specific education sequences
|
||||||
|
- Seasonal campaigns (winter skincare, summer protection)
|
||||||
|
- Birthday discounts
|
||||||
|
|
||||||
|
**Why Now:**
|
||||||
|
- Personalized marketing
|
||||||
|
- Higher engagement than broadcasts
|
||||||
|
- Uses customer data
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Customer segmentation logic
|
||||||
|
- Email template variants
|
||||||
|
- Automation workflows
|
||||||
|
- A/B testing capability
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ✅ Email service
|
||||||
|
- ⏳ CRM or customer data platform
|
||||||
|
- ⏳ Email marketing platform (Mailchimp, Klaviyo, or custom)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Phase 7: Advanced Features (Future)
|
||||||
|
*Nice-to-have features for later phases*
|
||||||
|
|
||||||
|
### 19. Wishlist / Save for Later
|
||||||
|
**Impact:** Medium | **Effort:** Medium | **Revenue Impact:** +5-10% conversion
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- Heart icon on product cards
|
||||||
|
- Save items without account (cookies) or with account
|
||||||
|
- Email reminders for saved items
|
||||||
|
- Share wishlist feature
|
||||||
|
- Back-in-stock notifications
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- Wishlist database/storage
|
||||||
|
- Heart icon toggle
|
||||||
|
- Wishlist page
|
||||||
|
- Email triggers
|
||||||
|
- Social sharing
|
||||||
|
|
||||||
|
**Dependencies:**
|
||||||
|
- ⏳ Customer account system (optional)
|
||||||
|
- ⏳ Back-in-stock notification system
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 20. Google Analytics 4 + Enhanced E-commerce
|
||||||
|
**Impact:** Medium | **Effort:** Low | **Revenue Impact:** Better attribution
|
||||||
|
|
||||||
|
**Description:**
|
||||||
|
- GA4 implementation alongside OpenPanel
|
||||||
|
- Enhanced e-commerce events
|
||||||
|
- Funnel visualization
|
||||||
|
- Attribution modeling
|
||||||
|
- A/B testing framework (Google Optimize)
|
||||||
|
|
||||||
|
**Why Later:**
|
||||||
|
- OpenPanel already provides analytics
|
||||||
|
- GA4 is supplementary
|
||||||
|
- Data analysis takes time
|
||||||
|
|
||||||
|
**Technical Requirements:**
|
||||||
|
- GA4 script injection
|
||||||
|
- Event mapping to GA4 standards
|
||||||
|
- E-commerce data layer
|
||||||
|
- Conversion tracking setup
|
||||||
|
|
||||||
|
**Dependencies:** None (can be done anytime)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Dependency Graph
|
||||||
|
|
||||||
|
```
|
||||||
|
Phase 1: Foundation
|
||||||
|
├── 1. Product Reviews (START HERE)
|
||||||
|
├── 2. Structured Data ← depends on #1
|
||||||
|
└── 3. Open Graph Tags (parallel)
|
||||||
|
|
||||||
|
Phase 2: Quick Wins
|
||||||
|
├── 4. Free Shipping Bar (independent)
|
||||||
|
├── 5. Sticky Add to Cart (independent)
|
||||||
|
└── 6. Trust Signals (independent)
|
||||||
|
|
||||||
|
Phase 3: Revenue
|
||||||
|
├── 7. Abandoned Cart ← needs email system ✓
|
||||||
|
├── 8. One-Click Upsells ← needs cart ✓
|
||||||
|
├── 9. Exit Intent ← needs email CRM
|
||||||
|
└── 10. Subscriptions ← needs Stripe
|
||||||
|
|
||||||
|
Phase 4: Engagement
|
||||||
|
├── 11. Live Chat (independent)
|
||||||
|
├── 12. Product Comparison ← needs product data ✓
|
||||||
|
└── 13. Urgency Elements ← needs inventory ✓
|
||||||
|
|
||||||
|
Phase 5: Content
|
||||||
|
├── 14. Blog ← needs CMS
|
||||||
|
├── 15. Enhanced PDPs ← needs video content
|
||||||
|
└── 16. FAQ (independent)
|
||||||
|
|
||||||
|
Phase 6: Email
|
||||||
|
├── 17. Post-Purchase ← needs #7 foundation
|
||||||
|
└── 18. Segmentation ← needs CRM
|
||||||
|
|
||||||
|
Phase 7: Future
|
||||||
|
├── 19. Wishlist (nice to have)
|
||||||
|
└── 20. GA4 (supplementary)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Priority Matrix
|
||||||
|
|
||||||
|
| Feature | Revenue Impact | SEO Impact | Effort | Priority |
|
||||||
|
|---------|---------------|------------|--------|----------|
|
||||||
|
| 1. Product Reviews | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Medium | **P0** |
|
||||||
|
| 2. Structured Data | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Low | **P0** |
|
||||||
|
| 7. Abandoned Cart | ⭐⭐⭐⭐⭐ | ⭐ | Medium | **P0** |
|
||||||
|
| 4. Free Shipping Bar | ⭐⭐⭐⭐ | ⭐ | Low | **P1** |
|
||||||
|
| 8. One-Click Upsells | ⭐⭐⭐⭐⭐ | ⭐ | Medium | **P1** |
|
||||||
|
| 5. Sticky Add to Cart | ⭐⭐⭐⭐ | ⭐ | Low | **P1** |
|
||||||
|
| 10. Subscriptions | ⭐⭐⭐⭐⭐ | ⭐ | High | **P1** |
|
||||||
|
| 17. Post-Purchase Email | ⭐⭐⭐⭐ | ⭐ | Medium | **P1** |
|
||||||
|
| 14. Blog | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | High | **P2** |
|
||||||
|
| 9. Exit Intent | ⭐⭐⭐ | ⭐ | Low | **P2** |
|
||||||
|
| 11. Live Chat | ⭐⭐⭐ | ⭐ | Low | **P2** |
|
||||||
|
| 15. Enhanced PDPs | ⭐⭐⭐⭐ | ⭐⭐⭐ | Medium | **P2** |
|
||||||
|
|
||||||
|
**Legend:**
|
||||||
|
- **P0:** Start immediately, highest ROI
|
||||||
|
- **P1:** Core revenue features
|
||||||
|
- **P2:** Growth and optimization
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Resource Requirements
|
||||||
|
|
||||||
|
### Development Team
|
||||||
|
- **Frontend:** 1-2 developers (Next.js/React)
|
||||||
|
- **Backend:** 1 developer (Node.js/GraphQL)
|
||||||
|
- **DevOps:** Part-time (CI/CD, infrastructure)
|
||||||
|
|
||||||
|
### External Resources
|
||||||
|
- **Content Writer:** For blog, FAQs, product descriptions
|
||||||
|
- **Video Production:** For tutorials and guides
|
||||||
|
- **Email Copywriter:** For email sequences
|
||||||
|
- **Designer:** For banners, badges, marketing assets
|
||||||
|
|
||||||
|
### Third-Party Services
|
||||||
|
- **Email Marketing:** Resend (✓), Klaviyo (optional upgrade)
|
||||||
|
- **Reviews Platform:** Loox, Judge.me, or custom
|
||||||
|
- **Live Chat:** WhatsApp Business (free), Intercom (paid)
|
||||||
|
- **Analytics:** OpenPanel (✓), Google Analytics 4
|
||||||
|
- **CMS:** Strapi (self-hosted) or Sanity
|
||||||
|
- **CDN:** Cloudflare (✓)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Success Metrics
|
||||||
|
|
||||||
|
### Revenue KPIs
|
||||||
|
- **Conversion Rate:** Current → Target (+20%)
|
||||||
|
- **Average Order Value:** Current → Target (+25%)
|
||||||
|
- **Customer Lifetime Value:** Current → Target (+40%)
|
||||||
|
- **Cart Abandonment Rate:** Current → Target (-30%)
|
||||||
|
|
||||||
|
### SEO KPIs
|
||||||
|
- **Organic Traffic:** +50% in 6 months
|
||||||
|
- **Click-Through Rate:** +15% with rich snippets
|
||||||
|
- **Keyword Rankings:** Top 3 for 20 target keywords
|
||||||
|
- **Domain Authority:** Increase by 10 points
|
||||||
|
|
||||||
|
### Engagement KPIs
|
||||||
|
- **Email List Growth:** +500 subscribers/month
|
||||||
|
- **Review Submission Rate:** 10% of orders
|
||||||
|
- **Repeat Purchase Rate:** 30% within 90 days
|
||||||
|
- **Customer Support Tickets:** -20% with FAQ
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- **Test everything:** A/B test major changes
|
||||||
|
- **Mobile-first:** 60%+ traffic is mobile
|
||||||
|
- **Performance:** Keep Core Web Vitals green
|
||||||
|
- **Accessibility:** WCAG 2.1 AA compliance
|
||||||
|
- **Privacy:** GDPR compliance for EU customers
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
*Last Updated: March 2026*
|
||||||
|
*Next Review: Quarterly*
|
||||||
Generated
+2574
-1
File diff suppressed because it is too large
Load Diff
+17
-2
@@ -6,7 +6,13 @@
|
|||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "eslint"
|
"lint": "eslint",
|
||||||
|
"test": "vitest",
|
||||||
|
"test:ui": "vitest --ui",
|
||||||
|
"test:coverage": "vitest --coverage",
|
||||||
|
"test:run": "vitest run",
|
||||||
|
"test:e2e": "playwright test",
|
||||||
|
"test:e2e:ui": "playwright test --ui"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@apollo/client": "^4.1.6",
|
"@apollo/client": "^4.1.6",
|
||||||
@@ -26,13 +32,22 @@
|
|||||||
"zustand": "^5.0.11"
|
"zustand": "^5.0.11"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@playwright/test": "^1.58.2",
|
||||||
"@tailwindcss/postcss": "^4",
|
"@tailwindcss/postcss": "^4",
|
||||||
|
"@testing-library/jest-dom": "^6.9.1",
|
||||||
|
"@testing-library/react": "^16.3.2",
|
||||||
|
"@testing-library/user-event": "^14.6.1",
|
||||||
"@types/node": "^20",
|
"@types/node": "^20",
|
||||||
"@types/react": "^19",
|
"@types/react": "^19",
|
||||||
"@types/react-dom": "^19",
|
"@types/react-dom": "^19",
|
||||||
|
"@vitejs/plugin-react": "^6.0.1",
|
||||||
|
"@vitest/coverage-v8": "^4.1.1",
|
||||||
"eslint": "^9",
|
"eslint": "^9",
|
||||||
"eslint-config-next": "16.1.6",
|
"eslint-config-next": "16.1.6",
|
||||||
|
"jsdom": "^29.0.1",
|
||||||
|
"msw": "^2.12.14",
|
||||||
"tailwindcss": "^4",
|
"tailwindcss": "^4",
|
||||||
"typescript": "^5"
|
"typescript": "^5",
|
||||||
|
"vitest": "^4.1.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,141 @@
|
|||||||
|
# Manoon Storefront Test Suite
|
||||||
|
|
||||||
|
Comprehensive test suite for the ManoonOils storefront with focus on webhooks, commerce operations, and critical paths.
|
||||||
|
|
||||||
|
## 🎯 Coverage Goals
|
||||||
|
|
||||||
|
- **Critical Paths**: 80%+ coverage
|
||||||
|
- **Webhook Handlers**: 100% coverage
|
||||||
|
- **Email Services**: 90%+ coverage
|
||||||
|
- **Analytics**: 80%+ coverage
|
||||||
|
|
||||||
|
## 🧪 Test Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/__tests__/
|
||||||
|
├── unit/
|
||||||
|
│ ├── services/ # Business logic tests
|
||||||
|
│ │ ├── OrderNotificationService.test.ts
|
||||||
|
│ │ └── AnalyticsService.test.ts
|
||||||
|
│ ├── stores/ # State management tests
|
||||||
|
│ │ └── saleorCheckoutStore.test.ts
|
||||||
|
│ └── utils/ # Utility function tests
|
||||||
|
│ └── formatPrice.test.ts
|
||||||
|
├── integration/
|
||||||
|
│ ├── api/
|
||||||
|
│ │ └── webhooks/
|
||||||
|
│ │ └── saleor.test.ts # Webhook handler tests
|
||||||
|
│ └── emails/
|
||||||
|
│ ├── OrderConfirmation.test.tsx
|
||||||
|
│ └── OrderShipped.test.tsx
|
||||||
|
└── fixtures/ # Test data
|
||||||
|
└── orders.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
## 🚀 Running Tests
|
||||||
|
|
||||||
|
### Unit & Integration Tests (Vitest)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run tests in watch mode
|
||||||
|
npm test
|
||||||
|
|
||||||
|
# Run tests once
|
||||||
|
npm run test:run
|
||||||
|
|
||||||
|
# Run with coverage report
|
||||||
|
npm run test:coverage
|
||||||
|
|
||||||
|
# Run with UI
|
||||||
|
npm run test:ui
|
||||||
|
```
|
||||||
|
|
||||||
|
### E2E Tests (Playwright)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Run all E2E tests
|
||||||
|
npm run test:e2e
|
||||||
|
|
||||||
|
# Run with UI mode
|
||||||
|
npm run test:e2e:ui
|
||||||
|
|
||||||
|
# Run specific test
|
||||||
|
npx playwright test tests/critical-paths/checkout-flow.spec.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📊 Test Categories
|
||||||
|
|
||||||
|
### 🔥 Critical Tests (Must Pass)
|
||||||
|
|
||||||
|
1. **Webhook Handler Tests**
|
||||||
|
- ORDER_CONFIRMED: Sends emails + analytics
|
||||||
|
- ORDER_CREATED: No duplicate emails/analytics
|
||||||
|
- ORDER_FULFILLED: Tracking info included
|
||||||
|
- ORDER_CANCELLED: Cancellation reason included
|
||||||
|
- ORDER_FULLY_PAID: Payment confirmation
|
||||||
|
|
||||||
|
2. **Email Service Tests**
|
||||||
|
- Correct translations (SR, EN, DE, FR)
|
||||||
|
- Price formatting (no /100 bug)
|
||||||
|
- Admin vs Customer templates
|
||||||
|
- Address formatting
|
||||||
|
|
||||||
|
3. **Analytics Tests**
|
||||||
|
- Revenue tracked once per order
|
||||||
|
- Correct currency (RSD not USD)
|
||||||
|
- Error handling (doesn't break order flow)
|
||||||
|
|
||||||
|
### 🔧 Integration Tests
|
||||||
|
|
||||||
|
- Full checkout flow
|
||||||
|
- Cart operations
|
||||||
|
- Email template rendering
|
||||||
|
- API error handling
|
||||||
|
|
||||||
|
## 🎭 Mocking Strategy
|
||||||
|
|
||||||
|
- **Resend**: Mocked (no actual emails sent)
|
||||||
|
- **OpenPanel**: Mocked (no actual tracking in tests)
|
||||||
|
- **Saleor API**: Can use real instance for integration tests (read-only)
|
||||||
|
|
||||||
|
## 📈 Coverage Reports
|
||||||
|
|
||||||
|
Coverage reports are generated in multiple formats:
|
||||||
|
- Console output (text)
|
||||||
|
- `coverage/coverage-final.json` (JSON)
|
||||||
|
- `coverage/index.html` (HTML report)
|
||||||
|
|
||||||
|
Open `coverage/index.html` in browser for detailed view.
|
||||||
|
|
||||||
|
## 🔍 Debugging Tests
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Debug specific test
|
||||||
|
npm test -- --reporter=verbose src/__tests__/unit/services/AnalyticsService.test.ts
|
||||||
|
|
||||||
|
# Debug with logs
|
||||||
|
DEBUG=true npm test
|
||||||
|
```
|
||||||
|
|
||||||
|
## 📝 Adding New Tests
|
||||||
|
|
||||||
|
1. Create test file: `src/__tests__/unit|integration/path/to/file.test.ts`
|
||||||
|
2. Import from `@/` alias (configured in vitest.config.ts)
|
||||||
|
3. Use fixtures from `src/__tests__/fixtures/`
|
||||||
|
4. Mock external services
|
||||||
|
5. Run tests to verify
|
||||||
|
|
||||||
|
## 🚧 Current Limitations
|
||||||
|
|
||||||
|
- No CI/CD integration yet (informational only)
|
||||||
|
- E2E tests need Playwright browser installation
|
||||||
|
- Some tests use mocked data instead of real Saleor API
|
||||||
|
|
||||||
|
## ✅ Test Checklist
|
||||||
|
|
||||||
|
Before deploying, ensure:
|
||||||
|
- [ ] All webhook tests pass
|
||||||
|
- [ ] Email service tests pass
|
||||||
|
- [ ] Analytics tests pass
|
||||||
|
- [ ] Coverage >= 80% for critical paths
|
||||||
|
- [ ] No console errors in tests
|
||||||
@@ -0,0 +1,112 @@
|
|||||||
|
// Test fixtures for orders
|
||||||
|
export const mockOrderPayload = {
|
||||||
|
id: "T3JkZXI6MTIzNDU2Nzg=",
|
||||||
|
number: 1524,
|
||||||
|
user_email: "[email protected]",
|
||||||
|
first_name: "Test",
|
||||||
|
last_name: "Customer",
|
||||||
|
billing_address: {
|
||||||
|
first_name: "Test",
|
||||||
|
last_name: "Customer",
|
||||||
|
street_address_1: "123 Test Street",
|
||||||
|
street_address_2: "",
|
||||||
|
city: "Belgrade",
|
||||||
|
postal_code: "11000",
|
||||||
|
country: "RS",
|
||||||
|
phone: "+38160123456",
|
||||||
|
},
|
||||||
|
shipping_address: {
|
||||||
|
first_name: "Test",
|
||||||
|
last_name: "Customer",
|
||||||
|
street_address_1: "123 Test Street",
|
||||||
|
street_address_2: "",
|
||||||
|
city: "Belgrade",
|
||||||
|
postal_code: "11000",
|
||||||
|
country: "RS",
|
||||||
|
phone: "+38160123456",
|
||||||
|
},
|
||||||
|
lines: [
|
||||||
|
{
|
||||||
|
id: "T3JkZXJMaW5lOjE=",
|
||||||
|
product_name: "Manoon Anti-age Serum",
|
||||||
|
variant_name: "50ml",
|
||||||
|
quantity: 2,
|
||||||
|
total_price_gross_amount: "10000",
|
||||||
|
currency: "RSD",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
total_gross_amount: "10000",
|
||||||
|
shipping_price_gross_amount: "480",
|
||||||
|
channel: {
|
||||||
|
currency_code: "RSD",
|
||||||
|
},
|
||||||
|
language_code: "EN",
|
||||||
|
metadata: {},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const mockOrderConverted = {
|
||||||
|
id: "T3JkZXI6MTIzNDU2Nzg=",
|
||||||
|
number: "1524",
|
||||||
|
userEmail: "[email protected]",
|
||||||
|
user: {
|
||||||
|
firstName: "Test",
|
||||||
|
lastName: "Customer",
|
||||||
|
},
|
||||||
|
billingAddress: {
|
||||||
|
firstName: "Test",
|
||||||
|
lastName: "Customer",
|
||||||
|
streetAddress1: "123 Test Street",
|
||||||
|
streetAddress2: "",
|
||||||
|
city: "Belgrade",
|
||||||
|
postalCode: "11000",
|
||||||
|
country: "RS",
|
||||||
|
phone: "+38160123456",
|
||||||
|
},
|
||||||
|
shippingAddress: {
|
||||||
|
firstName: "Test",
|
||||||
|
lastName: "Customer",
|
||||||
|
streetAddress1: "123 Test Street",
|
||||||
|
streetAddress2: "",
|
||||||
|
city: "Belgrade",
|
||||||
|
postalCode: "11000",
|
||||||
|
country: "RS",
|
||||||
|
phone: "+38160123456",
|
||||||
|
},
|
||||||
|
lines: [
|
||||||
|
{
|
||||||
|
id: "T3JkZXJMaW5lOjE=",
|
||||||
|
productName: "Manoon Anti-age Serum",
|
||||||
|
variantName: "50ml",
|
||||||
|
quantity: 2,
|
||||||
|
totalPrice: {
|
||||||
|
gross: {
|
||||||
|
amount: 10000,
|
||||||
|
currency: "RSD",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
total: {
|
||||||
|
gross: {
|
||||||
|
amount: 10000,
|
||||||
|
currency: "RSD",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
languageCode: "EN",
|
||||||
|
metadata: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const mockOrderWithTracking = {
|
||||||
|
...mockOrderPayload,
|
||||||
|
metadata: {
|
||||||
|
trackingNumber: "TRK123456789",
|
||||||
|
trackingUrl: "https://tracking.example.com/TRK123456789",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const mockOrderCancelled = {
|
||||||
|
...mockOrderPayload,
|
||||||
|
metadata: {
|
||||||
|
cancellationReason: "Customer requested cancellation",
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,280 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||||
|
import { NextRequest } from "next/server";
|
||||||
|
import { POST, GET } from "@/app/api/webhooks/saleor/route";
|
||||||
|
import { orderNotificationService } from "@/lib/services/OrderNotificationService";
|
||||||
|
import { analyticsService } from "@/lib/services/AnalyticsService";
|
||||||
|
import { mockOrderPayload, mockOrderWithTracking, mockOrderCancelled } from "../../../fixtures/orders";
|
||||||
|
|
||||||
|
// Mock the services
|
||||||
|
vi.mock("@/lib/services/OrderNotificationService", () => ({
|
||||||
|
orderNotificationService: {
|
||||||
|
sendOrderConfirmation: vi.fn().mockResolvedValue(undefined),
|
||||||
|
sendOrderConfirmationToAdmin: vi.fn().mockResolvedValue(undefined),
|
||||||
|
sendOrderShipped: vi.fn().mockResolvedValue(undefined),
|
||||||
|
sendOrderShippedToAdmin: vi.fn().mockResolvedValue(undefined),
|
||||||
|
sendOrderCancelled: vi.fn().mockResolvedValue(undefined),
|
||||||
|
sendOrderCancelledToAdmin: vi.fn().mockResolvedValue(undefined),
|
||||||
|
sendOrderPaid: vi.fn().mockResolvedValue(undefined),
|
||||||
|
sendOrderPaidToAdmin: vi.fn().mockResolvedValue(undefined),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
vi.mock("@/lib/services/AnalyticsService", () => ({
|
||||||
|
analyticsService: {
|
||||||
|
trackOrderReceived: vi.fn().mockResolvedValue(undefined),
|
||||||
|
trackRevenue: vi.fn().mockResolvedValue(undefined),
|
||||||
|
track: vi.fn().mockResolvedValue(undefined),
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe("Saleor Webhook Handler", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("GET /api/webhooks/saleor", () => {
|
||||||
|
it("should return health check response", async () => {
|
||||||
|
const response = await GET();
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
expect(response.status).toBe(200);
|
||||||
|
expect(data.status).toBe("ok");
|
||||||
|
expect(data.supportedEvents).toContain("ORDER_CONFIRMED");
|
||||||
|
expect(data.supportedEvents).toContain("ORDER_CREATED");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("POST /api/webhooks/saleor - ORDER_CONFIRMED", () => {
|
||||||
|
it("should process ORDER_CONFIRMED and send customer + admin emails", async () => {
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "ORDER_CONFIRMED",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([mockOrderPayload]),
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
expect(response.status).toBe(200);
|
||||||
|
expect(data.success).toBe(true);
|
||||||
|
|
||||||
|
// Should send customer email
|
||||||
|
expect(orderNotificationService.sendOrderConfirmation).toHaveBeenCalledTimes(1);
|
||||||
|
|
||||||
|
// Should send admin email
|
||||||
|
expect(orderNotificationService.sendOrderConfirmationToAdmin).toHaveBeenCalledTimes(1);
|
||||||
|
|
||||||
|
// Should track analytics
|
||||||
|
expect(analyticsService.trackOrderReceived).toHaveBeenCalledTimes(1);
|
||||||
|
expect(analyticsService.trackRevenue).toHaveBeenCalledTimes(1);
|
||||||
|
|
||||||
|
// Verify revenue tracking has correct data
|
||||||
|
expect(analyticsService.trackRevenue).toHaveBeenCalledWith({
|
||||||
|
amount: 10000,
|
||||||
|
currency: "RSD",
|
||||||
|
orderId: mockOrderPayload.id,
|
||||||
|
orderNumber: String(mockOrderPayload.number),
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should NOT track analytics for ORDER_CREATED (prevents duplication)", async () => {
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "ORDER_CREATED",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([mockOrderPayload]),
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
expect(response.status).toBe(200);
|
||||||
|
|
||||||
|
// Should NOT send customer email
|
||||||
|
expect(orderNotificationService.sendOrderConfirmation).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
// Should NOT track analytics
|
||||||
|
expect(analyticsService.trackOrderReceived).not.toHaveBeenCalled();
|
||||||
|
expect(analyticsService.trackRevenue).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
// Should still send admin notification
|
||||||
|
expect(orderNotificationService.sendOrderConfirmationToAdmin).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("POST /api/webhooks/saleor - ORDER_FULFILLED", () => {
|
||||||
|
it("should send shipping emails with tracking info", async () => {
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "ORDER_FULFILLED",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([mockOrderWithTracking]),
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
expect(response.status).toBe(200);
|
||||||
|
|
||||||
|
expect(orderNotificationService.sendOrderShipped).toHaveBeenCalledWith(
|
||||||
|
expect.any(Object),
|
||||||
|
"TRK123456789",
|
||||||
|
"https://tracking.example.com/TRK123456789"
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(orderNotificationService.sendOrderShippedToAdmin).toHaveBeenCalledWith(
|
||||||
|
expect.any(Object),
|
||||||
|
"TRK123456789",
|
||||||
|
"https://tracking.example.com/TRK123456789"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("POST /api/webhooks/saleor - ORDER_CANCELLED", () => {
|
||||||
|
it("should send cancellation emails with reason", async () => {
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "ORDER_CANCELLED",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([mockOrderCancelled]),
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
expect(response.status).toBe(200);
|
||||||
|
|
||||||
|
expect(orderNotificationService.sendOrderCancelled).toHaveBeenCalledWith(
|
||||||
|
expect.any(Object),
|
||||||
|
"Customer requested cancellation"
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(orderNotificationService.sendOrderCancelledToAdmin).toHaveBeenCalledWith(
|
||||||
|
expect.any(Object),
|
||||||
|
"Customer requested cancellation"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("POST /api/webhooks/saleor - ORDER_FULLY_PAID", () => {
|
||||||
|
it("should send payment confirmation emails", async () => {
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "ORDER_FULLY_PAID",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([mockOrderPayload]),
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
expect(response.status).toBe(200);
|
||||||
|
|
||||||
|
expect(orderNotificationService.sendOrderPaid).toHaveBeenCalledTimes(1);
|
||||||
|
expect(orderNotificationService.sendOrderPaidToAdmin).toHaveBeenCalledTimes(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Error Handling", () => {
|
||||||
|
it("should return 400 for missing order in payload", async () => {
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "ORDER_CONFIRMED",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([]), // Empty array
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
expect(response.status).toBe(400);
|
||||||
|
expect(data.error).toBe("No order in payload");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should return 400 for missing saleor-event header", async () => {
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([mockOrderPayload]),
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
expect(response.status).toBe(400);
|
||||||
|
expect(data.error).toBe("Missing saleor-event header");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should return 200 for unsupported events (graceful skip)", async () => {
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "UNSUPPORTED_EVENT",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([mockOrderPayload]),
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
expect(response.status).toBe(200);
|
||||||
|
expect(data.message).toBe("Event not supported");
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle server errors gracefully", async () => {
|
||||||
|
// Simulate service throwing error
|
||||||
|
vi.mocked(orderNotificationService.sendOrderConfirmationToAdmin).mockRejectedValueOnce(
|
||||||
|
new Error("Email service down")
|
||||||
|
);
|
||||||
|
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "ORDER_CREATED",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([mockOrderPayload]),
|
||||||
|
});
|
||||||
|
|
||||||
|
const response = await POST(request);
|
||||||
|
expect(response.status).toBe(500);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Currency Handling", () => {
|
||||||
|
it("should preserve RSD currency from Saleor payload", async () => {
|
||||||
|
const rsdOrder = {
|
||||||
|
...mockOrderPayload,
|
||||||
|
total_gross_amount: "5479",
|
||||||
|
channel: { currency_code: "RSD" },
|
||||||
|
};
|
||||||
|
|
||||||
|
const request = new NextRequest("http://localhost:3000/api/webhooks/saleor", {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"saleor-event": "ORDER_CONFIRMED",
|
||||||
|
"saleor-domain": "api.manoonoils.com",
|
||||||
|
},
|
||||||
|
body: JSON.stringify([rsdOrder]),
|
||||||
|
});
|
||||||
|
|
||||||
|
await POST(request);
|
||||||
|
|
||||||
|
// Verify the order passed to analytics has correct currency
|
||||||
|
expect(analyticsService.trackRevenue).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
amount: 5479,
|
||||||
|
currency: "RSD",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
import "@testing-library/jest-dom";
|
||||||
|
import { vi } from "vitest";
|
||||||
|
|
||||||
|
// Mock environment variables
|
||||||
|
process.env.NEXT_PUBLIC_SALEOR_API_URL = "https://api.manoonoils.com/graphql/";
|
||||||
|
process.env.NEXT_PUBLIC_SITE_URL = "https://dev.manoonoils.com";
|
||||||
|
process.env.DASHBOARD_URL = "https://dashboard.manoonoils.com";
|
||||||
|
process.env.RESEND_API_KEY = "test-api-key";
|
||||||
|
process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID = "test-client-id";
|
||||||
|
process.env.OPENPANEL_CLIENT_SECRET = "test-client-secret";
|
||||||
|
process.env.OPENPANEL_API_URL = "https://op.nodecrew.me/api";
|
||||||
|
|
||||||
|
// Mock Resend
|
||||||
|
vi.mock("resend", () => ({
|
||||||
|
Resend: vi.fn().mockImplementation(() => ({
|
||||||
|
emails: {
|
||||||
|
send: vi.fn().mockResolvedValue({ id: "test-email-id" }),
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Mock OpenPanel
|
||||||
|
vi.mock("@openpanel/nextjs", () => ({
|
||||||
|
OpenPanel: vi.fn().mockImplementation(() => ({
|
||||||
|
track: vi.fn().mockResolvedValue(undefined),
|
||||||
|
revenue: vi.fn().mockResolvedValue(undefined),
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Global test utilities
|
||||||
|
global.ResizeObserver = vi.fn().mockImplementation(() => ({
|
||||||
|
observe: vi.fn(),
|
||||||
|
unobserve: vi.fn(),
|
||||||
|
disconnect: vi.fn(),
|
||||||
|
}));
|
||||||
@@ -0,0 +1,233 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||||
|
|
||||||
|
// Create mock functions using vi.hoisted so they're available during mock setup
|
||||||
|
const { mockTrack, mockRevenue } = vi.hoisted(() => ({
|
||||||
|
mockTrack: vi.fn().mockResolvedValue(undefined),
|
||||||
|
mockRevenue: vi.fn().mockResolvedValue(undefined),
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Mock OpenPanel using factory function
|
||||||
|
vi.mock("@openpanel/nextjs", () => {
|
||||||
|
return {
|
||||||
|
OpenPanel: class MockOpenPanel {
|
||||||
|
track = mockTrack;
|
||||||
|
revenue = mockRevenue;
|
||||||
|
constructor() {}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// Import after mock is set up
|
||||||
|
import { AnalyticsService } from "@/lib/services/AnalyticsService";
|
||||||
|
|
||||||
|
describe("AnalyticsService", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("trackOrderReceived", () => {
|
||||||
|
it("should track order with all details", async () => {
|
||||||
|
await new AnalyticsService().trackOrderReceived({
|
||||||
|
orderId: "order-123",
|
||||||
|
orderNumber: "1524",
|
||||||
|
total: 5479,
|
||||||
|
currency: "RSD",
|
||||||
|
itemCount: 3,
|
||||||
|
customerEmail: "[email protected]",
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockTrack).toHaveBeenCalledWith("order_received", {
|
||||||
|
order_id: "order-123",
|
||||||
|
order_number: "1524",
|
||||||
|
total: 5479,
|
||||||
|
currency: "RSD",
|
||||||
|
item_count: 3,
|
||||||
|
customer_email: "[email protected]",
|
||||||
|
event_type: "ORDER_CONFIRMED",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle large order values", async () => {
|
||||||
|
await new AnalyticsService().trackOrderReceived({
|
||||||
|
orderId: "order-456",
|
||||||
|
orderNumber: "2000",
|
||||||
|
total: 500000, // Large amount
|
||||||
|
currency: "RSD",
|
||||||
|
itemCount: 100,
|
||||||
|
customerEmail: "[email protected]",
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockTrack).toHaveBeenCalledWith(
|
||||||
|
"order_received",
|
||||||
|
expect.objectContaining({
|
||||||
|
total: 500000,
|
||||||
|
item_count: 100,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not throw if tracking fails", async () => {
|
||||||
|
mockTrack.mockRejectedValueOnce(new Error("Network error"));
|
||||||
|
|
||||||
|
await expect(
|
||||||
|
new AnalyticsService().trackOrderReceived({
|
||||||
|
orderId: "order-123",
|
||||||
|
orderNumber: "1524",
|
||||||
|
total: 1000,
|
||||||
|
currency: "RSD",
|
||||||
|
itemCount: 1,
|
||||||
|
customerEmail: "[email protected]",
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
})
|
||||||
|
).resolves.not.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("trackRevenue", () => {
|
||||||
|
it("should track revenue with correct currency", async () => {
|
||||||
|
await new AnalyticsService().trackRevenue({
|
||||||
|
amount: 5479,
|
||||||
|
currency: "RSD",
|
||||||
|
orderId: "order-123",
|
||||||
|
orderNumber: "1524",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockRevenue).toHaveBeenCalledWith(5479, {
|
||||||
|
currency: "RSD",
|
||||||
|
order_id: "order-123",
|
||||||
|
order_number: "1524",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should track revenue with different currencies", async () => {
|
||||||
|
// Test EUR
|
||||||
|
await new AnalyticsService().trackRevenue({
|
||||||
|
amount: 100,
|
||||||
|
currency: "EUR",
|
||||||
|
orderId: "order-1",
|
||||||
|
orderNumber: "1000",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockRevenue).toHaveBeenCalledWith(100, {
|
||||||
|
currency: "EUR",
|
||||||
|
order_id: "order-1",
|
||||||
|
order_number: "1000",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Test USD
|
||||||
|
await new AnalyticsService().trackRevenue({
|
||||||
|
amount: 150,
|
||||||
|
currency: "USD",
|
||||||
|
orderId: "order-2",
|
||||||
|
orderNumber: "1001",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockRevenue).toHaveBeenCalledWith(150, {
|
||||||
|
currency: "USD",
|
||||||
|
order_id: "order-2",
|
||||||
|
order_number: "1001",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should log tracking for debugging", async () => {
|
||||||
|
const consoleSpy = vi.spyOn(console, "log").mockImplementation(() => {});
|
||||||
|
|
||||||
|
await new AnalyticsService().trackRevenue({
|
||||||
|
amount: 5479,
|
||||||
|
currency: "RSD",
|
||||||
|
orderId: "order-123",
|
||||||
|
orderNumber: "1524",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(consoleSpy).toHaveBeenCalledWith(
|
||||||
|
"Tracking revenue: 5479 RSD for order 1524"
|
||||||
|
);
|
||||||
|
|
||||||
|
consoleSpy.mockRestore();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not throw if revenue tracking fails", async () => {
|
||||||
|
mockRevenue.mockRejectedValueOnce(new Error("API error"));
|
||||||
|
|
||||||
|
await expect(
|
||||||
|
new AnalyticsService().trackRevenue({
|
||||||
|
amount: 1000,
|
||||||
|
currency: "RSD",
|
||||||
|
orderId: "order-123",
|
||||||
|
orderNumber: "1524",
|
||||||
|
})
|
||||||
|
).resolves.not.toThrow();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle zero amount orders", async () => {
|
||||||
|
await new AnalyticsService().trackRevenue({
|
||||||
|
amount: 0,
|
||||||
|
currency: "RSD",
|
||||||
|
orderId: "order-000",
|
||||||
|
orderNumber: "0000",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockRevenue).toHaveBeenCalledWith(0, {
|
||||||
|
currency: "RSD",
|
||||||
|
order_id: "order-000",
|
||||||
|
order_number: "0000",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("track", () => {
|
||||||
|
it("should track custom events", async () => {
|
||||||
|
await new AnalyticsService().track("custom_event", {
|
||||||
|
property1: "value1",
|
||||||
|
property2: 123,
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockTrack).toHaveBeenCalledWith("custom_event", {
|
||||||
|
property1: "value1",
|
||||||
|
property2: 123,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should not throw on tracking errors", async () => {
|
||||||
|
mockTrack.mockRejectedValueOnce(new Error("Tracking failed"));
|
||||||
|
|
||||||
|
await expect(
|
||||||
|
new AnalyticsService().track("test_event", { test: true })
|
||||||
|
).resolves.not.toThrow();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Singleton pattern", () => {
|
||||||
|
it("should return the same instance", async () => {
|
||||||
|
// Import fresh to test singleton using dynamic import
|
||||||
|
const { analyticsService: service1 } = await import("@/lib/services/AnalyticsService");
|
||||||
|
const { analyticsService: service2 } = await import("@/lib/services/AnalyticsService");
|
||||||
|
|
||||||
|
expect(service1).toBe(service2);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("Error handling", () => {
|
||||||
|
it("should log errors but not throw", async () => {
|
||||||
|
const consoleErrorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
|
||||||
|
mockTrack.mockRejectedValueOnce(new Error("Test error"));
|
||||||
|
|
||||||
|
await new AnalyticsService().trackOrderReceived({
|
||||||
|
orderId: "order-123",
|
||||||
|
orderNumber: "1524",
|
||||||
|
total: 1000,
|
||||||
|
currency: "RSD",
|
||||||
|
itemCount: 1,
|
||||||
|
customerEmail: "[email protected]",
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(consoleErrorSpy).toHaveBeenCalled();
|
||||||
|
expect(consoleErrorSpy.mock.calls[0][0]).toContain("Failed to track order received");
|
||||||
|
|
||||||
|
consoleErrorSpy.mockRestore();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,263 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach } from "vitest";
|
||||||
|
import { orderNotificationService } from "@/lib/services/OrderNotificationService";
|
||||||
|
import { sendEmailToCustomer, sendEmailToAdmin } from "@/lib/resend";
|
||||||
|
import { mockOrderConverted } from "../../fixtures/orders";
|
||||||
|
|
||||||
|
// Mock the resend module
|
||||||
|
vi.mock("@/lib/resend", () => ({
|
||||||
|
sendEmailToCustomer: vi.fn().mockResolvedValue({ id: "test-email-id" }),
|
||||||
|
sendEmailToAdmin: vi.fn().mockResolvedValue({ id: "test-email-id" }),
|
||||||
|
ADMIN_EMAILS: ["[email protected]", "[email protected]"],
|
||||||
|
}));
|
||||||
|
|
||||||
|
describe("OrderNotificationService", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.clearAllMocks();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("sendOrderConfirmation", () => {
|
||||||
|
it("should send customer order confirmation in correct language (EN)", async () => {
|
||||||
|
const order = { ...mockOrderConverted, languageCode: "EN" };
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
to: "[email protected]",
|
||||||
|
subject: "Order Confirmation #1524",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should send customer order confirmation in Serbian (SR)", async () => {
|
||||||
|
const order = { ...mockOrderConverted, languageCode: "SR" };
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
to: "[email protected]",
|
||||||
|
subject: "Potvrda narudžbine #1524",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should send customer order confirmation in German (DE)", async () => {
|
||||||
|
const order = { ...mockOrderConverted, languageCode: "DE" };
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
to: "[email protected]",
|
||||||
|
subject: "Bestellbestätigung #1524",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should send customer order confirmation in French (FR)", async () => {
|
||||||
|
const order = { ...mockOrderConverted, languageCode: "FR" };
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
to: "[email protected]",
|
||||||
|
subject: "Confirmation de commande #1524",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should format price correctly", async () => {
|
||||||
|
const order = {
|
||||||
|
...mockOrderConverted,
|
||||||
|
total: {
|
||||||
|
gross: {
|
||||||
|
amount: 5479,
|
||||||
|
currency: "RSD",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
subject: "Order Confirmation #1524",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle missing variant name gracefully", async () => {
|
||||||
|
const order = {
|
||||||
|
...mockOrderConverted,
|
||||||
|
lines: [
|
||||||
|
{
|
||||||
|
...mockOrderConverted.lines[0],
|
||||||
|
variantName: undefined,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should include variant name when present", async () => {
|
||||||
|
await orderNotificationService.sendOrderConfirmation(mockOrderConverted);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("sendOrderConfirmationToAdmin", () => {
|
||||||
|
it("should send admin notification with order details", async () => {
|
||||||
|
await orderNotificationService.sendOrderConfirmationToAdmin(mockOrderConverted);
|
||||||
|
|
||||||
|
expect(sendEmailToAdmin).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
subject: expect.stringContaining("🎉 New Order #1524"),
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
orderId: "T3JkZXI6MTIzNDU2Nzg=",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should always use English for admin emails", async () => {
|
||||||
|
const order = { ...mockOrderConverted, languageCode: "SR" };
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmationToAdmin(order);
|
||||||
|
|
||||||
|
expect(sendEmailToAdmin).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should include all order details in admin email", async () => {
|
||||||
|
await orderNotificationService.sendOrderConfirmationToAdmin(mockOrderConverted);
|
||||||
|
|
||||||
|
expect(sendEmailToAdmin).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
subject: expect.stringContaining("🎉 New Order"),
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("sendOrderShipped", () => {
|
||||||
|
it("should send shipping confirmation with tracking", async () => {
|
||||||
|
await orderNotificationService.sendOrderShipped(
|
||||||
|
mockOrderConverted,
|
||||||
|
"TRK123",
|
||||||
|
"https://track.com/TRK123"
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
to: "[email protected]",
|
||||||
|
subject: "Your Order #1524 Has Shipped!",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle missing tracking info", async () => {
|
||||||
|
await orderNotificationService.sendOrderShipped(mockOrderConverted);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
subject: "Your Order #1524 Has Shipped!",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("sendOrderCancelled", () => {
|
||||||
|
it("should send cancellation email with reason", async () => {
|
||||||
|
await orderNotificationService.sendOrderCancelled(
|
||||||
|
mockOrderConverted,
|
||||||
|
"Out of stock"
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
to: "[email protected]",
|
||||||
|
subject: "Your Order #1524 Has Been Cancelled",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("sendOrderPaid", () => {
|
||||||
|
it("should send payment confirmation", async () => {
|
||||||
|
await orderNotificationService.sendOrderPaid(mockOrderConverted);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalledWith(
|
||||||
|
expect.objectContaining({
|
||||||
|
to: "[email protected]",
|
||||||
|
subject: "Payment Received for Order #1524!",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("formatPrice", () => {
|
||||||
|
it("should format prices correctly for RSD", () => {
|
||||||
|
// This is tested indirectly through the email calls above
|
||||||
|
// The formatPrice function is in utils.ts
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("edge cases", () => {
|
||||||
|
it("should handle orders with user name", async () => {
|
||||||
|
const order = {
|
||||||
|
...mockOrderConverted,
|
||||||
|
user: { firstName: "John", lastName: "Doe" },
|
||||||
|
};
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle orders without user object", async () => {
|
||||||
|
const order = {
|
||||||
|
...mockOrderConverted,
|
||||||
|
user: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle orders with incomplete address", async () => {
|
||||||
|
const order = {
|
||||||
|
...mockOrderConverted,
|
||||||
|
shippingAddress: {
|
||||||
|
firstName: "Test",
|
||||||
|
lastName: "Customer",
|
||||||
|
city: "Belgrade",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle orders with missing shipping address", async () => {
|
||||||
|
const order = {
|
||||||
|
...mockOrderConverted,
|
||||||
|
shippingAddress: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
await orderNotificationService.sendOrderConfirmation(order);
|
||||||
|
|
||||||
|
expect(sendEmailToCustomer).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
import { describe, it, expect } from "vitest";
|
||||||
|
import { formatPrice } from "@/app/api/webhooks/saleor/utils";
|
||||||
|
|
||||||
|
describe("formatPrice", () => {
|
||||||
|
it("should format RSD currency correctly", () => {
|
||||||
|
const result = formatPrice(5479, "RSD");
|
||||||
|
// Note: sr-RS locale uses non-breaking space between number and currency
|
||||||
|
expect(result).toMatch(/5\.479,00\sRSD/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should format small amounts correctly", () => {
|
||||||
|
const result = formatPrice(50, "RSD");
|
||||||
|
expect(result).toMatch(/50,00\sRSD/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should format large amounts correctly", () => {
|
||||||
|
const result = formatPrice(100000, "RSD");
|
||||||
|
expect(result).toMatch(/100\.000,00\sRSD/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should format EUR currency correctly", () => {
|
||||||
|
const result = formatPrice(100, "EUR");
|
||||||
|
// sr-RS locale uses € symbol for EUR
|
||||||
|
expect(result).toMatch(/100,00\s€/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should format USD currency correctly", () => {
|
||||||
|
const result = formatPrice(150, "USD");
|
||||||
|
// sr-RS locale uses US$ symbol for USD
|
||||||
|
expect(result).toMatch(/150,00\sUS\$/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle decimal amounts", () => {
|
||||||
|
const result = formatPrice(1000.5, "RSD");
|
||||||
|
expect(result).toMatch(/1\.000,50\sRSD/);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("should handle zero", () => {
|
||||||
|
const result = formatPrice(0, "RSD");
|
||||||
|
expect(result).toMatch(/0,00\sRSD/);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -76,4 +76,5 @@ class AnalyticsService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const analyticsService = AnalyticsService.getInstance();
|
export const analyticsService = AnalyticsService.getInstance();
|
||||||
|
export { AnalyticsService };
|
||||||
export default analyticsService;
|
export default analyticsService;
|
||||||
|
|||||||
@@ -0,0 +1,36 @@
|
|||||||
|
import { defineConfig } from "vitest/config";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
test: {
|
||||||
|
environment: "jsdom",
|
||||||
|
globals: true,
|
||||||
|
setupFiles: ["./src/__tests__/setup.ts"],
|
||||||
|
coverage: {
|
||||||
|
provider: "v8",
|
||||||
|
reporter: ["text", "json", "html"],
|
||||||
|
thresholds: {
|
||||||
|
lines: 80,
|
||||||
|
functions: 80,
|
||||||
|
branches: 80,
|
||||||
|
statements: 80,
|
||||||
|
},
|
||||||
|
exclude: [
|
||||||
|
"node_modules/",
|
||||||
|
"src/__tests__/",
|
||||||
|
"**/*.d.ts",
|
||||||
|
"**/*.config.*",
|
||||||
|
"**/e2e/**",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
|
||||||
|
exclude: ["node_modules", "dist", ".next", "e2e"],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "./src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user