docs: add shoppable image, bento grid, marquee, and product carousel to available sections

- Fix: resolve search dropdown clickability by increasing z-index. The DocSearch button and dropdown were not clickable due to z-index conflict with sticky sidebar elements. Added position: relative and z-index: 501 to .docsearch .DocSearch-Button, and z-index: 500 to .docsearch wrapper to ensure proper stacking context.

- Docs: add UI Standards documentation for developer guidelines
- Docs: add Routing documentation for developer reference
- Docs: add Affiliates documentation for marketing section

docs/builder/sections.mdx

@@ -26,3 +26,15 @@ A fully functional form allowing visitors to get in touch. Includes configurable
 
 ### Call to Action (CTA) Banner
 A high-converting strip designed to get clicks. Perfect for newsletter signups or limited-time offers.
+
+### Shoppable Image
+An interactive visual block that allows you to upload an image and add clickable "hotspots" (dots). Each hotspot links to a specific WooCommerce product, displaying the product's price and details on hover. Perfect for "Shop the Look" features.
+
+### Bento Category Grid
+A modern, asymmetrical bento-box style grid designed to highlight specific categories, collections, or promotional URLs. Each block supports individual background colors, images, and sizing (small, medium, large, or tall) to create visually striking layouts.
+
+### Marquee Banner
+A continuously scrolling horizontal text banner. Great for site-wide announcements, free shipping offers, or dynamic alerts.
+
+### Product Carousel
+A sleek horizontal slider that showcases a curated selection of products. Allows you to manually pick specific products to display them with their featured image, title, and price.

docs/developer/addons/checkout-fields.mdx

@@ -0,0 +1,87 @@
+---
+title: Custom Checkout Fields
+description: How to extend WooNooW checkout with custom fields and address formatting
+date: 2024-06-03
+---
+
+## Overview
+
+WooNooW fully integrates with the standard `woocommerce_checkout_fields` filter. This means any plugin that modifies or adds fields to WooCommerce checkout will generally work seamlessly with the WooNooW SPA checkout and address book features.
+
+However, WooNooW introduces several powerful SPA-specific enhancements that you can take advantage of when writing integrations or custom plugins (such as RajaOngkir).
+
+---
+
+## Supported Field Properties
+
+When defining a custom field via `woocommerce_checkout_fields`, WooNooW respects the standard WooCommerce properties (like `type`, `label`, `required`, `default`, etc.), plus it adds a few specialized ones for modern React components.
+
+### `form-row-wide` Class Support
+
+The SPA natively converts WooCommerce field classes to Tailwind grid classes:
+*   Adding `'form-row-wide'` to the `class` array of a field will automatically apply `md:col-span-2`, forcing the field to take up **100% width** on the checkout and address editing forms.
+*   If `'form-row-wide'` is omitted, the field typically spans **50% width** on tablet and desktop screens (`md:col-span-1`).
+
+### Hidden Fields
+
+If you want to hide a standard field (e.g., `billing_last_name` or `shipping_country`), you can do so in two ways that WooNooW understands:
+1.  Change the field's type: `$fields['billing']['billing_last_name']['type'] = 'hidden';`
+2.  Add a hidden class: `$fields['billing']['billing_last_name']['class'][] = 'hidden';`
+
+> **Tip**: If you hide `last_name`, you might want to make `first_name` take up the full row. You can easily do this by adding `'form-row-wide'` to the `first_name` class array!
+
+### `searchable_select` Field Type (New in WooNooW)
+
+WooNooW introduces a new `searchable_select` type which renders an accessible, auto-complete dropdown component with API search capabilities. This is perfect for deeply nested address data like subdistricts or provinces.
+
+**Example:**
+```php
+$fields['billing']['billing_destination_id'] = [
+    'type'            => 'searchable_select',
+    'label'           => __('Destination', 'woonoow'),
+    'required'        => true,
+    'search_endpoint' => '/rajaongkir/destinations',
+    'search_param'    => 'search',
+    'min_chars'       => 3,
+    'placeholder'     => 'Type to search destination...',
+];
+```
+
+*   **`search_endpoint`**: The WooNooW API endpoint to call (e.g., `GET /wp-json/woonoow/v1/rajaongkir/destinations?search=query`).
+*   **`search_param`**: The query parameter name (default: `'search'`).
+*   **`min_chars`**: The minimum characters a user must type before firing the API request.
+
+The endpoint must return an array of objects with `value` and `label`:
+```json
+[
+  { "value": "123", "label": "Jakarta Selatan, DKI Jakarta" },
+  { "value": "124", "label": "Jakarta Pusat, DKI Jakarta" }
+]
+```
+
+---
+
+## Custom Address Formatting
+
+If you introduce custom fields (like a RajaOngkir destination ID), you will likely want to format how the address is displayed on the "My Account" address cards and the "Checkout" saved address selector.
+
+WooNooW provides the `woonoow_format_address` filter for this exact purpose.
+
+**Example:**
+```php
+add_filter('woonoow_format_address', function($formatted, $address) {
+    $parts = [];
+    $parts[] = $address['first_name'] . ' ' . $address['last_name'];
+    $parts[] = $address['address_1'];
+    
+    // Append custom label saved by a searchable_select component
+    if (!empty($address['destination_id_label'])) {
+        $parts[] = $address['destination_id_label'];
+    }
+    
+    // The SPA uses whitespace-pre-wrap, so newlines render correctly
+    return implode("\n", array_filter($parts));
+}, 10, 2);
+```
+
+When `formatted_address` is provided, the SPA will automatically bypass its default layout and display your perfectly formatted, newline-separated string.

