commit c70591a1b671902bed707330ea00ae210ddfbd17
parent 3ca68f623824f193965c182b21c1eff16379a4b4
Author: Sebastian <sebasjm@gmail.com>
Date: Mon, 10 May 2021 18:58:01 -0300
add contract terms initial rendering
Diffstat:
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
@@ -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
@@ -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
@@ -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
@@ -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
