[Hold - for payment on Wed 26th] Add an `About` and `App download links` page to Expensify.cash

[trjExpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Deliverables

1. Add About as a menu item on the Settings page between Change Password and Sign Out

2. Remove the current footer on the Settings page that contains the version and links to terms/privacy policy

3. The About page should consist of:
   -- The app logo
   -- The current app version
   -- Copy: Expensify.cash is built by a community of open source developers from around the world. Come help us build the next generation of Expensify.
   -- App download links -> open app download links page
   -- View the code -> (https://github.com/Expensify/Expensify.cash)
   -- View open jobs -> (https://www.upwork.com/ab/jobs/search/?q=Expensify%20React%20Native&sort=recency&user_location_match=2)
   -- Report a bug -> Redirect to the user's 1:1 chatReport with Concierge on Expensify.cash
   -- Footer: Read the terms of service and privacy policy

4. The App download links page should consist of:
   -- Android (https://play.google.com/store/apps/details?id=com.expensify.chat&hl=en_US&gl=US)
   -- iOS (https://apps.apple.com/us/app/expensify-cash/id1530278510)
   -- Desktop (https://expensify.cash/Expensify.cash.dmg)

Platform:

All

Notes/Photos/Videos:

Upwork URL: https://www.upwork.com/jobs/~01a5b487621b518f47
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/160606

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @Julesssss (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[shawnborton]

The .svg icons needed can be found here: Icons.zip

The $ logo already exists in assets

[nikul6]

We are firstly added menuItems in InitialPage.js as 'About' menu and then also added and used icon in

————————————————————————————————————————————————
import {
Gear, Lock, Profile, Wallet, SignOut, About
} from '../../components/Icon/Expensicons';

————————————————————————————————————————————————

//your code
{
translationKey: 'initialSettingsPage.changePassword',
icon: Lock,
action: () => { Navigation.navigate(ROUTES.SETTINGS_PASSWORD); },
},
//added menu 'About'
{
translationKey: 'initialSettingsPage.about',
icon: icon_name,
action: () => { Navigation.navigate(ROUTES.ABOUT); },
},
————————————————————————————————————————————————

And then create the about.js file in Expensify.cash/src/pages/settings/

————————————————————————————————————————————————

And then follow your remaining steps:

The About page should consist of:
-- The app logo
-- The current app version
-- Copy: Expensify.cash is built by a community of open source developers from around the world. Come help us build the next generation of Expensify.
-- App download links -> open app download links page
-- View the code -> (https://github.com/Expensify/Expensify.cash)
-- View open jobs -> (https://www.upwork.com/ab/jobs/search/?q=Expensify%20React%20Native&sort=recency&user_location_match=2)
-- Report a bug -> Redirect to the user's 1:1 chatReport with Concierge on Expensify.cash
-- Footer: Read the terms of service and privacy policy

The App download links page should consist of:
-- Android (https://play.google.com/store/apps/details?id=com.expensify.chat&hl=en_US&gl=US)
-- iOS (https://apps.apple.com/us/app/expensify-cash/id1530278510)
-- Desktop (https://expensify.cash/Expensify.cash.dmg)
————————————————————————————————————————————————

Then We are using Linking:
Android: Linking.openURL("market://details?id=<package_name>");
iOS: Linking.openURL("tms-apps://apps.apple.com/us/app/expensify-cash/id1530278510");

[Julesssss]

Hi @nikul6, could you explain your proposal a bit further please? How will About.js be built?

[nikul6]

Yes @Julesssss, I am explained in details.
create the AboutPage.js file in Expensify.cash/src/pages/settings/ directory.

And then write the code

1. The app logo
   Ans:- Expensify.cash/assets/images/expensify-cash.svg

2. The current app version
   Ans: -- import Text from '../../components/Text';
   -- Write the v1.0.41-2

3. Copy: Expensify.cash is built by a community of open source developers from around the world. Come help us build the next generation of Expensify.
   Ans: -- import Text from '../../components/Text';
   -- Expensify.cash is built by a community of open source developers from around the world. Come help us build
   the next generation of Expensify.

4. App download links -> open app download links page
   Ans: -- When user click on "App download links" to open new screen
   -- and then create the new screen in Expensify.cash/src/pages/settings/ directory.
   -- Using this icon i will create the View and then provide the store links
   -- Android: Linking.openURL("market://details?id=<package_name>");
   -- iOS: Linking.openURL("tms-apps://apps.apple.com/us/app/expensify-cash/id1530278510");
   -- Desktop: Linking.openURL("https://expensify.cash/Expensify.cash.dmg");

The .svg icons needed can be found here: Icons.zip

The $ logo already exists in assets

5. View the code -> (https://github.com/Expensify/Expensify.cash)
   Ans: -- Linking.openURL("https://github.com/Expensify/Expensify.cash");

6. View open jobs -> (https://www.upwork.com/ab/jobs/search/q=Expensify%20React%20Native&sort=recency&user_location_match=2)
   Ans: -- Linking.openURL("https://www.upwork.com/ab/jobs/search/q=Expensify%20React%20Native&sort=recency&user_location_match=2");

7. Report a bug -> Redirect to the user's 1:1 chatReport with Concierge on Expensify.cash

8. Footer: Read the terms of service and privacy policy
   Ans: and then use make Footer text "Read the terms of service and privacy policy" to give the url to opening in browser.
   Linking.openURL("https://github.com/Expensify/Expensify.cash/issues/use.expensify.com/terms")
   Linking.openURL("https://github.com/Expensify/Expensify.cash/issues/use.expensify.com/privacy")

[pranshuchittora]

Proposal

1. Add About as a menu item on the Settings page between Change Password and Sign Out

First, we need to add the about key and its respective value above/below this line 👇🏼
https://github.com/Expensify/Expensify.cash/blob/2710965fd437dd65ac2842d3ff53a93c87e64108/src/languages/en.js#L136

After that, we need to define the menu items, something like this in the initialPage.js

 {
        translationKey: 'initialSettingsPage.about',
        icon: aboutIcon,
        action:   action: () => { Navigation.navigate(ROUTES.SETTINGS_ABOUT) },
   },

2. Remove the current footer on the Settings page that contains the version and links to terms/privacy policy
   This is pretty straightforward.

2.1 We need to remove the entry from the en.js for all the phrase/s
2.2 Then we need to remove the UI part from the initialPage.js

3. The About page should consist of:

• The app logo: Straightforward with react-native-svg
• The current app version: From package.json
• Copy: Expensify.cash is built by a community of open source developers from around the world. Come help us build the next generation of Expensify: Simple text component
• App download links -> open app download links page: A menu item, on clicking open a new screen in the same stack (navigation.navigate(APP_DOWNLOAD_LINKS))
• View the code -> (https://github.com/Expensify/Expensify.cash): Simple URL open OR open the URL in a webview
• View open jobs -> (https://www.upwork.com/ab/jobs/search/?q=Expensify%20React%20Native&sort=recency&user_location_match=2): Simple URL open OR open the URL in a webview
• Report a bug -> Redirect to the user's 1:1 chatReport with Concierge on Expensify.cash: Either navigation to the chat or link open.
• Footer: Read the terms of service and privacy policy: Pretty straightforward, can be migrated from the current settings page.

Best Practices

• Values shouldn’t be hardcoded so that we can inject them dynamically (say change of app language etc)
• Follow the coding guidelines of Expensify.
• Modularising the code.

Testing Roadmap

• Add snapshots based render tests using @testing-library/react-native
• Check for navigation on click by mocking the navigation

[Julesssss]

Thanks for the proposals.

@nikul6 appreciate the extra info, but it would be great to start wth a clearly defined proposal for the next issue. Please continue to look through our issues

@pranshuchittora would you like to make a start on the implementation? I don't think the render tests are necessary (as we haven't yet established best practices). Would love to see the mocked Navigation test though.

[pranshuchittora]

@Julesssss I would love to get started with this ASAP.
Once again thanks a lot :)

I will start by creating a draft PR