diff --git a/locales/en/index.yml b/locales/en/index.yml index 06a73027198..947b80fad2b 100644 --- a/locales/en/index.yml +++ b/locales/en/index.yml @@ -1921,7 +1921,8 @@ messageDetails: contextualHelpContent: !include messages/message_detail.md headerTitle: Message emptyMessage: No content - loadingText: Loading message details in progress... + loadingText: Loading message details + pleaseWait: Wait a few moments errorText: We were unable to load the details of your message retryText: It's probably a temporary error... please try again! submitBugText: If the problem is not resolved, report it with the '?' icon at the top right, thank you! diff --git a/locales/it/index.yml b/locales/it/index.yml index 77775a7fde4..73f9e28988e 100644 --- a/locales/it/index.yml +++ b/locales/it/index.yml @@ -1921,7 +1921,8 @@ messageDetails: contextualHelpContent: !include messages/message_detail.md headerTitle: Messaggio emptyMessage: Nessun contenuto - loadingText: Caricamento dei dettagli del messaggio in corso... + loadingText: Stiamo caricando il messaggio + pleaseWait: Attendi qualche secondo errorText: Non siamo riusciti a caricare i dettagli del tuo messaggio retryText: Probabilmente รจ un errore temporaneo... riprova per piacere! submitBugText: Se il problema non si risolve segnalacelo con l'icona '?' in alto a destra, grazie! diff --git a/ts/components/screens/LoadingScreenContent.tsx b/ts/components/screens/LoadingScreenContent.tsx index 20674cfb76c..c5fbaf29d8e 100644 --- a/ts/components/screens/LoadingScreenContent.tsx +++ b/ts/components/screens/LoadingScreenContent.tsx @@ -12,6 +12,7 @@ import { import { SafeAreaView } from "react-native-safe-area-context"; import { LoadingIndicator } from "../../components/ui/LoadingIndicator"; import { useOnFirstRender } from "../../utils/hooks/useOnFirstRender"; +import { WithTestID } from "../../types/WithTestID"; const styles = StyleSheet.create({ container: { @@ -29,13 +30,14 @@ const styles = StyleSheet.create({ const SPACE_BETWEEN_SPINNER_AND_TEXT = 24; -type LoadingScreenContentProps = { +type LoadingScreenContentProps = WithTestID<{ contentTitle: string; children?: React.ReactNode; -}; + headerVisible?: boolean; +}>; export const LoadingScreenContent = (props: LoadingScreenContentProps) => { - const { contentTitle, children } = props; + const { contentTitle, children, headerVisible, testID } = props; useOnFirstRender(() => { // Since the screen is shown for a very short time, @@ -50,7 +52,11 @@ export const LoadingScreenContent = (props: LoadingScreenContentProps) => { }); return ( - + { + it("should match the snapshot with title, no children, header hidden", () => { + const defaultProps = { + contentTitle: "Test Content Title" + } as React.ComponentProps; + expect(renderComponent(defaultProps)).toMatchSnapshot(); + }); + it("should match the snapshot with title, no children, header shown", () => { + const defaultProps = { + contentTitle: "Test Content Title", + headerVisible: true + } as React.ComponentProps; + expect(renderComponent(defaultProps)).toMatchSnapshot(); + }); + it("should match the snapshot with title, a child, header hidden", () => { + const defaultProps = { + contentTitle: "Test Content Title", + children: {"My test child"} + } as React.ComponentProps; + expect(renderComponent(defaultProps)).toMatchSnapshot(); + }); + it("should match the snapshot with title, a child, header shown", () => { + const defaultProps = { + contentTitle: "Test Content Title", + children: {"My test child"}, + headerVisible: true + } as React.ComponentProps; + expect(renderComponent(defaultProps)).toMatchSnapshot(); + }); +}); + +function renderComponent( + props: React.ComponentProps +) { + const globalState = appReducer(undefined, applicationChangeState("active")); + const designSystemEnabledState = appReducer( + globalState, + preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true }) + ); + return renderScreenWithNavigationStoreContext( + () => , + "DUMMY ROUTE", + {}, + createStore(appReducer, designSystemEnabledState as any) + ); +} diff --git a/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap new file mode 100644 index 00000000000..dec678b0f46 --- /dev/null +++ b/ts/components/screens/__tests__/__snapshots__/LoadingScreenContent.test.tsx.snap @@ -0,0 +1,2353 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`LoadingScreenContent should match the snapshot with title, a child, header hidden 1`] = ` + + + + + + + + + + + + + + + DUMMY ROUTE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Test Content Title + + + + + My test child + + + + + + + + + + + + + +`; + +exports[`LoadingScreenContent should match the snapshot with title, a child, header shown 1`] = ` + + + + + + + + + + + + + + + DUMMY ROUTE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Test Content Title + + + + + My test child + + + + + + + + + + + + + +`; + +exports[`LoadingScreenContent should match the snapshot with title, no children, header hidden 1`] = ` + + + + + + + + + + + + + + + DUMMY ROUTE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Test Content Title + + + + + + + + + + + + + + + +`; + +exports[`LoadingScreenContent should match the snapshot with title, no children, header shown 1`] = ` + + + + + + + + + + + + + + + DUMMY ROUTE + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Test Content Title + + + + + + + + + + + + + + + +`; diff --git a/ts/features/messages/navigation/MessagesNavigator.tsx b/ts/features/messages/navigation/MessagesNavigator.tsx index 40f450e93ea..1a2f4b0ddec 100644 --- a/ts/features/messages/navigation/MessagesNavigator.tsx +++ b/ts/features/messages/navigation/MessagesNavigator.tsx @@ -37,7 +37,7 @@ export const MessagesStackNavigator = () => { name={MESSAGES_ROUTES.MESSAGE_ROUTER} component={MessageRouterScreen} options={{ - headerShown: false + headerShown: true }} /> diff --git a/ts/features/messages/screens/MessageRouterScreen.tsx b/ts/features/messages/screens/MessageRouterScreen.tsx index aecf36b5835..43760d469d3 100644 --- a/ts/features/messages/screens/MessageRouterScreen.tsx +++ b/ts/features/messages/screens/MessageRouterScreen.tsx @@ -1,7 +1,7 @@ -import { StackActions } from "@react-navigation/native"; import React, { useCallback, useEffect, useRef } from "react"; -import BaseScreenComponent from "../../../components/screens/BaseScreenComponent"; -import { LoadingErrorComponent } from "../../../components/LoadingErrorComponent"; +import { View } from "react-native"; +import { StackActions } from "@react-navigation/native"; +import { Body, VSpacer } from "@pagopa/io-app-design-system"; import I18n from "../../../i18n"; import { IOStackNavigationRouteProps, @@ -11,7 +11,6 @@ import { MessagesParamsList } from "../navigation/params"; import ROUTES from "../../../navigation/routes"; import { useIODispatch, useIOSelector } from "../../../store/hooks"; import { UIMessageId } from "../types"; -import { emptyContextualHelp } from "../../../utils/emptyContextualHelp"; import { trackOpenMessage } from "../analytics"; import { blockedFromPushNotificationSelector, @@ -27,6 +26,9 @@ import { import EUCOVIDCERT_ROUTES from "../../euCovidCert/navigation/routes"; import PN_ROUTES from "../../pn/navigation/routes"; import { MESSAGES_ROUTES } from "../navigation/routes"; +import { useHeaderSecondLevel } from "../../../hooks/useHeaderSecondLevel"; +import { OperationResultScreenContent } from "../../../components/screens/OperationResultScreenContent"; +import LoadingScreenContent from "../../../components/screens/LoadingScreenContent"; export type MessageRouterScreenRouteParams = { messageId: UIMessageId; @@ -46,7 +48,7 @@ export const MessageRouterScreen = ( const dispatch = useIODispatch(); const navigation = useIONavigation(); const isFirstRendering = useRef(true); - const showSpinner = useIOSelector(showSpinnerFromMessageGetStatusSelector); + const isLoading = useIOSelector(showSpinnerFromMessageGetStatusSelector); const thirdPartyMessageDetailsError = useIOSelector( thirdPartyMessageDetailsErrorSelector ); @@ -146,27 +148,47 @@ export const MessageRouterScreen = ( shouldNavigateBackAfterPushNotificationInteraction ]); + useHeaderSecondLevel({ + goBack: onCancelCallback, + supportRequest: true, + title: "" + }); + + if (isLoading) { + return ( + + + + {I18n.t("messageDetails.pleaseWait")} + + + ); + } + return ( - - - + ); }; diff --git a/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap b/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap index 3cb5e48df6b..d14fa8cffd8 100644 --- a/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap +++ b/ts/features/messages/screens/__tests__/__snapshots__/MessageRouterScreen.test.tsx.snap @@ -30,147 +30,6 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m ] } > - - - - - - - - - - - - MESSAGE_ROUTER - - - - - - - - @@ -339,80 +203,48 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m style={ Object { "alignItems": "center", - "flexDirection": "row", - "height": 56, } } > - + + + + + strokeWidth={5} + > + + + + @@ -469,117 +394,410 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m - - - + - - + "textAlign": "center", + }, + Object { + "fontSize": 24, + "lineHeight": 34, + }, + Object { + "color": "#17324D", + "fontFamily": "Titillium Web", + "fontStyle": "normal", + "fontWeight": "600", + }, + ] + } + weight="SemiBold" + > + Loading message details + - + - + + + + + + + + - - + + + + + + + + + - Loading message details in progress... - + /> + + + accessible={true} + collapsable={false} + focusable={true} + hitSlop={8} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + > + + + + + + + + - + @@ -589,6 +807,20 @@ exports[`MessageRouterScreen should match snapshot before starting to retrieve m + @@ -625,195 +857,54 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was } > - - + /> - - - - - - MESSAGE_ROUTER - - - - - - - - - - - - @@ -933,80 +1029,48 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was style={ Object { "alignItems": "center", - "flexDirection": "row", - "height": 56, } } > - + + + + + strokeWidth={5} + > + + + + @@ -1063,117 +1220,410 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was - - - + - - + "textAlign": "center", + }, + Object { + "fontSize": 24, + "lineHeight": 34, + }, + Object { + "color": "#17324D", + "fontFamily": "Titillium Web", + "fontStyle": "normal", + "fontWeight": "600", + }, + ] + } + weight="SemiBold" + > + Loading message details + - + - + + + + + + + + - - + + + + + + + + + - Loading message details in progress... - + /> + + + accessible={true} + collapsable={false} + focusable={true} + hitSlop={8} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + > + + + + + + + + - + @@ -1183,6 +1633,20 @@ exports[`MessageRouterScreen should match snapshot if message data retrieval was + @@ -1219,195 +1683,54 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai } > - - + /> - - - - - - MESSAGE_ROUTER - - - - - - - - - - - - - - + "current": null, + }, + ] + } + > + - - + + + + - + - + - - - - - + } + propList={ + Array [ + "fill", + ] + } + /> + + + + + + - - - + style={ + Array [ + Object { + "textAlign": "center", + }, + Object { + "fontSize": 24, + "lineHeight": 34, + }, + Object { + "color": "#17324D", + "fontFamily": "Titillium Web", + "fontStyle": "normal", + "fontWeight": "600", + }, + ] + } + weight="SemiBold" + > + There is a temporary problem, please try again. + - - - - - - - - - + - - - There is a temporary problem, please try again. - - - - - - - - - - - - - @@ -1926,158 +2174,463 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai accessibilityElementsHidden={true} accessible={false} allowFontScaling={false} + color="white" + defaultColor="white" + defaultWeight="Bold" ellipsizeMode="tail" + font="TitilliumWeb" + fontStyle={ + Object { + "fontSize": 16, + } + } importantForAccessibility="no-hide-descendants" maxFontSizeMultiplier={1.3} numberOfLines={1} style={ Array [ - Object { - "fontFamily": "Titillium Web", - "fontStyle": "normal", - "fontWeight": "700", - }, Object { "alignSelf": "center", }, Object { - "color": "#0073E6", + "fontSize": 16, }, Object { - "color": undefined, + "color": "#FFFFFF", + "fontFamily": "Titillium Web", + "fontStyle": "normal", + "fontWeight": "700", }, ] } + weight="Bold" > - Cancel + Retry + + + + + - - + Cancel + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - Retry - - - - + /> + + @@ -2092,182 +2645,55 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval fai - - - -`; - -exports[`MessageRouterScreen should match snapshot on message data retrieval success 1`] = ` - - - - - - - - - - - - - - MESSAGE_ROUTER - - - - - - - + Object { + "height": 44, + "left": 0, + "position": "absolute", + "right": 0, + "top": 0, + "zIndex": 1, + } + } + /> + + + +`; + +exports[`MessageRouterScreen should match snapshot on message data retrieval success 1`] = ` + + + - @@ -2436,21 +2867,491 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval suc style={ Object { "alignItems": "center", - "flexDirection": "row", - "height": 56, } } > + + + + + + + + + + + + + + + + + + + + + + Loading message details + + + + + + + Wait a few moments + + + + + + + + + + + + + + + + + + + + @@ -2563,120 +3460,8 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval suc - - - - - - - - - - - - - Loading message details in progress... - - - - - @@ -2686,6 +3471,20 @@ exports[`MessageRouterScreen should match snapshot on message data retrieval suc + @@ -2721,147 +3520,6 @@ exports[`MessageRouterScreen should match snapshot while retrieving message data ] } > - - - - - - - - - - - - MESSAGE_ROUTER - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + Loading message details + + + + + + Wait a few moments + + + + + + + + + + + + + + + + + + + + @@ -3157,120 +4286,8 @@ exports[`MessageRouterScreen should match snapshot while retrieving message data - - - - - - - - - - - - - Loading message details in progress... - - - - - @@ -3280,6 +4297,20 @@ exports[`MessageRouterScreen should match snapshot while retrieving message data +