From a7eca661fb00890b0ec388b4ec91680539f71ab1 Mon Sep 17 00:00:00 2001
From: dalsontws <dalsontws@gmail.com>
Date: Tue, 4 Jun 2024 13:34:13 +0800
Subject: [PATCH] chore: add blocking screen when logging into new campaign

---
 src/components/Login/BlockUser.tsx         |  39 ++++--
 src/components/Login/LoginContainer.tsx    | 156 +++++++++++----------
 src/navigation/LoginScreen.tsx             |   2 +-
 storybook/stories/Login/LoginContainer.tsx |   2 +-
 4 files changed, 117 insertions(+), 82 deletions(-)

diff --git a/src/components/Login/BlockUser.tsx b/src/components/Login/BlockUser.tsx
index efbd4b28c..e99a11a16 100644
--- a/src/components/Login/BlockUser.tsx
+++ b/src/components/Login/BlockUser.tsx
@@ -1,11 +1,15 @@
-import React, { FunctionComponent, useEffect } from "react";
+import React, {
+  Dispatch,
+  FunctionComponent,
+  SetStateAction,
+  useEffect,
+} from "react";
 import { View, StyleSheet, Image } from "react-native";
-import { InitialisationContainerNavigationProps } from "../../types";
 import { size } from "../../common/styles";
 import { Credits } from "../Credits";
 import { Sentry } from "../../utils/errorTracking";
 import * as Linking from "expo-linking";
-import { DarkButton } from "../Layout/Buttons";
+import { DarkButton, SecondaryButton } from "../Layout/Buttons";
 import { AppText } from "../Layout/AppText";
 import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 
