@justifi/webcomponents 4.13.0 → 4.15.0

package/dist/collection/components/payment-form/test/payment-form.spec.js

@@ -2,11 +2,25 @@ import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { PaymentForm } from "../payment-form";
 import { PaymentMethodTypes } from "../../../api";
-import { config } from "../../../../config";
 import { PaymentMethodSelector } from "../payment-method-selector";
 import { PaymentMethodForm } from "../../payment-method-form/payment-method-form";
 import { BillingForm } from "../../billing-form/billing-form";
 describe('justifi-payment-form', () => {
+    it('should throw error if both clientId and authToken are not provided', async () => {
+        const errorSpy = jest.fn();
+        const page = await newSpecPage({
+            components: [PaymentForm],
+            template: () => h("justifi-payment-form", { "onError-event": errorSpy }),
+        });
+        await page.waitForChanges();
+        expect(errorSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: {
+                errorCode: 'missing-props',
+                message: 'clientId or authToken is required',
+                severity: 'error',
+            }
+        }));
+    });
     it('should update submitButtonEnabled state when enableSubmitButton method is called', async () => {
         // Mock component
         const mockComponent = new PaymentForm();
@@ -33,7 +47,7 @@ describe('justifi-payment-form', () => {
         const paymentForm = new PaymentForm();
         // Assert that the properties exist and have the expected default values
         expect(paymentForm).toHaveProperty('bankAccount', undefined);
-        expect(paymentForm).toHaveProperty('card', true);
+        expect(paymentForm).toHaveProperty('card', undefined);
         expect(paymentForm).toHaveProperty('email', undefined);
         expect(paymentForm).toHaveProperty('clientId', undefined);
         expect(paymentForm).toHaveProperty('accountId', undefined);
@@ -131,44 +145,13 @@ describe('justifi-payment-form', () => {
     });
     // Render Testing
     it('should correctly render the child components based on the given props and state', async () => {
-        // Set up new PaymentForm with specific props and state
-        const component = new PaymentForm();
-        component.bankAccount = true;
-        component.card = true;
-        component.email = 'test@test.com';
-        component.clientId = 'abc123';
-        component.accountId = 'def456';
-        component.submitButtonText = 'Submit';
-        // Cast to any to bypass type checker and directly set private properties
-        component.submitButtonEnabled = true;
-        component.selectedPaymentMethodType = PaymentMethodTypes.card;
-        component.allowedPaymentMethodTypes = [PaymentMethodTypes.card, PaymentMethodTypes.bankAccount];
         // Render the component
         const { root } = await newSpecPage({
             components: [PaymentForm],
-            html: `<justifi-payment-form payment-method-form-type="card"></justifi-payment-form>`,
+            template: () => (h("justifi-payment-form", { bankAccount: true, card: true, email: "test@test.com", clientId: "abc123", accountId: "def456", "submit-button-text": "Submit", "payment-method-form-type": "card" })),
         });
         // Assert that the rendered output is correct
-        expect(root).toEqualHtml(`
-      <justifi-payment-form payment-method-form-type="card">
-        <mock:shadow-root>
-          <form class="gy-3 row">
-            <div class="col-12">
-              <justifi-payment-method-form payment-method-form-type="card" iframeorigin="${config.iframeOrigin}"></justifi-payment-method-form>
-            </div>
-            <div class="col-12">
-              <justifi-billing-form legend="Billing Info"></justifi-billing-form>
-            </div>
-            <slot name="insurance"></slot>
-            <div class="col-12">
-              <button class="btn btn-primary jfi-submit-button" data-testid="submit-button" type="submit">
-                Submit
-              </button>
-            </div>
-          </form>
-        </mock:shadow-root>
-      </justifi-payment-form>
-    `);
+        expect(root).toMatchSnapshot();
     });
     it('emits error event when submit fails', async () => {
         const clientId = 'some-client';

package/dist/collection/components/payment-method-form/payment-method-form.js

@@ -98,7 +98,7 @@ export class PaymentMethodForm {
                 "mutable": false,
                 "complexType": {
                     "original": "PaymentMethodTypes",
-                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.sezzel",
+                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card | PaymentMethodTypes.saved | PaymentMethodTypes.sezzle",
                     "references": {
                         "PaymentMethodTypes": {
                             "location": "import",

package/dist/collection/components/proceeds-list/proceeds-list.js

@@ -73,7 +73,7 @@ export class ProceedsList {
         }
         this.loading = true;
         const endpoint = `account/${this.accountId}/proceeds`;
-        const response = await Api(this.authToken, config.privateApiOrigin)
+        const response = await Api({ authToken: this.authToken, apiOrigin: config.privateApiOrigin })
             .get(endpoint, this.params);
         if (!response.error) {
             this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);

package/dist/collection/components/refund-form/refund-form.js

@@ -70,7 +70,7 @@ export class RefundForm {
         if (!this.authToken) {
             console.warn('Warning: Missing auth-token.');
         }
-        this.api = Api(this.authToken, config.proxyApiOrigin);
+        this.api = Api({ authToken: this.authToken, apiOrigin: config.proxyApiOrigin });
     }
     render() {
         var _a;

package/dist/collection/components/subaccount-details/subaccount-details.js

@@ -21,7 +21,7 @@ export class SubaccountDetails {
         this.fetchData();
     }
     async fetchOnboardingData() {
-        const api = Api(this.authToken, '');
+        const api = Api({ authToken: this.authToken, apiOrigin: '' });
         const endpoint = `onboarding/${this.subaccountId}`;
         const response = await api.get(endpoint);
         if (!response.error) {
@@ -32,7 +32,7 @@ export class SubaccountDetails {
         }
     }
     async fetchSubAccountData() {
-        const api = Api(this.authToken, config.privateApiOrigin);
+        const api = Api({ authToken: this.authToken, apiOrigin: config.privateApiOrigin });
         const endpoint = `account/${this.accountId}/seller_accounts/${this.subaccountId}`;
         const response = await api.get(endpoint);
         if (!response.error) {

package/dist/collection/components/subaccounts-list/subaccounts-list.js

@@ -36,7 +36,7 @@ export class SubaccountsList {
             return;
         }
         this.loading = true;
-        const api = Api(this.authToken, config.privateApiOrigin);
+        const api = Api({ authToken: this.authToken, apiOrigin: config.privateApiOrigin });
         const endpoint = `account/${this.accountId}/seller_accounts`;
         const response = await api.get(endpoint, this.params);
         if (!response.error) {