From b4b524d02187ff6d7c2d6c02285050271ab13be2 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 27 Dec 2025 18:25:53 +0100
Subject: [PATCH] feat: add toggle_switch macro and fix homepage issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add reusable toggle_switch macro to inputs.html with size/color options
- Replace inline billing toggle with macro on homepage
- Add € currency signs to addon prices

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/templates/platform/homepage-wizamart.html | 24 +++-----
 app/templates/shared/macros/inputs.html       | 61 +++++++++++++++++++
 2 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/app/templates/platform/homepage-wizamart.html b/app/templates/platform/homepage-wizamart.html
index f6adcc4f..503b310b 100644
--- a/app/templates/platform/homepage-wizamart.html
+++ b/app/templates/platform/homepage-wizamart.html
@@ -1,6 +1,7 @@
 {# app/templates/platform/homepage-wizamart.html #}
 {# Wizamart Marketing Homepage - Letzshop OMS Platform #}
 {% extends "platform/base.html" %}
+{% from 'shared/macros/inputs.html' import toggle_switch %}
 
 {% block title %}Wizamart - Order Management for Letzshop Sellers{% endblock %}
 {% block meta_description %}Lightweight OMS for Letzshop vendors. Manage orders, inventory, and invoicing. Start your 30-day free trial today.{% endblock %}
@@ -74,18 +75,13 @@
                 </p>
 
                 {# Billing Toggle #}
-                <div class="flex items-center justify-center mt-8 gap-4">
-                    <span class="text-gray-700 dark:text-gray-300 min-w-[70px] text-right" :class="{ 'font-semibold': !annual }">{{ _("platform.pricing.monthly") }}</span>
-                    <button @click="annual = !annual"
-                            class="relative w-14 h-7 rounded-full transition-colors flex-shrink-0"
-                            :class="annual ? 'bg-indigo-600' : 'bg-gray-300 dark:bg-gray-600'">
-                        <span class="absolute top-1 left-1 w-5 h-5 bg-white rounded-full shadow transition-transform"
-                              :class="annual ? 'translate-x-7' : ''"></span>
-                    </button>
-                    <span class="text-gray-700 dark:text-gray-300 min-w-[150px]" :class="{ 'font-semibold': annual }">
-                        {{ _("platform.pricing.annual") }}
-                        <span class="text-green-600 text-sm font-medium ml-1">{{ _("platform.pricing.save_months") }}</span>
-                    </span>
+                <div class="flex justify-center mt-8">
+                    {{ toggle_switch(
+                        model='annual',
+                        left_label=_("platform.pricing.monthly"),
+                        right_label=_("platform.pricing.annual"),
+                        right_badge=_("platform.pricing.save_months")
+                    ) }}
                 </div>
             </div>
 
@@ -276,7 +272,7 @@
 
                     {# Price #}
                     <div class="flex items-baseline">
-                        <span class="text-2xl font-bold text-gray-900 dark:text-white">{{ addon.price }}</span>
+                        <span class="text-2xl font-bold text-gray-900 dark:text-white">{{ addon.price }}€</span>
                         <span class="text-gray-500 dark:text-gray-400 ml-1">/{{ addon.billing_period }}</span>
                     </div>
 
@@ -285,7 +281,7 @@
                     <div class="mt-4 space-y-2">
                         {% for opt in addon.options %}
                         <div class="text-sm text-gray-600 dark:text-gray-400">
-                            {{ opt.quantity }} addresses: {{ opt.price }}/month
+                            {{ opt.quantity }} addresses: {{ opt.price }}€/month
                         </div>
                         {% endfor %}
                     </div>
diff --git a/app/templates/shared/macros/inputs.html b/app/templates/shared/macros/inputs.html
index 338f041a..b0c4c79d 100644
--- a/app/templates/shared/macros/inputs.html
+++ b/app/templates/shared/macros/inputs.html
@@ -282,3 +282,64 @@
     ></select>
 </div>
 {% endmacro %}
+
+
+{#
+  Toggle Switch
+  =============
+  A toggle switch component for binary options (on/off, monthly/annual, etc.)
+  with optional labels on both sides.
+
+  Parameters:
+    - model: Alpine.js x-model variable (required)
+    - left_label: Label for the "off" state (optional)
+    - right_label: Label for the "on" state (optional)
+    - right_badge: Small badge/extra text for right label (optional)
+    - size: 'sm' | 'md' | 'lg' (default: 'md')
+    - color: Tailwind color name for active state (default: 'indigo')
+
+  Usage:
+    {{ toggle_switch(model='annual', left_label='Monthly', right_label='Annual', right_badge='Save 2 months') }}
+    {{ toggle_switch(model='darkMode', size='sm') }}
+#}
+{% macro toggle_switch(
+    model,
+    left_label=none,
+    right_label=none,
+    right_badge=none,
+    size='md',
+    color='indigo'
+) %}
+{% set sizes = {
+    'sm': {'track': 'w-10 h-5', 'thumb': 'w-4 h-4', 'translate': 'translate-x-5', 'text': 'text-sm'},
+    'md': {'track': 'w-14 h-7', 'thumb': 'w-5 h-5', 'translate': 'translate-x-7', 'text': 'text-base'},
+    'lg': {'track': 'w-16 h-8', 'thumb': 'w-6 h-6', 'translate': 'translate-x-8', 'text': 'text-lg'}
+} %}
+{% set s = sizes[size] %}
+<div class="inline-flex items-center gap-3">
+    {% if left_label %}
+    <span class="{{ s.text }} text-gray-700 dark:text-gray-300 select-none"
+          :class="{ 'font-semibold': !{{ model }} }">{{ left_label }}</span>
+    {% endif %}
+
+    <button type="button"
+            @click="{{ model }} = !{{ model }}"
+            role="switch"
+            :aria-checked="{{ model }}"
+            class="{{ s.track }} relative inline-flex items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-{{ color }}-500 focus:ring-offset-2"
+            :class="{{ model }} ? 'bg-{{ color }}-600' : 'bg-gray-300 dark:bg-gray-600'">
+        <span class="{{ s.thumb }} absolute left-0.5 bg-white rounded-full shadow-md transition-transform"
+              :class="{{ model }} ? '{{ s.translate }}' : 'translate-x-0'"></span>
+    </button>
+
+    {% if right_label %}
+    <span class="{{ s.text }} text-gray-700 dark:text-gray-300 select-none"
+          :class="{ 'font-semibold': {{ model }} }">
+        {{ right_label }}
+        {% if right_badge %}
+        <span class="text-green-600 dark:text-green-400 text-sm font-medium ml-1">{{ right_badge }}</span>
+        {% endif %}
+    </span>
+    {% endif %}
+</div>
+{% endmacro %}