Skip to content
This repository has been archived by the owner on Aug 6, 2024. It is now read-only.

feat: block screen [SGW-3617] #788

Merged
merged 1 commit into from
Jun 4, 2024
Merged

feat: block screen [SGW-3617] #788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added assets/blockuser.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/common/i18n/translations/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
4 changes: 4 additions & 0 deletions src/common/i18n/translations/type.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
export type Translations = {
blockUser: {
header: string;
body: string;
};
loginScanCard: {
loginWithQR: string;
scanToLogin: string;
Expand Down
6 changes: 5 additions & 1 deletion src/common/i18n/translations/zh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { Translations } from "./type";

export const zh: Translations = {
blockUser: {
header: "现已在网络上提供",
body: "切换到使用最新版本的 GovSupply app。",
},
loginScanCard: {
loginWithQR: "请使用您专属的QR码登录",
scanToLogin: "扫描QR码",
Expand Down Expand Up @@ -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
Expand Down
30 changes: 26 additions & 4 deletions src/components/CustomerDetails/CollectCustomerDetailsScreen.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
cleanup,
fireEvent,
waitFor,
act,
} from "@testing-library/react-native";
import React from "react";
import { Sentry } from "../../utils/errorTracking";
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -90,7 +92,7 @@ describe("CollectCustomerDetailsScreen", () => {
expect.assertions(5);
mockValidateAndCleanId.mockReturnValue("valid-id");

const { queryByText, queryByTestId } = render(
const { queryByText, queryByTestId, getByTestId } = render(
<CreateProvidersWrapper
providers={[
{
Expand All @@ -107,6 +109,8 @@ describe("CollectCustomerDetailsScreen", () => {
</CreateProvidersWrapper>
);

const continueAppButton = getByTestId(continueAppButtonId);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since this screen is blocked, all tests require additional button click to reach original screen

await act(async () => fireEvent.press(continueAppButton));
const identityDetailsInput = queryByTestId(identityDetailsInputTestId);
const checkButton = queryByText(checkButtonText);
expect(identityDetailsInput).not.toBeNull();
Expand Down Expand Up @@ -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 },
Expand All @@ -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();
Expand Down Expand Up @@ -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 },
Expand All @@ -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();

Expand Down Expand Up @@ -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 },
Expand All @@ -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();

Expand Down
147 changes: 79 additions & 68 deletions src/components/CustomerDetails/CollectCustomerDetailsScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -271,78 +272,88 @@ export const CollectCustomerDetailsScreen: FunctionComponent<

const tCampaignName = c13nt(features?.campaignName ?? "");

const [shouldBlock, setShouldBlock] = useState(true);
useEffect(() => {
Copy link
Contributor Author

@dalsontws dalsontws Jun 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

block for the first time when user navigates to CollectCustomerDetailsScreen (triggered by refreshing or after OTP)

Screen.Recording.2024-06-04.at.1.49.04.PM.mov

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()}
/>
)}
</>
)}
</>
);
Expand Down
Loading
Loading