From b1cea84ca8aa346b3fb0ca479244b21f4fb1a771 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Mon, 7 Aug 2023 08:13:47 -0300
Subject: [PATCH] show next expiration

---
 .../instance/orders/details/DetailPage.tsx    | 31 +++++++++----------
 .../instance/orders/details/Timeline.tsx      | 20 ++++++------
 2 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
index 8dabfbe12..8965d41c9 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx
@@ -21,7 +21,7 @@
 
 import { AmountJson, Amounts } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
-import { format } from "date-fns";
+import { format, formatDistance } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { FormProvider } from "../../../../components/form/FormProvider.js";
@@ -223,6 +223,7 @@ function ClaimedPage({
                     </div>
                   </div>
                 </div>
+
                 <div class="level">
                   <div class="level-left">
                     <div class="level-item">
@@ -419,6 +420,11 @@ function PaidPage({
     }
   }
 
+  const now = new Date()
+  const nextEvent = events.find((e) => {
+    return e.when.getTime() > now.getTime()
+  })
+
   const [value, valueHandler] = useState<Partial<Paid>>(order);
   const { url } = useBackendContext();
   const refundHost = url.replace(/.*:\/\//, ""); // remove protocol part
@@ -504,22 +510,13 @@ function PaidPage({
                           whiteSpace: "nowrap",
                           overflow: "hidden",
                           textOverflow: "ellipsis",
-                          // maxWidth: '100%',
                         }}
                       >
                         <p>
-                          <a
-                            href={order.contract_terms.fulfillment_url}
-                            rel="nofollow"
-                            target="new"
-                          >
-                            {order.contract_terms.fulfillment_url}
-                          </a>
-                        </p>
-                        <p>
-                          {format(
-                            new Date(order.contract_terms.timestamp.t_s * 1000),
-                            "yyyy/MM/dd HH:mm:ss",
+                          <i18n.Translate>Next event in </i18n.Translate> {formatDistance(
+                            nextEvent!.when,
+                            new Date(),
+                            // "yyyy/MM/dd HH:mm:ss",
                           )}
                         </p>
                       </div>
@@ -668,9 +665,9 @@ function UnpaidPage({
                     {order.creation_time.t_s === "never"
                       ? "never"
                       : format(
-                          new Date(order.creation_time.t_s * 1000),
-                          "yyyy-MM-dd HH:mm:ss",
-                        )}
+                        new Date(order.creation_time.t_s * 1000),
+                        "yyyy-MM-dd HH:mm:ss",
+                      )}
                   </p>
                 </div>
               </div>
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx
index d73ba3acc..e68889a92 100644
--- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx
@@ -67,7 +67,7 @@ export function Timeline({ events: e }: Props) {
                   );
                 case "start":
                   return (
-                    <div class="timeline-marker is-icon is-success">
+                    <div class="timeline-marker is-icon">
                       <i class="mdi mdi-flag " />
                     </div>
                   );
@@ -104,7 +104,7 @@ export function Timeline({ events: e }: Props) {
               }
             })()}
             <div class="timeline-content">
-              <p class="heading">{format(e.when, "yyyy/MM/dd HH:mm:ss")}</p>
+              {e.description !== "now" && <p class="heading">{format(e.when, "yyyy/MM/dd HH:mm:ss")}</p>}
               <p>{e.description}</p>
             </div>
           </div>
@@ -117,12 +117,12 @@ export interface Event {
   when: Date;
   description: string;
   type:
-    | "start"
-    | "refund"
-    | "refund-taken"
-    | "wired"
-    | "wired-range"
-    | "deadline"
-    | "delivery"
-    | "now";
+  | "start"
+  | "refund"
+  | "refund-taken"
+  | "wired"
+  | "wired-range"
+  | "deadline"
+  | "delivery"
+  | "now";
 }