FSG: RN UI prototype - II, Walkthrough - Points

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 2nd challenge in this series.

Tech stack

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

Scope

• Walkthrough
• Dashboard
• Rewards
• Points

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 2, 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 help & QR scan 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.

1. Walkthrough

Ref: Walkthrough flow

This flow should be visible to the first time users only. Create a config variable _isWalkthroughEnabled _in userSettings. A userSettings config can be created that will store the user related info, how you create this is up to you. If isWalkthroughEnabled is true then the walkthrough page will be visible after login, otherwise after login the user should be directly navigated to the dashboard.

future.

• Clicking Next/Prev should navigate to next/prev flows.
• Clicking Skip or X icon should skip/cancel the walkthrough.
• Multi-lang should be supported for all texts in this flow.

2. Dashboard

Ref: Dashboard flow (005_003_dashboard to 005_007_dashboard)

Follow the storyboard flow to implement this.

• View Silver benefits can be a dead link. The corresponding flow is out of scope.
• The QR code scanner is out of scope. Clicking this button should do nothing.
• Clicking the Profile icon should do nothing. The corresponding flow is out of scope.
• The alternate version (006_003_dashboardalt) of the dashboard page is out of scope.
• Redeem points navigate to the 3. Rewards flow, explained below.
• Show scan history should navigate to the scan history page of the Points flow.
• Multi-lang should be supported for all texts in this flow.

3. Rewards

Ref: Rewards flow

Clicking the “Gifts” icon in the bottom nav bar navigates to this page.

• The points to expire section may or maynot appear, dependending to value of points to expire. If it’s null or 0, this section should not appear. Create an attribute pointsToExpire in _userSettings _to simulate both the cases & document this in the readme.
• They see all buttons in different sections like “Food & beverages, Vacations…” show all the options as it’s here.
• See All pages of all the sections (Food & beverages, Vacations…) should show the same page with different page titles depending on the section.
• Implement the UI of the filter section. The actual filtering is out of scope.
• For the “Custom” option of the time, make sure to implement the range picker.
• The quick navigation menu also shows these see all pages.
• Multi-lang should be supported for all texts in this flow.

4. Points

Ref: Points flow

Clicking the “Points” icon in the bottom nav bar opens this page.

• Implement this flow by following the storyboard, it’s straightforward.
• Implement the UI of the filter section. The actual filtering is out of scope.
• For the “Custom” option of the time, make sure to implement the range picker.
• Multi-lang should be supported for all texts.

Submission deliverable

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