show contract terms in dev mode

5 files changed, 25 insertions, 41 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Modal.tsx b/packages/taler-wallet-webextension/src/components/Modal.tsx
index 5553c72df..f8c0f1651 100644
--- a/packages/taler-wallet-webextension/src/components/Modal.tsx
+++ b/packages/taler-wallet-webextension/src/components/Modal.tsx
@@ -52,7 +52,7 @@ const Body = styled.div`
 
 export function Modal({ title, children, onClose }: Props): VNode {
   return (
-    <div style={{ position: "fixed", top: 0, width: "100%", height: "100%" }}>
+    <div style={{ top: 0, width: "100%", height: "100%" }}>
 
       <FullSize onClick={onClose?.onClick}>
         <div
@@ -64,6 +64,7 @@ export function Modal({ title, children, onClose }: Props): VNode {
             margin: "auto",
             borderRadius: 8,
             padding: 8,
+            zIndex: 100,
             // overflow: "scroll",
           }}
         >
diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
index 99e2d0a76..0e23d5850 100644
--- a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.stories.tsx
@@ -81,7 +81,7 @@ export const ShowingSimpleOrder = tests.createExample(ShowView, {
   contractTerms: cd,
 });
 export const Error = tests.createExample(ErrorView, {
-  proposalId: "asd",
+  transactionId: "asd",
   error: {
     hasError: true,
     message: "message",
diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx
index b0f43d0d9..e655def39 100644
--- a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx
+++ b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx
@@ -17,6 +17,7 @@ import {
   AbsoluteTime,
   Duration,
   Location,
+  TransactionIdStr,
   WalletContractData,
 } from "@gnu-taler/taler-util";
 import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
@@ -83,7 +84,7 @@ export namespace States {
   }
   export interface Error {
     status: "error";
-    proposalId: string;
+    transactionId: string;
     error: HookError;
     hideHandler: ButtonHandler;
   }
@@ -99,17 +100,17 @@ export namespace States {
 }
 
 interface Props {
-  proposalId: string;
+  transactionId: TransactionIdStr;
 }
 
-function useComponentState({ proposalId }: Props): State {
+function useComponentState({ transactionId }: Props): State {
   const api = useBackendContext();
   const [show, setShow] = useState(false);
   const { pushAlertOnError } = useAlertContext();
   const hook = useAsyncAsHook(async () => {
     if (!show) return undefined;
     return await api.wallet.call(WalletApiOperation.GetContractTermsDetails, {
-      proposalId,
+      transactionId,
     });
   }, [show]);
 
@@ -127,7 +128,7 @@ function useComponentState({ proposalId }: Props): State {
   }
   if (!hook) return { status: "loading", hideHandler };
   if (hook.hasError)
-    return { status: "error", proposalId, error: hook, hideHandler };
+    return { status: "error", transactionId, error: hook, hideHandler };
   if (!hook.response) return { status: "loading", hideHandler };
   return {
     status: "show",
@@ -160,7 +161,7 @@ export function LoadingView({ hideHandler }: States.Loading): VNode {
 export function ErrorView({
   hideHandler,
   error,
-  proposalId,
+  transactionId,
 }: States.Error): VNode {
   const { i18n } = useTranslationContext();
   return (
@@ -170,7 +171,7 @@ export function ErrorView({
           i18n,
           i18n.str`Could not load purchase proposal details`,
           error,
-          { proposalId },
+          { transactionId },
         )}
       />
     </Modal>
diff --git a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
index 1007260d2..8bbb8dac2 100644
--- a/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Payment/views.tsx
@@ -21,18 +21,16 @@ import {
   PreparePayResultType,
   TranslatedString,
 } from "@gnu-taler/taler-util";
-import { Fragment, h, VNode } from "preact";
+import { useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
 import { Part } from "../../components/Part.js";
 import { PaymentButtons } from "../../components/PaymentButtons.js";
-import { SuccessBox, WarningBox } from "../../components/styled/index.js";
+import { ShowFullContractTermPopup } from "../../components/ShowFullContractTermPopup.js";
 import { Time } from "../../components/Time.js";
-import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import {
-  getAmountWithFee,
-  MerchantDetails,
-  PurchaseDetails,
-} from "../../wallet/Transaction.js";
+import { SuccessBox, WarningBox } from "../../components/styled/index.js";
+import { MerchantDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
+import { EnabledBySettings } from "../../components/EnabledBySettings.js";
 
 type SupportedStates =
   | State.Ready
@@ -67,22 +65,6 @@ export function BaseView(state: SupportedStates): VNode {
           text={<MerchantDetails merchant={contractTerms.merchant} />}
           kind="neutral"
         />
-        <Part
-          title={i18n.str`Details`}
-          text={
-            <PurchaseDetails
-              price={getAmountWithFee(effective, state.amount, "debit")}
-              info={{
-                ...contractTerms,
-                orderId: contractTerms.order_id,
-                contractTermsHash: "",
-                // products: contractTerms.products!,
-              }}
-              proposalId={state.payStatus.transactionId}
-            />
-          }
-          kind="neutral"
-        />
         {contractTerms.pay_deadline && (
           <Part
             title={i18n.str`Valid until`}
@@ -98,6 +80,13 @@ export function BaseView(state: SupportedStates): VNode {
           />
         )}
       </section>
+      <EnabledBySettings name="advancedMode">
+        <section style={{ textAlign: "left" }}>
+          <ShowFullContractTermPopup
+            transactionId={state.payStatus.transactionId}
+          />
+        </section>
+      </EnabledBySettings>
       <PaymentButtons
         amount={effective}
         payStatus={state.payStatus}
diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
index ff3b44be2..eaf98e906 100644
--- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx
@@ -656,11 +656,11 @@ export function TransactionView({
               price={getAmountWithFee(effective, raw, "debit")}
               effectiveRefund={effectiveRefund}
               info={transaction.info}
-              proposalId={transaction.proposalId}
             />
           }
           kind="neutral"
         />
+        <ShowFullContractTermPopup transactionId={transaction.transactionId} />
       </TransactionTemplate>
     );
   }
@@ -1489,12 +1489,10 @@ export function PurchaseDetails({
   price,
   effectiveRefund,
   info: _info,
-  proposalId,
 }: {
   price: AmountWithFee;
   effectiveRefund?: AmountJson;
   info: OrderShortInfo;
-  proposalId: string;
 }): VNode {
   const { i18n } = useTranslationContext();
 
@@ -1622,11 +1620,6 @@ export function PurchaseDetails({
           </td>
         </tr>
       )} */}
-      <tr>
-        <td>
-          <ShowFullContractTermPopup proposalId={proposalId} />
-        </td>
-      </tr>
     </PurchaseDetailsTable>
   );
 }