docs/developer/routing.mdx

@@ -0,0 +1,44 @@
+---
+title: SPA Routing Architecture
+description: Understand the HashRouter implementation in the Customer SPA and why it's used.
+---
+
+WooNooW relies on a **Hybrid by Default** architecture with React SPA islands. To avoid conflicting with native WordPress rewrite rules and to provide a seamless frontend experience, the Customer SPA uses `HashRouter` instead of the traditional `BrowserRouter`.
+
+## Why HashRouter?
+
+When a customer navigates the WooNooW Customer SPA (e.g., Shop, Cart, Checkout, or My Account), the routing happens entirely on the client side without triggering full page reloads or conflicting with WordPress.
+
+**URL Format:**
+```
+Shop:     https://example.com/shop#/
+Product:  https://example.com/shop#/product/product-slug
+Cart:     https://example.com/shop#/cart
+Checkout: https://example.com/shop#/checkout
+Account:  https://example.com/shop#/my-account
+```
+
+### How It Works
+
+1. **WordPress Load**: WordPress handles the initial request (e.g., `/shop`) and renders the SPA container.
+2. **React Takes Over**: The React application reads the route after the `#` (e.g., `#/product/product-slug`) and renders the appropriate component.
+3. **No Conflicts**: Anything after the hash `#` is ignored by the server, ensuring zero 404 errors or conflicts with existing WordPress canonical redirects.
+
+## Benefits
+
+*   **Zero Server Config**: No complex `.htaccess` or NGINX rewrite rules required.
+*   **Shareable Links**: Hash routes can be shared in email campaigns or social media.
+*   **Direct URL Access**: Users can directly paste a URL or bookmark a page and the SPA will load perfectly.
+
+## Developer Rules
+
+When building custom frontend extensions or working with the Customer SPA:
+
+1.  **Always use `HashRouter`** for the Customer SPA.
+2.  **Use React Router `Link` components** to ensure links automatically use hash URLs.
+3.  **Never use `BrowserRouter`**, as it will cause immediate conflicts with WordPress routing.
+4.  **Never try to override WordPress routes**; rely on the hash for internal SPA navigation.
+
+## SEO Considerations
+
+While HashRouter URLs are primarily for the SPA experience, WooCommerce product pages still exist in the background. Search engines index the actual product URLs, and canonical tags ensure SEO equity is maintained while providing the fast SPA experience to actual users.

