feat: [IOAPPCIT-41,IABT-1427,IABT-1428] Adds Zendesk permission label…

… and distincted flow for Add Card issue (pagopa#4334) ## Short description This PR implements a new logic to properly handle assistance request for card or payment ## List of changes proposed in this pull request - Updated Navigation Params - Implemented specific permission item on list - Add an IP Address specification label ## How to test Try to add a Payment Method, generate the failure, ask for assistance on the add method failure list https://user-images.githubusercontent.com/3959405/215705441-b0d3c552-b3ed-4b3d-bb2b-e080bb5d98b9.mp4 --------- Co-authored-by: Jacopo Pompilii <[email protected]> Co-authored-by: Fabio Bombardi <[email protected]>
dvisionlab · Jan 31, 2023 · 5b029fa · 5b029fa
1 parent d098c78
commit 5b029fa
Show file tree

Hide file tree

Showing 21 changed files with 117 additions and 53 deletions.
diff --git a/img/assistance/fiscalCode.svg → img/assistance/card.svg b/img/assistance/fiscalCode.svg → img/assistance/card.svg
diff --git a/locales/en/index.yml b/locales/en/index.yml
@@ -3243,13 +3243,16 @@ support:
     emailAddress: "Email address"
     deviceAndOS: "Device and Operating System"
     ipAddress: "IP address"
+    ipAddressValue: "Including the assumed geographic location"
     appVersionsHistory: "App version history"
     appVersionsHistoryValue: "To determine if the issue is due to the most recent update"
     identityProvider: "Identity Provider"
     navigationData: "In-app navigation data"
     navigationDataValue: "Such as the the last screen or message displayed in IO."
     stock: "Payment Notice details"
     stockValue: "Including the error you just received"
+    card: "Payment methods details"
+    cardValue: "Number (encrypted), expiration, network"
     header: "Submit a request"
     listTitle: "Ongoing requests"
     title: "Do you give us your consent?"

diff --git a/locales/it/index.yml b/locales/it/index.yml
@@ -3267,6 +3267,7 @@ support:
     emailAddress: "Indirizzo email"
     deviceAndOS: "Dispositivo e sistema operativo"
     ipAddress: "Indirizzo IP"
+    ipAddressValue: "Inclusa la posizione geografica desunta"
     appVersionsHistory: "Storico versioni dell’app"
     appVersionsHistoryValue: "Per capire se il problema dipende dall’ultimo aggiornamento"
     identityProvider: "Identity Provider"
@@ -3276,6 +3277,8 @@ support:
     devicePerformanceData: "Livello di memoria e batteria"
     stock: "Dati dell’avviso di pagamento"
     stockValue: "Incluso l’errore che hai appena ricevuto"
+    card: "Dati del metodo di pagamento"
+    cardValue: "Numero (cifrato), scadenza, circuito"
     prominentDisclosure: "Accesso alla galleria del dispositivo"
     prominentDisclosureData: "Per caricare foto e screenshot"
     header: "Apri una richiesta"

diff --git a/ts/components/screens/BaseScreenComponent/index.tsx b/ts/components/screens/BaseScreenComponent/index.tsx
@@ -97,7 +97,8 @@ const BaseScreenComponentFC = React.forwardRef<ReactNode, Props>(
                 contextualHelp,
                 contextualHelpMarkdown,
                 startingRoute: currentScreenName,
-                assistanceForPayment: false
+                assistanceForPayment: false,
+                assistanceForCard: false
               })
             );
           };

diff --git a/ts/features/zendesk/analytics/index.ts b/ts/features/zendesk/analytics/index.ts
@@ -2,6 +2,8 @@ import { getType } from "typesafe-actions";
 import { mixpanel } from "../../../mixpanel";
 import { Action } from "../../../store/actions/types";
 
