feat: [IOPID-2634] Implement Zendesk FAQ Banner in the accesso_a_io…

… subCategories screen (#6714) >[!Important] > Depends on [this PR on io-services-metadata](pagopa/io-services-metadata#936) ## Short description This PR updates the content definition url source and implements the Zendesk sub categories `Banner` visualization in relation to the subCategories configuration. ## List of changes proposed in this pull request - Updated the content definition url in the `scripts/generate-api-models.sh` file - Integrated the `Banner` educational in the `ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx` screen ## Demo |iOS |Android | |:-----------------|:-----------------| |<video src="https://github.com/user-attachments/assets/72053327-c331-4c71-aed7-f60a2fdf7789"></video>|<video src="https://github.com/user-attachments/assets/b0c90a13-1779-4c7b-bd83-5066256e1c85"></video>| >[!Important] > The Banner's pictogram has been changed after the demo has been recorded: > ><img src="https://github.com/user-attachments/assets/79e60c78-bcce-4721-a981-a49d3968cdfa" width="300" /> ## How to test This scenario can be tested in the local environment. Run the `io-dev-api-server` from [this branch](https://github.com/pagopa/io-dev-api-server/tree/IOPID-2720-io-login-zendesk-faq-banner), then repeat the steps shown in the demo videos and ensure that everything works properly. --------- Co-authored-by: Alice Di Rico <[email protected]>
pagopa · Feb 20, 2025 · 13c6767 · 13c6767
1 parent bbbbd94
commit 13c6767
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 3 deletions.
diff --git a/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx b/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx
@@ -1,7 +1,11 @@
 import {
+  Banner,
+  ContentWrapper,
   Divider,
   IOVisualCostants,
-  ListItemNav
+  ListItemNav,
+  useIOToast,
+  VSpacer
 } from "@pagopa/io-app-design-system";
 import { FlatList, ListRenderItemInfo } from "react-native";
 import { ZendeskSubCategory } from "../../../../definitions/content/ZendeskSubCategory";
@@ -21,6 +25,9 @@ import {
   zendeskSupportFailure
 } from "../store/actions";
 import { zendeskSelectedCategorySelector } from "../store/reducers";
+import { openWebUrl } from "../../../utils/url";
+import { trackHelpCenterCtaTapped } from "../../../utils/analytics";
+import { getOrFallback } from "../../../utils/object";
 
 export type ZendeskChooseSubCategoryNavigationParams = {
   assistanceType: ZendeskAssistanceType;
@@ -36,9 +43,13 @@ type Props = IOStackNavigationRouteProps<
  * see {@link ZendeskChooseCategory} to check the previous category screen
  */
 const ZendeskChooseSubCategory = (props: Props) => {
+  const { error } = useIOToast();
   const selectedCategory = useIOSelector(zendeskSelectedCategorySelector);
   const dispatch = useIODispatch();
-  const { assistanceType } = props.route.params;
+  const {
+    params: { assistanceType },
+    name: routeName
+  } = props.route;
   const selectedSubcategory = (subcategory: ZendeskSubCategory) =>
     dispatch(zendeskSelectedSubcategory(subcategory));
   const zendeskWorkUnitFailure = (reason: string) =>
@@ -61,6 +72,8 @@ const ZendeskChooseSubCategory = (props: Props) => {
     selectedCategory.zendeskSubCategories?.subCategories ?? [];
   const subCategoriesId: string =
     selectedCategory.zendeskSubCategories?.id ?? "";
+  const bannerEducational =
+    selectedCategory.zendeskSubCategories?.bannerEducational;
 
   const locale = getFullLocale();
 
@@ -90,6 +103,35 @@ const ZendeskChooseSubCategory = (props: Props) => {
       ignoreSafeAreaMargin={true}
       testID={"ZendeskChooseCategory"}
     >
+      {bannerEducational && (
+        <ContentWrapper>
+          <Banner
+            pictogramName="help"
+            size="big"
+            color="neutral"
+            title={getOrFallback(bannerEducational.title, locale, "it-IT")}
+            content={getOrFallback(bannerEducational.content, locale, "it-IT")}
+            action={getOrFallback(
+              bannerEducational.action.label,
+              locale,
+              "it-IT"
+            )}
+            onPress={() => {
+              const url = getOrFallback(
+                bannerEducational.action.href,
+                locale,
+                "it-IT"
+              );
+
+              trackHelpCenterCtaTapped(selectedCategory.value, url, routeName);
+              openWebUrl(url, () => {
+                error(I18n.t("global.jserror.title"));
+              });
+            }}
+          />
+          <VSpacer size={8} />
+        </ContentWrapper>
+      )}
       <FlatList
         scrollEnabled={false}
         contentContainerStyle={{
@@ -98,7 +140,7 @@ const ZendeskChooseSubCategory = (props: Props) => {
         data={subCategories}
         keyExtractor={c => c.value}
         renderItem={renderItem}
-        ItemSeparatorComponent={() => <Divider />}
+        ItemSeparatorComponent={Divider}
       />
     </IOScrollViewWithLargeHeader>
   );

diff --git a/ts/utils/object.ts b/ts/utils/object.ts
@@ -10,3 +10,38 @@ export const findFirstCaseInsensitive =
       Object.entries,
       A.findFirst(([k, _]) => k.toLowerCase() === key.toLowerCase())
     );
+
+/**
+ * This function aims to handle cases where it is uncertain whether a key exists in an object and provides a fallback value.
+ * @param obj The object from which to extract the value
+ * @param key The desired key
+ * @param fallback The fallback key
+ * @example
+ * // Example 1
+ * const obj = {
+ *  it_IT: "it",
+ *  en_EN: "en"
+ * };
+ * const key: "it_IT"|"en_EN"|"de_DE" = "de_DE";
+ * const result = getOrFallback(obj, key, "it_IT");
+ *
+ * console.log(result); // the result will fallback to "it"
+ *
+ * // Example 2
+ * const obj = {
+ *  it_IT: "it",
+ *  en_EN: "en",
+ *   de_DE: "de"
+ * };
+ * const key: "it_IT"|"en_EN"|"de_DE" = "de_DE";
+ * const result = getOrFallback(obj, key, "it_IT");
+ *
+ * console.log(result); // the result will be "de"
+ */
+export function getOrFallback<
+  O extends object,
+  K1 extends keyof O,
+  K2 extends keyof O
+>(obj: O, key: K1, fallback: K2) {
+  return obj[key] ?? obj[fallback];
+}