@kiva/kv-components 10.4.1 → 10.5.1

package/dist/vue/KvLendCta.js

@@ -1,357 +1,391 @@
-import P from "./KvLendCta2.js";
-import { KV_LEND_CTA_FRAGMENT as oe, KV_LEND_CTA_USER_FRAGMENT as se } from "./KvLendCta2.js";
-import { resolveComponent as A, openBlock as l, createElementBlock as s, createBlock as r, withCtx as w, createTextVNode as f, toDisplayString as a, createElementVNode as c, createVNode as b, withModifiers as D, normalizeClass as u, Fragment as k, renderList as _, createCommentVNode as i } from "vue";
-import "./KvLendCta.css";
-import y from "../_virtual/_plugin-vue_export-helper.js";
-const N = {
-  ref: "root",
-  class: "tw-whitespace-nowrap"
-}, g = {
-  key: 2,
-  class: "tw-w-full tw-text-center tw-rounded tw-p-2",
-  style: { background: "#f1f1f1" }
-}, T = { class: "tw-flex tw-items-center" }, V = ["disabled"], O = {
-  key: 0,
-  class: "md:tw-hidden tw-w-full"
-}, R = { class: "tw-flex tw-flex-col tw-gap-1 tw-w-full" }, C = { class: "tw-flex tw-gap-1 tw-w-full" }, I = ["value"], E = { class: "tw-flex tw-gap-1" }, p = ["value"], S = { class: "tw-flex tw-items-center tw-h-full tw-w-full" }, W = { class: "tw-min-w-0 tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap" }, U = {
-  key: 1,
-  class: "tw-w-full"
-}, F = { class: "tw-flex tw-flex-col tw-gap-1 tw-w-full" }, M = { class: "tw-flex tw-gap-1 tw-w-full" }, K = ["value"], H = { class: "tw-flex tw-gap-1" }, j = ["value"], G = { class: "tw-flex tw-items-center tw-h-full tw-w-full" }, z = { class: "tw-min-w-0 tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap" }, q = ["value"], J = {
-  key: 3,
-  class: "amountDropdownWrapper"
-}, Q = ["value"];
-function X(v, o, n, Y, d, e) {
-  const m = A("kv-ui-button"), B = A("kv-material-icon"), h = A("kv-ui-select"), L = A("kv-lend-amount-button");
-  return l(), s("div", N, [
-    e.isInBasket ? (l(), r(m, {
-      key: 0,
-      variant: "secondary",
-      class: "tw-inline-flex tw-flex-1 tw-w-full tw-cursor-pointer",
-      "data-testid": "bp-lend-cta-checkout-button",
-      to: n.externalLinks ? void 0 : "/basket",
-      href: n.externalLinks ? "/basket" : void 0,
-      onClick: o[0] || (o[0] = (t) => e.clickSecondaryButton(t))
-    }, {
-      default: w(() => [
-        f(a(e.loanInBasketButtonText), 1)
-      ]),
-      _: 1
-    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (l(), r(m, {
-      key: 1,
-      class: "tw-inline-flex tw-flex-1"
-    }, {
-      default: w(() => [
-        f(a(e.ctaButtonText), 1)
-      ]),
-      _: 1
-    })) : e.isFunded ? (l(), s("div", g, " This loan was just funded! 🎉 ")) : n.showViewLoan ? (l(), r(m, {
-      key: 3,
-      state: `${e.allSharesReserved ? "disabled" : ""}`,
-      to: n.externalLinks ? void 0 : e.readMorePath,
-      href: n.externalLinks ? e.readMorePath : void 0,
-      class: "tw-mb-0 tw-cursor-pointer",
-      onClick: o[1] || (o[1] = (t) => v.$emit("show-loan-details", t))
-    }, {
-      default: w(() => [
-        c("span", T, [
-          o[9] || (o[9] = f(" View loan ")),
-          b(B, {
-            class: "tw-w-3 tw-h-3",
-            icon: d.mdiChevronRight
-          }, null, 8, ["icon"])
-        ])
-      ]),
-      _: 1
-    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (l(), s("form", {
-      key: 4,
-      class: "tw-w-full tw-flex",
-      onSubmit: o[8] || (o[8] = D((...t) => e.addToBasket && e.addToBasket(...t), ["prevent"]))
-    }, [
-      c("fieldset", {
-        class: u(["tw-w-full tw-flex", {
-          "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": n.showPresetAmounts && !e.isNarrowDesktop,
-          "tw-flex-col tw-min-w-0": n.showPresetAmounts && e.isNarrowDesktop,
-          "tw-gap-1.5": n.showPresetAmounts && !e.isLendAmountButton && !n.isAdding && !e.isNarrowDesktop
-        }]),
-        disabled: n.isAdding,
-        "data-testid": "bp-lend-cta-select-and-button"
-      }, [
-        n.showPresetAmounts && !n.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && !e.isNarrowDesktop ? (l(), s("div", O, [
-          c("div", R, [
-            c("div", C, [
-              (l(!0), s(k, null, _(e.presetButtonsPrices, (t) => (l(), r(m, {
-                key: t,
-                variant: "secondary",
-                class: u(["preset-option tw-flex-1 tw-min-w-0 tw-whitespace-nowrap", { "selected-option": d.selectedOption == t }]),
-                "data-testid": "bp-lend-cta-lend-button-mobile",
-                onClick: (x) => e.clickPresetButton(t)
-              }, {
-                default: w(() => [
-                  f(" $ " + a(t), 1)
-                ]),
-                _: 2
-              }, 1032, ["class", "onClick"]))), 128)),
-              e.showFilteredDropdown && d.viewportWidth >= d.MOBILE_DROPDOWN_BREAKPOINT ? (l(), r(h, {
-                key: 0,
-                id: `LoanAmountDropdownMobile_${e.loanId}`,
-                modelValue: d.selectedDropdownOption,
-                "onUpdate:modelValue": [
-                  o[2] || (o[2] = (t) => d.selectedDropdownOption = t),
-                  e.trackLendAmountSelection
-                ],
-                class: u(["filtered-dropdown mobile-dropdown tw-rounded", {
-                  "unselected-dropdown": !e.selectedDropdown,
-                  "selected-dropdown": e.selectedDropdown
-                }]),
-                "aria-label": "Lend amount",
-                onClick: D(e.clickDropdown, ["stop"])
-              }, {
-                default: w(() => [
-                  (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
-                    key: t,
-                    value: t
-                  }, a(t !== d.OTHER_OPTION ? `$${t}` : t), 9, I))), 128))
-                ]),
-                _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : i("", !0)
-            ]),
-            c("div", E, [
-              e.showFilteredDropdown && d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? (l(), r(h, {
-                key: 0,
-                id: `LoanAmountDropdownMobile_Small_${e.loanId}`,
-                modelValue: d.selectedDropdownOption,
-                "onUpdate:modelValue": [
-                  o[3] || (o[3] = (t) => d.selectedDropdownOption = t),
-                  e.trackLendAmountSelection
-                ],
-                class: u(["filtered-dropdown mobile-dropdown-small tw-rounded tw-w-2/5", {
-                  "unselected-dropdown": !e.selectedDropdown,
-                  "selected-dropdown": e.selectedDropdown
-                }]),
-                "aria-label": "Lend amount",
-                onClick: D(e.clickDropdown, ["stop"])
-              }, {
-                default: w(() => [
-                  (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
-                    key: "small-" + t,
-                    value: t
-                  }, a(t !== d.OTHER_OPTION ? `$${t}` : t), 9, p))), 128))
-                ]),
-                _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : i("", !0),
-              b(m, {
-                class: u(["tw-inline-flex tw-flex-1 button-ellipsis tw-min-w-0", d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? "tw-w-3/5" : "tw-w-full"]),
-                "data-testid": "bp-lend-cta-mobile-lend-button",
-                type: "submit"
-              }, {
-                default: w(() => [
-                  c("span", S, [
-                    c("span", W, a(e.ctaButtonText), 1)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["class"])
-            ])
-          ])
-        ])) : i("", !0),
-        n.showPresetAmounts && !n.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && e.isNarrowDesktop ? (l(), s("div", U, [
-          c("div", F, [
-            c("div", M, [
-              (l(!0), s(k, null, _(e.presetButtonsPrices, (t) => (l(), r(m, {
-                key: t,
-                variant: "secondary",
-                class: u(["preset-option tw-flex-1 tw-min-w-0 tw-whitespace-nowrap", { "selected-option": d.selectedOption == t }]),
-                "data-testid": "bp-lend-cta-lend-button-narrow-desktop",
-                onClick: (x) => e.clickPresetButton(t)
-              }, {
-                default: w(() => [
-                  f(" $ " + a(t), 1)
-                ]),
-                _: 2
-              }, 1032, ["class", "onClick"]))), 128)),
-              e.showFilteredDropdown && d.componentWidth >= d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? (l(), r(h, {
-                key: 0,
-                id: `LoanAmountDropdownNarrowDesktop_${e.loanId}`,
-                modelValue: d.selectedDropdownOption,
-                "onUpdate:modelValue": [
-                  o[4] || (o[4] = (t) => d.selectedDropdownOption = t),
-                  e.trackLendAmountSelection
-                ],
-                class: u(["filtered-dropdown mobile-dropdown tw-flex-1 tw-rounded", {
-                  "unselected-dropdown": !e.selectedDropdown,
-                  "selected-dropdown": e.selectedDropdown
-                }]),
-                "aria-label": "Lend amount",
-                onClick: D(e.clickDropdown, ["stop"])
-              }, {
-                default: w(() => [
-                  (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
-                    key: t,
-                    value: t
-                  }, a(t !== d.OTHER_OPTION ? `${t}` : t), 9, K))), 128))
-                ]),
-                _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : i("", !0)
-            ]),
-            c("div", H, [
-              e.showFilteredDropdown && d.componentWidth < d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? (l(), r(h, {
-                key: 0,
-                id: `LoanAmountDropdownNarrowDesktop_Small_${e.loanId}`,
-                modelValue: d.selectedDropdownOption,
-                "onUpdate:modelValue": [
-                  o[5] || (o[5] = (t) => d.selectedDropdownOption = t),
-                  e.trackLendAmountSelection
-                ],
-                class: u(["filtered-dropdown mobile-dropdown-small tw-rounded tw-w-2/5", {
-                  "unselected-dropdown": !e.selectedDropdown,
-                  "selected-dropdown": e.selectedDropdown
-                }]),
-                "aria-label": "Lend amount",
-                onClick: D(e.clickDropdown, ["stop"])
-              }, {
-                default: w(() => [
-                  (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
-                    key: "narrow-small-" + t,
-                    value: t
-                  }, a(t !== d.OTHER_OPTION ? `${t}` : t), 9, j))), 128))
-                ]),
-                _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : i("", !0),
-              b(m, {
-                class: u(["tw-inline-flex tw-flex-1 button-ellipsis tw-min-w-0", d.componentWidth < d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? "tw-w-3/5" : "tw-w-full"]),
-                "data-testid": "bp-lend-cta-narrow-desktop-lend-button",
-                type: "submit"
-              }, {
-                default: w(() => [
-                  c("span", G, [
-                    c("span", z, a(e.ctaButtonText), 1)
-                  ])
-                ]),
-                _: 1
-              }, 8, ["class"])
-            ])
-          ])
-        ])) : i("", !0),
-        n.showPresetAmounts && !n.isAdding && !e.isNarrowDesktop ? (l(), s("div", {
-          key: 2,
-          class: u({
-            "tw-flex tw-gap-0.5 md:tw-gap-1 lg:tw-gap-1 tw-flex-wrap md:tw-flex-nowrap": !0,
-            "tw-hidden md:tw-flex": !e.isLendAmountButton && e.presetButtonsPrices.length > 1
-          })
-        }, [
-          e.isLendAmountButton ? i("", !0) : (l(!0), s(k, { key: 0 }, _(e.presetButtonsPrices, (t) => (l(), r(m, {
-            key: t,
-            variant: "secondary",
-            class: u(["tw-inline-flex tw-flex-1 preset-option tw-w-8 tw-whitespace-nowrap", { "selected-option": d.selectedOption == t }]),
-            "data-testid": "bp-lend-cta-lend-button",
-            onClick: (x) => e.clickPresetButton(t)
-          }, {
-            default: w(() => [
-              f(" $" + a(t), 1)
-            ]),
-            _: 2
-          }, 1032, ["class", "onClick"]))), 128)),
-          e.showFilteredDropdown ? (l(), r(h, {
-            key: 1,
-            id: `LoanAmountDropdown_${e.loanId}`,
-            modelValue: d.selectedDropdownOption,
-            "onUpdate:modelValue": [
-              o[6] || (o[6] = (t) => d.selectedDropdownOption = t),
-              e.trackLendAmountSelection
-            ],
-            class: u(["tw-min-w-12 tw-rounded filtered-dropdown", {
-              "unselected-dropdown": !e.selectedDropdown,
-              "selected-dropdown": e.selectedDropdown
-            }]),
-            "aria-label": "Lend amount",
-            onClick: D(e.clickDropdown, ["stop"])
-          }, {
-            default: w(() => [
-              (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
-                key: t,
-                value: t
-              }, a(t !== d.OTHER_OPTION ? `$${t}` : t), 9, q))), 128))
-            ]),
-            _: 1
-          }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : i("", !0)
-        ], 2)) : n.showPresetAmounts ? i("", !0) : (l(), s("div", J, [
-          e.hideShowLendDropdown && !e.isLessThan25 ? (l(), r(h, {
-            key: 0,
-            id: `LoanAmountDropdown_${e.loanId}`,
-            modelValue: d.selectedOption,
-            "onUpdate:modelValue": [
-              o[7] || (o[7] = (t) => d.selectedOption = t),
-              e.trackLendAmountSelection
-            ],
-            class: "tw-min-w-12",
-            style: { "border-radius": "14px 0 0 14px" },
-            "aria-label": "Lend amount",
-            onClick: D(e.clickDropdown, ["stop"])
-          }, {
-            default: w(() => [
-              (l(!0), s(k, null, _(e.prices, (t) => (l(), s("option", {
-                key: t,
-                value: t
-              }, " $" + a(t), 9, Q))), 128))
-            ]),
-            _: 1
-          }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : i("", !0)
-        ])),
-        c("div", {
-          class: u({
-            "tw-min-w-0": n.showPresetAmounts && !e.isNarrowDesktop,
-            lendButtonWrapper: e.hideShowLendDropdown && !n.showPresetAmounts,
-            "tw-hidden": e.hideLendButton || n.showPresetAmounts && !n.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && (e.isNarrowComponent() || e.isNarrowDesktop),
-            "md:tw-block tw-hidden": !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && n.showPresetAmounts && !e.isNarrowDesktop
-          })
-        }, [
-          e.lendButtonVisibility && !e.isLessThan25 ? (l(), r(m, {
-            key: "lendButton",
-            class: u(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": n.showPresetAmounts }]),
-            "data-testid": "bp-lend-cta-lend-button",
-            type: "submit"
-          }, {
-            default: w(() => [
-              f(a(e.ctaButtonText), 1)
-            ]),
-            _: 1
-          }, 8, ["class"])) : e.showLendAgain ? (l(), r(m, {
-            key: "lendAgainButton",
-            class: u(["lend-again", { "tw-w-full": n.showPresetAmounts }]),
-            "data-testid": "bp-lend-cta-lend-again-button",
-            type: "submit"
-          }, {
-            default: w(() => [
-              f(a(n.primaryButtonText || "Lend") + " again ", 1)
-            ]),
-            _: 1
-          }, 8, ["class"])) : i("", !0)
-        ], 2),
-        e.isLendAmountButton && !n.enableFiveDollarsNotes ? (l(), r(L, {
-          key: 4,
-          class: "tw-w-full",
-          "loan-id": e.loanId,
-          "show-now": !1,
-          "amount-left": e.amountForLendAmountButton,
-          "is-adding": n.isAdding,
-          onAddToBasket: e.addToBasket
-        }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : i("", !0),
-        !n.isLoading && n.isAdding ? (l(), r(m, {
-          key: 5,
-          class: "tw-inline-flex tw-flex-1"
-        }, {
-          default: w(() => o[10] || (o[10] = [
-            f(" Adding to basket ")
-          ])),
-          _: 1
-        })) : i("", !0)
-      ], 10, V)
-    ], 32)) : i("", !0)
-  ], 512);
-}
-const le = /* @__PURE__ */ y(P, [["render", X], ["__scopeId", "data-v-da60f69c"]]);
+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 {
-  oe as KV_LEND_CTA_FRAGMENT,
-  se as KV_LEND_CTA_USER_FRAGMENT,
-  le as default
+  O as KV_LEND_CTA_FRAGMENT,
+  b as KV_LEND_CTA_USER_FRAGMENT,
+  D as default
 };