split payment and shipping

3 files changed, 38 insertions, 21 deletions

diff --git a/packages/frontend/src/components/form/InputGroup.tsx b/packages/frontend/src/components/form/InputGroup.tsx
index 8d1f512..146b977 100644
--- a/packages/frontend/src/components/form/InputGroup.tsx
+++ b/packages/frontend/src/components/form/InputGroup.tsx
@@ -28,10 +28,11 @@ export interface Props<T> {
   label: ComponentChildren;
   tooltip?: ComponentChildren;
   alternative?: ComponentChildren;
+  initialActive?: boolean;
 }
 
-export function InputGroup<T>({ name, label, children, tooltip, alternative }: Props<keyof T>): VNode {
-  const [active, setActive] = useState(false);
+export function InputGroup<T>({ name, label, children, tooltip, alternative, initialActive }: Props<keyof T>): VNode {
+  const [active, setActive] = useState(initialActive);
   const group = useGroupField<T>(name);
 
   return <div class="card">
diff --git a/packages/frontend/src/paths/instance/orders/create/Create.stories.tsx b/packages/frontend/src/paths/instance/orders/create/Create.stories.tsx
index a1d37e2..a3a2987 100644
--- a/packages/frontend/src/paths/instance/orders/create/Create.stories.tsx
+++ b/packages/frontend/src/paths/instance/orders/create/Create.stories.tsx
@@ -43,7 +43,7 @@ export const Example = createExample(TestedComponent, {
     default_max_deposit_fee: '',
     default_max_wire_fee: '',
     default_pay_delay: {
-      d_ms: new Date().getTime()
+      d_ms: 1000*60*60
     },
     default_wire_fee_amortization: 1
   },
diff --git a/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx b/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx
index f6550aa..87c9cc5 100644
--- a/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx
+++ b/packages/frontend/src/paths/instance/orders/create/CreatePage.tsx
@@ -19,7 +19,7 @@
 * @author Sebastian Javier Marchano (sebasjm)
 */
 
-import { add, isBefore, isFuture } from "date-fns";
+import { add, isAfter, isBefore, isFuture } from "date-fns";
 import { Amounts } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
@@ -85,22 +85,25 @@ interface Pricing {
   order_price: string;
   summary: string;
 }
+interface Shipping {
+  delivery_date?: Date;
+  delivery_location?: MerchantBackend.Location;
+  fullfilment_url?: string;
+}
 interface Payments {
   refund_deadline?: Date;
   pay_deadline?: Date;
   auto_refund_deadline?: Date;
-  delivery_date?: Date;
-  delivery_location?: MerchantBackend.Location;
   max_fee?: string;
   max_wire_fee?: string;
   wire_fee_amortization?: number;
-  fullfilment_url?: string;
 }
 interface Entity {
   inventoryProducts: ProductMap,
   products: MerchantBackend.Product[],
   pricing: Partial<Pricing>;
   payments: Partial<Payments>;
+  shipping: Partial<Shipping>;
   extra: string;
 }
 
@@ -146,10 +149,17 @@ export function CreatePage({ onCreate, onBack, instanceConfig, instanceInventory
         !isFuture(value.payments.pay_deadline) ? i18n`should be in the future` : undefined
       ),
       auto_refund_deadline: !value.payments?.auto_refund_deadline ? undefined : (
-        !isFuture(value.payments.auto_refund_deadline) ? i18n`should be in the future` : undefined
+        !isFuture(value.payments.auto_refund_deadline) ? i18n`should be in the future` : (
+          !value.payments?.refund_deadline ? i18n`should have a refund deadline` : (
+            !isAfter(value.payments.refund_deadline, value.payments.auto_refund_deadline) ? i18n`auto refund cannot be after refund deadline`
+              : undefined
+          )
+        )
       ),
-      delivery_date: !value.payments?.delivery_date ? undefined : (
-        !isFuture(value.payments.delivery_date) ? i18n`should be in the future` : undefined
+    }),
+    shipping: undefinedIfEmpty({
+      delivery_date: !value.shipping?.delivery_date ? undefined : (
+        !isFuture(value.shipping.delivery_date) ? i18n`should be in the future` : undefined
       ),
     }),
   }
@@ -158,6 +168,7 @@ export function CreatePage({ onCreate, onBack, instanceConfig, instanceInventory
   const submit = (): void => {
     const order = schema.cast(value)
     if (!value.payments) return;
+    if (!value.shipping) return;
 
     const request: MerchantBackend.Orders.PostOrderRequest = {
       order: {
@@ -170,9 +181,10 @@ export function CreatePage({ onCreate, onBack, instanceConfig, instanceInventory
         refund_deadline: value.payments.refund_deadline ? { t_ms: Math.floor(value.payments.refund_deadline.getTime() / 1000) * 1000 } : undefined,
         max_fee: value.payments.max_fee,
         max_wire_fee: value.payments.max_wire_fee,
-        delivery_date: value.payments.delivery_date ? { t_ms: value.payments.delivery_date.getTime() } : undefined,
-        delivery_location: value.payments.delivery_location,
-        fulfillment_url: value.payments.fullfilment_url,
+
+        delivery_date: value.shipping.delivery_date ? { t_ms: value.shipping.delivery_date.getTime() } : undefined,
+        delivery_location: value.shipping.delivery_location,
+        fulfillment_url: value.shipping.fullfilment_url,
       },
       inventory_products: inventoryList.map(p => ({
         product_id: p.product.id,
@@ -320,20 +332,24 @@ export function CreatePage({ onCreate, onBack, instanceConfig, instanceInventory
 
             <Input name="pricing.summary" inputType="multiline" label={i18n`Summary`} tooltip={i18n`Title of the order to be shown to the customer`} />
 
+            <InputGroup name="shipping" label={i18n`Shipping and Fulfillment`} initialActive >
+              <InputDate name="shipping.delivery_date" label={i18n`Delivery date`} tooltip={i18n`Deadline for physical delivery assured by the merchant.`} />
+              {value.shipping?.delivery_date &&
+                <InputGroup name="shipping.delivery_location" label={i18n`Location`} tooltip={i18n`address where the products will be delivered`} >
+                  <InputLocation name="shipping.delivery_location" />
+                </InputGroup>
+              }
+              <Input name="shipping.fullfilment_url" label={i18n`Fulfillment URL`} tooltip={i18n`URL to which the user will be redirected after successful payment.`} />
+            </InputGroup>
+
             <InputGroup name="payments" label={i18n`Taler payment options`} tooltip={i18n`Override default Taler payment settings for this order`}>
-              <InputDate name="payments.auto_refund_deadline" label={i18n`Auto-refund deadline`} tooltip={i18n`Time until which the wallet will automatically check for refunds without user interaction.`} />
-              <InputDate name="payments.refund_deadline" label={i18n`Refund deadline`} tooltip={i18n`Time until which the order can be refunded by the merchant.`} />
               <InputDate name="payments.pay_deadline" label={i18n`Payment deadline`} tooltip={i18n`Deadline for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline.`} />
-
-              <InputDate name="payments.delivery_date" label={i18n`Delivery date`} tooltip={i18n`Deadline for physical delivery assured by the merchant.`} />
-              {value.payments?.delivery_date && <InputGroup name="payments.delivery_location" label={i18n`Location`} tooltip={i18n`address where the products will be delivered`} >
-                <InputLocation name="payments.delivery_location" />
-              </InputGroup>}
+              <InputDate name="payments.refund_deadline" label={i18n`Refund deadline`} tooltip={i18n`Time until which the order can be refunded by the merchant.`} />
+              <InputDate name="payments.auto_refund_deadline" label={i18n`Auto-refund deadline`} tooltip={i18n`Time until which the wallet will automatically check for refunds without user interaction.`} />
 
               <InputCurrency name="payments.max_fee" label={i18n`Maximum deposit fee`} tooltip={i18n`Maximum deposit fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`} />
               <InputCurrency name="payments.max_wire_fee" label={i18n`Maximum wire fee`} tooltip={i18n`Maximum aggregate wire fees the merchant is willing to cover for this order. Wire fees exceeding this amount are to be covered by the customers.`} />
               <Input name="payments.wire_fee_amortization" label={i18n`Wire fee amortization`} tooltip={i18n`Factor by which wire fees exceeding the above threshold are divided to determine the share of excess wire fees to be paid explicitly by the consumer.`} />
-              <Input name="payments.fullfilment_url" label={i18n`Fulfillment URL`} tooltip={i18n`URL to which the user will be redirected after successful payment.`} />
             </InputGroup>
 
             <InputGroup name="extra" label={i18n`Additional information`} tooltip={i18n`Custom information to be included in the contract for this order.`}>