[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="); 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="); -- 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

[trjExpensify]

Reopening and popped on hold for payment in 7 days with no regressions.

[pranshuchittora]

Hi @trjExpensify any update on the payment

[trjExpensify]

Yep, completed the contract today. Thanks, @pranshuchittora!