@justifi/webcomponents 4.8.3 → 4.9.1

package/dist/collection/components/business-details/owner-details/owner-details.js

@@ -1,23 +1,21 @@
 import { Host, h } from "@stencil/core";
-import { DetailSection, DetailItem } from "../../details/utils";
+import { DetailSectionTitle, DetailItem } from "../../details/utils";
 import { formatMediumDate } from "../../../utils/utils";
-/**
- *
- * @exportedPart detail-section
- * @exportedPart detail-section-title
- * @exportedPart detail-section-item-title
- * @exportedPart detail-section-item-data
- * @exportedPart detail-empty-state
- */
 export class OwnerDetails {
     constructor() {
         this.owners = undefined;
     }
     render() {
-        return (h(Host, null, !!(this === null || this === void 0 ? void 0 : this.owners.length) ? (this.owners.map(owner => {
+        var _a;
+        if (!((_a = this === null || this === void 0 ? void 0 : this.owners) === null || _a === void 0 ? void 0 : _a.length))
+            return null;
+        return (h(Host, null, !!(this === null || this === void 0 ? void 0 : this.owners.length) && (this.owners.map(owner => {
             var _a, _b, _c, _d, _e;
-            return (h("div", { class: "row" }, h(DetailSection, { sectionTitle: `Owner ${owner === null || owner === void 0 ? void 0 : owner.name}'s Details` }, h(DetailItem, { title: "Name", value: owner === null || owner === void 0 ? void 0 : owner.name }), h(DetailItem, { title: "Title", value: owner === null || owner === void 0 ? void 0 : owner.title }), h(DetailItem, { title: "Email", value: owner === null || owner === void 0 ? void 0 : owner.email }), h(DetailItem, { title: "Phone", value: owner === null || owner === void 0 ? void 0 : owner.phone }), h(DetailItem, { title: "Date of Birth", value: formatMediumDate(new Date(Number(owner === null || owner === void 0 ? void 0 : owner.dob_day), Number(owner === null || owner === void 0 ? void 0 : owner.dob_month), Number(owner === null || owner === void 0 ? void 0 : owner.dob_year))) }), h(DetailItem, { title: "Identification Number", value: `********${owner === null || owner === void 0 ? void 0 : owner.ssn_last4}` }), h(DetailItem, { title: "Line 1", value: (_a = owner === null || owner === void 0 ? void 0 : owner.address) === null || _a === void 0 ? void 0 : _a.line1 }), h(DetailItem, { title: "Line 2", value: (_b = owner === null || owner === void 0 ? void 0 : owner.address) === null || _b === void 0 ? void 0 : _b.line2 }), h(DetailItem, { title: "City", value: (_c = owner === null || owner === void 0 ? void 0 : owner.address) === null || _c === void 0 ? void 0 : _c.city }), h(DetailItem, { title: "State", value: (_d = owner === null || owner === void 0 ? void 0 : owner.address) === null || _d === void 0 ? void 0 : _d.state }), h(DetailItem, { title: "Zip", value: (_e = owner === null || owner === void 0 ? void 0 : owner.address) === null || _e === void 0 ? void 0 : _e.postal_code }))));
-        })) : (h(DetailItem, { title: "No owners", value: "" }))));
+            return [
+                h(DetailSectionTitle, { sectionTitle: `Owner ${owner === null || owner === void 0 ? void 0 : owner.name}'s Details` }),
+                h("div", { class: "d-table gap-2 w-100" }, h(DetailItem, { title: "Name", value: owner === null || owner === void 0 ? void 0 : owner.name }), h(DetailItem, { title: "Title", value: owner === null || owner === void 0 ? void 0 : owner.title }), h(DetailItem, { title: "Email", value: owner === null || owner === void 0 ? void 0 : owner.email }), h(DetailItem, { title: "Phone", value: owner === null || owner === void 0 ? void 0 : owner.phone }), h(DetailItem, { title: "Date of Birth", value: formatMediumDate(new Date(Number(owner === null || owner === void 0 ? void 0 : owner.dob_day), Number(owner === null || owner === void 0 ? void 0 : owner.dob_month), Number(owner === null || owner === void 0 ? void 0 : owner.dob_year))) }), h(DetailItem, { title: "Identification Number", value: `********${owner === null || owner === void 0 ? void 0 : owner.ssn_last4}` }), h(DetailItem, { title: "Line 1", value: (_a = owner === null || owner === void 0 ? void 0 : owner.address) === null || _a === void 0 ? void 0 : _a.line1 }), h(DetailItem, { title: "Line 2", value: (_b = owner === null || owner === void 0 ? void 0 : owner.address) === null || _b === void 0 ? void 0 : _b.line2 }), h(DetailItem, { title: "City", value: (_c = owner === null || owner === void 0 ? void 0 : owner.address) === null || _c === void 0 ? void 0 : _c.city }), h(DetailItem, { title: "State", value: (_d = owner === null || owner === void 0 ? void 0 : owner.address) === null || _d === void 0 ? void 0 : _d.state }), h(DetailItem, { title: "Zip", value: (_e = owner === null || owner === void 0 ? void 0 : owner.address) === null || _e === void 0 ? void 0 : _e.postal_code }))
+            ];
+        }))));
     }
     static get is() { return "owner-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/business-details/owner-details/test/owner-details.spec.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Business } from "../../../../api/Business";
+import mockedBusinessDetails from "../../../../api/mockData/mockBusinessDetails.json";
+import { OwnerDetails } from "../owner-details";
+describe('owner-details', () => {
+    it('should render owner-details', async () => {
+        const businessDetails = new Business(mockedBusinessDetails.data);
+        const page = await newSpecPage({
+            components: [OwnerDetails],
+            template: () => (h("owner-details", { owners: businessDetails.owners })),
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/business-details/representative-details/representative-details.js

@@ -1,6 +1,6 @@
 import { Host, h } from "@stencil/core";
-import { DetailSection, DetailItem } from "../../details/utils";
-import { formatMediumDate } from "../../../utils/utils";
+import { DetailSectionTitle, DetailItem } from "../../details/utils";
+import { formatMediumDate, isEmptyObject } from "../../../utils/utils";
 /**
  *
  * @exportedPart detail-section
@@ -15,7 +15,9 @@ export class JustifiRepresentativeDetails {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        return (h(Host, null, h(DetailSection, { sectionTitle: "Representative Details" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Address", value: (_d = (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d.line1 }), h(DetailItem, { title: "Created At", value: ((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) && formatMediumDate((_f = this.representative) === null || _f === void 0 ? void 0 : _f.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Is Owner?", value: (_h = this.representative) === null || _h === void 0 ? void 0 : _h.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: this.representative && formatMediumDate(new Date(Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_year), Number((_k = this.representative) === null || _k === void 0 ? void 0 : _k.dob_month) - 1, Number((_l = this.representative) === null || _l === void 0 ? void 0 : _l.dob_day))) }), h(DetailItem, { title: "Email", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.email }), h(DetailItem, { title: "Phone", value: (_o = this.representative) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: "Updated At", value: this.representative && formatMediumDate((_p = this.representative) === null || _p === void 0 ? void 0 : _p.updated_at) }))))));
+        if (isEmptyObject(this.representative))
+            return null;
+        return (h(Host, null, h(DetailSectionTitle, { sectionTitle: "Representative Details" }), h("div", { class: "d-table gap-2 w-100" }, h("div", { class: "row gy-3" }, h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Name", value: (_a = this.representative) === null || _a === void 0 ? void 0 : _a.name }), h(DetailItem, { title: "ID", value: (_b = this.representative) === null || _b === void 0 ? void 0 : _b.id }), h(DetailItem, { title: "Address", value: (_d = (_c = this.representative) === null || _c === void 0 ? void 0 : _c.address) === null || _d === void 0 ? void 0 : _d.line1 }), h(DetailItem, { title: "Created At", value: ((_e = this.representative) === null || _e === void 0 ? void 0 : _e.created_at) && formatMediumDate((_f = this.representative) === null || _f === void 0 ? void 0 : _f.created_at) })), h("div", { class: "col-12 col-md-6" }, h(DetailItem, { title: "Title", value: (_g = this.representative) === null || _g === void 0 ? void 0 : _g.title }), h(DetailItem, { title: "Is Owner?", value: (_h = this.representative) === null || _h === void 0 ? void 0 : _h.is_owner.toString() }), h(DetailItem, { title: "Date Of Birth", value: this.representative && formatMediumDate(new Date(Number((_j = this.representative) === null || _j === void 0 ? void 0 : _j.dob_year), Number((_k = this.representative) === null || _k === void 0 ? void 0 : _k.dob_month) - 1, Number((_l = this.representative) === null || _l === void 0 ? void 0 : _l.dob_day))) }), h(DetailItem, { title: "Email", value: (_m = this.representative) === null || _m === void 0 ? void 0 : _m.email }), h(DetailItem, { title: "Phone", value: (_o = this.representative) === null || _o === void 0 ? void 0 : _o.phone }), h(DetailItem, { title: "Updated At", value: this.representative && formatMediumDate((_p = this.representative) === null || _p === void 0 ? void 0 : _p.updated_at) }))))));
     }
     static get is() { return "representative-details"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/business-details/representative-details/test/representative-details.spec.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { Business } from "../../../../api/Business";
+import mockedBusinessDetails from "../../../../api/mockData/mockBusinessDetails.json";
+import { JustifiRepresentativeDetails } from "../representative-details";
+describe('RepresentativeDetails', () => {
+    it('should render', async () => {
+        const businessDetails = new Business(mockedBusinessDetails.data);
+        const page = await newSpecPage({
+            components: [JustifiRepresentativeDetails],
+            template: () => (h("representative-details", { representative: businessDetails.representative })),
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/business-details/test/busines-details-core.spec.js

@@ -0,0 +1,53 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { BusinessDetailsCore } from "../business-details-core";
+import { makeGetBusiness } from "../get-business";
+import mockBusinessDetails from "./../../../api/mockData/mockBusinessDetails.json";
+import { Business } from "../../../api/Business";
+describe('BusinessDetailsCore', () => {
+    it('should display loading state correclty', async () => {
+        const page = await newSpecPage({
+            components: [BusinessDetailsCore],
+            html: '<business-details-core></business-details-core>',
+        });
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should display error state correctly', async () => {
+        const page = await newSpecPage({
+            components: [BusinessDetailsCore],
+            html: '<business-details-core></business-details-core>',
+        });
+        const getBusiness = makeGetBusiness({
+            id: '',
+            authToken: '',
+            service: {
+                fetchBusiness: async () => ({ error: 'error' }),
+            },
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getBusiness = getBusiness;
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it('should set business details correctly to state', async () => {
+        const page = await newSpecPage({
+            components: [BusinessDetailsCore],
+            html: '<business-details-core></business-details-core>',
+        });
+        const getBusiness = makeGetBusiness({
+            id: '',
+            authToken: '',
+            service: {
+                fetchBusiness: async () => Promise.resolve(mockBusinessDetails),
+            },
+        });
+        page.rootInstance.componentWillLoad = () => { };
+        page.rootInstance.getBusiness = getBusiness;
+        page.rootInstance.fetchData();
+        await page.waitForChanges();
+        const expectedBusiness = new Business(mockBusinessDetails.data);
+        expect(page.rootInstance.business).toEqual(expectedBusiness);
+        expect(page.root).toMatchSnapshot();
+    });
+});

package/dist/collection/components/business-details/test/business-details.spec.js

@@ -0,0 +1,40 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { BusinessDetails } from "../business-details";
+import { BusinessDetailsCore } from "../business-details-core";
+describe('justifi-business-details', () => {
+    it('initializes getBusiness on load with valid props', async () => {
+        const page = await newSpecPage({
+            components: [BusinessDetails],
+            html: `<justifi-business-details business-id="123" auth-token="token" />`,
+        });
+        page.waitForChanges();
+        expect(page.rootInstance.getBusiness).toBeDefined();
+        expect(page.rootInstance.errorMessage).toBeUndefined();
+    });
+    it('sets an error message with invalid props', async () => {
+        const page = await newSpecPage({
+            components: [BusinessDetails],
+            html: `<justifi-business-details></justifi-business-details>`, // No props provided
+        });
+        page.waitForChanges();
+        expect(page.rootInstance.errorMessage).toBe('Invalid business id or auth token');
+    });
+    it('renders the error state when there is an error message', async () => {
+        const page = await newSpecPage({
+            components: [BusinessDetails, BusinessDetailsCore],
+            html: `<justifi-business-details />`,
+        });
+        await page.waitForChanges();
+        expect(page.rootInstance.errorMessage).toBe('Invalid business id or auth token');
+        expect(page.root).toMatchSnapshot();
+    });
+    it('renders business-details-core when there is no error message', async () => {
+        const page = await newSpecPage({
+            components: [BusinessDetails, BusinessDetailsCore],
+            html: `<justifi-business-details business-id="123" auth-token="token" />`,
+        });
+        page.waitForChanges();
+        const core = page.root.shadowRoot.querySelector('business-details-core');
+        expect(core).not.toBeNull();
+    });
+});

package/dist/collection/components/business-details/test/get-business.spec.js

@@ -0,0 +1,60 @@
+import { makeGetBusiness } from "../get-business";
+import mockResponse from "../../../api/mockData/mockBusinessDetails.json";
+import { Business } from "../../../api/Business";
+// Mocks
+jest.mock('../../../api/services/utils.ts', () => ({
+    getErrorMessage: jest.fn(),
+}));
+const mockService = {
+    fetchBusiness: jest.fn(),
+};
+// Test Suite
+describe('makeGetBusiness', () => {
+    const id = '123';
+    const authToken = 'token';
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it('calls onSuccess with a new Business instance on successful fetch', async () => {
+        mockService.fetchBusiness.mockResolvedValue(mockResponse);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getBusiness = makeGetBusiness({
+            id,
+            authToken,
+            service: mockService,
+        });
+        await getBusiness({ onSuccess, onError });
+        expect(onSuccess).toHaveBeenCalledWith({
+            business: new Business(mockResponse.data),
+        });
+        expect(onError).not.toHaveBeenCalled();
+    });
+    it('calls onError with an error message on fetch error', async () => {
+        const error = 'Test error';
+        const responseError = { error };
+        mockService.fetchBusiness.mockResolvedValue(responseError);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getBusiness = makeGetBusiness({
+            id,
+            authToken,
+            service: mockService,
+        });
+        await getBusiness({ onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith({ error });
+    });
+    it('calls onError with an error message on fetch exception', async () => {
+        const error = new Error('Network error');
+        mockService.fetchBusiness.mockRejectedValue(error);
+        const onSuccess = jest.fn();
+        const onError = jest.fn();
+        const getBusiness = makeGetBusiness({
+            id,
+            authToken,
+            service: mockService,
+        });
+        await getBusiness({ onSuccess, onError });
+        expect(onError).toHaveBeenCalledWith({ error: error.message });
+    });
+});

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

@@ -0,0 +1,33 @@
+import { getErrorMessage } from "../../api/services/utils";
+export const makeGetCheckout = ({ authToken, checkoutId, service }) => async ({ onSuccess, onError }) => {
+    try {
+        const response = await service.fetchCheckout(authToken, checkoutId);
+        if (!response.error) {
+            const checkout = response.data;
+            onSuccess({ checkout });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            return onError(responseError);
+        }
+    }
+    catch (error) {
+        return onError(error.message || error);
+    }
+};
+export const makePay = ({ authToken, checkoutId, service }) => async ({ paymentMethodToken, onSuccess, onError }) => {
+    try {
+        const response = await service.pay(authToken, checkoutId, paymentMethodToken);
+        if (!response.error) {
+            const checkout = response.data;
+            onSuccess({ checkout });
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            return onError(responseError);
+        }
+    }
+    catch (error) {
+        return onError(error.message || error);
+    }
+};