# JOYA customer app — builder brief (shared by all screen builders)

JOYA is a Saudi flowers & gifts app. We are completing the customer app screens from the business requirements (BRD).
54 screens already exist. You will add a group of new screens as static HTML "artboards" produced by a PowerShell generator.

## Paths
- Scratchpad root: `C:\Users\HP\AppData\Local\Temp\claude\4ba9d5be8723f768\903197a5-0ab2-4478-afc9-14375e80ed1e\scratchpad` (call it SP)
- Shared components: `SP\tools\ui.ps1` — READ IT FIRST. It defines Bar, Body, Card, Label, Muted, Divider, Line2, Btn, BottomBar, Field, Toggle, Radio, Tabs, Chips, MenuRow, Note, Pill, StateBlock, Avatar, ProductRow, Otp, Write-Pages, plus icons in `$ic` (draw with `I $ic.name 20`) and `Price $amount $size` (Saudi riyal symbol + number), `Sheet $title $body $cta $closeHref` (bottom sheet over a screen), `Nav 'حسابي'` (floating bottom tab bar; active tab label one of: الرئيسية، تسوّق، المجتمع، السلة، حسابي), `$statusDark` (iOS status bar).
- Style references (read a little of each to match the look): `SP\tools\more.ps1` (Order-Tracking, Community, Account), `SP\tools\cart.ps1` (cart, checkout, card message), `SP\BRD-customer.md` (the requirements summary, with rules and edge cases per feature — use it for content).
- Output: `SP\joya-home\project\<Board-Name>.dc.html` via `Write-Pages $pages`.
- Screenshot to check your work: `& "SP\tools\shot.ps1" Board-Name Other-Board` → `SP\shots\Board-Name.png` (the phone screen is the left 393px of a 500px image). Look at the PNGs with the Read tool and fix anything broken (overflow, overlap, clipped text, wrong direction).

## Your generator file
- Create ONLY your own file (named in your task), starting with:
  ```
  param([string]$root)
  . "$PSScriptRoot\ui.ps1"
  $pages = [ordered]@{}
  ...  $pages['Board-Name'] = @('Section — state title', (Body $inner 128 40), (Bar 'Title' 'Back.dc.html'), (BottomBar (Btn 'Text' 'Next.dc.html')))
  Write-Pages $pages
  ```
  Parts after the title are concatenated inside the 393×852 phone frame. Put Body first, then Bar, then BottomBar / Nav / Sheet (later parts paint on top).
- Run: `& "SP\tools\<your-file>.ps1" -root "SP\joya-home"` — every board must report `unresolved 0`.
- The file MUST be saved as UTF-8 WITH BOM (Windows PowerShell 5.1 misreads Arabic otherwise). After every Write/Edit, re-save: `$p='...'; [IO.File]::WriteAllText($p, [IO.File]::ReadAllText($p), (New-Object Text.UTF8Encoding $true))`.
- Do NOT edit ui.ps1, common.ps1, cart.ps1, more.ps1, browse.ps1, product.ps1, build.ps1, canvas.json, or any board you were not assigned. If you need a helper, define it in your own file with a unique name.

## PowerShell 5.1 pitfalls (all bit us before)
- Never put a double-quoted string with escaped quotes inside `$( )` inside another double-quoted string — PS fails to parse. Build the inner piece in a variable first, then interpolate the variable.
- Variable names are case-insensitive (`$S` and `$s` are the same). `$home`, `$input`, `$args`, `$host`, `$error`, `$pid` are reserved. Don't name a function `R`, `H`, `Item`, `Row`, `Label`, `Card` etc. that already exist (ui.ps1 owns those).
- `@()` arrays nested inside `-join` print "System.Object[]" — join the inner array first.
- Don't pipe the generator's output into `Select -First` (it stops the generator early).
- Use the Edit tool for small changes; PowerShell `-replace` treats the pattern as regex.

