@kiva/kv-components 5.3.1 → 5.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- .amountDropdownWrapper[data-v-e8a71378] select{border-radius:14px 0 0 14px}.lend-again[data-v-e8a71378] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-e8a71378] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-e8a71378] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-e8a71378] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-e8a71378] select{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}.preset-option[data-v-e8a71378] 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-option[data-v-e8a71378] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}
1
+ .amountDropdownWrapper[data-v-f7e50991] select{border-radius:14px 0 0 14px}.lend-again[data-v-f7e50991] span{padding-left:0;padding-right:0;padding-left:.5rem;padding-right:.5rem}.lendButtonWrapper[data-v-f7e50991] span:first-child{border-radius:0 14px 14px 0}.filtered-dropdown[data-v-f7e50991] select{cursor:pointer;border-radius:.875rem;border-width:2px;font-weight:500}.unselected-dropdown[data-v-f7e50991] select{--tw-border-opacity: 1;border-color:rgb(158 158 158 / var(--tw-border-opacity, 1))}.selected-dropdown[data-v-f7e50991] select{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}.preset-option[data-v-f7e50991] 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-option[data-v-f7e50991] span.tw-w-full:first-child{--tw-border-opacity: 1;border-color:rgb(34 56 41 / var(--tw-border-opacity, 1))}
@@ -4,7 +4,7 @@ import C from "./KvLendAmountButton.js";
4
4
  import _ from "./KvSelect.js";
5
5
  import D from "./KvButton.js";
6
6
  import P from "./KvMaterialIcon.js";
7
- import { resolveComponent as w, openBlock as i, createElementBlock as a, createBlock as l, normalizeClass as d, withCtx as r, createTextVNode as c, toDisplayString as m, createElementVNode as y, createVNode as S, withModifiers as A, Fragment as v, renderList as p, createCommentVNode as u } from "vue";
7
+ import { resolveComponent as w, openBlock as i, createElementBlock as a, createBlock as l, normalizeClass as d, withCtx as r, createTextVNode as c, toDisplayString as m, createElementVNode as y, createVNode as S, withModifiers as p, Fragment as A, renderList as v, createCommentVNode as u } from "vue";
8
8
  import "./KvLendCta.css";
9
9
  import F from "../_virtual/_plugin-vue_export-helper.js";
10
10
  const I = {
@@ -102,7 +102,7 @@ const I = {
102
102
  }
103
103
  },
