feat: [IOCOM-864,IOCOM-865] Update message attachment's preview with …

…the new DS (#5428) ## Short description This PR updates the message attachment's preview screen to the new DS system. | Preview | Data Error | Preview Error | | ------------- | ------------- | ------------- | | ![Simulator Screenshot - iPhone 14 - 2024-01-23 at 18 54 24](https://github.com/pagopa/io-app/assets/5150343/198f1aaf-7b34-4567-a4ca-378eabd1bc1f) | ![Simulator Screenshot - iPhone 14 - 2024-01-23 at 18 53 46](https://github.com/pagopa/io-app/assets/5150343/0b228419-4389-4110-a57b-60bc20a762cc) | ![Simulator Screenshot - iPhone 14 - 2024-01-23 at 18 57 06](https://github.com/pagopa/io-app/assets/5150343/105ccf15-6738-4e45-ac7a-25c0a10056d6) | ## List of changes proposed in this pull request - New screen and components, referencing the new design system's components only - Removed in-preview attachment download ## How to test Using the io-dev-api-server, download some attachment. After that, enable the new DS and navigate to previously downloaded attachments to see the new DS. Check both Android and iOS. Check both success and failure cases. --------- Co-authored-by: Alessandro Dell'Oste <[email protected]>
pagopa · Jan 26, 2024 · 18f8cb3 · 18f8cb3
1 parent 4b708e4
commit 18f8cb3
Show file tree

Hide file tree

Showing 30 changed files with 3,964 additions and 193 deletions.
diff --git a/ts/components/LoadingSpinnerOverlay.tsx b/ts/components/LoadingSpinnerOverlay.tsx
@@ -1,22 +1,27 @@
-import { Text as NBButtonText } from "native-base";
 import * as React from "react";
 import { StyleSheet, View } from "react-native";
-import { IOColors, hexToRgba } from "@pagopa/io-app-design-system";
+import {
+  ButtonOutline,
+  IOColors,
+  hexToRgba
+} from "@pagopa/io-app-design-system";
 import I18n from "../i18n";
-import variables from "../theme/variables";
+import { useIOSelector } from "../store/hooks";
+import { isDesignSystemEnabledSelector } from "../store/reducers/persistedPreferences";
 import ButtonDefaultOpacity from "./ButtonDefaultOpacity";
-import BoxedRefreshIndicator from "./ui/BoxedRefreshIndicator";
 import { Overlay } from "./ui/Overlay";
 import { IOStyles } from "./core/variables/IOStyles";
 import { Body } from "./core/typography/Body";
+import BoxedRefreshIndicator from "./ui/BoxedRefreshIndicator";
 
 const styles = StyleSheet.create({
   textCaption: {
-    padding: variables.contentPadding
+    padding: 24
   }
 });
 
 type Props = Readonly<{
+  children?: React.ReactNode;
   isLoading: boolean;
   loadingCaption?: string;
   loadingOpacity?: number;
@@ -26,51 +31,56 @@ type Props = Readonly<{
 /**
  * A Component to display and overlay spinner conditionally
  */
-class LoadingSpinnerOverlay extends React.Component<Props> {
-  public render() {
-    const {
-      children,
-      isLoading,
-      loadingCaption,
-      loadingOpacity = 0.7,
-      onCancel
-    } = this.props;
-    return (
-      <Overlay
-        backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
-        foreground={
-          isLoading && (
-            <BoxedRefreshIndicator
-              caption={
-                <View style={styles.textCaption}>
-                  <Body accessible={true} style={{ textAlign: "center" }}>
-                    {loadingCaption || I18n.t("global.remoteStates.wait")}
-                  </Body>
-                </View>
-              }
-              action={
-                onCancel && (
-                  <View style={IOStyles.selfCenter}>
+const LoadingSpinnerOverlay = ({
+  children,
+  isLoading,
+  loadingCaption,
+  loadingOpacity = 0.7,
+  onCancel
+}: Props) => {
+  const isDesignSystemEnabled = useIOSelector(isDesignSystemEnabledSelector);
+  return (
+    <Overlay
+      backgroundColor={hexToRgba(IOColors.white, loadingOpacity)}
+      foreground={
+        isLoading && (
+          <BoxedRefreshIndicator
+            caption={
+              <View style={styles.textCaption}>
+                <Body accessible={true} style={{ textAlign: "center" }}>
+                  {loadingCaption || I18n.t("global.remoteStates.wait")}
+                </Body>
+              </View>
+            }
+            action={
+              onCancel && (
+                <View style={IOStyles.selfCenter}>
+                  {isDesignSystemEnabled ? (
+                    <ButtonOutline
+                      accessibilityLabel={I18n.t("global.buttons.cancel")}
+                      onPress={onCancel}
+                      testID="loadingSpinnerOverlayCancelButton"
+                      label={I18n.t("global.buttons.cancel")}
+                    />
+                  ) : (
                     <ButtonDefaultOpacity
                       onPress={onCancel}
                       cancel={true}
                       testID={"loadingSpinnerOverlayCancelButton"}
                     >
-                      <NBButtonText>
-                        {I18n.t("global.buttons.cancel")}
-                      </NBButtonText>
+                      <Body>{I18n.t("global.buttons.cancel")}</Body>
                     </ButtonDefaultOpacity>
-                  </View>
-                )
-              }
-            />
-          )
-        }
-      >
-        {children}
-      </Overlay>
-    );
-  }
-}
+                  )}
+                </View>
+              )
+            }
+          />
+        )
+      }
+    >
+      {children}
+    </Overlay>
+  );
+};
 
 export default LoadingSpinnerOverlay;
diff --git a/ts/components/__tests__/LoadingSpinnerOverlay.test.tsx b/ts/components/__tests__/LoadingSpinnerOverlay.test.tsx
@@ -0,0 +1,77 @@
+import * as React from "react";
+import { Text } from "react-native";
+import { render } from "@testing-library/react-native";
+import configureMockStore from "redux-mock-store";
+import { Provider } from "react-redux";
+import { appReducer } from "../../store/reducers";
+import { applicationChangeState } from "../../store/actions/application";
+import { preferencesDesignSystemSetEnabled } from "../../store/actions/persistedPreferences";
+import { GlobalState } from "../../store/reducers/types";
+import LoadingSpinnerOverlay from "../LoadingSpinnerOverlay";
+
+describe("LoadingSpinnerOverlay", () => {
+  it("Should match base no-loading snapshot", () => {
+    const component = renderComponent(false);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match base loading snapshot", () => {
+    const component = renderComponent(true);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match all-properties and not-loading snapshot", () => {
+    const child = <Text>This is a child</Text>;
+    const loadingCaption = "This is the loading caption";
+    const loadingOpacity = 0.65;
+    const onCancelCallback = () => undefined;
+    const component = renderComponent(
+      false,
+      child,
+      loadingCaption,
+      loadingOpacity,
+      onCancelCallback
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("Should match all-properties and loading snapshot", () => {
+    const child = <Text>This is a child</Text>;
+    const loadingCaption = "This is the loading caption";
+    const loadingOpacity = 0.65;
+    const onCancelCallback = () => undefined;
+    const component = renderComponent(
+      true,
+      child,
+      loadingCaption,
+      loadingOpacity,
+      onCancelCallback
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+});
+
+const renderComponent = (
+  isLoading: boolean,
+  children?: React.ReactNode,
+  loadingCaption?: string,
+  loadingOpacity?: number,
+  onCancel?: () => void
+) => {
+  const initialState = appReducer(undefined, applicationChangeState("active"));
+  const dsState = appReducer(
+    initialState,
+    preferencesDesignSystemSetEnabled({ isDesignSystemEnabled: true })
+  );
+  const mockStore = configureMockStore<GlobalState>();
+  const store: ReturnType<typeof mockStore> = mockStore(dsState);
+  return render(
+    <Provider store={store}>
+      <LoadingSpinnerOverlay
+        isLoading={isLoading}
+        loadingCaption={loadingCaption}
+        loadingOpacity={loadingOpacity}
+        onCancel={onCancel}
+      >
+        {children}
+      </LoadingSpinnerOverlay>
+    </Provider>
+  );
+};
diff --git a/ts/components/__tests__/WebviewComponent.test.tsx b/ts/components/__tests__/WebviewComponent.test.tsx
@@ -1,11 +1,28 @@
 import { render } from "@testing-library/react-native";
+import { Provider } from "react-redux";
+import configureMockStore from "redux-mock-store";
 import React from "react";
 import WebviewComponent from "../WebviewComponent";
+import { appReducer } from "../../store/reducers";
+import { applicationChangeState } from "../../store/actions/application";
+import { GlobalState } from "../../store/reducers/types";
 
 describe("WebviewComponent tests", () => {
   it("snapshot for component", () => {
+    const globalState = appReducer(undefined, applicationChangeState("active"));
+    const enrichedState = {
+      ...globalState,
+      persistedPreferences: {
+        ...globalState.persistedPreferences,
+        isDesignSystemEnabled: false
+      }
+    };
+    const mockStore = configureMockStore<GlobalState>();
+    const store: ReturnType<typeof mockStore> = mockStore(enrichedState);
     const component = render(
-      <WebviewComponent source={{ uri: "https://google.com" }} />
+      <Provider store={store}>
+        <WebviewComponent source={{ uri: "https://google.com" }} />
+      </Provider>
     );
     expect(component).toMatchSnapshot();
   });