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/super-admin/src/components/BusinessActionsOverflowMenu.tsx

@@ -1,6 +1,15 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import { Eraser, MoreHorizontal, Trash2, Users } from 'lucide-react'
+import {
+  Building2,
+  Eraser,
+  ExternalLink,
+  Globe,
+  MoreHorizontal,
+  Trash2,
+  UserRound,
+  Users,
+} from 'lucide-react'
 import { fitFixedPopover } from '../utils/fitFixedPopover'
 import styles from './BusinessActionsOverflowMenu.module.css'
 
@@ -11,13 +20,32 @@ type PopoverPosition = {
 
 interface BusinessActionsOverflowMenuProps {
   businessName: string
+  /** Primary apex domain host when set — enables website / dashboard links. */
+  host?: string | null
   onAllUsers: () => void
   onWipeData: () => void
   onRemove: () => void
 }
 
+function apexHost(host: string) {
+  return host.trim().replace(/^www\./i, '')
+}
+
+function siteProtocol(host: string) {
+  return /\.local$/i.test(host) ? 'http:' : 'https:'
+}
+
+function siteUrl(host: string) {
+  return `${siteProtocol(host)}//${host}`
+}
+
+function openHost(host: string) {
+  window.open(siteUrl(host), '_blank', 'noopener,noreferrer')
+}
+
 export function BusinessActionsOverflowMenu({
   businessName,
+  host,
   onAllUsers,
   onWipeData,
   onRemove,
@@ -28,13 +56,40 @@ export function BusinessActionsOverflowMenu({
   const popoverRef = useRef<HTMLDivElement>(null)
   const triggerRef = useRef<HTMLButtonElement>(null)
 
+  const apex = host?.trim() ? apexHost(host) : null
+  const linkItems = apex
+    ? ([
+        {
+          key: 'website',
+          label: 'باز کردن وب‌سایت',
+          detail: apex,
+          icon: Globe,
+          onClick: () => openHost(apex),
+        },
+        {
+          key: 'business',
+          label: 'داشبورد کسب‌وکار',
+          detail: `business.${apex}`,
+          icon: Building2,
+          onClick: () => openHost(`business.${apex}`),
+        },
+        {
+          key: 'customer',
+          label: 'داشبورد مشتری',
+          detail: `customer.${apex}`,
+          icon: UserRound,
+          onClick: () => openHost(`customer.${apex}`),
+        },
+      ] as const)
+    : []
+
   function updatePopoverPosition() {
     const rect = triggerRef.current?.getBoundingClientRect()
     if (!rect) return
 
     const size = popoverRef.current
       ? { width: popoverRef.current.offsetWidth, height: popoverRef.current.offsetHeight }
-      : { width: 220, height: 160 }
+      : { width: 220, height: linkItems.length ? 280 : 160 }
 
     setPopoverPos(fitFixedPopover(rect, size, 'end'))
   }
@@ -96,8 +151,8 @@ export function BusinessActionsOverflowMenu({
           e.stopPropagation()
           toggleOpen()
         }}
-        title="More actions"
-        aria-label={`More actions for ${businessName}`}
+        title="عملیات بیشتر"
+        aria-label={`عملیات بیشتر برای ${businessName}`}
         aria-haspopup="menu"
         aria-expanded={open}
       >
@@ -111,12 +166,36 @@ export function BusinessActionsOverflowMenu({
             ref={popoverRef}
             className={styles.menu}
             role="menu"
-            aria-label={`More actions for ${businessName}`}
+            aria-label={`عملیات بیشتر برای ${businessName}`}
+            lang="fa"
+            dir="rtl"
             style={{
               top: popoverPos.top,
               left: popoverPos.left,
             }}
           >
+            {linkItems.map(({ key, label, detail, icon: Icon, onClick }) => (
+              <button
+                key={key}
+                type="button"
+                className={styles.item}
+                role="menuitem"
+                onClick={() => {
+                  setOpen(false)
+                  onClick()
+                }}
+              >
+                <Icon size={16} />
+                <span className={styles.itemText}>
+                  <span>{label}</span>
+                  <span className={styles.itemDetail} dir="ltr">
+                    {detail}
+                    <ExternalLink size={12} aria-hidden="true" />
+                  </span>
+                </span>
+              </button>
+            ))}
+            {linkItems.length > 0 && <div className={styles.menuDivider} role="separator" />}
             <button
               type="button"
               className={styles.item}
@@ -127,7 +206,7 @@ export function BusinessActionsOverflowMenu({
               }}
             >
               <Users size={16} />
-              <span>All users</span>
+              <span>همه کاربران</span>
             </button>
             <button
               type="button"
@@ -141,7 +220,7 @@ export function BusinessActionsOverflowMenu({
               }}
             >
               <Eraser size={16} />
-              <span>Wipe data</span>
+              <span>پاک‌سازی داده</span>
             </button>
             <button
               type="button"
@@ -153,7 +232,7 @@ export function BusinessActionsOverflowMenu({
               }}
             >
               <Trash2 size={16} />
-              <span>Remove</span>
+              <span>حذف</span>
             </button>
           </div>,
           document.body,

apps/super-admin/src/components/DomainLinksOverflowMenu.tsx

@@ -109,21 +109,21 @@ export function DomainLinksOverflowMenu({ host, onRemove }: DomainLinksOverflowM
   const items = [
     {
       key: 'website',
-      label: 'Open website',
+      label: 'باز کردن وب‌سایت',
       detail: websiteHost,
       icon: Globe,
       onClick: () => openHost(websiteHost),
     },
     {
       key: 'business',
-      label: 'Business dashboard',
+      label: 'داشبورد کسب‌وکار',
       detail: businessHost,
       icon: Building2,
       onClick: () => openHost(businessHost),
     },
     {
       key: 'customer',
-      label: 'Customer dashboard',
+      label: 'داشبورد مشتری',
       detail: customerHost,
       icon: UserRound,
       onClick: () => openHost(customerHost),
@@ -141,8 +141,8 @@ export function DomainLinksOverflowMenu({ host, onRemove }: DomainLinksOverflowM
           e.stopPropagation()
           toggleOpen()
         }}
-        title="More actions"
-        aria-label={`More actions for ${apex}`}
+        title="عملیات بیشتر"
+        aria-label={`عملیات بیشتر برای ${apex}`}
         aria-haspopup="menu"
         aria-expanded={open}
       >
@@ -156,7 +156,9 @@ export function DomainLinksOverflowMenu({ host, onRemove }: DomainLinksOverflowM
             ref={popoverRef}
             className={styles.menu}
             role="menu"
-            aria-label={`More actions for ${apex}`}
+            aria-label={`عملیات بیشتر برای ${apex}`}
+            lang="fa"
+            dir="rtl"
             style={{
               top: popoverPos.top,
               left: popoverPos.left,
@@ -176,7 +178,7 @@ export function DomainLinksOverflowMenu({ host, onRemove }: DomainLinksOverflowM
                 <Icon size={16} />
                 <span className={styles.itemText}>
                   <span>{label}</span>
-                  <span className={styles.itemDetail}>
+                  <span className={styles.itemDetail} dir="ltr">
                     {detail}
                     <ExternalLink size={12} aria-hidden="true" />
                   </span>
@@ -194,7 +196,7 @@ export function DomainLinksOverflowMenu({ host, onRemove }: DomainLinksOverflowM
               }}
             >
               <Trash2 size={16} />
-              <span>Remove</span>
+              <span>حذف</span>
             </button>
           </div>,
           document.body,

apps/super-admin/src/pages/BusinessesPage.tsx

@@ -1347,6 +1347,7 @@ export function BusinessesPage() {
                           </button>
                           <BusinessActionsOverflowMenu
                             businessName={b.name}
+                            host={b.domain}
                             onAllUsers={() => goToBusinessUsers(b, 'all')}
                             onWipeData={() => openPurge(b)}
                             onRemove={() => setRemoveTarget(b)}

apps/super-admin/src/pages/WebsitesPage.module.css

@@ -65,3 +65,69 @@
   align-items: center;
   gap: 10px;
 }
+
+.deployErrorTip {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 0 0 14px;
+  padding: 14px 16px;
+  border-radius: var(--radius-md, 12px);
+  background: rgba(239, 68, 68, 0.08);
+  border: 1px solid rgba(239, 68, 68, 0.28);
+  color: #991b1b;
+}
+
+.deployErrorIcon {
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: #b91c1c;
+}
+
+.deployErrorBody {
+  flex: 1;
+  min-width: 0;
+}
+
+.deployErrorTitle {
+  margin: 0 0 6px;
+  font-size: 13px;
+  font-weight: 700;
+  color: #b91c1c;
+}
+
+.deployErrorDetail {
+  margin: 0;
+  max-height: 220px;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: var(--font-ui), ui-monospace, monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #7f1d1d;
+}
+
+.deployErrorDismiss {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: var(--radius-sm, 8px);
+  background: transparent;
+  color: #991b1b;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+}
+
+.deployErrorDismiss:hover {
+  background: rgba(185, 28, 28, 0.12);
+}
+
+.listErrorWrap {
+  padding: 0 16px 12px;
+}

apps/super-admin/src/pages/WebsitesPage.tsx

@@ -10,6 +10,7 @@ import {
   RotateCcw,
   Search,
   ShieldPlus,
+  X,
 } from 'lucide-react'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
 import { DomainLinksOverflowMenu } from '../components/DomainLinksOverflowMenu'
@@ -107,6 +108,7 @@ export function WebsitesPage() {
   const [removeTarget, setRemoveTarget] = useState<DomainListItem | null>(null)
   const [togglingActiveId, setTogglingActiveId] = useState<number | null>(null)
   const [deployingId, setDeployingId] = useState<DomainListItem['id'] | null>(null)
+  const [deployError, setDeployError] = useState('')
   const [syncingSsl, setSyncingSsl] = useState(false)
   const [issuingWebsiteSsl, setIssuingWebsiteSsl] = useState(false)
   const [issuingSslId, setIssuingSslId] = useState<DomainListItem['id'] | null>(null)
@@ -356,7 +358,7 @@ export function WebsitesPage() {
     flushSync(() => {
       setDeployingId(domain.id)
     })
-    setError('')
+    setDeployError('')
     showToast(`Deploying "${domain.host}"…`, 'info')
 
     try {
@@ -376,15 +378,17 @@ export function WebsitesPage() {
           ),
         }
       })
-      showToast(
-        result.lastDeployStatus === 'success'
-          ? `Deploy succeeded for "${result.host}".`
-          : `Deploy finished for "${result.host}" (${result.lastDeployStatus ?? 'unknown'}).`,
-        result.lastDeployStatus === 'success' ? 'success' : 'info',
-      )
+      if (result.lastDeployStatus === 'success') {
+        showToast(`Deploy succeeded for "${result.host}".`, 'success')
+        return
+      }
+      const detail =
+        result.message?.trim() ||
+        `Deploy finished for "${result.host}" with status ${result.lastDeployStatus ?? 'unknown'}.`
+      setDeployError(`${result.host}: ${detail}`)
     } catch (err) {
       const message = err instanceof ApiError ? err.message : 'Deploy failed.'
-      setError(message)
+      setDeployError(`${domain.host}: ${message}`)
       setData((prev) => {
         if (!prev) return prev
         return {
@@ -400,7 +404,6 @@ export function WebsitesPage() {
           ),
         }
       })
-      showToast(message, 'error')
     } finally {
       setDeployingId(null)
     }
@@ -511,6 +514,24 @@ export function WebsitesPage() {
         </form>
       </div>
 
+      {deployError ? (
+        <div className={styles.deployErrorTip} role="alert">
+          <AlertTriangle size={18} className={styles.deployErrorIcon} aria-hidden />
+          <div className={styles.deployErrorBody}>
+            <p className={styles.deployErrorTitle}>Deploy failed</p>
+            <pre className={styles.deployErrorDetail}>{deployError}</pre>
+          </div>
+          <button
+            type="button"
+            className={styles.deployErrorDismiss}
+            onClick={() => setDeployError('')}
+            aria-label="Dismiss deploy error"
+          >
+            <X size={16} aria-hidden />
+          </button>
+        </div>
+      ) : null}
+
       <div className={tableStyles.tablePanel}>
         <div className={tableStyles.tableWrap}>
           <div className={tableStyles.tableHeader}>
@@ -527,10 +548,10 @@ export function WebsitesPage() {
           </div>
 
           {error && (
-            <div style={{ padding: 16 }}>
-              <div className={tableStyles.meta} style={{ color: '#b91c1c' }}>
+            <div className={styles.listErrorWrap}>
+              <p className={tableStyles.alertError} role="alert">
                 {error}
-              </div>
+              </p>
             </div>
           )}