feat: add blocking on CollectCustomerDetailsScreen & LoginContainer

rationally-app · Jun 4, 2024 · d0e7354 · d0e7354
1 parent 6d697aa
commit d0e7354
Show file tree

Hide file tree

Showing 10 changed files with 374 additions and 155 deletions.
diff --git a/assets/blockuser.png b/assets/blockuser.png
diff --git a/src/common/i18n/translations/en.ts b/src/common/i18n/translations/en.ts
@@ -1,6 +1,10 @@
 import { Translations } from "./type";
 
 export const en: Translations = {
+  blockUser: {
+    header: "Now available on web",
+    body: "Switch to use the latest version of GovSupply.",
+  },
   loginScanCard: {
     loginWithQR: "Login with your unique QR code provided by your in-charge.",
     scanToLogin: "Scan to login",

diff --git a/src/common/i18n/translations/type.ts b/src/common/i18n/translations/type.ts
@@ -1,4 +1,8 @@
 export type Translations = {
+  blockUser: {
+    header: string;
+    body: string;
+  };
   loginScanCard: {
     loginWithQR: string;
     scanToLogin: string;

diff --git a/src/common/i18n/translations/zh.ts b/src/common/i18n/translations/zh.ts
@@ -1,6 +1,10 @@
 import { Translations } from "./type";
 
 export const zh: Translations = {
+  blockUser: {
+    header: "现已在网络上提供",
+    body: "切换到使用最新版本的 GovSupply app。",
+  },
   loginScanCard: {
     loginWithQR: "请使用您专属的QR码登录",
     scanToLogin: "扫描QR码",
@@ -504,7 +508,7 @@ export const zh: Translations = {
     },
     rootedDeviceDetected: {
       title: "安全问题",
-      body: "此设备似乎已越狱。出于安全原因，请使用其他设备安装 SupplyAlly app。",
+      body: "此设备似乎已越狱。出于安全原因，请使用其他设备安装 GovSupply app。",
       primaryActionText: "退出程序",
     },
     // TODO: HTTP error translations below will be done at a later date

diff --git a/src/components/CustomerDetails/CollectCustomerDetailsScreen.test.tsx b/src/components/CustomerDetails/CollectCustomerDetailsScreen.test.tsx
@@ -4,6 +4,7 @@ import {
   cleanup,
   fireEvent,
   waitFor,
+  act,
 } from "@testing-library/react-native";
 import React from "react";
 import { Sentry } from "../../utils/errorTracking";
@@ -49,6 +50,7 @@ const alternateIdInputTestId = "input-with-label-input";
 const checkButtonText = "Check";
 const passportCountryInputPlaceholderText = "Search country";
 const COUNTRY = "Afghanistan";
+const continueAppButtonId = "continue-app";
 
 describe("CollectCustomerDetailsScreen", () => {
   let allCampaignConfigs: CampaignConfigsMap;
@@ -90,7 +92,7 @@ describe("CollectCustomerDetailsScreen", () => {
       expect.assertions(5);
       mockValidateAndCleanId.mockReturnValue("valid-id");
 
-      const { queryByText, queryByTestId } = render(
+      const { queryByText, queryByTestId, getByTestId } = render(
         <CreateProvidersWrapper
           providers={[
             {
@@ -107,6 +109,8 @@ describe("CollectCustomerDetailsScreen", () => {
         </CreateProvidersWrapper>
       );
 
+      const continueAppButton = getByTestId(continueAppButtonId);
+      await act(async () => fireEvent.press(continueAppButton));
       const identityDetailsInput = queryByTestId(identityDetailsInputTestId);
       const checkButton = queryByText(checkButtonText);
       expect(identityDetailsInput).not.toBeNull();
@@ -135,7 +139,7 @@ describe("CollectCustomerDetailsScreen", () => {
         throw new Error(ERROR_MESSAGE.INVALID_ID);
       });
 
-      const { queryByText, queryByTestId } = render(
+      const { queryByText, queryByTestId, getByTestId } = render(
         <CreateProvidersWrapper
           providers={[
             { provider: AlertModalContextProvider },
@@ -153,6 +157,8 @@ describe("CollectCustomerDetailsScreen", () => {
         </CreateProvidersWrapper>
       );
 
+      const continueAppButton = getByTestId(continueAppButtonId);
+      await act(async () => fireEvent.press(continueAppButton));
       const identityDetailsInput = queryByTestId(identityDetailsInputTestId);
       const checkButton = queryByText(checkButtonText);
       expect(identityDetailsInput).not.toBeNull();
@@ -180,7 +186,12 @@ describe("CollectCustomerDetailsScreen", () => {
       expect.assertions(10);
       mockValidateAndCleanId.mockReturnValue("valid-alternate-id");
 
-      const { queryByText, queryByTestId, queryAllByPlaceholderText } = render(
+      const {
+        queryByText,
+        queryByTestId,
+        queryAllByPlaceholderText,
+        getByTestId,
+      } = render(
         <CreateProvidersWrapper
           providers={[
             { provider: AlertModalContextProvider },
@@ -198,6 +209,9 @@ describe("CollectCustomerDetailsScreen", () => {
         </CreateProvidersWrapper>
       );
 
+      const continueAppButton = getByTestId(continueAppButtonId);
+      await act(async () => fireEvent.press(continueAppButton));
+
       const alternateIdTab = queryByText("Passport");
       expect(alternateIdTab).not.toBeNull();
 
@@ -245,7 +259,12 @@ describe("CollectCustomerDetailsScreen", () => {
         throw new Error(ERROR_MESSAGE.INVALID_ID);
       });
 
-      const { queryByText, queryByTestId, queryAllByPlaceholderText } = render(
+      const {
+        queryByText,
+        queryByTestId,
+        queryAllByPlaceholderText,
+        getByTestId,
+      } = render(
         <CreateProvidersWrapper
           providers={[
             { provider: AlertModalContextProvider },
@@ -263,6 +282,9 @@ describe("CollectCustomerDetailsScreen", () => {
         </CreateProvidersWrapper>
       );
 
+      const continueAppButton = getByTestId(continueAppButtonId);
+      await act(async () => fireEvent.press(continueAppButton));
+
       const alternateIdTab = queryByText("Passport");
       expect(alternateIdTab).not.toBeNull();
 

diff --git a/src/components/CustomerDetails/CollectCustomerDetailsScreen.tsx b/src/components/CustomerDetails/CollectCustomerDetailsScreen.tsx
@@ -50,6 +50,7 @@ import { useTranslate } from "../../hooks/useTranslate/useTranslate";
 import { extractPassportIdFromEvent } from "../../utils/passportScanning";
 import { useTheme } from "../../context/theme";
 import { useIsFocused } from "@react-navigation/native";
+import { BlockUser } from "../Login/BlockUser";
 
 const styles = StyleSheet.create({
   content: {
@@ -271,78 +272,88 @@ export const CollectCustomerDetailsScreen: FunctionComponent<
 
   const tCampaignName = c13nt(features?.campaignName ?? "");
 
+  const [shouldBlock, setShouldBlock] = useState(true);
+  useEffect(() => {
+    setShouldBlock(true);
+  }, []);
+
   return (
     <>
-      <Credits style={{ bottom: size(3) }} />
-      <KeyboardAvoidingScrollView>
-        <TopBackground mode={config.appMode} />
-        <View style={styles.content}>
-          <View style={styles.headerText}>
-            <AppHeader mode={config.appMode} />
-          </View>
-          {hasMultiInputSelection() && (
-            <InputSelection
-              selectionArray={selectionArray}
-              currentSelection={selectedIdType}
-              onInputSelection={onInputSelection}
-            />
-          )}
-          {messageContent && (
-            <View style={styles.bannerWrapper}>
-              <Banner {...messageContent} />
-            </View>
-          )}
-          <Card>
-            {!!tCampaignName && (
-              <AppText
-                style={styles.campaignName}
-                accessibilityLabel="identity-details-campaign-name"
-                testID="identity-details-campaign-name"
-                accessible={true}
+      {shouldBlock && <BlockUser setShouldBlock={setShouldBlock} />}
+      {!shouldBlock && (
+        <>
+          <Credits style={{ bottom: size(3) }} />
+          <KeyboardAvoidingScrollView>
+            <TopBackground mode={config.appMode} />
+            <View style={styles.content}>
+              <View style={styles.headerText}>
+                <AppHeader mode={config.appMode} />
+              </View>
+              {hasMultiInputSelection() && (
+                <InputSelection
+                  selectionArray={selectionArray}
+                  currentSelection={selectedIdType}
+                  onInputSelection={onInputSelection}
+                />
+              )}
+              {messageContent && (
+                <View style={styles.bannerWrapper}>
+                  <Banner {...messageContent} />
+                </View>
+              )}
+              <Card>
+                {!!tCampaignName && (
+                  <AppText
+                    style={styles.campaignName}
+                    accessibilityLabel="identity-details-campaign-name"
+                    testID="identity-details-campaign-name"
+                    accessible={true}
+                  >
+                    {tCampaignName}
+                  </AppText>
+                )}
+                <AppText>
+                  {`${c13nt(
+                    "checkEligibleItems",
+                    undefined,
+                    i18nt("collectCustomerDetailsScreen", "checkEligibleItems")
+                  )}`}
+                </AppText>
+                {getInputComponent()}
+              </Card>
+              <TouchableOpacity
+                onPress={onPressStatistics}
+                style={styles.statsButton}
               >
-                {tCampaignName}
-              </AppText>
-            )}
-            <AppText>
-              {`${c13nt(
-                "checkEligibleItems",
-                undefined,
-                i18nt("collectCustomerDetailsScreen", "checkEligibleItems")
-              )}`}
-            </AppText>
-            {getInputComponent()}
-          </Card>
-          <TouchableOpacity
-            onPress={onPressStatistics}
-            style={styles.statsButton}
-          >
-            <MaterialCommunityIcons
-              style={styles.statsIcon}
-              name="poll"
-              size={size(2)}
-              color={theme.collectCustomerDetails.statsIconColor}
+                <MaterialCommunityIcons
+                  style={styles.statsIcon}
+                  name="poll"
+                  size={size(2)}
+                  color={theme.collectCustomerDetails.statsIconColor}
+                />
+                <AppText
+                  style={styles.statsText}
+                  accessibilityLabel="go-to-statistics"
+                  testID="go-to-statistics"
+                  accessible={true}
+                >
+                  {i18nt("collectCustomerDetailsScreen", "goToStatistics")}
+                </AppText>
+              </TouchableOpacity>
+              <FeatureToggler feature="HELP_MODAL">
+                <HelpButton onPress={showHelpModal} />
+              </FeatureToggler>
+            </View>
+          </KeyboardAvoidingScrollView>
+          {shouldShowCamera && (
+            <IdScanner
+              isScanningEnabled={isScanningEnabled}
+              onBarCodeScanned={onBarCodeScanned}
+              onCancel={() => setShouldShowCamera(false)}
+              barCodeTypes={getBarcodeType()}
             />
-            <AppText
-              style={styles.statsText}
-              accessibilityLabel="go-to-statistics"
-              testID="go-to-statistics"
-              accessible={true}
-            >
-              {i18nt("collectCustomerDetailsScreen", "goToStatistics")}
-            </AppText>
-          </TouchableOpacity>
-          <FeatureToggler feature="HELP_MODAL">
-            <HelpButton onPress={showHelpModal} />
-          </FeatureToggler>
-        </View>
-      </KeyboardAvoidingScrollView>
-      {shouldShowCamera && (
-        <IdScanner
-          isScanningEnabled={isScanningEnabled}
-          onBarCodeScanned={onBarCodeScanned}
-          onCancel={() => setShouldShowCamera(false)}
-          barCodeTypes={getBarcodeType()}
-        />
+          )}
+        </>
       )}
     </>
   );