ProjectR Docs
Screen MapMobile app

Profile & settings

Mobile app: every screen, state and flow in Profile & settings.

10 screens and overlays, 65 states, 6 flows. Frames show a real screenshot where one was captured and a wireframe card where the state needs data or conditions a device run cannot produce.

Flows

Guest opens Profile

Step 1
Profile, Guest layout (iOS)Profile, Guest layout (Android)
Profile shows the guest layout with a Sign in button
Tap Sign in
Step 2
Sign in to The Raw (iOS)Sign in to The Raw (Android)
Login sheet opens
Sign in
Step 3
Profile (iOS)Profile (Android)
Profile now shows the signed-in layout

Branches and edge cases

Edgefrom step 1
Language (iOS)Language (Android)
Language row
Successfrom step 1
FAQ, Static content (iOS)FAQ, Static content (Android)
FAQ row
Gatefrom step 1
Contact Us, Guest (iOS)Contact Us, Guest (Android)
Contact Us row
Successfrom step 1
Legal & Policies, Static list only (iOS)Legal & Policies, Static list only (Android)
Legal and Policies row
Successfrom step 1
Terms of Service (iOS)Terms of Service (Android)
Legal document opens
Errorfrom step 1
Wireframe

Terms of Service

Error

Unable to Load Document

URI null or onError; Try Again and Open in Browser

Not reachable on a device: Needs a network fault, crash, race or code change to show

Document fails to load
Flow diagram

Sign out

Step 1
Profile (iOS)Profile (Android)
Profile with the Sign out button
Tap Sign out
Step 2
Sign out? (iOS)Sign out? (Android)
Confirm dialog: Sign out?
Confirm
Step 3
Wireframe

Sign out?

Loading

Signing out

Confirm in flight; spinner, buttons and dismissal disabled

Not reachable on a device: Transient loader lasting a moment before Home as guest

Loader while the session ends
Success
Step 4
Home, Signed out (iOS)Home, Signed out (Android)
Home as a guest

Branches and edge cases

Edgefrom step 2
Profile (iOS)Profile (Android)
Cancel
Errorfrom step 3
Wireframe

Profile

Error

Sign out failure silent

handleFullSignOut only logs; resets after 100 ms

Not reachable on a device: Needs a network fault, crash, race or code change to show

Failure logged only
Flow diagram

Delete account

Step 1
Profile (iOS)Profile (Android)
Profile with the Delete Account link
Tap Delete Account
Step 2
Delete Account (iOS)Delete Account (Android)
Delete Account confirm dialog
Confirm Delete
Step 3
Wireframe

Delete Account

Success

Signed out by backend

Profile marked deleted; hook signs user out to guest

Not reachable on a device: Confirming deletes the QA account; never run

Backend marks the account deleted and signs out
Auto sign out
Step 4
Home, Signed out (iOS)Home, Signed out (Android)
Home as a guest

Branches and edge cases

Edgefrom step 2
Profile (iOS)Profile (Android)
Cancel
Errorfrom step 2
Wireframe

Delete Account

Error

Delete request failed

Mutation throws; toast Could not delete account

Not reachable on a device: Needs a network fault, crash, race or code change to show

Request throws
Edgefrom step 2
Wireframe

Delete Account

Edge

Result ignored

success false (admin, already deleted) closes with no feedback

Not reachable on a device: Needs a network fault, crash, race or code change to show

Result is success false
Edgefrom step 2
Wireframe

Delete Account

Edge

Soft delete

Copy says permanently removed; backend only sets accountStatus deleted

Not reachable on a device: Confirming deletes the QA account; never run

Soft delete
Flow diagram

Language switch

Step 1
Profile (iOS)Profile (Android)
Profile with the Language row
Tap Language
Step 2
Language (iOS)Language (Android)
Language menu lists the languages
Pick a new language
Step 3
Profile (iOS)Profile (Android)
App reloads and Profile shows the new language

Branches and edge cases

Edgefrom step 2
Language, Current language no-op (iOS)Language, Current language no-op (Android)
Current language
Edgefrom step 2
Wireframe

Language

Edge

Reload unavailable

Updates.reloadAsync throws; swaps in place, some copy stays old

Not reachable on a device: Dev-client only path; a release build reloads

Reload unavailable (dev client)
Flow diagram

Developer unlock

