@justifi/webcomponents 4.4.0 → 4.5.0

package/dist/collection/components/business-form/business-form.js

@@ -1,6 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { FormController } from "../form/form";
-import BusinessFormSchema from "./business-form-schema";
+import businessFormSchema from "./business-form-schema";
+import { Api } from "../../api";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -10,20 +11,91 @@ export class BusinessForm {
   constructor() {
     this.authToken = undefined;
     this.businessId = undefined;
-    this.formController = new FormController(BusinessFormSchema);
+    this.isLoading = false;
+    this.sendData = this.sendData.bind(this);
+    this.fetchData = this.fetchData.bind(this);
   }
-  sendData() {
-    console.log('sendData');
+  componentWillLoad() {
+    if (!this.authToken) {
+      console.warn('Warning: Missing auth-token. The form will not be functional without it.');
+    }
+    this.formController = new FormController(businessFormSchema);
+    this.api = Api(this.authToken, process.env.ENTITIES_ENDPOINT);
+    if (this.businessId) {
+      this.fetchData(this.businessId);
+    }
+    else {
+      this.formController.setInitialValues({
+        legal_address: {
+          country: 'US',
+        },
+      });
+    }
+  }
+  // These props should not be sent to the server
+  parseForPatching(data) {
+    delete data.id;
+    delete data.documents;
+    delete data.bank_accounts;
+    delete data.product_categories;
+    delete data.created_at;
+    delete data.updated_at;
+    delete data.legal_address.id;
+    delete data.legal_address.created_at;
+    delete data.legal_address.updated_at;
+    delete data.representative.id;
+    delete data.representative.documents;
+    delete data.representative.created_at;
+    delete data.representative.updated_at;
+    delete data.representative.address.id;
+    delete data.representative.address.created_at;
+    delete data.representative.address.updated_at;
+    delete data.owners;
+    return data;
+  }
+  async sendData() {
+    this.isLoading = true;
+    try {
+      const data = this.formController.values.getValue();
+      // Conditionally making either POST or PATCH request
+      if (this.businessId) {
+        const payload = this.parseForPatching(data);
+        const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload));
+        console.log('Server response from PATCH:', response);
+      }
+      else {
+        const response = await this.api.post('entities/business', JSON.stringify(data));
+        console.log('Server response from POST:', response);
+      }
+    }
+    catch (error) {
+      console.error('Error sending data:', error);
+    }
+    finally {
+      this.isLoading = false;
+    }
+  }
+  async fetchData(businessId) {
+    this.isLoading = true;
+    try {
+      const response = await this.api.get(`entities/business/${businessId}`);
+      this.formController.setInitialValues(response.data);
+    }
+    catch (error) {
+      console.error('Error fetching data:', error);
+    }
+    finally {
+      this.isLoading = false;
+    }
   }
   validateAndSubmit(event) {
     event.preventDefault();
     this.formController.validateAndSubmit(this.sendData);
   }
   render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), h("form", { onSubmit: (event) => this.validateAndSubmit(event), class: "container" }, h("div", { class: "row gy-6" }, h("div", { class: "col-12" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12" }, h("justifi-business-owners", { formController: this.formController })), h("div", { class: "col-12" }, h("button", { type: "submit", class: "btn btn-primary" }, "Submit"))))));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), h("form", { onSubmit: event => this.validateAndSubmit(event) }, h("div", { class: "row gy-6 gap-3" }, h("div", { class: "col-12" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12" }, h("justifi-legal-address-form", { formController: this.formController, legend: "Legal Address" })), h("div", { class: "col-12" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12" }, h("justifi-business-owners", { isEditing: !!this.businessId, formController: this.formController })), h("div", { class: "col-12 d-flex flex-row-reverse" }, h("button", { type: "submit", class: "btn btn-primary jfi-submit-button", disabled: !this.authToken || this.isLoading }, this.isLoading ? 'Loading...' : 'Submit'))))));
   }
   static get is() { return "justifi-business-form"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
       "$": ["business-form.scss"]
@@ -72,5 +144,10 @@ export class BusinessForm {
       }
     };
   }
+  static get states() {
+    return {
+      "isLoading": {}
+    };
+  }
 }
 //# sourceMappingURL=business-form.js.map

package/dist/collection/components/business-form/business-form.js.map

@@ -1 +1 @@
-{"version":3,"file":"business-form.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,kBAAkB,MAAM,wBAAwB,CAAC;AAExD;;;;GAIG;AAMH,MAAM,OAAO,YAAY;EAKvB;;;IACE,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;GAC9D;EAED,QAAQ;IACN,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;EACzB,CAAC;EAED,iBAAiB,CAAC,KAAU;IAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;EACtD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,qCAA6B;MAC7B,YAAM,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE,KAAK,EAAC,WAAW;QACzE,WAAK,KAAK,EAAC,UAAU;UACnB,WAAK,KAAK,EAAC,QAAQ;YACjB,qCAA+B,cAAc,EAAE,IAAI,CAAC,cAAc,GAAI,CAClE;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,uCAAiC,cAAc,EAAE,IAAI,CAAC,cAAc,GAAI,CACpE;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,+BAAyB,cAAc,EAAE,IAAI,CAAC,cAAc,GAAI,CAC5D;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,iBAAiB,aAAgB,CACzD,CACF,CACD,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { FormController } from '../form/form';\nimport BusinessFormSchema from './business-form-schema';\n\n/**\n * @exportedPart label: Label for inputs\n * @exportedPart input: The input fields\n * @exportedPart input-invalid: Invalid state for inputfs\n */\n@Component({\n  tag: 'justifi-business-form',\n  styleUrl: 'business-form.scss',\n  shadow: true,\n})\nexport class BusinessForm {\n  @Prop() authToken: string;\n  @Prop() businessId?: string;\n  private formController: FormController;\n\n  constructor() {\n    this.formController = new FormController(BusinessFormSchema);\n  }\n\n  sendData() {\n    console.log('sendData')\n  }\n\n  validateAndSubmit(event: any) {\n    event.preventDefault();\n    this.formController.validateAndSubmit(this.sendData)\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <h1>Business Information</h1>\n        <form onSubmit={(event) => this.validateAndSubmit(event)} class=\"container\">\n          <div class=\"row gy-6\">\n            <div class=\"col-12\">\n              <justifi-business-generic-info formController={this.formController} />\n            </div>\n            <div class=\"col-12\">\n              <justifi-business-representative formController={this.formController} />\n            </div>\n            <div class=\"col-12\">\n              <justifi-business-owners formController={this.formController} />\n            </div>\n            <div class=\"col-12\">\n              <button type=\"submit\" class=\"btn btn-primary\">Submit</button>\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"business-form.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,kBAAkB,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAEhC;;;;GAIG;AAKH,MAAM,OAAO,YAAY;EAQvB;;;qBAL8B,KAAK;IAMjC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC5C;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,OAAO,CAAC,IAAI,CACV,0EAA0E,CAC3E,CAAC;KACH;IAED,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,kBAAkB,CAAC,CAAC;IAE7D,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAE9D,IAAI,IAAI,CAAC,UAAU,EAAE;MACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KACjC;SAAM;MACL,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC;QACnC,aAAa,EAAE;UACb,OAAO,EAAE,IAAI;SACd;OACF,CAAC,CAAC;KACJ;EACH,CAAC;EAED,+CAA+C;EACvC,gBAAgB,CAAC,IAAI;IAC3B,OAAO,IAAI,CAAC,EAAE,CAAC;IACf,OAAO,IAAI,CAAC,SAAS,CAAC;IACtB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC1B,OAAO,IAAI,CAAC,kBAAkB,CAAC;IAC/B,OAAO,IAAI,CAAC,UAAU,CAAC;IACvB,OAAO,IAAI,CAAC,UAAU,CAAC;IACvB,OAAO,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;IAC7B,OAAO,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC;IACrC,OAAO,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC;IACrC,OAAO,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC;IAC9B,OAAO,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC;IACrC,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;IACtC,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;IACtC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;IACtC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC;IAC9C,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,UAAU,CAAC;IAC9C,OAAO,IAAI,CAAC,MAAM,CAAC;IAEnB,OAAO,IAAI,CAAC;EACd,CAAC;EAEO,KAAK,CAAC,QAAQ;IACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI;MACF,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;MAEnD,oDAAoD;MACpD,IAAI,IAAI,CAAC,UAAU,EAAE;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC5C,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC,KAAK,CACnC,qBAAqB,IAAI,CAAC,UAAU,EAAE,EACtC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CACxB,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,6BAA6B,EAAE,QAAQ,CAAC,CAAC;OACtD;WAAM;QACL,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC,IAAI,CAClC,mBAAmB,EACnB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CACrB,CAAC;QACF,OAAO,CAAC,GAAG,CAAC,4BAA4B,EAAE,QAAQ,CAAC,CAAC;OACrD;KACF;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;KAC7C;YAAS;MACR,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB;EACH,CAAC;EAEO,KAAK,CAAC,SAAS,CAAC,UAAU;IAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI;MACF,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,qBAAqB,UAAU,EAAE,CAAC,CAAC;MACvE,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;KACrD;IAAC,OAAO,KAAK,EAAE;MACd,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;KAC9C;YAAS;MACR,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB;EACH,CAAC;EAEO,iBAAiB,CAAC,KAAU;IAClC,KAAK,CAAC,cAAc,EAAE,CAAC;IACvB,IAAI,CAAC,cAAc,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACvD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,WAAW,EAAC,2BAA2B;MAC3C,qCAA6B;MAC7B,YAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;QACpD,WAAK,KAAK,EAAC,gBAAgB;UACzB,WAAK,KAAK,EAAC,QAAQ;YACjB,qCACE,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACE;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,kCACE,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,MAAM,EAAC,eAAe,GACtB,CACE;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,oCACE,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACE;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,uCACE,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACE;UACN,WAAK,KAAK,EAAC,QAAQ;YACjB,+BACE,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAC5B,cAAc,EAAE,IAAI,CAAC,cAAc,GACnC,CACE;UACN,WAAK,KAAK,EAAC,gCAAgC;YACzC,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,mCAAmC,EACzC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,IAE1C,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAClC,CACL,CACF,CACD,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\nimport { FormController } from '../form/form';\nimport businessFormSchema from './business-form-schema';\nimport { Api } from '../../api';\n\n/**\n * @exportedPart label: Label for inputs\n * @exportedPart input: The input fields\n * @exportedPart input-invalid: Invalid state for inputfs\n */\n@Component({\n  tag: 'justifi-business-form',\n  styleUrl: 'business-form.scss',\n})\nexport class BusinessForm {\n  @Prop() authToken: string;\n  @Prop() businessId?: string;\n  @State() isLoading: boolean = false;\n\n  private formController: FormController;\n  private api: any;\n\n  constructor() {\n    this.sendData = this.sendData.bind(this);\n    this.fetchData = this.fetchData.bind(this);\n  }\n\n  componentWillLoad() {\n    if (!this.authToken) {\n      console.warn(\n        'Warning: Missing auth-token. The form will not be functional without it.',\n      );\n    }\n\n    this.formController = new FormController(businessFormSchema);\n\n    this.api = Api(this.authToken, process.env.ENTITIES_ENDPOINT);\n\n    if (this.businessId) {\n      this.fetchData(this.businessId);\n    } else {\n      this.formController.setInitialValues({\n        legal_address: {\n          country: 'US',\n        },\n      });\n    }\n  }\n\n  // These props should not be sent to the server\n  private parseForPatching(data) {\n    delete data.id;\n    delete data.documents;\n    delete data.bank_accounts;\n    delete data.product_categories;\n    delete data.created_at;\n    delete data.updated_at;\n    delete data.legal_address.id;\n    delete data.legal_address.created_at;\n    delete data.legal_address.updated_at;\n    delete data.representative.id;\n    delete data.representative.documents;\n    delete data.representative.created_at;\n    delete data.representative.updated_at;\n    delete data.representative.address.id;\n    delete data.representative.address.created_at;\n    delete data.representative.address.updated_at;\n    delete data.owners;\n\n    return data;\n  }\n\n  private async sendData() {\n    this.isLoading = true;\n    try {\n      const data = this.formController.values.getValue();\n\n      // Conditionally making either POST or PATCH request\n      if (this.businessId) {\n        const payload = this.parseForPatching(data);\n        const response = await this.api.patch(\n          `entities/business/${this.businessId}`,\n          JSON.stringify(payload),\n        );\n        console.log('Server response from PATCH:', response);\n      } else {\n        const response = await this.api.post(\n          'entities/business',\n          JSON.stringify(data),\n        );\n        console.log('Server response from POST:', response);\n      }\n    } catch (error) {\n      console.error('Error sending data:', error);\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  private async fetchData(businessId) {\n    this.isLoading = true;\n    try {\n      const response = await this.api.get(`entities/business/${businessId}`);\n      this.formController.setInitialValues(response.data);\n    } catch (error) {\n      console.error('Error fetching data:', error);\n    } finally {\n      this.isLoading = false;\n    }\n  }\n\n  private validateAndSubmit(event: any) {\n    event.preventDefault();\n    this.formController.validateAndSubmit(this.sendData);\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <h1>Business Information</h1>\n        <form onSubmit={event => this.validateAndSubmit(event)}>\n          <div class=\"row gy-6 gap-3\">\n            <div class=\"col-12\">\n              <justifi-business-generic-info\n                formController={this.formController}\n              />\n            </div>\n            <div class=\"col-12\">\n              <justifi-legal-address-form\n                formController={this.formController}\n                legend=\"Legal Address\"\n              />\n            </div>\n            <div class=\"col-12\">\n              <justifi-additional-questions\n                formController={this.formController}\n              />\n            </div>\n            <div class=\"col-12\">\n              <justifi-business-representative\n                formController={this.formController}\n              />\n            </div>\n            <div class=\"col-12\">\n              <justifi-business-owners\n                isEditing={!!this.businessId}\n                formController={this.formController}\n              />\n            </div>\n            <div class=\"col-12 d-flex flex-row-reverse\">\n              <button\n                type=\"submit\"\n                class=\"btn btn-primary jfi-submit-button\"\n                disabled={!this.authToken || this.isLoading}\n              >\n                {this.isLoading ? 'Loading...' : 'Submit'}\n              </button>\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/business-form/{businessForm.stories.js → business-form.stories.js}

@@ -1,5 +1,5 @@
 export default {
-  title: 'Components/BusinessForm',
+  title: 'dev/Components/BusinessForm',
   component: 'justifi-business-form',
   argTypes: {
     'auth-token': {
@@ -21,8 +21,8 @@ const Template = (args) => {
   return `
     <div>
       <justifi-business-form
-        auth-token=${args['authToken']}
-        business-id='${args['business-id']}'
+        auth-token="${args['auth-token']}"
+        business-id="${args['business-id']}"
       />
     </div>
     <style>
@@ -34,13 +34,13 @@ const Template = (args) => {
 };
 export const Basic = Template.bind({});
 Basic.args = {
-  'auth-token': 'authtoken',
-  'business-id': 'businessid',
+  'auth-token': '',
+  'business-id': '',
 };
 export const Styled = Template.bind({});
 Styled.args = {
-  'auth-token': 'authtoken',
-  'business-id': 'businessid',
+  'auth-token': '',
+  'business-id': '',
   'cssVariables': `
   --jfi-primary-color: #212529;
   --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';
@@ -112,4 +112,4 @@ Styled.args = {
   --jfi-radio-button-group-width: 100%;
   `,
 };
-//# sourceMappingURL=businessForm.stories.js.map
+//# sourceMappingURL=business-form.stories.js.map

package/dist/collection/components/business-form/business-form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"business-form.stories.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form.stories.tsx"],"names":[],"mappings":"AAMA,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,aAAa,EAAE;MACb,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,wFAAwF;EACxF,OAAO;;;sBAGa,IAAI,CAAC,YAAY,CAAC;uBACjB,IAAI,CAAC,aAAa,CAAC;;;;;UAKhC,IAAI,CAAC,YAAY;;;GAGxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,YAAY,EAAE,EAAE;EAChB,aAAa,EAAE,EAAE;CAClB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,YAAY,EAAE,EAAE;EAChB,aAAa,EAAE,EAAE;EACjB,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEf;CACF,CAAC","sourcesContent":["interface BusinessFormStoryArgs {\n  authToken: string;\n  businessId: string;\n  cssVariables: string;\n}\n\nexport default {\n  title: 'dev/Components/BusinessForm',\n  component: 'justifi-business-form',\n  argTypes: {\n    'auth-token': {\n      control: 'text',\n      table: {\n        category: 'props',\n      },\n    },\n    'business-id': {\n      control: 'text',\n      table: {\n        category: 'props',\n      },\n    },\n  },\n};\n\nconst Template = (args: BusinessFormStoryArgs) => {\n  // The <div> here should be replaced by a `display` property in the cardForm potentially\n  return `\n    <div>\n      <justifi-business-form\n        auth-token=\"${args['auth-token']}\"\n        business-id=\"${args['business-id']}\"\n      />\n    </div>\n    <style>\n      :root {\n        ${args.cssVariables}\n      }\n    </style>\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'auth-token': '',\n  'business-id': '',\n};\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'auth-token': '',\n  'business-id': '',\n  'cssVariables': `\n  --jfi-primary-color: #212529;\n  --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';\n  --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;\n  --jfi-layout-padding: 4px;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 700;\n  --jfi-form-label-font-family: Calibri, sans-serif;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n\n  --jfi-submit-button-color: white;\n  --jfi-submit-button-background-color: #3F3F47;\n  --jfi-submit-button-border-color: var(--jfi-primary-color);\n  --jfi-submit-button-padding: 0.375rem 0.75rem;\n  --jfi-submit-button-font-size: 1rem;\n  --jfi-submit-button-border-radius: 1px;\n  --jfi-submit-button-color-hover: white;\n  --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-submit-button-color-focus: white;\n  --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n  --jfi-submit-button-color-active: white;\n  --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n  --jfi-submit-button-width: 100%;\n  --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n\n  --jfi-radio-button-color: var(--jfi-primary-color);\n  --jfi-radio-button-background-color: transparent;\n  --jfi-radio-button-color-selected: white;\n  --jfi-radio-button-background-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-border-color: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected: var(--jfi-primary-color);\n  --jfi-radio-button-padding: 0.375rem 0.75rem;\n  --jfi-radio-button-font-size: 1rem;\n  --jfi-radio-button-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-color-selected-hover: white;\n  --jfi-radio-button-background-color-hover: transparent;\n  --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);\n  --jfi-radio-button-border-color-hover: var(--jfi-primary-color);\n  --jfi-radio-button-group-width: 100%;\n  `,\n};\n"]}

package/dist/collection/components/business-form/business-generic-info/business-generic-info.js

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { BusinessStructureOptions, BusinessTypeOptions } from "../business-form-schema";
+import { BusinessStructureOptions, BusinessTypeOptions, } from "../business-form-schema";
+import { PHONE_MASKS } from "../../../utils/phone-masks";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -9,22 +10,21 @@ export class BusinessGenericInfo {
   constructor() {
     this.formController = undefined;
     this.errors = {};
-    this.defaultValues = {};
     this.business = {};
-  }
-  handleRepresentativeChange(newValues) {
-    this.formController.setValues(newValues);
+    this.inputHandler = this.inputHandler.bind(this);
   }
   componentDidLoad() {
-    this.formController.errors.subscribe((errors) => this.errors = Object.assign({}, errors));
-    this.formController.defaultValues.subscribe((defaultValues) => this.defaultValues = Object.assign({}, defaultValues));
+    this.formController.errors.subscribe(errors => {
+      this.errors = Object.assign({}, errors);
+    });
+    this.formController.values.subscribe(values => (this.business = Object.assign({}, values)));
   }
   inputHandler(name, value) {
-    this.business = Object.assign(Object.assign({}, this.business), { [name]: value });
+    this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
   }
-  ;
   render() {
-    return (h(Host, { exportparts: "label,input,input-invalid" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: this.defaultValues.legal_name, error: this.errors.legal_name, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: this.defaultValues.doing_business_as, error: this.errors.doing_business_as, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: this.defaultValues.business_type, error: this.errors.business_type, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: this.defaultValues.business_structure, error: this.errors.business_structure, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: this.defaultValues.industry, error: this.errors.business_structure, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: this.defaultValues.website_url, error: this.errors.website_url, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: this.defaultValues.email, error: this.errors.email, inputHandler: (name, value) => this.inputHandler(name, value) })), h("div", { class: "col-12" }, h("form-control-text", { name: "phone", label: "Phone Number", defaultValue: this.defaultValues.phone, error: this.errors.phone, inputHandler: (name, value) => this.inputHandler(name, value) })))));
+    const genericInfoDefaultValue = this.formController.getInitialValues();
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "legal_name", label: "Legal Name", defaultValue: genericInfoDefaultValue.legal_name, error: this.errors.legal_name, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: genericInfoDefaultValue.doing_business_as, error: this.errors.doing_business_as, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: genericInfoDefaultValue.business_type, error: this.errors.business_type, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: genericInfoDefaultValue.business_structure, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "industry", label: "Industry", defaultValue: genericInfoDefaultValue.industry, error: this.errors.business_structure, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-number", { name: "tax_id", label: "Tax ID", defaultValue: genericInfoDefaultValue.tax_id, error: this.errors.tax_id, inputHandler: this.inputHandler })), h("div", { class: "col-12" }, h("form-control-text", { name: "website_url", label: "Website URL", defaultValue: genericInfoDefaultValue.website_url, error: this.errors.website_url, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-text", { name: "email", label: "Email Address", defaultValue: genericInfoDefaultValue.email, error: this.errors.email, inputHandler: this.inputHandler })), h("div", { class: "col-12 col-md-6" }, h("form-control-number-masked", { name: "phone", label: "Phone Number", defaultValue: genericInfoDefaultValue.phone, error: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })))));
   }
   static get is() { return "justifi-business-generic-info"; }
   static get originalStyleUrls() {
@@ -65,15 +65,8 @@ export class BusinessGenericInfo {
   static get states() {
     return {
       "errors": {},
-      "defaultValues": {},
       "business": {}
     };
   }
-  static get watchers() {
-    return [{
-        "propName": "business",
-        "methodName": "handleRepresentativeChange"
-      }];
-  }
 }
 //# sourceMappingURL=business-generic-info.js.map

package/dist/collection/components/business-form/business-generic-info/business-generic-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"business-generic-info.js","sourceRoot":"","sources":["../../../../../src/components/business-form/business-generic-info/business-generic-info.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { BusinessStructureOptions, BusinessTypeOptions } from '../business-form-schema';\nimport { FormController } from '../../form/form';\n\n/**\n * @exportedPart label: Label for inputs\n * @exportedPart input: The input fields\n * @exportedPart input-invalid: Invalid state for inputfs\n */\n@Component({\n  tag: 'justifi-business-generic-info',\n  styleUrl: 'business-generic-info.scss',\n  shadow: false,\n})\nexport class BusinessGenericInfo {\n  @Prop() formController: FormController\n  @State() errors: any = {};\n  @State() defaultValues: any = {};\n  @State() business: any = {};\n\n  @Watch('business')\n  handleRepresentativeChange(newValues: any) {\n    this.formController.setValues(newValues);\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe((errors) => this.errors = { ...errors });\n    this.formController.defaultValues.subscribe((defaultValues) => this.defaultValues = { ...defaultValues });\n  }\n\n  inputHandler(name: string, value: string) {\n    this.business = { ...this.business, [name]: value };\n  };\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <div class=\"row gy-3\">\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"legal_name\"\n              label=\"Legal Name\"\n              defaultValue={this.defaultValues.legal_name}\n              error={this.errors.legal_name}\n              inputHandler={(name, value) => this.inputHandler(name, value)} />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"doing_business_as\"\n              label=\"Doing Business As (DBA)\"\n              defaultValue={this.defaultValues.doing_business_as}\n              error={this.errors.doing_business_as}\n              inputHandler={(name, value) => this.inputHandler(name, value)} />\n          </div>\n          <div class=\"col-12\">\n            <form-control-select\n              name=\"business_type\"\n              label=\"Business Type\"\n              options={BusinessTypeOptions}\n              defaultValue={this.defaultValues.business_type}\n              error={this.errors.business_type}\n              inputHandler={(name, value) => this.inputHandler(name, value)} />\n          </div>\n          <div class=\"col-12\">\n            <form-control-select\n              name=\"business_structure\"\n              label=\"Business Structure\"\n              options={BusinessStructureOptions}\n              defaultValue={this.defaultValues.business_structure}\n              error={this.errors.business_structure}\n              inputHandler={(name, value) => this.inputHandler(name, value)} />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"industry\"\n              label=\"Industry\"\n              defaultValue={this.defaultValues.industry}\n              error={this.errors.business_structure}\n              inputHandler={(name, value) => this.inputHandler(name, value)} />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"website_url\"\n              label=\"Website URL\"\n              defaultValue={this.defaultValues.website_url}\n              error={this.errors.website_url}\n              inputHandler={(name, value) => this.inputHandler(name, value)} />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"email\"\n              label=\"Email Address\"\n              defaultValue={this.defaultValues.email}\n              error={this.errors.email}\n              inputHandler={(name, value) => this.inputHandler(name, value)} />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"phone\"\n              label=\"Phone Number\"\n              defaultValue={this.defaultValues.phone}\n              error={this.errors.phone}\n              inputHandler={(name, value) => this.inputHandler(name, value)} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"business-generic-info.js","sourceRoot":"","sources":["../../../../../src/components/business-form/business-generic-info/business-generic-info.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State } from '@stencil/core';\n\nimport {\n  BusinessStructureOptions,\n  BusinessTypeOptions,\n} from '../business-form-schema';\nimport { FormController } from '../../form/form';\nimport { PHONE_MASKS } from '../../../utils/phone-masks';\n\n/**\n * @exportedPart label: Label for inputs\n * @exportedPart input: The input fields\n * @exportedPart input-invalid: Invalid state for inputfs\n */\n@Component({\n  tag: 'justifi-business-generic-info',\n  styleUrl: 'business-generic-info.scss',\n})\nexport class BusinessGenericInfo {\n  @Prop() formController: FormController;\n  @State() errors: any = {};\n  @State() business: any = {};\n\n  constructor() {\n    this.inputHandler = this.inputHandler.bind(this);\n  }\n\n  componentDidLoad() {\n    this.formController.errors.subscribe(errors => {\n      this.errors = { ...errors };\n    });\n    this.formController.values.subscribe(\n      values => (this.business = { ...values }),\n    );\n  }\n\n  inputHandler(name: string, value: string) {\n    this.formController.setValues({\n      ...this.formController.values.getValue(),\n      [name]: value,\n    });\n  }\n\n  render() {\n    const genericInfoDefaultValue = this.formController.getInitialValues();\n\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <div class=\"row gy-3\">\n          <div class=\"col-12 col-md-6\">\n            <form-control-text\n              name=\"legal_name\"\n              label=\"Legal Name\"\n              defaultValue={genericInfoDefaultValue.legal_name}\n              error={this.errors.legal_name}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-text\n              name=\"doing_business_as\"\n              label=\"Doing Business As (DBA)\"\n              defaultValue={genericInfoDefaultValue.doing_business_as}\n              error={this.errors.doing_business_as}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-select\n              name=\"business_type\"\n              label=\"Business Type\"\n              options={BusinessTypeOptions}\n              defaultValue={genericInfoDefaultValue.business_type}\n              error={this.errors.business_type}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-select\n              name=\"business_structure\"\n              label=\"Business Structure\"\n              options={BusinessStructureOptions}\n              defaultValue={genericInfoDefaultValue.business_structure}\n              error={this.errors.business_structure}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"industry\"\n              label=\"Industry\"\n              defaultValue={genericInfoDefaultValue.industry}\n              error={this.errors.business_structure}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12\">\n            <form-control-number\n              name=\"tax_id\"\n              label=\"Tax ID\"\n              defaultValue={genericInfoDefaultValue.tax_id}\n              error={this.errors.tax_id}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12\">\n            <form-control-text\n              name=\"website_url\"\n              label=\"Website URL\"\n              defaultValue={genericInfoDefaultValue.website_url}\n              error={this.errors.website_url}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-text\n              name=\"email\"\n              label=\"Email Address\"\n              defaultValue={genericInfoDefaultValue.email}\n              error={this.errors.email}\n              inputHandler={this.inputHandler}\n            />\n          </div>\n          <div class=\"col-12 col-md-6\">\n            <form-control-number-masked\n              name=\"phone\"\n              label=\"Phone Number\"\n              defaultValue={genericInfoDefaultValue.phone}\n              error={this.errors.phone}\n              inputHandler={this.inputHandler}\n              mask={PHONE_MASKS.US}\n            />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}