@zeniai/web-components 3.17.6 → 3.17.7

package/dist/InternationalWireSwiftDetailsPage-CL9h7LJD.cjs

@@ -0,0 +1,171 @@
+"use strict";const i=require("./vendor-.pnpm-D0ILHvHB.cjs"),B=require("react"),s=require("@emotion/styled"),O=require("@zeniai/client-epic-state"),e=require("./index-DxfP_W_n.cjs"),U=require("./BankAccountWarningSection-D1_nr_Wt.cjs"),X=require("./MailingDetailsSection-B4JA8DWc.cjs"),Y=require("./MagicLinkTitleSection-Ce18m4G0.cjs"),A={tooltipRightPosition:new e.ResponsiveSized(e.sp[6],e.sp[6]),tooltipTopPosition:new e.ResponsiveSized(35,35),tooltipWidth:new e.ResponsiveSized(180,193)},Z=({protectedInfoText:t})=>{const n=e.useWindowSizeContext();return i.jsxRuntimeExports.jsxs(se,{children:[i.jsxRuntimeExports.jsx(ae,{}),i.jsxRuntimeExports.jsx(re,{className:"info-tooltip",windowSize:n,children:i.jsxRuntimeExports.jsx(le,{children:t})})]})};function ee({type:t,name:n,placeholder:o,placeholderAlignment:c,autoComplete:r="off",autoCapitalize:h="off",autoTrim:w="off",isDisabled:g,defaultValue:z,style:E,hoverBgColor:f,registerOptions:y,protectedInfoText:b,isSaveError:v=!1,buttonProps:S,disableCopyPaste:d=!1}){const{control:a,register:u,formState:{errors:R},setFocus:x}=i.useFormContext(),P=i.has(R,n),j=Object.assign({},y),{label:m,isDisabled:W,fetchState:D,onButtonClick:T}=S;switch(t){case"email":Object.assign(j,{pattern:e.EMAIL_PATTERN});break;case"number":Object.assign(j,{valueAsNumber:!0});break;case"url":Object.assign(j,{pattern:e.URL_PATTERN})}const N=g==="disabled"||g==="readonly"||b!=null;return b!=null?i.jsxRuntimeExports.jsxs(oe,{style:E,children:[i.jsxRuntimeExports.jsx(Z,{protectedInfoText:b}),i.jsxRuntimeExports.jsx(ne,{id:n,children:z})]}):i.jsxRuntimeExports.jsx(ie,{isError:P,fetchState:D,style:{display:"flex",alignItems:"center",width:"100%"},keepButtonVisible:S.keepButtonVisible,isButtonHidden:S.isHidden,children:i.jsxRuntimeExports.jsx(i.Controller,{name:n,control:a,rules:{...y},defaultValue:z??"","data-testid":e.generateDataTestId("text-field-with-button",n),render:({field:{onChange:M,onBlur:q,value:F,ref:k}})=>i.jsxRuntimeExports.jsxs(i.jsxRuntimeExports.Fragment,{children:[i.jsxRuntimeExports.jsx(te,{type:t==="password"||t==="hidden"?t:void 0,isError:P,style:E,placeholder:o,disabled:N,...u(n,j),id:n,ref:k,value:F,autoComplete:r,placeholderAlignment:c,hoverBgColor:f,isSaveError:v,onBlur:q,onChange:M,"data-testid":e.generateDataTestId("text-field-with-button-input",n),onInput:p=>{const l=p.target;switch(h){case"off":break;case"characters":l.value=l.value.toLocaleUpperCase();break;case"words":l.value=l.value.charAt(0).toLocaleUpperCase().concat(l.value.slice(1));break}switch(w){case"off":break;case"trimStart":l.value=l.value.trimStart();break;case"trimEnd":l.value=l.value.trimEnd();break;case"trim":l.value=l.value.trim();break}},onPaste:p=>{d&&p.preventDefault()},onCopy:p=>{d&&p.preventDefault()},keepButtonVisible:S.keepButtonVisible}),i.jsxRuntimeExports.jsx(e.Button,{label:m,onClick:p=>{p.stopPropagation(),x(n),setTimeout(()=>{T()})},style:{outline:"none"},size:"xs-small",disabled:W,variant:"success",reverseSpinnerColor:!0,loading:D==="In-Progress","data-testid":e.generateDataTestId("text-field-button",`${n}-${m}`)})]})})})}const te=s(e.StandardRegularInput)`
+  display: flex;
+  border-width: ${e.Space.sp0};
+  outline-width: ${e.Space.sp0};
+  color: ${t=>!t.isError&&t.isSaveError===!1?t.theme.colors.primary:e.Colors.important};
+  background-color: ${t=>t.isSaveError===!0?e.Colors.importantLight:t.theme.colors.grey5};
+  border-radius: ${e.Space.sp1};
+  text-align: ${t=>t.keepButtonVisible?"left":"right"};
+  padding: 0 ${e.Space.sp3};
+  ::placeholder {
+    text-align: ${t=>t.placeholderAlignment};
+    color: ${t=>t.isError?e.Colors.important:t.theme.colors.grey1};
+  }
+  &:focus {
+    text-align: left;
+    outline: none;
+    background-color: ${t=>t.isError?e.Colors.importantLight:t.theme.colors.background};
+    ${e.textStyles.standardRegular.css};
+  }
+  &:hover {
+    background-color: ${t=>t.isError?e.Colors.importantLight:t.hoverBgColor!==null?t.hoverBgColor:t.theme.colors.background};
+  }
+  &:disabled {
+    background-color: ${t=>t.theme.colors.grey5};
+  }
+`,ie=s.div`
+  position: relative;
+  button {
+    display: ${t=>t.keepButtonVisible?"flex":"none"};
+    position: absolute;
+    right: ${e.Space.sp3};
+  }
+
+  &:focus-within button {
+    display: ${t=>t.isButtonHidden?"none":"flex"};
+  }
+`,oe=s.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 0 ${e.Space.sp3};
+`,ne=s(e.H6Regular)`
+  color: ${t=>t.theme.colors.primary};
+  margin-left: 12px;
+  margin-top: 6px;
+`,se=s.div`
+  color: ${t=>t.theme.colors.primary};
+`,ae=s(e.SvgLock)`
+  color: ${t=>t.theme.colors.hero};
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  &:hover {
+    color: ${t=>t.theme.colors.primary};
+    & + .info-tooltip {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+`,re=s.div`
+  display: none;
+  background-color: ${t=>t.theme.colors.primary};
+  position: absolute;
+  padding: 2px 5px;
+  border: 1px solid ${t=>t.theme.colors.primary};
+  border-radius: ${e.Space.sp1};
+  z-index: 1;
+  right: ${t=>A.tooltipRightPosition.valuePx(t.windowSize)};
+  width: ${t=>A.tooltipWidth.valuePx(t.windowSize)};
+  top: ${t=>A.tooltipTopPosition.valuePx(t.windowSize)};
+`,le=s(e.ExtraSmallMedium)`
+  color: ${t=>t.theme.colors.grey5};
+`,$={width:new e.ResponsiveSized(343,580,726),height:new e.ResponsiveSized(e.sp[6],e.sp[6]),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginRight:new e.ResponsiveSized(e.sp[2],e.sp[2]),labelMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2])},de={infoLabel:new e.ResponsiveSizedStyle("extraSmallRegular","smallRegular")};function pe({isDisabled:t,label:n,text:o,style:c,additionalInfoLabel:r,showAdditionalInfoLabel:h=!0,protectedInfoText:w,isSaveError:g,showTickIcon:z,showErrorInfoLabel:E,errorInfoLabel:f,disableCopyPaste:y=!1,showTooltip:b=!1,tooltipTitle:v,onBlur:S}){const d=e.useWindowSizeContext(),{formState:{errors:a}}=i.useFormContext(),u=i.has(a,o.name);return i.jsxRuntimeExports.jsxs(ce,{size:d,style:c,isDisabled:t!=null,isError:u,"data-testid":e.generateDataTestId("labeled-text-field-with-button",o.name),children:[i.jsxRuntimeExports.jsx(e.Label,{isDisabled:t,label:n.label,style:{marginLeft:$.labelMarginLeft.value(d),marginRight:$.labelMarginRight.value(d),marginTop:$.labelMarginTop.value(d),width:n.width??"auto"},showTooltip:b,tooltipTitle:v}),i.jsxRuntimeExports.jsxs(ue,{labelWidth:n.width,children:[i.jsxRuntimeExports.jsx(ee,{...o,style:{...o.style,display:"flex",flexGrow:1,width:"-webkit-fill-available",height:$.controlHeight.value(d),cursor:"inherit"},protectedInfoText:w,isSaveError:g,onBlur:S,disableCopyPaste:y}),(h||u)&&i.jsxRuntimeExports.jsxs(G,{size:d,isError:u,children:[z===!0?i.jsxRuntimeExports.jsx(xe,{children:i.jsxRuntimeExports.jsx(me,{})}):null,r]}),E===!0&&i.jsxRuntimeExports.jsx(G,{size:d,isError:!0,children:f})]})]})}const ce=s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${t=>t.theme.colors.grey5};
+  width: ${t=>$.width.valuePx(t.size)};
+  min-height: ${t=>$.height.valuePx(t.size)};
+  padding-right: ${t=>$.marginRight.valuePx(t.size)};
+  padding-top: ${t=>$.paddingTopBottom.valuePx(t.size)};
+  padding-bottom: ${t=>$.paddingTopBottom.valuePx(t.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${t=>t.theme.colors.primary};
+
+    input {
+      background-color: ${t=>t.isError?e.Colors.importantLight:t.theme.colors.background};
+    }
+  }
+  input {
+    background-color: ${t=>t.isError?e.Colors.importantLight:t.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${t=>t.isDisabled===!0?t.theme.colors.grey3:t.theme.colors.primary};
+    input {
+      background-color: ${t=>t.isDisabled===!0?t.theme.colors.grey5:t.isError?e.Colors.importantLight:t.theme.colors.background};
+    }
+  }
+`,ue=s.div`
+  display: flex;
+  flex-direction: column;
+  width: ${t=>t.labelWidth!=null?`calc(100% - ${t.labelWidth}px)`:"auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`,G=s.label`
+  display: flex;
+  color: ${t=>t.isError?e.Colors.important:t.theme.colors.grey1};
+  ${t=>`${de.infoLabel.style(t.size)}`};
+  padding-right: ${e.Space.sp3};
+  text-align: right;
+`,xe=s.div`
+  display: flex;
+  margin-right: ${e.Space.sp1};
+  align-items: center;
+`,me=s(e.SvgTick)`
+  width: ${e.Space.sp3};
+  height: ${e.Space.sp3};
+  color: ${e.Colors.successDark};
+`,J={largeLabelWidth:new e.ResponsiveSized(120,140,220),veryLargeLabelWidth:new e.ResponsiveSized(120,140,256),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),labelHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),labelMarginLeft:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[3],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6])},ge=({sectionId:t,bankNameBySwift:n,bankAccountToCreate:o,isDisabled:c,fetchBankNameBySwiftStatus:r,onFetchBankNameBySwift:h,style:w})=>{const g=e.useWindowSizeContext(),{getValues:z,setValue:E,formState:{errors:f}}=i.useFormContext(),{fetchState:y}=r,b=e.usePrevious(r.fetchState),v=e.usePrevious(o?.bankSwiftCode),S=i.has(f,L(t,"bankSwiftCode"));B.useEffect(()=>{(b==="In-Progress"||v!=null&&v!==o?.bankSwiftCode)&&r.fetchState==="Completed"&&o?.bankSwiftCode!=null&&Object.keys(n).includes(o?.bankSwiftCode)&&n[o?.bankSwiftCode].bankName&&E(L(t,"bankName"),n[o?.bankSwiftCode].bankName)},[o?.bankName,o?.bankSwiftCode,r.fetchState,b,v]);const d=e.appLocale.getLocalizedStrings().spendManagement.billPay.vendorCreation.wireDetails,{international:a}=d,u=J.largeLabelWidth.value(g),R=J.veryLargeLabelWidth.value(g);return i.jsxRuntimeExports.jsx(he,{style:w,children:i.jsxRuntimeExports.jsxs(fe,{children:[i.jsxRuntimeExports.jsx(pe,{label:{label:a.swiftCode,width:u},text:{type:"text",name:L(t,"bankSwiftCode"),placeholder:a.addSwiftCode,defaultValue:o?.bankSwiftCode,registerOptions:{required:!0,pattern:e.SWIFT_CODE},autoCapitalize:"characters",autoTrim:"trim",buttonProps:{label:a.verify,isDisabled:e.SWIFT_CODE.test(o?.bankSwiftCode??"")===!1,isHidden:r.fetchState==="Completed",keepButtonVisible:e.SWIFT_CODE.test(o?.bankSwiftCode??"")===!0&&r.fetchState!=="Completed",fetchState:y,onButtonClick:()=>{o?.bankSwiftCode!=null&&h(o.bankSwiftCode)}}},isDisabled:c,style:{width:"auto"},additionalInfoLabel:o?.bankName?o?.bankName:void 0,showTickIcon:!!o?.bankName,showAdditionalInfoLabel:!S,errorInfoLabel:a.invalidSwiftCode}),i.jsxRuntimeExports.jsx(V,{}),i.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:a.iban,width:u},text:{type:"text",name:L(t,"bankAccountIban"),placeholder:a.addIban,defaultValue:o?.bankAccountIban,autoCapitalize:"characters",options:{required:!0,pattern:e.ALPHA_NUMERIC_PATTERN}},isDisabled:c,style:{width:"auto"},showAdditionalInfoLabel:!1,additionalInfoLabel:a.invalidIban}),i.jsxRuntimeExports.jsx(V,{}),i.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:a.confirmIban,width:R},text:{type:"text",name:L(t,"confirmedBankAccountIban"),placeholder:a.addConfirmIban,defaultValue:o?.confirmedBankAccountIban,autoCapitalize:"characters",options:{required:!0,pattern:e.ALPHA_NUMERIC_PATTERN,validate:x=>x!=null?z(`${t}.bankAccountIban`)===x:!1}},disableCopyPaste:!0,isDisabled:c,style:{width:"auto"},showAdditionalInfoLabel:!1,additionalInfoLabel:a.ibanDontMatch}),i.jsxRuntimeExports.jsx(V,{}),i.jsxRuntimeExports.jsx(e.LabeledTextField,{label:{label:a.accountNickName,width:u},text:{type:"text",name:L(t,"bankAccountName"),placeholder:e.getPlaceholderTextWithPrefix(a.accountNickName),defaultValue:o?.bankAccountName,options:{required:!1}},isDisabled:c,style:{width:"auto"}})]})})},L=(t,n)=>`${t}.${n}`,he=s.div`
+  display: flex;
+  flex-direction: column;
+`,fe=s.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${t=>t.theme.colors.grey5};
+  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};
+`,V=s.div`
+  display: flex;
+  flex: 1;
+  background-color: ${t=>t.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,C={paddingTop:new e.ResponsiveSized(e.sp[2],e.sp[3]),paddingRight:new e.ResponsiveSized(e.sp[3],e.sp[8]),paddingBottom:new e.ResponsiveSized(e.sp[2],e.sp[3]),paddingLeft:new e.ResponsiveSized(e.sp[3],e.sp[6]),paddingTopBottomContainer:new e.ResponsiveSized(e.sp[3],e.sp[3]),paddingLeftContainer:new e.ResponsiveSized(e.sp[3],e.sp[6]),paddingRightContainer:new e.ResponsiveSized(e.sp[3],e.sp[8]),height:new e.ResponsiveSized(e.sp[6],e.sp[6]),controlHeight:new e.ResponsiveSized(e.sp[6],e.sp[6]),paddingTopBottom:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginBottom:new e.ResponsiveSized(e.sp[2],e.sp[3]),marginRight:new e.ResponsiveSized(e.sp[2],e.sp[2]),marginLeft:new e.ResponsiveSized(e.sp[4],e.sp[6]),labelMarginLeft:new e.ResponsiveSized(e.sp[4],e.sp[4]),labelMarginRight:new e.ResponsiveSized(e.sp[4],e.sp[4]),labelMarginTop:new e.ResponsiveSized(e.sp[2],e.sp[2]),buttonWidth:new e.ResponsiveSized(140,140)},K="internationalDetailsPage",I="internationalWireSwiftAccountSection",be="mailingAddressSection",Q=t=>`${t}_form`,Se=({bankAccountCreationState:t,bankNameBySwift:n,addressType:o,fetchBankNameBySwiftStatus:c,bankAccountToCreate:r,addressToEdit:h,mailingAddress:w,isDisabled:g,style:z,companyName:E,isMagicLink:f,currencySymbol:y,amount:b,onSaveHandler:v,onBankDetailsUpdated:S,onFetchBankNameBySwift:d,onAddressClick:a,onBackClick:u})=>{const R=e.useWindowSizeContext(),x=i.useForm({mode:"all",reValidateMode:"onBlur",defaultValues:B.useMemo(()=>we(r),[r])}),[P,j]=B.useState(!1),m=e.appLocale.getLocalizedStrings().spendManagement.billPay.vendorCreation,W=e.appLocale.getLocalizedStrings().common.footer,{international:D}=m.wireDetails,T={onOkClick:()=>{j(!1),x.reset(),u?.()},onCancelClick:()=>{j(!1)}},N=async(k,p)=>{const l=p[I].bankName,H=p[I].bankSwiftCode,_=Object.assign({},p);k===`${I}.bankSwiftCode`&&(l||!l&&n[H]?.bankName)&&(_[I].bankName=n[H]?.bankName??""),S(_)};B.useEffect(()=>{const k=x.watch((p,{name:l})=>{l!=null&&p!=null&&i.defer(()=>N(l,p))});return()=>{k.unsubscribe()}});const M=x.handleSubmit(k=>{c.fetchState!=="In-Progress"&&v("wire")}),F=!i.isEqual(w!=null?O.getFormattedAddress(w):w,h!=null?O.getFormattedAddress(h):h)||ve(r)||x.formState.isDirty;return i.jsxRuntimeExports.jsxs(je,{children:[i.jsxRuntimeExports.jsxs($e,{style:z,size:R,children:[P===!0?i.jsxRuntimeExports.jsx(e.ConfirmationPopup,{titleComponent:i.jsxRuntimeExports.jsx(e.ConfirmationPopUpTitle,{children:m.discardTitle}),descriptionComponent:i.jsxRuntimeExports.jsx(e.ConfirmationPopUpDescription,{children:m.discardDescription}),primaryButtonText:m.discard,secondaryButtonText:m.cancel,action:T}):null,i.jsxRuntimeExports.jsx(U.BankAccountPageNavSection,{header:f?i.jsxRuntimeExports.jsx(Y.MagicLinkTitleSection,{companyName:E??"",currencySymbol:y??"",amount:b??0}):D.addInternationalWireDetails,isMagicLink:f,isDirty:F,onBackClick:u,setShowConfirmationPopup:j}),t?.fetchState==="Error"&&t.error?.code===409?i.jsxRuntimeExports.jsx(U.BankAccountWarningSection,{warningText:m.bankAccountCommon.accountExistWarning}):null,i.jsxRuntimeExports.jsx(ze,{size:R,children:m.bankAccountCommon.accountDetailsTitle}),i.jsxRuntimeExports.jsx(i.FormProvider,{...x,children:i.jsxRuntimeExports.jsxs("form",{id:Q(K),onSubmit:M,children:[i.jsxRuntimeExports.jsx(Re,{size:R,children:i.jsxRuntimeExports.jsx(ge,{bankAccountToCreate:r,bankNameBySwift:n,fetchBankNameBySwiftStatus:c,sectionId:I,isDisabled:g,onFetchBankNameBySwift:d})}),i.jsxRuntimeExports.jsx(X.MailingDetailsSection,{sectionId:be,isDisabled:g,addressType:o,addressToEdit:h,onAddressClick:a})]})})]}),i.jsxRuntimeExports.jsx(e.Footer,{formId:Q(K),primaryBtn:{label:f?m.bankAccountCommon.submitDetails:m.bankAccountCommon.saveAccount,isLoading:t.fetchState==="In-Progress",style:{width:C.buttonWidth.value(R)},isDisabled:g!=null},showCancel:!f,cancelBtn:{label:W.cancel,style:{width:C.buttonWidth.value(R)},shouldResetOnCancel:!1,onClick:()=>{x.formState.isDirty?j(!0):(x.reset(),u?.())}}})]})},we=t=>({[I]:{bankSwiftCode:t?.bankSwiftCode,bankName:t?.bankName??"",bankAccountIban:t?.bankAccountIban,confirmedBankAccountIban:t?.confirmedBankAccountIban,bankAccountName:t?.bankAccountName}}),ve=t=>{if(t==null)return!1;const{bankAccountName:n,bankSwiftCode:o,bankName:c,bankAccountIban:r}=t;return!!n||!!o||!!c||!!r},Re=s.div`
+  padding-left: ${t=>C.paddingLeftContainer.valuePx(t.size)};
+  padding-right: ${t=>C.paddingRightContainer.valuePx(t.size)};
+  padding-top: ${t=>C.paddingTopBottomContainer.valuePx(t.size)};
+  padding-bottom: ${t=>C.paddingTopBottomContainer.valuePx(t.size)};
+`,je=s.div`
+  background-color: ${t=>t.theme.colors.grey4};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+`,$e=s.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+`,ze=s(e.LargeMedium)`
+  color: ${t=>t.theme.colors.champion};
+  margin-left: ${t=>C.marginLeft.valuePx(t.size)};
+  margin-top: ${e.Space.sp3};
+`;exports.InternationalWireSwiftDetailsPage=Se;