Merge branch 'master' into IOCOM-555

package.json

@@ -112,7 +112,7 @@
   "dependencies": {
     "@babel/plugin-transform-regenerator": "^7.18.6",
     "@gorhom/bottom-sheet": "^4.1.5",
-    "@pagopa/io-app-design-system": "^1.9.3",
+    "@pagopa/io-app-design-system": "1.10.0",
     "@pagopa/io-pagopa-commons": "^3.1.0",
     "@pagopa/io-react-native-crypto": "^0.2.1",
     "@pagopa/io-react-native-login-utils": "^0.2.0",

ts/components/messages/__tests__/__snapshots__/EmptyListComponent.test.tsx.snap

@@ -24,6 +24,13 @@ exports[`EmptyListComponent matches the snapshot 1`] = `
     align="xMidYMid"
     bbHeight={120}
     bbWidth={120}
+    colorValues={
+      Object {
+        "hands": "#0B3EE3",
+        "main": "#AAEEEF",
+        "secondary": "#00C5CA",
+      }
+    }
     fill="none"
     focusable={false}
     height={120}

ts/features/bonus/cgn/components/detail/eyca/EycaStatusDetailsComponent.tsx

@@ -30,17 +30,18 @@ type Props = {
   openBottomSheet: () => void;
 };
 
+const CARD_PADDING_END: IOSpacingScale = 6;
+const ICON_SIZE = 24;
+
 const styles = StyleSheet.create({
   spaced: {
     justifyContent: "space-between"
   },
   cardNumber: {
-    paddingEnd: IOSpacingScale[1]
+    paddingEnd: CARD_PADDING_END
   }
 });
 
-const ICON_SIZE = 24;
-
 // this component shows EYCA card details related to user's CGN
 const EycaStatusDetailsComponent = (props: Props) => {
   const badgeByStatus = (): React.ReactNode => {

ts/features/design-system/core/DSPictograms.tsx

@@ -8,7 +8,11 @@ import {
   IOThemeContext,
   Pictogram,
   PictogramBleed,
-  SVGPictogramProps
+  SVGPictogramProps,
+  IOColors,
+  HSpacer,
+  hexToRgba,
+  VSpacer
 } from "@pagopa/io-app-design-system";
 import { useContext } from "react";
 import {
@@ -17,6 +21,7 @@ import {
 } from "../components/DSAssetViewerBox";
 import { H2 } from "../../../components/core/typography/H2";
 import { DesignSystemScreen } from "../components/DesignSystemScreen";
+import { DSComponentViewerBox } from "../components/DSComponentViewerBox";
 
 const styles = StyleSheet.create({
   itemsWrapper: {
@@ -26,6 +31,21 @@ const styles = StyleSheet.create({
     marginLeft: (assetItemGutter / 2) * -1,
     marginRight: (assetItemGutter / 2) * -1,
     marginBottom: 24
+  },
+  agnosticPictogramWrapper: {
+    borderRadius: 8,
+    padding: 16,
+    alignContent: "center",
+    justifyContent: "center",
+    flexDirection: "row"
+  },
+  agnosticPictogramWrapperBlue: {
+    backgroundColor: IOColors["blueIO-500"]
+  },
+  agnosticPictogramWrapperWhite: {
+    backgroundColor: IOColors.white,
+    borderColor: hexToRgba(IOColors.black, 0.1),
+    borderWidth: 1
   }
 });
 
@@ -130,6 +150,43 @@ export const DSPictograms = () => {
         ))}
       </View>
 
+      <H2
+        color={theme["textHeading-default"]}
+        weight={"SemiBold"}
+        style={{
+          marginBottom: 16
+        }}
+      >
+        Color mode agnostic
+      </H2>
+      <DSComponentViewerBox name={`pictogramStyle = "light-content"`}>
+        <View
+          style={[
+            styles.agnosticPictogramWrapper,
+            styles.agnosticPictogramWrapperBlue
+          ]}
+        >
+          <Pictogram name="feature" pictogramStyle="light-content" />
+          <HSpacer size={24} />
+          <Pictogram name="umbrellaNew" pictogramStyle="light-content" />
+        </View>
+      </DSComponentViewerBox>
+
+      <DSComponentViewerBox name={`pictogramStyle = "dark-content"`}>
+        <View
+          style={[
+            styles.agnosticPictogramWrapper,
+            styles.agnosticPictogramWrapperWhite
+          ]}
+        >
+          <Pictogram name="feedback" pictogramStyle="dark-content" />
+          <HSpacer size={24} />
+          <Pictogram name="charity" pictogramStyle="dark-content" />
+        </View>
+      </DSComponentViewerBox>
+
+      <VSpacer size={40} />
+
       <H2
         color={theme["textHeading-default"]}
         weight={"SemiBold"}

ts/features/idpay/configuration/screens/IbanConfigurationLandingScreen.tsx

@@ -75,7 +75,7 @@ const IbanConfigurationLanding = () => {
           IOStyles.horizontalContentPadding
         ]}
       >
-        <Pictogram name="ibanCard" size={240} />
+        <Pictogram name="ibanCard" size={180} />
         <VSpacer size={32} />
         <View style={[IOStyles.horizontalContentPadding, styles.textContainer]}>
           <H3>{I18n.t("idpay.configuration.iban.landing.header")}</H3>

ts/features/idpay/wallet/components/IDPayInitiativesListComponents.tsx

@@ -20,10 +20,12 @@ import {
 import { idPayInitiativeFromInstrumentPotSelector } from "../store/reducers";
 import { NewH6 } from "../../../../components/core/typography/NewH6";
 
+const itemContainerVerticalSpacing: IOSpacingScale = 16;
+
 const styles = StyleSheet.create({
   listItemContainer: {
     ...IOStyles.row,
-    paddingVertical: IOSpacingScale[4]
+    paddingVertical: itemContainerVerticalSpacing
   },
   leftContent: {
     ...IOStyles.flex,

ts/features/messages/analytics/index.ts

@@ -1,12 +1,33 @@
 import * as t from "io-ts";
+import * as O from "fp-ts/lib/Option";
 import * as S from "fp-ts/lib/string";
+import { pipe } from "fp-ts/lib/function";
 import { NonEmptyString } from "@pagopa/ts-commons/lib/strings";
 import { ServiceId } from "../../../../definitions/backend/ServiceId";
 import { MessageCategory } from "../../../../definitions/backend/MessageCategory";
 import { mixpanelTrack } from "../../../mixpanel";
 import { readablePrivacyReport } from "../../../utils/reporters";
 import { UIMessageId } from "../../../store/reducers/entities/messages/types";
-import { buildEventProperties } from "../../../utils/analytics";
+import { booleanToYesNo, buildEventProperties } from "../../../utils/analytics";
+
+export function trackOpenMessage(
+  organizationName: string,
+  serviceName: string,
+  containsPayment: boolean | undefined
+) {
+  void mixpanelTrack(
+    "OPEN_MESSAGE",
+    buildEventProperties("UX", "screen_view", {
+      organization_name: organizationName,
+      service_name: serviceName,
+      contains_payment: pipe(
+        containsPayment,
+        O.fromNullable,
+        O.fold(() => "unknown" as const, booleanToYesNo)
+      )
+    })
+  );
+}
 
 export function trackMessageCTAFrontMatterDecodingError(serviceId?: ServiceId) {
   void mixpanelTrack("CTA_FRONT_MATTER_DECODING_ERROR", {

ts/features/wallet/common/BasePaymentMethodScreen.tsx

@@ -150,9 +150,11 @@ const DeleteButton = ({
 
 // ----------------------------- styles -----------------------------------
 
+const cardContainerHorizontalSpacing: IOSpacingScale = 16;
+
 const styles = StyleSheet.create({
   cardContainer: {
-    paddingHorizontal: IOSpacingScale[4],
+    paddingHorizontal: cardContainerHorizontalSpacing,
     alignItems: "center",
     marginBottom: "-15%",
     aspectRatio: 1.7,

ts/features/wallet/component/features/PaymentMethodSettings.tsx

@@ -10,6 +10,8 @@ import PagoPaPaymentCapability from "./PagoPaPaymentCapability";
 
 type Props = { paymentMethod: PaymentMethod };
 
+const componentVerticalSpacing: IOSpacingScale = 12;
+
 /**
  * This component allows the user to choose and change the common settings for a payment methods
  * The {@link FavoritePaymentMethodSwitch} should be rendered only if the payment method has the capability pagoPA and
@@ -21,7 +23,7 @@ const PaymentMethodSettings = (props: Props): React.ReactElement => (
   <>
     <NewH6
       color={"grey-700"}
-      style={{ paddingVertical: IOSpacingScale[3] /* 12 */ }}
+      style={{ paddingVertical: componentVerticalSpacing }}
     >
       {I18n.t("global.buttons.settings")}
     </NewH6>

ts/screens/messages/MessageRouterScreen.tsx

@@ -1,5 +1,6 @@
 import * as pot from "@pagopa/ts-commons/lib/pot";
 import { useNavigation } from "@react-navigation/native";
+import * as B from "fp-ts/lib/boolean";
 import * as O from "fp-ts/lib/Option";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
@@ -44,6 +45,7 @@ import { emptyContextualHelp } from "../../utils/emptyContextualHelp";
 import { isStrictSome } from "../../utils/pot";
 import { isLoadingOrUpdatingInbox } from "../../store/reducers/entities/messages/allPaginated";
 import { trackPNPushOpened } from "../../features/pn/analytics";
+import { trackOpenMessage } from "../../features/messages/analytics";
 
 export type MessageRouterScreenNavigationParams = {
   messageId: UIMessageId;
@@ -73,6 +75,20 @@ const navigateToScreenHandler =
     firstTimeOpening: boolean
   ) =>
   (dispatch: Props["navigation"]["dispatch"]) => {
+    const containsPayment = pipe(
+      message.category.tag !== TagEnumPN.PN,
+      B.fold(
+        () => undefined,
+        () => pipe(messageDetails.paymentData, O.fromNullable, O.isSome)
+      )
+    );
+
+    trackOpenMessage(
+      message.serviceName,
+      message.organizationName,
+      containsPayment
+    );
+
     if (euCovidCertificateEnabled && messageDetails.euCovidCertificate) {
       navigateBack();
       navigateToEuCovidCertificateDetailScreen({

ts/screens/onboarding/components/NotificationPreviewSample.tsx

@@ -16,6 +16,10 @@ import {
   IOVisualCostants
 } from "../../../components/core/variables/IOStyles";
 
+const notificationMarginVertical: IOSpacingScale = 4;
+const notificationPaddingVertical: IOSpacingScale = 8;
+const notificationPaddingHorizontal: IOSpacingScale = 16;
+
 const styles = StyleSheet.create({
   notification: {
     flexDirection: "row",
@@ -25,10 +29,10 @@ const styles = StyleSheet.create({
     borderColor: IOColors.bluegreyLight,
     borderRadius: customVariables.borderRadiusBase,
     minHeight: 72,
-    marginVertical: IOSpacingScale[0],
+    marginVertical: notificationMarginVertical,
     marginHorizontal: IOVisualCostants.appMarginDefault,
-    paddingVertical: IOSpacingScale[2],
-    paddingHorizontal: IOSpacingScale[4]
+    paddingVertical: notificationPaddingVertical,
+    paddingHorizontal: notificationPaddingHorizontal
   }
 });
 

ts/utils/analytics.ts

@@ -24,12 +24,12 @@ export const noAnalyticsRoutes = new Set<string>(
   )
 );
 
-export const booleanToYesNo = (value: boolean): "yes" | "no" =>
+export const booleanToYesNo = (value: boolean) =>
   pipe(
     value,
     B.fold(
-      () => "no",
-      () => "yes"
+      () => "no" as const,
+      () => "yes" as const
     )
   );
 

yarn.lock

@@ -3122,10 +3122,10 @@
   dependencies:
     "@types/node" ">= 8"
 
-"@pagopa/io-app-design-system@^1.9.3":
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.9.3.tgz#94023bda09c3b82df46df431fe9f85e92a66479c"
-  integrity sha512-+lBLi/br951Zh5SS3fe6iDOnh75n4l+bPu5ZK7H00c/Mh3KImBqCoXRT48R3om8QHkFAHFz4uj47ifi/VfVbGw==
+"@pagopa/io-app-design-system@1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@pagopa/io-app-design-system/-/io-app-design-system-1.10.0.tgz#d6db15464e990cbd38a909ce241c7eaa5daa917b"
+  integrity sha512-zRYT7Y+IWeQ6yv/wDbY1ilYaLVKKVJuaWp6nZ+6P2muUg4emTRnw26V1N5Im3vdmIOi1/TaWeR2aFyZKj9RD+g==
   dependencies:
     "@expo/vector-icons" "^13.0.0"
     "@pagopa/ts-commons" "^12.0.0"