@justifi/webcomponents 4.10.0-rc.0 → 4.11.0

package/dist/module/justifi-payment-details.js

@@ -1,14 +1,15 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { P as PaymentService } from './payment.service.js';
 import './Pagination.js';
 import { b as Payment } from './Payment.js';
 import './Payout.js';
-import { g as getErrorMessage } from './utils3.js';
+import { C as ComponentErrorSeverity, g as getErrorMessage, a as getErrorCode, b as ComponentErrorCodes } from './utils3.js';
 import { E as ErrorState } from './utils.js';
 import { d as defineCustomElement$3 } from './details.js';
 import { d as defineCustomElement$2 } from './payment-details-core2.js';
 
 const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess, onError }) => {
+    var _a;
     try {
         const response = await service.fetchPayment(id, authToken);
         if (!response.error) {
@@ -16,11 +17,21 @@ const makeGetPaymentDetails = ({ id, authToken, service }) => async ({ onSuccess
         }
         else {
             const responseError = getErrorMessage(response.error);
-            onError(`Error trying to fetch data : ${responseError}`);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     catch (error) {
-        onError(`Error trying to fetch data : ${error}`);
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        onError({
+            error: getErrorMessage(error),
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
     }
 };
 
@@ -29,7 +40,12 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.errorEvent = createEvent(this, "error-event", 7);
         this.paymentService = new PaymentService();
+        this.handleErrorEvent = event => {
+            this.errorMessage = event.detail.message;
+            this.errorEvent.emit(event.detail);
+        };
         this.paymentId = undefined;
         this.authToken = undefined;
         this.getPaymentDetails = undefined;
@@ -51,13 +67,18 @@ const PaymentDetails = /*@__PURE__*/ proxyCustomElement(class PaymentDetails ext
         }
         else {
             this.errorMessage = 'Payment ID and Auth Token are required';
+            this.errorEvent.emit({
+                message: this.errorMessage,
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     render() {
         if (this.errorMessage) {
             return ErrorState(this.errorMessage);
         }
-        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails }));
+        return (h("payment-details-core", { getPaymentDetails: this.getPaymentDetails, "onError-event": this.handleErrorEvent }));
     }
     static get watchers() { return {
         "paymentId": ["propChanged"],

package/dist/module/justifi-payment-form.js

@@ -4,6 +4,7 @@ import { P as PaymentMethodTypes } from './Payment.js';
 import './Payout.js';
 import { l as loadFontsOnParent } from './utils2.js';
 import { c as config } from './config.js';
+import { b as ComponentErrorCodes, C as ComponentErrorSeverity, g as getErrorMessage } from './utils3.js';
 import { d as defineCustomElement$6 } from './billing-form.js';
 import { d as defineCustomElement$5 } from './payment-method-form.js';
 import { d as defineCustomElement$4 } from './payment-method-selector.js';
@@ -18,6 +19,7 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
         this.__registerHost();
         this.__attachShadow();
         this.submitted = createEvent(this, "submitted", 7);
+        this.errorEvent = createEvent(this, "error-event", 7);
         this.bankAccount = undefined;
         this.card = true;
         this.email = undefined;
@@ -37,6 +39,9 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
     async enableSubmitButton() {
         this.submitButtonEnabled = true;
     }
+    async disableSubmitButton() {
+        this.submitButtonEnabled = false;
+    }
     paymentMethodSelectedHandler(event) {
         const paymentMethodType = event.detail;
         this.selectedPaymentMethodType = paymentMethodType;
@@ -55,12 +60,20 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
             const paymentMethodData = Object.assign({ email: this.email }, billingFormFieldValues);
             const tokenizeResponse = await this.paymentMethodFormRef.tokenize(this.clientId, paymentMethodData, this.accountId);
             if (tokenizeResponse.error) {
-                console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
+                this.errorEvent.emit({
+                    errorCode: ComponentErrorCodes.TOKENIZE_ERROR,
+                    message: tokenizeResponse.error.message,
+                    severity: ComponentErrorSeverity.ERROR
+                });
             }
             this.submitted.emit(tokenizeResponse);
         }
         catch (error) {
-            console.error(`An error occured submitting the form: ${error}`);
+            this.errorEvent.emit({
+                errorCode: ComponentErrorCodes.UNKNOWN_ERROR,
+                message: getErrorMessage(error),
+                severity: ComponentErrorSeverity.ERROR
+            });
         }
         finally {
             this.isLoading = false;
@@ -75,7 +88,7 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
                 if (el) {
                     this.billingFormRef = el;
                 }
-            } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
+            } })), h("slot", { name: 'insurance' }), h("div", { class: "col-12" }, h("button", { "data-testid": "submit-button", type: "submit", onClick: event => this.submit(event), disabled: !this.submitButtonEnabled || this.isLoading, class: `btn btn-primary jfi-submit-button${this.isLoading ? ' jfi-submit-button-loading' : ''}` }, this.isLoading ?
             h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")) :
             this.submitButtonText || 'Submit')))));
     }
@@ -91,7 +104,8 @@ const PaymentForm = /*@__PURE__*/ proxyCustomElement(class PaymentForm extends H
         "isLoading": [32],
         "selectedPaymentMethodType": [32],
         "fillBillingForm": [64],
-        "enableSubmitButton": [64]
+        "enableSubmitButton": [64],
+        "disableSubmitButton": [64]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/module/justifi-payment-provisioning.d.ts

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