orion/app/modules/loyalty/templates/loyalty/storefront/enroll.html

{# app/modules/loyalty/templates/loyalty/storefront/enroll.html #}
{% extends "storefront/base.html" %}

{% block title %}Join Loyalty Program - {{ store.name }}{% endblock %}

{% block alpine_data %}customerLoyaltyEnroll(){% endblock %}

{% block content %}
<div class="min-h-screen flex items-center justify-center px-4 py-12 bg-gray-50 dark:bg-gray-900">
    <div class="max-w-md w-full">
        <!-- Logo/Brand -->
        <div class="text-center mb-8">
            {% if store.logo_url %}
            <img src="{{ store.logo_url }}" alt="{{ store.name }}" class="h-16 w-auto mx-auto mb-4">
            {% endif %}
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Join Our Rewards Program!</h1>
            <p class="mt-2 text-gray-600 dark:text-gray-400" x-text="'Earn ' + (program?.points_per_euro || 1) + ' point for every EUR you spend'"></p>
        </div>

        <!-- Loading -->
        <div x-show="loading" class="text-center py-8">
            <span x-html="$icon('spinner', 'w-8 h-8 animate-spin mx-auto')" style="color: var(--color-primary)"></span>
        </div>

        <!-- No Program Available -->
        <div x-show="!loading && !program" class="bg-white dark:bg-gray-800 rounded-lg shadow p-8 text-center">
            <span x-html="$icon('exclamation-circle', 'w-12 h-12 mx-auto text-yellow-500')"></span>
            <h2 class="mt-4 text-xl font-semibold text-gray-900 dark:text-white">Program Not Available</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-400">This store doesn't have a loyalty program set up yet.</p>
        </div>

        <!-- Enrollment Form -->
        <div x-show="!loading && program && !enrolled" class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
            <!-- Welcome Bonus Banner -->
            <div x-show="program?.welcome_bonus_points > 0"
                 class="p-4 text-center text-white"
                 :style="'background-color: ' + (program?.card_color || 'var(--color-primary)')">
                <span x-html="$icon('gift', 'w-6 h-6 inline mr-2')"></span>
                <span class="font-semibold">Get <span x-text="program?.welcome_bonus_points"></span> bonus points when you join!</span>
            </div>

            <form @submit.prevent="submitEnrollment" class="p-6 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Email <span class="text-red-500">*</span>
                    </label>
                    <input type="email" x-model="form.email" required
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white"
                           style="--tw-ring-color: var(--color-primary)"
                           placeholder="your@email.com">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            First Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text" x-model="form.first_name" required
                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white"
                               placeholder="John">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                            Last Name
                        </label>
                        <input type="text" x-model="form.last_name"
                               class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white"
                               placeholder="Doe">
                    </div>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Phone (optional)
                    </label>
                    <input type="tel" x-model="form.phone"
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white"
                           placeholder="+352 123 456 789">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
                        Birthday (optional)
                    </label>
                    <input type="date" x-model="form.birthday"
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent dark:bg-gray-700 dark:text-white">
                    <p class="mt-1 text-xs text-gray-500">For special birthday rewards</p>
                </div>

                <div class="space-y-3 pt-2">
                    <label class="flex items-start">
                        <input type="checkbox" x-model="form.terms_accepted" required
                               class="mt-1 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                               style="color: var(--color-primary)">
                        <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">
                            I agree to the <a href="#" class="underline" style="color: var(--color-primary)">Terms & Conditions</a>
                        </span>
                    </label>
                    <label class="flex items-start">
                        <input type="checkbox" x-model="form.marketing_consent"
                               class="mt-1 w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary"
                               style="color: var(--color-primary)">
                        <span class="ml-2 text-sm text-gray-600 dark:text-gray-400">
                            Send me news and special offers
                        </span>
                    </label>
                </div>

                <button type="submit"
                        :disabled="enrolling || !form.email || !form.first_name || !form.terms_accepted"
                        class="w-full py-3 px-4 text-white font-semibold rounded-lg transition-colors disabled:opacity-50"
                        :style="'background-color: ' + (program?.card_color || 'var(--color-primary)')">
                    <span x-show="enrolling" x-html="$icon('spinner', 'w-5 h-5 inline animate-spin mr-2')"></span>
                    <span x-text="enrolling ? 'Joining...' : 'Join & Get ' + (program?.welcome_bonus_points || 0) + ' Points'"></span>
                </button>
            </form>

            <div class="px-6 pb-6 text-center">
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    Already a member? Your points are linked to your email.
                </p>
            </div>
        </div>

        <!-- Error Message -->
        <div x-show="error" class="mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
            <p class="text-sm text-red-600 dark:text-red-400" x-text="error"></p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script src="{{ url_for('loyalty_static', path='storefront/js/loyalty-enroll.js') }}"></script>
{% endblock %}