@justifi/webcomponents 0.0.6

package/dist/cjs/justifi-webcomponents.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-c1726348.js');
+
+/*
+ Stencil Client Patch Browser v2.19.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('justifi-webcomponents.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["justifi-card-form_2.cjs",[[1,"justifi-card-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]]], options);
+});

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-c1726348.js');
+
+/*
+ Stencil Client Patch Esm v2.19.3 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["justifi-card-form_2.cjs",[[1,"justifi-card-form",{"iframeOrigin":[1,"iframe-origin"],"tokenize":[64]}],[1,"justifi-payments-list",{"accountId":[1,"account-id"],"auth":[16],"payments":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/api/Api.js

@@ -0,0 +1,44 @@
+import { v4 as uuidv4 } from 'uuid';
+const Api = (authToken) => {
+  const apiOrigin = 'http://localhost:3000';
+  async function getAuthorizationHeader() {
+    return {
+      Authorization: `Bearer ${authToken}`,
+      'Idempotency-Key': uuidv4(),
+      'Content-Type': 'application/json'
+    };
+  }
+  async function makeRequest(endpoint, method, params, body, signal) {
+    const url = `${apiOrigin}/v1/${endpoint}`;
+    const requestUrl = params ? `${url}?${new URLSearchParams(params)}` : url;
+    const response = await fetch(requestUrl, {
+      method: method,
+      headers: await getAuthorizationHeader(),
+      body: body,
+      signal: signal
+    });
+    if (response) {
+      return response.status === 204 ? {} : response.json();
+    }
+    ;
+    handleError(requestUrl);
+  }
+  ;
+  async function get(endpoint, params, signal) {
+    return makeRequest(endpoint, 'GET', params, null, signal);
+  }
+  async function post(endpoint, body, params, signal) {
+    return makeRequest(endpoint, 'POST', params, body, signal);
+  }
+  async function patch(endpoint, body, params, signal) {
+    return makeRequest(endpoint, 'PATCH', params, body, signal);
+  }
+  async function destroy(endpoint, params, signal) {
+    return makeRequest(endpoint, 'DELETE', params, null, signal);
+  }
+  return { get, post, patch, destroy };
+};
+function handleError(requestUrl) {
+  console.error(`Error fetching from ${requestUrl}`);
+}
+export default Api;

package/dist/collection/api/Pagination.js

@@ -0,0 +1,8 @@
+export class Pagination {
+  constructor(pagination) {
+    this.has_previous = (pagination === null || pagination === void 0 ? void 0 : pagination.has_previous) || false;
+    this.has_next = (pagination === null || pagination === void 0 ? void 0 : pagination.has_next) || false;
+    this.start_cursor = (pagination === null || pagination === void 0 ? void 0 : pagination.start_cursor) || '';
+    this.end_cursor = (pagination === null || pagination === void 0 ? void 0 : pagination.end_cursor) || '';
+  }
+}

package/dist/collection/api/Payment.js

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

package/dist/collection/api/index.js

@@ -0,0 +1,4 @@
+export { default as Api } from './Api';
+export * from './Api';
+export * from './Pagination';
+export * from './Payment';

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

@@ -0,0 +1,216 @@
+import { CaptureStrategy, Payment, PaymentStatuses } from '../Payment';
+const mockPayments = [
+  // payment 0: succeeded
+  new Payment({
+    account_id: 'acc_5wEk41rFZVPsqK5xQ7K0eG',
+    amount: 363393,
+    amount_disputed: 0,
+    amount_refundable: 363393,
+    amount_refunded: 0,
+    balance: 363368,
+    capture_strategy: CaptureStrategy.automatic,
+    captured: true,
+    created_at: '2022-01-10T15:29:58.940Z',
+    currency: 'usd',
+    description: 'Successful Payment',
+    disputed: false,
+    disputes: [],
+    error_code: null,
+    error_description: null,
+    fee_amount: 25,
+    id: 'py_6vbEiTROeuEoA1Hs1s2exQ',
+    is_test: false,
+    metadata: {
+      city: 'Vienna',
+      state: 'Nevada',
+      customer_id: 234,
+      customer_first_name: 'Elvis',
+      customer_last_name: 'Presley',
+      source: 'app',
+      items: [
+        {
+          name: 'Pullover',
+          amount: 4500
+        },
+        {
+          name: 'Jeans',
+          amount: 5567
+        }
+      ]
+    },
+    payment_intent_id: null,
+    payment_method: {
+      card: {
+        acct_last_four: '6449',
+        brand: 'mastercard',
+        created_at: '2022-01-13T14:19:11.803Z',
+        id: 'pm_7f66GJQoSofG3s9nOHPgaq',
+        name: 'Nick Name',
+        token: 'fake-token',
+        updated_at: '2022-01-13T14:19:11.803Z'
+      }
+    },
+    refunded: false,
+    status: PaymentStatuses.succeeded,
+    updated_at: '2022-01-10T15:29:58.940Z'
+  }),
+  // payment 1: fully refunded
+  new Payment({
+    account_id: 'acc_5wEk41rFZVPsqK5xQ7K0eG',
+    amount: 3393,
+    amount_disputed: 0,
+    amount_refundable: 0,
+    amount_refunded: 3393,
+    balance: 0,
+    capture_strategy: CaptureStrategy.automatic,
+    captured: true,
+    created_at: '2021-01-10T15:29:58.940Z',
+    currency: 'usd',
+    description: 'Fully Refunded Payment',
+    disputed: false,
+    disputes: [],
+    error_code: null,
+    error_description: null,
+    fee_amount: 25,
+    id: 'py_22cEiTROeuEoA1Hs1s24ls3',
+    is_test: false,
+    metadata: null,
+    payment_intent_id: null,
+    payment_method: {
+      card: {
+        acct_last_four: '1213',
+        brand: 'visa',
+        created_at: '2021-01-13T14:19:11.803Z',
+        id: 'pm_7f66GJQoSofG3s9nOHPgaq',
+        name: 'Good Customer',
+        token: 'fake-token',
+        updated_at: '2021-01-13T14:19:11.803Z'
+      }
+    },
+    refunded: true,
+    status: PaymentStatuses.fully_refunded,
+    updated_at: '2021-01-10T15:29:58.940Z'
+  }),
+  // payment 2: partially refunded
+  new Payment({
+    account_id: 'acc_5wEk41rFZVPsqK5xQ7K0eG',
+    amount: 3393,
+    amount_disputed: 0,
+    amount_refundable: 3300,
+    amount_refunded: 193,
+    balance: 3275,
+    capture_strategy: CaptureStrategy.automatic,
+    captured: true,
+    created_at: '2021-11-10T15:29:58.940Z',
+    currency: 'usd',
+    description: 'Partially Refunded Payment',
+    disputed: false,
+    disputes: [],
+    error_code: null,
+    error_description: null,
+    fee_amount: 25,
+    id: 'py_8reEiTROeuEoA1Hs1s24zue',
+    is_test: false,
+    metadata: null,
+    payment_intent_id: null,
+    payment_method: {
+      card: {
+        acct_last_four: '9780',
+        brand: 'american_express',
+        created_at: '2021-11-13T14:19:11.803Z',
+        id: 'pm_7f66GJQoSofG3s9nOHPgaq',
+        name: 'Sal Gleason',
+        token: 'fake-token',
+        updated_at: '2021-11-13T14:19:11.803Z'
+      }
+    },
+    refunded: true,
+    status: PaymentStatuses.partially_refunded,
+    updated_at: '2022-01-10T15:29:58.940Z'
+  }),
+  // payment 3: disputed
+  new Payment({
+    account_id: 'acc_5wEk41rFZVPsqK5xQ7K0eG',
+    amount: 403393,
+    amount_disputed: 403393,
+    amount_refundable: 0,
+    amount_refunded: 0,
+    balance: 0,
+    capture_strategy: CaptureStrategy.automatic,
+    captured: true,
+    created_at: '2021-09-10T15:29:58.940Z',
+    currency: 'usd',
+    description: 'Rustic Marble Pants',
+    disputed: true,
+    disputes: [{
+        amount_cents: 10000,
+        created_at: '2021-09-10T16:34:47.940Z',
+        currency: 'usd',
+        gateway_ref_id: 'dp_4f67775b-d6e0-4c4a-afb0-6ecf2d0df1a8',
+        id: 'ed5dfa9d-b29d-4658-b76d-fff0c592171f',
+        payment_id: '41ebfb2a-f8c8-4cee-9eca-cb7d86e863bc',
+        reason: null,
+        status: 'needs_response',
+        updated_at: '2021-09-10T16:34:47.940Z'
+      }],
+    error_code: null,
+    error_description: null,
+    fee_amount: 35,
+    id: 'py_123EiTROeuEoA1Hs1s24r4w',
+    is_test: false,
+    metadata: null,
+    payment_intent_id: null,
+    payment_method: {
+      card: {
+        acct_last_four: '1554',
+        brand: 'discover',
+        created_at: '2021-09-13T14:19:11.803Z',
+        id: 'pm_7f66GJQoSofG3s9nOHPgaq',
+        name: 'Sal Gleason',
+        token: 'fake-token',
+        updated_at: '2021-09-13T14:19:11.803Z'
+      }
+    },
+    refunded: false,
+    status: PaymentStatuses.disputed,
+    updated_at: '2021-09-10T15:29:58.940Z'
+  }),
+  // payment 4: failed
+  new Payment({
+    account_id: 'acc_5wEk41rFZVPsqK5xQ7K0eG',
+    amount: 24170,
+    amount_disputed: 0,
+    amount_refundable: 0,
+    amount_refunded: 0,
+    balance: 0,
+    capture_strategy: CaptureStrategy.automatic,
+    captured: false,
+    created_at: '2022-01-18T12:54:44.822Z',
+    currency: 'usd',
+    description: 'Failed Payment',
+    disputed: false,
+    disputes: [],
+    error_code: 'card_declined',
+    error_description: 'Your card has insufficient funds.',
+    fee_amount: 25,
+    id: 'py_6eZAJjYBFZU6LLNzxUDgx9',
+    is_test: true,
+    metadata: null,
+    payment_intent_id: null,
+    payment_method: {
+      card: {
+        acct_last_four: '8774',
+        brand: 'diners_club',
+        created_at: '2022-01-18T15:07:15.975Z',
+        id: 'pm_5uyevnE6o1yl55nRgPWXXL',
+        name: 'Minnie Bernhard',
+        token: 'fake-token',
+        updated_at: '2022-01-18T15:07:15.975Z'
+      },
+    },
+    refunded: false,
+    status: PaymentStatuses.failed,
+    updated_at: '2022-01-18T12:54:44.822Z'
+  })
+];
+export default mockPayments;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,13 @@
+{
+  "entries": [
+    "./components/card-form/card-form.js",
+    "./components/payments-list/payments-list.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.19.3",
+    "typescriptVersion": "4.7.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,9 @@
+:host {
+  display: block;
+}
+
+iframe {
+  border: none;
+  height: 55px;
+  width: 100%;
+}

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

@@ -0,0 +1,191 @@
+import { Host, h } from '@stencil/core';
+var DispatchedEventTypes;
+(function (DispatchedEventTypes) {
+  DispatchedEventTypes["blur"] = "blur";
+  DispatchedEventTypes["change"] = "change";
+  DispatchedEventTypes["ready"] = "ready";
+  DispatchedEventTypes["tokenize"] = "tokenize";
+})(DispatchedEventTypes || (DispatchedEventTypes = {}));
+export class CardForm {
+  constructor() {
+    this.iframeOrigin = undefined;
+  }
+  connectedCallback() {
+    window.addEventListener('message', this.dispatchMessageEvent.bind(this));
+  }
+  disconnectedCallback() {
+    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));
+  }
+  dispatchMessageEvent(messageEvent) {
+    const messagePayload = messageEvent.data;
+    const messageType = messagePayload.eventType;
+    const messageData = messagePayload.data;
+    switch (messageType) {
+      case DispatchedEventTypes.ready:
+        this.cardFormReady.emit(messageData);
+        break;
+      case DispatchedEventTypes.change:
+        this.cardFormChange.emit(messageData);
+        break;
+      case DispatchedEventTypes.blur:
+        this.cardFormBlur.emit(messageData);
+        break;
+      default:
+        break;
+    }
+  }
+  triggerTokenization(clientKey, account, paymentMethodMetadata) {
+    if (this.iframeElement && this.iframeElement.contentWindow) {
+      this.iframeElement.contentWindow.postMessage({
+        eventType: DispatchedEventTypes.tokenize,
+        clientKey: clientKey,
+        paymentMethodMetadata: paymentMethodMetadata,
+        account: account
+      }, '*');
+    }
+  }
+  async tokenize(clientKey, account, paymentMethodMetadata) {
+    return new Promise((resolve) => {
+      const tokenizeEventListener = (event) => {
+        if (event.data.eventType !== DispatchedEventTypes.tokenize)
+          return;
+        window.removeEventListener('message', tokenizeEventListener);
+        resolve(event.data.data);
+      };
+      window.addEventListener('message', tokenizeEventListener);
+      this.triggerTokenization(clientKey, account, paymentMethodMetadata);
+    });
+  }
+  ;
+  render() {
+    return (h(Host, null, h("iframe", { id: "justifi-card-form", src: this.iframeOrigin || 'https://js.justifi.ai', ref: (el) => this.iframeElement = el })));
+  }
+  static get is() { return "justifi-card-form"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card-form.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card-form.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "iframeOrigin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "iframe-origin",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "cardFormReady",
+        "name": "cardFormReady",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "cardFormChange",
+        "name": "cardFormChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "cardFormBlur",
+        "name": "cardFormBlur",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "cardFormTokenize",
+        "name": "cardFormTokenize",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ data: any }",
+          "resolved": "{ data: any; }",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "tokenize": {
+        "complexType": {
+          "signature": "(clientKey: string, account: string, paymentMethodMetadata: any) => Promise<unknown>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }, {
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "MessageEvent": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<unknown>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+}

package/dist/collection/components/payments-list/payments-list.css

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