@justifi/webcomponents 4.17.0 → 4.19.0

package/dist/collection/components/business-forms/payment-provisioning/legal-address-form/legal-address-form-step.js

@@ -1,14 +1,7 @@
-import { Host, h } from "@stencil/core";
-import { FormController } from "../../../form/form";
-import Api from "../../../../api/Api";
-import { Address } from "../../../../api/Business";
-import { parseAddressInfo } from "../../utils/payload-parsers";
-import { addressSchema } from "../../schemas/business-address-schema";
-import { config } from "../../../../../config";
-import { BusinessFormStep } from "../../utils/business-form-types";
-import StateOptions from "../../../../utils/state-options";
-import { numberOnlyHandler } from "../../../form/utils";
+import { h } from "@stencil/core";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../../api/ComponentError";
+import { makeGetBusiness, makePatchBusiness } from "../payment-provisioning-actions";
+import { BusinessService } from "../../../../api/services/business.service";
 /**
  * @exportedPart label: Label for inputs
  * @exportedPart input: The input fields
@@ -16,92 +9,44 @@ import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../../api/Com
  */
 export class LegalAddressFormStep {
     constructor() {
-        this.fetchData = async () => {
-            this.formLoading.emit(true);
-            try {
-                const response = await this.api.get(this.businessEndpoint);
-                this.legal_address = new Address(response.data.legal_address || {});
-                this.formController.setInitialValues(Object.assign({}, this.legal_address));
-            }
-            catch (error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.FETCH_ERROR,
-                    message: error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                    data: error,
-                });
-            }
-            finally {
-                this.formLoading.emit(false);
-            }
-        };
-        this.sendData = async (onSuccess) => {
-            this.formLoading.emit(true);
-            try {
-                const payload = parseAddressInfo(this.formController.values.getValue());
-                const response = await this.api.patch(this.businessEndpoint, JSON.stringify({ legal_address: payload }));
-                this.handleResponse(response, onSuccess);
-            }
-            catch (error) {
-                this.errorEvent.emit({
-                    errorCode: ComponentErrorCodes.PATCH_ERROR,
-                    message: error.message,
-                    severity: ComponentErrorSeverity.ERROR,
-                    data: error,
-                });
-            }
-            finally {
-                this.formLoading.emit(false);
-            }
-        };
-        this.inputHandler = (name, value) => {
-            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
-        };
-        this.formController = undefined;
-        this.errors = {};
-        this.legal_address = {};
+        this.getBusiness = undefined;
+        this.patchBusiness = undefined;
         this.authToken = undefined;
         this.businessId = undefined;
         this.allowOptionalFields = undefined;
     }
