Samir Boulahtit
694a1cd1a5
Replace hardcoded English strings across all 22 templates, 10 JS files, and 4 locale files (en/fr/de/lb) with ~300 translation keys per language. Uses server-side _() for Jinja2 templates and I18n.t() for JS toast messages and dynamic Alpine.js expressions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
312 lines
21 KiB
HTML
312 lines
21 KiB
HTML
{# app/modules/loyalty/templates/loyalty/shared/program-form.html #}
|
|
{#
|
|
Canonical loyalty program form partial.
|
|
Include with:
|
|
{% include "loyalty/shared/program-form.html" %}
|
|
|
|
Expected Jinja2 variables (set before include):
|
|
- show_delete (bool) — show Delete Program button
|
|
- show_status (bool) — show is_active toggle
|
|
- cancel_url (str) — Cancel link href (Alpine expression or literal)
|
|
|
|
Expected Alpine.js state on the parent component:
|
|
- settings.* — full program settings object
|
|
- isNewProgram — boolean
|
|
- saving — boolean
|
|
- showDeleteModal — boolean
|
|
- addReward()
|
|
- removeReward(index)
|
|
- confirmDelete()
|
|
#}
|
|
|
|
<!-- Program Type (only shown on create) -->
|
|
<div x-show="isNewProgram" class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('squares-2x2', 'inline w-5 h-5 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.program_type') }}
|
|
</h3>
|
|
<div class="grid gap-4 md:grid-cols-3">
|
|
<label class="flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
:class="settings.loyalty_type === 'points' ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 dark:border-gray-600'">
|
|
<input type="radio" name="loyalty_type" value="points" x-model="settings.loyalty_type" class="mt-1 text-purple-600 form-radio">
|
|
<div class="ml-3">
|
|
<p class="font-medium text-gray-700 dark:text-gray-300">{{ _('loyalty.loyalty.program.type.points') }}</p>
|
|
<p class="text-sm text-gray-500">{{ _('loyalty.shared.program_form.points_type_desc') }}</p>
|
|
</div>
|
|
</label>
|
|
<label class="flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
:class="settings.loyalty_type === 'stamps' ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 dark:border-gray-600'">
|
|
<input type="radio" name="loyalty_type" value="stamps" x-model="settings.loyalty_type" class="mt-1 text-purple-600 form-radio">
|
|
<div class="ml-3">
|
|
<p class="font-medium text-gray-700 dark:text-gray-300">{{ _('loyalty.loyalty.program.type.stamps') }}</p>
|
|
<p class="text-sm text-gray-500">{{ _('loyalty.shared.program_form.stamps_type_desc') }}</p>
|
|
</div>
|
|
</label>
|
|
<label class="flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
:class="settings.loyalty_type === 'hybrid' ? 'border-purple-500 bg-purple-50 dark:bg-purple-900/20' : 'border-gray-200 dark:border-gray-600'">
|
|
<input type="radio" name="loyalty_type" value="hybrid" x-model="settings.loyalty_type" class="mt-1 text-purple-600 form-radio">
|
|
<div class="ml-3">
|
|
<p class="font-medium text-gray-700 dark:text-gray-300">{{ _('loyalty.loyalty.program.type.hybrid') }}</p>
|
|
<p class="text-sm text-gray-500">{{ _('loyalty.shared.program_form.hybrid_type_desc') }}</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stamps Configuration -->
|
|
<div x-show="settings.loyalty_type === 'stamps' || settings.loyalty_type === 'hybrid'" class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('star', 'inline w-5 h-5 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.stamps_configuration') }}
|
|
</h3>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.stamps_target') }}</label>
|
|
<input type="number" min="2" max="50" x-model.number="settings.stamps_target"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
<p class="mt-1 text-xs text-gray-500">{{ _('loyalty.shared.program_form.stamps_target_help') }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.reward_description') }}</label>
|
|
<input type="text" x-model="settings.stamps_reward_description" placeholder="e.g., Free coffee" maxlength="255"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.reward_value_cents') }}</label>
|
|
<input type="number" min="0" x-model.number="settings.stamps_reward_value_cents"
|
|
placeholder="e.g., 500 for 5 EUR"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Points Configuration -->
|
|
<div x-show="settings.loyalty_type === 'points' || settings.loyalty_type === 'hybrid'" class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('currency-dollar', 'inline w-5 h-5 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.points_configuration') }}
|
|
</h3>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.points_per_eur') }}</label>
|
|
<input type="number" min="1" max="100" x-model.number="settings.points_per_euro"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
<p class="mt-1 text-xs text-gray-500" x-text="$t('loyalty.shared.program_form.eur_equals_points', {points: settings.points_per_euro || 1})"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.welcome_bonus_points') }}</label>
|
|
<input type="number" min="0" x-model.number="settings.welcome_bonus_points"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
<p class="mt-1 text-xs text-gray-500">{{ _('loyalty.shared.program_form.welcome_bonus_help') }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.minimum_redemption_points') }}</label>
|
|
<input type="number" min="1" x-model.number="settings.minimum_redemption_points"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.minimum_purchase_cents') }}</label>
|
|
<input type="number" min="0" x-model.number="settings.minimum_purchase_cents"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
<p class="mt-1 text-xs text-gray-500">{{ _('loyalty.shared.program_form.minimum_purchase_help') }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.points_expiration_days') }}</label>
|
|
<input type="number" min="0" x-model.number="settings.points_expiration_days"
|
|
placeholder="0 = never expire"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
<p class="mt-1 text-xs text-gray-500">{{ _('loyalty.shared.program_form.points_expiration_help') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Redemption Rewards (Points) -->
|
|
<div x-show="settings.loyalty_type === 'points' || settings.loyalty_type === 'hybrid'" class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('gift', 'inline w-5 h-5 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.redemption_rewards') }}
|
|
</h3>
|
|
<button type="button" @click="addReward()"
|
|
class="flex items-center px-3 py-1 text-sm text-purple-600 hover:text-purple-700">
|
|
<span x-html="$icon('plus', 'w-4 h-4 mr-1')"></span>
|
|
{{ _('loyalty.shared.program_form.add_reward') }}
|
|
</button>
|
|
</div>
|
|
<div class="space-y-4">
|
|
<template x-if="settings.points_rewards.length === 0">
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">{{ _('loyalty.shared.program_form.no_rewards_configured') }}</p>
|
|
</template>
|
|
<template x-for="(reward, index) in settings.points_rewards" :key="index">
|
|
<div class="flex items-start gap-4 p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<div class="flex-1 grid gap-4 md:grid-cols-3">
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">{{ _('loyalty.shared.program_form.reward_name') }}</label>
|
|
<input type="text" x-model="reward.name" placeholder="e.g., EUR5 off"
|
|
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">{{ _('loyalty.shared.program_form.points_required') }}</label>
|
|
<input type="number" min="1" x-model.number="reward.points_required"
|
|
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs text-gray-500 mb-1">{{ _('loyalty.shared.program_form.description') }}</label>
|
|
<input type="text" x-model="reward.description" placeholder="Optional description"
|
|
class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
</div>
|
|
<button type="button" @click="removeReward(index)"
|
|
class="text-red-500 hover:text-red-700 p-2">
|
|
<span x-html="$icon('trash', 'w-5 h-5')"></span>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Anti-Fraud Settings -->
|
|
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('shield-check', 'inline w-5 h-5 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.anti_fraud_settings') }}
|
|
</h3>
|
|
<div class="grid gap-6 md:grid-cols-3">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.cooldown_minutes') }}</label>
|
|
<input type="number" min="0" max="1440" x-model.number="settings.cooldown_minutes"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
<p class="mt-1 text-xs text-gray-500">{{ _('loyalty.shared.program_form.cooldown_help') }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.max_daily_stamps') }}</label>
|
|
<input type="number" min="1" max="50" x-model.number="settings.max_daily_stamps"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
<p class="mt-1 text-xs text-gray-500">{{ _('loyalty.shared.program_form.max_daily_stamps_help') }}</p>
|
|
</div>
|
|
<div class="flex items-end">
|
|
<label class="flex items-center gap-2 cursor-pointer">
|
|
<input type="checkbox" x-model="settings.require_staff_pin"
|
|
class="w-4 h-4 text-purple-600 border-gray-300 rounded focus:ring-purple-500">
|
|
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ _('loyalty.shared.program_form.require_staff_pin') }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Branding -->
|
|
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('paint-brush', 'inline w-5 h-5 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.branding') }}
|
|
</h3>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.card_name') }}</label>
|
|
<input type="text" x-model="settings.card_name" placeholder="e.g., VIP Rewards" maxlength="100"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.primary_color') }}</label>
|
|
<div class="flex items-center gap-3">
|
|
<input type="color" x-model="settings.card_color"
|
|
class="w-12 h-10 rounded cursor-pointer">
|
|
<input type="text" x-model="settings.card_color" pattern="^#[0-9A-Fa-f]{6}$" maxlength="7"
|
|
class="flex-1 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.secondary_color') }}</label>
|
|
<div class="flex items-center gap-3">
|
|
<input type="color" x-model="settings.card_secondary_color"
|
|
class="w-12 h-10 rounded cursor-pointer">
|
|
<input type="text" x-model="settings.card_secondary_color" pattern="^#[0-9A-Fa-f]{6}$" maxlength="7"
|
|
placeholder="#FFFFFF"
|
|
class="flex-1 px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.logo_url') }} <span class="text-red-500">*</span></label>
|
|
<input type="url" x-model="settings.logo_url" maxlength="500" placeholder="https://..." required
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ _('loyalty.shared.program_form.logo_url_help') }}</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.hero_image_url') }}</label>
|
|
<input type="url" x-model="settings.hero_image_url" maxlength="500" placeholder="https://..."
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terms -->
|
|
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('document-text', 'inline w-5 h-5 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.terms_privacy') }}
|
|
</h3>
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.terms_conditions') }}</label>
|
|
<textarea x-model="settings.terms_text" rows="3"
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300"></textarea>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ _('loyalty.shared.program_form.privacy_policy_url') }}</label>
|
|
<input type="url" x-model="settings.privacy_url" maxlength="500" placeholder="https://..."
|
|
class="w-full px-4 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Program Status -->
|
|
{% if show_status %}
|
|
<div class="px-4 py-5 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
|
|
<h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
|
|
<span x-html="$icon('power', 'inline w-5 h-5 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.program_status') }}
|
|
</h3>
|
|
<label class="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-600 rounded-lg">
|
|
<div>
|
|
<p class="font-medium text-gray-700 dark:text-gray-300">{{ _('loyalty.shared.program_form.program_active') }}</p>
|
|
<p class="text-sm text-gray-500">{{ _('loyalty.shared.program_form.program_active_help') }}</p>
|
|
</div>
|
|
<div class="relative">
|
|
<input type="checkbox" x-model="settings.is_active" class="sr-only peer">
|
|
<div @click="settings.is_active = !settings.is_active"
|
|
class="w-11 h-6 bg-gray-200 rounded-full cursor-pointer peer-checked:bg-purple-600 dark:bg-gray-700"
|
|
:class="settings.is_active ? 'bg-purple-600' : ''">
|
|
<div class="absolute top-[2px] left-[2px] bg-white w-5 h-5 rounded-full transition-transform"
|
|
:class="settings.is_active ? 'translate-x-5' : ''"></div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Actions -->
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
{% if show_delete %}
|
|
<template x-if="!isNewProgram">
|
|
<button type="button" @click="confirmDelete()"
|
|
class="flex items-center px-4 py-2 text-sm font-medium text-red-600 border border-red-300 rounded-lg hover:bg-red-50 dark:text-red-400 dark:border-red-700 dark:hover:bg-red-900/20">
|
|
<span x-html="$icon('trash', 'w-4 h-4 mr-2')"></span>
|
|
{{ _('loyalty.shared.program_form.delete_program') }}
|
|
</button>
|
|
</template>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<a href="{{ cancel_url }}"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700">
|
|
{{ _('loyalty.common.cancel') }}
|
|
</a>
|
|
<button type="submit" :disabled="saving"
|
|
class="flex items-center px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 disabled:opacity-50">
|
|
<span x-show="saving" x-html="$icon('spinner', 'w-4 h-4 mr-2 animate-spin')"></span>
|
|
<span x-text="saving ? $t('loyalty.common.saving') : (isNewProgram ? $t('loyalty.shared.program_form.create_program') : $t('loyalty.shared.program_form.save_changes'))"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|