@justifi/webcomponents 5.7.5 → 5.7.6-rc-01

package/dist/module/terminal.service.js

@@ -1,8 +1,7 @@
 import { A as Api } from './Api.js';
-import './Checkout.js';
+import './Refund.js';
 import './Pagination.js';
 import './Payment.js';
-import './Refund.js';
 import './Business.js';
 
 const api = Api();

package/dist/module/terminals-list-core2.js

@@ -1,16 +1,15 @@
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import './config-state.js';
 import { l as capitalFirstLetter } from './utils2.js';
-import './Checkout.js';
+import './Refund.js';
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
-import './Refund.js';
 import './Business.js';
 import './details.js';
 import { T as Table, a as TableWrapper, b as TableComponent, c as TableHead, d as TableHeadRow, e as TableBody, f as TableLoadingState, g as TableEmptyState, h as TableErrorState, i as TableRow, j as TableFoot, k as TableFootRow, l as TableFootCell } from './table.js';
 import { T as TableClickActions } from './event-types.js';
 import { B as Badge, a as BadgeVariant } from './badge.js';
-import { n as tableHeadCell, a7 as getAlternateTableCellPart } from './parts.js';
+import { n as tableHeadCell, a8 as getAlternateTableCellPart } from './parts.js';
 import { o as onQueryParamsChange, g as getRequestParams } from './terminals-list-params-state.js';
 import { d as defineCustomElement$1 } from './pagination-menu2.js';
 
