@justifi/webcomponents 4.0.0 → 4.0.5

package/dist/collection/api/mockData/MockPayments.js

@@ -30,13 +30,13 @@ const mockPayments = [
       items: [
         {
           name: 'Pullover',
-          amount: 4500
+          amount: 4500,
         },
         {
           name: 'Jeans',
-          amount: 5567
-        }
-      ]
+          amount: 5567,
+        },
+      ],
     },
     payment_intent_id: null,
     payment_method: {
@@ -47,12 +47,12 @@ const mockPayments = [
         id: 'pm_7f66GJQoSofG3s9nOHPgaq',
         name: 'Nick Name',
         token: 'fake-token',
-        updated_at: '2022-01-13T14:19:11.803Z'
-      }
+        updated_at: '2022-01-13T14:19:11.803Z',
+      },
     },
     refunded: false,
     status: PaymentStatuses.succeeded,
-    updated_at: '2022-01-10T15:29:58.940Z'
+    updated_at: '2022-01-10T15:29:58.940Z',
   }),
   // payment 1: fully refunded
   new Payment({
@@ -84,12 +84,12 @@ const mockPayments = [
         id: 'pm_7f66GJQoSofG3s9nOHPgaq',
         name: 'Good Customer',
         token: 'fake-token',
-        updated_at: '2021-01-13T14:19:11.803Z'
-      }
+        updated_at: '2021-01-13T14:19:11.803Z',
+      },
     },
     refunded: true,
     status: PaymentStatuses.fully_refunded,
-    updated_at: '2021-01-10T15:29:58.940Z'
+    updated_at: '2021-01-10T15:29:58.940Z',
   }),
   // payment 2: partially refunded
   new Payment({
@@ -121,12 +121,12 @@ const mockPayments = [
         id: 'pm_7f66GJQoSofG3s9nOHPgaq',
         name: 'Sal Gleason',
         token: 'fake-token',
-        updated_at: '2021-11-13T14:19:11.803Z'
-      }
+        updated_at: '2021-11-13T14:19:11.803Z',
+      },
     },
     refunded: true,
     status: PaymentStatuses.partially_refunded,
-    updated_at: '2022-01-10T15:29:58.940Z'
+    updated_at: '2022-01-10T15:29:58.940Z',
   }),
   // payment 3: disputed
   new Payment({
@@ -142,7 +142,8 @@ const mockPayments = [
     currency: 'usd',
     description: 'Rustic Marble Pants',
     disputed: true,
-    disputes: [{
+    disputes: [
+      {
         amount_cents: 10000,
         created_at: '2021-09-10T16:34:47.940Z',
         currency: 'usd',
@@ -151,8 +152,9 @@ const mockPayments = [
         payment_id: '41ebfb2a-f8c8-4cee-9eca-cb7d86e863bc',
         reason: null,
         status: 'needs_response',
-        updated_at: '2021-09-10T16:34:47.940Z'
-      }],
+        updated_at: '2021-09-10T16:34:47.940Z',
+      },
+    ],
     error_code: null,
     error_description: null,
     fee_amount: 35,
@@ -168,12 +170,12 @@ const mockPayments = [
         id: 'pm_7f66GJQoSofG3s9nOHPgaq',
         name: 'Sal Gleason',
         token: 'fake-token',
-        updated_at: '2021-09-13T14:19:11.803Z'
-      }
+        updated_at: '2021-09-13T14:19:11.803Z',
+      },
     },
     refunded: false,
     status: PaymentStatuses.disputed,
-    updated_at: '2021-09-10T15:29:58.940Z'
+    updated_at: '2021-09-10T15:29:58.940Z',
   }),
   // payment 4: failed
   new Payment({
@@ -205,12 +207,12 @@ const mockPayments = [
         id: 'pm_5uyevnE6o1yl55nRgPWXXL',
         name: 'Minnie Bernhard',
         token: 'fake-token',
-        updated_at: '2022-01-18T15:07:15.975Z'
+        updated_at: '2022-01-18T15:07:15.975Z',
       },
     },
     refunded: false,
     status: PaymentStatuses.failed,
-    updated_at: '2022-01-18T12:54:44.822Z'
-  })
+    updated_at: '2022-01-18T12:54:44.822Z',
+  }),
 ];
 export default mockPayments;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "./components/bank-account-form/bank-account-form.js",
     "./components/billing-form/billing-form.js",
+    "./components/business-address/business-address.js",
     "./components/card-form/card-form.js",
     "./components/payment-form/payment-form.js",
     "./components/payment-form/payment-method-selector.js",

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

@@ -16,7 +16,7 @@ export class BankAccountForm {
   }
   /**
    *  Makes a tokenization request to the iframe
-  */
+   */
   async tokenize(...args) {
     if (!this.childRef) {
       throw new Error('Cannot call tokenize');
@@ -25,7 +25,7 @@ export class BankAccountForm {
   }
   /**
    *  Runs a validation on the form and shows errors if any
-  */
+   */
   async validate() {
     if (!this.childRef) {
       throw new Error('Cannot call validate');

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

@@ -40,18 +40,18 @@ export default {
       table: {
         disable: isDev ? false : true,
         category: 'props',
-      }
+      },
     },
     'css-variables': {
       control: 'text',
       table: {
         category: 'props',
-        defaultValue: CSSVars
+        defaultValue: CSSVars,
       },
-    }
+    },
   },
   decorators: [
-    (story) => `
+    story => `
       ${story()}
       <script>${addEvents()}</script>
     `,
@@ -70,8 +70,12 @@ const handleReady = () => {
   const bankForm = document.querySelector('justifi-bank-account-form');
   const validateBtn = document.querySelector('#validate-btn');
   const tokenizeBtn = document.querySelector('#tokenize-btn');
-  validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', () => { handleValidateClick(bankForm); });
-  tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', () => { handleTokenizeClick(bankForm, {}); });
+  validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', () => {
+    handleValidateClick(bankForm);
+  });
+  tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', () => {
+    handleTokenizeClick(bankForm, {});
+  });
 };
 const addEvents = () => {
   addEventListener('bankAccountFormReady', handleReady);
@@ -93,7 +97,7 @@ const FormButtons = `
   </div>
 `;
 const Template = (args) => {
-  return (`
+  return `
     <div>
       <style>
       :root {
@@ -107,10 +111,10 @@ const Template = (args) => {
       />
     </div>
     ${FormButtons}
-  `);
+  `;
 };
 export const Basic = Template.bind({});
 export const Styled = Template.bind({});
 Styled.args = {
-  'css-variables': CSSVars
+  'css-variables': CSSVars,
 };

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

@@ -0,0 +1,54 @@
+import { head } from '../../../storybook-pages/example-parts';
+
+export default `<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+${head('bank-account-form')}
+
+<body>
+  <justifi-bank-account-form></justifi-bank-account-form>
+  <button type="submit" id="bank-submit-button">Tokenize</button>
+  <button type="submit" id="bank-validate-button">Validate</button>
+</body>
+
+<script>
+  (function () {
+    // Bank account form component
+    var bankAccountForm = document.querySelector('justifi-bank-account-form');
+    var bankAccountSubmitButton = document.querySelector('#bank-submit-button');
+    var bankAccountValidateButton = document.querySelector('#bank-validate-button');
+
+    bankAccountForm.addEventListener('bankAccountFormReady', function () {
+      console.log('justifi-bank-account-form ready');
+    });
+
+    bankAccountSubmitButton.addEventListener('click', (event) => {
+      console.log('bank account form tokenize button clicked');
+      // All of this information would come from your form instead of being hard coded
+      // Account / routing number are collected on our iframe
+      const paymentMethodData = {
+        name: 'John Doe', // can also pass account_owner_name
+        account_type: 'checking', // checking or savings
+        account_owner_type: 'individual' // individual or company
+      };
+      // ACCOUNT_ID is optional, currently required for platforms
+      // ACCOUNT_ID is the seller account for which you are tokenizing
+      bankAccountForm.tokenize('CLIENT_ID', paymentMethodData, 'ACCOUNT_ID')
+        .then((data) => {
+          // This is where you can submit the form and use the payment method token
+          // on your backend
+          console.log('justifi-bank-account-form tokenized: ', data);
+        })
+    });
+
+    bankAccountValidateButton.addEventListener('click', (event) => {
+      console.log('bank account validate button clicked');
+      bankAccountForm.validate()
+        .then((data) => {
+          console.log('justifi-bank-account-form validated. Is valid? ', data.isValid);
+        });
+    });
+  })();
+</script>
+
+</html>`;

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

@@ -6,9 +6,6 @@ const BillingFormSchema = object({
   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')
+  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.js

@@ -1,9 +1,14 @@
 import { Host, h } from '@stencil/core';
 import BillingFormSchema from './billing-form-schema';
 import StateOptions from './state-options';
+/**
+ * @exportedPart label: Label for inputs
+ * @exportedPart input: The input fields
+ * @exportedPart input-invalid: Invalid state for inputs
+ */
 export class BillingForm {
   constructor() {
-    this.legendBlock = h("legend", null, this.legend);
+    this.legendBlock = (h("legend", null, this.legend));
     this.legend = undefined;
     this.billingFields = {
       name: '',
@@ -11,7 +16,7 @@ export class BillingForm {
       address_line2: '',
       address_city: '',
       address_state: '',
-      address_postal_code: ''
+      address_postal_code: '',
     };
     this.billingFieldsErrors = {};
   }

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

@@ -4,7 +4,7 @@ export default {
   parameters: {},
 };
 const Template = (args) => {
-  return (`
+  return `
     <div>
       <style>
         :root {
@@ -17,7 +17,7 @@ const Template = (args) => {
 
       />
     </div>
-  `);
+  `;
 };
 export const Basic = Template.bind({});
 Basic.args = {
@@ -25,7 +25,7 @@ Basic.args = {
 };
 export const Styled = Template.bind({});
 Styled.args = {
-  legend: 'Styled Billing Form',
+  'legend': 'Styled Billing Form',
   'css-variables': `
     --jfi-layout-padding: 0;
     --jfi-layout-form-control-spacing-x: .5rem;