Step 1
Profile (iOS)Profile (Android)
Signed-in Profile with the version line at the bottom
Tap version 10 times
Step 2
App version, Tap counter for developers (iOS)App version, Tap counter for developers (Android)
Version row counts the taps for a developer phone
Tenth tap
Step 3
Developer Tools, Developer unlock (iOS)Developer Tools, Developer unlock (Android)
Developer Tools section appears

Branches and edge cases

Edgefrom step 2
App version (iOS)App version (Android)
Not a developer phone
Gatefrom step 2
App version, Hidden for guests (iOS)App version, Hidden for guests (Android)
Guest cannot see the row
Successfrom step 3
Know when your order ships (iOS)Know when your order ships (Android)
Notification Permission row
Successfrom step 3
Sign in to The Raw (iOS)Sign in to The Raw (Android)
Login Page row
Successfrom step 3
Welcome to The Raw (iOS)Welcome to The Raw (Android)
Profile Completion row
Edgefrom step 3
Developer Tools, Storage rows only log (iOS)Developer Tools, Storage rows only log (Android)
Storage rows only log
Flow diagram

Signed-in Profile menu

Step 1
Profile (iOS)Profile (Android)
Profile header, stat tiles and settings rows
Tap the pencil
Step 2
Edit Profile (iOS)Edit Profile (Android)
Edit Profile form
Tap the avatar
Step 3
Choose Your Avatar, Confirm disabled until changed (iOS)Choose Your Avatar, Confirm disabled until changed (Android)
Avatar picker, Confirm waits for a change
Pick and confirm
Step 4
Edit Profile, Profile updated (iOS)Edit Profile, Profile updated (Android)
Saved, toast confirms
Back, then My Addresses
Step 5
My Addresses (iOS)My Addresses (Android)
My Addresses lists saved addresses

Branches and edge cases

Errorfrom step 2
Edit Profile, Field validation (iOS)Edit Profile, Field validation (Android)
Field validation
Errorfrom step 2
Wireframe

Edit Profile

Error

Update failed

Toast with server message (taken email or phone) or Failed to update profile

Not reachable on a device: Needs a network fault, crash, race or code change to show

Save fails
Edgefrom step 2
Edit Profile, Date of birth picker (iOS)Edit Profile, Date of birth picker (Android)
Date of birth picker
Successfrom step 1
My Beauty Profile, Completed profile (iOS)My Beauty Profile, Completed profile (Android)
Beauty Profile row
Edgefrom step 1
Wireframe

Notification Preferences

Loading

Loading your preferences

Centered spinner (progressbar role) until the backend answers; no default toggles are shown

Not captured yet

Notification Settings row
Successfrom step 1
Contact Us, Message Sent (iOS)Contact Us, Message Sent (Android)
Contact Us, message sent
Errorfrom step 1
Wireframe

Contact Us

Error

Failed to Send

Mutation throws; toast Something went wrong

Not reachable on a device: Needs a network fault, crash, race or code change to show

Contact Us, send fails
Emptyfrom step 5
My Addresses, No saved addresses (iOS)My Addresses, No saved addresses (Android)
No saved addresses
Gatefrom step 5
My Addresses, Delete address confirm (iOS)My Addresses, Delete address confirm (Android)
Delete address confirm
Flow diagram

Screens and states

Choose Your Avatar

Wireframe

Choose Your Avatar

Not captured yet

Modal(modals)/select-avatar

Choose Your Avatar

Pick a catalog avatar from a four-column grid.

src/app/(modals)/select-avatar.tsx

Entry

  • Avatar section in Edit Profile

Exits

  • Confirm → Edit Profile
  • Close → dismiss without saving

States · 9

Loading
12 gray tiles · Avatar catalog query is undefined.src/app/(modals)/select-avatar.tsx:129
Empty
No avatars available · Ask an admin to activate avatars in the dashboard.src/app/(modals)/select-avatar.tsx:146
Edge
Confirm disabled until changed · Button stays disabled until the draft differs from the saved avatar.src/app/(modals)/select-avatar.tsx:117
Edge
Saved when Edit Profile is saved · Confirm only writes to the local store; the server update happens on profile save.src/app/(modals)/select-avatar.tsx:98
Offline
No error state · Offline shows the skeleton indefinitely; no signed-out guard in the file.src/app/(modals)/select-avatar.tsx:129
Loading
Catalogue loading · 12 grey placeholder tiles, not Skeletonsrc/app/(modals)/select-avatar.tsx:129
Edge
Tile selected · Accent border and check badgesrc/app/(modals)/select-avatar.tsx:71
Edge
Confirm disabled · Draft equals committed avatarsrc/app/(modals)/select-avatar.tsx:117
Edge
Title mismatch · Layout says Select Avatar, screen shows Choose Your Avatarsrc/app/(modals)/_layout.tsx:61

