My Wallet Page

The customer-facing dashboard at /my-account/my_wallet/ (added as a WC my_wallet endpoint).

Layout (top-to-bottom)

┌────────────────────────────────────────────────────────────┐
│ Breadcrumb  Account ›› My Wallet                           │
├────────────────────────────────────────────────────────────┤
│ Profile greeting    Avatar  Welcome back, NAME             │
│                     KYC pill   Transactions stat            │
├────────────────────────────────────────────────────────────┤
│ Credit-card hero    Brand "Shop Wallet"                    │
│                     ₹ 1,250.00      WK-0000-••••-1234   INR│
│                     Hide / Show toggle                     │
├────────────────────────────────────────────────────────────┤
│ Action grid 2×2     [+ Add money] [paper-plane Send]       │
│                     [bank Withdraw] [tag Redeem]           │
├────────────────────────────────────────────────────────────┤
│ Add funds panel     Quick top-up chips    ₹custom amount   │
│                     Pay with — UPI / Card / Netbank        │
│                     Inline bonus banner (when enabled)     │
├────────────────────────────────────────────────────────────┤
│ Recent activity     Filter (All / Credit / Debit / Refund) │
│                     Iconised rows + paging                 │
├────────────────────────────────────────────────────────────┤
│ Referral panel      Personal link + Copy + share buttons   │
│                     How-it-works + invites list + stats    │
└────────────────────────────────────────────────────────────┘

My Wallet — full customer-facing page at /my-account/my_wallet/

Top Chrome

Element	Behaviour	Source
Breadcrumb `Account ›› My Wallet`	links back to WC dashboard	`wc_get_account_endpoint_url`
Title `My Wallet`	static	i18n `wc_wallet`
Sub-title	"Manage your store credit, refunds and reward points all in one place."	i18n

Profile Greeting Card

Element	Behaviour	Source
Avatar 56×56	Gravatar	`get_avatar_url( user_id )`
Title `Welcome back, NAME`	submodule template	`.wallet-ui-greeting-title`
Sub-title `NAME's Wallet`	submodule template	`.wallet-ui-greeting-subtitle`
KYC badge (green pill, inline)	`✓ KYC VERIFIED` — only when KYC approved	decorator reads `_wkwp_kyc_status`
KYC nudge (gradient pill, pulsing dot + shimmer)	`◯ VERIFY KYC` / `KYC UNDER REVIEW` / `RE-SUBMIT KYC`	shown when KYC not approved
Transactions stat	`TRANSACTIONS N`	legacy `.wkwc-wallet-total-transaction-count`

Clicking the KYC nudge opens a native <dialog> modal with the KYC submission form. Auto-opens on rejected state. See KYC.

Profile greeting card — avatar, welcome line, KYC pill, transactions stat

Credit-Card Hero

Element	Source
Brand strip `Shop Wallet`	i18n `heroBrand`, override via filter `wkwp_my_wallet_hero_brand`
Owner name	greeting card
Balance	`_wkwc_wallet_amount` user meta — split into symbol / integer / decimals
Masked wallet ID `WK-0000-••••-NNNN`	derived from user ID, stable per user
Currency chip `INR`	active WC currency
Hide / Show button	client-only toggle (CSS blur), no server roundtrip
Chip + blob decoration	static SVG

No actions on the hero itself.

Credit-card hero — brand strip, balance, masked wallet ID, currency chip

Action Grid (2×2)

Tile	Icon	Action	Gated by
Add money	`+`	scrolls to / focuses `#add_wallet_money`	always
Send	paper plane	`wc_get_endpoint_url( 'my_wallet', 'transfer' )`	KYC `transfer` + `_wkwp_transfer_locked`
Withdraw	bank	`wc_get_account_endpoint_url( 'wkwc_withdrawal' )`	KYC `withdrawal` + `_wkwp_kyc_gate_withdrawal`
Redeem code	tag	opens `<dialog id="wkwp-redeem">` with `[wkwp_wallet_coupon_redeem]`	always

Warning

Server-side gating is authoritative. Tiles may render but a submit will block when gates fail.

Action grid — Add money, Send, Withdraw, Redeem code

Add Funds Panel

Customer's top-up flow.

Left column

Balance header + Hide toggle
KYC-required inlay (red, from submodule) when feature gated

Right column — the form

Field	Notes
Quick top-up	3×2 grid of preset chips — click fills custom amount
Custom amount	`<input type="number" name="add_wallet_money">` inside pill with `₹` symbol
You'll pay	paychip echoes the final charge
Add to Wallet	violet submit button — posts to WC add-to-cart with the recharge product
Pay with	UPI / Card / Netbank labels (cosmetic — actual method picked at checkout)
Offer banner (green, inline)	rendered when `_wkwp_wallet_bonus_enable=1` — "Pay ₹X and get ₹Y" updates live on input

Form submits to the standard WC product-to-cart flow. No custom endpoint. The submodule handles the recharge product.

See Recharge / Top-up.

Add funds panel — preset chips, custom amount input, pay-with strip, submit

Recent Activity

Element	Behaviour	Source
Title `Recent activity` + count	reparented from filter bar	`.wkwc-wallet-total-transaction-count`
`View all` ghost button	reveals hidden WC orders table (legacy paging)	toggles `.wl-act-table-hidden`
Filter bar (All / Credit / Debit / Refund / Transfer)	POST form → reloads with filtered rows	submodule form
Activity rows	34×34 icon tile (typed colour) + label + order link + date + signed amount + status	derived from WC orders + ledger
Pagination (Prev / Next)	reparented inside activity card	legacy `.wallet-pagination`

Read-only — no destructive actions.

Recent activity card — title, view-all, filter bar, transaction rows, pagination

Referral Panel

Visible when referral feature enabled (_wkwp_referral_enable=1).

2-column grid (1.4fr / 1fr) with:

Card	What
Referral link tile	Personal link pill + Copy button (native `clipboard.writeText` + fallback)
Referral code tile	code with tag icon (`BOB22`, `AARAV42`)
Share buttons	brand-coloured WhatsApp / X / Email / Messenger deep links
How it works	gradient card with 3 admin-editable steps
Your invites	list from `wallet_referrals` table — only actual link signups
Stats	total earned / invited / signed up (paid) / pending

See Referral Program.

Decorator Architecture

The page is built as a decorator on top of the legacy WC submodule template — zero template edits.

Implementation:

Output buffers the legacy submodule wc_get_template( 'myaccount/my-wallet.php' )
Reparents legacy DOM nodes into a modern fintech layout via PHP
Strips legacy .wkwp-referral-box and duplicate transaction count via WC-action output buffer
All CSS scoped under .wallet-ui-custom.layout-card .wkwp-* with hex fallbacks + !important + dual-scope selectors

Means: future submodule template upgrades do not break the modern UI. Decorator simply re-decorates whatever the submodule renders.

Customise

Want to	How
Change brand strip text	filter `wkwp_my_wallet_hero_brand` (see Filters & Hooks)
Hide referral panel	turn off `_wkwp_referral_enable`
Hide BNPL CTA	turn off BNPL feature
Custom action tile	filter `wkwp_my_wallet_action_tiles`

Hooks

Hook	Type	When
`wkwp_my_wallet_render`	action	top of the page
`wkwp_my_wallet_action_tiles`	filter	mutate the 2×2 action grid
`wkwp_my_wallet_activity_row`	filter	mutate each activity row HTML
`wkwp_my_wallet_decorator_skip`	filter	bypass decorator entirely