@zeniai/web-components 3.17.22 → 3.17.23

package/dist/IntegrationsSettingsPage-Ce3RYvgj.js

@@ -0,0 +1,136 @@
+import { j as t, u as S } from "./vendor-.pnpm-UYinI_7q.js";
+import n from "@emotion/styled";
+import { S as o, b4 as y, P as C, a as d, u as w, aE as R, hL as b, R as a, E as j, o as v, D as i } from "./index-DOFSm78O.js";
+import { Q as $ } from "./QBOSetupSection-DQTH1dAT.js";
+import { css as I, keyframes as k } from "@emotion/react";
+const {
+  common: { texts: E }
+} = d.getLocalizedStrings();
+function B(e) {
+  return /* @__PURE__ */ t.jsxs(
+    O,
+    {
+      isEnabled: e.isEnabled,
+      onClick: e.onClick,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          L,
+          {
+            spinRefreshIcon: e.spinRefreshIcon,
+            children: /* @__PURE__ */ t.jsx(P, {})
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, { children: E.refresh })
+      ]
+    }
+  );
+}
+const O = n.div`
+  position: relative;
+  display: flex;
+  width: fit-content;
+  height: ${o.sp4};
+  background: transparent;
+  cursor: ${(e) => e.isEnabled ? "pointer" : "default"};
+  color: ${(e) => e.isEnabled ? e.theme.colors.hero : e.theme.colors.grey2};
+  &:hover {
+    color: ${(e) => e.isEnabled ? e.theme.colors.primary : void 0};
+  }
+`, z = n(C)`
+  margin-left: ${o.sp2};
+  display: flex;
+  align-items: center;
+`, L = n.div`
+  animation: ${(e) => e.spinRefreshIcon ?? !1 ? I`
+          ${Q} 3s
+        ` : "none"};
+`, P = n(y)`
+  height: ${o.sp4};
+  width: ${o.sp4};
+`, Q = k`
+  0% {
+    rotate: 0
+  }
+  100% {
+    rotate: 720deg;
+  }
+`, W = {
+  sectionRowGap: new a(i[5], i[9], i[9]),
+  iconWidthHeight: new a(20, i[4]),
+  subtitleSectionWidth: new a(343, 580, 1200)
+}, A = ({
+  isAdmin: e,
+  integrationsView: h,
+  meetingUrl: m,
+  ...f
+}) => {
+  const s = w(), { onClickMenuIcon: g, onRefreshClick: p } = f, u = S(), { companyView: x, externalConnections: r, integrations: c } = h, l = d.getLocalizedStrings().common.settings;
+  return /* @__PURE__ */ t.jsxs(N, { children: [
+    /* @__PURE__ */ t.jsx(
+      R,
+      {
+        source: "IntegrationsSettingsPage",
+        title: l.title.integrations,
+        backgroundColor: u.colors.grey4,
+        showBackButton: !1,
+        showMenuIcon: s === "medium-compact" || s === "small",
+        rightSideComponent: /* @__PURE__ */ t.jsx(
+          B,
+          {
+            isEnabled: c.refreshQBO.fetchState !== "In-Progress",
+            onClick: () => p(),
+            spinRefreshIcon: c.refreshQBO.fetchState === "In-Progress"
+          }
+        ),
+        onClickMenuIcon: g
+      }
+    ),
+    /* @__PURE__ */ t.jsxs(T, { windowSize: s, children: [
+      /* @__PURE__ */ t.jsx(V, { windowSize: s, children: /* @__PURE__ */ t.jsx(H, { windowSize: s, children: l.infoText.integrations }) }),
+      /* @__PURE__ */ t.jsx(
+        $,
+        {
+          isAdmin: e,
+          isValid: r?.accounting[0]?.isValid ?? !1,
+          hasError: !1,
+          companyName: x?.companyInfo.companyLegalName,
+          saveConnectionState: r?.saveConnectionState,
+          isQBOPopupOpen: !1,
+          handleOnConnectClick: () => null,
+          updateQBOPopupState: () => null
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t.jsx(b, { meetingUrl: m, isFooterRendered: !1 })
+  ] });
+}, N = n.div`
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  row-gap: ${o.sp3};
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, T = n.div`
+  width: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`, V = n(j)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${(e) => W.subtitleSectionWidth.valuePx(e.windowSize)};
+  margin-bottom: ${o.sp5};
+`, H = n(v)`
+  display: flex;
+  align-items: center;
+
+  color: ${(e) => e.theme.colors.hero};
+`;
+export {
+  A as default
+};

package/dist/IntegrationsSettingsPage-DyjrIlJW.cjs

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./vendor-.pnpm-DLVCFIC_.cjs"),s=require("@emotion/styled"),t=require("./index-DU9PIUCs.cjs"),g=require("./QBOSetupSection-ChsVG7EE.cjs"),a=require("@emotion/react"),{common:{texts:f}}=t.appLocale.getLocalizedStrings();function S(e){return n.jsxRuntimeExports.jsxs(R,{isEnabled:e.isEnabled,onClick:e.onClick,children:[n.jsxRuntimeExports.jsx(y,{spinRefreshIcon:e.spinRefreshIcon,children:n.jsxRuntimeExports.jsx(C,{})}),n.jsxRuntimeExports.jsx(j,{children:f.refresh})]})}const R=s.div`
+  position: relative;
+  display: flex;
+  width: fit-content;
+  height: ${t.Space.sp4};
+  background: transparent;
+  cursor: ${e=>e.isEnabled?"pointer":"default"};
+  color: ${e=>e.isEnabled?e.theme.colors.hero:e.theme.colors.grey2};
+  &:hover {
+    color: ${e=>e.isEnabled?e.theme.colors.primary:void 0};
+  }
+`,j=s(t.SmallRegularSp)`
+  margin-left: ${t.Space.sp2};
+  display: flex;
+  align-items: center;
+`,y=s.div`
+  animation: ${e=>e.spinRefreshIcon??!1?a.css`
+          ${E} 3s
+        `:"none"};
+`,C=s(t.SvgRefresh)`
+  height: ${t.Space.sp4};
+  width: ${t.Space.sp4};
+`,E=a.keyframes`
+  0% {
+    rotate: 0
+  }
+  100% {
+    rotate: 720deg;
+  }
+`,v={sectionRowGap:new t.ResponsiveSized(t.sp[5],t.sp[9],t.sp[9]),iconWidthHeight:new t.ResponsiveSized(20,t.sp[4]),subtitleSectionWidth:new t.ResponsiveSized(343,580,1200)},w=({isAdmin:e,integrationsView:l,meetingUrl:d,...p})=>{const o=t.useWindowSizeContext(),{onClickMenuIcon:u,onRefreshClick:h}=p,x=n.useTheme(),{companyView:m,externalConnections:i,integrations:r}=l,c=t.appLocale.getLocalizedStrings().common.settings;return n.jsxRuntimeExports.jsxs(b,{children:[n.jsxRuntimeExports.jsx(t.NavBar,{source:"IntegrationsSettingsPage",title:c.title.integrations,backgroundColor:x.colors.grey4,showBackButton:!1,showMenuIcon:o==="medium-compact"||o==="small",rightSideComponent:n.jsxRuntimeExports.jsx(S,{isEnabled:r.refreshQBO.fetchState!=="In-Progress",onClick:()=>h(),spinRefreshIcon:r.refreshQBO.fetchState==="In-Progress"}),onClickMenuIcon:u}),n.jsxRuntimeExports.jsxs($,{windowSize:o,children:[n.jsxRuntimeExports.jsx(I,{windowSize:o,children:n.jsxRuntimeExports.jsx(k,{windowSize:o,children:c.infoText.integrations})}),n.jsxRuntimeExports.jsx(g.QBOSetupSection,{isAdmin:e,isValid:i?.accounting[0]?.isValid??!1,hasError:!1,companyName:m?.companyInfo.companyLegalName,saveConnectionState:i?.saveConnectionState,isQBOPopupOpen:!1,handleOnConnectClick:()=>null,updateQBOPopupState:()=>null})]}),n.jsxRuntimeExports.jsx(t.HelpButton,{meetingUrl:d,isFooterRendered:!1})]})},b=s.div`
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  row-gap: ${t.Space.sp3};
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+`,$=s.div`
+  width: 100%;
+  margin: auto;
+  display: flex;
+  justify-content: flex-start;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
+  align-items: center;
+`,I=s(t.ExtraSmallRegular)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${e=>v.subtitleSectionWidth.valuePx(e.windowSize)};
+  margin-bottom: ${t.Space.sp5};
+`,k=s(t.StandardRegular)`
+  display: flex;
+  align-items: center;
+
+  color: ${e=>e.theme.colors.hero};
+`;exports.default=w;

package/dist/InternationalWireSwiftDetailsPage-DMIIxu_R.cjs

@@ -0,0 +1,171 @@
+"use strict";const i=require("./vendor-.pnpm-DLVCFIC_.cjs"),B=require("react"),s=require("@emotion/styled"),O=require("@zeniai/client-epic-state"),e=require("./index-DU9PIUCs.cjs"),U=require("./BankAccountWarningSection-BJvHJfev.cjs"),X=require("./MailingDetailsSection-Cwl6XFEa.cjs"),Y=require("./MagicLinkTitleSection-Bo7pxruh.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;