Page MenuHomePhabricator

[native] Terms of Use & Privacy modal
ClosedPublic

Authored by kamil on Dec 6 2022, 6:59 AM.
Tags
None
Referenced Files
F2126401: D5831.diff
Thu, Jun 27, 5:08 AM
Unknown Object (File)
Wed, Jun 26, 11:31 AM
Unknown Object (File)
Wed, Jun 26, 11:31 AM
Unknown Object (File)
Wed, Jun 26, 11:31 AM
Unknown Object (File)
Wed, Jun 26, 11:31 AM
Unknown Object (File)
Wed, Jun 26, 11:31 AM
Unknown Object (File)
Wed, Jun 26, 11:31 AM
Unknown Object (File)
Wed, Jun 26, 11:31 AM
Subscribers

Details

Summary

Modal showing Terms of Use and Privacy Policy acknowledgment

Design:

Screenshot 2022-12-06 at 16.04.35.png (1×810 px, 517 KB)

Design (light mode)

Screenshot 2022-12-06 at 16.06.03.png (1×812 px, 500 KB)

Error flow:

Test Plan
  1. Check if links open properly
  2. Check if the accept button works properly
  3. Check if there is no possibility to close the modal in a different way than clicking I accept

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

kamil held this revision as a draft.
kamil edited the test plan for this revision. (Show Details)
kamil published this revision for review.Dec 8 2022, 6:55 AM
tomek requested changes to this revision.Dec 9 2022, 10:51 AM

Two visual issues:

  1. Loading indicator isn't centered vertically
  2. Button height is different when loading indicator is present
native/account/terms-and-privacy-modal.react.js
10–11 ↗(On Diff #19254)

We can merge these

47 ↗(On Diff #19254)

We're only using policyState[policyType] so we can make this more efficient by returning exactly this from selector. By doing that we can avoid unnecessary renders.

72 ↗(On Diff #19254)

Looks like a really strange prop, especially that it is mandatory. We probably should refactor this at some point.

80 ↗(On Diff #19254)

Are you completely sure that disabling this rule is appropriate in this case?

native/navigation/root-navigator.react.js
157 ↗(On Diff #19254)

How about Android physical back button?

native/themes/colors.js
153–154 ↗(On Diff #19254)

We should try to be consistent - we're using uppercase colors in this file

This revision now requires changes to proceed.Dec 9 2022, 10:51 AM

improve styling, disable back button on andriod, improve code

remove disabling eslint rule

In D5831#174834, @tomek wrote:

Two visual issues:

  1. Loading indicator isn't centered vertically
  2. Button height is different when loading indicator is present

Fixed

native/account/terms-and-privacy-modal.react.js
181 ↗(On Diff #19328)

This is hacky but looks like <ActivityIndicator> behaves differently depending on the platform. We used that kind of approach to center spinner previously in codebase, eg. here.

72 ↗(On Diff #19254)

Changed this to not use <LoadingIndicator> which is styled for calendar utils but to use <ActivityIndicator> from react-native.

80 ↗(On Diff #19254)

I did the same thing as register panel, but actually, I don't thing it's needed. Created a workaround instead of disabling a rule.

native/navigation/root-navigator.react.js
157 ↗(On Diff #19254)

Previously button was hiding the modal but it was immediately shown again. To improve UX adding blocking this action using BackHandler.

tomek requested changes to this revision.Dec 14 2022, 6:13 AM
tomek added inline comments.
native/account/terms-and-privacy-modal.react.js
46 ↗(On Diff #19330)

How about loadingStatus?

54–58 ↗(On Diff #19330)

We should be precise in defining dependencies. This effect doesn't depend directly on policyType so it shouldn't be included. Also it cares only about policyState?.isAcknowledged so we can depend on this (if Flow complains, we can assign it to a variable and include it in the array).

55–56 ↗(On Diff #19330)

After we go back, this screen might remain in the tree. The problem is that we might still call this function even when this screen isn't on top, which might result in other screen becoming hidden. So maybe we should check if we're on top and only then go back?

61–66 ↗(On Diff #19330)

Can we simplify this?

83–86 ↗(On Diff #19330)
This revision now requires changes to proceed.Dec 14 2022, 6:13 AM
native/account/terms-and-privacy-modal.react.js
83–86 ↗(On Diff #19330)

Can this be simplified even further?

const onBackPress = props.navigation.isFocused;

update copy, simplify function definition, fix dependencies

tomek requested changes to this revision.Dec 15 2022, 6:15 AM

Just one question about re-rendering and using a hook

native/account/terms-and-privacy-modal.react.js
55–59 ↗(On Diff #19377)

We have to make sure that the component is re-rendered when a focus changes. Are we sure that using props.navigation would ensure that? Maybe it is safer to use a hook useIsFocused?

This revision now requires changes to proceed.Dec 15 2022, 6:15 AM
This revision is now accepted and ready to land.Dec 15 2022, 7:17 AM
native/account/terms-and-privacy-modal.react.js
55–59 ↗(On Diff #19377)

Your concern is totally correct. I've tested this and props.navigation isn't enough, it will not trigger useEffect while the navigation stack changes.

I was in the middle of rebasing previously so I did arc diff and wanted to check if this works correctly right after and I forgot to hit Plan changes - sorry for that, I probably wasted part of your time.

This revision was automatically updated to reflect the committed changes.