@justifi/webcomponents 4.6.4 → 4.7.0-rc.0

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

@@ -0,0 +1,194 @@
+import { Host, h } from "@stencil/core";
+import { FormController } from "../form/form";
+import businessFormSchema from "./business-form-schema";
+import { Api } from "../../api";
+import { parseForPatching } from "./helpers";
+const componentStepMapping = {
+  0: (formController) => h("justifi-business-generic-info", { formController: formController }),
+  1: (formController) => h("justifi-legal-address-form", { formController: formController }),
+  2: (formController) => h("justifi-additional-questions", { formController: formController }),
+  3: (formController) => h("justifi-business-representative", { formController: formController }),
+  4: (formController) => h("justifi-business-owners", { formController: formController })
+};
+/**
+ * @exportedPart label: Label for inputs
+ * @exportedPart input: The input fields
+ * @exportedPart input-invalid: Invalid state for inputfs
+ */
+export class BusinessFormStepped {
+  constructor() {
+    this.authToken = undefined;
+    this.accountId = undefined;
+    this.businessId = undefined;
+    this.isLoading = false;
+    this.currentStep = 0;
+    this.totalSteps = 4;
+    this.serverError = undefined;
+    this.sendData = this.sendData.bind(this);
+    this.fetchData = this.fetchData.bind(this);
+  }
+  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_API_ORIGIN);
+    this.totalSteps = Object.keys(componentStepMapping).length - 1;
+    if (this.businessId) {
+      this.fetchData(this.businessId);
+    }
+    else {
+      this.formController.setInitialValues({
+        legal_address: {
+          country: 'US',
+        },
+      });
+    }
+  }
+  handleResponse(response, onSuccess) {
+    if (response.error) {
+      this.serverError = response.error.message;
+    }
+    else {
+      this.serverError = '';
+      this.businessId = response.data.id;
+      this.formController.setInitialValues(response.data);
+      onSuccess();
+    }
+  }
+  async sendData(onSuccess) {
+    this.isLoading = true;
+    try {
+      const data = this.formController.values.getValue();
+      // Conditionally making either POST or PATCH request
+      if (this.businessId) {
+        const payload = parseForPatching(data);
+        const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload), { account_id: this.accountId });
+        this.handleResponse(response, onSuccess);
+      }
+      else {
+        const response = await this.api.post('entities/business', JSON.stringify(data), { account_id: this.accountId });
+        this.handleResponse(response, onSuccess);
+      }
+    }
+    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);
+  }
+  showPreviousStepButton() {
+    return this.currentStep > 0;
+  }
+  previousStepButtonOnClick() {
+    this.sendData(() => this.currentStep--);
+  }
+  showNextStepButton() {
+    return this.currentStep < this.totalSteps;
+  }
+  nextStepButtonOnClick() {
+    this.sendData(() => this.currentStep++);
+  }
+  showSubmitButton() {
+    return this.currentStep === this.totalSteps;
+  }
+  currentStepComponent() {
+    return componentStepMapping[this.currentStep](this.formController);
+  }
+  render() {
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), this.serverError && (h("div", { class: "alert alert-danger", role: "alert" }, this.serverError)), h("form", { onSubmit: this.validateAndSubmit }, h("div", { class: "my-4" }, this.currentStepComponent()), h("div", { class: "d-flex justify-content-between align-items-center" }, h("div", { class: "d-flex align-items-center" }, "Step ", this.currentStep + 1, " of ", this.totalSteps + 1), h("div", { class: "d-flex gap-2" }, this.showPreviousStepButton() && (h("button", { type: "button", class: "btn btn-secondary", onClick: () => this.previousStepButtonOnClick(), disabled: this.isLoading }, "Previous")), this.showNextStepButton() && (h("button", { type: "button", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.isLoading }, "Next")), this.showSubmitButton() && (h("button", { type: "submit", class: "btn btn-primary", onClick: () => this.nextStepButtonOnClick(), disabled: this.isLoading }, "Submit")))))));
+  }
+  static get is() { return "justifi-business-form-stepped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["business-form-stepped.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["business-form-stepped.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      },
+      "accountId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "account-id",
+        "reflect": false
+      },
+      "businessId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "business-id",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isLoading": {},
+      "currentStep": {},
+      "totalSteps": {},
+      "serverError": {}
+    };
+  }
+}
+//# sourceMappingURL=business-form-stepped.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"business-form-stepped.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form-stepped.tsx"],"names":[],"mappings":"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","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';\nimport { parseForPatching } from './helpers';\n\n\nconst componentStepMapping = {\n  0: (formController) => <justifi-business-generic-info formController={formController} />,\n  1: (formController) => <justifi-legal-address-form formController={formController} />,\n  2: (formController) => <justifi-additional-questions formController={formController} />,\n  3: (formController) => <justifi-business-representative formController={formController} />,\n  4: (formController) => <justifi-business-owners formController={formController} />\n};\n\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-stepped',\n  styleUrl: 'business-form-stepped.scss',\n})\nexport class BusinessFormStepped {\n  @Prop() authToken: string;\n  @Prop() accountId: string;\n  @Prop() businessId?: string;\n  @State() isLoading: boolean = false;\n  @State() currentStep: number = 0;\n  @State() totalSteps: number = 4;\n  @State() serverError: string;\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    this.api = Api(this.authToken, process.env.ENTITIES_API_ORIGIN);\n    this.totalSteps = Object.keys(componentStepMapping).length - 1;\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  handleResponse(response, onSuccess) {\n    if (response.error) {\n      this.serverError = response.error.message;\n    } else {\n      this.serverError = '';\n      this.businessId = response.data.id;\n      this.formController.setInitialValues(response.data);\n      onSuccess();\n    }\n  }\n\n  private async sendData(onSuccess?: () => void) {\n    this.isLoading = true;\n\n    try {\n      const data = this.formController.values.getValue();\n      // Conditionally making either POST or PATCH request\n      if (this.businessId) {\n        const payload = parseForPatching(data);\n        const response = await this.api.patch(\n          `entities/business/${this.businessId}`,\n          JSON.stringify(payload),\n          { account_id: this.accountId }\n        );\n        this.handleResponse(response, onSuccess);\n      } else {\n        const response = await this.api.post(\n          'entities/business',\n          JSON.stringify(data),\n          { account_id: this.accountId }\n        );\n        this.handleResponse(response, onSuccess);\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  showPreviousStepButton() {\n    return this.currentStep > 0;\n  }\n\n  previousStepButtonOnClick() {\n    this.sendData(() => this.currentStep--);\n  }\n\n  showNextStepButton() {\n    return this.currentStep < this.totalSteps;\n  }\n\n  nextStepButtonOnClick() {\n    this.sendData(() => this.currentStep++);\n  }\n\n  showSubmitButton() {\n    return this.currentStep === this.totalSteps;\n  }\n\n  currentStepComponent() {\n    return componentStepMapping[this.currentStep](this.formController);\n  }\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <h1>Business Information</h1>\n\n        {this.serverError && (\n          <div class=\"alert alert-danger\" role=\"alert\">\n            {this.serverError}\n          </div>\n        )}\n\n        <form onSubmit={this.validateAndSubmit}>\n          <div class=\"my-4\">\n            {this.currentStepComponent()}\n          </div>\n          <div class=\"d-flex justify-content-between align-items-center\">\n            <div class=\"d-flex align-items-center\">\n              Step {this.currentStep + 1} of {this.totalSteps + 1}\n            </div>\n            <div class=\"d-flex gap-2\">\n              {this.showPreviousStepButton() && (\n                <button\n                  type=\"button\"\n                  class=\"btn btn-secondary\"\n                  onClick={() => this.previousStepButtonOnClick()}\n                  disabled={this.isLoading}>\n                  Previous\n                </button>\n              )}\n              {this.showNextStepButton() && (\n                <button\n                  type=\"button\"\n                  class=\"btn btn-primary\"\n                  onClick={() => this.nextStepButtonOnClick()}\n                  disabled={this.isLoading}>\n                  Next\n                </button>\n              )}\n              {this.showSubmitButton() && (\n                <button\n                  type=\"submit\"\n                  class=\"btn btn-primary\"\n                  onClick={() => this.nextStepButtonOnClick()}\n                  disabled={this.isLoading}>\n                  Submit\n                </button>\n              )}\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,131 @@
+class BusinessFormSteppedStoryArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['business-id'] = args['business-id'] || '';
+    this['account-id'] = args['account-id'] || process.env.EXAMPLE_BUSINESS_ACCOUNT_ID;
+    this['css-variables'] = args['css-variables'] || '';
+  }
+}
+export default {
+  title: 'dev/Components/BusinessFormStepped',
+  component: 'justifi-business-form',
+  argTypes: {
+    'auth-token': {
+      control: 'text',
+      table: {
+        category: 'props',
+      },
+    },
+    'account-id': {
+      control: 'text',
+      table: {
+        category: 'props',
+      },
+    },
+    'business-id': {
+      control: 'text',
+      table: {
+        category: 'props',
+      },
+    }
+  },
+};
+const Template = (args) => {
+  const authToken = args['auth-token'];
+  const businessId = args['business-id'];
+  const accountId = args['account-id'] || process.env.EXAMPLE_BUSINESS_ACCOUNT_ID;
+  // The <div> here should be replaced by a `display` property in the cardForm potentially
+  return `
+    <div>
+      <justifi-business-form-stepped
+        auth-token="${authToken}"
+        business-id="${businessId}"
+        account-id="${accountId}"
+      />
+    </div>
+    <style>
+      :root {
+        ${args['css-variables']}
+      }
+    </style>
+  `;
+};
+export const Basic = Template.bind({});
+Basic.args = new BusinessFormSteppedStoryArgs({});
+export const Styled = Template.bind({});
+Styled.args = new BusinessFormSteppedStoryArgs({
+  'auth-token': '',
+  'business-id': '',
+  'account-id': '',
+  'cssVariables': `
+  --jfi-primary-color: #212529;
+  --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';
+  --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;
+  --jfi-layout-padding: 4px;
+  --jfi-layout-form-control-spacing-x: .5rem;
+  --jfi-layout-form-control-spacing-y: 1rem;
+  --jfi-form-label-font-weight: 700;
+  --jfi-form-label-font-family: Calibri, sans-serif;
+  --jfi-form-label-margin: 0 0 .5rem 0;
+  --jfi-form-control-background-color: #F4F4F6;
+  --jfi-form-control-background-color-hover: #EEEEF5;
+  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);
+  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);
+  --jfi-form-control-border-color-focus: #fccc32;
+  --jfi-form-control-border-color-error: #C12727;
+  --jfi-form-control-border-top-width: 0;
+  --jfi-form-control-border-left-width: 0;
+  --jfi-form-control-border-bottom-width: 1px;
+  --jfi-form-control-border-right-width: 0;
+  --jfi-form-control-border-radius: 4px 4px 0 0;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  --jfi-form-control-box-shadow-focus: none;
+  --jfi-form-control-box-shadow-error-focus: none;
+  --jfi-form-control-border-style: solid;
+  --jfi-form-control-color: #212529;
+  --jfi-form-control-font-size: 1rem;
+  --jfi-form-control-font-weight: 400;
+  --jfi-form-control-line-height: 2;
+  --jfi-form-control-margin: 0;
+  --jfi-form-control-padding: .5rem .875rem;
+  --jfi-error-message-color: #C12727;
+  --jfi-error-message-margin: .25rem 0 0 0;
+  --jfi-error-message-font-size: .875rem;
+
+  --jfi-submit-button-color: white;
+  --jfi-submit-button-background-color: #3F3F47;
+  --jfi-submit-button-border-color: var(--jfi-primary-color);
+  --jfi-submit-button-padding: 0.375rem 0.75rem;
+  --jfi-submit-button-font-size: 1rem;
+  --jfi-submit-button-border-radius: 1px;
+  --jfi-submit-button-color-hover: white;
+  --jfi-submit-button-background-color-hover: var(--jfi-primary-color);
+  --jfi-submit-button-border-color-hover: var(--jfi-primary-color);
+  --jfi-submit-button-color-focus: white;
+  --jfi-submit-button-background-color-focus: var(--jfi-primary-color);
+  --jfi-submit-button-border-color-focus: var(--jfi-primary-color);
+  --jfi-submit-button-color-active: white;
+  --jfi-submit-button-background-color-active: var(--jfi-primary-color);
+  --jfi-submit-button-border-color-active: var(--jfi-primary-color);
+  --jfi-submit-button-width: 100%;
+  --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;
+
+  --jfi-radio-button-color: var(--jfi-primary-color);
+  --jfi-radio-button-background-color: transparent;
+  --jfi-radio-button-color-selected: white;
+  --jfi-radio-button-background-color-selected: var(--jfi-primary-color);
+  --jfi-radio-button-border-color: var(--jfi-primary-color);
+  --jfi-radio-button-border-color-selected: var(--jfi-primary-color);
+  --jfi-radio-button-padding: 0.375rem 0.75rem;
+  --jfi-radio-button-font-size: 1rem;
+  --jfi-radio-button-color-hover: var(--jfi-primary-color);
+  --jfi-radio-button-color-selected-hover: white;
+  --jfi-radio-button-background-color-hover: transparent;
+  --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);
+  --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);
+  --jfi-radio-button-border-color-hover: var(--jfi-primary-color);
+  --jfi-radio-button-group-width: 100%;
+  `,
+});
+//# sourceMappingURL=business-form-stepped.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"business-form-stepped.stories.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form-stepped.stories.tsx"],"names":[],"mappings":"AAAA,MAAM,4BAA4B;EAMhC,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;IACnF,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;EACtD,CAAC;CACF;AAED,eAAe;EACb,KAAK,EAAE,oCAAoC;EAC3C,SAAS,EAAE,uBAAuB;EAClC,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,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,IAAkC,EAAE,EAAE;EACtD,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC;EACrC,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC;EACvC,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;EAChF,wFAAwF;EACxF,OAAO;;;sBAGa,SAAS;uBACR,UAAU;sBACX,SAAS;;;;;UAKrB,IAAI,CAAC,eAAe,CAAC;;;GAG5B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEvC,KAAK,CAAC,IAAI,GAAG,IAAI,4BAA4B,CAAC,EAAE,CAAC,CAAC;AAElD,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,4BAA4B,CAAC;EAC7C,YAAY,EAAE,EAAE;EAChB,aAAa,EAAE,EAAE;EACjB,YAAY,EAAE,EAAE;EAChB,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEf;CACF,CAAC,CAAC","sourcesContent":["class BusinessFormSteppedStoryArgs {\n  'auth-token': string;\n  'account-id': string;\n  'bussiness-id': string;\n  'css-variables': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['business-id'] = args['business-id'] || '';\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_BUSINESS_ACCOUNT_ID;\n    this['css-variables'] = args['css-variables'] || '';\n  }\n}\n\nexport default {\n  title: 'dev/Components/BusinessFormStepped',\n  component: 'justifi-business-form',\n  argTypes: {\n    'auth-token': {\n      control: 'text',\n      table: {\n        category: 'props',\n      },\n    },\n    'account-id': {\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: BusinessFormSteppedStoryArgs) => {\n  const authToken = args['auth-token'];\n  const businessId = args['business-id'];\n  const accountId = args['account-id'] || process.env.EXAMPLE_BUSINESS_ACCOUNT_ID;\n  // The <div> here should be replaced by a `display` property in the cardForm potentially\n  return `\n    <div>\n      <justifi-business-form-stepped\n        auth-token=\"${authToken}\"\n        business-id=\"${businessId}\"\n        account-id=\"${accountId}\"\n      />\n    </div>\n    <style>\n      :root {\n        ${args['css-variables']}\n      }\n    </style>\n  `;\n};\n\nexport const Basic = Template.bind({});\n\nBasic.args = new BusinessFormSteppedStoryArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new BusinessFormSteppedStoryArgs({\n  'auth-token': '',\n  'business-id': '',\n  'account-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-form.js

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { FormController } from "../form/form";
 import businessFormSchema from "./business-form-schema";
 import { Api } from "../../api";
