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

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

{% block title %}Welcome to Rewards! - {{ store.name }}{% endblock %}

{% block alpine_data %}customerLoyaltyEnrollSuccess(){% 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 text-center">
        <!-- Success Icon -->
        <div class="w-20 h-20 mx-auto mb-6 rounded-full flex items-center justify-center"
             style="background-color: var(--color-primary); opacity: 0.1">
            <div class="w-20 h-20 rounded-full flex items-center justify-center" style="background-color: var(--color-primary)">
                <span x-html="$icon('check', 'w-10 h-10 text-white')"></span>
            </div>
        </div>

        <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Welcome!</h1>
        <p class="text-gray-600 dark:text-gray-400 mb-8">You're now a member of our rewards program.</p>

        <!-- Card Number Display -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
            <p class="text-sm text-gray-500 dark:text-gray-400 mb-2">Your Card Number</p>
            <p class="text-2xl font-mono font-bold text-gray-900 dark:text-white">{{ enrolled_card_number or 'Loading...' }}</p>

            <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Save your card to your phone for easy access:
                </p>
                <div class="space-y-2">
                    <button class="w-full flex items-center justify-center px-4 py-3 bg-black text-white rounded-lg hover:bg-gray-800 transition-colors">
                        <span x-html="$icon('device-mobile', 'w-5 h-5 mr-2')"></span>
                        Add to Apple Wallet
                    </button>
                    <button class="w-full flex items-center justify-center px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                        <span x-html="$icon('device-mobile', 'w-5 h-5 mr-2')"></span>
                        Add to Google Wallet
                    </button>
                </div>
            </div>
        </div>

        <!-- Next Steps -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 text-left mb-8">
            <h2 class="font-semibold text-gray-900 dark:text-white mb-4">What's Next?</h2>
            <ul class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
                <li class="flex items-start">
                    <span x-html="$icon('check-circle', 'w-5 h-5 mr-2 text-green-500 flex-shrink-0')"></span>
                    <span>Show your card number when making purchases to earn points</span>
                </li>
                <li class="flex items-start">
                    <span x-html="$icon('check-circle', 'w-5 h-5 mr-2 text-green-500 flex-shrink-0')"></span>
                    <span>Check your balance online or in the app</span>
                </li>
                <li class="flex items-start">
                    <span x-html="$icon('check-circle', 'w-5 h-5 mr-2 text-green-500 flex-shrink-0')"></span>
                    <span>Redeem points for rewards at any of our locations</span>
                </li>
            </ul>
        </div>

        <!-- Actions -->
        <div class="space-y-3">
            <a href="{{ base_url }}shop/account/loyalty"
               class="block w-full py-3 px-4 text-white font-semibold rounded-lg transition-colors text-center"
               style="background-color: var(--color-primary)">
                View My Loyalty Dashboard
            </a>
            <a href="{{ base_url }}shop"
               class="block w-full py-3 px-4 text-gray-700 dark:text-gray-300 font-medium rounded-lg border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors text-center">
                Continue Shopping
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function customerLoyaltyEnrollSuccess() {
    return {
        ...data()
    };
}
</script>
{% endblock %}