@justifi/webcomponents 0.0.15 → 0.2.0

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

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3947d225.js');
+
+const CardForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.cardFormReady = index.createEvent(this, "cardFormReady", 7);
+    this.cardFormTokenize = index.createEvent(this, "cardFormTokenize", 7);
+    this.cardFormValidate = index.createEvent(this, "cardFormValidate", 7);
+    this.validationStrategy = undefined;
+    this.styleOverrides = undefined;
+    this.internalStyleOverrides = undefined;
+  }
+  readyHandler(event) {
+    this.cardFormReady.emit(event);
+  }
+  tokenizeHandler(event) {
+    this.cardFormTokenize.emit(event);
+  }
+  validateHandler(event) {
+    this.cardFormValidate.emit(event);
+  }
+  componentWillLoad() {
+    this.parseStyleOverrides();
+  }
+  parseStyleOverrides() {
+    if (this.styleOverrides) {
+      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
+      this.internalStyleOverrides = parsedStyleOverrides;
+    }
+  }
+  async tokenize(...args) {
+    if (!this.childRef) {
+      throw new Error('Cannot call tokenize');
+    }
+    return this.childRef.tokenize(...args);
+  }
+  async validate() {
+    if (!this.childRef) {
+      throw new Error('Cannot call validate');
+    }
+    return this.childRef.validate();
+  }
+  render() {
+    return (index.h("justifi-payment-method-form", { ref: el => {
+        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 }));
+  }
+  static get watchers() { return {
+    "styleOverrides": ["parseStyleOverrides"]
+  }; }
+};
+
+exports.justifi_card_form = CardForm;

package/dist/cjs/{justifi-bank-account-form_3.cjs.entry.js → justifi-payment-method-form.cjs.entry.js}

@@ -2,111 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b45289.js');
-
-const BankAccountForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.bankAccountFormReady = index.createEvent(this, "bankAccountFormReady", 7);
-    this.bankAccountFormTokenize = index.createEvent(this, "bankAccountFormTokenize", 7);
-    this.bankAccountFormValidate = index.createEvent(this, "bankAccountFormValidate", 7);
-    this.validationStrategy = undefined;
-    this.styleOverrides = undefined;
-    this.internalStyleOverrides = undefined;
-  }
-  readyHandler(event) {
-    this.bankAccountFormReady.emit(event);
-  }
-  tokenizeHandler(event) {
-    this.bankAccountFormTokenize.emit(event);
-  }
-  validateHandler(event) {
-    this.bankAccountFormValidate.emit(event);
-  }
-  componentWillLoad() {
-    this.parseStyleOverrides();
-  }
-  parseStyleOverrides() {
-    if (this.styleOverrides) {
-      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-      this.internalStyleOverrides = parsedStyleOverrides;
-    }
-  }
-  async tokenize(...args) {
-    if (!this.childRef) {
-      throw new Error('Cannot call tokenize');
-    }
-    return this.childRef.tokenize(...args);
-  }
-  async validate() {
-    if (!this.childRef) {
-      throw new Error('Cannot call validate');
-    }
-    return this.childRef.validate();
-  }
-  render() {
-    return (index.h("justifi-payment-method-form", { ref: el => {
-        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 }));
-  }
-  static get watchers() { return {
-    "styleOverrides": ["parseStyleOverrides"]
-  }; }
-};
-
-const CardForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardFormReady = index.createEvent(this, "cardFormReady", 7);
-    this.cardFormTokenize = index.createEvent(this, "cardFormTokenize", 7);
-    this.cardFormValidate = index.createEvent(this, "cardFormValidate", 7);
-    this.validationStrategy = undefined;
-    this.styleOverrides = undefined;
-    this.internalStyleOverrides = undefined;
-  }
-  readyHandler(event) {
-    this.cardFormReady.emit(event);
-  }
-  tokenizeHandler(event) {
-    this.cardFormTokenize.emit(event);
-  }
-  validateHandler(event) {
-    this.cardFormValidate.emit(event);
-  }
-  componentWillLoad() {
-    this.parseStyleOverrides();
-  }
-  parseStyleOverrides() {
-    if (this.styleOverrides) {
-      const parsedStyleOverrides = JSON.parse(this.styleOverrides);
-      this.internalStyleOverrides = parsedStyleOverrides;
-    }
-  }
-  async tokenize(...args) {
-    if (!this.childRef) {
-      throw new Error('Cannot call tokenize');
-    }
-    return this.childRef.tokenize(...args);
-  }
-  async validate() {
-    if (!this.childRef) {
-      throw new Error('Cannot call validate');
-    }
-    return this.childRef.validate();
-  }
-  render() {
-    return (index.h("justifi-payment-method-form", { ref: el => {
-        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 }));
-  }
-  static get watchers() { return {
-    "styleOverrides": ["parseStyleOverrides"]
-  }; }
-};
+const index = require('./index-3947d225.js');
 
 const MessageEventType = {
   card: {
@@ -180,10 +76,10 @@ const PaymentMethodForm = class {
       this.postMessage(eventType, payload);
     });
   }
