feat: add basic user detail step

blocks/loan-application-form/basic-user-details-step.js

@@ -0,0 +1,62 @@
+/* eslint-disable object-curly-newline */
+/* eslint-disable import/no-cycle */
+/* eslint-disable import/no-unresolved */
+import { Component } from 'preact';
+import { html } from 'htm/preact';
+import { hnodeAs } from './loan-application-form.js';
+
+export default class BasicUserDetailsStep extends Component {
+  static parse(block) {
+    const [
+      introWrapper,
+      guidanceWrapper,
+      disclaimerWrapper,
+      submitButtonWrapper,
+    ] = [...block.children].map((row) => row.firstElementChild);
+    const intro = introWrapper.children;
+    const guidance = guidanceWrapper.children;
+    const disclaimer = disclaimerWrapper.children;
+    const submitButton = submitButtonWrapper.firstElementChild;
+    return { intro, guidance, disclaimer, submitButton };
+  }
+
+  static defaults = {
+    into: html`<p>Introduction</p>`,
+    guidance: html`<p>guidance</p>`,
+    disclaimer: html`<p>Disclaimer</p>`,
+    submitButton: html`<button>Submit</button>`,
+  };
+
+  render() {
+    const {
+      intro,
+      guidance,
+      disclaimer,
+      submitButton,
+    } = this.props.config;
+
+    return html`
+      <form>
+        <div class="basic-user-details-step-description">
+          ${intro}
+        </div>
+        <div class="basic-user-details-step-fields">
+          <input type="text" name="fullname" placeholder="Full Name" />
+          <input type="text" name="email" placeholder="Email" />
+          <input type="text" name="date-of-birth" placeholder="DOB" />
+          <input type="text" name="city" placeholder="Search City" />
+          <button type="submit">
+            ${hnodeAs(submitButton, 'span')}
+          </button>
+        </div>
+        <div class="basic-user-details-step-guidance">
+          ${guidance}
+        </div>
+        <div class="basic-user-details-step-disclaimer">
+          <input type="checkbox" name="disclaimer" value="accepted" />
+          ${disclaimer}
+        </div>
+      </form>
+    `;
+  }
+}

blocks/loan-application-form/loan-application-form.js

@@ -10,9 +10,10 @@ import {
 } from 'preact';
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { html } from 'htm/preact';
+import { wrapTextNodes } from '../../scripts/aem.js';
 import RequestOtpStep from './request-otp-step.js';
 import RestorePreviousJourenyStep from './restore-previous-journey-step.js';
-import { wrapTextNodes } from '../../scripts/aem.js';
+import BasicUserDetailsStep from './basic-user-details-step.js';
 
 export function hnodeAs(node, tagName, props = {}) {
   const copy = cloneElement(node, props);
@@ -50,6 +51,7 @@ export function hnode(nodes) {
 const routes = {
   'request-otp-step': RequestOtpStep,
   'restore-previous-journey-step': RestorePreviousJourenyStep,
+  'basic-user-details-step': BasicUserDetailsStep,
 };
 
 export const LoanApplicationFormContext = createContext();
@@ -97,7 +99,7 @@ export function ConfiguredFormStep({ props, children: renderer }) {
     // the state accordingly
     ref.current.addEventListener('apply-update', ({ detail: update }) => {
       const parsedUpdate = new DOMParser().parseFromString(update, 'text/html');
-      const configBlock = parsedUpdate.querySelector('.request-otp-step');
+      const configBlock = parsedUpdate.querySelector(`.${name}`);
       wrapTextNodes(configBlock);
       const { attrs: newAttrs, config: newConfig } = parseConfig(configBlock, routes[name]);
       setAppliedAttrs(newAttrs);

blocks/loan-application-form/request-otp-step.js

@@ -45,7 +45,7 @@ export default class RequestOtpStep extends Component {
             <input type="radio" id="dealer-journey" name="journey-type" value="dealer" />
             ${hnodeAs(dealerOption, 'label', { for: 'dealer-journey' })}
           </div>
-        </fieldset>
+        </div>
         <div class="request-otp-step-description">
           ${description}
         </div>
@@ -54,7 +54,7 @@ export default class RequestOtpStep extends Component {
           <button type="submit">
             ${hnodeAs(button, 'span')}
           </button>
-        </fieldset>
+        </div>
       </form>
     `;
   }

blocks/loan-application-form/restore-previous-journey-step.js

@@ -30,15 +30,15 @@ export default class RestorePreviousJourenyStep extends Component {
       <form>
         <div class="restore-previous-journey-step-description">
           ${description}
-        </fieldset>
+        </div>
         <div class="restore-previous-journey-step-buttons">
           <button type="submit" value="yes">
             ${hnodeAs(yesButton, 'span')}
           </button>
           <button type="submit" value="no">
             ${hnodeAs(noButton, 'span')}
           </button>
-        </fieldset>
+        </div>
       </form>
     `;
   }