@@ -28,6 +32,8 @@ const styles = StyleSheet.create({
   },
   centerContent: {
     alignItems: "center",
+    paddingBottom: 40,
+    marginBottom: 32,
   },
   credits: {
     bottom: size(3),
@@ -49,17 +55,26 @@ const styles = StyleSheet.create({
     paddingBottom: size(1),
   },
   launchWebAppButton: {
-    position: "absolute",
-    bottom: size(10),
+    width: 350,
+    alignSelf: "center",
+    marginBottom: size(2),
+  },
+  continueOnAppButton: {
+    borderColor: "white",
+    borderWidth: 0,
     width: 350,
     alignSelf: "center",
     marginBottom: size(2),
   },
 });
 
-export const InitialisationContainer: FunctionComponent<
-  InitialisationContainerNavigationProps
-> = ({}) => {
+type BlockUserProps = {
+  setShouldBlock: Dispatch<SetStateAction<boolean>>;
+};
+
+export const BlockUser: FunctionComponent<BlockUserProps> = ({
+  setShouldBlock,
+}) => {
   useEffect(() => {
     Sentry.addBreadcrumb({
       category: "navigation",
@@ -94,6 +109,14 @@ export const InitialisationContainer: FunctionComponent<
             accessibilityLabel="launch-webapp"
           />
         </View>
+        <View style={styles.continueOnAppButton}>
+          <SecondaryButton
+            fullWidth={true}
+            text="Continue on App"
+            onPress={() => setShouldBlock(false)}
+            accessibilityLabel="continue-app"
+          />
+        </View>
         <Credits style={styles.credits} />
       </View>
     </>
diff --git a/src/components/Login/LoginContainer.tsx b/src/components/Login/LoginContainer.tsx
index 861a9c8fe..a12e75e00 100644
--- a/src/components/Login/LoginContainer.tsx
+++ b/src/components/Login/LoginContainer.tsx
@@ -56,6 +56,7 @@ import { AuthStoreContext } from "../../context/authStore";
 import { Feather } from "@expo/vector-icons";
 import { createFullNumber } from "../../utils/validatePhoneNumbers";
 import { NetworkError } from "../../services/helpers";
+import { BlockUser } from "./BlockUser";
 
 const TIME_HELD_TO_CHANGE_APP_MODE = 5 * 1000;
 
@@ -274,85 +275,96 @@ export const InitialisationContainer: FunctionComponent<
     }
   };
 
+  const [shouldBlock, setShouldBlock] = useState(true);
+  useEffect(() => {
+    setShouldBlock(true);
+  }, []);
+
   return (
     <>
-      <Credits style={{ bottom: size(10) }} />
-      <KeyboardAvoidingScrollView
-        keyboardAvoidingViewStyle={{ flex: 1 }}
-        scrollViewContentContainerStyle={{
-          flexGrow: 1,
-          alignItems: "center",
-          paddingBottom: size(8),
-        }}
-      >
-        <TopBackground
-          style={{ height: "50%", maxHeight: "auto" }}
-          mode={config.appMode}
-        />
-
-        <View style={styles.content}>
-          <TouchableWithoutFeedback
-            delayLongPress={TIME_HELD_TO_CHANGE_APP_MODE}
-            onLongPress={onToggleAppMode}
+      {shouldBlock && <BlockUser setShouldBlock={setShouldBlock} />}
+      {!shouldBlock && (
+        <>
+          <Credits style={{ bottom: size(10) }} />
+          <KeyboardAvoidingScrollView
+            keyboardAvoidingViewStyle={{ flex: 1 }}
+            scrollViewContentContainerStyle={{
+              flexGrow: 1,
+              alignItems: "center",
+              paddingBottom: size(8),
+            }}
           >
-            <View style={styles.headerText}>
-              <AppName mode={config.appMode} />
-            </View>
-          </TouchableWithoutFeedback>
-          {config.appMode !== AppMode.production && (
-            <View style={{ marginVertical: size(2.5) }}>
-              <DangerButton
-                text="Exit Testing Mode"
-                onPress={onToggleAppMode}
-                fullWidth={true}
-                isLoading={isLoading}
-              />
-            </View>
-          )}
+            <TopBackground
+              style={{ height: "50%", maxHeight: "auto" }}
+              mode={config.appMode}
+            />
 
-          {messageContent && (
-            <View style={styles.bannerWrapper}>
-              <Banner {...messageContent} />
-            </View>
-          )}
+            <View style={styles.content}>
+              <TouchableWithoutFeedback
+                delayLongPress={TIME_HELD_TO_CHANGE_APP_MODE}
+                onLongPress={onToggleAppMode}
+              >
+                <View style={styles.headerText}>
+                  <AppName mode={config.appMode} />
+                </View>
+              </TouchableWithoutFeedback>
+              {config.appMode !== AppMode.production && (
+                <View style={{ marginVertical: size(2.5) }}>
+                  <DangerButton
+                    text="Exit Testing Mode"
+                    onPress={onToggleAppMode}
+                    fullWidth={true}
+                    isLoading={isLoading}
+                  />
+                </View>
+              )}
 
-          {loginStage === "SCAN" && (
-            <LoginScanCard
-              onToggleScanner={() => setShouldShowCamera(true)}
-              isLoading={isLoading}
-            />
-          )}
-          {loginStage === "MOBILE_NUMBER" && (
-            <LoginMobileNumberCard
-              setLoginStage={setLoginStage}
-              setMobileNumber={setMobileNumber}
-              setCountryCode={setCountryCode}
-              handleRequestOTP={handleRequestOTP}
-            />
-          )}
-          {loginStage === "OTP" && (
-            <LoginOTPCard
-              resetStage={resetStage}
-              fullMobileNumber={createFullNumber(countryCode, mobileNumber)}
-              operatorToken={tempAuthCredentials?.operatorToken ?? ""}
-              endpoint={tempAuthCredentials?.endpoint ?? ""}
-              handleRequestOTP={handleRequestOTP}
-              onSuccess={onSuccess}
+              {messageContent && (
+                <View style={styles.bannerWrapper}>
+                  <Banner {...messageContent} />
+                </View>
+              )}
+
+              {loginStage === "SCAN" && (
+                <LoginScanCard
+                  onToggleScanner={() => setShouldShowCamera(true)}
+                  isLoading={isLoading}
+                />
+              )}
+              {loginStage === "MOBILE_NUMBER" && (
+                <LoginMobileNumberCard
+                  setLoginStage={setLoginStage}
+                  setMobileNumber={setMobileNumber}
+                  setCountryCode={setCountryCode}
+                  handleRequestOTP={handleRequestOTP}
+                />
+              )}
+              {loginStage === "OTP" && (
+                <LoginOTPCard
+                  resetStage={resetStage}
+                  fullMobileNumber={createFullNumber(countryCode, mobileNumber)}
+                  operatorToken={tempAuthCredentials?.operatorToken ?? ""}
+                  endpoint={tempAuthCredentials?.endpoint ?? ""}
+                  handleRequestOTP={handleRequestOTP}
+                  onSuccess={onSuccess}
+                />
+              )}
+              <FeatureToggler feature="HELP_MODAL">
+                <HelpButton onPress={showHelpModal} />
+              </FeatureToggler>
+              {hasLoadedFromStore &&
+                Object.keys(authCredentials).length >= 1 && (
+                  <CloseButton onPress={onPressClose} />
+                )}
+            </View>
+          </KeyboardAvoidingScrollView>
+          {shouldShowCamera && (
+            <IdScanner
+              onBarCodeScanned={onBarCodeScanned}
+              onCancel={() => setShouldShowCamera(false)}
             />
           )}
-          <FeatureToggler feature="HELP_MODAL">
-            <HelpButton onPress={showHelpModal} />
-          </FeatureToggler>
-          {hasLoadedFromStore && Object.keys(authCredentials).length >= 1 && (
-            <CloseButton onPress={onPressClose} />
-          )}
-        </View>
-      </KeyboardAvoidingScrollView>
-      {shouldShowCamera && (
-        <IdScanner
-          onBarCodeScanned={onBarCodeScanned}
-          onCancel={() => setShouldShowCamera(false)}
-        />
+        </>
       )}
     </>
   );
diff --git a/src/navigation/LoginScreen.tsx b/src/navigation/LoginScreen.tsx
index 6bd1f0b40..6e154c032 100644
--- a/src/navigation/LoginScreen.tsx
+++ b/src/navigation/LoginScreen.tsx
@@ -1,3 +1,3 @@
-import { InitialisationContainer } from "../components/Login/BlockUser";
+import { InitialisationContainer } from "../components/Login/LoginContainer";
 
 export default InitialisationContainer;
diff --git a/storybook/stories/Login/LoginContainer.tsx b/storybook/stories/Login/LoginContainer.tsx
index e5d5a8e82..e93a2fa0e 100644
--- a/storybook/stories/Login/LoginContainer.tsx
+++ b/storybook/stories/Login/LoginContainer.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react-native";
 import { View } from "react-native";
-import { InitialisationContainer } from "../../../src/components/Login/BlockUser";
+import { InitialisationContainer } from "../../../src/components/Login/LoginContainer";
 import { navigation } from "../mocks/navigation";
 
 storiesOf("Screen", module).add("LoginScreen", () => (