@justifi/webcomponents 4.7.4 → 4.7.6

package/dist/collection/components/payment-form/payment-method-selector.css

@@ -93,6 +93,7 @@
   --bs-link-hover-color: #0a58ca;
   --bs-link-hover-color-rgb: 10, 88, 202;
   --bs-code-color: #d63384;
+  --bs-highlight-color: #212529;
   --bs-highlight-bg: #fff3cd;
   --bs-border-width: 1px;
   --bs-border-style: solid;
@@ -164,6 +165,8 @@
   --bs-link-color-rgb: 110, 168, 254;
   --bs-link-hover-color-rgb: 139, 185, 254;
   --bs-code-color: #e685b5;
+  --bs-highlight-color: #dee2e6;
+  --bs-highlight-bg: #664d03;
   --bs-border-color: #495057;
   --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
   --bs-form-valid-color: #75b798;
@@ -831,6 +834,7 @@ textarea.form-control-lg {
 
 .form-check-input {
   --bs-form-check-bg: var(--bs-body-bg);
+  flex-shrink: 0;
   width: 1em;
   height: 1em;
   margin-top: 0.25em;
@@ -978,7 +982,7 @@ textarea.form-control-lg {
   height: 0.5rem;
   color: transparent;
   cursor: pointer;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
 }
@@ -1004,7 +1008,7 @@ textarea.form-control-lg {
   height: 0.5rem;
   color: transparent;
   cursor: pointer;
-  background-color: var(--bs-tertiary-bg);
+  background-color: var(--bs-secondary-bg);
   border-color: transparent;
   border-radius: 1rem;
 }

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

@@ -1,96 +1,96 @@
 import { Fragment, h } from "@stencil/core";
 const PaymentMethodLabels = {
-  bankAccount: 'Bank Account',
-  card: 'Card',
+    bankAccount: 'Bank Account',
+    card: 'Card',
 };
 export class PaymentMethodSelector {
-  constructor() {
-    this.paymentMethodTypes = [];
-    this.selectedPaymentMethodType = undefined;
-  }
-  onChangeHandler(event) {
-    this.paymentMethodSelected.emit(event.target.value);
-  }
-  render() {
-    return (h("div", { class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
-  }
-  static get is() { return "justifi-payment-method-selector"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["payment-method-selector.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["payment-method-selector.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "paymentMethodTypes": {
-        "type": "unknown",
-        "mutable": false,
-        "complexType": {
-          "original": "PaymentMethodTypes[]",
-          "resolved": "PaymentMethodTypes[]",
-          "references": {
-            "PaymentMethodTypes": {
-              "location": "import",
-              "path": "../../api",
-              "id": "src/api/index.ts::PaymentMethodTypes"
+    constructor() {
+        this.paymentMethodTypes = [];
+        this.selectedPaymentMethodType = undefined;
+    }
+    onChangeHandler(event) {
+        this.paymentMethodSelected.emit(event.target.value);
+    }
+    render() {
+        return (h("div", { class: "btn-group jfi-btn-radio-group", role: "group", "aria-label": "Radio toggle group for payment method" }, this.paymentMethodTypes.map((paymentMethodType) => (h(Fragment, null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType, class: "btn-check jfi-btn-radio" }), h("label", { htmlFor: paymentMethodType, class: "btn btn-outline-primary jfi-btn-radio-label" }, PaymentMethodLabels[paymentMethodType]))))));
+    }
+    static get is() { return "justifi-payment-method-selector"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["payment-method-selector.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["payment-method-selector.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "paymentMethodTypes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaymentMethodTypes[]",
+                    "resolved": "PaymentMethodTypes[]",
+                    "references": {
+                        "PaymentMethodTypes": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::PaymentMethodTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "defaultValue": "[]"
+            },
+            "selectedPaymentMethodType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PaymentMethodTypes",
+                    "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
+                    "references": {
+                        "PaymentMethodTypes": {
+                            "location": "import",
+                            "path": "../../api",
+                            "id": "src/api/index.ts::PaymentMethodTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "selected-payment-method-type",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "defaultValue": "[]"
-      },
-      "selectedPaymentMethodType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "PaymentMethodTypes",
-          "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
-          "references": {
-            "PaymentMethodTypes": {
-              "location": "import",
-              "path": "../../api",
-              "id": "src/api/index.ts::PaymentMethodTypes"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "selected-payment-method-type",
-        "reflect": false
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "paymentMethodSelected",
-        "name": "paymentMethodSelected",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "paymentMethodSelected",
+                "name": "paymentMethodSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -1,9 +1,9 @@
 import { newE2EPage } from "@stencil/core/testing";
 describe('justifi-payment-form', () => {
-  it('should correctly render submit button with correct text', async () => {
-    // Create new testing page and add our component to it
-    const page = await newE2EPage();
-    await page.setContent(`
+    it('should correctly render submit button with correct text', async () => {
+        // Create new testing page and add our component to it
+        const page = await newE2EPage();
+        await page.setContent(`
         <justifi-payment-form
           bank-account="true"
           card="true"
@@ -14,9 +14,9 @@ describe('justifi-payment-form', () => {
           submit-button-text="Pay Now"
         />
       `);
-    // Find the submit button on the page
-    const submitButton = await page.find('justifi-payment-form >>> button');
-    // Assert that the submit button's text is set correctly
-    expect(await submitButton.textContent).toBe('Pay Now');
-  });
+        // Find the submit button on the page
+        const submitButton = await page.find('justifi-payment-form >>> button');
+        // Assert that the submit button's text is set correctly
+        expect(await submitButton.textContent).toBe('Pay Now');
+    });
 });

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

@@ -2,163 +2,163 @@ import { newSpecPage } from "@stencil/core/testing";
 import { PaymentForm } from "../payment-form";
 import { PaymentMethodTypes } from "../../../api";
 describe('justifi-payment-form', () => {
-  // State Testing
-  it('should update allowedPaymentMethodTypes and selectedPaymentMethodType state correctly when connectedCallback is invoked', async () => {
-    // Mock properties
-    const mockComponent = new PaymentForm();
-    mockComponent.bankAccount = true;
-    mockComponent.card = true;
-    // Invoke the lifecycle method
-    mockComponent.connectedCallback();
-    // Assertions
-    expect(mockComponent.allowedPaymentMethodTypes).toEqual([PaymentMethodTypes.card, PaymentMethodTypes.bankAccount]);
-    expect(mockComponent.selectedPaymentMethodType).toBe(PaymentMethodTypes.card);
-  });
-  it('should update submitButtonEnabled state when enableSubmitButton method is called', async () => {
-    // Mock component
-    const mockComponent = new PaymentForm();
-    mockComponent.submitButtonEnabled = false;
-    // Call the method
-    await mockComponent.enableSubmitButton();
-    // Assertion
-    expect(mockComponent.submitButtonEnabled).toBe(true);
-  });
-  it('should update selectedPaymentMethodType when paymentMethodSelected event is fired', async () => {
-    // Mock component
-    const mockComponent = new PaymentForm();
-    mockComponent.selectedPaymentMethodType = PaymentMethodTypes.card;
-    // Define the event details
-    const detail = PaymentMethodTypes.bankAccount;
-    const event = new CustomEvent('paymentMethodSelected', { detail });
-    // Simulate the event
-    mockComponent.paymentMethodSelectedHandler(event);
-    // Assertion
-    expect(mockComponent.selectedPaymentMethodType).toBe(PaymentMethodTypes.bankAccount);
-  });
-  // Props Testing
-  it('should have the expected default properties', () => {
-    const paymentForm = new PaymentForm();
-    // Assert that the properties exist and have the expected default values
-    expect(paymentForm).toHaveProperty('bankAccount', undefined);
-    expect(paymentForm).toHaveProperty('card', undefined);
-    expect(paymentForm).toHaveProperty('email', undefined);
-    expect(paymentForm).toHaveProperty('iframeOrigin', undefined);
-    expect(paymentForm).toHaveProperty('clientId', undefined);
-    expect(paymentForm).toHaveProperty('accountId', undefined);
-    expect(paymentForm).toHaveProperty('submitButtonText', undefined);
-  });
-  // Method Testing
-  it('should correctly fill billing form when fillBillingForm method is called', async () => {
-    // Mock child component
-    const mockBillingFormRef = {
-      fill: jest.fn(),
-    };
-    // Mock component
-    const mockComponent = new PaymentForm();
-    // Cast to any to bypass type checker and directly set private property
-    mockComponent.billingFormRef = mockBillingFormRef;
-    // Define the fields to fill the billing form
-    const fields = {
-      name: 'John Doe',
-      address_line1: '123 Main St',
-      address_line2: 'Apt 4B',
-      address_city: 'Townsville',
-      address_state: 'TS',
-      address_postal_code: '12345',
-    };
-    // Call the method
-    await mockComponent.fillBillingForm(fields);
-    // Check that the child component's fill method was called with the correct arguments
-    expect(mockBillingFormRef.fill).toHaveBeenCalledWith(fields);
-  });
-  it('should submit the form correctly and trigger the "submitted" event with the correct payload when submit method is called', async () => {
-    // Mock billingFormRef and paymentMethodFormRef
-    const mockBillingFormRef = {
-      validate: jest.fn().mockResolvedValue({ isValid: true }),
-      getValues: jest.fn().mockResolvedValue({ name: 'John Doe' }),
-    };
-    const mockPaymentMethodFormRef = {
-      validate: jest.fn().mockResolvedValue({ isValid: true }),
-      tokenize: jest.fn().mockResolvedValue({ token: 'abc123' }),
-    };
-    // Mock component
-    const mockComponent = new PaymentForm();
-    // Cast to any to bypass type checker and directly set private properties
-    mockComponent.billingFormRef = mockBillingFormRef;
-    mockComponent.paymentMethodFormRef = mockPaymentMethodFormRef;
-    // Mock event
-    const mockEvent = { preventDefault: jest.fn() };
-    // Mock event emitter
-    const mockEmitter = { emit: jest.fn() };
-    mockComponent.submitted = mockEmitter;
-    // Call submit method
-    await mockComponent.submit(mockEvent);
-    // Expectations
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-    expect(mockBillingFormRef.validate).toHaveBeenCalled();
-    expect(mockPaymentMethodFormRef.validate).toHaveBeenCalled();
-    expect(mockBillingFormRef.getValues).toHaveBeenCalled();
-    expect(mockPaymentMethodFormRef.tokenize).toHaveBeenCalledWith(mockComponent.clientId, { email: mockComponent.email, name: 'John Doe' }, mockComponent.accountId);
-    expect(mockEmitter.emit).toHaveBeenCalledWith({ token: 'abc123' });
-  });
-  // Event Testing
-  it('should fire the "submitted" event with correct data when the form is submitted', async () => {
-    // Mock billingFormRef and paymentMethodFormRef
-    const mockBillingFormRef = {
-      validate: jest.fn().mockResolvedValue({ isValid: true }),
-      getValues: jest.fn().mockResolvedValue({
-        name: 'John Doe',
-        address_line1: 'Address 1',
-        address_line2: 'Address 2',
-        address_city: 'City',
-        address_state: 'State',
-        address_postal_code: 'Postal Code',
-      }),
-    };
-    const mockPaymentMethodFormRef = {
-      validate: jest.fn().mockResolvedValue({ isValid: true }),
-      tokenize: jest.fn().mockResolvedValue({ token: 'abc123' }),
-    };
-    // Mock component
-    const mockComponent = new PaymentForm();
-    mockComponent.email = 'john@example.com'; // set email prop
-    // Cast to any to bypass type checker and directly set private properties
-    mockComponent.billingFormRef = mockBillingFormRef;
-    mockComponent.paymentMethodFormRef = mockPaymentMethodFormRef;
-    // Mock event
-    const mockEvent = { preventDefault: jest.fn() };
-    // Mock event emitter
-    const mockEmitter = { emit: jest.fn() };
-    mockComponent.submitted = mockEmitter;
-    // Call submit method
-    await mockComponent.submit(mockEvent);
-    // Define expected payload
-    const expectedPayload = { token: 'abc123' };
-    // Expectations
-    expect(mockEmitter.emit).toHaveBeenCalledWith(expectedPayload);
-  });
-  // 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.iframeOrigin = 'https://example.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" iframe-origin="https://example.com"></justifi-payment-form>',
+    // State Testing
+    it('should update allowedPaymentMethodTypes and selectedPaymentMethodType state correctly when connectedCallback is invoked', async () => {
+        // Mock properties
+        const mockComponent = new PaymentForm();
+        mockComponent.bankAccount = true;
+        mockComponent.card = true;
+        // Invoke the lifecycle method
+        mockComponent.connectedCallback();
+        // Assertions
+        expect(mockComponent.allowedPaymentMethodTypes).toEqual([PaymentMethodTypes.card, PaymentMethodTypes.bankAccount]);
+        expect(mockComponent.selectedPaymentMethodType).toBe(PaymentMethodTypes.card);
     });
-    // Assert that the rendered output is correct
-    expect(root).toEqualHtml(`
+    it('should update submitButtonEnabled state when enableSubmitButton method is called', async () => {
+        // Mock component
+        const mockComponent = new PaymentForm();
+        mockComponent.submitButtonEnabled = false;
+        // Call the method
+        await mockComponent.enableSubmitButton();
+        // Assertion
+        expect(mockComponent.submitButtonEnabled).toBe(true);
+    });
+    it('should update selectedPaymentMethodType when paymentMethodSelected event is fired', async () => {
+        // Mock component
+        const mockComponent = new PaymentForm();
+        mockComponent.selectedPaymentMethodType = PaymentMethodTypes.card;
+        // Define the event details
+        const detail = PaymentMethodTypes.bankAccount;
+        const event = new CustomEvent('paymentMethodSelected', { detail });
+        // Simulate the event
+        mockComponent.paymentMethodSelectedHandler(event);
+        // Assertion
+        expect(mockComponent.selectedPaymentMethodType).toBe(PaymentMethodTypes.bankAccount);
+    });
+    // Props Testing
+    it('should have the expected default properties', () => {
+        const paymentForm = new PaymentForm();
+        // Assert that the properties exist and have the expected default values
+        expect(paymentForm).toHaveProperty('bankAccount', undefined);
+        expect(paymentForm).toHaveProperty('card', undefined);
+        expect(paymentForm).toHaveProperty('email', undefined);
+        expect(paymentForm).toHaveProperty('iframeOrigin', undefined);
+        expect(paymentForm).toHaveProperty('clientId', undefined);
+        expect(paymentForm).toHaveProperty('accountId', undefined);
+        expect(paymentForm).toHaveProperty('submitButtonText', undefined);
+    });
+    // Method Testing
+    it('should correctly fill billing form when fillBillingForm method is called', async () => {
+        // Mock child component
+        const mockBillingFormRef = {
+            fill: jest.fn(),
+        };
+        // Mock component
+        const mockComponent = new PaymentForm();
+        // Cast to any to bypass type checker and directly set private property
+        mockComponent.billingFormRef = mockBillingFormRef;
+        // Define the fields to fill the billing form
+        const fields = {
+            name: 'John Doe',
+            address_line1: '123 Main St',
+            address_line2: 'Apt 4B',
+            address_city: 'Townsville',
+            address_state: 'TS',
+            address_postal_code: '12345',
+        };
+        // Call the method
+        await mockComponent.fillBillingForm(fields);
+        // Check that the child component's fill method was called with the correct arguments
+        expect(mockBillingFormRef.fill).toHaveBeenCalledWith(fields);
+    });
+    it('should submit the form correctly and trigger the "submitted" event with the correct payload when submit method is called', async () => {
+        // Mock billingFormRef and paymentMethodFormRef
+        const mockBillingFormRef = {
+            validate: jest.fn().mockResolvedValue({ isValid: true }),
+            getValues: jest.fn().mockResolvedValue({ name: 'John Doe' }),
+        };
+        const mockPaymentMethodFormRef = {
+            validate: jest.fn().mockResolvedValue({ isValid: true }),
+            tokenize: jest.fn().mockResolvedValue({ token: 'abc123' }),
+        };
+        // Mock component
+        const mockComponent = new PaymentForm();
+        // Cast to any to bypass type checker and directly set private properties
+        mockComponent.billingFormRef = mockBillingFormRef;
+        mockComponent.paymentMethodFormRef = mockPaymentMethodFormRef;
+        // Mock event
+        const mockEvent = { preventDefault: jest.fn() };
+        // Mock event emitter
+        const mockEmitter = { emit: jest.fn() };
+        mockComponent.submitted = mockEmitter;
+        // Call submit method
+        await mockComponent.submit(mockEvent);
+        // Expectations
+        expect(mockEvent.preventDefault).toHaveBeenCalled();
+        expect(mockBillingFormRef.validate).toHaveBeenCalled();
+        expect(mockPaymentMethodFormRef.validate).toHaveBeenCalled();
+        expect(mockBillingFormRef.getValues).toHaveBeenCalled();
+        expect(mockPaymentMethodFormRef.tokenize).toHaveBeenCalledWith(mockComponent.clientId, { email: mockComponent.email, name: 'John Doe' }, mockComponent.accountId);
+        expect(mockEmitter.emit).toHaveBeenCalledWith({ token: 'abc123' });
+    });
+    // Event Testing
+    it('should fire the "submitted" event with correct data when the form is submitted', async () => {
+        // Mock billingFormRef and paymentMethodFormRef
+        const mockBillingFormRef = {
+            validate: jest.fn().mockResolvedValue({ isValid: true }),
+            getValues: jest.fn().mockResolvedValue({
+                name: 'John Doe',
+                address_line1: 'Address 1',
+                address_line2: 'Address 2',
+                address_city: 'City',
+                address_state: 'State',
+                address_postal_code: 'Postal Code',
+            }),
+        };
+        const mockPaymentMethodFormRef = {
+            validate: jest.fn().mockResolvedValue({ isValid: true }),
+            tokenize: jest.fn().mockResolvedValue({ token: 'abc123' }),
+        };
+        // Mock component
+        const mockComponent = new PaymentForm();
+        mockComponent.email = 'john@example.com'; // set email prop
+        // Cast to any to bypass type checker and directly set private properties
+        mockComponent.billingFormRef = mockBillingFormRef;
+        mockComponent.paymentMethodFormRef = mockPaymentMethodFormRef;
+        // Mock event
+        const mockEvent = { preventDefault: jest.fn() };
+        // Mock event emitter
+        const mockEmitter = { emit: jest.fn() };
+        mockComponent.submitted = mockEmitter;
+        // Call submit method
+        await mockComponent.submit(mockEvent);
+        // Define expected payload
+        const expectedPayload = { token: 'abc123' };
+        // Expectations
+        expect(mockEmitter.emit).toHaveBeenCalledWith(expectedPayload);
+    });
+    // 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.iframeOrigin = 'https://example.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" iframe-origin="https://example.com"></justifi-payment-form>',
+        });
+        // Assert that the rendered output is correct
+        expect(root).toEqualHtml(`
       <justifi-payment-form iframe-origin="https://example.com" payment-method-form-type="card">
         <mock:shadow-root>
           <form class="gy-3 row">
@@ -178,5 +178,5 @@ describe('justifi-payment-form', () => {
         </mock:shadow-root>
       </justifi-payment-form>
     `);
-  });
+    });
 });