diff --git a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx index 968898a63..e0e41427b 100644 --- a/packages/taler-wallet-webextension/src/popup/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/BackupPage.tsx @@ -99,7 +99,7 @@ function BackupLayout(props: TransactionLayoutProps): JSX.Element { {dateStr &&
{dateStr}
} {!dateStr &&
never synced
}
- {props.title} + {props.title}
{props.subtitle}
diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx new file mode 100644 index 000000000..679a7ce43 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddConfirmProvider.stories.tsx @@ -0,0 +1,60 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { FunctionalComponent } from 'preact'; +import { ConfirmProviderView as TestedComponent } from './ProviderAddPage'; + +export default { + title: 'popup/backup/confirm', + component: TestedComponent, + argTypes: { + onRetry: { action: 'onRetry' }, + onDelete: { action: 'onDelete' }, + onBack: { action: 'onBack' }, + } +}; + + +function createExample(Component: FunctionalComponent, props: Partial) { + const r = (args: any) => + r.args = props + return r +} + +export const DemoService = createExample(TestedComponent, { + currency: 'KUDOS', + url: 'https://sync.demo.taler.net/', + provider: { + annual_fee: 'KUDOS:0.1', + storage_limit_in_megabytes: 20, + supported_protocol_version: '1' + } +}); + +export const FreeService = createExample(TestedComponent, { + currency: 'ARS', + url: 'https://sync.taler:9667/', + provider: { + annual_fee: 'ARS:0', + storage_limit_in_megabytes: 20, + supported_protocol_version: '1' + } +}); diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx new file mode 100644 index 000000000..7b8712eca --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddPage.tsx @@ -0,0 +1,107 @@ +import { Amounts, BackupBackupProviderTerms, i18n } from "@gnu-taler/taler-util"; +import { privateDecrypt } from "crypto"; +import { add, addYears } from "date-fns"; +import { VNode } from "preact"; +import { useState } from "preact/hooks"; +import * as wxApi from "../wxApi"; +import ProviderAddConfirmProviderStories from "./ProviderAddConfirmProvider.stories"; + +interface Props { + currency: string; +} + +export function ProviderAddPage({ currency }: Props): VNode { + const [verifying, setVerifying] = useState<{ url: string, provider: BackupBackupProviderTerms } | undefined>(undefined) + if (!verifying) { + return { + setVerifying(undefined); + }} + onVerify={(url) => { + return fetch(url).then(r => r.json()) + .then((provider) => setVerifying({ url, provider })) + .catch((e) => e.message) + }} + /> + } + return { + setVerifying(undefined); + }} + onConfirm={() => { + wxApi.addBackupProvider(verifying.url).then(_ => history.go(-1)) + }} + + /> +} + +export interface SetUrlViewProps { + currency: string, + onCancel: () => void; + onVerify: (s: string) => Promise; +} + +export function SetUrlView({ currency, onCancel, onVerify }: SetUrlViewProps) { + const [value, setValue] = useState("") + const [error, setError] = useState(undefined) + return
+
+
+ Add backup provider for storing {currency} +
+ {error &&
+

{error}

+
} +

Backup provider URL

+ setValue(e.currentTarget.value)} /> +

+ Backup providers may charge for their service +

