@lanaco/lnc-react-ui/dist/SalesCampaignsSection.cjs

React component library

"use strict";const n=require("react/jsx-runtime"),a=require("react"),S=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),w=require("./utils-BK6B_Y9X.cjs"),I=require("./breakpoints-CcVm-gVm.cjs"),ue=require("./Icon.cjs"),le=require("./ShopAvatar-CV3lj34D.cjs"),$e=require("./Badge.cjs"),me=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),_e=require("./NoListingsPhoto-B6zrIBwB.cjs"),ce=require("./IconButton.cjs"),he=require("./useDetectMobile-DYV6V1yw.cjs"),ke=require("./index-DMbNpyIV.cjs"),Ce=require("./motion-B_VPZaJq.cjs"),p=require("./style-17Ie7d9D.cjs"),Ne=S.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1.25rem;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

  ${r=>r!=null&&r.sponsored?`
        border: 1px solid transparent;
        background: 
          linear-gradient(#ffffff, #ffffff) padding-box,
          linear-gradient(to bottom, #fcd34d, #fef3c7) border-box;
      `:`
        border: 1px solid var(--gray-200, #e4e9f0);
        background: #ffffff;
      `}

  &.horizontal-campaign-item {
    flex-direction: row;

    & img {
      max-width: 13.75rem;
      max-height: 13.75rem;
    }
  }

  @media ${I.down("S")} {
    width: 100%;
    gap: 0;

    &.horizontal-campaign-item {
      flex-direction: column;

      & img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
`,Ie=S.styled.div`
  border-radius: ${r=>w.getBorderRadiusValueWithUnits(r.theme,"edged")};
  cursor: pointer;

  position: relative;
  overflow: hidden;

  & img {
    max-width: 100%;
    min-width: 100%;
    max-height: 100%;
    min-height: 100%;
    object-fit: cover;

    transform: scale(1.1);
    transition: var(--transition, all 0.3s ease);
    &:hover {
      transform: scale(1.25);
    }
  }

  @media ${I.down("S")} {
    width: 14.5rem;
  }
`,De=S.styled.div`
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  color: var(--gray-950, #14161a);
  font-weight: 400;
  font-size: 0.875rem;

  & .campaign-title {
    font-weight: 500;
    font-size: 0.75rem;
    line-height: 1rem;
    letter-spacing: 0.1rem;
    color: var(--teal-500, #009ea8);
  }

  & .campaign-title-text {
    font-weight: 600;
    font-size: 1.375rem;
    leading-trim: none;
    line-height: 1.75rem;
  }

  & .text-block-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  & .title-block-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    padding-top: 0.5rem;
  }

  & .timestamp-text {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.01563rem;
    gap: 0.25rem;
    padding-top: 0.75rem;
    color: var(--gray-700, #4e555f);

    & .listings-text {
      color: var(--gray-700, #4e555f);
    }

    & .duration-text {
      color: var(--gray-700, #4e555f);

      &.urgent {
        color: var(--primary-500, #f59e0b);
      }

      &.starts-in {
        color: var(--teal-500, #009ea8);
      }
    }

    & .countdown-timer {
      color: var(--primary-500, #f59e0b);
    }
  }

  & .profile-item:hover {
    background-color: transparent;
  }

  & .campaign-date {
    font-weight: 400;
    font-size: 0.875rem;
    leading-trim: none;
    line-height: 1.25rem;
    color: var(--gray-600, #676e79);
  }

  @media ${I.down("S")} {
    padding: 1rem 0 0 0;

    & .campaign-title-text {
      font-weight: 600;
      font-size: 1rem;
      line-height: 1.5rem;
    }

    & .campaign-date {
      display: none;
    }

    & .timestamp-text {
      line-height: 1rem;
      padding-top: 0.5rem;
    }

    & .text-block-wrapper {
      gap: 0.25rem;
    }
    & .text-block-wrapper {
      gap: 0.25rem;
    }
  }
`,de=(r=!1,t=!1,s=!1)=>`
    display: flex;
    ${t?"flex-wrap: wrap;":""}
    ${t?"":"flex-wrap: nowrap;"}
    ${r?"align-items: center;":""}
    ${s?"justify-content: center;":""}
  `,ze=S.styled.a`
  text-decoration: none;
  color: var(--gray-950);
  ${r=>r.hasPermission===!0&&"cursor: pointer"};

  &:focus,
  &:hover,
  &:visited,
  &:link,
  &:active {
    text-decoration: none;
  }

  & .icon,
  .name {
    text-decoration: none;
  }

  ${de(!0)}
  gap: 0.5rem;
  color: var(--gray-950, #14161a);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5rem;
  border-radius: ${r=>w.getBorderRadiusValueWithUnits(r.theme,"slight")};
  transition: all 0.25s ease;
  & .description {
    font-size: 0.85rem;
    color: var(--gray-600, #676e79);
    line-height: 1rem;
    font-weight: 400;
  }
  & .logo-wrapper {
    ${de(!0,!1,!0)}
    flex-shrink: 0;
    border-radius: 999px;

    & img,
    .img-placeholder {
      border-radius: 999px;
      object-fit: cover;
      height: 2.25rem;
      width: 2.25rem;
      background-color: var(--gray-200, #dddfe4);
    }

    & .no-image {
      background: white;
    }
  }

  & .name {
    flex-grow: 15;
    font-size: 1.055rem;
  }

  & .notifications-number .badge {
    font-size: 0.75rem;
  }

  & .badge {
    max-height: 1.25rem;
    min-height: 1.25rem;
    padding: 0.375rem;
    line-height: 1rem;
  }

  &:hover {
    cursor: pointer;
    background-color: var(--gray-95080, #14161acc);
  }

  @media ${I.down("S")} {
    padding: 0;
    font-size: 0.875rem;
  }
`,Te=S.styled.div`
  position: absolute;
  top: 0.5rem;
  ${r=>r.alignToLeft===!0?"left: 0.5rem;":"right: 0.5rem;"}
  display: flex;
  gap: 0.25rem;
`,Pe=S.styled.div`
  border-radius: ${r=>w.getBorderRadiusValueWithUnits(r.theme,r.borderRadius||"slight")};
  background-color: ${r=>r==null?void 0:r.color};
  color: white;
  height: 1.5rem;
  min-width: 1.5rem;
  width: ${r=>r.fitContent===!0?"fit-content":"1.5rem"};
  ${r=>r.fitContent===!0&&"padding: 0 0.1rem;"};
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: ${r=>r.padding};
  & i {
    font-size: 0.813rem;
  }
`,Re=a.forwardRef(({src:r,...t},s)=>{const o=a.useRef();return a.useEffect(()=>{var u;const i=m=>{m.target.src=le.DefaultShopImage,m.onerror=null};return(u=o==null?void 0:o.current)==null||u.addEventListener("error",i),()=>{var m;(m=o==null?void 0:o.current)==null||m.removeEventListener("error",i)}},[]),n.jsx(a.Fragment,{ref:s,children:w.isDefinedNotEmptyString(r)?n.jsx("img",{ref:o,src:r,...t}):n.jsx("img",{src:le.DefaultShopImage,...t})})}),Ee=r=>{const{uuid:t,hasPermission:s=!0,isUser:o,image:i,imageComponent:u,name:m,notifications:j=0,color:l="primary",size:f="large",style:c,disabled:k,onClick:g=()=>{},isActive:D,className:v,shopCategory:y,themeData:$,LinkComponent:C}=r,z=C||"a",x={theme:me.useTheme(),color:l,size:f,style:c,disabled:k};return a.createElement(ze,{onClick:h=>{h.stopPropagation(),s===!0&&(g==null||g())},...x,key:m,className:`profile-item ${v}`,hasPermission:s,isActive:D,themeColor:($==null?void 0:$.code)||"transparent",as:z,...C?{to:`/${o?"user":"shop"}/${t}`}:{href:`/${o?"user":"shop"}/${t}`}},n.jsx("div",{className:"logo-wrapper",children:w.isDefined(u)?u:i}),n.jsxs("div",{children:[n.jsx("div",{className:"name",children:m}),!o&&n.jsx("div",{className:"description",children:y}),j>0&&n.jsx("div",{className:"notifications-number",children:n.jsx($e,{className:"badge",color:"danger",size:"small",children:j>99?"99+":j})})]}))},ge=r=>{if(r!==void 0){const t=new Date(r),s=t.getFullYear(),o=t.getMonth()+1;return`${String(t.getDate()).padStart(2)}. ${o}. ${s}.`}},qe=a.forwardRef((r,t)=>{var ie;const s=me.useTheme(),{uuid:o,shopUuid:i,title:u="",coverPhoto:m,onSelect:j,startDate:l,endDate:f,salesPackages:c,shopName:k,shopCategory:g,shopImage:D,shopImageComponent:v,className:y,onSelectCard:$=()=>{},onSelectShop:C=()=>{},upcoming:z=!1,upcomingCampaignText:d,campaignSingleText:x,salesCampaignTypes:h=[],startsInPrefixTextPlural:A,startsinSuffixTextPlural:F,startsInPrefixTextSingular:U,startsinSuffixTextSingular:H,endsInPrefixTextPlural:X,endsinSuffixTextPlural:ee,endsInPrefixTextSingular:Y,endsinSuffixTextSingular:ne,endedText:Z,themeData:re,numberOfListings:T,numberOfListingsTextSingular:G,numberOfListingsTextPlural:M,metadata:e,LinkComponent:E,sponsored:te,...J}=r,pe=E||"a",oe=a.useRef(),q=w.getDayNumberPrecise(l,f),B=q!==-1&&(q==null?void 0:q.isEnded)===!0,O=q!==-1&&!B,L=w.calcDaysUntil(l),se=w.normalizeDate(f),ae=se?new Date(se):null,fe=new Date,K=ae?ae.getTime()-fe.getTime():null,V=K!==null&&K>0&&K<24*60*60*1e3,xe=(b,R,N,_,P)=>N===1?`${b} ${N} ${_}`:`${R} ${N} ${P}`,be=()=>{if(!f)return null;const b=w.normalizeDate(f),R=b?new Date(b):null;if(!R)return null;const N=we,_=R.getTime()-N.getTime();if(_<=0)return null;const P=Math.floor(_/(1e3*60*60)),Se=Math.floor(_%(1e3*60*60)/(1e3*60)),je=Math.floor(_%(1e3*60)/1e3);return{hours:P,minutes:Se,seconds:je}},[we,ve]=a.useState(new Date);a.useEffect(()=>{if(!V)return;const b=setInterval(()=>{ve(new Date)},1e3);return()=>clearInterval(b)},[V]);const W=V?be():null,Q=!!(O&&!B&&V&&W),ye=Q||B||!O&&L!==null&&L>0;return n.jsxs(Ne,{ref:oe,theme:s,className:y,name:e==null?void 0:e.name,"data-accessor":e==null?void 0:e.accessor,onClick:b=>$(b,oe),as:pe,...E?{to:`/shops/${i}/campaign/${o}`}:{href:`/shops/${i}/campaign/${o}`},sponsored:te,...J,children:[n.jsxs(Ie,{theme:s,children:[n.jsx("img",{src:m||_e.NoListingsPhoto}),n.jsx(Te,{children:c==null?void 0:c.map((b,R)=>{var N,_;return n.jsx(Pe,{color:(N=h==null?void 0:h.find(P=>P.value===b))==null?void 0:N.color,theme:s,children:n.jsx(ue,{icon:(_=h==null?void 0:h.find(P=>P.value===b))==null?void 0:_.icon})},`package__${R}`)})})]}),n.jsxs(De,{theme:s,children:[n.jsx("div",{className:"text-block-wrapper",children:n.jsxs("div",{className:"title-block-wrapper",children:[n.jsx("div",{className:"campaign-title",children:(ie=z?d:x)==null?void 0:ie.toUpperCase()}),n.jsx("div",{className:"campaign-title-text",children:u}),f&&l&&n.jsxs("div",{className:"campaign-date",children:[ge(l)," - ",ge(f)]}),n.jsxs("div",{className:"timestamp-text",children:[T>0&&n.jsxs("span",{className:"listings-text",children:[T," ",T===1?G:M,ye?" ∙ ":""]}),n.jsx("span",{className:`duration-text ${Q?"urgent":""} ${O?"":"starts-in"}`,children:Q?n.jsxs("div",{className:"countdown-timer",children:[Y," ",W.hours.toString().padStart(2,"0"),":",W.minutes.toString().padStart(2,"0"),":",W.seconds.toString().padStart(2,"0")]}):B?Z||"Završena":!O&&L!==null&&L>0?xe(U,A,L,H,F):null})]})]})}),n.jsx(Ee,{hasPermission:!0,image:n.jsx(Re,{src:D}),imageComponent:v,themeData:re,isActive:!0,isUser:!1,name:k,shopCategory:g,uuid:i,onClick:()=>C(i),LinkComponent:E})]})]})}),Le=S.styled.div`
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  align-self: stretch;
  position: relative;

  & .scrollable-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;

    & .scrollable-section__title {
      display: flex;
      align-items: center;
      gap: 0.5rem;

      & .title__text {
        color: var(--gray-950, #14161a);
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 2rem;
      }
    }
  }

  & .scrollable-section__navigation {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    position: absolute;
    top: 0;
    right: 0;
  }

  &.itemless {
    & .scrollable-section__content {
      &:has(.campaign-item:nth-child(3):last-child) {
        & .campaign-item {
          &:last-child {
            grid-column: span 2;
          }
        }
      }
    }
  }

  @media ${I.down("S")} {
    gap: 1.25rem;

    & .scrollable-section__header {
      & .scrollable-section__title {
        & .title__text {
          font-size: 1.375rem;
          line-height: 1.75rem;
        }
      }
    }
  }
`,Ue=S.styled(Ce.motion.div)`
  display: grid;
  grid-template-columns: repeat(${r=>r==null?void 0:r.numOfColumns}, 1fr);
  gap: 1.5rem;
  width: 100%;

  @media ${I.only("M")} {
    grid-template-columns: repeat(${r=>(r==null?void 0:r.tabletNumOfColumns)??2}, 1fr);
  }

  @media ${I.down("S")} {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    justify-content: flex-start;
    gap: 1rem;

    -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 */
    }
  }
`,Me=a.forwardRef(({icon:r,title:t,numOfSlides:s=4,tabletNumOfSlides:o,showNavigation:i=!0,hasNextPage:u=!1,className:m="",handleFetchNextPage:j=()=>{},children:l},f)=>{const[c,k]=a.useState(0),[g,D]=a.useState(1),v=he.useDetectMobile(),y=(l==null?void 0:l.length)??1;a.useEffect(()=>{const d=()=>{D(s)};return window.addEventListener("resize",d),d(),()=>window.removeEventListener("resize",d)},[]);const $=v?l:l==null?void 0:l.slice(c,c+g),C=d=>{var h;(h=d==null?void 0:d.target)==null||h.blur();const x=c+g;x<y&&k(x),x+g>=y&&u&&j()},z=d=>{var x;(x=d==null?void 0:d.target)==null||x.blur(),c-g>=0&&k(c-g)};return n.jsxs(Le,{ref:f,className:m,children:[n.jsx("div",{className:"scrollable-section__header",children:n.jsxs("div",{className:"scrollable-section__title",children:[w.isDefinedNotEmptyString(r)&&n.jsx(ue,{icon:r,color:"primary",sizeInUnits:"1.5rem",className:"title__icon"}),w.isDefinedNotEmptyString(t)&&n.jsxs("div",{className:"title__text",children:[" ",t]})]})}),n.jsxs(Ue,{numOfColumns:s,tabletNumOfColumns:o,...!v&&{animate:{x:0,opacity:1},initial:{x:10,opacity:0}},className:"scrollable-section__content",children:[$,v&&u&&n.jsx(ke.InfiniteScrollEndElement,{onIsVisible:j})]},`scrollable-section__content-${c}`),i&&y>g&&!v&&n.jsxs("div",{className:"scrollable-section__navigation",children:[n.jsx(ce,{icon:"angle-left",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:c===0,onClick:z}),n.jsx(ce,{icon:"angle-right",borderRadius:"curved",btnType:"tinted",color:"neutral",className:"navigation__arrow",disabled:c+g>=y,onClick:C})]})]})}),Be=S.styled.div`
  display: flex;
  flex: 1;
  width: 100%;
  max-height: ${r=>r==null?void 0:r.maxHeight};
  border-radius: 1.25rem;

  &:hover {
    cursor: pointer;
  }

  & img {
    width: 100%;
    height: 100%;
    border-radius: 1.25rem;
    object-fit: cover;
  }
`,Oe=a.forwardRef(({sectionName:r,imageUrl:t,maxHeight:s="16.25rem",className:o="",handleClick:i=()=>{}},u)=>n.jsx(Be,{ref:u,maxHeight:s,onClick:i,className:`itemless-banner ${o}`,children:n.jsx("img",{src:t,alt:`itemless-banner__${r}`})})),Ve=S.styled(p.SkeletonAnimationContainer)`
  @media ${I.down("S")} {
    flex-direction: column;

    & .skeleton__square {
      width: 100%;
      height: 100%;
    }

    & > div {
      &:not(:first-of-type) {
        display: none;
      }
    }
  }
`,We=({keyPrefix:r})=>n.jsx(Ve,{children:[1,2,3,4].map(t=>n.jsx(p.SkeletonContainer,{children:n.jsxs(p.SkeletonColumnContainer,{gap:"0.5rem",children:[n.jsx(p.SkeletonSquare,{size:"13.75rem",className:"skeleton__square"}),n.jsx(p.SkeletonRect,{width:"5rem",height:"1rem"}),n.jsx(p.SkeletonRect,{width:"100%",height:"2rem"}),n.jsx(p.SkeletonRect,{width:"5rem",height:"0.5rem"}),n.jsx(p.SkeletonEmpty,{}),n.jsxs(p.SkeletonContainer,{gap:"0.5rem",alignItems:"center",children:[n.jsx(p.SkeletonCircle,{size:"3rem",className:"skeleton__circle"}),n.jsxs(p.SkeletonColumnContainer,{children:[n.jsx(p.SkeletonRect,{width:"5rem",height:"1rem"}),n.jsx(p.SkeletonRect,{width:"3rem",height:"1rem"})]})]})]})},`${r}-${t}`))}),Ae=({keyPrefix:r,isLoading:t=!1,fallbackComponent:s=n.jsx(n.Fragment,{}),children:o})=>n.jsx(a.Suspense,{fallbackComponent:s,children:t===!0?n.jsx(We,{keyPrefix:r}):o}),Fe=a.memo(qe),He=a.forwardRef(({sellerType:r="Shop",items:t=[],title:s,icon:o,isLoading:i,onSelectCard:u=()=>{},onSelectShop:m=()=>{},getImage:j=()=>{},campaignSingleText:l,upcomingCampaignText:f,salesCampaignTypes:c=[],startsInPrefixTextPlural:k,startsinSuffixTextPlural:g,startsInPrefixTextSingular:D,startsinSuffixTextSingular:v,endsInPrefixTextPlural:y,endsinSuffixTextPlural:$,endsInPrefixTextSingular:C,endsinSuffixTextSingular:z,endedText:d,numOfSlides:x=4,showNavigation:h=!0,numberOfListingsTextSingular:A,numberOfListingsTextPlural:F,itemlessImageUrl:U,itemlessMaxHeight:H,handleItemlessLink:X=()=>{},componentName:ee,hasNextPage:Y=!1,handleFetchNextPage:ne=()=>{},LinkComponent:Z},re)=>{const T=he.useDetectMobile(),G=a.useMemo(()=>{let M=t==null?void 0:t.map((e,E)=>n.jsx(Fe,{className:`campaign-item ${(t==null?void 0:t.length)===1?"horizontal-campaign-item":""}`,coverPhoto:j(e==null?void 0:e.coverPhoto,(e==null?void 0:e.uuid)||(e==null?void 0:e.campaignUuid)),description:e==null?void 0:e.description,endDate:e==null?void 0:e.endDate,salesPackages:e==null?void 0:e.salesPackages,sellerType:r,shopImage:e==null?void 0:e.profileImage,shopImageComponent:e==null?void 0:e.profileImageComponent,shopName:e==null?void 0:e.shopName,shopUuid:e==null?void 0:e.shopUuid,shopCategory:e==null?void 0:e.shopCategory,startDate:e==null?void 0:e.startDate,title:e==null?void 0:e.name,uuid:e==null?void 0:e.campaignUuid,onSelectCard:(te,J)=>u(e==null?void 0:e.campaignUuid,e==null?void 0:e.shopUuid,J),onSelectShop:()=>m(e==null?void 0:e.shopUuid),campaignSingleText:l,upcomingCampaignText:f,upcoming:e==null?void 0:e.upcoming,salesCampaignTypes:c,startsInPrefixTextPlural:k,startsinSuffixTextPlural:g,startsInPrefixTextSingular:D,startsinSuffixTextSingular:v,endsInPrefixTextPlural:y,endsinSuffixTextPlural:$,endsInPrefixTextSingular:C,endsinSuffixTextSingular:z,endedText:d,themeData:e==null?void 0:e.themeData,numberOfListings:e==null?void 0:e.numberOfListings,numberOfListingsTextSingular:A,numberOfListingsTextPlural:F,metadata:{name:ee,accessor:e==null?void 0:e.accessor},LinkComponent:Z,sponsored:e==null?void 0:e.sponsored},`campaign__item__${E}__${e==null?void 0:e.startDate}___${e==null?void 0:e.endDate}`));return(t==null?void 0:t.length)<4&&!T&&U?[...M,n.jsx(Oe,{imageUrl:U,className:"campaign-item",maxHeight:H,handleClick:X},"itemless-campaign-section-banner")]:M},[t]);return n.jsx(Ae,{isLoading:i,keyPrefix:"sales-campaign-skeleton",children:n.jsx(Me,{icon:o,title:s,numOfSlides:x,tabletNumOfSlides:2,showNavigation:h,hasNextPage:Y,handleFetchNextPage:ne,className:`lp-section lp-sales-campaigns-section${(t==null?void 0:t.length)<4&&!T?" itemless":""}`,children:G},`sales-campaign-section__${T}`)})});module.exports=He;