taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

aplying design changes in provider details ui

Browse Source
This commit is contained in:
Sebastian 2021-07-27 17:05:19 -03:00
parent fbf1b3e9bf
commit 37031700d0
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/taler-wallet-webextension/src/components/styled/index.tsx
View File

@ -4,7 +4,7 @@ import type * as Linaria from '@linaria/core';
import { styled } from '@linaria/react'; import { styled } from '@linaria/react';
export const PaymentStatus = styled.span<{ color: string }>` export const PaymentStatus = styled.div<{ color: string }>`
padding: 5px; padding: 5px;
border-radius: 5px; border-radius: 5px;
color: white; color: white;
@ -40,6 +40,10 @@ export const PopupBox = styled.div`
& > div { & > div {
align-self: center; align-self: center;
} }
& > h3 {
margin: 0px;
}
} }
& > footer { & > footer {
@ -223,7 +227,7 @@ export const ErrorBox = styled.div`
/* margin: 0.5em; */ /* margin: 0.5em; */
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
width: "100%"; width: 100%;
color: #721c24; color: #721c24;
background: #f8d7da; background: #f8d7da;

38
packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx
View File

@ -39,7 +39,7 @@ export function ProviderDetailPage({ pid, onBack }: Props): VNode {
} }
return <ProviderView info={status.info} return <ProviderView info={status.info}
onSync={status.sync} onSync={status.sync}
onDelete={() => status.remove().then(onBack) } onDelete={() => status.remove().then(onBack)}
onBack={onBack} onBack={onBack}
onExtend={() => { null }} onExtend={() => { null }}
/>; />;
@ -54,18 +54,28 @@ export interface ViewProps {
} }
export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewProps): VNode { 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 ( return (
<PopupBox> <PopupBox>
<header> <header>
<PaymentStatus color={colorByStatus(info.paymentStatus.type)}>{info.paymentStatus.type}</PaymentStatus> <Error info={info} />
{info.terms && <div>{info.terms.annualFee} / year</div>} </header>
<header>
<h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3>
<PaymentStatus color={isPaid ? 'rgb(28, 184, 65)' : 'rgb(202, 60, 60)'}>{isPaid ? 'Paid': 'Unpaid' }</PaymentStatus>
</header> </header>
<section> <section>
<Error info={info} /> <p><b>Last backup:</b> {lb == null || lb.t_ms == "never" ? "never" : format(lb.t_ms, 'dd MMM yyyy')} </p>
<h3>{info.name} <SmallTextLight>{info.syncProviderBaseUrl}</SmallTextLight></h3> <ButtonPrimary onClick={onSync}><i18n.Translate>Back up</i18n.Translate></ButtonPrimary>
<p>{daysSince(info?.lastSuccessfulBackupTimestamp)} </p> {info.terms && <Fragment>
<p><b>Provider fee:</b> {info.terms && info.terms.annualFee} per year</p>
</Fragment>
}
<p>{descriptionByStatus(info.paymentStatus)}</p> <p>{descriptionByStatus(info.paymentStatus)}</p>
<ButtonPrimary disabled onClick={onExtend}><i18n.Translate>Extend</i18n.Translate></ButtonPrimary>
{info.paymentStatus.type === ProviderPaymentType.TermsChanged && <div> {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> <p><i18n.Translate>terms has changed, extending the service will imply accepting the new terms of service</i18n.Translate></p>
<table> <table>
@ -99,9 +109,7 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP
<footer> <footer>
<Button onClick={onBack}><i18n.Translate> &lt; back</i18n.Translate></Button> <Button onClick={onBack}><i18n.Translate> &lt; back</i18n.Translate></Button>
<div> <div>
<ButtonDestructive onClick={onDelete}><i18n.Translate>remove</i18n.Translate></ButtonDestructive> <ButtonDestructive onClick={onDelete}><i18n.Translate>remove provider</i18n.Translate></ButtonDestructive>
<ButtonPrimary disabled onClick={onExtend}><i18n.Translate>extend</i18n.Translate></ButtonPrimary>
<ButtonPrimary onClick={onSync}><i18n.Translate>sync now</i18n.Translate></ButtonPrimary>
</div> </div>
</footer> </footer>
</PopupBox> </PopupBox>
@ -171,17 +179,19 @@ function colorByStatus(status: ProviderPaymentType) {
function descriptionByStatus(status: ProviderPaymentStatus) { function descriptionByStatus(status: ProviderPaymentStatus) {
switch (status.type) { switch (status.type) {
case ProviderPaymentType.InsufficientBalance: // return i18n.str`no enough balance to make the payment`
return i18n.str`no enough balance to make the payment` // return i18n.str`not paid yet`
case ProviderPaymentType.Unpaid:
return i18n.str`not paid yet`
case ProviderPaymentType.Paid: case ProviderPaymentType.Paid:
case ProviderPaymentType.TermsChanged: case ProviderPaymentType.TermsChanged:
if (status.paidUntil.t_ms === 'never') { if (status.paidUntil.t_ms === 'never') {
return i18n.str`service paid` return i18n.str`service paid`
} else { } 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: case ProviderPaymentType.Pending:
return '' return ''
} }