-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(IT Wallet): [SIW-1584] Add IPZS privacy screen (#6270)
## Short description This PR adds a new screen regarding the IPZS privacy policy that must be reviewed before proceeding and logging in via SPID/CIE. ## List of changes proposed in this pull request - Added a new component used to display a `WebView` inside the `ItwIpzsPrivacyScreen` - Added a new machine state that handles the new screen inside the discovery flow - Removed the privacy policy acceptance text inside the `ItwIdentificationModeSelectionScreen` - Added the mixpanel tracking event inside the new screen ## How to test - Start the new documents flow from the payment section - Navigate to this screen after the onboarding/discovery screen (The first screen inside the WIA flow) - ~~Read the policy and scroll to the bottom to enable the continue button~~ - Scroll down the policy (not mandatory now) and press the continue button to navigate to the next screen **NOTE**: I cannot test this PR on a real Android device since I don't have one. Can someone test on Android (physical device)? Thanks! DEMO: https://github.com/user-attachments/assets/ba9781d3-dffa-4132-9274-cc43c6c7a991 --------- Co-authored-by: ITW Development <[email protected]> Co-authored-by: Mario Perrotta <[email protected]> Co-authored-by: LazyAfternoons <[email protected]>
- Loading branch information
4 people
authored
Oct 17, 2024
1 parent
7492e94
commit d15d93f
Showing
16 changed files
with
241 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
62 changes: 62 additions & 0 deletions
62
ts/features/itwallet/discovery/components/ItwPrivacyWebViewComponent.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import React from "react"; | ||
| import { | ||
| ContentWrapper, | ||
| IOStyles, | ||
| VSpacer | ||
| } from "@pagopa/io-app-design-system"; | ||
| import WebView from "react-native-webview"; | ||
| import { View } from "react-native"; | ||
| import { WebViewSource } from "react-native-webview/lib/WebViewTypes"; | ||
| import { AVOID_ZOOM_JS, closeInjectedScript } from "../../../../utils/webview"; | ||
| import I18n from "../../../../i18n"; | ||
| import ItwMarkdown from "../../common/components/ItwMarkdown"; | ||
| import { FooterActions } from "../../../../components/ui/FooterActions"; | ||
|
|
||
| type Props = { | ||
| source: WebViewSource; | ||
| onAcceptTos: () => void; | ||
| onLoadEnd: () => void; | ||
| onError: () => void; | ||
| }; | ||
|
|
||
| const ItwPrivacyWebViewComponent = ({ | ||
| source, | ||
| onAcceptTos, | ||
| onLoadEnd, | ||
| onError | ||
| }: Props) => ( | ||
| <View style={IOStyles.flex}> | ||
| <WebView | ||
| androidCameraAccessDisabled={true} | ||
| androidMicrophoneAccessDisabled={true} | ||
| onLoadEnd={onLoadEnd} | ||
| onError={onError} | ||
| textZoom={100} | ||
| style={IOStyles.flex} | ||
| source={source} | ||
| injectedJavaScript={closeInjectedScript(AVOID_ZOOM_JS)} | ||
| /> | ||
|
|
||
| <ContentWrapper> | ||
| <VSpacer size={4} /> | ||
| <ItwMarkdown> | ||
| {I18n.t("features.itWallet.ipzsPrivacy.warning")} | ||
| </ItwMarkdown> | ||
| </ContentWrapper> | ||
| <FooterActions | ||
| fixed={false} | ||
| actions={{ | ||
| type: "SingleButton", | ||
| primary: { | ||
| label: I18n.t("features.itWallet.ipzsPrivacy.button.label"), | ||
| accessibilityLabel: I18n.t( | ||
| "features.itWallet.ipzsPrivacy.button.label" | ||
| ), | ||
| onPress: onAcceptTos | ||
| } | ||
| }} | ||
| /> | ||
| </View> | ||
| ); | ||
|
|
||
| export default ItwPrivacyWebViewComponent; |
60 changes: 60 additions & 0 deletions
60
ts/features/itwallet/discovery/screens/ItwIpzsPrivacyScreen.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import React, { useState } from "react"; | ||
| import { View } from "react-native"; | ||
| import { H2, IOStyles, VSpacer } from "@pagopa/io-app-design-system"; | ||
| import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel"; | ||
| import I18n from "../../../../i18n"; | ||
| import LoadingSpinnerOverlay from "../../../../components/LoadingSpinnerOverlay"; | ||
| import ItwPrivacyWebViewComponent from "../components/ItwPrivacyWebViewComponent"; | ||
| import { ItwEidIssuanceMachineContext } from "../../machine/provider"; | ||
| import { trackOpenItwTosAccepted } from "../../analytics"; | ||
| import { itwIpzsPrivacyUrl } from "../../../../config"; | ||
|
|
||
| const ItwIpzsPrivacyScreen = () => { | ||
| const [isLoading, setIsLoading] = useState(true); | ||
| const machineRef = ItwEidIssuanceMachineContext.useActorRef(); | ||
|
|
||
| const handleContinuePress = () => { | ||
| trackOpenItwTosAccepted(); | ||
| machineRef.send({ type: "accept-ipzs-privacy" }); | ||
| }; | ||
|
|
||
| const onLoadEnd = () => { | ||
| setIsLoading(false); | ||
| }; | ||
|
|
||
| const onError = () => { | ||
| onLoadEnd(); | ||
| machineRef.send({ type: "error", scope: "ipzs-privacy" }); | ||
| }; | ||
|
|
||
| useHeaderSecondLevel({ | ||
| title: "", | ||
| canGoBack: true, | ||
| supportRequest: true | ||
| }); | ||
|
|
||
| return ( | ||
| <LoadingSpinnerOverlay isLoading={isLoading}> | ||
| <View style={IOStyles.horizontalContentPadding}> | ||
| <H2 | ||
| accessible={true} | ||
| accessibilityRole="header" | ||
| testID="screen-content-header-title" | ||
| > | ||
| {I18n.t("features.itWallet.ipzsPrivacy.title")} | ||
| </H2> | ||
| <VSpacer size={24} /> | ||
| </View> | ||
| <ItwPrivacyWebViewComponent | ||
| source={{ | ||
| uri: itwIpzsPrivacyUrl | ||
| }} | ||
| onAcceptTos={handleContinuePress} | ||
| onLoadEnd={onLoadEnd} | ||
| onError={onError} | ||
| /> | ||
| </LoadingSpinnerOverlay> | ||
| ); | ||
| }; | ||
|
|
||
| export default ItwIpzsPrivacyScreen; |
39 changes: 39 additions & 0 deletions
39
ts/features/itwallet/discovery/screens/__tests__/ItwIpzsPrivacyScreen.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import * as React from "react"; | ||
| import { createStore } from "redux"; | ||
| import { applicationChangeState } from "../../../../../store/actions/application"; | ||
| import { appReducer } from "../../../../../store/reducers"; | ||
| import { GlobalState } from "../../../../../store/reducers/types"; | ||
| import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper"; | ||
| import { itwEidIssuanceMachine } from "../../../machine/eid/machine"; | ||
| import { ItwEidIssuanceMachineContext } from "../../../machine/provider"; | ||
| import { ITW_ROUTES } from "../../../navigation/routes"; | ||
| import ItwIpzsPrivacyScreen from "../ItwIpzsPrivacyScreen"; | ||
|
|
||
| describe("Test ItwIpzsPrivacy screen", () => { | ||
| it("it should render the screen correctly", () => { | ||
| const component = renderComponent(); | ||
| expect(component).toBeTruthy(); | ||
| }); | ||
| }); | ||
|
|
||
| const renderComponent = () => { | ||
| const globalState = appReducer(undefined, applicationChangeState("active")); | ||
|
|
||
| const logic = itwEidIssuanceMachine.provide({ | ||
| actions: { | ||
| onInit: jest.fn(), | ||
| navigateToTosScreen: () => undefined | ||
| } | ||
| }); | ||
|
|
||
| return renderScreenWithNavigationStoreContext<GlobalState>( | ||
| () => ( | ||
| <ItwEidIssuanceMachineContext.Provider logic={logic}> | ||
| <ItwIpzsPrivacyScreen /> | ||
| </ItwEidIssuanceMachineContext.Provider> | ||
| ), | ||
| ITW_ROUTES.DISCOVERY.IPZS_PRIVACY, | ||
| {}, | ||
| createStore(appReducer, globalState as any) | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.