Add hx-post request to send Sunrise form and handle data transformati…

…on (#252)

pkg/web/static/js/sunrise.js

@@ -0,0 +1,45 @@
+document.body.addEventListener('htmx:configRequest', (e) => {
+  if (e.detail.path === '/v1/sunrise/send' && e.detail.verb === 'post') {
+    const params = e.detail.parameters;
+
+    let data = {
+      email: params.email,
+      counterparty: params.counterparty,
+      originator: {
+        identification: {},
+      },
+      beneficiary: {
+      },
+      transfer: {
+        amount: parseFloat(params.amount),
+        network: params.network,
+        asset_type: params.asset_type,
+        transaction_id: params.transaction_id,
+        tag: params.tag,
+      },
+    }
+
+    for (const key in params) {
+      if (key.startsWith('orig_')) {
+        data.originator[key.replace('orig_', '')] = params[key];
+      };
+
+      if (key.startsWith('og_id_')) {
+        data.originator.identification[key.replace('og_id_', '')] = params[key];
+      }
+
+      if (key.startsWith('benf_')) {
+        data.beneficiary[key.replace('benf_', '')] = params[key];
+      };
+    };
+
+    // Modify outgoing request data.
+    e.detail.parameters = data;
+  }
+});
+
+document.body.addEventListener('htmx:afterRequest', (e) => {
+  if (e.detail.requestConfig.path === '/v1/sunrise/send' && e.detail.requestConfig.verb === 'post' && e.detail.successful) {
+    setSuccessToast('Success! A new customer account has been created.');
+  }
+});

pkg/web/templates/components/sunrise_beneficiary.html

@@ -12,15 +12,9 @@ <h2 class="my-4 font-bold">BENEFICIARY INFORMATION</h2>
       <input type="text" id="benf_last_name" name="benf_last_name" placeholder="Enter beneficiary's last or family name" class="input-style" />
     </div>
   </div>
-  <div class="grid gap-6 my-4 md:grid-cols-2">
-    <div>
-      <label for="benf_crypto_address" class="label-style">Crypto Address</label>
-      <input type="text" id="benf_crypto_address" name="benf_crypto_address" placeholder="Enter beneficiary's crypto address" class="input-style" />
-    </div>
-    <div>
-      <label for="benf_countries" class="label-style">Country</label>
-      <select id="benf_countries" name="benf_country"></select>
-    </div>
+  <div class="my-4">
+    <label for="benf_countries" class="label-style">Country</label>
+    <select id="benf_countries" name="benf_country"></select>
   </div>
 </section>
 

pkg/web/templates/partials/sunrise/transaction_sent.html

@@ -0,0 +1 @@
+<div>Sunrise message has been sent!</div>

pkg/web/templates/send_message.html

@@ -1,7 +1,7 @@
 {{ template "base" . }}
 {{ define "content" }}
 
-<section class="mx-8 py-9">
+<section id="sunrise" class="mx-8 py-9">
    <div class="flex justify-around items-center my-4 md:m-8">
     <a href="/transactions" class="btn btn-sm btn-circle btn-ghost text-xl">
       <i class="fa-solid fa-arrow-left"></i>
@@ -15,26 +15,38 @@ <h1 class="mx-auto font-semibold text-2xl md:text-3xl text-center text-balance">
       You will need a valid email address for your counterparty. If your counterparty is in the TRISA or TRP networks,
       <a href="/send-envelope" class="underline text-blue-700">send a secure envelope</a> instead.
     </p>
-    <form id="sunrise-msg-form" hx-post="" hx-target="#preview_msg" hx-indicator="#loader" hx-ext="json-enc" method="post">
+    <form id="sunrise-msg-form" hx-post="/v1/sunrise/send" hx-target="#sunrise" hx-swap="outerHTML" hx-indicator="#loader" hx-ext="json-enc" method="post">
 
-      <section class="py-2 border-t border-t-black">
-        <div class="my-5">
-          <label for="vasp_name" class="label-style">Counterparty VASP Entity Name</label>
-          <input type="text" id="vasp_name" name="vasp_name" placeholder="Enter counterparty VASP name" class="input-style" />
+      <div class="py-2 border-t border-t-black">
+        <div class="grid md:grid-cols-2 gap-6 my-5">
+          <div>
+            <label for="counterparty" class="label-style">Counterparty VASP Entity Name</label>
+            <input type="text" id="counterparty" name="counterparty" placeholder="Enter counterparty VASP name" class="input-style" />
+          </div>
+          <div>
+            <label for="email" class="label-style">Email Address</label>
+            <input type="text" id="email" name="email" placeholder="Enter counterparty VASP email address" class="input-style" />
+          </div>
         </div>
-        <div class="my-5">
-          <label for="email" class="label-style">Email Address</label>
-          <input type="text" id="email" name="email" placeholder="Enter counterparty VASP email address" class="input-style" />
+        <div class="grid md:grid-cols-2 gap-6 my-5">
+          <div>
+            <label for="orig_crypto_address" class="label-style">Originator Crypto Address</label>
+            <input type="text" id="orig_crypto_address" name="orig_crypto_address" placeholder="Enter originator's crypto address" class="input-style" />
+          </div>
+          <div>
+            <label for="benf_crypto_address" class="label-style">Beneficiary Crypto Address</label>
+            <input type="text" id="benf_crypto_address" name="benf_crypto_address" placeholder="Enter beneficiary's crypto address" class="input-style" />
+          </div>
         </div>
-      </section>
+      </div>
 
       {{ template "originator_information" . }}
 
       {{ template "sunrise_beneficiary" . }}
 
       {{ template "virtual_asset" . }}
 
-      <button type="button" onclick="preview_msg.showModal()" id="preview-msg-bttn" class="mx-auto block btn bg-primary text-white font-semibold hover:bg-primary/90">Preview Message</button>
+      <button id="preview-msg-bttn" class="mx-auto block btn bg-primary text-white font-semibold hover:bg-primary/90">Send Message</button>
     </form>
   </section>
 </section>
@@ -43,8 +55,11 @@ <h1 class="mx-auto font-semibold text-2xl md:text-3xl text-center text-balance">
   <span id="loader" class="htmx-indicator loading loading-spinner loading-lg"></span>
  </dialog>
 
+ <span id="loader" class="htmx-indicator loading loading-spinner loading-lg"></span>
+
 {{ end }}
 
 {{ define "appcode" }}
 <script type="module" src="/static/js/msgSelElements.js"></script>
+<script type="module" src="/static/js/sunrise.js"></script>
 {{ end }}