/* This file is part of TALER (C) 2016 GNUnet e.V. TALER is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3, or (at your option) any later version. TALER is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with TALER; see the file COPYING. If not, see */ import { i18n, Timestamp } from "@gnu-taler/taler-util"; import { ProviderInfo, ProviderPaymentStatus } from "@gnu-taler/taler-wallet-core"; import { differenceInMonths, formatDuration, intervalToDuration } from "date-fns"; import { Fragment, JSX, VNode } from "preact"; import { BoldLight, ButtonPrimary, ButtonSuccess, Centered, CenteredText, CenteredTextBold, PopupBox, RowBorderGray, SmallText, SmallTextLight } from "../components/styled"; import { useBackupStatus } from "../hooks/useBackupStatus"; import { Pages } from "./popup"; interface Props { onAddProvider: () => void; } export function BackupPage({ onAddProvider }: Props): VNode { const status = useBackupStatus() if (!status) { return
Loading...
} return ; } export interface ViewProps { providers: ProviderInfo[], onAddProvider: () => void; onSyncAll: () => Promise; } export function BackupView({ providers, onAddProvider, onSyncAll }: ViewProps): VNode { return (
{providers.map((provider) => )} {!providers.length && No backup providers configured Add provider }
{!!providers.length &&
{ providers.length > 1 ? Sync all backups : Sync now } Add provider
}
) } interface TransactionLayoutProps { status: ProviderPaymentStatus; timestamp?: Timestamp; title: string; id: string; active: boolean; } function BackupLayout(props: TransactionLayoutProps): JSX.Element { const date = !props.timestamp ? undefined : new Date(props.timestamp.t_ms); const dateStr = date?.toLocaleString([], { dateStyle: "medium", timeStyle: "short", } as any); return (
{props.title} {dateStr && Last synced: {dateStr}} {!dateStr && Not synced}
{props.status?.type === 'paid' ? :
{props.status.type}
}
); } function ExpirationText({ until }: { until: Timestamp }) { return Expires in {daysUntil(until)} } function colorByTimeToExpire(d: Timestamp) { if (d.t_ms === 'never') return 'rgb(28, 184, 65)' const months = differenceInMonths(d.t_ms, new Date()) return months > 1 ? 'rgb(28, 184, 65)' : 'rgb(223, 117, 20)'; } function daysUntil(d: Timestamp) { if (d.t_ms === 'never') return undefined const duration = intervalToDuration({ start: d.t_ms, end: new Date(), }) const str = formatDuration(duration, { delimiter: ', ', format: [ duration?.years ? 'years' : ( duration?.months ? 'months' : ( duration?.days ? 'days' : ( duration.hours ? 'hours' : 'minutes' ) ) ) ] }) return `${str}` }