@@ -180,7 +179,7 @@ const TerminalsListCore = /*@__PURE__*/ proxyCustomElement(class TerminalsListCo
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h(TableWrapper, { key: '18758ce4d79c07564b15f9712762232fa8ea2083' }, h(TableComponent, { key: '70c5d623cf89ed440e0bb318c4be1c1c022f90e9' }, h(TableHead, { key: '3a2ec16691dddf82a9988b970506576680885106' }, h(TableHeadRow, { key: '8fc7f8fcb219a0e577e67e5694ff818801477a2c' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: 'e65e2646a51cb8859a77a13a4fb79b0ca57066b7' }, h(TableLoadingState, { key: '5a50acb1101958238077a3a26307f2252aed5584', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c79793063bef320ca258988880da5fc305200456', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '758ab1f9f3660f292f4421b940d040d6408f45ca', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: 'e88243106332270c051599905cf61b20c05637ac' }, h(TableFootRow, { key: '4c1e2dca2100a5010b8fcae7cb42e44cde5e0128' }, h(TableFootCell, { key: 'e8ce9acc75921d176f265e6a6f89398f86c911b0', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '9930d2573e46628637eb12034cb966d69b3b43b9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
+        return (h(TableWrapper, { key: 'ca85fc0bd239200eb2b816c3144181ef769c1662' }, h(TableComponent, { key: '75e3f3fc085cb5b468e655987457738030833f70' }, h(TableHead, { key: 'aef086fcfb1631a1532881b2a9a6586b18c73b50' }, h(TableHeadRow, { key: '9bffba6f07d74a681eba9454f2604cd627084d05' }, this.terminalsTable.columnData.map((column) => column))), h(TableBody, { key: '2ce4d63d6dedf0b79e790500e968a6336a5dab37' }, h(TableLoadingState, { key: '5c8e250b17b682fc99c1538d83ad94c8a1238bda', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c5c76edaa5ed9c7d72439ad99a04844649038244', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: 'b44c12b883d77cd0677c24dc6928cd4865f13541', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h(TableRow, { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h(TableFoot, { key: '065ea52b09e85e1de46b1098c3d74ab37a48629e' }, h(TableFootRow, { key: '7be6c77dba69bc0e2a0c5fefbf91b068f23bf6de' }, h(TableFootCell, { key: 'f190c8adb4c0b709dd7c19216ad4a5c3f2d185fa', colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '17bd1cf79389600b9db869edc20edd5c065dca59', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) }))))))));
     }
     static get watchers() { return {
         "pagingParams": ["updateOnPropChange"],

package/dist/module/utils4.js

@@ -1,4 +1,4 @@
-import { a as ComponentErrorCodes } from './Checkout.js';
+import { a as ComponentErrorCodes } from './Refund.js';
 
 // Errors on [capital]/config/locales/en.yml
 // Add more errors as needed

package/dist/types/api/BillingInformation.d.ts

@@ -0,0 +1,13 @@
+type IBankAccountBillingInfo = {
+    name: string;
+    address_line1: string;
+    address_line2: string;
+    address_city: string;
+    address_state: string;
+    address_postal_code: string;
+};
+type IPostalCode = {
+    address_postal_code: number;
+};
+export type IBillingInfo = IPostalCode | IBankAccountBillingInfo;
+export {};

package/dist/types/api/Checkout.d.ts

@@ -89,19 +89,7 @@ export declare class Checkout implements ICheckout {
     payment_amount: number;
     payment_client_id: string;
     payment_description: string;
-    payment_methods: {
-        id: string;
-        status: string;
-        invalid_reason: null;
-        name: string;
-        brand: string;
-        acct_last_four: string;
-        month: string;
-        year: string;
-        address_line1_check: string;
-        address_postal_code_check: string;
-        bin_details: null;
-    }[];
+    payment_methods: ICheckoutPaymentMethod[];
     payment_method_group_id: string;
     payment_settings: {
         ach_payments: boolean;
@@ -163,4 +151,18 @@ export interface CheckoutsQueryParams {
     status?: ICheckoutStatus;
     payment_mode?: ICheckoutPaymentMode;
 }
+export interface ICheckoutPaymentMethod {
+    id: string;
+    type?: string;
+    status: string;
+    invalid_reason: null;
+    name: string;
+    brand: string;
+    acct_last_four: string;
+    month: string;
+    year: string;
+    address_line1_check: string;
+    address_postal_code_check: string;
+    bin_details: null;
+}
 export {};

package/dist/types/api/ComponentError.d.ts

@@ -5,10 +5,12 @@ export declare enum ComponentErrorCodes {
     POST_ERROR = "post-error",
     UNKNOWN_ERROR = "unknown-error",
     TOKENIZE_ERROR = "tokenize-error",
+    COMPLETE_CHECKOUT_ERROR = "complete-checkout-error",
     NOT_AUTHENTICATED = "not-authenticated",
     INVALID_PARAMETER = "invalid-parameter",
     PROVISIONING_REQUESTED = "provisioning-already-requested",
-    INVALID_REFUND_AMOUNT = "invalid-refund-amount"
+    INVALID_REFUND_AMOUNT = "invalid-refund-amount",
+    VALIDATION_ERROR = "validation-error"
 }
 export declare enum ComponentErrorSeverity {
     INFO = "info",

package/dist/types/api/PaymentMethod.d.ts

@@ -0,0 +1,21 @@
+export interface ISavedPaymentMethod {
+    payment_method_group_id?: string;
+}
+export interface IPaymentMethodCard {
+    address_postal_code: number;
+    number: string;
+    month: string;
+    year: string;
+    verification: string;
+}
+export interface IPaymentMethodBankAccount {
+    account_number: string;
+    routing_number: string;
+    account_type: string;
+    account_holder_name: string;
+    account_holder_type: string;
+    country: string;
+    currency: string;
+}
+export type ISubmitCheckoutArgs = IPaymentMethodCard | IPaymentMethodBankAccount;
+export type IPaymentMethodMetadata = ISavedPaymentMethod & ISubmitCheckoutArgs;

package/dist/types/components/checkout/billing-form/billing-form-schema.d.ts

@@ -1,9 +1,9 @@
 export interface BillingFormFields {
-    name: string;
-    address_line1: string;
+    name?: string;
+    address_line1?: string;
     address_line2?: string;
-    address_city: string;
-    address_state: string;
+    address_city?: string;
+    address_state?: string;
     address_postal_code: string;
 }
 export declare const billingFormSchema: (postalOnly?: boolean) => import("yup").ObjectSchema<{

package/dist/types/components/checkout/checkout.d.ts

@@ -1,31 +1,50 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import JustifiAnalytics from '../../api/Analytics';
 import { BillingFormFields } from './billing-form/billing-form-schema';
-import { ILoadedEventResponse } from '../../api';
-import { ComponentErrorEvent } from '../../api/ComponentEvents';
+import { ICheckout, ILoadedEventResponse } from '../../api';
+import { ComponentErrorEvent, ComponentSubmitEvent } from '../../api/ComponentEvents';
+import { PaymentMethodOption } from './payment-method-option-utils';
 export declare class Checkout {
+    analytics: JustifiAnalytics;
+    modularCheckoutRef?: HTMLJustifiModularCheckoutElement;
+    selectedPaymentMethodOptionRef?: HTMLJustifiNewPaymentMethodElement | HTMLJustifiSavedPaymentMethodElement | HTMLJustifiSezzlePaymentMethodElement;
+    checkout: ICheckout;
+    complete: Function;
+    errorMessage: string;
+    insuranceToggled: boolean;
+    isSubmitting: boolean;
+    paymentMethodOptions: PaymentMethodOption[];
+    savePaymentMethod: boolean;
+    serverError: string;
     authToken: string;
     checkoutId: string;
-    disableCreditCard?: boolean;
     disableBankAccount?: boolean;
     disableBnpl?: boolean;
+    disableCreditCard?: boolean;
     disablePaymentMethodGroup?: boolean;
-    hideCardBillingForm?: boolean;
     hideBankAccountBillingForm?: boolean;
-    getCheckout: Function;
-    complete: Function;
-    errorMessage: string;
+    hideCardBillingForm?: boolean;
+    propChanged(): void;
     errorEvent: EventEmitter<ComponentErrorEvent>;
     loadedEvent: EventEmitter<ILoadedEventResponse>;
-    private checkoutCoreRef?;
-    analytics: JustifiAnalytics;
+    submitEvent: EventEmitter<ComponentSubmitEvent>;
+    connectedCallback(): void;
     componentWillLoad(): void;
     disconnectedCallback(): void;
-    private initializeGetCheckout;
-    propChanged(): void;
+    savePaymentMethodChanged(event: CustomEvent<boolean>): void;
+    checkoutComplete(_event: CustomEvent<any>): void;
+    checkoutError(event: CustomEvent<any>): void;
+    paymentMethodOptionSelected(event: CustomEvent<PaymentMethodOption>): void;
     fillBillingForm(fields: BillingFormFields): Promise<void>;
     validate(): Promise<{
         isValid: boolean;
     }>;
+    private updateStore;
+    private submit;
+    private get canSavePaymentMethod();
+    private get showBillingForm();
+    private get showBillingFormSection();
+    private get showPaymentTypeHeader();
+    private get showPostalCodeForm();
     render(): any;
 }

package/dist/types/components/checkout/payment-method-options.d.ts

@@ -5,8 +5,8 @@ import { BillingFormFields } from './billing-form/billing-form-schema';
 export declare class PaymentMethodOptions {
     showCard: boolean;
     showAch: boolean;
-    showBnpl: boolean;
     showSavedPaymentMethods: boolean;
+    showBnpl: boolean;
     paymentMethodGroupId?: string;
     bnpl: IBnpl;
     insuranceToggled: boolean;
@@ -16,13 +16,13 @@ export declare class PaymentMethodOptions {
     paymentAmount: number;
     hideCardBillingForm?: boolean;
     hideBankAccountBillingForm?: boolean;
-    selectedPaymentMethodId: string;
     paymentMethodOptions: PaymentMethodOption[];
     private selectedPaymentMethodOptionRef?;
     fillBillingForm(fields: BillingFormFields): Promise<void>;
     connectedCallback(): void;
     paymentMethodsChanged(): void;
     paymentMethodOptionSelected(event: CustomEvent<PaymentMethodOption>): void;
+    private get hiddenRadioInput();
     resolvePaymentMethod(insuranceValidation: any): Promise<PaymentMethodPayload>;
     validate(): Promise<{
         isValid: boolean;

package/dist/types/components/insurance/season-interruption/season-interruption-insurance.d.ts

@@ -2,8 +2,8 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 import JustifiAnalytics from '../../../api/Analytics';
 import { ComponentErrorEvent } from '../../../api/ComponentEvents';
 export declare class SeasonInterruptionInsurance {
-    authToken: string;
-    checkoutId: string;
+    authToken?: string;
+    checkoutId?: string;
     primaryIdentityFirstName: string;
     primaryIdentityLastName: string;
     primaryIdentityState: string;

package/dist/types/components/modular-checkout/modular-checkout.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from "../../stencil-public-runtime";
+import JustifiAnalytics from "../../api/Analytics";
+import { BillingFormFields } from "../../components";
+export declare class CheckoutWrapper {
+    analytics: JustifiAnalytics;
+    private observer?;
+    private paymentMethodFormRef?;
+    private billingInformationFormRef?;
+    private insuranceFormRef?;
+    private sezzlePaymentMethodRef?;
+    private getCheckout;
+    private completeCheckout;
+    authToken: string;
+    checkoutId: string;
+    savePaymentMethod?: boolean;
+    hostEl: HTMLElement;
+    errorEvent: EventEmitter;
+    submitEvent: EventEmitter;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private fetchCheckout;
+    private updateStore;
+    private queryFormRefs;
+    private tokenizePaymentMethod;
+    private getPaymentMethod;
+    validate(): Promise<boolean>;
+    submitCheckout(submitCheckoutArgs?: BillingFormFields): Promise<void>;
+    render(): any;
+}

package/dist/types/components/modular-checkout/sub-components/bank-account-skeleton.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "../../../stencil-public-runtime";
+interface BankAccountFormSkeletonProps {
+    isReady: boolean;
+}
+declare const BankAccountFormSkeleton: FunctionalComponent<BankAccountFormSkeletonProps>;
+export default BankAccountFormSkeleton;

package/dist/types/components/modular-checkout/sub-components/bank-account.d.ts

@@ -0,0 +1,18 @@
+import JustifiAnalytics from "../../../api/Analytics";
+export declare class BankAccountForm {
+    iframeOrigin: string;
+    isReady: boolean;
+    private accountNumberIframeElement;
+    private routingNumberIframeElement;
+    analytics: JustifiAnalytics;
+    componentWillLoad(): Promise<void>;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    validate(): Promise<any>;
+    tokenize({ clientId, paymentMethodMetadata, account }: {
+        clientId: string;
+        paymentMethodMetadata: any;
+        account?: string;
+    }): Promise<any>;
+    render(): any;
+}

package/dist/types/components/modular-checkout/sub-components/billing-form-schema.d.ts

@@ -0,0 +1,23 @@
+export interface BillingFormFields {
+    name: string;
+    address_line1: string;
+    address_line2?: string;
+    address_city: string;
+    address_state: string;
+    address_postal_code: string;
+}
+export declare const billingFormSchema: (postalOnly?: boolean) => import("yup").ObjectSchema<{
+    name: string;
+    address_line1: string;
+    address_line2: string;
+    address_city: string;
+    address_state: string;
+    address_postal_code: string;
+}, import("yup").AnyObject, {
+    name: undefined;
+    address_line1: undefined;
+    address_line2: undefined;
+    address_city: undefined;
+    address_state: undefined;
+    address_postal_code: undefined;
+}, "">;

package/dist/types/components/modular-checkout/sub-components/billing-information-form.d.ts

@@ -0,0 +1,18 @@
+import { BillingFormFields } from './billing-form-schema';
+import { FormController } from '../../../ui-components/form/form';
+export declare class BillingInformationForm {
+    unsubscribe: () => void;
+    formController: FormController;
+    billingInfo: {};
+    errors: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    inputHandler: (name: string, value: string) => void;
+    getValues(): Promise<BillingFormFields>;
+    validate(): Promise<{
+        isValid: boolean;
+    }>;
+    render(): any;
+}

package/dist/types/components/modular-checkout/sub-components/card-form-skeleton.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalComponent } from "../../../stencil-public-runtime";
+interface CardFormSkeletonProps {
+    isReady: boolean;
+}
+declare const CardFormSkeleton: FunctionalComponent<CardFormSkeletonProps>;
+export default CardFormSkeleton;

package/dist/types/components/modular-checkout/sub-components/card-form.d.ts

@@ -0,0 +1,20 @@
+import JustifiAnalytics from "../../../api/Analytics";
+export declare class JustifiCardForm {
+    isReady: boolean;
+    iframeOrigin: string;
+    private cardNumberIframeElement;
+    private expirationMonthIframeElement;
+    private expirationYearIframeElement;
+    private cvvIframeElement;
+    analytics: JustifiAnalytics;
+    componentWillLoad(): Promise<void>;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    validate(): Promise<any>;
+    tokenize({ clientId, paymentMethodMetadata, account, }: {
+        clientId: string;
+        paymentMethodMetadata: any;
+        account?: string;
+    }): Promise<any>;
+    render(): any;
+}

package/dist/types/components/modular-checkout/sub-components/payment-method-option.d.ts

@@ -0,0 +1,8 @@
+export declare class PaymentMethodOption {
+    paymentMethodOptionId: string;
+    isSelected: boolean;
+    clickHandler: (event: MouseEvent) => void;
+    radioButtonHidden: boolean;
+    label: string;
+    render(): any;
+}

package/dist/types/components/modular-checkout/sub-components/postal-code-form.d.ts

@@ -0,0 +1,19 @@
+import { FormController } from "../../../ui-components/form/form";
+import { BillingFormFields } from "./billing-form-schema";
+export declare class PostalCodeForm {
+    unsubscribe: () => void;
+    formController: FormController;
+    billingInfo: {};
+    errors: any;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    inputHandler: (name: string, value: string) => void;
+    getValues(): Promise<BillingFormFields>;
+    fill(fields: BillingFormFields): Promise<void>;
+    validate(): Promise<{
+        isValid: boolean;
+    }>;
+    render(): any;
+}

package/dist/types/components/modular-checkout/sub-components/saved-payment-methods.d.ts

@@ -0,0 +1,7 @@
+import { ICheckoutPaymentMethod } from '../../../api';
+export declare class SavedPaymentMethods {
+    componentWillLoad(): void;
+    onPaymentMethodOptionClick: (paymentMethodId: string) => (e: Event) => void;
+    isAllowedPaymentMethod: (paymentMethod: ICheckoutPaymentMethod) => boolean;
+    render(): any;
+}

package/dist/types/components/{checkout → modular-checkout/sub-components}/sezzle-payment-method.d.ts

@@ -1,18 +1,12 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { PaymentMethodOption } from './payment-method-option-utils';
-import { PaymentMethodPayload } from './payment-method-payload';
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { PaymentMethodPayload } from '../../checkout/payment-method-payload';
 export declare class SezzlePaymentMethod {
-    bnpl: any;
-    clientId: string;
-    accountId: string;
-    paymentMethodOption: PaymentMethodOption;
-    isSelected: boolean;
-    paymentAmount: number;
     installmentPlan: any;
     sezzleCheckout: any;
     sezzlePromise: Promise<PaymentMethodPayload>;
     private scriptRef;
     private sezzleButtonRef;
+    private paymentMethodOptionId;
     paymentMethodOptionSelected: EventEmitter;
     componentDidRender(): void;
     resolvePaymentMethod(insuranceValidation: any): Promise<PaymentMethodPayload>;

package/dist/types/components/modular-checkout/sub-components/summary.d.ts

@@ -0,0 +1,3 @@
+export declare class Summary {
+    render(): any;
+}

package/dist/types/components/tokenize-payment-method/tokenize-payment-method.d.ts

@@ -4,8 +4,8 @@ import { BillingFormFields } from '../../components';
 import { PaymentMethodPayload } from '../checkout/payment-method-payload';
 import { ComponentSubmitEvent, ComponentErrorEvent } from '../../api';
 export declare class TokenizePaymentMethod {
-    authToken: string;
-    accountId: string;
+    authToken?: string;
+    accountId?: string;
     paymentMethodGroupId: string;
     submitButtonText: string;
     disableCreditCard?: boolean;