-    get businessEndpoint() {
-        return `entities/business/${this.businessId}`;
-    }
-    handleResponse(response, onSuccess) {
-        if (response.error) {
-            this.errorEvent.emit({
-                errorCode: ComponentErrorCodes.PATCH_ERROR,
-                message: response.error.message,
-                severity: ComponentErrorSeverity.ERROR,
-                data: response.error,
-            });
-        }
-        else {
-            onSuccess();
-        }
-        this.submitted.emit({ data: response, metadata: { completedStep: BusinessFormStep.legalAddress } });
+    propChanged() {
+        this.initializeApi();
     }
     async validateAndSubmit({ onSuccess }) {
-        this.formController.validateAndSubmit(() => this.sendData(onSuccess));
+        this.coreComponent.validateAndSubmit({ onSuccess });
     }
-    ;
     componentWillLoad() {
-        this.formController = new FormController(addressSchema(this.allowOptionalFields));
-        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
-        if (this.businessId && this.authToken) {
-            this.fetchData();
-        }
+        this.initializeApi();
     }
-    componentDidLoad() {
-        this.formController.values.subscribe(values => this.legal_address = Object.assign({}, values));
-        this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
+    initializeApi() {
+        if (this.authToken && this.businessId) {
+            this.getBusiness = makeGetBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+            this.patchBusiness = makePatchBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+        }
+        else {
+            this.errorEvent.emit({
+                message: 'Missing required props',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f;
-        const legalAddressDefaultValue = this.formController.getInitialValues();
-        return (h(Host, { key: '9c05125bf246a2b70a726daf13e670a97e980f47', exportparts: "label,input,input-invalid" }, h("form", { key: '2ade7edf832b33a7ba6a48e7132675b1d10a56d4' }, h("fieldset", { key: 'c1de166455f7fe99af58a296a096235fdecb2133' }, h("legend", { key: '6a91fd07f78aa2cff56db73c59b8310b17b7d901' }, "Business Legal Address"), h("hr", { key: '3c2ebc5996de57610af531da0d314ce991bbe305' }), h("div", { key: 'fd1d4ab21f866fd76801c4c8c2e1d0419ac6addb', class: "row gy-3" }, h("div", { key: 'c3aaf2e8445067227f66a6faf8487b84275b109d', class: "col-12" }, h("form-control-text", { key: '2e9958c7829e1647c3512d65b0a068c5ffd192dc', name: "line1", label: "Legal Address", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { key: '551458e16164b6fab6393d4e0bd5e36bd79e706d', class: "col-12" }, h("form-control-text", { key: '97f9ca68b48c6b73d46eb112f52df1eba0113c11', name: "line2", label: "Address Line 2", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { key: 'e914778ba7da8279ee60fbbf96a0ce573ed33925', class: "col-12" }, h("form-control-text", { key: '1028149f43063b7eb2359dac64880f41c4b706c4', name: "city", label: "City", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { key: 'a4c0f576008523ec0abb18bf39e8a1441b404b37', class: "col-12" }, h("form-control-select", { key: 'af5d60c67367c9e5d6d531e199a4b1f60e994c3c', name: "state", label: "State", options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { key: 'e5f0a9da1269c6c2e71ee7775a59c5f03eb5010e', class: "col-12" }, h("form-control-text", { key: '262bf5740f67f1788d5eff08236de25b48ad3cbf', name: "postal_code", label: "Postal Code", inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: '6ba0e162cfeaff5c891b51a32e32fefe28db66ce', class: "col-12" }, h("form-control-select", { key: '5f9ad2922f6cf3ad9f89cb1c0f387f2a615b1474', name: "country", label: "Country", options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
-            // just for now so we skip handling country specificities
-            disabled: true })))))));
+        return (h("justifi-legal-address-form-step-core", { key: '7455b4950e2ca1121004943ad81537c583438738', getBusiness: this.getBusiness, patchBusiness: this.patchBusiness, allowOptionalFields: this.allowOptionalFields, ref: el => this.coreComponent = el }));
     }
     static get is() { return "justifi-legal-address-form-step"; }
     static get properties() {
@@ -161,49 +106,12 @@ export class LegalAddressFormStep {
     }
     static get states() {
         return {
-            "formController": {},
-            "errors": {},
-            "legal_address": {}
+            "getBusiness": {},
+            "patchBusiness": {}
         };
     }
     static get events() {
         return [{
-                "method": "submitted",
-                "name": "submitted",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "BusinessFormSubmitEvent",
-                    "resolved": "BusinessFormSubmitEvent",
-                    "references": {
-                        "BusinessFormSubmitEvent": {
-                            "location": "import",
-                            "path": "../../utils/business-form-types",
-                            "id": "src/components/business-forms/utils/business-form-types.ts::BusinessFormSubmitEvent"
-                        }
-                    }
-                }
-            }, {
-                "method": "formLoading",
-                "name": "formLoading",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                }
-            }, {
                 "method": "errorEvent",
                 "name": "error-event",
                 "bubbles": true,
@@ -251,4 +159,13 @@ export class LegalAddressFormStep {
             }
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "authToken",
+                "methodName": "propChanged"
+            }, {
+                "propName": "businessId",
+                "methodName": "propChanged"
+            }];
+    }
 }

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-actions.js

@@ -1,6 +1,7 @@
 import { ComponentErrorSeverity } from "../../../api/ComponentError";
 import { getErrorCode, getErrorMessage } from "../../../api/services/utils";
-export const makeGetBusiness = ({ authToken, businessId, service }) => async ({ onSuccess, onError }) => {
+// Entity API Actions
+export const makeGetBusiness = ({ authToken, businessId, service }) => async ({ onSuccess, onError, final = () => { } }) => {
     var _a;
     try {
         const response = await service.fetchBusiness(businessId, authToken);
@@ -25,6 +26,38 @@ export const makeGetBusiness = ({ authToken, businessId, service }) => async ({
             severity: ComponentErrorSeverity.ERROR,
         });
     }
+    finally {
+        return final();
+    }
+};
+export const makePatchBusiness = ({ authToken, businessId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.patchBusiness(authToken, businessId, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
 };
 export const makePostProvisioning = ({ authToken, businessId, product, service }) => async ({ onSuccess, onError }) => {
     var _a;
@@ -52,3 +85,91 @@ export const makePostProvisioning = ({ authToken, businessId, product, service }
         });
     }
 };
+// Identity API Actions
+export const makeGetIdentity = ({ authToken, identityId, service }) => async ({ onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.fetchIdentity(identityId, authToken);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+export const makePatchIdentity = ({ authToken, identityId, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.patchIdentity(authToken, identityId, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
+export const makePostIdentity = ({ authToken, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.postIdentity(authToken, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-core.js

@@ -1,7 +1,8 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 import { BusinessFormClickActions } from "../utils/business-form-types";
 import { ComponentErrorCodes, ComponentErrorSeverity } from "../../../api/ComponentError";
 import { checkProvisioningStatus } from "../utils/helpers";
+import { StyledHost } from "../../../ui-components";
 export class PaymentProvisioningCore {
     constructor() {
         this.setBusinessProvisioned = () => {
@@ -41,9 +42,6 @@ export class PaymentProvisioningCore {
             });
         };
         this.refs = [];
-        this.handleFormLoading = (e) => {
-            this.formLoading = e.detail;
-        };
         this.incrementSteps = () => {
             if (this.currentStep < this.totalSteps) {
                 return this.currentStep++;
@@ -60,7 +58,7 @@ export class PaymentProvisioningCore {
             const currentStep = this.refs[this.currentStep];
             currentStep.validateAndSubmit({ onSuccess: this.incrementSteps });
         };
-        this.formLoading = false;
+        this.loading = false;
         this.businessProvisioned = false;
         this.currentStep = 0;
         this.errorMessage = undefined;
@@ -79,7 +77,7 @@ export class PaymentProvisioningCore {
         return `entities/business/${this.businessId}`;
     }
     get formDisabled() {
-        return this.formLoading || this.businessProvisioned;
+        return this.loading || this.businessProvisioned;
     }
     get totalSteps() {
         return this.refs.length - 1;
@@ -87,10 +85,14 @@ export class PaymentProvisioningCore {
     get stepCounter() {
         return `${this.currentStep + 1} of ${this.totalSteps + 1}`;
     }
+    handleFormLoading(event) {
+        this.loading = event.detail;
+    }
     render() {
-        return (h(Host, { key: '55cc99c89f4bd0c118f478bf4ed784ba79e58390', exportparts: 'label,input,input-invalid' }, h("div", { key: '68c9410be13351130196c33db2f71f8c541d5bee', class: 'row gap-3' }, h("h1", { key: '37a6b7aa48c8a6a3ddea1b61e11adfc73ef2cbb3' }, this.formTitle), h("justifi-payment-provisioning-form-steps", { key: '599cd00f4582dd1370a8bebd14258a196561c9af', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading, onFormCompleted: () => this.postProvisioningData() }), h("div", { key: '4ad23d84d851781e264a31f5fba4f91ef0bd9422', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: 'b77f58acaf9c374c553916f887f2d3ff253ddc4a', class: 'd-flex align-items-center' }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: '756886f2a82f8d31321962eb2eb249de3cd55ecc', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.formLoading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
+        return (h(StyledHost, { key: '80f2730a6a4e273391888b086c3633a3dec012b8', exportparts: 'label,input,input-invalid' }, h("div", { key: 'b4e7be2fed14b404ee7bcbe42c3c1c54bb78fdb6', class: 'row gap-3' }, h("h1", { key: 'f477beb7934a94a74dfc6b8a9c18cc54a720f70e' }, this.formTitle), h("justifi-payment-provisioning-form-steps", { key: 'e74aa3a01cfe7550f4917d28ccda1aca211d9394', businessId: this.businessId, authToken: this.authToken, refs: this.refs, currentStep: this.currentStep, allowOptionalFields: this.allowOptionalFields, handleFormLoading: this.handleFormLoading, onFormCompleted: () => this.postProvisioningData() }), h("div", { key: '26a585ec4b6b677cb01ac17696269168887f4c76', class: 'd-flex justify-content-between align-items-center' }, h("div", { key: 'ca5ddc176f8c2eb3315620076b401e47f45039bd', class: 'd-flex align-items-center' }, this.stepCounter), h("justifi-payment-provisioning-form-buttons", { key: '8299387bf859b33c829d29d66947c3c053ffa53c', currentStep: this.currentStep, totalSteps: this.totalSteps, formLoading: this.loading, formDisabled: this.formDisabled, previousStepButtonOnClick: this.previousStepButtonOnClick, nextStepButtonOnClick: this.nextStepButtonOnClick })))));
     }
     static get is() { return "justifi-payment-provisioning-core"; }
+    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "businessId": {
@@ -206,7 +208,7 @@ export class PaymentProvisioningCore {
     }
     static get states() {
         return {
-            "formLoading": {},
+            "loading": {},
             "businessProvisioned": {},
             "currentStep": {},
             "errorMessage": {}
@@ -278,4 +280,13 @@ export class PaymentProvisioningCore {
                 }
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "formLoading",
+                "method": "handleFormLoading",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-form-buttons.js

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { BusinessFormClickActions } from "../utils/business-form-types";
-import { LoadingSpinner } from "../../form/utils";
+import { Button } from "../../../ui-components";
 export class PaymentProvisioningFormButtons {
     constructor() {
         this.currentStep = undefined;
@@ -20,7 +20,7 @@ export class PaymentProvisioningFormButtons {
         return this.currentStep === this.totalSteps;
     }
     render() {
-        return (h("div", { key: 'abc1957bf9f8afaa808471730d43a0d3abe447ca', class: 'd-flex gap-2' }, h("button", { key: 'a6a09bc4afdefa8d0a04e96bfc3228ece27f7968', type: 'button', class: 'btn btn-secondary', onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h("button", { key: '6709aaf0c97a4aff7ffc45dcab0c3589b9f1d940', type: 'button', class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, hidden: !this.showNextStepButton }, this.formLoading ? LoadingSpinner() : 'Next'), h("button", { key: '9b0cc8573d48082bec14294682b3674b1423abbe', type: 'submit', class: `btn btn-primary jfi-submit-button${this.formLoading ? ' jfi-submit-button-loading' : ''}`, onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, hidden: !this.showSubmitButton }, this.formLoading ? LoadingSpinner() : 'Submit')));
+        return (h("div", { key: '3df3796f2bb35819373564c0002e35d14c85e360', class: 'd-flex gap-2' }, h(Button, { key: '3f8fd4e288b2eed6776c77b44dda816e8a0580cd', variant: "secondary", type: "button", onClick: () => this.previousStepButtonOnClick(), disabled: this.formDisabled, hidden: !this.showPreviousStepButton }, "Previous"), h(Button, { key: '83c7d2405d6e4f88f721a95250aa847a6999a211', variant: "primary", type: "button", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.nextStep), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showNextStepButton }, "Next"), h(Button, { key: 'd87bcdc9bea52b11307e31bd1d99636be05d7156', variant: "primary", type: "submit", onClick: (e) => this.nextStepButtonOnClick(e, BusinessFormClickActions.submit), disabled: this.formDisabled, isLoading: this.formLoading, hidden: !this.showSubmitButton }, "Submit")));
     }
     static get is() { return "justifi-payment-provisioning-form-buttons"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning-form-steps.js

@@ -2,11 +2,11 @@ import { h } from "@stencil/core";
 export class PaymentProvisioningFormSteps {
     constructor() {
         this.componentStepMapping = {
-            0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
-            1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
-            2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
-            3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
-            4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
+            0: () => h("justifi-business-core-info-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[0] = el, allowOptionalFields: this.allowOptionalFields }),
+            1: () => h("justifi-legal-address-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[1] = el, allowOptionalFields: this.allowOptionalFields }),
+            2: () => h("justifi-additional-questions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[2] = el, allowOptionalFields: this.allowOptionalFields }),
+            3: () => h("justifi-business-representative-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[3] = el, allowOptionalFields: this.allowOptionalFields }),
+            4: () => h("justifi-business-owners-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[4] = el, allowOptionalFields: this.allowOptionalFields }),
             5: () => h("justifi-business-bank-account-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[5] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
             6: () => h("justifi-business-document-upload-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[6] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields }),
             7: () => h("justifi-business-terms-conditions-form-step", { businessId: this.businessId, authToken: this.authToken, ref: (el) => this.refs[7] = el, onFormLoading: this.handleFormLoading, allowOptionalFields: this.allowOptionalFields, onSubmitted: () => this.formCompleted.emit() }),
@@ -22,7 +22,7 @@ export class PaymentProvisioningFormSteps {
         return this.componentStepMapping[this.currentStep]();
     }
     render() {
-        return (h("div", { key: '6bb3a25e38c7ed29a095e2bc1192d869ec406e83', class: 'col-12 mb-4' }, this.currentStepComponent));
+        return (h("div", { key: '8f02aa3223e38cda70319c127f60e5d2f3c5abe5', class: 'col-12 mb-4' }, this.currentStepComponent));
     }
     static get is() { return "justifi-payment-provisioning-form-steps"; }
     static get properties() {

package/dist/collection/components/business-forms/payment-provisioning/payment-provisioning.js

@@ -51,20 +51,9 @@ export class PaymentProvisioning {
         }
     }
     render() {
-        return (h("justifi-payment-provisioning-core", { key: 'f4576182194f347b77929fc1a4336472225f5ff7', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
+        return (h("justifi-payment-provisioning-core", { key: 'a93ee23fabf4bdeb381e924bfdf684ddd183075a', businessId: this.businessId, authToken: this.authToken, allowOptionalFields: this.allowOptionalFields, formTitle: this.formTitle, getBusiness: this.getBusiness, postProvisioning: this.postProvisioning }));
     }
     static get is() { return "justifi-payment-provisioning"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["payment-provisioning.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["payment-provisioning.css"]
-        };
-    }
     static get properties() {
         return {
             "businessId": {

package/dist/collection/components/business-forms/payment-provisioning/terms-and-conditions/business-terms-conditions-form-step.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { FormController } from "../../../form/form";
 import { BusinessFormStep } from "../../utils/business-form-types";
 import { config } from "../../../../../config";
@@ -107,7 +107,7 @@ export class BusinessTermsConditionsFormStep {
         });
     }
     render() {
-        return (h(Host, { key: '63c8c815109b63b868fedfa6c9142a787d43625c' }, h("form", { key: '364ec85e5a8399b3bb1233a09a588470f7d96542' }, h("fieldset", { key: '8f4206180a48cc665b50bdc47604871b8c46212a' }, h("legend", { key: 'c50cf85809bcf0c370fe3e3756bbdf97cbc35c9f' }, "Terms and Conditions"), h("hr", { key: '4ae031aaa9a56f26c8818c11cf3ff91e559c7399' }), h("justifi-business-terms-conditions-text", { key: '4c8f520d4fbb14e94bfd345e196e5a8602fec0e2' }), h("br", { key: 'd76eff074fb8b7195ce22128a19f3ad6ff5c6ac0' }), h("div", { key: '5663d9804ccb01af38bfbf056645ef4e11695366', class: "row-gy-3" }, h("div", { key: '8587e533aa31febd996e643c366eeee3d147bc9d', class: "col-12" }, h("form-control-checkbox", { key: 'd2ff86a1d92a040e119432487b1405d0a6ae2c55', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText })))))));
+        return (h("form", { key: '29b946b553d7a8011bee8f1997888f04b51897b3' }, h("fieldset", { key: 'c6e6c2577a66e58de8aabaac572cd7dab0a609b2' }, h("legend", { key: '4cf7e19049ee60807ffc5cbecbc8b87e9725590a' }, "Terms and Conditions"), h("hr", { key: 'b0d0bb46987a864a20a419eb0b2338fd57d07765' }), h("justifi-business-terms-conditions-text", { key: 'c936f2205bf123266d8eed2f12194eb2d8feb056' }), h("br", { key: 'e4f38ba5341c5fcf5938c3637905612e02bc7077' }), h("div", { key: '163401aaaee6e037d94182e5005625055bda66c5', class: "row-gy-3" }, h("div", { key: '3925d9b802f62e16cc41407170593b4b9a676bd9', class: "col-12" }, h("form-control-checkbox", { key: 'd86e00bfebe915d84a41486be34cec3555598d92', name: "accepted", label: "I agree to the terms and conditions", inputHandler: this.inputHandler, errorText: this.errors.accepted, disabled: this.acceptedTermsBefore, helpText: this.formHelperText }))))));
     }
     static get is() { return "justifi-business-terms-conditions-form-step"; }
     static get properties() {