[taler-merchant-backoffice] branch master updated: add contract terms initial rendering

[gnunet]

This is an automated email from the git hooks/post-receive script.

sebasjm pushed a commit to branch master
in repository merchant-backoffice.

The following commit(s) were added to refs/heads/master by this push:
     new c70591a  add contract terms initial rendering
c70591a is described below

commit c70591a1b671902bed707330ea00ae210ddfbd17
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Mon May 10 18:58:01 2021 -0300

    add contract terms initial rendering
---
 .../frontend/src/components/form/FormProvider.tsx  | 10 ++++--
 .../frontend/src/components/form/InputDate.tsx     | 10 +++---
 .../paths/instance/orders/details/DetailPage.tsx   | 42 ++++++++++++++++++++--
 packages/frontend/src/scss/main.scss               |  4 +++
 4 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/src/components/form/FormProvider.tsx 
b/packages/frontend/src/components/form/FormProvider.tsx
index eefe589..992ac88 100644
--- a/packages/frontend/src/components/form/FormProvider.tsx
+++ b/packages/frontend/src/components/form/FormProvider.tsx
@@ -26,18 +26,22 @@ export interface Props<T> {
   object?: Partial<T>;
   errors?: FormErrors<T>;
   name?: string;
-  valueHandler: StateUpdater<Partial<T>>;
+  valueHandler: StateUpdater<Partial<T>> | null;
   children: ComponentChildren
 }
 
