Samir Boulahtit
ff2f475ae4
- Remove redundant 1/4 progress counter from header - Make step indicators mobile-friendly (smaller circles, hidden labels) - Add CSV URL help text pointing to Letzshop Admin > API > Export Products - Fix AttributeError in order sync progress (use correct model attributes) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
394 lines
30 KiB
HTML
394 lines
30 KiB
HTML
{# app/templates/vendor/onboarding.html #}
|
|
<!DOCTYPE html>
|
|
<html :class="{ 'dark': dark }" x-data="vendorOnboarding()" lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Welcome to Wizamart - Setup Your Account</title>
|
|
<link href="/static/shared/fonts/inter.css" rel="stylesheet" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="{{ url_for('static', path='vendor/css/tailwind.output.css') }}" />
|
|
<style>
|
|
[x-cloak] { display: none !important; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 dark:bg-gray-900">
|
|
<div class="min-h-screen p-6" x-cloak>
|
|
<!-- Header -->
|
|
<div class="max-w-4xl mx-auto mb-8">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-10 h-10 rounded-lg bg-purple-600 flex items-center justify-center">
|
|
<span class="text-white font-bold text-xl">W</span>
|
|
</div>
|
|
<span class="text-xl font-semibold text-gray-800 dark:text-white">Wizamart</span>
|
|
</div>
|
|
<!-- Language Selector -->
|
|
<div class="relative" x-data="{ open: false }">
|
|
<button @click="open = !open"
|
|
class="flex items-center space-x-2 px-3 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors">
|
|
<span x-text="languageFlags[lang]"></span>
|
|
<span class="text-sm text-gray-700 dark:text-gray-300 hidden sm:inline" x-text="languageNames[lang]"></span>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<div x-show="open" @click.away="open = false" x-cloak
|
|
class="absolute right-0 mt-2 w-40 bg-white dark:bg-gray-700 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-50">
|
|
<template x-for="langCode in availableLanguages" :key="langCode">
|
|
<button @click="setLang(langCode); open = false"
|
|
class="w-full flex items-center space-x-2 px-4 py-2 text-left hover:bg-gray-50 dark:hover:bg-gray-600 first:rounded-t-lg last:rounded-b-lg"
|
|
:class="{ 'bg-purple-50 dark:bg-purple-900/20': lang === langCode }">
|
|
<span x-text="languageFlags[langCode]"></span>
|
|
<span class="text-sm text-gray-700 dark:text-gray-300" x-text="languageNames[langCode]"></span>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Indicator -->
|
|
<div class="max-w-4xl mx-auto mb-8 px-2 sm:px-0">
|
|
<div class="flex items-center justify-between">
|
|
<template x-for="(step, index) in steps" :key="step.id">
|
|
<div class="flex items-center" :class="{ 'flex-1': index < steps.length - 1 }">
|
|
<!-- Step Circle -->
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-xs sm:text-sm font-semibold transition-all duration-200"
|
|
:class="{
|
|
'bg-purple-600 text-white': isStepCompleted(step.id) || currentStep === step.id,
|
|
'bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400': !isStepCompleted(step.id) && currentStep !== step.id
|
|
}">
|
|
<template x-if="isStepCompleted(step.id)">
|
|
<svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
</template>
|
|
<template x-if="!isStepCompleted(step.id)">
|
|
<span x-text="index + 1"></span>
|
|
</template>
|
|
</div>
|
|
<span class="mt-2 text-xs font-medium text-gray-600 dark:text-gray-400 text-center w-16 sm:w-24 hidden sm:block"
|
|
x-text="step.title"></span>
|
|
</div>
|
|
<!-- Connector Line -->
|
|
<template x-if="index < steps.length - 1">
|
|
<div class="flex-1 h-1 mx-1 sm:mx-4 rounded"
|
|
:class="{
|
|
'bg-purple-600': isStepCompleted(step.id),
|
|
'bg-gray-200 dark:bg-gray-700': !isStepCompleted(step.id)
|
|
}"></div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content Card -->
|
|
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
|
|
<!-- Loading State -->
|
|
<div x-show="loading" class="p-12 text-center">
|
|
<svg class="inline w-8 h-8 animate-spin text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<p class="mt-4 text-gray-600 dark:text-gray-400" x-text="t('loading')"></p>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div x-show="error && !loading" class="p-6">
|
|
<div class="bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 rounded-lg p-4 text-center">
|
|
<p class="text-red-600 dark:text-red-400" x-text="error"></p>
|
|
<button @click="loadStatus()" class="mt-4 px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700" x-text="t('buttons.retry')">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step Content -->
|
|
<div x-show="!loading && !error">
|
|
<!-- Step 1: Company Profile -->
|
|
<div x-show="currentStep === 'company_profile'" x-transition>
|
|
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-white" x-text="t('step1.title')"></h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="t('step1.description')"></p>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.company_name')"></label>
|
|
<input type="text" x-model="formData.company_name"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.brand_name')"></label>
|
|
<input type="text" x-model="formData.brand_name"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.description_label')"></label>
|
|
<textarea x-model="formData.description" rows="3" :placeholder="t('step1.description_placeholder')"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500"></textarea>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.contact_email')"></label>
|
|
<input type="email" x-model="formData.contact_email"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.contact_phone')"></label>
|
|
<input type="tel" x-model="formData.contact_phone"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.website')"></label>
|
|
<input type="url" x-model="formData.website"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.tax_number')"></label>
|
|
<input type="text" x-model="formData.tax_number" :placeholder="t('step1.tax_number_placeholder')"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.business_address')"></label>
|
|
<textarea x-model="formData.business_address" rows="2"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500"></textarea>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.default_language')"></label>
|
|
<select x-model="formData.default_language"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
|
|
<option value="fr">Français</option>
|
|
<option value="en">English</option>
|
|
<option value="de">Deutsch</option>
|
|
<option value="lb">Lëtzebuergesch</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step1.dashboard_language')"></label>
|
|
<select x-model="formData.dashboard_language"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
|
|
<option value="fr">Français</option>
|
|
<option value="en">English</option>
|
|
<option value="de">Deutsch</option>
|
|
<option value="lb">Lëtzebuergesch</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Letzshop API -->
|
|
<div x-show="currentStep === 'letzshop_api'" x-transition>
|
|
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-white" x-text="t('step2.title')"></h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="t('step2.description')"></p>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step2.api_key')"></label>
|
|
<input type="password" x-model="formData.api_key" :placeholder="t('step2.api_key_placeholder')"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
<span x-text="t('step2.api_key_help')"></span> (<a href="mailto:support@letzshop.lu" class="text-purple-600 hover:underline">support@letzshop.lu</a>)
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step2.shop_slug')"></label>
|
|
<div class="mt-1 flex rounded-md shadow-sm">
|
|
<span class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-500 dark:text-gray-400 text-sm">
|
|
letzshop.lu/.../vendors/
|
|
</span>
|
|
<input type="text" x-model="formData.shop_slug" placeholder="your-shop-name"
|
|
class="flex-1 block w-full rounded-none rounded-r-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="t('step2.shop_slug_help')"></p>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button @click="testLetzshopApi()" :disabled="saving || !formData.api_key || !formData.shop_slug"
|
|
class="px-4 py-2 text-sm font-medium text-purple-600 bg-purple-100 rounded-lg hover:bg-purple-200 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<span x-show="!testing" x-text="t('step2.test_connection')"></span>
|
|
<span x-show="testing" class="flex items-center">
|
|
<svg class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span x-text="t('step2.testing')"></span>
|
|
</span>
|
|
</button>
|
|
<span x-show="connectionStatus === 'success'" class="text-green-600 dark:text-green-400 text-sm flex items-center">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
<span x-text="t('step2.connection_success')"></span>
|
|
</span>
|
|
<span x-show="connectionStatus === 'failed'" class="text-red-600 dark:text-red-400 text-sm flex items-center">
|
|
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
<span x-text="connectionError || t('step2.connection_failed')"></span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Product Import -->
|
|
<div x-show="currentStep === 'product_import'" x-transition>
|
|
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-white" x-text="t('step3.title')"></h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="t('step3.description')"></p>
|
|
</div>
|
|
<div class="p-6 space-y-6">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step3.csv_url_fr')"></label>
|
|
<input type="url" x-model="formData.csv_url_fr" placeholder="https://..."
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="t('step3.csv_url_help')"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step3.csv_url_en') + ' (optional)'"></label>
|
|
<input type="url" x-model="formData.csv_url_en" placeholder="https://..."
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" x-text="t('step3.csv_url_de') + ' (optional)'"></label>
|
|
<input type="url" x-model="formData.csv_url_de" placeholder="https://..."
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
</div>
|
|
<div class="border-t border-gray-200 dark:border-gray-700 pt-6">
|
|
<h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-4">Letzshop Feed Settings</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div>
|
|
<label class="block text-sm text-gray-600 dark:text-gray-400" x-text="t('step3.default_tax_rate')"></label>
|
|
<select x-model="formData.default_tax_rate"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
|
|
<option value="17">17% (Standard)</option>
|
|
<option value="14">14% (Intermediate)</option>
|
|
<option value="8">8% (Reduced)</option>
|
|
<option value="3">3% (Super-reduced)</option>
|
|
<option value="0">0% (Exempt)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-600 dark:text-gray-400" x-text="t('step3.delivery_method')"></label>
|
|
<select x-model="formData.delivery_method"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
|
|
<option value="package_delivery" x-text="t('step3.delivery_package')"></option>
|
|
<option value="self_collect" x-text="t('step3.delivery_pickup')"></option>
|
|
<option value="nationwide">Nationwide</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm text-gray-600 dark:text-gray-400" x-text="t('step3.preorder_days')"></label>
|
|
<input type="number" x-model="formData.preorder_days" min="0" max="30"
|
|
class="mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500" />
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400" x-text="t('step3.preorder_days_help')"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 4: Order Sync -->
|
|
<div x-show="currentStep === 'order_sync'" x-transition>
|
|
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-white" x-text="t('step4.title')"></h2>
|
|
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400" x-text="t('step4.description')"></p>
|
|
</div>
|
|
<div class="p-6">
|
|
<!-- Before Sync -->
|
|
<div x-show="!syncJobId">
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" x-text="t('step4.days_back')"></label>
|
|
<select x-model="formData.days_back"
|
|
class="block w-48 rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white shadow-sm focus:border-purple-500 focus:ring-purple-500">
|
|
<option value="30">30 <span x-text="t('step4.days')"></span></option>
|
|
<option value="60">60 <span x-text="t('step4.days')"></span></option>
|
|
<option value="90">90 <span x-text="t('step4.days')"></span></option>
|
|
<option value="180">180 <span x-text="t('step4.days')"></span></option>
|
|
<option value="365">365 <span x-text="t('step4.days')"></span></option>
|
|
</select>
|
|
</div>
|
|
<button @click="startOrderSync()" :disabled="saving"
|
|
class="px-6 py-3 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50"
|
|
x-text="saving ? t('step4.importing') : t('step4.start_import')">
|
|
</button>
|
|
</div>
|
|
|
|
<!-- During Sync -->
|
|
<div x-show="syncJobId && !syncComplete" class="text-center py-8">
|
|
<div class="mb-4">
|
|
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-4">
|
|
<div class="bg-purple-600 h-4 rounded-full transition-all duration-500"
|
|
:style="{ width: syncProgress + '%' }"></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-lg font-medium text-gray-800 dark:text-white">
|
|
<span x-text="syncProgress"></span>% Complete
|
|
</p>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1" x-text="syncPhase"></p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
|
|
<span x-text="ordersImported"></span> <span x-text="t('step4.orders_imported')"></span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- After Sync -->
|
|
<div x-show="syncComplete" class="text-center py-8">
|
|
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
|
|
<svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
</div>
|
|
<p class="text-lg font-medium text-gray-800 dark:text-white" x-text="t('step4.import_complete')"></p>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
<span x-text="ordersImported"></span> <span x-text="t('step4.orders_imported')"></span>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Actions -->
|
|
<div class="p-6 bg-gray-50 dark:bg-gray-700/50 border-t border-gray-200 dark:border-gray-700 flex justify-between">
|
|
<button x-show="currentStepIndex > 0 && !syncJobId"
|
|
@click="goToPreviousStep()"
|
|
class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
x-text="t('buttons.back')">
|
|
</button>
|
|
<div x-show="currentStepIndex === 0"></div>
|
|
|
|
<button x-show="currentStep !== 'order_sync' || syncComplete"
|
|
@click="saveAndContinue()" :disabled="saving"
|
|
class="px-6 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 focus:outline-none disabled:opacity-50">
|
|
<span x-show="!saving">
|
|
<span x-text="currentStep === 'order_sync' && syncComplete ? t('buttons.complete') : t('buttons.save_continue')"></span>
|
|
</span>
|
|
<span x-show="saving" class="flex items-center">
|
|
<svg class="w-4 h-4 mr-2 animate-spin" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
<span x-text="t('buttons.saving')"></span>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script src="{{ url_for('static', path='shared/js/log-config.js') }}"></script>
|
|
<script src="{{ url_for('static', path='shared/js/icons.js') }}"></script>
|
|
<script src="{{ url_for('static', path='shared/js/utils.js') }}"></script>
|
|
<script src="{{ url_for('static', path='shared/js/api-client.js') }}"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
|
|
<script src="{{ url_for('static', path='vendor/js/onboarding.js') }}"></script>
|
|
</body>
|
|
</html>
|