-  async tokenize(clientKey, paymentMethodMetadata, account) {
+  async tokenize(clientId, paymentMethodMetadata, account) {
     const eventType = MessageEventType[this.paymentMethodFormType].tokenize;
     const payload = {
-      clientKey: clientKey,
+      clientId: clientId,
       paymentMethodMetadata: paymentMethodMetadata,
       account: account
     };
@@ -210,6 +106,4 @@ const PaymentMethodForm = class {
 };
 PaymentMethodForm.style = paymentMethodFormCss;
 
-exports.justifi_bank_account_form = BankAccountForm;
-exports.justifi_card_form = CardForm;
 exports.justifi_payment_method_form = PaymentMethodForm;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b45289.js');
+const index = require('./index-3947d225.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

package/dist/cjs/loader.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b45289.js');
+const index = require('./index-3947d225.js');
 
 /*
- Stencil Client Patch Esm v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchEsm = () => {
     return index.promiseResolve();
@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["justifi-bank-account-form_3.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"]]],[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"]]],[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-billing-form.cjs",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["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]}]]],["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-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]}]]]], options);
   });
 };
 

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

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-3947d225.js');
+
+const selectInputCss = ":host{display:block}label{display:block}";
+
+const SelectInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldReceivedInput = index.createEvent(this, "fieldReceivedInput", 7);
+    this.name = undefined;
+    this.label = undefined;
+    this.defaultValue = undefined;
+    this.error = undefined;
+    this.options = undefined;
+    this.internalValue = '';
+  }
+  onInput(event) {
+    const target = event.target;
+    const name = target.getAttribute('name');
+    this.fieldReceivedInput.emit({ name: name, value: target.value });
+  }
+  ;
+  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)));
+  }
+};
+SelectInput.style = selectInputCss;
+
+const textInputCss = ":host{display:block}label{display:block}";
+
+const TextInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.fieldReceivedInput = index.createEvent(this, "fieldReceivedInput", 7);
+    this.name = undefined;
+    this.label = undefined;
+    this.defaultValue = undefined;
+    this.error = undefined;
+    this.internalValue = '';
+  }
+  onInput(event) {
+    const target = event.target;
+    const name = target.getAttribute('name');
+    this.fieldReceivedInput.emit({ name: name, value: target.value });
+  }
+  ;
+  render() {
+    return (index.h(index.Host, null, index.h("label", null, this.label), index.h("input", { name: this.name, type: "text", onInput: (event) => this.onInput(event), value: this.internalValue || this.defaultValue }), this.error && index.h("div", { style: { color: 'red' } }, this.error)));
+  }
+};
+TextInput.style = textInputCss;
+
+exports.select_input = SelectInput;
+exports.text_input = TextInput;

package/dist/cjs/webcomponents.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-e1b45289.js');
+const index = require('./index-3947d225.js');
 
 /*
- Stencil Client Patch Browser v2.22.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.22.3 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('webcomponents.cjs.js', document.baseURI).href));
@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["justifi-payments-list.cjs",[[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]],["justifi-bank-account-form_3.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"]]],[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"]]],[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-billing-form.cjs",[[1,"justifi-billing-form",{"billingFields":[32],"billingFieldsErrors":[32],"validate":[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["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]}]]],["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-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]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,13 +1,16 @@
 {
   "entries": [
     "./components/bank-account-form/bank-account-form.js",
+    "./components/billing-form/billing-form.js",
     "./components/card-form/card-form.js",
     "./components/payment-method-form/payment-method-form.js",
-    "./components/payments-list/payments-list.js"
+    "./components/payments-list/payments-list.js",
+    "./components/select-input/select-input.js",
+    "./components/text-input/text-input.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.2",
+    "version": "2.22.3",
     "typescriptVersion": "4.9.4"
   },
   "collections": [],

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

@@ -138,7 +138,7 @@ export class BankAccountForm {
     return {
       "tokenize": {
         "complexType": {
-          "signature": "(clientKey: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
+          "signature": "(clientId: string, paymentMethodMetadata: any, account?: string) => Promise<any>",
           "parameters": [{
               "tags": [],
               "text": ""

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

@@ -0,0 +1,14 @@
+import { object, string } from 'yup';
+export const RegExZip = /^\d{5}/;
+const BillingFormSchema = object({
+  // name: string().required('Enter name'),
+  address_line1: string().required('Enter street address'),
+  address_line2: string(),
+  address_city: string().required('Enter city'),
+  address_state: string().required('Choose state'),
+  address_postal_code: string()
+    .required('Enter ZIP')
+    .matches(RegExZip, 'Enter a valid ZIP')
+    .min(5, 'Enter a valid ZIP')
+});
+export default BillingFormSchema;

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

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+}
+
+label {
+  display: block;
+}
+
+input {
+  margin-bottom: 8px;
+}

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

@@ -0,0 +1,92 @@
+import { Host, h } from '@stencil/core';
+import BillingFormSchema from './billing-form-schema';
+import StateOptions from './state-options';
+export class BillingForm {
+  constructor() {
+    this.billingFields = {
+      address_line1: '',
+      address_line2: '',
+      address_city: '',
+      address_state: '',
+      address_postal_code: ''
+    };
+    this.billingFieldsErrors = {};
+  }
+  setFormValue(event) {
+    const data = event.detail;
+    const billingFieldsClone = Object.assign({}, this.billingFields);
+    if (data.name) {
+      billingFieldsClone[data.name] = data.value;
+      this.billingFields = billingFieldsClone;
+    }
+  }
+  async validate() {
+    const newErrors = {};
+    let isValid = true;
+    try {
+      await BillingFormSchema.validate(this.billingFields, { abortEarly: false });
+    }
+    catch (err) {
+      isValid = false;
+      err.inner.map((item) => {
+        newErrors[item.path] = item.message;
+      });
+    }
+    this.billingFieldsErrors = newErrors;
+    return { isValid: isValid };
+  }
+  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 }))));
+  }
+  static get is() { return "justifi-billing-form"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["billing-form.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["billing-form.css"]
+    };
+  }
+  static get states() {
+    return {
+      "billingFields": {},
+      "billingFieldsErrors": {}
+    };
+  }
+  static get methods() {
+    return {
+      "validate": {
+        "complexType": {
+          "signature": "() => Promise<{ isValid: boolean; }>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ValidationError": {
+              "location": "import",
+              "path": "yup"
+            }
+          },
+          "return": "Promise<{ isValid: boolean; }>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "fieldReceivedInput",
+        "method": "setFormValue",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}