From 969951036905997f9df51845c0eeceb83b4c1e19 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sat, 10 Jul 2021 00:33:31 -0300 Subject: refactored ui add provider --- .../src/popup/ProviderAddPage.tsx | 129 +++++++++------------ 1 file changed, 58 insertions(+), 71 deletions(-) (limited to 'packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx') diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx index ac22a5f83..4b5da05f4 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx @@ -23,8 +23,6 @@ function getJsonIfOk(r: Response) { export function ProviderAddPage({ onBack }: Props): VNode { const [verifying, setVerifying] = useState<{ url: string, provider: BackupBackupProviderTerms } | undefined>(undefined) - const [readingTerms, setReadingTerms] = useState(undefined) - const alreadyCheckedTheTerms = readingTerms === false if (!verifying) { return } - if (readingTerms) { - return setReadingTerms(undefined)} - onAccept={() => setReadingTerms(false)} - /> - } return { setVerifying(undefined); }} - onShowTerms={() => { - setReadingTerms(true) - }} onConfirm={() => { wxApi.addBackupProvider(verifying.url).then(onBack) }} @@ -89,50 +77,53 @@ export interface SetUrlViewProps { withError?: string; } import arrowDown from '../../static/img/chevron-down.svg'; +import { Button, ButtonPrimary, ErrorBox, Input, LightText, PopupBox, SmallTextLight } from "../components/styled/index"; +import { Checkbox } from "../components/Checkbox"; + +function ErrorMessage({ title, description }: { title?: string, description?: string }) { + const [showErrorDetail, setShowErrorDetail] = useState(false); + if (!title) return null + return +
+

{title}

+ +
+ {showErrorDetail &&

{description}

} +
+} export function SetUrlView({ initialValue, onCancel, onVerify, withError }: SetUrlViewProps) { const [value, setValue] = useState(initialValue || "") const [error, setError] = useState(withError) - const [showErrorDetail, setShowErrorDetail] = useState(false); - return
-
-
- Add backup provider for saving coins -
-

Backup provider URL

-
https://
- setValue(e.currentTarget.value)} /> + return +
+

Add backup provider

+ + Backup providers may charge for their service

- Backup providers may charge for their service + + + setValue(e.currentTarget.value)} /> + + + + +

- {error && -
-
-

Could not get provider information

-

- -

-
- {showErrorDetail &&
{error}
} -
-
- }
-
- -
- -
+
+ + { + let url = value.startsWith('http://') || value.startsWith('https://') ? value : `https://${value}` + url = url.endsWith('/') ? url.substring(0, url.length - 1) : url; + return onVerify(url).then(r => r ? setError(r) : undefined) + }}>Next
-
+ } export interface ConfirmProviderViewProps { @@ -140,34 +131,30 @@ export interface ConfirmProviderViewProps { url: string, onCancel: () => void; onConfirm: () => void; - onShowTerms: () => void; - termsChecked: boolean; } -export function ConfirmProviderView({ url, termsChecked, onShowTerms, provider, onCancel, onConfirm }: ConfirmProviderViewProps) { - return
-
-
Verify provider service terms for {url} backup provider
+export function ConfirmProviderView({ url, provider, onCancel, onConfirm }: ConfirmProviderViewProps) { + const [accepted, setAccepted] = useState(false); + + return +
+

Review terms of service

+
Provider URL: {url}
+ Please review and accept this provider's terms of service +

1. Pricing

- {Amounts.isZero(provider.annual_fee) ? 'free of charge' : provider.annual_fee} for a year of backup service + {Amounts.isZero(provider.annual_fee) ? 'free of charge' : `${provider.annual_fee} per year of service`}

+

2. Storage

- {provider.storage_limit_in_megabytes} megabytes of storage + {provider.storage_limit_in_megabytes} megabytes of storage per year of service

+ setAccepted(old => !old)} enabled={accepted}/>
-
+ } -- cgit v1.2.3