chore: [IOBP-1076] FAQ without CTA with sticky buttons (#6555)

## Short description This pull request includes changes to the `ZendeskSupportHelpCenter` component updating the logic for displaying footer actions without fixed option. ## List of changes proposed in this pull request - Replace `actions` prop from the `IOScrollView` component with `FooterActions` component - Adjust horizontal margin with `includeContentMargins={false}` and `ContentWrapper` component ## How to test - Open FAQ - Ensure that CTA buttons are at the end of the view | Old | New | |--------|--------| | <img width="480" alt="Screenshot 2024-12-16 at 17 33 27" src="https://github.com/user-attachments/assets/78cb2888-4ef0-41a7-b5db-beeecdf0b30e" /> | <img width="483" alt="Screenshot 2024-12-18 at 11 21 50" src="https://github.com/user-attachments/assets/50f2484e-83d9-418d-8c6c-452d031ad708" />| --------- Co-authored-by: Alessandro <alessandro.izzo998@gmail.com> Co-authored-by: Damiano Plebani <damiano.plebani@pagopa.it>
pagopa · Dec 19, 2024 · a0d562f · a0d562f
1 parent d8a8e66
commit a0d562f
Showing 1 changed file with 39 additions and 28 deletions.
diff --git a/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx b/ts/features/zendesk/screens/ZendeskSupportHelpCenter.tsx
@@ -2,7 +2,9 @@ import {
   AccordionItem,
   Body,
   ButtonLink,
+  ContentWrapper,
   FeatureInfo,
+  FooterActions,
   H4,
   H6,
   HeaderSecondLevel,
@@ -395,36 +397,45 @@ const ZendeskSupportHelpCenter = () => {
     <IOScrollView
       animatedRef={animatedScrollViewRef}
       testID={"ZendeskSupportHelpCenterScreen"}
-      actions={showRequestSupportContacts ? footerActions : undefined}
+      includeContentMargins={false}
+      excludeEndContentMargin={showRequestSupportContacts}
     >
-      <FaqManager
-        contextualHelpConfig={contextualHelpConfig}
-        faqCategories={faqCategories}
-        startingRoute={startingRoute}
-      />
+      <ContentWrapper>
+        <FaqManager
+          contextualHelpConfig={contextualHelpConfig}
+          faqCategories={faqCategories}
+          startingRoute={startingRoute}
+        />
 
-      {showRequestSupportContacts && (
-        <>
-          <VSpacer size={24} />
-          <H6>{I18n.t("support.helpCenter.supportComponent.title")}</H6>
-          <VSpacer size={8} />
-          <Body>{I18n.t("support.helpCenter.supportComponent.subtitle")}</Body>
-          <VSpacer size={16} />
-          <ButtonLink
-            label={I18n.t("support.askPermissions.privacyLink")}
-            onPress={() => {
-              openWebUrl(zendeskPrivacyUrl, () =>
-                IOToast.error(I18n.t("global.jserror.title"))
-              );
-            }}
-          />
-          <VSpacer size={24} />
-          <FeatureInfo
-            iconName="notice"
-            body={I18n.t("support.helpCenter.supportComponent.adviceMessage")}
-          />
-        </>
-      )}
+        {showRequestSupportContacts && (
+          <>
+            <VSpacer size={24} />
+            <H6>{I18n.t("support.helpCenter.supportComponent.title")}</H6>
+            <VSpacer size={8} />
+            <Body>
+              {I18n.t("support.helpCenter.supportComponent.subtitle")}
+            </Body>
+            <VSpacer size={16} />
+            <ButtonLink
+              label={I18n.t("support.askPermissions.privacyLink")}
+              onPress={() => {
+                openWebUrl(zendeskPrivacyUrl, () =>
+                  IOToast.error(I18n.t("global.jserror.title"))
+                );
+              }}
+            />
+            <VSpacer size={24} />
+            <FeatureInfo
+              iconName="notice"
+              body={I18n.t("support.helpCenter.supportComponent.adviceMessage")}
+            />
+          </>
+        )}
+      </ContentWrapper>
+      <FooterActions
+        fixed={false}
+        actions={showRequestSupportContacts ? footerActions : undefined}
+      />
     </IOScrollView>
   );
 };