@zeniai/web-components 3.17.1 → 3.17.2

package/dist/InvitePageListView-DnkW6cg1.cjs

@@ -0,0 +1,739 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),S=require("react"),i=require("@emotion/styled"),t=require("./index-gTpRqqAW.cjs"),J=require("./gift-box-C0LFMmJB.cjs"),re=require("./BusyIndication-C9yxbWHz.cjs"),se=require("./calculateSize-ymGwmJ-m.cjs"),m=require("@zeniai/client-epic-state"),ne=require("./MoreMenuButton-BcK9mc1G.cjs"),Q=(e,r)=>{S.useEffect(()=>{const s=e.current;if(window.IntersectionObserver==null)return;const c=new IntersectionObserver(([n])=>{r&&r(n.isIntersecting)},{root:null,rootMargin:t.Space.sp0,threshold:.1});return s&&c.observe(s),()=>{s&&c.unobserve(s)}})},ae={pageTitleMarginLeft:new t.ResponsiveSized(t.sp[4],t.sp[6])},le=i.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${e=>ae.pageTitleMarginLeft.valuePx(e.windowSize)};
+  margin-top: ${t.Space.sp4};
+`,ce=i.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 154px;
+`,de=i(t.SvgEmail)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,pe=i(t.SvgCopy)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+`,xe=i(t.SvgTickRoundFill)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${t.Colors.success};
+`;function X({referralLink:e,onInviteClick:r,onCopyReferral:s,setShowNavButton:c}){const[,n]=t.useCopyToClipboard(),[a,l]=S.useState(!1),d=t.useWindowSizeContext(),p=o.useTheme(),g=()=>{s(),a||(n(e.toString()),l(!0))};S.useEffect(()=>{a===!0&&setTimeout(()=>{l(!1)},2e3)},[a]);const u=S.useRef(null);Q(u,c);const h=t.appLocale.getLocalizedStrings().rewardsPage.rewardsCard;return o.jsxRuntimeExports.jsxs(le,{windowSize:d,children:[o.jsxRuntimeExports.jsx(ce,{ref:u,children:o.jsxRuntimeExports.jsx(t.Button,{variant:"secondary",label:h.inviteViaEmail,onClick:r,prefixIcon:o.jsxRuntimeExports.jsx(de,{}),textStyle:{...t.textStyles.smallRegular.cssObject,color:`${p.colors.hero}`},style:{borderRadius:`${t.Space.sp1}`,border:`1px solid ${p.colors.grey1}`,backgroundColor:"transparent",padding:`${t.Space.sp2} 12px`,minWidth:"154px",flex:"1 1 auto",display:"flex",justifyContent:"center",alignItems:"center"}})}),o.jsxRuntimeExports.jsx(t.Button,{variant:"secondary",label:a?h.copied:h.copyReferralLink,onClick:g,prefixIcon:a?o.jsxRuntimeExports.jsx(xe,{}):o.jsxRuntimeExports.jsx(pe,{}),textStyle:{...t.textStyles.smallRegular.cssObject,color:`${p.colors.hero}`},style:{borderRadius:`${t.Space.sp1}`,border:`1px solid ${p.colors.grey1}`,backgroundColor:"transparent",padding:`${t.Space.sp2} ${a?"47px":"12px"}`,minWidth:"154px",flex:"1 1 auto",display:"flex",justifyContent:"center",alignItems:"center"}})]})}const L={logoWidth:new t.ResponsiveSized(95,135),minWidth:new t.ResponsiveSized(256,360),maxWidth:new t.ResponsiveSized(270,380)},Z={title:new t.ResponsiveSizedStyle("smallRegular","largeRegular"),cardDetail:new t.ResponsiveSizedStyle("h5Regular","h2Regular")};function ee({planAmount:e}){const r=t.useWindowSizeContext(),{rewardsPage:{rewardsCard:s}}=t.appLocale.getLocalizedStrings();return o.jsxRuntimeExports.jsxs(ue,{windowSize:r,children:[o.jsxRuntimeExports.jsxs(me,{children:[o.jsxRuntimeExports.jsx(Se,{windowSize:r,children:s.bonus}),o.jsxRuntimeExports.jsx(we,{windowSize:r,children:t.amountToString("0,0",e)})]}),o.jsxRuntimeExports.jsx(ge,{windowSize:r,children:o.jsxRuntimeExports.jsx(he,{})})]})}const ue=i.div`
+  display: flex;
+  height: 100%;
+  min-width: ${e=>L.minWidth.valuePx(e.windowSize)};
+  max-width: ${e=>L.maxWidth.valuePx(e.windowSize)};
+  justify-content: space-between;
+  background: ${e=>`linear-gradient(247.21deg, ${e.theme.colors.rewardsPromoColor1}
+     -2.39%, ${e.theme.colors.rewardsPromoColor2} 105.08%)`};
+  box-shadow: ${e=>`0 ${t.Space.sp3} 22px 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${e=>e.windowSize==="small"?t.Space.sp2:`${t.Space.sp2} 0 0 ${t.Space.sp2}`};
+  &:hover {
+    box-shadow: ${e=>`0 2px ${t.Space.sp1} ${e.theme.colors.dropShadowHover}`};
+  }
+`,me=i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: 28px;
+`,ge=i.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 12px;
+  position: relative;
+  width: ${e=>L.logoWidth.valuePx(e.windowSize)};
+`,he=i(J.SvgGiftBox)`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+`,Se=i(t.StyledText)`
+  ${e=>`${Z.title.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.graphColor17};
+`,we=i(t.StyledText)`
+  color: ${e=>e.theme.colors.brandColorGold};
+  ${e=>`${Z.cardDetail.style(e.windowSize)}`};
+`;function $e({rewardsPlan:e,onInviteClick:r,onHowItWorksClick:s,onCopyReferral:c}){const n=t.useWindowSizeContext(),[,a]=t.useCopyToClipboard(),[l,d]=S.useState(!1),p=()=>{c(),l||(a(e.referralLink.toString()),d(!0))};S.useEffect(()=>{l===!0&&setTimeout(()=>{d(!1)},2e3)},[l]);const{rewardsPage:{referAndEarn:g,rewardsCard:u,statisticsCard:{knowMore:h}}}=t.appLocale.getLocalizedStrings();return o.jsxRuntimeExports.jsxs(fe,{children:[o.jsxRuntimeExports.jsxs(je,{children:[o.jsxRuntimeExports.jsxs(Te,{children:[o.jsxRuntimeExports.jsx(ve,{children:g}),o.jsxRuntimeExports.jsx(Ce,{children:u.rewardsSummary[e.planName].replace("__reward-amount__",t.amountToString("0,0",e.referrerAmount))}),o.jsxRuntimeExports.jsx(be,{onClick:s,children:h})]}),o.jsxRuntimeExports.jsxs(ye,{children:[o.jsxRuntimeExports.jsxs(Ee,{onClick:r,children:[o.jsxRuntimeExports.jsx(ze,{}),u.inviteViaEmail]}),o.jsxRuntimeExports.jsx(ke,{onClick:p,isCopied:l,children:l?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(Ie,{}),u.copied]}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(Le,{}),u.copyReferralLink]})})]})]}),n==="medium-compact"||n==="medium-regular"?null:o.jsxRuntimeExports.jsx(Re,{children:o.jsxRuntimeExports.jsx(ee,{planAmount:e.referrerAmount})})]})}const fe=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  padding: ${t.Space.sp6} 0;
+  margin: 0 ${t.Space.sp7};
+  background-color: ${e=>e.theme.colors.grey3};
+  background-image: ${e=>`url(https://storage.googleapis.com/zeni-apis.appspot.com/images/rewards-background-${e.theme.mode==="light"?"l":"d"}.svg)`};
+  background-position: 110% 200%;
+  background-size: 60% 80%;
+  background-repeat: no-repeat;
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${t.Space.sp1} solid ${e=>e.theme.colors.grey5};
+  border-radius: ${t.Space.sp2};
+`,je=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-left: ${t.Space.sp6};
+  margin-right: ${t.Space.sp2};
+`,ye=i.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${t.Space.sp3};
+  flex: 1 1 auto;
+`,Re=i.div`
+  display: flex;
+  height: 220px;
+`,ve=i(t.H5Regular)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${t.Space.sp3};
+`,Ce=i(t.LargeRegular)`
+  color: ${e=>e.theme.mode==="light"?e.theme.colors.brandColorSapphire:e.theme.colors.brandColorJade};
+  margin-bottom: ${t.Space.sp3};
+  max-width: 450px;
+`,be=i(t.LargeMedium)`
+  margin-bottom: ${t.Space.sp5};
+  color: ${e=>e.theme.colors.primary};
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.champion};
+  }
+`,Ee=i(t.StandardRegularBtn)`
+  border: 1px solid ${e=>e.theme.colors.primary};
+  border-radius: ${t.Space.sp2};
+  background-color: ${e=>e.theme.colors.primary};
+  color: ${e=>e.theme.colors.grey5};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${t.Space.sp2} ${t.Space.sp3};
+  min-width: 187px;
+  &:hover {
+    background-color: ${e=>e.theme.colors.champion};
+    border: 1px solid ${e=>e.theme.colors.champion};
+  }
+`,ze=i(t.SvgEmail)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  margin-right: ${t.Space.sp2};
+  color: ${e=>e.theme.colors.grey5};
+`,Te=i.div`
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  align-items: flex-start;
+`,ke=i(t.StandardRegularBtn)`
+  border: 1px solid ${e=>e.theme.colors.primary};
+  border-radius: ${t.Space.sp2};
+  background-color: ${e=>e.isCopied?e.theme.colors.champion:e.theme.colors.primary};
+  color: ${e=>e.theme.colors.grey5};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${t.Space.sp2} ${t.Space.sp3};
+  min-width: 187px;
+  &:hover {
+    background-color: ${e=>e.theme.colors.champion};
+    border: 1px solid ${e=>e.theme.colors.champion};
+  }
+`,Le=i(t.SvgCopy)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  margin-right: ${t.Space.sp2};
+`,Ie=i(t.SvgTickRoundFill)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  color: ${t.Colors.success};
+  margin-right: ${t.Space.sp1};
+`;function Pe({rewardsPlan:e,onInviteClick:r,onHowItWorksClick:s,onCopyReferral:c}){const{rewardsPage:{referAndEarn:n,rewardsCard:a,statisticsCard:{knowMore:l}}}=t.appLocale.getLocalizedStrings();return o.jsxRuntimeExports.jsxs(Me,{children:[o.jsxRuntimeExports.jsxs(_e,{children:[o.jsxRuntimeExports.jsx(Ae,{children:n}),o.jsxRuntimeExports.jsx(De,{children:a.rewardsSummary[e.planName].replace("__reward-amount__",t.amountToString("0,0",e.referrerAmount))}),o.jsxRuntimeExports.jsx(He,{onClick:s,children:l}),o.jsxRuntimeExports.jsx(Be,{children:o.jsxRuntimeExports.jsx(ee,{planAmount:e.referrerAmount})})]}),o.jsxRuntimeExports.jsx(X,{referralLink:e.referralLink,onCopyReferral:c,onInviteClick:r})]})}const Me=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  margin: 0 ${t.Space.sp3};
+`,_e=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  padding: ${t.Space.sp4};
+  background-color: ${e=>e.theme.colors.grey3};
+  background-image: ${e=>`url(https://storage.googleapis.com/zeni-apis.appspot.com/images/rewards-background-${e.theme.mode==="light"?"l":"d"}.svg)`};
+  background-position: 110% 200%;
+  background-size: 100% 80%;
+  background-repeat: no-repeat;
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${t.Space.sp1} solid ${e=>e.theme.colors.grey5};
+  border-radius: ${t.Space.sp2};
+`,Be=i.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 160px;
+  margin: 0 ${t.Space.sp4} ${t.Space.sp4} 0;
+`,Ae=i(t.LargeRegular)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${t.Space.sp2};
+`,De=i(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.champion};
+  margin-bottom: ${t.Space.sp3};
+`,He=i(t.SmallMedium)`
+  margin-bottom: ${t.Space.sp3};
+  color: ${e=>e.theme.mode==="light"?e.theme.colors.brandColorSapphire:e.theme.colors.brandColorJade};
+  cursor: pointer;
+`;function We({rewardsPlan:e,onHowItWorksClick:r,onInviteClick:s,onCopyReferral:c}){return t.useWindowSizeContext()==="small"?o.jsxRuntimeExports.jsx(Pe,{rewardsPlan:e,onInviteClick:s,onHowItWorksClick:r,onCopyReferral:c}):o.jsxRuntimeExports.jsx($e,{rewardsPlan:e,onHowItWorksClick:r,onInviteClick:s,onCopyReferral:c})}function Oe({planAmount:e}){const{rewardsPage:{rewardsCard:r}}=t.appLocale.getLocalizedStrings();return o.jsxRuntimeExports.jsxs(Ve,{children:[o.jsxRuntimeExports.jsxs(Fe,{children:[o.jsxRuntimeExports.jsx(Ke,{children:r.bonus}),o.jsxRuntimeExports.jsx(qe,{children:t.amountToString("0,0",e)})]}),o.jsxRuntimeExports.jsx(Ne,{children:o.jsxRuntimeExports.jsx(Ge,{})})]})}const Ve=i.div`
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  background: ${e=>`linear-gradient(247.21deg, ${e.theme.colors.rewardsPromoColor1}
+     -2.39%, ${e.theme.colors.rewardsPromoColor2} 105.08%)`};
+  box-shadow: ${e=>`0 ${t.Space.sp2} ${t.Space.sp3} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2} 0 0 ${t.Space.sp2};
+  &:hover {
+    box-shadow: ${e=>`0 2px ${t.Space.sp1} ${e.theme.colors.dropShadowHover}`};
+  }
+`,Fe=i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: ${t.Space.sp4};
+`,Ne=i.div`
+  margin-right: ${t.Space.sp2};
+  position: relative;
+`,Ge=i(J.SvgGiftBox)`
+  width: 95px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+`,Ke=i(t.SmallRegular)`
+  color: ${e=>e.theme.colors.graphColor17};
+  text-transform: uppercase;
+`,qe=i(t.H5Regular)`
+  color: ${e=>e.theme.colors.brandColorGold};
+  margin-bottom: ${t.Space.sp2};
+`,Ye={backgroundSize:new t.ResponsiveSized(75,100,75)};function Ue({rewardsPlan:e,onInviteClick:r,setShowNavButton:s,onCopyReferral:c}){const n=o.useTheme(),a=t.useWindowSizeContext(),[,l]=t.useCopyToClipboard(),[d,p]=S.useState(!1),[g,u]=S.useState(!1),h=()=>{c(),d||(l(e.referralLink.toString()),p(!0))},$=()=>{u(!0)},x=()=>{u(!1)};S.useEffect(()=>{d===!0&&setTimeout(()=>{p(!1)},2e3)},[d]);const{rewardsCard:w,referAndEarn:R}=t.appLocale.getLocalizedStrings().rewardsPage,f=S.useRef(null);Q(f,s);const T=g?o.jsxRuntimeExports.jsx(B,{showCopyText:g,isCopied:d,children:w.copyReferralLink}):null;return o.jsxRuntimeExports.jsxs(Je,{windowSize:a,children:[o.jsxRuntimeExports.jsxs(Qe,{children:[o.jsxRuntimeExports.jsx(et,{children:R}),o.jsxRuntimeExports.jsx(tt,{children:w.rewardsSummary[e.planName].replace("__reward-amount__",t.amountToString("0,0",e.referrerAmount))}),o.jsxRuntimeExports.jsxs(Xe,{ref:f,children:[o.jsxRuntimeExports.jsx(t.Button,{variant:"secondary",label:w.inviteViaEmail,onClick:r,prefixIcon:o.jsxRuntimeExports.jsx(ot,{}),textStyle:{...t.textStyles.standardRegular.cssObject},buttonColors:{borderColor:{default:n.colors.primary,hover:n.colors.champion,disabled:n.colors.primary},backgroundColor:{default:n.colors.primary,hover:n.colors.champion,disabled:n.colors.primary},textColor:{default:n.colors.grey5,hover:n.colors.grey5,disabled:n.colors.grey5}},style:{borderRadius:t.Space.sp1,padding:`${t.Space.sp1} 12px`,flex:"1 1 auto",display:"flex",justifyContent:"center",alignItems:"center",marginRight:t.Space.sp3}}),o.jsxRuntimeExports.jsx(it,{onClick:h,onMouseOver:$,onMouseLeave:x,showCopyText:g,isCopied:d,children:o.jsxRuntimeExports.jsx(st,{showCopyText:g,isCopied:d,children:o.jsxRuntimeExports.jsx(rt,{})})}),o.jsxRuntimeExports.jsx(at,{children:d?o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(nt,{}),o.jsxRuntimeExports.jsx(B,{showCopyText:g,isCopied:d,children:w.copied})]}):T})]})]}),a==="medium-compact"||a==="medium-regular"?null:o.jsxRuntimeExports.jsx(Ze,{children:o.jsxRuntimeExports.jsx(Oe,{planAmount:e.referrerAmount})})]})}const Je=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  height: 280px;
+  background-color: ${e=>e.theme.colors.grey3};
+  background-image: ${e=>`url(https://storage.googleapis.com/zeni-apis.appspot.com/images/rewards-background-${e.theme.mode==="light"?"l":"d"}.svg)`};
+  background-position: 160% 110%;
+  background-repeat: no-repeat;
+
+  background-size: ${e=>Ye.backgroundSize.valuePercentage(e.windowSize)};
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${t.Space.sp1} solid ${e=>e.theme.colors.grey5};
+  border-radius: ${t.Space.sp2};
+`,Qe=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-left: ${t.Space.sp6};
+  margin-right: ${t.Space.sp4};
+`,Xe=i.div`
+  display: flex;
+  width: fit-content;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+`,Ze=i.div`
+  display: flex;
+  max-width: 254px;
+  min-width: 240px;
+  height: 160px;
+  flex: 1 1 auto;
+`,et=i(t.H6Regular)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${t.Space.sp2};
+`,tt=i(t.SmallRegular)`
+  color: ${e=>e.theme.mode==="light"?e.theme.colors.brandColorSapphire:e.theme.colors.brandColorJade};
+  max-width: 210px;
+  margin-bottom: ${t.Space.sp5};
+`,ot=i(t.SvgEmail)`
+  height: ${t.Space.sp3};
+  width: ${t.Space.sp3};
+  flex-shrink: 0;
+  color: ${e=>e.theme.colors.grey5};
+`,it=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: ${t.Space.sp5};
+  height: ${t.Space.sp5};
+  cursor: pointer;
+  background-color: ${e=>e.showCopyText||e.isCopied?e.theme.colors.champion:"transparent"};
+  border: 1px solid ${e=>e.theme.colors.primary};
+`,rt=i(t.SvgCopy)`
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  cursor: pointer;
+`,st=i.div`
+  display: flex;
+  align-items: center;
+  color: ${e=>e.showCopyText||e.isCopied?e.theme.colors.grey3:e.theme.colors.primary};
+`,nt=i(t.SvgTickRoundFill)`
+  width: ${t.Space.sp4};
+  height: ${t.Space.sp4};
+  color: ${t.Colors.success};
+  margin-right: ${t.Space.sp1};
+`,at=i.div`
+  position: absolute;
+  bottom: -35px;
+  right: -55px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 150px;
+`,B=i(t.SmallRegular)`
+  color: ${e=>e.isCopied?e.theme.colors.brandColorPearl:t.Colors.heroDark};
+  background-color: ${e=>e.showCopyText||e.isCopied?e.theme.colors.black:"transparent"};
+  padding: ${t.Space.sp1} ${t.Space.sp2};
+  border-radius: ${t.Space.sp1};
+`,lt={height:new t.ResponsiveSized(200,280)},z={earningValue:new t.ResponsiveSizedStyle("h6Regular","h5Regular"),cardTitle:new t.ResponsiveSizedStyle("extraSmallRegular","smallRegular"),buttonText:new t.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function A({pendingBonus:e,earnedBonus:r,pendingReferrals:s,onHowItWorksClick:c}){const{rewardsPage:{statisticsCard:n},common:{strings:a}}=t.appLocale.getLocalizedStrings(),l=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(ct,{windowSize:l,children:[o.jsxRuntimeExports.jsx(dt,{children:o.jsxRuntimeExports.jsx(pt,{windowSize:l,children:n.title})}),o.jsxRuntimeExports.jsxs(xt,{windowSize:l,children:[o.jsxRuntimeExports.jsxs(D,{children:[o.jsxRuntimeExports.jsx(H,{children:n.earned}),o.jsxRuntimeExports.jsx(W,{windowSize:l,type:"earned",children:t.amountToString("0,0",r)})]}),l==="medium-compact"?o.jsxRuntimeExports.jsx(mt,{}):o.jsxRuntimeExports.jsx(ut,{}),o.jsxRuntimeExports.jsxs(D,{children:[o.jsxRuntimeExports.jsx(H,{children:n.pending}),o.jsxRuntimeExports.jsx(W,{windowSize:l,type:"pending",children:t.amountToString("0,0",e)})]})]}),o.jsxRuntimeExports.jsxs(gt,{children:[o.jsxRuntimeExports.jsxs(ht,{windowSize:l,children:[n.pendingReferrals," ",a.colon," ",s]}),o.jsxRuntimeExports.jsxs(wt,{windowSize:l,onClick:c,children:[n.knowMore," ",o.jsxRuntimeExports.jsx(St,{})]})]})]})}const ct=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  height: ${e=>lt.height.valuePx(e.windowSize)};
+  background-color: ${e=>e.theme.colors.grey5};
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/confetti.svg);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  box-shadow: ${e=>`${t.Space.sp0} 2px ${t.Space.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${t.Space.sp1} solid ${e=>e.theme.colors.grey5};
+  border-radius: ${t.Space.sp2};
+`,dt=i.div`
+  display: flex;
+  flex: 0 1 auto;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding-top: ${t.Space.sp4};
+`,pt=i(t.StyledText)`
+  ${e=>`${z.cardTitle.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.champion};
+  margin-bottom: ${t.Space.sp1};
+`,xt=i.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="medium-compact"?"column":"row"};
+  flex: 0 1 auto;
+  align-items: ${e=>e.windowSize==="medium-compact"?"center":"flex-end"};
+  justify-content: space-evenly;
+  width: 100%;
+`,D=i.div`
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+`,ut=i.div`
+  padding-left: ${t.Space.sp1};
+  margin-left: ${t.Space.sp1};
+  height: 50%;
+  border-left: 1px solid ${t.Colors.neutralGrey1Light};
+`,mt=i.div`
+  margin: ${t.Space.sp2} 0;
+  width: ${t.Space.sp5};
+  border-top: 1px solid ${t.Colors.neutralGrey1Light};
+`,H=i(t.StandardRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,W=i(t.StyledText)`
+  ${e=>`${z.earningValue.style(e.windowSize)}`};
+  color: ${e=>e.type==="pending"?t.Colors.alert:t.Colors.success};
+`,gt=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom-right-radius: ${t.Space.sp2};
+  border-bottom-left-radius: ${t.Space.sp2};
+  padding: ${t.Space.sp2} 0;
+  background-color: ${e=>e.theme.colors.grey3};
+`,ht=i(t.StyledText)`
+  ${e=>`${z.buttonText.style(e.windowSize)}`};
+  margin-left: 12px;
+  color: ${e=>e.theme.colors.primary};
+`,St=i(t.SvgArrowRight)`
+  color: ${e=>e.theme.colors.primary};
+  width: 10px;
+  height: 10px;
+  margin-left: ${t.Space.sp1};
+`,wt=i.button`
+  border: none;
+  background-color: transparent;
+  border-bottom-right-radius: ${t.Space.sp2};
+  cursor: pointer;
+  padding-right: 12px;
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${z.buttonText.style(e.windowSize)}`};
+`,$t=90,I=114,te=160,ft=1,jt=58,yt=45,O=(e,r)=>r!=="small"?$t:se.calculateSize(e,{...t.textStyles.standardRegular.cssPartialObject(["fontSize","fontFamily","fontWeight"])}).width<te?I:I+24,{rewardsPage:{header:P},common:{strings:V}}=t.appLocale.getLocalizedStrings(),Rt={key:"invitee_email",value:P.invitee_email,sortOrder:"ascending",width:new t.ResponsiveSized(t.sp[7],t.sp[8],t.sp[8],t.sp[9])},vt={key:"amount",value:P.amount,sortOrder:"ascending",width:new t.ResponsiveSized(t.sp[4],20,20,t.sp[3])},Ct={key:"status",value:P.status,sortOrder:"ascending",width:new t.ResponsiveSized(t.sp[3],t.sp[4],t.sp[4],20)},E=[Rt,Ct,vt],bt=e=>{const r=e.toLowerCase().split(V.space).join(V.underscore);switch(e){case m.StatusTypes.invite_processing:return{value:e,color:t.statusToColorMap.invite_processing.color,borderColor:t.statusToColorMap.invite_processing.borderColor,code:r};case m.StatusTypes.invite_sent:return{value:e,color:t.statusToColorMap.invite_sent.color,borderColor:t.statusToColorMap.invite_sent.borderColor,code:r};case m.StatusTypes.onboarding:return{value:e,color:t.statusToColorMap.onboarding.color,borderColor:t.statusToColorMap.onboarding.borderColor,code:r};case m.StatusTypes.active:case m.StatusTypes.reward_sent:return{value:e,color:t.statusToColorMap.active.color,borderColor:t.statusToColorMap.active.borderColor,code:r};case m.StatusTypes.declined:return{value:e,color:t.statusToColorMap.declined.color,borderColor:t.statusToColorMap.declined.borderColor,code:r};case m.StatusTypes.resend_invite:return{value:e,color:t.statusToColorMap.resend_invite.color,borderColor:t.statusToColorMap.resend_invite.borderColor,code:r};default:return{value:e,color:t.statusToColorMap.in_progress.color,borderColor:"",code:r}}},v={headerLastColumnTopPadding:new t.ResponsiveSized(t.sp[0],t.sp[4]),headerLastColumnRightPadding:new t.ResponsiveSized(t.sp[3],t.sp[11]),headerLastColumnBottomPadding:new t.ResponsiveSized(t.sp[0],t.sp[4]),headerLastColumnLeftPadding:new t.ResponsiveSized(t.sp[3],t.sp[11]),headerHeight:new t.ResponsiveSized(yt,jt)};function Et({companyNameSticky:e,sortConfig:r,onColumnSortConfigChanged:s}){const c=o.useTheme(),n=t.useWindowSizeContext(),[a,l]=S.useState(E);S.useEffect(()=>{const x=[...a];for(const w of x)w.key===r.sortKey?w.sortOrder=r.sortOrder:w.sortOrder="ascending";l(x)},[r.sortKey,r.sortOrder]);const d=(x,w)=>{let R=w;r.sortKey===x&&(R=w==="ascending"?"descending":"ascending"),s(x,R)},p=a.find(x=>x.key===r.sortKey)??a[0],g=x=>a.find(w=>w.key===x)?.value??$.strings.empty,u=a.map(x=>x.key),{rewardsPage:{inviteList:h},common:$}=t.appLocale.getLocalizedStrings();return n==="small"?o.jsxRuntimeExports.jsxs(F,{windowSize:n,companyNameSticky:!1,children:[o.jsxRuntimeExports.jsxs(Tt,{children:[o.jsxRuntimeExports.jsx(Lt,{children:o.jsxRuntimeExports.jsx(kt,{})}),o.jsxRuntimeExports.jsx(t.Picker$1,{title:h.sortBy,placeholder:h.sortBy,pickerValues:u,valueToLabel:g,selectedValue:r.sortKey,onPickerSelectionChanged:x=>{x&&d(m.toReferralListViewSortKeyType(x),"ascending")},optionTextStyle:t.textStyles.smallRegular,selectedOptionColor:c.colors.hero,optionBackgroundColor:c.colors.grey5,downChevronVisible:!1,backgroundColor:c.colors.grey4,titleTextStyle:t.textStyles.smallRegular,titleColor:c.colors.hero})]}),o.jsxRuntimeExports.jsxs(Pt,{onClick:()=>{d(p.key,p.sortOrder)},children:[o.jsxRuntimeExports.jsx(t.SmallRegular,{children:p.value}),o.jsxRuntimeExports.jsx(N,{sortDataValue:r.sortKey,headerdata:p,children:o.jsxRuntimeExports.jsx(G,{})})]})]}):o.jsxRuntimeExports.jsx(F,{companyNameSticky:e,windowSize:n,children:a.map(x=>o.jsxRuntimeExports.jsx(zt,{companyNameSticky:e&&x.key==="invitee_email",sortDataValue:r.sortKey,actualDataValue:x.key,wrapperWidth:x.width,windowSize:n,shouldRightAlign:x.value==="Amount",children:o.jsxRuntimeExports.jsxs(It,{onClick:()=>{d(m.toReferralListViewSortKeyType(x.key),x.sortOrder)},children:[o.jsxRuntimeExports.jsx(t.SmallRegular,{children:x.value}),o.jsxRuntimeExports.jsx(N,{sortDataValue:r.sortKey,headerdata:x,children:o.jsxRuntimeExports.jsx(G,{})})]})},x.key))})}const F=i(t.SmallRegular)`
+  top: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  min-height: ${e=>v.headerHeight.valuePx(e.windowSize)};
+  max-height: ${e=>v.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${e=>`${v.headerLastColumnTopPadding.valuePx(e.windowSize)} ${v.headerLastColumnRightPadding.valuePx(e.windowSize)} ${v.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${v.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+`,zt=i.div`
+  color: ${e=>e.sortDataValue===e.actualDataValue?e.theme.colors.primary:e.theme.colors.grey1};
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  display: flex;
+  align-items: center;
+  left: ${t.Space.sp0};
+  justify-content: ${e=>e.shouldRightAlign===!0?"flex-end":"flex-start"};
+  box-sizing: border-box;
+`,N=i.div`
+  display: flex;
+  align-items: center;
+  transform: ${e=>e.sortDataValue===e.headerdata.key&&e.headerdata.sortOrder==="descending"?"rotate(180deg)":"rotate(0deg)"};
+  ${e=>e.headerdata.sortOrder==="ascending"?"padding-top: 2px":"padding-bottom: 2px"}
+`,G=i(t.SvgArrowTailTop)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`,Tt=i.div`
+  gap: ${t.Space.sp1};
+  display: flex;
+  color: ${e=>e.theme.colors.hero};
+`,kt=i(t.SvgSortBy)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.grey1};
+`,Lt=i.div`
+  margin-right: ${t.Space.sp1};
+  display: flex;
+  align-items: center;
+`,It=i.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Pt=i.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  color: ${e=>e.theme.colors.hero};
+`,j={containerPaddingLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingTop:new t.ResponsiveSized(t.sp[2],12),containerPaddingBottom:new t.ResponsiveSized(t.sp[2],12),containerMarginLeft:new t.ResponsiveSized(t.sp[4],t.sp[8]),containerMarginRight:new t.ResponsiveSized(t.sp[4],t.sp[8]),webkitLineClamp:new t.ResponsiveSized(2,1,1,1,1)},{dateFormat:Mt,rewardsPage:{inviteList:_t},common:K}=t.appLocale.getLocalizedStrings(),Bt=({email:e,amount:r,status:s,resendInviteStatus:c,inviteSendDate:n,onResendInviteClick:a})=>{const l=t.useWindowSizeContext();let d=!1;if(n){const u=new Date(n.format(Mt.visual.YYYYDashMMDashDFormat));d=t.isDateMoreThanHoursAgo(72,u)}const p=s.value===m.StatusTypes.reward_sent?m.AmountStatusTypes.received:m.AmountStatusTypes.to_be_received,g=c.fetchState==="In-Progress"?o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(qt,{color:s.color,onClick:()=>{a(e)},children:_t.status.resend_invite}),o.jsxRuntimeExports.jsx(Ut,{children:`${K.sent} ${t.getTimeDifferenceText(n)}`})]});return o.jsxRuntimeExports.jsx(At,{windowSize:l,children:o.jsxRuntimeExports.jsx(Dt,{children:o.jsxRuntimeExports.jsxs(Ht,{children:[o.jsxRuntimeExports.jsxs(Wt,{windowSize:l,responsiveWidth:E[0].width,children:[o.jsxRuntimeExports.jsx(Ot,{children:o.jsxRuntimeExports.jsx(Jt,{})}),o.jsxRuntimeExports.jsx(Vt,{windowSize:l,children:e})]}),o.jsxRuntimeExports.jsx(Yt,{windowSize:l,responsiveWidth:E[1].width,children:s.value===m.StatusTypes.invite_sent&&d?g:o.jsxRuntimeExports.jsx(Qt,{children:o.jsxRuntimeExports.jsx(Kt,{color:s.color,borderColor:s.borderColor,children:s.value===m.StatusTypes.reward_sent?m.StatusTypes.active:s.value})})}),o.jsxRuntimeExports.jsx(Ft,{windowSize:l,responsiveWidth:E[2].width,amountStatus:p,children:s.value===m.StatusTypes.declined?o.jsxRuntimeExports.jsx(Nt,{children:K.strings.hyphen}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[t.amountToString("0,0.[00]",r),o.jsxRuntimeExports.jsx(Gt,{amountStatus:p,children:p})]})})]})})})},At=i.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${t.Space.sp3};
+  margin-right: ${e=>j.containerMarginRight.valuePx(e.windowSize)};
+  margin-left: ${e=>j.containerMarginLeft.valuePx(e.windowSize)};
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>j.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>j.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>j.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>j.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>`0 2px ${t.Space.sp1} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+  box-sizing: border-box;
+  height: max-content;
+`,Dt=i.div`
+  display: block;
+  width: 100%;
+`,Ht=i.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  height: 42px;
+  flex: 1 1 auto;
+`,Wt=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.Space.sp1};
+  flex: 1 1 auto;
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,Ot=i.div`
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+`,Vt=i(t.StandardRegular)`
+  flex: 1 1 auto;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: ${e=>j.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: initial;
+`,Ft=i(t.StandardRegular)`
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: end;
+  flex: 1 1 auto;
+  color: ${e=>e.amountStatus===m.AmountStatusTypes.to_be_received?e.theme.colors.grey2:e.theme.colors.primary};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,Nt=i(t.StandardMedium)`
+  color: ${e=>e.theme.colors.hero};
+`,Gt=i(t.SmallRegular)`
+  color: ${e=>e.amountStatus===m.AmountStatusTypes.to_be_received?e.theme.colors.grey2:t.Colors.success};
+`,Kt=i(t.ExtraSmallRegular)`
+  display: flex;
+  color: ${e=>e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${t.Space.sp0} 6px;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border: ${e=>`1px solid ${e.borderColor}`};
+  border-radius: ${t.Space.sp1};
+`,qt=i(t.StandardRegularBtn)`
+  display: flex;
+  color: ${e=>e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+`,Yt=i.div`
+  position: relative;
+  top: 2px;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  min-width: ${t.Space.sp12};
+  color: ${e=>e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`,Ut=i(t.ExtraSmallRegular)`
+  position: relative;
+  top: 1px;
+  color: ${e=>e.theme.colors.grey1};
+`,Jt=i(t.SvgProfile)`
+  height: ${t.Space.sp6};
+  width: ${t.Space.sp6};
+  flex-shrink: 0;
+  color: ${e=>e.theme.colors.grey2};
+  margin-right: ${t.Space.sp1};
+`,Qt=i.div`
+  display: flex;
+`,y={containerPaddingLeft:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingRight:new t.ResponsiveSized(t.sp[3],t.sp[4]),containerPaddingTop:new t.ResponsiveSized(t.sp[3],t.sp[3]),containerPaddingBottom:new t.ResponsiveSized(t.sp[3],t.sp[3]),containerMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[8]),containerMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[8]),webkitLineClamp:new t.ResponsiveSized(2,2,1,1,1)},{dateFormat:Xt,rewardsPage:{inviteList:Zt},common:q}=t.appLocale.getLocalizedStrings(),eo=({email:e,amount:r,status:s,resendInviteStatus:c,inviteSendDate:n,onResendInviteClick:a})=>{const l=t.useWindowSizeContext();let d=!1;if(n){const u=new Date(n.format(Xt.visual.YYYYDashMMDashDFormat));d=t.isDateMoreThanHoursAgo(72,u)}const p=s.value===m.StatusTypes.active?m.AmountStatusTypes.received:m.AmountStatusTypes.to_be_received,g=c.fetchState==="In-Progress"?o.jsxRuntimeExports.jsx(t.ActivityIndicator,{size:"Small",start:!0}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(xo,{color:s.color,onClick:()=>{a(e)},children:Zt.status.resend_invite}),o.jsxRuntimeExports.jsx(uo,{children:`${q.sent} ${t.getTimeDifferenceText(n)}`})]});return o.jsxRuntimeExports.jsx(to,{windowSize:l,children:o.jsxRuntimeExports.jsxs(oo,{children:[o.jsxRuntimeExports.jsxs(go,{children:[o.jsxRuntimeExports.jsxs(io,{children:[o.jsxRuntimeExports.jsx(ro,{children:o.jsxRuntimeExports.jsx(mo,{})}),o.jsxRuntimeExports.jsx(so,{windowSize:l,children:e})]}),o.jsxRuntimeExports.jsx(no,{amountStatus:p,children:s.value===m.StatusTypes.declined?o.jsxRuntimeExports.jsx(ao,{children:q.strings.hyphen}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[t.amountToString("0,0.[00]",r),o.jsxRuntimeExports.jsx(lo,{amountStatus:p,children:p})]})})]}),o.jsxRuntimeExports.jsx(ho,{children:o.jsxRuntimeExports.jsx(po,{children:s.value===m.StatusTypes.invite_sent&&d?g:o.jsxRuntimeExports.jsx(So,{children:o.jsxRuntimeExports.jsx(co,{color:s.color,borderColor:s.borderColor,children:s.value})})})})]})})},to=i.div`
+  display: flex;
+  margin-bottom: ${t.Space.sp3};
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>y.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>y.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>y.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>y.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>`0 2px ${t.Space.sp1} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.Space.sp2};
+  cursor: pointer;
+  margin-right: ${e=>y.containerMarginRight.valuePx(e.windowSize)};
+  margin-left: ${e=>y.containerMarginLeft.valuePx(e.windowSize)};
+`,oo=i.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`,io=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: ${e=>e.theme.colors.hero};
+  width: 100%;
+`,ro=i.div`
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+`,so=i(t.StandardRegular)`
+  color: ${e=>e.theme.colors.hero};
+  flex-grow: 1;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: ${e=>y.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${te}px;
+`,no=i(t.SmallRegular)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  color: ${e=>e.amountStatus===m.AmountStatusTypes.to_be_received?e.theme.colors.grey2:e.theme.colors.primary};
+  width: 100%;
+  margin-left: ${t.Space.sp5};
+`,ao=i(t.StandardMedium)`
+  color: ${e=>e.theme.colors.hero};
+`,lo=i(t.ExtraSmallRegular)`
+  color: ${e=>e.amountStatus===m.AmountStatusTypes.to_be_received?e.theme.colors.grey2:e.theme.colors.success};
+`,co=i(t.ExtraSmallRegular)`
+  color: ${e=>e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${t.Space.sp0} 6px;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-flex;
+  border: ${e=>`1px solid ${e.borderColor}`};
+  border-radius: ${t.Space.sp1};
+`,po=i.div`
+  width: 100%;
+  color: ${e=>e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+`,xo=i(t.SmallRegularBtn)`
+  display: flex;
+  color: ${e=>e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+`,uo=i(t.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.grey1};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,mo=i(t.SvgProfile)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+  flex-shrink: 0;
+  margin-right: ${t.Space.sp1};
+  color: ${e=>e.theme.colors.grey2};
+`,go=i.div`
+  display: flex;
+  flex-direction: column;
+  width: 188px;
+`,ho=i.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  width: 108px;
+  padding-top: 2px;
+`,So=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,C={pageTitleMarginLeft:new t.ResponsiveSized(t.sp[3],t.sp[8]),pageTitleMarginRight:new t.ResponsiveSized(t.sp[3],t.sp[8]),pageTitleMarginTop:new t.ResponsiveSized(t.sp[4],t.sp[5]),pageTitleMarginBottom:new t.ResponsiveSized(t.sp[3],t.sp[3])},wo={pageTitle:new t.ResponsiveSizedStyle("standardSemiBold","largeSemiBold")},Y=t.appLocale.getLocalizedStrings(),$o=({index:e,style:r,inviteList:s,onResendInviteClick:c})=>{const n=t.useWindowSizeContext(),a=s[e],l=n==="small"?eo:Bt;return o.jsxRuntimeExports.jsx(zo,{style:{...r,width:"100%"},children:o.jsxRuntimeExports.jsx(l,{email:a.refereeEmailId,amount:a.amount,status:bt(a.statusCode),resendInviteStatus:a.resendInviteStatus,onResendInviteClick:c,inviteSendDate:a.lastInviteTimestamp})})},fo=({inviteList:e,uiState:r,fetchState:s,onResendInviteClick:c,onReloadInvitees:n,onColumnSortConfigChanged:a})=>{const l=t.useWindowSizeContext(),d=h=>{const $=e[h].refereeEmailId;return O($,l)},p=e.reduce((h,$)=>h+O($.refereeEmailId,l),0),g=S.useRef(null);S.useEffect(()=>{g.current?.resetAfterIndex(0)},[l,g]);let u=null;switch(s){case"Not-Started":case"In-Progress":u=o.jsxRuntimeExports.jsx(re.BusyIndication,{fetchState:s});break;case"Error":u=o.jsxRuntimeExports.jsxs(yo,{children:[o.jsxRuntimeExports.jsx(Ro,{onClick:n,children:o.jsxRuntimeExports.jsx(vo,{})}),o.jsxRuntimeExports.jsx(Co,{children:Y.peoplePage.reloadPage.label})]});break;case"Completed":e.length!==0&&(u=o.jsxRuntimeExports.jsxs(Eo,{windowSize:l,children:[o.jsxRuntimeExports.jsx(bo,{windowSize:l,children:Y.rewardsPage.inviteList.pageTitle}),o.jsxRuntimeExports.jsx(Et,{companyNameSticky:!1,onColumnSortConfigChanged:a,sortConfig:{sortKey:r.sortKey,sortOrder:r.sortOrder}}),o.jsxRuntimeExports.jsx(o.VariableSizeList,{ref:g,height:p,width:"100%",itemCount:e.length,itemSize:d,estimatedItemSize:I,itemKey:h=>e[h].refereeEmailId,overscanCount:ft,initialScrollOffset:0,children:h=>o.jsxRuntimeExports.jsx($o,{...h,inviteList:e,onResendInviteClick:c})})]}))}return o.jsxRuntimeExports.jsx(jo,{children:u})},jo=i.div`
+  display: block;
+  height: 100%;
+`,yo=i.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,Ro=i.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`,vo=i(t.SvgReload)`
+  height: ${t.Space.sp5};
+  width: ${t.Space.sp5};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Co=i(t.SmallRegularSp)`
+  margin-top: ${t.Space.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,bo=i(t.StyledText)`
+  ${e=>`${wo.pageTitle.style(e.windowSize)}`};
+  margin-top: ${e=>C.pageTitleMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${e=>C.pageTitleMarginBottom.valuePx(e.windowSize)};
+  margin-left: ${e=>C.pageTitleMarginLeft.valuePx(e.windowSize)};
+  margin-right: ${e=>C.pageTitleMarginRight.valuePx(e.windowSize)};
+  color: ${e=>e.theme.colors.primary};
+`,Eo=i.div`
+  height: 100%;
+  width: 100%;
+`,zo=i.div`
+  top: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  padding-bottom: ${t.Space.sp3};
+  box-sizing: border-box;
+  &:last-child {
+    padding-bottom: ${t.Space.sp0};
+  }
+`,To={referralButtonRightPosition:new t.ResponsiveSized(-t.sp[1],28,28,-t.sp[1])},{rewardsPage:{referButton:k},common:{texts:b}}=t.appLocale.getLocalizedStrings();function ko(e){const r=t.useWindowSizeContext(),[s,c]=S.useState(!1),[,n]=t.useCopyToClipboard(),[a,l]=S.useState(!1),d=()=>{e.onCopyReferralLink(),a||(n(e.referralLink.toString()),l(!0))};return S.useEffect(()=>{a===!0&&setTimeout(()=>{l(!1),c(!1)},2e3)},[a]),o.jsxRuntimeExports.jsx(Lo,{windowSize:r,children:o.jsxRuntimeExports.jsx(o.ClickAwayListener,{onClickAway:()=>{c(!1)},children:o.jsxRuntimeExports.jsx(Io,{onClick:()=>{s||e.onClickRefer(),c(!0)},onTouchEnd:()=>{s||e.onClickRefer(),c(!0)},children:o.jsxRuntimeExports.jsx(ne.MoreMenuButton,{entity:"rewards",isMoreOption:!1,closeMenuOnSelect:!1,isMenuOpen:s,title:b.refer,options:[{label:k.inviteViaEmail,value:b.invite},{label:a?k.urlCopied:k.copyReferralUrl,value:a?b.copied:b.copy}],customStyleConfig:{control:()=>({backgroundColor:"inherit",cursor:"pointer",border:"none",":hover":{backgroundColor:"inherit"}}),container:()=>({marginLeft:t.sp[0]}),valueContainer:()=>({display:"flex"})},onOptionSelection:p=>{switch(p){case"invite":e.onInviteClick();break;case"copy":d();break}}})})})})}const Lo=i.div`
+  position: absolute;
+  right: ${e=>To.referralButtonRightPosition.valuePx(e.windowSize)};
+`,Io=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Po=t.appLocale.getLocalizedStrings().rewardsPage,Mo=e=>{const r=o.useTheme(),s=t.useWindowSizeContext(),{pendingBonus:c,earnedBonus:n,rewardsPlan:a,pendingReferrals:l,inviteList:d,uiState:p,fetchState:g,onInviteClick:u,onBackClick:h,onHowItWorksClick:$,onReloadInvitees:x,onResendInviteClick:w,onColumnSortConfigChanged:R,onCopyReferralLink:f,onClickRefer:T,onClickMenuIcon:oe}=e,[ie,M]=S.useState(!0);let _=null;return ie||(_=o.jsxRuntimeExports.jsx(ko,{referralLink:a.referralLink,onInviteClick:u,onClickRefer:T,onCopyReferralLink:f})),o.jsxRuntimeExports.jsxs(_o,{children:[o.jsxRuntimeExports.jsx(t.NavBar,{source:"InvitePageListView",title:Po.pageTitle,showBackButton:!0,backgroundColor:r.colors.grey4,style:{zIndex:3},onBackClick:h,showMenuIcon:s==="medium-compact"||s==="small",onClickMenuIcon:oe,rightSideComponent:_}),d.length===0?o.jsxRuntimeExports.jsx(Do,{children:o.jsxRuntimeExports.jsx(We,{rewardsPlan:a,onHowItWorksClick:$,onInviteClick:u,onCopyReferral:f})}):o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[s==="small"?o.jsxRuntimeExports.jsxs(Ao,{children:[o.jsxRuntimeExports.jsx(A,{pendingBonus:c,earnedBonus:n,pendingReferrals:l,onHowItWorksClick:$}),o.jsxRuntimeExports.jsx(X,{referralLink:a.referralLink,onInviteClick:u,onCopyReferral:f,setShowNavButton:M})]}):o.jsxRuntimeExports.jsxs(Bo,{children:[o.jsxRuntimeExports.jsx(U,{children:o.jsxRuntimeExports.jsx(A,{pendingBonus:c,earnedBonus:n,pendingReferrals:l,onHowItWorksClick:$})}),o.jsxRuntimeExports.jsx(U,{children:o.jsxRuntimeExports.jsx(Ue,{rewardsPlan:a,onInviteClick:u,setShowNavButton:M,onCopyReferral:f})})]}),o.jsxRuntimeExports.jsx(fo,{inviteList:d,fetchState:g,onReloadInvitees:x,onColumnSortConfigChanged:R,uiState:p,onResendInviteClick:w})]})]})},_o=i.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+  overflow-y: auto;
+  background-color: ${e=>e.theme.colors.grey4};
+`,Bo=i.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: ${t.Space.sp0} ${t.Space.sp8} ${t.Space.sp4} ${t.Space.sp8};
+  padding: ${t.Space.sp1};
+  height: 280px;
+`,Ao=i.div`
+  margin: ${t.Space.sp3};
+`,Do=i.div`
+  height: 100%;
+`,U=i.div`
+  width: 49%;
+`;exports.default=Mo;