# Shop · Settings — UI / Screens / States

Demo: `portals/shop/Settings.tsx`. Ours: `frontend/views/{shop-settings,payment-settings}/index.php`.

## Demo screen structure
- `PageHeader` title "Settings", subtitle `${commercialName} · general, payments, commercials & notifications` (`Settings.tsx:38`).
- A single `Segmented` tab bar with 5 tabs (`Settings.tsx:43`): General · Scheduling · Payments · Commercials · Notifications.
- Each tab renders one `Card max-w-2xl p-5` with a `CardHeader` (title + subtitle).
- Primitives: `Card/CardHeader`, `Field/Input/NumberInput/Select/Segmented`, `Toggle`,
  `Button`, `Badge`, `DataRow`, `toast`.

### Tab visuals
- **General**: Commercial name (full width), Email + Owner mobile (2-col grid), Bank + IBAN (2-col, **disabled**), right-aligned Save button with save icon.
- **Scheduling**: Opens + Closes time inputs (2-col); Opens shows overnight hint; slot-size Select + time-format Segmented (2-col); explanatory paragraph.
- **Payments**: 3 `PayRow`s. `PayRow` = icon tile + title + desc on the left; on the right **two stacked toggles** labelled "App" and "Walk-ins" (`Settings.tsx:303–360`). Footnote explaining App vs Walk-ins. Conditional Deposit % NumberInput (max-xs) when deposit accepted, label shows `(max N%)`.
- **Commercials**: a single rounded slate panel of `DataRow`s with `Badge` tones for plan/status; footnote.
- **Notifications**: 4 `PayRow`s (single toggle each, no walk-in toggle), descs show unit fees.

### States the demo encodes
- Overnight (close ≤ open) → "+1d" hint.
- Slot size **disabled** when `slotStepLocked`.
- Deposit % block **hidden** unless `acceptDeposit`; value **clamped** on input.
- Commercials **all disabled/read-only** ("set by Navagoo").
- Status badge color varies by subscription status; empty sub/plan → "—".
- No explicit empty/error/loading states (in-memory store; no async).
- RTL: demo is LTR-built; relies on app-level dir. No per-component RTL handling here.

## Our screens

### shop-settings/index.php (profile + hours + location)
Aurora Tailwind, `max-w-4xl`, single long form (NOT tabbed). Sections as separate cards:
Media (image+gallery), Basic Information (title/mobile/gender), Working Hours (open/close +
overnight hint, view L234), Location (Google Map + address/city/district), Shop Settings
(slot step + refund window + no-show + website), Additional Information (about/cancel terms,
bilingual). Flash banner (L94), Yii errorSummary restyled (L118), bilingual language tabs (L127).
Save submit button bottom-right (L391).

### payment-settings/index.php (payment methods)
Aurora Tailwind, `max-w-2xl`, one card. Three pill-switch rows (Pay 100% Online, Pay Deposit,
Pay on Visit) built from sr-only checkboxes + injected Tailwind pill labels (JS L199). Deposit %
sub-block shows/hides on the deposit toggle (JS L224); inline cap hint + "exceeds max" warning
banner (L101). Flash + errorSummary. Save button.

## Concrete UI gaps (ours vs demo)

1. **No unified tabbed Settings page.** Demo = one page / 5 tabs; ours = two separate
   routes (`/shop-settings`, `/payment-settings`) and no commercials/notifications surface.
2. **General tab**: no Email field; no Bank/IBAN (disabled) display. Ours instead surfaces
   a much larger profile form (media, map, refund, about) the demo's Settings page does not.
3. **Scheduling tab**: missing the **Time format (12h/24h)** Segmented control.
4. **Payments tab**: missing the **Walk-ins** second toggle per method (App-only in ours).
   The demo's App-vs-Walk-in explanatory footnote is also absent.
5. **Commercials tab**: entirely missing — no read-only panel for plan / status / next billing /
   marketing fee / processing fee / VAT registered / min withdrawal / settlement hold.
6. **Notifications tab**: missing channel-preference toggles (SMS/WhatsApp/Email/Push) with
   per-message fee descriptions. (Our sidebar `/notifications` is a notifications *list*, not
   a channel-preferences card — `_tw_sidebar.php:61`.)
7. **Deposit %**: demo clamps live on input; ours validates on submit + shows warning banner.
   Functionally equivalent, slightly different UX (no live clamp).

## Parity wins on our side
- Real persistence + server validation, flash + errorSummary.
- Bilingual (ar/en) language tabs and bilingual about/cancel terms — demo only has optional
  `commercialNameAr` field, no bilingual UI.
- Google Maps location picker, media/gallery upload, refund window, no-show threshold —
  all NEW relative to the demo Settings page (these live elsewhere in the demo onboarding flow).