payment template: show fixed values

2 files changed, 70 insertions, 59 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
index 1a92c4073..ba854a93c 100644
--- a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/state.ts
@@ -47,12 +47,18 @@ export function useComponentState({
   const hook = useAsyncAsHook(async () => {
     if (!talerTemplateUri) throw Error("ERROR_NO-URI-FOR-PAYMENT-TEMPLATE");
     const templateP = await api.wallet.call(
-      WalletApiOperation.CheckPayForTemplate, { talerPayTemplateUri: talerTemplateUri },
+      WalletApiOperation.CheckPayForTemplate,
+      { talerPayTemplateUri: talerTemplateUri },
     );
-    const requireMoreInfo = !templateP.templateDetails.template_contract.amount || !templateP.templateDetails.template_contract.summary;
+    const requireMoreInfo =
+      !templateP.templateDetails.template_contract.amount ||
+      !templateP.templateDetails.template_contract.summary;
     let payStatus: PreparePayResult | undefined = undefined;
     if (!requireMoreInfo) {
-      payStatus = await api.wallet.call(WalletApiOperation.PreparePayForTemplate, { talerPayTemplateUri: talerTemplateUri });
+      payStatus = await api.wallet.call(
+        WalletApiOperation.PreparePayForTemplate,
+        { talerPayTemplateUri: talerTemplateUri },
+      );
     }
     const balance = await api.wallet.call(WalletApiOperation.GetBalances, {});
     return { payStatus, balance, uri: talerTemplateUri, templateP };
@@ -102,20 +108,28 @@ export function useComponentState({
     const cfg = hook.response.templateP.templateDetails.template_contract;
     const def = hook.response.templateP.templateDetails.editable_defaults;
 
-    const fixedAmount = cfg.amount !== undefined ? Amounts.parseOrThrow(cfg.amount) : undefined;
-    const fixedSummary = cfg.summary !== undefined ? cfg.summary : undefined;
-
-    const defaultAmount = def?.amount !== undefined ? Amounts.parseOrThrow(def.amount) : undefined;
-    const defaultSummary = def?.summary !== undefined ? def.summary : undefined;
-
-    const zero = fixedAmount ? Amounts.zeroOfAmount(fixedAmount) :
-      cfg.currency !== undefined ? Amounts.zeroOfCurrency(cfg.currency) :
-        defaultAmount !== undefined ? Amounts.zeroOfAmount(defaultAmount) :
-          def?.currency !== undefined ? Amounts.zeroOfCurrency(def.currency) :
-            Amounts.zeroOfCurrency(hook.response.templateP.supportedCurrencies[0]);
-
-    const [amount, setAmount] = useState(defaultAmount ?? zero);
-    const [summary, setSummary] = useState(defaultSummary ?? "");
+    const fixedAmount =
+      cfg.amount !== undefined ? Amounts.parseOrThrow(cfg.amount) : undefined;
+    const fixedSummary = cfg.summary;
+
+    const defaultAmount =
+      def?.amount !== undefined ? Amounts.parseOrThrow(def.amount) : undefined;
+    const defaultSummary = def?.summary;
+
+    const zero = fixedAmount
+      ? Amounts.zeroOfAmount(fixedAmount)
+      : cfg.currency !== undefined
+        ? Amounts.zeroOfCurrency(cfg.currency)
+        : defaultAmount !== undefined
+          ? Amounts.zeroOfAmount(defaultAmount)
+          : def?.currency !== undefined
+            ? Amounts.zeroOfCurrency(def.currency)
+            : Amounts.zeroOfCurrency(
+                hook.response.templateP.supportedCurrencies[0],
+              );
+
+    const [amount, setAmount] = useState(defaultAmount ?? fixedAmount ?? zero);
+    const [summary, setSummary] = useState(defaultSummary ?? fixedSummary ?? "");
 
     async function createOrder() {
       try {
@@ -140,41 +154,50 @@ export function useComponentState({
     }
 
     const errors = undefinedIfEmpty({
-      amount: fixedAmount !== undefined ? undefined : amount && Amounts.isZero(amount) ? i18n.str`required` : undefined,
-      summary: fixedSummary !== undefined ? undefined : summary !== undefined && !summary ? i18n.str`required` : undefined,
+      amount:
+        fixedAmount !== undefined
+          ? undefined
+          : amount && Amounts.isZero(amount)
+            ? i18n.str`required`
+            : undefined,
+      summary:
+        fixedSummary !== undefined
+          ? undefined
+          : summary !== undefined && !summary
+            ? i18n.str`required`
+            : undefined,
     });
     return {
       status: "fill-template",
       error: undefined,
       minAge: cfg.minimum_age ?? 0,
-      amount:
-        fixedAmount === undefined
-          ? ({
-            onInput: (a) => {
-              setAmount(a);
-            },
-            value: amount,
-            error: errors?.amount,
-          } as AmountFieldHandler)
-          : undefined,
-      summary:
-        fixedSummary === undefined
-          ? ({
-            onInput: (t) => {
-              setSummary(t);
-            },
-            value: summary,
-            error: errors?.summary,
-          } as TextFieldHandler)
-          : undefined,
+      amount: {
+        onInput:
+          fixedAmount !== undefined
+            ? undefined
+            : (a) => {
+                setAmount(a);
+              },
+        value: amount,
+        error: errors?.amount,
+      } as AmountFieldHandler,
+      summary: {
+        onInput:
+          fixedSummary !== undefined
+            ? undefined
+            : (t) => {
+                setSummary(t);
+              },
+        value: summary,
+        error: errors?.summary,
+      } as TextFieldHandler,
       onCreate: {
         onClick: errors
           ? undefined
           : safely("create order for pay template", createOrder),
       },
     };
-  }
-
+  };
 }
 
 function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
diff --git a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx
index ce53c3cf9..4a1cfe3ac 100644
--- a/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/PaymentTemplate/views.tsx
@@ -33,24 +33,11 @@ export function ReadyView({
   return (
     <Fragment>
       <section style={{ textAlign: "left" }}>
-        {/* <Part
-          title={
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-              }}
-            >
-              <i18n.Translate>Merchant</i18n.Translate>
-            </div>
-          }
-          text={<ExchangeDetails exchange={exchangeUrl} />}
-          kind="neutral"
-          big
-        /> */}
         {!amount ? undefined : (
           <p>
-            <AmountField label={i18n.str`Amount`} handler={amount} />
+            <AmountField label={i18n.str`Amount`} 
+            handler={amount} 
+            />
           </p>
         )}
         {!summary ? undefined : (
@@ -60,6 +47,7 @@ export function ReadyView({
               variant="filled"
               required
               fullWidth
+              disabled={summary.onInput === undefined}
               error={summary.error}
               value={summary.value}
               onChange={summary.onInput}
@@ -67,12 +55,12 @@ export function ReadyView({
           </p>
         )}
       </section>
-      {minAge && (
+      {minAge ? (
         <section>
           <AgeSign size={25}>{minAge}+</AgeSign>
           <i18n.Translate>This purchase is age restricted.</i18n.Translate>
         </section>
-      )}
+      ) : undefined}
       <section>
         <Button onClick={onCreate.onClick} variant="contained" color="success">
           <i18n.Translate>Review order</i18n.Translate>