@kiva/kv-components 6.49.0 → 6.49.2

package/dist/vue/KvLendCta.css

@@ -1 +1 @@
-.amountDropdownWrapper[data-v-b607e1c2] select{border-radius:14px 0 0 14px}.lend-again[data-v-b607e1c2] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-b607e1c2] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-b607e1c2] select{cursor:pointer;border-radius:1rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-b607e1c2] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-b607e1c2] span.tw-w-full:first-child{border-width:2px;--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-b607e1c2] select,.selected-option[data-v-b607e1c2] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.button-ellipsis[data-v-b607e1c2] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.amountDropdownWrapper[data-v-ce2eaa1b] select{border-radius:14px 0 0 14px}.lend-again[data-v-ce2eaa1b] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-ce2eaa1b] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-ce2eaa1b] select{cursor:pointer;white-space:nowrap;border-radius:1rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-ce2eaa1b] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.preset-option[data-v-ce2eaa1b] span.tw-w-full:first-child{border-width:2px;--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-ce2eaa1b] select,.selected-option[data-v-ce2eaa1b] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgba(var(--border-action),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--bg-secondary),var(--tw-bg-opacity, 1))}.button-ellipsis[data-v-ce2eaa1b] span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 325px){[data-testid=bp-lend-cta-select-and-button-mobile]>div.tw-flex[data-v-ce2eaa1b]{flex-wrap:wrap}.mobile-other-dd[data-v-ce2eaa1b]{flex:0 0 100px!important;min-width:100px!important;max-width:100px!important;width:100px!important}.button-ellipsis[data-v-ce2eaa1b]{flex:1 1 0%;min-width:0}}

package/dist/vue/KvLendCta.js

@@ -1,34 +1,35 @@
-import T from "graphql-tag";
-import { mdiChevronRight as _ } from "@mdi/js";
-import { getLendCtaSelectedOption as g, getDropdownPriceArray as C } from "../utils/loanUtils.js";
-import D from "./KvLendAmountButton.js";
-import P from "./KvSelect.js";
-import F from "./KvButton.js";
-import S from "./KvMaterialIcon.js";
-import { resolveComponent as k, openBlock as i, createElementBlock as a, createBlock as r, withCtx as d, createTextVNode as c, toDisplayString as m, createElementVNode as p, createVNode as I, withModifiers as y, normalizeClass as f, Fragment as B, renderList as v, createCommentVNode as l } from "vue";
+import _ from "graphql-tag";
+import { mdiChevronRight as D } from "@mdi/js";
+import { throttle as C } from "../utils/throttle.js";
+import { getLendCtaSelectedOption as g, getDropdownPriceArray as P } from "../utils/loanUtils.js";
+import F from "./KvLendAmountButton.js";
+import S from "./KvSelect.js";
+import I from "./KvButton.js";
+import V from "./KvMaterialIcon.js";
+import { resolveComponent as b, openBlock as o, createElementBlock as d, createBlock as l, withCtx as u, createTextVNode as w, toDisplayString as h, createElementVNode as f, createVNode as N, withModifiers as v, Fragment as k, renderList as y, normalizeClass as m, createCommentVNode as r } from "vue";
 import "./KvLendCta.css";