Captured states

Choose Your Avatar, Confirm disabled until changed (iOS)Choose Your Avatar, Confirm disabled until changed (Android)
Confirm disabled until changed

Profile

Profile (iOS)Profile (Android)
Screen(app)/(tabs)/profile

Profile

Account hub with stats, menu rows, sign out and delete account.

src/app/(app)/(tabs)/profile/index.tsx

Entry

  • Bottom tab Profile
  • Language reload return
  • Back fallback from wishlist and contact-us
  • Back fallback from edit-profile

Exits

  • Pencil → Edit Profile
  • Orders stat → Orders
  • Stamps stat → Loyalty tab
  • Notifications stat → Notifications
  • Shopping and Support rows → their screens
  • Sign out → sign-out dialog

States · 12

Loading
Auth loading · useAuthStatus isLoading; PageLoader Loading...src/app/(app)/(tabs)/profile/index.tsx:170
Loading
Stats skeleton · Orders, unread or loyalty query still undefinedsrc/features/settings/components/sections/profile-header-card.tsx:168
Edge
Stats never resolve · Query never answers; skeleton stays, never a false 0src/app/(app)/(tabs)/profile/index.tsx:96
Loading
Signing out · isSigningOut; loader and disabled button say Signing out...src/app/(app)/(tabs)/profile/index.tsx:358
Edge
Avatar fallback · No catalog or legacy image; initials circlesrc/features/settings/components/sections/profile-header-card.tsx:98
Edge
Phone-only account · Synthetic email; identity line shows phone numbersrc/app/(app)/(tabs)/profile/index.tsx:235
Edge
Name missing · fullName empty; shows Usersrc/app/(app)/(tabs)/profile/index.tsx:239
Gate
Guest layout · Guest sees Welcome to Your Profile card, Language, Support, Aboutsrc/features/settings/components/sections/guest-login-card.tsx:46
Error
Tab crash · Render error; TabErrorBoundary card with Try Againsrc/app/(app)/(tabs)/profile/index.tsx:148
Error
Sign out failure silent · handleFullSignOut only logs; resets after 100 mssrc/app/(app)/(tabs)/profile/index.tsx:336
Edge
Joined date never renders · userData omits createdAt so the text is dead codesrc/app/(app)/(tabs)/profile/index.tsx:247
Edge
Developer Tools section · Developer phone unlocked via 10 version tapssrc/app/(app)/(tabs)/profile/index.tsx:421

Captured states

Profile, Guest layout (iOS)Profile, Guest layout (Android)
Guest layout

Sign out?

Sign out? (iOS)Sign out? (Android)
Dialogsign-out-dialog

Sign out?

Confirms sign out. Body says You will need to sign in again.

src/shared/components/ui/dialog/sign-out-confirmation-dialog.tsx

Entry

  • Sign out button on Profile

Exits

  • Cancel → Profile
  • Sign out → Home, signed out

States · 2

Loading
Signing out · Confirm in flight; spinner, buttons and dismissal disabledsrc/shared/components/ui/dialog/sign-out-confirmation-dialog.tsx:37
Edge
Hard sign out variant unused · Remove All Data? / Remove All exists, never set by Profilesrc/shared/components/ui/dialog/sign-out-confirmation-dialog.tsx:43

Delete Account

Delete Account (iOS)Delete Account (Android)
Dialogdelete-account-dialog

Delete Account

Confirms permanent account deletion with a destructive button.

src/shared/components/ui/feedback/confirmation-dialog.tsx

Entry

  • Delete Account link on Profile

Exits

  • Cancel → Profile
  • Delete → request deletion, dialog closes

States · 5

Error
Delete request failed · Mutation throws; toast Could not delete accountsrc/app/(app)/(tabs)/profile/index.tsx:315
Edge
Always closes · Dialog closes in finally, even on failuresrc/app/(app)/(tabs)/profile/index.tsx:322
Edge
Result ignored · success false (admin, already deleted) closes with no feedbackpackages/backend/convex/auth/mutations.ts:1157
Success
Signed out by backend · Profile marked deleted; hook signs user out to guestsrc/features/auth/hooks/use-post-auth-redirect.ts:112
Edge
Soft delete · Copy says permanently removed; backend only sets accountStatus deletedpackages/backend/convex/auth/mutations.ts:1172

Language

