chore: [IOCOM-1760] Push notification permissions reminder banner

locales/en/index.yml

@@ -2925,6 +2925,11 @@ bonus:
         conjunction: " and "
 features:
   messages:
+    pushNotifications:
+      banner:
+        title: "Don't miss any important messages!"
+        body: "Turn on push notifications to know when you get a message on IO."
+        CTA: "Turn on push notifications"
     attachmentDownloadFeedback: "Download in progress"
     attachments: "Attachments"
     loading:

locales/it/index.yml

@@ -2926,6 +2926,11 @@ bonus:
         conjunction: ", "
 features:
   messages:
+    pushNotifications:
+      banner:
+        title: "Non perderti i messaggi importanti"
+        body: "Attiva le notifiche push per sapere quando ricevi un messaggio su IO"
+        CTA: "Attiva notifiche push"
     attachmentDownloadFeedback: "Download in corso"
     attachments: "Allegati"
     loading:

ts/features/common/store/reducers/__tests__/__snapshots__/index.test.ts.snap

@@ -145,6 +145,7 @@ exports[`featuresPersistor should match snapshot 1`] = `
   },
   "landingBanners": {
     "ITW_DISCOVERY": true,
+    "PUSH_NOTIFICATIONS_REMINDER": false,
     "SETTINGS_DISCOVERY": true,
   },
   "loginFeatures": {

ts/features/landingScreenMultiBanner/store/__tests__/__snapshots__/reducer.test.ts.snap

@@ -3,6 +3,7 @@
 exports[`landingScreenBannersReducer should match snapshot: undefined_no_action 1`] = `
 {
   "ITW_DISCOVERY": true,
+  "PUSH_NOTIFICATIONS_REMINDER": false,
   "SETTINGS_DISCOVERY": true,
 }
 `;

ts/features/landingScreenMultiBanner/utils/landingScreenBannerMap.tsx

@@ -4,6 +4,8 @@ import { GlobalState } from "../../../store/reducers/types";
 import { ItwDiscoveryBanner } from "../../itwallet/common/components/discoveryBanner/ItwDiscoveryBanner";
 import { isItwDiscoveryBannerRenderableSelector } from "../../itwallet/common/store/selectors";
 import { hasUserAcknowledgedSettingsBannerSelector } from "../../profileSettings/store/selectors";
+import { PushNotificationsBanner } from "../../pushNotifications/components/PushNotificationsBanner";
+import { isPushNotificationsBannerRenderableSelector } from "../../pushNotifications/store/selectors";
 
 type ComponentWithCloseHandler = (
   closeHandler: () => void
@@ -20,11 +22,18 @@ export type LandingScreenBannerId =
   keyof typeof LANDING_SCREEN_BANNERS_ENABLED_MAP;
 
 export const LANDING_SCREEN_BANNERS_ENABLED_MAP = {
+  PUSH_NOTIFICATIONS_REMINDER: false,
   ITW_DISCOVERY: true,
   SETTINGS_DISCOVERY: true
 } as const;
 
 export const landingScreenBannerMap: BannerMapById = {
+  PUSH_NOTIFICATIONS_REMINDER: {
+    component: closeHandler => (
+      <PushNotificationsBanner closeHandler={closeHandler} />
+    ),
+    isRenderableSelector: isPushNotificationsBannerRenderableSelector
+  },
   ITW_DISCOVERY: {
     component: closeHandler => (
       <ItwDiscoveryBanner closable handleOnClose={closeHandler} />

ts/features/pushNotifications/components/PushNotificationsBanner.tsx

@@ -0,0 +1,31 @@
+import { Banner, IOVisualCostants } from "@pagopa/io-app-design-system";
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+import I18n from "../../../i18n";
+import { openSystemNotificationSettingsScreen } from "../utils";
+type Props = {
+  closeHandler: () => void;
+};
+
+export const PushNotificationsBanner = ({ closeHandler }: Props) => (
+  <View style={styles.margins} testID="pushnotif-bannerContainer">
+    <Banner
+      testID="pushNotificationsBanner"
+      title={I18n.t("features.messages.pushNotifications.banner.title")}
+      content={I18n.t("features.messages.pushNotifications.banner.body")}
+      action={I18n.t("features.messages.pushNotifications.banner.CTA")}
+      pictogramName="notification"
+      color="turquoise"
+      size="big"
+      onClose={closeHandler}
+      labelClose={I18n.t("global.buttons.close")}
+      onPress={openSystemNotificationSettingsScreen}
+    />
+  </View>
+);
+const styles = StyleSheet.create({
+  margins: {
+    marginHorizontal: IOVisualCostants.appMarginDefault,
+    marginVertical: 16
+  }
+});

ts/features/pushNotifications/components/__tests__/PushNotificationsBanner.test.tsx

@@ -0,0 +1,41 @@
+import { fireEvent } from "@testing-library/react-native";
+import * as React from "react";
+import { renderComponent } from "../../../../components/__tests__/ForceScrollDownView.test";
+import * as UTILS from "../../utils";
+import { PushNotificationsBanner } from "../PushNotificationsBanner";
+import I18n from "../../../../i18n";
+
+const testPressHandler = jest.fn();
+jest
+  .spyOn(UTILS, "openSystemNotificationSettingsScreen")
+  .mockImplementation(testPressHandler);
+describe("PushNotificationsBanner", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should render correctly", () => {
+    const component = renderComponent(
+      <PushNotificationsBanner closeHandler={() => null} />
+    );
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it("should call openSystemNotificationSettingsScreen on press", () => {
+    const component = renderComponent(
+      <PushNotificationsBanner closeHandler={jest.fn()} />
+    );
+    fireEvent(component.getByTestId("pushNotificationsBanner"), "press");
+    expect(testPressHandler).toHaveBeenCalledTimes(1);
+  });
+  it("should correctly dispatch the closeHandler", () => {
+    const testClose = jest.fn();
+    const component = renderComponent(
+      <PushNotificationsBanner closeHandler={testClose} />
+    );
+    fireEvent(
+      component.getByA11yLabel(I18n.t("global.buttons.close")),
+      "press"
+    );
+    expect(testClose).toHaveBeenCalledTimes(1);
+  });
+});