FSG: RN UI prototype - III, Profile - Help

Fast Scan Mobile Application is a modern and intuitive iOS and Android mobile application that enables Castrol customers to redeem incentive coupon codes.

This is the 3rd challenge in this series.

Tech stack

• React Native
• Typescript
• Expo CLI
• Minimum iOS: iOS 11
• Minimum Android: Android 7.0

Scope

• Profile
• Scanning
• Benefits
• Help

Resources

• Marvel: Provided in forums
• Handoff storyboard: Provided in forums
• Design source: Provided in forums
• Existing RN APP: Provided in forums

Individual Requirements

In part 3, the requirement is to update the given RN native app by adding more features/flows. The app should be responsive to multiple screen resolutions, and adapt to the notch screens.

The given submission uses React Native CLI, so you can either keep using React Native CLI or convert it to Expo CLI

• The Home, Points & Gifts menu links in the bottom nav bar can be dead links as they are out of scope.
• Don’t hard code data into components, it should come from JSON format data files.
• This is a multilingual app, it should support English & Thai languages. To get the Thai translation of keywords & text, use google translate.
• Use the existing english & thai json files to add more text specific to this challenge.

0. Placeholder Dashboard

This page is out of scope. Create a placeholder dashboard page, the layout can be similar to the help page with just the bottom nav, two profile links: John Smith (Mechanic) & Samantha Jones (Workshop owner) & a Benefits links.

• Clicking this link should open the profile page.
• Clicking the QR code icon on the bottom nav should navigate to the scanning flow.
• Clicking the Help link on the bottom nav should navigate to the help page.
• Clicking the Benefits link, takes us to the benefits flow.
• All other nav links can be dead links, should do nothing.

1. Profile

Ref: Profile flow

There are two types of profile, profile of Mechanic & profile of Workshop owner.

1.1 Mechanic profile

• Clicking the _John Smith (Mechanic) _profile link brings the user to this page.
• Implement the flow related to this by following the storyboard.
• Clicking the “Mechanic ACM workshop” should not do anything. This is a plain text.
• Multi-lang should be supported for all texts in this flow.
• Multi-lang should be supported for all texts in this flow.

1.2 Workshop owner profile

• Clicking the _Samantha Jones (Workshop owner) _profile link brings the user to this page.
• Implement the flow related to this by following the storyboard.
• Clicking the “Workshop owner ACM workshop” should not do anything. This is a plain text.
• Multi-lang should be supported for all texts in this flow.

2. Scanning

Ref: Scanning flow

Clicking the QR code scan link in the footer section takes the user to this flow.

• The Camera access page should only appear if the camera access isn’t allowed.
• If camera access is allowed directly take the user to the scanning page.
• The align the QR code.. message should appear if there’s no QR code or it’s not properly aligned.
• When scanning is in progress show this: https://marvelapp.com/prototype/14c92hij/screen/78852756
• If scanning fails or timeout then show this screen https://marvelapp.com/prototype/14c92hij/screen/78852759
• Implement both the error cases https://marvelapp.com/prototype/14c92hij/screen/79106919 & https://marvelapp.com/prototype/14c92hij/screen/79106920
• Clicking the close “x” icon or the Scan Later button should navigate to the “Placeholder dashboard” page.
• Multi-lang should be supported for all texts in this flow.

.

3. Benefits

Ref: Benefits flow

Follow the storyboard to implement this flow.

• The back button should navigate to the “Placeholder dashboard” page.
• Multi-lang should be supported for all texts in this flow.

4. Help

Ref: Help flow

Follow the storyboard to implement this flow.

• Language drop-down should have “English & Thai” option.
• Clicking Tap to begin chat should do nothing
• Clicking the customer care number should make a call.
• In the comments section, the max text length should be restricted to 5000 & the 0/5000 count should change as user types.
• Multi-lang should be supported for all texts in this flow.

Submission deliverable

• Submit a patch against the master branch.
• Update the Readme.md file if required.
• Verification doc or video is NOT required.