Noxa_Jewellery

1. Backend Repository: Noxa-Jewellery-be
A. Real-Time Category Product Count & Empty Category Filtering
Problem / Background:
Previously, GET /category returned all active categories regardless of whether they had any products listed.
Categories created for staging or future collections (e.g., "Hello") showed up on customer-facing storefronts, leading to empty listing pages ("No products found matching your filters").
Technical Implementation:
MongoDB Aggregation Pipeline (

category.service.ts
):
Added an aggregation query on the products collection matching { isDeleted: { $ne: true }, isActive: { $ne: false } } and grouping by $category with { $sum: 1 }.
Maps calculated productCount to each category object in the returned dataset.
Evaluates hasProducts=true / onlyWithProducts=true query parameters and filters out categories where productCount === 0.
DTO & Validation Whitelist (

base-query.dto.ts
):
Added @IsOptional() @IsString() hasProducts?: string; and onlyWithProducts?: string; to BaseQueryDto.
Prevents NestJS ValidationPipe({ whitelist: true }) from stripping query parameters from incoming requests.
B. Stripe Webhook Signature Verification & Payment Webhook Architecture
Problem / Background:
Stripe webhook requests were returning HTTP 400 Bad Request ("Webhook signature verification failed").
Root Cause: Global Express bodyParser.json() in NestJS was parsing the incoming raw payload before reaching the webhook handler, altering the byte stream required for HMAC-SHA256 signature verification (stripe.webhooks.constructEvent).
Technical Implementation:
Raw Body Middleware Bypass (

main.ts
):
Configured NestJS with { rawBody: true }.
Placed bodyParser.raw({ type: '*/*' }) exclusively for /api/payment/stripe/webhook before applying global JSON and URL-encoded parsers.
Candidate Webhook Secret Resolution (

payment.controller.ts
&

payment.service.ts
):
Added multi-candidate secret verification to support seamless local Stripe CLI testing secrets alongside production dashboard secrets.
Extracted raw payload buffers cleanly via req.rawBody || req.body.
Order & Transaction Status Synchronization:
Verified checkout.session.completed and payment_intent.succeeded event handling.
Automatically transitions orders and transaction logs to PAID / SUCCESS and records transaction reference IDs without duplicate webhook executions.
C. Domestic & International Payment Gateway Integrity
Problem / Background:
Non-INR transactions attempted through domestic Indian gateways (PhonePe / UPI) caused gateway runtime rejection.
Technical Implementation:
Added validation in

payment.service.ts
enforcing that PhonePe and UPI payment intents can only be initiated when the order base currency is INR.
Non-INR currencies (e.g., USD, EUR, AED, GBP) are strictly routed through Stripe's international checkout.
D. Shipping Slab & Delivery Charges Currency Normalization
Implementation (

delivery-charges.service.ts
):
Updated calculateDeliveryChargeWithDetails to normalize cart total thresholds against base INR values before evaluating delivery charge tiers, ensuring accurate free-shipping threshold calculations across international currencies.
2. Frontend Repository: Noxa_E_Comm_Fe
A. Dynamic Category Display & Empty Category Exclusion
Problem / Background:
Store navigation menus (Mega Menu, category scroll bar, mobile navigation drawer) displayed categories with 0 products.
Technical Implementation:
Category Service Layer (

categoryService.ts
):
Updated getCategories() pagination loops to query /category?limit=100&page=1&hasProducts=true.
Added client-side fallback filtering allItems.filter((cat) => cat.productCount === undefined || cat.productCount > 0).
Storefront Header Integration (

Header.tsx
):
Memoized categories via useMemo filtering against rawCategories.
Applied non-empty categories to:
Row 3 Category Ribbon: Horizontal scrolling category link tabs (categoryLinks).
All Jewellery Mega Menu: Left category list and right subcategory pane.
Mobile Side Navigation Drawer: Category collapsible items (categoriesWithProducts).
B. Mobile Header Redesign & Action Icon Aesthetics
Problem / Background:
On mobile screens (<380px wide), the header action elements (Location, Country Selector, Profile Avatar, Wishlist, Cart) caused horizontal overcrowding.
The Cart icon on the far right was cut off / clipped at the screen margin and used mismatched outline icons instead of Noxa's luxury design system.
Technical Implementation (

Header.tsx
):
Branded Luxury Assets:
Replaced Lucide icons with official Noxa branded PNG components:
Shopping Cart:

<BagIcon className="w-4 h-4 object-contain" />
Wishlist:

<WishlistIcon className="w-4 h-4 object-contain" />
Profile Guest:

<UserIcon className="w-3.5 h-3.5 object-contain" />
Spacing & Overflow Elimination:
Main header container padding adjusted to px-2.5 sm:px-6 to guarantee a comfortable right margin.
Location indicator text truncation set to max-w-[36px] xs:max-w-[48px] with a pulse status ring (w-3.5 h-3.5).
Currency selector made compact (px-1.5 py-0.5).
Cart and Wishlist count badges updated to min-w-[14px] h-[14px] text-[8px] positioned cleanly at -top-1 -right-1 without overflowing outside the container.
Interactive Mobile Profile Dropdown:
Added mobile avatar button showing gold metallic user initials or custom avatar with tap-to-expand menu.
Contains user info, links to Profile, My Orders, Track Orders, Saved Wishlist, and a Logout trigger.
C. Checkout & Payment Option Security
Implementation (

CheckoutContent.tsx
&

ordersApi.ts
):
Added dynamic conditional rendering for PhonePe/UPI payment options: only rendered when selectedCurrency === 'INR'.
Added useEffect listener to auto-switch paymentMethod to "stripe" if a customer switches currency away from INR.
Extended CreateOrderRequest interface and payload to pass couponCode.
Updated post-payment polling and redirect routes to point to /payment/success and /orders.
D. Promotion & Company Profile Hooks
Implementation (

useProducts.ts
):
Added usePromoProductsQuery with a 3-tier fallback hierarchy (promo tagged products -> home products -> all products) to ensure promo banners never render empty cards.
Added company profile data hooks for dynamic header/footer branding.