1 files changed, 54 insertions, 9 deletions

diff --git a/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx b/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
index 08b463a..08942f6 100644
--- a/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
+++ b/packages/frontend/src/paths/instance/reserves/details/DetailPage.tsx
@@ -19,6 +19,7 @@
 * @author Sebastian Javier Marchano (sebasjm)
 */
 
+import { Amounts } from "@gnu-taler/taler-util";
 import { format, isAfter } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
@@ -42,22 +43,55 @@ type CT = MerchantBackend.ContractTerms
 interface Props {
   onBack: () => void;
   selected: Entity;
+  id: string;
 }
 
-export function DetailPage({ selected, onBack }: Props): VNode {
+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} valueHandler={null} >
+    <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 />
-      <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 />
+      <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>
-    {selected.tips && selected.tips.length > 0 ? <Table tips={selected.tips} /> : <div>
-      no tips for this reserve
-    </div>}
+
+    {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">
@@ -71,6 +105,16 @@ export function DetailPage({ selected, onBack }: Props): VNode {
   </div>
 }
 
+function EmptyTable(): VNode {
+  return <div class="content has-text-grey has-text-centered">
+    <p>
+      <span class="icon is-large"><i class="mdi mdi-emoticon-sad mdi-48px" /></span>
+    </p>
+    <p><Translate>No tips has been authorized from this reserve</Translate></p>
+  </div>
+}
+
+
 async function copyToClipboard(text: string) {
   return navigator.clipboard.writeText(text)
 }
@@ -124,4 +168,5 @@ function TipRow({ id, entry }: { id: string, entry: MerchantBackend.Tips.TipStat
     <td>{info.reason}</td>
     <td>{info.expiration.t_ms === "never" ? "never" : format(info.expiration.t_ms, 'yyyy/MM/dd HH:mm:ss')}</td>
   </tr>
-}
\ No newline at end of file
+}
+