@zeniai/web-components 3.16.99 → 3.17.2

package/dist/TransactionList-QwzN0yxq.cjs

@@ -0,0 +1,147 @@
+"use strict";const n=require("./vendor-.pnpm-D0ILHvHB.cjs"),g=require("react"),i=require("@emotion/styled"),e=require("./index-gTpRqqAW.cjs"),u=require("@zeniai/client-epic-state"),q=require("./BoxItem-DH_lDowf.cjs"),z=require("./commonDimensions-DgYPd8NC.cjs"),D=t=>t?24:125,_={containerPaddingBottom:new e.ResponsiveSized(e.sp[9],e.sp[8])},A=i.div`
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+  height: ${t=>D(t.isLoadNextItem)}px;
+  color: ${t=>t.theme.colors.grey1};
+  &:hover {
+    color: ${t=>t.theme.colors.champion};
+  }
+  padding-top: ${t=>t.isLoadNextItem?0:45}px;
+  padding-bottom: ${t=>_.containerPaddingBottom.valuePx(t.windowSize)};
+`,J=i(e.StandardRegular)`
+  display: flex;
+  cursor: pointer;
+`;function Y({firstMonthOfFY:t,isLoadNextItem:a,isLoading:l,timePeriod:r,fixedTimePeriod:s,timeframe:c,doLoadMoreTransactions:m}){let x=r;if(a)if(s!=null){const f=u.addPeriod(r.endDate.startOf("month"),t,s.numberOfPeriods,s.timeframe);x={startDate:x.endDate.add(1,"day"),endDate:f}}else{const f=u.addPeriod(r.endDate.startOf("month"),t,1,c),{startOfTimeframeFY:S,endOfTimeframeFY:R}=u.getStartOfAndEndOfTimeframeForFY(f,t,c);x={startDate:S,endDate:R}}else if(s!=null)x={startDate:u.subtractPeriod(r.startDate.startOf("month"),t,s.numberOfPeriods,s.timeframe),endDate:r.startDate.subtract(1,"day")};else{const f=u.subtractPeriod(r.startDate.startOf("month"),t,1,c),{startOfTimeframeFY:S,endOfTimeframeFY:R}=u.getStartOfAndEndOfTimeframeForFY(f,t,c);x={startDate:S,endDate:R}}const o=e.appLocale.getLocalizedStrings();let p="";s==null?c==="month"?p=`${a===!0?o.transactionList.loadNextMonthPrefix:o.transactionList.loadPreviousMonthPrefix} (${u.formatZeniDate(x.startDate,o.dateFormat.visual.MMMYYYYFormat,t)})`:c==="quarter"?p=`${a===!0?o.transactionList.loadNextQuarterPrefix:o.transactionList.loadPreviousQuarterPrefix} (${o.transactionList.quarterPrefix}${u.formatZeniDate(x.startDate,o.dateFormat.visual.QYYYYformat,t)})`:p=`${a===!0?o.transactionList.loadNextYearPrefix:o.transactionList.loadPreviousYearPrefix} (${u.formatZeniDate(x.startDate,o.dateFormat.visual.YYYYformat,t)})`:p=`${a===!0?o.transactionList.loadNextMonthPrefix:o.transactionList.loadPreviousPrefix} ${s.numberOfPeriods} ${o.transactionList.monthsSuffix} - (${u.formatZeniDate(x.startDate,o.dateFormat.visual.MMMYYYYFormat,t)} - ${u.formatZeniDate(x.endDate,o.dateFormat.visual.MMMYYYYFormat,t)})`;const $=e.useWindowSizeContext();return l===!0?n.jsxRuntimeExports.jsx(A,{windowSize:$,isLoadNextItem:a,children:n.jsxRuntimeExports.jsx(e.ActivityIndicator,{size:"Small",start:!0})}):n.jsxRuntimeExports.jsx(A,{windowSize:$,isLoadNextItem:a,children:n.jsxRuntimeExports.jsx(J,{"data-testid":e.generateDataTestId("load-more-transactions",p),onClick:()=>{m?.(x,c)},children:p})})}Y.displayName="LoadMoreTransactions";const{common:{strings:{empty:P}}}=e.appLocale.getLocalizedStrings(),K=i(e.ExtraSmallRegular)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-left: ${e.Space.sp3};
+  padding: 1px 6px;
+  border: 1px solid ${t=>t.theme.colors.grey2};
+  border-radius: ${e.Space.sp1};
+  color: ${t=>t.theme.colors.grey1};
+  min-width: max-content;
+`,X=i.div`
+  display: flex;
+  padding: ${e.Space.sp3} ${e.Space.sp4};
+  flex-direction: row;
+  width: 100%;
+`,tt=i.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`,et=i(e.StandardRegular)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-left: ${e.Space.sp3};
+  max-height: ${e.Space.sp11};
+  text-overflow: ellipsis;
+  word-break: break-word;
+  text-align: left;
+  overflow: hidden;
+`,nt=i(e.StandardRegular)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-left: ${e.Space.sp3};
+  text-align: right;
+  width: ${t=>z.transactionItemDimensions.amountWidth.valuePx(t.windowSize)};
+`,st=i.div`
+  display: flex;
+`;function at({transaction:t,onItemClick:a}){const{description:l,typeName:r,amount:s,logo:c,vendorId:m}=t,x=u.isVendorTransaction(t)&&m==null;return n.jsxRuntimeExports.jsxs(X,{onClick:()=>a?.(t),"data-testid":e.generateDataTestId("transaction-item-medium",t.id),children:[n.jsxRuntimeExports.jsx(e.EntityLogoAvatarWithCustomFallback,{photoUrl:x===!1?c?.toString()??P:P,styles:{width:e.Space.sp4,height:e.Space.sp4,borderRadius:e.Space.sp0},placeholder:{width:e.sp[4],height:e.sp[4]},fallbackAvatar:n.jsxRuntimeExports.jsx(st,{children:n.jsxRuntimeExports.jsx(e.EntityAvatar,{name:l,size:e.Space.sp4})})}),n.jsxRuntimeExports.jsxs(tt,{children:[n.jsxRuntimeExports.jsx(et,{children:l}),r!=null?n.jsxRuntimeExports.jsx(K,{className:"tag",children:r}):null]}),n.jsxRuntimeExports.jsx(nt,{children:e.amountToString("0,0.00",s)})]})}function rt({data:t,boxType:a,onItemClick:l}){const r=u.toTransactionTypeStrict(t.type)==null,s=n.jsxRuntimeExports.jsx(at,{transaction:t,onItemClick:r?void 0:l});return n.jsxRuntimeExports.jsx(q.BoxItem,{content:s,boxType:a,isDisabled:r})}const{common:{strings:{empty:H}}}=e.appLocale.getLocalizedStrings(),ot=i.div`
+  display: flex;
+  padding: ${e.Space.sp3} ${e.Space.sp4};
+  flex-direction: row;
+  width: 100%;
+`,it=i.div`
+  width: 100%;
+`,lt=i(e.StandardRegular)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-left: ${e.Space.sp3};
+  max-height: ${e.Space.sp11};
+  text-overflow: ellipsis;
+  word-break: break-word;
+  text-align: left;
+  overflow: hidden;
+`,ct=i(e.StandardRegular)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  margin-left: ${e.Space.sp3};
+  text-align: right;
+  width: ${t=>z.transactionItemDimensions.amountWidth.valuePx(t.windowSize)};
+`,dt=i.div`
+  display: flex;
+`;function ut({transaction:t,onItemClick:a}){const{description:l,amount:r,logo:s,vendorId:c}=t,m=u.isVendorTransaction(t)&&c==null;return n.jsxRuntimeExports.jsxs(ot,{onClick:()=>a?.(t),"data-testid":e.generateDataTestId("transaction-item-small",t.id),children:[n.jsxRuntimeExports.jsx(e.EntityLogoAvatarWithCustomFallback,{photoUrl:m===!1?s?.toString()??H:H,styles:{width:e.Space.sp4,height:e.Space.sp4,borderRadius:e.Space.sp0},placeholder:{width:e.sp[4],height:e.sp[4]},fallbackAvatar:n.jsxRuntimeExports.jsx(dt,{children:n.jsxRuntimeExports.jsx(e.EntityAvatar,{name:l,size:e.Space.sp4})})}),n.jsxRuntimeExports.jsx(it,{children:n.jsxRuntimeExports.jsx(lt,{children:l})}),n.jsxRuntimeExports.jsx(ct,{children:e.amountToString("0,0.00",r)})]})}function xt({data:t,boxType:a,onItemClick:l}){const r=u.toTransactionTypeStrict(t.type)==null,s=n.jsxRuntimeExports.jsx(ut,{transaction:t,onItemClick:r?void 0:l});return n.jsxRuntimeExports.jsx(q.BoxItem,{content:s,boxType:a,isDisabled:r})}function pt(t){return e.useWindowSizeContext()==="small"?n.jsxRuntimeExports.jsx(xt,{...t}):n.jsxRuntimeExports.jsx(rt,{...t})}const mt=i.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+  background-color: ${t=>t.theme.colors.grey5};
+`,gt=i(e.SmallRegular)`
+  display: flex;
+  height: 21px;
+  margin-bottom: ${e.Space.sp2};
+  margin-top: ${e.Space.sp3};
+  color: ${t=>t.theme.colors.grey1};
+`,ft=i.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`,ht=(t,a)=>a.length===1?"roundedBox":t===0?"topRoundedBox":t===a.length-1?"bottomRoundedBox":"box",jt=t=>t*z.transactionItemDimensions.transactionItemHeight+45;function bt({date:t,transactions:a,onItemClick:l}){const{dateFormat:r}=e.appLocale.getLocalizedStrings();return n.jsxRuntimeExports.jsxs(ft,{"data-testid":e.generateDataTestId("transactions-group"),children:[n.jsxRuntimeExports.jsx(gt,{children:u.dateNow().year()===t.year()?t.format(r.visual.MMMDFormat):t.format(r.visual.MMMDCommaYYYYformat)}),n.jsxRuntimeExports.jsx(mt,{children:a.map((s,c)=>n.jsxRuntimeExports.jsx(pt,{data:s,boxType:ht(c,a),onItemClick:m=>{l?.(m)},"data-testid":e.generateDataTestId("transaction-item",s.id)},s.id))})]})}const St=g.memo(bt),{dateFormat:Rt}=e.appLocale.getLocalizedStrings();function wt(t){const a=n.groupBy(t,s=>s.date.format(Rt.visual.MMMDCommaYYYYformat)),l=n.filter(a,s=>s.length>0);return n.map(l,s=>({date:s[0].date,transactions:n.orderBy(s,c=>c.updateTime,"desc")}))}const b=e.appLocale.getLocalizedStrings(),$t={listItemMargin:new e.ResponsiveSized(e.sp[3],e.sp[8])},Et=i.div`
+  display: flex;
+  flex: 1 1 auto;
+  width: 99.9%;
+`,v=i.div`
+  margin: ${t=>`${e.Space.sp0} ${$t.listItemMargin.valuePx(t.windowSize)}`};
+`,yt=i.div`
+  min-height: ${e.Space.sp8};
+`,vt=i.div`
+  display: flex;
+  height: 100%;
+  flex: 1 1 auto;
+  flex-direction: row;
+  justify-content: center;
+  align-items: flex-end;
+`,Dt=i(e.StandardRegular)`
+  display: flex;
+  color: ${t=>t.theme.colors.grey2};
+`,Tt=i(n.VariableSizeList)`
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  &::-webkit-scrollbar {
+    width: ${e.Space.sp2};
+    height: ${e.Space.sp0};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 2px ${e.Colors.scrollbarBoxShadow};
+    -webkit-box-shadow: inset 0 0 2px ${e.Colors.scrollbarBoxShadow};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &:hover {
+    scrollbar-color: ${t=>t.theme.colors.grey1} transparent;
+    &::-webkit-scrollbar {
+      width: ${e.Space.sp2};
+      height: ${e.Space.sp0};
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${t=>t.theme.colors.grey1};
+      border-radius: 2px;
+    }
+  }
+`,kt=g.forwardRef(function({firstMonthOfFY:a,timeframe:l,timePeriod:r,transactions:s,isFirstLotLoading:c,currentScrollYOffset:m,componentName:x,showLoadNext:o,showLoadPrevious:p,onTransactionItemClick:$,trackPerformance:f=!0,onTransactionListScroll:S,onListInnerElementHeightChanged:R},W){const E=g.useMemo(()=>wt(s),[s]),T=g.createRef(),[k,O]=g.useState(!1);g.useEffect(()=>{T.current?.resetAfterIndex(0)},[s,T]);const V=W,w=g.useRef(null),[N,Z]=g.useState(void 0);g.useEffect(()=>{!k&&c===!1&&O(!0)},[c,k]),e.useSentryPerformanceTracking({componentName:x,enabled:f&&k});const G=()=>{if(w!=null&&typeof w=="object"&&w.current){const d=w.current;d!=null&&d.clientHeight>0&&d.clientHeight!=N&&(Z(d.clientHeight),R?.(d.clientHeight))}},L=E.length===0,F=p!=null,C=o!=null,I=E.length+(o!=null?1:0)+(p!=null?1:0)+(L===!0?1:0),B=d=>C===!0?d-1:d,y=e.useWindowSizeContext(),Q=({index:d,style:j})=>{if(C===!0&&d===0)return n.jsxRuntimeExports.jsx("div",{style:{...j},children:n.jsxRuntimeExports.jsx(v,{windowSize:y,"data-testid":e.generateDataTestId("transaction-list","list-item-load-more"),children:n.jsxRuntimeExports.jsx(Y,{firstMonthOfFY:a,isLoadNextItem:!0,isLoading:o?.isLoading==!0,timePeriod:r,timeframe:l,fixedTimePeriod:o?.fixedTimePeriod,doLoadMoreTransactions:(h,M)=>{o?.onLoadNextClick?.(h,M)}})})});if(F===!0&&d===I-1)return n.jsxRuntimeExports.jsx("div",{style:{...j},children:n.jsxRuntimeExports.jsx(v,{windowSize:y,"data-testid":e.generateDataTestId("transaction-list","list-item-load-previous"),children:n.jsxRuntimeExports.jsx(Y,{firstMonthOfFY:a,isLoadNextItem:!1,isLoading:p?.isLoading==!0,timePeriod:r,fixedTimePeriod:p?.fixedTimePeriod,timeframe:l,doLoadMoreTransactions:(h,M)=>{p?.onLoadPreviousClick?.(h,M)}})})});if(L===!1){const h=E[B(d)];return n.jsxRuntimeExports.jsx("div",{style:{...j},children:n.jsxRuntimeExports.jsxs(v,{windowSize:y,children:[n.jsxRuntimeExports.jsx(St,{date:h.date,transactions:h.transactions,onItemClick:$}),p==null?n.jsxRuntimeExports.jsx(yt,{}):null]})})}else return n.jsxRuntimeExports.jsx("div",{style:{...j},children:n.jsxRuntimeExports.jsx(vt,{children:n.jsxRuntimeExports.jsx(v,{windowSize:y,"data-testid":e.generateDataTestId("transaction-list","transactions-list-empty"),children:n.jsxRuntimeExports.jsx(Dt,{children:Lt(r,o?.isLoading==!0||p?.isLoading==!0)})})})})},U=d=>C===!0&&d===0?D(!0):F===!0&&d===I-1?D(!1):L===!1?jt(E[B(d)].transactions.length):D(!1);return n.jsxRuntimeExports.jsx(Et,{children:n.jsxRuntimeExports.jsx(n.AutoSizer,{children:({height:d,width:j})=>n.jsxRuntimeExports.jsx(Tt,{"data-testid":e.generateDataTestId("transaction-list"),ref:T,height:d,width:j,innerRef:w,outerRef:V,onItemsRendered:G,itemCount:I,itemSize:U,onScroll:({scrollOffset:h})=>{S?.(h)},initialScrollOffset:m??0,children:Q})})})}),Lt=(t,a)=>a===!0?b.transactionList.fetching:t.startDate.isSame(t.endDate,"month")?`${b.transactionList.noTransactionsFoundForPrefix} (${t.startDate.format(b.dateFormat.visual.MMMYYFormat)})`:`${b.transactionList.noTransactionsFoundForPeriodPrefix} (${t.startDate.format(b.dateFormat.visual.MMMYYFormat)} - ${t.endDate.format(b.dateFormat.visual.MMMYYFormat)})`;exports.TransactionList=kt;