Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 8 commits into from
Jan 25, 2021
3 changes: 3 additions & 0 deletions locales/en/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down
3 changes: 3 additions & 0 deletions locales/it/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,19 @@ type Props = {
* TODO: move the get subtitle in the combiner and remove this component?
* @param transaction
*/
const getSubtitle = (transaction: BpdTransaction) =>
`${localeDateFormat(
transaction.trxDate,
I18n.t("global.dateFormats.dayMonthWithTime")
)} · € ${formatNumberAmount(transaction.amount)} `;
export const getSubtitle = (transaction: BpdTransaction) => {
const isMidNight =
transaction.trxDate.getHours() + transaction.trxDate.getMinutes() === 0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What you think about adding also the seconds to the calculation?

Suggested change
transaction.trxDate.getHours() + transaction.trxDate.getMinutes() === 0;
transaction.trxDate.getHours() + transaction.trxDate.getMinutes() + transaction.trxDate.getSeconds() === 0;

In this way we can render the time for a transaction with timestamp 2020-12-13T00:00:31+01:00 that is a valid transaction.

return isMidNight
? `€ ${formatNumberAmount(transaction.amount)} · ${localeDateFormat(
transaction.trxDate,
I18n.t("global.dateFormats.dayMonthWithoutTime")
)} `
: `€ ${formatNumberAmount(transaction.amount)} · ${localeDateFormat(
transaction.trxDate,
I18n.t("global.dateFormats.dayMonthWithTime")
)} `;
};

export const BpdTransactionItem: React.FunctionComponent<Props> = props => {
const { present: openBottomSheet } = useIOBottomSheet(
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
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", () => {
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("€ 87.79 · 17 Dec ");
});

it("Subtitle should contain hours and minutes when the transaction has a timestamp 00:00", () => {
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("€ 100,000.79 · 19 Dec, 12:39 ");
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -57,58 +57,73 @@ const CancelBadge = () => (
</Badge>
);

const Table = (props: Props) => (
<View>
<View style={styles.rowId}>
<H5 weight={"Regular"} color={"bluegrey"}>
{I18n.t("payment.details.info.dateAndTime")}
</H5>
<H4 weight={"SemiBold"} color={"bluegreyDark"}>
{localeDateFormat(
props.transaction.trxDate,
I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithTime")
)}
</H4>
</View>
<View spacer={true} small={true} />
<View style={styles.rowId}>
<H5 weight={"Regular"} color={"bluegrey"}>
{I18n.t("bonus.bpd.details.transaction.detail.paymentCircuit")}
</H5>
<H4 weight={"SemiBold"} color={"bluegreyDark"}>
{props.transaction.circuitType === "Unknown"
? I18n.t("global.unknown")
: props.transaction.circuitType}
</H4>
</View>
<View spacer={true} small={true} />
<View style={styles.rowId}>
<H5 weight={"Regular"} color={"bluegrey"}>
{I18n.t("bonus.bpd.details.transaction.detail.transactionAmount")}
</H5>
const Table = (props: Props) => {
const isMidNight =
props.transaction.trxDate.getHours() +
props.transaction.trxDate.getMinutes() ===
0;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The same consideration about considering the seconds of the previous comment.

return (
<View>
<View style={styles.rowId}>
<H5 weight={"Regular"} color={"bluegrey"} testID="dateLabel">
{isMidNight
? I18n.t("payment.details.info.onlyDate")
: I18n.t("payment.details.info.dateAndTime")}
</H5>
<H4 weight={"SemiBold"} color={"bluegreyDark"} testID="dateValue">
{isMidNight
? localeDateFormat(
props.transaction.trxDate,
I18n.t(
"global.dateFormats.fullFormatShortMonthLiteralWithoutTime"
)
)
: localeDateFormat(
props.transaction.trxDate,
I18n.t("global.dateFormats.fullFormatShortMonthLiteralWithTime")
)}
</H4>
</View>
<View spacer={true} small={true} />
<View style={styles.rowId}>
{props.transaction.amount < 0 && (
<>
<CancelBadge />
<View hspacer={true} />
</>
)}
<H5 weight={"Regular"} color={"bluegrey"}>
{I18n.t("bonus.bpd.details.transaction.detail.paymentCircuit")}
</H5>
<H4 weight={"SemiBold"} color={"bluegreyDark"}>
{formatNumberAmount(props.transaction.amount, true)}
{props.transaction.circuitType === "Unknown"
? I18n.t("global.unknown")
: props.transaction.circuitType}
</H4>
</View>
<View spacer={true} small={true} />
<View style={styles.rowId}>
<H5 weight={"Regular"} color={"bluegrey"}>
{I18n.t("bonus.bpd.details.transaction.detail.transactionAmount")}
</H5>
<View style={styles.rowId}>
{props.transaction.amount < 0 && (
<>
<CancelBadge />
<View hspacer={true} />
</>
)}
<H4 weight={"SemiBold"} color={"bluegreyDark"}>
{formatNumberAmount(props.transaction.amount, true)}
</H4>
</View>
</View>
<View spacer={true} small={true} />
<View style={styles.rowId}>
<H5 weight={"Regular"} color={"bluegrey"}>
{I18n.t("bonus.bpd.details.transaction.detail.cashbackAmount")}
</H5>
<H4 weight={"SemiBold"} color={"bluegreyDark"}>
{formatNumberAmount(props.transaction.cashback, true)}
</H4>
</View>
</View>
<View spacer={true} small={true} />
<View style={styles.rowId}>
<H5 weight={"Regular"} color={"bluegrey"}>
{I18n.t("bonus.bpd.details.transaction.detail.cashbackAmount")}
</H5>
<H4 weight={"SemiBold"} color={"bluegreyDark"}>
{formatNumberAmount(props.transaction.cashback, true)}
</H4>
</View>
</View>
);
);
};

const IdBlock = (props: IdBlockProps) => (
<View>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
// 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", () => {
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 ", () => {
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/);
});
});