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>; +}; + +export const BlockUser: FunctionComponent = ({ + setShouldBlock, +}) => { useEffect(() => { Sentry.addBreadcrumb({ category: "navigation", @@ -94,6 +109,14 @@ export const InitialisationContainer: FunctionComponent< accessibilityLabel="launch-webapp" /> + + setShouldBlock(false)} + accessibilityLabel="continue-app" + /> + 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 ( <> - - - - - - } + {!shouldBlock && ( + <> + + - - - - - {config.appMode !== AppMode.production && ( - - - - )} + - {messageContent && ( - - - - )} + + + + + + + {config.appMode !== AppMode.production && ( + + + + )} - {loginStage === "SCAN" && ( - setShouldShowCamera(true)} - isLoading={isLoading} - /> - )} - {loginStage === "MOBILE_NUMBER" && ( - - )} - {loginStage === "OTP" && ( - + + + )} + + {loginStage === "SCAN" && ( + setShouldShowCamera(true)} + isLoading={isLoading} + /> + )} + {loginStage === "MOBILE_NUMBER" && ( + + )} + {loginStage === "OTP" && ( + + )} + + + + {hasLoadedFromStore && + Object.keys(authCredentials).length >= 1 && ( + + )} + + + {shouldShowCamera && ( + setShouldShowCamera(false)} /> )} - - - - {hasLoadedFromStore && Object.keys(authCredentials).length >= 1 && ( - - )} - - - {shouldShowCamera && ( - 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", () => (