@justifi/webcomponents 0.0.6

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

@@ -0,0 +1,92 @@
+import { Host, h } from '@stencil/core';
+import { Api, Payment } from '../../api';
+import { formatCurrency, formatDate, formatTime } from '../../utils/utils';
+export class PaymentsList {
+  constructor() {
+    this.accountId = undefined;
+    this.auth = {};
+    this.payments = [];
+  }
+  requestPropsChanged() {
+    this.fetchData();
+  }
+  fetchData() {
+    const accountId = this.accountId;
+    const endpoint = `account/${accountId}/payments`;
+    Api(this.auth.token).get(endpoint)
+      .then((response) => {
+      const data = response.data.map((dataItem) => new Payment(dataItem));
+      this.payments = data;
+    });
+  }
+  ;
+  render() {
+    return (h(Host, null, h("table", { class: "justifi-table" }, h("thead", null, h("tr", null, h("th", { scope: "col", title: "The date and time each payment was made" }, "Made on"), h("th", { scope: "col", title: "The dollar amount of each payment" }, "Amount"), h("th", { scope: "col" }, "Account"), h("th", { scope: "col" }, "Description"), h("th", { scope: "col" }, "Payment ID"), h("th", { scope: "col" }, "Cardholder"), h("th", { scope: "col" }, "Payment Method"), h("th", { scope: "col" }, "Status"))), h("tbody", null, this.payments.map((payment) => {
+      var _a, _b, _c, _d;
+      h("tr", null, h("td", null, h("div", null, formatDate(payment.created_at)), h("div", null, formatTime(payment.created_at))), h("td", null, formatCurrency(payment.amount)), h("td", null, payment.account_id), h("td", null, payment.description), h("td", null, payment.id), h("td", null, (_b = (_a = payment.payment_method) === null || _a === void 0 ? void 0 : _a.card) === null || _b === void 0 ? void 0 : _b.name), h("td", null, (_d = (_c = payment.payment_method) === null || _c === void 0 ? void 0 : _c.card) === null || _d === void 0 ? void 0 : _d.acct_last_four), h("td", null, payment.status));
+    })))));
+  }
+  static get is() { return "justifi-payments-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["payments-list.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["payments-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accountId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "account-id",
+        "reflect": false
+      },
+      "auth": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "{ token?: string }",
+          "resolved": "{ token?: string; }",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "{}"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "payments": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "accountId",
+        "methodName": "requestPropsChanged"
+      }, {
+        "propName": "auth",
+        "methodName": "requestPropsChanged"
+      }];
+  }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/utils.js

@@ -0,0 +1,33 @@
+import { format } from 'date-fns';
+import Dinero from 'dinero.js';
+export function formatCurrency(amount, withSymbol = true) {
+  if (!amount)
+    amount = 0;
+  function format(amount) {
+    const formattedString = withSymbol ? '$0,0.00' : '0,0.00';
+    return Dinero({ amount: amount, currency: 'USD' }).toFormat(formattedString);
+  }
+  return (amount < 0) ? `(${format(-amount)})` : format(amount);
+}
+;
+export function formatDate(dateString) {
+  if (!dateString)
+    return '';
+  const date = new Date(dateString);
+  return format(date, 'MMM d, yyyy');
+}
+;
+export function formatTime(dateString) {
+  if (!dateString)
+    return '';
+  const date = new Date(dateString);
+  return format(date, 'h:mmaaa');
+}
+;
+export function formatTimeSeconds(dateString) {
+  if (!dateString)
+    return '';
+  const date = new Date(dateString);
+  return format(date, 'h:mm:ssaaa');
+}
+;

package/dist/components/index.d.ts

@@ -0,0 +1,23 @@
+/* JustifiWebcomponents custom elements */
+export { CardForm as JustifiCardForm } from '../types/components/card-form/card-form';
+export { PaymentsList as JustifiPaymentsList } from '../types/components/payments-list/payments-list';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { JustifiCardForm, defineCustomElement as defineCustomElementJustifiCardForm } from './justifi-card-form.js';
+export { JustifiPaymentsList, defineCustomElement as defineCustomElementJustifiPaymentsList } from './justifi-payments-list.js';

package/dist/components/justifi-card-form.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiCardForm extends Components.JustifiCardForm, HTMLElement {}
+export const JustifiCardForm: {
+  prototype: JustifiCardForm;
+  new (): JustifiCardForm;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,93 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const cardFormCss = ":host{display:block}iframe{border:none;height:55px;width:100%}";
+
+var DispatchedEventTypes;
+(function (DispatchedEventTypes) {
+  DispatchedEventTypes["blur"] = "blur";
+  DispatchedEventTypes["change"] = "change";
+  DispatchedEventTypes["ready"] = "ready";
+  DispatchedEventTypes["tokenize"] = "tokenize";
+})(DispatchedEventTypes || (DispatchedEventTypes = {}));
+const CardForm = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.cardFormReady = createEvent(this, "cardFormReady", 7);
+    this.cardFormChange = createEvent(this, "cardFormChange", 7);
+    this.cardFormBlur = createEvent(this, "cardFormBlur", 7);
+    this.cardFormTokenize = createEvent(this, "cardFormTokenize", 7);
+    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;
+    }
+  }
+  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 style() { return cardFormCss; }
+}, [1, "justifi-card-form", {
+    "iframeOrigin": [1, "iframe-origin"],
+    "tokenize": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["justifi-card-form"];
+  components.forEach(tagName => { switch (tagName) {
+    case "justifi-card-form":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CardForm);
+      }
+      break;
+  } });
+}
+
+const JustifiCardForm = CardForm;
+const defineCustomElement = defineCustomElement$1;
+
+export { JustifiCardForm, defineCustomElement };

package/dist/components/justifi-payments-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JustifiPaymentsList extends Components.JustifiPaymentsList, HTMLElement {}
+export const JustifiPaymentsList: {
+  prototype: JustifiPaymentsList;
+  new (): JustifiPaymentsList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;