[Wallet] Allow skipping verification if ODIS is down (#5438)

### Description ODIS is down in Alfajores right now and when doing the onboarding the app is stuck on the verification screen because there is a permanent loading screen and the skip verification modal doesn't show up. I copied the modal so that it's shown even if the screen is loading. Note: This is blocking the wallet e2e tests. ### Tested Manually and added a unit test. ### Related issues - Fixes #5437
celo-org · Oct 20, 2020 · 67b40d1 · 67b40d1
1 parent 1961a55
commit 67b40d1
Show file tree

Hide file tree

Showing 3 changed files with 303 additions and 0 deletions.
diff --git a/packages/mobile/src/verify/VerificationEducationScreen.test.tsx b/packages/mobile/src/verify/VerificationEducationScreen.test.tsx
@@ -64,4 +64,44 @@ describe('VerificationEducationScreen', () => {
     expect(queryByTestId('VerificationEducationContinue')).toBeFalsy()
     expect(queryByTestId('VerificationEducationAlready')).toBeFalsy()
   })
+
+  it('allows to skip if verification is loading', () => {
+    const defaultVerificationState = {
+      phoneHashDetails: {
+        e164Number: '',
+        phoneHash: '',
+        pepper: '',
+      },
+      actionableAttestations: [],
+      status: {
+        isVerified: false,
+        numAttestationsRemaining: 3,
+        total: 0,
+        completed: 0,
+      },
+      lastFetch: null,
+    }
+    const store = createMockStore({
+      stableToken: {
+        balance: '0',
+      },
+      identity: {
+        verificationState: {
+          ...defaultVerificationState,
+          isLoading: true,
+        },
+      },
+    })
+    const { getByTestId, toJSON } = render(
+      <Provider store={store}>
+        <VerificationEducationScreen
+          {...getMockStackScreenProps(Screens.VerificationEducationScreen, {
+            showSkipDialog: true,
+          })}
+        />
+      </Provider>
+    )
+    expect(toJSON()).toMatchSnapshot()
+    expect(getByTestId('VerificationSkipDialog').props.isVisible).toBe(true)
+  })
 })
