chore: [IOBP-1927] Improved the CGN webview playground usability, added a default user agent

ts/components/WebviewComponent.tsx

@@ -5,6 +5,7 @@ import {
   WebViewHttpErrorEvent,
   WebViewSourceUri
 } from "react-native-webview/lib/WebViewTypes";
+import { Platform } from "react-native";
 import I18n from "../i18n";
 import { mixpanelTrack } from "../mixpanel";
 import { resetDebugData, setDebugData } from "../store/actions/debug";
@@ -14,9 +15,10 @@ import { OperationResultScreenContent } from "./screens/OperationResultScreenCon
 
 type Props = {
   source: WebViewSourceUri;
+  playgroundEnabled?: boolean;
 };
 
-const WebviewComponent = ({ source }: Props) => {
+const WebviewComponent = ({ source, playgroundEnabled }: Props) => {
   const dispatch = useIODispatch();
   const [loading, setLoading] = useState(true);
   const [hasError, setHasError] = useState(false);
@@ -39,6 +41,10 @@ const WebviewComponent = ({ source }: Props) => {
     [dispatch]
   );
 
+  useEffect(() => {
+    setHasError(false);
+  }, [source]);
+
   const handleError = (event: WebViewErrorEvent | WebViewHttpErrorEvent) => {
     void mixpanelTrack("CGN_LANDING_PAGE_LOAD_ERROR", {
       uri: source.uri,
@@ -58,7 +64,7 @@ const WebviewComponent = ({ source }: Props) => {
 
   return (
     <>
-      {hasError ? (
+      {hasError && !playgroundEnabled ? (
         <OperationResultScreenContent
           testID="webview-error"
           pictogram="umbrella"
@@ -82,13 +88,29 @@ const WebviewComponent = ({ source }: Props) => {
             ref={ref}
             onLoadEnd={() => setLoading(false)}
             onHttpError={handleError}
+            userAgent={getDefaultUserAgent()}
             onError={handleError}
-            source={source}
+            source={{
+              ...source,
+              headers: {
+                ...(source.headers ?? {}),
+                "User-Agent": getDefaultUserAgent()
+              }
+            }}
           />
         </LoadingSpinnerOverlay>
       )}
     </>
   );
 };
 
+const getDefaultUserAgent = () => {
+  if (Platform.OS === "ios") {
+    return "AppIO IOS";
+  } else if (Platform.OS === "android") {
+    return "AppIO Android";
+  }
+  return "AppIO";
+};
+
 export default WebviewComponent;

ts/components/__tests__/__snapshots__/WebviewComponent.test.tsx.snap

@@ -291,6 +291,12 @@ exports[`WebviewComponent tests snapshot for component 1`] = `
         messagingModuleName=""
         newSource={
           {
+            "headers": [
+              {
+                "name": "User-Agent",
+                "value": "AppIO IOS",
+              },
+            ],
             "uri": "https://google.com",
           }
         }
@@ -304,6 +310,9 @@ exports[`WebviewComponent tests snapshot for component 1`] = `
         onShouldStartLoadWithRequest={[Function]}
         source={
           {
+            "headers": {
+              "User-Agent": "AppIO IOS",
+            },
             "uri": "https://google.com",
           }
         }
@@ -324,6 +333,7 @@ exports[`WebviewComponent tests snapshot for component 1`] = `
         testID="webview"
         textInteractionEnabled={true}
         useSharedProcessPool={true}
+        userAgent="AppIO IOS"
       />
     </View>
   </View>

ts/features/settings/devMode/playgrounds/CgnLandingPlayground.tsx

@@ -13,6 +13,7 @@ import {
   TextInput,
   View
 } from "react-native";
+import { WebViewSourceUri } from "react-native-webview/lib/WebViewTypes";
 import WebviewComponent from "../../../../components/WebviewComponent";
 import { useHeaderSecondLevel } from "../../../../hooks/useHeaderSecondLevel";
 
@@ -33,9 +34,12 @@ const styles = StyleSheet.create({
 });
 
 const CgnLandingPlayground = () => {
-  const [navigationURI, setNavigationUri] = useState("https://");
+  const [navigationURI, setNavigationUri] = useState("https://google.it");
   const [refererValue, setRefererValue] = useState("");
-  const [loadUri, setLoadUri] = useState("https://google.com");
+  const [source, setSource] = useState<WebViewSourceUri>({
+    uri: "https://google.it",
+    headers: undefined
+  });
   const [reloadKey, setReloadKey] = useState(0);
 
   useHeaderSecondLevel({
@@ -83,22 +87,23 @@ const CgnLandingPlayground = () => {
             variant="solid"
             label="Invia"
             onPress={() => {
-              setLoadUri(navigationURI);
+              setSource({
+                uri: navigationURI,
+                headers: {
+                  "X-PagoPa-CGN-Referer": refererValue
+                }
+              });
             }}
             accessibilityLabel={"Invia"}
           />
         </View>
         <VSpacer size={16} />
         <View style={{ flex: 1 }}>
-          {loadUri !== "" && (
+          {source && (
             <WebviewComponent
+              playgroundEnabled
               key={`${reloadKey}_webview`}
-              source={{
-                uri: loadUri,
-                headers: {
-                  "X-PagoPa-CGN-Referer": refererValue
-                }
-              }}
+              source={source}
             />
           )}
         </View>