diff options
author | Sebastian <sebasjm@gmail.com> | 2021-07-12 14:47:59 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-07-12 14:49:00 -0300 |
commit | 1527b6c5f01ed5c0ee1bd0c3163007c11f2d6bf0 (patch) | |
tree | 9f410788dd79d9f26bfb512d3b0236db6ea2214a /packages | |
parent | 0cf52a2812dd0cfab9bfdf2dcd81fe4787f4dcb0 (diff) | |
download | wallet-core-1527b6c5f01ed5c0ee1bd0c3163007c11f2d6bf0.tar.xz |
moved out function creation from render
Diffstat (limited to 'packages')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/ErrorMessage.tsx | 3 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx | 121 |
2 files changed, 59 insertions, 65 deletions
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx index eaf015224..6bbdd26dc 100644 --- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx +++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx @@ -1,8 +1,9 @@ +import { VNode } from "preact"; import { useState } from "preact/hooks"; import arrowDown from '../../static/img/chevron-down.svg'; import { ErrorBox } from "./styled"; -export function ErrorMessage({ title, description }: { title?: string; description?: string; }) { +export function ErrorMessage({ title, description }: { title?: string|VNode; description?: string; }) { const [showErrorDetail, setShowErrorDetail] = useState(false); if (!title) return null; diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx index 2482dee18..12567c2c7 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx @@ -54,69 +54,6 @@ export interface ViewProps { } export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewProps): VNode { - function Error() { - if (info?.lastError) { - return <ErrorMessage title={info.lastError.hint} /> - // <div class="errorbox" style={{ marginTop: 10 }} > - // <div style={{ height: 0, textAlign: 'right', color: 'gray', fontSize: 'small' }}>last time tried {!info.lastAttemptedBackupTimestamp || info.lastAttemptedBackupTimestamp.t_ms === 'never' ? 'never' : format(new Date(info.lastAttemptedBackupTimestamp.t_ms), 'dd/MM/yyyy HH:mm:ss')}</div> - // <p>{info.lastError.hint}</p> - // </div> - // </Fragment> - } - if (info?.backupProblem) { - switch (info.backupProblem.type) { - case "backup-conflicting-device": - return <div class="errorbox" style={{ marginTop: 10 }}> - <p>There is conflict with another backup from <b>{info.backupProblem.otherDeviceId}</b></p> - </div> - case "backup-unreadable": - return <div class="errorbox" style={{ marginTop: 10 }}> - <p>Backup is not readable</p> - </div> - default: - return <div class="errorbox" style={{ marginTop: 10 }}> - <p>Unknown backup problem: {JSON.stringify(info.backupProblem)}</p> - </div> - } - } - return null - } - - function colorByStatus(status: ProviderPaymentType) { - switch (status) { - case ProviderPaymentType.InsufficientBalance: - return 'rgb(223, 117, 20)' - case ProviderPaymentType.Unpaid: - return 'rgb(202, 60, 60)' - case ProviderPaymentType.Paid: - return 'rgb(28, 184, 65)' - case ProviderPaymentType.Pending: - return 'gray' - case ProviderPaymentType.InsufficientBalance: - return 'rgb(202, 60, 60)' - case ProviderPaymentType.TermsChanged: - return 'rgb(202, 60, 60)' - } - } - - function descriptionByStatus(status: ProviderPaymentStatus) { - switch (status.type) { - case ProviderPaymentType.InsufficientBalance: - return 'no enough balance to make the payment' - case ProviderPaymentType.Unpaid: - return 'not pay yet' - case ProviderPaymentType.Paid: - case ProviderPaymentType.TermsChanged: - if (status.paidUntil.t_ms === 'never') { - return 'service paid.' - } else { - return `service paid until ${format(status.paidUntil.t_ms, 'yyyy/MM/dd HH:mm:ss')}` - } - case ProviderPaymentType.Pending: - return '' - } - } - return ( <PopupBox> <header> @@ -125,7 +62,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP {info.terms && <div>{info.terms.annualFee} / year</div>} </header> <section> - <Error /> + <Error info={info} /> <h3>{info.syncProviderBaseUrl}</h3> <p>{daysSince(info?.lastSuccessfulBackupTimestamp)} </p> <p>{descriptionByStatus(info.paymentStatus)}</p> @@ -193,3 +130,59 @@ function daysSince(d?: Timestamp) { }) return `synced ${str} ago` } + +function Error({ info }: { info: ProviderInfo }) { + if (info.lastError) { + return <ErrorMessage title={info.lastError.hint} /> + } + if (info.backupProblem) { + switch (info.backupProblem.type) { + case "backup-conflicting-device": + return <ErrorMessage title={<Fragment> + There is conflict with another backup from <b>{info.backupProblem.otherDeviceId}</b> + </Fragment>} /> + case "backup-unreadable": + return <ErrorMessage title="Backup is not readable" /> + default: + return <ErrorMessage title={<Fragment> + Unknown backup problem: {JSON.stringify(info.backupProblem)} + </Fragment>} /> + } + } + return null +} + +function colorByStatus(status: ProviderPaymentType) { + switch (status) { + case ProviderPaymentType.InsufficientBalance: + return 'rgb(223, 117, 20)' + case ProviderPaymentType.Unpaid: + return 'rgb(202, 60, 60)' + case ProviderPaymentType.Paid: + return 'rgb(28, 184, 65)' + case ProviderPaymentType.Pending: + return 'gray' + case ProviderPaymentType.InsufficientBalance: + return 'rgb(202, 60, 60)' + case ProviderPaymentType.TermsChanged: + return 'rgb(202, 60, 60)' + } +} + +function descriptionByStatus(status: ProviderPaymentStatus) { + switch (status.type) { + case ProviderPaymentType.InsufficientBalance: + return 'no enough balance to make the payment' + case ProviderPaymentType.Unpaid: + return 'not pay yet' + case ProviderPaymentType.Paid: + case ProviderPaymentType.TermsChanged: + if (status.paidUntil.t_ms === 'never') { + return 'service paid.' + } else { + return `service paid until ${format(status.paidUntil.t_ms, 'yyyy/MM/dd HH:mm:ss')}` + } + case ProviderPaymentType.Pending: + return '' + } +} |