## Visual language (match exactly)
- White screens, primary pink #F56BAC (soft pink bg #FEF0F6 / #FFF6FA, border #F9B5D5), text #1E1418, secondary #666666 and #999999, strokes #F2F2F2, success #67BC00/#3F7A00 on #F1F9E6, warning #8A5A00 on #FFF7E6, error #E53935/#C62828 on #FDECEC.
- Cards: 1px #F2F2F2 border, 16px radius, 16px padding. Pills and primary buttons: 999px radius, 52px tall. Inputs: 50px, 12px radius, 1.5px #F2F2F2 border.
- Arabic RTL. Titles 18px/700 in the Bar, section labels 16px/700, body 14px, meta 12–13px.
- Spacing: Body gap 20px; header-to-content gap is already 20px if you use Body top 128 (132 when Bar has a sub line).
- Tab screens (Account hub, Orders list, Notifications, Favorites) show `Nav 'حسابي'` at the bottom and use Body bottom 120. Pushed detail screens use a back arrow in Bar and no Nav.
- Bottom sheets: use `Sheet`. Full-screen states: use `StateBlock`.
- Copy: Saudi dialect, addressing the user in the MASCULINE (e.g. "سجّل دخولك", "أضف", "تبي", "وش", "للحين", "عشان"). Short, warm, clear. No English UI text except brand names and codes.
- Keep realistic, consistent sample data: user عبدالله, +966 50 123 4567, abdullah@mail.com; recipient نورة +966 55 123 4567; order #JY-240214-0381 (فازة ياقوت 590, شوكولاتة بلجيكية 45, مجموعة ميلاد العقرب 670; delivery 25; JOYA10 −100; wallet −120; paid 1,110); points balance 340 نقطة (≈ 34 ر.س); wallet balance 120 ر.س; city الرياض.

## Links
- Every `<a href>` must point to a real board (`X.dc.html`) from the list below or from your own group. Never `href="#"`. Back arrows go to the screen that opened this one.
- Existing boards you can link to: Main, Main-City, Product-Default, Product-Favorited, Product-Share, Product-Gallery, Product-Care, Product-Reviews, Product-Reviews-Sort, Product-Required, Product-Added, Product-OutOfStock, Product-Notified, Product-NotInCity, Product-Description, Product-LinkCopied, Product-Custom, Product-Custom-Uploading, Product-Custom-Filled, Product-Custom-Error, Search, Search-Suggest, Search-Results, Listing-Filter, Listing-Sort, Search-Empty, Categories, Category, Occasions, Occasion, Recipient, Brand, Search-Cleared, Cart-Empty, Cart, Cart-Alerts, Cart-Addons, Cart-Cards, Cart-CardMessage, Cart-CardReveal, Checkout-Gift, Checkout-GiftCard, Checkout-Delivery, Checkout-Map, Checkout-Payment, Checkout-Promo, Checkout-Discount, Checkout-Processing, Checkout-Success, Checkout-Failed, Checkout-Pending, Order-Tracking, Community, Account.
- New boards being built in parallel (you may link to any of them):
  - Auth group: Onboard-Language, Auth-Signup, Auth-Signup-Error, Auth-OTP, Auth-OTP-Error, Auth-Login, Auth-Login-Error, Auth-Forgot, Auth-NewPassword, Auth-Required, Account-Guest
  - Orders group: Orders, Orders-Gifts, Order-Gift-Detail, Order-Cancel, Order-Modify, Order-LiveTrack, Order-Delivered, Order-Rate, Order-Thanks, Order-Invoice, Checkout-GiftLink, Checkout-GiftUser, Gift-Open, Gift-Address, Gift-Confirmed, Gift-Expired, Gift-Thanks
  - Rewards group: Wallet, Wallet-TopUp, Points, Referral, My-Occasions, Occasion-Add, Voucher, Voucher-Code, Codes
  - Account group: Community-Post, Community-Create, Support, Support-NewTicket, Support-Ticket, Profile-Edit, Addresses, Settings, Delete-Account, Help-FAQ, Legal, Notifications, Notifications-Empty, Favorites, Favorites-Empty, Home-Offline
- Account (the hub) is rebuilt by the coordinator to link to all of these; don't build it.

## Done means
- All your boards generated with `unresolved 0`, each screenshotted and visually checked, no `href="#"`, no links to boards outside the lists above.
- Final message: list each board with its <title>, one line on what it shows, and which BRD states it covers; list any BRD states from your group you merged or skipped and why.