fix: [IOPID-1436], [IOPID-1453] Delete helper button and header title…

… on email validate screen and add logic to show support buttons in faq screen (#5484) ## Short description delete helper button and header title on email validate screen and add logic to show support buttons in faq screen. ## List of changes proposed in this pull request ### [IOPID-1436]: delete helper button and header title on email validate screen Delete header title and helper in validate/validated email screens. <p> | validate email | validated email | | - | - | | <img width="250" alt="delete_header_validate_Email" src="https://github.com/pagopa/io-app/assets/83651704/837eb4c9-2779-4382-a1cb-680e2eed551a"> | <img width="250" alt="delete_header_email_validated" src="https://github.com/pagopa/io-app/assets/83651704/ca48a02e-c311-4c1d-af1e-37bc5d59ec29"> | </p> ### How to test Run the application and execute the email validation flow ### [IOPID-1453]: add logic to show support buttons in faq screen Change logic to show support buttons. The buttons for requesting assistance are only shown if the user has the e-mail validated or if the user is not yet logged in with SPID/CIE. If the user has not validated the email, the buttons are not shown. <p> | not logged | logged with validated email | logged no validated email | | - | - | - | | <img width="250" alt="visible_assistence_buttons_before_auth" src="https://github.com/pagopa/io-app/assets/83651704/91bde7bb-7020-4cee-ac42-6bb6ba06d06b"> | <img width="250" alt="visible_assistence_buttons" src="https://github.com/pagopa/io-app/assets/83651704/e8984f68-9c31-4529-b878-541adaf21ca1"> | <img width="250" alt="not_visible_assistence_buttons_email_not_validated" src="https://github.com/pagopa/io-app/assets/83651704/decdb415-b17f-432b-ac15-b98d353a5f7f"> | </p> ### How to test Run the application with [this line commented](https://github.com/pagopa/io-app/blob/6c076a1fee25c0a0853644d63aa894ff26854aa3/ts/sagas/startup.ts#L492) in order to disable the blocks that do not allow you to continue in the app if you do not have a validated email [IOPID-1436]: https://pagopa.atlassian.net/browse/IOPID-1436?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ [IOPID-1453]: https://pagopa.atlassian.net/browse/IOPID-1453?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
pagopa · Feb 5, 2024 · 00743fd · 00743fd
1 parent e34d79d
commit 00743fd
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 73 deletions.
diff --git a/ts/components/NewRemindEmailValidationOverlay.tsx b/ts/components/NewRemindEmailValidationOverlay.tsx
@@ -213,11 +213,6 @@ const NewRemindEmailValidationOverlay = (props: Props) => {
     <BaseScreenComponent
       goBack={false}
       accessibilityEvents={{ avoidNavigationEventsUsage: true }}
-      contextualHelpMarkdown={{
-        title: "email.validate.title",
-        body: "email.validate.help"
-      }}
-      headerTitle={I18n.t("email.newinsert.header")}
     >
       <SafeAreaView style={IOStyles.flex}>
         <VSpacer size={40} />

diff --git a/ts/features/zendesk/components/ZendeskSupportComponent.tsx b/ts/features/zendesk/components/ZendeskSupportComponent.tsx
@@ -18,7 +18,10 @@ import {
   IOStackNavigationProp
 } from "../../../navigation/params/AppParamsList";
 import { useIOSelector } from "../../../store/hooks";
-import { profileSelector } from "../../../store/reducers/profile";
+import {
+  isProfileEmailValidatedSelector,
+  profileSelector
+} from "../../../store/reducers/profile";
 import { showToast } from "../../../utils/showToast";
 import { openWebUrl } from "../../../utils/url";
 import ZENDESK_ROUTES from "../navigation/routes";
@@ -48,6 +51,7 @@ const ZendeskSupportComponent = ({
   const maybeProfile: O.Option<InitializedProfile> = pot.toOption(profile);
   const zendeskRemoteConfig = useIOSelector(zendeskConfigSelector);
   const navigation = useNavigation<IOStackNavigationProp<AppParamsList>>();
+  const isEmailValidated = useIOSelector(isProfileEmailValidatedSelector);
 
   const handleContactSupportPress = React.useCallback(
     () =>
@@ -67,6 +71,8 @@ const ZendeskSupportComponent = ({
     ]
   );
 
+  const showRequestSupportButtons = isEmailValidated || !pot.isSome(profile);
+
   return (
     <>
       <H3>{I18n.t("support.helpCenter.supportComponent.title")}</H3>
@@ -91,52 +97,56 @@ const ZendeskSupportComponent = ({
       </InfoBox>
       <VSpacer size={16} />
 
-      <ButtonDefaultOpacity
-        onPress={() => {
-          void mixpanelTrack("ZENDESK_SHOW_TICKETS_STARTS");
-          if (O.isNone(maybeProfile)) {
-            navigation.navigate(ZENDESK_ROUTES.MAIN, {
-              screen: ZENDESK_ROUTES.SEE_REPORTS_ROUTERS,
-              params: {
-                assistanceForPayment,
-                assistanceForCard,
-                assistanceForFci
-              }
-            });
-          } else {
-            navigation.navigate(ZENDESK_ROUTES.MAIN, {
-              screen: ZENDESK_ROUTES.ASK_SEE_REPORTS_PERMISSIONS,
-              params: {
-                assistanceForPayment,
-                assistanceForCard,
-                assistanceForFci
+      {showRequestSupportButtons && (
+        <>
+          <ButtonDefaultOpacity
+            onPress={() => {
+              void mixpanelTrack("ZENDESK_SHOW_TICKETS_STARTS");
+              if (O.isNone(maybeProfile)) {
+                navigation.navigate(ZENDESK_ROUTES.MAIN, {
+                  screen: ZENDESK_ROUTES.SEE_REPORTS_ROUTERS,
+                  params: {
+                    assistanceForPayment,
+                    assistanceForCard,
+                    assistanceForFci
+                  }
+                });
+              } else {
+                navigation.navigate(ZENDESK_ROUTES.MAIN, {
+                  screen: ZENDESK_ROUTES.ASK_SEE_REPORTS_PERMISSIONS,
+                  params: {
+                    assistanceForPayment,
+                    assistanceForCard,
+                    assistanceForFci
+                  }
+                });
               }
-            });
-          }
-        }}
-        style={{
-          alignSelf: "stretch"
-        }}
-        disabled={false}
-        bordered={true}
-        testID={"showTicketsButton"}
-      >
-        <Label>{I18n.t("support.helpCenter.cta.seeReports")}</Label>
-      </ButtonDefaultOpacity>
-      <VSpacer size={16} />
+            }}
+            style={{
+              alignSelf: "stretch"
+            }}
+            disabled={false}
+            bordered={true}
+            testID={"showTicketsButton"}
+          >
+            <Label>{I18n.t("support.helpCenter.cta.seeReports")}</Label>
+          </ButtonDefaultOpacity>
+          <VSpacer size={16} />
 
-      <ButtonDefaultOpacity
-        style={{
-          alignSelf: "stretch"
-        }}
-        onPress={handleContactSupportPress}
-        disabled={false}
-        testID={"contactSupportButton"}
-      >
-        <Label color={"white"}>
-          {I18n.t("support.helpCenter.cta.contactSupport")}
-        </Label>
-      </ButtonDefaultOpacity>
+          <ButtonDefaultOpacity
+            style={{
+              alignSelf: "stretch"
+            }}
+            onPress={handleContactSupportPress}
+            disabled={false}
+            testID={"contactSupportButton"}
+          >
+            <Label color={"white"}>
+              {I18n.t("support.helpCenter.cta.contactSupport")}
+            </Label>
+          </ButtonDefaultOpacity>
+        </>
+      )}
     </>
   );
 };

diff --git a/ts/store/reducers/assistanceTools.ts b/ts/store/reducers/assistanceTools.ts
@@ -1,5 +1,4 @@
 import { combineReducers } from "redux";
-import * as pot from "@pagopa/ts-commons/lib/pot";
 import { createSelector } from "reselect";
 import { Action } from "../actions/types";
 import zendeskReducer, {
@@ -10,7 +9,6 @@ import {
   canShowHelp
 } from "../../utils/supportAssistance";
 import { assistanceToolConfigSelector } from "./backendStatus";
-import { isProfileEmailValidatedSelector, profileSelector } from "./profile";
 
 export type AssistanceToolsState = {
   zendesk: ZendeskState;
@@ -21,17 +19,12 @@ const assistanceToolsReducer = combineReducers<AssistanceToolsState, Action>({
 });
 
 // This selector contains the logic to show or not the help button:
-// if remote FF is zendesk + ff local + the profile is not potSome or the email is validated
+// if remote FF is zendesk + ff local
 export const canShowHelpSelector = createSelector(
   assistanceToolConfigSelector,
-  profileSelector,
-  isProfileEmailValidatedSelector,
-  (assistanceToolConfig, profile, isProfileEmailValidated): boolean => {
+  (assistanceToolConfig): boolean => {
     const remoteTool = assistanceToolRemoteConfig(assistanceToolConfig);
-    return canShowHelp(
-      remoteTool,
-      !pot.isSome(profile) || isProfileEmailValidated
-    );
+    return canShowHelp(remoteTool);
   }
 );
 

diff --git a/ts/utils/__tests__/supportAssistance.test.ts b/ts/utils/__tests__/supportAssistance.test.ts
@@ -29,16 +29,12 @@ describe("anonymousAssistanceAddress", () => {
 
 describe("canShowHelp", () => {
   it("if assistanceTool is Zendesk, should return true if the email is validated", () => {
-    expect(canShowHelp(ToolEnum.zendesk, true)).toBeTruthy();
-    expect(canShowHelp(ToolEnum.zendesk, false)).toBeFalsy();
+    expect(canShowHelp(ToolEnum.zendesk)).toBeTruthy();
   });
   it("if assistanceTool is instabug, web or none, should return false", () => {
-    expect(canShowHelp(ToolEnum.instabug, true)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.instabug, false)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.web, true)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.none, true)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.web, false)).toBeFalsy();
-    expect(canShowHelp(ToolEnum.none, false)).toBeFalsy();
+    expect(canShowHelp(ToolEnum.instabug)).toBeFalsy();
+    expect(canShowHelp(ToolEnum.web)).toBeFalsy();
+    expect(canShowHelp(ToolEnum.none)).toBeFalsy();
   });
 });
 

diff --git a/ts/utils/supportAssistance.ts b/ts/utils/supportAssistance.ts
@@ -144,13 +144,10 @@ export const resetAssistanceData = () => {
 export const hasSubCategories = (zendeskCategory: ZendeskCategory): boolean =>
   (zendeskCategory.zendeskSubCategories?.subCategories ?? []).length > 0;
 // help can be shown only when remote FF is  zendesk + local FF + emailValidated
-export const canShowHelp = (
-  assistanceTool: ToolEnum,
-  isEmailValidated: boolean
-): boolean => {
+export const canShowHelp = (assistanceTool: ToolEnum): boolean => {
   switch (assistanceTool) {
     case ToolEnum.zendesk:
-      return zendeskEnabled && isEmailValidated;
+      return zendeskEnabled;
     case ToolEnum.instabug:
     case ToolEnum.web:
     case ToolEnum.none: