@justifi/webcomponents 0.2.2 → 0.4.0

package/dist/cjs/justifi-bank-account-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
 
 const BankAccountForm = class {
   constructor(hostRef) {
@@ -12,6 +12,7 @@ const BankAccountForm = class {
     this.bankAccountFormValidate = index.createEvent(this, "bankAccountFormValidate", 7);
     this.validationStrategy = undefined;
     this.styleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
@@ -49,7 +50,7 @@ const BankAccountForm = class {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get watchers() { return {
     "styleOverrides": ["parseStyleOverrides"]

package/dist/cjs/{justifi-billing-form.cjs.entry.js → justifi-billing-form_2.cjs.entry.js}

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
 
 /**
  * Based on Kendo UI Core expression code <https://github.com/telerik/kendo-ui-core#license-information>
@@ -2109,6 +2109,8 @@ const billingFormCss = ":host{display:block}label{display:block}input{margin-bot
 const BillingForm = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.legendBlock = (index.h("legend", null, this.legend));
+    this.legend = undefined;
     this.billingFields = {
       address_line1: '',
       address_line2: '',
@@ -2126,6 +2128,9 @@ const BillingForm = class {
       this.billingFields = billingFieldsClone;
     }
   }
+  async fill(fields) {
+    this.billingFields = Object.assign({}, fields);
+  }
   async validate() {
     const newErrors = {};
     let isValid = true;
@@ -2141,10 +2146,36 @@ const BillingForm = class {
     this.billingFieldsErrors = newErrors;
     return { isValid: isValid };
   }
+  async getValues() {
+    return this.billingFields;
+  }
   render() {
-    return (index.h(index.Host, null, index.h("fieldset", null, index.h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 }), index.h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 }), index.h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city }), index.h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state }), index.h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))));
+    return (index.h(index.Host, null, index.h("fieldset", null, this.legend && this.legendBlock, index.h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 }), index.h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 }), index.h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city }), index.h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state }), index.h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))));
   }
 };
 BillingForm.style = billingFormCss;
 
+const PaymentMethodLabels = {
+  bankAccount: 'Bank Account',
+  card: 'Card'
+};
+const PaymentMethodSelector = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.paymentMethodSelected = index.createEvent(this, "paymentMethodSelected", 7);
+    this.paymentMethodTypes = [];
+    this.selectedPaymentMethodType = undefined;
+  }
+  onChangeHandler(event) {
+    this.paymentMethodSelected.emit(event.target.value);
+  }
+  render() {
+    return (index.h("div", null, this.paymentMethodTypes.map((paymentMethodType) => {
+      return (index.h("div", null, index.h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType }), index.h("label", { htmlFor: paymentMethodType }, PaymentMethodLabels[paymentMethodType])));
+    })));
+  }
+  ;
+};
+
 exports.justifi_billing_form = BillingForm;
+exports.justifi_payment_method_selector = PaymentMethodSelector;

package/dist/cjs/justifi-card-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
 
 const CardForm = class {
   constructor(hostRef) {
@@ -12,6 +12,7 @@ const CardForm = class {
     this.cardFormValidate = index.createEvent(this, "cardFormValidate", 7);
     this.validationStrategy = undefined;
     this.styleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
@@ -49,7 +50,7 @@ const CardForm = class {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "card", "payment-method-form-ready": this.cardFormReady, "payment-method-form-tokenize": this.cardFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get watchers() { return {
     "styleOverrides": ["parseStyleOverrides"]

package/dist/cjs/justifi-payment-form.cjs.entry.js

@@ -2,15 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
+const Payment = require('./Payment-5781460e.js');
 
 const PaymentForm = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.validationStrategy = undefined;
+    this.bankAccount = undefined;
+    this.card = undefined;
+    this.iframeOrigin = undefined;
+    this.selectedPaymentMethodType = undefined;
+    this.allowedPaymentMethodTypes = [];
+  }
+  connectedCallback() {
+    if (this.card) {
+      this.allowedPaymentMethodTypes.push(Payment.PaymentMethodTypes.card);
+    }
+    if (this.bankAccount) {
+      this.allowedPaymentMethodTypes.push(Payment.PaymentMethodTypes.bankAccount);
+    }
+    if (!this.allowedPaymentMethodTypes.length) {
+      this.allowedPaymentMethodTypes.push(Payment.PaymentMethodTypes.card);
+    }
+    this.selectedPaymentMethodType = this.allowedPaymentMethodTypes[0];
+  }
+  paymentMethodSelectedHandler(event) {
+    const paymentMethodType = event.detail;
+    this.selectedPaymentMethodType = paymentMethodType;
+  }
+  async fillBillingForm(fields) {
+    this.billingFormRef.fill(fields);
+  }
+  async submit(args) {
+    if (!this.paymentMethodFormRef || !this.billingFormRef)
+      return;
+    const billingFormValidation = await this.billingFormRef.validate();
+    const paymentMethodFormValidation = await this.paymentMethodFormRef.validate();
+    if (!billingFormValidation.isValid || !paymentMethodFormValidation.isValid)
+      return;
+    const billingFormFieldValues = await this.billingFormRef.getValues();
+    const paymentMethodData = Object.assign(Object.assign({}, args.paymentMethodData), billingFormFieldValues);
+    return this.paymentMethodFormRef.tokenize(args.clientId, paymentMethodData, args.accountId);
   }
   render() {
-    return (index.h(index.Host, null, index.h("form", null, index.h("slot", null))));
+    return (index.h(index.Host, null, index.h("form", null, (this.allowedPaymentMethodTypes.length > 1) && (index.h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType })), index.h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {
+        if (el) {
+          this.paymentMethodFormRef = el;
+        }
+      } }), index.h("justifi-billing-form", { legend: "Billing Info", ref: el => {
+        if (el) {
+          this.billingFormRef = el;
+        }
+      } }))));
   }
 };
 

package/dist/cjs/justifi-payment-method-form.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
 
 const MessageEventType = {
   card: {
@@ -22,7 +22,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "0.2.2";
+const version = "0.4.0";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module$1 = "dist/index.js";
@@ -47,11 +47,11 @@ const scripts = {
 	build: "stencil build --docs",
 	start: "concurrently -c \"bgBlue.bold,bgMagenta.bold,bgGreen.bold\" \"yarn run start-stencil\" \"yarn run storybook\"",
 	"start-stencil": "stencil build --watch --serve --no-open",
-	test: "stencil test --spec --e2e",
-	"test:watch": "stencil test --spec --e2e --watchAll",
+	test: "stencil test --spec",
+	"test:watch": "stencil test --spec --watchAll",
 	generate: "stencil generate",
-	storybook: "start-storybook -p 6006",
-	"build-storybook": "build-storybook"
+	storybook: "storybook dev -p 6006 --quiet",
+	"build-storybook": "storybook build"
 };
 const dependencies = {
 	"@stencil/core": "^2.13.0",
@@ -62,22 +62,30 @@ const dependencies = {
 	yup: "^1.0.0"
 };
 const devDependencies = {
+	"@babel/preset-env": "^7.21.4",
+	"@babel/preset-typescript": "^7.21.4",
 	"@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-	"@storybook/addon-actions": "^6.5.16",
-	"@storybook/addon-essentials": "^6.5.16",
-	"@storybook/addon-interactions": "^6.5.16",
-	"@storybook/addon-links": "^6.5.16",
-	"@storybook/builder-webpack4": "^6.5.16",
-	"@storybook/html": "^6.5.16",
-	"@storybook/manager-webpack4": "^6.5.16",
-	"@storybook/testing-library": "^0.0.13",
-	"@types/jest": "^27.0.3",
+	"@storybook/addon-actions": "^7.0.4",
+	"@storybook/addon-essentials": "^7.0.4",
+	"@storybook/addon-interactions": "^7.0.4",
+	"@storybook/addon-links": "^7.0.4",
+	"@storybook/html": "^7.0.4",
+	"@storybook/html-webpack5": "^7.0.4",
+	"@storybook/jest": "^0.1.0",
+	"@storybook/testing-library": "^0.1.0",
+	"@types/jest": "27.0.3",
+	"@types/node": "^18.15.11",
+	"@types/react": "^18.0.37",
+	"@types/react-dom": "^18.0.11",
 	"auto-changelog": "^2.4.0",
 	concurrently: "^7.6.0",
 	jest: "^27.4.5",
 	"jest-cli": "^27.4.5",
 	puppeteer: "^10.0.0",
-	"release-it": "^15.6.0"
+	react: "^18.2.0",
+	"react-dom": "^18.2.0",
+	"release-it": "^15.6.0",
+	storybook: "^7.0.4"
 };
 const license = "MIT";
 const packageJson = {
@@ -110,6 +118,7 @@ const PaymentMethodForm = class {
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationStrategy = undefined;
     this.paymentMethodStyleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -171,7 +180,9 @@ const PaymentMethodForm = class {
   }
   ;
   getIframeSrc() {
-    let iframeSrc = `https://js.justifi.ai/v2/${this.paymentMethodFormType}`;
+    const productionIframeOrigin = 'https://js.justifi.ai/v2';
+    const iframeOrigin = this.iframeOrigin || productionIframeOrigin;
+    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;
     if (this.paymentMethodFormValidationStrategy) {
       iframeSrc += `?validationStrategy=${this.paymentMethodFormValidationStrategy}`;
     }

package/dist/cjs/justifi-payments-list.cjs.entry.js

@@ -2,7 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
+const Payment = require('./Payment-5781460e.js');
 
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
@@ -110,74 +111,6 @@ function handleError(requestUrl) {
   console.error(`Error fetching from ${requestUrl}`);
 }
 
-var CaptureStrategy;
-(function (CaptureStrategy) {
-  CaptureStrategy["automatic"] = "automatic";
-  CaptureStrategy["manual"] = "manual";
-})(CaptureStrategy || (CaptureStrategy = {}));
-var PaymentMethodTypes;
-(function (PaymentMethodTypes) {
-  PaymentMethodTypes["card"] = "card";
-  PaymentMethodTypes["bankAccount"] = "bank_account";
-})(PaymentMethodTypes || (PaymentMethodTypes = {}));
-var PaymentStatuses;
-(function (PaymentStatuses) {
-  PaymentStatuses["pending"] = "pending";
-  PaymentStatuses["authorized"] = "authorized";
-  PaymentStatuses["succeeded"] = "succeeded";
-  PaymentStatuses["failed"] = "failed";
-  PaymentStatuses["disputed"] = "disputed";
-  PaymentStatuses["fully_refunded"] = "fully_refunded";
-  PaymentStatuses["partially_refunded"] = "partially_refunded";
-})(PaymentStatuses || (PaymentStatuses = {}));
-var PaymentDisputedStatuses;
-(function (PaymentDisputedStatuses) {
-  // if a dispute is 'won', we don't show a dispute status, just general status
-  PaymentDisputedStatuses["lost"] = "lost";
-  PaymentDisputedStatuses["open"] = "open";
-})(PaymentDisputedStatuses || (PaymentDisputedStatuses = {}));
-class Payment {
-  constructor(payment) {
-    this.id = payment.id;
-    this.account_id = payment.account_id;
-    this.amount = payment.amount;
-    this.amount_disputed = payment.amount_disputed;
-    this.amount_refundable = payment.amount_refundable;
-    this.amount_refunded = payment.amount_refunded;
-    this.balance = payment.balance;
-    this.captured = payment.captured;
-    this.capture_strategy = payment.capture_strategy;
-    this.currency = payment.currency;
-    this.description = payment.description;
-    this.disputed = payment.disputed;
-    this.disputes = payment.disputes;
-    this.error_code = payment.error_code;
-    this.error_description = payment.error_description;
-    this.fee_amount = payment.fee_amount;
-    this.is_test = payment.is_test;
-    this.metadata = payment.metadata;
-    this.payment_method = payment.payment_method;
-    this.payment_intent_id = payment.payment_intent_id;
-    this.refunded = payment.refunded;
-    this.status = payment.status;
-    this.created_at = payment.created_at;
-    this.updated_at = payment.updated_at;
-  }
-  get disputedStatus() {
-    const lost = this.disputes.some((dispute) => dispute.status === PaymentDisputedStatuses.lost);
-    // if a dispute is 'won', we don't show a dispute status, just general status
-    if (!this.disputed) {
-      return null;
-    }
-    else if (lost) {
-      return PaymentDisputedStatuses.lost;
-    }
-    else {
-      return PaymentDisputedStatuses.open;
-    }
-  }
-}
-
 function toInteger(dirtyNumber) {
   if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) {
     return NaN;
@@ -4214,7 +4147,7 @@ const PaymentsList = class {
     const endpoint = `account/${accountId}/payments`;
     Api(this.auth.token).get(endpoint)
       .then((response) => {
-      const data = response.data.map((dataItem) => new Payment(dataItem));
+      const data = response.data.map((dataItem) => new Payment.Payment(dataItem));
       this.payments = data;
     });
   }

package/dist/cjs/loader.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
 
 /*
  Stencil Client Patch Esm v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["justifi-billing-form.cjs",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payment-form.cjs",[[4,"justifi-payment-form",{"validationStrategy":[1,"validation-strategy"]}]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["justifi-payment-form.cjs",[[0,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2.cjs",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1025,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
   });
 };
 

package/dist/cjs/select-input_2.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
 
 const selectInputCss = ":host{display:block}label{display:block}";
 
@@ -24,9 +24,7 @@ const SelectInput = class {
   }
   ;
   render() {
-    return (index.h(index.Host, null, index.h("label", null, this.label), index.h("select", { name: this.name, onInput: (event) => this.onInput(event) }, this.options.map((option) => {
-      return (index.h("option", { value: option.value }, option.label));
-    })), this.error && index.h("div", { style: { color: 'red' } }, this.error)));
+    return (index.h(index.Host, null, index.h("label", null, this.label), index.h("select", { name: this.name, onInput: (event) => this.onInput(event) }, this.options.map((option) => index.h("option", { value: option.value }, option.label))), this.error && index.h("div", { style: { color: 'red' } }, this.error)));
   }
 };
 SelectInput.style = selectInputCss;

package/dist/cjs/webcomponents.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-ca2cd154.js');
+const index = require('./index-4f2a13d2.js');
 
 /*
  Stencil Client Patch Browser v2.20.0 | MIT Licensed | https://stenciljs.com
@@ -15,5 +15,5 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["justifi-billing-form.cjs",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1,"validation-strategy"],"styleOverrides":[1,"style-overrides"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payment-form.cjs",[[4,"justifi-payment-form",{"validationStrategy":[1,"validation-strategy"]}]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
+  return index.bootstrapLazy([["justifi-payment-form.cjs",[[0,"justifi-payment-form",{"bankAccount":[4,"bank-account"],"card":[4],"iframeOrigin":[1,"iframe-origin"],"selectedPaymentMethodType":[32],"allowedPaymentMethodTypes":[32],"fillBillingForm":[64],"submit":[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["justifi-bank-account-form.cjs",[[0,"justifi-bank-account-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-card-form.cjs",[[0,"justifi-card-form",{"validationStrategy":[1025,"validation-strategy"],"styleOverrides":[1025,"style-overrides"],"iframeOrigin":[1025,"iframe-origin"],"internalStyleOverrides":[32],"tokenize":[64],"validate":[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["select-input_2.cjs",[[1,"select-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"options":[16],"internalValue":[32]}],[1,"text-input",{"name":[1],"label":[1],"defaultValue":[1,"default-value"],"error":[1],"internalValue":[32]}]]],["justifi-billing-form_2.cjs",[[1,"justifi-billing-form",{"legend":[1],"billingFields":[32],"billingFieldsErrors":[32],"fill":[64],"validate":[64],"getValues":[64]},[[0,"fieldReceivedInput","setFormValue"]]],[0,"justifi-payment-method-selector",{"paymentMethodTypes":[16],"selectedPaymentMethodType":[1,"selected-payment-method-type"]}]]],["justifi-payment-method-form.cjs",[[0,"justifi-payment-method-form",{"paymentMethodFormType":[1,"payment-method-form-type"],"paymentMethodFormValidationStrategy":[1025,"payment-method-form-validation-strategy"],"paymentMethodStyleOverrides":[16],"iframeOrigin":[1,"iframe-origin"],"height":[32],"tokenize":[64],"validate":[64]}]]]], options);
 });

package/dist/collection/api/Payment.js

@@ -6,7 +6,7 @@ export var CaptureStrategy;
 export var PaymentMethodTypes;
 (function (PaymentMethodTypes) {
   PaymentMethodTypes["card"] = "card";
-  PaymentMethodTypes["bankAccount"] = "bank_account";
+  PaymentMethodTypes["bankAccount"] = "bankAccount";
 })(PaymentMethodTypes || (PaymentMethodTypes = {}));
 export var PaymentStatuses;
 (function (PaymentStatuses) {

package/dist/collection/collection-manifest.json

@@ -4,6 +4,7 @@
     "./components/billing-form/billing-form.js",
     "./components/card-form/card-form.js",
     "./components/payment-form/payment-form.js",
+    "./components/payment-form/payment-method-selector.js",
     "./components/payment-method-form/payment-method-form.js",
     "./components/payments-list/payments-list.js",
     "./components/select-input/select-input.js",

package/dist/collection/components/bank-account-form/bank-account-form.js

@@ -3,6 +3,7 @@ export class BankAccountForm {
   constructor() {
     this.validationStrategy = undefined;
     this.styleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
@@ -40,14 +41,14 @@ export class BankAccountForm {
         if (el) {
           this.childRef = el;
         }
-      }, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
+      }, "iframe-origin": this.iframeOrigin, "payment-method-form-type": "bankAccount", "payment-method-form-ready": this.bankAccountFormReady, "payment-method-form-tokenize": this.bankAccountFormTokenize, "payment-method-form-validation-strategy": this.validationStrategy || 'onSubmit', paymentMethodStyleOverrides: this.internalStyleOverrides }));
   }
   static get is() { return "justifi-bank-account-form"; }
   static get properties() {
     return {
       "validationStrategy": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all'",
           "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
@@ -64,7 +65,7 @@ export class BankAccountForm {
       },
       "styleOverrides": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -78,6 +79,23 @@ export class BankAccountForm {
         },
         "attribute": "style-overrides",
         "reflect": false
+      },
+      "iframeOrigin": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iframe-origin",
+        "reflect": false
       }
     };
   }

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

@@ -3,6 +3,8 @@ import BillingFormSchema from './billing-form-schema';
 import StateOptions from './state-options';
 export class BillingForm {
   constructor() {
+    this.legendBlock = (h("legend", null, this.legend));
+    this.legend = undefined;
     this.billingFields = {
       address_line1: '',
       address_line2: '',
@@ -20,6 +22,9 @@ export class BillingForm {
       this.billingFields = billingFieldsClone;
     }
   }
+  async fill(fields) {
+    this.billingFields = Object.assign({}, fields);
+  }
   async validate() {
     const newErrors = {};
     let isValid = true;
@@ -35,8 +40,11 @@ export class BillingForm {
     this.billingFieldsErrors = newErrors;
     return { isValid: isValid };
   }
+  async getValues() {
+    return this.billingFields;
+  }
   render() {
-    return (h(Host, null, h("fieldset", null, h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 }), h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 }), h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city }), h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state }), h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))));
+    return (h(Host, null, h("fieldset", null, this.legend && this.legendBlock, h("text-input", { name: "address_line1", label: "Street Address", defaultValue: this.billingFields.address_line1, error: this.billingFieldsErrors.address_line1 }), h("text-input", { name: "address_line2", label: "Apartment, Suite, etc. (optional)", defaultValue: this.billingFields.address_line2, error: this.billingFieldsErrors.address_line2 }), h("text-input", { name: "address_city", label: "City", defaultValue: this.billingFields.address_city, error: this.billingFieldsErrors.address_city }), h("select-input", { name: "address_state", label: "State", options: StateOptions, defaultValue: this.billingFields.address_state, error: this.billingFieldsErrors.address_state }), h("text-input", { name: "address_postal_code", label: "ZIP", defaultValue: this.billingFields.address_postal_code, error: this.billingFieldsErrors.address_postal_code }))));
   }
   static get is() { return "justifi-billing-form"; }
   static get encapsulation() { return "shadow"; }
@@ -50,6 +58,27 @@ export class BillingForm {
       "$": ["billing-form.css"]
     };
   }
+  static get properties() {
+    return {
+      "legend": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "legend",
+        "reflect": false
+      }
+    };
+  }
   static get states() {
     return {
       "billingFields": {},
@@ -58,6 +87,29 @@ export class BillingForm {
   }
   static get methods() {
     return {
+      "fill": {
+        "complexType": {
+          "signature": "(fields: BillingFormFields) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "BillingFormFields": {
+              "location": "import",
+              "path": "./billing-form-schema"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
       "validate": {
         "complexType": {
           "signature": "() => Promise<{ isValid: boolean; }>",
@@ -77,6 +129,26 @@ export class BillingForm {
           "text": "",
           "tags": []
         }
+      },
+      "getValues": {
+        "complexType": {
+          "signature": "() => Promise<BillingFormFields>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "BillingFormFields": {
+              "location": "import",
+              "path": "./billing-form-schema"
+            }
+          },
+          "return": "Promise<BillingFormFields>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
       }
     };
   }

package/dist/collection/components/billing-form/billing-form.stories.js

@@ -0,0 +1,14 @@
+export default {
+  title: 'Components/BillingForm',
+  component: 'justifi-billing-form',
+  parameters: {},
+};
+const Template = ({ styleOverrides }) => {
+  const parsedStyleOverrides = styleOverrides ? JSON.stringify(styleOverrides) : null;
+  return (`
+    <div>
+      <justifi-billing-form data-testid="billing-form-iframe" style-overrides='${parsedStyleOverrides || ''}' />
+    </div>
+  `);
+};
+export const Basic = Template.bind({});