@lanaco/lnc-react-ui 4.0.226 → 4.0.228

package/dist/index-zIt6TVeg.js

@@ -0,0 +1,753 @@
+import { jsxs as t, jsx as r, Fragment as O } from "react/jsx-runtime";
+import { forwardRef as se, useState as ee, useRef as re, useEffect as je, cloneElement as ne, Suspense as xe } from "react";
+import { s as k } from "./emotion-styled.browser.esm-DfbrHHed.js";
+import { d as x } from "./breakpoints-BubDitvo.js";
+import { t as F, n as Me, b as Re, m as j, p as oe, G as te, l as ie } from "./utils-BUdHa0nB.js";
+import { P as Ge } from "./index-D6_3Q8lN.js";
+import V from "./Badge.js";
+import Le from "./Popover.js";
+import Te from "./PopoverTrigger.js";
+import Ae from "./PopoverContent.js";
+import { u as qe } from "./useDetectMobile-B0Jog4jQ.js";
+import ae from "./Icon.js";
+import { S as Xe, e as Ye, d as He, a as I, c as Ke } from "./style-BFPpppS9.js";
+const Qe = k.a`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  cursor: pointer;
+  overflow: hidden;
+  width: 100%;
+  text-decoration: none;
+  color: var(--gray-950, #14161a);
+  position: relative;
+
+  & .prevent-el {
+    height: 0;
+    width: 0;
+  }
+  & .seller {
+    text-transform: uppercase;
+    ${F()}
+    color: var(--gray-500);
+    font-size: 0.625rem;
+    font-weight: 400;
+  }
+
+  & .wrapper-card-1 {
+    display: flex;
+    flex-direction: column;
+    gap: 0.12rem;
+  }
+
+  & .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);
+    }
+  }
+
+  & .card-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    ${Me(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${F()}
+    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);
+      ${F()}
+    }
+  }
+
+  & .location-text {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: var(--gray-600, #676e79);
+    ${F()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  & .tags-popover__trigger {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  & .campaign-badges {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.75rem;
+    display: flex;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    z-index: 1;
+    width: max-content;
+    max-width: 7rem;
+  }
+
+  & .campaign-badge {
+    width: fit-content;
+    height: 1.5rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1rem;
+    padding-inline: 0.15rem;
+
+    i {
+      ::before {
+        margin-inline: 0;
+      }
+    }
+  }
+
+  & .campaign-badge-adddiscount {
+    background-color: #f43f5e;
+  }
+
+  & .campaign-badge-freeshipping {
+    background-color: #1abc86;
+  }
+
+  & .campaign-badge-freequantity {
+    background-color: #2691d9;
+  }
+
+  & .campaign-badge-includegifts {
+    background-color: #8b5cf6;
+  }
+
+  & .campaign-badge-urgent {
+    background-color: #e11d48;
+    width: fit-content;
+    padding-inline: 0.5rem;
+  }
+
+  @media ${x("S")} {
+    overflow: visible;
+
+    & .wrapper-card-3 {
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      overflow-x: scroll;
+      width: 8.875rem !important;
+
+      -webkit-overflow-scrolling: touch;
+      ::-webkit-scrollbar {
+        -webkit-appearance: none;
+      }
+      -ms-overflow-style: none;
+      /* Internet Explorer 10+ */
+      scrollbar-width: none;
+      /* Firefox */
+
+      &::-webkit-scrollbar {
+        display: none;
+        /* Safari and Chrome */
+      }
+
+      & > div {
+        & > div {
+          width: 8.875rem !important;
+        }
+      }
+    }
+
+    & .tags-popover__trigger {
+      overflow-x: scroll;
+      justify-content: flex-start;
+      width: 100%;
+
+      -webkit-overflow-scrolling: touch;
+      ::-webkit-scrollbar {
+        -webkit-appearance: none;
+      }
+      -ms-overflow-style: none;
+      /* Internet Explorer 10+ */
+      scrollbar-width: none;
+      /* Firefox */
+
+      &::-webkit-scrollbar {
+        display: none;
+        /* Safari and Chrome */
+      }
+    }
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+
+      & .full-price {
+        display: none;
+      }
+    }
+  }
+
+  &:hover .product-image-wrapper img {
+    transform: scale(1.1);
+  }
+`, Je = k.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;
+
+    align-items: center;
+    justify-content: center;
+
+    width: 2.25rem;
+    height: 2.25rem;
+    border-radius: ${(c) => Re(c.theme, "curved")};
+    border: 1px solid var(--gray-95008);
+    background-color: white;
+    color: var(--gray-950);
+    transition: transform 0.2s ease;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+
+    i {
+      color: #14161a;
+      font-size: 1.1rem;
+      line-height: 1;
+    }
+  }
+
+  &: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 ${x("S")} {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+
+    & .bookmarking-btn {
+      display: flex;
+      bottom: 0.5rem;
+      top: unset;
+    }
+  }
+`, Ze = k.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);
+    }
+  }
+`, er = k.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);
+  }
+`, rr = se(({ sponsoredText: c = "Sponsored" }, f) => /* @__PURE__ */ t(er, { ref: f, className: "sponsored-line", children: [
+  /* @__PURE__ */ r("i", { className: "mng-lnc-paw2" }),
+  /* @__PURE__ */ r("span", { children: c })
+] })), nr = "Vehicles_Cars", or = "Vehicles_Motorcycles", tr = "Vehicles_Trucks", ir = "Vehicles_AgriculturalMachines_Tractors", ar = "Vehicles_ConstructionMachines", sr = "Vehicles_Bus", lr = "Vehicles_Campers", cr = "RealEstates_", a = {
+  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: ""
+  }
+}, C = {
+  ADDDISCOUNT: " mng-lnc-percentage",
+  URGENT: " mng-lnc-flash",
+  FREEQUANTITY: " mng-lnc-3d-software",
+  INCLUDEGIFTS: " mng-lnc-gift",
+  FREESHIPPING: " mng-lnc-delivery--parcel"
+}, Pr = se((c, f) => {
+  const {
+    uuid: d,
+    sellerUuid: U,
+    name: le,
+    price: S = 0,
+    sellingPrice: y,
+    currency: _,
+    isNegotiable: P,
+    isFree: $,
+    imageUrl: ce,
+    location: de,
+    sponsored: me,
+    imageComponent: M,
+    freeText: pe = "Free",
+    negotiableText: ge = "Negotiable",
+    tags: o = [],
+    categoryCode: E,
+    categoryName: ue,
+    condition: R,
+    quantity: B,
+    trade: G,
+    sponsoredText: he,
+    forCart: fe,
+    forOrder: ve,
+    contactSeller: we,
+    hasVariants: be,
+    hasQuantities: Ce,
+    status: ye,
+    onBookmark: D = () => {
+    },
+    actionComponent: v,
+    bookmarked: L,
+    bookmarkLists: _e,
+    metadata: w,
+    sellerName: T,
+    nameSlug: z,
+    onSelectCard: Ne = () => {
+    },
+    activeSalesPackages: m,
+    urgentText: ke = "Urgent",
+    LinkComponent: A,
+    hasFreeShipping: Se
+  } = c, Pe = A || "a", W = qe(), $e = () => {
+    var l;
+    if (!j(v)) return /* @__PURE__ */ r(O, {});
+    const e = v, n = (l = v == null ? void 0 : v.props) == null ? void 0 : l.children, i = ne(n, {
+      key: `bookmark_pr__${L}`,
+      bookmarked: L,
+      productUuid: d,
+      onAddToBookmark: () => D(!0, d),
+      onRemoveFromBookmark: () => D(!1, d),
+      bookmarkedUuidList: _e,
+      sellerUuid: U,
+      handleBookmarking: D,
+      forCart: fe,
+      forOrder: ve,
+      contactSeller: we,
+      hasVariants: be,
+      status: ye,
+      quantity: B,
+      hasQuantities: Ce,
+      productBasicInfo: {
+        uuid: d,
+        price: S,
+        sellingPrice: y,
+        categoryCode: E,
+        categoryName: ue,
+        currency: _,
+        isNegotiable: P,
+        isFree: $
+      }
+    });
+    return ne(e, void 0, i);
+  }, q = [
+    nr,
+    or,
+    tr,
+    ir,
+    ar,
+    sr,
+    lr,
+    cr
+  ].some(
+    (e) => E == null ? void 0 : E.includes(e)
+  ), [Ee, X] = ee(!1), ze = () => {
+    X(!0);
+  }, Fe = () => {
+    X(!1);
+  }, s = re(null), u = re([]), [Ve, Y] = ee(o == null ? void 0 : o.length), Ie = () => {
+    var l, b, N;
+    if (!(s != null && s.current) || ((l = u == null ? void 0 : u.current) == null ? void 0 : l.length) === 0) return;
+    if (W) {
+      Y(o == null ? void 0 : o.length);
+      return;
+    }
+    const e = (b = s == null ? void 0 : s.current) == null ? void 0 : b.offsetWidth;
+    let n = 0, i = 0;
+    for (let p = 0; p < (o == null ? void 0 : o.length); p++) {
+      const h = ((N = u == null ? void 0 : u.current[p]) == null ? void 0 : N.offsetWidth) || 0, g = n + h + 4;
+      if (g <= e)
+        n += g, i++;
+      else
+        break;
+    }
+    Y(i);
+  };
+  je(() => {
+    const e = s == null ? void 0 : s.current;
+    if (!e) return;
+    const n = new ResizeObserver(() => {
+      Ie();
+    });
+    return n.observe(e), () => {
+      n.disconnect();
+    };
+  }, [o, W]);
+  const Oe = () => {
+    var e;
+    return /* @__PURE__ */ r("div", { className: "tags-popover__trigger", children: (e = o == null ? void 0 : o.slice(0, Ve)) == null ? void 0 : e.map((n, i) => {
+      var h, g, Q, J, Z;
+      const l = ((h = a == null ? void 0 : a[n == null ? void 0 : n.code]) == null ? void 0 : h.icon) ?? ((g = a == null ? void 0 : a.default) == null ? void 0 : g.icon) ?? "", b = ((Q = n == null ? void 0 : n.measurementUnit) == null ? void 0 : Q.symbol) ?? ((J = a == null ? void 0 : a[n == null ? void 0 : n.code]) == null ? void 0 : J.measure) ?? "", p = [(n == null ? void 0 : n.value) ?? ((Z = n == null ? void 0 : n.multiOptions) == null ? void 0 : Z[0]) ?? "", b].filter(Boolean).join(" ");
+      return /* @__PURE__ */ t(
+        V,
+        {
+          ref: (We) => u.current[i] = We,
+          className: "tag",
+          children: [
+            /* @__PURE__ */ r("i", { className: l }),
+            p
+          ]
+        },
+        `detailed-products-section-tag__${i + 1}`
+      );
+    }) });
+  }, Ue = () => /* @__PURE__ */ r("div", { className: "tags-popover__content", children: o == null ? void 0 : o.map((e, n) => {
+    var p, h, g;
+    const i = ((p = e == null ? void 0 : e.measurementUnit) == null ? void 0 : p.symbol) ?? ((h = a == null ? void 0 : a[e == null ? void 0 : e.code]) == null ? void 0 : h.measure) ?? "", b = [(e == null ? void 0 : e.value) ?? ((g = e == null ? void 0 : e.multiOptions) == null ? void 0 : g[0]) ?? "", i].filter(Boolean).join(" "), N = e == null ? void 0 : e.name;
+    return /* @__PURE__ */ t("div", { children: [
+      /* @__PURE__ */ r("span", { className: "tags-popover__name", children: `${N}: ` }),
+      /* @__PURE__ */ r("span", { className: "tags-popover__value", children: b })
+    ] }, `detailed-products-section-tag-dropdown__${n + 1}`);
+  }) }), Be = () => /* @__PURE__ */ t(O, { children: [
+    R && /* @__PURE__ */ r(V, { className: "tag", children: R }, "detailed-products-section-tag__condition"),
+    B && /* @__PURE__ */ r(V, { className: "tag", children: B }, "detailed-products-section-tag__quantity"),
+    G && /* @__PURE__ */ r(V, { className: "tag", children: G }, "detailed-products-section-tag__trade")
+  ] }), H = S > 0 && _ && P !== !0 && $ !== !0 && S !== y, De = m == null ? void 0 : m.some(
+    (e) => (e == null ? void 0 : e.salesPackageCode) === "FreeShipping"
+  ), K = Se === !0 && !De;
+  return (
+    // <LandingPageProductCardSkeleton />
+    /* @__PURE__ */ t(
+      Qe,
+      {
+        ref: s,
+        className: "product-card",
+        "data-accessor": w == null ? void 0 : w.accessor,
+        name: w == null ? void 0 : w.name,
+        onClick: (e) => Ne(e, s),
+        as: Pe,
+        ...A ? {
+          to: `/product/${ie(z) ? `${z}-` : ""}${d}`
+        } : {
+          href: `/product/${ie(z) ? `${z}-` : ""}${d}`
+        },
+        children: [
+          /* @__PURE__ */ t(Je, { className: "product-image-wrapper", children: [
+            j(v) && /* @__PURE__ */ r(
+              "div",
+              {
+                className: "prevent-el",
+                onClick: (e) => {
+                  e == null || e.preventDefault(), e == null || e.stopPropagation();
+                },
+                children: /* @__PURE__ */ r($e, {})
+              }
+            ),
+            j(M) ? M : /* @__PURE__ */ r(Ge, { src: ce })
+          ] }),
+          (K || m && m.length > 0) && /* @__PURE__ */ t("div", { className: "campaign-badges", children: [
+            K && /* @__PURE__ */ r("div", { className: "campaign-badge campaign-badge-freeshipping", children: /* @__PURE__ */ r(ae, { icon: C == null ? void 0 : C.FREESHIPPING, sizeInUnits: "1rem" }) }),
+            m == null ? void 0 : m.map((e, n) => {
+              var i, l;
+              return /* @__PURE__ */ t(
+                "div",
+                {
+                  className: `campaign-badge campaign-badge-${(i = e == null ? void 0 : e.salesPackageCode) == null ? void 0 : i.toLowerCase()}`,
+                  children: [
+                    (e == null ? void 0 : e.salesPackageCode) !== "Urgent" && /* @__PURE__ */ r(
+                      ae,
+                      {
+                        icon: C == null ? void 0 : C[(l = e == null ? void 0 : e.salesPackageCode) == null ? void 0 : l.toUpperCase()],
+                        sizeInUnits: "1rem"
+                      }
+                    ),
+                    (e == null ? void 0 : e.salesPackageCode) === "Urgent" && /* @__PURE__ */ r(O, { children: ke })
+                  ]
+                },
+                n
+              );
+            })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
+            /* @__PURE__ */ r("div", { className: "seller", title: T, children: T }),
+            /* @__PURE__ */ r("div", { className: "card-title", children: le })
+          ] }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "wrapper-card-3",
+              onClick: (e) => {
+                e == null || e.preventDefault(), e == null || e.stopPropagation();
+              },
+              children: [
+                q && /* @__PURE__ */ r(
+                  "div",
+                  {
+                    ...W ? {} : {
+                      onMouseEnter: ze,
+                      onMouseLeave: Fe
+                    },
+                    children: /* @__PURE__ */ t(Le, { placement: "bottom", open: Ee, children: [
+                      /* @__PURE__ */ r(Te, { children: Oe() }),
+                      /* @__PURE__ */ r(Ae, { style: { all: "unset" }, children: /* @__PURE__ */ r(Ze, { children: Ue() }) })
+                    ] })
+                  }
+                ),
+                !q && Be()
+              ]
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "wrapper-card-2", children: [
+            /* @__PURE__ */ t("div", { className: `price-text ${H ? "new-price" : ""}`, children: [
+              y > 0 && _ && P !== !0 && $ !== !0 && /* @__PURE__ */ r("div", { children: `${oe(y)} ${te(_)}` }),
+              H && /* @__PURE__ */ r("div", { className: `${y > 0 ? "full-price" : ""}`, children: `${oe(S)} ${te(_)}` }),
+              P && ge,
+              $ && pe
+            ] }),
+            /* @__PURE__ */ r("div", { className: "location-text", children: de })
+          ] }),
+          me === !0 && /* @__PURE__ */ r(rr, { sponsoredText: he })
+        ]
+      }
+    )
+  );
+}), dr = k(Xe)`
+  @media ${x("S")} {
+    & > div {
+      &:nth-of-type(even) {
+        display: none;
+      }
+    }
+  }
+`, mr = ({ keyPrefix: c }) => /* @__PURE__ */ r(dr, { children: [1, 2, 3, 4, 5].map((f) => /* @__PURE__ */ t(Ye, { gap: "0.5rem", children: [
+  /* @__PURE__ */ r(He, { size: "13.75rem" }),
+  /* @__PURE__ */ r(I, { width: "100%" }),
+  /* @__PURE__ */ t(Ke, { gap: "0.5rem", children: [
+    /* @__PURE__ */ r(I, { width: "100%", height: "1rem" }),
+    /* @__PURE__ */ r(I, { width: "100%", height: "1rem" })
+  ] }),
+  /* @__PURE__ */ r(I, { width: "100%", height: "2rem" })
+] }, `${c}-${f}`)) }), $r = ({
+  keyPrefix: c,
+  isLoading: f = !1,
+  fallbackComponent: d = /* @__PURE__ */ r(O, {}),
+  children: U
+}) => /* @__PURE__ */ r(xe, { fallbackComponent: d, children: f === !0 ? /* @__PURE__ */ r(mr, { keyPrefix: c }) : U });
+export {
+  Pr as D,
+  $r as S
+};