feat(Bonus Pagamenti Digitali): [#175741693] Remove timestamp from transactions when it's equal to 00:00

locales/en/index.yml

@@ -97,11 +97,13 @@ global:
     shortFormat: "%d/%m/%Y"
     fullFormatShortMonthLiteral: "%d %b %Y"
     fullFormatShortMonthLiteralWithTime: "%d %b %Y, %H:%M"
+    fullFormatShortMonthLiteralWithoutTime: "%d %b %Y"
     fullFormatFullMonthLiteral: "%d %B %Y"
     fullMonthLiteral: "%B"
     fullMonthLiteralWithYear: "%B %Y"
     numericMonthYear: "%m/%Y"
     dayMonthWithTime: "%d %b, %H:%M"
+    dayMonthWithoutTime: "%d %b"
     dayFullMonth: "%d %B"
     monthYear: "MMMM YYYY"
     dayAndMonth: "dddd D MMMM"
@@ -728,6 +730,7 @@ payment:
       enteCreditore: Payee institution
       causaleVersamento: Payment description
       dateAndTime: Date and time
+      onlyDate: Date
       paymentAmount: Payment amount
       transactionCosts: Transaction costs
       transactionCode: Transaction identification code

locales/it/index.yml

@@ -97,10 +97,12 @@ global:
     shortFormat: "%d/%m/%Y"
     fullFormatShortMonthLiteral: "%d %b %Y"
     fullFormatShortMonthLiteralWithTime: "%d %b %Y, %H:%M"
+    fullFormatShortMonthLiteralWithoutTime: "%d %b %Y"
     fullFormatFullMonthLiteral: "%d %B %Y"
     fullMonthLiteral: "%B"
     fullMonthLiteralWithYear: "%B %Y"
     dayMonthWithTime: "%d %b, %H:%M"
+    dayMonthWithoutTime: "%d %b"
     dayFullMonth: "%d %B"
     numericMonthYear: "%m/%Y"
     monthYear: "MMMM YYYY"
@@ -748,6 +750,7 @@ payment:
       enteCreditore: Ente creditore
       causaleVersamento: Causale
       dateAndTime: Data e ora
+      onlyDate: Data
       paymentAmount: Importo pagamento
       transactionCosts: Costi di transazione
       transactionCode: Codice identificativo della transazione

ts/features/bonus/bpd/components/transactionItem/BpdTransactionItem.tsx

@@ -24,7 +24,13 @@ type Props = {
  * TODO: move the get subtitle in the combiner and remove this component?
  * @param transaction
  */
-const getSubtitle = (transaction: BpdTransaction) =>
+export const getSubtitle = (transaction: BpdTransaction) =>
+  (transaction.trxDate.getHours() === 0 && transaction.trxDate.getMinutes() === 0) ? 
+    `${localeDateFormat(
+    transaction.trxDate,
+    I18n.t("global.dateFormats.dayMonthWithoutTime")
+  )} · € ${formatNumberAmount(transaction.amount)} `
+  :
   `${localeDateFormat(
     transaction.trxDate,
     I18n.t("global.dateFormats.dayMonthWithTime")

ts/features/bonus/bpd/components/transactionItem/__test__/BdpTransactionItem.test.tsx

@@ -0,0 +1,56 @@
+// import * as React from "react";
+// import { render } from '@testing-library/react-native';
+import { getSubtitle } from "../BpdTransactionItem";
+import { EnhancedBpdTransaction } from "../../../components/transactionItem/BpdTransactionItem";
+import { HPan } from "../../../store/actions/paymentMethods";
+import { AwardPeriodId } from "../../../store/actions/periods";
+
+describe("Test how the transaction subtitle changes with different timestamps", () => {
+  it("Subtitle shouldn't contain hours and minutes, when the transaction has a timestamp 00:00", () => {
+
+    // TODO: test  input data should be moved in a separate file
+    const myTransaction: EnhancedBpdTransaction = {
+      hashPan: '0d4194712c5d820fcbbb2e7ba199e15f73cfd43f8fe49f0aa62e7901253506df' as HPan,
+      idTrxAcquirer: '10126487773E',
+      idTrxIssuer: 'R64692',
+      amount: 87.79,
+      awardPeriodId: 2 as AwardPeriodId,
+      image: 29,
+      maxCashbackForTransactionAmount: 15,
+      title: "xxxxxxx",
+      trxDate: new Date('2100-12-17T00:00'),
+      keyId: "xxxxxxxxx",
+      cashback: 8.779,
+      circuitType: 'Mastercard'
+    };
+
+    expect(getSubtitle(myTransaction)).toMatch("17 Dec · € 87.79 ");
+
+
+  });
+
+  it("Subtitle should contain hours and minutes when the transaction has a timestamp 00:00", () => {
+
+    // TODO: test  input data should be moved in a separate file
+    const myTransaction: EnhancedBpdTransaction = {
+      hashPan: '0d4194712c5d820fcbbb2e7ba199e15f73cfd43f8fe49f0aa62e7901253506df' as HPan,
+      idTrxAcquirer: '10126487773E',
+      idTrxIssuer: 'R64692',
+      amount: 100000.79,
+      awardPeriodId: 2 as AwardPeriodId,
+      image: 29,
+      maxCashbackForTransactionAmount: 15,
+      title: "xxxxxxx",
+      trxDate: new Date('2100-12-19T12:39'),
+      keyId: "xxxxxxxxx",
+      cashback: 8.779,
+      circuitType: 'Mastercard'
+    };
+
+    expect(getSubtitle(myTransaction)).toMatch("19 Dec, 12:39 · € 100,000.79 ");
+
+
+  });
+
+
+});

ts/features/bonus/bpd/screens/details/transaction/detail/BpdTransactionDetailComponent.tsx

@@ -60,11 +60,18 @@ const CancelBadge = () => (
 const Table = (props: Props) => (
   <View>
     <View style={styles.rowId}>
-      <H5 weight={"Regular"} color={"bluegrey"}>
-        {I18n.t("payment.details.info.dateAndTime")}
+      <H5 weight={"Regular"} color={"bluegrey"} testID="dateLabel">
+        {(props.transaction.trxDate.getHours() === 0 && props.transaction.trxDate.getMinutes() === 0) ?
+          I18n.t("payment.details.info.onlyDate") : 
+          I18n.t("payment.details.info.dateAndTime")}
       </H5>
-      <H4 weight={"SemiBold"} color={"bluegreyDark"}>
-        {localeDateFormat(
+      <H4 weight={"SemiBold"} color={"bluegreyDark"} testID="dateValue">
+        { (props.transaction.trxDate.getHours() === 0 && props.transaction.trxDate.getMinutes() === 0) ?
+          localeDateFormat(
+            props.transaction.trxDate,
+            I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithoutTime"))
+            :
+          localeDateFormat(
           props.transaction.trxDate,
           I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithTime")
         )}

ts/features/bonus/bpd/screens/details/transaction/detail/__test__/BdpTransactionDetailComponent.test.tsx

@@ -0,0 +1,68 @@
+// import { debug } from "console";
+import * as React from "react";
+import { render } from '@testing-library/react-native';
+import { BpdTransactionDetailComponent } from "../BpdTransactionDetailComponent";
+import { EnhancedBpdTransaction } from "../../../../../components/transactionItem/BpdTransactionItem";
+import { HPan } from "../../../../../store/actions/paymentMethods";
+import { AwardPeriodId } from "../../../../../store/actions/periods";
+
+describe("Test Transaction Timestamp", () => {
+  it("It should render label 'Date' and a value without hours and minutes when the transaction has a timestamp 00:00", () => {
+
+    // TODO: test  input data should be moved in a separate file
+    const myTransaction: EnhancedBpdTransaction = {
+      hashPan: '0d4194712c5d820fcbbb2e7ba199e15f73cfd43f8fe49f0aa62e7901253506df' as HPan,
+      idTrxAcquirer: '10126487773E',
+      idTrxIssuer: 'R64692',
+      amount: 87.79,
+      awardPeriodId: 2 as AwardPeriodId,
+      image: 29,
+      maxCashbackForTransactionAmount: 15,
+      title: "xxxxxxx",
+      trxDate: new Date('2100-12-17T00:00'),
+      keyId: "xxxxxxxxx",
+      cashback: 8.779,
+      circuitType: 'Mastercard'
+    };
+
+    // cut : Component Under Test
+    const cut = render(<BpdTransactionDetailComponent transaction={myTransaction} />);
+
+    const dateLabel = cut.getByTestId("dateLabel");
+    const dateValue = cut.getByTestId("dateValue");
+
+    expect(dateLabel.children[0]).toMatch(/Date/);
+    expect(dateValue.children[0]).toMatch(/17 Dec 2100/);
+
+  });
+
+  it("It should render label 'Date and time' and a vale woth hours and minutes when the transaction has a timestamp different from 00:00 ", () => {
+
+    // TODO: test  input data should be moved in a separate file
+
+    const myTransaction: EnhancedBpdTransaction = {
+      hashPan: '0d4194712c5d820fcbbb2e7ba199e15f73cfd43f8fe49f0aa62e7901253506df' as HPan,
+      idTrxAcquirer: '10126487773E',
+      idTrxIssuer: 'R64692',
+      amount: 87.79,
+      awardPeriodId: 2 as AwardPeriodId,
+      image: 29,
+      maxCashbackForTransactionAmount: 0,
+      title: "xxxxxxx",
+      trxDate: new Date('2100-12-17T01:00'),
+      keyId: "xxxxxxxxx",
+      cashback: 8.779,
+      circuitType: 'Mastercard'
+    };
+
+    // cut : Component Under Test
+    const cut = render(<BpdTransactionDetailComponent transaction={myTransaction} />);
+    const dateLabel = cut.getByTestId("dateLabel");
+    const dateValue = cut.getByTestId("dateValue");
+
+    expect(dateLabel.children[0]).toMatch(/Date and time/);
+    expect(dateValue.children[0]).toMatch(/17 Dec 2100, 01:00/);
+
+  });
+
+});