show error details in devmode

packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx

@@ -17,6 +17,7 @@ import { TalerErrorDetails } from "@gnu-taler/taler-util";
 import { VNode, h, Fragment } from "preact";
 import { useState } from "preact/hooks";
 import arrowDown from "../../static/img/chevron-down.svg";
+import { useDevContext } from "../context/devContext";
 import { ErrorBox } from "./styled";
 
 export function ErrorTalerOperation({
@@ -26,8 +27,8 @@ export function ErrorTalerOperation({
   title?: string;
   error?: TalerErrorDetails;
 }): VNode | null {
+  const { devMode } = useDevContext();
   const [showErrorDetail, setShowErrorDetail] = useState(false);
-  const [showExtraInfo, setShowExtraInfo] = useState(false);
   if (!title || !error) return null;
   return (
     <ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}>
@@ -47,11 +48,8 @@ export function ErrorTalerOperation({
         <Fragment>
           <div style={{ padding: 5, textAlign: "left" }}>
             <div>{error.message}</div>
-            <a href="#" onClick={() => setShowExtraInfo((v) => !v)}>
-              more
-            </a>
           </div>
-          {showExtraInfo && (
+          {devMode && (
             <div style={{ textAlign: "left", overflowX: "auto" }}>
               <pre>{JSON.stringify(error, undefined, 2)}</pre>
             </div>

packages/taler-wallet-webextension/src/context/devContext.ts

@@ -20,7 +20,7 @@
  */
 
 import { createContext, h, VNode } from "preact";
-import { useContext, useState } from "preact/hooks";
+import { useContext } from "preact/hooks";
 import { useLocalStorage } from "../hooks/useLocalStorage";
 
 interface Type {
@@ -34,6 +34,10 @@ const Context = createContext<Type>({
 
 export const useDevContext = (): Type => useContext(Context);
 
+export const DevContextProviderForTesting = ({ value, children }: { value: boolean, children: any }): VNode => {
+  return h(Context.Provider, { value: { devMode: value, toggleDevMode: () => { null } }, children });
+};
+
 export const DevContextProvider = ({ children }: { children: any }): VNode => {
   const [value, setter] = useLocalStorage("devMode");
   const devMode = value === "true";

packages/taler-wallet-webextension/src/cta/Pay.tsx

@@ -33,6 +33,7 @@ import {
   ConfirmPayResultType,
   ContractTerms,
   i18n,
+  NotificationType,
   PreparePayResult,
   PreparePayResultType,
 } from "@gnu-taler/taler-util";
@@ -56,6 +57,7 @@ import * as wxApi from "../wxApi";
 
 interface Props {
   talerPayUri?: string;
+  goToWalletManualWithdraw: () => void;
 }
 
 // export function AlreadyPaid({ payStatus }: { payStatus: PreparePayResult }) {
@@ -102,7 +104,10 @@ const doPayment = async (
   return res;
 };
 
-export function PayPage({ talerPayUri }: Props): VNode {
+export function PayPage({
+  talerPayUri,
+  goToWalletManualWithdraw,
+}: Props): VNode {
   const [payStatus, setPayStatus] = useState<PreparePayResult | undefined>(
     undefined,
   );
@@ -113,7 +118,9 @@ export function PayPage({ talerPayUri }: Props): VNode {
     OperationFailedError | string | undefined
   >(undefined);
 
-  const balance = useAsyncAsHook(wxApi.getBalance);
+  const balance = useAsyncAsHook(wxApi.getBalance, [
+    NotificationType.CoinWithdrawn,
+  ]);
   const balanceWithoutError = balance?.hasError
     ? []
     : balance?.response.balances || [];
@@ -144,7 +151,7 @@ export function PayPage({ talerPayUri }: Props): VNode {
       }
     };
     doFetch();
-  }, [talerPayUri]);
+  }, [talerPayUri, foundAmount]);
 
   if (!talerPayUri) {
     return <span>missing pay uri</span>;
@@ -198,6 +205,7 @@ export function PayPage({ talerPayUri }: Props): VNode {
       payStatus={payStatus}
       payResult={payResult}
       onClick={onClick}
+      goToWalletManualWithdraw={goToWalletManualWithdraw}
       balance={foundAmount}
     />
   );
@@ -209,6 +217,7 @@ export interface PaymentRequestViewProps {
   onClick: () => void;
   payErrMsg?: string;
   uri: string;
+  goToWalletManualWithdraw: () => void;
   balance: AmountJson | undefined;
 }
 export function PaymentRequestView({
@@ -216,6 +225,7 @@ export function PaymentRequestView({
   payStatus,
   payResult,
   onClick,
+  goToWalletManualWithdraw,
   balance,
 }: PaymentRequestViewProps): VNode {
   let totalFees: AmountJson = Amounts.getZero(payStatus.amountRaw);
@@ -306,7 +316,7 @@ export function PaymentRequestView({
             )}
           </section>
           <section>
-            <ButtonSuccess upperCased>
+            <ButtonSuccess upperCased onClick={goToWalletManualWithdraw}>
               {i18n.str`Withdraw digital cash`}
             </ButtonSuccess>
           </section>

packages/taler-wallet-webextension/src/test-utils.ts

@@ -14,15 +14,27 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { ComponentChildren, FunctionalComponent, h as render } from "preact";
+import { ComponentChildren, FunctionalComponent, h as render, VNode } from "preact";
 
 export function createExample<Props>(
   Component: FunctionalComponent<Props>,
   props: Partial<Props>,
-) {
+): ComponentChildren {
-  const r = (args: any) => render(Component, args);
+  const Render = (args: any) => render(Component, args);
-  r.args = props;
+  Render.args = props;
-  return r;
+  return Render;
+}
+
+export function createExampleWithCustomContext<Props, ContextProps>(
+  Component: FunctionalComponent<Props>,
+  props: Partial<Props>,
+  ContextProvider: FunctionalComponent<ContextProps>,
+  contextProps: Partial<ContextProps>,
+): ComponentChildren {
+  const Render = (args: any): VNode => render(Component, args);
+  const WithContext = (args: any): VNode => render(ContextProvider, { ...contextProps, children: [Render(args)] } as any);
+  WithContext.args = props
+  return WithContext
 }
 
 export function NullLink({ children }: { children?: ComponentChildren }) {

packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx

@@ -31,7 +31,12 @@ import {
   TransactionWithdrawal,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
+import { ComponentChildren, h } from "preact";
+import { DevContextProviderForTesting } from "../context/devContext";
+import {
+  createExample,
+  createExampleWithCustomContext as createExampleInCustomContext,
+} from "../test-utils";
 import { TransactionView as TestedComponent } from "./Transaction";
 
 export default {
@@ -128,6 +133,25 @@ export const Withdraw = createExample(TestedComponent, {
   transaction: exampleData.withdraw,
 });
 
+export const WithdrawOneMinuteAgo = createExample(TestedComponent, {
+  transaction: {
+    ...exampleData.withdraw,
+    timestamp: {
+      t_ms: new Date().getTime() - 60 * 1000,
+    },
+  },
+});
+
+export const WithdrawOneMinuteAgoAndPending = createExample(TestedComponent, {
+  transaction: {
+    ...exampleData.withdraw,
+    timestamp: {
+      t_ms: new Date().getTime() - 60 * 1000,
+    },
+    pending: true,
+  },
+});
+
 export const WithdrawError = createExample(TestedComponent, {
   transaction: {
     ...exampleData.withdraw,
@@ -135,6 +159,18 @@ export const WithdrawError = createExample(TestedComponent, {
   },
 });
 
+export const WithdrawErrorInDevMode = createExampleInCustomContext(
+  TestedComponent,
+  {
+    transaction: {
+      ...exampleData.withdraw,
+      error: transactionError,
+    },
+  },
+  DevContextProviderForTesting,
+  { value: true },
+);
+
 export const WithdrawPendingManual = createExample(TestedComponent, {
   transaction: {
     ...exampleData.withdraw,

packages/taler-wallet-webextension/src/wallet/Transaction.tsx

@@ -24,6 +24,7 @@ import {
   TransactionType,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
+import { differenceInSeconds } from "date-fns";
 import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { route } from "preact-router";
 import { useState } from "preact/hooks";
@@ -110,6 +111,7 @@ export function TransactionView({
   onBack,
 }: WalletTransactionProps): VNode {
   const [confirmBeforeForget, setConfirmBeforeForget] = useState(false);
+
   function doCheckBeforeForget(): void {
     if (
       transaction.pending &&
@@ -120,11 +122,18 @@ export function TransactionView({
       onDelete();
     }
   }
+
   function TransactionTemplate({
     children,
   }: {
     children: ComponentChildren;
   }): VNode {
+    const showRetry =
+      transaction.error !== undefined ||
+      transaction.timestamp.t_ms === "never" ||
+      (transaction.pending &&
+        differenceInSeconds(new Date(), transaction.timestamp.t_ms) > 10);
+
     return (
       <Fragment>
         <section style={{ padding: 8, textAlign: "center" }}>
@@ -144,7 +153,7 @@ export function TransactionView({
             <i18n.Translate> &lt; Back </i18n.Translate>
           </Button>
           <div>
-            {transaction?.error ? (
+            {showRetry ? (
               <ButtonPrimary onClick={onRetry}>
                 <i18n.Translate>retry</i18n.Translate>
               </ButtonPrimary>

packages/taler-wallet-webextension/src/walletEntryPoint.tsx

@@ -164,7 +164,13 @@ function Application(): VNode {
           />
 
           {/** call to action */}
-          <Route path={Pages.pay} component={PayPage} />
+          <Route
+            path={Pages.pay}
+            component={PayPage}
+            goToWalletManualWithdraw={() =>
+              goToWalletPage(Pages.manual_withdraw)
+            }
+          />
           <Route path={Pages.refund} component={RefundPage} />
           <Route path={Pages.tips} component={TipPage} />
           <Route path={Pages.withdraw} component={WithdrawPage} />
@@ -176,6 +182,16 @@ function Application(): VNode {
   );
 }
 
+function goToWalletPage(page: Pages | string): null {
+  // eslint-disable-next-line no-undef
+  chrome.tabs.create({
+    active: true,
+    // eslint-disable-next-line no-undef
+    url: chrome.extension.getURL(`/static/wallet.html#${page}`),
+  });
+  return null;
+}
+
 function Redirect({ to }: { to: string }): null {
   useEffect(() => {
     route(to, true);