-import N from "../_virtual/_plugin-vue_export-helper.js";
-const w = "Other", nt = T`
-	fragment KvLendCta on LoanBasic {
-		id
-		name
-		status
-		minNoteSize
-	}
-`, st = T`
-	fragment KvLendCtaUser on LoanBasic {
-		id
-		userProperties {
-			lentTo
-		}
-	}
-`, O = {
+import O from "../_virtual/_plugin-vue_export-helper.js";
+const A = "Other", ce = _`
+    fragment KvLendCta on LoanBasic {
+        id
+        name
+        status
+        minNoteSize
+    }
+`, we = _`
+    fragment KvLendCtaUser on LoanBasic {
+        id
+        userProperties {
+            lentTo
+        }
+    }
+`, M = {
   name: "KvLendCta",
   components: {
-    KvLendAmountButton: D,
-    KvUiButton: F,
-    KvUiSelect: P,
-    KvMaterialIcon: S
+    KvLendAmountButton: F,
+    KvUiButton: I,
+    KvUiSelect: S,
+    KvMaterialIcon: V
   },
   props: {
     loan: {
@@ -108,9 +109,9 @@ const w = "Other", nt = T`
       default: void 0
     },
     /**
-     * Hide preset buttons under this amount when
-     * showPresetAmounts is true
-     * */
+           * Hide preset buttons under this amount when
+           * showPresetAmounts is true
+           * */
     maxAmount: {
       type: String,
       default: ""
@@ -125,21 +126,24 @@ const w = "Other", nt = T`
     }
   },
   data() {
-    var t, n;
+    var t, s;
     return {
-      mdiChevronRight: _,
+      mdiChevronRight: D,
       defaultAmountOptions: [25, 50, 75],
       selectedOption: g(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (n = (t = this.route) == null ? void 0 : t.query) == null ? void 0 : n.utm_campaign,
+        (s = (t = this.route) == null ? void 0 : t.query) == null ? void 0 : s.utm_campaign,
         this.unreservedAmount,
         this.userBalance,
         this.fiveDollarsSelected
       ),
-      selectedDropdownOption: w,
-      OTHER_OPTION: w
+      selectedDropdownOption: A,
+      OTHER_OPTION: A,
+      // SSR-safe viewport width initialization
+      viewportWidth: typeof window < "u" ? window.innerWidth : 1024,
+      resizeHandler: void 0
     };
   },
   computed: {
@@ -159,22 +163,22 @@ const w = "Other", nt = T`
       return ((t = this.loan) == null ? void 0 : t.minNoteSize) ?? "";
     },
     lentPreviously() {
-      var t, n;
-      return ((n = (t = this.loan) == null ? void 0 : t.userProperties) == null ? void 0 : n.lentTo) ?? !1;
+      var t, s;
+      return ((s = (t = this.loan) == null ? void 0 : t.userProperties) == null ? void 0 : s.lentTo) ?? !1;
     },
     isInBasket() {
       var t;
-      return ((t = this.basketItems) == null ? void 0 : t.some((n) => n.__typename === "LoanReservation" && n.id === this.loanId)) ?? !1;
+      return ((t = this.basketItems) == null ? void 0 : t.some((s) => s.__typename === "LoanReservation" && s.id === this.loanId)) ?? !1;
     },
     prices() {
-      const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), n = C(
+      const t = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25), s = P(
         this.unreservedAmount,
         this.isCompleteLoanActive,
         t,
         this.enableFiveDollarsNotes,
         this.isVisitor
       );
-      return this.maxAmount ? n.filter((s) => parseFloat(s) <= parseFloat(this.maxAmount)) : n;
+      return this.maxAmount ? s.filter((i) => parseFloat(i) <= parseFloat(this.maxAmount)) : s;
     },
     presetButtonsPrices() {
       const t = this.prices.slice(0, 3);
@@ -184,7 +188,7 @@ const w = "Other", nt = T`
       if (this.prices.length === 4)
         return [];
       const t = this.prices.slice(this.defaultAmountOptions.length);
-      return t.unshift(w), t;
+      return t.unshift(A), t;
     },
     loanName() {
       var t;
@@ -254,7 +258,7 @@ const w = "Other", nt = T`
       return this.isLentTo && !this.isLessThan25;
     },
     selectedDropdown() {
-      return this.selectedDropdownOption !== w;
+      return this.selectedDropdownOption !== A;
     },
     showFilteredDropdown() {
       return this.presetDropdownPrices.length > 1;
@@ -264,20 +268,28 @@ const w = "Other", nt = T`
     }
   },
   watch: {
-    unreservedAmount(t, n) {
-      var s, A;
-      t !== n && n === "" && (this.selectedOption = g(
+    unreservedAmount(t, s) {
+      var i, p;
+      t !== s && s === "" && (this.selectedOption = g(
         this.getCookie,
         this.setCookie,
         this.enableFiveDollarsNotes,
-        (A = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : A.utm_campaign,
+        (p = (i = this.route) == null ? void 0 : i.query) == null ? void 0 : p.utm_campaign,
         t,
         this.userBalance,
         this.fiveDollarsSelected,
         this.showPresetAmounts
-      )), this.showPresetAmounts && (this.selectedOption = w);
+      )), this.showPresetAmounts && (this.selectedOption = A);
     }
   },
+  mounted() {
+    typeof window < "u" && (this.viewportWidth = window.innerWidth, this.resizeHandler = C(() => {
+      this.viewportWidth = window.innerWidth;
+    }, 50), window.addEventListener("resize", this.resizeHandler));
+  },
+  beforeDestroy() {
+    this.resizeHandler && typeof window < "u" && window.removeEventListener("resize", this.resizeHandler);
+  },
   methods: {
     async addToBasket() {
       this.kvTrackFunction(
@@ -325,7 +337,7 @@ const w = "Other", nt = T`
         t,
         this.loanId,
         this.loanId
-      ), this.selectedOption = t, this.selectedDropdownOption = w;
+      ), this.selectedOption = t, this.selectedDropdownOption = A;
     },
     handleCheckout() {
       this.kvTrackFunction(
@@ -337,185 +349,307 @@ const w = "Other", nt = T`
       );
     }
   }
-}, V = { class: "tw-whitespace-nowrap" }, K = {
+}, E = { class: "tw-whitespace-nowrap" }, R = {
   key: 2,
   class: "tw-w-full tw-text-center tw-rounded tw-p-2",
   style: { background: "#f1f1f1" }
-}, M = { class: "tw-flex" }, R = ["disabled"], E = {
+}, U = { class: "tw-flex" }, z = { class: "md:tw-hidden tw-w-full" }, H = ["disabled"], K = { class: "tw-flex tw-gap-1 lg:tw-gap-2" }, W = ["value"], j = {
+  key: 0,
+  class: "tw-flex tw-gap-1 tw-mt-1"
+}, q = ["value"], G = {
+  key: 1,
+  class: "tw-mt-1 mobile-cta-row"
+}, J = { class: "tw-hidden md:tw-block tw-w-full" }, Q = ["disabled"], X = {
   key: 0,
   class: "tw-flex tw-gap-1 lg:tw-gap-2 tw-flex-wrap md:tw-flex-nowrap"
-}, U = ["value"], z = {
+}, Y = ["value"], Z = {
   key: 1,
   class: "amountDropdownWrapper"
-}, H = ["value"];
-function j(t, n, s, A, u, e) {
-  const h = k("kv-ui-button"), x = k("kv-material-icon"), L = k("kv-ui-select"), b = k("kv-lend-amount-button");
-  return i(), a("div", V, [
-    e.isInBasket ? (i(), r(h, {
+}, $ = ["value"];
+function ee(t, s, i, p, a, e) {
+  const c = b("kv-ui-button"), x = b("kv-material-icon"), B = b("kv-ui-select"), L = b("kv-lend-amount-button");
+  return o(), d("div", E, [
+    e.isInBasket ? (o(), l(c, {
       key: 0,
       variant: "secondary",
       class: "tw-inline-flex tw-flex-1 tw-w-full",
       "data-testid": "bp-lend-cta-checkout-button",
-      to: s.externalLinks ? void 0 : "/basket",
-      href: s.externalLinks ? "/basket" : void 0,
-      onClick: n[0] || (n[0] = (o) => e.clickSecondaryButton(o))
+      to: i.externalLinks ? void 0 : "/basket",
+      href: i.externalLinks ? "/basket" : void 0,
+      onClick: s[0] || (s[0] = (n) => e.clickSecondaryButton(n))
     }, {
-      default: d(() => [
-        c(m(e.loanInBasketButtonText), 1)
+      default: u(() => [
+        w(h(e.loanInBasketButtonText), 1)
       ]),
       _: 1
-    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (i(), r(h, {
+    }, 8, ["to", "href"])) : e.showNonActionableLoanButton ? (o(), l(c, {
       key: 1,
       class: "tw-inline-flex tw-flex-1"
     }, {
-      default: d(() => [
-        c(m(e.ctaButtonText), 1)
+      default: u(() => [
+        w(h(e.ctaButtonText), 1)
       ]),
       _: 1
-    })) : e.isFunded ? (i(), a("div", K, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), r(h, {
+    })) : e.isFunded ? (o(), d("div", R, " This loan was just funded! 🎉 ")) : i.showViewLoan ? (o(), l(c, {
       key: 3,
       state: `${e.allSharesReserved ? "disabled" : ""}`,
-      to: s.externalLinks ? void 0 : e.readMorePath,
-      href: s.externalLinks ? e.readMorePath : void 0,
+      to: i.externalLinks ? void 0 : e.readMorePath,
+      href: i.externalLinks ? e.readMorePath : void 0,
       class: "tw-mb-0",
-      onClick: n[1] || (n[1] = (o) => t.$emit("show-loan-details", o))
+      onClick: s[1] || (s[1] = (n) => t.$emit("show-loan-details", n))
     }, {
-      default: d(() => [
-        p("span", M, [
-          n[5] || (n[5] = c(" View loan ")),
-          I(x, {
+      default: u(() => [
+        f("span", U, [
+          s[7] || (s[7] = w(" View loan ")),
+          N(x, {
             class: "tw-w-3 tw-h-3 tw-align-middle",
-            icon: u.mdiChevronRight
+            icon: a.mdiChevronRight
           }, null, 8, ["icon"])
         ])
       ]),
       _: 1
-    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (i(), a("form", {
+    }, 8, ["state", "to", "href"])) : e.useFormSubmit ? (o(), d("form", {
       key: 4,
       class: "tw-w-full tw-flex",
-      onSubmit: n[4] || (n[4] = y((...o) => e.addToBasket && e.addToBasket(...o), ["prevent"]))
+      onSubmit: s[6] || (s[6] = v((...n) => e.addToBasket && e.addToBasket(...n), ["prevent"]))
     }, [
-      p("fieldset", {
-        class: f(["tw-w-full tw-flex", {
-          "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": s.showPresetAmounts,
-          "tw-gap-1.5": s.showPresetAmounts && !e.isLendAmountButton
-        }]),
-        disabled: s.isAdding,
-        "data-testid": "bp-lend-cta-select-and-button"
-      }, [
-        s.showPresetAmounts && !s.isAdding ? (i(), a("div", E, [
-          e.isLendAmountButton ? l("", !0) : (i(!0), a(B, { key: 0 }, v(e.presetButtonsPrices, (o) => (i(), r(h, {
-            key: o,
-            variant: "secondary",
-            class: f(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": u.selectedOption == o }]),
-            "data-testid": "bp-lend-cta-lend-button",
-            onClick: (q) => e.clickPresetButton(o)
-          }, {
-            default: d(() => [
-              c(" $" + m(o), 1)
+      f("div", z, [
+        f("fieldset", {
+          class: "tw-w-full tw-min-w-0",
+          disabled: i.isAdding,
+          "data-testid": "bp-lend-cta-select-and-button-mobile"
+        }, [
+          i.isAdding ? r("", !0) : (o(), d(k, { key: 0 }, [
+            f("div", K, [
+              e.isLendAmountButton ? r("", !0) : (o(!0), d(k, { key: 0 }, y(e.presetButtonsPrices, (n) => (o(), l(c, {
+                key: "m-" + n,
+                variant: "secondary",
+                class: m(["preset-option tw-basis-0 tw-flex-1 tw-min-w-0", { "selected-option": a.selectedOption == n }]),
+                "data-testid": "bp-lend-cta-lend-button-mobile",
+                onClick: (T) => e.clickPresetButton(n)
+              }, {
+                default: u(() => [
+                  w(" $" + h(n), 1)
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]))), 128)),
+              e.showFilteredDropdown && a.viewportWidth > 325 ? (o(), l(B, {
+                key: 1,
+                id: `LoanAmountDropdownMobile_${e.loanId}`,
+                modelValue: a.selectedDropdownOption,
+                "onUpdate:modelValue": [
+                  s[2] || (s[2] = (n) => a.selectedDropdownOption = n),
+                  e.trackLendAmountSelection
+                ],
+                class: m(["filtered-dropdown tw-rounded tw-w-auto tw-flex-none mobile-other-dd tw-min-w-max", {
+                  "unselected-dropdown": !e.selectedDropdown,
+                  "selected-dropdown": e.selectedDropdown
+                }]),
+                "aria-label": "Lend amount",
+                onClick: v(e.clickDropdown, ["stop"])
+              }, {
+                default: u(() => [
+                  (o(!0), d(k, null, y(e.presetDropdownPrices, (n) => (o(), d("option", {
+                    key: "m-" + n,
+                    value: n
+                  }, h(n !== a.OTHER_OPTION ? `$${n}` : n), 9, W))), 128))
+                ]),
+                _: 1
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : r("", !0)
             ]),
-            _: 2
-          }, 1032, ["class", "onClick"]))), 128)),
-          e.showFilteredDropdown ? (i(), r(L, {
+            a.viewportWidth <= 325 ? (o(), d("div", j, [
+              e.showFilteredDropdown ? (o(), l(B, {
+                key: 0,
+                id: `LoanAmountDropdownMobile_${e.loanId}`,
+                modelValue: a.selectedDropdownOption,
+                "onUpdate:modelValue": [
+                  s[3] || (s[3] = (n) => a.selectedDropdownOption = n),
+                  e.trackLendAmountSelection
+                ],
+                class: m(["filtered-dropdown tw-rounded tw-w-auto tw-flex-none mobile-other-dd", {
+                  "unselected-dropdown": !e.selectedDropdown,
+                  "selected-dropdown": e.selectedDropdown
+                }]),
+                "aria-label": "Lend amount",
+                style: { "min-width": "90px", "max-width": "110px" },
+                onClick: v(e.clickDropdown, ["stop"])
+              }, {
+                default: u(() => [
+                  (o(!0), d(k, null, y(e.presetDropdownPrices, (n) => (o(), d("option", {
+                    key: "m-" + n,
+                    value: n
+                  }, h(n !== a.OTHER_OPTION ? `$${n}` : n), 9, q))), 128))
+                ]),
+                _: 1
+              }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : r("", !0),
+              e.lendButtonVisibility && !e.isLessThan25 && !e.hideLendButton ? (o(), l(c, {
+                key: "lendButtonMobile",
+                class: "button-ellipsis tw-flex-1",
+                "data-testid": "bp-lend-cta-lend-button-mobile",
+                type: "submit"
+              }, {
+                default: u(() => [
+                  w(h(e.ctaButtonText), 1)
+                ]),
+                _: 1
+              })) : r("", !0)
+            ])) : (o(), d("div", G, [
+              e.lendButtonVisibility && !e.isLessThan25 && !e.hideLendButton ? (o(), l(c, {
+                key: "lendButtonMobile",
+                class: "button-ellipsis tw-w-full",
+                "data-testid": "bp-lend-cta-lend-button-mobile",
+                type: "submit"
+              }, {
+                default: u(() => [
+                  w(h(e.ctaButtonText), 1)
+                ]),
+                _: 1
+              })) : r("", !0)
+            ]))
+          ], 64)),
+          !i.isLoading && i.isAdding ? (o(), l(c, {
             key: 1,
-            id: `LoanAmountDropdown_${e.loanId}`,
-            modelValue: u.selectedDropdownOption,
-            "onUpdate:modelValue": [
-              n[2] || (n[2] = (o) => u.selectedDropdownOption = o),
-              e.trackLendAmountSelection
-            ],
-            class: f(["tw-min-w-12 tw-rounded filtered-dropdown tw-w-full", {
-              "unselected-dropdown": !e.selectedDropdown,
-              "selected-dropdown": e.selectedDropdown
-            }]),
-            "aria-label": "Lend amount",
-            onClick: y(e.clickDropdown, ["stop"])
+            class: "tw-inline-flex tw-flex-1 tw-w-full"
           }, {
-            default: d(() => [
-              (i(!0), a(B, null, v(e.presetDropdownPrices, (o) => (i(), a("option", {
-                key: o,
-                value: o
-              }, m(o !== u.OTHER_OPTION ? `$${o}` : o), 9, U))), 128))
-            ]),
+            default: u(() => s[8] || (s[8] = [
+              w(" Adding to basket ")
+            ])),
             _: 1
-          }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : l("", !0)
-        ])) : s.showPresetAmounts ? l("", !0) : (i(), a("div", z, [
-          e.hideShowLendDropdown && !e.isLessThan25 ? (i(), r(L, {
-            key: 0,
-            id: `LoanAmountDropdown_${e.loanId}`,
-            modelValue: u.selectedOption,
-            "onUpdate:modelValue": [
-              n[3] || (n[3] = (o) => u.selectedOption = o),
-              e.trackLendAmountSelection
-            ],
-            class: "tw-min-w-12",
-            style: { "border-radius": "14px 0 0 14px" },
-            "aria-label": "Lend amount",
-            onClick: y(e.clickDropdown, ["stop"])
-          }, {
-            default: d(() => [
-              (i(!0), a(B, null, v(e.prices, (o) => (i(), a("option", {
-                key: o,
-                value: o
-              }, " $" + m(o), 9, H))), 128))
-            ]),
-            _: 1
-          }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : l("", !0)
-        ])),
-        p("div", {
-          class: f({
-            "tw-min-w-0": s.showPresetAmounts,
-            lendButtonWrapper: e.hideShowLendDropdown && !s.showPresetAmounts,
-            "tw-hidden": e.hideLendButton
-          })
+          })) : r("", !0),
+          e.isLendAmountButton && !i.enableFiveDollarsNotes ? (o(), l(L, {
+            key: 2,
+            class: "tw-w-full",
+            "loan-id": e.loanId,
+            "show-now": !1,
+            "amount-left": e.amountForLendAmountButton,
+            "is-adding": i.isAdding,
+            onAddToBasket: e.addToBasket
+          }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : r("", !0)
+        ], 8, H)
+      ]),
+      f("div", J, [
+        f("fieldset", {
+          class: m(["tw-w-full tw-flex", {
+            "tw-flex-col md:tw-flex-row md:tw-justify-between tw-min-w-0": i.showPresetAmounts,
+            "tw-gap-1.5": i.showPresetAmounts && !e.isLendAmountButton
+          }]),
+          disabled: i.isAdding,
+          "data-testid": "bp-lend-cta-select-and-button"
         }, [
-          e.lendButtonVisibility && !e.isLessThan25 ? (i(), r(h, {
-            key: "lendButton",
-            class: f(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": s.showPresetAmounts }]),
-            "data-testid": "bp-lend-cta-lend-button",
-            type: "submit"
-          }, {
-            default: d(() => [
-              c(m(e.ctaButtonText), 1)
-            ]),
-            _: 1
-          }, 8, ["class"])) : e.showLendAgain ? (i(), r(h, {
-            key: "lendAgainButton",
-            class: f(["lend-again", { "tw-w-full": s.showPresetAmounts }]),
-            "data-testid": "bp-lend-cta-lend-again-button",
-            type: "submit"
+          i.showPresetAmounts && !i.isAdding ? (o(), d("div", X, [
+            e.isLendAmountButton ? r("", !0) : (o(!0), d(k, { key: 0 }, y(e.presetButtonsPrices, (n) => (o(), l(c, {
+              key: n,
+              variant: "secondary",
+              class: m(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": a.selectedOption == n }]),
+              "data-testid": "bp-lend-cta-lend-button",
+              onClick: (T) => e.clickPresetButton(n)
+            }, {
+              default: u(() => [
+                w(" $" + h(n), 1)
+              ]),
+              _: 2
+            }, 1032, ["class", "onClick"]))), 128)),
+            e.showFilteredDropdown ? (o(), l(B, {
+              key: 1,
+              id: `LoanAmountDropdown_${e.loanId}`,
+              modelValue: a.selectedDropdownOption,
+              "onUpdate:modelValue": [
+                s[4] || (s[4] = (n) => a.selectedDropdownOption = n),
+                e.trackLendAmountSelection
+              ],
+              class: m(["tw-min-w-12 tw-rounded filtered-dropdown tw-w-full", {
+                "unselected-dropdown": !e.selectedDropdown,
+                "selected-dropdown": e.selectedDropdown
+              }]),
+              "aria-label": "Lend amount",
+              onClick: v(e.clickDropdown, ["stop"])
+            }, {
+              default: u(() => [
+                (o(!0), d(k, null, y(e.presetDropdownPrices, (n) => (o(), d("option", {
+                  key: n,
+                  value: n
+                }, h(n !== a.OTHER_OPTION ? `$${n}` : n), 9, Y))), 128))
+              ]),
+              _: 1
+            }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : r("", !0)
+          ])) : i.showPresetAmounts ? r("", !0) : (o(), d("div", Z, [
+            e.hideShowLendDropdown && !e.isLessThan25 ? (o(), l(B, {
+              key: 0,
+              id: `LoanAmountDropdown_${e.loanId}`,
+              modelValue: a.selectedOption,
+              "onUpdate:modelValue": [
+                s[5] || (s[5] = (n) => a.selectedOption = n),
+                e.trackLendAmountSelection
+              ],
+              class: "tw-min-w-12",
+              style: { "border-radius": "14px 0 0 14px" },
+              "aria-label": "Lend amount",
+              onClick: v(e.clickDropdown, ["stop"])
+            }, {
+              default: u(() => [
+                (o(!0), d(k, null, y(e.prices, (n) => (o(), d("option", {
+                  key: n,
+                  value: n
+                }, " $" + h(n), 9, $))), 128))
+              ]),
+              _: 1
+            }, 8, ["id", "modelValue", "onUpdate:modelValue", "onClick"])) : r("", !0)
+          ])),
+          f("div", {
+            class: m({
+              "tw-min-w-0": i.showPresetAmounts,
+              lendButtonWrapper: e.hideShowLendDropdown && !i.showPresetAmounts,
+              "tw-hidden": e.hideLendButton
+            })
+          }, [
+            e.lendButtonVisibility && !e.isLessThan25 ? (o(), l(c, {
+              key: "lendButton",
+              class: m(["tw-inline-flex tw-flex-1", { "button-ellipsis tw-w-full": i.showPresetAmounts }]),
+              "data-testid": "bp-lend-cta-lend-button",
+              type: "submit"
+            }, {
+              default: u(() => [
+                w(h(e.ctaButtonText), 1)
+              ]),
+              _: 1
+            }, 8, ["class"])) : e.showLendAgain ? (o(), l(c, {
+              key: "lendAgainButton",
+              class: m(["lend-again", { "tw-w-full": i.showPresetAmounts }]),
+              "data-testid": "bp-lend-cta-lend-again-button",
+              type: "submit"
+            }, {
+              default: u(() => [
+                w(h(i.primaryButtonText || "Lend") + " again ", 1)
+              ]),
+              _: 1
+            }, 8, ["class"])) : r("", !0)
+          ], 2),
+          e.isLendAmountButton && !i.enableFiveDollarsNotes ? (o(), l(L, {
+            key: 2,
+            class: "tw-w-full",
+            "loan-id": e.loanId,
+            "show-now": !1,
+            "amount-left": e.amountForLendAmountButton,
+            "is-adding": i.isAdding,
+            onAddToBasket: e.addToBasket
+          }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : r("", !0),
+          !i.isLoading && i.isAdding ? (o(), l(c, {
+            key: 3,
+            class: "tw-inline-flex tw-flex-1"
           }, {
-            default: d(() => [
-              c(m(s.primaryButtonText || "Lend") + " again ", 1)
-            ]),
+            default: u(() => s[9] || (s[9] = [
+              w(" Adding to basket ")
+            ])),
             _: 1
-          }, 8, ["class"])) : l("", !0)
-        ], 2),
-        e.isLendAmountButton && !s.enableFiveDollarsNotes ? (i(), r(b, {
-          key: 2,
-          class: "tw-w-full",
-          "loan-id": e.loanId,
-          "show-now": !1,
-          "amount-left": e.amountForLendAmountButton,
-          "is-adding": s.isAdding,
-          onAddToBasket: e.addToBasket
-        }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : l("", !0),
-        !s.isLoading && s.isAdding ? (i(), r(h, {
-          key: 3,
-          class: "tw-inline-flex tw-flex-1"
-        }, {
-          default: d(() => n[6] || (n[6] = [
-            c(" Adding to basket ")
-          ])),
-          _: 1
-        })) : l("", !0)
-      ], 10, R)
-    ], 32)) : l("", !0)
+          })) : r("", !0)
+        ], 10, Q)
+      ])
+    ], 32)) : r("", !0)
   ]);
 }
-const ot = /* @__PURE__ */ N(O, [["render", j], ["__scopeId", "data-v-b607e1c2"]]);
+const me = /* @__PURE__ */ O(M, [["render", ee], ["__scopeId", "data-v-ce2eaa1b"]]);
 export {
-  nt as KV_LEND_CTA_FRAGMENT,
-  st as KV_LEND_CTA_USER_FRAGMENT,
-  ot as default
+  ce as KV_LEND_CTA_FRAGMENT,
+  we as KV_LEND_CTA_USER_FRAGMENT,
+  me as default
 };