@justifi/webcomponents 4.19.3-rc-2 → 4.20.0

package/dist/module/justifi-season-interruption-insurance.js

@@ -3,19 +3,21 @@ import { A as Api } from './Api.js';
 import './Pagination.js';
 import './Payment.js';
 import './Payout.js';
+import { c as config } from './config.js';
 import { g as getErrorMessage, a as getErrorCode } from './utils3.js';
 import { a as ComponentErrorSeverity, C as ComponentErrorCodes } from './ComponentError.js';
 import { J as JustifiAnalytics } from './Analytics.js';
+import { c as checkPkgVersion } from './check-pkg-version.js';
 import { d as defineCustomElement$2 } from './season-interruption-insurance-core.js';
 
 class InsuranceService {
     async fetchQuote(authToken, payload) {
         const endpoint = 'insurance/quotes';
-        return Api({ authToken, apiOrigin: "" }).post(endpoint, JSON.stringify(payload));
+        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).post(endpoint, payload);
     }
     async toggleCoverage(authToken, quoteId, payload) {
         const endpoint = `insurance/quotes/${quoteId}/toggle`;
-        return Api({ authToken, apiOrigin: "" }).post(endpoint, JSON.stringify(payload));
+        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).post(endpoint, payload);
     }
 }
 
@@ -101,6 +103,7 @@ const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class Seaso
         return this.seasonInterruptionCoreRef.validate();
     }
     componentWillLoad() {
+        checkPkgVersion();
         this.analytics = new JustifiAnalytics(this);
         this.initializeServiceMethods();
     }
