@lanaco/lnc-react-ui 4.0.139 → 4.0.141

package/dist/suspense-product-card-detailed-BA06QK8a.cjs

@@ -0,0 +1,265 @@
+"use strict";const e=require("react/jsx-runtime"),l=require("react"),o=require("./utils-Dl9xPH4c.cjs"),x=require("./emotion-styled.browser.esm-BtEseadx.cjs"),le=require("./index-BueKsXT8.cjs"),_=require("./Badge.cjs"),de=require("./Popover.cjs"),me=require("./PopoverTrigger.cjs"),pe=require("./PopoverContent.cjs"),ge=require("./useDetectMobile-zkbzoOGV.cjs"),A=require("./consts-goSZX3xP.cjs"),X=x.styled.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;
+
+    &.tag-sponsored {
+      & 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;
+    ${o.truncateTextInRows(2)}
+  }
+
+  & .price-text {
+    font-size: 1rem;
+    font-weight: 600;
+    ${o.truncateText()}
+    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);
+    ${o.truncateText()}
+  }
+
+  & .tags-wrapper {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  & .skeleton-img {
+    background-color: ${o.linearGradientAnimation("-90deg")};
+    border-radius: 0.75rem;
+    border: 1px solid white;
+  }
+
+  & .skeleton-title {
+    background-color: ${o.linearGradientAnimation("-90deg")};
+    width: 100%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-tags {
+    background-color: ${o.linearGradientAnimation("-90deg")};
+    width: 80%;
+    height: 1.5rem;
+  }
+
+  & .skeleton-price {
+    background-color: ${o.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 2.5rem;
+  }
+
+  & .skeleton-sponsored {
+    background-color: ${o.linearGradientAnimation("-90deg")};
+    width: 50%;
+    height: 1rem;
+  }
+
+  & .tags-popover__trigger {
+    display: flex;
+    gap: 0.25rem;
+  }
+
+  @media (max-width: ${A.MOBILE_SIZE_PX+"px"}) {
+    overflow: visible;
+
+    & .tags-popover__trigger {
+      flex-wrap: wrap;
+    }
+
+    & .price-text {
+      font-size: 0.875rem;
+      font-weight: 600;
+
+      & .full-price {
+        display: none;
+      }
+    }
+  }
+
+  &:hover .product-image-wrapper img {
+    transform: scale(1.1);
+  }
+`,ue=x.styled.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.MOBILE_SIZE_PX+"px"}) {
+    & img {
+      width: 8.875rem;
+      height: 8.875rem;
+      min-width: 8.875rem;
+      min-height: 8.875rem;
+      object-fit: cover;
+    }
+
+    & .bookmarking-btn {
+      display: flex;
+    }
+  }
+`,he=x.styled.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);
+    }
+  }
+`,fe=x.styled.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);
+  }
+`,ve=l.forwardRef(({sponsoredText:m="Sponsored"},w)=>e.jsxs(fe,{ref:w,className:"sponsored-line",children:[e.jsx("i",{className:"mng-lnc-paw2"}),e.jsx("span",{children:m})]})),we="Vehicles_Cars",be="Vehicles_Motorcycles",ye="Vehicles_Trucks",ke="Vehicles_AgriculturalMachines_Tractors",je="Vehicles_ConstructionMachines",_e="Vehicles_Bus",xe="Vehicles_Campers",Ne="RealEstates_",i={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:""}},Ce=l.forwardRef((m,w)=>{const{uuid:p,title:y,price:u=0,sellingPrice:k,currency:j,isNegotiable:N,isFree:C,imageUrl:L,location:U,sponsored:O,imageComponent:V,onSelectCard:Y=()=>{},freeText:K="Free",negotiableText:Z="Negotiable",tags:t=[],categoryCode:P,condition:$,quantity:S,trade:E,sponsoredText:H,onBookmark:B=()=>{},bookmarkComponent:z,bookmarked:M,bookmarkLists:J}=m,T=ge.useDetectMobile(),Q=()=>o.isDefined(z)?l.cloneElement(z,{key:`bookmark_pr__${M}`,bookmarked:M,productUuid:p,onAddToBookmark:()=>B(!0,p),onRemoveFromBookmark:()=>B(!1,p),bookmarkedUuidList:J}):e.jsx(e.Fragment,{}),q=[we,be,ye,ke,je,_e,xe,Ne].some(r=>P==null?void 0:P.includes(r)),[ee,F]=l.useState(!1),re=()=>{F(!0)},ne=()=>{F(!1)},a=l.useRef(null),h=l.useRef([]),[W,oe]=l.useState(t==null?void 0:t.length),te=()=>{var f,c,b;if(!(a!=null&&a.current)||((f=h==null?void 0:h.current)==null?void 0:f.length)===0)return;const r=(c=a==null?void 0:a.current)==null?void 0:c.offsetWidth;let n=0,s=0;for(let d=0;d<(t==null?void 0:t.length);d++){const v=((b=h==null?void 0:h.current[d])==null?void 0:b.offsetWidth)||0,g=n+v+4;if(g<=r)n+=g,s++;else break}oe(s)};l.useEffect(()=>{const r=a==null?void 0:a.current;if(!r)return;const n=new ResizeObserver(()=>{te()});return n.observe(r),()=>{n.disconnect()}},[t]);const se=()=>{var r;return e.jsx("div",{className:"tags-popover__trigger",children:(r=t==null?void 0:t.slice(0,W))==null?void 0:r.map((n,s)=>{var v,g,I,R,G;const f=((v=i==null?void 0:i[n==null?void 0:n.code])==null?void 0:v.icon)??((g=i==null?void 0:i.default)==null?void 0:g.icon)??"",c=((I=n==null?void 0:n.measurementUnit)==null?void 0:I.symbol)??((R=i==null?void 0:i[n==null?void 0:n.code])==null?void 0:R.measure)??"",d=[(n==null?void 0:n.value)??((G=n==null?void 0:n.multiOptions)==null?void 0:G[0])??"",c].filter(Boolean).join(" ");return T?e.jsxs("div",{className:"tag-mobile",children:[d,s<W-1?" · ":""]}):e.jsxs(_,{ref:ce=>h.current[s]=ce,className:`tag ${O?"tag-sponsored":""}`,children:[e.jsx("i",{className:f}),d]},`detailed-products-section-tag__${s+1}`)})})},ie=()=>e.jsx("div",{className:"tags-popover__content",children:t==null?void 0:t.map((r,n)=>{var d,v,g;const s=((d=r==null?void 0:r.measurementUnit)==null?void 0:d.symbol)??((v=i==null?void 0:i[r==null?void 0:r.code])==null?void 0:v.measure)??"",c=[(r==null?void 0:r.value)??((g=r==null?void 0:r.multiOptions)==null?void 0:g[0])??"",s].filter(Boolean).join(" "),b=r==null?void 0:r.name;return e.jsxs("div",{children:[e.jsx("span",{className:"tags-popover__name",children:`${b}: `}),e.jsx("span",{className:"tags-popover__value",children:c})]},`detailed-products-section-tag-dropdown__${n+1}`)})}),ae=()=>{var r;if(T){const n=[$,S,E];return(r=n==null?void 0:n.filter(s=>o.isDefinedNotEmptyString(s)))==null?void 0:r.map((s,f,c)=>e.jsxs("div",{className:"tag-mobile",children:[s,f<(c==null?void 0:c.length)-1?" · ":""]}))}return e.jsxs(e.Fragment,{children:[$&&e.jsx(_,{className:"tag",children:$},"detailed-products-section-tag__condition"),S&&e.jsx(_,{className:"tag",children:S},"detailed-products-section-tag__quantity"),E&&e.jsx(_,{className:"tag",children:E},"detailed-products-section-tag__trade")]})},D=u>0&&j&&N!==!0&&C!==!0&&u!==k;return e.jsxs(X,{ref:a,className:"product-card",onClick:Y,children:[e.jsxs(ue,{className:"product-image-wrapper",children:[e.jsx(Q,{}),o.isDefined(V)?V:e.jsx(le.ProductImageWrapper,{src:L})]}),e.jsx("div",{className:"wrapper-card-1",children:e.jsx("div",{className:"card-title",children:y})}),e.jsxs("div",{className:"wrapper-card-3",children:[q&&e.jsx("div",{...T?{}:{onMouseEnter:re,onMouseLeave:ne},children:e.jsxs(de,{placement:"bottom",open:ee,children:[e.jsx(me,{children:se()}),e.jsx(pe,{style:{all:"unset"},children:e.jsx(he,{children:ie()})})]})}),!q&&ae()]}),e.jsxs("div",{className:"wrapper-card-2",children:[e.jsxs("div",{className:`price-text ${D?"new-price":""}`,children:[k>0&&j&&N!==!0&&C!==!0&&e.jsx("div",{children:`${o.formatPrice(k)} ${o.GetCurrencySymbol(j)}`}),D&&e.jsx("div",{className:`${k>0?"full-price":""}`,children:`${o.formatPrice(u)} ${o.GetCurrencySymbol(j)}`}),N&&Z,C&&K]}),e.jsx("div",{className:"location-text",children:U})]}),O===!0&&e.jsx(ve,{sponsoredText:H})]})}),Pe=l.forwardRef(({},m)=>e.jsxs(X,{className:"product-card",children:[e.jsx("img",{className:"skeleton-img"}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-title"}),e.jsx("div",{className:"skeleton-tags"})]}),e.jsxs("div",{className:"wrapper-card-1",children:[e.jsx("div",{className:"skeleton-price"}),e.jsx("div",{className:"skeleton-sponsored"})]})]})),$e=({limit:m=5,isLoading:w=!1,keyPrefix:p})=>e.jsx(e.Fragment,{children:Array.from({length:m},(y,u)=>e.jsx(Pe,{isLoading:w},`${p}-skeleton-product-card-${u}`))}),Se=({children:m,fallbackComponent:w=e.jsx(e.Fragment,{}),isLoading:p=!1,limit:y,keyPrefix:u})=>e.jsx(l.Suspense,{fallbackComponent:w,children:p===!0?e.jsx($e,{isLoading:p,limit:y,keyPrefix:u}):m});exports.DetailedProductCard=Ce;exports.SuspenseDetailedProductCard=Se;