@justifi/webcomponents 4.2.2 → 4.5.0

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

@@ -0,0 +1,153 @@
+import { Host, h } from "@stencil/core";
+import { FormController } from "../form/form";
+import businessFormSchema from "./business-form-schema";
+import { Api } from "../../api";
+/**
+ * @exportedPart label: Label for inputs
+ * @exportedPart input: The input fields
+ * @exportedPart input-invalid: Invalid state for inputfs
+ */
+export class BusinessForm {
+  constructor() {
+    this.authToken = undefined;
+    this.businessId = undefined;
+    this.isLoading = false;
+    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_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) }, 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 originalStyleUrls() {
+    return {
+      "$": ["business-form.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["business-form.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
+      },
+      "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": {}
+    };
+  }
+}
+//# sourceMappingURL=business-form.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,115 @@
+export default {
+  title: 'dev/Components/BusinessForm',
+  component: 'justifi-business-form',
+  argTypes: {
+    'auth-token': {
+      control: 'text',
+      table: {
+        category: 'props',
+      },
+    },
+    'business-id': {
+      control: 'text',
+      table: {
+        category: 'props',
+      },
+    },
+  },
+};
+const Template = (args) => {
+  // The <div> here should be replaced by a `display` property in the cardForm potentially
+  return `
+    <div>
+      <justifi-business-form
+        auth-token="${args['auth-token']}"
+        business-id="${args['business-id']}"
+      />
+    </div>
+    <style>
+      :root {
+        ${args.cssVariables}
+      }
+    </style>
+  `;
+};
+export const Basic = Template.bind({});
+Basic.args = {
+  'auth-token': '',
+  'business-id': '',
+};
+export const Styled = Template.bind({});
+Styled.args = {
+  'auth-token': '',
+  'business-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.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"]}