[Pay on Thursday 27th May] [IOU] Create Currency Modal, with geolocation and Location permissions

If you haven’t already, check out our contributing guidelines for onboarding!

---

Context

This issue builds on top of the existing IOU Modal, which was implemented in this PR. The IOU Amount step page has already been created and is a controlled component (IOUModal manages its state). The amount step allows users to select the IOU request or bill split amount, depending on how they launched the Modal.

We now seek to extend functionality. We want to use a Geolocation library and an existing API to detect the users preferred currency, allowing them to change it manually, too. We also need to implement a permissions library to request location permission from the user if they decide to change their currency, as we will then seek to detect it automatically from then on.

To open the Modal, you can navigate to localhost:8080/iou/request AND localhost:8080/iou/split.

You can also launch the IOUModal by temporarily modifying the routes in CreateMenu. Launch the request money flow with Navigation.navigate(ROUTES.IOU_REQUEST) and the bill split flow with Navigation.navigate(ROUTES.IOU_BILL)

Mobile & mobile web

Web & Desktop

Deliverables:

1. Create a new API.js function for calling our GetPreferredCurrency API and another for calling GetCurrencyList. Details at the bottom of this post.
2. Add the react-native-geolocation and react-native-permissions libraries to the project.
3. We should create a new function within the PersonalDetails.js Action which calls the new GetPreferredCurrency API.js function
   1. If the location permission has already been granted, we will get lat and lon from getCurrentPosition and pass the params to GetPreferredCurrency, else we ignore those query params (as they are optional)
   2. We should then call GetCurrencyList matching the currency we received from the previous request to get the correct symbol for that currency. (the full currency list should also be persisted to Onyx via a new key: currencyList)
   3. We then persist both the preferredCurrencyCode AND preferredCurrencySymbol data in Onyx, similar to how we store the users timezone
4. When the IOUModal is opened, we should subscribe to the MY_PERSONAL_DETAILS Onyx key:
   1. We take updated values of preferredCurrencySymbol and preferredCurrencyCode, setting IOUModal props for both of these (currencySelected prop should be deleted, selectedCurrency should be modified to be of type Object: selectedCurrency: { currencyCode: String, currencySymbol: String })
   2. The currency Text component should be updated with this.props.selectedCurrency.currencySymbol
5. When the currency symbol is tapped, a CurrencyModal should be displayed. This is a new Modal which needs the following functionality:
   1. The Modal should follow the structure of our existing Modals
   2. Retrieve all currencies from GetCurrencyList via another new Action function and again persisting this data to Onyx under the currencyList key.
   3. using the above data, we should display all currencies to the user in a FlatList, using a new OptionsListUtils variant
   4. If the user makes a currency selection then we should pass this value back to the IOUModal via a callback and update the preferredCurrencyCode AND preferredCurrencySymbol Onyx data
   5. The modal should then close, returning the user to the IOUAmount step, with the updated currency symbol

GetPreferredCurrency API Example of the API which is used to retrieve the users preferred currency

https://www.expensify.com/api?command=GetPreferredCurrency&latitude=0.01&longitude=-1.44
latitude - optional param
longitude - optional param

// Response
{
  "currency": "GBP",
  "jsonCode": 200,
  "requestID": "0uBdrX"
}

GetCurrencyList API Example of the API which returns all supported currency and symbol parings

https://www.expensify.com/api?command=Mobile_GetConstants&data=[%22currencyList%22]

// Response
{
  "currencyList": "{"AED":{"symbol":"Dhs","name":"UAE Dirham","ISO4217":"784"},"AFN":{"symbol":"Af","name":"Afghan Afghani","ISO4217":"971"},"ALL":{"symbol":"ALL","name":"Albanian
	...
  }}",
  "jsonCode": 200,
  "requestID": "wjy42x"
}

Original issue: https://github.com/Expensify/Expensify/issues/157871#event-4483831003

Upwork Issue: https://www.upwork.com/ab/applicants/1373765458169090048/job-details

[rameshhpathak]

Got it. Thanks. Also, have submitted the proposal on job posting under the name Ramesh Pathak.

[rameshhpathak]

@kadiealexander Hi, sorry! I am resolving the outstanding issues within next half an hour!