@justifi/webcomponents 0.2.2 → 0.4.0

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

@@ -3,6 +3,7 @@ export class CardForm {
   constructor() {
     this.validationStrategy = undefined;
     this.styleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.internalStyleOverrides = undefined;
   }
   readyHandler(event) {
@@ -40,14 +41,14 @@ export class CardForm {
         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 is() { return "justifi-card-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 CardForm {
       },
       "styleOverrides": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -78,6 +79,23 @@ export class CardForm {
         },
         "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/card-form/card-form.stories.js

@@ -1,3 +1,5 @@
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 export default {
   title: 'Components/CardForm',
   component: 'justifi-card-form',
@@ -17,33 +19,26 @@ export default {
     `,
   ],
 };
-const paymentMethodData = {
-  name: 'John Doe',
+const handleValidateClick = async (cardForm) => {
+  const valid = await cardForm.validate();
+  console.log(valid);
 };
-// 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 handleTokenizeClick = async (cardForm, paymentMethodData) => {
   const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);
   console.log(tokenizeResponse);
 };
-const handleReadyClick = () => {
+const handleReady = () => {
+  console.log('card form is ready');
+  const cardForm = document.querySelector('justifi-card-form');
   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);
+  validateBtn === null || validateBtn === void 0 ? void 0 : validateBtn.addEventListener('click', () => { handleValidateClick(cardForm); });
+  tokenizeBtn === null || tokenizeBtn === void 0 ? void 0 : tokenizeBtn.addEventListener('click', () => { handleTokenizeClick(cardForm, {}); });
 };
 const addEvents = () => {
-  addEventListener('cardFormReady', handleReadyClick);
+  addEventListener('cardFormReady', handleReady);
 };
-// This should be abstracted away, included as a decorator and styled properly
-const buttons = `
+const FormButtons = `
   <style>
     .button-bar {
       display: flex;
@@ -96,24 +91,17 @@ const storyStyleOverrides = {
     "fontSize": ".875rem"
   }
 };
-const Template = ({ includeButtons, styleOverrides }) => {
+const Template = ({ includeButtons = true, 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 || ''}' />
+      <justifi-card-form data-testid="card-form-iframe" style-overrides='${parsedStyleOverrides || ''}' />
     </div>
-    ${includeButtons ? buttons : ''}
+    ${includeButtons ? FormButtons : ''}
   `);
 };
 export const Basic = Template.bind({});
-Basic.args = {
-  includeButtons: true
-};
 export const Embedded = Template.bind({});
-Embedded.args = {
-  includeButtons: true
-};
 Embedded.decorators = [
   (story) => `
     <style>
@@ -130,3 +118,22 @@ export const Styled = Template.bind({});
 Styled.args = {
   styleOverrides: storyStyleOverrides
 };
+export const Completed = Template.bind({});
+Completed.play = async ({ canvasElement, step }) => {
+  // Need to wait for iFrame to load
+  addEventListener('cardFormReady', async () => {
+    const canvas = within(canvasElement);
+    await step('CardForm is rendered', async () => {
+      expect(canvas.getByTestId('card-form-iframe')).toBeDefined();
+    });
+    await step('Validate form when empty shows errors', async () => {
+      userEvent.click(canvas.getByRole('button', { name: 'Validate' }));
+    });
+    // Expect errors to show up, but can't figure out how to get them
+    await step('Call tokenize with empty form shows errors', async () => {
+      userEvent.click(canvas.getByRole('button', { name: 'Tokenize' }));
+    });
+    // Expect errors to show up, but can't figure out how to get them
+    // Fill form
+  });
+};

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

@@ -1,31 +1,169 @@
 import { h, Host } from '@stencil/core';
+import { PaymentMethodTypes } from '../../api';
 export class PaymentForm {
   constructor() {
-    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;
+        }
+      } }))));
   }
   static get is() { return "justifi-payment-form"; }
   static get properties() {
     return {
-      "validationStrategy": {
+      "bankAccount": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "bank-account",
+        "reflect": false
+      },
+      "card": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card",
+        "reflect": false
+      },
+      "iframeOrigin": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all'",
-          "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": ""
         },
-        "attribute": "validation-strategy",
+        "attribute": "iframe-origin",
         "reflect": false
       }
     };
   }
+  static get states() {
+    return {
+      "selectedPaymentMethodType": {},
+      "allowedPaymentMethodTypes": {}
+    };
+  }
+  static get methods() {
+    return {
+      "fillBillingForm": {
+        "complexType": {
+          "signature": "(fields: BillingFormFields) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "BillingFormFields": {
+              "location": "import",
+              "path": "../billing-form/billing-form-schema"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      },
+      "submit": {
+        "complexType": {
+          "signature": "(args: { clientId: string; paymentMethodData: any; accountId?: string; }) => Promise<any>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<any>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "paymentMethodSelected",
+        "method": "paymentMethodSelectedHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -0,0 +1,82 @@
+const Template = (args) => {
+  // The <div> here should be replaced by a `display` property in the cardForm potentially
+  return (`
+    <div>
+      <justifi-payment-form card=${args.card} bank-account=${args['bank-account']} />
+    </div>
+    <div>
+      <button id="submit-button">Submit</button>
+    </div>
+    <script>
+    (async () => {
+      await customElements.whenDefined('justifi-payment-form');
+      const paymentForm = document.querySelector('justifi-payment-form');
+      const submitButton = document.querySelector('#submit-button');
+
+      paymentForm.iframeOrigin = 'http://localhost:3003/v2';
+
+      submitButton?.addEventListener('click', async () => {
+        const tokenizeResponse = await paymentForm.submit({
+          clientId: '${args.clientId}',
+          paymentMethodData: ${JSON.stringify(args.paymentMethodData)},
+          accountId: '${args.accountId}'
+        });
+        console.log('tokenizeResponse:', tokenizeResponse);
+      });
+    })()
+    </script>
+  `);
+};
+export default {
+  title: 'Components/PaymentForm',
+  component: 'justifi-payment-form',
+  argTypes: {
+    'bank-account': {
+      control: 'boolean',
+      table: {
+        category: 'Props'
+      }
+    },
+    card: {
+      control: 'boolean',
+      table: {
+        category: 'Props'
+      }
+    },
+    accountId: {
+      control: 'text',
+      table: {
+        category: 'Tokenize Arguments'
+      }
+    },
+    clientId: {
+      control: 'text',
+      table: {
+        category: 'Tokenize Arguments'
+      }
+    },
+    paymentMethodData: {
+      control: 'object',
+      table: {
+        category: 'Tokenize Arguments'
+      }
+    },
+  },
+  parameters: {
+    actions: {
+      handles: [],
+    },
+  },
+  decorators: [
+    (story) => story(),
+  ],
+};
+export const Basic = Template.bind({});
+Basic.args = {
+  'bank-account': true,
+  card: true,
+  clientId: '',
+  paymentMethodData: {},
+  accountId: '',
+  iframeOrigin: ''
+};

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

@@ -0,0 +1,86 @@
+import { h } from '@stencil/core';
+const PaymentMethodLabels = {
+  bankAccount: 'Bank Account',
+  card: 'Card'
+};
+export class PaymentMethodSelector {
+  constructor() {
+    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])));
+    })));
+  }
+  ;
+  static get is() { return "justifi-payment-method-selector"; }
+  static get properties() {
+    return {
+      "paymentMethodTypes": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "PaymentMethodTypes[]",
+          "resolved": "PaymentMethodTypes[]",
+          "references": {
+            "PaymentMethodTypes": {
+              "location": "import",
+              "path": "../../api"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
+      },
+      "selectedPaymentMethodType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PaymentMethodTypes",
+          "resolved": "PaymentMethodTypes.bankAccount | PaymentMethodTypes.card",
+          "references": {
+            "PaymentMethodTypes": {
+              "location": "import",
+              "path": "../../api"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "selected-payment-method-type",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "paymentMethodSelected",
+        "name": "paymentMethodSelected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -6,6 +6,7 @@ export class PaymentMethodForm {
     this.paymentMethodFormType = undefined;
     this.paymentMethodFormValidationStrategy = undefined;
     this.paymentMethodStyleOverrides = undefined;
+    this.iframeOrigin = undefined;
     this.height = 55;
   }
   connectedCallback() {
@@ -67,7 +68,9 @@ export class PaymentMethodForm {
   }
   ;
   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}`;
     }
@@ -108,7 +111,7 @@ export class PaymentMethodForm {
       },
       "paymentMethodFormValidationStrategy": {
         "type": "string",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all'",
           "resolved": "\"all\" | \"onBlur\" | \"onChange\" | \"onSubmit\" | \"onTouched\"",
@@ -142,6 +145,23 @@ export class PaymentMethodForm {
           "tags": [],
           "text": ""
         }
+      },
+      "iframeOrigin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iframe-origin",
+        "reflect": false
       }
     };
   }

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

@@ -15,9 +15,7 @@ export class SelectInput {
   }
   ;
   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 is() { return "select-input"; }
   static get encapsulation() { return "shadow"; }

package/dist/components/Payment.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 };