Skip to content

Commit

Permalink
Add cenceled transaction date (#516)
Browse files Browse the repository at this point in the history
  • Loading branch information
@zoontek
zoontek authored Jan 2, 2024
1 parent 10e4364 commit 1769d23
Show file tree
Hide file tree
Showing 11 changed files with 68 additions and 106 deletions.
159 changes: 55 additions & 104 deletions clients/banking/src/components/TransactionDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,69 +46,60 @@ const styles = StyleSheet.create({
},
});

const formatMaskedPan = (value: string) => value.replace(/X/g, "•").replace(/(.{4})(?!$)/g, "$1 ");
const truncateTransactionId = (id: string) => id.split("#", 2)[0];

const FormattedDateTime = ({ date, label }: { date: string; label: string }) => (
<LakeLabel
type="viewSmall"
label={label}
render={() => (
<Box direction="row" alignItems="center">
<Icon name="calendar-ltr-regular" size={16} />
<Space width={8} />

<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(date), "LLL")}
</LakeText>
</Box>
)}
/>
);

type Props = {
transaction: TransactionDetailsFragment;
large: boolean;
};

const truncateTransactionId = (id: string) => id.split("#", 2)[0];

const formatMaskedPan = (value: string) => value.replace(/X/g, "•").replace(/(.{4})(?!$)/g, "$1 ");

export const TransactionDetail = ({ transaction, large }: Props) => {
if (transaction == null) {
return <ErrorView />;
}

const bookingDateTime = match(transaction.statusInfo)
.with({ __typename: "BookedTransactionStatusInfo" }, ({ bookingDate }) => (
<LakeLabel
type="viewSmall"
label={t("transaction.bookingDateTime")}
render={() => (
<Box direction="row" alignItems="center">
<Icon name="calendar-ltr-regular" size={16} />
<Space width={8} />

<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(bookingDate), "LLL")}
</LakeText>
</Box>
)}
/>
<FormattedDateTime label={t("transaction.bookingDateTime")} date={bookingDate} />
))
.otherwise(() => null);

const executionDateTime = match(transaction.statusInfo)
.with({ __typename: "UpcomingTransactionStatusInfo" }, ({ executionDate }) => (
<LakeLabel
type="viewSmall"
label={t("transaction.executionDateTime")}
render={() => (
<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(executionDate), "LLL")}
</LakeText>
)}
/>
<FormattedDateTime label={t("transaction.executionDateTime")} date={executionDate} />
))
.otherwise(() => null);

const rejectedDate = match(transaction.statusInfo)
.with({ __typename: "RejectedTransactionStatusInfo" }, () => (
<LakeLabel
type="viewSmall"
label={t("transaction.rejectedDate")}
render={() => (
<Box direction="row" alignItems="center">
<Icon name="calendar-ltr-regular" size={16} />
<Space width={8} />
const canceledDateTime = match(transaction.statusInfo)
.with(
{ __typename: "CanceledTransactionStatusInfo", canceledDate: P.not(P.nullish) },
({ canceledDate }) => (
<FormattedDateTime label={t("transaction.canceledDate")} date={canceledDate} />
),
)
.otherwise(() => null);

<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(transaction.updatedAt), "LLL")}
</LakeText>
</Box>
)}
/>
const rejectedDateTime = match(transaction.statusInfo)
.with({ __typename: "RejectedTransactionStatusInfo" }, () => (
<FormattedDateTime label={t("transaction.rejectedDate")} date={transaction.updatedAt} />
))
.otherwise(() => null);

Expand Down Expand Up @@ -280,20 +271,16 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
return (
<ReadOnlyFieldList>
{statusInfo.status === "Pending" && isNotNullish(createdAt) ? (
<LakeLabel
type="viewSmall"
<FormattedDateTime
label={t("transaction.paymentDateTime")}
render={() => (
<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(createdAt), "LLL")}
</LakeText>
)}
date={createdAt}
/>
) : null}

{bookingDateTime}
{executionDateTime}
{rejectedDate}
{canceledDateTime}
{rejectedDateTime}
{rejectedReason}

{match({ merchantCity, merchantCountry })
Expand Down Expand Up @@ -356,20 +343,7 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
({ createdAt, side, debtor, creditor }) => (
<ReadOnlyFieldList>
{isNotNullish(createdAt) ? (
<LakeLabel
type="viewSmall"
label={t("transaction.paymentDateTime")}
render={() => (
<Box direction="row" alignItems="center">
<Icon name="calendar-ltr-regular" size={16} />
<Space width={8} />

<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(createdAt), "LLL")}
</LakeText>
</Box>
)}
/>
<FormattedDateTime label={t("transaction.paymentDateTime")} date={createdAt} />
) : null}