104
104
  data() {
105
- var e, s, n;
105
+ var e, n, s;
106
106
  return {
107
107
  mdiChevronRight: T,
108
108
  defaultAmountOptions: [25, 50, 75],
@@ -110,8 +110,8 @@ const I = {
110
110
  this.getCookie,
111
111
  this.setCookie,
112
112
  this.enableFiveDollarsNotes,
113
- (s = (e = this.route) == null ? void 0 : e.query) == null ? void 0 : s.utm_campaign,
114
- (n = this.loan) == null ? void 0 : n.unreservedAmount,
113
+ (n = (e = this.route) == null ? void 0 : e.query) == null ? void 0 : n.utm_campaign,
114
+ (s = this.loan) == null ? void 0 : s.unreservedAmount,
115
115
  this.userBalance,
116
116
  this.fiveDollarsSelected
117
117
  ),
@@ -139,12 +139,12 @@ const I = {
139
139
  return ((e = this.loan) == null ? void 0 : e.unreservedAmount) ?? "";
140
140
  },
141
141
  lentPreviously() {
142
- var e, s;
143
- return ((s = (e = this.loan) == null ? void 0 : e.userProperties) == null ? void 0 : s.lentTo) ?? !1;
142
+ var e, n;
143
+ return ((n = (e = this.loan) == null ? void 0 : e.userProperties) == null ? void 0 : n.lentTo) ?? !1;
144
144
  },
145
145
  isInBasket() {
146
146
  var e;
147
- return ((e = this.basketItems) == null ? void 0 : e.some((s) => s.__typename === "LoanReservation" && s.id === this.loanId)) ?? !1;
147
+ return ((e = this.basketItems) == null ? void 0 : e.some((n) => n.__typename === "LoanReservation" && n.id === this.loanId)) ?? !1;
148
148
  },
149
149
  prices() {
150
150
  const e = parseFloat(this.unreservedAmount < 25 ? this.minNoteSize : 25);
@@ -219,7 +219,7 @@ const I = {
219
219
  return this.isAmountLessThan25(this.unreservedAmount) || this.isAmountBetween25And500(this.unreservedAmount);
220
220
  },
221
221
  isLendAmountButton() {
222
- return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(this.unreservedAmount);
222
+ return (this.lendButtonVisibility || this.state === "lent-to") && this.isAmountLessThan25(this.unreservedAmount) || this.showPresetAmounts && this.presetButtonsPrices.length === 1;
223
223
  },
224
224
  isFunded() {
225
225
  return this.state === "funded" || this.state === "fully-reserved";
@@ -235,16 +235,19 @@ const I = {
235
235
  },
236
236
  showFilteredDropdown() {
237
237
  return this.presetDropdownPrices.length > 1;
238
+ },
239
+ hideLendButton() {
240
+ return this.showPresetAmounts && (this.isAdding || this.presetButtonsPrices.length === 1);
238
241
  }
239
242
  },
240
243
  watch: {
241
- unreservedAmount(e, s) {
242
- var n, k;
243
- e !== s && s === "" && (this.selectedOption = g(
244
+ unreservedAmount(e, n) {
245
+ var s, k;
246
+ e !== n && n === "" && (this.selectedOption = g(
244
247
  this.getCookie,
245
248
  this.setCookie,
246
249
  this.enableFiveDollarsNotes,
247
- (k = (n = this.route) == null ? void 0 : n.query) == null ? void 0 : k.utm_campaign,
250
+ (k = (s = this.route) == null ? void 0 : s.query) == null ? void 0 : k.utm_campaign,
248
251
  e,
249
252
  this.userBalance,
250
253
  this.fiveDollarsSelected,
@@ -319,17 +322,17 @@ const I = {
319
322
  key: 1,
320
323
  class: "amountDropdownWrapper"
321
324
  }, R = ["value"];
322
- function U(e, s, n, k, f, t) {
325
+ function U(e, n, s, k, f, t) {
323
326
  const h = w("kv-ui-button"), L = w("kv-material-icon"), B = w("kv-ui-select"), b = w("kv-lend-amount-button");
324
327
  return i(), a("div", V, [
325
328
  t.isInBasket ? (i(), l(h, {
326
329
  key: 0,
327
330
  variant: "secondary",
328
- class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
331
+ class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
329
332
  "data-testid": "bp-lend-cta-checkout-button",
330
- to: n.externalLinks ? void 0 : "/basket",
331
- href: n.externalLinks ? "/basket" : void 0,
332
- onClick: s[0] || (s[0] = (o) => t.clickSecondaryButton(o))
333
+ to: s.externalLinks ? void 0 : "/basket",
334
+ href: s.externalLinks ? "/basket" : void 0,
335
+ onClick: n[0] || (n[0] = (o) => t.clickSecondaryButton(o))
333
336
  }, {
334
337
  default: r(() => [
335
338
  c(m(t.loanInBasketButtonText), 1)
@@ -343,17 +346,17 @@ function U(e, s, n, k, f, t) {
343
346
  c(m(t.ctaButtonText), 1)
344
347
  ]),
345
348
  _: 1
346
- })) : t.isFunded ? (i(), a("div", O, " This loan was just funded! 🎉 ")) : n.showViewLoan ? (i(), l(h, {
349
+ })) : t.isFunded ? (i(), a("div", O, " This loan was just funded! 🎉 ")) : s.showViewLoan ? (i(), l(h, {
347
350
  key: 3,
348
351
  state: `${t.allSharesReserved ? "disabled" : ""}`,
349
- to: n.externalLinks ? void 0 : t.readMorePath,
350
- href: n.externalLinks ? t.readMorePath : void 0,
352
+ to: s.externalLinks ? void 0 : t.readMorePath,
353
+ href: s.externalLinks ? t.readMorePath : void 0,
351
354
  class: "tw-mb-0",
352
- onClick: s[1] || (s[1] = (o) => e.$emit("show-loan-details", o))
355
+ onClick: n[1] || (n[1] = (o) => e.$emit("show-loan-details", o))
353
356
  }, {
354
357
  default: r(() => [
355
358
  y("span", N, [
356
- s[5] || (s[5] = c(" View loan ")),
359
+ n[5] || (n[5] = c(" View loan ")),
357
360
  S(L, {
358
361
  class: "tw-w-3 tw-h-3 tw-align-middle",
359
362
  icon: f.mdiChevronRight
@@ -364,18 +367,18 @@ function U(e, s, n, k, f, t) {
364
367
  }, 8, ["state", "to", "href"])) : t.useFormSubmit ? (i(), a("form", {
365
368
  key: 4,
366
369
  class: "tw-w-full tw-flex",
367
- onSubmit: s[4] || (s[4] = A((...o) => t.addToBasket && t.addToBasket(...o), ["prevent"]))
370
+ onSubmit: n[4] || (n[4] = p((...o) => t.addToBasket && t.addToBasket(...o), ["prevent"]))
368
371
  }, [
369
372
  y("fieldset", {
370
- class: d(["tw-w-full tw-flex", { "tw-flex-col tw-gap-1.5 md:tw-flex-row md:tw-justify-between": n.showPresetAmounts }]),
371
- disabled: n.isAdding,
373
+ class: d(["tw-w-full tw-flex", { "tw-flex-col tw-gap-1.5 md:tw-flex-row md:tw-justify-between": s.showPresetAmounts }]),
374
+ disabled: s.isAdding,
372
375
  "data-testid": "bp-lend-cta-select-and-button"
373
376
  }, [
374
- n.showPresetAmounts ? (i(), a("div", {
377
+ s.showPresetAmounts ? (i(), a("div", {
375
378
  key: 0,
376
- class: d(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": n.enableHugeAmount }])
379
+ class: d(["tw-flex tw-gap-1 lg:tw-gap-2", { "tw-flex-wrap md:tw-flex-nowrap": s.enableHugeAmount }])
377
380
  }, [
378
- t.isLendAmountButton ? u("", !0) : (i(!0), a(v, { key: 0 }, p(t.presetButtonsPrices, (o) => (i(), l(h, {
381
+ t.isLendAmountButton ? u("", !0) : (i(!0), a(A, { key: 0 }, v(t.presetButtonsPrices, (o) => (i(), l(h, {
379
382
  key: o,
380
383
  variant: "secondary",
381
384
  class: d(["tw-inline-flex tw-flex-1 preset-option tw-w-8", { "selected-option": f.selectedOption == o }]),
@@ -392,41 +395,41 @@ function U(e, s, n, k, f, t) {
392
395
  id: `LoanAmountDropdown_${t.loanId}`,
393
396
  modelValue: f.selectedDropdownOption,
394
397
  "onUpdate:modelValue": [
395
- s[2] || (s[2] = (o) => f.selectedDropdownOption = o),
398
+ n[2] || (n[2] = (o) => f.selectedDropdownOption = o),
396
399
  t.trackLendAmountSelection
397
400
  ],
398
401
  class: d(["tw-min-w-12 tw-rounded filtered-dropdown", {
399
402
  "unselected-dropdown": !t.selectedDropdown,
400
403
  "selected-dropdown": t.selectedDropdown,
401
- "tw-w-full": n.enableHugeAmount
404
+ "tw-w-full": s.enableHugeAmount
402
405
  }]),
403
406
  "aria-label": "Lend amount",
404
- onClick: A(t.clickDropdown, ["stop"])
407
+ onClick: p(t.clickDropdown, ["stop"])
405
408
  }, {
406
409
  default: r(() => [
407
- (i(!0), a(v, null, p(t.presetDropdownPrices, (o) => (i(), a("option", {
410
+ (i(!0), a(A, null, v(t.presetDropdownPrices, (o) => (i(), a("option", {
408
411
  key: o,
409
412
  value: o
410
413
  }, m(o !== "Other" ? `$${o}` : o), 9, H))), 128))
411
414
  ]),
412
415
  _: 1
413
416
  }, 8, ["id", "modelValue", "class", "onUpdate:modelValue", "onClick"])) : u("", !0)
414
- ], 2)) : n.showPresetAmounts ? u("", !0) : (i(), a("div", K, [
417
+ ], 2)) : s.showPresetAmounts ? u("", !0) : (i(), a("div", K, [
415
418
  t.hideShowLendDropdown && !t.isLessThan25 ? (i(), l(B, {
416
419
  key: 0,
417
420
  id: `LoanAmountDropdown_${t.loanId}`,
418
421
  modelValue: f.selectedOption,
419
422
  "onUpdate:modelValue": [
420
- s[3] || (s[3] = (o) => f.selectedOption = o),
423
+ n[3] || (n[3] = (o) => f.selectedOption = o),
421
424
  t.trackLendAmountSelection
422
425
  ],
423
426
  class: "tw-min-w-12",
424
427
  style: { "border-radius": "14px 0 0 14px" },
425
428
  "aria-label": "Lend amount",
426
- onClick: A(t.clickDropdown, ["stop"])
429
+ onClick: p(t.clickDropdown, ["stop"])
427
430
  }, {
428
431
  default: r(() => [
429
- (i(!0), a(v, null, p(t.prices, (o) => (i(), a("option", {
432
+ (i(!0), a(A, null, v(t.prices, (o) => (i(), a("option", {
430
433
  key: o,
431
434
  value: o
432
435
  }, " $" + m(o), 9, R))), 128))
@@ -436,13 +439,13 @@ function U(e, s, n, k, f, t) {
436
439
  ])),
437
440
  y("div", {
438
441
  class: d({
439
- lendButtonWrapper: t.hideShowLendDropdown && !n.showPresetAmounts,
440
- "tw-hidden": n.isAdding && n.showPresetAmounts
442
+ lendButtonWrapper: t.hideShowLendDropdown && !s.showPresetAmounts,
443
+ "tw-hidden": t.hideLendButton
441
444
  })
442
445
  }, [
443
446
  t.lendButtonVisibility && !t.isLessThan25 ? (i(), l(h, {
444
447
  key: "lendButton",
445
- class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": n.showPresetAmounts }]),
448
+ class: d(["tw-inline-flex tw-flex-1", { "tw-w-full": s.showPresetAmounts }]),
446
449
  "data-testid": "bp-lend-cta-lend-button",
447
450
  type: "submit"
448
451
  }, {
@@ -452,30 +455,30 @@ function U(e, s, n, k, f, t) {
452
455
  _: 1
453
456
  }, 8, ["class"])) : t.showLendAgain ? (i(), l(h, {
454
457
  key: "lendAgainButton",
455
- class: d(["lend-again", { "tw-w-full": n.showPresetAmounts }]),
458
+ class: d(["lend-again", { "tw-w-full": s.showPresetAmounts }]),
456
459
  "data-testid": "bp-lend-cta-lend-again-button",
457
460
  type: "submit"
458
461
  }, {
459
462
  default: r(() => [
460
- c(m(n.primaryButtonText || "Lend") + " again ", 1)
463
+ c(m(s.primaryButtonText || "Lend") + " again ", 1)
461
464
  ]),
462
465
  _: 1
463
466
  }, 8, ["class"])) : u("", !0)
464
467
  ], 2),
465
- t.isLendAmountButton && !n.enableFiveDollarsNotes ? (i(), l(b, {
468
+ t.isLendAmountButton && !s.enableFiveDollarsNotes ? (i(), l(b, {
466
469
  key: 2,
467
470
  class: "tw-w-full",
468
471
  "loan-id": t.loanId,
469
472
  "show-now": !1,
470
473
  "amount-left": t.unreservedAmount,
471
- "is-adding": n.isAdding,
474
+ "is-adding": s.isAdding,
472
475
  onAddToBasket: t.addToBasket
473
476
  }, null, 8, ["loan-id", "amount-left", "is-adding", "onAddToBasket"])) : u("", !0),
474
- !n.isLoading && n.isAdding ? (i(), l(h, {
477
+ !s.isLoading && s.isAdding ? (i(), l(h, {
475
478
  key: 3,
476
479
  class: "tw-inline-flex tw-flex-1"
477
480
  }, {
478
- default: r(() => s[6] || (s[6] = [
481
+ default: r(() => n[6] || (n[6] = [
479
482
  c(" Adding to basket ")
480
483
  ])),
481
484
  _: 1
@@ -484,7 +487,7 @@ function U(e, s, n, k, f, t) {
484
487
  ], 32)) : u("", !0)
485
488
  ]);
486
489
  }
487
- const Z = /* @__PURE__ */ F(I, [["render", U], ["__scopeId", "data-v-e8a71378"]]);
490
+ const Z = /* @__PURE__ */ F(I, [["render", U], ["__scopeId", "data-v-f7e50991"]]);
488
491
  export {
489
492
  Z as default
490
493
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "5.3.1",
3
+ "version": "5.3.2",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -106,5 +106,5 @@
106
106
  "embla-carousel-fade",
107
107
  "popper.js"
108
108
  ],
109
- "gitHead": "88b1926c2f4cd748e6be886e11a5fd3843261cd2"
109
+ "gitHead": "9381b6ca0a2bbcc13d63798abc55d71202a45ff1"
110
110
  }