From 1d4815c66c395f4fcc86c30e20f3d005e3cb9ff5 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 15 Nov 2021 11:18:58 -0300 Subject: prettier --- .../src/wallet/ProviderDetailPage.tsx | 269 ++++++++++++++------- 1 file changed, 176 insertions(+), 93 deletions(-) (limited to 'packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx') diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index c45458eb7..bd64b0760 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -14,13 +14,23 @@ TALER; see the file COPYING. If not, see */ - import { i18n, Timestamp } from "@gnu-taler/taler-util"; -import { ProviderInfo, ProviderPaymentStatus, ProviderPaymentType } from "@gnu-taler/taler-wallet-core"; +import { + ProviderInfo, + ProviderPaymentStatus, + ProviderPaymentType, +} from "@gnu-taler/taler-wallet-core"; import { format, formatDuration, intervalToDuration } from "date-fns"; import { Fragment, VNode, h } from "preact"; import { ErrorMessage } from "../components/ErrorMessage"; -import { Button, ButtonDestructive, ButtonPrimary, PaymentStatus, WalletBox, SmallLightText } from "../components/styled"; +import { + Button, + ButtonDestructive, + ButtonPrimary, + PaymentStatus, + WalletBox, + SmallLightText, +} from "../components/styled"; import { useProviderStatus } from "../hooks/useProviderStatus"; interface Props { @@ -29,20 +39,29 @@ interface Props { } export function ProviderDetailPage({ pid, onBack }: Props): VNode { - const status = useProviderStatus(pid) + const status = useProviderStatus(pid); if (!status) { - return
Loading...
+ return ( +
+ Loading... +
+ ); } if (!status.info) { - onBack() - return
+ onBack(); + return
; } - return status.remove().then(onBack)} - onBack={onBack} - onExtend={() => { null }} - />; + return ( + status.remove().then(onBack)} + onBack={onBack} + onExtend={() => { + null; + }} + /> + ); } export interface ViewProps { @@ -53,124 +72,185 @@ export interface ViewProps { onExtend: () => void; } -export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewProps): VNode { - const lb = info?.lastSuccessfulBackupTimestamp - const isPaid = info.paymentStatus.type === ProviderPaymentType.Paid || info.paymentStatus.type === ProviderPaymentType.TermsChanged +export function ProviderView({ + info, + onDelete, + onSync, + onBack, + onExtend, +}: ViewProps): VNode { + const lb = info?.lastSuccessfulBackupTimestamp; + const isPaid = + info.paymentStatus.type === ProviderPaymentType.Paid || + info.paymentStatus.type === ProviderPaymentType.TermsChanged; return (
-

{info.name} {info.syncProviderBaseUrl}

- {isPaid ? 'Paid' : 'Unpaid'} +

+ {info.name}{" "} + {info.syncProviderBaseUrl} +

+ + {isPaid ? "Paid" : "Unpaid"} +
-

Last backup: {lb == null || lb.t_ms == "never" ? "never" : format(lb.t_ms, 'dd MMM yyyy')}

- Back up - {info.terms && -

Provider fee: {info.terms && info.terms.annualFee} per year

- - } +

+ Last backup:{" "} + {lb == null || lb.t_ms == "never" + ? "never" + : format(lb.t_ms, "dd MMM yyyy")}{" "} +

+ + Back up + + {info.terms && ( + +

+ Provider fee: {info.terms && info.terms.annualFee} per year +

+ + )}

{descriptionByStatus(info.paymentStatus)}

- Extend - - {info.paymentStatus.type === ProviderPaymentType.TermsChanged &&
-

terms has changed, extending the service will imply accepting the new terms of service

- - - - - - - - - - - - - - - - - - - - - - - - -
old ->new
fee{info.paymentStatus.oldTerms.annualFee}->{info.paymentStatus.newTerms.annualFee}
storage{info.paymentStatus.oldTerms.storageLimitInMegabytes}->{info.paymentStatus.newTerms.storageLimitInMegabytes}
-
} + + Extend + + {info.paymentStatus.type === ProviderPaymentType.TermsChanged && ( +
+

+ + terms has changed, extending the service will imply accepting + the new terms of service + +

+ + + + + + + + + + + + + + + + + + + + + + + +
+ old + -> + new +
+ fee + {info.paymentStatus.oldTerms.annualFee}->{info.paymentStatus.newTerms.annualFee}
+ storage + {info.paymentStatus.oldTerms.storageLimitInMegabytes}->{info.paymentStatus.newTerms.storageLimitInMegabytes}
+
+ )}
- +
- remove provider + + remove provider +
- ) + ); } function daysSince(d?: Timestamp) { - if (!d || d.t_ms === 'never') return 'never synced' + if (!d || d.t_ms === "never") return "never synced"; const duration = intervalToDuration({ start: d.t_ms, end: new Date(), - }) + }); const str = formatDuration(duration, { - delimiter: ', ', + delimiter: ", ", format: [ - duration?.years ? i18n.str`years` : ( - duration?.months ? i18n.str`months` : ( - duration?.days ? i18n.str`days` : ( - duration?.hours ? i18n.str`hours` : ( - duration?.minutes ? i18n.str`minutes` : i18n.str`seconds` - ) - ) - ) - ) - ] - }) - return `synced ${str} ago` + duration?.years + ? i18n.str`years` + : duration?.months + ? i18n.str`months` + : duration?.days + ? i18n.str`days` + : duration?.hours + ? i18n.str`hours` + : duration?.minutes + ? i18n.str`minutes` + : i18n.str`seconds`, + ], + }); + return `synced ${str} ago`; } function Error({ info }: { info: ProviderInfo }) { if (info.lastError) { - return + return ; } if (info.backupProblem) { switch (info.backupProblem.type) { case "backup-conflicting-device": - return - There is conflict with another backup from {info.backupProblem.otherDeviceId} - } /> + return ( + + + There is conflict with another backup from{" "} + {info.backupProblem.otherDeviceId} + + + } + /> + ); case "backup-unreadable": - return + return ; default: - return - Unknown backup problem: {JSON.stringify(info.backupProblem)} - } /> + return ( + + + Unknown backup problem: {JSON.stringify(info.backupProblem)} + + + } + /> + ); } } - return null + return null; } function colorByStatus(status: ProviderPaymentType) { switch (status) { case ProviderPaymentType.InsufficientBalance: - return 'rgb(223, 117, 20)' + return "rgb(223, 117, 20)"; case ProviderPaymentType.Unpaid: - return 'rgb(202, 60, 60)' + return "rgb(202, 60, 60)"; case ProviderPaymentType.Paid: - return 'rgb(28, 184, 65)' + return "rgb(28, 184, 65)"; case ProviderPaymentType.Pending: - return 'gray' + return "gray"; case ProviderPaymentType.InsufficientBalance: - return 'rgb(202, 60, 60)' + return "rgb(202, 60, 60)"; case ProviderPaymentType.TermsChanged: - return 'rgb(202, 60, 60)' + return "rgb(202, 60, 60)"; } } @@ -180,16 +260,19 @@ function descriptionByStatus(status: ProviderPaymentStatus) { // return i18n.str`not paid yet` case ProviderPaymentType.Paid: case ProviderPaymentType.TermsChanged: - if (status.paidUntil.t_ms === 'never') { - return i18n.str`service paid` + if (status.paidUntil.t_ms === "never") { + return i18n.str`service paid`; } else { - return - Backup valid until: {format(status.paidUntil.t_ms, 'dd MMM yyyy')} - + return ( + + Backup valid until:{" "} + {format(status.paidUntil.t_ms, "dd MMM yyyy")} + + ); } case ProviderPaymentType.Unpaid: case ProviderPaymentType.InsufficientBalance: case ProviderPaymentType.Pending: - return '' + return ""; } } -- cgit v1.2.3