@justifi/webcomponents 5.7.4 → 5.7.6-rc-01

package/dist/collection/components/modular-checkout/modular-checkout.js

@@ -0,0 +1,337 @@
+import { h, Host } from "@stencil/core";
+import { checkoutStore } from "../../store/checkout.store";
+import JustifiAnalytics from "../../api/Analytics";
+import { checkPkgVersion } from "../../utils/check-pkg-version";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api";
+import { makeCheckoutComplete, makeGetCheckout } from "../../actions/checkout/checkout-actions";
+import { CheckoutService } from "../../api/services/checkout.service";
+import { insuranceValues, insuranceValuesOn } from "../insurance/insurance-state";
+export class CheckoutWrapper {
+    constructor() {
+        this.savePaymentMethod = false;
+    }
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.queryFormRefs();
+        });
+        this.observer.observe(this.hostEl, {
+            childList: true,
+            subtree: true
+        });
+        checkoutStore.checkoutId = this.checkoutId;
+        const config = {
+            authToken: this.authToken,
+            checkoutId: this.checkoutId,
+            service: new CheckoutService()
+        };
+        this.getCheckout = makeGetCheckout(config);
+        this.completeCheckout = makeCheckoutComplete(config);
+    }
+    componentWillLoad() {
+        this.analytics = new JustifiAnalytics(this);
+        checkPkgVersion();
+        checkoutStore.authToken = this.authToken;
+        this.fetchCheckout();
+        // Refresh the checkout data when insurance is added or removed
+        insuranceValuesOn('set', (key) => {
+            const value = insuranceValues[key];
+            if (value !== undefined) {
+                this.fetchCheckout();
+            }
+        });
+    }
+    componentDidLoad() {
+        this.queryFormRefs();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    fetchCheckout() {
+        if (this.getCheckout) {
+            this.getCheckout({
+                onSuccess: ({ checkout }) => {
+                    this.updateStore(checkout);
+                },
+                onError: (error) => {
+                    this.errorEvent.emit({
+                        message: error.message,
+                        errorCode: ComponentErrorCodes.FETCH_ERROR,
+                        severity: ComponentErrorSeverity.ERROR,
+                    });
+                }
+            });
+        }
+    }
+    updateStore(checkout) {
+        var _a, _b, _c, _d;
+        checkoutStore.accountId = checkout.account_id;
+        checkoutStore.paymentMethods = checkout.payment_methods;
+        checkoutStore.paymentMethodGroupId = checkout.payment_method_group_id;
+        checkoutStore.paymentDescription = checkout.payment_description;
+        checkoutStore.totalAmount = checkout.total_amount;
+        checkoutStore.paymentAmount = checkout.payment_amount;
+        checkoutStore.bnplEnabled = checkout.payment_settings.bnpl_payments;
+        checkoutStore.bnplProviderClientId = (_a = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _a === void 0 ? void 0 : _a.provider_client_id;
+        checkoutStore.bnplProviderMode = (_b = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _b === void 0 ? void 0 : _b.provider_mode;
+        checkoutStore.bnplProviderApiVersion = (_c = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _c === void 0 ? void 0 : _c.provider_api_version;
+        checkoutStore.bnplProviderCheckoutUrl = (_d = checkout === null || checkout === void 0 ? void 0 : checkout.bnpl) === null || _d === void 0 ? void 0 : _d.provider_checkout_url;
+    }
+    queryFormRefs() {
+        this.paymentMethodFormRef = this.hostEl.querySelector('justifi-card-form, justifi-bank-account-form');
+        this.billingInformationFormRef = this.hostEl.querySelector('justifi-billing-information-form, justifi-postal-code-form');
+        this.insuranceFormRef = this.hostEl.querySelector('justifi-season-interruption-insurance');
+        this.sezzlePaymentMethodRef = this.hostEl.querySelector('justifi-sezzle-payment-method');
+    }
+    async tokenizePaymentMethod(tokenizeArgs) {
+        var _a, _b;
+        const billingInfoValues = (_b = await ((_a = this.billingInformationFormRef) === null || _a === void 0 ? void 0 : _a.getValues())) !== null && _b !== void 0 ? _b : {};
+        const combinedBillingInfo = Object.assign(Object.assign({}, tokenizeArgs), billingInfoValues);
+        const paymentMethodMetadata = Object.assign({ accountId: checkoutStore.accountId, payment_method_group_id: undefined }, combinedBillingInfo);
+        if (this.savePaymentMethod) {
+            paymentMethodMetadata.payment_method_group_id = checkoutStore.paymentMethodGroupId;
+        }
+        return this.paymentMethodFormRef.tokenize({
+            clientId: this.authToken,
+            paymentMethodMetadata,
+            account: checkoutStore.accountId,
+        });
+    }
+    async getPaymentMethod(submitCheckoutArgs) {
+        if (!this.paymentMethodFormRef) {
+            return checkoutStore.selectedPaymentMethod;
+        }
+        const { error, id: token } = await this.tokenizePaymentMethod(submitCheckoutArgs);
+        if (error) {
+            this.errorEvent.emit({
+                errorCode: error.code,
+                message: error.message,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return undefined;
+        }
+        return token;
+    }
+    async validate() {
+        var _a, _b;
+        const promises = [
+            (_a = this.paymentMethodFormRef) === null || _a === void 0 ? void 0 : _a.validate(),
+            (_b = this.billingInformationFormRef) === null || _b === void 0 ? void 0 : _b.validate()
+        ];
+        if (this.insuranceFormRef) {
+            promises.push(this.insuranceFormRef.validate());
+        }
+        const validationResults = await Promise.all(promises);
+        return validationResults.every(result => (result === null || result === void 0 ? void 0 : result.isValid) !== false);
+    }
+    async submitCheckout(submitCheckoutArgs) {
+        var _a;
+        const isValid = await this.validate();
+        if (!isValid) {
+            this.errorEvent.emit({
+                message: 'Please fill in all required fields.',
+                errorCode: ComponentErrorCodes.VALIDATION_ERROR,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+            return;
+        }
+        let payment;
+        if (checkoutStore.selectedPaymentMethod === 'sezzle') {
+            const insuranceValidation = this.insuranceFormRef ? await this.insuranceFormRef.validate() : { isValid: true };
+            const sezzleResult = await this.sezzlePaymentMethodRef.resolvePaymentMethod(insuranceValidation);
+            if (sezzleResult.error) {
+                this.errorEvent.emit({
+                    message: sezzleResult.error.message,
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            else if (((_a = sezzleResult.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
+                payment = {
+                    payment_mode: 'bnpl',
+                    payment_token: undefined,
+                };
+            }
+        }
+        else {
+            const paymentMethod = await this.getPaymentMethod(submitCheckoutArgs);
+            if (!paymentMethod) {
+                this.errorEvent.emit({
+                    message: 'Payment method tokenization failed.',
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+                return;
+            }
+            ;
+            payment = {
+                payment_mode: 'ecom',
+                payment_token: paymentMethod,
+            };
+        }
+        this.completeCheckout({
+            payment,
+            onSuccess: ({ checkout }) => {
+                this.submitEvent.emit({
+                    checkout,
+                    message: 'Checkout completed successfully',
+                });
+            },
+            onError: (error) => {
+                this.errorEvent.emit({
+                    message: error.message,
+                    errorCode: ComponentErrorCodes.COMPLETE_CHECKOUT_ERROR,
+                    severity: ComponentErrorSeverity.ERROR,
+                });
+            },
+        });
+    }
+    render() {
+        return (h(Host, { key: 'a9a6bd46fce34ecd2aec40db02f04c25ed500396' }));
+    }
+    static get is() { return "justifi-modular-checkout"; }
+    static get properties() {
+        return {
+            "authToken": {
+                "type": "string",
+                "attribute": "auth-token",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "checkoutId": {
+                "type": "string",
+                "attribute": "checkout-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "savePaymentMethod": {
+                "type": "boolean",
+                "attribute": "save-payment-method",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "submitEvent",
+                "name": "submit-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "submitCheckout": {
+                "complexType": {
+                    "signature": "(submitCheckoutArgs?: BillingFormFields) => Promise<void>",
+                    "parameters": [{
+                            "name": "submitCheckoutArgs",
+                            "type": "BillingFormFields",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}

package/dist/collection/components/modular-checkout/sub-components/bank-account-skeleton.js

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const BankAccountFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "row mb-3" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "120px" }), h(Skeleton, { height: "36px" }))), h("div", { class: "row" }, h("div", { class: "col-12 align-content-end" }, h(Skeleton, { height: "18px", width: "110px" }), h(Skeleton, { height: "36px" })))));
+};
+export default BankAccountFormSkeleton;

package/dist/collection/components/modular-checkout/sub-components/bank-account.js

@@ -0,0 +1,98 @@
+import { h } from "@stencil/core";
+import { StyledHost } from "../../../ui-components";
+import BankAccountFormSkeleton from "./bank-account-skeleton";
+import { checkPkgVersion } from "../../../utils/check-pkg-version";
+import JustifiAnalytics from "../../../api/Analytics";
+import { configState, waitForConfig } from "../../config-provider/config-state";
+export class BankAccountForm {
+    constructor() {
+        this.isReady = false;
+    }
+    async componentWillLoad() {
+        await waitForConfig();
+        this.iframeOrigin = configState.iframeOrigin;
+        checkPkgVersion();
+        this.analytics = new JustifiAnalytics(this);
+    }
+    componentDidRender() {
+        const elements = [
+            this.accountNumberIframeElement,
+            this.routingNumberIframeElement,
+        ];
+        Promise.all(elements.map((element) => {
+            return new Promise((resolve) => {
+                element.addEventListener('iframeLoaded', () => { resolve(); });
+            });
+        })).then(() => {
+            this.isReady = true;
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.analytics) === null || _a === void 0 ? void 0 : _a.cleanup();
+    }
+    async validate() {
+        const accountNumberIsValid = await this.accountNumberIframeElement.validate();
+        const routingNumberIsValid = await this.routingNumberIframeElement.validate();
+        return accountNumberIsValid && routingNumberIsValid;
+    }
+    async tokenize({ clientId, paymentMethodMetadata, account }) {
+        return this.accountNumberIframeElement.tokenize(clientId, paymentMethodMetadata, account);
+    }
+    render() {
+        return (h(StyledHost, { key: '62a8adb8888d6143bbc27678ccff125c7b3a59ec' }, h(BankAccountFormSkeleton, { key: 'a73372809ad95b4aa900aa6907ce4517ce01cdde', isReady: this.isReady }), h("hidden-input", { key: 'a9324304388bf0b3b19bfe4f8ea56c9fad1a12e7' }), h("div", { key: '7b7584c3af3bfe6ca6fb7bdbec25d4c0c9d43b40', class: "container-fluid p-0", style: {
+                opacity: this.isReady ? '1' : '0',
+                height: this.isReady ? 'auto' : '0',
+            } }, h("div", { key: '40c0352915f903b5ba6fda1642644158daf129b7', class: "row mb-3" }, h("iframe-input", { key: 'af64688e5d8b5da6898a5e20550cc1992a28fe9c', inputId: "accountNumber", ref: (el) => (this.accountNumberIframeElement = el), label: "Account Number", iframeOrigin: `${this.iframeOrigin}/v2/accountNumber` })), h("div", { key: '20fbdaffb3d2ba3ac8c44a4b64040f146ad58789', class: "row" }, h("iframe-input", { key: '5a0fd0855570d0ebbcd1d6be2f569d08a4ae3c17', inputId: "routingNumber", ref: (el) => (this.routingNumberIframeElement = el), label: "Routing Number", iframeOrigin: `${this.iframeOrigin}/v2/routingNumber` })))));
+    }
+    static get is() { return "justifi-bank-account-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "iframeOrigin": {},
+            "isReady": {}
+        };
+    }
+    static get methods() {
+        return {
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<any>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "tokenize": {
+                "complexType": {
+                    "signature": "({ clientId, paymentMethodMetadata, account }: { clientId: string; paymentMethodMetadata: any; account?: string; }) => Promise<any>",
+                    "parameters": [{
+                            "name": "__0",
+                            "type": "{ clientId: string; paymentMethodMetadata: any; account?: string; }",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<any>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/billing-form-schema.js

@@ -0,0 +1,21 @@
+import { object } from "yup";
+import { cityValidation, identityNameValidation, lineOneValidation, lineTwoValidation, postalValidation, stateValidation, } from "../../business-forms/schemas/schema-validations";
+export const billingFormSchema = (postalOnly) => {
+    const fullBillingForm = object({
+        name: identityNameValidation.required('Enter full name'),
+        address_line1: lineOneValidation.required('Enter street address'),
+        address_line2: lineTwoValidation.nullable(),
+        address_city: cityValidation.required('Enter city'),
+        address_state: stateValidation.required('Select state'),
+        address_postal_code: postalValidation.required('Enter postal code'),
+    });
+    const postalForm = object({
+        name: identityNameValidation.nullable(),
+        address_line1: lineOneValidation.nullable(),
+        address_line2: lineTwoValidation.nullable(),
+        address_city: cityValidation.nullable(),
+        address_state: stateValidation.nullable(),
+        address_postal_code: postalValidation.required('Enter postal code'),
+    });
+    return postalOnly ? postalForm : fullBillingForm;
+};

package/dist/collection/components/modular-checkout/sub-components/billing-information-form.js

@@ -0,0 +1,97 @@
+import { h } from "@stencil/core";
+import { billingFormSchema } from "./billing-form-schema";
+import { billingForm } from "../../../styles/parts";
+import { numberOnlyHandler } from "../../../ui-components/form/utils";
+import StateOptions from "../../../utils/state-options";
+import { FormController } from "../../../ui-components/form/form";
+import { StyledHost } from "../../../ui-components";
+import { onChange } from "../../../store/checkout.store";
+export class BillingInformationForm {
+    constructor() {
+        this.errors = {};
+        this.inputHandler = (name, value) => {
+            this.formController.setValues(Object.assign(Object.assign({}, this.formController.values.getValue()), { [name]: value }));
+        };
+    }
+    connectedCallback() {
+        this.unsubscribe = onChange('billingFormFields', (newValue) => {
+            this.formController.setInitialValues(newValue);
+        });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(this);
+    }
+    componentWillLoad() {
+        this.formController = new FormController(billingFormSchema());
+    }
+    componentDidLoad() {
+        this.formController.values.subscribe(values => this.billingInfo = Object.assign({}, values));
+        this.formController.errors.subscribe(errors => {
+            this.errors = Object.assign({}, errors);
+        });
+    }
+    async getValues() {
+        return this.formController.values.getValue();
+    }
+    async validate() {
+        let isValid = await this.formController.validate();
+        return { isValid: isValid };
+    }
+    render() {
+        const billingFormDefaultValue = this.formController.getInitialValues();
+        return (h(StyledHost, { key: '7111e5b5bb74bf5af175910094a75eccaff6f1c1' }, h("div", { key: '2ab9f375ca4d7b911f121a54eacbf1db58922fbf', part: billingForm }, h("form", { key: '85a3c97691dcbf47c626e879639b56abeae4b2b2' }, h("fieldset", { key: '8fbc358d9e9341f909484e1854f61fcfd1eb1fb7' }, h("div", { key: 'f829796613bf471ad10e9b56c925c279b89d1285', class: "row gy-3" }, h("div", { key: 'fb4db86dffdef38fdbdce46ff616ca04ae76e2d3', class: "col-12" }, h("form-control-text", { key: '8fbb9905623d60a3927e12b378643ba114444317', name: 'name', label: 'Full Name', defaultValue: billingFormDefaultValue.name, errorText: this.errors.name, inputHandler: this.inputHandler })), h("div", { key: 'ad970e98848b37a7fbf38426816934d6d07f3f0c', class: "col-12" }, h("form-control-text", { key: '6e760651837835e11302b8c67a2df8fca1e8ed7e', name: 'address_line1', label: 'Street Address', defaultValue: billingFormDefaultValue.address_line1, errorText: this.errors.address_line1, inputHandler: this.inputHandler })), h("div", { key: 'e0e5e930cbe8d1004c9c042d11808cdfe249ec63', class: "col-12" }, h("form-control-text", { key: '804eddc192b2986da21e408c6ec4b0e5776cdc97', name: 'address_line2', label: "Apartment, Suite, etc. (optional)", defaultValue: billingFormDefaultValue.address_line2, errorText: this.errors.address_line2, inputHandler: this.inputHandler })), h("div", { key: '816709631875826395d2299c550aab269ebcc978', class: "col-12" }, h("form-control-text", { key: '51f9d36ac48eb9fd96e1174464c8626a5186f8fa', name: 'address_city', label: "City", defaultValue: billingFormDefaultValue.address_city, errorText: this.errors.address_city, inputHandler: this.inputHandler })), h("div", { key: 'd6a218546863ca966ca29b6a25c7965133e03e9c', class: "col-12" }, h("form-control-select", { key: '09a02e39dd8fe8bd994f66e29c0c30e232a0fe62', name: 'address_state', label: 'State', options: StateOptions, defaultValue: billingFormDefaultValue.address_state, errorText: this.errors.address_state, inputHandler: this.inputHandler })), h("div", { key: '171d7901a169a8a86dae6db50f85094d891a754e', class: "col-12" }, h("form-control-text", { key: '9c0654206e6e7a6f3e8ec1f6e91c856d56fb10f4', name: 'address_postal_code', label: "ZIP", defaultValue: billingFormDefaultValue.address_postal_code, errorText: this.errors.address_postal_code, inputHandler: this.inputHandler, maxLength: 5, keyDownHandler: numberOnlyHandler }))))))));
+    }
+    static get is() { return "justifi-billing-information-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get states() {
+        return {
+            "formController": {},
+            "billingInfo": {},
+            "errors": {}
+        };
+    }
+    static get methods() {
+        return {
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<BillingFormFields>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "BillingFormFields": {
+                            "location": "import",
+                            "path": "./billing-form-schema",
+                            "id": "src/components/modular-checkout/sub-components/billing-form-schema.ts::BillingFormFields"
+                        }
+                    },
+                    "return": "Promise<BillingFormFields>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "validate": {
+                "complexType": {
+                    "signature": "() => Promise<{ isValid: boolean; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ isValid: boolean; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/components/modular-checkout/sub-components/card-form-skeleton.js

@@ -0,0 +1,10 @@
+import { h } from "@stencil/core";
+import { Skeleton } from "../../../ui-components";
+const CardFormSkeleton = (props) => {
+    const { isReady } = props;
+    if (isReady) {
+        return null;
+    }
+    return (h("div", { class: "container-fluid p-0" }, h("div", { class: "mb-3" }, h(Skeleton, { height: "18px", width: "100px" }), h(Skeleton, { height: "36px" })), h("div", { class: "row" }, h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "80px" }), h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "36px" })), h("div", { class: "col-4 align-content-end" }, h(Skeleton, { height: "18px", width: "30px" }), h(Skeleton, { height: "36px" })))));
+};
+export default CardFormSkeleton;