+function noop() {
+  //do nothing
+}
+
 export function FormProvider<T>({ object = {}, errors = {}, name = '', 
valueHandler, children }: Props<T>): VNode {
   const initial = useMemo(() => object, []);
-  const value = useMemo<FormType<T>>(() => ({ errors, object, initial, 
valueHandler, name, toStr: {}, fromStr: {} }), [errors, object, valueHandler]);
+  const value = useMemo<FormType<T>>(() => ({ errors, object, initial, 
valueHandler: valueHandler ? valueHandler : noop, name, toStr: {}, fromStr: {} 
}), [errors, object, valueHandler]);
 
   return <FormContext.Provider value={value}>
     <form class="field" onSubmit={(e) => {
       e.preventDefault();
-      valueHandler(object);
+      if (valueHandler) valueHandler(object);
     }}>
       {children}
     </form>
diff --git a/packages/frontend/src/components/form/InputDate.tsx 
b/packages/frontend/src/components/form/InputDate.tsx
index b4719ee..3986433 100644
--- a/packages/frontend/src/components/form/InputDate.tsx
+++ b/packages/frontend/src/components/form/InputDate.tsx
@@ -35,7 +35,7 @@ export interface Props<T> extends InputProps<T> {
 export function InputDate<T>({ name, readonly, label, placeholder, help, 
tooltip, expand, withTimestampSupport }: Props<keyof T>): VNode {
   const [opened, setOpened] = useState(false)
   const i18n = useTranslator()
-  
+
   const { error, value, onChange } = useField<T>(name);
 
   let strValue = ''
@@ -64,12 +64,12 @@ export function InputDate<T>({ name, readonly, label, 
placeholder, help, tooltip
           <p class={expand ? "control is-expanded" : "control"}>
             <input class="input" type="text"
               readonly value={strValue}
-              placeholder={i18n`pick a date`}
-              onClick={() => setOpened(true)}
+              placeholder={placeholder}
+              onClick={() => { if (!readonly) setOpened(true) }}
             />
             {help}
           </p>
-          <div class="control" onClick={() => setOpened(true)}>
+          <div class="control" onClick={() => { if (!readonly) setOpened(true) 
}}>
             <a class="button is-static" >
               <span class="icon"><i class="mdi mdi-calendar" /></span>
             </a>
@@ -78,7 +78,7 @@ export function InputDate<T>({ name, readonly, label, 
placeholder, help, tooltip
         {error && <p class="help is-danger">{error}</p>}
       </div>
 
-      <button class="button is-info mr-3" onClick={() => onChange(undefined as 
any)} ><Translate>clear</Translate></button>
+      { !readonly && <button class="button is-info mr-3" onClick={() => 
onChange(undefined as any)} ><Translate>clear</Translate></button> }
       {withTimestampSupport &&
         <button class="button is-info" onClick={() => onChange({ t_ms: 'never' 
} as any)}><Translate>never</Translate></button>
       }
diff --git a/packages/frontend/src/paths/instance/orders/details/DetailPage.tsx 
b/packages/frontend/src/paths/instance/orders/details/DetailPage.tsx
index a34bb27..4e920a7 100644
--- a/packages/frontend/src/paths/instance/orders/details/DetailPage.tsx
+++ b/packages/frontend/src/paths/instance/orders/details/DetailPage.tsx
@@ -25,6 +25,10 @@ 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 { MerchantBackend } from "../../../../declaration";
@@ -34,6 +38,8 @@ import { RefundModal } from "../list/Table";
 import { Event, Timeline } from "./Timeline";
 
 type Entity = MerchantBackend.Orders.MerchantOrderStatusResponse;
+type CT = MerchantBackend.ContractTerms
+
 interface Props {
   onBack: () => void;
   selected: Entity;
@@ -292,16 +298,46 @@ function PaidPage({ id, order, onRefund }: { id: string; 
order: MerchantBackend.
               <div class="column is-8" >
                 <div class="title"><Translate>Payment details</Translate></div>
                 <FormProvider<Paid> object={value} valueHandler={valueHandler} 
>
-                  <Input name="contract_terms.summary" readonly 
inputType="multiline" label={i18n`Summary`} />
-                  <InputCurrency name="contract_terms.amount" readonly 
label={i18n`Amount`} />
-                  {order.refunded && <InputCurrency<Paid> name="refund_amount" 
readonly label={i18n`Refunded amount`} />}
                   <InputCurrency<Paid> name="deposit_total" readonly 
label={i18n`Deposit total`} />
+                  {order.refunded && <InputCurrency<Paid> name="refund_amount" 
readonly label={i18n`Refunded amount`} />}
                   <Input<Paid> name="order_status" readonly label={i18n`Order 
status`} />
+                  {order.order_status_url && <Input<Paid> 
name="order_status_url" readonly label={i18n`Status URL`} />}
                 </FormProvider>
               </div>
             </div>
           </section>
 
+          {value.contract_terms && <section class="section">
+            <div class="columns">
+              <div class="column is-12" >
+                <div class="title"><Translate>Contract Terms</Translate></div>
+                <FormProvider<CT> object={value.contract_terms} 
valueHandler={null} >
+                  <Input<CT> readonly name="summary" label={i18n`Summary`} 
tooltip={i18n`Human-readable description of the whole purchase`} />
+                  <InputCurrency<CT> readonly name="amount" 
label={i18n`Amount`} tooltip={i18n`Total price for the transaction`} />
+                  {value.contract_terms.fulfillment_url &&
+                    <Input<CT> readonly name="fulfillment_url" 
label={i18n`Fulfillment URL`} tooltip={i18n`The URL for this purchase`} />
+                  }
+                  <Input<CT> readonly name="max_fee" label={i18n`Max fee`} 
tooltip={i18n`Maximum total deposit fee accepted by the merchant for this 
contract`} />
+                  <Input<CT> readonly name="max_wire_fee" label={i18n`Max wire 
fee`} tooltip={i18n`Maximum wire fee accepted by the merchant`} />
+                  <Input<CT> readonly name="wire_fee_amortization" 
label={i18n`Wire fee amortization`} tooltip={i18n`Over how many customer 
transactions does the merchant expect to amortize wire fees on average`} />
+                  <InputDate<CT> readonly name="timestamp" label={i18n`Created 
at`} tooltip={i18n`Time when this contract was generated`} />
+                  <InputDate<CT> readonly name="refund_deadline" 
label={i18n`Refund deadline`} tooltip={i18n`After this deadline has passed no 
refunds will be accepted`} />
+                  <InputDate<CT> readonly name="pay_deadline" label={i18n`Pay 
deadline`} tooltip={i18n`After this deadline, the merchant won't accept 
payments for the contract`} />
+                  <InputDate<CT> readonly name="wire_transfer_deadline" 
label={i18n`Wire transfer deadline`} tooltip={i18n`Transfer deadline for the 
exchange`} />
+                  <InputDate<CT> readonly name="delivery_date" 
label={i18n`Delivery date`} tooltip={i18n`Time indicating when the order should 
be delivered`} />
+                  {value.contract_terms.delivery_date &&
+                    <InputGroup name="delivery_location" 
label={i18n`Location`} tooltip={i18n`where the order will be delivered`} >
+                      <InputLocation name="payments.delivery_location" />
+                    </InputGroup>
+                  }
+                  <InputDuration<CT> readonly name="auto_refund" 
label={i18n`Auto refund delay`} tooltip={i18n`Specifies for how long the wallet 
should try to get an automatic refund for the purchase`} />
+                  <Input<CT> readonly name="extra" label={i18n`Extra info`} 
tooltip={i18n`Extra data that is only interpreted by the merchant fronted`} />
+                </FormProvider>
+              </div>
+              <div class="column" />
+            </div>
+          </section>}
+
           {order.contract_terms.products.length ? <section class="section">
             <div class="columns">
               <div class="column is-12" >
diff --git a/packages/frontend/src/scss/main.scss 
b/packages/frontend/src/scss/main.scss
index b39664a..e9b8cb6 100644
--- a/packages/frontend/src/scss/main.scss
+++ b/packages/frontend/src/scss/main.scss
@@ -150,4 +150,8 @@ tr:hover .right-sticky {
 .column.is-half {
   flex: none;
   width: 50%;
+}
+
+input:read-only {
+  cursor: initial;
 }
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.