@zeniai/web-app-ui 4.14.36-qa → 4.14.38-dev

package/dist/assets/CheckDepositDrawerPage-D7_usOVn-DA-Kombi.js

@@ -0,0 +1,206 @@
+import{X as oe,V as t,E as y,a5 as R,a as W,o,a9 as de,x as n,a8 as te,n as pe,O as ie,at as he,c2 as ae,C as ue,l as B,a7 as me,P as ge,c8 as fe,e as j,M as xe,fN as ke,cd as De,ev as Y,cj as J,j as a,f1 as we,bH as be,bv as $e,eH as ye,gp as je,H,gq as Pe}from"./index-BocbTmE1.js";import{a as w}from"./sentry-DINNQYpi.js";import{n as i}from"./mui-C_CXevf3.js";import{v as Le}from"./SuccessAnimation-DA3343II-B6vDBJ0_.js";import"./liveblocks-BsQBjN-0.js";import"./core-5sxMy3sZ.js";import"./zeni-epic-state-a7Sj5mjO.js";import"./lottie-C2R6rGxS.js";import"./pdf-DyB_VHQx.js";import"./dnd-Cfx_ai1S.js";import"./analytics-Buyhprzd.js";import"./plaid-Yyr3DBd8.js";import"./recharts-CTWfsY-L.js";import"./utils-DmE88LS_.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{},r=new e.Error().stack;r&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[r]="801551e8-c646-4fb8-8c0e-08cd4ef7db98",e._sentryDebugIdIdentifier="sentry-dbid-801551e8-c646-4fb8-8c0e-08cd4ef7db98")}catch{}})();const m="checkDepositDetails",Se="amount",ve="depositTo",Fe="source",se="fileIds",O="selectDocument",M=e=>{const r=[];return e.checkFront!=null&&r.push(e.checkFront.fileId),e.checkBack!=null&&r.push(e.checkBack.fileId),{[m]:{[Se]:e.checkDepositLocalData.amount.amount===0?void 0:e.checkDepositLocalData.amount.amount,[Fe]:e.checkDepositLocalData.source,[ve]:{allOptions:e.depositAccounts.depositAccounts.map(g=>({label:g.accountName,value:g.id})),selectedOption:e.checkDepositLocalData.depositTo?.id},[se]:r,[O]:{front:e.checkFront,back:e.checkBack}}}},$=(e,r)=>`${e}.${r}`,Ce=e=>`${e}_form`,p={largeLabelWidth:new n(160,160,160),rowContentPaddingLeft:new n(a[3],a[4]),checkPicRowContentPaddingXAxis:new n(a[3],a[4]),labeleMarginLeft:new n(a[0],a[0]),labeleMarginBottom:new n(a[2],a[0]),labelMarginRight:new n(a[3],a[3]),labeledFieldPaddingLeft:new n(a[3],a[0]),labeledFieldPaddingRight:new n(a[3],a[2]),labeledFieldPaddingTop:new n(a[3],a[3]),labeledFieldPaddingBottom:new n(a[3],a[2]),infoLabelPaddingRight:new n(a[0],a[3]),infoLabelMarginTop:new n(a[1],a[0])},{spendManagement:Te,common:q}=ie.getLocalizedStrings(),l=Te.zeniAccounts.zeniAccountList,Be=q.documents;function ze({checkDeposit:e,analytics:r,filesEndPoint:g,openPopup:P,authParams:L,onSaveChangesToLocalStore:z,updateFilesEntity:S,onDeleteFile:v,onEditFileName:F,onCheckDpositClick:A}){const c=oe(),d=e.fetchState,C=me(d),[T,X]=w.useState(!1),[re,I]=w.useState(!1),E=p.largeLabelWidth.value(c),k=ge({mode:"all",reValidateMode:"onBlur",defaultValues:M(e),values:M(e)}),{isValid:le}=k.formState,G=s=>{const f={amount:{amount:s[m].amount??0,currencyCode:q.currency.currencyCode,currencySymbol:q.currency.currencySymbol},source:s[m].source,depositTo:e.depositAccounts.depositAccounts.find(h=>h.id===s[m].depositTo.selectedOption),fileIds:s[m][se]};z(f)};w.useEffect(()=>{const s=k.watch((f,{name:h})=>{h!=null&&f!=null&&fe(()=>(async(D,x)=>{if(D!=null){if(D.includes("source")||D.includes("amount"))return;const b=Object.assign({},x);G(b)}})(h,f))});return()=>{s.unsubscribe()}}),w.useEffect(()=>{C==="Completed"&&d==="Not-Started"&&k.reset(M(e))},[C,d,k,e]),w.useEffect(()=>{e.error!=null?I(!0):I(!1)},[e.error]);const ne=k.handleSubmit(()=>{if(le){r.trackAccountsDepositCheckFormClicked("Deposit",e.checkDepositLocalData.amount.amount,e.checkDepositLocalData.source,e.checkDepositLocalData.depositTo?.accountName,e.checkFront!=null,e.checkBack!=null);const s=k.getValues();G(s),A?.()}});return t.jsxs(t.Fragment,{children:[re?t.jsx(Ve,{children:t.jsxs(Re,{children:[t.jsxs(Oe,{children:[t.jsx(_e,{}),t.jsxs(He,{children:[t.jsx(Xe,{children:e.error?.title}),t.jsx(Ge,{children:e.error?.message})]})]}),t.jsx(qe,{children:t.jsx(ao,{"data-testid":y("check-deposit-form-close"),onClick:()=>{r.trackAccountsDepositCheckFormClicked("Cross",e.checkDepositLocalData.amount.amount,e.checkDepositLocalData.source,e.checkDepositLocalData.depositTo?.accountName,e.checkFront!=null,e.checkBack!=null),I(!1)},style:{width:o.sp3,height:o.sp3,color:j.heroLight}})})]})}):null,t.jsx(We,{children:R("0,0.[00]",e.checkDepositLocalData.amount)}),t.jsx(xe,{...k,children:t.jsx("form",{id:Ce("checkDepositDetailPage"),onSubmit:ne,children:t.jsxs(Je,{children:[t.jsx(ke,{showAdditionalInfoLabel:!1,label:{label:l.checkDepositDrawer.amountLabel,width:E},formattedTextField:{type:"number",name:$(m,"amount"),defaultValue:e.checkDepositLocalData.amount.amount===0?void 0:e.checkDepositLocalData.amount.amount,placeholder:l.checkDepositDrawer.amountPlaceholder,returnValueType:"floatValue",prefix:"$",allowNegative:!1,isNumericString:!1,registerOptions:{required:!0,validate:s=>!!s&&s>0},autoComplete:"off",decimalSeparator:".",decimalScale:2,fixedDecimalScale:!1,thousandSeparator:!0,allowLeadingZeros:!1},style:{width:"auto"}}),t.jsx(V,{}),t.jsx(De,{label:{label:l.checkDepositDrawer.sourceLabel,width:E},style:{width:"100%"},text:{type:"text",name:$(m,"source"),defaultValue:e.checkDepositLocalData.source,placeholder:l.checkDepositDrawer.sourcePlaceholder,options:{required:!0,validate:s=>s!=null}}}),t.jsx(V,{}),t.jsx(ce,{size:c,children:t.jsx(Qe,{size:c,children:t.jsx(Ye,{label:{label:l.checkDepositDrawer.depositToLabel,width:E,style:{marginLeft:p.labeleMarginLeft.valuePx(c),marginBottom:p.labeleMarginBottom.valuePx(c),marginRight:p.labelMarginRight.valuePx(c)}},style:{paddingTop:p.labeledFieldPaddingTop.valuePx(c),paddingBottom:p.labeledFieldPaddingBottom.valuePx(c),paddingLeft:p.labeledFieldPaddingLeft.valuePx(c),paddingRight:p.labeledFieldPaddingRight.valuePx(c),border:"none",width:"100%",outline:"none",padding:0,display:c==="small"?"flex":"inherit"},infoLabelStyle:{textAlign:c==="small"?"left":"right",paddingRight:p.infoLabelPaddingRight.valuePx(c),marginTop:p.infoLabelMarginTop.valuePx(c)},singleSelectPickerField:{valueToLogo:(s,f)=>((h,D)=>{if(!h)return null;const x=e.depositAccounts.depositAccounts.find(N=>N.id===h),b=e.depositAccounts.depositAccounts.findIndex(N=>N.id===h);return x?t.jsx(Me,{color:je(b),isSelectedValue:D}):null})(s,f),valueToSubLabels:(s,f)=>((h,D)=>{if(!h)return null;const x=e.depositAccounts.depositAccounts.find(b=>b.id===h);return x?D===!0?t.jsx(Ne,{children:x?.maskedAccountNumber}):t.jsxs(Ee,{children:[t.jsx(Z,{children:x?.maskedAccountNumber}),t.jsx(eo,{}),t.jsx(Z,{children:R("0,0[.]00",x?.accountBalance?.available)})]}):null})(s,f),name:$(m,"depositTo"),placeholder:l.checkDepositDrawer.depositToPlaceholder,style:{position:"relative"},defaultValue:{selectedOption:e.checkDepositLocalData.depositTo?.id,allOptions:e.depositAccounts.depositAccounts.map(s=>({label:s.accountName,value:s.id}))},textAlignment:"right",registerOptions:{required:!0,validate:s=>!(s==null||!s.selectedOption)}}})})}),t.jsx(V,{}),t.jsxs(Ze,{size:c,children:[t.jsxs(Ke,{size:c,children:[t.jsx(Ae,{children:l.checkDepositDrawer.checkPicLabel}),t.jsx(K,{isLast:!1,children:l.checkDepositDrawer.frontSide}),t.jsx(Y,{name:`${$(m,O)}.front`,registerOptions:{required:!0},file:e.checkFront,isDisabled:!1,deleteFileStatusById:e.deleteFileStatusById,updateFileStatusById:e.updateFileStatusById,filesEndPoint:g,authParams:L,acceptableTypes:["image/jpg","image/jpeg"],supportedImageFileFormat:"image/jpeg",sizeLimit:J,placeholderText:c==="small"?l.checkDepositDrawer.uploadDocument:l.checkDepositDrawer.dragDropClickPlaceholder,filemetadataPayload:{documentType:"check",purposeId:"others",documentSide:"front"},hasError:T,updateFilesEntity:S,onDeleteFile:v,onFileSizeError:s=>X(s),onEditFileName:F,openPopup:P,showPhotoPicker:!0,errorInfoLabel:l.checkDepositDrawer.frontSideError,useMobileCam:!0,compressImage:!0}),t.jsx(K,{isLast:!0,children:l.checkDepositDrawer.backSide}),t.jsx(Y,{name:`${$(m,O)}.back`,registerOptions:{required:!0},file:e.checkBack,isDisabled:!1,deleteFileStatusById:e.deleteFileStatusById,updateFileStatusById:e.updateFileStatusById,filesEndPoint:g,authParams:L,acceptableTypes:["image/jpg","image/jpeg"],supportedImageFileFormat:"image/jpeg",sizeLimit:J,placeholderText:c==="small"?l.checkDepositDrawer.uploadDocument:l.checkDepositDrawer.dragDropClickPlaceholder,filemetadataPayload:{documentType:"check",purposeId:"others",documentSide:"back"},hasError:T,updateFilesEntity:S,onDeleteFile:v,onFileSizeError:s=>X(s),onEditFileName:F,openPopup:P,showPhotoPicker:!0,errorInfoLabel:l.checkDepositDrawer.backSideError,useMobileCam:!0,compressImage:!0}),t.jsx(oo,{children:l.checkDepositDrawer.picGuides.map(s=>t.jsxs(to,{children:[t.jsx(Ue,{}),t.jsx(Ie,{children:s})]},s))})]}),t.jsx(io,{windowSize:c,children:Be.formatJPGText10MB})]})]})})})]})}const Ae=i(B)`
+  color: ${e=>e.theme.colors.hero};
+`,Ie=i(B)`
+  color: ${e=>e.theme.colors.hero};
+  margin-left: ${o.sp3};
+`,Ee=i(H)`
+  color: ${e=>e.theme.colors.grey1};
+  display: flex;
+  align-items: center;
+  gap: ${o.sp2};
+`,Z=i.div``,Ne=i.span`
+  margin-left: ${o.sp2};
+`,Me=i(Pe)`
+  min-width: ${e=>e.isSelectedValue?o.sp4:o.sp5};
+  width: ${e=>e.isSelectedValue?o.sp4:o.sp5};
+  height: ${e=>e.isSelectedValue?o.sp4:o.sp5};
+  margin-right: ${o.sp2};
+`,Ve=i.div`
+  margin-top: ${o.sp3};
+  display: flex;
+  background-color: ${e=>e.theme.colors.grey5};
+  justify-content: space-between;
+  padding: ${o.sp3} ${o.sp4};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  border-radius: ${o.sp2};
+  box-shadow: ${e=>`${o.sp0} 2px 2px ${e.theme.colors.dropShadowNormal}`};
+`,Re=i.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  padding: ${o.sp3} ${o.sp4};
+  background-color: ${j.importantLight};
+  border-radius: ${o.sp2};
+`,Oe=i.div`
+  display: flex;
+  align-items: flex-start;
+`,qe=i.div``,_e=i(we)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${j.important};
+`,He=i.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: ${o.sp2};
+`,Xe=i(be)`
+  color: ${j.important};
+`,Ge=i(B)`
+  color: ${j.important};
+`,We=i($e)`
+  color: ${e=>e.theme.colors.primary};
+  margin: ${o.sp5} ${o.sp0} ${o.sp3} ${o.sp0};
+`,Ye=i(ye)`
+  border-radius: ${o.sp2};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+`,Je=i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  box-shadow: ${e=>`${o.sp0} 2px ${o.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${o.sp2};
+  margin-bottom: ${o.sp3};
+`,V=i.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,ce=i.div`
+  display: flex;
+  flex-direction: "row";
+  padding: ${o.sp2};
+  padding-left: ${e=>p.rowContentPaddingLeft.valuePx(e.size)};
+  justify-content: space-between;
+  color: ${e=>e.theme.colors.hero};
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+    .select-control {
+      background-color: ${e=>e.theme.colors.background};
+    }
+  }
+  &:focus-within {
+    border-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+    z-index: 2;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+  }
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+`,Ze=i(ce)`
+  flex-direction: column;
+  padding: ${o.sp0};
+`,Ke=i.div`
+  padding: ${e=>`${o.sp3} ${p.checkPicRowContentPaddingXAxis.valuePx(e.size)}`};
+`,Qe=i.div`
+  width: 100%;
+  display: flex;
+  flex-grow: ${e=>e.size==="small"?1:0};
+  align-items: flex-start;
+`,K=i(H)`
+  color: ${e=>e.theme.colors.hero};
+  margin-bottom: ${o.sp2};
+  margin-top: ${e=>e.isLast?o.sp3:o.sp0};
+`,Ue=i.div`
+  background-color: ${e=>e.theme.colors.hero};
+  border-radius: 50%;
+  border-style: solid;
+  width: 2px;
+  height: 2px;
+  position: absolute;
+  top: 10px;
+`,eo=i.div`
+  width: ${o.sp1};
+  height: ${o.sp1};
+  min-width: ${o.sp1};
+  background-color: ${e=>e.theme.colors.grey1};
+  border-radius: 50%;
+`,oo=i.div`
+  display: flex;
+  flex-direction: column;
+  margin: ${o.sp3} ${o.sp0};
+  margin-bottom: ${o.sp0};
+`,to=i.div`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+`,io=i(H)`
+  margin-top: ${o.sp2};
+  padding: ${o.sp1} ${o.sp4};
+  background: ${e=>e.theme.colors.grey4};
+  border-radius: ${o.sp0} ${o.sp0} ${o.sp2} ${o.sp2};
+  width: 100%;
+  box-sizing: border-box;
+  text-align: ${e=>e.windowSize==="small"?"initial":"right"};
+  color: ${e=>e.theme.colors.grey1};
+`,ao=i(te)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,so={NavBarContainerPaddingYAxis:new n(10,a[3])},co=e=>`${e}_form`,_={containerPaddingLeft:new n(a[3],a[6],a[8]),containerPaddingRight:new n(a[3],a[6],a[8]),successContentMargin:new n(a[3],a[12])},{spendManagement:ro}=ie.getLocalizedStrings(),u=ro.zeniAccounts.zeniAccountList,Bo=({checkDeposit:e,analytics:r,filesEndPoint:g,authParams:P,onSaveChangesToLocalStore:L,onAnotherTransferClick:z,updateFilesEntity:S,onDeleteFile:v,onEditFileName:F,onCheckDpositClick:A,onDismissClick:c})=>{const d=oe(),[C,T]=w.useState(!1);return t.jsx(ho,{windowSize:d,children:e.fetchState==="Completed"?t.jsxs(Q,{windowSize:d,children:[t.jsx(U,{windowSize:d,children:t.jsx(ee,{"data-testid":y("check-deposit-drawer-close"),onClick:()=>{r.trackAccountsDepositCheckFormClicked("Cross",e.checkDepositLocalData.amount.amount,e.checkDepositLocalData.source,e.checkDepositLocalData.depositTo?.accountName,e.checkFront!=null,e.checkBack!=null),c?.()}})}),t.jsxs(go,{windowSize:d,children:[t.jsx(Le,{width:150,height:150,shouldDisplay:!0,animationInLoop:!0}),t.jsxs(uo,{children:[u.checkDepositDrawer.transferSuccessMsgPrefix,t.jsx(po,{children:R("0,0.[00]",e.checkDepositLocalData.amount)}),u.checkDepositDrawer.transferSuccessMsgSuffix]}),t.jsxs(mo,{children:[t.jsx(W,{variant:"secondary",label:u.checkDepositDrawer.makeAnotherTransferBtn,onClick:z,"data-testid":y("check-deposit-drawer-another-transfer")}),t.jsx(W,{variant:"primary",label:u.checkDepositDrawer.goToAccountBtn,onClick:c,style:{marginLeft:d==="small"?o.sp3:o.sp5},"data-testid":y("check-deposit-drawer-go-to-account")})]})]})]}):t.jsxs(t.Fragment,{children:[t.jsxs(Q,{windowSize:d,children:[t.jsx(U,{windowSize:d,children:t.jsx(ee,{"data-testid":y("check-deposit-drawer-close"),onClick:()=>{r.trackAccountsDepositCheckFormClicked("Cross",e.checkDepositLocalData.amount.amount,e.checkDepositLocalData.source,e.checkDepositLocalData.depositTo?.accountName,e.checkFront!=null,e.checkBack!=null),c?.()}})}),d==="small"?t.jsx(fo,{windowSize:d,children:u.checkDepositDrawer.title}):t.jsx(xo,{children:u.checkDepositDrawer.title}),d==="small"?t.jsx(no,{children:u.checkDepositDrawer.subTitle}):t.jsx(lo,{children:u.checkDepositDrawer.subTitle}),t.jsx(ze,{analytics:r,authParams:P,checkDeposit:e,filesEndPoint:g,onSaveChangesToLocalStore:L,openPopup:T,onCheckDpositClick:A,onDeleteFile:v,onEditFileName:F,updateFilesEntity:S})]}),t.jsx(de,{formId:co("checkDepositDetailPage"),helperText:u.checkDepositDrawer.footNote,helperStyle:{paddingTop:o.sp0,paddingBottom:o.sp0},style:{zIndex:C?0:4,paddingTop:o.sp3,paddingBottom:o.sp3},primaryBtn:{label:u.checkDepositDrawer.depositBtn,isLoading:e.fetchState==="In-Progress"},cancelBtn:{label:u.checkDepositDrawer.cancelBtn,onClick:()=>{r.trackAccountsDepositCheckFormClicked("Cancel",e.checkDepositLocalData.amount.amount,e.checkDepositLocalData.source,e.checkDepositLocalData.depositTo?.accountName,e.checkFront!=null,e.checkBack!=null),c?.()}}})]})})},lo=i(B)`
+  color: ${e=>e.theme.colors.hero};
+`,no=i(ue)`
+  color: ${e=>e.theme.colors.hero};
+`,po=i(he)`
+  display: inline;
+`,ho=i.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100%;
+  width: 100%;
+`,uo=i(pe)`
+  color: ${e=>e.theme.colors.primary};
+  text-align: center;
+`,Q=i.div`
+  height: ${e=>e.windowSize==="small"?"auto":"100%"};
+  padding-left: ${e=>`${_.containerPaddingLeft.valuePx(e.windowSize)}`};
+  padding-right: ${e=>`${_.containerPaddingRight.valuePx(e.windowSize)}`};
+`,mo=i.div`
+  display: flex;
+  justify-content: center;
+  margin-top: ${o.sp7};
+`,go=i.div`
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: ${e=>`${o.sp0} ${_.successContentMargin.valuePx(e.windowSize)} `};
+  align-items: center;
+`,U=i.div`
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  top: ${o.sp0};
+  padding: ${e=>`${so.NavBarContainerPaddingYAxis.valuePx(e.windowSize)} ${o.sp0}`};
+  z-index: 2;
+  background-color: ${e=>e.theme.colors.grey4};
+`,ee=i(te)`
+  cursor: pointer;
+  color: ${e=>e.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  min-height: ${o.sp4};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,fo=i(ae)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${o.sp3};
+  margin-bottom: ${o.sp0};
+  margin-right: ${o.sp3};
+`,xo=i(ae)`
+  color: ${e=>e.theme.colors.primary};
+  margin-top: ${o.sp3};
+`;export{Bo as default,co as uniqueFormName};