@zeniai/web-components 3.16.99 → 3.17.2

package/dist/AddToWalletPage-CS16vDUS.cjs

@@ -1,344 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./vendor-.pnpm-D0ILHvHB.cjs"),c=require("react"),C=require("@emotion/react"),s=require("@emotion/styled"),Q=require("@zeniai/client-epic-state"),t=require("./index-CZKgJQb3.cjs"),p=require("./add-to-wallet-BjCX6PYO.cjs"),ee=({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(te,{style:r,children:[o.jsxRuntimeExports.jsx(oe,{style:{width:`${u-1}%`,...j(),...f}}),e.map(a=>o.jsxRuntimeExports.jsx(se,{style:S,active:a.id===i,"data-testid":a.dataTestId,onClick:$=>{$.preventDefault(),x(a.id)},children:a.label},a.id))]})},te=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;
-`,oe=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;
-`,se=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")},ie=(e,i,x)=>o.jsxRuntimeExports.jsxs(We,{translatePhone:e,showIphone:x,children:[o.jsxRuntimeExports.jsxs(Ie,{children:[o.jsxRuntimeExports.jsx(He,{children:E.timeText}),o.jsxRuntimeExports.jsxs(ke,{children:[o.jsxRuntimeExports.jsx(ze,{children:[...Array(4).keys()].map(r=>o.jsxRuntimeExports.jsx(Ae,{towerIndex:r},r))}),o.jsxRuntimeExports.jsx(Pe,{children:o.jsxRuntimeExports.jsx(b,{className:"wave",children:o.jsxRuntimeExports.jsx(b,{className:"wave",children:o.jsxRuntimeExports.jsx(b,{className:"wave"})})})}),o.jsxRuntimeExports.jsx(Le,{children:o.jsxRuntimeExports.jsx(Fe,{})}),o.jsxRuntimeExports.jsx(Me,{})]})]}),o.jsxRuntimeExports.jsxs(Te,{children:[o.jsxRuntimeExports.jsxs(we,{children:[o.jsxRuntimeExports.jsx(Re,{showTick:i}),o.jsxRuntimeExports.jsx(ve,{showTick:i}),o.jsxRuntimeExports.jsx(Ce,{showTick:i}),o.jsxRuntimeExports.jsx(Ee,{showTick:i}),o.jsxRuntimeExports.jsxs(De,{translateCardSkelton:e,children:[o.jsxRuntimeExports.jsx(Ne,{}),[...Array(4).keys()].map(r=>o.jsxRuntimeExports.jsx(Ve,{lineIndex:r},r))]}),i?null:o.jsxRuntimeExports.jsx(Oe,{children:o.jsxRuntimeExports.jsx(t.Scanner,{scannerTheme:"light"})})]}),o.jsxRuntimeExports.jsx(Ge,{showTick:i}),o.jsxRuntimeExports.jsx(qe,{showTick:i,children:E.addToWallet})]}),o.jsxRuntimeExports.jsx(Be,{})]}),T=({tabType:e})=>{const i=t.useWindowSizeContext();return o.jsxRuntimeExports.jsxs(ce,{children:[o.jsxRuntimeExports.jsxs(k,{children:[o.jsxRuntimeExports.jsx(he,{children:o.jsxRuntimeExports.jsx(ge,{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(xe,{children:o.jsxRuntimeExports.jsx(ue,{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,{})]})]})},ne=({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,Y]=c.useState("apple"),Z=t.useGlobalInfoContext(),_=Q.hasChargeCardAdminLevelAccess(Z.loggedInUserRoleMap),U=v=>{t.fireCardsAddToWalletClick({chargeCardDetailView:A,classListFetchState:r,analytics:q,isDebitCard:i,isChargeCardAdmin:_,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}),Y(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(je,{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($e,{windowSize:n,children:[o.jsxRuntimeExports.jsx(Je,{windowSize:n,children:h.addToWallet.heading}),o.jsxRuntimeExports.jsx(Xe,{windowSize:n,children:h.addToWallet.subheading})]}),o.jsxRuntimeExports.jsxs(ye,{windowSize:n,children:[n!=="small"?o.jsxRuntimeExports.jsx(Ue,{children:o.jsxRuntimeExports.jsxs(be,{windowSize:n,children:[o.jsxRuntimeExports.jsxs(fe,{windowSize:n,flipCard:w,scaleCard:R,children:[o.jsxRuntimeExports.jsx(t.PhysicalCardView,{isDebitCard:i}),o.jsxRuntimeExports.jsx(t.PhysicalCardBackView,{showCrossIcon:!1,isDebitCard:i})]}),ie(N,J,K)]})}):null,o.jsxRuntimeExports.jsxs(de,{windowSize:n,children:[o.jsxRuntimeExports.jsx(pe,{children:o.jsxRuntimeExports.jsx(ee,{options:[{id:"apple",dataTestId:"add-to-apple-wallet",label:o.jsxRuntimeExports.jsxs(o.jsxRuntimeExports.Fragment,{children:[o.jsxRuntimeExports.jsx(Se,{}),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(me,{}),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:U})}),o.jsxRuntimeExports.jsxs(re,{children:[o.jsxRuntimeExports.jsx(ae,{isActive:y==="apple",children:o.jsxRuntimeExports.jsx(T,{tabType:"apple"})}),o.jsxRuntimeExports.jsx(le,{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]})})},re=s.div`
-  display: flex;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-`,ae=s.div`
-  display: flex;
-  width: 100%;
-  position: absolute;
-  left: ${e=>e.isActive?t.Space.sp0:"-369px"};
-  transition: left 0.3s ease-in-out;
-`,le=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};
-`,de=s.div`
-  display: flex;
-  width: ${({windowSize:e})=>e==="small"?"100%":"369px"};
-  flex-direction: column;
-`,pe=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;
-`,ce=s.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: ${t.Space.sp6};
-`,xe=s.div`
-  padding: 12px;
-  border-radius: ${t.Space.sp4};
-  background: ${t.Colors.successLight};
-  display: flex;
-`,he=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};
-`,ge=s(p.SvgAddToWallet)`
-  width: ${({windowSize:e})=>d.openWalletIconWidthHeight.valuePx(e)};
-  height: ${({windowSize:e})=>d.openWalletIconWidthHeight.valuePx(e)};
-  color: ${e=>e.theme.colors.link};
-`,ue=s(t.SvgVerified)`
-  width: ${({windowSize:e})=>d.openWalletIconWidthHeight.valuePx(e)};
-  height: ${({windowSize:e})=>d.openWalletIconWidthHeight.valuePx(e)};
-`,me=s(p.SvgGoogleWallet)`
-  height: ${t.Space.sp4};
-  width: ${t.Space.sp4};
-`,Se=s(p.SvgAppleWallet)`
-  height: ${t.Space.sp4};
-  width: ${t.Space.sp4};
-`,je=s.div`
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`,$e=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)};
-`,ye=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%;
-        `};
-`,be=s.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-`,fe=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}`};
-`,we=s.div`
-  position: relative;
-  height: 118px;
-  width: 182px;
-  margin: 13px;
-  margin-top: 60px;
-`,Re=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;
-`,ve=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;
-`,Ce=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;
-`,Ee=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;
-`,Te=s.div`
-  height: 88%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  overflow: hidden;
-`,We=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};
-`,Ie=s.div`
-  display: flex;
-  margin: ${t.Space.sp2} 10px ${t.Space.sp2} ${t.Space.sp3};
-  justify-content: space-between;
-  align-items: center;
-`,ke=s.div`
-  display: flex;
-  align-items: center;
-`,Be=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;
-`,ze=s.div`
-  display: flex;
-  align-items: flex-end;
-`,Ae=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;
-`,Pe=s.div`
-  margin-top: ${t.Space.sp2};
-  & .wave {
-    border: 2px solid transparent;
-    border-top-color: currentColor;
-    border-radius: 50%;
-    border-style: solid;
-    margin: 1px;
-  }
-`,Le=s.div`
-  border: 1px solid ${t.Colors.batteryBorderColor};
-  border-radius: 2px;
-`,Fe=s.div`
-  width: 10px;
-  height: ${t.Space.sp1};
-  background-color: ${t.Colors.blackColor};
-  margin: 1px;
-  border-radius: 1px;
-`,Me=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;
-`,He=s(t.SuperSmallBold)``,b=s.div``,Ge=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;
-`,qe=s(t.StandardRegular)`
-  color: ${t.Colors.primaryLight};
-  opacity: ${e=>e.showTick?1:0};
-  transition: opacity 0.5s linear;
-`,De=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)
-  );
-`,Ve=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};
-`,Ne=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};
-`,Oe=s.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-`,Je=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;
-`,Xe=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};
-`,Ue=s.div`
-  margin-right: -92px;
-  margin-top: -92px;
-  z-index: 5;
-`;exports.default=ne;