# Customer account and order page redesign: what the app should match

**For:** the mobile app developer.
**Website branch:** `feat/order-details-design-2026-10-24` (2026-10-24).
**API impact: none.** No endpoint, field or response changed. Every change below is on the website's screens. This note lists the product decisions behind them so the app can show the same thing.

---

## 1. Summary

| # | Decision on the website | What the app should do |
|---|---|---|
| 1 | **Cancel moved to the order page only.** The order list has no Cancel button any more. | Remove Cancel from the order list. Keep it on the order page. |
| 2 | **Loyalty points and referral code are hidden** until the loyalty feature is ready. | Hide points, membership level, the loyalty history and the referral code. |
| 3 | **The account menu is cut down to 7 items** (features that are off or barely used are gone). | Match the list in §4 on the account screen. |
| 4 | **The order page summary is redesigned** (receipt with a navy total, address card, copy order number). | Optional: match the look in §5. |
| 5 | **On phones the account menu is a side drawer**, not a row at the top of the page. | No change needed. For reference only. |

---

## 2. Cancel: on the order page only

**Before:** the order list had a **Cancel** button on each seller order (inside "Orders by seller") and a **Cancel order** button on single-seller orders.

**Now:** the list has no Cancel at all. The customer opens the order page and cancels there. That page shows the products, so the customer sees what they are cancelling.

App:
- Order list (`GET /api/v2/purchase-history/grouped`): **do not show Cancel**, even when `orders[].can_cancel` is `true`.
- Order page (`GET /api/v2/purchase-history/combined/{order_id}`): show Cancel on each seller order where `orders[].can_cancel` is `true`.
- Cancelling is unchanged: `POST /api/v2/order/cancel2/{id}` with that seller order's `id` and the required `cancel_reason` (see `order-cancel-mobile.md`).
- **Edit** was already only on the order page (since 2026-10-22). Nothing changes for it.

---

## 3. Loyalty points and referral code: hidden for now

Loyalty is not ready for customers yet. The website no longer shows:
- the "نقاط الولاء" (loyalty points) number and the "View Loyalty History" link;
- the referral code (its only reward is loyalty points for the person who invited).

App: hide the same things until we say loyalty is ready:
- points and membership level (`points`, `membership_type` in the login / profile response);
- the loyalty history screen (`GET /api/v2/loyalties`) and the memberships screen (`GET /api/v2/memberships`);
- the referral code shown to the customer (`referral_code` in the login / profile response) and any "share your code" action.

**Please confirm with us before hiding the referral code field on the sign-up screen.** The server still accepts `referral_code` at registration and still gives the inviter points.

Nothing was removed on the server: the endpoints still answer, the fields are still sent, and orders and referrals still add points in the background. Bringing it back later only means showing it again.

---

## 4. The account menu (7 items)

The website's account menu now has only these, in three groups:

| Group | Item (Arabic as on the website) | Website screen | Icon on the website (Line Awesome) |
|---|---|---|---|
| Orders | Dashboard (لوحة القيادة) | account home | `la-th-large` |
| Orders | Purchase History (تاريخ شراء), with a green "New" (جديد) badge when an order has an update | order list | `la-shopping-bag` |
| Orders | Coupons (القسائم) | coupons available to the customer | `la-ticket-alt` |
| Saved | Wishlist (قائمة الرغبات) | wishlist | `la-heart` |
| Saved | Followed Sellers (البائعين المتابعين) | followed shops | `la-store` |
| Help & profile | Contact Us (تواصل معنا) - replaced Support Ticket on 2026-11-04, see `contact-us.md` | Contact Us form | `la-headset` |
| Help & profile | Manage Profile (إدارة الملف الشخصي) | profile | `la-user-cog` |

Under them: **Sign Out** (تسجيل الخروج) as a button, and **Delete My Account** (حذف حسابي) as a small red text link below it. "Delete" deactivates the account; see `account-deletion.md` (unchanged).

**Removed from the menu.** If the app shows any of these, hide them too:

| Removed | Why |
|---|---|
| Loyalty points, View Loyalty History, Referral Code | not ready (§3) |
| Downloads (digital products) | one digital product, ordered once |
| Compare | already in the site header; not an account feature |
| My Wallet | wallet system is switched off |
| Earning Points / Club Points | addon not active |
| Conversations | conversation system is switched off |
| Refund Requests | addon not active (returns go through return requests, `return-requests.md`) |
| Preorder, Auction, Affiliate, Classified Products | addons / settings not active |

