@kiva/kv-components 10.6.0 → 10.6.1

package/dist/vue/KvLendCta.script.js

@@ -0,0 +1,391 @@
+import u from "graphql-tag";
+import { mdiChevronRight as d } from "@mdi/js";
+import { throttle as h } from "../utils/throttle.js";
+import { getLendCtaSelectedOption as o, getDropdownPriceArray as l } from "../utils/loanUtils.js";
+import c from "./KvLendAmountButton.js";
+import p from "./KvSelect.js";
+import m from "./KvButton.js";
+import f from "./KvMaterialIcon.js";
+const n = "Other", v = 360, r = 480, a = 380, O = u`
+    fragment KvLendCta on LoanBasic {
+        id
+        name
+        status
+        minNoteSize
+    }
+`, b = u`
+    fragment KvLendCtaUser on LoanBasic {
+        id
+        userProperties {
+            lentTo
+        }
+    }
+`, D = {
+  name: "KvLendCta",
+  components: {
+    KvLendAmountButton: c,
+    KvUiButton: m,
+    KvUiSelect: p,
+    KvMaterialIcon: f
+  },
+  props: {
+    loan: {
+      type: Object,
+      default: () => ({})
+    },
+    unreservedAmount: {
+      type: String,
+      default: ""
+    },
+    basketItems: {
+      type: Array,
+      default: () => []
+    },
+    isLoading: {
+      type: Boolean,
+      default: !0
+    },
+    isAdding: {
+      type: Boolean,
+      default: !1
+    },
+    enableFiveDollarsNotes: {
+      type: Boolean,
+      default: !1
+    },
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    showViewLoan: {
+      type: Boolean,
+      default: !1
+    },
+    customLoanDetails: {
+      type: Boolean,
+      default: !1
+    },
+    externalLinks: {
+      type: Boolean,
+      default: !1
+    },
+    route: {
+      type: Object,
+      default: void 0
+    },
+    userBalance: {
+      type: String,
+      default: void 0
+    },
+    getCookie: {
+      type: Function,
+      default: void 0
+    },
+    setCookie: {
+      type: Function,
+      default: void 0
+    },
+    fiveDollarsSelected: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    },
+    primaryButtonText: {
+      type: String,
+      default: "Lend"
+    },
+    secondaryButtonText: {
+      type: String,
+      default: void 0
+    },
+    secondaryButtonHandler: {
+      type: Function,
+      default: void 0
+    },
+    /**
+           * Hide preset buttons under this amount when
+           * showPresetAmounts is true
+           * */
+    maxAmount: {
+      type: String,
+      default: ""
+    },
+    showPresetAmounts: {
+      type: Boolean,
+      default: !1
+    },
+    kvTrackCategory: {
+      type: String,
+      default: "Lending"
+    },
+    /**
+     * Breakpoint for narrow desktop layout (default: 480px)
+     * When component width is below this, it will use stacked layout even on desktop
+     */
+    narrowSidebarBreakpoint: {
+      type: Number,
+      default: r
+    },
+    /**
+     * Breakpoint for narrow desktop dropdown layout (default: 380px)
+     * When component width is below this in narrow desktop mode, dropdown moves to second row
+     */
+    narrowSidebarDropdownBreakpoint: {
+      type: Number,
+      default: a
+    }
+  },
+  emits: [
+    "show-loan-details",
+    "add-to-basket"
+  ],
+  data() {
+    var t, e;
+    return {
+      mdiChevronRight: d,
+      defaultAmountOptions: [25, 50, 75],
+      selectedOption: o(
+        this.getCookie,
+        this.setCookie,
+        this.enableFiveDollarsNotes,
+        (e = (t = this.route) == null ? void 0 : t.query) == null ? void 0 : e.utm_campaign,
+        this.unreservedAmount,
+        this.userBalance ? parseFloat(this.userBalance) : void 0,
+        this.fiveDollarsSelected
+      ),
+      selectedDropdownOption: n,
+      OTHER_OPTION: n,
+      // SSR-safe viewport width initialization
+      viewportWidth: typeof window < "u" ? window.innerWidth : 1024,
+      componentWidth: 1024,
+      resizeObserver: null,
+      MOBILE_DROPDOWN_BREAKPOINT: v,
+      NARROW_SIDEBAR_BREAKPOINT: r,
+      NARROW_SIDEBAR_DROPDOWN_BREAKPOINT: a
+    };
+  },
+  computed: {
+    readMorePath() {
+      return this.customLoanDetails ? "" : `/lend/${this.loanId}`;
+    },
+    loanId() {
+      var t;
+      return (t = this.loan) == null ? void 0 : t.id;
+    },
+    status() {
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.status) ?? "";
+    },
+    minNoteSize() {
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.minNoteSize) ?? "";
+    },
+    lentPreviously() {
+      var t, e;
+      return ((e = (t = this.loan) == null ? void 0 : t.userProperties) == null ? void 0 : e.lentTo) ?? !1;
+    },
+    isInBasket() {
+      var t;
+      return ((t = this.basketItems) == null ? void 0 : t.some((e) => e.__typename === "LoanReservation" && e.id === this.loanId)) ?? !1;
+    },
+    prices() {
+      const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), e = l(
+        this.unreservedAmount,
+        this.isCompleteLoanActive,
+        t,
+        this.enableFiveDollarsNotes,
+        this.isVisitor
+      );
+      return this.maxAmount ? e.filter((s) => parseFloat(s) <= parseFloat(this.maxAmount)) : e;
+    },
+    presetButtonsPrices() {
+      const t = this.prices.slice(0, 3);
+      return this.prices.length === 4 && t.push(this.prices[3]), t;
+    },
+    presetDropdownPrices() {
+      if (this.prices.length === 4)
+        return [];
+      const t = this.prices.slice(this.defaultAmountOptions.length);
+      return t.unshift(n), t;
+    },
+    loanName() {
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.name) ?? "";
+    },
+    presetAmountCtaButtonText() {
+      var t;
+      return ((t = this.loan) == null ? void 0 : t.borrowerCount) > 1 ? "Support" : `Support ${this.loanName}`;
+    },
+    defaultCtaButtonText() {
+      return this.showPresetAmounts ? this.presetAmountCtaButtonText : this.primaryButtonText || "Lend";
+    },
+    ctaButtonText() {
+      switch (this.state) {
+        case "loading":
+          return "Loading...";
+        case "refunded":
+        case "expired":
+        default:
+          return this.defaultCtaButtonText;
+      }
+    },
+    loanInBasketButtonText() {
+      return this.secondaryButtonText ? this.secondaryButtonText : this.showPresetAmounts ? "Continue to basket" : "Checkout now";
+    },
+    useFormSubmit() {
+      return !!(this.hideShowLendDropdown || this.lendButtonVisibility || this.showLendAgain || this.state === "lent-to" || this.isAdding);
+    },
+    state() {
+      return this.isLoading ? "loading" : this.isAdding ? "adding" : this.isInBasket ? "basketed" : this.status === "funded" || this.status === "refunded" || this.status === "expired" ? this.status : this.allSharesReserved ? "fully-reserved" : this.lentPreviously ? "lent-to" : "lend";
+    },
+    lendButtonVisibility() {
+      return this.state === "lend" || this.state === "loading";
+    },
+    showNonActionableLoanButton() {
+      return this.state === "refunded" || this.state === "expired";
+    },
+    hideShowLendDropdown() {
+      return this.state === "lend" || this.state === "lent-to";
+    },
+    allSharesReserved() {
+      return parseFloat(this.unreservedAmount) === 0;
+    },
+    isLessThan25() {
+      return this.enableFiveDollarsNotes ? !1 : this.isAmountLessThan25(this.unreservedAmount);
+    },
+    isLentTo() {
+      return this.state === "lent-to";
+    },
+    isCompleteLoanActive() {
+      return this.isAmountLessThan25(this.unreservedAmount) || this.isAmountBetween25And500(this.unreservedAmount);
+    },
+    isLendAmountButton() {
+      const t = this.maxAmount ? this.maxAmount : this.unreservedAmount;
+      return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(t) || this.showPresetAmounts && this.presetButtonsPrices.length === 1 && !this.isAdding;
+    },
+    isFunded() {
+      return this.state === "funded" || this.state === "fully-reserved";
+    },
+    amountToLend() {
+      return this.selectedDropdown ? this.selectedDropdownOption : this.isLessThan25 ? this.unreservedAmount : this.selectedOption;
+    },
+    amountForLendAmountButton() {
+      return this.maxAmount && parseFloat(this.maxAmount) === 25 ? Math.min(parseFloat(this.maxAmount), parseFloat(this.unreservedAmount)) : this.unreservedAmount;
+    },
+    showLendAgain() {
+      return this.isLentTo && !this.isLessThan25;
+    },
+    selectedDropdown() {
+      return this.selectedDropdownOption !== n;
+    },
+    showFilteredDropdown() {
+      return this.presetDropdownPrices.length > 1;
+    },
+    hideLendButton() {
+      return this.showPresetAmounts && (this.isAdding || this.presetButtonsPrices.length === 1);
+    },
+    /**
+     * Determines if component should use narrow desktop layout
+     * This is true when we're in desktop viewport but component width is narrow
+     */
+    isNarrowDesktop() {
+      return this.viewportWidth >= 768 && this.componentWidth < this.narrowSidebarBreakpoint;
+    }
+  },
+  watch: {
+    unreservedAmount(t, e) {
+      var s, i;
+      t !== e && e === "" && (this.selectedOption = o(
+        this.getCookie,
+        this.setCookie,
+        this.enableFiveDollarsNotes,
+        (i = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : i.utm_campaign,
+        t,
+        this.userBalance ? parseFloat(this.userBalance) : void 0,
+        this.fiveDollarsSelected
+      )), this.showPresetAmounts && (this.selectedOption = n);
+    }
+  },
+  mounted() {
+    const t = () => {
+      var e;
+      this.viewportWidth = window.innerWidth, this.componentWidth = ((e = this.$refs.root) == null ? void 0 : e.offsetWidth) || 1024;
+    };
+    typeof window < "u" && (this.viewportWidth = window.innerWidth, window.ResizeObserver && this.$nextTick(() => {
+      this.resizeObserver = new window.ResizeObserver(h(t, 50)), this.$refs.root && (this.resizeObserver.observe(this.$refs.root), t());
+    }));
+  },
+  beforeUnmount() {
+    this.resizeHandler && typeof window < "u" && window.removeEventListener("resize", this.resizeHandler), this.resizeObserver && this.$refs.root && this.resizeObserver.disconnect();
+  },
+  methods: {
+    async addToBasket() {
+      this.kvTrackFunction(
+        this.kvTrackCategory,
+        "Add to basket",
+        this.showLendAgain ? "Lend again" : "lend-button-click",
+        this.loanId,
+        this.amountToLend
+      ), this.$emit("add-to-basket", this.amountToLend);
+    },
+    isAmountLessThan25(t) {
+      return t < 25 && t > 0;
+    },
+    isAmountBetween25And50(t) {
+      return t <= 50 && t > 25;
+    },
+    isAmountBetween25And500(t) {
+      return t < 500 && t >= 25;
+    },
+    trackLendAmountSelection(t) {
+      this.showPresetAmounts && (this.selectedOption = null), this.kvTrackFunction(
+        this.kvTrackCategory,
+        "Modify lend amount",
+        t,
+        this.loanId,
+        this.loanId
+      );
+    },
+    clickDropdown() {
+      this.kvTrackFunction(
+        this.kvTrackCategory,
+        "click-Modify loan amount",
+        "open dialog",
+        this.loanId,
+        this.loanId
+      );
+    },
+    clickSecondaryButton(t) {
+      this.secondaryButtonHandler ? (t.preventDefault(), t.stopPropagation(), this.secondaryButtonHandler()) : this.handleCheckout();
+    },
+    clickPresetButton(t) {
+      this.kvTrackFunction(
+        this.kvTrackCategory,
+        "Modify lend amount",
+        t,
+        this.loanId,
+        this.loanId
+      ), this.selectedOption = t, this.selectedDropdownOption = n;
+    },
+    handleCheckout() {
+      this.kvTrackFunction(
+        this.kvTrackCategory,
+        "click-Continue-to-checkout",
+        "Continue to checkout",
+        this.loanId,
+        this.loanId
+      );
+    },
+    isNarrowComponent() {
+      return this.componentWidth < 430;
+    }
+  }
+};
+export {
+  O as KV_LEND_CTA_FRAGMENT,
+  b as KV_LEND_CTA_USER_FRAGMENT,
+  D as default
+};

