io-app
io-app copied to clipboard
feat: [IOCOM-840] Preconditions bottom sheet, new DS
Short description
This PR implements the preconditions bottom sheet, with the new DS.
iOS | Android |
---|---|
List of changes proposed in this pull request
The preconditions bottom sheet is handled as a state-machine:
The
messagePrecondition
reducer implements the state machine, using the preconditions
actions to switch from one state to another (if allowed).
-
States:
-
Idle
: in this status, the bottom sheet is not shown nor loaded; -
Scheduled
: in this status, some actor has requested to show the bottom sheet (but it is not visible yet).WrappedMessageListItem
is the component that dispatches thescheduledPreconditionStatusAction
whilePreconditions
component uses anuseEffect
hook to detect the status and request the switch to eitherUpdate Required
orRetrieving data
; -
Update Required
: this status is used to inform the user about an unsupported app version that needs to be updated. At the moment, it is triggered when the selected message is a SEND one. The bottom sheet is shown and the user can either dismiss it or navigate to the store to update the application; -
Retrieving Data
: in this status, the application is retrieving the precondition data from server. The bottom sheet is shown and it displays a progress skeleton; -
Loading Content
: in this status, precondition data has been retrieved and the markdown component is loading the precondition content. The bottom sheet is shown and it displays a progress skeleton; -
Shown
: in this status, the bottom sheet is shown, it displays the precondition title and markdown and the footer displays bothcancel
andcontinue
button -
Error
: this status is triggered if data retrieval from server fails or if markdown loading fails. The bottom sheet is shown, it displays a generic error message. No footer is shown so the user can just dismiss the bottom sheet using its cancelling mechanism (closing button on top, swipe gesture, backdrop tap or the physical back button on Android)
-
-
Actions:
-
errorPreconditionStatusAction
: switches to theError
status. Valid source states areRetrieving Data
andLoading Content
. If received in any other state, it is ignored; -
idlePreconditionStatusAction
: switches to theIdle
status. Valid source states are all butScheduled
(this transition maps either an end-of-flow or a cancelling from the user); -
loadingContentPreconditionStatusAction
: switches to theLoading Content
status. Valid source state isRetrieving Data
. If received in any other state, it is ignored; -
retrievingDataPreconditionStatusAction
: switches to theRetrieving Data
status. Valid source states isScheduled
andError
. If received in any other state, it is ignored. The switch fromError
toRetrieving Data
is supported but it is not available from the UI so at the moment it never happens; -
scheduledPreconditionStatusAction
: switches to theScheduled
status. Valid source state isIdle
. If received in any other state, it is ignored; -
shownPreconditionStatusAction
: switches to theShown
status. Valid source state isLoading Content
. If received in any other state, it is ignored; -
updateRequiredPreconditionStatusAction
: switches to theUpdate Required
status. Valid source state isScheduled
. If received in any other state, it is ignored;
-
-
UI Components:
-
Preconditions
: the bottom sheet wrapper entry point. It creates the bottom sheet, links other preconditions component and detects theScheduled
state, in order to trigger the bottom-sheet opening. -
PreconditionsTitle
: computes and displays the bottom sheet title, based on the state machine status (sometimes it displays an empty view in order for margin to be computed properly); -
PreconditionsContent
: computes and displays the bottom sheet markdown, based on the state machine status -
PreconditionsFooter
: computes and displays the bottom sheet CTAs. Apart from an empt view (used in order for margins to be computed properly), it either displays theCancel
+Update
buttons (Update Required
state) or theCancel
+Continue
buttons (Shown
state); -
PreconditionsFeedback
: common component linked insidePreconditionsContent
to display either an error or the update required message.
-
The main idea behind the switch from the Idle
to the Scheduled
state is to decouple the actor that requires the displaying from the actual displaying of the bottom sheet. Up to this PR, only a tap on a single message on the message list can open the bottom sheet but in the future, it is going to be opened from other entry points (like a push notification).
How to test
- Using the io-dev-api-server, generate a SEND message. Select it and check that the bottom sheet appears.
- Using the io-dev-api-server, set the SEND minimum version to something greater that 2.63. Generate a SEND message, select it and check that the bottom sheet appears with the required update CTAs.
- Using the io-dev-api-server, change the message generation code that computes the hasPreconditions flag so that it always returns true. Also change the preconditions endpoint as to return preconditions for any message. Select a non SEND message and check that the bototm sheet appears (minimum app version is checked only for SEND messages)