Localize order modals, add dual logos, and improve admin order tools.

Farsi business order/variation UI, light/dark logo upload on business profile, payment order steps, variation editing, super-admin site links, and checkout/auth fixes.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/OrderStepModal.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { X } from 'lucide-react'
+import { useLocale } from '@meshkee/dashboard-ui'
 import { useToast } from '../context/ToastContext'
+import { useT } from '../i18n/useT'
 import { ApiError } from '../lib/api'
 import { updateOrder, type Order } from '../services/orderService'
 import type { OrderProcessStep } from '../services/settingsService'
@@ -19,6 +21,14 @@ interface OrderStepModalProps {
 
 const ANIMATION_MS = 220
 
+function stepDisplayLabel(step: OrderProcessStep, locale: string) {
+  if (locale === 'fa') {
+    const fa = step.labelFa?.trim()
+    if (fa) return fa
+  }
+  return step.label
+}
+
 export function OrderStepModal({
   open,
   order,
@@ -26,6 +36,8 @@ export function OrderStepModal({
   onClose,
   onSaved,
 }: OrderStepModalProps) {
+  const t = useT()
+  const { locale } = useLocale()
   const { showToast } = useToast()
   const [mounted, setMounted] = useState(open)
   const [closing, setClosing] = useState(false)
@@ -70,11 +82,11 @@ export function OrderStepModal({
 
     try {
       const result = await updateOrder(order.id, { processStepId: stepId })
-      showToast(`Order ${order.orderNumber} step updated.`, 'success')
+      showToast(t('orderStep.updated', { orderNumber: order.orderNumber }), 'success')
       onSaved?.(result.order)
       onClose()
     } catch (err) {
-      setError(err instanceof ApiError ? err.message : 'Unable to update order step.')
+      setError(err instanceof ApiError ? err.message : t('orderStep.error'))
     } finally {
       setSavingStepId(null)
     }
@@ -82,9 +94,15 @@ export function OrderStepModal({
 
   if (!mounted || !order) return null
 
+  const currentStep =
+    steps.find((step) => step.id === order.processStepId) ??
+    null
   const currentLabel =
+    (locale === 'fa'
+      ? order.processStepLabelFa?.trim() || currentStep?.labelFa?.trim()
+      : null) ||
     order.processStepLabel?.trim() ||
-    steps.find((step) => step.id === order.processStepId)?.label ||
+    currentStep?.label ||
     order.processStepId
 
   return createPortal(
@@ -100,14 +118,19 @@ export function OrderStepModal({
         role="dialog"
         aria-modal="true"
         aria-labelledby="order-step-title"
+        lang={locale === 'fa' ? 'fa' : undefined}
+        dir={locale === 'fa' ? 'rtl' : undefined}
       >
         <div className={modalStyles.header}>
           <div>
             <h2 id="order-step-title" className={modalStyles.title}>
-              Change order step
+              {t('orderStep.title')}
             </h2>
             <p className={modalStyles.subtitle}>
-              {order.orderNumber} · Current: {currentLabel}
+              {t('orderStep.current', {
+                orderNumber: order.orderNumber,
+                step: currentLabel,
+              })}
             </p>
           </div>
           <button
@@ -115,7 +138,7 @@ export function OrderStepModal({
             className={modalStyles.closeBtn}
             onClick={onClose}
             disabled={Boolean(savingStepId)}
-            aria-label="Close"
+            aria-label={t('common.close')}
           >
             <X size={20} />
           </button>
@@ -128,11 +151,12 @@ export function OrderStepModal({
             </div>
           )}
 
-          <div className={styles.stepList} role="listbox" aria-label="Order process step">
+          <div className={styles.stepList} role="listbox" aria-label={t('orderStep.listAria')}>
             {steps.map((step, index) => {
               const selected = order.processStepId === step.id
               const saving = savingStepId === step.id
               const color = normalizeStepColor(step.color, defaultStepColorForId(step.id, index))
+              const label = stepDisplayLabel(step, locale)
               return (
                 <button
                   key={step.id}
@@ -147,7 +171,7 @@ export function OrderStepModal({
                   <span className={styles.stepColorDot} style={{ backgroundColor: color }} />
                   <span className={styles.stepNumber}>{index + 1}</span>
                   <span className={styles.stepLabel}>
-                    {saving ? 'Saving...' : step.label}
+                    {saving ? t('orderStep.saving') : label}
                   </span>
                 </button>
               )
@@ -155,14 +179,11 @@ export function OrderStepModal({
           </div>
 
           {!steps.length && (
-            <p className={styles.emptyText}>
-              No order steps configured. Add steps in Store settings first.
-            </p>
+            <p className={styles.emptyText}>{t('orderStep.empty')}</p>
           )}
         </div>
       </div>
-    </div>
-  ,
-  document.body,
+    </div>,
+    document.body,
   )
 }