{bookingDateTime}
Expand Down Expand Up @@ -481,7 +455,8 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
.otherwise(() => null)}

{executionDateTime}
{rejectedDate}
{canceledDateTime}
{rejectedDateTime}
{rejectedReason}
{transactionId}
</ReadOnlyFieldList>
Expand All @@ -506,19 +481,9 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
)}

{isNotNullish(reservedAmountReleasedAt) && (
<LakeLabel
type="viewSmall"
<FormattedDateTime
label={t("transaction.reservedUntil")}
render={() => (
<Box direction="row" alignItems="center">
<Icon name="calendar-ltr-regular" size={16} />
<Space width={8} />

<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(reservedAmountReleasedAt), "LLL")}
</LakeText>
</Box>
)}
date={reservedAmountReleasedAt}
/>
)}

Expand Down Expand Up @@ -595,7 +560,7 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
)
.otherwise(() => null)}

{rejectedDate}
{rejectedDateTime}
{rejectedReason}

<LakeLabel
Expand Down Expand Up @@ -631,14 +596,9 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
)}

{isNotNullish(reservedAmountReleasedAt) && (
<LakeLabel
type="viewSmall"
<FormattedDateTime
label={t("transaction.reservedUntil")}
render={() => (
<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(reservedAmountReleasedAt), "LLL")}
</LakeText>
)}
date={reservedAmountReleasedAt}
/>
)}

Expand Down Expand Up @@ -675,7 +635,7 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
/>
) : null}

{rejectedDate}
{rejectedDateTime}
{rejectedReason}
{transactionId}
</ReadOnlyFieldList>
Expand Down Expand Up @@ -703,7 +663,7 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
/>
) : null}

{rejectedDate}
{rejectedDateTime}
{rejectedReason}
{transactionId}
</ReadOnlyFieldList>
Expand All @@ -730,7 +690,7 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
)}
/>

{rejectedDate}
{rejectedDateTime}
{rejectedReason}
{transactionId}

Expand All @@ -746,14 +706,9 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
)}
/>

<LakeLabel
type="viewSmall"
<FormattedDateTime
label={t("transaction.originalTransactionDate")}
render={() => (
<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(originTransaction.executionDate), "LLL")}
</LakeText>
)}
date={originTransaction.executionDate}
/>

{match(feesType)
Expand Down Expand Up @@ -847,14 +802,9 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
)}

{isNotNullish(reservedAmountReleasedAt) && (
<LakeLabel
type="viewSmall"
<FormattedDateTime
label={t("transaction.reservedUntil")}
render={() => (
<LakeText variant="regular" color={colors.gray[900]}>
{formatDateTime(new Date(reservedAmountReleasedAt), "LLL")}
</LakeText>
)}
date={reservedAmountReleasedAt}
/>
)}

Expand All @@ -878,7 +828,7 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
/>

{executionDateTime}
{rejectedDate}
{rejectedDateTime}
{rejectedReason}
{transactionId}

