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

## Short description
This PR introduces improvements to how the `WebviewComponent` handles
user agent headers, as well as refactors the CGN landing playground to
use a more robust source object for webview navigation. The main themes
are enhanced webview header configuration and improved playground
usability.

## List of changes proposed in this pull request
* Added a `getDefaultUserAgent` function to set a platform-specific user
agent string for webview requests, ensuring consistent identification
across iOS, Android, and other platforms that CGN merchants will use.
* Edited the webview source prop to always include the correct
`User-Agent` header, merging with any existing headers.
**Error handling improvements:**
* Added a `useEffect` to reset error state when the webview source
changes, preventing stale error messages when navigating to new URLs.
* Refactored the CGN landing playground to use a `WebViewSourceUri`
object for navigation, simplifying state management and making header
manipulation more explicit.
* Updated the playground to pass the new `playgroundEnabled` prop to the
webview component, enabling enhanced testing features that allow
merchants to check the error pages if the webview goes into error
without showing the standard umbrella.

## How to test
⚠️ It's important to test this implementation with the production
environment, ensuring that for those merchants with a landing page
discount, the webview with the page is displayed successfully.

Author: Hantex9

ts/components/WebviewComponent.tsx

@@ -14,9 +14,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 +40,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 +63,7 @@ const WebviewComponent = ({ source }: Props) => {
 
   return (
     <>
-      {hasError ? (
+      {hasError && !playgroundEnabled ? (
         <OperationResultScreenContent
           testID="webview-error"
           pictogram="umbrella"

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>