diff --git a/packages/mobile/src/verify/VerificationEducationScreen.tsx b/packages/mobile/src/verify/VerificationEducationScreen.tsx
@@ -96,6 +96,11 @@ function VerificationEducationScreen({ route, navigation }: Props) {
   if (isLoading) {
     return (
       <View style={styles.loader}>
+        <VerificationSkipDialog
+          isVisible={showSkipDialog}
+          onPressCancel={onPressSkipCancel}
+          onPressConfirm={onPressSkipConfirm}
+        />
         <ActivityIndicator size="large" color={colors.greenBrand} />
       </View>
     )

diff --git a/packages/mobile/src/verify/__snapshots__/VerificationEducationScreen.test.tsx.snap b/packages/mobile/src/verify/__snapshots__/VerificationEducationScreen.test.tsx.snap
@@ -1,5 +1,263 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`VerificationEducationScreen allows to skip if verification is loading 1`] = `
+<View
+  style={
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#F9F6F0",
+      "flex": 1,
+      "justifyContent": "center",
+    }
+  }
+>
+  <Modal
+    animationType="none"
+    hardwareAccelerated={false}
+    hideModalContentWhileAnimating={false}
+    onModalHide={[Function]}
+    onModalWillHide={[Function]}
+    onModalWillShow={[Function]}
+    onRequestClose={[Function]}
+    scrollHorizontal={false}
+    scrollOffset={0}
+    scrollOffsetMax={0}
+    scrollTo={null}
+    statusBarTranslucent={true}
+    supportedOrientations={
+      Array [
+        "portrait",
+        "landscape",
+      ]
+    }
+    swipeThreshold={100}
+    transparent={true}
+    visible={true}
+  >
+    <View
+      accessible={true}
+      focusable={true}
+      forwardedRef={[Function]}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Object {
+          "backgroundColor": "black",
+          "bottom": 0,
+          "height": 1334,
+          "left": 0,
+          "opacity": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "width": 750,
+        }
+      }
+    />
+    <View
+      forwardedRef={[Function]}
+      hideModalContentWhileAnimating={false}
+      onModalHide={[Function]}
+      onModalWillHide={[Function]}
+      onModalWillShow={[Function]}
+      pointerEvents="box-none"
+      scrollHorizontal={false}
+      scrollOffset={0}
+      scrollOffsetMax={0}
+      scrollTo={null}
+      statusBarTranslucent={true}
+      style={
+        Object {
+          "flex": 1,
+          "justifyContent": "center",
+          "margin": 37.5,
+          "transform": Array [
+            Object {
+              "translateY": 1334,
+            },
+          ],
+        }
+      }
+      supportedOrientations={
+        Array [
+          "portrait",
+          "landscape",
+        ]
+      }
+      swipeThreshold={100}
+    >
+      <RNCSafeAreaView>
+        <View
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#FFFFFF",
+                "padding": 16,
+              },
+              Object {
+                "borderRadius": 8,
+              },
+              Object {
+                "elevation": 12,
+                "shadowColor": "rgba(156, 164, 169, 0.4)",
+                "shadowOffset": Object {
+                  "height": 2,
+                  "width": 0,
+                },
+                "shadowOpacity": 1,
+                "shadowRadius": 12,
+              },
+              Array [
+                Object {
+                  "backgroundColor": "#FFFFFF",
+                  "maxHeight": "100%",
+                  "padding": 24,
+                },
+                undefined,
+              ],
+            ]
+          }
+        >
+          <RCTScrollView
+            contentContainerStyle={
+              Object {
+                "alignItems": "center",
+              }
+            }
+          >
+            <View>
+              <Text
+                style={
+                  Object {
+                    "color": "#2E3338",
+                    "fontFamily": "Jost-Medium",
+                    "fontSize": 22,
+                    "lineHeight": 28,
+                    "marginBottom": 12,
+                    "textAlign": "center",
+                  }
+                }
+              >
+                verificationSkipDialog.title
+              </Text>
+              <Text
+                style={
+                  Object {
+                    "color": "#2E3338",
+                    "fontFamily": "Inter-Regular",
+                    "fontSize": 16,
+                    "lineHeight": 22,
+                    "marginBottom": 24,
+                    "textAlign": "center",
+                  }
+                }
+              >
+                verificationSkipDialog.body
+              </Text>
+            </View>
+          </RCTScrollView>
+          <View
+            style={
+              Object {
+                "flexDirection": "row",
+                "flexWrap": "wrap",
+                "justifyContent": "space-around",
+                "maxWidth": "100%",
+              }
+            }
+          >
+            <View
+              accessible={true}
+              focusable={true}
+              nativeBackgroundAndroid={
+                Object {
+                  "attribute": "selectableItemBackgroundBorderless",
+                  "type": "ThemeAttrAndroid",
+                }
+              }
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              testID="VerificationSkipDialog/SecondaryAction"
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#1AB775",
+                      "fontFamily": "Inter-SemiBold",
+                      "fontSize": 16,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "color": "#9CA4A9",
+                      "paddingTop": 16,
+                    },
+                  ]
+                }
+              >
+                verificationSkipDialog.cancel
+              </Text>
+            </View>
+            <View
+              accessible={true}
+              focusable={true}
+              nativeBackgroundAndroid={
+                Object {
+                  "attribute": "selectableItemBackgroundBorderless",
+                  "type": "ThemeAttrAndroid",
+                }
+              }
+              onClick={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              testID="VerificationSkipDialog/PrimaryAction"
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#1AB775",
+                      "fontFamily": "Inter-SemiBold",
+                      "fontSize": 16,
+                      "lineHeight": 22,
+                    },
+                    Object {
+                      "paddingTop": 16,
+                    },
+                  ]
+                }
+              >
+                verificationSkipDialog.confirm
+              </Text>
+            </View>
+          </View>
+        </View>
+      </RNCSafeAreaView>
+    </View>
+  </Modal>
+  <ActivityIndicator
+    animating={true}
+    color="#42D689"
+    hidesWhenStopped={true}
+    size="large"
+  />
+</View>
+`;
+
 exports[`VerificationEducationScreen shows the \`continue\` button when the user is not already verified and has enough balance 1`] = `
 <View
   style={