@zeniai/web-components 3.16.51 → 3.16.52

package/dist/SetUpDefaultSection-B71W3tyT.cjs

@@ -0,0 +1,187 @@
+"use strict";const i=require("./vendor-.pnpm-DHyNpoQL.cjs"),V=require("react"),o=require("@emotion/styled"),e=require("./index-DBt4VX1a.cjs"),r={sectionWidth:new e.ResponsiveSized(343,580,726),descriptionMarginBottom:new e.ResponsiveSized(12,e.sp[3]),iconContainerMaxWidthHeight:new e.ResponsiveSized(e.sp[6],e.sp[7]),iconContainerMarginRight:new e.ResponsiveSized(12,e.sp[3]),iconPadding:new e.ResponsiveSized(10,12),rowGap:new e.ResponsiveSized(e.sp[2],e.sp[3]),containerPadding:new e.ResponsiveSized(e.sp[3],e.sp[4]),navIconLeftMargin:new e.ResponsiveSized(12,e.sp[4]),tagIconContainerDivMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[0])},k={title:new e.ResponsiveSizedStyle("standardSemiBold","largeSemiBold")},{commonSetUp:{setUp:f}}=e.appLocale.getLocalizedStrings(),J=o(e.SvgArrowFilledBottom)`
+  margin-left: 6px;
+  width: 12px;
+  height: 12px;
+`,K=o.div`
+  display: flex;
+  align-items: center;
+`,Q=o.div`
+  position: relative;
+`,X=o.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: absolute;
+  top: ${e.Space.sp4};
+  right: -153px;
+  width: 300px;
+  z-index: 3;
+  height: ${e.Space.sp7};
+  border-radius: ${e.Space.sp1};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp2} ${t.theme.colors.grey1}`};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  background: ${t=>t.theme.colors.grey4};
+`,Y=o(e.SvgCards)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+  margin-right: ${e.Space.sp2};
+  margin-left: ${e.Space.sp4};
+`,Z=o(e.SmallRegularSp)`
+  color: ${t=>t.theme.colors.hero};
+  cursor: pointer;
+`,O=o.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey5};
+  color: ${t=>t.theme.colors.grey1};
+  border-radius: ${e.Space.sp2};
+  ${t=>t.isFootNoteAvailable&&`
+    border-bottom-right-radius: ${e.Space.sp0};
+    border-bottom-left-radius: ${e.Space.sp0};
+  `}
+`,A=({windowSize:t,title:w,isError:c,isCardPaymentMethod:h=!1,showAddPaymentMethodDropDown:g=!1,addPaymentMethodDropdownOpen:s,isDisabled:x,updateCardPaymentModalState:m,setAddPaymentMethodDropdownOpen:l,openPlaidDialog:u,productType:d,setEventSourceType:S,referrer:v,analytics:j})=>{const R=()=>{s===!0&&l!=null&&l(!1)};return i.jsxRuntimeExports.jsxs(K,{children:[i.jsxRuntimeExports.jsx(ne,{windowSize:t,isDisabled:x,isError:c,children:w}),g?i.jsxRuntimeExports.jsxs(Q,{"data-testid":e.generateDataTestId("add-payment-method-wrapper",d),children:[i.jsxRuntimeExports.jsx(J,{"data-testid":e.generateDataTestId("add-payment-method",d),onClick:p=>{p.stopPropagation(),l?.(!(s??!1))}}),s===!0?i.jsxRuntimeExports.jsx(i.ClickAwayListener,{onClickAway:R,children:i.jsxRuntimeExports.jsxs(X,{children:[i.jsxRuntimeExports.jsx(Y,{}),i.jsxRuntimeExports.jsx(Z,{onClick:p=>{p.stopPropagation(),h&&m!=null?(m(!0),S!=null&&j!=null&&d!=null&&(S("link_new_credit_card"),j.trackCreditCardConnect(d,"link_new_credit_card",v))):u?.(p,"link_new_bank_account"),l?.(!1)},"data-testid":e.generateDataTestId("add-card",d),children:h?f.addNewCard:f.linkNewAccount})]})}):null]}):null]})};function ee({style:t,header:w,footNote:c,title:h,subTitle:g,status:s,statusInfoIcon:x,icon:m,isActive:l=!0,isDisabled:u=!1,isClickable:d=!0,isCompleted:S=!1,showCompletedIcon:v=!1,isError:j,hasError:R=!1,subTitleIcon:p,isLoading:a,isTagLoading:C,isActiveWhileLoading:T=!1,shouldHover:P=!0,showRightArrow:W=!0,onClick:L,showAddPaymentMethodDropDown:B=!1,updateCardPaymentModalState:M,openPlaidDialog:_,isCardPaymentMethod:D,analytics:N,productType:y,referrer:F,setEventSourceType:q,additionalInfo:$}){const n=e.useWindowSizeContext(),G=i.useTheme(),[H,U]=V.useState(!1);return i.jsxRuntimeExports.jsxs(te,{windowSize:n,style:t,isActive:l&&!u,isLoading:a??!1,isActiveWhileLoading:T,"data-testid":e.generateDataTestId("setup-default-section",y),children:[i.jsxRuntimeExports.jsxs(ue,{children:[v===!0?i.jsxRuntimeExports.jsx($e,{children:S?i.jsxRuntimeExports.jsx(fe,{}):i.jsxRuntimeExports.jsx(we,{})}):null,i.jsxRuntimeExports.jsxs(he,{windowSize:n,children:[w,l===!1?i.jsxRuntimeExports.jsx(je,{children:f.comingSoon}):null]})]}),i.jsxRuntimeExports.jsxs(xe,{windowSize:n,width:t?.width,shouldHover:P,isClickable:d,children:[i.jsxRuntimeExports.jsxs(O,{isFootNoteAvailable:c!=null,children:[i.jsxRuntimeExports.jsxs(me,{windowSize:n,width:t?.width,isfootNoteAvailable:c!=null,onClick:l&&!u?L:void 0,"data-testid":e.generateDataTestId("setup-approval-section-elements",y),children:[i.jsxRuntimeExports.jsxs(ie,{children:[i.jsxRuntimeExports.jsxs(oe,{children:[i.jsxRuntimeExports.jsx(e.Loader,{isLoading:a??!1,customStyle:{width:e.Space.sp7,height:e.Space.sp7,borderRadius:"50%",marginRight:e.Space.sp3},children:i.jsxRuntimeExports.jsx(pe,{iconColor:m.color,windowSize:n,isDarkMode:G.mode==="dark",children:m.element})}),i.jsxRuntimeExports.jsxs(ge,{children:[i.jsxRuntimeExports.jsxs(Se,{children:[i.jsxRuntimeExports.jsx(e.Loader,{isLoading:a??!1,customStyle:{width:"200px",height:e.Space.sp4,marginBottom:`${r.descriptionMarginBottom.valuePx(n)}`,marginTop:e.Space.sp2},children:i.jsxRuntimeExports.jsx(A,{windowSize:n,title:h,isError:j,showAddPaymentMethodDropDown:B,setAddPaymentMethodDropdownOpen:U,addPaymentMethodDropdownOpen:H,updateCardPaymentModalState:M,isCardPaymentMethod:D??!1,openPlaidDialog:_,analytics:N,productType:y,referrer:F,setEventSourceType:q})}),g.length>0?i.jsxRuntimeExports.jsx(re,{children:i.jsxRuntimeExports.jsx(e.Loader,{isLoading:a??!1,customStyle:{width:e.Space.sp12,height:`${e.Space.sp4}`,marginBottom:`${r.descriptionMarginBottom.valuePx(n)}`},children:i.jsxRuntimeExports.jsxs(le,{children:[g,p!=null?i.jsxRuntimeExports.jsx(ae,{children:p.element}):null]})})}):null]}),s!=null&&n==="small"?i.jsxRuntimeExports.jsx(e.Loader,{isLoading:a??!1,customStyle:{width:e.Space.sp12,height:e.Space.sp4,marginBottom:`${r.descriptionMarginBottom.valuePx(n)}`},children:i.jsxRuntimeExports.jsxs(E,{windowSize:n,children:[x??x,i.jsxRuntimeExports.jsx(e.ItemWithTag,{style:{width:"max-content",padding:0},tagTitle:s.name,textColor:e.getSetupStatusColor(s.code),showLoader:C})]})}):null,a===!1&&$!=null&&n==="small"?i.jsxRuntimeExports.jsxs(Re,{children:[i.jsxRuntimeExports.jsx(b,{statusColor:s!=null?e.getSetupStatusColor(s.code).color:void 0}),i.jsxRuntimeExports.jsx(z,{statusColor:s!=null?e.getSetupStatusColor(s.code).color:void 0,children:$})]}):null]})]}),i.jsxRuntimeExports.jsxs(se,{children:[s!=null&&n!=="small"?i.jsxRuntimeExports.jsxs(E,{windowSize:n,children:[i.jsxRuntimeExports.jsx(ve,{children:x??x}),i.jsxRuntimeExports.jsx(e.Loader,{isLoading:a??!1,customStyle:{width:e.Space.sp12,height:`${e.Space.sp4}`,marginBottom:`${r.descriptionMarginBottom.valuePx(n)}`},children:i.jsxRuntimeExports.jsx(e.ItemWithTag,{style:{width:"max-content",padding:0},tagTitle:s.name,textColor:e.getSetupStatusColor(s.code),showLoader:C})})]}):null,W===!0?i.jsxRuntimeExports.jsx(ce,{windowSize:n,children:i.jsxRuntimeExports.jsx(de,{width:e.Space.sp4,height:e.Space.sp4})}):null]})]}),a===!1&&$!=null&&n!=="small"?i.jsxRuntimeExports.jsxs(ye,{children:[i.jsxRuntimeExports.jsx(b,{statusColor:s!=null?e.getSetupStatusColor(s.code).color:void 0}),i.jsxRuntimeExports.jsx(z,{statusColor:s!=null?e.getSetupStatusColor(s.code).color:void 0,children:$})]}):null]}),R?i.jsxRuntimeExports.jsx(Ce,{children:f.bankAccountLinkingError}):null]}),i.jsxRuntimeExports.jsx(e.Loader,{isLoading:a??!1,customStyle:{marginTop:r.rowGap.valuePx(n),width:"48%",height:e.Space.sp3,marginBottom:e.Space.sp2,marginLeft:e.Space.sp3},children:typeof c=="string"?i.jsxRuntimeExports.jsx(I,{children:c}):c})]})]})}const te=o.div`
+  display: flex;
+  flex-direction: column;
+  pointer-events: ${t=>(t.isLoading===!0||t.isActive===!1)&&t.isActiveWhileLoading===!1?"none":"initial"};
+  opacity: ${t=>t.isActive?1:.32};
+  padding-top: ${e.Space.sp3};
+  row-gap: ${t=>r.rowGap.valuePx(t.windowSize)};
+`,ie=o.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  width: 100%;
+`,oe=o.div`
+  display: flex;
+  align-items: center;
+`,se=o.div`
+  display: flex;
+  align-items: center;
+`,E=o.div`
+  display: flex;
+  align-items: flex-end;
+  margin-top: ${t=>r.tagIconContainerDivMarginTop.valuePx(t.windowSize)};
+  gap: ${e.Space.sp2};
+`,ne=o.div`
+  ${t=>`${k.title.style(t.windowSize)}`};
+  color: ${t=>t.isError===!0?e.Colors.important:t.isDisabled===!0?t.theme.colors.grey1:t.theme.colors.primary};
+`,re=o.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+`,le=o(e.SmallRegularSp)`
+  color: ${t=>t.theme.colors.hero};
+`,ae=o.span`
+  padding-left: ${e.Space.sp1};
+`,ce=o.div`
+  display: flex;
+  color: inherit;
+  margin-left: ${t=>r.navIconLeftMargin.valuePx(t.windowSize)};
+`,de=o(e.SvgArrowRight)`
+  width: ${e.Space.sp4};
+  height: ${e.Space.sp4};
+`,pe=o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  padding: ${t=>r.iconPadding.valuePx(t.windowSize)};
+  background: ${t=>t.iconColor.toString()};
+  border-radius: ${e.Space.sp11};
+  width: fit-content;
+  height: fit-content;
+  color: ${t=>t.isDarkMode?e.Colors.neutralGrey5Light:t.theme.colors.brandColorOnyx}; // As per design
+  max-width: ${t=>r.iconContainerMaxWidthHeight.valuePx(t.windowSize)};
+  max-height: ${t=>r.iconContainerMaxWidthHeight.valuePx(t.windowSize)};
+  margin-right: ${t=>r.iconContainerMarginRight.valuePx(t.windowSize)};
+`,xe=o.div`
+  width: ${t=>t.width!=null?t.width:r.sectionWidth.valuePx(t.windowSize)};
+  border: 1px solid ${t=>t.theme.colors.grey3};
+  box-shadow: ${t=>`${e.Space.sp0} 2px ${e.Space.sp1} ${t.theme.colors.dropShadowNormal}`};
+  border-radius: ${e.Space.sp2};
+  &:hover {
+    border: ${t=>`1px solid  ${t.shouldHover?t.theme.colors.primary:t.theme.colors.grey3}`};
+    color: ${t=>t.theme.colors.primary};
+    cursor: ${t=>t.isClickable?"pointer":"default"};
+    position: relative;
+  }
+`,me=o.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${t=>r.containerPadding.valuePx(t.windowSize)};
+  background-color: ${t=>t.theme.colors.grey5};
+  fill: ${t=>t.theme.colors.grey1};
+  color: ${t=>t.theme.colors.grey1};
+  border-top-right-radius: ${e.Space.sp2};
+  border-top-left-radius: ${e.Space.sp2};
+  border-bottom-right-radius: ${t=>t.isfootNoteAvailable?e.Space.sp0:e.Space.sp2};
+  border-bottom-left-radius: ${t=>t.isfootNoteAvailable?e.Space.sp0:e.Space.sp2};
+  justify-content: space-between;
+  box-sizing: border-box;
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+    fill: ${t=>t.theme.colors.primary};
+  }
+`,ue=o.div`
+  display: flex;
+  align-items: center;
+`,he=o.div`
+  display: flex;
+  align-items: center;
+  color: ${t=>t.theme.colors.primary};
+  ${t=>`${k.title.style(t.windowSize)}`};
+`,ge=o.div`
+  display: flex;
+  flex-direction: column;
+`,Se=o.div``,je=o(e.ExtraSmallRegularSp)`
+  color: ${t=>t.theme.colors.comingSoon};
+  margin-left: ${e.Space.sp3};
+`,I=o(e.ExtraSmallRegular)`
+  padding: ${e.Space.sp2} ${e.Space.sp4};
+  background: ${t=>t.theme.colors.grey4};
+  border-radius: ${e.Space.sp0} ${e.Space.sp0} ${e.Space.sp2} ${e.Space.sp2};
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  color: ${t=>t.theme.colors.grey1};
+`,$e=o.div`
+  margin-right: ${e.Space.sp2};
+`,fe=o(e.SvgSuccessRound)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${e.Colors.success};
+`,we=o.div`
+  height: 14px;
+  width: 14px;
+  border: 1px solid ${t=>t.theme.colors.primary};
+  border-radius: 50%;
+`,ve=o.div`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  margin: auto;
+`,Re=o.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${e.Space.sp1};
+  margin-top: ${e.Space.sp2};
+`,ye=o.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${e.Space.sp1};
+  margin-top: ${e.Space.sp2};
+  padding-left: calc(${e.Space.sp7} + ${e.Space.sp3});
+`,b=o(e.SvgInfo)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  flex-shrink: 0;
+  margin-top: 2px;
+  color: ${t=>t.statusColor!=null?t.statusColor.toString():t.theme.colors.grey1};
+`,z=o(e.SmallRegular)`
+  color: ${t=>t.statusColor!=null?t.statusColor.toString():t.theme.colors.grey1};
+`,Ce=o(e.SmallRegular)`
+  display: flex;
+  color: ${e.Colors.important};
+  margin-left: 88px;
+  margin-bottom: ${e.Space.sp3};
+  border-radius: ${e.Space.sp1};
+`;exports.AddPaymentMethodWithTitle=A;exports.FootNote=I;exports.SetUpDefaultSection=ee;