[taler-merchant-backoffice] 02/08: add duration as human readable

[gnunet]

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

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

commit f787a00dd4937bd22255247a6a01aca3ce4ab882
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Thu Feb 18 09:46:00 2021 -0300

    add duration as human readable
---
 README.md                       |  2 ++
 TODO                            | 14 +++++++++-----
 package.json                    |  1 +
 src/components/modal/index.tsx  | 12 ++++++------
 src/components/yup/YupField.tsx | 19 +++++++++++++++----
 src/i18n/index.ts               |  6 ++++--
 src/routes/instances/Update.tsx | 10 ++++++++--
 yarn.lock                       |  5 +++++
 8 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 24987d7..eb23b20 100644
--- a/README.md
+++ b/README.md
@@ -53,3 +53,5 @@ Use the browser to navigate into `http://localhost:8080`
 
 *   Yup: schema builder for value parsing and validation
 
+*   Date-fns: library for manipulating javascript date
+
diff --git a/TODO b/TODO
index f069951..0a46691 100644
--- a/TODO
+++ b/TODO
@@ -14,11 +14,14 @@ Already done:
  * add the information popup into the fields to help with the description 
(like https://b2b.dab-bank.de/smartbroker/)
  * take default lang from the browser for localization  
  * take the currency from merchant-backend
-
-Next to do: 
- * implement proper error handling
  * change the input PayTO URI to a string field with a + button to add more
  * refactor update page
+ * Login button should be centered
+ * format duration as human readable
+ 
+Next to do: 
+ * implement proper error handling
+ * PATCH payto uri not working as expeced
 
 Queue:
  * replace Yup and type definition with a taler-library for the purpose (first 
wait Florian to refactor wallet core)
@@ -27,6 +30,7 @@ Queue:
  * add copyright headers to every source file
  * add more doc style comments 
  * check the field names in forms dont break spaces
- * add default values to some fields: default_max_deposit_fee, 
default_max_wire_fee, default_wire_fee_amortization, default_pay_delay, 
default_wire_transfer_delay
- * Login button should be centered
  * update spanish lang
+
+Added
+ * save every auth token of different instances
diff --git a/package.json b/package.json
index 266a6c0..9e080c7 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "date-fns": "^2.17.0",
     "preact": "^10.3.1",
     "preact-i18n": "2.3.1-preactx",
     "preact-router": "^3.2.1",
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
index b95eea7..8915edd 100644
--- a/src/components/modal/index.tsx
+++ b/src/components/modal/index.tsx
@@ -11,21 +11,21 @@ interface Props {
 }
 
 export default function ConfirmModal({ active, description, onCancel, 
onConfirm, children, danger }: Props): VNode {
-  return <div class={active ? "modal is-active is-clipped" : "modal"}>
-    <div class="modal-background jb-modal-close" onClick={onCancel} />
+  return <div class={active ? "modal is-active" : "modal"}>
+    <div class="modal-background " onClick={onCancel} />
     <div class="modal-card">
       <header class="modal-card-head">
         <p class="modal-card-title"> <Text id="confirm_modal.title" /> { 
!description ? null : <Text id={`confirm_modal.${description}`} /> }</p>
-        <button class="delete jb-modal-close" aria-label="close" 
onClick={onCancel} />
+        <button class="delete " aria-label="close" onClick={onCancel} />
       </header>
       <section class="modal-card-body">
         {children}
       </section>
       <footer class="modal-card-foot">
-        <button class="button jb-modal-close" onClick={onCancel} ><Text 
id="cancel" /></button>
-        <button class={danger ? "button is-danger jb-modal-close" : "button 
is-info jb-modal-close"} onClick={onConfirm} ><Text id="confirm" /></button>
+        <button class="button " onClick={onCancel} ><Text id="cancel" 
/></button>
+        <button class={danger ? "button is-danger " : "button is-info "} 
onClick={onConfirm} ><Text id="confirm" /></button>
       </footer>
     </div>
-    <button class="modal-close is-large jb-modal-close" aria-label="close" 
onClick={onCancel} />
+    <button class="modal-close is-large " aria-label="close" 
onClick={onCancel} />
   </div>
 }
\ No newline at end of file
diff --git a/src/components/yup/YupField.tsx b/src/components/yup/YupField.tsx
index 2344db0..ac1f41b 100644
--- a/src/components/yup/YupField.tsx
+++ b/src/components/yup/YupField.tsx
@@ -3,6 +3,14 @@ import { Text, useText } from "preact-i18n";
 import { useState } from "preact/hooks";
 import { useBackendConfig } from "../hooks/backend";
 import useBackend from "../hooks/useBackend";
+import { intervalToDuration, formatDuration } from 'date-fns'
+
+function readableDuration(duration: number): string {
+  return formatDuration(intervalToDuration({ start: 0, end: duration }))
+}
+
+// customFormatDuration({ start: 0, end: 10800 * 1000}) // 3 hours
+// customFormatDuration({ start: 0, end: 108000 * 1000}) // 1 day 6 hours
 
 interface Props {
   name: string;
@@ -43,7 +51,7 @@ export default function YupField(name: string, field: string, 
errors: any, objec
     case 'amount': return <YupInputWithAddon {...values} addon={currency} 
onChange={(v: string): void => values.onChange(`${currency}:${v}`)} 
value={values.value?.split(':')[1]} />;
     case 'url': return <YupInputWithAddon {...values} 
addon={`${backend.url}/private/instances/`} />;
     case 'secured': return <YupInputSecured {...values} />;
-    case 'duration': return <YupInput {...values} value={object && 
object[field]?.d_ms} />;
+    case 'duration': return <YupInputWithAddon 
addon={readableDuration(values.value?.d_ms)} atTheEnd {...values} 
value={`${values.value?.d_ms / 1000 || ''}`} onChange={(v: string): void => 
values.onChange({ d_ms: (parseInt(v, 10) * 1000) || undefined } as any)} />;
     default: return <YupInput {...values} />;
 
   }
@@ -155,7 +163,7 @@ function YupInputArray({ name, readonly, value, errors, 
onChange }: Props): VNod
   </div>
 }
 
-function YupInputWithAddon({ name, readonly, value, errors, onChange, addon }: 
Props & { addon: string }): VNode {
+function YupInputWithAddon({ name, readonly, value, errors, onChange, addon, 
atTheEnd }: Props & { addon: string; atTheEnd?: boolean }): VNode {
   const dict = useText({
     placeholder: `fields.instance.${name}.placeholder`,
     tooltip: `fields.instance.${name}.tooltip`,
@@ -173,9 +181,9 @@ function YupInputWithAddon({ name, readonly, value, errors, 
onChange, addon }: P
     <div class="field-body">
       <div class="field">
         <div class="field has-addons">
-          <div class="control">
+          { !atTheEnd && <div class="control">
             <a class="button is-static">{addon}</a>
-          </div>
+          </div> }
           <p class="control is-expanded">
             <input class={errors[name] ? "input is-danger" : "input"} 
type="text"
               placeholder={dict.placeholder} readonly={readonly}
@@ -183,6 +191,9 @@ function YupInputWithAddon({ name, readonly, value, errors, 
onChange, addon }: P
               onChange={(e): void => onChange(e.currentTarget.value)} />
             <Text id={`fields.instance.${name}.help`} />
           </p>
+          { atTheEnd && <div class="control">
+            <a class="button is-static">{addon}</a>
+          </div> }
         </div>
         {errors[name] ? <p class="help is-danger"><Text 
id={`validation.${errors[name].type}`} 
fields={errors[name].params}>{errors[name].message}</Text></p> : null}
       </div>
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 9f9b39c..dd71ee7 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -164,10 +164,12 @@ export default {
           label: 'Max fee amortization',
         },
         default_pay_delay: {
-          label: 'Pay delay'
+          label: 'Pay delay',
+          tooltip: 'value expressed in seconds',
         },
         default_wire_transfer_delay: {
-          label: 'Wire transfer delay'
+          label: 'Wire transfer delay',
+          tooltip: 'value expressed in seconds',
         },
         address: {
           label: 'Address',
diff --git a/src/routes/instances/Update.tsx b/src/routes/instances/Update.tsx
index e30039b..c215cb2 100644
--- a/src/routes/instances/Update.tsx
+++ b/src/routes/instances/Update.tsx
@@ -18,8 +18,14 @@ interface KeyValue {
 }
 
 function convert(from: MerchantBackend.Instances.QueryInstancesResponse): 
MerchantBackend.Instances.InstanceReconfigurationMessage {
-  const payto_uris = from.accounts.map(a => a.payto_uri)  
-  return {default_pay_delay: { d_ms: 1000 }, ...from, payto_uris,  };
+  const { accounts, ...rest} = from
+  const payto_uris = accounts.filter(a => a.active).map(a => a.payto_uri)
+  const defaults = { 
+    default_wire_fee_amortization: 1,
+    default_pay_delay: { d_ms: 1000*60*60 }, //one hour
+    default_wire_transfer_delay: { d_ms: 1000*60*60*2 }, //two hours
+  }
+  return { ...defaults, ...rest, payto_uris };
 }
 
 export default function UpdateModal({ onUpdate, isLoading, selected, goBack }: 
Props): VNode {
diff --git a/yarn.lock b/yarn.lock
index 2e62101..be21a83 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5128,6 +5128,11 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^2.17.0:
+  version "2.17.0"
+  resolved 
"https://registry.yarnpkg.com/date-fns/-/date-fns-2.17.0.tgz#afa55daea539239db0a64e236ce716ef3d681ba1";
+  integrity 
sha512-ZEhqxUtEZeGgg9eHNSOAJ8O9xqSgiJdrL0lzSSfMF54x6KXWJiOH/xntSJ9YomJPrYH/p08t6gWjGWq1SDJlSA==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0:
   version "2.6.9"
   resolved 
"https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f";

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