[#164896228] Message list rows predictable and fixed height

locales/en/index.yml

@@ -498,6 +498,10 @@ messages:
   refresh: Pull down to refresh
   loading: Loading Messages...
   yesterday: yesterday
+  errorLoading:
+    details: Error loading message details
+    senderService:  Sender service unknown
+    senderInfo: Service info unknown
   cta:
     archive: Archive
     unarchive: Unarchive
@@ -622,3 +626,9 @@ identification:
       title: Identification required
       sensorDescription: Touch sensor
       fallbackLabel: Use the PIN
+calendarEvents:
+  calendarSelect: In which calendar you want to add the event?
+  removeRequest: 
+    title: Are you sure you want to remove this event?
+    ok: Remove event
+    cancel: Cancel the operation

locales/it/index.yml

@@ -508,6 +508,10 @@ messages:
   refresh: Trascina in basso per aggiornare
   loading: Caricamento dei messaggi...
   yesterday: ieri
+  errorLoading:
+    details: Impossibile caricare i dettagli del messaggio
+    senderService:  Mittente sconosciuto
+    senderInfo: Info sul servizio mancanti
   cta:
     archive: Archivia
     unarchive: Ripristina
@@ -634,3 +638,9 @@ identification:
       title: Identificazione richiesta
       sensorDescription: Tocca il sensore
       fallbackLabel: Usa il PIN
+calendarEvents:
+  calendarSelect: In quale calendario vuoi aggiungere l'evento?
+  removeRequest: 
+    title: Sei sicuro di voler rimuovere l'evento?
+    ok: Rimuovi evento
+    cancel: Annulla l'operazione

ts/components/messages/MessageCTABar.tsx

@@ -1,6 +1,4 @@
-import { isSome, none } from "fp-ts/lib/Option";
-import { RptIdFromString } from "italia-pagopa-commons/lib/pagopa";
-import * as pot from "italia-ts-commons/lib/pot";
+import { fromNullable, isSome } from "fp-ts/lib/Option";
 import { capitalize } from "lodash";
 import { Button, H1, Icon, Text, View } from "native-base";
 import * as React from "react";
@@ -10,20 +8,22 @@ import { connect } from "react-redux";
 
 import { ServicePublic } from "../../../definitions/backend/ServicePublic";
 import I18n from "../../i18n";
+import { NavigationParams } from "../../screens/wallet/payment/TransactionSummaryScreen";
 import {
   addCalendarEvent,
   AddCalendarEventPayload,
   removeCalendarEvent,
   RemoveCalendarEventPayload
 } from "../../store/actions/calendarEvents";
 import { navigateToPaymentTransactionSummaryScreen } from "../../store/actions/navigation";
+import { preferredCalendarSaveSuccess } from "../../store/actions/persistedPreferences";
 import { Dispatch } from "../../store/actions/types";
 import { paymentInitializeState } from "../../store/actions/wallet/payment";
 import {
   CalendarEvent,
   calendarEventByMessageIdSelector
 } from "../../store/reducers/entities/calendarEvents/calendarEventsByMessageId";
-import { PaymentByRptIdState } from "../../store/reducers/entities/payments";
+import { PaidReason } from "../../store/reducers/entities/payments";
 import { GlobalState } from "../../store/reducers/types";
 import variables from "../../theme/variables";
 import { MessageWithContentPO } from "../../types/MessageWithContentPO";
@@ -45,14 +45,11 @@ import SelectCalendarModal from "../SelectCalendarModal";
 import IconFont from "../ui/IconFont";
 import { LightModalContextInterface } from "../ui/LightModal";
 
-import { NavigationParams } from "../../screens/wallet/payment/TransactionSummaryScreen";
-import { preferredCalendarSaveSuccess } from "../../store/actions/persistedPreferences";
-
 type OwnProps = {
   message: MessageWithContentPO;
-  service: pot.Pot<ServicePublic, Error>;
+  service?: ServicePublic;
+  payment?: PaidReason;
   containerStyle?: ViewStyle;
-  paymentByRptId: PaymentByRptIdState;
   disabled?: boolean;
   small?: boolean;
 };
@@ -269,29 +266,23 @@ class MessageCTABar extends React.PureComponent<Props, State> {
 
   private renderPaymentCTA(
     paymentData: NonNullable<MessageWithContentPO["content"]["payment_data"]>,
-    potService: pot.Pot<ServicePublic, Error>,
-    paymentByRptId: PaymentByRptIdState
+    service?: ServicePublic,
+    payment?: PaidReason
   ) {
     const { disabled } = this.props;
     const amount = getAmountFromPaymentAmount(paymentData.amount);
 
-    const rptId = pot.getOrElse(
-      pot.map(potService, service =>
-        getRptIdFromNoticeNumber(
-          service.organization_fiscal_code,
-          paymentData.notice_number
-        )
-      ),
-      none
+    const rptId = fromNullable(service).chain(_ =>
+      getRptIdFromNoticeNumber(
+        _.organization_fiscal_code,
+        paymentData.notice_number
+      )
     );
 
-    const isPaid = rptId
-      .map(RptIdFromString.encode)
-      .map(_ => paymentByRptId[_] !== undefined)
-      .getOrElse(false);
+    const isPaid = payment !== undefined;
 
     const onPaymentCTAPress =
-      !isPaid && isSome(amount) && isSome(rptId)
+      !isPaid && isSome(amount) && rptId.isSome()
         ? () => {
             this.props.paymentInitializeState();
             this.props.navigateToPaymentTransactionSummaryScreen({
@@ -333,7 +324,7 @@ class MessageCTABar extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    const { message, service, containerStyle, paymentByRptId } = this.props;
+    const { message, service, payment, containerStyle } = this.props;
 
     const { due_date, payment_data } = message.content;
 
@@ -349,7 +340,7 @@ class MessageCTABar extends React.PureComponent<Props, State> {
             )}
 
           {payment_data !== undefined &&
-            this.renderPaymentCTA(payment_data, service, paymentByRptId)}
+            this.renderPaymentCTA(payment_data, service, payment)}
         </View>
       );
     }

ts/components/messages/MessageDetailComponent.tsx

@@ -5,9 +5,11 @@ import { StyleSheet, TouchableOpacity } from "react-native";
 import { Col, Grid } from "react-native-easy-grid";
 
 import { ServicePublic } from "../../../definitions/backend/ServicePublic";
+import I18n from "../../i18n";
 import { PaymentByRptIdState } from "../../store/reducers/entities/payments";
 import variables from "../../theme/variables";
 import { MessageWithContentPO } from "../../types/MessageWithContentPO";
+import { messageNeedsCTABar } from "../../utils/messages";
 import { logosForService } from "../../utils/services";
 import H4 from "../ui/H4";
 import H6 from "../ui/H6";
@@ -18,8 +20,8 @@ import MessageMarkdown from "./MessageMarkdown";
 
 type OwnProps = {
   message: MessageWithContentPO;
-  paymentByRptId: PaymentByRptIdState;
-  service: pot.Pot<ServicePublic, Error>;
+  potService: pot.Pot<ServicePublic, Error>;
+  paymentsByRptId: PaymentByRptIdState;
   onServiceLinkPress?: () => void;
 };
 
@@ -68,24 +70,49 @@ const styles = StyleSheet.create({
  */
 export default class MessageDetailComponent extends React.PureComponent<Props> {
   public render() {
-    const { message, paymentByRptId, service, onServiceLinkPress } = this.props;
+    const {
+      message,
+      potService,
+      paymentsByRptId,
+      onServiceLinkPress
+    } = this.props;
+
+    const service =
+      potService !== undefined
+        ? pot.isNone(potService)
+          ? ({
+              organization_name: I18n.t("messages.errorLoading.senderService"),
+              department_name: I18n.t("messages.errorLoading.senderInfo")
+            } as ServicePublic)
+          : pot.toUndefined(potService)
+        : undefined;
+
+    const payment =
+      message.content.payment_data !== undefined && service !== undefined
+        ? paymentsByRptId[
+            `${service.organization_fiscal_code}${
+              message.content.payment_data.notice_number
+            }`
+          ]
+        : undefined;
+
     return (
       <View style={styles.mainWrapper}>
         <View style={styles.headerContainer}>
           {/* Service */}
-          {pot.isSome(service) && (
+          {service && (
             <Grid style={styles.serviceContainer}>
               <Col>
-                <H4>{service.value.organization_name}</H4>
+                <H4>{service.organization_name}</H4>
                 <H6 link={true} onPress={onServiceLinkPress}>
-                  {service.value.service_name}
+                  {service.service_name}
                 </H6>
               </Col>
               <Col style={styles.serviceCol}>
                 <TouchableOpacity onPress={onServiceLinkPress}>
                   <MultiImage
                     style={styles.serviceMultiImage}
-                    source={logosForService(service.value)}
+                    source={logosForService(service)}
                   />
                 </TouchableOpacity>
               </Col>
@@ -105,12 +132,14 @@ export default class MessageDetailComponent extends React.PureComponent<Props> {
           />
         </View>
 
-        <MessageCTABar
-          message={message}
-          paymentByRptId={paymentByRptId}
-          service={service}
-          containerStyle={styles.ctaBarContainer}
-        />
+        {messageNeedsCTABar(message) && (
+          <MessageCTABar
+            message={message}
+            service={service}
+            payment={payment}
+            containerStyle={styles.ctaBarContainer}
+          />
+        )}
 
         <MessageMarkdown webViewStyle={styles.webview}>
           {message.content.markdown}

ts/components/messages/MessageDetailRawInfoComponent.tsx

@@ -1,4 +1,3 @@
-import * as pot from "italia-ts-commons/lib/pot";
 import { Text, View } from "native-base";
 import * as React from "react";
 import {
@@ -16,7 +15,7 @@ import IconFont from "../ui/IconFont";
 
 type OwnProps = {
   message: MessageWithContentPO;
-  service: pot.Pot<ServicePublic, Error>;
+  service?: ServicePublic;
   onServiceLinkPress?: () => void;
 };
 
@@ -76,27 +75,27 @@ class MessageDetailRawInfoComponent extends React.PureComponent<Props, State> {
               </Text>
               {format(message.created_at, "dddd D MMMM YYYY")}
             </Text>
-            {pot.isSome(service) && (
+            {service && (
               <React.Fragment>
                 <Text>
                   <Text bold={true}>{`${I18n.t(
                     "messageDetails.rawInfoLabels.organizationName"
                   )}: `}</Text>
-                  {service.value.organization_name}
+                  {service.organization_name}
                 </Text>
 
                 <Text>
                   <Text bold={true}>{`${I18n.t(
                     "messageDetails.rawInfoLabels.departmentName"
                   )}: `}</Text>
-                  {service.value.department_name}
+                  {service.department_name}
                 </Text>
 
                 <Text link={true} onPress={onServiceLinkPress}>
                   <Text bold={true}>{`${I18n.t(
                     "messageDetails.rawInfoLabels.serviceName"
                   )}: `}</Text>
-                  {service.value.service_name}
+                  {service.service_name}
                 </Text>
 
                 <Text>