sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add multilingual support to vendor onboarding workflow

Browse Source 
- Add language selector with English, French, and German translations
- Fix API key help text to reference Letzshop Support team
- Update shop slug input with URL prefix and clearer example
- Fix step validation bug by adding db.commit() to all POST endpoints
- Translate all form labels, buttons, and messages

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-28 08:37:47 +01:00
parent b147c925d9
commit 4e6e6a27f9
3 changed files with 376 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/api/v1/vendor/onboarding.py vendored
View File

@@ -92,7 +92,7 @@ def save_company_profile(
Updates vendor and company records with provided data.
"""
service = OnboardingService(db)
return service.complete_company_profile(
result = service.complete_company_profile(
vendor_id=current_user.token_vendor_id,
company_name=request.company_name,
brand_name=request.brand_name,
@@ -105,6 +105,8 @@ def save_company_profile(
default_language=request.default_language,
dashboard_language=request.dashboard_language,
)
db.commit() # Commit at API level for transaction control
return result
# =============================================================================
@@ -142,12 +144,14 @@ def save_letzshop_api(
Tests connection first, only saves if successful.
"""
service = OnboardingService(db)
return service.complete_letzshop_api(
result = service.complete_letzshop_api(
vendor_id=current_user.token_vendor_id,
api_key=request.api_key,
shop_slug=request.shop_slug,
letzshop_vendor_id=request.vendor_id,
)
db.commit() # Commit at API level for transaction control
return result
# =============================================================================
@@ -181,7 +185,7 @@ def save_product_import_config(
At least one CSV URL must be provided.
"""
service = OnboardingService(db)
return service.complete_product_import(
result = service.complete_product_import(
vendor_id=current_user.token_vendor_id,
csv_url_fr=request.csv_url_fr,
csv_url_en=request.csv_url_en,
@@ -190,6 +194,8 @@ def save_product_import_config(
delivery_method=request.delivery_method,
preorder_days=request.preorder_days,
)
db.commit() # Commit at API level for transaction control
return result
# =============================================================================
@@ -209,12 +215,14 @@ def trigger_order_sync(
Creates a background job that imports orders from Letzshop.
"""
service = OnboardingService(db)
return service.trigger_order_sync(
result = service.trigger_order_sync(
vendor_id=current_user.token_vendor_id,
user_id=current_user.id,
days_back=request.days_back,
include_products=request.include_products,
)
db.commit() # Commit at API level for transaction control
return result
@router.get(
@@ -251,7 +259,9 @@ def complete_order_sync(
This also marks the entire onboarding as complete.
"""
service = OnboardingService(db)
return service.complete_order_sync(
result = service.complete_order_sync(
vendor_id=current_user.token_vendor_id,
job_id=request.job_id,
)
db.commit() # Commit at API level for transaction control
return result

163
app/templates/vendor/onboarding.html vendored
View File

@@ -23,8 +23,33 @@
</div>
<span class="text-xl font-semibold text-gray-800 dark:text-white">Wizamart</span>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
<span x-text="completedSteps"></span> of 4 steps completed
<div class="flex items-center space-x-4">
<!-- 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" 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>
<!-- Progress -->
<div class="text-sm text-gray-600 dark:text-gray-400">
<span x-text="completedSteps"></span> / 4
</div>
</div>
</div>
</div>
@@ -74,15 +99,14 @@
<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">Loading your setup...</p>
<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">
Retry
<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>
@@ -92,77 +116,75 @@
<!-- 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">Company Profile</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Let's set up your company information. This will be used for invoices and customer communication.
</p>
<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">Company Name</label>
<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">Brand Name</label>
<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">Description</label>
<textarea x-model="formData.description" rows="3"
<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">Contact Email</label>
<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">Contact Phone</label>
<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">Website</label>
<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">Tax Number (VAT)</label>
<input type="text" x-model="formData.tax_number"
<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">Business Address</label>
<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">Default Language</label>
<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">French</option>
<option value="fr">Français</option>
<option value="en">English</option>
<option value="de">German</option>
<option value="lb">Luxembourgish</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">Dashboard Language</label>
<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">French</option>
<option value="fr">Français</option>
<option value="en">English</option>
<option value="de">German</option>
<option value="lb">Luxembourgish</option>
<option value="de">Deutsch</option>
<option value="lb">Lëtzebuergesch</option>
</select>
</div>
</div>
@@ -172,53 +194,52 @@
<!-- 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">Letzshop API Configuration</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Connect your Letzshop marketplace account to sync orders automatically.
</p>
<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">Letzshop API Key</label>
<input type="password" x-model="formData.api_key" placeholder="Enter your API key"
<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">
Get your API key from Letzshop Vendor Portal > Settings > API Access
<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">Shop Slug</label>
<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/
letzshop.lu/.../vendors/
</span>
<input type="text" x-model="formData.shop_slug" placeholder="your-shop"
<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">Test Connection</span>
<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>
Testing...
<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>
Connection successful
<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 || 'Connection failed'"></span>
<span x-text="connectionError || t('step2.connection_failed')"></span>
</span>
</div>
</div>
@@ -227,24 +248,23 @@
<!-- 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">Product Import Configuration</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Set up your product CSV feed URLs for each language. At least one URL is required.
</p>
<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">French CSV URL</label>
<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">English CSV URL (optional)</label>
<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">German CSV URL (optional)</label>
<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>
@@ -252,7 +272,7 @@
<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">Default Tax Rate</label>
<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>
@@ -263,18 +283,19 @@
</select>
</div>
<div>
<label class="block text-sm text-gray-600 dark:text-gray-400">Delivery Method</label>
<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">Package Delivery</option>
<option value="self_collect">Self Collect</option>
<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">Pre-order Days</label>
<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>
@@ -284,28 +305,26 @@
<!-- 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">Historical Order Import</h2>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
Import your existing orders from Letzshop to get started with a complete order history.
</p>
<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">Import orders from the last</label>
<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 days</option>
<option value="60">60 days</option>
<option value="90">90 days</option>
<option value="180">6 months</option>
<option value="365">1 year</option>
<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">
Start Import
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>
@@ -322,7 +341,7 @@
</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> orders imported
<span x-text="ordersImported"></span> <span x-text="t('step4.orders_imported')"></span>
</p>
</div>
@@ -333,9 +352,9 @@
<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">Import Complete!</p>
<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> orders have been imported.
<span x-text="ordersImported"></span> <span x-text="t('step4.orders_imported')"></span>.
</p>
</div>
</div>
@@ -345,8 +364,8 @@
<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">
Previous
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>
@@ -354,14 +373,14 @@
@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 ? 'Finish Setup' : 'Save & Continue'"></span>
<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>
Saving...
<span x-text="t('buttons.saving')"></span>
</span>
</button>
</div>