@lanaco/lnc-react-ui/dist/index-CZkKSTfr.js

React component library

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 oe, 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 ne, G as te, l as ie } from "./utils-BUdHa0nB.js";
import { P as Ge } from "./index-DxYmn1al.js";
import V from "./Badge.js";
import Le from "./Popover.js";
import Ae from "./PopoverTrigger.js";
import Te 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-NhzYtIA7.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;

    /* Always visible (no longer hover-only on desktop) so the
       add-to-cart / save action is discoverable at first glance. */
    display: flex;

    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);
      background-color: white;
    }

    i {
      color: #14161a;
      font-size: 1.1rem;
      line-height: 1;
    }
  }

  & 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 })
] })), or = "Vehicles_Cars", nr = "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: n = [],
    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: A,
    nameSlug: z,
    onSelectCard: Ne = () => {
    },
    activeSalesPackages: m,
    urgentText: ke = "Urgent",
    LinkComponent: T,
    hasFreeShipping: Se
  } = c, Pe = T || "a", W = qe(), $e = () => {
    var l;
    if (!j(v)) return /* @__PURE__ */ r(O, {});
    const e = v, o = (l = v == null ? void 0 : v.props) == null ? void 0 : l.children, i = oe(o, {
      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 oe(e, void 0, i);
  }, q = [
    or,
    nr,
    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(n == null ? void 0 : n.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(n == null ? void 0 : n.length);
      return;
    }
    const e = (b = s == null ? void 0 : s.current) == null ? void 0 : b.offsetWidth;
    let o = 0, i = 0;
    for (let p = 0; p < (n == null ? void 0 : n.length); p++) {
      const h = ((N = u == null ? void 0 : u.current[p]) == null ? void 0 : N.offsetWidth) || 0, g = o + h + 4;
      if (g <= e)
        o += g, i++;
      else
        break;
    }
    Y(i);
  };
  je(() => {
    const e = s == null ? void 0 : s.current;
    if (!e) return;
    const o = new ResizeObserver(() => {
      Ie();
    });
    return o.observe(e), () => {
      o.disconnect();
    };
  }, [n, W]);
  const Oe = () => {
    var e;
    return /* @__PURE__ */ r("div", { className: "tags-popover__trigger", children: (e = n == null ? void 0 : n.slice(0, Ve)) == null ? void 0 : e.map((o, i) => {
      var h, g, Q, J, Z;
      const l = ((h = a == null ? void 0 : a[o == null ? void 0 : o.code]) == null ? void 0 : h.icon) ?? ((g = a == null ? void 0 : a.default) == null ? void 0 : g.icon) ?? "", b = ((Q = o == null ? void 0 : o.measurementUnit) == null ? void 0 : Q.symbol) ?? ((J = a == null ? void 0 : a[o == null ? void 0 : o.code]) == null ? void 0 : J.measure) ?? "", p = [(o == null ? void 0 : o.value) ?? ((Z = o == null ? void 0 : o.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: n == null ? void 0 : n.map((e, o) => {
    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__${o + 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,
        ...T ? {
          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, o) => {
              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 })
                  ]
                },
                o
              );
            })
          ] }),
          /* @__PURE__ */ t("div", { className: "wrapper-card-1", children: [
            /* @__PURE__ */ r("div", { className: "seller", title: A, children: A }),
            /* @__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(Ae, { children: Oe() }),
                      /* @__PURE__ */ r(Te, { 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: `${ne(y)} ${te(_)}` }),
              H && /* @__PURE__ */ r("div", { className: `${y > 0 ? "full-price" : ""}`, children: `${ne(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
};