@lanaco/lnc-react-ui/dist/DetailedProductsSection.js

React component library

import { jsx as o, Fragment as K, jsxs as l } from "react/jsx-runtime";
import { memo as W, forwardRef as j, useMemo as z } from "react";
import { s as G } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as w } from "./breakpoints-BubDitvo.js";
import V from "./Button.js";
import { l as c } from "./utils-BUdHa0nB.js";
import { u as H } from "./useDetectMobile-B0Jog4jQ.js";
import { T as J } from "./style-CP_urKvc.js";
import { D as X, S as Y } from "./index-CZkKSTfr.js";
import { S as Z } from "./index-CCwfh-7A.js";
import { S as x } from "./index-ChXypC-5.js";
const ee = G.div`
  display: grid;
  grid-template-columns: ${(r) => `repeat(${r.limit},  minmax(0, 1fr))`};
  gap: 1.25rem;

  & .button-link {
    white-space: nowrap;
  }

  & .section__options {
    & button {
      &:focus {
        outline: none;
        outline-offset: 0;
      }
    }
  }

  @media ${w("M")} {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  @media ${w("S")} {
    display: flex;
    gap: 1rem;
    overflow-x: auto;

    -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 */
    }
  }
`, L = W(X), ue = j((r, F) => {
  const {
    icon: d,
    title: T,
    buttonLink: m,
    items: t,
    buttonText: u,
    limit: n = 4,
    onSelectCard: p = () => {
    },
    onButtonAction: O = () => {
    },
    isLoading: g = !1,
    getImage: b = () => {
    },
    negotiableText: f,
    freeText: S,
    options: i = [],
    isLoadingOptions: U = !1,
    selectedOption: B,
    onSelectOption: D = () => {
    },
    onRemoveOption: M = () => {
    },
    allOptionsEnabled: q = !1,
    allOptionsLabel: A = "All",
    onSelectAllOptions: Q = () => {
    },
    optionLabel: R = "label",
    optionValue: _ = "value",
    optionCode: $ = "code",
    sponsoredText: k,
    onBookmark: h = () => {
    },
    actionComponent: y,
    componentName: C,
    LinkComponent: N,
    urgentText: v
  } = r, P = H(), E = z(() => /* @__PURE__ */ o(K, { children: P === !0 ? t == null ? void 0 : t.map((e, a) => /* @__PURE__ */ o(
    L,
    {
      name: e == null ? void 0 : e.name,
      price: e == null ? void 0 : e.price,
      sellingPrice: e == null ? void 0 : e.sellingPrice,
      currency: e == null ? void 0 : e.currency,
      image: e == null ? void 0 : e.image,
      sellerUuid: e == null ? void 0 : e.sellerUuid,
      uuid: e == null ? void 0 : e.uuid,
      sponsored: e == null ? void 0 : e.sponsored,
      imageComponent: e == null ? void 0 : e.imageComponent,
      nameSlug: e == null ? void 0 : e.nameSlug,
      onSelectCard: (I, s) => p({
        uuid: e == null ? void 0 : e.uuid,
        nameSlug: e == null ? void 0 : e.nameSlug,
        cardRef: s
      }),
      sellerName: e == null ? void 0 : e.sellerName,
      imageUrl: b(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
      isFree: e == null ? void 0 : e.isFree,
      isNegotiable: e == null ? void 0 : e.isNegotiable,
      negotiableText: f,
      freeText: S,
      tags: e == null ? void 0 : e.tags,
      categoryCode: e == null ? void 0 : e.categoryCode,
      condition: e == null ? void 0 : e.condition,
      quantity: e == null ? void 0 : e.quantity,
      hasQuantities: e == null ? void 0 : e.hasQuantities,
      status: e == null ? void 0 : e.status,
      trade: e == null ? void 0 : e.trade,
      forCart: e == null ? void 0 : e.forCart,
      sponsoredText: k,
      onBookmark: h,
      actionComponent: y,
      bookmarked: e == null ? void 0 : e.bookmarked,
      bookmarkLists: e == null ? void 0 : e.bookmarkLists,
      metadata: { accessor: e == null ? void 0 : e.accessor, name: C },
      LinkComponent: N,
      activeSalesPackages: e == null ? void 0 : e.activeSalesPackages,
      urgentText: v,
      hasFreeShipping: e == null ? void 0 : e.hasFreeShipping
    },
    a
  )) : t == null ? void 0 : t.slice(0, n).map((e, a) => /* @__PURE__ */ o(
    L,
    {
      name: e == null ? void 0 : e.name,
      price: e == null ? void 0 : e.price,
      sellingPrice: e == null ? void 0 : e.sellingPrice,
      currency: e == null ? void 0 : e.currency,
      image: e == null ? void 0 : e.image,
      sellerUuid: e == null ? void 0 : e.sellerUuid,
      uuid: e == null ? void 0 : e.uuid,
      location: e == null ? void 0 : e.location,
      sponsored: e == null ? void 0 : e.sponsored,
      imageComponent: e == null ? void 0 : e.imageComponent,
      onSelectCard: (I, s) => p({
        uuid: e == null ? void 0 : e.uuid,
        nameSlug: e == null ? void 0 : e.nameSlug,
        cardRef: s
      }),
      nameSlug: e == null ? void 0 : e.nameSlug,
      imageUrl: b(e == null ? void 0 : e.image, e == null ? void 0 : e.uuid, e == null ? void 0 : e.sellerUuid) || null,
      isFree: e == null ? void 0 : e.isFree,
      isNegotiable: e == null ? void 0 : e.isNegotiable,
      negotiableText: f,
      freeText: S,
      tags: e == null ? void 0 : e.tags,
      categoryCode: e == null ? void 0 : e.categoryCode,
      condition: e == null ? void 0 : e.condition,
      quantity: e == null ? void 0 : e.quantity,
      hasQuantities: e == null ? void 0 : e.hasQuantities,
      status: e == null ? void 0 : e.status,
      trade: e == null ? void 0 : e.trade,
      forCart: e == null ? void 0 : e.forCart,
      sponsoredText: k,
      onBookmark: h,
      actionComponent: y,
      bookmarked: e == null ? void 0 : e.bookmarked,
      bookmarkLists: e == null ? void 0 : e.bookmarkLists,
      metadata: { accessor: e == null ? void 0 : e.accessor, name: C },
      sellerName: e == null ? void 0 : e.sellerName,
      LinkComponent: N,
      activeSalesPackages: e == null ? void 0 : e.activeSalesPackages,
      urgentText: v,
      hasFreeShipping: e == null ? void 0 : e.hasFreeShipping
    },
    a
  )) }), [t, P, n]);
  return /* @__PURE__ */ l(J, { ref: F, className: "lp-section lp-detailed-products-section", children: [
    /* @__PURE__ */ l("div", { className: "regular-title", children: [
      /* @__PURE__ */ l("div", { className: "regular-title-text", children: [
        c(d) && /* @__PURE__ */ o("i", { className: d }),
        /* @__PURE__ */ o("span", { children: T })
      ] }),
      c(m) && c(u) && !g && /* @__PURE__ */ o(
        V,
        {
          type: "button",
          btnType: "tinted",
          color: "neutral",
          onClick: (e) => {
            var a;
            (a = e == null ? void 0 : e.target) == null || a.blur(), O(m);
          },
          borderRadius: "curved",
          className: "button-link",
          children: u
        }
      )
    ] }),
    /* @__PURE__ */ o(x, { isLoading: U, children: i && (i == null ? void 0 : i.length) > 0 && /* @__PURE__ */ o(
      Z,
      {
        items: i,
        selectedIds: B,
        onRemove: M,
        onSelect: D,
        allButton: q,
        onSelectAll: Q,
        labelKey: R,
        valueKey: _,
        codeKey: $,
        noMargin: !0,
        productsToolbarName: A,
        noGradient: !0,
        className: "section__options"
      }
    ) }),
    /* @__PURE__ */ o(
      Y,
      {
        isLoading: g,
        keyPrefix: "detailed-products-skeleton",
        children: /* @__PURE__ */ o(ee, { limit: n, children: E })
      }
    )
  ] });
});
export {
  ue as default
};