@justifi/webcomponents 4.2.2 → 4.4.0

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

@@ -1,4 +1,4 @@
-import { Fragment, h } from '@stencil/core';
+import { Fragment, h } from "@stencil/core";
 const PaymentMethodLabels = {
   bankAccount: 'Bank Account',
   card: 'Card',
@@ -37,7 +37,8 @@ export class PaymentMethodSelector {
           "references": {
             "PaymentMethodTypes": {
               "location": "import",
-              "path": "../../api"
+              "path": "../../api",
+              "id": "src/api/index.ts::PaymentMethodTypes"
             }
           }
         },
@@ -58,7 +59,8 @@ export class PaymentMethodSelector {
           "references": {
             "PaymentMethodTypes": {
               "location": "import",
-              "path": "../../api"
+              "path": "../../api",
+              "id": "src/api/index.ts::PaymentMethodTypes"
             }
           }
         },

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

@@ -1 +1 @@
-{"version":3,"file":"payment-method-selector.js","sourceRoot":"","sources":["../../../../src/components/payment-form/payment-method-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlF,MAAM,mBAAmB,GAAG;EAC1B,WAAW,EAAE,cAAc;EAC3B,IAAI,EAAE,MAAM;CACb,CAAC;AAOF,MAAM,OAAO,qBAAqB;;8BACmB,EAAE;;;EAMrD,eAAe,CAAC,KAAU;IACxB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACtD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,OAAO,gBAAY,uCAAuC,IACvG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,iBAAqC,EAAE,EAAE,CAAC,CACtE,EAAC,QAAQ;MACP,aACE,EAAE,EAAE,iBAAiB,EACrB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EACrD,OAAO,EAAE,IAAI,CAAC,yBAAyB,KAAK,iBAAiB,EAC7D,KAAK,EAAC,yBAAyB,GAC/B;MACF,aAAO,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAC,6CAA6C,IACnF,mBAAmB,CAAC,iBAAiB,CAAC,CACjC,CACC,CACZ,CAAC,CACE,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Fragment, h, Prop } from '@stencil/core';\nimport { PaymentMethodTypes } from '../../api';\n\nconst PaymentMethodLabels = {\n  bankAccount: 'Bank Account',\n  card: 'Card',\n};\n\n@Component({\n  tag: 'justifi-payment-method-selector',\n  styleUrl: 'payment-method-selector.scss',\n  shadow: true,\n})\nexport class PaymentMethodSelector {\n  @Prop() paymentMethodTypes: PaymentMethodTypes[] = [];\n  @Prop() selectedPaymentMethodType: PaymentMethodTypes;\n  @Event({ bubbles: true }) paymentMethodSelected: EventEmitter;\n\n  defaultRadioButtonOption!: HTMLInputElement;\n\n  onChangeHandler(event: any) {\n    this.paymentMethodSelected.emit(event.target.value);\n  }\n\n  render() {\n    return (\n      <div class=\"btn-group jfi-btn-radio-group\" role=\"group\" aria-label=\"Radio toggle group for payment method\">\n        {this.paymentMethodTypes.map((paymentMethodType: PaymentMethodTypes) => (\n          <Fragment>\n            <input\n              id={paymentMethodType}\n              type=\"radio\"\n              name=\"paymentMethodType\"\n              value={paymentMethodType}\n              onChange={(event: any) => this.onChangeHandler(event)}\n              checked={this.selectedPaymentMethodType === paymentMethodType}\n              class=\"btn-check jfi-btn-radio\"\n            />\n            <label htmlFor={paymentMethodType} class=\"btn btn-outline-primary jfi-btn-radio-label\">\n              {PaymentMethodLabels[paymentMethodType]}\n            </label>\n          </Fragment>\n        ))}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"payment-method-selector.js","sourceRoot":"","sources":["../../../../src/components/payment-form/payment-method-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGlF,MAAM,mBAAmB,GAAG;EAC1B,WAAW,EAAE,cAAc;EAC3B,IAAI,EAAE,MAAM;CACb,CAAC;AAOF,MAAM,OAAO,qBAAqB;;8BACmB,EAAE;;;EAMrD,eAAe,CAAC,KAAU;IACxB,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;EACtD,CAAC;EAED,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,OAAO,gBAAY,uCAAuC,IACvG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,iBAAqC,EAAE,EAAE,CAAC,CACtE,EAAC,QAAQ;MACP,aACE,EAAE,EAAE,iBAAiB,EACrB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAE,iBAAiB,EACxB,QAAQ,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EACrD,OAAO,EAAE,IAAI,CAAC,yBAAyB,KAAK,iBAAiB,EAC7D,KAAK,EAAC,yBAAyB,GAC/B;MACF,aAAO,OAAO,EAAE,iBAAiB,EAAE,KAAK,EAAC,6CAA6C,IACnF,mBAAmB,CAAC,iBAAiB,CAAC,CACjC,CACC,CACZ,CAAC,CACE,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Fragment, h, Prop } from '@stencil/core';\nimport { PaymentMethodTypes } from '../../api';\n\nconst PaymentMethodLabels = {\n  bankAccount: 'Bank Account',\n  card: 'Card',\n};\n\n@Component({\n  tag: 'justifi-payment-method-selector',\n  styleUrl: 'payment-method-selector.scss',\n  shadow: true,\n})\nexport class PaymentMethodSelector {\n  @Prop() paymentMethodTypes: PaymentMethodTypes[] = [];\n  @Prop() selectedPaymentMethodType: PaymentMethodTypes;\n  @Event({ bubbles: true }) paymentMethodSelected: EventEmitter;\n\n  defaultRadioButtonOption!: HTMLInputElement;\n\n  onChangeHandler(event: any) {\n    this.paymentMethodSelected.emit(event.target.value);\n  }\n\n  render() {\n    return (\n      <div class=\"btn-group jfi-btn-radio-group\" role=\"group\" aria-label=\"Radio toggle group for payment method\">\n        {this.paymentMethodTypes.map((paymentMethodType: PaymentMethodTypes) => (\n          <Fragment>\n            <input\n              id={paymentMethodType}\n              type=\"radio\"\n              name=\"paymentMethodType\"\n              value={paymentMethodType}\n              onChange={(event: any) => this.onChangeHandler(event)}\n              checked={this.selectedPaymentMethodType === paymentMethodType}\n              class=\"btn-check jfi-btn-radio\"\n            />\n            <label htmlFor={paymentMethodType} class=\"btn btn-outline-primary jfi-btn-radio-label\">\n              {PaymentMethodLabels[paymentMethodType]}\n            </label>\n          </Fragment>\n        ))}\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+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

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

@@ -1,6 +1,6 @@
-import { newSpecPage } from '@stencil/core/testing';
-import { PaymentForm } from '../payment-form';
-import { PaymentMethodTypes } from '../../../api';
+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 () => {
@@ -168,6 +168,7 @@ describe('justifi-payment-form', () => {
             <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" type="submit">
                 Submit

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

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

package/dist/collection/components/payment-method-form/get-computed-theme.js

@@ -1,7 +1,9 @@
 const getComputedTheme = () => {
   const computedStyles = getComputedStyle(document.body);
   const computedTheme = {
+    loadGoogleFont: computedStyles.getPropertyValue('--jfi-load-google-font'),
     layout: {
+      fontFamily: computedStyles.getPropertyValue('--jfi-layout-font-family'),
       padding: computedStyles.getPropertyValue('--jfi-layout-padding'),
       formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),
       formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),

package/dist/collection/components/payment-method-form/get-computed-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-computed-theme.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/get-computed-theme.ts"],"names":[],"mappings":"AAEA,MAAM,gBAAgB,GAAG,GAAG,EAAE;EAC5B,MAAM,cAAc,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;EAEvD,MAAM,aAAa,GAAU;IAC3B,MAAM,EAAE;MACN,OAAO,EAAE,cAAc,CAAC,gBAAgB,CAAC,sBAAsB,CAAC;MAChE,4BAA4B,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACpG,0BAA0B,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;KACnG;IACD,WAAW,EAAE;MACX,eAAe,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACvF,WAAW,EAAE,cAAc,CAAC,gBAAgB,CAAC,iCAAiC,CAAC;MAC/E,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,CAAC,uCAAuC,CAAC;MAC1F,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,CAAC,uCAAuC,CAAC;MAC1F,WAAW,EAAE,cAAc,CAAC,gBAAgB,CAAC,iCAAiC,CAAC;MAC/E,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,wCAAwC,CAAC;MAC5F,eAAe,EAAE,cAAc,CAAC,gBAAgB,CAAC,sCAAsC,CAAC;MACxF,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,CAAC,uCAAuC,CAAC;MAC1F,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACtF,YAAY,EAAE,cAAc,CAAC,gBAAgB,CAAC,kCAAkC,CAAC;MACjF,WAAW,EAAE,cAAc,CAAC,gBAAgB,CAAC,iCAAiC,CAAC;MAC/E,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAA+B,CAAC;MAC3E,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACtF,mBAAmB,EAAE,cAAc,CAAC,gBAAgB,CAAC,2CAA2C,CAAC;MACjG,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACtF,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;MAClE,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,gCAAgC,CAAC;MAC7E,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC,8BAA8B,CAAC;MACzE,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,gCAAgC,CAAC;MAC7E,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,gCAAgC,CAAC;MAC7E,MAAM,EAAE,cAAc,CAAC,gBAAgB,CAAC,2BAA2B,CAAC;MACpE,OAAO,EAAE,cAAc,CAAC,gBAAgB,CAAC,4BAA4B,CAAC;KACvE;IACD,SAAS,EAAE;MACT,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;MAChE,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,8BAA8B,CAAC;MAC3E,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC,4BAA4B,CAAC;MACvE,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,8BAA8B,CAAC;MAC3E,MAAM,EAAE,cAAc,CAAC,gBAAgB,CAAC,yBAAyB,CAAC;KACnE;IACD,YAAY,EAAE;MACZ,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,2BAA2B,CAAC;MACnE,MAAM,EAAE,cAAc,CAAC,gBAAgB,CAAC,4BAA4B,CAAC;MACrE,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAA+B,CAAC;KAC3E;GACF,CAAC;EAEF,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n  const computedStyles = getComputedStyle(document.body);\n\n  const computedTheme: Theme = {\n    layout: {\n      padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n      formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n      formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n    },\n    formControl: {\n      backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n      borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n      borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n      borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n      borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n      borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n      borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n      borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n      borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n      borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n      borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n      boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n      boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n      boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n      boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n      color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n      colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n      lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n      margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n      padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n    },\n    formLabel: {\n      color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n      fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n      margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n    },\n    errorMessage: {\n      color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n      margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n      fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n    },\n  };\n\n  return computedTheme;\n};\n\nexport default getComputedTheme;\n"]}
+{"version":3,"file":"get-computed-theme.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/get-computed-theme.ts"],"names":[],"mappings":"AAEA,MAAM,gBAAgB,GAAG,GAAG,EAAE;EAC5B,MAAM,cAAc,GAAG,gBAAgB,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;EAEvD,MAAM,aAAa,GAAU;IAC3B,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;IACzE,MAAM,EAAE;MACN,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;MACvE,OAAO,EAAE,cAAc,CAAC,gBAAgB,CAAC,sBAAsB,CAAC;MAChE,4BAA4B,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACpG,0BAA0B,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;KACnG;IACD,WAAW,EAAE;MACX,eAAe,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACvF,WAAW,EAAE,cAAc,CAAC,gBAAgB,CAAC,iCAAiC,CAAC;MAC/E,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,CAAC,uCAAuC,CAAC;MAC1F,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,CAAC,uCAAuC,CAAC;MAC1F,WAAW,EAAE,cAAc,CAAC,gBAAgB,CAAC,iCAAiC,CAAC;MAC/E,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,wCAAwC,CAAC;MAC5F,eAAe,EAAE,cAAc,CAAC,gBAAgB,CAAC,sCAAsC,CAAC;MACxF,gBAAgB,EAAE,cAAc,CAAC,gBAAgB,CAAC,uCAAuC,CAAC;MAC1F,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACtF,YAAY,EAAE,cAAc,CAAC,gBAAgB,CAAC,kCAAkC,CAAC;MACjF,WAAW,EAAE,cAAc,CAAC,gBAAgB,CAAC,iCAAiC,CAAC;MAC/E,SAAS,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAA+B,CAAC;MAC3E,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACtF,mBAAmB,EAAE,cAAc,CAAC,gBAAgB,CAAC,2CAA2C,CAAC;MACjG,cAAc,EAAE,cAAc,CAAC,gBAAgB,CAAC,qCAAqC,CAAC;MACtF,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,0BAA0B,CAAC;MAClE,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,gCAAgC,CAAC;MAC7E,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC,8BAA8B,CAAC;MACzE,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,gCAAgC,CAAC;MAC7E,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,gCAAgC,CAAC;MAC7E,MAAM,EAAE,cAAc,CAAC,gBAAgB,CAAC,2BAA2B,CAAC;MACpE,OAAO,EAAE,cAAc,CAAC,gBAAgB,CAAC,4BAA4B,CAAC;KACvE;IACD,SAAS,EAAE;MACT,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;MAChE,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,8BAA8B,CAAC;MAC3E,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC,4BAA4B,CAAC;MACvE,UAAU,EAAE,cAAc,CAAC,gBAAgB,CAAC,8BAA8B,CAAC;MAC3E,MAAM,EAAE,cAAc,CAAC,gBAAgB,CAAC,yBAAyB,CAAC;KACnE;IACD,YAAY,EAAE;MACZ,KAAK,EAAE,cAAc,CAAC,gBAAgB,CAAC,2BAA2B,CAAC;MACnE,MAAM,EAAE,cAAc,CAAC,gBAAgB,CAAC,4BAA4B,CAAC;MACrE,QAAQ,EAAE,cAAc,CAAC,gBAAgB,CAAC,+BAA+B,CAAC;KAC3E;GACF,CAAC;EAEF,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n  const computedStyles = getComputedStyle(document.body);\n\n  const computedTheme: Theme = {\n    loadGoogleFont: computedStyles.getPropertyValue('--jfi-load-google-font'),\n    layout: {\n      fontFamily: computedStyles.getPropertyValue('--jfi-layout-font-family'),\n      padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n      formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n      formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n    },\n    formControl: {\n      backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n      borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n      borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n      borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n      borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n      borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n      borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n      borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n      borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n      borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n      borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n      boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n      boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n      boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n      boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n      color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n      colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n      lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n      margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n      padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n    },\n    formLabel: {\n      color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n      fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n      margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n    },\n    errorMessage: {\n      color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n      margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n      fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n    },\n  };\n\n  return computedTheme;\n};\n\nexport default getComputedTheme;\n"]}

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

@@ -1,7 +1,7 @@
-import { Host, h } from '@stencil/core';
-import { MessageEventType } from './message-event-types';
-import packageJson from '../../../package.json';
-import getComputedTheme from './get-computed-theme';
+import { Host, h } from "@stencil/core";
+import { MessageEventType } from "./message-event-types";
+import packageJson from "../../../package.json";
+import getComputedTheme from "./get-computed-theme";
 export class PaymentMethodForm {
   constructor() {
     this.computedTheme = getComputedTheme();
@@ -19,6 +19,7 @@ export class PaymentMethodForm {
   }
   componentShouldUpdate() {
     this.sendStyleOverrides();
+    this.resize();
   }
   sendStyleOverrides() {
     if (this.computedTheme) {
@@ -38,7 +39,7 @@ export class PaymentMethodForm {
   }
   postMessage(eventType, payload) {
     var _a, _b;
-    (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(Object.assign({ eventType: eventType }, payload), '*');
+    (_b = (_a = this.iframeElement) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(Object.assign({ eventType: eventType }, payload), this.iframeOrigin || process.env.IFRAME_ORIGIN || '*');
   }
   async postMessageWithResponseListener(eventType, payload) {
     return new Promise(resolve => {
@@ -80,7 +81,7 @@ export class PaymentMethodForm {
     return queryParams.join('');
   }
   getIframeSrc() {
-    const iframeOrigin = this.iframeOrigin || 'https://js.justifi.ai/v2';
+    const iframeOrigin = this.iframeOrigin || process.env.IFRAME_ORIGIN || 'https://js.justifi.ai/v2';
     let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     let paramsList = [];
     if (this.paymentMethodFormValidationMode) {
@@ -92,7 +93,10 @@ export class PaymentMethodForm {
     return iframeSrc.concat(this.composeQueryParams(paramsList));
   }
   render() {
-    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => (this.iframeElement = el), height: this.height })));
+    return (h(Host, null, h("iframe", { id: `justifi-payment-method-form-${this.paymentMethodFormType}`, src: this.getIframeSrc(), ref: el => (this.iframeElement = el), height: this.height, onLoad: () => {
+        this.sendStyleOverrides();
+        this.resize();
+      } })));
   }
   static get is() { return "justifi-payment-method-form"; }
   static get originalStyleUrls() {
@@ -232,11 +236,13 @@ export class PaymentMethodForm {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "CreatePaymentMethodResponse": {
               "location": "import",
-              "path": "./payment-method-responses"
+              "path": "./payment-method-responses",
+              "id": "src/components/payment-method-form/payment-method-responses.ts::CreatePaymentMethodResponse"
             }
           },
           "return": "Promise<CreatePaymentMethodResponse>"
@@ -252,7 +258,8 @@ export class PaymentMethodForm {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<any>"
@@ -268,7 +275,8 @@ export class PaymentMethodForm {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<any>"

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

@@ -1 +1 @@
-{"version":3,"file":"payment-method-form.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/payment-method-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-method-form',\n  styleUrl: 'payment-method-form.css',\n  shadow: false,\n})\nexport class PaymentMethodForm {\n  @Prop() paymentMethodFormType: 'card' | 'bankAccount';\n  @Prop({\n    mutable: true,\n  })\n  paymentMethodFormValidationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n  @Prop() iframeOrigin?: string;\n  @Prop() singleLine: boolean;\n  @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n  @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n  @State() height: number = 55;\n\n  private computedTheme: Theme = getComputedTheme();\n\n  iframeElement!: HTMLIFrameElement;\n\n  connectedCallback() {\n    window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  componentShouldUpdate() {\n    this.sendStyleOverrides();\n  }\n\n  sendStyleOverrides() {\n    if (this.computedTheme) {\n      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n    }\n  }\n\n  private dispatchMessageEvent(messageEvent: MessageEvent) {\n    const messagePayload = messageEvent.data;\n    const messageType = messagePayload.eventType;\n    const messageData = messagePayload.data;\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n      this.paymentMethodFormReady.emit(messageData);\n    }\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n      this.height = messageData.height;\n    }\n  }\n\n  private postMessage(eventType: string, payload?: any) {\n    this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n  }\n\n  private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n    return new Promise(resolve => {\n      const responseListener = (event: MessageEvent) => {\n        if (event.data.eventType !== eventType) return;\n        window.removeEventListener('message', responseListener);\n        resolve(event.data.data);\n      };\n      window.addEventListener('message', responseListener);\n      this.postMessage(eventType, payload);\n    });\n  }\n\n  @Method()\n  async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n    const payload = {\n      clientId: clientId,\n      componentVersion: packageJson.version,\n      paymentMethodMetadata: paymentMethodMetadata,\n      account: account,\n    };\n\n    return this.postMessageWithResponseListener(eventType, payload);\n  }\n\n  @Method()\n  async validate(): Promise<any> {\n    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n  }\n\n  @Method()\n  async resize(): Promise<any> {\n    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n  }\n\n  private composeQueryParams(values: string[]) {\n    const queryParams = values.map(value => {\n      if (value === values[0]) {\n        return (value = `?${value}`);\n      } else {\n        return (value = `&${value}`);\n      }\n    });\n    return queryParams.join('');\n  }\n\n  private getIframeSrc() {\n    const iframeOrigin = this.iframeOrigin || 'https://js.justifi.ai/v2';\n    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n    let paramsList = [];\n    if (this.paymentMethodFormValidationMode) {\n      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n    }\n    if (this.singleLine) {\n      paramsList.push(`singleLine=${this.singleLine}`);\n    }\n\n    return iframeSrc.concat(this.composeQueryParams(paramsList));\n  }\n\n  render() {\n    return (\n      <Host>\n        <iframe\n          id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n          src={this.getIframeSrc()}\n          ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n          height={this.height}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"payment-method-form.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/payment-method-form.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-method-form',\n  styleUrl: 'payment-method-form.css',\n  shadow: false,\n})\nexport class PaymentMethodForm {\n  @Prop() paymentMethodFormType: 'card' | 'bankAccount';\n  @Prop({\n    mutable: true,\n  })\n  paymentMethodFormValidationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n  @Prop() iframeOrigin?: string;\n  @Prop() singleLine: boolean;\n  @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n  @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n  @State() height: number = 55;\n\n  private computedTheme: Theme = getComputedTheme();\n\n  iframeElement!: HTMLIFrameElement;\n\n  connectedCallback() {\n    window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  componentShouldUpdate() {\n    this.sendStyleOverrides();\n    this.resize();\n  }\n\n  sendStyleOverrides() {\n    if (this.computedTheme) {\n      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n    }\n  }\n\n  private dispatchMessageEvent(messageEvent: MessageEvent) {\n    const messagePayload = messageEvent.data;\n    const messageType = messagePayload.eventType;\n    const messageData = messagePayload.data;\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n      this.paymentMethodFormReady.emit(messageData);\n    }\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n      this.height = messageData.height;\n    }\n  }\n\n  private postMessage(eventType: string, payload?: any) {\n    this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, this.iframeOrigin || process.env.IFRAME_ORIGIN || '*');\n  }\n\n  private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n    return new Promise(resolve => {\n      const responseListener = (event: MessageEvent) => {\n        if (event.data.eventType !== eventType) return;\n        window.removeEventListener('message', responseListener);\n        resolve(event.data.data);\n      };\n      window.addEventListener('message', responseListener);\n      this.postMessage(eventType, payload);\n    });\n  }\n\n  @Method()\n  async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n    const payload = {\n      clientId: clientId,\n      componentVersion: packageJson.version,\n      paymentMethodMetadata: paymentMethodMetadata,\n      account: account,\n    };\n\n    return this.postMessageWithResponseListener(eventType, payload);\n  }\n\n  @Method()\n  async validate(): Promise<any> {\n    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n  }\n\n  @Method()\n  async resize(): Promise<any> {\n    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n  }\n\n  private composeQueryParams(values: string[]) {\n    const queryParams = values.map(value => {\n      if (value === values[0]) {\n        return (value = `?${value}`);\n      } else {\n        return (value = `&${value}`);\n      }\n    });\n    return queryParams.join('');\n  }\n\n  private getIframeSrc() {\n    const iframeOrigin = this.iframeOrigin || process.env.IFRAME_ORIGIN || 'https://js.justifi.ai/v2';\n    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n    let paramsList = [];\n    if (this.paymentMethodFormValidationMode) {\n      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n    }\n    if (this.singleLine) {\n      paramsList.push(`singleLine=${this.singleLine}`);\n    }\n\n    return iframeSrc.concat(this.composeQueryParams(paramsList));\n  }\n\n  render() {\n    return (\n      <Host>\n        <iframe\n          id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n          src={this.getIframeSrc()}\n          ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n          height={this.height}\n          onLoad={() => {\n            this.sendStyleOverrides();\n            this.resize();\n          }}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 it('should emit "paymentMethodFormReady" when conditions are met', async () => {
   const page = await newE2EPage();
   await page.setContent('<justifi-card-form></justifi-card-form>');

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

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-import { PaymentMethodForm } from '../payment-method-form';
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { PaymentMethodForm } from "../payment-method-form";
 describe('justifi-payment-method-form', () => {
   it('renders an iframe', async () => {
     const page = await newSpecPage({

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

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/theme.ts"],"names":[],"mappings":"","sourcesContent":["export interface Theme {\n  layout?: {\n    padding?: string;\n    formControlSpacingHorizontal?: string;\n    formControlSpacingVertical?: string;\n  };\n  formLabel?: {\n    color?: string;\n    fontFamily?: string;\n    fontSize?: string;\n    fontWeight?: string;\n    margin?: string;\n  };\n  formControl?: {\n    backgroundColor?: string;\n    backgroundColorHover?: string;\n    borderColor?: string;\n    borderColorHover?: string;\n    borderColorFocus?: string;\n    borderColorError?: string;\n    borderWidth?: string;\n    borderBottomWidth?: string;\n    borderLeftWidth?: string;\n    borderRightWidth?: string;\n    borderTopWidth?: string;\n    borderRadius?: string;\n    borderStyle?: string;\n    boxShadow?: string;\n    boxShadowError?: string;\n    boxShadowErrorFocus?: string;\n    boxShadowFocus?: string;\n    color?: string;\n    colorFocus?: string;\n    fontSize?: string;\n    fontWeight?: string;\n    lineHeight?: string;\n    margin?: string;\n    padding?: string;\n  };\n  errorMessage?: {\n    color?: string;\n    margin?: string;\n    fontSize?: string;\n  };\n}\n"]}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../../src/components/payment-method-form/theme.ts"],"names":[],"mappings":"","sourcesContent":["export interface Theme {\n  loadGoogleFont: string;\n  layout?: {\n    fontFamily?: string;\n    padding?: string;\n    formControlSpacingHorizontal?: string;\n    formControlSpacingVertical?: string;\n  };\n  formLabel?: {\n    color?: string;\n    fontFamily?: string;\n    fontSize?: string;\n    fontWeight?: string;\n    margin?: string;\n  };\n  formControl?: {\n    backgroundColor?: string;\n    backgroundColorHover?: string;\n    borderColor?: string;\n    borderColorHover?: string;\n    borderColorFocus?: string;\n    borderColorError?: string;\n    borderWidth?: string;\n    borderBottomWidth?: string;\n    borderLeftWidth?: string;\n    borderRightWidth?: string;\n    borderTopWidth?: string;\n    borderRadius?: string;\n    borderStyle?: string;\n    boxShadow?: string;\n    boxShadowError?: string;\n    boxShadowErrorFocus?: string;\n    boxShadowFocus?: string;\n    color?: string;\n    colorFocus?: string;\n    fontSize?: string;\n    fontWeight?: string;\n    lineHeight?: string;\n    margin?: string;\n    padding?: string;\n  };\n  errorMessage?: {\n    color?: string;\n    margin?: string;\n    fontSize?: string;\n  };\n}\n"]}

package/dist/collection/components/payments-list/example.js

@@ -0,0 +1,12 @@
+import { head } from '../../../storybook-pages/example-parts';
+
+export default `<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+${head('justifi-payments-list')}
+
+<body>
+  <justifi-payments-list></justifi-payments-list>
+</body>
+
+</html>`;