@kiva/kv-components 10.4.1 → 10.5.1

package/dist/vue/KvClassicLoanCard.js

@@ -1,255 +1,298 @@
-import N from "./KvClassicLoanCard2.js";
-import { KV_CLASSIC_LOAN_CARD_FRAGMENT as ae, KV_CLASSIC_LOAN_CARD_USER_FRAGMET as oe } from "./KvClassicLoanCard2.js";
-import { resolveComponent as i, openBlock as a, createElementBlock as s, normalizeStyle as T, normalizeClass as r, createElementVNode as d, createBlock as n, resolveDynamicComponent as v, withCtx as g, createVNode as w, toDisplayString as b, createTextVNode as V, createCommentVNode as c, Fragment as R, renderList as S } from "vue";
-import "./KvClassicLoanCard.css";
-import F from "../_virtual/_plugin-vue_export-helper.js";
-const I = { class: "tw-grow" }, E = { class: "loan-card-active-hover" }, K = {
-  key: 1,
-  class: "tw-relative"
-}, z = { key: 0 }, W = {
-  class: "tw-absolute tw-bottom-1 tw-left-1 tw-text-primary tw-bg-white tw-rounded tw-p-1 tw-mb-0 tw-text-label tw-flex tw-items-center tw-h-3",
-  style: { padding: "2px 6px", "text-transform": "capitalize", "max-width": "calc(100% - 1rem)" }
-}, U = ["id"], j = { class: "tw-mb-1.5 tw-pt-1" }, G = { key: 1 }, H = {
-  key: 0,
-  class: "tw-w-full tw-pt-1 tw-pr-1"
-}, O = {
-  key: 0,
-  class: "tw-text-center tw-w-full tw-mt-1 tw-font-medium"
-}, q = {
-  key: 1,
-  class: "tw-pt-1.5"
+import a from "graphql-tag";
+import S from "numeral";
+import { LOAN_CALLOUTS_FRAGMENT as M, LOAN_GEOCODE_FRAGMENT as k, LOAN_PROGRESS_FRAGMENT as F, loanCardComputedProperties as R, loanCardMethods as w, useLocationTruncation as E } from "../utils/loanCard.js";
+import b from "./KvLoanUse2.js";
+import O from "./KvBorrowerImage.js";
+import G from "./KvLoanProgressGroup.js";
+import D from "./KvLoanCallouts.js";
+import P from "./KvLendCta2.js";
+import I from "./KvLoanBookmark2.js";
+import V from "./KvLoanTag2.js";
+import $ from "./KvMaterialIcon.js";
+import U from "./KvLoadingPlaceholder.js";
+import z from "./KvLoanTeamPick.js";
+import W from "./KvLoanActivities2.js";
+import x from "./KvTooltip.js";
+import { KV_LEND_CTA_FRAGMENT as H, KV_LEND_CTA_USER_FRAGMENT as j } from "./KvLendCta.js";
+import { KV_LOAN_ACTIVITIES_FRAGMENT as q } from "./KvLoanActivities.js";
+import { KV_LOAN_TAG_FRAGMENT as J } from "./KvLoanTag.js";
+import { KV_LOAN_USE_FRAGMENT as Q } from "./KvLoanUse.js";
+import { KV_LOAN_BOOKMARK_FRAGMENT as X } from "./KvLoanBookmark.js";
+const ve = a`
+	fragment KvClassicLoanCard on LoanBasic {
+		id
+		gender
+		image {
+			id
+			hash # for imageHash
+		}
+		lenders(limit: 0) {
+			totalCount # for lendersNumber
+		}
+		loanFundraisingInfo {
+			id
+			fundedAmount # for amountLent
+		}
+		name # for borrowerName
+		...KvLendCta
+		...KvLoanActivities
+		...KvLoanTag
+		...KvLoanUse
+		...LoanCallouts
+		...LoanGeocode
+		...LoanProgress
+	}
+	${H}
+	${q}
+	${J}
+	${Q}
+	${M}
+	${k}
+	${F}
+`, ye = a`
+	fragment KvClassicLoanCardUser on LoanBasic {
+		id
+		...KvLendCtaUser
+		...KvLoanBookmark
+	}
+	${j}
+	${X}
+`, Ce = {
+  name: "KvClassicLoanCard",
+  components: {
+    KvBorrowerImage: O,
+    KvLoadingPlaceholder: U,
+    KvLoanUse: b,
+    KvLoanProgressGroup: G,
+    KvMaterialIcon: $,
+    KvLendCta: P,
+    KvLoanTag: V,
+    KvLoanCallouts: D,
+    KvLoanBookmark: I,
+    KvLoanTeamPick: z,
+    KvLoanActivities: W,
+    KvTooltip: x
+  },
+  props: {
+    loanId: {
+      type: Number,
+      default: void 0
+    },
+    loan: {
+      type: Object,
+      default: null
+    },
+    customLoanDetails: {
+      type: Boolean,
+      default: !1
+    },
+    showTags: {
+      type: Boolean,
+      default: !1
+    },
+    categoryPageName: {
+      type: String,
+      default: ""
+    },
+    enableFiveDollarsNotes: {
+      type: Boolean,
+      default: !1
+    },
+    isAdding: {
+      type: Boolean,
+      default: !1
+    },
+    isVisitor: {
+      type: Boolean,
+      default: !0
+    },
+    basketItems: {
+      type: Array,
+      default: () => []
+    },
+    isBookmarked: {
+      type: Boolean,
+      default: !1
+    },
+    kvTrackFunction: {
+      type: Function,
+      required: !0
+    },
+    photoPath: {
+      type: String,
+      required: !0
+    },
+    showViewLoan: {
+      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
+    },
+    customCallouts: {
+      type: Array,
+      default: () => []
+    },
+    useFullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    largeCard: {
+      type: Boolean,
+      default: !1
+    },
+    isTeamPick: {
+      type: Boolean,
+      default: !1
+    },
+    combinedActivities: {
+      type: Array,
+      default: () => []
+    },
+    errorMsg: {
+      type: String,
+      default: ""
+    },
+    primaryButtonText: {
+      type: String,
+      default: "Lend"
+    },
+    secondaryButtonHandler: {
+      type: Function,
+      default: void 0
+    },
+    secondaryButtonText: {
+      type: String,
+      default: "Checkout now"
+    },
+    showContributors: {
+      type: Boolean,
+      default: !1
+    },
+    customHref: {
+      type: String,
+      default: ""
+    },
+    enableMultiMatching: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: [
+    "toggle-bookmark",
+    "jump-filter-page",
+    "add-to-basket",
+    "remove-from-basket"
+  ],
+  setup(e, { emit: t }) {
+    const {
+      allDataLoaded: o,
+      borrowerName: r,
+      city: n,
+      countryName: i,
+      distributionModel: l,
+      formattedLocation: s,
+      fundraisingPercent: d,
+      hasProgressData: u,
+      imageHash: m,
+      isLoading: f,
+      loanAmount: p,
+      loanBorrowerCount: c,
+      loanCallouts: L,
+      loanStatus: g,
+      loanUse: A,
+      mdiMapMarker: v,
+      readMorePath: y,
+      state: C,
+      tag: h,
+      unreservedAmount: _,
+      sharesAvailable: K
+    } = R(e), {
+      clickReadMore: N
+    } = w(e, t), {
+      locationRef: T,
+      isLocationTruncated: B
+    } = E();
+    return {
+      allDataLoaded: o,
+      borrowerName: r,
+      city: n,
+      countryName: i,
+      distributionModel: l,
+      formattedLocation: s,
+      fundraisingPercent: d,
+      hasProgressData: u,
+      imageHash: m,
+      isLoading: f,
+      loanAmount: p,
+      loanBorrowerCount: c,
+      loanCallouts: L,
+      loanStatus: g,
+      loanUse: A,
+      mdiMapMarker: v,
+      readMorePath: y,
+      state: C,
+      tag: h,
+      unreservedAmount: _,
+      sharesAvailable: K,
+      clickReadMore: N,
+      locationRef: T,
+      isLocationTruncated: B
+    };
+  },
+  computed: {
+    cardWidth() {
+      return this.useFullWidth ? "100%" : "374px";
+    },
+    imageAspectRatio() {
+      return this.largeCard ? 5 / 8 : 3 / 4;
+    },
+    imageDefaultWidth() {
+      return this.largeCard ? 480 : 336;
+    },
+    imageSizes() {
+      return this.largeCard ? [{ width: 480 }] : [
+        { width: this.imageDefaultWidth, viewSize: 1024 },
+        { width: this.imageDefaultWidth, viewSize: 768 },
+        { width: 416, viewSize: 480 },
+        { width: 374, viewSize: 414 },
+        { width: 335, viewSize: 375 }
+      ];
+    },
+    lendersNumber() {
+      var e, t;
+      return ((t = (e = this.loan) == null ? void 0 : e.lenders) == null ? void 0 : t.totalCount) ?? 0;
+    },
+    amountLent() {
+      var t, o;
+      const e = ((o = (t = this.loan) == null ? void 0 : t.loanFundraisingInfo) == null ? void 0 : o.fundedAmount) ?? 0;
+      return S(e).format("$0,0");
+    }
+  }
 };
-function J(u, o, e, t, Q, m) {
-  const k = i("kv-loading-placeholder"), h = i("kv-borrower-image"), f = i("kv-material-icon"), _ = i("kv-tooltip"), y = i("kv-loan-team-pick"), x = i("kv-loan-bookmark"), C = i("kv-loan-tag"), L = i("kv-loan-use"), A = i("kv-loan-callouts"), M = i("kv-loan-progress-group"), P = i("kv-lend-cta"), B = i("KvLoanActivities");
-  return a(), s("div", {
-    class: r(["tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1", { "tw-p-1": !e.largeCard, "tw-pointer-events-none": t.isLoading }]),
-    "data-testid": "loan-card",
-    style: T([{ "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.08)" }, { minWidth: "230px", maxWidth: m.cardWidth }])
-  }, [
-    d("div", I, [
-      d("div", E, [
-        t.isLoading ? (a(), n(k, {
-          key: 0,
-          class: r(["tw-mb-1 tw-w-full", { "tw-rounded-t tw-rounded-b-none": e.largeCard, "!tw-rounded-sm": !e.largeCard }]),
-          style: { height: "15rem" }
-        }, null, 8, ["class"])) : (a(), s("div", K, [
-          (a(), n(v(t.tag), {
-            to: t.readMorePath,
-            href: t.readMorePath,
-            class: "tw-flex",
-            "aria-label": "Borrower image",
-            onClick: o[0] || (o[0] = (l) => t.clickReadMore("Photo", l))
-          }, {
-            default: g(() => [
-              w(h, {
-                class: r(["tw-relative tw-w-full tw-bg-black tw-bg-clip-content", { "tw-rounded-t": e.largeCard, "tw-rounded-sm": !e.largeCard }]),
-                alt: `Photo of ${t.borrowerName}`,
-                "aspect-ratio": m.imageAspectRatio,
-                "default-image": { width: m.imageDefaultWidth },
-                hash: t.imageHash,
-                images: m.imageSizes,
-                "photo-path": e.photoPath
-              }, null, 8, ["class", "alt", "aspect-ratio", "default-image", "hash", "images", "photo-path"]),
-              t.countryName ? (a(), s("div", z, [
-                d("p", W, [
-                  w(f, {
-                    class: "tw-h-2 tw-w-2 tw-flex-shrink-0",
-                    icon: t.mdiMapMarker
-                  }, null, 8, ["icon"]),
-                  d("span", {
-                    id: `loan-location-${e.loanId}`,
-                    ref: "locationRef",
-                    class: "tw-truncate tw-min-w-0",
-                    style: { "margin-top": "0.125rem" }
-                  }, b(t.formattedLocation), 9, U),
-                  t.isLocationTruncated ? (a(), n(_, {
-                    key: 0,
-                    controller: `loan-location-${e.loanId}`,
-                    "max-width": "250px"
-                  }, {
-                    default: g(() => [
-                      V(b(t.formattedLocation), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["controller"])) : c("", !0)
-                ])
-              ])) : c("", !0)
-            ]),
-            _: 1
-          }, 8, ["to", "href"])),
-          e.isTeamPick ? (a(), n(y, {
-            key: 0,
-            class: r(["tw-absolute", { "tw-right-6": !e.isVisitor, "tw-right-0": e.isVisitor }]),
-            style: { top: "-6px" },
-            "data-testid": "loan-card-teampick"
-          }, null, 8, ["class"])) : c("", !0),
-          e.isVisitor ? c("", !0) : (a(), n(x, {
-            key: 1,
-            "loan-id": e.loanId,
-            "is-bookmarked": e.isBookmarked,
-            class: "tw-absolute tw-right-1",
-            style: { top: "-6px" },
-            "data-testid": "loan-card-bookmark",
-            onToggleBookmark: o[1] || (o[1] = (l) => u.$emit("toggle-bookmark"))
-          }, null, 8, ["loan-id", "is-bookmarked"]))
-        ])),
-        (a(), n(v(t.tag), {
-          to: t.readMorePath,
-          href: t.readMorePath,
-          class: r(["tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline", { "tw-px-1": e.largeCard }]),
-          "aria-label": "Loan tag",
-          onClick: o[2] || (o[2] = (l) => t.clickReadMore("Tag", l))
-        }, {
-          default: g(() => [
-            e.showTags && !t.isLoading ? (a(), n(C, {
-              key: 0,
-              loan: e.loan,
-              "enable-multi-matching": e.enableMultiMatching
-            }, null, 8, ["loan", "enable-multi-matching"])) : c("", !0)
-          ]),
-          _: 1
-        }, 8, ["to", "href", "class"])),
-        (a(), n(v(t.tag), {
-          to: t.readMorePath,
-          href: t.readMorePath,
-          class: "loan-card-use tw-no-underline tw-text-primary",
-          "aria-label": "Loan use",
-          onClick: o[3] || (o[3] = (l) => t.clickReadMore("Use", l))
-        }, {
-          default: g(() => [
-            d("div", j, [
-              t.isLoading ? (a(), s("div", {
-                key: 0,
-                class: r(["tw-w-full", { "tw-px-1": e.largeCard }]),
-                style: { height: "5.5rem" }
-              }, [
-                (a(!0), s(R, null, S([...Array(4)], (l, D) => (a(), s("div", {
-                  key: D,
-                  class: "tw-h-2 tw-mb-1"
-                }, [
-                  w(k)
-                ]))), 128))
-              ], 2)) : (a(), s("div", G, [
-                w(L, {
-                  use: t.loanUse,
-                  "loan-amount": t.loanAmount,
-                  status: t.loanStatus,
-                  "borrower-count": t.loanBorrowerCount,
-                  name: t.borrowerName,
-                  "distribution-model": t.distributionModel,
-                  class: r({ "tw-px-1": e.largeCard })
-                }, null, 8, ["use", "loan-amount", "status", "borrower-count", "name", "distribution-model", "class"])
-              ]))
-            ])
-          ]),
-          _: 1
-        }, 8, ["to", "href"]))
-      ]),
-      t.isLoading || typeof t.loanCallouts > "u" ? (a(), n(k, {
-        key: 0,
-        class: r(["tw-mt-1.5 tw-mb-1", { "tw-mx-1": e.largeCard }]),
-        style: { width: "60%", height: "1.75rem", "border-radius": "500rem" }
-      }, null, 8, ["class"])) : (a(), n(A, {
-        key: 1,
-        callouts: t.loanCallouts,
-        class: r(["tw-mt-1.5", { "tw-px-1": e.largeCard }]),
-        onClick: o[4] || (o[4] = (l) => u.$emit("jump-filter-page", l))
-      }, null, 8, ["callouts", "class"]))
-    ]),
-    d("div", {
-      class: r(["tw-flex tw-justify-between tw-mt-2", { "tw-px-1": e.largeCard }])
-    }, [
-      t.hasProgressData ? c("", !0) : (a(), s("div", H, [
-        w(k, {
-          class: "tw-mb-0.5",
-          style: { width: "70%", height: "1.3rem" }
-        }),
-        w(k, {
-          class: "tw-rounded",
-          style: { width: "70%", height: "0.5rem" }
-        })
-      ])),
-      d("div", null, [
-        t.sharesAvailable ? (a(), n(v(t.tag), {
-          key: 0,
-          to: t.readMorePath,
-          href: t.readMorePath,
-          class: "loan-card-progress tw-no-underline tw-mt-1",
-          "aria-label": "Loan progress",
-          onClick: o[5] || (o[5] = (l) => t.clickReadMore("Progress", l))
-        }, {
-          default: g(() => [
-            w(M, {
-              id: "loanProgress",
-              "money-left": t.unreservedAmount,
-              "progress-percent": t.fundraisingPercent,
-              class: "tw-text-black"
-            }, null, 8, ["money-left", "progress-percent"])
-          ]),
-          _: 1
-        }, 8, ["to", "href"])) : c("", !0)
-      ]),
-      t.allDataLoaded ? (a(), n(P, {
-        key: 2,
-        loan: e.loan,
-        "unreserved-amount": t.unreservedAmount,
-        "basket-items": e.basketItems,
-        "is-loading": t.isLoading,
-        "is-adding": e.isAdding,
-        "enable-five-dollars-notes": e.enableFiveDollarsNotes,
-        "five-dollars-selected": e.fiveDollarsSelected,
-        "kv-track-function": e.kvTrackFunction,
-        "show-view-loan": e.showViewLoan,
-        "custom-loan-details": e.customLoanDetails,
-        "external-links": e.externalLinks,
-        route: e.route,
-        "user-balance": e.userBalance,
-        "get-cookie": e.getCookie,
-        "set-cookie": e.setCookie,
-        "is-visitor": e.isVisitor,
-        "primary-button-text": e.primaryButtonText,
-        "secondary-button-text": e.secondaryButtonText,
-        "secondary-button-handler": e.secondaryButtonHandler,
-        class: r(["tw-mt-auto", { "tw-w-full": !t.sharesAvailable }]),
-        onAddToBasket: o[6] || (o[6] = (l) => u.$emit("add-to-basket", l)),
-        onShowLoanDetails: o[7] || (o[7] = (l) => t.clickReadMore("ViewLoan", l)),
-        onRemoveFromBasket: o[8] || (o[8] = (l) => u.$emit("remove-from-basket", l))
-      }, null, 8, ["loan", "unreserved-amount", "basket-items", "is-loading", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "kv-track-function", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "is-visitor", "primary-button-text", "secondary-button-text", "secondary-button-handler", "class"])) : (a(), n(k, {
-        key: 1,
-        class: "tw-rounded tw-self-start",
-        style: { width: "9rem", height: "3rem" }
-      }))
-    ], 2),
-    e.showContributors && m.lendersNumber && m.amountLent ? (a(), s("div", O, [
-      d("p", null, b(m.lendersNumber) + " people contributed " + b(m.amountLent), 1)
-    ])) : c("", !0),
-    e.combinedActivities.length > 0 ? (a(), s("div", q, [
-      o[10] || (o[10] = d("hr", { class: "tw-border-tertiary tw-mb-1 tw-w-5/6 tw-mx-auto" }, null, -1)),
-      w(B, {
-        loan: e.loan,
-        "combined-activities": e.combinedActivities,
-        "kv-track-function": e.kvTrackFunction,
-        "basket-items": e.basketItems,
-        "is-adding": e.isAdding,
-        "enable-five-dollars-notes": e.enableFiveDollarsNotes,
-        "five-dollars-selected": e.fiveDollarsSelected,
-        "show-view-loan": e.showViewLoan,
-        "custom-loan-details": e.customLoanDetails,
-        "external-links": e.externalLinks,
-        route: e.route,
-        "user-balance": e.userBalance,
-        "get-cookie": e.getCookie,
-        "set-cookie": e.setCookie,
-        "error-msg": e.errorMsg,
-        "is-visitor": e.isVisitor,
-        onAddToBasket: o[9] || (o[9] = (l) => u.$emit("add-to-basket", l))
-      }, null, 8, ["loan", "combined-activities", "kv-track-function", "basket-items", "is-adding", "enable-five-dollars-notes", "five-dollars-selected", "show-view-loan", "custom-loan-details", "external-links", "route", "user-balance", "get-cookie", "set-cookie", "error-msg", "is-visitor"])
-    ])) : c("", !0)
-  ], 6);
-}
-const $ = /* @__PURE__ */ F(N, [["render", J], ["__scopeId", "data-v-44561e04"]]);
 export {
-  ae as KV_CLASSIC_LOAN_CARD_FRAGMENT,
-  oe as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
-  $ as default
+  ve as KV_CLASSIC_LOAN_CARD_FRAGMENT,
+  ye as KV_CLASSIC_LOAN_CARD_USER_FRAGMET,
+  Ce as default
 };