diff options
author | Sebastian <sebasjm@gmail.com> | 2021-07-27 17:05:19 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-07-27 17:05:59 -0300 |
commit | 37031700d094d2e281529b937f196b65a0f83f2e (patch) | |
tree | 6a2cb5d4bc848732ecac50629f655865720bc343 /packages/taler-wallet-webextension | |
parent | fbf1b3e9bfe7d9c9c846ac0f924f2c385ddefa42 (diff) |
aplying design changes in provider details ui
Diffstat (limited to 'packages/taler-wallet-webextension')
-rw-r--r-- | packages/taler-wallet-webextension/src/components/styled/index.tsx | 8 | ||||
-rw-r--r-- | packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx | 38 |
2 files changed, 30 insertions, 16 deletions
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx index 8afbb6c9a..7cc6d427a 100644 --- a/packages/taler-wallet-webextension/src/components/styled/index.tsx +++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -4,7 +4,7 @@ import type * as Linaria from '@linaria/core'; import { styled } from '@linaria/react'; -export const PaymentStatus = styled.span<{ color: string }>` +export const PaymentStatus = styled.div<{ color: string }>` padding: 5px; border-radius: 5px; color: white; @@ -40,6 +40,10 @@ export const PopupBox = styled.div` & > div { align-self: center; } + + & > h3 { + margin: 0px; + } } & > footer { @@ -223,7 +227,7 @@ export const ErrorBox = styled.div` /* margin: 0.5em; */ padding-left: 1em; padding-right: 1em; - width: "100%"; + width: 100%; color: #721c24; background: #f8d7da; diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx index 30512d227..c92137ee3 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx @@ -39,7 +39,7 @@ export function ProviderDetailPage({ pid, onBack }: Props): VNode { } return <ProviderView info={status.info} onSync={status.sync} - onDelete={() => status.remove().then(onBack) } + onDelete={() => status.remove().then(onBack)} onBack={onBack} onExtend={() => { null }} />; @@ -54,18 +54,28 @@ export interface ViewProps { } 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 ( <PopupBox> <header> - <PaymentStatus color={colorByStatus(info.paymentStatus.type)}>{info.paymentStatus.type}</PaymentStatus> + <Error info={info} /> - {info.terms && <div>{info.terms.annualFee} / year</div>} </header> - <section> - <Error info={info} /> + <header> <h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3> - <p>{daysSince(info?.lastSuccessfulBackupTimestamp)} </p> + <PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60, 60)'}>{isPaid ? 'Paid': 'Unpaid' }</PaymentStatus> + </header> + <section> + <p><b>Last backup:</b> {lb == null || lb.t_ms == "never" ? "never" : format(lb.t_ms, 'dd MMM yyyy')} </p> + <ButtonPrimary onClick={onSync}><i18n.Translate>Back up</i18n.Translate></ButtonPrimary> + {info.terms && <Fragment> + <p><b>Provider fee:</b> {info.terms && info.terms.annualFee} per year</p> + </Fragment> + } <p>{descriptionByStatus(info.paymentStatus)}</p> + <ButtonPrimary disabled onClick={onExtend}><i18n.Translate>Extend</i18n.Translate></ButtonPrimary> + {info.paymentStatus.type === ProviderPaymentType.TermsChanged && <div> <p><i18n.Translate>terms has changed, extending the service will imply accepting the new terms of service</i18n.Translate></p> <table> @@ -99,9 +109,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP <footer> <Button onClick={onBack}><i18n.Translate> < back</i18n.Translate></Button> <div> - <ButtonDestructive onClick={onDelete}><i18n.Translate>remove</i18n.Translate></ButtonDestructive> - <ButtonPrimary disabled onClick={onExtend}><i18n.Translate>extend</i18n.Translate></ButtonPrimary> - <ButtonPrimary onClick={onSync}><i18n.Translate>sync now</i18n.Translate></ButtonPrimary> + <ButtonDestructive onClick={onDelete}><i18n.Translate>remove provider</i18n.Translate></ButtonDestructive> </div> </footer> </PopupBox> @@ -171,17 +179,19 @@ function colorByStatus(status: ProviderPaymentType) { function descriptionByStatus(status: ProviderPaymentStatus) { switch (status.type) { - case ProviderPaymentType.InsufficientBalance: - return i18n.str`no enough balance to make the payment` - case ProviderPaymentType.Unpaid: - return i18n.str`not paid yet` + // return i18n.str`no enough balance to make the payment` + // return i18n.str`not paid yet` case ProviderPaymentType.Paid: case ProviderPaymentType.TermsChanged: if (status.paidUntil.t_ms === 'never') { return i18n.str`service paid` } else { - return i18n.str`service paid until ${format(status.paidUntil.t_ms, 'yyyy/MM/dd HH:mm:ss')}` + return <Fragment> + <b>Backup valid until:</b> {format(status.paidUntil.t_ms, 'dd MMM yyyy')} + </Fragment> } + case ProviderPaymentType.Unpaid: + case ProviderPaymentType.InsufficientBalance: case ProviderPaymentType.Pending: return '' } |