Language (iOS)Language (Android)
Inlinelanguage-menu

Language

Native anchored menu on the Language row; app reloads to apply.

src/shared/components/ui/anchored-menu.tsx

Entry

  • Language row on Profile

Exits

  • Pick language → app reload, back on Profile
  • Pick current language → no-op

States · 3

Edge
Reload unavailable · Updates.reloadAsync throws; swaps in place, some copy stays oldsrc/features/settings/hooks/use-language-menu.ts:30
Edge
Current language no-op · Choosing the active language does nothingsrc/features/settings/hooks/use-language-menu.ts:24
Edge
Arabic not offered · ar.json exists but only English and Bahasa Malaysia are listedsrc/shared/i18n/resources.ts:19

Captured states

Language, Current language no-op (iOS)Language, Current language no-op (Android)
Current language no-op

Developer Tools

Wireframe

Developer Tools

Needs data: Needs the QA phone on the developer allow-list

Inlinedeveloper-tools

Developer Tools

Debug rows shown after 10 taps on the version label by the developer phone.

src/features/settings/components/sections/developer-section.tsx

Entry

  • 10 taps on app version

Exits

  • Notification Permission → notification-permission modal
  • Login Page (OTP) → auth login
  • Profile Completion → profile completion

States · 3

Gate
Developer unlock · Needs developer phone and 10 taps; tap count resets after 3 ssrc/features/settings/hooks/use-developer-settings.ts:59
Edge
Re-locks on remount · Unlock is component state; no lock control in the UIsrc/features/settings/hooks/use-developer-settings.ts:77
Edge
Storage rows only log · MMKV and SecureStore rows call console.warnsrc/features/settings/components/sections/developer-section.tsx:67

Captured states

Developer Tools, Developer unlock (iOS)Developer Tools, Developer unlock (Android)
Developer unlock
Developer Tools, Storage rows only log (iOS)Developer Tools, Storage rows only log (Android)
Storage rows only log

App version

App version (iOS)App version (Android)
Inlineapp-version

App version

Shows vX.Y.Z at the foot of Profile; only version display in the app.

src/features/settings/components/app-version.tsx

Entry

  • Bottom of Profile, signed in

Exits

  • Tap x10 → Developer Tools

States · 2

Gate
Hidden for guests · Guests never see the version linesrc/app/(app)/(tabs)/profile/index.tsx:432
Edge
Tap counter for developers · Shows v1.x.x (n) only for developerssrc/features/settings/components/app-version.tsx:39

Captured states

App version, Hidden for guests (iOS)App version, Hidden for guests (Android)
Hidden for guests
App version, Tap counter for developers (iOS)App version, Tap counter for developers (Android)
Tap counter for developers

Edit Profile

Edit Profile (iOS)Edit Profile (Android)
Screen(app)/edit-profile

Edit Profile

Edit name, email, occupation, gender, date of birth and avatar.

src/app/(app)/edit-profile.tsx

Entry

  • Profile pencil
  • Beauty profile
  • Select avatar confirm

Exits

  • Save → Profile, success toast
  • Avatar tap → Select Avatar
  • Delivery row → My Addresses
  • Back → Profile

States · 11

Gate
Guest · Not authenticated; Sign in to The Raw gatesrc/app/(app)/edit-profile.tsx:123
Loading
Profile loading · PageLoader Loading profile...src/app/(app)/edit-profile.tsx:136
Edge
No profile · Query resolved null; redirect to profile completionsrc/app/(app)/edit-profile.tsx:154
Edge
Synthetic email · Phone-only account; Email field starts emptysrc/app/(app)/edit-profile.tsx:170
Loading
Saving · Button shows Saving... with spinner, disabledsrc/features/beauty-profile/components/edit-profile-form.tsx:408
Success
Profile updated · Toast Success / Profile updated successfullysrc/app/(app)/edit-profile.tsx:85
Error
Update failed · Toast with server message (taken email or phone) or Failed to update profilesrc/app/(app)/edit-profile.tsx:93
Error
Field validation · Invalid email, occupation over 100, under 13 years, future datesrc/features/beauty-profile/schemas/edit-profile-schema.ts:14
Edge
Full name unvalidated · Screen doc says required but schema has no rulesrc/features/beauty-profile/schemas/edit-profile-schema.ts:14
Edge
Unknown stored gender · Select starts empty; save leaves value untouchedsrc/features/beauty-profile/components/edit-profile-form.tsx:210
Edge
Date of birth picker · iOS inline wheel with Done, Android dialog; 1900 to todaysrc/features/beauty-profile/components/edit-profile-form.tsx:327

