@justifi/webcomponents 0.0.15 → 0.2.1

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

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

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

@@ -138,7 +138,7 @@ export class CardForm {
     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/card-form/card-form.stories.js

@@ -0,0 +1,132 @@
+export default {
+  title: 'Components/CardForm',
+  component: 'justifi-card-form',
+  parameters: {
+    actions: {
+      handles: [
+        'cardFormReady',
+        'cardFormValidate',
+        'cardFormTokenize'
+      ],
+    },
+  },
+  decorators: [
+    (story) => `
+      ${story()}
+      <script>${addEvents()}</script>
+    `,
+  ],
+};
+const paymentMethodData = {
+  name: 'John Doe',
+};
+// IMPORTANT:
+// Only use named functions when binding to event handlers. Otherwise, they will be bound multiple times
+// Going forward, we could create a decorator that binds events
+const handleValidateClick = () => {
+  const cardForm = document.querySelector('justifi-card-form');
+  cardForm.validate();
+  console.log('validate');
+};
+const handleTokenizeClick = async () => {
+  const cardForm = document.querySelector('justifi-card-form');
+  const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);
+  console.log(tokenizeResponse);
+};
+const handleReadyClick = () => {
+  const validateBtn = document.querySelector('#validate-btn');
+  const tokenizeBtn = document.querySelector('#tokenize-btn');
+  validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', handleValidateClick);
+  tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', handleTokenizeClick);
+};
+const addEvents = () => {
+  addEventListener('cardFormReady', handleReadyClick);
+};
+// This should be abstracted away, included as a decorator and styled properly
+const buttons = `
+  <style>
+    .button-bar {
+      display: flex;
+      aligin-items: center;
+      padding: 10px;
+    }
+    .button-bar button {
+      margin-right: 10px;
+    }
+  </style>
+  <div class="button-bar">
+    <button id="validate-btn">Validate</button>
+    <button id="tokenize-btn">Tokenize</button>
+  </div>
+`;
+const storyStyleOverrides = {
+  "layout": {
+    "padding": "100px",
+    "formControlSpacingHorizontal": ".5rem",
+    "formControlSpacingVertical": "1rem"
+  },
+  "formLabel": {
+    "fontWeight": "700",
+    "fontFamily": "sans-serif",
+    "margin": "0 0 .5rem 0"
+  },
+  "formControl": {
+    "backgroundColor": "#00F4F6",
+    "backgroundColorHover": "#EEEEF5",
+    "borderColor": "rgba(0, 0, 0, 0.42)",
+    "borderColorHover": "rgba(0, 0, 0, 0.62)",
+    "borderColorFocus": "#fccc32",
+    "borderColorError": "#C12727",
+    "borderWidth": "0px",
+    "borderBottomWidth": "1px",
+    "borderRadius": "40px 4px 0 0",
+    "borderStyle": "solid",
+    "boxShadowErrorFocus": "none",
+    "boxShadowFocus": "none",
+    "color": "#212529",
+    "fontSize": "1rem",
+    "fontWeight": "400",
+    "lineHeight": "2",
+    "margin": "0",
+    "padding": ".5rem .875rem"
+  },
+  "errorMessage": {
+    "color": "#C12727",
+    "margin": ".25rem 0 0 0",
+    "fontSize": ".875rem"
+  }
+};
+const Template = ({ includeButtons, styleOverrides }) => {
+  const parsedStyleOverrides = styleOverrides ? JSON.stringify(styleOverrides) : null;
+  // The <div> here should be replaced by a `display` property in the cardForm potentially
+  return (`
+    <div>
+      <justifi-card-form style-overrides='${parsedStyleOverrides || ''}' />
+    </div>
+    ${includeButtons ? buttons : ''}
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = {
+  includeButtons: true
+};
+export const Embedded = Template.bind({});
+Embedded.args = {
+  includeButtons: true
+};
+Embedded.decorators = [
+  (story) => `
+    <style>
+      #wrapper {
+        background-color: #aaaaaa;
+      }
+    </style>
+    <div id="wrapper" style="width: 50%;">
+      ${story()}
+    </div>
+  `,
+];
+export const Styled = Template.bind({});
+Styled.args = {
+  styleOverrides: storyStyleOverrides
+};

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

@@ -0,0 +1,31 @@
+import { h, Host } from '@stencil/core';
+export class PaymentForm {
+  constructor() {
+    this.validationStrategy = undefined;
+  }
+  render() {
+    return (h(Host, null, h("form", null, h("slot", null))));
+  }
+  static get is() { return "justifi-payment-form"; }
+  static get properties() {
+    return {
+      "validationStrategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all'",
+          "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "validation-strategy",
+        "reflect": false
+      }
+    };
+  }
+}

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

@@ -1,5 +1,6 @@
 import { Host, h } from '@stencil/core';
 import { MessageEventType } from './message-event-types';
+import packageJson from '../../../package.json';
 export class PaymentMethodForm {
   constructor() {
     this.paymentMethodFormType = undefined;
@@ -50,12 +51,13 @@ export class PaymentMethodForm {
       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,
+      componentVersion: packageJson.version,
       paymentMethodMetadata: paymentMethodMetadata,
-      account: account
+      account: account,
     };
     return this.postMessageWithResponseListener(eventType, payload);
   }
@@ -185,7 +187,7 @@ export class PaymentMethodForm {
     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/select-input/select-input.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+label {
+  display: block;
+}

package/dist/collection/components/select-input/select-input.js

@@ -0,0 +1,144 @@
+import { Host, h } from '@stencil/core';
+export class SelectInput {
+  constructor() {
+    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 (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)));
+  }
+  static get is() { return "select-input"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["select-input.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["select-input.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "defaultValue": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "default-value",
+        "reflect": false
+      },
+      "error": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "error",
+        "reflect": false
+      },
+      "options": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ label: string, value: string }[]",
+          "resolved": "{ label: string; value: string; }[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "internalValue": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "fieldReceivedInput",
+        "name": "fieldReceivedInput",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ name: string, value: string }",
+          "resolved": "{ name: string; value: string; }",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/text-input/text-input.css

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+}
+
+label {
+  display: block;
+}