State components

Props: image or icon, title, description, optional CTA

Action: prop CTA → prop

Used in: see rows below

Sign in to The Raw / Collect stamps, save favourites and track your orders.

Action: Sign in → auth sheet

Used in: edit-profile, beauty-profile, beauty-quiz, order-list, wishlist-screen

12 reasons, e.g. Sign in to save this / Your wishlist follows you to any phone.

Action: Sign in → auth sheet

Used in: login sheet title

Sign in to manage addresses / Save addresses to speed up checkout and delivery details.

Action: Sign in → requireSignIn addresses

Used in: profile/settings/account/addresses

Sign in to view discounts / Sign in to view your earned vouchers and exclusive discounts.

Action: Sign in → requireSignIn vouchers

Used in: profile/settings/account/discount-pool

Sign in to contact us / Support messages are linked to your account so our team can reply.

Action: Sign in → requireSignIn support

Used in: profile/settings/support/contact-us

Sign in to view notifications / Your notifications will appear here once you're signed in

Action: Sign in → requireSignIn notifications

Used in: notifications

Sign in to manage preferences / Customize your notification settings once you're signed in

Action: Sign in → requireSignIn notifications

Used in: notification-preferences

No saved addresses / Save an address to prefill delivery details at checkout.

Used in: profile/settings/account/addresses

Your wishlist is empty / Tap the heart on any product to save it here for later.

Action: Start shopping → Shop tab

Used in: wishlist

No Orders Yet / Start shopping to place your first order and track it here.

Action: Start Shopping → Home

Used in: orders

No matching orders / Try a different search term

Used in: orders

All caught up / No notifications to show

Used in: notifications

Your bag is empty / Let's fill it with your favourite finds and great deals!

Action: Start shopping → product list

Used in: my-bag

No Discounts Yet / Earn vouchers by collecting stamps and playing Shake to Win

Action: Start Earning → Loyalty tab

Used in: profile/settings/account/discount-pool

No vouchers yet, earn them through stamps and rewards.

Used in: my-bag

No products found / Try adjusting your filters or check back later

Used in: shop, product-list/[id]

No products found for <query> / Try a different search term

Used in: search

No reviews yet. Be the first to share your thoughts!

Used in: product-reviews/[id]

No saved addresses yet. Add one to speed up checkout.

Action: Add new address → address form

Used in: checkout, my-bag

No avatars available / Ask an admin to activate avatars in the dashboard.

Used in: (modals)/select-avatar

No activity yet / Your stamp collection history will appear here

Used in: loyalty

No Active Campaign, Campaign Has Ended, You're Offline and 9 more; only two used

Action: Refresh, Retry, Sign in and others

Used in: loyalty

Spend & collect stamps to unlock surprise rewards

Action: Get Started → requireSignIn loyalty

Used in: loyalty

No recommendations yet / Retake the quiz to get updated suggestions

Action: Retake Quiz → beauty quiz

Used in: beauty-profile

Renders nothing when empty (recently viewed, category list)

Used in: home

Loading... (also Signing out..., Loading profile..., Loading notification...)

Used in: profile, edit-profile, addresses, discount-pool, loyalty, order-confirmation

Bare spinner, no copy

Used in: search, recently-viewed

Width and height block, no copy

Used in: profile, addresses, discount-pool, loyalty, home, beauty-profile

Grouped shimmer; only SkeletonGroup user in the app

Used in: product/[id]

Product grid skeletons, no copy

Used in: wishlist, shop, search

OrderListSkeleton (5 rows), DetailSkeleton, NotificationSkeleton (6 rows)

Used in: orders, order detail, notifications

Small spinners in footers, buttons, bottom bars and sheets

Used in: wishlist, notifications, product-list, product/[id]

FilteringOverlay, reviews loading, Signing you in

Used in: product-list/[id], product-reviews/[id], auth

Splash image while the auth gate blocks, up to 15 s

Used in: app shell

12 plain grey tiles, not a Skeleton

Used in: (modals)/select-avatar

Accent RefreshControl; notifications use a 400 ms fake spinner; vouchers no-op

Used in: orders, notifications, loyalty, discount-pool

Load More (n/total) or Showing all N orders

Action: Load More → next page

Used in: orders

Syncing bag... / Processing...

Used in: my-bag

App Error / Something went wrong, but we can try to recover.

Action: Try Again, Retry Connection, Restart App

Used in: app root

Something Went Wrong / An unexpected error occurred. Please try again.

Action: Try Again (3 retries)

Used in: notifications/detail/[id]

Something went wrong / The <Tab> tab encountered an error. Shows raw error message.

Action: Try Again

Used in: home, shop, loyalty, my-bag, profile

Something went wrong plus analyzed user message

Action: Try Again, Go Back, Go to Home

Used in: shop, product-list/[id]

