@justifi/webcomponents 4.13.0-rc.0 → 4.13.0-rc.1

package/dist/collection/api/Api.js

@@ -27,13 +27,16 @@ const Api = (authToken, apiOrigin) => {
     async function post(endpoint, body, params, signal) {
         return makeRequest(endpoint, 'POST', params, body, signal);
     }
+    async function put(endpoint, body, params, signal) {
+        return makeRequest(endpoint, 'PUT', params, body, signal);
+    }
     async function patch(endpoint, body, params, signal) {
         return makeRequest(endpoint, 'PATCH', params, body, signal);
     }
     async function destroy(endpoint, params, signal) {
         return makeRequest(endpoint, 'DELETE', params, null, signal);
     }
-    return { get, post, patch, destroy };
+    return { get, post, put, patch, destroy };
 };
 function handleError(requestUrl) {
     console.error(`Error fetching from ${requestUrl}`);

package/dist/collection/collection-manifest.json

@@ -37,6 +37,7 @@
     "components/details/details.js",
     "components/form/form-control-date.js",
     "components/form/form-control-datepart.js",
+    "components/form/form-control-file.js",
     "components/form/form-control-monetary.js",
     "components/form/form-control-number-masked.js",
     "components/form/form-control-number.js",

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

@@ -32,8 +32,7 @@ export const makeCheckoutComplete = ({ authToken, checkoutId, service }) => asyn
     try {
         const response = await service.complete(authToken, checkoutId, payment);
         if (!response.error) {
-            const checkout = response.data;
-            onSuccess({ checkout });
+            onSuccess(response);
         }
         else {
             const responseError = getErrorMessage(response.error);

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

@@ -2,12 +2,21 @@ import { h, Host } from "@stencil/core";
 import { extractComputedFontsToLoad, formatCurrency } from "../../utils/utils";
 import { config } from "../../../config";
 import { Checkout } from "../../api/Checkout";
+import { ComponentErrorSeverity } from "../../api/ComponentError";
 export class CheckoutCore {
     constructor() {
         this.onSubmitted = (data) => {
             this.submitted.emit(data);
             this.isLoading = false;
         };
+        this.onError = ({ error, code, severity }) => {
+            this.errorEvent.emit({
+                errorCode: code,
+                message: error,
+                severity,
+            });
+            this.isLoading = false;
+        };
         this.loadingSpinner = (h("div", { class: "spinner-border spinner-border-sm", role: "status" }, h("span", { class: "visually-hidden" }, "Loading...")));
         this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
@@ -18,7 +27,6 @@ export class CheckoutCore {
         this.isLoading = false;
         this.checkout = undefined;
         this.serverError = false;
-        this.errorMessage = '';
         this.creatingNewPaymentMethod = false;
     }
     componentWillLoad() {
@@ -40,7 +48,6 @@ export class CheckoutCore {
                 this.isLoading = false;
             },
             onError: ({ error, code, severity }) => {
-                this.errorMessage = error;
                 this.isLoading = false;
                 this.errorEvent.emit({
                     errorCode: code,
@@ -68,23 +75,30 @@ export class CheckoutCore {
         event.preventDefault();
         this.isLoading = true;
         const payload = await this.paymentMethodOptionsRef.resolvePaymentMethod();
-        if (payload.token) {
+        if (!payload) {
+            this.isLoading = false;
+        }
+        else if (payload.error) {
+            this.onError({
+                code: payload.error.code,
+                error: payload.error.message,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+        else if (payload.token) {
             this.complete({
                 payment: { payment_mode: 'ecom', payment_token: payload.token },
                 onSuccess: this.onSubmitted,
-                onError: this.onSubmitted,
+                onError: this.onError,
             });
         }
         else if (((_a = payload.bnpl) === null || _a === void 0 ? void 0 : _a.status) === 'success') {
             this.complete({
                 payment: { payment_mode: 'bnpl' },
                 onSuccess: this.onSubmitted,
-                onError: this.onSubmitted,
+                onError: this.onError,
             });
         }
-        else {
-            this.isLoading = false;
-        }
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
@@ -204,7 +218,6 @@ export class CheckoutCore {
             "isLoading": {},
             "checkout": {},
             "serverError": {},
-            "errorMessage": {},
             "creatingNewPaymentMethod": {}
         };
     }

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

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { makeGetCheckout, makeCheckoutComplete } from "./checkout-actions";
 import { CheckoutService } from "../../api/services/checkout.service";
+import { ComponentErrorCodes, ComponentErrorSeverity } from "../../api/ComponentError";
 export class Checkout {
     constructor() {
         this.iframeOrigin = undefined;
@@ -27,7 +28,11 @@ export class Checkout {
             });
         }
         else {
-            this.errorMessage = 'auth-token and checkout-id are required';
+            this.errorEvent.emit({
+                message: 'auth-token and checkout-id are required',
+                errorCode: ComponentErrorCodes.MISSING_PROPS,
+                severity: ComponentErrorSeverity.ERROR,
+            });
         }
     }
     propChanged() {
@@ -37,7 +42,6 @@ export class Checkout {
         return (h("justifi-checkout-core", { getCheckout: this.getCheckout, complete: this.complete }));
     }
     static get is() { return "justifi-checkout"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
             "iframeOrigin": {
@@ -100,6 +104,30 @@ export class Checkout {
             "errorMessage": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "errorEvent",
+                "name": "error-event",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ComponentError",
+                    "resolved": "ComponentError",
+                    "references": {
+                        "ComponentError": {
+                            "location": "import",
+                            "path": "../../api/ComponentError",
+                            "id": "src/api/ComponentError.ts::ComponentError"
+                        }
+                    }
+                }
+            }];
+    }
     static get watchers() {
         return [{
                 "propName": "authToken",

package/dist/collection/components/checkout/new-payment-method.js

@@ -16,14 +16,21 @@ export class NewPaymentMethod {
         this.isSelected = undefined;
     }
     async resolvePaymentMethod() {
+        var _a, _b;
         if (!this.paymentMethodFormRef || !this.billingFormRef)
             return;
         const billingFormValidation = await this.billingFormRef.validate();
         const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
         if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
             return;
-        const token = await this.tokenize();
-        return { token: token };
+        const tokenizeResponse = await this.tokenize();
+        if (tokenizeResponse.error) {
+            return { error: tokenizeResponse.error };
+        }
+        else {
+            const tokenizeRessponseData = tokenizeResponse.data;
+            return { token: ((_a = tokenizeRessponseData.card) === null || _a === void 0 ? void 0 : _a.token) || ((_b = tokenizeRessponseData.bank_account) === null || _b === void 0 ? void 0 : _b.token) };
+        }
     }
     async tokenize() {
         try {
@@ -31,17 +38,10 @@ export class NewPaymentMethod {
             const paymentMethodData = Object.assign({}, billingFormFieldValues);
             const clientId = this.clientId;
             const tokenizeResponse = await this.paymentMethodFormRef.tokenize(clientId, paymentMethodData, this.accountId);
-            if (tokenizeResponse.error) {
-                console.error(`An error occured submitting the form: ${tokenizeResponse.error.message}`);
-                return null;
-            }
-            const data = tokenizeResponse.data;
-            const tokenizedPaymentMethod = data.card || data.ach; // fix the response types to avoid this
-            return tokenizedPaymentMethod.token;
+            return tokenizeResponse;
         }
         catch (error) {
-            console.error(`An error occured submitting the form: ${error}`);
-            return null;
+            return error;
         }
     }
     showNewPaymentMethodForm() {

package/dist/collection/components/checkout/test/checkout-actions.spec.js

@@ -83,9 +83,7 @@ describe('makeCheckoutComplete', () => {
             service: mockService,
         });
         await completeCheckout({ payment, onSuccess, onError });
-        expect(onSuccess).toHaveBeenCalledWith({
-            checkout: new Checkout(mockResponse.data),
-        });
+        expect(onSuccess).toHaveBeenCalledWith(mockResponse);
         expect(onError).not.toHaveBeenCalled();
     });
     it('calls onError with an error message on post error', async () => {

package/dist/collection/components/checkout/test/checkout-core.spec.js

@@ -104,7 +104,7 @@ describe('justifi-checkout-core', () => {
             authToken: '',
             checkoutId: '',
             service: {
-                fetchCheckout: async () => mockPostCheckoutSuccess,
+                complete: async () => mockPostCheckoutSuccess,
             }
         });
         const submittedSpy = jest.fn();
@@ -121,7 +121,7 @@ describe('justifi-checkout-core', () => {
         submitButton.click();
         await page.waitForChanges();
         expect(submittedSpy).toHaveBeenCalledWith(expect.objectContaining({
-            detail: { "code": "fetch-error", "error": "service.complete is not a function", "severity": "error" }
+            detail: mockPostCheckoutSuccess
         }));
     });
 });