@kiva/kv-components 7.6.2 → 8.0.0

package/dist/vue/KvLendCta.js

@@ -1,737 +1,357 @@
-import T from "graphql-tag";
-import { mdiChevronRight as N } from "@mdi/js";
-import { throttle as C } from "../utils/throttle.js";
-import { getLendCtaSelectedOption as L, getDropdownPriceArray as I } from "../utils/loanUtils.js";
-import R from "./KvLendAmountButton.js";
-import S from "./KvSelect.js";
-import F from "./KvButton.js";
-import V from "./KvMaterialIcon.js";
-import { resolveComponent as v, openBlock as o, createElementBlock as i, createBlock as a, withCtx as r, createTextVNode as f, toDisplayString as u, createElementVNode as h, createVNode as y, withModifiers as A, normalizeClass as w, Fragment as k, renderList as p, createCommentVNode as c } from "vue";
+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 a, withCtx as w, createTextVNode as f, toDisplayString as r, 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 W from "../_virtual/_plugin-vue_export-helper.js";
-const _ = "Other", E = 360, g = 480, x = 380, De = T`
-    fragment KvLendCta on LoanBasic {
-        id
-        name
-        status
-        minNoteSize
-    }
-`, ye = T`
-    fragment KvLendCtaUser on LoanBasic {
-        id
-        userProperties {
-            lentTo
-        }
-    }
-`, K = {
-  name: "KvLendCta",
-  components: {
-    KvLendAmountButton: R,
-    KvUiButton: F,
-    KvUiSelect: S,
-    KvMaterialIcon: V
-  },
-  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: g
-    },
-    /**
-     * 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: x
-    }
-  },
-  data() {
-    var n, s;
-    return {
-      mdiChevronRight: N,
-      defaultAmountOptions: [25, 50, 75],
-      selectedOption: L(
-        this.getCookie,
-        this.setCookie,
-        this.enableFiveDollarsNotes,
-        (s = (n = this.route) == null ? void 0 : n.query) == null ? void 0 : s.utm_campaign,
-        this.unreservedAmount,
-        this.userBalance,
-        this.fiveDollarsSelected
-      ),
-      selectedDropdownOption: _,
-      OTHER_OPTION: _,
-      // SSR-safe viewport width initialization
-      viewportWidth: typeof window < "u" ? window.innerWidth : 1024,
-      componentWidth: 1024,
-      resizeObserver: null,
-      MOBILE_DROPDOWN_BREAKPOINT: E,
-      NARROW_SIDEBAR_BREAKPOINT: g,
-      NARROW_SIDEBAR_DROPDOWN_BREAKPOINT: x
-    };
-  },
-  computed: {
-    readMorePath() {
-      return this.customLoanDetails ? "" : `/lend/${this.loanId}`;
-    },
-    loanId() {
-      var n;
-      return (n = this.loan) == null ? void 0 : n.id;
-    },
-    status() {
-      var n;
-      return ((n = this.loan) == null ? void 0 : n.status) ?? "";
-    },
-    minNoteSize() {
-      var n;
-      return ((n = this.loan) == null ? void 0 : n.minNoteSize) ?? "";
-    },
-    lentPreviously() {
-      var n, s;
-      return ((s = (n = this.loan) == null ? void 0 : n.userProperties) == null ? void 0 : s.lentTo) ?? !1;
-    },
-    isInBasket() {
-      var n;
-      return ((n = this.basketItems) == null ? void 0 : n.some((s) => s.__typename === "LoanReservation" && s.id === this.loanId)) ?? !1;
-    },
-    prices() {
-      const n = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), s = I(
-        this.unreservedAmount,
-        this.isCompleteLoanActive,
-        n,
-        this.enableFiveDollarsNotes,
-        this.isVisitor
-      );
-      return this.maxAmount ? s.filter((l) => parseFloat(l) <= parseFloat(this.maxAmount)) : s;
-    },
-    presetButtonsPrices() {
-      const n = this.prices.slice(0, 3);
-      return this.prices.length === 4 && n.push(this.prices[3]), n;
-    },
-    presetDropdownPrices() {
-      if (this.prices.length === 4)
-        return [];
-      const n = this.prices.slice(this.defaultAmountOptions.length);
-      return n.unshift(_), n;
-    },
-    loanName() {
-      var n;
-      return ((n = this.loan) == null ? void 0 : n.name) ?? "";
-    },
-    presetAmountCtaButtonText() {
-      var n;
-      return ((n = this.loan) == null ? void 0 : n.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 n = this.maxAmount ? this.maxAmount : this.unreservedAmount;
-      return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(n) || 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 !== _;
-    },
-    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(n, s) {
-      var l, D;
-      n !== s && s === "" && (this.selectedOption = L(
-        this.getCookie,
-        this.setCookie,
-        this.enableFiveDollarsNotes,
-        (D = (l = this.route) == null ? void 0 : l.query) == null ? void 0 : D.utm_campaign,
-        n,
-        this.userBalance,
-        this.fiveDollarsSelected,
-        this.showPresetAmounts
-      )), this.showPresetAmounts && (this.selectedOption = _);
-    }
-  },
-  mounted() {
-    const n = () => {
-      var s;
-      this.viewportWidth = window.innerWidth, this.componentWidth = ((s = this.$refs.root) == null ? void 0 : s.offsetWidth) || 1024;
-    };
-    typeof window < "u" && (this.viewportWidth = window.innerWidth, window.ResizeObserver && this.$nextTick(() => {
-      this.resizeObserver = new window.ResizeObserver(C(n, 50)), this.$refs.root && (this.resizeObserver.observe(this.$refs.root), n());
-    }));
-  },
-  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(n) {
-      return n < 25 && n > 0;
-    },
-    isAmountBetween25And50(n) {
-      return n <= 50 && n > 25;
-    },
-    isAmountBetween25And500(n) {
-      return n < 500 && n >= 25;
-    },
-    trackLendAmountSelection(n) {
-      this.showPresetAmounts && (this.selectedOption = null), this.kvTrackFunction(
-        this.kvTrackCategory,
-        "Modify lend amount",
-        n,
-        this.loanId,
-        this.loanId
-      );
-    },
-    clickDropdown() {
-      this.kvTrackFunction(
-        this.kvTrackCategory,
-        "click-Modify loan amount",
-        "open dialog",
-        this.loanId,
-        this.loanId
-      );
-    },
-    clickSecondaryButton(n) {
-      this.secondaryButtonHandler ? (n.preventDefault(), n.stopPropagation(), this.secondaryButtonHandler()) : this.handleCheckout();
-    },
-    clickPresetButton(n) {
-      this.kvTrackFunction(
-        this.kvTrackCategory,
-        "Modify lend amount",
-        n,
-        this.loanId,
-        this.loanId
-      ), this.selectedOption = n, this.selectedDropdownOption = _;
-    },
-    handleCheckout() {
-      this.kvTrackFunction(
-        this.kvTrackCategory,
-        "click-Continue-to-checkout",
-        "Continue to checkout",
-        this.loanId,
-        this.loanId
-      );
-    },
-    isNarrowComponent() {
-      return this.componentWidth < 430;
-    }
-  }
-}, M = {
+import y from "../_virtual/_plugin-vue_export-helper.js";
+const N = {
   ref: "root",
   class: "tw-whitespace-nowrap"
-}, U = {
+}, g = {
   key: 2,
   class: "tw-w-full tw-text-center tw-rounded tw-p-2",
   style: { background: "#f1f1f1" }
-}, z = { class: "tw-flex tw-items-center" }, H = ["disabled"], j = {
+}, T = { class: "tw-flex tw-items-center" }, V = ["disabled"], O = {
   key: 0,
   class: "md:tw-hidden tw-w-full"
-}, q = { class: "tw-flex tw-flex-col tw-gap-1 tw-w-full" }, G = { class: "tw-flex tw-gap-1 tw-w-full" }, J = ["value"], Q = { class: "tw-flex tw-gap-1" }, X = ["value"], Y = { 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" }, $ = {
+}, 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" }, S = ["value"], p = { 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" }, F = {
   key: 1,
   class: "tw-w-full"
-}, ee = { class: "tw-flex tw-flex-col tw-gap-1 tw-w-full" }, te = { class: "tw-flex tw-gap-1 tw-w-full" }, ne = ["value"], se = { class: "tw-flex tw-gap-1" }, oe = ["value"], le = { class: "tw-flex tw-items-center tw-h-full tw-w-full" }, de = { class: "tw-min-w-0 tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap" }, ie = ["value"], re = {
+}, U = { 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"
-}, ae = ["value"];
-function ue(n, s, l, D, d, e) {
-  const m = v("kv-ui-button"), P = v("kv-material-icon"), B = v("kv-ui-select"), O = v("kv-lend-amount-button");
-  return o(), i("div", M, [
-    e.isInBasket ? (o(), a(m, {
+}, Q = ["value"];
+function X(B, o, n, Y, d, e) {
+  const m = A("kv-ui-button"), v = A("kv-material-icon"), h = A("kv-ui-select"), L = A("kv-lend-amount-button");
+  return l(), s("div", N, [
+    e.isInBasket ? (l(), a(m, {
       key: 0,
       variant: "secondary",
       class: "tw-inline-flex tw-flex-1 tw-w-full",
       "data-testid": "bp-lend-cta-checkout-button",
-      to: l.externalLinks ? void 0 : "/basket",
-      href: l.externalLinks ? "/basket" : void 0,
-      onClick: s[0] || (s[0] = (t) => e.clickSecondaryButton(t))
+      to: n.externalLinks ? void 0 : "/basket",
+      href: n.externalLinks ? "/basket" : void 0,
+      onClick: o[0] || (o[0] = (t) => e.clickSecondaryButton(t))
     }, {
-      default: r(() => [
-        f(u(e.loanInBasketButtonText), 1)
+      default: w(() => [
+        f(r(e.loanInBasketButtonText), 1)
       ]),
       _: 1
-    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (o(), a(m, {
+    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (l(), a(m, {
       key: 1,
       class: "tw-inline-flex tw-flex-1"
     }, {
-      default: r(() => [
-        f(u(e.ctaButtonText), 1)
+      default: w(() => [
+        f(r(e.ctaButtonText), 1)
       ]),
       _: 1
-    })) : e.isFunded ? (o(), i("div", U, " This loan was just funded! 🎉 ")) : l.showViewLoan ? (o(), a(m, {
+    })) : e.isFunded ? (l(), s("div", g, " This loan was just funded! 🎉 ")) : n.showViewLoan ? (l(), a(m, {
       key: 3,
       state: `${e.allSharesReserved ? "disabled" : ""}`,
-      to: l.externalLinks ? void 0 : e.readMorePath,
-      href: l.externalLinks ? e.readMorePath : void 0,
+      to: n.externalLinks ? void 0 : e.readMorePath,
+      href: n.externalLinks ? e.readMorePath : void 0,
       class: "tw-mb-0",
-      onClick: s[1] || (s[1] = (t) => n.$emit("show-loan-details", t))
+      onClick: o[1] || (o[1] = (t) => B.$emit("show-loan-details", t))
     }, {
-      default: r(() => [
-        h("span", z, [
-          s[9] || (s[9] = f(" View loan ")),
-          y(P, {
+      default: w(() => [
+        c("span", T, [
+          o[9] || (o[9] = f(" View loan ")),
+          b(v, {
             class: "tw-w-3 tw-h-3",
             icon: d.mdiChevronRight
           }, null, 8, ["icon"])
         ])
       ]),
       _: 1
-    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (o(), i("form", {
+    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (l(), s("form", {
       key: 4,
       class: "tw-w-full tw-flex",
-      onSubmit: s[8] || (s[8] = A((...t) => e.addToBasket && e.addToBasket(...t), ["prevent"]))
+      onSubmit: o[8] || (o[8] = D((...t) => e.addToBasket && e.addToBasket(...t), ["prevent"]))
     }, [
-      h("fieldset", {
-        class: w(["tw-w-full tw-flex", {
-          "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": l.showPresetAmounts && !e.isNarrowDesktop,
-          "tw-flex-col tw-min-w-0": l.showPresetAmounts && e.isNarrowDesktop,
-          "tw-gap-1.5": l.showPresetAmounts && !e.isLendAmountButton && !l.isAdding && !e.isNarrowDesktop
+      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: l.isAdding,
+        disabled: n.isAdding,
         "data-testid": "bp-lend-cta-select-and-button"
       }, [
-        l.showPresetAmounts && !l.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && !e.isNarrowDesktop ? (o(), i("div", j, [
-          h("div", q, [
-            h("div", G, [
-              (o(!0), i(k, null, p(e.presetButtonsPrices, (t) => (o(), a(m, {
+        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(), a(m, {
                 key: t,
                 variant: "secondary",
-                class: w(["preset-option tw-flex-1 tw-min-w-0 tw-whitespace-nowrap", { "selected-option": d.selectedOption == t }]),
+                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: (b) => e.clickPresetButton(t)
+                onClick: (x) => e.clickPresetButton(t)
               }, {
-                default: r(() => [
-                  f(" $ " + u(t), 1)
+                default: w(() => [
+                  f(" $ " + r(t), 1)
                 ]),
                 _: 2
               }, 1032, ["class", "onClick"]))), 128)),
-              e.showFilteredDropdown && d.viewportWidth >= d.MOBILE_DROPDOWN_BREAKPOINT ? (o(), a(B, {
+              e.showFilteredDropdown && d.viewportWidth >= d.MOBILE_DROPDOWN_BREAKPOINT ? (l(), a(h, {
                 key: 0,
                 id: `LoanAmountDropdownMobile_${e.loanId}`,
                 modelValue: d.selectedDropdownOption,
                 "onUpdate:modelValue": [
-                  s[2] || (s[2] = (t) => d.selectedDropdownOption = t),
+                  o[2] || (o[2] = (t) => d.selectedDropdownOption = t),
                   e.trackLendAmountSelection
                 ],
-                class: w(["filtered-dropdown mobile-dropdown tw-rounded", {
+                class: u(["filtered-dropdown mobile-dropdown tw-rounded", {
                   "unselected-dropdown": !e.selectedDropdown,
                   "selected-dropdown": e.selectedDropdown
                 }]),
                 "aria-label": "Lend amount",
-                onClick: A(e.clickDropdown, ["stop"])
+                onClick: D(e.clickDropdown, ["stop"])
               }, {
-                default: r(() => [
-                  (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                default: w(() => [
+                  (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
                     key: t,
                     value: t
-                  }, u(t !== d.OTHER_OPTION ? `$${t}` : t), 9, J))), 128))
+                  }, r(t !== d.OTHER_OPTION ? `$${t}` : t), 9, I))), 128))
                 ]),
                 _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0)
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : i("", !0)
             ]),
-            h("div", Q, [
-              e.showFilteredDropdown && d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? (o(), a(B, {
+            c("div", E, [
+              e.showFilteredDropdown && d.viewportWidth < d.MOBILE_DROPDOWN_BREAKPOINT ? (l(), a(h, {
                 key: 0,
                 id: `LoanAmountDropdownMobile_Small_${e.loanId}`,
                 modelValue: d.selectedDropdownOption,
                 "onUpdate:modelValue": [
-                  s[3] || (s[3] = (t) => d.selectedDropdownOption = t),
+                  o[3] || (o[3] = (t) => d.selectedDropdownOption = t),
                   e.trackLendAmountSelection
                 ],
-                class: w(["filtered-dropdown mobile-dropdown-small tw-rounded tw-w-2/5", {
+                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: A(e.clickDropdown, ["stop"])
+                onClick: D(e.clickDropdown, ["stop"])
               }, {
-                default: r(() => [
-                  (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                default: w(() => [
+                  (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
                     key: "small-" + t,
                     value: t
-                  }, u(t !== d.OTHER_OPTION ? `$${t}` : t), 9, X))), 128))
+                  }, r(t !== d.OTHER_OPTION ? `$${t}` : t), 9, S))), 128))
                 ]),
                 _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0),
-              y(m, {
-                class: w(["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"]),
+              }, 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: r(() => [
-                  h("span", Y, [
-                    h("span", Z, u(e.ctaButtonText), 1)
+                default: w(() => [
+                  c("span", p, [
+                    c("span", W, r(e.ctaButtonText), 1)
                   ])
                 ]),
                 _: 1
               }, 8, ["class"])
             ])
           ])
-        ])) : c("", !0),
-        l.showPresetAmounts && !l.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && e.isNarrowDesktop ? (o(), i("div", $, [
-          h("div", ee, [
-            h("div", te, [
-              (o(!0), i(k, null, p(e.presetButtonsPrices, (t) => (o(), a(m, {
+        ])) : i("", !0),
+        n.showPresetAmounts && !n.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && e.isNarrowDesktop ? (l(), s("div", F, [
+          c("div", U, [
+            c("div", M, [
+              (l(!0), s(k, null, _(e.presetButtonsPrices, (t) => (l(), a(m, {
                 key: t,
                 variant: "secondary",
-                class: w(["preset-option tw-flex-1 tw-min-w-0 tw-whitespace-nowrap", { "selected-option": d.selectedOption == t }]),
+                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: (b) => e.clickPresetButton(t)
+                onClick: (x) => e.clickPresetButton(t)
               }, {
-                default: r(() => [
-                  f(" $ " + u(t), 1)
+                default: w(() => [
+                  f(" $ " + r(t), 1)
                 ]),
                 _: 2
               }, 1032, ["class", "onClick"]))), 128)),
-              e.showFilteredDropdown && d.componentWidth >= d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? (o(), a(B, {
+              e.showFilteredDropdown && d.componentWidth >= d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? (l(), a(h, {
                 key: 0,
                 id: `LoanAmountDropdownNarrowDesktop_${e.loanId}`,
                 modelValue: d.selectedDropdownOption,
                 "onUpdate:modelValue": [
-                  s[4] || (s[4] = (t) => d.selectedDropdownOption = t),
+                  o[4] || (o[4] = (t) => d.selectedDropdownOption = t),
                   e.trackLendAmountSelection
                 ],
-                class: w(["filtered-dropdown mobile-dropdown tw-flex-1 tw-rounded", {
+                class: u(["filtered-dropdown mobile-dropdown tw-flex-1 tw-rounded", {
                   "unselected-dropdown": !e.selectedDropdown,
                   "selected-dropdown": e.selectedDropdown
                 }]),
                 "aria-label": "Lend amount",
-                onClick: A(e.clickDropdown, ["stop"])
+                onClick: D(e.clickDropdown, ["stop"])
               }, {
-                default: r(() => [
-                  (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                default: w(() => [
+                  (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
                     key: t,
                     value: t
-                  }, u(t !== d.OTHER_OPTION ? `${t}` : t), 9, ne))), 128))
+                  }, r(t !== d.OTHER_OPTION ? `${t}` : t), 9, K))), 128))
                 ]),
                 _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0)
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : i("", !0)
             ]),
-            h("div", se, [
-              e.showFilteredDropdown && d.componentWidth < d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? (o(), a(B, {
+            c("div", H, [
+              e.showFilteredDropdown && d.componentWidth < d.NARROW_SIDEBAR_DROPDOWN_BREAKPOINT ? (l(), a(h, {
                 key: 0,
                 id: `LoanAmountDropdownNarrowDesktop_Small_${e.loanId}`,
                 modelValue: d.selectedDropdownOption,
                 "onUpdate:modelValue": [
-                  s[5] || (s[5] = (t) => d.selectedDropdownOption = t),
+                  o[5] || (o[5] = (t) => d.selectedDropdownOption = t),
                   e.trackLendAmountSelection
                 ],
-                class: w(["filtered-dropdown mobile-dropdown-small tw-rounded tw-w-2/5", {
+                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: A(e.clickDropdown, ["stop"])
+                onClick: D(e.clickDropdown, ["stop"])
               }, {
-                default: r(() => [
-                  (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+                default: w(() => [
+                  (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
                     key: "narrow-small-" + t,
                     value: t
-                  }, u(t !== d.OTHER_OPTION ? `${t}` : t), 9, oe))), 128))
+                  }, r(t !== d.OTHER_OPTION ? `${t}` : t), 9, j))), 128))
                 ]),
                 _: 1
-              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0),
-              y(m, {
-                class: w(["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"]),
+              }, 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: r(() => [
-                  h("span", le, [
-                    h("span", de, u(e.ctaButtonText), 1)
+                default: w(() => [
+                  c("span", G, [
+                    c("span", z, r(e.ctaButtonText), 1)
                   ])
                 ]),
                 _: 1
               }, 8, ["class"])
             ])
           ])
-        ])) : c("", !0),
-        l.showPresetAmounts && !l.isAdding && !e.isNarrowDesktop ? (o(), i("div", {
+        ])) : i("", !0),
+        n.showPresetAmounts && !n.isAdding && !e.isNarrowDesktop ? (l(), s("div", {
           key: 2,
-          class: w({
+          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 ? c("", !0) : (o(!0), i(k, { key: 0 }, p(e.presetButtonsPrices, (t) => (o(), a(m, {
+          e.isLendAmountButton ? i("", !0) : (l(!0), s(k, { key: 0 }, _(e.presetButtonsPrices, (t) => (l(), a(m, {
             key: t,
             variant: "secondary",
-            class: w(["tw-inline-flex tw-flex-1 preset-option tw-w-8 tw-whitespace-nowrap", { "selected-option": d.selectedOption == t }]),
+            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: (b) => e.clickPresetButton(t)
+            onClick: (x) => e.clickPresetButton(t)
           }, {
-            default: r(() => [
-              f(" $" + u(t), 1)
+            default: w(() => [
+              f(" $" + r(t), 1)
             ]),
             _: 2
           }, 1032, ["class", "onClick"]))), 128)),
-          e.showFilteredDropdown ? (o(), a(B, {
+          e.showFilteredDropdown ? (l(), a(h, {
             key: 1,
             id: `LoanAmountDropdown_${e.loanId}`,
             modelValue: d.selectedDropdownOption,
             "onUpdate:modelValue": [
-              s[6] || (s[6] = (t) => d.selectedDropdownOption = t),
+              o[6] || (o[6] = (t) => d.selectedDropdownOption = t),
               e.trackLendAmountSelection
             ],
-            class: w(["tw-min-w-12 tw-rounded filtered-dropdown", {
+            class: u(["tw-min-w-12 tw-rounded filtered-dropdown", {
               "unselected-dropdown": !e.selectedDropdown,
               "selected-dropdown": e.selectedDropdown
             }]),
             "aria-label": "Lend amount",
-            onClick: A(e.clickDropdown, ["stop"])
+            onClick: D(e.clickDropdown, ["stop"])
           }, {
-            default: r(() => [
-              (o(!0), i(k, null, p(e.presetDropdownPrices, (t) => (o(), i("option", {
+            default: w(() => [
+              (l(!0), s(k, null, _(e.presetDropdownPrices, (t) => (l(), s("option", {
                 key: t,
                 value: t
-              }, u(t !== d.OTHER_OPTION ? `$${t}` : t), 9, ie))), 128))
+              }, r(t !== d.OTHER_OPTION ? `$${t}` : t), 9, q))), 128))
             ]),
             _: 1
-          }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : c("", !0)
-        ], 2)) : l.showPresetAmounts ? c("", !0) : (o(), i("div", re, [
-          e.hideShowLendDropdown && !e.isLessThan25 ? (o(), a(B, {
+          }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : i("", !0)
+        ], 2)) : n.showPresetAmounts ? i("", !0) : (l(), s("div", J, [
+          e.hideShowLendDropdown && !e.isLessThan25 ? (l(), a(h, {
             key: 0,
             id: `LoanAmountDropdown_${e.loanId}`,
             modelValue: d.selectedOption,
             "onUpdate:modelValue": [
-              s[7] || (s[7] = (t) => d.selectedOption = t),
+              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: A(e.clickDropdown, ["stop"])
+            onClick: D(e.clickDropdown, ["stop"])
           }, {
-            default: r(() => [
-              (o(!0), i(k, null, p(e.prices, (t) => (o(), i("option", {
+            default: w(() => [
+              (l(!0), s(k, null, _(e.prices, (t) => (l(), s("option", {
                 key: t,
                 value: t
-              }, " $" + u(t), 9, ae))), 128))
+              }, " $" + r(t), 9, Q))), 128))
             ]),
             _: 1
-          }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : c("", !0)
+          }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : i("", !0)
         ])),
-        h("div", {
-          class: w({
-            "tw-min-w-0": l.showPresetAmounts && !e.isNarrowDesktop,
-            lendButtonWrapper: e.hideShowLendDropdown && !l.showPresetAmounts,
-            "tw-hidden": e.hideLendButton || l.showPresetAmounts && !l.isAdding && !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && (e.isNarrowComponent() || e.isNarrowDesktop),
-            "md:tw-block tw-hidden": !e.isLendAmountButton && e.presetButtonsPrices.length > 1 && l.showPresetAmounts && !e.isNarrowDesktop
+        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 ? (o(), a(m, {
+          e.lendButtonVisibility && !e.isLessThan25 ? (l(), a(m, {
             key: "lendButton",
-            class: w(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": l.showPresetAmounts }]),
+            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: r(() => [
-              f(u(e.ctaButtonText), 1)
+            default: w(() => [
+              f(r(e.ctaButtonText), 1)
             ]),
             _: 1
-          }, 8, ["class"])) : e.showLendAgain ? (o(), a(m, {
+          }, 8, ["class"])) : e.showLendAgain ? (l(), a(m, {
             key: "lendAgainButton",
-            class: w(["lend-again", { "tw-w-full": l.showPresetAmounts }]),
+            class: u(["lend-again", { "tw-w-full": n.showPresetAmounts }]),
             "data-testid": "bp-lend-cta-lend-again-button",
             type: "submit"
           }, {
-            default: r(() => [
-              f(u(l.primaryButtonText || "Lend") + " again ", 1)
+            default: w(() => [
+              f(r(n.primaryButtonText || "Lend") + " again ", 1)
             ]),
             _: 1
-          }, 8, ["class"])) : c("", !0)
+          }, 8, ["class"])) : i("", !0)
         ], 2),
-        e.isLendAmountButton && !l.enableFiveDollarsNotes ? (o(), a(O, {
+        e.isLendAmountButton && !n.enableFiveDollarsNotes ? (l(), a(L, {
           key: 4,
           class: "tw-w-full",
           "loan-id": e.loanId,
           "show-now": !1,
           "amount-left": e.amountForLendAmountButton,
-          "is-adding": l.isAdding,
+          "is-adding": n.isAdding,
           onAddToBasket: e.addToBasket
-        }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : c("", !0),
-        !l.isLoading && l.isAdding ? (o(), a(m, {
+        }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : i("", !0),
+        !n.isLoading && n.isAdding ? (l(), a(m, {
           key: 5,
           class: "tw-inline-flex tw-flex-1"
         }, {
-          default: r(() => s[10] || (s[10] = [
+          default: w(() => o[10] || (o[10] = [
             f(" Adding to basket ")
           ])),
           _: 1
-        })) : c("", !0)
-      ], 10, H)
-    ], 32)) : c("", !0)
+        })) : i("", !0)
+      ], 10, V)
+    ], 32)) : i("", !0)
   ], 512);
 }
-const be = /* @__PURE__ */ W(K, [["render", ue], ["__scopeId", "data-v-ff20e42a"]]);
+const le = /* @__PURE__ */ y(P, [["render", X], ["__scopeId", "data-v-a90ed7f0"]]);
 export {
-  De as KV_LEND_CTA_FRAGMENT,
-  ye as KV_LEND_CTA_USER_FRAGMENT,
-  be as default
+  oe as KV_LEND_CTA_FRAGMENT,
+  se as KV_LEND_CTA_USER_FRAGMENT,
+  le as default
 };