[Chat] [IOU] Create IOU Amount step

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

---

This issue builds on top of the existing IOU Modal, which was implemented in this PR. The IOUAMount step component has already been created (original PR) and functions as a controlled component (IOUModal manages its state).

The page allows users to select the amount they are requesting from a single user or group. To open the Modal, you can navigate to localhost:8080/#/iou/request AND localhost:8080/#/iou/split.

Mobile: Web/Desktop:

Deliverables:

1. Create the UI displayed in the above screenshot: An amount text field (not an input field), a currency symbol text field, a collection of buttons making up the BigNumberPad (mobile and mobile web only), and a button for progressing to the next step.
2. As the Component state is managed by IOUModal, selectedCurrency and amount should be added as IOUAmount props.
3. Add callback functions as addition props (numberPressed, backspacePressed, & currencySelected), similar to the already existing onStepComplete prop.
4. Persist selectedCurrency(in code form: ‘GBP, USD, EUR’) and amount within IOUModal’s state, pass this down to the IOUAMount Component via the props you just added.
5. For now, currency will remain hardcoded as ‘USD’ within the IOUModal state. The currency Text component can also be set to use the currency code, instead of the currency symbol (currency will be added in a separate issue).
6. When the function props are called, verify the validity of the input via a decimal number regex, and update the Amount Text field if valid
7. When the currencySelected function prop is called, update the currency code within IOUModal state (for now, this prop function won’t be called – but please test it with a currency code, like USD, EUR, AUD).
8. Enable/disable the next button depending on the validity of the amount (matching against the decimal number regex)
9. The page title should be set to ‘Request Money’ or ‘Split Bill’ based upon the current route (example). The current solution should be replaced.

Job posting: https://www.upwork.com/jobs/~01e9946a32707d6c32

Edit: Added Web/Desktop mock

[tugbadogan]

Hi @johnmlee101,

Thanks for flagging this issue. In order to resolve this issue, I’m planning to add a prop to TextInputFocusable component to control cursor position (whether we should keep the cursor at the end all the time) and set this prop in IOUAmount page.

I will send the PR soon.

[roryabraham]

I found how to design separate design for native app and web/desktop. But I’m not sure how to handle Web and Mobile Web difference without adding platform specific code in the module. Do you have any example about that?

Hi @tugbadogan, what I would recommend in this case is to differentiate by screen width instead of platform. So you can wrap your component with the withWindowDimensions HOC, and then check the value of the isSmallScreenWidth prop. If true, you can assume you’re dealing with a mobile device. If false, assume you’re dealing with a laptop or desktop computer. That’s probably sufficient for this use case in my opinion.