From c9c04a14be4bf9a70cd1730d2e8b5aa8bd38f032 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Thu, 10 Jun 2021 23:51:14 -0300
Subject: lots of fixes in same commit

added tooltips in buttons and fix tooltips styles in corner cases
added a start for required fields
token -> access token
fixed query product list
refactor instance update/create form
some more comments from christian email
---
 .../paths/instance/reserves/details/DetailPage.tsx | 107 ++++++++++-----------
 1 file changed, 51 insertions(+), 56 deletions(-)

(limited to 'packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx')

diff --git a/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx b/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
index 08942f6..06fbf20 100644
--- a/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
+++ b/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
@@ -20,22 +20,16 @@
 */
 
 import { Amounts } from "@gnu-taler/taler-util";
-import { format, isAfter } from "date-fns";
+import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
-import { useState } from "preact/hooks";
 import { FormProvider } from "../../../../components/form/FormProvider";
 import { Input } from "../../../../components/form/Input";
 import { InputCurrency } from "../../../../components/form/InputCurrency";
 import { InputDate } from "../../../../components/form/InputDate";
-import { InputDuration } from "../../../../components/form/InputDuration";
-import { InputGroup } from "../../../../components/form/InputGroup";
-import { InputLocation } from "../../../../components/form/InputLocation";
-import { NotificationCard } from "../../../../components/menu";
-import { ProductList } from "../../../../components/product/ProductList";
+import { TextField } from "../../../../components/form/TextField";
 import { MerchantBackend } from "../../../../declaration";
 import { useTipDetails } from "../../../../hooks/tips";
 import { Translate, useTranslator } from "../../../../i18n";
-import { mergeRefunds } from "../../../../utils/amount";
 
 type Entity = MerchantBackend.Tips.ReserveDetail;
 type CT = MerchantBackend.ContractTerms
@@ -49,59 +43,60 @@ interface Props {
 export function DetailPage({ id, selected, onBack }: Props): VNode {
   const i18n = useTranslator()
   const didExchangeAckTransfer = Amounts.isNonZero(Amounts.parseOrThrow(selected.exchange_initial_amount))
-  return <div class="section main-section">
-    <FormProvider object={{ ...selected, id }} valueHandler={null} >
-      <InputDate<Entity> name="creation_time" label={i18n`Created at`} readonly />
-      <InputDate<Entity> name="expiration_time" label={i18n`Valid until`} readonly />
-      <InputCurrency<Entity> name="merchant_initial_amount" label={i18n`Created balance`} readonly />
-      <Input<Entity> name="exchange_url" label={i18n`Exchange URL`} readonly />
-
-      {didExchangeAckTransfer && <Fragment>
-        <InputCurrency<Entity> name="exchange_initial_amount" label={i18n`Exchange balance`} readonly />
-        <InputCurrency<Entity> name="pickup_amount" label={i18n`Picked up`} readonly />
-        <InputCurrency<Entity> name="committed_amount" label={i18n`Committed`} readonly />
-      </Fragment>
-      }
-      <Input<Entity> name="payto_uri" label={i18n`Account address`} readonly />
-      <Input name="id" label={i18n`Subject`} readonly />
-    </FormProvider>
-
-    {didExchangeAckTransfer ? <Fragment>
-      <div class="card has-table">
-        <header class="card-header">
-          <p class="card-header-title">
-            <span class="icon"><i class="mdi mdi-cash-register" /></span>
-            <Translate>Tips</Translate>
-          </p>
-
-        </header>
-        <div class="card-content">
-          <div class="b-table has-pagination">
-            <div class="table-wrapper has-mobile-cards">
-              {selected.tips && selected.tips.length > 0 ? <Table tips={selected.tips} /> : <EmptyTable />}
-            </div></div>
-        </div>
-      </div>
-    </Fragment> : <Fragment>
-      <p class="is-size-5"><Translate>Now you should transfer to the exchange into the account address indicated above and the transaction must carry the subject message.</Translate></p>
-
-      <p class="is-size-5"><Translate>For example :</Translate></p>
-      <pre>
-        {selected.payto_uri}?message={id}&amount={selected.merchant_initial_amount}
-      </pre>
-    </Fragment>
-    }
-
-    <div class="columns">
-      <div class="column" />
-      <div class="column is-two-thirds">
+  return <div class="columns">
+    <div class="column" />
+    <div class="column is-four-fifths">
+      <div class="section main-section">
+        <FormProvider object={{ ...selected, id }} valueHandler={null} >
+          <InputDate<Entity> name="creation_time" label={i18n`Created at`} readonly />
+          <InputDate<Entity> name="expiration_time" label={i18n`Valid until`} readonly />
+          <InputCurrency<Entity> name="merchant_initial_amount" label={i18n`Created balance`} readonly />
+          <TextField<Entity> name="exchange_url" label={i18n`Exchange URL`} readonly >
+            <a target="_blank" href={selected.exchange_url}>{selected.exchange_url}</a>
+          </TextField>
+
+          {didExchangeAckTransfer && <Fragment>
+            <InputCurrency<Entity> name="exchange_initial_amount" label={i18n`Exchange balance`} readonly />
+            <InputCurrency<Entity> name="pickup_amount" label={i18n`Picked up`} readonly />
+            <InputCurrency<Entity> name="committed_amount" label={i18n`Committed`} readonly />
+          </Fragment>
+          }
+          <Input<Entity> name="payto_uri" label={i18n`Account address`} readonly />
+          <Input name="id" label={i18n`Subject`} readonly />
+        </FormProvider>
+
+        {didExchangeAckTransfer ? <Fragment>
+          <div class="card has-table">
+            <header class="card-header">
+              <p class="card-header-title">
+                <span class="icon"><i class="mdi mdi-cash-register" /></span>
+                <Translate>Tips</Translate>
+              </p>
+
+            </header>
+            <div class="card-content">
+              <div class="b-table has-pagination">
+                <div class="table-wrapper has-mobile-cards">
+                  {selected.tips && selected.tips.length > 0 ? <Table tips={selected.tips} /> : <EmptyTable />}
+                </div></div>
+            </div>
+          </div>
+        </Fragment> : <Fragment>
+          <p class="is-size-5"><Translate>Now you should transfer to the exchange into the account address indicated above and the transaction must carry the subject message.</Translate></p>
+          <p class="is-size-5"><Translate>For example :</Translate></p>
+          <pre>
+            {selected.payto_uri}?message={id}&amount={selected.merchant_initial_amount}
+          </pre>
+        </Fragment>
+        }
+
         <div class="buttons is-right mt-5">
           <button class="button" onClick={onBack}><Translate>Back</Translate></button>
         </div>
+
       </div>
-      <div class="column" />
     </div>
-
+    <div class="column" />
   </div>
 }
 
-- 
cgit v1.2.3