+import { zendeskEnabled } from "../../../config";
+import { getNetworkErrorMessage } from "../../../utils/errors";
 import {
   getZendeskConfig,
   zendeskSelectedCategory,
@@ -10,8 +12,6 @@ import {
   zendeskSupportFailure,
   zendeskSupportStart
 } from "../store/actions";
-import { getNetworkErrorMessage } from "../../../utils/errors";
-import { zendeskEnabled } from "../../../config";
 
 const trackZendesk =
   (mp: NonNullable<typeof mixpanel>) =>
@@ -24,7 +24,8 @@ const trackZendesk =
         return mp.track(action.type);
       case getType(zendeskSupportStart):
         return mp.track(action.type, {
-          isAssistanceForPayment: action.payload.assistanceForPayment
+          isAssistanceForPayment: action.payload.assistanceForPayment,
+          isAssistanceForCard: action.payload.assistanceForCard
         });
       case getType(zendeskSupportFailure):
         return mp.track(action.type, {

diff --git a/ts/features/zendesk/components/ZendeskEmptyTicketsComponent.tsx b/ts/features/zendesk/components/ZendeskEmptyTicketsComponent.tsx
@@ -17,9 +17,13 @@ import { handleContactSupport } from "../utils";
 
 type Props = {
   assistanceForPayment: boolean;
+  assistanceForCard: boolean;
 };
 
-const ZendeskEmptyTicketsComponent = ({ assistanceForPayment }: Props) => {
+const ZendeskEmptyTicketsComponent = ({
+  assistanceForPayment,
+  assistanceForCard
+}: Props) => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
   const zendeskRemoteConfig = useIOSelector(zendeskConfigSelector);
 
@@ -28,9 +32,10 @@ const ZendeskEmptyTicketsComponent = ({ assistanceForPayment }: Props) => {
       handleContactSupport(
         navigation,
         assistanceForPayment,
+        assistanceForCard,
         zendeskRemoteConfig
       ),
-    [navigation, assistanceForPayment, zendeskRemoteConfig]
+    [navigation, assistanceForPayment, assistanceForCard, zendeskRemoteConfig]
   );
 
   const continueButtonProps = {

diff --git a/ts/features/zendesk/components/ZendeskSupportComponent.tsx b/ts/features/zendesk/components/ZendeskSupportComponent.tsx
@@ -27,6 +27,7 @@ import { handleContactSupport } from "../utils";
 
 type Props = {
   assistanceForPayment: boolean;
+  assistanceForCard: boolean;
 };
 
 /**
@@ -37,8 +38,10 @@ type Props = {
  * If the panic mode is active in the remote Zendesk config pressing the open a ticket button, the user will be sent to the ZendeskPanicMode
  * @constructor
  */
-const ZendeskSupportComponent = (props: Props) => {
-  const { assistanceForPayment } = props;
+const ZendeskSupportComponent = ({
+  assistanceForPayment,
+  assistanceForCard
+}: Props) => {
   const profile = useIOSelector(profileSelector);
   const maybeProfile: O.Option<InitializedProfile> = pot.toOption(profile);
   const zendeskRemoteConfig = useIOSelector(zendeskConfigSelector);
@@ -49,9 +52,10 @@ const ZendeskSupportComponent = (props: Props) => {
       handleContactSupport(
         navigation,
         assistanceForPayment,
+        assistanceForCard,
         zendeskRemoteConfig
       ),
-    [navigation, assistanceForPayment, zendeskRemoteConfig]
+    [navigation, assistanceForPayment, assistanceForCard, zendeskRemoteConfig]
   );
 
   return (
@@ -82,12 +86,12 @@ const ZendeskSupportComponent = (props: Props) => {
           if (O.isNone(maybeProfile)) {
             navigation.navigate(ZENDESK_ROUTES.MAIN, {
               screen: ZENDESK_ROUTES.SEE_REPORTS_ROUTERS,
-              params: { assistanceForPayment }
+              params: { assistanceForPayment, assistanceForCard }
             });
           } else {
             navigation.navigate(ZENDESK_ROUTES.MAIN, {
               screen: ZENDESK_ROUTES.ASK_SEE_REPORTS_PERMISSIONS,
-              params: { assistanceForPayment }
+              params: { assistanceForPayment, assistanceForCard }
             });
           }
         }}

diff --git a/ts/features/zendesk/saga/orchestration/index.ts b/ts/features/zendesk/saga/orchestration/index.ts
@@ -23,9 +23,11 @@ function* zendeskSupportWorkUnit(
     startScreenNavigation: () => {
       NavigationService.dispatchNavigationAction(
         CommonActions.navigate(ZENDESK_ROUTES.MAIN, {
-          screen: zendeskStart.payload.assistanceForPayment
-            ? ZENDESK_ROUTES.ASK_PERMISSIONS
-            : ZENDESK_ROUTES.HELP_CENTER,
+          screen:
+            zendeskStart.payload.assistanceForPayment ||
+            zendeskStart.payload.assistanceForCard
+              ? ZENDESK_ROUTES.ASK_PERMISSIONS
+              : ZENDESK_ROUTES.HELP_CENTER,
           params: zendeskStart.payload
         })
       );

diff --git a/ts/features/zendesk/screens/ZendeskAskPermissions.tsx b/ts/features/zendesk/screens/ZendeskAskPermissions.tsx
@@ -2,10 +2,10 @@ import { RouteProp, useRoute } from "@react-navigation/native";
 import { constNull, pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import React, { useEffect } from "react";
-import { View, SafeAreaView, ScrollView } from "react-native";
+import { SafeAreaView, ScrollView, View } from "react-native";
 import BatteryIcon from "../../../../img/assistance/battery.svg";
+import CardIcon from "../../../../img/assistance/card.svg";
 import EmailIcon from "../../../../img/assistance/email.svg";
-import FiscalCodeIcon from "../../../../img/assistance/fiscalCode.svg";
 import GalleryIcon from "../../../../img/assistance/gallery.svg";
 import StockIcon from "../../../../img/assistance/giacenza.svg";
 import HistoryIcon from "../../../../img/assistance/history.svg";
@@ -100,7 +100,7 @@ const getItems = (props: ItemProps): ReadonlyArray<ItemPermissionProps> => [
   },
   {
     id: "profileFiscalCode",
-    icon: <FiscalCodeIcon {...iconProps} />,
+    icon: <CardIcon {...iconProps} />,
     title: I18n.t("support.askPermissions.fiscalCode"),
     value: props.fiscalCode,
     testId: "profileFiscalCode"
@@ -126,6 +126,13 @@ const getItems = (props: ItemProps): ReadonlyArray<ItemPermissionProps> => [
     value: I18n.t("support.askPermissions.stockValue"),
     testId: "paymentIssues"
   },
+  {
+    id: "addCardIssues",
+    icon: <CardIcon {...iconProps} />,
+    title: I18n.t("support.askPermissions.card"),
+    value: I18n.t("support.askPermissions.cardValue"),
+    testId: "addCardIssues"
+  },
   {
     icon: <DeviceIcon {...iconProps} />,
     title: I18n.t("support.askPermissions.deviceAndOS"),
@@ -142,6 +149,7 @@ const getItems = (props: ItemProps): ReadonlyArray<ItemPermissionProps> => [
   {
     icon: <WebSiteIcon {...iconProps} />,
     title: I18n.t("support.askPermissions.ipAddress"),
+    value: I18n.t("support.askPermissions.ipAddressValue"),
     testId: "ipAddress"
   },
   {
@@ -167,6 +175,7 @@ const getItems = (props: ItemProps): ReadonlyArray<ItemPermissionProps> => [
 
 export type ZendeskAskPermissionsNavigationParams = {
   assistanceForPayment: boolean;
+  assistanceForCard: boolean;
 };
 
 /**
@@ -177,7 +186,7 @@ const ZendeskAskPermissions = () => {
   const route =
     useRoute<RouteProp<ZendeskParamsList, "ZENDESK_ASK_PERMISSIONS">>();
 
-  const assistanceForPayment = route.params.assistanceForPayment;
+  const { assistanceForPayment, assistanceForCard } = route.params;
 
   const dispatch = useIODispatch();
   const workUnitCompleted = () => dispatch(zendeskSupportCompleted());
@@ -257,6 +266,8 @@ const ZendeskAskPermissions = () => {
   const itemsToRemove: ReadonlyArray<string> = [
     // if user is not asking assistance for a payment, remove the related items from those ones shown
     ...(!assistanceForPayment ? ["paymentIssues"] : []),
+    // if user is not asking assistance for a payment, remove the related items from those ones shown
+    ...(!assistanceForCard ? ["addCardIssues"] : []),
     // if user is not logged in, remove the items related to his/her profile
     ...(!isUserLoggedIn
       ? ["profileNameSurname", "profileFiscalCode", "profileEmail"]
@@ -266,6 +277,7 @@ const ZendeskAskPermissions = () => {
   ];
   const items = getItems(itemsProps)
     .filter(it => (!assistanceForPayment ? it.id !== "paymentIssues" : true))
+    .filter(it => (!assistanceForCard ? it.id !== "addCardIssues" : true))
     .filter(it => !itemsToRemove.includes(it.id ?? ""))
     // remove these item whose have no value associated
     .filter(it => it.value !== notAvailable);

diff --git a/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx b/ts/features/zendesk/screens/ZendeskAskSeeReportsPermissions.tsx
@@ -2,9 +2,9 @@ import { useNavigation } from "@react-navigation/native";
 import { constNull, pipe } from "fp-ts/lib/function";
 import * as O from "fp-ts/lib/Option";
 import React from "react";
-import { View, SafeAreaView, ScrollView } from "react-native";
+import { SafeAreaView, ScrollView, View } from "react-native";
+import CardIcon from "../../../../img/assistance/card.svg";
 import EmailIcon from "../../../../img/assistance/email.svg";
-import FiscalCodeIcon from "../../../../img/assistance/fiscalCode.svg";
 import NameSurnameIcon from "../../../../img/assistance/nameSurname.svg";
 import { VSpacer } from "../../../components/core/spacer/Spacer";
 import { H1 } from "../../../components/core/typography/H1";
@@ -36,6 +36,7 @@ import { ZendeskParamsList } from "../navigation/params";
 
 export type ZendeskAskSeeReportsPermissionsNavigationParams = {
   assistanceForPayment: boolean;
+  assistanceForCard: boolean;
 };
 
 type ItemProps = {
@@ -56,7 +57,7 @@ const getItems = (props: ItemProps): ReadonlyArray<ItemPermissionProps> => [
   },
   {
     id: "profileFiscalCode",
-    icon: <FiscalCodeIcon {...iconProps} />,
+    icon: <CardIcon {...iconProps} />,
     title: I18n.t("support.askPermissions.fiscalCode"),
     value: props.fiscalCode,
     testId: "profileFiscalCode"
@@ -81,7 +82,7 @@ type Props = IOStackNavigationRouteProps<
  */
 const ZendeskAskSeeReportsPermissions = (props: Props) => {
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
-  const assistanceForPayment = props.route.params.assistanceForPayment;
+  const { assistanceForPayment, assistanceForCard } = props.route.params;
   const fiscalCode = useIOSelector(profileFiscalCodeSelector);
   const nameSurname = useIOSelector(profileNameSurnameSelector);
   const email = pipe(
@@ -108,7 +109,7 @@ const ZendeskAskSeeReportsPermissions = (props: Props) => {
     onPress: () => {
       navigation.navigate("ZENDESK_MAIN", {
         screen: "ZENDESK_SEE_REPORTS_ROUTERS",
-        params: { assistanceForPayment }
+        params: { assistanceForPayment, assistanceForCard }
       });
     },
     title: I18n.t("support.askPermissions.cta.allow")

diff --git a/ts/features/zendesk/screens/ZendeskChooseCategory.tsx b/ts/features/zendesk/screens/ZendeskChooseCategory.tsx
@@ -36,6 +36,7 @@ import { zendeskConfigSelector } from "../store/reducers";
 
 export type ZendeskChooseCategoryNavigationParams = {
   assistanceForPayment: boolean;
+  assistanceForCard: boolean;
 };
 
 type Props = IOStackNavigationRouteProps<
@@ -48,7 +49,7 @@ type Props = IOStackNavigationRouteProps<
  */
 const ZendeskChooseCategory = (props: Props) => {
   const dispatch = useDispatch();
-  const { assistanceForPayment } = props.route.params;
+  const { assistanceForPayment, assistanceForCard } = props.route.params;
   const zendeskConfig = useIOSelector(zendeskConfigSelector);
   const selectedCategory = (category: ZendeskCategory) =>
     dispatch(zendeskSelectedCategory(category));
@@ -86,11 +87,13 @@ const ZendeskChooseCategory = (props: Props) => {
           addTicketCustomField(categoriesId, category.value);
           if (hasSubCategories(category)) {
             props.navigation.navigate(ZENDESK_ROUTES.CHOOSE_SUB_CATEGORY, {
-              assistanceForPayment
+              assistanceForPayment,
+              assistanceForCard
             });
           } else {
             props.navigation.navigate(ZENDESK_ROUTES.ASK_PERMISSIONS, {
-              assistanceForPayment
+              assistanceForPayment,
+              assistanceForCard
             });
           }
         }}

diff --git a/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx b/ts/features/zendesk/screens/ZendeskChooseSubCategory.tsx
@@ -33,6 +33,7 @@ import { zendeskSelectedCategorySelector } from "../store/reducers";
 
 export type ZendeskChooseSubCategoryNavigationParams = {
   assistanceForPayment: boolean;
+  assistanceForCard: boolean;
 };
 
 type Props = IOStackNavigationRouteProps<
@@ -47,7 +48,7 @@ type Props = IOStackNavigationRouteProps<
 const ZendeskChooseSubCategory = (props: Props) => {
   const selectedCategory = useIOSelector(zendeskSelectedCategorySelector);
   const dispatch = useDispatch();
-  const { assistanceForPayment } = props.route.params;
+  const { assistanceForPayment, assistanceForCard } = props.route.params;
   const selectedSubcategory = (subcategory: ZendeskSubCategory) =>
     dispatch(zendeskSelectedSubcategory(subcategory));
   const zendeskWorkUnitFailure = (reason: string) =>
@@ -82,7 +83,8 @@ const ZendeskChooseSubCategory = (props: Props) => {
           // Set sub-category as custom field
           addTicketCustomField(subCategoriesId, subCategory.value);
           props.navigation.navigate("ZENDESK_ASK_PERMISSIONS", {
-            assistanceForPayment
+            assistanceForPayment,
+            assistanceForCard
           });
         }}
         first={listItem.index === 0}

diff --git a/ts/features/zendesk/screens/ZendeskSeeReportsRouters.tsx b/ts/features/zendesk/screens/ZendeskSeeReportsRouters.tsx
@@ -28,11 +28,12 @@ import { zendeskTicketNumberSelector } from "../store/reducers";
 
 export type ZendeskSeeReportsRoutersNavigationParams = {
   assistanceForPayment: boolean;
+  assistanceForCard: boolean;
 };
 
 type Props = IOStackNavigationRouteProps<
   ZendeskParamsList,
-  "ZENDESK_ASK_SEE_REPORTS_PERMISSIONS"
+  "ZENDESK_SEE_REPORTS_ROUTERS"
 >;
 /**
  * this screen checks if a user has at least a ticket, it shows:
@@ -45,7 +46,7 @@ const ZendeskSeeReportsRouters = (props: Props) => {
   const dispatch = useIODispatch();
   const zendeskToken = useIOSelector(zendeskTokenSelector);
   const ticketNumber = useIOSelector(zendeskTicketNumberSelector);
-  const assistanceForPayment = props.route.params.assistanceForPayment;
+  const { assistanceForPayment, assistanceForCard } = props.route.params;
 
   useEffect(() => {
     const zendeskConfig = pipe(
@@ -105,6 +106,7 @@ const ZendeskSeeReportsRouters = (props: Props) => {
     return (
       <ZendeskEmptyTicketsComponent
         assistanceForPayment={assistanceForPayment}
+        assistanceForCard={assistanceForCard}
       />
     );
   }