@justifi/webcomponents 0.2.2 → 0.4.0

package/dist/components/justifi-card-form.js

@@ -10,6 +10,7 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.cardFormValidate = createEvent(this, "cardFormValidate", 7);
     this.validationStrategy = undefined;
     this.styleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
@@ -47,14 +48,15 @@ const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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"]
   }; }
 }, [0, "justifi-card-form", {
-    "validationStrategy": [1, "validation-strategy"],
-    "styleOverrides": [1, "style-overrides"],
+    "validationStrategy": [1025, "validation-strategy"],
+    "styleOverrides": [1025, "style-overrides"],
+    "iframeOrigin": [1025, "iframe-origin"],
     "internalStyleOverrides": [32],
     "tokenize": [64],
     "validate": [64]

package/dist/components/justifi-payment-form.js

@@ -1,28 +1,107 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { P as PaymentMethodTypes } from './Payment.js';
+import { d as defineCustomElement$6 } from './billing-form.js';
+import { d as defineCustomElement$5 } from './payment-method-form.js';
+import { d as defineCustomElement$4 } from './payment-method-selector.js';
+import { d as defineCustomElement$3 } from './select-input2.js';
+import { d as defineCustomElement$2 } from './text-input2.js';
 
 const PaymentForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    this.validationStrategy = undefined;
+    this.bankAccount = undefined;
+    this.card = undefined;
+    this.iframeOrigin = undefined;
+    this.selectedPaymentMethodType = undefined;
+    this.allowedPaymentMethodTypes = [];
+  }
+  connectedCallback() {
+    if (this.card) {
+      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.card);
+    }
+    if (this.bankAccount) {
+      this.allowedPaymentMethodTypes.push(PaymentMethodTypes.bankAccount);
+    }
+    if (!this.allowedPaymentMethodTypes.length) {
+      this.allowedPaymentMethodTypes.push(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 (h(Host, null, h("form", null, h("slot", null))));
+    return (h(Host, null, h("form", null, (this.allowedPaymentMethodTypes.length > 1) && (h("justifi-payment-method-selector", { paymentMethodTypes: this.allowedPaymentMethodTypes, selectedPaymentMethodType: this.selectedPaymentMethodType })), h("justifi-payment-method-form", { "payment-method-form-type": this.selectedPaymentMethodType, "iframe-origin": this.iframeOrigin, ref: el => {
+        if (el) {
+          this.paymentMethodFormRef = el;
+        }
+      } }), h("justifi-billing-form", { legend: "Billing Info", ref: el => {
+        if (el) {
+          this.billingFormRef = el;
+        }
+      } }))));
   }
-}, [4, "justifi-payment-form", {
-    "validationStrategy": [1, "validation-strategy"]
-  }]);
+}, [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"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["justifi-payment-form"];
+  const components = ["justifi-payment-form", "justifi-billing-form", "justifi-payment-method-form", "justifi-payment-method-selector", "select-input", "text-input"];
   components.forEach(tagName => { switch (tagName) {
     case "justifi-payment-form":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, PaymentForm);
       }
       break;
+    case "justifi-billing-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "justifi-payment-method-form":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "justifi-payment-method-selector":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
   } });
 }
 

package/dist/components/justifi-payment-method-selector.d.ts

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

package/dist/components/justifi-payment-method-selector.js

@@ -0,0 +1,6 @@
+import { P as PaymentMethodSelector, d as defineCustomElement$1 } from './payment-method-selector.js';
+
+const JustifiPaymentMethodSelector = PaymentMethodSelector;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiPaymentMethodSelector, defineCustomElement };

package/dist/components/justifi-payments-list.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as Payment } from './Payment.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
@@ -106,74 +107,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;

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

@@ -18,7 +18,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 = "dist/index.js";
@@ -43,11 +43,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",
@@ -58,22 +58,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 = {
@@ -107,6 +115,7 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationStrategy = undefined;
     this.paymentMethodStyleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -168,7 +177,9 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   ;
   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}`;
     }
@@ -183,8 +194,9 @@ const PaymentMethodForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   static get style() { return paymentMethodFormCss; }
 }, [0, "justifi-payment-method-form", {
     "paymentMethodFormType": [1, "payment-method-form-type"],
-    "paymentMethodFormValidationStrategy": [1, "payment-method-form-validation-strategy"],
+    "paymentMethodFormValidationStrategy": [1025, "payment-method-form-validation-strategy"],
     "paymentMethodStyleOverrides": [16],
+    "iframeOrigin": [1, "iframe-origin"],
     "height": [32],
     "tokenize": [64],
     "validate": [64]

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

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const PaymentMethodLabels = {
+  bankAccount: 'Bank Account',
+  card: 'Card'
+};
+const PaymentMethodSelector = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.paymentMethodSelected = createEvent(this, "paymentMethodSelected", 7);
+    this.paymentMethodTypes = [];
+    this.selectedPaymentMethodType = undefined;
+  }
+  onChangeHandler(event) {
+    this.paymentMethodSelected.emit(event.target.value);
+  }
+  render() {
+    return (h("div", null, this.paymentMethodTypes.map((paymentMethodType) => {
+      return (h("div", null, h("input", { id: paymentMethodType, type: "radio", name: "paymentMethodType", value: paymentMethodType, onChange: (event) => this.onChangeHandler(event), checked: this.selectedPaymentMethodType === paymentMethodType }), h("label", { htmlFor: paymentMethodType }, PaymentMethodLabels[paymentMethodType])));
+    })));
+  }
+  ;
+}, [0, "justifi-payment-method-selector", {
+    "paymentMethodTypes": [16],
+    "selectedPaymentMethodType": [1, "selected-payment-method-type"]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["justifi-payment-method-selector"];
+  components.forEach(tagName => { switch (tagName) {
+    case "justifi-payment-method-selector":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PaymentMethodSelector);
+      }
+      break;
+  } });
+}
+
+export { PaymentMethodSelector as P, defineCustomElement as d };

package/dist/components/select-input2.js

@@ -22,9 +22,7 @@ const SelectInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   ;
   render() {
-    return (h(Host, null, h("label", null, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event) }, this.options.map((option) => {
-      return (h("option", { value: option.value }, option.label));
-    })), this.error && h("div", { style: { color: 'red' } }, this.error)));
+    return (h(Host, null, h("label", null, this.label), h("select", { name: this.name, onInput: (event) => this.onInput(event) }, this.options.map((option) => h("option", { value: option.value }, option.label))), this.error && h("div", { style: { color: 'red' } }, this.error)));
   }
   static get style() { return selectInputCss; }
 }, [1, "select-input", {

package/dist/esm/Payment-3f7570a8.js

@@ -0,0 +1,69 @@
+var CaptureStrategy;
+(function (CaptureStrategy) {
+  CaptureStrategy["automatic"] = "automatic";
+  CaptureStrategy["manual"] = "manual";
+})(CaptureStrategy || (CaptureStrategy = {}));
+var PaymentMethodTypes;
+(function (PaymentMethodTypes) {
+  PaymentMethodTypes["card"] = "card";
+  PaymentMethodTypes["bankAccount"] = "bankAccount";
+})(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;
+    }
+  }
+}
+
+export { PaymentMethodTypes as P, Payment as a };