-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(transfer-alerts): list and detail pages (#485)
* feat(transfer): add sender_account_type to transfer data * feat(transfer-alerts): list and detail pages
- Loading branch information
Showing
22 changed files
with
543 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
148 changes: 148 additions & 0 deletions
148
packages/app-builder/src/components/TransferAlerts/AlertData.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| import { type TransferAlert } from '@app-builder/models/transfer-alert'; | ||
| import { | ||
| formatDateRelative, | ||
| formatDateTime, | ||
| useFormatLanguage, | ||
| } from '@app-builder/utils/format'; | ||
| import { useGetCopyToClipboard } from '@app-builder/utils/use-get-copy-to-clipboard'; | ||
| import { Trans, useTranslation } from 'react-i18next'; | ||
| import { Tooltip } from 'ui-design-system'; | ||
|
|
||
| import { Callout } from '../Callout'; | ||
| import { alertsI18n } from './alerts-i18n'; | ||
|
|
||
| interface AlertDataProps { | ||
| alert: TransferAlert; | ||
| } | ||
|
|
||
| export function AlertData({ alert }: AlertDataProps) { | ||
| const { t } = useTranslation(alertsI18n); | ||
| const language = useFormatLanguage(); | ||
| const getCopyToClipboardProps = useGetCopyToClipboard(); | ||
|
|
||
| return ( | ||
| <div className="grid grid-cols-2 gap-8"> | ||
| <Callout className="col-span-2" variant="outlined" color="red"> | ||
| <div className="flex flex-col gap-2"> | ||
| <Tooltip.Default | ||
| content={ | ||
| <span className="text-grey-100 text-s"> | ||
| {formatDateTime(alert.createdAt, { | ||
| language, | ||
| })} | ||
| </span> | ||
| } | ||
| > | ||
| <span className="text-grey-50 text-s w-fit first-letter:capitalize"> | ||
| {formatDateRelative(alert.createdAt, { | ||
| language, | ||
| })} | ||
| </span> | ||
| </Tooltip.Default> | ||
|
|
||
| <span className="whitespace-pre-wrap">{alert.message}</span> | ||
| </div> | ||
| </Callout> | ||
|
|
||
| <table className="border-grey-10 h-fit w-full table-auto border-separate border-spacing-0 overflow-hidden rounded-lg border"> | ||
| <thead> | ||
| <tr> | ||
| <th className="bg-grey-02 h-12 px-4" colSpan={2}> | ||
| Sender | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td className="text-grey-50 text-s border-grey-10 border-t p-4"> | ||
| IBAN | ||
| </td> | ||
| <td className="text-grey-100 text-s border-grey-10 border-t p-4"> | ||
| {alert.beneficiaryIban} | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <table className="border-grey-10 h-fit w-full table-auto border-separate border-spacing-0 overflow-hidden rounded-lg border"> | ||
| <thead> | ||
| <tr> | ||
| <th className="bg-grey-02 h-12 px-4" colSpan={2}> | ||
| Beneficiary | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr> | ||
| <td className="text-grey-50 text-s border-grey-10 border-t p-4"> | ||
| IBAN | ||
| </td> | ||
| <td className="text-grey-100 text-s border-grey-10 border-t p-4"> | ||
| {alert.beneficiaryIban} | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
|
|
||
| <p className="col-span-2 whitespace-pre-wrap"> | ||
| <Trans | ||
| t={t} | ||
| i18nKey="transfercheck:alert_detail.alert_data.transfer_id" | ||
| components={{ | ||
| TransferIdLabel: <code className="select-none" />, | ||
| TransferIdValue: ( | ||
| <code | ||
| className="border-grey-10 cursor-pointer select-none rounded-sm border px-1" | ||
| {...getCopyToClipboardProps(alert.transferEndToEndId)} | ||
| /> | ||
| ), | ||
| }} | ||
| values={{ | ||
| transferId: alert.transferEndToEndId, | ||
| }} | ||
| /> | ||
| </p> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function AlertData2({ alert }: AlertDataProps) { | ||
| const language = useFormatLanguage(); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-8"> | ||
| <Callout variant="outlined" color="red"> | ||
| <div className="flex flex-col gap-2"> | ||
| <Tooltip.Default | ||
| content={ | ||
| <span className="text-grey-100 text-s"> | ||
| {formatDateTime(alert.createdAt, { | ||
| language, | ||
| })} | ||
| </span> | ||
| } | ||
| > | ||
| <span className="text-grey-50 text-s w-fit first-letter:capitalize"> | ||
| {formatDateRelative(alert.createdAt, { | ||
| language, | ||
| })} | ||
| </span> | ||
| </Tooltip.Default> | ||
|
|
||
| <span className="whitespace-pre-wrap">{alert.message}</span> | ||
| </div> | ||
| </Callout> | ||
|
|
||
| <div className="grid w-full grid-cols-[max-content_1fr] gap-x-8 gap-y-2"> | ||
| <span className="text-grey-50 text-s">Transfer ID</span> | ||
| <span className="text-grey-100 text-s">{alert.transferEndToEndId}</span> | ||
|
|
||
| <span className="text-grey-50 text-s">Sender IBAN</span> | ||
| <span className="text-grey-100 text-s">{alert.senderIban}</span> | ||
|
|
||
| <span className="text-grey-50 text-s">Beneficiary IBAN</span> | ||
| <span className="text-grey-100 text-s">{alert.beneficiaryIban}</span> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
105 changes: 105 additions & 0 deletions
105
packages/app-builder/src/components/TransferAlerts/AlertsList.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| import { type TransferAlert } from '@app-builder/models/transfer-alert'; | ||
| import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format'; | ||
| import { getRoute } from '@app-builder/utils/routes'; | ||
| import { fromUUID } from '@app-builder/utils/short-uuid'; | ||
| import { Link } from '@remix-run/react'; | ||
| import { createColumnHelper, getCoreRowModel } from '@tanstack/react-table'; | ||
| import clsx from 'clsx'; | ||
| import * as React from 'react'; | ||
| import { useTranslation } from 'react-i18next'; | ||
| import { Table, useTable } from 'ui-design-system'; | ||
|
|
||
| import { alertsI18n } from './alerts-i18n'; | ||
|
|
||
| interface AlertsListProps { | ||
| alerts: TransferAlert[]; | ||
| } | ||
|
|
||
| const columnHelper = createColumnHelper<TransferAlert>(); | ||
|
|
||
| export function AlertsList({ alerts }: AlertsListProps) { | ||
| const { t } = useTranslation(alertsI18n); | ||
| const language = useFormatLanguage(); | ||
|
|
||
| const columns = React.useMemo( | ||
| () => [ | ||
| columnHelper.accessor((row) => row.status, { | ||
| id: 'status', | ||
| header: 'Status', | ||
| size: 50, | ||
| }), | ||
| columnHelper.accessor((row) => row.message, { | ||
| id: 'message', | ||
| header: 'Message', | ||
| size: 200, | ||
| cell: ({ getValue }) => { | ||
| const message = getValue(); | ||
| return <div className="py-2">{message}</div>; | ||
| }, | ||
| }), | ||
| columnHelper.accessor((row) => row.createdAt, { | ||
| id: 'createdAt', | ||
| header: 'Created At', | ||
| size: 100, | ||
| cell: ({ getValue }) => { | ||
| const dateTime = getValue(); | ||
| return ( | ||
| <time dateTime={dateTime}> | ||
| {formatDateTime(dateTime, { language, timeStyle: undefined })} | ||
| </time> | ||
| ); | ||
| }, | ||
| }), | ||
| ], | ||
| [language], | ||
| ); | ||
|
|
||
| const { rows, table, getBodyProps, getContainerProps } = useTable({ | ||
| data: alerts, | ||
| columns, | ||
| columnResizeMode: 'onChange', | ||
| getCoreRowModel: getCoreRowModel(), | ||
| rowLink: (alert) => ( | ||
| <Link | ||
| to={getRoute('/transfercheck/alerts/:alertId', { | ||
| alertId: fromUUID(alert.id), | ||
| })} | ||
| /> | ||
| ), | ||
| }); | ||
|
|
||
| if (rows.length === 0 || alerts.length === 0) { | ||
| const emptyMessage = | ||
| alerts.length === 0 | ||
| ? t('transfercheck:alerts.empty') | ||
| : t('transfercheck:alerts.search.empty'); | ||
| return ( | ||
| <div className="bg-grey-00 border-grey-10 flex h-28 max-w-3xl flex-col items-center justify-center rounded-lg border border-solid p-4"> | ||
| <p className="text-s font-medium">{emptyMessage}</p> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Table.Container {...getContainerProps()}> | ||
| <Table.Header headerGroups={table.getHeaderGroups()} /> | ||
| <Table.Body {...getBodyProps()}> | ||
| {rows.map((row) => { | ||
| const bgClassName = | ||
| row.original.status === 'unread' ? 'bg-grey-00' : 'transparent'; | ||
| return ( | ||
| <Table.Row | ||
| key={row.id} | ||
| tabIndex={0} | ||
| className={clsx( | ||
| 'hover:bg-grey-02 relative cursor-pointer', | ||
| bgClassName, | ||
| )} | ||
| row={row} | ||
| /> | ||
| ); | ||
| })} | ||
| </Table.Body> | ||
| </Table.Container> | ||
| ); | ||
| } |
3 changes: 3 additions & 0 deletions
3
packages/app-builder/src/components/TransferAlerts/alerts-i18n.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import { type Namespace } from 'i18next'; | ||
|
|
||
| export const alertsI18n = ['common', 'transfercheck'] satisfies Namespace; |
Oops, something went wrong.