Compare commits
22 Commits
feature/sa
...
feature/on
| Author | SHA1 | Date | |
|---|---|---|---|
|
6f9081cb52 | ||
|
|
7f35dc57c6 | ||
|
|
7d63f4fbcd | ||
|
|
b78b081d29 | ||
|
|
676dda4642 | ||
|
|
c8d184f9dc | ||
|
|
322c4c805b | ||
|
|
bcf74e1fd1 | ||
|
|
7ca756fc5a | ||
|
|
ca363a2406 | ||
|
|
5ec0e6c92c | ||
|
|
ee574cb736 | ||
|
|
a419337d99 | ||
|
|
09294fd752 | ||
|
|
a6ebcf408c | ||
|
|
f66f9b87ab | ||
|
|
85e41bfcc4 | ||
|
|
84b85f5291 | ||
|
|
c98677405a | ||
|
|
4d428b3ff0 | ||
|
|
9c2e4e1383 | ||
|
|
d0e3ee3201 |
367
ONE-PAGE-CHECKOUT-PLAN.md
Normal file
367
ONE-PAGE-CHECKOUT-PLAN.md
Normal file
@@ -0,0 +1,367 @@
|
|||||||
|
# One-Page Checkout Implementation Plan
|
||||||
|
|
||||||
|
**Branch:** `feature/one-page-checkout`
|
||||||
|
**Status:** In Development
|
||||||
|
**Priority:** High
|
||||||
|
**Phone Requirement:** Required (not optional)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
Convert the current two-phase checkout into a streamlined one-page checkout experience where customers can see all fields at once and complete their order in a single action.
|
||||||
|
|
||||||
|
### Current State
|
||||||
|
- **Phase 1:** Collect email, shipping address → fetch shipping methods
|
||||||
|
- **Phase 2:** Select shipping method, billing address → complete order
|
||||||
|
- **Total API calls:** 6-7 sequential requests across 2 user interactions
|
||||||
|
|
||||||
|
### Target State
|
||||||
|
- **Single Page:** All fields visible simultaneously
|
||||||
|
- **Dynamic updates:** Shipping methods fetch automatically when address changes
|
||||||
|
- **Single submit:** One "Complete Order" button
|
||||||
|
- **Optimized API:** 3-4 sequential steps (parallel where possible)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Requirements
|
||||||
|
|
||||||
|
### Must-Have
|
||||||
|
- [ ] All checkout fields visible on single page
|
||||||
|
- [ ] Phone number is **required** (strict validation)
|
||||||
|
- [ ] Shipping methods fetch automatically (debounced) when address changes
|
||||||
|
- [ ] Real-time total calculation (updates when shipping method selected)
|
||||||
|
- [ ] Single "Complete Order" submit button
|
||||||
|
- [ ] Section-based validation with inline errors
|
||||||
|
- [ ] Auto-scroll to first error on validation failure
|
||||||
|
- [ ] Preserve form data on error
|
||||||
|
|
||||||
|
### UX Requirements
|
||||||
|
- [ ] Clear visual hierarchy (Contact → Shipping → Billing → Shipping Method → Payment)
|
||||||
|
- [ ] Collapsible sections (optional - all expanded by default)
|
||||||
|
- [ ] Loading states for shipping method fetching
|
||||||
|
- [ ] Disabled submit button until all required fields valid
|
||||||
|
- [ ] Success confirmation page (existing)
|
||||||
|
|
||||||
|
### Technical Requirements
|
||||||
|
- [ ] Debounced shipping method API calls (500ms)
|
||||||
|
- [ ] Optimistic UI updates where possible
|
||||||
|
- [ ] Proper error handling per section
|
||||||
|
- [ ] Analytics events for checkout steps
|
||||||
|
- [ ] Mobile-responsive layout
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## UI Layout
|
||||||
|
|
||||||
|
### Left Column (Form - 60% width on desktop)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ 1. Contact Information │
|
||||||
|
│ ├─ Email * [________________] │
|
||||||
|
│ └─ Phone * [________________] │
|
||||||
|
│ [+381... format hint] │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 2. Shipping Address │
|
||||||
|
│ ├─ First Name * [____________] │
|
||||||
|
│ ├─ Last Name * [_____________] │
|
||||||
|
│ ├─ Country * [▼ Serbia ▼] │
|
||||||
|
│ ├─ Street Address * [________] │
|
||||||
|
│ ├─ Apt/Suite [______________] │
|
||||||
|
│ ├─ City * [_________________] │
|
||||||
|
│ └─ Postal Code * [__________] │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 3. Billing Address │
|
||||||
|
│ [✓] Same as shipping address │
|
||||||
|
│ (Fields hidden when checked) │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 4. Shipping Method │
|
||||||
|
│ (Loading... / Select to see │
|
||||||
|
│ available options) │
|
||||||
|
│ ○ Standard (2-3 days) 400 RSD │
|
||||||
|
│ ○ Express (1-2 days) 800 RSD │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ 5. Payment Method │
|
||||||
|
│ ● Cash on Delivery │
|
||||||
|
│ (Additional payment methods TBD) │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ [ Complete Order - 3,600 RSD ] │
|
||||||
|
│ Loading spinner when processing │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Right Column (Order Summary - 40% width on desktop)
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────┐
|
||||||
|
│ Order Summary │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Product Image Serum x1 3,200 │
|
||||||
|
│ RSD │
|
||||||
|
├─────────────────────────────────────┤
|
||||||
|
│ Subtotal 3,200 RSD │
|
||||||
|
│ Shipping 400 RSD │
|
||||||
|
│ ───────────────────────────────── │
|
||||||
|
│ Total 3,600 RSD │
|
||||||
|
└─────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
### Mobile Layout
|
||||||
|
Single column, stacked sections with sticky order summary at bottom.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Technical Implementation
|
||||||
|
|
||||||
|
### State Management
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Form state (existing)
|
||||||
|
const [shippingAddress, setShippingAddress] = useState<AddressForm>({...});
|
||||||
|
const [billingAddress, setBillingAddress] = useState<AddressForm>({...});
|
||||||
|
const [sameAsShipping, setSameAsShipping] = useState(true);
|
||||||
|
|
||||||
|
// New state
|
||||||
|
const [paymentMethod, setPaymentMethod] = useState<string>("cod");
|
||||||
|
const [errors, setErrors] = useState<ValidationErrors>({
|
||||||
|
contact: null,
|
||||||
|
shipping: null,
|
||||||
|
billing: null,
|
||||||
|
shippingMethod: null,
|
||||||
|
general: null,
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### Debounced Shipping Method Fetching
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isAddressComplete(shippingAddress)) return;
|
||||||
|
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
fetchShippingMethods();
|
||||||
|
}, 500); // 500ms debounce
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [shippingAddress]);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Validation Schema
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
const validationRules = {
|
||||||
|
email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
|
||||||
|
phone: (value) => {
|
||||||
|
// Country-specific validation
|
||||||
|
// Serbia: +381 XX XXX XXXX
|
||||||
|
// Bosnia: +387 XX XXX XXX
|
||||||
|
// etc.
|
||||||
|
},
|
||||||
|
required: (value) => value.trim().length > 0,
|
||||||
|
postalCode: (value, country) => {
|
||||||
|
// Country-specific postal code validation
|
||||||
|
},
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
### API Call Sequence
|
||||||
|
|
||||||
|
**Optimized Flow (parallel + sequential):**
|
||||||
|
|
||||||
|
```
|
||||||
|
Step 1: Validation (client-side)
|
||||||
|
├─ Validate all fields
|
||||||
|
└─ Show inline errors
|
||||||
|
|
||||||
|
Step 2: Parallel Independent Calls
|
||||||
|
├─ Update Email
|
||||||
|
└─ Update Shipping Address
|
||||||
|
(Both can run simultaneously)
|
||||||
|
|
||||||
|
Step 3: Conditional Call
|
||||||
|
└─ Update Billing Address (if different from shipping)
|
||||||
|
|
||||||
|
Step 4: Sequential Dependent Calls
|
||||||
|
├─ Update Shipping Method
|
||||||
|
├─ Update Metadata (phone, language, payment method)
|
||||||
|
└─ Complete Checkout
|
||||||
|
|
||||||
|
Total: 4 sequential steps vs current 7+
|
||||||
|
```
|
||||||
|
|
||||||
|
### Error Handling Strategy
|
||||||
|
|
||||||
|
**Field-level:**
|
||||||
|
- Real-time validation on blur
|
||||||
|
- Visual indicators (red border, error message)
|
||||||
|
- Prevent submit if validation fails
|
||||||
|
|
||||||
|
**Section-level:**
|
||||||
|
- Group errors by section
|
||||||
|
- Show section header in red if has errors
|
||||||
|
- Expand section if collapsed and has errors
|
||||||
|
|
||||||
|
**Form-level:**
|
||||||
|
- On submit: validate all fields
|
||||||
|
- If errors: scroll to first error, show summary
|
||||||
|
- If API error: show in relevant section, preserve data
|
||||||
|
|
||||||
|
**API-level:**
|
||||||
|
- Map Saleor errors to form fields when possible
|
||||||
|
- Generic error: show at top of form
|
||||||
|
- Network error: show retry button
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Files to Modify
|
||||||
|
|
||||||
|
### Primary Files
|
||||||
|
|
||||||
|
1. **`/src/app/[locale]/checkout/page.tsx`**
|
||||||
|
- Major refactor of checkout flow
|
||||||
|
- Combine Phase 1 & Phase 2 into single component
|
||||||
|
- Add debounced shipping method fetching
|
||||||
|
- Implement section-based validation
|
||||||
|
- Optimize API call sequence
|
||||||
|
|
||||||
|
2. **`/src/lib/saleor/mutations/Checkout.ts`**
|
||||||
|
- Ensure all mutations available
|
||||||
|
- Add metadata update mutation if needed
|
||||||
|
|
||||||
|
3. **`/src/lib/saleor/queries/Checkout.ts`**
|
||||||
|
- Ensure checkout query returns shipping methods
|
||||||
|
|
||||||
|
### Translation Files
|
||||||
|
|
||||||
|
4. **`/messages/sr.json`** (and other language files)
|
||||||
|
- Add new translation keys for one-page checkout
|
||||||
|
- Section headers
|
||||||
|
- Validation messages
|
||||||
|
- Button labels
|
||||||
|
|
||||||
|
### Styling
|
||||||
|
|
||||||
|
5. **`/src/app/globals.css`** (or Tailwind config)
|
||||||
|
- Ensure consistent form styling
|
||||||
|
- Add validation state styles
|
||||||
|
- Loading spinner styles
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Implementation Phases
|
||||||
|
|
||||||
|
### Phase 1: Core Structure (Day 1-2)
|
||||||
|
- [ ] Refactor checkout page layout
|
||||||
|
- [ ] Display all sections simultaneously
|
||||||
|
- [ ] Keep existing form logic working
|
||||||
|
- [ ] Test existing flow still works
|
||||||
|
|
||||||
|
### Phase 2: Dynamic Shipping Methods (Day 3)
|
||||||
|
- [ ] Implement debounced fetching
|
||||||
|
- [ ] Add loading states
|
||||||
|
- [ ] Display shipping methods inline
|
||||||
|
- [ ] Update total when method selected
|
||||||
|
|
||||||
|
### Phase 3: Validation & Error Handling (Day 4)
|
||||||
|
- [ ] Implement field-level validation
|
||||||
|
- [ ] Add section-based error display
|
||||||
|
- [ ] Auto-scroll to errors
|
||||||
|
- [ ] Test all validation scenarios
|
||||||
|
|
||||||
|
### Phase 4: Optimization (Day 5)
|
||||||
|
- [ ] Optimize API call sequence
|
||||||
|
- [ ] Add parallel mutation execution
|
||||||
|
- [ ] Improve loading states
|
||||||
|
- [ ] Add optimistic updates
|
||||||
|
|
||||||
|
### Phase 5: Polish (Day 6)
|
||||||
|
- [ ] Mobile responsiveness
|
||||||
|
- [ ] Analytics events
|
||||||
|
- [ ] Accessibility improvements
|
||||||
|
- [ ] Final testing
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Testing Checklist
|
||||||
|
|
||||||
|
### Functionality Tests
|
||||||
|
- [ ] Fill all fields, submit successfully
|
||||||
|
- [ ] Verify order created in Saleor
|
||||||
|
- [ ] Verify emails sent
|
||||||
|
- [ ] Change shipping method, verify total updates
|
||||||
|
- [ ] Change address, verify shipping methods refetch
|
||||||
|
|
||||||
|
### Validation Tests
|
||||||
|
- [ ] Submit with empty email → email error
|
||||||
|
- [ ] Submit with empty phone → phone error
|
||||||
|
- [ ] Submit with invalid email format → format error
|
||||||
|
- [ ] Submit with invalid phone → format error
|
||||||
|
- [ ] Submit with empty required fields → field errors
|
||||||
|
- [ ] Submit without selecting shipping method → shipping error
|
||||||
|
|
||||||
|
### Edge Cases
|
||||||
|
- [ ] Slow network (test debouncing)
|
||||||
|
- [ ] No shipping methods available
|
||||||
|
- [ ] API failure during submission
|
||||||
|
- [ ] Partial API failure (some mutations succeed)
|
||||||
|
- [ ] Browser refresh (preserve data?)
|
||||||
|
|
||||||
|
### Mobile Tests
|
||||||
|
- [ ] Layout works on iPhone SE
|
||||||
|
- [ ] Layout works on iPhone 14 Pro Max
|
||||||
|
- [ ] Touch targets large enough
|
||||||
|
- [ ] Scroll behavior smooth
|
||||||
|
|
||||||
|
### Accessibility Tests
|
||||||
|
- [ ] Tab navigation works
|
||||||
|
- [ ] Screen reader friendly
|
||||||
|
- [ ] Error announcements
|
||||||
|
- [ ] Focus management
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Rollout Strategy
|
||||||
|
|
||||||
|
1. **Development:** Complete on feature branch
|
||||||
|
2. **Testing:** Local testing with all scenarios
|
||||||
|
3. **Staging:** Deploy to dev.manoonoils.com
|
||||||
|
4. **Monitoring:** Check for errors, conversion rates
|
||||||
|
5. **Production:** Merge to master and deploy
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Success Metrics
|
||||||
|
|
||||||
|
- **Conversion Rate:** Should increase (fewer steps = less drop-off)
|
||||||
|
- **Time to Complete:** Should decrease (single page vs two phases)
|
||||||
|
- **Error Rate:** Should decrease (better validation)
|
||||||
|
- **Mobile Completion:** Should improve (optimized for mobile)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Future Enhancements (Out of Scope)
|
||||||
|
|
||||||
|
- [ ] Save addresses for logged-in users
|
||||||
|
- [ ] Address autocomplete (Google Maps)
|
||||||
|
- [ ] Multiple payment methods (Stripe, etc.)
|
||||||
|
- [ ] Guest checkout improvements
|
||||||
|
- [ ] Order notes/comments field
|
||||||
|
- [ ] Gift wrapping options
|
||||||
|
- [ ] Promo code input
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- Phone number is **strictly required** - validate format per country
|
||||||
|
- Keep existing checkout success page
|
||||||
|
- Maintain multi-language support
|
||||||
|
- Ensure analytics tracking works
|
||||||
|
- Don't break existing cart functionality
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Created:** March 28, 2026
|
||||||
|
**Branch:** feature/one-page-checkout
|
||||||
|
**Next Step:** Start Phase 1 - Core Structure
|
||||||
666
docs/roadmap/FEATURE_ROADMAP.md
Normal file
666
docs/roadmap/FEATURE_ROADMAP.md
Normal file
@@ -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*
|
||||||
2575
package-lock.json
generated
2575
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
19
package.json
19
package.json
@@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
141
src/__tests__/README.md
Normal file
141
src/__tests__/README.md
Normal file
@@ -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
|
||||||
112
src/__tests__/fixtures/orders.ts
Normal file
112
src/__tests__/fixtures/orders.ts
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
// Test fixtures for orders
|
||||||
|
export const mockOrderPayload = {
|
||||||
|
id: "T3JkZXI6MTIzNDU2Nzg=",
|
||||||
|
number: 1524,
|
||||||
|
user_email: "test@hytham.me",
|
||||||
|
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: "test@hytham.me",
|
||||||
|
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",
|
||||||
|
},
|
||||||
|
};
|
||||||
280
src/__tests__/integration/api/webhooks/saleor.test.ts
Normal file
280
src/__tests__/integration/api/webhooks/saleor.test.ts
Normal file
@@ -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",
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
35
src/__tests__/setup.ts
Normal file
35
src/__tests__/setup.ts
Normal file
@@ -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(),
|
||||||
|
}));
|
||||||
233
src/__tests__/unit/services/AnalyticsService.test.ts
Normal file
233
src/__tests__/unit/services/AnalyticsService.test.ts
Normal file
@@ -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: "test@example.com",
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(mockTrack).toHaveBeenCalledWith("order_received", {
|
||||||
|
order_id: "order-123",
|
||||||
|
order_number: "1524",
|
||||||
|
total: 5479,
|
||||||
|
currency: "RSD",
|
||||||
|
item_count: 3,
|
||||||
|
customer_email: "test@example.com",
|
||||||
|
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: "bulk@example.com",
|
||||||
|
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: "test@example.com",
|
||||||
|
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: "test@example.com",
|
||||||
|
eventType: "ORDER_CONFIRMED",
|
||||||
|
});
|
||||||
|
|
||||||
|
expect(consoleErrorSpy).toHaveBeenCalled();
|
||||||
|
expect(consoleErrorSpy.mock.calls[0][0]).toContain("Failed to track order received");
|
||||||
|
|
||||||
|
consoleErrorSpy.mockRestore();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
263
src/__tests__/unit/services/OrderNotificationService.test.ts
Normal file
263
src/__tests__/unit/services/OrderNotificationService.test.ts
Normal file
@@ -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: ["me@hytham.me", "tamara@hytham.me"],
|
||||||
|
}));
|
||||||
|
|
||||||
|
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: "test@hytham.me",
|
||||||
|
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: "test@hytham.me",
|
||||||
|
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: "test@hytham.me",
|
||||||
|
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: "test@hytham.me",
|
||||||
|
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: "test@hytham.me",
|
||||||
|
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: "test@hytham.me",
|
||||||
|
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: "test@hytham.me",
|
||||||
|
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();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
42
src/__tests__/unit/utils/formatPrice.test.ts
Normal file
42
src/__tests__/unit/utils/formatPrice.test.ts
Normal file
@@ -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/);
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -129,11 +129,78 @@ export default function CheckoutPage() {
|
|||||||
|
|
||||||
const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
|
const [shippingMethods, setShippingMethods] = useState<ShippingMethod[]>([]);
|
||||||
const [selectedShippingMethod, setSelectedShippingMethod] = useState<string>("");
|
const [selectedShippingMethod, setSelectedShippingMethod] = useState<string>("");
|
||||||
const [showShippingMethods, setShowShippingMethods] = useState(false);
|
const [isLoadingShipping, setIsLoadingShipping] = useState(false);
|
||||||
|
|
||||||
const lines = getLines();
|
const lines = getLines();
|
||||||
const total = getTotal();
|
const total = getTotal();
|
||||||
|
|
||||||
|
// Debounced shipping method fetching
|
||||||
|
useEffect(() => {
|
||||||
|
if (!checkout) return;
|
||||||
|
|
||||||
|
// Check if address is complete enough to fetch shipping methods
|
||||||
|
const isAddressComplete =
|
||||||
|
shippingAddress.firstName &&
|
||||||
|
shippingAddress.lastName &&
|
||||||
|
shippingAddress.streetAddress1 &&
|
||||||
|
shippingAddress.city &&
|
||||||
|
shippingAddress.postalCode &&
|
||||||
|
shippingAddress.country;
|
||||||
|
|
||||||
|
if (!isAddressComplete) {
|
||||||
|
setShippingMethods([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const timer = setTimeout(async () => {
|
||||||
|
setIsLoadingShipping(true);
|
||||||
|
try {
|
||||||
|
console.log("Fetching shipping methods...");
|
||||||
|
|
||||||
|
// First update the shipping address
|
||||||
|
await saleorClient.mutate<ShippingAddressUpdateResponse>({
|
||||||
|
mutation: CHECKOUT_SHIPPING_ADDRESS_UPDATE,
|
||||||
|
variables: {
|
||||||
|
checkoutId: checkout.id,
|
||||||
|
shippingAddress: {
|
||||||
|
firstName: shippingAddress.firstName,
|
||||||
|
lastName: shippingAddress.lastName,
|
||||||
|
streetAddress1: shippingAddress.streetAddress1,
|
||||||
|
streetAddress2: shippingAddress.streetAddress2,
|
||||||
|
city: shippingAddress.city,
|
||||||
|
postalCode: shippingAddress.postalCode,
|
||||||
|
country: shippingAddress.country,
|
||||||
|
phone: shippingAddress.phone,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// Then query for shipping methods
|
||||||
|
const checkoutQueryResult = await saleorClient.query<CheckoutQueryResponse>({
|
||||||
|
query: GET_CHECKOUT_BY_ID,
|
||||||
|
variables: { id: checkout.id },
|
||||||
|
fetchPolicy: "network-only",
|
||||||
|
});
|
||||||
|
|
||||||
|
const availableMethods = checkoutQueryResult.data?.checkout?.shippingMethods || [];
|
||||||
|
console.log("Available shipping methods:", availableMethods);
|
||||||
|
|
||||||
|
setShippingMethods(availableMethods);
|
||||||
|
|
||||||
|
// Auto-select first method if none selected
|
||||||
|
if (availableMethods.length > 0 && !selectedShippingMethod) {
|
||||||
|
setSelectedShippingMethod(availableMethods[0].id);
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Error fetching shipping methods:", err);
|
||||||
|
} finally {
|
||||||
|
setIsLoadingShipping(false);
|
||||||
|
}
|
||||||
|
}, 500); // 500ms debounce
|
||||||
|
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [checkout, shippingAddress]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!checkout) {
|
if (!checkout) {
|
||||||
refreshCheckout();
|
refreshCheckout();
|
||||||
@@ -189,25 +256,56 @@ export default function CheckoutPage() {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Validate all required fields
|
||||||
if (!shippingAddress.email || !shippingAddress.email.includes("@")) {
|
if (!shippingAddress.email || !shippingAddress.email.includes("@")) {
|
||||||
setError(t("errorEmailRequired"));
|
setError(t("errorEmailRequired"));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!shippingAddress.firstName || !shippingAddress.lastName || !shippingAddress.streetAddress1 || !shippingAddress.city || !shippingAddress.postalCode || !shippingAddress.phone) {
|
if (!shippingAddress.phone || shippingAddress.phone.length < 8) {
|
||||||
|
setError(t("errorPhoneRequired"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!shippingAddress.firstName || !shippingAddress.lastName || !shippingAddress.streetAddress1 || !shippingAddress.city || !shippingAddress.postalCode) {
|
||||||
setError(t("errorFieldsRequired"));
|
setError(t("errorFieldsRequired"));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (!selectedShippingMethod) {
|
||||||
|
setError(t("errorSelectShipping"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
setIsLoading(true);
|
setIsLoading(true);
|
||||||
setError(null);
|
setError(null);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// If we're showing shipping methods and one is selected, complete the order
|
console.log("Completing order...");
|
||||||
if (showShippingMethods && selectedShippingMethod) {
|
|
||||||
console.log("Phase 2: Completing order with shipping method...");
|
|
||||||
|
|
||||||
console.log("Step 1: Updating billing address...");
|
console.log("Step 1: Updating email...");
|
||||||
|
const emailResult = await saleorClient.mutate<EmailUpdateResponse>({
|
||||||
|
mutation: CHECKOUT_EMAIL_UPDATE,
|
||||||
|
variables: {
|
||||||
|
checkoutId: checkout.id,
|
||||||
|
email: shippingAddress.email,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (emailResult.data?.checkoutEmailUpdate?.errors && emailResult.data.checkoutEmailUpdate.errors.length > 0) {
|
||||||
|
const errorMessage = emailResult.data.checkoutEmailUpdate.errors[0].message;
|
||||||
|
if (errorMessage.includes("Couldn't resolve to a node")) {
|
||||||
|
console.error("Checkout not found, clearing cart...");
|
||||||
|
localStorage.removeItem('cart');
|
||||||
|
localStorage.removeItem('checkoutId');
|
||||||
|
window.location.href = `/${locale}/products`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
throw new Error(`Email update failed: ${errorMessage}`);
|
||||||
|
}
|
||||||
|
console.log("Step 1: Email updated successfully");
|
||||||
|
|
||||||
|
console.log("Step 2: Updating billing address...");
|
||||||
const billingResult = await saleorClient.mutate<BillingAddressUpdateResponse>({
|
const billingResult = await saleorClient.mutate<BillingAddressUpdateResponse>({
|
||||||
mutation: CHECKOUT_BILLING_ADDRESS_UPDATE,
|
mutation: CHECKOUT_BILLING_ADDRESS_UPDATE,
|
||||||
variables: {
|
variables: {
|
||||||
@@ -228,9 +326,9 @@ export default function CheckoutPage() {
|
|||||||
if (billingResult.data?.checkoutBillingAddressUpdate?.errors && billingResult.data.checkoutBillingAddressUpdate.errors.length > 0) {
|
if (billingResult.data?.checkoutBillingAddressUpdate?.errors && billingResult.data.checkoutBillingAddressUpdate.errors.length > 0) {
|
||||||
throw new Error(`Billing address update failed: ${billingResult.data.checkoutBillingAddressUpdate.errors[0].message}`);
|
throw new Error(`Billing address update failed: ${billingResult.data.checkoutBillingAddressUpdate.errors[0].message}`);
|
||||||
}
|
}
|
||||||
console.log("Step 1: Billing address updated successfully");
|
console.log("Step 2: Billing address updated successfully");
|
||||||
|
|
||||||
console.log("Step 2: Setting shipping method...");
|
console.log("Step 3: Setting shipping method...");
|
||||||
const shippingMethodResult = await saleorClient.mutate<ShippingMethodUpdateResponse>({
|
const shippingMethodResult = await saleorClient.mutate<ShippingMethodUpdateResponse>({
|
||||||
mutation: CHECKOUT_SHIPPING_METHOD_UPDATE,
|
mutation: CHECKOUT_SHIPPING_METHOD_UPDATE,
|
||||||
variables: {
|
variables: {
|
||||||
@@ -242,9 +340,9 @@ export default function CheckoutPage() {
|
|||||||
if (shippingMethodResult.data?.checkoutShippingMethodUpdate?.errors && shippingMethodResult.data.checkoutShippingMethodUpdate.errors.length > 0) {
|
if (shippingMethodResult.data?.checkoutShippingMethodUpdate?.errors && shippingMethodResult.data.checkoutShippingMethodUpdate.errors.length > 0) {
|
||||||
throw new Error(`Shipping method update failed: ${shippingMethodResult.data.checkoutShippingMethodUpdate.errors[0].message}`);
|
throw new Error(`Shipping method update failed: ${shippingMethodResult.data.checkoutShippingMethodUpdate.errors[0].message}`);
|
||||||
}
|
}
|
||||||
console.log("Step 2: Shipping method set successfully");
|
console.log("Step 3: Shipping method set successfully");
|
||||||
|
|
||||||
console.log("Step 3: Saving phone number...");
|
console.log("Step 4: Saving metadata...");
|
||||||
const metadataResult = await saleorClient.mutate<MetadataUpdateResponse>({
|
const metadataResult = await saleorClient.mutate<MetadataUpdateResponse>({
|
||||||
mutation: CHECKOUT_METADATA_UPDATE,
|
mutation: CHECKOUT_METADATA_UPDATE,
|
||||||
variables: {
|
variables: {
|
||||||
@@ -252,6 +350,8 @@ export default function CheckoutPage() {
|
|||||||
metadata: [
|
metadata: [
|
||||||
{ key: "phone", value: shippingAddress.phone },
|
{ key: "phone", value: shippingAddress.phone },
|
||||||
{ key: "shippingPhone", value: shippingAddress.phone },
|
{ key: "shippingPhone", value: shippingAddress.phone },
|
||||||
|
{ key: "userLanguage", value: locale },
|
||||||
|
{ key: "userLocale", value: locale },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -259,10 +359,10 @@ export default function CheckoutPage() {
|
|||||||
if (metadataResult.data?.updateMetadata?.errors && metadataResult.data.updateMetadata.errors.length > 0) {
|
if (metadataResult.data?.updateMetadata?.errors && metadataResult.data.updateMetadata.errors.length > 0) {
|
||||||
console.warn("Failed to save phone metadata:", metadataResult.data.updateMetadata.errors);
|
console.warn("Failed to save phone metadata:", metadataResult.data.updateMetadata.errors);
|
||||||
} else {
|
} else {
|
||||||
console.log("Step 3: Phone number saved successfully");
|
console.log("Step 4: Phone number saved successfully");
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("Step 4: Completing checkout...");
|
console.log("Step 5: Completing checkout...");
|
||||||
const completeResult = await saleorClient.mutate<CheckoutCompleteResponse>({
|
const completeResult = await saleorClient.mutate<CheckoutCompleteResponse>({
|
||||||
mutation: CHECKOUT_COMPLETE,
|
mutation: CHECKOUT_COMPLETE,
|
||||||
variables: {
|
variables: {
|
||||||
@@ -302,84 +402,6 @@ export default function CheckoutPage() {
|
|||||||
} else {
|
} else {
|
||||||
throw new Error(t("errorCreatingOrder"));
|
throw new Error(t("errorCreatingOrder"));
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
// Phase 1: Update email and address, then fetch shipping methods
|
|
||||||
console.log("Phase 1: Updating email and address...");
|
|
||||||
|
|
||||||
console.log("Step 1: Updating email...");
|
|
||||||
const emailResult = await saleorClient.mutate<EmailUpdateResponse>({
|
|
||||||
mutation: CHECKOUT_EMAIL_UPDATE,
|
|
||||||
variables: {
|
|
||||||
checkoutId: checkout.id,
|
|
||||||
email: shippingAddress.email,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (emailResult.data?.checkoutEmailUpdate?.errors && emailResult.data.checkoutEmailUpdate.errors.length > 0) {
|
|
||||||
throw new Error(`Email update failed: ${emailResult.data.checkoutEmailUpdate.errors[0].message}`);
|
|
||||||
}
|
|
||||||
console.log("Step 1: Email updated successfully");
|
|
||||||
|
|
||||||
console.log("Step 2: Updating shipping address...");
|
|
||||||
console.log("Shipping address data:", {
|
|
||||||
firstName: shippingAddress.firstName,
|
|
||||||
lastName: shippingAddress.lastName,
|
|
||||||
streetAddress1: shippingAddress.streetAddress1,
|
|
||||||
city: shippingAddress.city,
|
|
||||||
postalCode: shippingAddress.postalCode,
|
|
||||||
country: shippingAddress.country,
|
|
||||||
phone: shippingAddress.phone,
|
|
||||||
});
|
|
||||||
const shippingResult = await saleorClient.mutate<ShippingAddressUpdateResponse>({
|
|
||||||
mutation: CHECKOUT_SHIPPING_ADDRESS_UPDATE,
|
|
||||||
variables: {
|
|
||||||
checkoutId: checkout.id,
|
|
||||||
shippingAddress: {
|
|
||||||
firstName: shippingAddress.firstName,
|
|
||||||
lastName: shippingAddress.lastName,
|
|
||||||
streetAddress1: shippingAddress.streetAddress1,
|
|
||||||
streetAddress2: shippingAddress.streetAddress2,
|
|
||||||
city: shippingAddress.city,
|
|
||||||
postalCode: shippingAddress.postalCode,
|
|
||||||
country: shippingAddress.country,
|
|
||||||
phone: shippingAddress.phone,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (shippingResult.data?.checkoutShippingAddressUpdate?.errors && shippingResult.data.checkoutShippingAddressUpdate.errors.length > 0) {
|
|
||||||
throw new Error(`Shipping address update failed: ${shippingResult.data.checkoutShippingAddressUpdate.errors[0].message}`);
|
|
||||||
}
|
|
||||||
console.log("Step 2: Shipping address updated successfully");
|
|
||||||
|
|
||||||
// Query for checkout to get available shipping methods
|
|
||||||
console.log("Step 3: Fetching shipping methods...");
|
|
||||||
const checkoutQueryResult = await saleorClient.query<CheckoutQueryResponse>({
|
|
||||||
query: GET_CHECKOUT_BY_ID,
|
|
||||||
variables: {
|
|
||||||
id: checkout.id,
|
|
||||||
},
|
|
||||||
fetchPolicy: "network-only",
|
|
||||||
});
|
|
||||||
|
|
||||||
const availableMethods = checkoutQueryResult.data?.checkout?.shippingMethods || [];
|
|
||||||
console.log("Available shipping methods:", availableMethods);
|
|
||||||
|
|
||||||
if (availableMethods.length === 0) {
|
|
||||||
throw new Error(t("errorNoShippingMethods"));
|
|
||||||
}
|
|
||||||
|
|
||||||
setShippingMethods(availableMethods);
|
|
||||||
setShowShippingMethods(true);
|
|
||||||
|
|
||||||
// Track shipping step
|
|
||||||
trackCheckoutStep("shipping_method_selection", {
|
|
||||||
available_methods_count: availableMethods.length,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Don't complete yet - show shipping method selection
|
|
||||||
console.log("Phase 1 complete. Waiting for shipping method selection...");
|
|
||||||
}
|
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
console.error("Checkout error:", err);
|
console.error("Checkout error:", err);
|
||||||
|
|
||||||
@@ -595,9 +617,17 @@ export default function CheckoutPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Shipping Method Selection */}
|
{/* Shipping Method Selection */}
|
||||||
{showShippingMethods && shippingMethods.length > 0 && (
|
<div className="border-b border-border pb-6">
|
||||||
<div className="border-b border-border pb-6">
|
<h2 className="text-xl font-serif mb-4">{t("shippingMethod")}</h2>
|
||||||
<h2 className="text-xl font-serif mb-4">{t("shippingMethod")}</h2>
|
{isLoadingShipping ? (
|
||||||
|
<div className="flex items-center gap-2 text-foreground-muted">
|
||||||
|
<svg className="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||||
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||||||
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||||
|
</svg>
|
||||||
|
<span>{t("loadingShippingMethods")}</span>
|
||||||
|
</div>
|
||||||
|
) : shippingMethods.length > 0 ? (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
{shippingMethods.map((method) => (
|
{shippingMethods.map((method) => (
|
||||||
<label
|
<label
|
||||||
@@ -625,18 +655,17 @@ export default function CheckoutPage() {
|
|||||||
</label>
|
</label>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{!selectedShippingMethod && (
|
) : (
|
||||||
<p className="text-red-500 text-sm mt-2">{t("errorSelectShipping")}</p>
|
<p className="text-foreground-muted">{t("enterAddressForShipping")}</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
|
||||||
<button
|
<button
|
||||||
type="submit"
|
type="submit"
|
||||||
disabled={isLoading || lines.length === 0 || (showShippingMethods && !selectedShippingMethod)}
|
disabled={isLoading || lines.length === 0 || !selectedShippingMethod}
|
||||||
className="w-full py-4 bg-foreground text-white font-medium hover:bg-accent-dark transition-colors disabled:opacity-50"
|
className="w-full py-4 bg-foreground text-white font-medium hover:bg-accent-dark transition-colors disabled:opacity-50"
|
||||||
>
|
>
|
||||||
{isLoading ? t("processing") : showShippingMethods ? t("completeOrder", { total: formatPrice(total) }) : t("continueToShipping")}
|
{isLoading ? t("processing") : t("completeOrder", { total: formatPrice(total) })}
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
@@ -680,6 +709,12 @@ export default function CheckoutPage() {
|
|||||||
<span className="text-foreground-muted">{t("subtotal")}</span>
|
<span className="text-foreground-muted">{t("subtotal")}</span>
|
||||||
<span>{formatPrice(checkout?.subtotalPrice?.gross?.amount || 0)}</span>
|
<span>{formatPrice(checkout?.subtotalPrice?.gross?.amount || 0)}</span>
|
||||||
</div>
|
</div>
|
||||||
|
{selectedShippingMethod && (
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-foreground-muted">{t("shipping")}</span>
|
||||||
|
<span>{formatPrice(shippingMethods.find(m => m.id === selectedShippingMethod)?.price.amount || 0)}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<div className="flex justify-between font-medium text-lg pt-2 border-t border-border">
|
<div className="flex justify-between font-medium text-lg pt-2 border-t border-border">
|
||||||
<span>{t("total")}</span>
|
<span>{t("total")}</span>
|
||||||
<span>{formatPrice(total)}</span>
|
<span>{formatPrice(total)}</span>
|
||||||
|
|||||||
@@ -1,295 +0,0 @@
|
|||||||
import { NextRequest, NextResponse } from "next/server";
|
|
||||||
import { orderNotificationService } from "@/lib/services/OrderNotificationService";
|
|
||||||
import { analyticsService } from "@/lib/services/AnalyticsService";
|
|
||||||
|
|
||||||
// Saleor webhook payload interfaces (snake_case)
|
|
||||||
interface SaleorLineItemPayload {
|
|
||||||
id: string;
|
|
||||||
product_name: string;
|
|
||||||
variant_name?: string;
|
|
||||||
quantity: number;
|
|
||||||
total_price_gross_amount: string;
|
|
||||||
currency: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SaleorAddressPayload {
|
|
||||||
first_name?: string;
|
|
||||||
last_name?: string;
|
|
||||||
street_address_1?: string;
|
|
||||||
street_address_2?: string;
|
|
||||||
city?: string;
|
|
||||||
postal_code?: string;
|
|
||||||
country?: string;
|
|
||||||
phone?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface SaleorOrderPayload {
|
|
||||||
id: string;
|
|
||||||
number: number;
|
|
||||||
user_email: string;
|
|
||||||
first_name?: string;
|
|
||||||
last_name?: string;
|
|
||||||
billing_address?: SaleorAddressPayload;
|
|
||||||
shipping_address?: SaleorAddressPayload;
|
|
||||||
lines: SaleorLineItemPayload[];
|
|
||||||
total_gross_amount: string;
|
|
||||||
shipping_price_gross_amount?: string;
|
|
||||||
channel: { currency_code: string };
|
|
||||||
currency?: string;
|
|
||||||
language_code?: string;
|
|
||||||
metadata?: Record<string, string>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Internal camelCase interfaces
|
|
||||||
interface OrderItem {
|
|
||||||
id: string;
|
|
||||||
productName: string;
|
|
||||||
variantName?: string;
|
|
||||||
quantity: number;
|
|
||||||
totalPrice: {
|
|
||||||
gross: { amount: number; currency: string };
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderAddress {
|
|
||||||
firstName?: string;
|
|
||||||
lastName?: string;
|
|
||||||
streetAddress1?: string;
|
|
||||||
streetAddress2?: string;
|
|
||||||
city?: string;
|
|
||||||
postalCode?: string;
|
|
||||||
country?: string;
|
|
||||||
phone?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Order {
|
|
||||||
id: string;
|
|
||||||
number: string;
|
|
||||||
userEmail: string;
|
|
||||||
user?: { firstName?: string; lastName?: string };
|
|
||||||
billingAddress?: OrderAddress;
|
|
||||||
shippingAddress?: OrderAddress;
|
|
||||||
lines: OrderItem[];
|
|
||||||
total: { gross: { amount: number; currency: string } };
|
|
||||||
languageCode?: string;
|
|
||||||
metadata?: Array<{ key: string; value: string }>;
|
|
||||||
}
|
|
||||||
|
|
||||||
const SUPPORTED_EVENTS = [
|
|
||||||
"ORDER_CREATED",
|
|
||||||
"ORDER_CONFIRMED",
|
|
||||||
"ORDER_FULLY_PAID",
|
|
||||||
"ORDER_CANCELLED",
|
|
||||||
"ORDER_FULFILLED",
|
|
||||||
];
|
|
||||||
|
|
||||||
// Convert Saleor payload to internal format
|
|
||||||
function convertPayloadToOrder(payload: SaleorOrderPayload): Order {
|
|
||||||
return {
|
|
||||||
id: payload.id,
|
|
||||||
number: String(payload.number),
|
|
||||||
userEmail: payload.user_email,
|
|
||||||
user: payload.first_name || payload.last_name ? {
|
|
||||||
firstName: payload.first_name,
|
|
||||||
lastName: payload.last_name,
|
|
||||||
} : undefined,
|
|
||||||
billingAddress: payload.billing_address ? {
|
|
||||||
firstName: payload.billing_address.first_name,
|
|
||||||
lastName: payload.billing_address.last_name,
|
|
||||||
streetAddress1: payload.billing_address.street_address_1,
|
|
||||||
streetAddress2: payload.billing_address.street_address_2,
|
|
||||||
city: payload.billing_address.city,
|
|
||||||
postalCode: payload.billing_address.postal_code,
|
|
||||||
country: payload.billing_address.country,
|
|
||||||
phone: payload.billing_address.phone,
|
|
||||||
} : undefined,
|
|
||||||
shippingAddress: payload.shipping_address ? {
|
|
||||||
firstName: payload.shipping_address.first_name,
|
|
||||||
lastName: payload.shipping_address.last_name,
|
|
||||||
streetAddress1: payload.shipping_address.street_address_1,
|
|
||||||
streetAddress2: payload.shipping_address.street_address_2,
|
|
||||||
city: payload.shipping_address.city,
|
|
||||||
postalCode: payload.shipping_address.postal_code,
|
|
||||||
country: payload.shipping_address.country,
|
|
||||||
phone: payload.shipping_address.phone,
|
|
||||||
} : undefined,
|
|
||||||
lines: payload.lines.map((line) => ({
|
|
||||||
id: line.id,
|
|
||||||
productName: line.product_name,
|
|
||||||
variantName: line.variant_name,
|
|
||||||
quantity: line.quantity,
|
|
||||||
totalPrice: {
|
|
||||||
gross: {
|
|
||||||
amount: parseInt(line.total_price_gross_amount),
|
|
||||||
currency: line.currency || payload.channel.currency_code,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})),
|
|
||||||
total: {
|
|
||||||
gross: {
|
|
||||||
amount: parseInt(payload.total_gross_amount),
|
|
||||||
currency: payload.channel.currency_code,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
languageCode: payload.language_code?.toUpperCase(),
|
|
||||||
metadata: payload.metadata ? Object.entries(payload.metadata).map(([key, value]) => ({ key, value })) : undefined,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extract tracking number from metadata
|
|
||||||
function getTrackingInfo(order: Order): { trackingNumber?: string; trackingUrl?: string } {
|
|
||||||
if (!order.metadata) return {};
|
|
||||||
|
|
||||||
const trackingMeta = order.metadata.find((m) => m.key === "trackingNumber");
|
|
||||||
const trackingUrlMeta = order.metadata.find((m) => m.key === "trackingUrl");
|
|
||||||
|
|
||||||
return {
|
|
||||||
trackingNumber: trackingMeta?.value,
|
|
||||||
trackingUrl: trackingUrlMeta?.value,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Extract cancellation reason from metadata
|
|
||||||
function getCancellationReason(order: Order): string | undefined {
|
|
||||||
if (!order.metadata) return undefined;
|
|
||||||
const reasonMeta = order.metadata.find((m) => m.key === "cancellationReason");
|
|
||||||
return reasonMeta?.value;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Webhook handlers
|
|
||||||
async function handleOrderConfirmed(order: Order, eventType: string) {
|
|
||||||
const itemCount = order.lines.reduce((sum, line) => sum + line.quantity, 0);
|
|
||||||
|
|
||||||
// Send customer email only for ORDER_CONFIRMED (not ORDER_CREATED)
|
|
||||||
if (eventType === "ORDER_CONFIRMED") {
|
|
||||||
await orderNotificationService.sendOrderConfirmation(order);
|
|
||||||
|
|
||||||
// Track revenue and order analytics only on ORDER_CONFIRMED (not ORDER_CREATED)
|
|
||||||
// This prevents duplicate tracking when both events fire for the same order
|
|
||||||
analyticsService.trackOrderReceived({
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
total: order.total.gross.amount,
|
|
||||||
currency: order.total.gross.currency,
|
|
||||||
itemCount,
|
|
||||||
customerEmail: order.userEmail,
|
|
||||||
eventType,
|
|
||||||
});
|
|
||||||
|
|
||||||
analyticsService.trackRevenue({
|
|
||||||
amount: order.total.gross.amount,
|
|
||||||
currency: order.total.gross.currency,
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Send admin notification for both events
|
|
||||||
await orderNotificationService.sendOrderConfirmationToAdmin(order);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleOrderFulfilled(order: Order) {
|
|
||||||
const { trackingNumber, trackingUrl } = getTrackingInfo(order);
|
|
||||||
|
|
||||||
await orderNotificationService.sendOrderShipped(order, trackingNumber, trackingUrl);
|
|
||||||
await orderNotificationService.sendOrderShippedToAdmin(order, trackingNumber, trackingUrl);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleOrderCancelled(order: Order) {
|
|
||||||
const reason = getCancellationReason(order);
|
|
||||||
|
|
||||||
await orderNotificationService.sendOrderCancelled(order, reason);
|
|
||||||
await orderNotificationService.sendOrderCancelledToAdmin(order, reason);
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleOrderFullyPaid(order: Order) {
|
|
||||||
await orderNotificationService.sendOrderPaid(order);
|
|
||||||
await orderNotificationService.sendOrderPaidToAdmin(order);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Main webhook processor
|
|
||||||
async function processWebhook(event: string, order: Order) {
|
|
||||||
console.log(`Processing webhook event: ${event} for order ${order.id}`);
|
|
||||||
|
|
||||||
switch (event) {
|
|
||||||
case "ORDER_CREATED":
|
|
||||||
case "ORDER_CONFIRMED":
|
|
||||||
await handleOrderConfirmed(order, event);
|
|
||||||
break;
|
|
||||||
case "ORDER_FULFILLED":
|
|
||||||
await handleOrderFulfilled(order);
|
|
||||||
break;
|
|
||||||
case "ORDER_CANCELLED":
|
|
||||||
await handleOrderCancelled(order);
|
|
||||||
break;
|
|
||||||
case "ORDER_FULLY_PAID":
|
|
||||||
await handleOrderFullyPaid(order);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.log(`Unsupported event: ${event}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function POST(request: NextRequest) {
|
|
||||||
try {
|
|
||||||
console.log("=== WEBHOOK RECEIVED ===");
|
|
||||||
console.log("Timestamp:", new Date().toISOString());
|
|
||||||
|
|
||||||
const body = await request.json();
|
|
||||||
const headers = request.headers;
|
|
||||||
|
|
||||||
const event = headers.get("saleor-event") as string;
|
|
||||||
const domain = headers.get("saleor-domain");
|
|
||||||
|
|
||||||
console.log(`Received webhook: ${event} from ${domain}`);
|
|
||||||
|
|
||||||
// Parse payload
|
|
||||||
let orderPayload: SaleorOrderPayload | null = null;
|
|
||||||
if (Array.isArray(body) && body.length > 0) {
|
|
||||||
orderPayload = body[0] as SaleorOrderPayload;
|
|
||||||
} else if (body.data && Array.isArray(body.data)) {
|
|
||||||
orderPayload = body.data[0] as SaleorOrderPayload;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!orderPayload) {
|
|
||||||
console.error("No order found in webhook payload");
|
|
||||||
return NextResponse.json({ error: "No order in payload" }, { status: 400 });
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("Order:", {
|
|
||||||
id: orderPayload.id,
|
|
||||||
number: orderPayload.number,
|
|
||||||
email: orderPayload.user_email,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!event) {
|
|
||||||
return NextResponse.json({ error: "Missing saleor-event header" }, { status: 400 });
|
|
||||||
}
|
|
||||||
|
|
||||||
const normalizedEvent = event.toUpperCase();
|
|
||||||
|
|
||||||
if (!SUPPORTED_EVENTS.includes(normalizedEvent)) {
|
|
||||||
console.log(`Event ${event} not supported, skipping`);
|
|
||||||
return NextResponse.json({ success: true, message: "Event not supported" });
|
|
||||||
}
|
|
||||||
|
|
||||||
const order = convertPayloadToOrder(orderPayload);
|
|
||||||
await processWebhook(normalizedEvent, order);
|
|
||||||
|
|
||||||
return NextResponse.json({ success: true });
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Webhook processing error:", error);
|
|
||||||
return NextResponse.json(
|
|
||||||
{ error: "Internal server error", details: String(error) },
|
|
||||||
{ status: 500 }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function GET() {
|
|
||||||
return NextResponse.json({
|
|
||||||
status: "ok",
|
|
||||||
message: "Saleor webhook endpoint is active",
|
|
||||||
supportedEvents: SUPPORTED_EVENTS,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
export function formatPrice(amount: number, currency: string): string {
|
|
||||||
return new Intl.NumberFormat("sr-RS", {
|
|
||||||
style: "currency",
|
|
||||||
currency: currency,
|
|
||||||
}).format(amount);
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState, useRef } from "react";
|
||||||
import { motion, AnimatePresence } from "framer-motion";
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
@@ -30,14 +30,16 @@ export default function CartDrawer() {
|
|||||||
const lines = getLines();
|
const lines = getLines();
|
||||||
const total = getTotal();
|
const total = getTotal();
|
||||||
const lineCount = getLineCount();
|
const lineCount = getLineCount();
|
||||||
const [initialized, setInitialized] = useState(false);
|
const initializedRef = useRef(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!initialized) {
|
if (!initializedRef.current && locale) {
|
||||||
|
// Set language code before initializing checkout
|
||||||
|
useSaleorCheckoutStore.getState().setLanguageCode(locale);
|
||||||
initCheckout();
|
initCheckout();
|
||||||
setInitialized(true);
|
initializedRef.current = true;
|
||||||
}
|
}
|
||||||
}, [initialized]);
|
}, [locale]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isOpen) {
|
if (isOpen) {
|
||||||
|
|||||||
@@ -15,9 +15,13 @@ interface NewHeroProps {
|
|||||||
|
|
||||||
export default function NewHero({ featuredProduct }: NewHeroProps) {
|
export default function NewHero({ featuredProduct }: NewHeroProps) {
|
||||||
const locale = useLocale();
|
const locale = useLocale();
|
||||||
const { addLine, openCart } = useSaleorCheckoutStore();
|
const { addLine, openCart, setLanguageCode } = useSaleorCheckoutStore();
|
||||||
|
|
||||||
const handleAddToCart = async () => {
|
const handleAddToCart = async () => {
|
||||||
|
// Set language code before adding to cart
|
||||||
|
if (locale) {
|
||||||
|
setLanguageCode(locale);
|
||||||
|
}
|
||||||
const variant = featuredProduct?.variants?.[0];
|
const variant = featuredProduct?.variants?.[0];
|
||||||
if (variant?.id) {
|
if (variant?.id) {
|
||||||
await addLine(variant.id, 1);
|
await addLine(variant.id, 1);
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import Link from "next/link";
|
|||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { usePathname } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
import { AnimatePresence, motion } from "framer-motion";
|
import { AnimatePresence, motion } from "framer-motion";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations, useLocale } from "next-intl";
|
||||||
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
|
import { useSaleorCheckoutStore } from "@/stores/saleorCheckoutStore";
|
||||||
import { User, ShoppingBag, Menu, X, Globe } from "lucide-react";
|
import { User, ShoppingBag, Menu, X, Globe } from "lucide-react";
|
||||||
import CartDrawer from "@/components/cart/CartDrawer";
|
import CartDrawer from "@/components/cart/CartDrawer";
|
||||||
@@ -16,14 +16,15 @@ interface HeaderProps {
|
|||||||
locale?: string;
|
locale?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Header({ locale = "sr" }: HeaderProps) {
|
export default function Header({ locale: propLocale = "sr" }: HeaderProps) {
|
||||||
const t = useTranslations("Header");
|
const t = useTranslations("Header");
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const dropdownRef = useRef<HTMLDivElement>(null);
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||||
const [scrolled, setScrolled] = useState(false);
|
const [scrolled, setScrolled] = useState(false);
|
||||||
const [langDropdownOpen, setLangDropdownOpen] = useState(false);
|
const [langDropdownOpen, setLangDropdownOpen] = useState(false);
|
||||||
const { getLineCount, toggleCart, initCheckout } = useSaleorCheckoutStore();
|
const { getLineCount, toggleCart, initCheckout, setLanguageCode } = useSaleorCheckoutStore();
|
||||||
|
const locale = useLocale();
|
||||||
|
|
||||||
const itemCount = getLineCount();
|
const itemCount = getLineCount();
|
||||||
const currentLocale = isValidLocale(locale) ? LOCALE_CONFIG[locale] : LOCALE_CONFIG.sr;
|
const currentLocale = isValidLocale(locale) ? LOCALE_CONFIG[locale] : LOCALE_CONFIG.sr;
|
||||||
@@ -54,9 +55,14 @@ export default function Header({ locale = "sr" }: HeaderProps) {
|
|||||||
setLangDropdownOpen(false);
|
setLangDropdownOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Set language code first, then initialize checkout
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
initCheckout();
|
if (locale) {
|
||||||
}, [initCheckout]);
|
setLanguageCode(locale);
|
||||||
|
// Initialize checkout after language code is set
|
||||||
|
initCheckout();
|
||||||
|
}
|
||||||
|
}, [locale, setLanguageCode, initCheckout]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const handleScroll = () => {
|
const handleScroll = () => {
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ export default function ProductDetail({ product, relatedProducts, bundleProducts
|
|||||||
const [isAdding, setIsAdding] = useState(false);
|
const [isAdding, setIsAdding] = useState(false);
|
||||||
const [urgencyIndex, setUrgencyIndex] = useState(0);
|
const [urgencyIndex, setUrgencyIndex] = useState(0);
|
||||||
const [selectedBundleVariantId, setSelectedBundleVariantId] = useState<string | null>(null);
|
const [selectedBundleVariantId, setSelectedBundleVariantId] = useState<string | null>(null);
|
||||||
const { addLine, openCart } = useSaleorCheckoutStore();
|
const { addLine, openCart, setLanguageCode } = useSaleorCheckoutStore();
|
||||||
const { trackProductView, trackAddToCart } = useAnalytics();
|
const { trackProductView, trackAddToCart } = useAnalytics();
|
||||||
const validLocale = isValidLocale(locale) ? locale : "sr";
|
const validLocale = isValidLocale(locale) ? locale : "sr";
|
||||||
|
|
||||||
@@ -147,6 +147,11 @@ export default function ProductDetail({ product, relatedProducts, bundleProducts
|
|||||||
const handleAddToCart = async () => {
|
const handleAddToCart = async () => {
|
||||||
if (!selectedVariantId) return;
|
if (!selectedVariantId) return;
|
||||||
|
|
||||||
|
// Set language code before adding to cart
|
||||||
|
if (validLocale) {
|
||||||
|
setLanguageCode(validLocale);
|
||||||
|
}
|
||||||
|
|
||||||
setIsAdding(true);
|
setIsAdding(true);
|
||||||
try {
|
try {
|
||||||
await addLine(selectedVariantId, 1);
|
await addLine(selectedVariantId, 1);
|
||||||
|
|||||||
@@ -1,98 +0,0 @@
|
|||||||
import {
|
|
||||||
Body,
|
|
||||||
Button,
|
|
||||||
Container,
|
|
||||||
Head,
|
|
||||||
Hr,
|
|
||||||
Html,
|
|
||||||
Img,
|
|
||||||
Link,
|
|
||||||
Preview,
|
|
||||||
Section,
|
|
||||||
Text,
|
|
||||||
} from "@react-email/components";
|
|
||||||
|
|
||||||
interface BaseLayoutProps {
|
|
||||||
children: React.ReactNode;
|
|
||||||
previewText: string;
|
|
||||||
language: string;
|
|
||||||
siteUrl: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const translations: Record<string, { footer: string; company: string }> = {
|
|
||||||
sr: {
|
|
||||||
footer: "ManoonOils - Prirodna kozmetika | www.manoonoils.com",
|
|
||||||
company: "ManoonOils",
|
|
||||||
},
|
|
||||||
en: {
|
|
||||||
footer: "ManoonOils - Natural Cosmetics | www.manoonoils.com",
|
|
||||||
company: "ManoonOils",
|
|
||||||
},
|
|
||||||
de: {
|
|
||||||
footer: "ManoonOils - Natürliche Kosmetik | www.manoonoils.com",
|
|
||||||
company: "ManoonOils",
|
|
||||||
},
|
|
||||||
fr: {
|
|
||||||
footer: "ManoonOils - Cosmétiques Naturels | www.manoonoils.com",
|
|
||||||
company: "ManoonOils",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export function BaseLayout({ children, previewText, language, siteUrl }: BaseLayoutProps) {
|
|
||||||
const t = translations[language] || translations.en;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Html>
|
|
||||||
<Head />
|
|
||||||
<Preview>{previewText}</Preview>
|
|
||||||
<Body style={styles.body}>
|
|
||||||
<Container style={styles.container}>
|
|
||||||
<Section style={styles.logoSection}>
|
|
||||||
<Img
|
|
||||||
src="https://minio-api.nodecrew.me/manoon-media/2024/09/cropped-manoon-logo_256x-1-1.png"
|
|
||||||
width="150"
|
|
||||||
height="auto"
|
|
||||||
alt="ManoonOils"
|
|
||||||
style={styles.logo}
|
|
||||||
/>
|
|
||||||
</Section>
|
|
||||||
{children}
|
|
||||||
<Section style={styles.footer}>
|
|
||||||
<Text style={styles.footerText}>{t.footer}</Text>
|
|
||||||
</Section>
|
|
||||||
</Container>
|
|
||||||
</Body>
|
|
||||||
</Html>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
body: {
|
|
||||||
backgroundColor: "#f6f6f6",
|
|
||||||
fontFamily:
|
|
||||||
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
|
|
||||||
},
|
|
||||||
container: {
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
margin: "0 auto",
|
|
||||||
padding: "40px 20px",
|
|
||||||
maxWidth: "600px",
|
|
||||||
},
|
|
||||||
logoSection: {
|
|
||||||
textAlign: "center" as const,
|
|
||||||
marginBottom: "30px",
|
|
||||||
},
|
|
||||||
logo: {
|
|
||||||
margin: "0 auto",
|
|
||||||
},
|
|
||||||
footer: {
|
|
||||||
marginTop: "40px",
|
|
||||||
paddingTop: "20px",
|
|
||||||
borderTop: "1px solid #e0e0e0",
|
|
||||||
},
|
|
||||||
footerText: {
|
|
||||||
color: "#666666",
|
|
||||||
fontSize: "12px",
|
|
||||||
textAlign: "center" as const,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,237 +0,0 @@
|
|||||||
import { Button, Hr, Section, Text } from "@react-email/components";
|
|
||||||
import { BaseLayout } from "./BaseLayout";
|
|
||||||
|
|
||||||
interface OrderItem {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
quantity: number;
|
|
||||||
price: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderCancelledProps {
|
|
||||||
language: string;
|
|
||||||
orderId: string;
|
|
||||||
orderNumber: string;
|
|
||||||
customerName: string;
|
|
||||||
items: OrderItem[];
|
|
||||||
total: string;
|
|
||||||
reason?: string;
|
|
||||||
siteUrl: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const translations: Record<
|
|
||||||
string,
|
|
||||||
{
|
|
||||||
title: string;
|
|
||||||
preview: string;
|
|
||||||
greeting: string;
|
|
||||||
orderCancelled: string;
|
|
||||||
items: string;
|
|
||||||
total: string;
|
|
||||||
reason: string;
|
|
||||||
questions: string;
|
|
||||||
}
|
|
||||||
> = {
|
|
||||||
sr: {
|
|
||||||
title: "Vaša narudžbina je otkazana",
|
|
||||||
preview: "Vaša narudžbina je otkazana",
|
|
||||||
greeting: "Poštovani {name},",
|
|
||||||
orderCancelled:
|
|
||||||
"Vaša narudžbina je otkazana. Ako niste zatražili otkazivanje, molimo kontaktirajte nas što pre.",
|
|
||||||
items: "Artikli",
|
|
||||||
total: "Ukupno",
|
|
||||||
reason: "Razlog",
|
|
||||||
questions: "Imate pitanja? Pišite nam na support@manoonoils.com",
|
|
||||||
},
|
|
||||||
en: {
|
|
||||||
title: "Your Order Has Been Cancelled",
|
|
||||||
preview: "Your order has been cancelled",
|
|
||||||
greeting: "Dear {name},",
|
|
||||||
orderCancelled:
|
|
||||||
"Your order has been cancelled. If you did not request this cancellation, please contact us as soon as possible.",
|
|
||||||
items: "Items",
|
|
||||||
total: "Total",
|
|
||||||
reason: "Reason",
|
|
||||||
questions: "Questions? Email us at support@manoonoils.com",
|
|
||||||
},
|
|
||||||
de: {
|
|
||||||
title: "Ihre Bestellung wurde storniert",
|
|
||||||
preview: "Ihre Bestellung wurde storniert",
|
|
||||||
greeting: "Sehr geehrte/r {name},",
|
|
||||||
orderCancelled:
|
|
||||||
"Ihre Bestellung wurde storniert. Wenn Sie diese Stornierung nicht angefordert haben, kontaktieren Sie uns bitte so schnell wie möglich.",
|
|
||||||
items: "Artikel",
|
|
||||||
total: "Gesamt",
|
|
||||||
reason: "Grund",
|
|
||||||
questions: "Fragen? Schreiben Sie uns an support@manoonoils.com",
|
|
||||||
},
|
|
||||||
fr: {
|
|
||||||
title: "Votre commande a été annulée",
|
|
||||||
preview: "Votre commande a été annulée",
|
|
||||||
greeting: "Cher(e) {name},",
|
|
||||||
orderCancelled:
|
|
||||||
"Votre commande a été annulée. Si vous n'avez pas demandé cette annulation, veuillez nous contacter dès que possible.",
|
|
||||||
items: "Articles",
|
|
||||||
total: "Total",
|
|
||||||
reason: "Raison",
|
|
||||||
questions: "Questions? Écrivez-nous à support@manoonoils.com",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export function OrderCancelled({
|
|
||||||
language = "en",
|
|
||||||
orderId,
|
|
||||||
orderNumber,
|
|
||||||
customerName,
|
|
||||||
items,
|
|
||||||
total,
|
|
||||||
reason,
|
|
||||||
siteUrl,
|
|
||||||
}: OrderCancelledProps) {
|
|
||||||
const t = translations[language] || translations.en;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
|
|
||||||
<Text style={styles.title}>{t.title}</Text>
|
|
||||||
<Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
|
|
||||||
<Text style={styles.text}>{t.orderCancelled}</Text>
|
|
||||||
|
|
||||||
<Section style={styles.orderInfo}>
|
|
||||||
<Text style={styles.orderNumber}>
|
|
||||||
<strong>Order Number:</strong> {orderNumber}
|
|
||||||
</Text>
|
|
||||||
{reason && (
|
|
||||||
<Text style={styles.reason}>
|
|
||||||
<strong>{t.reason}:</strong> {reason}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section style={styles.itemsSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{t.items}</Text>
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
{items.map((item) => (
|
|
||||||
<Section key={item.id} style={styles.itemRow}>
|
|
||||||
<Text style={styles.itemName}>
|
|
||||||
{item.quantity}x {item.name}
|
|
||||||
</Text>
|
|
||||||
<Text style={styles.itemPrice}>{item.price}</Text>
|
|
||||||
</Section>
|
|
||||||
))}
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
<Section style={styles.totalRow}>
|
|
||||||
<Text style={styles.totalLabel}>{t.total}:</Text>
|
|
||||||
<Text style={styles.totalValue}>{total}</Text>
|
|
||||||
</Section>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section style={styles.buttonSection}>
|
|
||||||
<Button href={siteUrl} style={styles.button}>
|
|
||||||
{language === "sr" ? "Pogledajte proizvode" : "Browse Products"}
|
|
||||||
</Button>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Text style={styles.questions}>{t.questions}</Text>
|
|
||||||
</BaseLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
title: {
|
|
||||||
fontSize: "24px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#dc2626",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
greeting: {
|
|
||||||
fontSize: "16px",
|
|
||||||
color: "#333333",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
orderInfo: {
|
|
||||||
backgroundColor: "#fef2f2",
|
|
||||||
padding: "15px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
orderNumber: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0 0 5px 0",
|
|
||||||
},
|
|
||||||
reason: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#991b1b",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
itemsSection: {
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
sectionTitle: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
hr: {
|
|
||||||
borderColor: "#e0e0e0",
|
|
||||||
margin: "10px 0",
|
|
||||||
},
|
|
||||||
itemRow: {
|
|
||||||
display: "flex" as const,
|
|
||||||
justifyContent: "space-between" as const,
|
|
||||||
padding: "8px 0",
|
|
||||||
},
|
|
||||||
itemName: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
margin: "0",
|
|
||||||
textDecoration: "line-through",
|
|
||||||
},
|
|
||||||
itemPrice: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
margin: "0",
|
|
||||||
textDecoration: "line-through",
|
|
||||||
},
|
|
||||||
totalRow: {
|
|
||||||
display: "flex" as const,
|
|
||||||
justifyContent: "space-between" as const,
|
|
||||||
padding: "8px 0",
|
|
||||||
},
|
|
||||||
totalLabel: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#666666",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
totalValue: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#666666",
|
|
||||||
margin: "0",
|
|
||||||
textDecoration: "line-through",
|
|
||||||
},
|
|
||||||
buttonSection: {
|
|
||||||
textAlign: "center" as const,
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
backgroundColor: "#000000",
|
|
||||||
color: "#ffffff",
|
|
||||||
padding: "12px 30px",
|
|
||||||
borderRadius: "4px",
|
|
||||||
fontSize: "14px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
textDecoration: "none",
|
|
||||||
},
|
|
||||||
questions: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,394 +0,0 @@
|
|||||||
import { Button, Hr, Section, Text } from "@react-email/components";
|
|
||||||
import { BaseLayout } from "./BaseLayout";
|
|
||||||
|
|
||||||
interface OrderItem {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
quantity: number;
|
|
||||||
price: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderConfirmationProps {
|
|
||||||
language: string;
|
|
||||||
orderId: string;
|
|
||||||
orderNumber: string;
|
|
||||||
customerEmail: string;
|
|
||||||
customerName: string;
|
|
||||||
items: OrderItem[];
|
|
||||||
total: string;
|
|
||||||
shippingAddress?: string;
|
|
||||||
billingAddress?: string;
|
|
||||||
phone?: string;
|
|
||||||
siteUrl: string;
|
|
||||||
dashboardUrl?: string;
|
|
||||||
isAdmin?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const translations: Record<
|
|
||||||
string,
|
|
||||||
{
|
|
||||||
title: string;
|
|
||||||
preview: string;
|
|
||||||
greeting: string;
|
|
||||||
orderReceived: string;
|
|
||||||
orderNumber: string;
|
|
||||||
items: string;
|
|
||||||
quantity: string;
|
|
||||||
total: string;
|
|
||||||
shippingTo: string;
|
|
||||||
questions: string;
|
|
||||||
thankYou: string;
|
|
||||||
adminTitle: string;
|
|
||||||
adminPreview: string;
|
|
||||||
adminGreeting: string;
|
|
||||||
adminMessage: string;
|
|
||||||
customerLabel: string;
|
|
||||||
customerEmailLabel: string;
|
|
||||||
billingAddressLabel: string;
|
|
||||||
phoneLabel: string;
|
|
||||||
viewDashboard: string;
|
|
||||||
}
|
|
||||||
> = {
|
|
||||||
sr: {
|
|
||||||
title: "Potvrda narudžbine",
|
|
||||||
preview: "Vaša narudžbina je potvrđena",
|
|
||||||
greeting: "Poštovani {name},",
|
|
||||||
orderReceived: "Zahvaljujemo se na Vašoj narudžbini! Primili smo je i sada je u pripremi.",
|
|
||||||
orderNumber: "Broj narudžbine",
|
|
||||||
items: "Artikli",
|
|
||||||
quantity: "Količina",
|
|
||||||
total: "Ukupno",
|
|
||||||
shippingTo: "Adresa za dostavu",
|
|
||||||
questions: "Imate pitanja? Pišite nam na support@manoonoils.com",
|
|
||||||
thankYou: "Hvala Vam što kupujete kod nas!",
|
|
||||||
adminTitle: "Nova narudžbina!",
|
|
||||||
adminPreview: "Nova narudžbina je primljena",
|
|
||||||
adminGreeting: "Čestitamo na prodaji!",
|
|
||||||
adminMessage: "Nova narudžbina je upravo primljena. Detalji su ispod:",
|
|
||||||
customerLabel: "Kupac",
|
|
||||||
customerEmailLabel: "Email kupca",
|
|
||||||
billingAddressLabel: "Adresa za naplatu",
|
|
||||||
phoneLabel: "Telefon",
|
|
||||||
viewDashboard: "Pogledaj u Dashboardu",
|
|
||||||
},
|
|
||||||
en: {
|
|
||||||
title: "Order Confirmation",
|
|
||||||
preview: "Your order has been confirmed",
|
|
||||||
greeting: "Dear {name},",
|
|
||||||
orderReceived:
|
|
||||||
"Thank you for your order! We have received it and it is now being processed.",
|
|
||||||
orderNumber: "Order number",
|
|
||||||
items: "Items",
|
|
||||||
quantity: "Quantity",
|
|
||||||
total: "Total",
|
|
||||||
shippingTo: "Shipping address",
|
|
||||||
questions: "Questions? Email us at support@manoonoils.com",
|
|
||||||
thankYou: "Thank you for shopping with us!",
|
|
||||||
adminTitle: "New Order! 🎉",
|
|
||||||
adminPreview: "A new order has been received",
|
|
||||||
adminGreeting: "Congratulations on the sale!",
|
|
||||||
adminMessage: "A new order has just been placed. Details below:",
|
|
||||||
customerLabel: "Customer",
|
|
||||||
customerEmailLabel: "Customer Email",
|
|
||||||
billingAddressLabel: "Billing Address",
|
|
||||||
phoneLabel: "Phone",
|
|
||||||
viewDashboard: "View in Dashboard",
|
|
||||||
},
|
|
||||||
de: {
|
|
||||||
title: "Bestellungsbestätigung",
|
|
||||||
preview: "Ihre Bestellung wurde bestätigt",
|
|
||||||
greeting: "Sehr geehrte/r {name},",
|
|
||||||
orderReceived:
|
|
||||||
"Vielen Dank für Ihre Bestellung! Wir haben sie erhalten und sie wird nun bearbeitet.",
|
|
||||||
orderNumber: "Bestellnummer",
|
|
||||||
items: "Artikel",
|
|
||||||
quantity: "Menge",
|
|
||||||
total: "Gesamt",
|
|
||||||
shippingTo: "Lieferadresse",
|
|
||||||
questions: "Fragen? Schreiben Sie uns an support@manoonoils.com",
|
|
||||||
thankYou: "Vielen Dank für Ihren Einkauf!",
|
|
||||||
adminTitle: "Neue Bestellung! 🎉",
|
|
||||||
adminPreview: "Eine neue Bestellung wurde erhalten",
|
|
||||||
adminGreeting: "Glückwunsch zum Verkauf!",
|
|
||||||
adminMessage: "Eine neue Bestellung wurde soeben aufgegeben. Details unten:",
|
|
||||||
customerLabel: "Kunde",
|
|
||||||
customerEmailLabel: "Kunden-E-Mail",
|
|
||||||
billingAddressLabel: "Rechnungsadresse",
|
|
||||||
phoneLabel: "Telefon",
|
|
||||||
viewDashboard: "Im Dashboard anzeigen",
|
|
||||||
},
|
|
||||||
fr: {
|
|
||||||
title: "Confirmation de commande",
|
|
||||||
preview: "Votre commande a été confirmée",
|
|
||||||
greeting: "Cher(e) {name},",
|
|
||||||
orderReceived:
|
|
||||||
"Merci pour votre commande! Nous l'avons reçue et elle est en cours de traitement.",
|
|
||||||
orderNumber: "Numéro de commande",
|
|
||||||
items: "Articles",
|
|
||||||
quantity: "Quantité",
|
|
||||||
total: "Total",
|
|
||||||
shippingTo: "Adresse de livraison",
|
|
||||||
questions: "Questions? Écrivez-nous à support@manoonoils.com",
|
|
||||||
thankYou: "Merci d'avoir Magasiné avec nous!",
|
|
||||||
adminTitle: "Nouvelle commande! 🎉",
|
|
||||||
adminPreview: "Une nouvelle commande a été reçue",
|
|
||||||
adminGreeting: "Félicitations pour la vente!",
|
|
||||||
adminMessage: "Une nouvelle commande vient d'être passée. Détails ci-dessous:",
|
|
||||||
customerLabel: "Client",
|
|
||||||
customerEmailLabel: "Email du client",
|
|
||||||
billingAddressLabel: "Adresse de facturation",
|
|
||||||
phoneLabel: "Téléphone",
|
|
||||||
viewDashboard: "Voir dans le Dashboard",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export function OrderConfirmation({
|
|
||||||
language = "en",
|
|
||||||
orderId,
|
|
||||||
orderNumber,
|
|
||||||
customerEmail,
|
|
||||||
customerName,
|
|
||||||
items,
|
|
||||||
total,
|
|
||||||
shippingAddress,
|
|
||||||
billingAddress,
|
|
||||||
phone,
|
|
||||||
siteUrl,
|
|
||||||
dashboardUrl,
|
|
||||||
isAdmin = false,
|
|
||||||
}: OrderConfirmationProps) {
|
|
||||||
const t = translations[language] || translations.en;
|
|
||||||
|
|
||||||
// For admin emails, always use English
|
|
||||||
const adminT = translations["en"];
|
|
||||||
|
|
||||||
if (isAdmin) {
|
|
||||||
return (
|
|
||||||
<BaseLayout previewText={adminT.adminPreview} language="en" siteUrl={siteUrl}>
|
|
||||||
<Text style={styles.title}>{adminT.adminTitle}</Text>
|
|
||||||
<Text style={styles.greeting}>{adminT.adminGreeting}</Text>
|
|
||||||
<Text style={styles.text}>{adminT.adminMessage}</Text>
|
|
||||||
|
|
||||||
<Section style={styles.orderInfo}>
|
|
||||||
<Text style={styles.orderNumber}>
|
|
||||||
<strong>{adminT.orderNumber}:</strong> {orderNumber}
|
|
||||||
</Text>
|
|
||||||
<Text style={styles.customerInfo}>
|
|
||||||
<strong>{adminT.customerLabel}:</strong> {customerName}
|
|
||||||
</Text>
|
|
||||||
<Text style={styles.customerInfo}>
|
|
||||||
<strong>{adminT.customerEmailLabel}:</strong> {customerEmail}
|
|
||||||
</Text>
|
|
||||||
{phone && (
|
|
||||||
<Text style={styles.customerInfo}>
|
|
||||||
<strong>{adminT.phoneLabel}:</strong> {phone}
|
|
||||||
</Text>
|
|
||||||
)}
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section style={styles.itemsSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{adminT.items}</Text>
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
{items.map((item) => (
|
|
||||||
<Section key={item.id} style={styles.itemRow}>
|
|
||||||
<Text style={styles.itemName}>
|
|
||||||
{item.quantity}x {item.name}
|
|
||||||
</Text>
|
|
||||||
<Text style={styles.itemPrice}>{item.price}</Text>
|
|
||||||
</Section>
|
|
||||||
))}
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
<Section style={styles.totalRow}>
|
|
||||||
<Text style={styles.totalLabel}>{adminT.total}:</Text>
|
|
||||||
<Text style={styles.totalValue}>{total}</Text>
|
|
||||||
</Section>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
{shippingAddress && (
|
|
||||||
<Section style={styles.shippingSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{adminT.shippingTo}</Text>
|
|
||||||
<Text style={styles.shippingAddress}>{shippingAddress}</Text>
|
|
||||||
</Section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{billingAddress && (
|
|
||||||
<Section style={styles.shippingSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{adminT.billingAddressLabel}</Text>
|
|
||||||
<Text style={styles.shippingAddress}>{billingAddress}</Text>
|
|
||||||
</Section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Section style={styles.buttonSection}>
|
|
||||||
<Button href={`${dashboardUrl}/orders/${orderId}`} style={styles.button}>
|
|
||||||
{adminT.viewDashboard}
|
|
||||||
</Button>
|
|
||||||
</Section>
|
|
||||||
</BaseLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
|
|
||||||
<Text style={styles.title}>{t.title}</Text>
|
|
||||||
<Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
|
|
||||||
<Text style={styles.text}>{t.orderReceived}</Text>
|
|
||||||
|
|
||||||
<Section style={styles.orderInfo}>
|
|
||||||
<Text style={styles.orderNumber}>
|
|
||||||
<strong>{t.orderNumber}:</strong> {orderNumber}
|
|
||||||
</Text>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section style={styles.itemsSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{t.items}</Text>
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
{items.map((item) => (
|
|
||||||
<Section key={item.id} style={styles.itemRow}>
|
|
||||||
<Text style={styles.itemName}>
|
|
||||||
{item.quantity}x {item.name}
|
|
||||||
</Text>
|
|
||||||
<Text style={styles.itemPrice}>{item.price}</Text>
|
|
||||||
</Section>
|
|
||||||
))}
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
<Section style={styles.totalRow}>
|
|
||||||
<Text style={styles.totalLabel}>{t.total}:</Text>
|
|
||||||
<Text style={styles.totalValue}>{total}</Text>
|
|
||||||
</Section>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
{shippingAddress && (
|
|
||||||
<Section style={styles.shippingSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{t.shippingTo}</Text>
|
|
||||||
<Text style={styles.shippingAddress}>{shippingAddress}</Text>
|
|
||||||
</Section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Section style={styles.buttonSection}>
|
|
||||||
<Button href={siteUrl} style={styles.button}>
|
|
||||||
{language === "sr"
|
|
||||||
? "Pogledajte narudžbinu"
|
|
||||||
: language === "de"
|
|
||||||
? "Bestellung ansehen"
|
|
||||||
: language === "fr"
|
|
||||||
? "Voir la commande"
|
|
||||||
: "View Order"}
|
|
||||||
</Button>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Text style={styles.questions}>{t.questions}</Text>
|
|
||||||
<Text style={styles.thankYou}>{t.thankYou}</Text>
|
|
||||||
</BaseLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
title: {
|
|
||||||
fontSize: "24px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
greeting: {
|
|
||||||
fontSize: "16px",
|
|
||||||
color: "#333333",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
orderInfo: {
|
|
||||||
backgroundColor: "#f9f9f9",
|
|
||||||
padding: "15px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
orderNumber: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0 0 8px 0",
|
|
||||||
},
|
|
||||||
customerInfo: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0 0 4px 0",
|
|
||||||
},
|
|
||||||
itemsSection: {
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
sectionTitle: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
hr: {
|
|
||||||
borderColor: "#e0e0e0",
|
|
||||||
margin: "10px 0",
|
|
||||||
},
|
|
||||||
itemRow: {
|
|
||||||
display: "flex" as const,
|
|
||||||
justifyContent: "space-between" as const,
|
|
||||||
padding: "8px 0",
|
|
||||||
},
|
|
||||||
itemName: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
itemPrice: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
totalRow: {
|
|
||||||
display: "flex" as const,
|
|
||||||
justifyContent: "space-between" as const,
|
|
||||||
padding: "8px 0",
|
|
||||||
},
|
|
||||||
totalLabel: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
totalValue: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
shippingSection: {
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
shippingAddress: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
buttonSection: {
|
|
||||||
textAlign: "center" as const,
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
backgroundColor: "#000000",
|
|
||||||
color: "#ffffff",
|
|
||||||
padding: "12px 30px",
|
|
||||||
borderRadius: "4px",
|
|
||||||
fontSize: "14px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
textDecoration: "none",
|
|
||||||
},
|
|
||||||
questions: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
thankYou: {
|
|
||||||
fontSize: "14px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,253 +0,0 @@
|
|||||||
import { Button, Hr, Section, Text } from "@react-email/components";
|
|
||||||
import { BaseLayout } from "./BaseLayout";
|
|
||||||
|
|
||||||
interface OrderItem {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
quantity: number;
|
|
||||||
price: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderPaidProps {
|
|
||||||
language: string;
|
|
||||||
orderId: string;
|
|
||||||
orderNumber: string;
|
|
||||||
customerName: string;
|
|
||||||
items: OrderItem[];
|
|
||||||
total: string;
|
|
||||||
siteUrl: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const translations: Record<
|
|
||||||
string,
|
|
||||||
{
|
|
||||||
title: string;
|
|
||||||
preview: string;
|
|
||||||
greeting: string;
|
|
||||||
orderPaid: string;
|
|
||||||
items: string;
|
|
||||||
total: string;
|
|
||||||
nextSteps: string;
|
|
||||||
nextStepsText: string;
|
|
||||||
questions: string;
|
|
||||||
}
|
|
||||||
> = {
|
|
||||||
sr: {
|
|
||||||
title: "Plaćanje je primljeno!",
|
|
||||||
preview: "Vaša uplata je zabeležena",
|
|
||||||
greeting: "Poštovani {name},",
|
|
||||||
orderPaid:
|
|
||||||
"Plaćanje za vašu narudžbinu je primljeno. Hvala vam! Narudžbina će uskoro biti spremna za slanje.",
|
|
||||||
items: "Artikli",
|
|
||||||
total: "Ukupno",
|
|
||||||
nextSteps: "Šta dalje?",
|
|
||||||
nextStepsText:
|
|
||||||
"Primićete još jedan email kada vaša narudžbina bude poslata. Možete očekivati dostavu u roku od 3-5 radnih dana.",
|
|
||||||
questions: "Imate pitanja? Pišite nam na support@manoonoils.com",
|
|
||||||
},
|
|
||||||
en: {
|
|
||||||
title: "Payment Received!",
|
|
||||||
preview: "Your payment has been recorded",
|
|
||||||
greeting: "Dear {name},",
|
|
||||||
orderPaid:
|
|
||||||
"Payment for your order has been received. Thank you! Your order will be prepared for shipping soon.",
|
|
||||||
items: "Items",
|
|
||||||
total: "Total",
|
|
||||||
nextSteps: "What's next?",
|
|
||||||
nextStepsText:
|
|
||||||
"You will receive another email when your order ships. You can expect delivery within 3-5 business days.",
|
|
||||||
questions: "Questions? Email us at support@manoonoils.com",
|
|
||||||
},
|
|
||||||
de: {
|
|
||||||
title: "Zahlung erhalten!",
|
|
||||||
preview: "Ihre Zahlung wurde verbucht",
|
|
||||||
greeting: "Sehr geehrte/r {name},",
|
|
||||||
orderPaid:
|
|
||||||
"Zahlung für Ihre Bestellung ist eingegangen. Vielen Dank! Ihre Bestellung wird bald für den Versand vorbereitet.",
|
|
||||||
items: "Artikel",
|
|
||||||
total: "Gesamt",
|
|
||||||
nextSteps: "Was kommt als nächstes?",
|
|
||||||
nextStepsText:
|
|
||||||
"Sie erhalten eine weitere E-Mail, wenn Ihre Bestellung versandt wird. Die Lieferung erfolgt innerhalb von 3-5 Werktagen.",
|
|
||||||
questions: "Fragen? Schreiben Sie uns an support@manoonoils.com",
|
|
||||||
},
|
|
||||||
fr: {
|
|
||||||
title: "Paiement reçu!",
|
|
||||||
preview: "Votre paiement a été enregistré",
|
|
||||||
greeting: "Cher(e) {name},",
|
|
||||||
orderPaid:
|
|
||||||
"Le paiement de votre commande a été reçu. Merci! Votre commande sera bientôt prête à être expédiée.",
|
|
||||||
items: "Articles",
|
|
||||||
total: "Total",
|
|
||||||
nextSteps: "Et ensuite?",
|
|
||||||
nextStepsText:
|
|
||||||
"Vous recevrez un autre email lorsque votre commande sera expédiée. Vous pouvez vous attendre à une livraison dans 3-5 jours ouvrables.",
|
|
||||||
questions: "Questions? Écrivez-nous à support@manoonoils.com",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export function OrderPaid({
|
|
||||||
language = "en",
|
|
||||||
orderId,
|
|
||||||
orderNumber,
|
|
||||||
customerName,
|
|
||||||
items,
|
|
||||||
total,
|
|
||||||
siteUrl,
|
|
||||||
}: OrderPaidProps) {
|
|
||||||
const t = translations[language] || translations.en;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
|
|
||||||
<Text style={styles.title}>{t.title}</Text>
|
|
||||||
<Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
|
|
||||||
<Text style={styles.text}>{t.orderPaid}</Text>
|
|
||||||
|
|
||||||
<Section style={styles.orderInfo}>
|
|
||||||
<Text style={styles.orderNumber}>
|
|
||||||
<strong>Order Number:</strong> {orderNumber}
|
|
||||||
</Text>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section style={styles.itemsSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{t.items}</Text>
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
{items.map((item) => (
|
|
||||||
<Section key={item.id} style={styles.itemRow}>
|
|
||||||
<Text style={styles.itemName}>
|
|
||||||
{item.quantity}x {item.name}
|
|
||||||
</Text>
|
|
||||||
<Text style={styles.itemPrice}>{item.price}</Text>
|
|
||||||
</Section>
|
|
||||||
))}
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
<Section style={styles.totalRow}>
|
|
||||||
<Text style={styles.totalLabel}>{t.total}:</Text>
|
|
||||||
<Text style={styles.totalValue}>{total}</Text>
|
|
||||||
</Section>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section style={styles.nextSteps}>
|
|
||||||
<Text style={styles.nextStepsTitle}>{t.nextSteps}</Text>
|
|
||||||
<Text style={styles.nextStepsText}>{t.nextStepsText}</Text>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Section style={styles.buttonSection}>
|
|
||||||
<Button href={siteUrl} style={styles.button}>
|
|
||||||
{language === "sr" ? "Nastavite kupovinu" : "Continue Shopping"}
|
|
||||||
</Button>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Text style={styles.questions}>{t.questions}</Text>
|
|
||||||
</BaseLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
title: {
|
|
||||||
fontSize: "24px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#16a34a",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
greeting: {
|
|
||||||
fontSize: "16px",
|
|
||||||
color: "#333333",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
orderInfo: {
|
|
||||||
backgroundColor: "#f0fdf4",
|
|
||||||
padding: "15px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
orderNumber: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
itemsSection: {
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
sectionTitle: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
hr: {
|
|
||||||
borderColor: "#e0e0e0",
|
|
||||||
margin: "10px 0",
|
|
||||||
},
|
|
||||||
itemRow: {
|
|
||||||
display: "flex" as const,
|
|
||||||
justifyContent: "space-between" as const,
|
|
||||||
padding: "8px 0",
|
|
||||||
},
|
|
||||||
itemName: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
itemPrice: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
totalRow: {
|
|
||||||
display: "flex" as const,
|
|
||||||
justifyContent: "space-between" as const,
|
|
||||||
padding: "8px 0",
|
|
||||||
},
|
|
||||||
totalLabel: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
totalValue: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
nextSteps: {
|
|
||||||
backgroundColor: "#f9f9f9",
|
|
||||||
padding: "15px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
nextStepsTitle: {
|
|
||||||
fontSize: "14px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
marginBottom: "5px",
|
|
||||||
},
|
|
||||||
nextStepsText: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
buttonSection: {
|
|
||||||
textAlign: "center" as const,
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
backgroundColor: "#000000",
|
|
||||||
color: "#ffffff",
|
|
||||||
padding: "12px 30px",
|
|
||||||
borderRadius: "4px",
|
|
||||||
fontSize: "14px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
textDecoration: "none",
|
|
||||||
},
|
|
||||||
questions: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,193 +0,0 @@
|
|||||||
import { Button, Hr, Section, Text } from "@react-email/components";
|
|
||||||
import { BaseLayout } from "./BaseLayout";
|
|
||||||
|
|
||||||
interface OrderItem {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
quantity: number;
|
|
||||||
price: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderShippedProps {
|
|
||||||
language: string;
|
|
||||||
orderId: string;
|
|
||||||
orderNumber: string;
|
|
||||||
customerName: string;
|
|
||||||
items: OrderItem[];
|
|
||||||
trackingNumber?: string;
|
|
||||||
trackingUrl?: string;
|
|
||||||
siteUrl: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const translations: Record<
|
|
||||||
string,
|
|
||||||
{
|
|
||||||
title: string;
|
|
||||||
preview: string;
|
|
||||||
greeting: string;
|
|
||||||
orderShipped: string;
|
|
||||||
tracking: string;
|
|
||||||
items: string;
|
|
||||||
questions: string;
|
|
||||||
}
|
|
||||||
> = {
|
|
||||||
sr: {
|
|
||||||
title: "Vaša narudžbina je poslata!",
|
|
||||||
preview: "Vaša narudžbina je na putu",
|
|
||||||
greeting: "Poštovani {name},",
|
|
||||||
orderShipped:
|
|
||||||
"Odlične vesti! Vaša narudžbina je poslata i uskoro će stići na vašu adresu.",
|
|
||||||
tracking: "Praćenje pošiljke",
|
|
||||||
items: "Artikli",
|
|
||||||
questions: "Imate pitanja? Pišite nam na support@manoonoils.com",
|
|
||||||
},
|
|
||||||
en: {
|
|
||||||
title: "Your Order Has Shipped!",
|
|
||||||
preview: "Your order is on its way",
|
|
||||||
greeting: "Dear {name},",
|
|
||||||
orderShipped:
|
|
||||||
"Great news! Your order has been shipped and will arrive at your address soon.",
|
|
||||||
tracking: "Track your shipment",
|
|
||||||
items: "Items",
|
|
||||||
questions: "Questions? Email us at support@manoonoils.com",
|
|
||||||
},
|
|
||||||
de: {
|
|
||||||
title: "Ihre Bestellung wurde versendet!",
|
|
||||||
preview: "Ihre Bestellung ist unterwegs",
|
|
||||||
greeting: "Sehr geehrte/r {name},",
|
|
||||||
orderShipped:
|
|
||||||
"Großartige Neuigkeiten! Ihre Bestellung wurde versandt und wird in Kürze bei Ihnen eintreffen.",
|
|
||||||
tracking: "Sendung verfolgen",
|
|
||||||
items: "Artikel",
|
|
||||||
questions: "Fragen? Schreiben Sie uns an support@manoonoils.com",
|
|
||||||
},
|
|
||||||
fr: {
|
|
||||||
title: "Votre commande a été expédiée!",
|
|
||||||
preview: "Votre commande est en route",
|
|
||||||
greeting: "Cher(e) {name},",
|
|
||||||
orderShipped:
|
|
||||||
"Bonne nouvelle! Votre commande a été expédiée et arrivera bientôt à votre adresse.",
|
|
||||||
tracking: "Suivre votre envoi",
|
|
||||||
items: "Articles",
|
|
||||||
questions: "Questions? Écrivez-nous à support@manoonoils.com",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export function OrderShipped({
|
|
||||||
language = "en",
|
|
||||||
orderId,
|
|
||||||
orderNumber,
|
|
||||||
customerName,
|
|
||||||
items,
|
|
||||||
trackingNumber,
|
|
||||||
trackingUrl,
|
|
||||||
siteUrl,
|
|
||||||
}: OrderShippedProps) {
|
|
||||||
const t = translations[language] || translations.en;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BaseLayout previewText={t.preview} language={language} siteUrl={siteUrl}>
|
|
||||||
<Text style={styles.title}>{t.title}</Text>
|
|
||||||
<Text style={styles.greeting}>{t.greeting.replace("{name}", customerName)}</Text>
|
|
||||||
<Text style={styles.text}>{t.orderShipped}</Text>
|
|
||||||
|
|
||||||
{trackingNumber && (
|
|
||||||
<Section style={styles.trackingSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{t.tracking}</Text>
|
|
||||||
{trackingUrl ? (
|
|
||||||
<Button href={trackingUrl} style={styles.trackingButton}>
|
|
||||||
{trackingNumber}
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Text style={styles.trackingNumber}>{trackingNumber}</Text>
|
|
||||||
)}
|
|
||||||
</Section>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Section style={styles.itemsSection}>
|
|
||||||
<Text style={styles.sectionTitle}>{t.items}</Text>
|
|
||||||
<Hr style={styles.hr} />
|
|
||||||
{items.map((item) => (
|
|
||||||
<Section key={item.id} style={styles.itemRow}>
|
|
||||||
<Text style={styles.itemName}>
|
|
||||||
{item.quantity}x {item.name}
|
|
||||||
</Text>
|
|
||||||
<Text style={styles.itemPrice}>{item.price}</Text>
|
|
||||||
</Section>
|
|
||||||
))}
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<Text style={styles.questions}>{t.questions}</Text>
|
|
||||||
</BaseLayout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = {
|
|
||||||
title: {
|
|
||||||
fontSize: "24px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
greeting: {
|
|
||||||
fontSize: "16px",
|
|
||||||
color: "#333333",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
text: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
trackingSection: {
|
|
||||||
backgroundColor: "#f9f9f9",
|
|
||||||
padding: "15px",
|
|
||||||
borderRadius: "8px",
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
sectionTitle: {
|
|
||||||
fontSize: "16px",
|
|
||||||
fontWeight: "bold" as const,
|
|
||||||
color: "#1a1a1a",
|
|
||||||
marginBottom: "10px",
|
|
||||||
},
|
|
||||||
trackingNumber: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
trackingButton: {
|
|
||||||
backgroundColor: "#000000",
|
|
||||||
color: "#ffffff",
|
|
||||||
padding: "10px 20px",
|
|
||||||
borderRadius: "4px",
|
|
||||||
fontSize: "14px",
|
|
||||||
textDecoration: "none",
|
|
||||||
},
|
|
||||||
itemsSection: {
|
|
||||||
marginBottom: "20px",
|
|
||||||
},
|
|
||||||
hr: {
|
|
||||||
borderColor: "#e0e0e0",
|
|
||||||
margin: "10px 0",
|
|
||||||
},
|
|
||||||
itemRow: {
|
|
||||||
display: "flex" as const,
|
|
||||||
justifyContent: "space-between" as const,
|
|
||||||
padding: "8px 0",
|
|
||||||
},
|
|
||||||
itemName: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
itemPrice: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#333333",
|
|
||||||
margin: "0",
|
|
||||||
},
|
|
||||||
questions: {
|
|
||||||
fontSize: "14px",
|
|
||||||
color: "#666666",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
export { BaseLayout } from "./BaseLayout";
|
|
||||||
export { OrderConfirmation } from "./OrderConfirmation";
|
|
||||||
export { OrderShipped } from "./OrderShipped";
|
|
||||||
export { OrderCancelled } from "./OrderCancelled";
|
|
||||||
export { OrderPaid } from "./OrderPaid";
|
|
||||||
@@ -372,6 +372,11 @@
|
|||||||
"errorNoCheckout": "Keine aktive Kasse. Bitte versuchen Sie es erneut.",
|
"errorNoCheckout": "Keine aktive Kasse. Bitte versuchen Sie es erneut.",
|
||||||
"errorEmailRequired": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
|
"errorEmailRequired": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
|
||||||
"errorFieldsRequired": "Bitte füllen Sie alle erforderlichen Felder aus.",
|
"errorFieldsRequired": "Bitte füllen Sie alle erforderlichen Felder aus.",
|
||||||
|
"errorNoShippingMethods": "Keine Versandmethoden für diese Adresse verfügbar. Bitte überprüfen Sie Ihre Adresse oder kontaktieren Sie den Support.",
|
||||||
|
"errorSelectShipping": "Bitte wählen Sie eine Versandmethode.",
|
||||||
|
"errorPhoneRequired": "Bitte geben Sie eine gültige Telefonnummer ein.",
|
||||||
|
"loadingShippingMethods": "Versandoptionen werden geladen...",
|
||||||
|
"enterAddressForShipping": "Geben Sie Ihre Adresse ein, um Versandoptionen zu sehen.",
|
||||||
"errorOccurred": "Ein Fehler ist during des Checkouts aufgetreten.",
|
"errorOccurred": "Ein Fehler ist during des Checkouts aufgetreten.",
|
||||||
"errorCreatingOrder": "Bestellung konnte nicht erstellt werden.",
|
"errorCreatingOrder": "Bestellung konnte nicht erstellt werden.",
|
||||||
"orderConfirmed": "Bestellung bestätigt!",
|
"orderConfirmed": "Bestellung bestätigt!",
|
||||||
|
|||||||
@@ -420,6 +420,9 @@
|
|||||||
"errorFieldsRequired": "Please fill in all required fields.",
|
"errorFieldsRequired": "Please fill in all required fields.",
|
||||||
"errorNoShippingMethods": "No shipping methods available for this address. Please check your address or contact support.",
|
"errorNoShippingMethods": "No shipping methods available for this address. Please check your address or contact support.",
|
||||||
"errorSelectShipping": "Please select a shipping method.",
|
"errorSelectShipping": "Please select a shipping method.",
|
||||||
|
"errorPhoneRequired": "Please enter a valid phone number.",
|
||||||
|
"loadingShippingMethods": "Loading shipping options...",
|
||||||
|
"enterAddressForShipping": "Enter your address to see shipping options.",
|
||||||
"errorOccurred": "An error occurred during checkout.",
|
"errorOccurred": "An error occurred during checkout.",
|
||||||
"errorCreatingOrder": "Failed to create order.",
|
"errorCreatingOrder": "Failed to create order.",
|
||||||
"continueToShipping": "Continue to Shipping",
|
"continueToShipping": "Continue to Shipping",
|
||||||
|
|||||||
@@ -372,6 +372,11 @@
|
|||||||
"errorNoCheckout": "Pas de paiement actif. Veuillez réessayer.",
|
"errorNoCheckout": "Pas de paiement actif. Veuillez réessayer.",
|
||||||
"errorEmailRequired": "Veuillez entrer une adresse e-mail valide.",
|
"errorEmailRequired": "Veuillez entrer une adresse e-mail valide.",
|
||||||
"errorFieldsRequired": "Veuillez remplir tous les champs obligatoires.",
|
"errorFieldsRequired": "Veuillez remplir tous les champs obligatoires.",
|
||||||
|
"errorNoShippingMethods": "Aucune méthode de livraison disponible pour cette adresse. Veuillez vérifier votre adresse ou contacter le support.",
|
||||||
|
"errorSelectShipping": "Veuillez sélectionner une méthode de livraison.",
|
||||||
|
"errorPhoneRequired": "Veuillez entrer un numéro de téléphone valide.",
|
||||||
|
"loadingShippingMethods": "Chargement des options de livraison...",
|
||||||
|
"enterAddressForShipping": "Entrez votre adresse pour voir les options de livraison.",
|
||||||
"errorOccurred": "Une erreur s'est produite lors du paiement.",
|
"errorOccurred": "Une erreur s'est produite lors du paiement.",
|
||||||
"errorCreatingOrder": "Échec de la création de la commande.",
|
"errorCreatingOrder": "Échec de la création de la commande.",
|
||||||
"orderConfirmed": "Commande Confirmée!",
|
"orderConfirmed": "Commande Confirmée!",
|
||||||
|
|||||||
@@ -418,6 +418,11 @@
|
|||||||
"errorNoCheckout": "Nema aktivne korpe. Molimo pokušajte ponovo.",
|
"errorNoCheckout": "Nema aktivne korpe. Molimo pokušajte ponovo.",
|
||||||
"errorEmailRequired": "Molimo unesite validnu email adresu.",
|
"errorEmailRequired": "Molimo unesite validnu email adresu.",
|
||||||
"errorFieldsRequired": "Molimo popunite sva obavezna polja.",
|
"errorFieldsRequired": "Molimo popunite sva obavezna polja.",
|
||||||
|
"errorNoShippingMethods": "Nema dostupnih načina dostave za ovu adresu. Molimo proverite adresu ili kontaktirajte podršku.",
|
||||||
|
"errorSelectShipping": "Molimo izaberite način dostave.",
|
||||||
|
"errorPhoneRequired": "Molimo unesite validan broj telefona.",
|
||||||
|
"loadingShippingMethods": "Učitavanje opcija dostave...",
|
||||||
|
"enterAddressForShipping": "Unesite adresu da vidite opcije dostave.",
|
||||||
"errorOccurred": "Došlo je do greške prilikom kupovine.",
|
"errorOccurred": "Došlo je do greške prilikom kupovine.",
|
||||||
"errorCreatingOrder": "Neuspešno kreiranje narudžbine.",
|
"errorCreatingOrder": "Neuspešno kreiranje narudžbine.",
|
||||||
"orderConfirmed": "Narudžbina potvrđena!",
|
"orderConfirmed": "Narudžbina potvrđena!",
|
||||||
|
|||||||
@@ -76,4 +76,5 @@ class AnalyticsService {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const analyticsService = AnalyticsService.getInstance();
|
export const analyticsService = AnalyticsService.getInstance();
|
||||||
|
export { AnalyticsService };
|
||||||
export default analyticsService;
|
export default analyticsService;
|
||||||
|
|||||||
@@ -1,357 +0,0 @@
|
|||||||
import { sendEmailToCustomer, sendEmailToAdmin } from "@/lib/resend";
|
|
||||||
import { OrderConfirmation } from "@/emails/OrderConfirmation";
|
|
||||||
import { OrderShipped } from "@/emails/OrderShipped";
|
|
||||||
import { OrderCancelled } from "@/emails/OrderCancelled";
|
|
||||||
import { OrderPaid } from "@/emails/OrderPaid";
|
|
||||||
import { formatPrice } from "@/app/api/webhooks/saleor/utils";
|
|
||||||
|
|
||||||
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://dev.manoonoils.com";
|
|
||||||
const DASHBOARD_URL = process.env.DASHBOARD_URL || "https://dashboard.manoonoils.com";
|
|
||||||
|
|
||||||
// Translation helper for email subjects
|
|
||||||
function getOrderConfirmationSubject(language: string, orderNumber: string): string {
|
|
||||||
const subjects: Record<string, string> = {
|
|
||||||
sr: `Potvrda narudžbine #${orderNumber}`,
|
|
||||||
de: `Bestellbestätigung #${orderNumber}`,
|
|
||||||
fr: `Confirmation de commande #${orderNumber}`,
|
|
||||||
en: `Order Confirmation #${orderNumber}`,
|
|
||||||
};
|
|
||||||
return subjects[language] || subjects.en;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getOrderShippedSubject(language: string, orderNumber: string): string {
|
|
||||||
const subjects: Record<string, string> = {
|
|
||||||
sr: `Vaša narudžbina #${orderNumber} je poslata!`,
|
|
||||||
de: `Ihre Bestellung #${orderNumber} wurde versendet!`,
|
|
||||||
fr: `Votre commande #${orderNumber} a été expédiée!`,
|
|
||||||
en: `Your Order #${orderNumber} Has Shipped!`,
|
|
||||||
};
|
|
||||||
return subjects[language] || subjects.en;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getOrderCancelledSubject(language: string, orderNumber: string): string {
|
|
||||||
const subjects: Record<string, string> = {
|
|
||||||
sr: `Vaša narudžbina #${orderNumber} je otkazana`,
|
|
||||||
de: `Ihre Bestellung #${orderNumber} wurde storniert`,
|
|
||||||
fr: `Votre commande #${orderNumber} a été annulée`,
|
|
||||||
en: `Your Order #${orderNumber} Has Been Cancelled`,
|
|
||||||
};
|
|
||||||
return subjects[language] || subjects.en;
|
|
||||||
}
|
|
||||||
|
|
||||||
function getOrderPaidSubject(language: string, orderNumber: string): string {
|
|
||||||
const subjects: Record<string, string> = {
|
|
||||||
sr: `Plaćanje za narudžbinu #${orderNumber} je primljeno!`,
|
|
||||||
de: `Zahlung für Bestellung #${orderNumber} erhalten!`,
|
|
||||||
fr: `Paiement reçu pour la commande #${orderNumber}!`,
|
|
||||||
en: `Payment Received for Order #${orderNumber}!`,
|
|
||||||
};
|
|
||||||
return subjects[language] || subjects.en;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Interfaces
|
|
||||||
interface OrderItem {
|
|
||||||
id: string;
|
|
||||||
productName: string;
|
|
||||||
variantName?: string;
|
|
||||||
quantity: number;
|
|
||||||
totalPrice: {
|
|
||||||
gross: {
|
|
||||||
amount: number;
|
|
||||||
currency: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderAddress {
|
|
||||||
firstName?: string;
|
|
||||||
lastName?: string;
|
|
||||||
streetAddress1?: string;
|
|
||||||
streetAddress2?: string;
|
|
||||||
city?: string;
|
|
||||||
postalCode?: string;
|
|
||||||
country?: string;
|
|
||||||
phone?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Order {
|
|
||||||
id: string;
|
|
||||||
number: string;
|
|
||||||
userEmail: string;
|
|
||||||
user?: {
|
|
||||||
firstName?: string;
|
|
||||||
lastName?: string;
|
|
||||||
};
|
|
||||||
billingAddress?: OrderAddress;
|
|
||||||
shippingAddress?: OrderAddress;
|
|
||||||
lines: OrderItem[];
|
|
||||||
total: {
|
|
||||||
gross: {
|
|
||||||
amount: number;
|
|
||||||
currency: string;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
languageCode?: string;
|
|
||||||
metadata?: Array<{ key: string; value: string }>;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface OrderEmailItem {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
quantity: number;
|
|
||||||
price: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
class OrderNotificationService {
|
|
||||||
private static instance: OrderNotificationService;
|
|
||||||
|
|
||||||
static getInstance(): OrderNotificationService {
|
|
||||||
if (!OrderNotificationService.instance) {
|
|
||||||
OrderNotificationService.instance = new OrderNotificationService();
|
|
||||||
}
|
|
||||||
return OrderNotificationService.instance;
|
|
||||||
}
|
|
||||||
|
|
||||||
private parseOrderItems(lines: OrderItem[], currency: string): OrderEmailItem[] {
|
|
||||||
return lines.map((line) => ({
|
|
||||||
id: line.id,
|
|
||||||
name: line.variantName ? `${line.productName} (${line.variantName})` : line.productName,
|
|
||||||
quantity: line.quantity,
|
|
||||||
price: formatPrice(line.totalPrice.gross.amount, currency),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
private formatAddress(address?: OrderAddress): string {
|
|
||||||
if (!address) return "";
|
|
||||||
const parts = [
|
|
||||||
address.firstName,
|
|
||||||
address.lastName,
|
|
||||||
address.streetAddress1,
|
|
||||||
address.streetAddress2,
|
|
||||||
address.city,
|
|
||||||
address.postalCode,
|
|
||||||
address.country,
|
|
||||||
].filter(Boolean);
|
|
||||||
return parts.join(", ");
|
|
||||||
}
|
|
||||||
|
|
||||||
private getCustomerName(order: Order): string {
|
|
||||||
if (order.user?.firstName || order.user?.lastName) {
|
|
||||||
return `${order.user.firstName || ""} ${order.user.lastName || ""}`.trim();
|
|
||||||
}
|
|
||||||
if (order.shippingAddress?.firstName || order.shippingAddress?.lastName) {
|
|
||||||
return `${order.shippingAddress.firstName || ""} ${order.shippingAddress.lastName || ""}`.trim();
|
|
||||||
}
|
|
||||||
return "Customer";
|
|
||||||
}
|
|
||||||
|
|
||||||
private getCustomerLanguage(order: Order): string {
|
|
||||||
const LANGUAGE_CODE_MAP: Record<string, string> = {
|
|
||||||
SR: "sr",
|
|
||||||
EN: "en",
|
|
||||||
DE: "de",
|
|
||||||
FR: "fr",
|
|
||||||
};
|
|
||||||
|
|
||||||
if (order.languageCode && LANGUAGE_CODE_MAP[order.languageCode]) {
|
|
||||||
return LANGUAGE_CODE_MAP[order.languageCode];
|
|
||||||
}
|
|
||||||
if (order.metadata) {
|
|
||||||
const langMeta = order.metadata.find((m) => m.key === "language");
|
|
||||||
if (langMeta && LANGUAGE_CODE_MAP[langMeta.value.toUpperCase()]) {
|
|
||||||
return LANGUAGE_CODE_MAP[langMeta.value.toUpperCase()];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return "en";
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendOrderConfirmation(order: Order): Promise<void> {
|
|
||||||
const language = this.getCustomerLanguage(order);
|
|
||||||
const currency = order.total.gross.currency;
|
|
||||||
const customerName = this.getCustomerName(order);
|
|
||||||
const customerEmail = order.userEmail;
|
|
||||||
const phone = order.shippingAddress?.phone || order.billingAddress?.phone;
|
|
||||||
|
|
||||||
await sendEmailToCustomer({
|
|
||||||
to: customerEmail,
|
|
||||||
subject: getOrderConfirmationSubject(language, order.number),
|
|
||||||
react: OrderConfirmation({
|
|
||||||
language,
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
customerEmail,
|
|
||||||
customerName,
|
|
||||||
items: this.parseOrderItems(order.lines, currency),
|
|
||||||
total: formatPrice(order.total.gross.amount, currency),
|
|
||||||
shippingAddress: this.formatAddress(order.shippingAddress),
|
|
||||||
siteUrl: SITE_URL,
|
|
||||||
}),
|
|
||||||
language,
|
|
||||||
idempotencyKey: `order-confirmed/${order.id}`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendOrderConfirmationToAdmin(order: Order): Promise<void> {
|
|
||||||
const currency = order.total.gross.currency;
|
|
||||||
const customerName = this.getCustomerName(order);
|
|
||||||
const customerEmail = order.userEmail;
|
|
||||||
const phone = order.shippingAddress?.phone || order.billingAddress?.phone;
|
|
||||||
|
|
||||||
await sendEmailToAdmin({
|
|
||||||
subject: `🎉 New Order #${order.number} - ${formatPrice(order.total.gross.amount, currency)}`,
|
|
||||||
react: OrderConfirmation({
|
|
||||||
language: "en",
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
customerEmail,
|
|
||||||
customerName,
|
|
||||||
items: this.parseOrderItems(order.lines, currency),
|
|
||||||
total: formatPrice(order.total.gross.amount, currency),
|
|
||||||
shippingAddress: this.formatAddress(order.shippingAddress),
|
|
||||||
billingAddress: this.formatAddress(order.billingAddress),
|
|
||||||
phone,
|
|
||||||
siteUrl: SITE_URL,
|
|
||||||
dashboardUrl: DASHBOARD_URL,
|
|
||||||
isAdmin: true,
|
|
||||||
}),
|
|
||||||
eventType: "ORDER_CONFIRMED",
|
|
||||||
orderId: order.id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendOrderShipped(order: Order, trackingNumber?: string, trackingUrl?: string): Promise<void> {
|
|
||||||
const language = this.getCustomerLanguage(order);
|
|
||||||
const currency = order.total.gross.currency;
|
|
||||||
const customerName = this.getCustomerName(order);
|
|
||||||
const customerEmail = order.userEmail;
|
|
||||||
|
|
||||||
await sendEmailToCustomer({
|
|
||||||
to: customerEmail,
|
|
||||||
subject: getOrderShippedSubject(language, order.number),
|
|
||||||
react: OrderShipped({
|
|
||||||
language,
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
customerName,
|
|
||||||
items: this.parseOrderItems(order.lines, currency),
|
|
||||||
trackingNumber,
|
|
||||||
trackingUrl,
|
|
||||||
siteUrl: SITE_URL,
|
|
||||||
}),
|
|
||||||
language,
|
|
||||||
idempotencyKey: `order-fulfilled/${order.id}`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendOrderShippedToAdmin(order: Order, trackingNumber?: string, trackingUrl?: string): Promise<void> {
|
|
||||||
const currency = order.total.gross.currency;
|
|
||||||
const customerName = this.getCustomerName(order);
|
|
||||||
|
|
||||||
await sendEmailToAdmin({
|
|
||||||
subject: `Order Shipped #${order.number} - ${customerName}`,
|
|
||||||
react: OrderShipped({
|
|
||||||
language: "en",
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
customerName,
|
|
||||||
items: this.parseOrderItems(order.lines, currency),
|
|
||||||
trackingNumber,
|
|
||||||
trackingUrl,
|
|
||||||
siteUrl: SITE_URL,
|
|
||||||
}),
|
|
||||||
eventType: "ORDER_FULFILLED",
|
|
||||||
orderId: order.id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendOrderCancelled(order: Order, reason?: string): Promise<void> {
|
|
||||||
const language = this.getCustomerLanguage(order);
|
|
||||||
const currency = order.total.gross.currency;
|
|
||||||
const customerName = this.getCustomerName(order);
|
|
||||||
const customerEmail = order.userEmail;
|
|
||||||
|
|
||||||
await sendEmailToCustomer({
|
|
||||||
to: customerEmail,
|
|
||||||
subject: getOrderCancelledSubject(language, order.number),
|
|
||||||
react: OrderCancelled({
|
|
||||||
language,
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
customerName,
|
|
||||||
items: this.parseOrderItems(order.lines, currency),
|
|
||||||
total: formatPrice(order.total.gross.amount, currency),
|
|
||||||
reason,
|
|
||||||
siteUrl: SITE_URL,
|
|
||||||
}),
|
|
||||||
language,
|
|
||||||
idempotencyKey: `order-cancelled/${order.id}`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendOrderCancelledToAdmin(order: Order, reason?: string): Promise<void> {
|
|
||||||
const currency = order.total.gross.currency;
|
|
||||||
const customerName = this.getCustomerName(order);
|
|
||||||
|
|
||||||
await sendEmailToAdmin({
|
|
||||||
subject: `Order Cancelled #${order.number} - ${customerName}`,
|
|
||||||
react: OrderCancelled({
|
|
||||||
language: "en",
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
customerName,
|
|
||||||
items: this.parseOrderItems(order.lines, currency),
|
|
||||||
total: formatPrice(order.total.gross.amount, currency),
|
|
||||||
reason,
|
|
||||||
siteUrl: SITE_URL,
|
|
||||||
}),
|
|
||||||
eventType: "ORDER_CANCELLED",
|
|
||||||
orderId: order.id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendOrderPaid(order: Order): Promise<void> {
|
|
||||||
const language = this.getCustomerLanguage(order);
|
|
||||||
const currency = order.total.gross.currency;
|
|
||||||
const customerName = this.getCustomerName(order);
|
|
||||||
const customerEmail = order.userEmail;
|
|
||||||
|
|
||||||
await sendEmailToCustomer({
|
|
||||||
to: customerEmail,
|
|
||||||
subject: getOrderPaidSubject(language, order.number),
|
|
||||||
react: OrderPaid({
|
|
||||||
language,
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
customerName,
|
|
||||||
items: this.parseOrderItems(order.lines, currency),
|
|
||||||
total: formatPrice(order.total.gross.amount, currency),
|
|
||||||
siteUrl: SITE_URL,
|
|
||||||
}),
|
|
||||||
language,
|
|
||||||
idempotencyKey: `order-paid/${order.id}`,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
async sendOrderPaidToAdmin(order: Order): Promise<void> {
|
|
||||||
const currency = order.total.gross.currency;
|
|
||||||
const customerName = this.getCustomerName(order);
|
|
||||||
|
|
||||||
await sendEmailToAdmin({
|
|
||||||
subject: `Payment Received #${order.number} - ${customerName} - ${formatPrice(order.total.gross.amount, currency)}`,
|
|
||||||
react: OrderPaid({
|
|
||||||
language: "en",
|
|
||||||
orderId: order.id,
|
|
||||||
orderNumber: order.number,
|
|
||||||
customerName,
|
|
||||||
items: this.parseOrderItems(order.lines, currency),
|
|
||||||
total: formatPrice(order.total.gross.amount, currency),
|
|
||||||
siteUrl: SITE_URL,
|
|
||||||
}),
|
|
||||||
eventType: "ORDER_FULLY_PAID",
|
|
||||||
orderId: order.id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const orderNotificationService = OrderNotificationService.getInstance();
|
|
||||||
export default orderNotificationService;
|
|
||||||
@@ -58,6 +58,7 @@ interface GetCheckoutResponse {
|
|||||||
interface SaleorCheckoutStore {
|
interface SaleorCheckoutStore {
|
||||||
checkout: Checkout | null;
|
checkout: Checkout | null;
|
||||||
checkoutToken: string | null;
|
checkoutToken: string | null;
|
||||||
|
languageCode: string | null;
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
isLoading: boolean;
|
isLoading: boolean;
|
||||||
error: string | null;
|
error: string | null;
|
||||||
@@ -68,6 +69,7 @@ interface SaleorCheckoutStore {
|
|||||||
updateLine: (lineId: string, quantity: number) => Promise<void>;
|
updateLine: (lineId: string, quantity: number) => Promise<void>;
|
||||||
removeLine: (lineId: string) => Promise<void>;
|
removeLine: (lineId: string) => Promise<void>;
|
||||||
setEmail: (email: string) => Promise<void>;
|
setEmail: (email: string) => Promise<void>;
|
||||||
|
setLanguageCode: (languageCode: string) => void;
|
||||||
refreshCheckout: () => Promise<void>;
|
refreshCheckout: () => Promise<void>;
|
||||||
toggleCart: () => void;
|
toggleCart: () => void;
|
||||||
openCart: () => void;
|
openCart: () => void;
|
||||||
@@ -85,12 +87,13 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
(set, get) => ({
|
(set, get) => ({
|
||||||
checkout: null,
|
checkout: null,
|
||||||
checkoutToken: null,
|
checkoutToken: null,
|
||||||
|
languageCode: null,
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
error: null,
|
error: null,
|
||||||
|
|
||||||
initCheckout: async () => {
|
initCheckout: async () => {
|
||||||
const { checkoutToken } = get();
|
const { checkoutToken, languageCode } = get();
|
||||||
|
|
||||||
if (checkoutToken) {
|
if (checkoutToken) {
|
||||||
// Try to fetch existing checkout
|
// Try to fetch existing checkout
|
||||||
@@ -109,7 +112,7 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Create new checkout
|
// Create new checkout with language code
|
||||||
try {
|
try {
|
||||||
const { data } = await saleorClient.mutate<CheckoutCreateResponse>({
|
const { data } = await saleorClient.mutate<CheckoutCreateResponse>({
|
||||||
mutation: CHECKOUT_CREATE,
|
mutation: CHECKOUT_CREATE,
|
||||||
@@ -117,6 +120,7 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
input: {
|
input: {
|
||||||
channel: CHANNEL,
|
channel: CHANNEL,
|
||||||
lines: [],
|
lines: [],
|
||||||
|
languageCode: languageCode ? languageCode.toUpperCase() : undefined,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -294,6 +298,7 @@ export const useSaleorCheckoutStore = create<SaleorCheckoutStore>()(
|
|||||||
openCart: () => set({ isOpen: true }),
|
openCart: () => set({ isOpen: true }),
|
||||||
closeCart: () => set({ isOpen: false }),
|
closeCart: () => set({ isOpen: false }),
|
||||||
clearError: () => set({ error: null }),
|
clearError: () => set({ error: null }),
|
||||||
|
setLanguageCode: (languageCode: string) => set({ languageCode }),
|
||||||
|
|
||||||
getLineCount: () => {
|
getLineCount: () => {
|
||||||
const { checkout } = get();
|
const { checkout } = get();
|
||||||
|
|||||||
36
vitest.config.ts
Normal file
36
vitest.config.ts
Normal file
@@ -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