Badges, if the app has them:
- "New" on Purchase History = any of the customer's orders has `unseen: true` in `purchase-history/grouped`.
- Support Ticket and its count are gone (tickets were switched off on 2026-11-04); Contact Us has no badge.

---

## 5. Order page look (optional, to match the website)

Data: `GET /api/v2/purchase-history/combined/{order_id}`. All fields below already exist.

**Head**
- "Order #`number`" with a **copy** button next to the number. Tapping it copies `number` and shows a short "Copied" (تم النسخ إلى الحافظة) message.
- Date, number of sellers, number of products, the total, the payment status pill, and the 4-step progress bar (as before).
- Actions: Download invoice, Reorder / Reorder all, Request a return (when allowed), Pay with Paymera (when `can_pay_online`).

**Seller orders:** one section per seller order, unchanged from `combined-orders.md`. Each shows its products, Edit (`can_edit`) and Cancel (`can_cancel`).

**Order summary card (receipt)**
- Title "Order summary" (ملخص الطلب) and a small chip "*N* products in this order" (`products_count`).
- Rows with dotted leaders: Subtotal (`subtotal`), Shipping (`shipping`, "charged once for the whole combined order" when `is_single` is false), Tax (`tax`, only if > 0), Coupon (`coupon_discount` with `coupon_code` in a green dashed chip, only if > 0).
- A **navy bottom part** (`#1A1255`) with the **total in brand yellow** (`#FFC519`), large: `total.formatted`.
- In the navy part: **payment method** (`payment_type_label`, with an icon: cash `la-money-bill-wave`, card `la-credit-card`, wallet `la-wallet`) and the **payment status pill** (`payment_status_label`) under it. If `payment_type` is `null`, list each seller order's `code: payment_type_label`.
- "Pay with Paymera" (yellow button) inside the navy part when `can_pay_online`.
- "Not charged" (cancelled / returned seller orders, `is_void: true`): seller name, code, status pill, amount struck through. Never part of the total.

**Shipping address card** (`shipping_address`)
- Yellow map-pin icon + "Shipping address" (عنوان الشحن).
- **Name** in bold, then `address`, then `city، state، country` in grey.
- **Phone as a tap-to-call button** (`tel:` link, number shown left-to-right).
- `notes` in a light grey block at the bottom of the card, labelled "Notes" (ملاحظات).
- The website also shows the order's "Additional info" there. **The API does not send it yet.** Tell us if the app needs it.
- The separate "Invoice No" row was removed: it repeated the order number.

**Layout**
- Phone: everything in one column. The seller orders come first, then the summary card and the address card.
- Each product row on a phone: picture and name on top, with the **price and the Review button on one row under the name**, so the name gets the full width.
- Colours used on the website: ink / navy `#1A1255`, accent yellow `#FFC519`, light surface `#F8F9FC`, lines `#ECEEF3`, success green `#0F7B4B` on `#E6F6EE`, danger red `#C2262D` on `#FDECEC`. Cards have 16px corners, buttons 10–12px, pills fully rounded.

---

## 6. Account drawer on phones (reference only)

Below 1200px wide, the website opens the account menu as a **drawer** from the bottom bar's "My Account" (حسابي):
- it slides in from the **right** (the start side in Arabic) over a dimmed navy background;
- a navy header shows the avatar (or the first letter of the name on yellow), the name, the phone, and a close button;
- only the links scroll; Sign Out stays fixed at the bottom;
- tapping outside or the close button closes it.

If the app has an account tab or screen, the same order of items (§4) and the same header (avatar, name, phone) keep both looking the same.

---

## 7. Checklist

- [ ] Order list: no Cancel button (single and per seller order).
- [ ] Order page: Cancel per seller order when `can_cancel`; Edit when `can_edit` (unchanged).
- [ ] Hide loyalty points, membership level, loyalty history and the referral code.
- [ ] Confirm with us before hiding the referral code at sign-up.
- [ ] Account screen: only the 7 items of §4, plus Sign out and Delete my account.
- [ ] Optional: order summary card and address card as in §5 (copy order number, tap-to-call phone).