@zeniai/web-components 3.16.31 → 3.16.32

package/dist/AddToWalletPage-Ctk9NMQs.cjs

@@ -0,0 +1,344 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-B6vI-hvj.cjs"),c=require("react"),C=require("@emotion/react"),s=require("@emotion/styled"),Q=require("@zeniai/client-epic-state"),t=require("./index-B5Auxr4x.cjs"),ee=require("./ChargeCardUtils-5hgAKUnW.cjs"),p=require("./add-to-wallet-BjCX6PYO.cjs"),te=({options:e,selected:i,onToggle:x,containerStyle:r={},optionStyle:S={},thumbStyle:f={}})=>{const g=e.findIndex(a=>a.id===i),u=100/e.length,j=()=>g===0?{left:"1%"}:g===e.length-1?{left:`${(e.length-1)*u}%`}:{left:`${g*u}%`};return o.jsxRuntimeExports.jsxs(oe,{style:r,children:[o.jsxRuntimeExports.jsx(se,{style:{width:`${u-1}%`,...j(),...f}}),e.map(a=>o.jsxRuntimeExports.jsx(ie,{style:S,active:a.id===i,"data-testid":a.dataTestId,onClick:$=>{$.preventDefault(),x(a.id)},children:a.label},a.id))]})},oe=s.div`
+  position: relative;
+  width: 100%;
+  background: ${e=>e.theme.colors.grey3};
+  border: 1px solid ${e=>e.theme.colors.grey2};
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: ${t.Space.sp2} 0;
+  box-sizing: border-box;
+`,se=s.div`
+  position: absolute;
+  background: ${e=>e.theme.colors.grey5};
+  box-shadow: ${t.Space.sp0} 1px 2px ${t.Colors.boxShadowElevation};
+  border-radius: 50px;
+  transition:
+    left 0.3s ease,
+    width 0.3s ease;
+  z-index: 1;
+  padding-top: 20px;
+  padding-bottom: 20px;
+`,ie=s.button`
+  ${t.textStyles.smallMedium.cssObject};
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${e=>e.active?e.theme.colors.primary:t.Colors.heroLight};
+  z-index: 2;
+  cursor: pointer;
+  user-select: none;
+  border: none;
+  background: none;
+  padding: ${t.Space.sp0};
+  transition: color 0.3s ease;
+  padding-top: ${t.Space.sp1};
+  padding-bottom: ${t.Space.sp1};
+`,{spendManagement:{chargeCard:{chargeCardsPromo:E,cardDetails:l}}}=t.appLocale.getLocalizedStrings(),d={chargeCardWidth:new t.ResponsiveSized(200,384),chargeCardHeight:new t.ResponsiveSized(128,240),openWalletIconWidthHeight:new t.ResponsiveSized(20,t.sp[4]),headingMarginTop:new t.ResponsiveSized(t.sp[4],t.sp[7]),headingMarginBottom:new t.ResponsiveSized(t.sp[6],t.sp[9])},m={headingFont:new t.ResponsiveSizedStyle("h6Medium","h4Regular"),subheadingFont:new t.ResponsiveSizedStyle("standardRegular","h6Regular"),walletTitleFont:new t.ResponsiveSizedStyle("standardSemiBold","largeSemiBold"),walletSubTitleFont:new t.ResponsiveSizedStyle("extraSmallRegular","standardRegular")},ne=(e,i,x)=>o.jsxRuntimeExports.jsxs(Ie,{translatePhone:e,showIphone:x,children:[o.jsxRuntimeExports.jsxs(ke,{children:[o.jsxRuntimeExports.jsx(Ge,{children:E.timeText}),o.jsxRuntimeExports.jsxs(Be,{children:[o.jsxRuntimeExports.jsx(Ae,{children:[...Array(4).keys()].map(r=>o.jsxRuntimeExports.jsx(Pe,{towerIndex:r},r))}),o.jsxRuntimeExports.jsx(Le,{children:o.jsxRuntimeExports.jsx(b,{className:"wave",children:o.jsxRuntimeExports.jsx(b,{className:"wave",children:o.jsxRuntimeExports.jsx(b,{className:"wave"})})})}),o.jsxRuntimeExports.jsx(Fe,{children:o.jsxRuntimeExports.jsx(Me,{})}),o.jsxRuntimeExports.jsx(He,{})]})]}),o.jsxRuntimeExports.jsxs(We,{children:[o.jsxRuntimeExports.jsxs(Re,{children:[o.jsxRuntimeExports.jsx(ve,{showTick:i}),o.jsxRuntimeExports.jsx(Ce,{showTick:i}),o.jsxRuntimeExports.jsx(Ee,{showTick:i}),o.jsxRuntimeExports.jsx(Te,{showTick:i}),o.jsxRuntimeExports.jsxs(Ve,{translateCardSkelton:e,children:[o.jsxRuntimeExports.jsx(Oe,{}),[...Array(4).keys()].map(r=>o.jsxRuntimeExports.jsx(Ne,{lineIndex:r},r))]}),i?null:o.jsxRuntimeExports.jsx(Je,{children:o.jsxRuntimeExports.jsx(t.Scanner,{scannerTheme:"light"})})]}),o.jsxRuntimeExports.jsx(qe,{showTick:i}),o.jsxRuntimeExports.jsx(De,{showTick:i,children:E.addToWallet})]}),o.jsxRuntimeExports.jsx(ze,{})]}),T=({tabType:e})=>{const i=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(xe,{children:[o.jsxRuntimeExports.jsxs(k,{children:[o.jsxRuntimeExports.jsx(ge,{children:o.jsxRuntimeExports.jsx(ue,{windowSize:i})}),o.jsxRuntimeExports.jsx(B,{windowSize:i,children:l.openWalletAppOnPhone})]}),o.jsxRuntimeExports.jsxs(z,{windowSize:i,children:[e==="apple"?l.openWalletDescriptionApple:l.openWalletDescriptionGoogle,o.jsxRuntimeExports.jsx(W,{})]}),o.jsxRuntimeExports.jsxs(k,{children:[o.jsxRuntimeExports.jsx(he,{children:o.jsxRuntimeExports.jsx(me,{windowSize:i})}),o.jsxRuntimeExports.jsx(B,{windowSize:i,children:l.verifyCard})]}),o.jsxRuntimeExports.jsxs(z,{windowSize:i,children:[e==="apple"?l.VerifyCardDescriptionApple:l.VerifyCardDescriptionGoogle,o.jsxRuntimeExports.jsx(W,{})]})]})},re=({onGotItClick:e,isDebitCard:i,controllerEmails:x,classListFetchState:r,isChargeCardFeatureEnabled:S,isDebitCardFeatureEnabled:f,isDebitCardSetupEnabled:g,isChargeCardSetupEnabled:u,productInformation:j,creditAccountInformation:a,debitAccountInformation:$,chargeCardDetailView:A,creditAccount:P,creditAccountRepayment:L,cardIssuedByRoles:F,cardIssuedByDepartmentName:M,cardHolderRoles:H,cardHolderDepartmentName:G})=>{const n=t.useWindowSizeContext(),q=t.useToolkitContext().analytics,[w,D]=c.useState(!1),[R,V]=c.useState(!1),[N,O]=c.useState(!1),[J,X]=c.useState(!1),[y,U]=c.useState("apple"),Y=t.useGlobalInfoContext(),Z=Q.hasChargeCardAdminLevelAccess(Y.loggedInUserRoleMap),_=v=>{ee.fireCardsAddToWalletClick({chargeCardDetailView:A,classListFetchState:r,analytics:q,isDebitCard:i,isChargeCardAdmin:Z,cardIssuedByRoles:F,cardIssuedByDepartmentName:M,cardHolderRoles:H,cardHolderDepartmentName:G,controllerEmails:x,pageName:"Card Activation",addToWalletType:v==="apple"?"Apple Wallet":"Google Wallet",productInformation:j,creditAccountInformation:a,debitAccountInformation:$,isChargeCardFeatureEnabled:S,creditAccount:P,creditAccountRepayment:L}),U(v)};c.useEffect(()=>{setTimeout(()=>{D(!0)},i?9500:4500),setTimeout(()=>{V(!0)},i?9e3:4e3),setTimeout(()=>{O(!0)},i?10500:5500),setTimeout(()=>{X(!0)},i?15e3:1e4)},[i]);const K=w&&R,h=t.appLocale.getLocalizedStrings().spendManagement.chargeCard;return o.jsxRuntimeExports.jsx(Ze,{windowSize:n,children:o.jsxRuntimeExports.jsxs($e,{children:[o.jsxRuntimeExports.jsx(t.NavBar,{navBarContainerStyles:{paddingTop:t.sp[2],alignItems:"center",paddingBottom:t.sp[2]},title:h.addToWallet.title,ignoreScrollAction:!0,showBackButton:!1,showMenuIcon:!1,transparentBackground:!0,source:"AddToWalletPage",style:{zIndex:3},titleStyle:{marginTop:t.sp[0]}}),o.jsxRuntimeExports.jsxs(ye,{windowSize:n,children:[o.jsxRuntimeExports.jsx(Xe,{windowSize:n,children:h.addToWallet.heading}),o.jsxRuntimeExports.jsx(Ue,{windowSize:n,children:h.addToWallet.subheading})]}),o.jsxRuntimeExports.jsxs(be,{windowSize:n,children:[n!=="small"?o.jsxRuntimeExports.jsx(Ke,{children:o.jsxRuntimeExports.jsxs(fe,{windowSize:n,children:[o.jsxRuntimeExports.jsxs(we,{windowSize:n,flipCard:w,scaleCard:R,children:[o.jsxRuntimeExports.jsx(t.PhysicalCardView,{isDebitCard:i}),o.jsxRuntimeExports.jsx(t.PhysicalCardBackView,{showCrossIcon:!1,isDebitCard:i})]}),ne(N,J,K)]})}):null,o.jsxRuntimeExports.jsxs(pe,{windowSize:n,children:[o.jsxRuntimeExports.jsx(ce,{children:o.jsxRuntimeExports.jsx(te,{options:[{id:"apple",dataTestId:"add-to-apple-wallet",label:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(je,{}),o.jsxRuntimeExports.jsx(I,{children:l.appleWallet})]})},{id:"google",dataTestId:"add-to-google-wallet",label:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(Se,{}),o.jsxRuntimeExports.jsx(I,{children:l.googleWallet})]})}],optionStyle:{padding:"12px"},thumbStyle:{paddingTop:t.Space.sp4,paddingBottom:t.Space.sp4},containerStyle:{border:t.Space.sp0},selected:y,onToggle:_})}),o.jsxRuntimeExports.jsxs(ae,{children:[o.jsxRuntimeExports.jsx(le,{isActive:y==="apple",children:o.jsxRuntimeExports.jsx(T,{tabType:"apple"})}),o.jsxRuntimeExports.jsx(de,{isActive:y==="google",children:o.jsxRuntimeExports.jsx(T,{tabType:"google"})})]}),n!=="small"?o.jsxRuntimeExports.jsx(Ye,{children:o.jsxRuntimeExports.jsx(t.Button,{variant:"primary",label:h.addToWallet.gotIt,onClick:e,style:{width:"fit-content"},"data-testid":t.generateDataTestId("got-it-button-web")})}):null]})]}),n==="small"?o.jsxRuntimeExports.jsx(_e,{children:o.jsxRuntimeExports.jsx(t.Button,{variant:"primary",label:h.addToWallet.gotIt,onClick:e,style:{width:"fit-content"},"data-testid":t.generateDataTestId("got-it-button-mobile")})}):null]})})},ae=s.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`,le=s.div`
+  display: flex;
+  width: 100%;
+  position: absolute;
+  left: ${e=>e.isActive?t.Space.sp0:"-369px"};
+  transition: left 0.3s ease-in-out;
+`,de=s.div`
+  display: flex;
+  width: 100%;
+  position: absolute;
+  right: ${e=>e.isActive?t.Space.sp0:"-369px"};
+  transition: right 0.3s ease-in-out;
+`,W=s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+  margin: ${t.Space.sp3} ${t.Space.sp0};
+`,pe=s.div`
+  display: flex;
+  width: ${({windowSize:e})=>e==="small"?"100%":"369px"};
+  flex-direction: column;
+`,ce=s.div`
+  display: flex;
+  height: ${t.Space.sp8};
+  width: 100%;
+  border-radius: ${t.Space.sp12};
+  border: 1px solid ${e=>e.theme.colors.grey2};
+  background: ${e=>e.theme.colors.grey3};
+  position: relative;
+`,I=s(t.StandardMedium)`
+  text-transform: none;
+  margin-left: ${t.Space.sp2};
+  cursor: pointer;
+`,xe=s.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: ${t.Space.sp6};
+`,he=s.div`
+  padding: 12px;
+  border-radius: ${t.Space.sp4};
+  background: ${t.Colors.successLight};
+  display: flex;
+`,ge=s.div`
+  padding: 12px;
+  border-radius: ${t.Space.sp4};
+  background: ${e=>e.theme.colors.graphColor16Light};
+  display: flex;
+`,k=s.div`
+  display: flex;
+  align-items: center;
+  gap: ${t.Space.sp3};
+`,B=s(t.StyledText)`
+  ${({windowSize:e})=>m.walletTitleFont.style(e)}
+  color: ${e=>e.theme.colors.primary};
+`,z=s(t.StyledText)`
+  ${({windowSize:e})=>m.walletSubTitleFont.style(e)}
+  color: ${e=>e.theme.colors.hero};
+  margin-left: ${t.Space.sp9};
+`,ue=s(p.SvgAddToWallet)`
+  width: ${({windowSize:e})=>d.openWalletIconWidthHeight.valuePx(e)};
+  height: ${({windowSize:e})=>d.openWalletIconWidthHeight.valuePx(e)};
+  color: ${e=>e.theme.colors.link};
+`,me=s(t.SvgVerified)`
+  width: ${({windowSize:e})=>d.openWalletIconWidthHeight.valuePx(e)};
+  height: ${({windowSize:e})=>d.openWalletIconWidthHeight.valuePx(e)};
+`,Se=s(p.SvgGoogleWallet)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+`,je=s(p.SvgAppleWallet)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+`,$e=s.div`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+`,ye=s.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-top: ${({windowSize:e})=>d.headingMarginTop.valuePx(e)};
+  margin-bottom: ${({windowSize:e})=>d.headingMarginBottom.valuePx(e)};
+`,be=s.div`
+  ${e=>e.windowSize==="small"?"height: 100%;":null};
+  display: flex;
+  justify-content: center;
+  ${e=>e.windowSize==="small"?C.css`
+          margin: ${t.Space.sp0} ${t.Space.sp3};
+        `:C.css`
+          width: 100%;
+        `};
+`,fe=s.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+`,we=s.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: ${e=>d.chargeCardWidth.valuePx(e.windowSize)};
+  height: ${e=>d.chargeCardHeight.valuePx(e.windowSize)};
+  transform: ${e=>e.scaleCard?e.flipCard?"rotateY(180deg) scale(0.59)":"rotateY(0deg) scale(0.59)":"scale(1)"};
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  border-radius: ${t.Space.sp2};
+  box-shadow: ${e=>`1px 3px ${t.Space.sp4} ${t.Space.sp0} ${e.theme.colors.chargeCardBackgroundShadow}`};
+`,Re=s.div`
+  position: relative;
+  height: 118px;
+  width: 182px;
+  margin: 13px;
+  margin-top: 60px;
+`,ve=s(p.SvgCornerBorderTopRight)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${t.Space.sp2};
+  top: -${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  opacity: ${e=>e.showTick?0:1};
+  transition: opacity 0.5s linear;
+`,Ce=s(p.SvgCornerBorderTopLeft)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${t.Space.sp2};
+  top: -${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  opacity: ${e=>e.showTick?0:1};
+  transition: opacity 0.5s linear;
+`,Ee=s(p.SvgCornerBorderBottomRight)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  right: -${t.Space.sp2};
+  bottom: -${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  opacity: ${e=>e.showTick?0:1};
+  transition: opacity 0.5s linear;
+`,Te=s(p.SvgCornerBorderBottomLeft)`
+  height: 36px;
+  width: 36px;
+  position: absolute;
+  left: -${t.Space.sp2};
+  bottom: -${t.Space.sp2};
+  color: ${e=>e.theme.colors.hero};
+  opacity: ${e=>e.showTick?0:1};
+  transition: opacity 0.3s linear;
+`,We=s.div`
+  height: 88%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+`,Ie=s.div`
+  width: 230px;
+  height: 489px;
+  border: ${t.Space.sp1} solid ${e=>e.theme.colors.hero};
+  border-radius: ${t.Space.sp4};
+  background: ${t.Colors.brandColorPearl};
+  transform: ${e=>e.translatePhone?"translateX(-200px)":""};
+  transition: transform 0.3s ease-in;
+  margin-top: ${t.Space.sp11};
+  opacity: ${e=>e.showIphone?1:0};
+`,ke=s.div`
+  display: flex;
+  margin: ${t.Space.sp2} 10px ${t.Space.sp2} ${t.Space.sp3};
+  justify-content: space-between;
+  align-items: center;
+`,Be=s.div`
+  display: flex;
+  align-items: center;
+`,ze=s.div`
+  width: 76px;
+  display: flex;
+  border: 2px solid ${t.Colors.blackColor};
+  position: sticky;
+  bottom: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  right: ${t.Space.sp0};
+  margin: ${t.Space.sp2} auto;
+`,Ae=s.div`
+  display: flex;
+  align-items: flex-end;
+`,Pe=s.div`
+  height: ${e=>`${e.towerIndex+3}px`};
+  width: 2px;
+  margin-right: 1px;
+  background-color: ${e=>e.towerIndex===3?t.Colors.phoneSignalColor:t.Colors.blackColor};
+  border-radius: 0.5px;
+`,Le=s.div`
+  margin-top: ${t.Space.sp2};
+  & .wave {
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-radius: 50%;
+    border-style: solid;
+    margin: 1px;
+  }
+`,Fe=s.div`
+  border: 1px solid ${t.Colors.batteryBorderColor};
+  border-radius: 2px;
+`,Me=s.div`
+  width: 10px;
+  height: ${t.Space.sp1};
+  background-color: ${t.Colors.blackColor};
+  margin: 1px;
+  border-radius: 1px;
+`,He=s.div`
+  width: 1px;
+  height: 3px;
+  background-color: ${t.Colors.batteryBorderColor};
+  margin-left: 0.5px;
+  border-top-right-radius: 1px;
+  border-bottom-right-radius: 1px;
+`,Ge=s(t.SuperSmallBold)``,b=s.div``,qe=s(t.SvgTickRound)`
+  width: ${t.Space.sp7};
+  height: ${t.Space.sp7};
+  color: ${t.Colors.success};
+  margin-top: ${t.Space.sp4};
+  opacity: ${e=>e.showTick?1:0};
+  transition: opacity 0.5s linear;
+`,De=s(t.StandardRegular)`
+  color: ${t.Colors.primaryLight};
+  opacity: ${e=>e.showTick?1:0};
+  transition: opacity 0.5s linear;
+`,Ve=s.div`
+  border: 2px solid ${t.Colors.brandColorJade};
+  height: 97%;
+  border-radius: ${t.Space.sp2};
+  background-color: ${t.Colors.brandColorJade};
+  transform: ${e=>e.translateCardSkelton?"translateX(0px)":"translateX(-250px)"};
+  transition: transform 0.3s ease-in;
+  background-image: linear-gradient(
+    to bottom,
+    hsla(0, 0%, 100%, 0.8),
+    hsla(0, 0%, 100%, 0.8)
+  );
+`,Ne=s.div`
+  width: ${e=>e.lineIndex===0?"66px":e.lineIndex===1?"112px":"55px"};
+  border: 2px solid ${t.Colors.brandColorGold};
+  margin-bottom: ${e=>e.lineIndex===1?"22px":"12px"};
+  border-radius: ${t.Space.sp2};
+  margin-left: ${t.Space.sp3};
+  margin-top: ${e=>e.lineIndex===0?t.Space.sp4:t.Space.sp0};
+`,Oe=s(t.SvgZeniIconOnly)`
+  color: ${e=>e.theme.colors.brandColorJade};
+  width: ${t.Space.sp3};
+  height: ${t.Space.sp3};
+  position: absolute;
+  right: ${t.Space.sp2};
+  top: ${t.Space.sp3};
+`,Je=s.div`
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+`,Xe=s(t.StyledText)`
+  ${e=>`${m.headingFont.style(e.windowSize)}`};
+  ${e=>e.windowSize==="small"&&"white-space: pre;"}
+  color: ${e=>e.theme.colors.primary};
+  text-align: center;
+`,Ue=s(t.StyledText)`
+  ${e=>`${m.subheadingFont.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+  text-align: center;
+`,Ye=s.div`
+  display: flex;
+  justify-content: center;
+`,Ze=s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  background-image: ${e=>`url(https://storage.googleapis.com/zeni-apis.appspot.com/images/cards-signup-background-${e.windowSize==="small"?"m":"w"}-${e.theme.mode==="dark"?"d":"l"}.svg)`};
+  background-color: ${e=>e.theme.colors.grey4};
+  background-size: cover;
+  background-position: ${e=>e.windowSize==="small"?"center":"right"};
+  background-repeat: no-repeat;
+`,_e=s.div`
+  position: fixed;
+  bottom: ${t.Space.sp0};
+  left: ${t.Space.sp0};
+  right: ${t.Space.sp0};
+  margin: ${t.Space.sp0} auto;
+  display: flex;
+  justify-content: center;
+  height: ${t.Space.sp12};
+  align-items: center;
+  background-color: ${e=>e.theme.colors.grey5};
+`,Ke=s.div`
+  margin-right: -92px;
+  margin-top: -92px;
+  z-index: 5;
+`;exports.default=re;