handle more cases in the pay usa case

4 files changed, 36 insertions, 59 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
index 9a997687f..3ca30ccb2 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
@@ -39,6 +39,7 @@ export const InsufficientBalance = createExample(TestedComponent, {
       merchant: {
         name: 'someone'
       },
+      summary: 'some beers',
       amount: 'USD:10',
     } as Partial<ContractTerms> as any,
     amountRaw: 'USD:10',
@@ -70,12 +71,12 @@ export const AlreadyConfirmedWithFullfilment = createExample(TestedComponent, {
     status: PreparePayResultType.AlreadyConfirmed,
     amountEffective: 'USD:10',
     amountRaw: 'USD:10',
-    noncePriv: '',
     contractTerms: {
       merchant: {
         name: 'someone'
       },
       fulfillment_message: 'congratulations! you are looking at the fulfillment message! ',
+      summary: 'some beers',
       amount: 'USD:10',
     } as Partial<ContractTerms> as any,
     contractTermsHash: '123456',
@@ -88,12 +89,12 @@ export const AlreadyConfirmedWithoutFullfilment = createExample(TestedComponent,
   payStatus: {
     status: PreparePayResultType.AlreadyConfirmed,
     amountEffective: 'USD:10',
-    noncePriv: '',
     amountRaw: 'USD:10',
     contractTerms: {
       merchant: {
         name: 'someone'
       },
+      summary: 'some beers',
       amount: 'USD:10',
     } as Partial<ContractTerms> as any,
     contractTermsHash: '123456',
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index e85cd60a1..c0038f8fd 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -40,7 +40,7 @@ import {
   ConfirmPayResultType,
 } from "@gnu-taler/taler-util";
 import { JSX, VNode, h, Fragment } from "preact";
-import { ButtonSuccess, LinkSuccess, WalletAction } from "../components/styled";
+import { ButtonDestructive, ButtonSuccess, ButtonWarning, LinkSuccess, LinkWarning, WalletAction } from "../components/styled";
 import { LogoHeader } from "../components/LogoHeader";
 import { Part } from "../components/Part";
 import { QR } from "../components/QR";
@@ -158,16 +158,8 @@ export interface PaymentRequestViewProps {
 }
 export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg }: PaymentRequestViewProps) {
   let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
-  let insufficientBalance = false;
-  const [loading, setLoading] = useState(false);
   const contractTerms: ContractTerms = payStatus.contractTerms;
 
-  if (
-    payStatus.status === PreparePayResultType.AlreadyConfirmed
-  ) {
-    return <AlreadyPaid payStatus={payStatus} />
-  }
-
   if (!contractTerms) {
     return (
       <span>
@@ -176,11 +168,6 @@ export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg }: Payme
     );
   }
 
-  if (payStatus.status == PreparePayResultType.InsufficientBalance) {
-    insufficientBalance = true;
-    return <div>no te alcanza</div>
-  }
-
   if (payStatus.status === PreparePayResultType.PaymentPossible) {
     const amountRaw = Amounts.parseOrThrow(payStatus.amountRaw);
     const amountEffective: AmountJson = Amounts.parseOrThrow(
@@ -197,14 +184,17 @@ export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg }: Payme
   }
 
   const [showQR, setShowQR] = useState<boolean>(false)
-  const privateUri = `${uri}&n=${payStatus.noncePriv}`
+  const privateUri = payStatus.status !== PreparePayResultType.AlreadyConfirmed ? `${uri}&n=${payStatus.noncePriv}` : uri
   return <WalletAction>
     <LogoHeader />
     <h2>
       {i18n.str`Digital cash payment`}
     </h2>
     <section>
-      <Part big title="Total paid" text={amountToString(payStatus.amountEffective)} kind='negative' />
+      {payStatus.status === PreparePayResultType.InsufficientBalance ?
+        <Part title="Insufficient balance" text="No enough coins to pay" kind='negative' /> :
+        <Part big title="Total amount with fee" text={amountToString(payStatus.amountEffective)} kind='negative' />
+      }
       <Part big title="Purchase amount" text={amountToString(payStatus.amountRaw)} kind='neutral' />
       {Amounts.isNonZero(totalFees) && <Part big title="Fee" text={amountToString(totalFees)} kind='negative' />}
       <Part title="Merchant" text={contractTerms.merchant.name} kind='neutral' />
@@ -213,37 +203,43 @@ export function PaymentRequestView({ uri, payStatus, onClick, payErrMsg }: Payme
     </section>
     {showQR && <section>
       <QR text={privateUri} />
-      <a href={privateUri}>or click here to pay with a installed wallet</a>
+      Scan the QR code or <a href={privateUri}>click here</a>
     </section>}
     <section>
       {payErrMsg ? (
         <div>
           <p>Payment failed: {payErrMsg}</p>
-          <button
-            class="pure-button button-success"
-            onClick={onClick}
-          >
+          <button class="pure-button button-success" onClick={onClick} >
             {i18n.str`Retry`}
           </button>
         </div>
       ) : (
-        <Fragment>
-
-          <LinkSuccess
-            upperCased
-            // disabled={!details.exchangeInfo.baseUrl}
-            onClick={() => setShowQR(qr => !qr)}
-          >
+        payStatus.status === PreparePayResultType.PaymentPossible ? <Fragment>
+          <LinkSuccess upperCased onClick={() => setShowQR(qr => !qr)}>
             {!showQR ? i18n.str`Complete with mobile wallet` : i18n.str`Hide QR`}
           </LinkSuccess>
-          <ButtonSuccess
-            upperCased
-          // disabled={!details.exchangeInfo.baseUrl}
-          // onClick={() => onReview(true)}
-          >
+          <ButtonSuccess upperCased>
             {i18n.str`Confirm payment`}
           </ButtonSuccess>
-        </Fragment>
+        </Fragment> : (
+          payStatus.status === PreparePayResultType.InsufficientBalance ? <Fragment>
+            <LinkSuccess upperCased onClick={() => setShowQR(qr => !qr)}>
+              {!showQR ? i18n.str`Pay with other device` : i18n.str`Hide QR`}
+            </LinkSuccess>
+            <ButtonDestructive upperCased disabled>
+              {i18n.str`No enough coins`}
+            </ButtonDestructive>
+          </Fragment> :
+            <Fragment>
+              {payStatus.contractTerms.fulfillment_message && <div>
+                {payStatus.contractTerms.fulfillment_message}
+              </div>}
+              <LinkWarning upperCased href={payStatus.contractTerms.fulfillment_url}>
+                {i18n.str`Already paid`}
+              </LinkWarning>
+            </Fragment>
+
+        )
       )}
 
     </section>
diff --git a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
index c72ea85c4..15e27486f 100644
--- a/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
+++ b/packages/taler-wallet-webextension/src/popupEntryPoint.tsx
@@ -48,7 +48,9 @@ function main(): void {
     render(<Application />, container);
   } catch (e) {
     console.error("got error", e);
-    document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    if (e instanceof Error) {
+      document.body.innerText = `Fatal error: "${e.message}".  Please report this bug at https://bugs.gnunet.org/.`;
+    }
   }
 }
 
diff --git a/packages/taler-wallet-webextension/static/style/wallet.css b/packages/taler-wallet-webextension/static/style/wallet.css
index 859789149..152806c90 100644
--- a/packages/taler-wallet-webextension/static/style/wallet.css
+++ b/packages/taler-wallet-webextension/static/style/wallet.css
@@ -54,28 +54,6 @@ section.main h1:first-child {
   margin-top: 0;
 }
 
-h1 {
-  font-size: 160%;
-  font-family: "monospace";
-}
-
-h2 {
-  font-size: 140%;
-  font-family: "monospace";
-}
-
-h3 {
-  font-size: 120%;
-  font-family: "monospace";
-}
-
-h4,
-h5,
-h6 {
-  font-family: "monospace";
-  font-size: 100%;
-}
-
 .form-row {
   padding-top: 5px;
   padding-bottom: 5px;