package/dist/vue/KvLightbox.js

@@ -1,4 +1,4 @@
-import v from "./KvLightbox2.js";
+import v from "./KvLightbox.script.js";
 import { resolveComponent as f, openBlock as n, createBlock as x, Transition as b, withCtx as u, withDirectives as h, createElementVNode as o, withModifiers as s, createElementBlock as w, createCommentVNode as r, normalizeClass as d, renderSlot as c, toDisplayString as k, createVNode as y, vShow as g } from "vue";
 import C from "../_virtual/_plugin-vue_export-helper.js";
 const _ = ["aria-label", "aria-describedby", "role"], p = { class: "tw-flex tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5" }, B = { class: "tw-flex-grow" }, S = { class: "tw-flex-1" }, L = {

package/dist/vue/KvLineGraph.js

@@ -1,4 +1,4 @@
-import u from "./KvLineGraph2.js";
+import u from "./KvLineGraph.script.js";
 import { openBlock as e, createElementBlock as a, createElementVNode as o, normalizeStyle as r, Fragment as s, renderList as w, toDisplayString as i, createCommentVNode as c, normalizeClass as m } from "vue";
 import d from "../_virtual/_plugin-vue_export-helper.js";
 const f = { class: "tw-h-full tw-w-full tw-p-2.5" };

package/dist/vue/KvLoadingSpinner.js

@@ -1,4 +1,4 @@
-import r from "./KvLoadingSpinner2.js";
+import r from "./KvLoadingSpinner.script.js";
 import { openBlock as a, createElementBlock as i, normalizeClass as o, createStaticVNode as c } from "vue";
 import l from "../_virtual/_plugin-vue_export-helper.js";
 function n(w, e, t, s, d, f) {

package/dist/vue/KvLoanActivities.js

@@ -1,151 +1,77 @@
-import { toRefs as f, ref as v, computed as n } from "vue";
-import { gql as p } from "@apollo/client/core";
-import { format as y } from "date-fns";
-import A from "numeral";
-import g from "./KvActivityRow.js";
-import b from "./KvLightbox.js";
-import F from "./KvLendCta2.js";
-const O = p`
-	fragment KvLoanActivities on LoanBasic {
-		id
-		name
-		lenders(limit: 0) {
-			totalCount
-		}
-		loanFundraisingInfo {
-			id
-			fundedAmount
-		}
-	}
-`, _ = {
-  name: "KvLoanActivities",
-  components: {
-    KvActivityRow: g,
-    KvLightbox: b,
-    KvLendCta: F
-  },
-  props: {
-    /**
-     * loan object coming from parent component
-     */
-    loan: {
-      type: Object,
-      default: () => ({})
-    },
-    /**
-     * loan combined activities coming from parent component
-     */
-    combinedActivities: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * isAdding flag coming from parent add to basket method
-     */
-    isAdding: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * basketItems array coming from parent component
-     */
-    basketItems: {
-      type: Array,
-      default: () => []
-    },
-    /**
-     * userBalance string coming from parent component
-     */
-    userBalance: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * errorMsg string coming from parent add to basket method
-     */
-    errorMsg: {
-      type: String,
-      default: void 0
-    },
-    /**
-     * kvTrackFunction function to track events from LendCta component
-     */
-    kvTrackFunction: {
-      type: Function,
-      required: !0
-    },
-    /**
-     * getCookie function for LendCta component
-     */
-    getCookie: {
-      type: Function,
-      default: void 0
-    },
-    /**
-     * setCookie function for LendCta component
-     */
-    setCookie: {
-      type: Function,
-      default: void 0
-    },
-    /**
-     * route object for LendCta component
-     */
-    route: {
-      type: Object,
-      default: void 0
-    },
-    enableFiveDollarsNotes: {
-      type: Boolean,
-      default: !1
-    },
-    isVisitor: {
-      type: Boolean,
-      default: !0
-    }
-  },
-  emits: [
-    "add-to-basket"
-  ],
-  setup(r) {
-    const {
-      loan: a,
-      combinedActivities: l,
-      kvTrackFunction: s
-    } = f(r), i = v(!1), u = n(() => {
-      var t;
-      return `Activity for ${((t = a.value) == null ? void 0 : t.name) || ""}`;
-    }), d = n(() => {
-      var t, e;
-      return ((e = (t = a.value) == null ? void 0 : t.lenders) == null ? void 0 : e.totalCount) ?? 0;
-    }), c = n(() => {
-      var e, o;
-      const t = ((o = (e = a.value) == null ? void 0 : e.loanFundraisingInfo) == null ? void 0 : o.fundedAmount) ?? 0;
-      return A(parseFloat(t)).format("$0,0");
-    }), m = n(() => {
-      const t = l.value.find((e) => e.data.some((o) => o.type === "LendingAction"));
-      return (t == null ? void 0 : t.data[0]) ?? {};
-    });
-    return {
-      lightboxOpen: i,
-      modalTitle: u,
-      formattedDate: (t) => {
-        const e = new Date(t);
-        return y(e, "MMM d, yyyy");
-      },
-      showActivityModal: () => {
-        s.value("loan-card", "click", "see-all-activity"), i.value = !0;
-      },
-      closeLightbox: () => {
-        i.value = !1;
-      },
-      singleActivity: m,
-      lendersNumber: d,
-      amountLent: c
-    };
-  }
-};
+import g from "./KvLoanActivities.script.js";
+import { KV_LOAN_ACTIVITIES_FRAGMENT as H } from "./KvLoanActivities.script.js";
+import { resolveComponent as c, openBlock as n, createElementBlock as s, createElementVNode as i, createVNode as d, toDisplayString as l, createCommentVNode as r, withCtx as m, Fragment as w, renderList as _, createBlock as h } from "vue";
+import "./KvLoanActivities.css";
+import y from "../_virtual/_plugin-vue_export-helper.js";
+const A = {
+  key: 0,
+  class: "loan-activity"
+}, L = { class: "tw-flex tw-justify-center lg:tw-px-0" }, C = { class: "tw-flex tw-justify-center tw-mt-1 tw-text-small" }, K = { key: 0 }, N = { class: "tw-text-title tw-flex-1 data-hj-suppress" }, M = { class: "tw-overflow-x-hidden tw-px-2 tw-pb-1" }, T = { class: "tw-text-center tw-text-upper" }, V = { class: "tw-flex tw-flex-col tw-gap-y-1" }, B = {
+  key: 0,
+  class: "tw-mt-1 tw-text-small tw-text-danger"
+}, F = { class: "tw-flex tw-justify-end tw-mt-4 tw-pb-2.5 md:tw-pb-4" };
+function I(k, a, t, e, j, E) {
+  const v = c("KvActivityRow"), x = c("KvLendCta"), u = c("KvLightbox");
+  return t.combinedActivities.length > 0 ? (n(), s("div", A, [
+    i("div", L, [
+      d(v, { activity: e.singleActivity }, null, 8, ["activity"])
+    ]),
+    i("div", C, [
+      e.lendersNumber && e.amountLent ? (n(), s("span", K, l(e.lendersNumber) + " lenders lent " + l(e.amountLent) + ".   ", 1)) : r("", !0),
+      i("button", {
+        class: "tw-text-action hover:tw-underline",
+        onClick: a[0] || (a[0] = (...o) => e.showActivityModal && e.showActivityModal(...o))
+      }, " See all activity ")
+    ]),
+    d(u, {
+      title: "Activity Feed Modal",
+      visible: e.lightboxOpen,
+      onLightboxClosed: e.closeLightbox
+    }, {
+      header: m(() => [
+        i("h2", N, l(e.modalTitle), 1)
+      ]),
+      default: m(() => [
+        i("div", M, [
+          (n(!0), s(w, null, _(t.combinedActivities, (o) => (n(), s("div", {
+            key: o.key,
+            class: "md:tw-px-8 lg:tw-px-14 tw-mt-4"
+          }, [
+            i("p", T, l(e.formattedDate(o.key)), 1),
+            i("div", V, [
+              (n(!0), s(w, null, _(o.data, (b, f) => (n(), h(v, {
+                key: f,
+                activity: b
+              }, null, 8, ["activity"]))), 128))
+            ])
+          ]))), 128))
+        ]),
+        i("div", null, [
+          t.errorMsg ? (n(), s("p", B, l(t.errorMsg), 1)) : r("", !0),
+          i("div", F, [
+            d(x, {
+              loan: t.loan,
+              "is-loading": !1,
+              "kv-track-function": t.kvTrackFunction,
+              "get-cookie": t.getCookie,
+              "set-cookie": t.setCookie,
+              "user-balance": t.userBalance,
+              "basket-items": t.basketItems,
+              route: t.route,
+              "is-adding": t.isAdding,
+              "is-visitor": t.isVisitor,
+              "enable-five-dollars-notes": t.enableFiveDollarsNotes,
+              onAddToBasket: a[1] || (a[1] = (o) => k.$emit("add-to-basket", o))
+            }, null, 8, ["loan", "kv-track-function", "get-cookie", "set-cookie", "user-balance", "basket-items", "route", "is-adding", "is-visitor", "enable-five-dollars-notes"])
+          ])
+        ])
+      ]),
+      _: 1
+    }, 8, ["visible", "onLightboxClosed"])
+  ])) : r("", !0);
+}
+const G = /* @__PURE__ */ y(g, [["render", I], ["__scopeId", "data-v-c2b4aeda"]]);
 export {
-  O as KV_LOAN_ACTIVITIES_FRAGMENT,
-  _ as default
+  H as KV_LOAN_ACTIVITIES_FRAGMENT,
+  G as default
 };