Expand Down Expand Up @@ -940,7 +890,8 @@ export const TransactionDetail = ({ transaction, large }: Props) => {
<ReadOnlyFieldList>
{bookingDateTime}
{executionDateTime}
{rejectedDate}
{canceledDateTime}
{rejectedDateTime}
{rejectedReason}
{transactionId}
</ReadOnlyFieldList>
Expand Down
5 changes: 4 additions & 1 deletion clients/banking/src/graphql/partner.gql
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,17 @@ fragment TransactionDetails on Transaction {
}
}
statusInfo {
status
__typename
status
... on BookedTransactionStatusInfo {
bookingDate
}
... on PendingTransactionStatusInfo {
pendingEndDate
}
... on CanceledTransactionStatusInfo {
canceledDate
}
... on RejectedTransactionStatusInfo {
status
reason
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@
"supportingDocuments.swornStatementModal.text": "Aus regulatorischen Gründen benötigen wir eine eidesstattliche Erklärung des wirtschaftlich Berechtigten",
"supportingDocuments.swornStatementModal.title": "Eidesstattliche Erklärung des wirtschaftlich Berechtigten",
"transaction.bookingDateTime": "Gebuchtes Datum",
"transaction.canceledDate": "Stornierungsdatum",
"transaction.cardHolder": "Karteninhaber",
"transaction.checkNumber": "Schecknummer",
"transaction.cmc7": "CMC7",
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@
"supportingDocuments.swornStatementModal.text": "Sworn statement validating the UBO Declaration",
"supportingDocuments.swornStatementModal.title": "Sworn statement validating the UBO declaration",
"transaction.bookingDateTime": "Booked date",
"transaction.canceledDate": "Canceled date",
"transaction.cardHolder": "Card holder",
"transaction.checkNumber": "Check number",
"transaction.cmc7": "CMC7",
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@
"supportingDocuments.swornStatementModal.text": "Por motivos reglamentarios, necesitamos una declaración jurada de la titularidad real",
"supportingDocuments.swornStatementModal.title": "Declaración jurada de titularidad real",
"transaction.bookingDateTime": "Fecha de reserva",
"transaction.canceledDate": "Fecha de cancelación",
"transaction.cardHolder": "Titular de la tarjeta",
"transaction.checkNumber": "Número de cheque",
"transaction.cmc7": "CMC7",
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/fi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@
"supportingDocuments.swornStatementModal.text": "Tosiasiallisen edunsaajan ilmoituksen vahvistus",
"supportingDocuments.swornStatementModal.title": "Tosiasiallisen edunsaajan ilmoituksen vahvistus",
"transaction.bookingDateTime": "Varauksen päivämäärä",
"transaction.canceledDate": "Peruutuspäivä",
"transaction.cardHolder": "Kortin haltija",
"transaction.checkNumber": "Shekin numero",
"transaction.cmc7": "CMC7",
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@
"supportingDocuments.swornStatementModal.text": "Pour des raisons réglementaires, nous avons besoin d'une déclaration sous serment du BE",
"supportingDocuments.swornStatementModal.title": "Déclaration sous serment du BE",
"transaction.bookingDateTime": "Date de règlement",
"transaction.canceledDate": "Date d'annulation",
"transaction.cardHolder": "Titulaire de la carte",
"transaction.checkNumber": "Numéro de chèque",
"transaction.cmc7": "CMC7",
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/it.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@
"supportingDocuments.swornStatementModal.text": "Per motivi normativi, abbiamo bisogno di una dichiarazione giurata di beneficiario effettivo (UBO)",
"supportingDocuments.swornStatementModal.title": "Dichiarazione giurata di beneficiario effettivo (UBO)",
"transaction.bookingDateTime": "Data prenotata",
"transaction.canceledDate": "Data di cancellazione",
"transaction.cardHolder": "Titolare della carta",
"transaction.checkNumber": "Numero dell'assegno",
"transaction.cmc7": "CMC7",
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/nl.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@
"supportingDocuments.swornStatementModal.text": "Voor de regelgeving hebben we een eedverklaring van de UBO-verklaring nodig",
"supportingDocuments.swornStatementModal.title": "Eedverklaring UBO-verklaring",
"transaction.bookingDateTime": "Boekingsdatum",
"transaction.canceledDate": "Datum geannuleerd",
"transaction.cardHolder": "Kaarthouder",
"transaction.checkNumber": "Controleer nummer",
"transaction.cmc7": "CMC7",
Expand Down
1 change: 1 addition & 0 deletions clients/banking/src/locales/pt.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -571,6 +571,7 @@
"supportingDocuments.swornStatementModal.text": "Por razões regulatórias, precisamos de uma declaração juramentada da declaração do beneficiário final.",
"supportingDocuments.swornStatementModal.title": "Declaração Juramentada do Beneficiário Final",
"transaction.bookingDateTime": "Data da reserva",
"transaction.canceledDate": "Data de cancelamento",
"transaction.cardHolder": "Titular do cartão",
"transaction.checkNumber": "Número do cheque",
"transaction.cmc7": "CMC7",
Expand Down
2 changes: 1 addition & 1 deletion clients/onboarding/src/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
"company.step.documents.confirmModal.confirm": "I'm sure",
"company.step.documents.confirmModal.message": "This is the easiest way to collect them. Otherwise, we'll do it by email later.",
"company.step.documents.confirmModal.title": "Are you sure you uploaded all of your documents?",
"company.step.documents.title": "Supporting documents",
"company.step.documents.subtitle": "Please provide high-quality, full-color files that capture the entire document.",
"company.step.documents.title": "Supporting documents",
"company.step.organisation1.addressLabel": "Find your organization's address",
"company.step.organisation1.addressTitle": "Organization address",
"company.step.organisation1.isRegisteredLabel": "Are you registered?",
Expand Down

0 comments on commit 1769d23

Please sign in to comment.