@kiva/kv-components 7.6.3 → 8.0.0

package/dist/vue/KvLendCta2.js

@@ -0,0 +1,387 @@
+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", A = 360, r = 480, a = 380, O = u`
+    fragment KvLendCta on LoanBasic {
+        id
+        name
+        status
+        minNoteSize
+    }
+`, D = u`
+    fragment KvLendCtaUser on LoanBasic {
+        id
+        userProperties {
+            lentTo
+        }
+    }
+`, b = {
+  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
+    }
+  },
+  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: A,
+      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());
+    }));
+  },
+  beforeDestroy() {
+    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,
+  D as KV_LEND_CTA_USER_FRAGMENT,
+  b as default
+};

package/dist/vue/KvLightbox.js

@@ -1,129 +1,18 @@
-import { toRefs as L, ref as u, nextTick as C, computed as E, watch as K, onMounted as M, onBeforeUnmount as N, resolveComponent as P, openBlock as b, createBlock as R, Transition as V, withCtx as j, withDirectives as q, createElementVNode as i, withModifiers as k, createElementBlock as g, createCommentVNode as y, normalizeClass as S, renderSlot as p, toDisplayString as z, createVNode as D, vShow as I } from "vue";
-import { mdiClose as O } from "@mdi/js";
-import { useFocusTrap as T } from "@vueuse/integrations/useFocusTrap";
-import { hideOthers as U } from "../vendor/aria-hidden/dist/es2015/index.js";
-import { unlockScroll as A, lockScroll as G } from "../utils/scrollLock.js";
-import { unlockPrintSingleEl as H, lockPrintSingleEl as J } from "../utils/printing.js";
-import Q from "./KvMaterialIcon.js";
-import W from "../_virtual/_plugin-vue_export-helper.js";
-const X = {
-  components: {
-    KvMaterialIcon: Q
-  },
-  props: {
-    /**
-     * Whether to apply a blur to the background behind the lightbox
-     */
-    blurBackground: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Whether the dialog is open or not
-     * */
-    visible: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Appearance and role of the lightbox
-     * @values lightbox, alert
-     * */
-    variant: {
-      type: String,
-      default: "lightbox",
-      validator(n) {
-        return ["lightbox", "alert"].includes(n);
-      }
-    },
-    /**
-     * The title of the dialog which describes the dialog to screenreaders, and if no
-     * content is in the `header` slot, will be displayed at the top of the lightbox.
-     * */
-    title: {
-      type: String,
-      required: !0
-    },
-    /**
-     * The dialog has no close X button, clicking the screen does not close,
-     * pressing ESC does not close.
-     * */
-    preventClose: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: [
-    "lightbox-closed"
-  ],
-  setup(n, { emit: e }) {
-    const {
-      visible: t,
-      variant: l,
-      preventClose: x
-    } = L(n), c = u(null), a = u(null), r = u(null), w = u(null), v = u(null);
-    C(() => {
-      const {
-        activate: o,
-        deactivate: s
-      } = T([
-        c.value,
-        // This lightbox
-        '[role="alert"]'
-        // Any open toasts/alerts on the page
-      ], {
-        allowOutsideClick: !0
-        // allow clicking outside the lightbox to close it
-      });
-      w.value = o, v.value = s;
-    });
-    let m = null, f = null;
-    const B = E(() => l.value === "alert" ? "alertdialog" : "dialog"), d = (o = "") => {
-      var s;
-      c.value && a.value && ((s = v.value) == null || s.call(v), a.value.scrollTop = 0, H(a.value)), A(), m && (m(), m = null), document.removeEventListener("keyup", f), e("lightbox-closed", { type: o });
-    };
-    f = (o) => {
-      o && o.key === "Escape" && !x.value && d();
-    };
-    const _ = () => {
-      x.value || d("background-click");
-    }, h = () => {
-      t.value && (document.addEventListener("keyup", f), C(() => {
-        var o;
-        if (c.value && a.value && ((o = w.value) == null || o.call(w), m = U(c.value), J(a.value)), G(), l.value === "alert") {
-          const s = r.value.querySelector("button");
-          s && s.focus();
-        }
-      }));
-    };
-    return K(t, () => {
-      t.value ? h() : d();
-    }), M(() => {
-      t.value && h();
-    }), N(() => d()), {
-      mdiClose: O,
-      role: B,
-      kvLightbox: c,
-      kvLightboxBody: a,
-      onKeyUp: f,
-      onScreenClick: _,
-      hide: d,
-      show: h,
-      controlsRef: r
-    };
-  }
-}, Y = ["aria-label", "aria-describedby", "role"], Z = { class: "tw-flex tw-p-2.5 md:tw-px-4 md:tw-pt-4 md:tw-pb-3.5" }, F = { class: "tw-flex-grow" }, $ = { class: "tw-flex-1" }, tt = {
+import v from "./KvLightbox2.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 w, createElementBlock as r, createCommentVNode as s, normalizeClass as c, renderSlot as d, 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 = {
   id: "kvLightboxBody",
   ref: "kvLightboxBody",
   class: "tw-flex-1 tw-px-2.5 md:tw-px-4 tw-pb-2.5 md:tw-pb-4 tw-overflow-auto"
-}, et = {
+}, N = {
   key: 0,
   ref: "controlsRef",
   class: "tw-flex-shrink-0 tw-flex tw-justify-end tw-gap-x-2.5 tw-p-2.5 md:tw-px-4 md:tw-pb-4 md:tw-pt-1"
 };
-function lt(n, e, t, l, x, c) {
-  const a = P("kv-material-icon");
-  return b(), R(V, {
+function V(i, e, t, l, j, z) {
+  const m = f("kv-material-icon");
+  return n(), x(b, {
     "enter-active-class": "tw-transition-opacity tw-duration-300",
     "leave-active-class": "tw-transition-opacity tw-duration-300",
     "enter-class": "tw-opacity-0",
@@ -131,28 +20,28 @@ function lt(n, e, t, l, x, c) {
     "leave-class": "tw-opacity-full",
     "leave-to-class": "tw-opacity-0"
   }, {
-    default: j(() => [
-      q(i("div", {
+    default: u(() => [
+      h(o("div", {
         class: "tw-z-modal tw-fixed tw-inset-0 tw-bg-black tw-bg-opacity-[75%]",
-        onClick: e[3] || (e[3] = k((...r) => l.onScreenClick && l.onScreenClick(...r), ["stop", "prevent"]))
+        onClick: e[3] || (e[3] = w((...a) => l.onScreenClick && l.onScreenClick(...a), ["stop", "prevent"]))
       }, [
-        i("div", null, [
-          t.blurBackground ? (b(), g("div", {
+        o("div", null, [
+          t.blurBackground ? (n(), r("div", {
             key: 0,
             class: "tw-fixed tw-inset-0 tw-w-full tw-h-full tw-backdrop-blur-sm",
-            onClick: e[0] || (e[0] = k((...r) => l.onScreenClick && l.onScreenClick(...r), ["stop", "prevent"]))
-          })) : y("", !0),
-          i("div", {
-            class: S(["tw-flex tw-absolute tw-inset-0", {
+            onClick: e[0] || (e[0] = w((...a) => l.onScreenClick && l.onScreenClick(...a), ["stop", "prevent"]))
+          })) : s("", !0),
+          o("div", {
+            class: c(["tw-flex tw-absolute tw-inset-0", {
               "md:tw-px-2": t.variant === "lightbox",
               "tw-px-2": t.variant === "alert"
             }])
           }, [
-            i("div", {
+            o("div", {
               ref: "kvLightbox",
               tabindex: "-1",
               "data-test": "kv-lightbox",
-              class: S(["tw-bg-primary tw-flex tw-flex-col tw-mx-auto md:tw-my-auto", {
+              class: c(["tw-bg-primary tw-flex tw-flex-col tw-mx-auto md:tw-my-auto", {
                 "tw-w-full md:tw-w-auto": t.variant === "lightbox",
                 "tw-mt-auto md:tw-my-auto": t.variant === "lightbox",
                 "tw-min-h-half-screen md:tw-min-h-0": t.variant === "lightbox",
@@ -164,44 +53,44 @@ function lt(n, e, t, l, x, c) {
               "aria-label": t.title ? t.title : null,
               "aria-describedby": t.variant === "alert" ? "kvLightboxBody" : null,
               role: l.role,
-              onClick: e[2] || (e[2] = k(() => {
+              onClick: e[2] || (e[2] = w(() => {
               }, ["stop"]))
             }, [
-              i("div", Z, [
-                i("div", F, [
-                  p(n.$slots, "header", {}, () => [
-                    i("h2", $, z(t.title), 1)
+              o("div", p, [
+                o("div", B, [
+                  d(i.$slots, "header", {}, () => [
+                    o("h2", S, k(t.title), 1)
                   ])
                 ]),
-                t.preventClose ? y("", !0) : (b(), g("button", {
+                t.preventClose ? s("", !0) : (n(), r("button", {
                   key: 0,
                   class: "tw-grid tw-content-center tw-justify-center tw-ml-auto tw-w-6 tw-h-6 tw--m-2 hover:tw-text-action-highlight",
-                  onClick: e[1] || (e[1] = k((r) => l.hide("close-x"), ["stop"]))
+                  onClick: e[1] || (e[1] = w((a) => l.hide("close-x"), ["stop"]))
                 }, [
-                  D(a, {
+                  y(m, {
                     class: "tw-w-3 tw-h-3",
                     icon: l.mdiClose
                   }, null, 8, ["icon"]),
-                  e[4] || (e[4] = i("span", { class: "tw-sr-only" }, "Close", -1))
+                  e[4] || (e[4] = o("span", { class: "tw-sr-only" }, "Close", -1))
                 ]))
               ]),
-              i("div", tt, [
-                p(n.$slots, "default")
+              o("div", L, [
+                d(i.$slots, "default")
               ], 512),
-              n.$slots.controls ? (b(), g("div", et, [
-                p(n.$slots, "controls")
-              ], 512)) : y("", !0)
-            ], 10, Y)
+              i.$slots.controls ? (n(), r("div", N, [
+                d(i.$slots, "controls")
+              ], 512)) : s("", !0)
+            ], 10, _)
           ], 2)
         ])
       ], 512), [
-        [I, t.visible]
+        [g, t.visible]
       ])
     ]),
     _: 3
   });
 }
-const ut = /* @__PURE__ */ W(X, [["render", lt]]);
+const M = /* @__PURE__ */ C(v, [["render", V]]);
 export {
-  ut as default
+  M as default
 };