@@ -57,5 +57,5 @@ Styled.args = {
     --jfi-error-message-color: #C12727;
     --jfi-error-message-margin: .25rem 0 0 0;
     --jfi-error-message-font-size: .875rem;
-  `
+  `,
 };

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

@@ -0,0 +1,26 @@
+import { head } from '../../../storybook-pages/example-parts';
+
+export default `<!DOCTYPE html>
+<html dir="ltr" lang="en">
+
+${head('justifi-billing-form')}
+
+<body>
+  <justifi-billing-form></justifi-billing-form>
+  <button id="justifi-billing-form-submit">Submit</button>
+</body>
+
+<script>
+  (async () => {
+    await customElements.whenDefined('justifi-billing-form');
+
+    // Billing form component
+    var billingForm = document.querySelector('justifi-billing-form');
+    var billingFormSubmitButton = document.querySelector('#justifi-billing-form-submit');
+    billingFormSubmitButton.addEventListener('click', async (event) => {
+      const billingFormValidation = await billingForm.validate();
+    });
+  })();
+</script>
+
+</html>`;

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

@@ -1,243 +1,243 @@
 const StateOptions = [
   {
     label: 'Choose state',
-    value: ''
+    value: '',
   },
   {
     label: 'Alabama',
-    value: 'AL'
+    value: 'AL',
   },
   {
     label: 'Alaska',
-    value: 'AK'
+    value: 'AK',
   },
   {
     label: 'American Samoa',
-    value: 'AS'
+    value: 'AS',
   },
   {
     label: 'Arizona',
-    value: 'AZ'
+    value: 'AZ',
   },
   {
     label: 'Arkansas',
-    value: 'AR'
+    value: 'AR',
   },
   {
     label: 'California',
-    value: 'CA'
+    value: 'CA',
   },
   {
     label: 'Colorado',
-    value: 'CO'
+    value: 'CO',
   },
   {
     label: 'Connecticut',
-    value: 'CT'
+    value: 'CT',
   },
   {
     label: 'Delaware',
-    value: 'DE'
+    value: 'DE',
   },
   {
     label: 'District Of Columbia',
-    value: 'DC'
+    value: 'DC',
   },
   {
     label: 'Federated States Of Micronesia',
-    value: 'FM'
+    value: 'FM',
   },
   {
     label: 'Florida',
-    value: 'FL'
+    value: 'FL',
   },
   {
     label: 'Georgia',
-    value: 'GA'
+    value: 'GA',
   },
   {
     label: 'Guam',
-    value: 'GU'
+    value: 'GU',
   },
   {
     label: 'Hawaii',
-    value: 'HI'
+    value: 'HI',
   },
   {
     label: 'Idaho',
-    value: 'ID'
+    value: 'ID',
   },
   {
     label: 'Illinois',
-    value: 'IL'
+    value: 'IL',
   },
   {
     label: 'Indiana',
-    value: 'IN'
+    value: 'IN',
   },
   {
     label: 'Iowa',
-    value: 'IA'
+    value: 'IA',
   },
   {
     label: 'Kansas',
-    value: 'KS'
+    value: 'KS',
   },
   {
     label: 'Kentucky',
-    value: 'KY'
+    value: 'KY',
   },
   {
     label: 'Louisiana',
-    value: 'LA'
+    value: 'LA',
   },
   {
     label: 'Maine',
-    value: 'ME'
+    value: 'ME',
   },
   {
     label: 'Marshall Islands',
-    value: 'MH'
+    value: 'MH',
   },
   {
     label: 'Maryland',
-    value: 'MD'
+    value: 'MD',
   },
   {
     label: 'Massachusetts',
-    value: 'MA'
+    value: 'MA',
   },
   {
     label: 'Michigan',
-    value: 'MI'
+    value: 'MI',
   },
   {
     label: 'Minnesota',
-    value: 'MN'
+    value: 'MN',
   },
   {
     label: 'Mississippi',
-    value: 'MS'
+    value: 'MS',
   },
   {
     label: 'Missouri',
-    value: 'MO'
+    value: 'MO',
   },
   {
     label: 'Montana',
-    value: 'MT'
+    value: 'MT',
   },
   {
     label: 'Nebraska',
-    value: 'NE'
+    value: 'NE',
   },
   {
     label: 'Nevada',
-    value: 'NV'
+    value: 'NV',
   },
   {
     label: 'New Hampshire',
-    value: 'NH'
+    value: 'NH',
   },
   {
     label: 'New Jersey',
-    value: 'NJ'
+    value: 'NJ',
   },
   {
     label: 'New Mexico',
-    value: 'NM'
+    value: 'NM',
   },
   {
     label: 'New York',
-    value: 'NY'
+    value: 'NY',
   },
   {
     label: 'North Carolina',
-    value: 'NC'
+    value: 'NC',
   },
   {
     label: 'North Dakota',
-    value: 'ND'
+    value: 'ND',
   },
   {
     label: 'Northern Mariana Islands',
-    value: 'MP'
+    value: 'MP',
   },
   {
     label: 'Ohio',
-    value: 'OH'
+    value: 'OH',
   },
   {
     label: 'Oklahoma',
-    value: 'OK'
+    value: 'OK',
   },
   {
     label: 'Oregon',
-    value: 'OR'
+    value: 'OR',
   },
   {
     label: 'Palau',
-    value: 'PW'
+    value: 'PW',
   },
   {
     label: 'Pennsylvania',
-    value: 'PA'
+    value: 'PA',
   },
   {
     label: 'Puerto Rico',
-    value: 'PR'
+    value: 'PR',
   },
   {
     label: 'Rhode Island',
-    value: 'RI'
+    value: 'RI',
   },
   {
     label: 'South Carolina',
-    value: 'SC'
+    value: 'SC',
   },
   {
     label: 'South Dakota',
-    value: 'SD'
+    value: 'SD',
   },
   {
     label: 'Tennessee',
-    value: 'TN'
+    value: 'TN',
   },
   {
     label: 'Texas',
-    value: 'TX'
+    value: 'TX',
   },
   {
     label: 'Utah',
-    value: 'UT'
+    value: 'UT',
   },
   {
     label: 'Vermont',
-    value: 'VT'
+    value: 'VT',
   },
   {
     label: 'Virgin Islands',
-    value: 'VI'
+    value: 'VI',
   },
   {
     label: 'Virginia',
-    value: 'VA'
+    value: 'VA',
   },
   {
     label: 'Washington',
-    value: 'WA'
+    value: 'WA',
   },
   {
     label: 'West Virginia',
-    value: 'WV'
+    value: 'WV',
   },
   {
     label: 'Wisconsin',
-    value: 'WI'
+    value: 'WI',
   },
   {
     label: 'Wyoming',
-    value: 'WY'
-  }
+    value: 'WY',
+  },
 ];
 export default StateOptions;

package/dist/collection/components/business-address/business-address-schema.js

@@ -0,0 +1,13 @@
+import { object, string } from 'yup';
+export const RegExZip = /^\d{5}/;
+const BusinessAddressFormSchema = object({
+  line1: string().required('Enter street address'),
+  line2: string(),
+  city: string().required('Enter city'),
+  state: string().required('Choose state'),
+  postal_code: string()
+    .required('Enter ZIP')
+    .matches(RegExZip, 'Enter a valid ZIP')
+    .min(5, 'Enter a valid ZIP')
+});
+export default BusinessAddressFormSchema;