+import { parseForPatching } from "./helpers";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -20,7 +21,7 @@ export class BusinessForm {
       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);
+    this.api = Api(this.authToken, process.env.ENTITIES_API_ORIGIN);
     if (this.businessId) {
       this.fetchData(this.businessId);
     }
@@ -32,34 +33,13 @@ export class BusinessForm {
       });
     }
   }
-  // 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 payload = parseForPatching(data);
         const response = await this.api.patch(`entities/business/${this.businessId}`, JSON.stringify(payload));
         console.log('Server response from PATCH:', response);
       }
@@ -93,7 +73,7 @@ export class BusinessForm {
     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) }, 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'))))));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("form", { onSubmit: event => this.validateAndSubmit(event) }, h("div", { class: "row gap-3" }, h("div", { class: "col-12 mb-4" }, h("h1", null, "Business Information")), h("div", { class: "col-12 mb-4" }, h("justifi-business-generic-info", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-legal-address-form", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-additional-questions", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, h("justifi-business-representative", { formController: this.formController })), h("div", { class: "col-12 mb-4" }, 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 originalStyleUrls() {

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":"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","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"]}
+{"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;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAE7C;;;;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,mBAAmB,CAAC,CAAC;IAEhE,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;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,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvC,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,YAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;QACpD,WAAK,KAAK,EAAC,WAAW;UACpB,WAAK,KAAK,EAAC,aAAa;YACtB,qCAA6B,CACzB;UACN,WAAK,KAAK,EAAC,aAAa;YACtB,qCAA+B,cAAc,EAAE,IAAI,CAAC,cAAc,GAAI,CAClE;UACN,WAAK,KAAK,EAAC,aAAa;YACtB,kCAA4B,cAAc,EAAE,IAAI,CAAC,cAAc,GAAI,CAC/D;UACN,WAAK,KAAK,EAAC,aAAa;YACtB,oCAA8B,cAAc,EAAE,IAAI,CAAC,cAAc,GAAI,CACjE;UACN,WAAK,KAAK,EAAC,aAAa;YACtB,uCAAiC,cAAc,EAAE,IAAI,CAAC,cAAc,GAAI,CACpE;UACN,WAAK,KAAK,EAAC,aAAa;YACtB,+BAAyB,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,cAAc,EAAE,IAAI,CAAC,cAAc,GAAI,CAC1F;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';\nimport { parseForPatching } from './helpers';\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_API_ORIGIN);\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  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 = 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        <form onSubmit={event => this.validateAndSubmit(event)}>\n          <div class=\"row gap-3\">\n            <div class=\"col-12 mb-4\">\n              <h1>Business Information</h1>\n            </div>\n            <div class=\"col-12 mb-4\">\n              <justifi-business-generic-info formController={this.formController} />\n            </div>\n            <div class=\"col-12 mb-4\">\n              <justifi-legal-address-form formController={this.formController} />\n            </div>\n            <div class=\"col-12 mb-4\">\n              <justifi-additional-questions formController={this.formController} />\n            </div>\n            <div class=\"col-12 mb-4\">\n              <justifi-business-representative formController={this.formController} />\n            </div>\n            <div class=\"col-12 mb-4\">\n              <justifi-business-owners isEditing={!!this.businessId} formController={this.formController} />\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/business-form.stories.js

@@ -1,5 +1,13 @@
+class BusinessFormStoryArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || '';
+    this['business-id'] = args['business-id'] || '';
+    this['account-id'] = args['account-id'] || process.env.EXAMPLE_BUSINESS_ACCOUNT_ID;
+    this['cssVariables'] = args['cssVariables'] || '';
+  }
+}
 export default {
-  title: 'dev/Components/BusinessForm',
+  title: 'Components/BusinessForm',
   component: 'justifi-business-form',
   argTypes: {
     'auth-token': {
@@ -8,6 +16,12 @@ export default {
         category: 'props',
       },
     },
+    'account-id': {
+      control: 'text',
+      table: {
+        category: 'props',
+      },
+    },
     'business-id': {
       control: 'text',
       table: {
@@ -22,6 +36,7 @@ const Template = (args) => {
     <div>
       <justifi-business-form
         auth-token="${args['auth-token']}"
+        account-id="${args['account-id']}"
         business-id="${args['business-id']}"
       />
     </div>
@@ -33,15 +48,12 @@ const Template = (args) => {
   `;
 };
 export const Basic = Template.bind({});
-Basic.args = {
-  'auth-token': '',
-  'business-id': '',
-};
+Basic.args = new BusinessFormStoryArgs({});
 export const Styled = Template.bind({});
-Styled.args = {
+Basic.args = new BusinessFormStoryArgs({
   'auth-token': '',
   'business-id': '',
-  'cssVariables': `
+  cssVariables: `
   --jfi-primary-color: #212529;
   --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';
   --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;
@@ -111,5 +123,5 @@ Styled.args = {
   --jfi-radio-button-border-color-hover: var(--jfi-primary-color);
   --jfi-radio-button-group-width: 100%;
   `,
-};
+});
 //# sourceMappingURL=business-form.stories.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"business-form.stories.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form.stories.tsx"],"names":[],"mappings":"AACA,MAAM,qBAAqB;EAMzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;IACnF,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;EACpD,CAAC;CACF;AAED,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,SAAS,EAAE,uBAAuB;EAClC,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,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;sBAClB,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,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC;EACrC,YAAY,EAAE,EAAE;EAChB,aAAa,EAAE,EAAE;EACjB,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEb;CACF,CAAC,CAAC","sourcesContent":["\nclass BusinessFormStoryArgs {\n  'auth-token': string;\n  'account-id': string;\n  'bussiness-id': string;\n  'cssVariables': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || '';\n    this['business-id'] = args['business-id'] || '';\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_BUSINESS_ACCOUNT_ID;\n    this['cssVariables'] = args['cssVariables'] || '';\n  }\n}\n\nexport default {\n  title: 'Components/BusinessForm',\n  component: 'justifi-business-form',\n  argTypes: {\n    'auth-token': {\n      control: 'text',\n      table: {\n        category: 'props',\n      },\n    },\n    'account-id': {\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        account-id=\"${args['account-id']}\"\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 = new BusinessFormStoryArgs({});\n\nexport const Styled = Template.bind({});\nBasic.args = new BusinessFormStoryArgs({\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

@@ -2,6 +2,11 @@ import { Host, h } from "@stencil/core";
 import { BusinessStructureOptions, BusinessTypeOptions, } from "../business-form-schema";
 import { PHONE_MASKS } from "../../../utils/phone-masks";
 /**
+ *
+ * The difference between this component and business-generic-info-details
+ * is that this component is meant to be a form and send data
+ * and the other one  is meant to be just read only.
+ *
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
  * @exportedPart input-invalid: Invalid state for inputfs
@@ -10,21 +15,19 @@ export class BusinessGenericInfo {
   constructor() {
     this.formController = undefined;
     this.errors = {};
-    this.business = {};
     this.inputHandler = this.inputHandler.bind(this);
   }
   componentDidLoad() {
     this.formController.errors.subscribe(errors => {
       this.errors = Object.assign({}, errors);
     });
-    this.formController.values.subscribe(values => (this.business = Object.assign({}, values)));
   }
   inputHandler(name, value) {
     this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
   }
   render() {
     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 })))));
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("fieldset", null, h("legend", null, "General Info"), h("hr", null), 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() {
@@ -64,8 +67,7 @@ export class BusinessGenericInfo {
   }
   static get states() {
     return {
-      "errors": {},
-      "business": {}
+      "errors": {}
     };
   }
 }