fix #7522

4 files changed, 11 insertions, 262 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
index 8484680bf..a53fa881a 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
@@ -23,7 +23,7 @@ import { Part } from "../../components/Part.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
-import { ButtonsSection } from "../Payment/views.js";
+import { PaymentButtons } from "../../components/PaymentButtons";
 import { State } from "./index.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
@@ -83,7 +83,7 @@ export function ReadyView(
           kind="neutral"
         />
       </section>
-      <ButtonsSection
+      <PaymentButtons
         amount={amount}
         balance={balance}
         payStatus={payStatus}
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index 0f6cb5c28..efc8bcfc4 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -16,35 +16,17 @@
 
 import {
   AbsoluteTime,
-  AmountJson,
   Amounts,
   MerchantContractTerms as ContractTerms,
-  PreparePayResult,
   PreparePayResultType,
-  Product,
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { useState } from "preact/hooks";
-import { Amount } from "../../components/Amount.js";
-import { ErrorMessage } from "../../components/ErrorMessage.js";
 import { LoadingError } from "../../components/LoadingError.js";
-import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { QR } from "../../components/QR.js";
-import {
-  Link,
-  LinkSuccess,
-  SmallLightText,
-  SubTitle,
-  SuccessBox,
-  WalletAction,
-  WarningBox,
-} from "../../components/styled/index.js";
+import { PaymentButtons } from "../../components/PaymentButtons.js";
+import { Link, SuccessBox, WarningBox } from "../../components/styled/index.js";
 import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
-import { Button } from "../../mui/Button.js";
-import { ButtonHandler } from "../../mui/handlers.js";
-import { assertUnreachable } from "../../utils/index.js";
 import { MerchantDetails, PurchaseDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
@@ -77,44 +59,12 @@ export function BaseView(state: SupportedStates): VNode {
         ? Amounts.parseOrThrow(state.payStatus.amountEffective)
         : state.amount,
   };
-  // const totalFees = Amounts.sub(price.effective, price.raw).amount;
 
   return (
-    <WalletAction>
-      <LogoHeader />
-
-      <SubTitle>
-        <i18n.Translate>Digital cash payment</i18n.Translate>
-      </SubTitle>
-
+    <Fragment>
       <ShowImportantMessage state={state} />
 
       <section style={{ textAlign: "left" }}>
-        {/* {state.payStatus.status !== PreparePayResultType.InsufficientBalance &&
-          Amounts.isNonZero(totalFees) && (
-            <Part
-              big
-              title={<i18n.Translate>Total to pay</i18n.Translate>}
-              text={<Amount value={state.payStatus.amountEffective} />}
-              kind="negative"
-            />
-          )}
-        <Part
-          big
-          title={<i18n.Translate>Purchase amount</i18n.Translate>}
-          text={<Amount value={state.payStatus.amountRaw} />}
-          kind="neutral"
-        />
-        {Amounts.isNonZero(totalFees) && (
-          <Fragment>
-            <Part
-              big
-              title={<i18n.Translate>Fee</i18n.Translate>}
-              text={<Amount value={totalFees} />}
-              kind="negative"
-            />
-          </Fragment>
-        )} */}
         <Part
           title={<i18n.Translate>Purchase</i18n.Translate>}
           text={contractTerms.summary}
@@ -125,9 +75,6 @@ export function BaseView(state: SupportedStates): VNode {
           text={<MerchantDetails merchant={contractTerms.merchant} />}
           kind="neutral"
         />
-        {/* <pre>{JSON.stringify(price)}</pre>
-        <hr />
-        <pre>{JSON.stringify(state.payStatus, undefined, 2)}</pre> */}
         <Part
           title={<i18n.Translate>Details</i18n.Translate>}
           text={
@@ -166,7 +113,7 @@ export function BaseView(state: SupportedStates): VNode {
           />
         )}
       </section>
-      <ButtonsSection
+      <PaymentButtons
         amount={state.amount}
         balance={state.balance}
         payStatus={state.payStatus}
@@ -179,75 +126,6 @@ export function BaseView(state: SupportedStates): VNode {
           <i18n.Translate>Cancel</i18n.Translate>
         </Link>
       </section>
-    </WalletAction>
-  );
-}
-
-export function ProductList({ products }: { products: Product[] }): VNode {
-  const { i18n } = useTranslationContext();
-  return (
-    <Fragment>
-      <SmallLightText style={{ margin: ".5em" }}>
-        <i18n.Translate>List of products</i18n.Translate>
-      </SmallLightText>
-      <dl>
-        {products.map((p, i) => {
-          if (p.price) {
-            const pPrice = Amounts.parseOrThrow(p.price);
-            return (
-              <div key={i} style={{ display: "flex", textAlign: "left" }}>
-                <div>
-                  <img
-                    src={p.image ? p.image : undefined}
-                    style={{ width: 32, height: 32 }}
-                  />
-                </div>
-                <div>
-                  <dt>
-                    {p.quantity ?? 1} x {p.description}{" "}
-                    <span style={{ color: "gray" }}>
-                      {Amounts.stringify(pPrice)}
-                    </span>
-                  </dt>
-                  <dd>
-                    <b>
-                      {Amounts.stringify(
-                        Amounts.mult(pPrice, p.quantity ?? 1).amount,
-                      )}
-                    </b>
-                  </dd>
-                </div>
-              </div>
-            );
-          }
-          return (
-            <div key={i} style={{ display: "flex", textAlign: "left" }}>
-              <div>
-                <img src={p.image} style={{ width: 32, height: 32 }} />
-              </div>
-              <div>
-                <dt>
-                  {p.quantity ?? 1} x {p.description}
-                </dt>
-                <dd>
-                  <i18n.Translate>Total</i18n.Translate>
-                  {` `}
-                  {p.price ? (
-                    `${Amounts.stringifyValue(
-                      Amounts.mult(
-                        Amounts.parseOrThrow(p.price),
-                        p.quantity ?? 1,
-                      ).amount,
-                    )} ${p}`
-                  ) : (
-                    <i18n.Translate>free</i18n.Translate>
-                  )}
-                </dd>
-              </div>
-            </div>
-          );
-        })}
-      </dl>
     </Fragment>
   );
 }
@@ -284,124 +162,3 @@ function ShowImportantMessage({ state }: { state: SupportedStates }): VNode {
 
   return <Fragment />;
 }
-
-export function PayWithMobile({ uri }: { uri: string }): VNode {
-  const { i18n } = useTranslationContext();
-
-  const [showQR, setShowQR] = useState<boolean>(false);
-
-  return (
-    <section>
-      <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}>
-        {!showQR ? (
-          <i18n.Translate>Pay with a mobile phone</i18n.Translate>
-        ) : (
-          <i18n.Translate>Hide QR</i18n.Translate>
-        )}
-      </LinkSuccess>
-      {showQR && (
-        <div>
-          <QR text={uri} />
-          <i18n.Translate>
-            Scan the QR code or &nbsp;
-            <a href={uri}>
-              <i18n.Translate>click here</i18n.Translate>
-            </a>
-          </i18n.Translate>
-        </div>
-      )}
-    </section>
-  );
-}
-
-interface ButtonSectionProps {
-  payStatus: PreparePayResult;
-  payHandler: ButtonHandler | undefined;
-  balance: AmountJson | undefined;
-  uri: string;
-  amount: AmountJson;
-  goToWalletManualWithdraw: (currency: string) => Promise<void>;
-}
-
-export function ButtonsSection({
-  payStatus,
-  uri,
-  payHandler,
-  balance,
-  amount,
-  goToWalletManualWithdraw,
-}: ButtonSectionProps): VNode {
-  const { i18n } = useTranslationContext();
-  if (payStatus.status === PreparePayResultType.PaymentPossible) {
-    const privateUri = `${uri}&n=${payStatus.noncePriv}`;
-
-    return (
-      <Fragment>
-        <section>
-          <Button
-            variant="contained"
-            color="success"
-            onClick={payHandler?.onClick}
-          >
-            <i18n.Translate>
-              Pay &nbsp;
-              {<Amount value={amount} />}
-            </i18n.Translate>
-          </Button>
-        </section>
-        <PayWithMobile uri={privateUri} />
-      </Fragment>
-    );
-  }
-
-  if (payStatus.status === PreparePayResultType.InsufficientBalance) {
-    let BalanceMessage = "";
-    if (!balance) {
-      BalanceMessage = i18n.str`You have no balance for this currency. Withdraw digital cash first.`;
-    } else {
-      const balanceShouldBeEnough = Amounts.cmp(balance, amount) !== -1;
-      if (balanceShouldBeEnough) {
-        BalanceMessage = i18n.str`Could not find enough coins to pay. Even if you have enough ${balance.currency} some restriction may apply.`;
-      } else {
-        BalanceMessage = i18n.str`Your current balance is not enough.`;
-      }
-    }
-    const uriPrivate = `${uri}&n=${payStatus.noncePriv}`;
-
-    return (
-      <Fragment>
-        <section>
-          <WarningBox>{BalanceMessage}</WarningBox>
-        </section>
-        <section>
-          <Button
-            variant="contained"
-            color="success"
-            onClick={() => goToWalletManualWithdraw(Amounts.stringify(amount))}
-          >
-            <i18n.Translate>Get digital cash</i18n.Translate>
-          </Button>
-        </section>
-        <PayWithMobile uri={uriPrivate} />
-      </Fragment>
-    );
-  }
-  if (payStatus.status === PreparePayResultType.AlreadyConfirmed) {
-    return (
-      <Fragment>
-        <section>
-          {payStatus.paid && payStatus.contractTerms.fulfillment_message && (
-            <Part
-              title={<i18n.Translate>Merchant message</i18n.Translate>}
-              text={payStatus.contractTerms.fulfillment_message}
-              kind="neutral"
-            />
-          )}
-        </section>
-        {!payStatus.paid && <PayWithMobile uri={uri} />}
-      </Fragment>
-    );
-  }
-
-  assertUnreachable(payStatus);
-}
diff --git a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
index 4b5ff70dd..a55bc43dd 100644
--- a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx
@@ -23,7 +23,7 @@ import { Part } from "../../components/Part.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
-import { ProductList } from "../Payment/views.js";
+import { ProductList } from "../../components/ProductList.js";
 import { State } from "./index.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 5c35151c8..9dbe24b7e 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -14,12 +14,12 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { ExchangeTosStatus } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Amount } from "../../components/Amount.js";
 import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
 import { LoadingError } from "../../components/LoadingError.js";
-import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
 import { QR } from "../../components/QR.js";
 import { SelectList } from "../../components/SelectList.js";
@@ -27,17 +27,14 @@ import {
   Input,
   Link,
   LinkSuccess,
-  SubTitle,
   SvgIcon,
-  WalletAction,
 } from "../../components/styled/index.js";
+import { TermsOfService } from "../../components/TermsOfService/index.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
 import editIcon from "../../svg/edit_24px.svg";
 import { ExchangeDetails, WithdrawDetails } from "../../wallet/Transaction.js";
-import { TermsOfService } from "../../components/TermsOfService/index.js";
 import { State } from "./index.js";
-import { ExchangeTosStatus } from "@gnu-taler/taler-util";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
@@ -68,12 +65,7 @@ export function SuccessView(state: State.Success): VNode {
   const currentTosVersionIsAccepted =
     state.currentExchange.tosStatus === ExchangeTosStatus.Accepted;
   return (
-    <WalletAction>
-      <LogoHeader />
-      <SubTitle>
-        <i18n.Translate>Digital cash withdrawal</i18n.Translate>
-      </SubTitle>
-
+    <Fragment>
       {state.doWithdrawal.error && (
         <ErrorTalerOperation
           title={
@@ -161,7 +153,7 @@ export function SuccessView(state: State.Success): VNode {
           <i18n.Translate>Cancel</i18n.Translate>
         </Link>
       </section>
-    </WalletAction>
+    </Fragment>
   );
 }