docs/developer/software-updates.mdx

@@ -59,7 +59,19 @@ POST /wp-json/woonoow/v1/software/check
   },
   "current_version": "1.0.0",
   "latest_version": "1.2.0",
-  "changelog": "## What's New\n- Added feature X\n- Fixed bug Y",
+  "changelog": {
+    "narrative": "Here the new features coming",
+    "points": [
+      {
+        "type": "ADD",
+        "text": "Added feature X"
+      },
+      {
+        "type": "FIX",
+        "text": "Fixed bug Y"
+      }
+    ]
+  },
   "release_date": "2026-02-01 12:00:00",
   "download_url": "https://your-store.com/wp-json/woonoow/v1/software/download?token=..."
 }
@@ -96,6 +108,34 @@ GET /wp-json/woonoow/v1/software/changelog?slug=<slug>&version=<version>
 
 Returns version history with changelogs.
 
+**Response:**
+
+```json
+{
+  "slug": "my-plugin",
+  "versions": [
+    {
+      "version": "1.1.2",
+      "release_date": "2026-06-03 20:52:35",
+      "changelog": {
+        "narrative": "Here the new features coming",
+        "points": [
+          {
+            "type": "ADD",
+            "text": "Feature 1"
+          },
+          {
+            "type": "FIX",
+            "text": "Feature 2 Stable"
+          }
+        ]
+      },
+      "download_count": 0
+    }
+  ]
+}
+```
+
 ## WordPress Client Integration
 
 Include the updater class in your plugin or theme to enable automatic updates:

docs/developer/ui-standards.mdx

@@ -0,0 +1,58 @@
+---
+title: Admin SPA UI & CRUD Standards
+description: Design principles, layout structure, and behavioral patterns for the WooNooW Admin interface.
+---
+
+WooNooW enforces a strict UI pattern for the Admin SPA to ensure predictable UX, maintainability, and responsiveness. When building custom modules or addons, adhere to these standards.
+
+## Template Pattern
+
+The WooNooW Admin SPA follows a consistent layout structure:
+
+*   **App Bar**: Persistent across all routes. Contains global controls like fullscreen toggle, server connectivity, and the user menu.
+*   **Menu Bar**: Primary navigation (Dashboard, Orders, Products). Sticky with overflow-x scroll. In Fullscreen mode, it becomes a collapsible sidebar.
+*   **Submenu Bar**: Context-sensitive secondary tabs under the main menu.
+*   **Page Tool Bar**: Functional filters and actions relevant to the current page.
+*   **Page Content**: Hosts data tables, analytics, and CRUD forms.
+
+## CRUD Module Pattern
+
+All entity management modules (Orders, Products, Customers) use a consistent **Submenu Tabs Pattern**:
+
+`[All {Entity}] [New] [Categories] [Tags]`
+
+### Implementation Rules
+*   **Use Submenu Tabs**: The primary action (e.g., "New") is a tab, NOT a toolbar button.
+*   **Toolbar for Actions & Filters**: Use the toolbar for bulk actions (Delete, Export), filter dropdowns, and search inputs. **Do not** put primary CRUD buttons here.
+*   **No Mixing**: Keep filters in the toolbar and navigation in the submenu.
+
+## Toolbar Button Standards
+
+*   **Delete**: Always use a red background (`bg-red-600`), and only show when items are selected.
+*   **Refresh**: Mandatory on all CRUD list pages (`hover:bg-accent`).
+*   **Reset Filters**: Use a text link style with underline (`hover:text-foreground underline`), not a button block.
+*   **Icons**: Use `inline-flex items-center gap-2`.
+
+## Table and List UI Standards
+
+Tables must gracefully degrade to tappable cards on mobile devices.
+
+### Desktop Tables
+*   Use `bg-muted/50` for table headers and `font-medium`.
+*   Body rows should have `hover:bg-muted/30`.
+*   Table cells use consistent padding (`p-3`).
+
+### Mobile Cards
+Mobile cards are fully tappable links wrapping the entire card body.
+*   Hide on desktop (`md:hidden`) and show on mobile.
+*   Add a visual indicator like a chevron to indicate tappability.
+*   Include active scale animation (`active:scale-[0.98]`) for tap feedback.
+
+## Dialog Behavior Pattern
+
+WooNooW prevents accidental dismissal of heavy forms and complex edits using Radix UI Dialog patterns.
+
+*   **Prevent outside click & escape key** for heavy edits (Email builder, multi-field forms, destructive actions).
+*   **Allow dismissal** for simple info dialogs or quick single-field edits.
+
+Always provide explicit 'Cancel' and 'Save' buttons.