@@ -126,7 +129,7 @@ const SeasonInterruptionInsurance = /*@__PURE__*/ proxyCustomElement(class Seaso
         });
     }
     render() {
-        return (h("justifi-season-interruption-insurance-core", { key: '256d45d39c5d297abb7f955229b0e0e9fbc9504a', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
+        return (h("justifi-season-interruption-insurance-core", { key: '0ef99882f70c9886e8a5b49da5fe89dd4421067a', ref: (el) => (this.seasonInterruptionCoreRef = el), "checkout-id": this.checkoutId, getQuote: this.getQuote, toggleCoverage: this.toggleCoverage, "primary-identity-first-name": this.primaryIdentityFirstName, "primary-identity-last-name": this.primaryIdentityLastName, "primary-identity-state": this.primaryIdentityState, "primary-identity-postal-code": this.primaryIdentityPostalCode, "primary-identity-country": this.primaryIdentityCountry, "primary-identity-email-address": this.primaryIdentityEmailAddress, "policy-attributes-insurable-amount": this.policyAttributesInsurableAmount, "policy-attributes-start-date": this.policyAttributesStartDate, "policy-attributes-end-date": this.policyAttributesEndDate, "covered-identity-first-name": this.coveredIdentityFirstName, "covered-identity-last-name": this.coveredIdentityLastName }));
     }
 }, [1, "justifi-season-interruption-insurance", {
         "authToken": [1, "auth-token"],

package/dist/module/legal-address-form-step-core.js

@@ -3,7 +3,6 @@ import { a as addressSchema } from './business-address-schema.js';
 import { F as FormController } from './form.js';
 import { b as Address } from './Business.js';
 import { S as StateOptions } from './state-options.js';
-import { c as parseAddressInfo } from './payload-parsers.js';
 import { n as numberOnlyHandler } from './utils4.js';
 import { d as defineCustomElement$4 } from './form-control-error-text2.js';
 import { d as defineCustomElement$3 } from './form-control-help-text2.js';
@@ -72,8 +71,8 @@ const LegalAddressFormStepCore = /*@__PURE__*/ proxyCustomElement(class LegalAdd
     }
     ;
     get patchPayload() {
-        let formValues = parseAddressInfo(this.formController.values.getValue());
-        return JSON.stringify({ legal_address: formValues });
+        let formValues = new Address(this.formController.values.getValue()).payload;
+        return { legal_address: formValues };
     }
     componentWillLoad() {
         this.getBusiness && this.getData();
@@ -87,7 +86,7 @@ const LegalAddressFormStepCore = /*@__PURE__*/ proxyCustomElement(class LegalAdd
     render() {
         var _a, _b, _c, _d, _e, _f;
         const legalAddressDefaultValue = this.formController.getInitialValues();
-        return (h("form", { key: 'ef8d88ebced702b5a0b89eaddb22320f24e7081f' }, h("fieldset", { key: '9f70633b36559e6f8de8d67f39a19df365116bcd' }, h("legend", { key: '6b6b0e42fd0f00a28d24bf9d1e4818e54264ff96' }, "Business Legal Address"), h("hr", { key: '8b7b1a9f0f9448c4fd3b918f20e7b51337d3e5ee' }), h("div", { key: 'f45b643ec057356d9a6e04a19829c562ec521bd2', class: 'row gy-3' }, h("div", { key: 'f115c4e4163126d2d8c998c8de775821e7fc0e65', class: 'col-12' }, h("form-control-text", { key: '066a1ea25ef086dda05e32cde738e7e77dcbb322', name: 'line1', label: 'Legal Address', inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { key: 'e8432ea00cd5da5b08cc97efe8f3a9817a14b5b1', class: 'col-12' }, h("form-control-text", { key: '099ab7197940d5de8869682cbda41dc0d6ee0e1d', name: 'line2', label: 'Address Line 2', inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { key: '9514757f732d6a445e48eb85d3654f79cf2320db', class: 'col-12' }, h("form-control-text", { key: '37db927ef6c735699a4954ad51d43f4666eea9a0', name: 'city', label: 'City', inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { key: 'f3c82def0d67fcc0d7e4ca03e80afc166a36ffbb', class: 'col-12' }, h("form-control-select", { key: 'cbcfafe876997e0f9181cf117eeaf465ca424c68', name: 'state', label: 'State', options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { key: '4f32ffbe520d1fbe2406d41e7fb76a9f0f450299', class: 'col-12' }, h("form-control-text", { key: '5a2fcc4726b543e8ef6c5456e965cc479d91ce4e', name: 'postal_code', label: 'Postal Code', inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'd4bdbfa4d3999bae59b812e84394bb4c0974d6b3', class: 'col-12' }, h("form-control-select", { key: '95eec216f50d119016c7627074bf29b9a21b1cd1', name: 'country', label: 'Country', options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
+        return (h("form", { key: '5a95fe5a130deded7e160e6fe4ba1d09e6a6aabc' }, h("fieldset", { key: '2011fac5c860b7beee5eaac28e697b284067f2e6' }, h("legend", { key: 'dbe411d80d10a71bc63f18fcdb58a40b124e8eaf' }, "Business Legal Address"), h("hr", { key: '4a91dd5e67e5770778d2dd59716e1e532d644ee9' }), h("div", { key: 'cd53516a98498ab82ab347a1f7c836be262b9fdb', class: 'row gy-3' }, h("div", { key: '14cd5fee5661681ccff95eabf8cd6f2d4cff2296', class: 'col-12' }, h("form-control-text", { key: 'e4b0a5e30fc1a35e5127a76710211874fb68898b', name: 'line1', label: 'Legal Address', inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line1, errorText: (_a = this.errors) === null || _a === void 0 ? void 0 : _a.line1 })), h("div", { key: '2c35da509732e73e2abb4365d6d9e2056d7ce771', class: 'col-12' }, h("form-control-text", { key: 'c8ae2a5c75d0fe8c5ddd46d9150590b8a4f99a5e', name: 'line2', label: 'Address Line 2', inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.line2, errorText: (_b = this.errors) === null || _b === void 0 ? void 0 : _b.line2 })), h("div", { key: '07649ebd5a848eee63398965c30e8e30fcc88354', class: 'col-12' }, h("form-control-text", { key: 'cb25047c3458124f7d837b7948e807214f1a0a0a', name: 'city', label: 'City', inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.city, errorText: (_c = this.errors) === null || _c === void 0 ? void 0 : _c.city })), h("div", { key: 'ce3ddc5f3639503dbc02668aea7139ffff376545', class: 'col-12' }, h("form-control-select", { key: '00d18b4af1f415828b40404888a6c69d0611d0cc', name: 'state', label: 'State', options: StateOptions, inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.state, errorText: (_d = this.errors) === null || _d === void 0 ? void 0 : _d.state })), h("div", { key: '1988bd739af107d9595f6fed897f257da13ac997', class: 'col-12' }, h("form-control-text", { key: '55144c39845d4cc36704170b73458f761f311d00', name: 'postal_code', label: 'Postal Code', inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.postal_code, errorText: (_e = this.errors) === null || _e === void 0 ? void 0 : _e.postal_code, maxLength: 5, keyDownHandler: numberOnlyHandler })), h("div", { key: 'cccba799a75280693f461f390121b13006877f35', class: 'col-12' }, h("form-control-select", { key: 'e49b21a781280fb2e9cc9f6b88ddcc6d7408c5f8', name: 'country', label: 'Country', options: [{ label: 'United States', value: 'USA' }], inputHandler: this.inputHandler, defaultValue: legalAddressDefaultValue === null || legalAddressDefaultValue === void 0 ? void 0 : legalAddressDefaultValue.country, errorText: (_f = this.errors) === null || _f === void 0 ? void 0 : _f.country,
             // just for now so we skip handling country specificities
             disabled: true }))))));
     }

package/dist/module/new-payment-method.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { c as config } from './config.js';
 import { d as defineCustomElement$7 } from './form-control-error-text2.js';
 import { d as defineCustomElement$6 } from './form-control-help-text2.js';
 import { d as defineCustomElement$5 } from './form-control-select2.js';
@@ -19,7 +20,7 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
         this.onPaymentMethodOptionClick = () => {
             this.paymentMethodOptionSelected.emit(this.paymentMethodOption);
         };
-        this.iframeOrigin = "";
+        this.iframeOrigin = config.iframeOrigin;
         this.authToken = undefined;
         this.accountId = undefined;
         this.paymentMethodOption = undefined;
@@ -27,9 +28,6 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
         this.isSelected = undefined;
         this.saveNewPaymentMethodChecked = false;
     }
-    componentWillLoad() {
-        console.log('NewPaymentMethod: componentWillLoad iframeOrigin', this, this.iframeOrigin);
-    }
     handleCheckboxChanged(event) {
         this.saveNewPaymentMethodChecked = event.detail;
     }
@@ -82,7 +80,7 @@ const NewPaymentMethod = /*@__PURE__*/ proxyCustomElement(class NewPaymentMethod
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: 'd597ba8b0ac2a650a14a79d002a91ef3edf604a4', class: "payment-method" }, h("div", { key: 'a287f7ffd480f17f0f1093d71b9d02fe3db39e0f', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: 'f53d08d048cc242414fcf6794614ad2334db81bb', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '01712a80a30df19a7b540434532cffb4cb3b61e8', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
+        return (h("div", { key: '7b17c9f060764f959286e739a2c05a43d1363f0e', class: "payment-method" }, h("div", { key: '5f09658f3be4cf75ee6df659d02b9bb29a0af2c3', class: `payment-method-header p-3`, onClick: () => this.onPaymentMethodOptionClick() }, h("input", { key: '5187b4d23e10272df064b554130b856332b77e43', type: "radio", name: "paymentMethodType", id: (_a = this.paymentMethodOption) === null || _a === void 0 ? void 0 : _a.id, value: (_b = this.paymentMethodOption) === null || _b === void 0 ? void 0 : _b.id, onClick: (event) => event.preventDefault(), checked: this.isSelected, class: "form-check-input me-2" }), h("label", { key: '1814812e3246a5f9a5734cbb40af529a61e73f21', htmlFor: (_c = this.paymentMethodOption) === null || _c === void 0 ? void 0 : _c.id, class: "form-check-label" }, PaymentMethodTypeLabels[(_d = this.paymentMethodOption) === null || _d === void 0 ? void 0 : _d.id])), this.isSelected ? this.showNewPaymentMethodForm() : null));
     }
 }, [0, "justifi-new-payment-method", {
         "iframeOrigin": [1025, "iframe-origin"],

package/dist/module/owner-form-core2.js

@@ -3,7 +3,6 @@ import { F as FormController } from './form.js';
 import { O as Owner } from './Business.js';
 import { b as BusinessFormClickActions } from './business-form-types.js';
 import { i as identitySchema } from './business-identity-schema.js';
-import { b as parseIdentityInfo } from './payload-parsers.js';
 import { B as Button } from './button.js';
 import { d as defineCustomElement$8 } from './form-control-date2.js';
 import { d as defineCustomElement$7 } from './form-control-error-text2.js';
@@ -144,12 +143,12 @@ const BusinessOwnerFormCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwn
         }
     }
     get payload() {
-        let formValues = parseIdentityInfo(this.formController.values.getValue());
+        let formValues = new Owner(this.formController.values.getValue()).payload;
         if (this.ownerId) {
-            return JSON.stringify(formValues);
+            return formValues;
         }
         else {
-            return JSON.stringify(Object.assign(Object.assign({}, formValues), { business_id: this.businessId }));
+            return Object.assign(Object.assign({}, formValues), { business_id: this.businessId });
         }
     }
     get formTitle() {
@@ -180,7 +179,7 @@ const BusinessOwnerFormCore = /*@__PURE__*/ proxyCustomElement(class BusinessOwn
         this.formController.errors.subscribe(errors => (this.errors = Object.assign({}, errors)));
     }
     render() {
-        return (h("form", { key: 'b2e2aaced859260e9d2ef59bc3f8a0763d05872c', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '2a93ddb4c945be0ec081ce31d6d9eff4b302d622' }, h("legend", { key: 'ea9859e55099e3f8263024d884edfb48b3666eaa', class: "fw-semibold fs-5" }, this.formTitle), h("br", { key: 'f646c1ecc544c358d87e701aba8e151fcb96c54e' }), h("div", { key: '874bf4ebd7cef0afbdee96fa4d5679b6d683b0f0', class: "row gy-3" }, h("owner-form-inputs", { key: '866dbf0002ec1ac70d7942c6011c67f8cd144960', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: '15d907270ecf3d16769cedea39ba279d7ffb0748', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '84c09ef594e7fa387e64a09014de81ed713cc765', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: '1dafd97aa7b84644c9d011224a152ad7f99ce620', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: 'f1f31da4d147afcd01ef96acd01d63ee9497dd6b' }))));
+        return (h("form", { key: '27f0d989f017bd03b84cf8c994fa96f9a65aad08', onSubmit: this.validateAndSubmit }, h("fieldset", { key: '2c793f1f8777181e5db0a4cae5b9994d9188685e' }, h("legend", { key: 'a8951fcd990c8136cf6672424869f5c96def3cef', class: "fw-semibold fs-5" }, this.formTitle), h("br", { key: 'faaf0cc27c448452a5172ad7fcfcf510ec586d2b' }), h("div", { key: '486638ad24414a05f84ada3f37a89d0cc12e7ffb', class: "row gy-3" }, h("owner-form-inputs", { key: 'bdfe7cb3305f31d93321319ef14eee3e5b331381', ownerDefaultValue: this.formController.getInitialValues(), errors: this.errors, formController: this.formController }), h("div", { key: '9e5c63e0637e0bffe5ab77a1f73c203704115479', class: "d-flex gap-2 justify-content-start" }, h(Button, { key: '85de4b69c697ebf96778f538b1535bd1fb2c43e7', variant: "secondary", type: "button", onClick: this.handleRemoveOwner, hidden: !this.showRemoveButton }, "Remove"), h(Button, { key: '1dd026432f19f84ae2142101191e511ebd62c2b3', variant: "primary", type: "submit", onClick: this.handleAddOwner, disabled: this.isLoading }, this.submitButtonText))), h("hr", { key: '2570611bbe663e2e128f03806ecb036ce750c80b' }))));
     }
     static get watchers() { return {
         "isLoading": ["loadingWatcher"]

package/dist/module/package.js

@@ -1,5 +1,5 @@
 const name = "@justifi/webcomponents";
-const version = "4.19.3-rc-2";
+const version = "4.20.0";
 const description = "JustiFi Web Components";
 const collection = "dist/collection/collection-manifest.json";
 const main = "dist/index.cjs.js";
@@ -27,6 +27,7 @@ const scripts = {
 	"test:file": "stencil test --spec --watch --"
 };
 const dependencies = {
+	"@popperjs/core": "^2.11.8",
 	"@stencil/core": "^4.0.5",
 	"@stencil/store": "^2.0.8",
 	bootstrap: "^5.2.3",
@@ -35,6 +36,7 @@ const dependencies = {
 	"dinero.js": "^1.9.1",
 	"iframe-resizer": "^4.3.7",
 	imask: "^7.6.0",
+	lodash: "^4.17.21",
 	rxjs: "^7.8.1",
 	"ts-dedent": "^2.2.0",
 	uuid: "^9.0.0",
@@ -44,7 +46,7 @@ const devDependencies = {
 	"@babel/preset-env": "^7.21.5",
 	"@babel/preset-react": "^7.18.6",
 	"@babel/preset-typescript": "^7.21.5",
-	"@rollup/plugin-replace": "^5.0.7",
+	"@rollup/plugin-replace": "^6.0.1",
 	"@stencil/sass": "^3.0.1",
 	"@types/jest": "27.0.3",
 	"@types/react": "^18.0.37",

package/dist/module/payment-details-core2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { M as MapPaymentStatusToBadge, a as formatCurrency, g as formatDate, k as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
+import { M as MapPaymentStatusToBadge, a as formatCurrency, e as formatDate, j as formatTime, s as snakeCaseToHumanReadable } from './utils2.js';
 import { L as LoadingState, E as ErrorState, b as EntityHeadInfo, c as EntityHeadInfoItem, D as DetailSectionTitle, a as DetailItem, C as CodeBlock } from './utils.js';
 import { S as StyledHost } from './styled-host.js';
 import { d as defineCustomElement$1 } from './details.js';

package/dist/module/payment-method-options.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as config } from './config.js';
 import { P as PaymentMethodTypes } from './Payment.js';
 import { d as defineCustomElement$2, P as PaymentMethodOption } from './saved-payment-method.js';
 import { d as defineCustomElement$a } from './form-control-error-text2.js';
@@ -31,7 +32,7 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
         this.insuranceToggled = undefined;
         this.authToken = undefined;
         this.accountId = undefined;
-        this.iframeOrigin = "";
+        this.iframeOrigin = config.iframeOrigin;
         this.savedPaymentMethods = [];
         this.paymentAmount = undefined;
         this.selectedPaymentMethodId = undefined;
@@ -77,7 +78,7 @@ const PaymentMethodOptions = /*@__PURE__*/ proxyCustomElement(class PaymentMetho
     }
     render() {
         var _a;
-        return (h(Host, { key: '7ee40a1bdc9ec15596e870b48cbe7b6bbc20537c' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
+        return (h(Host, { key: '86e309b90ab00f530dd803b00e5aab511f92300f' }, (_a = this.paymentMethodOptions) === null || _a === void 0 ? void 0 : _a.map((paymentMethodOption) => {
             const newCard = paymentMethodOption.id === PaymentMethodTypes.card;
             const newBankAccount = paymentMethodOption.id === PaymentMethodTypes.bankAccount;
             const isSelected = this.selectedPaymentMethodId === paymentMethodOption.id;

package/dist/module/payment.service.js

@@ -2,16 +2,17 @@ import { A as Api } from './Api.js';
 import './Pagination.js';
 import './Payment.js';
 import './Payout.js';
+import { c as config } from './config.js';
 
 class PaymentService {
     async fetchPayments(accountId, authToken, params) {
-        const api = Api({ authToken, apiOrigin: "" });
+        const api = Api({ authToken, apiOrigin: config.proxyApiOrigin });
         const endpoint = `account/${accountId}/payments`;
         return api.get(endpoint, params);
     }
     async fetchPayment(paymentId, authToken) {
         const endpoint = `payments/${paymentId}`;
-        return Api({ authToken, apiOrigin: "" }).get(endpoint);
+        return Api({ authToken, apiOrigin: config.proxyApiOrigin }).get(endpoint);
     }
 }
 

package/dist/module/payments-list-core2.js

@@ -2,13 +2,18 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
 import { p as pagingDefaults } from './Pagination.js';
 import './Payment.js';
 import './Payout.js';
-import { g as formatDate, k as formatTime, a as formatCurrency, M as MapPaymentStatusToBadge } from './utils2.js';
+import { e as formatDate, j as formatTime, a as formatCurrency, M as MapPaymentStatusToBadge } from './utils2.js';
 import { t as tableExportedParts, T as TableLoadingState, a as TableEmptyState, b as TableErrorState } from './exported-parts.js';
 import { S as StyledHost } from './styled-host.js';
-import { d as defineCustomElement$4 } from './form-control-date2.js';
-import { d as defineCustomElement$3 } from './form-control-error-text2.js';
-import { d as defineCustomElement$2 } from './form-control-help-text2.js';
-import { d as defineCustomElement$1 } from './pagination-menu2.js';
+import { d as defineCustomElement$1, o as onFilterChange } from './table-filters-menu2.js';
+import { d as defineCustomElement$9 } from './custom-popper2.js';
+import { d as defineCustomElement$8 } from './form-control-date2.js';
+import { d as defineCustomElement$7 } from './form-control-error-text2.js';
+import { d as defineCustomElement$6 } from './form-control-help-text2.js';
+import { d as defineCustomElement$5 } from './form-control-select2.js';
+import { d as defineCustomElement$4 } from './form-control-text2.js';
+import { d as defineCustomElement$3 } from './pagination-menu2.js';
+import { d as defineCustomElement$2 } from './payments-list-filters2.js';
 
 const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore extends HTMLElement {
     constructor() {
@@ -32,15 +37,19 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
                 return;
             this.rowClicked.emit(this.payments.find((payment) => payment.id === clickedPaymentID));
         };
-        this.handleDateChange = (name, value) => {
-            this.params = Object.assign(Object.assign({}, this.params), { [name]: value });
+        this.setParamsOnChange = (name, value) => {
+            let newParams = { [name]: value };
+            this.params = onFilterChange(newParams, this.params);
+        };
+        this.clearParams = () => {
+            this.params = {};
         };
-        this.getPayments = undefined;
         this.payments = [];
         this.loading = true;
         this.errorMessage = undefined;
         this.paging = pagingDefaults;
-        this.params = undefined;
+        this.params = {};
+        this.getPayments = undefined;
     }
     updateOnPropChange() {
         this.fetchData();
@@ -89,8 +98,8 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
             {
                 type: 'head',
                 value: `
-          <div class='fw-bold'>${formatDate(payment.created_at)}</div>
-          <div class='fw-bold'>${formatTime(payment.created_at)}</div>
+          <div class="fw-bold">${formatDate(payment.created_at)}</div>
+          <div class="fw-bold">${formatTime(payment.created_at)}</div>
         `,
             },
             formatCurrency(payment.amount),
@@ -115,8 +124,8 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
     }
     render() {
         var _a, _b;
-        return (h(StyledHost, { key: 'e4a4b64b2927a009f7ad4e9e2ebb4c020401423c', exportparts: tableExportedParts }, h("div", { key: '6ac1c84338b84972ca9b001ecd2b90134c99de6b', class: "row gy-3 mb-4" }, h("div", { key: '1d279ec66bc0755b876e29f06ac24d51baa77caa', class: "col-2" }, h("form-control-date", { key: '65b29c031021f3f782c9a4597167dc5e3a44e7da', name: "created_after", label: "Start Date", inputHandler: this.handleDateChange })), h("div", { key: 'a032497a94cc8108fda6efbb741069407e1a5afe', class: "col-2" }, h("form-control-date", { key: '5dd62ebdbf3836567a9ccb03dec850ebe675cb79', name: "created_before", label: "End Date", inputHandler: this.handleDateChange }))), h("div", { key: 'be4094afd3aec1d742d9d3245c2f6fc50cb95fa0', class: "table-wrapper" }, h("table", { key: 'ed493e35f2bddd59d1034dffe2bcd8b54a6390d6', class: "table table-hover" }, h("thead", { key: 'fae77bda1ffc35ac5414743ab51c2fe1dfbbc29e', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '5be3b1e9883d337046c386046565fb6ac3366324', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : '' }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: 'ba950a1da1ec0dffd7bc8457cdb3ce65d0f8b69b', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: '8d13d8f6b64377f560d06410c09d24293708b6a8', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'c75d61977b26ca5d4aa3711bae1ce6e571b3e3b2', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '08e3f88116de5783f018a0c06d21d0d9cc4f5feb', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
-            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? 'table-row-even' : 'table-row-odd'}` }, data.map((dataEntry) => {
+        return (h(StyledHost, { key: 'aa139e92669ea06532373a64f08a9926f9ddb4d0', exportparts: tableExportedParts }, h("payments-list-filters", { key: 'd5338eb8899dc99a9633cd892400fc4749edb4b6', params: this.params, setParamsOnChange: this.setParamsOnChange, clearParams: this.clearParams }), h("div", { key: 'dd452f6a2920ef50fb24324efdf65407f7d964f7', class: "table-wrapper" }, h("table", { key: '64d2d4304549595b80a45ee5684f7ac3cd296245', class: "table table-hover" }, h("thead", { key: '256145c2eea8ac35f1c83663cba68d85287f33fc', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '43a9d75516e80bb5cd04f2575370c863f6413528', class: "table-light text-nowrap", part: "table-head-row" }, (_a = this.columnData) === null || _a === void 0 ? void 0 : _a.map((column) => (h("th", { part: "table-head-cell", scope: "col", title: Array.isArray(column) ? column[1] : "" }, !Array.isArray(column) ? column : column[0]))))), h("tbody", { key: 'f95b3b11a9fe046a14a78aaa9f08a5522bead677', class: "table-body", part: "table-body" }, h(TableLoadingState, { key: 'f92ed5822f5f3946463b89ed746ab641cbf3b2b3', columnSpan: this.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: 'ddd2a229c0bb493480504ddcd855d2957b5acedd', isEmpty: this.showEmptyState, columnSpan: this.columnData.length }), h(TableErrorState, { key: '0a42c24d04d0cb23804e4a55d185cb9da4b205ab', columnSpan: this.columnData.length, errorMessage: this.errorMessage }), this.showRowData &&
+            this.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler, part: `table-row ${index % 2 ? "table-row-even" : "table-row-odd"}` }, data.map((dataEntry) => {
                 let nestedHtml = dataEntry === null || dataEntry === void 0 ? void 0 : dataEntry.type;
                 if (nestedHtml) {
                     return h("td", { part: "table-cell", innerHTML: dataEntry.value });
@@ -124,7 +133,7 @@ const PaymentsListCore = /*@__PURE__*/ proxyCustomElement(class PaymentsListCore
                 else {
                     return h("td", { part: "table-cell" }, dataEntry);
                 }
-            }))))), this.paging && (h("tfoot", { key: '728f671ab03923c90e11901a0d3aac4bc30e72a7', class: "sticky-bottom" }, h("tr", { key: 'd0df9b7c857287eec9568157ecf8f547a01f2fc5', class: "table-light align-middle" }, h("td", { key: 'e0de54912240b3e812f37ea675b2eef50d9545c4', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: 'f2d7846030a5aaa0c2311cad61f4d5865440a904', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
+            }))))), this.paging && (h("tfoot", { key: '20f135407c3d167359b1e2dd1f12b751b31ac80e', class: "sticky-bottom" }, h("tr", { key: 'dae4f695a77846739f2cc80f1e210f0d24d4671e', class: "table-light align-middle" }, h("td", { key: '6f2ed8b9b062a008f521aad3fe7f2ac923316955', part: "pagination-bar", colSpan: (_b = this.columnData) === null || _b === void 0 ? void 0 : _b.length }, h("pagination-menu", { key: '18c83657e78378ce8b59d6216479047f7728691f', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }), params: this.params })))))))));
     }
     static get watchers() { return {
         "params": ["updateOnPropChange"],
@@ -145,29 +154,54 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["payments-list-core", "form-control-date", "form-control-error-text", "form-control-help-text", "pagination-menu"];
+    const components = ["payments-list-core", "custom-popper", "form-control-date", "form-control-error-text", "form-control-help-text", "form-control-select", "form-control-text", "pagination-menu", "payments-list-filters", "table-filters-menu"];
     components.forEach(tagName => { switch (tagName) {
         case "payments-list-core":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PaymentsListCore);
             }
             break;
+        case "custom-popper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
         case "form-control-date":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$8();
             }
             break;
         case "form-control-error-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$7();
             }
             break;
         case "form-control-help-text":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$6();
+            }
+            break;
+        case "form-control-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "form-control-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
             }
             break;
         case "pagination-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "payments-list-filters":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "table-filters-menu":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }

package/dist/module/payments-list-filters.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PaymentsListFilters extends Components.PaymentsListFilters, HTMLElement {}
+export const PaymentsListFilters: {
+    prototype: PaymentsListFilters;
+    new (): PaymentsListFilters;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/module/payments-list-filters.js

@@ -0,0 +1,6 @@
+import { P as PaymentsListFilters$1, d as defineCustomElement$1 } from './payments-list-filters2.js';
+
+const PaymentsListFilters = PaymentsListFilters$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PaymentsListFilters, defineCustomElement };