+
+
+ +
+ +
+
+
+} + +export interface ConfirmProviderViewProps { + provider: BackupBackupProviderTerms, + currency: string, + url: string, + onCancel: () => void; + onConfirm: () => void +} +export function ConfirmProviderView({ url, provider, currency, onCancel, onConfirm }: ConfirmProviderViewProps) { + return
+ +
+
+ Verify provider service terms for storing {currency} +
+

{url}

+

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

+

+ {provider.storage_limit_in_megabytes} megabytes of storage +

+
+
+ +
+ +
+
+
+} diff --git a/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx b/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx new file mode 100644 index 000000000..8b9075165 --- /dev/null +++ b/packages/taler-wallet-webextension/src/popup/ProviderAddSetUrl.stories.tsx @@ -0,0 +1,46 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see + */ + +/** +* +* @author Sebastian Javier Marchano (sebasjm) +*/ + +import { ProviderPaymentType } from '@gnu-taler/taler-wallet-core'; +import { FunctionalComponent } from 'preact'; +import { SetUrlView as TestedComponent } from './ProviderAddPage'; + +export default { + title: 'popup/backup/add', + component: TestedComponent, + argTypes: { + onRetry: { action: 'onRetry' }, + onDelete: { action: 'onDelete' }, + onBack: { action: 'onBack' }, + } +}; + + +function createExample(Component: FunctionalComponent, props: Partial) { + const r = (args: any) => + r.args = props + return r +} + +export const SetUrl = createExample(TestedComponent, { + currency: 'ARS', +}); + diff --git a/packages/taler-wallet-webextension/src/popup/Provider.stories.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx similarity index 97% rename from packages/taler-wallet-webextension/src/popup/Provider.stories.tsx rename to packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx index 7b059103b..01c0a5f05 100644 --- a/packages/taler-wallet-webextension/src/popup/Provider.stories.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetail.stories.tsx @@ -21,7 +21,7 @@ import { ProviderPaymentType } from '@gnu-taler/taler-wallet-core'; import { FunctionalComponent } from 'preact'; -import { ProviderView as TestedComponent } from './ProviderPage'; +import { ProviderView as TestedComponent } from './ProviderDetailPage'; export default { title: 'popup/backup/details', @@ -77,6 +77,9 @@ export const ActiveErrorSync = createExample(TestedComponent, { "lastSuccessfulBackupTimestamp": { "t_ms": 1625063925078 }, + lastAttemptedBackupTimestamp: { + "t_ms": 1625063925078 + }, "paymentProposalIds": [ "43Q5WWRJPNS4SE9YKS54H9THDS94089EDGXW9EHBPN6E7M184XEG" ], diff --git a/packages/taler-wallet-webextension/src/popup/ProviderPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx similarity index 83% rename from packages/taler-wallet-webextension/src/popup/ProviderPage.tsx rename to packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx index 1112017fc..59e6cda1b 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx @@ -15,48 +15,34 @@ */ -import { i18n, Timestamp } from "@gnu-taler/taler-util"; +import { BackupBackupProviderTerms, i18n, Timestamp } from "@gnu-taler/taler-util"; import { ProviderInfo, ProviderPaymentType } from "@gnu-taler/taler-wallet-core"; -import { formatDuration, intervalToDuration } from "date-fns"; -import { VNode } from "preact"; +import { formatDuration, intervalToDuration, format } from "date-fns"; +import { Fragment, VNode } from "preact"; import { useRef, useState } from "preact/hooks"; import { useBackupStatus } from "../hooks/useProvidersByCurrency"; import * as wxApi from "../wxApi"; interface Props { currency: string; + onAddProvider: (c: string) => void; + onBack: () => void; } -export function ProviderPage({ currency }: Props): VNode { +export function ProviderDetailPage({ currency, onAddProvider, onBack }: Props): VNode { const status = useBackupStatus() - const [adding, setAdding] = useState(false) if (!status) { return
Loading...
} - if (adding) { - return { - console.log(value) - wxApi.addBackupProvider(value).then(_ => history.go(-1)) - setAdding(false) - }} /> - } const info = status.providers[currency]; return { null }} onDelete={() => { null }} - onBack={() => { history.go(-1); }} - onAddProvider={() => { setAdding(true) }} + onBack={onBack} + onAddProvider={() => onAddProvider(currency)} />; } -function AddProviderView({ onConfirm }: { onConfirm: (s: string) => void }) { - const textInput = useRef(null) - return
- - -
-} - export interface ViewProps { currency: string; info?: ProviderInfo; @@ -69,7 +55,7 @@ export interface ViewProps { export function ProviderView({ currency, info, onDelete, onSync, onBack, onAddProvider }: ViewProps): VNode { function Footer() { return