docs/hooks/frontend.mdx

@@ -19,3 +19,11 @@ Modify the standard set of checkout fields recognized by the system.
 
 **Parameters:**
 *   `$keys` (array): List of field aliases (e.g., ['billing_first_name', ...]).
+
+### woonoow_format_address
+
+Allows modifying or overriding the displayed address format (e.g., for My Account address cards and checkout address selection cards). Useful for plugins like RajaOngkir where custom fields replace the default state/city fields.
+
+**Parameters:**
+*   `$formatted_address` (string): The initially formatted address string (usually empty by default).
+*   `$address` (array): The raw address data array containing all standard and custom address fields.

docs/marketing/affiliates.mdx

@@ -0,0 +1,212 @@
+---
+title: Affiliate Program
+description: Manage referral tracking, commissions, and payouts for your store's affiliate partners.
+---
+
+# Affiliate Program
+
+The WooNooW Affiliate Program allows you to build a network of partners who earn commissions by referring customers to your store. This feature is fully integrated into the WooNooW Admin SPA and Customer Dashboard.
+
+## Commission Rate Hierarchy
+
+The affiliate system uses a **3-level priority hierarchy** for commission rates. This allows granular control over how much affiliates earn for each sale.
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                  COMMISSION RATE PRIORITY               │
+├─────────────────────────────────────────────────────────┤
+│  1. Product-Specific Rate (Highest Priority)            │
+│     └─ Only used if product has "Enable affiliate       │
+│        commission" checked AND has a custom rate set    │
+│                                                         │
+│  2. Affiliate Custom Rate                               │
+│     └─ Set per-affiliate in Admin > Marketing >         │
+│        Affiliates > Edit individual affiliate           │
+│                                                         │
+│  3. Global Default Rate (Lowest Priority / Fallback)    │
+│     └─ Set in Admin > Marketing > Affiliate Settings    │
+│        (Default: 10%)                                   │
+└─────────────────────────────────────────────────────────┘
+```
+
+### How Commission is Calculated
+
+When an affiliate's referral makes a purchase:
+
+1. **The system checks each line item in the order** (for orders with multiple products)
+2. **Each product gets its commission rate determined individually**:
+   - If the product has affiliate enabled with a custom rate → Use that rate
+   - Else if the affiliate has a custom rate → Use affiliate's rate
+   - Else → Use global default rate
+3. **Commission is calculated per item**: `commission = (item_total × rate) / 100`
+4. **Total commission = sum of all item commissions**
+
+### Example Scenario
+
+| Product | Affiliate Enabled | Product Rate | Affiliate Rate | Global Rate | Affiliate Earns |
+|---------|-------------------|--------------|---------------|-------------|-----------------|
+| Product A | Yes | 30% | 15% | 10% | **30%** |
+| Product B | No | — | 15% | 10% | **15%** |
+| Product C | No | — | — | 10% | **10%** |
+
+For an order containing all three products with a subtotal of Rp 100.000 each:
+- Product A: Rp 100.000 × 30% = Rp 30.000
+- Product B: Rp 100.000 × 15% = Rp 15.000
+- Product C: Rp 100.000 × 10% = Rp 10.000
+- **Total commission: Rp 55.000**
+
+## Setting Up Commission Rates
+
+### Global Default Rate
+
+Set the default commission rate for all products and affiliates:
+
+1. Go to **Admin > Marketing > Affiliate Settings** (or Module Settings)
+2. Find **Default Commission Rate** field
+3. Enter percentage (e.g., `10` for 10%)
+4. Save changes
+
+> [!TIP]
+> The global default is used when no product-specific or affiliate custom rate is set.
+
+### Per-Product Commission Rate
+
+Override the commission for specific products:
+
+1. Go to **Admin > Products** and edit a product
+2. In the **General** tab, scroll to the **Affiliate** section
+3. Check **"Enable affiliate commission for this product"**
+4. Enter a custom **Commission Rate (%)**
+5. Save the product
+
+```
+Product: Premium T-Shirt
+├── Price: Rp 150.000
+├── Affiliate: Enabled ✓
+└── Custom Rate: 25%
+
+When affiliate's referral buys this:
+→ Affiliate earns 25% of Rp 150.000 = Rp 37.500
+```
+
+> [!NOTE]
+> If you enable affiliate commission but leave the rate empty, the system will fall back to the next level in the hierarchy (affiliate custom rate → global default).
+
+### Per-Affiliate Custom Rate
+
+Override the commission for a specific affiliate:
+
+1. Go to **Admin > Marketing > Affiliates**
+2. Click on the affiliate in the list
+3. Find the **Rate** column
+4. Click the pencil icon to edit
+5. Enter a custom percentage (e.g., `15`)
+6. Click **Save**
+
+> [!TIP]
+> A "(custom)" label appears next to custom rates, while "(default)" indicates the affiliate is using the global rate.
+
+## Referral Tracking Flow
+
+```
+┌─────────────┐     ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
+│  Customer   │     │  Affiliate  │     │   Customer  │     │    Order    │
+│  clicks ref │     │  shares URL │     │  makes purch│     │   created   │
+│  link /ref/ │────▶│  w/ slug    │────▶│  via cookie │────▶│  + tracking │
+│  john-doe   │     │             │     │  stored     │     │  recorded   │
+└─────────────┘     └─────────────┘     └─────────────┘     └─────────────┘
+                                                                   │
+                                                                   ▼
+┌─────────────┐     ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
+│  Payout     │     │  Commission │     │  Referral   │     │  Referral   │
+│  processed  │     │  approved   │     │  approved   │     │  pending    │
+│  to         │◀────│  after 14   │◀────│  (if order  │◀────│  (after     │
+│  affiliate  │     │  days hold  │     │  not refund)│     │  conversion)│
+└─────────────┘     └─────────────┘     └─────────────┘     └─────────────┘
+```
+
+## Link Sharing & Collections
+
+To help affiliates market your products more effectively, WooNooW provides advanced tools for link generation and product curation directly in their dashboard.
+
+### Link Builder
+
+The Link Builder allows affiliates to generate trackable links to *any* page on your site, not just the homepage.
+
+- **Custom Destination**: Affiliates can paste any store URL (e.g., a specific product or category page) to generate a referral link.
+- **Campaign Tracking**: Affiliates can optionally append campaign parameters (e.g., `&campaign=summer-sale`) to track which marketing efforts are driving conversions.
+- **One-Click copy**: Generated links can be copied to the clipboard instantly.
+
+### Curated Collections
+
+Instead of sharing links to individual products, affiliates can build custom "Collections" of products to share with their audience.
+
+- **Collection Builder**: Affiliates can browse store products and add them to a named collection (e.g., "My Tech Setup" or "Summer Favorites").
+- **Unique Collection Pages**: Each collection gets a dedicated, shareable URL (e.g., `/collection/my-tech-setup`).
+- **Automatic Tracking**: When a customer buys any product from a collection page, the affiliate automatically earns commission.
+
+### Smart Links (Auto-Rotator)
+
+For affiliates running generic ads (like TikTok bio links or Facebook Ads), Smart Links maximize conversion by dynamically routing traffic.
+
+- **How it works**: A Smart Link uses the `/go/` prefix (e.g., `/go/my-tech-setup`).
+- **Auto-Rotation**: When a customer clicks a Smart Link, the system instantly picks one product at random from the associated collection and redirects the user directly to that product's page.
+- **Zero Friction**: The redirect happens server-side via a 302 redirect, ensuring the referral tracking cookie is set before the customer even sees the product page.
+
+## Admin Features
+
+### Affiliate Management
+
+- **View all affiliates**: Go to Admin > Marketing > Affiliates
+- **Approve pending applications**: Click "Approve" button for pending affiliates
+- **Edit custom rates**: Click pencil icon in the Rate column
+- **Monitor earnings**: View Total Earnings and Payable Balance columns
+
+### Referral Monitoring
+
+- **View all referrals**: Admin > Marketing > Affiliates > Referrals tab
+- **Filter by affiliate**: Select affiliate from dropdown
+- **Filter by status**: pending, approved, rejected
+- **Filter by date range**: Custom date filtering
+
+### Payout Management
+
+- **Create payouts**: Admin > Marketing > Affiliates > Payouts tab
+- **Payment methods**: Bank Transfer or Store Credit
+- **Store credit**: Automatically generates coupon code for affiliate
+
+## Customer Dashboard
+
+Affiliates can access their dashboard from **My Account > Affiliate Program**:
+
+- **Referral link**: Short and clean unique URL with their slug (e.g., `/ref/john-doe`)
+- **Link Builder**: Tool to generate referral links to specific products or pages.
+- **My Collections & Smart Links**: Tool to curate product collections and get auto-rotating Smart Links.
+- **Statistics**: Total earnings, pending earnings, commission rate
+- **Referral history**: List of all conversions with status
+- **Payout history**: Record of past payments
+- **Payment details**: Bank account information for receiving payouts
+
+## Configuration Options
+
+| Setting | Location | Description | Default |
+|---------|----------|-------------|---------|
+| Default Commission Rate | Affiliate Module Settings | Global fallback rate | 10% |
+| Cookie Duration | Affiliate Module Settings | Days referral cookie is valid | 30 days |
+| Self-Referral | Affiliate Module Settings | Allow affiliates to refer themselves | Disabled |
+| Auto-Approve | Affiliate Module Settings | Automatically approve new applications | Disabled |
+| Holding Period | Affiliate Module Settings | Days before commission becomes payable | 14 days |
+| Enable Curated Collections | Affiliate Module Settings | Allow affiliates to create and share product collections | Enabled |
+
+## Commission Status Lifecycle
+
+```
+pending → approved → paid
+   ↓         ↓
+rejected (if refund/issue)
+```
+
+1. **Pending**: Commission recorded but held (14 days for refund protection)
+2. **Approved**: Commission released and payable
+3. **Paid**: Payout processed to affiliate
+4. **Rejected**: Commission cancelled (order refunded or issue detected)

docs/marketing/index.mdx

@@ -9,6 +9,7 @@ WooNooW comes with a powerful suite of marketing tools to help you retain custom
 
 ## Features
 
+*   **[Affiliate Program](/docs/marketing/affiliates)**: Build a partner network with cookie-based tracking and 3-level commission hierarchy.
 *   **[Newsletter](/docs/marketing/newsletter)**: Create campaigns and manage subscribers directly from your dashboard.
 *   **[Coupons](/docs/marketing/coupons)**: Create smart coupons and automatic discounts.
 *   **[Wishlist](/docs/marketing/wishlist)**: Let customers save their favorite items for later.

docs/store/subscriptions.mdx

@@ -11,32 +11,38 @@ To use Subscriptions, ensure:
 2. Your payment gateway supports tokenization / recurring payments (e.g., Stripe, PayPal).
 
 ## Creating a Subscription Product
-1. Go to **Products > Add New** in WordPress.
+
-2. In the Product Data dropdown, select **Simple Subscription** or **Variable Subscription**.
+WooNooW implements subscriptions directly within the standard product settings, eliminating the need for separate product types.
+
+1. Go to **Products** in the Admin SPA and create or edit a product.
+2. In the **General** tab, scroll down and check **Enable subscription for this product**.
 3. Configure the billing schedule:
-   - **Subscription Price:** The recurring amount (e.g., $15).
+   - **Period & Interval:** How often they are charged (e.g., every 1 month).
-   - **Billing Interval/Period:** How often they are charged (e.g., every 1 month).
+   - **Trial Days:** Offer an initial period at no cost (e.g., 14 days).
-   - **Expire After:** When the subscription automatically ends (leave empty for "Never expire").
+   - **Signup Fee:** Optional one-time fee added to the first payment.
-   - **Sign-up Fee:** Optional one-time fee added to the first payment.
+
-   - **Free Trial:** Offer an initial period at no cost (e.g., 14 days).
+> [!NOTE]
-4. Publish the product.
+> For variable products, you can configure these subscription settings at the variation level in the **Variations** tab, allowing different billing terms for different variations.
 
 ## Managing Subscriptions (Admin)
 Store owners can view and manage all active, paused, or cancelled subscriptions directly from the Admin SPA.
 1. Navigate to **Store > Subscriptions**.
 2. Click on any Subscription ID to view details.
 3. From the detail view, you can:
-   - **Pause** an active subscription.
+   - **Pause/Resume** an active subscription.
    - **Cancel** a subscription.
-   - **Change Next Payment Date**.
+   - **Renew Now**: Initiates a standard renewal process.
-   - **Process Renewal** manually.
+   - **Charge Now**: Bypasses gateway capability checks to attempt an immediate auto-debit charge. If it fails, the order is marked as failed without falling back to a manual payment link.
 
 ## Customer Experience
 When a customer purchases a subscription, they gain access to a self-service dashboard in their account:
+
 1. Customers navigate to **My Account > Subscriptions**.
 2. They can view the status, next payment date, and associated orders.
-3. They have full autonomy to actions like **Pause**, **Resume**, or **Cancel** their own subscriptions based on the permissions you configure in the module settings.
+3. They have autonomy to take actions like **Pause**, **Resume**, or **Cancel** their own subscriptions.
-4. If a payment fails, customers will see a clear **Pay Now** button to update their billing details.
+   - **Pause Limits:** If configured in settings, customers are restricted to a maximum number of pauses (e.g., max 3 pauses per subscription). The UI clearly displays how many pauses are remaining.
+4. **Early Renewals:** Customers can choose to renew early. When paying for an early renewal, the UI clearly displays the projected next billing date so they know exactly when their subsequent charge will occur.
+5. If a payment fails, customers will see a clear **Pay Now** button to update their billing details.
 
 ## Automated Emails
 The notification system automatically handles subscription lifecycle events:

docu.json

@@ -122,6 +122,10 @@
         {
           "title": "Wishlist",
           "href": "/wishlist"
+        },
+        {
+          "title": "Affiliates",
+          "href": "/affiliates"
         }
       ]
     },
@@ -239,6 +243,14 @@
           "title": "Store Owner",
           "href": "/store-owner"
         },
+        {
+          "title": "UI Standards",
+          "href": "/ui-standards"
+        },
+        {
+          "title": "Routing",
+          "href": "/routing"
+        },
         {
           "title": "Software Updates",
           "href": "/software-updates"

next.config.mjs

@@ -9,6 +9,9 @@ const nextConfig = {
             },
         ],
     },
+    "allowedDevOrigins": [
+        "192.168.18.82"
+    ],
     experimental: {
         optimizePackageImports: ["lucide-react", "react-icons"],
     },

styles/algolia.css

@@ -48,6 +48,13 @@
   color: hsl(var(--muted-foreground));
   transition: width 0.3s ease;
   margin: 0;
+  position: relative;
+  z-index: 501;
+}
+
+.docsearch {
+  position: relative;
+  z-index: 500;
 }
 
 .docsearch .DocSearch-Button:hover {