Data Issue, Connection Issue, Authentication Required, Access Denied, Too Many Requests

Action: Try Again

Used in: discount-pool, notifications

Authentication Error / Something went wrong during authentication.

Action: Try Again, Go Back

Used in: auth/login, auth/verify, profile-completion

Alert icon with title and message

Action: Retry

Used in: shake-to-win

Framework default error screen

Used in: app root

Oops! / This screen doesn't exist.

Action: Go to home screen! → /

Used in: unknown routes

Can't load your account / We couldn't reach our servers. Check your connection and try again.

Action: Try again; Continue browsing → degraded mode

Used in: app shell

We couldn't load your account / You're signed in. Check your connection, then try again.

Action: Try again

Used in: auth/login, auth/verify, profile-completion

Could not load your orders / Check your connection and try again.

Action: Try Again

Used in: orders

Could not load more orders.

Action: Try Again

Used in: orders

Could not load your wishlist / Check your connection and try again.

Action: Try Again

Used in: wishlist

Couldn't load notifications / Please check your connection and try again

Action: Try again

Used in: notifications

Unable to load notification / This notification may have been deleted.

Action: Go Back

Used in: notifications/detail/[id]

Failed to load products / Please check your connection and try again

Action: Try Again

Used in: product-list/[id]

Unable to load vouchers / Something went wrong while loading your vouchers.

Action: Try Again (unreachable)

Used in: discount-pool

Unable to load order details / Please try again later

Action: Back to Home → Home

Used in: order-confirmation

Claim Failed plus message

Action: Try Again; Back to Home

Used in: duit-raya-flow

Unable to Load Document / The document could not be displayed in the app.

Action: Try Again; Open in Browser

Used in: legal PDFs

error, network-error, auth-error, server-error, offline types; none used

Action: Retry

Used in: loyalty

Checkout in progress plus status text

Action: Close checkout

Used in: my-bag

Some items are unavailable / Remove them to proceed with checkout

Used in: my-bag

Items Unavailable; Out of stock, Not enough stock, No longer available

Action: Remove & Continue Checkout; Return to Cart

Used in: checkout

Delete address? / <line1>, <postcode> <city>. Cancel, Delete

Action: Delete (destructive)

Used in: profile/settings/account/addresses

Document unavailable / This document cannot be opened from the app right now.

Action: OK

Used in: legal PDFs

Unable to open document / Please try again later or contact support.

Action: OK

Used in: legal PDFs

Add Photo / Choose an option

Action: Camera; Photo Library; Cancel

Used in: product-reviews/[id]

Block User / Block <name>? You won't see their reviews anymore.

Action: Block (destructive)

Used in: product-reviews/[id]

Some items unavailable / server message

Action: View Cart → /my-bag

Used in: orders

Reorder failed / server message or Something went wrong. Please try again.

Action: OK

Used in: orders

Mark as received? / Confirm you've received this parcel. This marks the order as delivered.

Action: Mark received

Used in: orders/[id]

Could not update / server message or Something went wrong. Please try again.

Action: OK

Used in: orders/[id]

Camera Access Required / enable camera access in Settings > Privacy > Camera > THERAW.

Action: Open Settings; Cancel

Used in: duit-raya-flow

HeroUI toast (about 55 sites) and flash-message wrapper (3 to 4 s) in use together

Used in: app root

Could not delete account / error message or Please check your connection and try again.

Used in: profile

Success / Profile updated successfully; Update failed

Used in: edit-profile

Message Sent; Failed to Send; warning Sign In Required

Used in: contact-us

Email Copied / cx@theraw.com.my has been copied to clipboard.

Used in: faq

Address deleted; Default address updated; Location permission needed; Unable to save address

Used in: addresses, address-form

Unable to Remove Item; Checkout In Progress; Promo code applied; Invalid promo code; Variant updated

Used in: my-bag

Failed to add to bag; Checkout failed

Used in: product/[id]

Saved to wishlist; Removed from wishlist; Could not update wishlist; Slow down a moment

Used in: wishlist, product/[id]

Rating Required; Review Exists; Cannot Report; User Blocked

Used in: product-reviews/[id]

Voucher Unavailable; Code Copied; Copy Failed

Used in: discount-pool, my-bag

Could not delete notification; Notification deleted / Tap to undo

Action: Tap to undo → restore

Used in: notifications

Notifications Disabled; Error; both close the modal

Used in: notification-permission

Cannot open link; Could not save profile / Please check your connection and try again.

Used in: marketing, beauty-quiz

WhatsApp open failure toast

Used in: auth

Sign out? / You will need to sign in again.

Action: Cancel; Sign out

Used in: profile

Delete Account / Are you sure? All your data will be permanently removed.

Action: Cancel; Delete

Used in: profile

Native alert, see Alert dialogs

Action: Cancel; Delete

Used in: addresses