Captured states

Edit Profile, Profile updated (iOS)Edit Profile, Profile updated (Android)
Profile updated
Edit Profile, Field validation (iOS)Edit Profile, Field validation (Android)
Field validation
Edit Profile, Date of birth picker (iOS)Edit Profile, Date of birth picker (Android)
Date of birth picker

My Addresses

My Addresses (iOS)My Addresses (Android)
Screenprofile/settings/account/addresses

My Addresses

Address book to add, edit, delete and set default.

src/app/(app)/(tabs)/profile/settings/account/addresses.tsx

Entry

  • Profile My Addresses row
  • Edit Profile Delivery row

Exits

  • Add new address → address form sheet
  • Edit card → address form sheet
  • Back → Profile

States · 10

Loading
Auth loading · PageLoader Loading...src/app/(app)/(tabs)/profile/settings/account/addresses.tsx:81
Gate
Guest · Sign in to manage addresses; Sign in CTAsrc/app/(app)/(tabs)/profile/settings/account/addresses.tsx:85
Loading
List loading · Two AddressCardSkeleton rowssrc/app/(app)/(tabs)/profile/settings/account/addresses.tsx:191
Empty
No saved addresses · Empty list; pinned Add new address button is the CTAsrc/app/(app)/(tabs)/profile/settings/account/addresses.tsx:196
Edge
Delete address confirm · Native alert Delete address? with Cancel and Deletesrc/app/(app)/(tabs)/profile/settings/account/addresses.tsx:126
Success
Address deleted · Toast Address deletedsrc/app/(app)/(tabs)/profile/settings/account/addresses.tsx:138
Error
Delete failed · Toast Couldn't delete the address. Please try again.src/app/(app)/(tabs)/profile/settings/account/addresses.tsx:145
Success
Default updated · Toast Default address updatedsrc/app/(app)/(tabs)/profile/settings/account/addresses.tsx:156
Error
Set default failed · Toast Couldn't set the default address.src/app/(app)/(tabs)/profile/settings/account/addresses.tsx:165
Edge
Rows animate in · FadeInDown stagger, reduce-motion awaresrc/app/(app)/(tabs)/profile/settings/account/addresses.tsx:206

Captured states

My Addresses, No saved addresses (iOS)My Addresses, No saved addresses (Android)
No saved addresses
My Addresses, Delete address confirm (iOS)My Addresses, Delete address confirm (Android)
Delete address confirm

My Discounts

My Discounts (iOS)My Discounts (Android)
Screenprofile/settings/account/discount-pool

My Discounts

List of earned vouchers with ready and history filters.

src/app/(app)/(tabs)/profile/settings/account/discount-pool.tsx

Entry

  • Profile My Discounts row

Exits

  • Sign in → login sheet
  • Start Earning → Loyalty tab
  • Back → Profile

States · 8

Loading
Auth loading · PageLoader Loading...src/app/(app)/(tabs)/profile/settings/account/discount-pool.tsx:53
Gate
Guest · Sign in to view discounts; Sign in CTAsrc/app/(app)/(tabs)/profile/settings/account/discount-pool.tsx:58
Loading
Vouchers loading · vouchersResult undefined; VoucherSkeletonsrc/features/vouchers/components/voucher-list.tsx:412
Error
Thrown query · ApiErrorBoundary Discount Pool with retrysrc/app/(app)/(tabs)/profile/settings/account/discount-pool.tsx:85
Error
Unable to load vouchers · Error prop view; unreachable since screen hardcodes error nullsrc/features/vouchers/components/voucher-list.tsx:368
Empty
No Discounts Yet · User has no voucherssrc/features/vouchers/components/voucher-list.tsx:391
Empty
Empty filter · No ready discounts or No discount history; toggle buttonsrc/features/vouchers/components/voucher-list.tsx:395
Edge
Pull to refresh no-op · RefreshControl wired to a no-op refetchsrc/app/(app)/(tabs)/profile/settings/account/discount-pool.tsx:41

Notifications

Mobile app: every screen, state and flow in Notifications.

Legal & support

Mobile app: every screen, state and flow in Legal & support.

On this page

FlowsGuest opens ProfileSign outDelete accountLanguage switchDeveloper unlockSigned-in Profile menuScreens and statesChoose Your AvatarProfileSign out?Delete AccountLanguageDeveloper ToolsApp versionEdit ProfileMy AddressesMy Discounts