@justifi/webcomponents 6.12.4 → 6.12.6-rc.1

package/dist/module/business-representative2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { P as PHONE_MASKS, I as IDENTITY_MASKS } from './form-input-masks.js';
-import { d as deconstructDate } from './Business.js';
-import { h as heading2, l as label, c as inputDisabled, E as buttonSecondary } from './parts.js';
+import { d as deconstructDate, a as CountryCode } from './Business.js';
+import { h as heading2, l as label, c as inputDisabled, A as buttonSecondary } from './parts.js';
 import { c as countryLabels } from './country-config.js';
+import { d as businessTitleOptions } from './business-form-options.js';
 import { d as defineCustomElement$8 } from './custom-popper2.js';
 import { d as defineCustomElement$7 } from './form-address-fields2.js';
 import { d as defineCustomElement$6 } from './form-control-date2.js';
@@ -36,7 +37,7 @@ const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRe
         var _a;
         const label = countryLabels[this.country].idNumberLabel;
         const labelOptional = countryLabels[this.country].idNumberLabelOptional;
-        return ((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) ? labelOptional : label;
+        return (((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) || this.country === CountryCode.CAN) ? labelOptional : label;
     }
     componentDidLoad() {
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors.representative)));
@@ -45,11 +46,11 @@ const BusinessRepresentative = /*@__PURE__*/ proxyCustomElement(class BusinessRe
     render() {
         var _a, _b;
         const representativeDefaultValue = this.formController.getInitialValues().representative;
-        return (h(Host, { key: 'c12be1414101467b72170c101cb3d7792f0fafe0' }, h("fieldset", { key: '821c9982121243de546bfe95094402379e704659' }, h("legend", { key: '48d43758a4d62dcd977eeb9703bae8ac153b9bf4', part: heading2 }, "Representative"), h("div", { key: '458edb00ebc0817623cd0fe70b8221c178cac168', class: "row gy-3" }, h("div", { key: '5d6b3fc92d7c6fb6bf729881bf26198ea796cbfa', class: "col-12 col-md-8" }, h("form-control-text", { key: '73eb60a383a45664050dd53bbc8b22b1e54ec22f', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'fa4b8c69dc03d7ffeecf98badd5cda52edc370e5', class: "col-12 col-md-4" }, h("form-control-text", { key: '3cc743bd85400c30741b6c05c3c098badce49a58', name: "title", label: "Title", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '83daa42529e73c5b946830dded92d0d48c95b251', class: "col-12 col-md-6" }, h("form-control-text", { key: '046a7537d6a2c5ab90d0069f91cc75f42a925e27', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: '9de7ac978409f7d5b6064cbeaa30771a6002fa5b', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: '05bd882e8d76b6bc1dbc44fc4e1951d14d6d2649', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'b511c08db58c2442746a497c7d784cd0605e9f17', class: "col-12 col-md-4" }, h("form-control-date", { key: '46be9d7a916f72c583b0d47a528e6e3d2443ac83', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: 'ae69c549fdf91314f4be3fa2d922c73bc19253ed', class: "col-12 col-md-8" }, (!((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: this.identificationNumberLabel, defaultValue: this.isEditingIdentification ? '' : representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, this.identificationNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_b = this.representative) === null || _b === void 0 ? void 0 : _b.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
+        return (h(Host, { key: '9045242989e4d43d1e7b0770d0c5421005db78fa' }, h("fieldset", { key: '6643f8bd8e81bbc64ae8a0e9bcf317e16f91bab9' }, h("legend", { key: '20b897584a059ad98c109a37a3ea74c8be4b407c', part: heading2 }, "Representative"), h("div", { key: '37da5bfb73a7606c6180c151761aaf13dcc819c4', class: "row gy-3" }, h("div", { key: '8d76accd442d9fda35ae4d3e1c47b65e17f098a0', class: "col-12 col-md-8" }, h("form-control-text", { key: '2eadd087eac463e851192d8ee1c30390a29ee8b2', name: "name", label: "Full Name", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'f495a8cb3c6a0e9b4a00aac3e8c77f66da84b9e2', class: "col-12 col-md-4" }, h("form-control-select", { key: '4b7669b96b7df9a387cf3c4f9638ea9ada9f37ee', name: "title", label: "Title", options: businessTitleOptions, defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.title, errorText: this.errors.title, inputHandler: this.inputHandler })), h("div", { key: '3e10f464a7e26a9518b4ce6d37c6f4a968514f98', class: "col-12 col-md-6" }, h("form-control-text", { key: 'a0d51c6999295428bfdcb43ef4b0ec15194eb077', name: "email", label: "Email Address", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.email, errorText: this.errors.email, inputHandler: this.inputHandler })), h("div", { key: 'a8e1a4c8e4fa5a50d436c18e41a5b77f23bc53cf', class: "col-12 col-md-6" }, h("form-control-number-masked", { key: 'a72115bf51fc97a25add717c208e820c7e9e5495', name: "phone", label: "Phone Number", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.phone, errorText: this.errors.phone, inputHandler: this.inputHandler, mask: PHONE_MASKS.US })), h("div", { key: 'db04f552f1757b6ac4e10539e4a148f399a75192', class: "col-12 col-md-4" }, h("form-control-date", { key: 'cb07a2cc4e6fc242d643f9caea01db380a9ff366', name: "dob_full", label: "Birth Date", defaultValue: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.dob_full, errorText: this.errors.dob_full, inputHandler: this.inputHandler, onFormControlInput: this.onDateOfBirthUpdate })), h("div", { key: '95348511ba3b1582053f754249b15efe4d707252', class: "col-12 col-md-8" }, (!((_a = this.representative) === null || _a === void 0 ? void 0 : _a.ssn_last4) || this.isEditingIdentification) ? (h("form-control-number-masked", { name: "identification_number", label: this.identificationNumberLabel, defaultValue: this.isEditingIdentification ? '' : representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.identification_number, errorText: this.errors.identification_number, inputHandler: this.inputHandler, mask: IDENTITY_MASKS[this.country], helpText: countryLabels[this.country].identityHelpText })) : (h("div", null, h("label", { class: "form-label", part: label }, this.identificationNumberLabel), h("div", { class: "input-group mb-3" }, h("input", { type: "text", class: "form-control", part: inputDisabled, value: `****${(_b = this.representative) === null || _b === void 0 ? void 0 : _b.ssn_last4}`, disabled: true }), h("button", { class: "btn btn-secondary", type: "button", part: buttonSecondary, onClick: () => {
                 this.isEditingIdentification = true;
                 // Clear last4 and current value to force validation
                 this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { representative: Object.assign(Object.assign({}, this.formController.values.getValue().representative), { ssn_last4: null, identification_number: '' }) }));
-            } }, "Change"))))), h("div", { key: 'dc7a74fe3641cfb03e682a6170c04efbd15b41d0', class: "col-12" }, h("identity-address-form", { key: '3756996788014f46ecfda29a3e5f9212b749a5d8', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
+            } }, "Change"))))), h("div", { key: '57dcdaad0ec89f94d82236bfc8e093b68b7ec478', class: "col-12" }, h("identity-address-form", { key: '0ea02562077d352c5d3a1d0903dee1e8b69fa6f1', errors: this.errors.address, defaultValues: representativeDefaultValue === null || representativeDefaultValue === void 0 ? void 0 : representativeDefaultValue.address, handleFormUpdate: this.onAddressFormUpdate, country: this.country }))))));
     }
 }, [256, "business-representative", {
         "formController": [16],

package/dist/module/button.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core/internal/client';
-import { a3 as buttonOutlineSecondary, a4 as buttonOutlinePrimary, a1 as buttonLink, a5 as buttonDark, a6 as buttonLight, a7 as buttonInfo, a8 as buttonWarning, a9 as buttonDanger, aa as buttonSuccess, E as buttonSecondary, D as buttonPrimary, ab as buttonLoading } from './parts.js';
+import { a3 as buttonOutlineSecondary, a4 as buttonOutlinePrimary, a1 as buttonLink, a5 as buttonDark, a6 as buttonLight, a7 as buttonInfo, a8 as buttonWarning, a9 as buttonDanger, aa as buttonSuccess, A as buttonSecondary, z as buttonPrimary, ab as buttonLoading } from './parts.js';
 
 const ButtonSpinner = () => (h("div", { class: "spinner-border spinner-border-sm", role: "status", part: "button-spinner" }, h("span", { class: "visually-hidden" }, "Loading...")));
 

package/dist/module/country-config.js

@@ -28,6 +28,7 @@ const countryLabels = {
         idNumberLabelOptional: 'SSN (optional)',
         identityHelpText: 'Enter your full Social Security Number. It is required for Federal OFAC check.',
         taxIdLabel: 'Tax ID (EIN or SSN)',
+        taxIdLabelOptional: '',
         taxIdHelpText: "Employer Identification Numbers (EINs) are nine digits. The federal tax identification number/EIN issued to you by the IRS. It can be found on your tax returns. Enter value without dashes.",
     },
     CAN: {
@@ -37,6 +38,7 @@ const countryLabels = {
         idNumberLabelOptional: 'SIN (optional)',
         identityHelpText: 'Enter your full Social Insurance Number.',
         taxIdLabel: 'Business Number (BN)',
+        taxIdLabelOptional: 'Business Number (BN) (optional)',
         taxIdHelpText: 'Business Numbers (BN) are nine digits. Enter value without spaces or dashes.',
     },
 };
@@ -61,4 +63,4 @@ const countryValidation = {
     },
 };
 
-export { countryOptions as a, countryValidation as b, countryLabels as c };
+export { ProvinceOptions as P, countryOptions as a, countryValidation as b, countryLabels as c };

package/dist/module/document-upload-form-step.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DocumentUploadFormStep extends Components.DocumentUploadFormStep, HTMLElement {}
+export const DocumentUploadFormStep: {
+    prototype: DocumentUploadFormStep;
+    new (): DocumentUploadFormStep;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/document-upload-form-step.js

@@ -0,0 +1,6 @@
+import { D as DocumentUploadFormStep$1, d as defineCustomElement$1 } from './document-upload-form-step2.js';
+
+const DocumentUploadFormStep = DocumentUploadFormStep$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DocumentUploadFormStep, defineCustomElement };

package/dist/module/document-upload-form-step2.js

@@ -0,0 +1,397 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import './config-state.js';
+import './dinero.js';
+import { e as EntityDocument, C as ComponentErrorSeverity, a as ComponentErrorCodes } from './Plaid.js';
+import './Pagination.js';
+import { a as CountryCode } from './Business.js';
+import './ApplePay.js';
+import { m as makeGetBusiness, e as makePostDocumentRecord } from './payment-provisioning-actions.js';
+import { B as BusinessService, D as DocumentRecordService } from './business.service.js';
+import { B as BusinessFormStep } from './event-types2.js';
+import { h as heading2 } from './parts.js';
+import { P as PaymentProvisioningLoading } from './payment-provisioning-loading.js';
+import { d as defineCustomElement$6 } from './business-documents-on-file2.js';
+import { d as defineCustomElement$5 } from './custom-popper2.js';
+import { d as defineCustomElement$4 } from './document-upload-list2.js';
+import { d as defineCustomElement$3 } from './form-control-file2.js';
+import { d as defineCustomElement$2 } from './form-control-select2.js';
+import { d as defineCustomElement$1 } from './form-control-tooltip2.js';
+
+const businessDocumentOptions = [
+    { label: 'Select a document type', value: '' },
+    { label: 'Articles of Incorporation', value: 'articles_of_incorporation' },
+    { label: 'Business Registration', value: 'business_registration' },
+];
+const financialDocumentOptions = [
+    { label: 'Select a document type', value: '' },
+    { label: 'Voided Check', value: 'voided_check' },
+    { label: 'Bank Statement', value: 'bank_statement' },
+];
+const personalDocGroup1Options = [
+    { label: 'Select a document type', value: '' },
+    { label: 'Canadian Passport', value: 'passport' },
+    { label: 'Canadian Driver\'s License', value: 'driver_license' },
+    { label: 'Canadian Government Issued ID Card', value: 'government_id' },
+    { label: 'Permanent Resident Card', value: 'resident_card' },
+    { label: 'Certificate of Indian Status', value: 'status_card' },
+    { label: 'US State Issued Driver\'s License', value: 'driver_license' },
+];
+const personalDocGroup2Options = [
+    { label: 'Select a document type', value: '' },
+    { label: 'Nexus Card (Photo ID)', value: 'nexus_card' },
+    { label: 'Canadian Citizenship/Naturalization Card or Certificate', value: 'citizenship_card' },
+    { label: 'Foreign Passport', value: 'foreign_passport' },
+    { label: 'Canadian Birth Certificate', value: 'birth_certificate' },
+    { label: 'Social Insurance Number (SIN) Card', value: 'sin_card' },
+    { label: 'Social Security Number (SSN) Card', value: 'ssn_card' },
+];
+const staticCategories = [
+    {
+        label: 'Business Document',
+        value: 'business_document',
+        docTypeOptions: businessDocumentOptions,
+    },
+    {
+        label: 'Financial Document',
+        value: 'financial_document',
+        docTypeOptions: financialDocumentOptions,
+    },
+];
+function buildOwnerCategories(owners) {
+    const group1Opts = personalDocGroup1Options.filter(o => o.value !== '');
+    const group2Opts = personalDocGroup2Options.filter(o => o.value !== '');
+    return owners.map(owner => ({
+        label: `${owner.name} - Identity Document`,
+        value: `personal_${owner.id}`,
+        identityId: owner.id,
+        docTypeOptions: [
+            { label: 'Select a document type', value: '' },
+            { label: '── Group 1 ──', value: '_group1_header' },
+            ...group1Opts,
+            { label: '── Group 2 ──', value: '_group2_header' },
+            ...group2Opts,
+        ],
+    }));
+}
+const financialOnlyCategories = [
+    {
+        label: 'Financial Document',
+        value: 'financial_document',
+        docTypeOptions: financialDocumentOptions,
+    },
+];
+function buildAllCategories(owners, country) {
+    if (country === CountryCode.USA) {
+        return financialOnlyCategories;
+    }
+    return [...staticCategories, ...buildOwnerCategories(owners)];
+}
+const personalDocGroup1Types = new Set(personalDocGroup1Options.filter(o => o.value).map(o => o.value));
+const personalDocGroup2Types = new Set(personalDocGroup2Options.filter(o => o.value).map(o => o.value));
+
+const DocumentUploadFormStep = /*@__PURE__*/ proxyCustomElement(class DocumentUploadFormStep extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.errorEvent = createEvent(this, "error-event", 7);
+        this.stepCompleteEvent = createEvent(this, "complete-form-step-event", 7);
+        this.formLoading = createEvent(this, "formLoading", 7);
+        this.owners = [];
+        this.existingDocuments = [];
+        this.selectedCategory = '';
+        this.selectedDocType = '';
+        this.uploadQueue = [];
+        this.isLoading = false;
+        this.errors = {};
+        this.fileInputKey = 0;
+        this.categories = [];
+        this.getData = () => {
+            this.isLoading = true;
+            this.getBusiness({
+                onSuccess: (response) => {
+                    const { owners, documents } = response.data;
+                    this.owners = owners || [];
+                    this.existingDocuments = documents || [];
+                    this.categories = buildAllCategories(this.owners, this.country);
+                },
+                onError: ({ error, code, severity }) => {
+                    this.errorEvent.emit({
+                        message: error,
+                        errorCode: code,
+                        severity: severity,
+                    });
+                },
+                final: () => {
+                    this.isLoading = false;
+                }
+            });
+        };
+        this.handleCategoryChange = (_name, value) => {
+            this.selectedCategory = value;
+            this.selectedDocType = '';
+        };
+        this.handleDocTypeChange = (_name, value) => {
+            if (value.startsWith('_') && value.endsWith('_header'))
+                return;
+            this.selectedDocType = value;
+        };
+        this.handleFileSelected = async (e) => {
+            const fileList = Array.from(e.detail.fileList);
+            const category = this.categories.find(c => c.value === this.selectedCategory);
+            if (!category)
+                return;
+            const docTypeOption = category.docTypeOptions.find(o => o.value === this.selectedDocType);
+            const docTypeLabel = (docTypeOption === null || docTypeOption === void 0 ? void 0 : docTypeOption.label) || this.selectedDocType;
+            const newEntries = fileList.map(file => ({
+                categoryLabel: category.label,
+                categoryValue: category.value,
+                docTypeLabel,
+                docTypeValue: this.selectedDocType,
+                fileName: file.name,
+                file,
+                identityId: category.identityId,
+                status: 'uploading',
+            }));
+            const startIndex = this.uploadQueue.length;
+            this.uploadQueue = [...this.uploadQueue, ...newEntries];
+            this.selectedCategory = '';
+            this.selectedDocType = '';
+            this.fileInputKey++;
+            await Promise.all(newEntries.map(async (entry, i) => {
+                const index = startIndex + i;
+                try {
+                    const docData = new EntityDocument({ file: entry.file, document_type: entry.docTypeValue }, this.businessId, entry.identityId);
+                    const recordCreated = await this.postDocumentRecordData(docData);
+                    if (!recordCreated) {
+                        this.uploadQueue = this.uploadQueue.map((e, j) => j === index ? Object.assign(Object.assign({}, e), { status: 'error' }) : e);
+                        return;
+                    }
+                    const uploaded = await this.uploadDocument(docData);
+                    this.uploadQueue = this.uploadQueue.map((e, j) => j === index ? Object.assign(Object.assign({}, e), { status: uploaded ? 'uploaded' : 'error' }) : e);
+                }
+                catch (_a) {
+                    this.uploadQueue = this.uploadQueue.map((e, j) => j === index ? Object.assign(Object.assign({}, e), { status: 'error' }) : e);
+                }
+            }));
+        };
+        this.postDocumentRecordData = async (docData) => {
+            const payload = docData.record_data;
+            return new Promise((resolve) => {
+                this.postDocumentRecord({
+                    payload,
+                    onSuccess: (response) => {
+                        resolve(this.handleDocRecordResponse(docData, response));
+                    },
+                    onError: ({ error, code, severity }) => {
+                        this.errorEvent.emit({
+                            message: error,
+                            errorCode: code,
+                            severity: severity,
+                        });
+                        resolve(false);
+                    },
+                });
+            });
+        };
+        this.handleDocRecordResponse = (docData, response) => {
+            if (response.error) {
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.POST_ERROR,
+                    message: response.error.message,
+                    severity: ComponentErrorSeverity.ERROR,
+                    data: response.error,
+                });
+                return false;
+            }
+            else {
+                docData.setPresignedUrl(response.data.presigned_url);
+                return true;
+            }
+        };
+        this.uploadDocument = async (docData) => {
+            if (!docData.presigned_url) {
+                throw new Error('Presigned URL is not set');
+            }
+            const fileData = await docData.getFileData();
+            const response = await fetch(docData.presigned_url, {
+                method: 'PUT',
+                body: fileData,
+            });
+            if (!response.ok) {
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.POST_ERROR,
+                    message: 'Failed to upload document',
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return false;
+            }
+            return true;
+        };
+    }
+    propChanged() {
+        this.initializeApi();
+    }
+    watchHandler(newValue) {
+        this.formLoading.emit(newValue);
+    }
+    async validateAndSubmit({ onSuccess }) {
+        const validationErrors = this.validate();
+        if (Object.keys(validationErrors).length > 0) {
+            this.errors = validationErrors;
+            return;
+        }
+        this.errors = {};
+        this.stepCompleteEvent.emit({ response: null, formStep: BusinessFormStep.documentUpload });
+        onSuccess();
+    }
+    componentWillLoad() {
+        this.initializeApi();
+        if (this.getBusiness) {
+            this.getData();
+        }
+    }
+    initializeApi() {
+        if (this.authToken && this.businessId) {
+            this.getBusiness = makeGetBusiness({
+                authToken: this.authToken,
+                businessId: this.businessId,
+                service: new BusinessService()
+            });
+            this.postDocumentRecord = makePostDocumentRecord({
+                authToken: this.authToken,
+                service: new DocumentRecordService()
+            });
+        }
+        else {
+            this.errorEvent.emit({
+                message: 'Missing required props',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    get categoryOptions() {
+        return [
+            { label: 'Select a category', value: '' },
+            ...this.categories.map(c => ({ label: c.label, value: c.value })),
+        ];
+    }
+    get docTypeOptions() {
+        if (!this.selectedCategory) {
+            return [{ label: 'Select a category first', value: '' }];
+        }
+        const category = this.categories.find(c => c.value === this.selectedCategory);
+        return (category === null || category === void 0 ? void 0 : category.docTypeOptions) || [{ label: 'Select a category first', value: '' }];
+    }
+    validate() {
+        if (this.allowOptionalFields)
+            return {};
+        const errors = {};
+        const financialDocTypes = ['voided_check', 'bank_statement'];
+        const hasExistingDoc = (types) => this.existingDocuments.some(doc => types.includes(doc.document_type));
+        const hasUploadedDoc = (categoryValue) => this.uploadQueue.some(entry => entry.categoryValue === categoryValue && entry.status === 'uploaded');
+        if (!hasUploadedDoc('financial_document') && !hasExistingDoc(financialDocTypes)) {
+            errors['financial_document'] = 'Please upload a financial document';
+        }
+        if (this.country === CountryCode.CAN) {
+            const businessDocTypes = ['articles_of_incorporation', 'business_registration'];
+            if (!hasUploadedDoc('business_document') && !hasExistingDoc(businessDocTypes)) {
+                errors['business_document'] = 'Please upload a business document';
+            }
+            for (const owner of this.owners) {
+                const ownerCategoryValue = `personal_${owner.id}`;
+                const ownerDocs = this.uploadQueue.filter(entry => entry.categoryValue === ownerCategoryValue && entry.status === 'uploaded');
+                const hasGroup1 = ownerDocs.some(d => personalDocGroup1Types.has(d.docTypeValue));
+                const hasGroup2 = ownerDocs.some(d => personalDocGroup2Types.has(d.docTypeValue));
+                if (!hasGroup1) {
+                    errors[`personal_group1_${owner.id}`] =
+                        `Please upload a Group 1 identity document for ${owner.name}`;
+                }
+                if (!hasGroup2) {
+                    errors[`personal_group2_${owner.id}`] =
+                        `Please upload a Group 2 identity document for ${owner.name}`;
+                }
+            }
+        }
+        return errors;
+    }
+    render() {
+        if (this.isLoading) {
+            return h(PaymentProvisioningLoading, null);
+        }
+        return (h("form", null, h("fieldset", null, h("legend", { class: "mb-0", part: heading2 }, "Document Uploads"), h("hr", { class: "mt-2" }), h("business-documents-on-file", { documents: this.existingDocuments, isLoading: this.isLoading })), h("fieldset", { class: "mt-4" }, h("div", { class: "d-flex align-items-center gap-2" }, h("legend", { class: "mb-0", part: heading2 }, "Add Document"), h("form-control-tooltip", { helpText: "Upload documents one at a time. Select the category and type, then choose a file. For identity documents, two documents from different groups are required per owner." })), h("hr", { class: "mt-2" }), h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "document_category", label: "Document Category", options: this.categoryOptions, defaultValue: this.selectedCategory, inputHandler: this.handleCategoryChange })), h("div", { class: "col-12 col-md-6" }, h("form-control-select", { name: "document_type", label: "Document Type", options: this.docTypeOptions, defaultValue: this.selectedDocType, inputHandler: this.handleDocTypeChange, disabled: !this.selectedCategory })), h("div", { class: "col-12" }, h("form-control-file", { key: this.fileInputKey, name: "document_file", label: "Upload Document", documentType: this.selectedDocType, onFileSelected: this.handleFileSelected, disabled: !this.selectedDocType, multiple: false })))), h("document-upload-list", { documents: this.uploadQueue }), Object.keys(this.errors).length > 0 && (h("div", { class: "alert alert-danger mt-3" }, h("ul", { class: "mb-0" }, Object.values(this.errors).map(err => h("li", null, err)))))));
+    }
+    static get watchers() { return {
+        "authToken": ["propChanged"],
+        "businessId": ["propChanged"],
+        "isLoading": ["watchHandler"]
+    }; }
+}, [256, "document-upload-form-step", {
+        "authToken": [1, "auth-token"],
+        "businessId": [1, "business-id"],
+        "allowOptionalFields": [4, "allow-optional-fields"],
+        "country": [1],
+        "owners": [32],
+        "existingDocuments": [32],
+        "selectedCategory": [32],
+        "selectedDocType": [32],
+        "uploadQueue": [32],
+        "isLoading": [32],
+        "errors": [32],
+        "fileInputKey": [32],
+        "getBusiness": [32],
+        "postDocumentRecord": [32],
+        "validateAndSubmit": [64]
+    }, undefined, {
+        "authToken": ["propChanged"],
+        "businessId": ["propChanged"],
+        "isLoading": ["watchHandler"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["document-upload-form-step", "business-documents-on-file", "custom-popper", "document-upload-list", "form-control-file", "form-control-select", "form-control-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "document-upload-form-step":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DocumentUploadFormStep);
+            }
+            break;
+        case "business-documents-on-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "document-upload-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "form-control-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "form-control-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { DocumentUploadFormStep as D, defineCustomElement as d };

package/dist/module/document-upload-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DocumentUploadList extends Components.DocumentUploadList, HTMLElement {}
+export const DocumentUploadList: {
+    prototype: DocumentUploadList;
+    new (): DocumentUploadList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/document-upload-list.js

@@ -0,0 +1,6 @@
+import { D as DocumentUploadList$1, d as defineCustomElement$1 } from './document-upload-list2.js';
+
+const DocumentUploadList = DocumentUploadList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DocumentUploadList, defineCustomElement };

package/dist/module/document-upload-list2.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { B as card, h as heading2, C as table, D as tableHeadCell, E as tableCell } from './parts.js';
+
+const DocumentUploadList = /*@__PURE__*/ proxyCustomElement(class DocumentUploadList extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.documents = [];
+    }
+    renderStatus(status) {
+        switch (status) {
+            case 'uploading':
+                return h("span", { class: "badge bg-info" }, "Uploading...");
+            case 'uploaded':
+                return h("span", { class: "badge bg-success" }, "Uploaded");
+            case 'error':
+                return h("span", { class: "badge bg-danger" }, "Error");
+        }
+    }
+    render() {
+        if (!this.documents.length) {
+            return null;
+        }
+        return (h("div", { class: "mt-4" }, h("div", { class: "card", part: card }, h("div", { class: "card-body" }, h("h5", { class: "card-title", part: heading2 }, "Uploaded Documents"), h("div", { class: "table-responsive" }, h("table", { class: "table table-sm table-borderless", part: table }, h("thead", null, h("tr", null, h("th", { style: { width: '25%' }, part: tableHeadCell, scope: "col" }, "Category"), h("th", { style: { width: '25%' }, part: tableHeadCell, scope: "col" }, "Document Type"), h("th", { style: { width: '30%' }, part: tableHeadCell, scope: "col" }, "File Name"), h("th", { style: { width: '20%' }, part: tableHeadCell, scope: "col" }, "Status"))), h("tbody", null, this.documents.map((doc, index) => (h("tr", { class: index === 0 ? 'border-bottom border-top' : 'border-bottom' }, h("td", { part: tableCell }, doc.categoryLabel), h("td", { part: tableCell }, doc.docTypeLabel), h("td", { part: tableCell }, doc.fileName), h("td", { part: tableCell }, this.renderStatus(doc.status))))))))))));
+    }
+}, [256, "document-upload-list", {
+        "documents": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["document-upload-list"];
+    components.forEach(tagName => { switch (tagName) {
+        case "document-upload-list":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, DocumentUploadList);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { DocumentUploadList as D, defineCustomElement as d };

package/dist/module/form-control-number2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { w as inputInvalidAndFocused, d as inputFocused, b as inputInvalid, e as input, l as label } from './parts.js';
+import { v as inputInvalidAndFocused, d as inputFocused, b as inputInvalid, e as input, l as label } from './parts.js';
 import { F as FormControlHelpText } from './form-control-help-text2.js';
 import { F as FormControlErrorText } from './form-control-error-text.js';
 import './justifi-details2.js';

package/dist/module/form-control-textarea2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { w as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, c as inputDisabled, e as input, l as label } from './parts.js';
+import { v as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, c as inputDisabled, e as input, l as label } from './parts.js';
 import { d as defineCustomElement$1 } from './form-control-help-text3.js';
 
 const FormControlTextarea = /*@__PURE__*/ proxyCustomElement(class FormControlTextarea extends HTMLElement {

package/dist/module/form.js

@@ -1539,23 +1539,6 @@ for (const method of ['validate', 'validateSync']) Schema.prototype[`${method}At
 for (const alias of ['equals', 'is']) Schema.prototype[alias] = Schema.prototype.oneOf;
 for (const alias of ['not', 'nope']) Schema.prototype[alias] = Schema.prototype.notOneOf;
 
-const returnsTrue = () => true;
-function create$8(spec) {
-  return new MixedSchema(spec);
-}
-class MixedSchema extends Schema {
-  constructor(spec) {
-    super(typeof spec === 'function' ? {
-      type: 'mixed',
-      check: spec
-    } : Object.assign({
-      type: 'mixed',
-      check: returnsTrue
-    }, spec));
-  }
-}
-create$8.prototype = MixedSchema.prototype;
-
 function create$7() {
   return new BooleanSchema();
 }
@@ -11941,4 +11924,4 @@ class FormController {
     }
 }
 
-export { FormController as F, create$6 as a, create$7 as b, create$3 as c, create$8 as d };
+export { FormController as F, create$6 as a, create$7 as b, create$3 as c };

package/dist/module/hidden-input2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { i as iframeInputStylesSet } from './iframe-input-styles-state.js';
-import { w as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, e as input } from './parts.js';
+import { v as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, e as input } from './parts.js';
 
 const HiddenInput = /*@__PURE__*/ proxyCustomElement(class HiddenInput extends HTMLElement {
     constructor(registerHost) {

package/dist/module/iframe-input2.js

@@ -3,7 +3,7 @@ import { g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { F as FormControlErrorText } from './form-control-error-text.js';
 import { w as webcomponentsPackageJson } from './package.js';
 import { a as iframeInputStyles } from './iframe-input-styles-state.js';
-import { w as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, e as input, l as label } from './parts.js';
+import { v as inputInvalidAndFocused, b as inputInvalid, d as inputFocused, e as input, l as label } from './parts.js';
 
 var iframeResizer = {exports: {}};
 

package/dist/module/justifi-checkouts-list-filters.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { l as lodashExports } from './lodash.js';
 import './config-state.js';
 import { e as convertToUTC, h as convertToLocal } from './utils2.js';
-import { I as ICheckoutStatus, f as ICheckoutPaymentModeParam } from './Plaid.js';
+import { I as ICheckoutStatus, g as ICheckoutPaymentModeParam } from './Plaid.js';
 import './Pagination.js';
 import './Business.js';
 import './ApplePay.js';