Native alert, see Alert dialogs

Action: Cancel; Block

Used in: product-reviews/[id]

Native alert, see Alert dialogs

Action: Cancel; Mark received

Used in: orders/[id]

No dialog; swipe left, optimistic delete with Tap to undo toast

Action: Tap to undo

Used in: notifications

No confirmation; mutation runs at once, failure toast only

Used in: my-bag

Immediate with informative toasts

Used in: my-bag

Close checkout button, no extra confirm

Action: Close checkout

Used in: my-bag

Immediate; error only logged

Used in: search

Remove All Data? / Remove All; exists but unused

Action: Remove All

Used in: none

64px icon disc, title, message, confirm and outline cancel; dismiss blocked while confirming

Used in: profile

Screen stays mounted; CTA opens auth sheet then runs onSignedIn

Action: Sign in → auth sheet

Used in: edit-profile, orders, wishlist, addresses, discount-pool, contact-us

Root modal titled from SIGN_IN_COPY by reason

Used in: app root

Signed-in account without details gets profile-completion pushed once

Action: → /auth/profile-completion

Used in: app shell

Splash, then timeout fallback; Continue browsing sets degraded mode

Action: Continue browsing

Used in: app shell

Deleted or suspended accounts signed out silently, no message

Used in: app shell

Know when your order ships / Turn on notifications for shipping updates, new stamps and vouchers.

Action: Turn on notifications; Not now

Used in: order-confirmation

Granted closes; denied shows warning toast; error shows danger toast

Used in: notification-permission

Alert with Open Settings

Action: Open Settings

Used in: duit-raya-flow

Location permission needed / Enable location access to autofill your address.

Used in: address-form

Update available / A newer version of the app is available. Update now to get the latest features.

Action: Update Now → store; Later

Used in: app root

None found; update modal is always dismissible (7 days)

Used in: none

Sign-in gate with reason duit-raya, camera permission, result sheets

Action: Sign in

Used in: duit-raya-flow

Title: Select Country

Used in: auth/login

Title: prop

Used in: edit-profile

Title: prop

Used in: edit-profile

Bottom sheet

Used in: product/[id]

Title: Report Review

Used in: product-reviews/[id]

Title: Items Unavailable

Used in: checkout

Title: Deliver to

Used in: checkout, my-bag

Title: Select a state

Used in: address-form

Title: step name

Used in: beauty-profile

Title: Vouchers & Promo

Used in: my-bag

Title: Choose variant

Used in: my-bag

Title: Checkout details

Used in: my-bag

Title: prop

Used in: product-list/[id]

Bottom sheet

Used in: loyalty

Bottom sheet

Used in: duit-raya-flow

Title: New Address / Edit Address

Used in: addresses

Title: row label

Used in: profile, edit-profile

Title: HeroUI Dialog

Used in: profile, app root

Title: notification-permission, notification-preferences, select-avatar

Used in: profile

HeroUI wrapper; variants default, secondary, outline, destructive, ghost, link, oval; loading prop

Used in: all screens

pressto gesture-handler redirect

Used in: all screens

Outlined accent pill, 2px border, 48px min height

Used in: profile

Settings toggle

Used in: notification-preferences

Image, brand, title, rating, price, badge, wishlist heart; skeleton twin

Used in: shop, search, wishlist, home

Order summary card

Used in: orders

Voucher card; cart coupon in voucher-sheet

Used in: discount-pool, my-bag

Swipe left to delete, unread styling, category avatars

Used in: notifications

Address with edit, delete, default

Used in: addresses

Wishlist product card

Used in: wishlist

Titled group, rounded surface, 52px rows with chevron

Used in: profile

Accent hero with avatar, name, contact line and stat tiles

Used in: profile

Label and value row

Used in: orders/[id]

HeroUI list group rows

Used in: edit-profile, notification-preferences

All, Pending, Processing, Shipped, Delivered, Cancelled

Used in: orders

All, Orders, Rewards, Promos

Used in: notifications

Shop filters

Used in: shop

Home, Shop, My Bag, Loyalty, Profile; bag count and unread badges cap at 99+

Used in: app shell

Orders, Stamps, Notifications

Used in: profile

No shared Badge; each feature draws its own

Used in: product/[id], orders/[id], discount-pool

Glass or flat 40px, label Go back

Used in: all stacks

Close control for modals

Used in: (modals)

standardHeaderStyle, opaqueHeaderOptions, modalHeaderStyle

Used in: (app), settings, legal, (modals)

Search bar header

Used in: search

Wishlist: back, Wishlist, n item(s) saved; orders appBar; beauty Header

Used in: wishlist, orders, beauty-profile

Wizard header, progress and selection card

Used in: beauty-quiz

@expo/ui BottomSheet on iOS and Compose ModalBottomSheet on Android; header, footer, dismissible

Used in: all sheets