@lanaco/lnc-react-ui 4.0.145 → 4.0.147

package/dist/suspense-product-card-detailed-C-ZCjG5p.js

@@ -0,0 +1,538 @@
+import { jsxs as o, jsx as r, Fragment as C } from "react/jsx-runtime";
+import { forwardRef as M, useState as le, cloneElement as G, Suspense as de } from "react";
+import { p as me, t as U, o as v, l as X, q as L, G as q, k as pe } from "./utils-BdsZgOUE.js";
+import { s as N } from "./emotion-styled.browser.esm-BNN1dTl3.js";
+import { P as ge } from "./index-CF3HhgvN.js";
+import _ from "./Badge.js";
+import ue from "./Popover.js";
+import he from "./PopoverTrigger.js";
+import fe from "./PopoverContent.js";
+import { u as ve } from "./useDetectMobile-Bkvj0VMa.js";
+import { M as A } from "./consts-BuFChS64.js";
+const Y = N.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+  overflow: hidden;
+  width: 100%;
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.38rem;
+  }
+
+  & .wrapper-card-2 {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  & .wrapper-card-3 {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+
+    & > div {
+      & > div {
+        width: 100% !important;
+      }
+    }
+  }
+
+  & .tag {
+    height: 1.5rem;
+    gap: 0.25rem;
+    padding: 0.25rem 0.375rem;
+    border-radius: 0.375rem;
+    background: #f9fafb;
+    border: 1px solid var(--gray-95012, #14161a1f);
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.025rem;
+    color: var(--gray-950, #14161a);
+    white-space: nowrap;
+    flex: 0 0 auto;
+
+    & i {
+      color: var(--yellow-500, #f59e0b);
+    }
+  }
+
+  & .tag-mobile {
+    font-weight: 400;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    letter-spacing: 0.025rem;
+    color: var(--gray-600, #676e79);
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    ${me(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${U()}
+    display: flex;
+    align-items: end;
+    gap: 0.5rem;
+    color: var(--gray-950, #14161a);
+
+    &.new-price {
+      color: var(--danger-600, #e11d48);
+    }
+
+    & .full-price {
+      text-decoration: line-through;
+      font-size: 0.75rem;
+      font-weight: 400;
+      padding-bottom: 0.125rem;
+      color: var(--gray-600, #676e79);
+    }
+  }
+
+  & .location-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-600, #676e79);
+    ${U()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  & .skeleton-img {
+    background-color: ${v("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${v("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${v("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${v("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${v("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  & .tags-popover__trigger {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+
+  @media (max-width: ${A + "px"}) {
+    overflow: visible;
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+
+      & .full-price {
+        display: none;
+      }
+    }
+  }
+
+  &:hover .product-image-wrapper img {
+    transform: scale(1.1);
+  }
+`, we = N.div`
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border: 1px solid #0c15201f;
+
+  & .bookmarking-btn {
+    position: absolute;
+    right: 0.5rem;
+    top: 0.5rem;
+    z-index: 1;
+
+    display: none;
+  }
+
+  &:hover {
+    & .bookmarking-btn {
+      display: flex;
+    }
+  }
+
+  & img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 0.75rem;
+    transition: var(--transition, all 0.3s ease);
+  }
+
+  @media (max-width: ${A + "px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+
+    & .bookmarking-btn {
+      display: flex;
+    }
+  }
+`, be = N.div`
+  background: var(--white, #fff);
+  z-index: 1;
+
+  border: 1px solid var(--gray-200, #dddfe4);
+  border-radius: 0.5rem;
+  line-height: 1rem;
+  position: absolute;
+  padding: 0.5rem 0.75rem;
+  top: 0.5rem;
+  left: 25%;
+  transform: translateX(-50%);
+  min-width: 13rem;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    border-style: solid;
+    border-width: 0.625rem;
+  }
+
+  &::after {
+    top: -1.1875rem;
+    border-color: transparent transparent var(--white, #fff) transparent;
+  }
+
+  &::before {
+    top: -1.25rem;
+    border-color: transparent transparent var(--gray-200, #dddfe4) transparent;
+  }
+
+  & .tags-popover__content {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    font-weight: 400;
+
+    & .tags-popover__name {
+      color: var(--gray-600, #676e79);
+    }
+
+    & .tags-popover__value {
+      color: var(--gray-950, #14161a);
+    }
+  }
+`, ye = N.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--gray-500);
+  font-size:  0.75rem;
+  font-weight: 500;
+
+  & i {
+    font-size: 1rem;
+    color: var(--warning-500, #F59E0B);
+  }
+`, ke = M(({ sponsoredText: s = "Sponsored" }, m) => /* @__PURE__ */ o(ye, { ref: m, className: "sponsored-line", children: [
+  /* @__PURE__ */ r("i", { className: "mng-lnc-paw2" }),
+  /* @__PURE__ */ r("span", { children: s })
+] })), _e = "Vehicles_Cars", Ce = "Vehicles_Motorcycles", Ne = "Vehicles_Trucks", Pe = "Vehicles_AgriculturalMachines_Tractors", $e = "Vehicles_ConstructionMachines", Ee = "Vehicles_Bus", Se = "Vehicles_Campers", Ve = "RealEstates_", n = {
+  Mileage: {
+    icon: "mng-lnc-road",
+    measure: "km"
+  },
+  YearOfProduction: {
+    icon: "mng-lnc-calendar",
+    measure: ""
+  },
+  Fuel: {
+    icon: "mng-lnc-gas-station",
+    measure: ""
+  },
+  EnginePowerKW: {
+    icon: "mng-lnc-engine",
+    measure: "kW"
+  },
+  Transmission: {
+    icon: "mng-lnc-transmission",
+    measure: ""
+  },
+  Model: {
+    icon: "mng-lnc-application",
+    measure: ""
+  },
+  Brand: {
+    icon: "mng-lnc-car--front",
+    measure: ""
+  },
+  SurfaceArea: {
+    icon: "mng-lnc-right-angle",
+    measure: ""
+  },
+  Floor: {
+    icon: "mng-lnc-elevator",
+    measure: ""
+  },
+  FurnishedCondition: {
+    icon: "mng-lnc-sofa-01",
+    measure: ""
+  },
+  AdType: {
+    icon: "mng-lnc-notes",
+    measure: ""
+  },
+  NumberOfRooms: {
+    icon: "mng-lnc-meeting-room",
+    measure: ""
+  },
+  HeatingType: {
+    icon: "mng-lnc-heat",
+    measure: ""
+  },
+  AirConditioning: {
+    icon: "mng-lnc-air-conditioner",
+    measure: ""
+  },
+  Type: {
+    icon: "mng-lnc-house-building",
+    measure: ""
+  },
+  Parking: {
+    icon: "mng-lnc-parking-area-circle",
+    measure: ""
+  },
+  Internet: {
+    icon: "mng-lnc-wifi-02",
+    measure: ""
+  },
+  State: {
+    icon: "mng-lnc-settings-1",
+    measure: ""
+  },
+  NumberOfPremises: {
+    icon: "mng-lnc-meeting-room",
+    measure: ""
+  },
+  Pool: {
+    icon: "mng-lnc-pool",
+    measure: ""
+  },
+  Approach: {
+    icon: "mng-lnc-driveway",
+    measure: ""
+  },
+  NumberOfBeds: {
+    icon: "mng-lnc-bed",
+    measure: ""
+  },
+  Kitchen: {
+    icon: "mng-lnc-fridge",
+    measure: ""
+  },
+  BathroomToilet: {
+    icon: "mng-lnc-bath",
+    measure: ""
+  },
+  default: {
+    icon: " mng-lnc-clock--filled",
+    measure: ""
+  }
+}, Le = M((s, m) => {
+  const {
+    uuid: c,
+    name: w,
+    price: l = 0,
+    sellingPrice: b,
+    currency: y,
+    isNegotiable: P,
+    isFree: $,
+    imageUrl: K,
+    location: H,
+    sponsored: Z,
+    imageComponent: z,
+    onSelectCard: J = () => {
+    },
+    freeText: Q = "Free",
+    negotiableText: x = "Negotiable",
+    tags: t = [],
+    categoryCode: E,
+    condition: S,
+    quantity: V,
+    trade: B,
+    sponsoredText: ee,
+    onBookmark: O = () => {
+    },
+    bookmarkComponent: g,
+    bookmarked: R,
+    bookmarkLists: re
+  } = s, T = ve(), oe = () => {
+    var d;
+    if (!X(g)) return /* @__PURE__ */ r(C, {});
+    const e = g, a = (d = g == null ? void 0 : g.props) == null ? void 0 : d.children, i = G(a, {
+      key: `bookmark_pr__${R}`,
+      bookmarked: R,
+      productUuid: c,
+      onAddToBookmark: () => O(!0, c),
+      onRemoveFromBookmark: () => O(!1, c),
+      bookmarkedUuidList: re
+    });
+    return G(e, void 0, i);
+  }, F = [
+    _e,
+    Ce,
+    Ne,
+    Pe,
+    $e,
+    Ee,
+    Se,
+    Ve
+  ].some(
+    (e) => E == null ? void 0 : E.includes(e)
+  ), [ne, D] = le(!1), ae = () => {
+    D(!0);
+  }, te = () => {
+    D(!1);
+  }, ie = () => /* @__PURE__ */ r("div", { className: "tags-popover__trigger", children: t == null ? void 0 : t.map((e, a) => {
+    var u, h, f, j, W;
+    const i = ((u = n == null ? void 0 : n[e == null ? void 0 : e.code]) == null ? void 0 : u.icon) ?? ((h = n == null ? void 0 : n.default) == null ? void 0 : h.icon) ?? "", d = ((f = e == null ? void 0 : e.measurementUnit) == null ? void 0 : f.symbol) ?? ((j = n == null ? void 0 : n[e == null ? void 0 : e.code]) == null ? void 0 : j.measure) ?? "", k = [(e == null ? void 0 : e.value) ?? ((W = e == null ? void 0 : e.multiOptions) == null ? void 0 : W[0]) ?? "", d].filter(Boolean).join(" ");
+    return T ? /* @__PURE__ */ o("div", { className: "tag-mobile", children: [
+      k,
+      a < (t == null ? void 0 : t.length) - 1 ? " · " : ""
+    ] }) : /* @__PURE__ */ o(
+      _,
+      {
+        className: "tag",
+        children: [
+          /* @__PURE__ */ r("i", { className: i }),
+          k
+        ]
+      },
+      `detailed-products-section-tag__${a + 1}`
+    );
+  }) }), se = () => /* @__PURE__ */ r("div", { className: "tags-popover__content", children: t == null ? void 0 : t.map((e, a) => {
+    var u, h, f;
+    const i = ((u = e == null ? void 0 : e.measurementUnit) == null ? void 0 : u.symbol) ?? ((h = n == null ? void 0 : n[e == null ? void 0 : e.code]) == null ? void 0 : h.measure) ?? "", p = [(e == null ? void 0 : e.value) ?? ((f = e == null ? void 0 : e.multiOptions) == null ? void 0 : f[0]) ?? "", i].filter(Boolean).join(" "), k = e == null ? void 0 : e.name;
+    return /* @__PURE__ */ o("div", { children: [
+      /* @__PURE__ */ r("span", { className: "tags-popover__name", children: `${k}: ` }),
+      /* @__PURE__ */ r("span", { className: "tags-popover__value", children: p })
+    ] }, `detailed-products-section-tag-dropdown__${a + 1}`);
+  }) }), ce = () => {
+    var e;
+    if (T) {
+      const a = [S, V, B];
+      return (e = a == null ? void 0 : a.filter((i) => pe(i))) == null ? void 0 : e.map((i, d, p) => /* @__PURE__ */ o("div", { className: "tag-mobile", children: [
+        i,
+        d < (p == null ? void 0 : p.length) - 1 ? " · " : ""
+      ] }));
+    }
+    return /* @__PURE__ */ o(C, { children: [
+      S && /* @__PURE__ */ r(_, { className: "tag", children: S }, "detailed-products-section-tag__condition"),
+      V && /* @__PURE__ */ r(_, { className: "tag", children: V }, "detailed-products-section-tag__quantity"),
+      B && /* @__PURE__ */ r(_, { className: "tag", children: B }, "detailed-products-section-tag__trade")
+    ] });
+  }, I = l > 0 && y && P !== !0 && $ !== !0 && l !== b;
+  return (
+    // <LandingPageProductCardSkeleton />
+    /* @__PURE__ */ o(Y, { className: "product-card", onClick: J, children: [
+      /* @__PURE__ */ o(we, { className: "product-image-wrapper", children: [
+        /* @__PURE__ */ r(oe, {}),
+        X(z) ? z : /* @__PURE__ */ r(ge, { src: K })
+      ] }),
+      /* @__PURE__ */ r("div", { className: "wrapper-card-1", children: /* @__PURE__ */ r("div", { className: "card-title", children: w }) }),
+      /* @__PURE__ */ o("div", { className: "wrapper-card-3", children: [
+        F && /* @__PURE__ */ r(
+          "div",
+          {
+            ...T ? {} : {
+              onMouseEnter: ae,
+              onMouseLeave: te
+            },
+            children: /* @__PURE__ */ o(ue, { placement: "bottom", open: ne, children: [
+              /* @__PURE__ */ r(he, { children: ie() }),
+              /* @__PURE__ */ r(fe, { style: { all: "unset" }, children: /* @__PURE__ */ r(be, { children: se() }) })
+            ] })
+          }
+        ),
+        !F && ce()
+      ] }),
+      /* @__PURE__ */ o("div", { className: "wrapper-card-2", children: [
+        /* @__PURE__ */ o("div", { className: `price-text ${I ? "new-price" : ""}`, children: [
+          b > 0 && y && P !== !0 && $ !== !0 && /* @__PURE__ */ r("div", { children: `${L(b)} ${q(y)}` }),
+          I && /* @__PURE__ */ r("div", { className: `${b > 0 ? "full-price" : ""}`, children: `${L(l)} ${q(y)}` }),
+          P && x,
+          $ && Q
+        ] }),
+        /* @__PURE__ */ r("div", { className: "location-text", children: H })
+      ] }),
+      Z === !0 && /* @__PURE__ */ r(ke, { sponsoredText: ee })
+    ] })
+  );
+}), Be = M(({}, s) => /* @__PURE__ */ o(Y, { className: "product-card", children: [
+  /* @__PURE__ */ r("img", { className: "skeleton-img" }),
+  /* @__PURE__ */ o("div", { className: "wrapper-card-1", children: [
+    /* @__PURE__ */ r("div", { className: "skeleton-title" }),
+    /* @__PURE__ */ r("div", { className: "skeleton-tags" })
+  ] }),
+  /* @__PURE__ */ o("div", { className: "wrapper-card-1", children: [
+    /* @__PURE__ */ r("div", { className: "skeleton-price" }),
+    /* @__PURE__ */ r("div", { className: "skeleton-sponsored" })
+  ] })
+] })), Te = ({ limit: s = 5, isLoading: m = !1, keyPrefix: c }) => /* @__PURE__ */ r(C, { children: Array.from({ length: s }, (w, l) => /* @__PURE__ */ r(
+  Be,
+  {
+    isLoading: m
+  },
+  `${c}-skeleton-product-card-${l}`
+)) }), qe = ({
+  children: s,
+  fallbackComponent: m = /* @__PURE__ */ r(C, {}),
+  isLoading: c = !1,
+  limit: w,
+  keyPrefix: l
+}) => /* @__PURE__ */ r(de, { fallbackComponent: m, children: c === !0 ? /* @__PURE__ */ r(
+  Te,
+  {
+    isLoading: c,
+    limit: w,
+    keyPrefix: l
+  }
+) : s });
+export {
+  Le as D,
+  qe as S
+};