@zeniai/web-cockpit-ui 1.14.19-dev → 1.14.19-dev-betaSK01

package/dist/assets/SubscriptionUpdatePlanPage-5_wWKxme-CSTH4683.js

@@ -0,0 +1,408 @@
+import{K as L,cd as ue,cj as U,j as t,ch as Oe,x,d$ as De,I as F,eT as ge,F as W,a0 as de,h as k,n as h,u as Se,en as ke,ck as Ce,b2 as Te,o as s,cI as Ee,V as Y,a2 as fe,a as Re,c2 as Le,aW as ze,i as Fe,c as Me,c3 as Ve,a4 as We,b3 as M,k as he,bw as Ae,cL as Ne,b1 as Be,y as V,aD as _e,eo as He,cl as Ge,el as Ue,b0 as Ye,a3 as qe,O as je,ah as xe,eb as Je,a9 as ce,ao as Ke}from"./index-D9zAXs3-.js";import{b as I,n as a}from"./vendor-Bs1fkIUX.js";import{X as Xe}from"./SubscriptionSnackBar-CwdSE1Xz-BYx3vQ0D.js";import{f as Qe}from"./LabeledItemWithButton-CNlRAl-1-D8RdmCNz.js";import"./mui-Ty75qFQF.js";import"./analytics-CBL_L82S.js";import"./routing-lj7oVq6C.js";import"./sentry-BE5FTzpq.js";import"./redux-CEhZD0hA.js";import"./liveblocks-C2xecagE.js";import"./crypto-DPjkCRYF.js";import"./tick-round-CPC394H5-C8roQJBa.js";const Ze={width:new x(343,580,726)};function et({subscriptionUpdateData:e,subscriptionTermEndDate:l,isSubscriptionDetailsChanged:i,isDisabled:o,sectionId:n,style:r}){const m=L(),{subscriptionUpdate:{updatePlan:{applyChanges:c}},dateFormat:{visual:b}}=W.getLocalizedStrings(),d=l?.format(b.MMMDCommaYYYYformat),p=d?`${c.nextRenewal} (${d})`:c.nextRenewal;let f=e?.applyEndOfTerm===!0?"readonly":o;return i===!1&&(f="disabled"),t.jsxs(tt,{style:r,children:[t.jsx(lt,{children:c.title}),t.jsxs(ot,{children:[t.jsx(xe,{isDisabled:o,label:{label:p},style:{padding:`${s.sp3} ${s.sp0}`},radioField:{name:ie(n,"changeType"),id:"applyEndOfTerm",value:"applyEndOfTerm"}}),t.jsx(xe,{isDisabled:i===!1?"disabled":o,label:{label:c.immediately},style:{paddingTop:s.sp3},radioField:{name:ie(n,"changeType"),id:"applyImmediately",value:"applyImmediately"}}),t.jsx(Je,{isDisabled:f,label:{label:c.applyProRated},checkBoxField:{name:ie(n,"shouldProrate"),defaultChecked:e?.shouldProrate===!0,style:{paddingLeft:s.sp4}}}),t.jsxs(it,{size:m,isDisabled:i===!1?"disabled":o,children:[t.jsx(oe,{children:c.proRatedDescription}),t.jsx(oe,{children:c.proRatedText1}),t.jsx(oe,{children:c.proRatedText2})]})]})]})}const ie=(e,l)=>`${e}.${l}`,tt=a.div`
+  display: flex;
+  flex-direction: column;
+`,lt=a(Ke)`
+  color: ${e=>e.theme.colors.primary};
+  padding: ${s.sp3} ${s.sp0};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+`,it=a(je)`
+  width: ${e=>Ze.width.valuePx(e.size)};
+  color: ${e=>e.theme.colors.hero};
+  ${e=>e.isDisabled==="disabled"&&`color: ${e.theme.colors.grey2}`};
+  cursor: ${e=>e.isDisabled==="disabled"?"not-allowed":"initial"};
+  pointer-events: ${e=>e.isDisabled==="readonly"?"none":"initial"};
+  margin-top: ${s.sp2};
+  display: flex;
+  flex-direction: column;
+`,oe=a.div`
+  display: flex;
+  padding-left: ${s.sp4};
+`,ot=a.div`
+  display: flex;
+  flex-direction: column;
+`,Pe={infoLabel:new Y("extraSmallRegular","smallRegular"),selectFieldInput:new Y("smallRegular","standardRegular")},st=({name:e,registerOptions:l,defaultValue:i,isDisabled:o,style:n,placeholder:r,valueToInfo:m,valueToId:c,showEmptyState:b,additionalLabelInfo:d,customStyleConfig:p,showDownChevronWithValue:f,customPlaceholderString:j,allowEmpty:O=!0,tooltip:y,menuPortal:$,disableCurrentOption:P})=>{const{control:g,formState:{errors:S,dirtyFields:w}}=ue(),K=L(),A=Se(),[X,Q]=I.useState(!1),Z=U(w,e),_=U(S,e??""),ee=W.getLocalizedStrings().dropDowns,N=I.useCallback(u=>({value:u.value,label:u.label,info:m?.(u.value)??"",id:c?.(u.value)??null,isDisabled:u.isDisabled,additionalNote:u?.additionalNote,isOptionRecommended:u.isOptionRecommended}),[m,c]),H=u=>u.map(v=>({label:v.label,options:v.options.map(C=>N(C))})),te=u=>{if(u==null||!u)return;let v=[];return i.allOptions.forEach(C=>{v=v.concat(C.options)}),{value:u,label:v.find(C=>C.value===u)?.label??u,info:m?.(u)??""}};if(b===!0&&X===!1&&Z===!1&&!i.selectedOption&&o==null)return t.jsx(ke,{style:n,buttonTitle:ee.add,onClick:()=>Q(!0),name:e});const le={...p,container:u=>({...u,width:"100%",...n}),menu:(u,v)=>({...u,backgroundColor:A.colors.grey5,borderRadius:s.sp1,boxShadow:`${s.sp0} 2px ${s.sp2} ${A.colors.dropShadowHover}`,whiteSpace:"nowrap",zIndex:2,width:"100%",margin:0,...p?.menu?.(u,v)}),menuList:(u,v)=>({...u,borderRadius:4,...p?.menuList?.(u,v)}),group:u=>({...u,borderBottom:`1px solid ${A.colors.grey3}`,paddingBottom:0})},E={hasError:_,showDownChevronWithValue:f,customPlaceholderString:j};return t.jsx(Ce,{name:e,control:g,defaultValue:i,rules:l,render:({field:{onChange:u,onBlur:v,value:C,ref:G}})=>{const B=C;return t.jsxs(t.Fragment,{children:[I.createElement(Te,{...E,ref:G,isMulti:!1,isSearchable:!0,isClearable:!0,controlShouldRenderValue:!0,placeholder:r,value:te(B.selectedOption),options:H(B.allOptions),onChange:R=>{R==null||R?.value!=null&&B?.selectedOption===R.value?O===!0&&u({selectedOption:void 0,allOptions:B.allOptions}):u({selectedOption:R.value,allOptions:B.allOptions})},key:Ee(),tabSelectsValue:!1,openMenuOnFocus:!0,classNamePrefix:"grouped-single-select-field",onBlur:v,menuPlacement:"auto",menuPortalTarget:$,maxMenuHeight:288,menuShouldScrollIntoView:!0,closeMenuOnSelect:!0,components:{Control:nt,Option:ht,Input:at,Group:dt,GroupHeading:ct,SingleValue:R=>pt(R,y),ValueContainer:rt,DropdownIndicator:zt,IndicatorSeparator:Ft,Placeholder:ut,ClearIndicator:Mt},hideSelectedOptions:!1,styles:le,isDisabled:o!=null,isOptionDisabled:R=>P?.(R.value)??!1}),t.jsx(Pt,{size:K,children:d})]})}})},nt=e=>{const{menuIsOpen:l,isFocused:i,isDisabled:o,selectProps:n,data:r,options:m}=e,{value:c,hasError:b,customPlaceholderString:d}=n;let p=[];m.forEach(O=>{p=p.concat(O.options)});const f=p.find(O=>O.value===r?.value),j=L();return t.jsx(xt,{title:d!=null&&c!=null?c.label:void 0,windowSize:j,menuIsOpen:l,isFocused:i,isDisabled:o,selectedValue:c,hasError:b,customPlaceholderString:d,isRecommended:f?.isOptionRecommended,children:t.jsx(M.Control,{...e,className:"select-control",children:e.children})})},rt=e=>{const{selectProps:l,children:i}=e,{showDownChevronWithValue:o}=l;return t.jsxs(M.ValueContainer,{...e,className:"select-value-container",children:[i,o===!0?t.jsx(he,{children:t.jsx(yt,{})}):null]})},at=e=>{const{selectProps:l,innerRef:i,innerProps:o}=e,{placeholder:n,value:r,customPlaceholderString:m,menuIsOpen:c,onMenuOpen:b,hasError:d}=l;return m!=null&&r==null&&c===!1?t.jsx(Nt,{ref:i,...o,onClick:b,style:{display:"flex",width:"100%",height:"100%",alignItems:"center",justifyContent:"flex-start",cursor:"pointer"},className:"custom-placeholder",children:t.jsxs(Vt,{children:[t.jsx(Wt,{hasError:d}),t.jsx(At,{hasError:d,children:m})]})}):t.jsx(M.Input,{...e,autoComplete:"new-password",autoFocus:c,placeholder:r==null?n:void 0,children:e.children})},dt=e=>t.jsx(M.Group,{...e,children:e.children}),ct=e=>{const[l,i]=I.useState(!0);return t.jsx(It,{className:"group-heading-container",isGroupOpen:l,onClick:()=>i(!l),children:t.jsxs(M.GroupHeading,{...e,children:[t.jsx(Dt,{isGroupOpen:l,children:t.jsx(kt,{className:"close-tick-icon"})}),e.children]})})},pt=({children:e,...l},i)=>{const o=i==null||l.selectProps.menuIsOpen===!0?e:i.sticky===!0?t.jsx(mt,{title:i.text,children:e}):t.jsx(Ae,{style:{padding:s.sp3},title:i.text,placement:"top",children:e});return t.jsx(M.SingleValue,{title:e,...l,children:o})},ut=()=>null,ht=e=>{const{data:l,isSelected:i,options:o,isDisabled:n,isFocused:r,selectProps:m}=e,{customPlaceholderString:c}=m;let b=[];o.forEach(p=>{b=b.concat(p.options)});const d=b.find(p=>p.value===l.value);return t.jsxs(t.Fragment,{children:[t.jsx($t,{title:c!=null?e.label:void 0,className:"select-option-wrapper",isFocused:r,isSelected:i,isDisabled:n,isOptionRecommended:d?.isOptionRecommended===!0,showBottomBorder:d?.additionalNote==null||d?.isOptionRecommended===!1,children:t.jsx(M.Option,{...e,className:"select-option",children:t.jsxs(wt,{children:[t.jsxs(jt,{isSelected:i,children:[t.jsx(vt,{isSelected:i,isDisabled:n,children:e.label}),r===!0&&d?.id!=null&&t.jsx(Lt,{children:d.id}),r===!0&&d?.info?t.jsx(St,{isSelected:!!i,children:d?.info}):null]}),d?.isOptionRecommended===!0?t.jsx(Rt,{}):null,i&&d?.additionalNote==null?t.jsxs(Ct,{children:[t.jsx(Tt,{className:"right-tick-icon"}),t.jsx(Et,{className:"close-tick-icon"})]}):null]})})}),d?.isOptionRecommended===!0&&d.additionalNote!=null?t.jsx(Ot,{isSelected:i,isDisabled:n,children:d?.additionalNote}):null]})},mt=({children:e,title:l})=>t.jsxs(bt,{children:[t.jsxs(gt,{children:[l,t.jsx(ft,{})]}),e]}),bt=a.div`
+  position: relative;
+  display: contents;
+`,gt=a.div`
+  position: absolute;
+  background: ${ce.primary};
+  color: ${ce.grey5};
+  padding: ${s.sp3};
+  border-radius: ${s.sp1};
+  top: -60px;
+  right: 20px;
+  opacity: 0.85;
+  pointer-events: none;
+`,ft=a.span`
+  position: absolute;
+  top: 55px;
+  left: 85%;
+  border-width: ${s.sp2};
+  border-style: solid;
+  border-color: ${ce.primary} transparent transparent transparent;
+`,xt=a.span`
+  width: 100%;
+  background-color: ${e=>e.hasError&&!e.customPlaceholderString?k.importantLight:e.menuIsOpen?e.theme.colors.background:e.theme.colors.grey5};
+  border-radius: ${s.sp1};
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+  .select-control {
+    border: none;
+    height: ${s.sp6};
+    background-color: inherit;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &:hover {
+      fill: ${e=>e.theme.colors.primary};
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.hasError?k.importantLight:e.theme.colors.background};
+      border-color: none;
+    }
+    box-shadow: none;
+    width: auto;
+    min-height: auto;
+    cursor: pointer;
+  }
+
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: nowrap;
+    cursor: pointer;
+    margin: ${s.sp0} ${s.sp3};
+    justify-content: ${e=>e.customPlaceholderString!=null?"flex-start":e.menuIsOpen===!1?"flex-end":"flex-start"};
+    .grouped-single-select-field__single-value {
+      display: flex;
+      color: ${e=>e.hasError?k.important:e.theme.colors.primary};
+      ${e=>`${Pe.selectFieldInput.style(e.windowSize)}`};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .grouped-single-select-field__input-container {
+      display: flex;
+      width: ${e=>e.menuIsOpen===!1&&e.selectedValue!=null?s.sp0:"100%"};
+      position: ${e=>e.isFocused===!1&&e.selectedValue==null?"initial":"absolute"};
+      ${V.standardRegular.css};
+      color: ${e=>e.theme.colors.primary};
+      margin: ${s.sp0};
+      cursor: inherit;
+
+      > input {
+        text-align: ${e=>e.customPlaceholderString!=null?"left":e.isFocused===!1&&e.selectedValue==null?"right":"initial"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${e=>e.hasError?k.important:e.theme.colors.grey1};
+        }
+      }
+    }
+  }
+
+  ~ .grouped-single-select-field__menu {
+    .grouped-single-select-field__group:not(:last-of-type) {
+      .select-option-wrapper {
+        border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+      }
+    }
+  }
+`,yt=a(Be)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.hero};
+  padding-right: 12px;
+`,$t=a.div`
+  border-bottom: ${e=>e.showBottomBorder===!0?"inherit":"none"} !important;
+  .select-option {
+    ${V.smallRegular.css};
+    height: ${s.sp6};
+    padding: 9px ${s.sp3};
+    color: ${e=>e.isSelected||e.isOptionRecommended?e.theme.colors.primary:e.theme.colors.hero};
+    opacity: ${e=>e.isDisabled?.32:1};
+    background-color: ${e=>e.isSelected?e.theme.colors.background:e.theme.colors.grey5};
+    ${e=>e.isFocused&&`background-color: ${e.theme.colors.background}`};
+
+    cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+    border-top: none;
+
+    .close-tick-icon {
+      display: none;
+    }
+    &:hover {
+      background-color: ${e=>e.isDisabled?e.theme.colors.grey5:e.theme.colors.background};
+      color: ${e=>e.isDisabled?e.theme.colors.champion:e.theme.colors.primary};
+      .right-tick-icon {
+        display: none;
+      }
+      .close-tick-icon {
+        display: inline-block;
+      }
+    }
+  }
+`,wt=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`,vt=a.label`
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
+  ${e=>e.isSelected&&"cursor: default"};
+`,Ot=a(je)`
+  padding-right: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: ${e=>e.theme.colors.grey1};
+  padding: 9px ${s.sp3};
+  border-bottom: 1px solid ${e=>e.theme.colors.grey3};
+`,St=a.div`
+  display: flex;
+  color: ${e=>e.theme.colors.primary};
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin: 0 ${s.sp3};
+  margin-right: ${e=>e.isSelected?s.sp3:s.sp5};
+`,jt=a.div`
+  width: ${e=>e.isSelected?`calc(100% - ${s.sp3})`:"100%"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`,Pt=a.label`
+  color: ${e=>e.theme.colors.grey1};
+  width: 100%;
+  ${e=>`${Pe.infoLabel.style(e.size)}`};
+  padding-right: ${s.sp3};
+  text-align: right;
+  white-space: pre-line;
+`,It=a(_e)`
+  display: flex;
+  color: ${e=>e.theme.colors.primary};
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: ${s.sp1};
+
+  ~ div .select-option-wrapper {
+    display: ${e=>e.isGroupOpen?"flex":"none"};
+  }
+
+  .grouped-single-select-field__group-heading {
+    display: flex;
+    font-size: ${V.standardMedium.fontSize};
+    font-weight: ${V.standardMedium.fontWeight};
+    line-height: ${V.standardMedium.lineHeight};
+    font-family: ${V.standardMedium.fontFamily};
+    color: inherit;
+    text-transform: capitalize;
+    cursor: pointer;
+    padding: 0 ${s.sp3};
+    margin-bottom: ${s.sp0};
+  }
+`,Dt=a.div`
+  display: flex;
+  align-items: center;
+  transform: ${e=>e.isGroupOpen?"rotate(0deg)":"rotate(-90deg)"};
+`,kt=a(He)`
+  width: ${s.sp3};
+  height: ${s.sp3};
+  margin-right: ${s.sp2};
+  color: ${e=>e.theme.colors.primary};
+`,Ct=a.div`
+  display: flex;
+`,Tt=a(Ye)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.primary};
+`,Et=a(qe)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.primary};
+`,Rt=a(Ue)`
+  color: ${e=>e.theme.colors.primary};
+  width: ${s.sp3};
+  height: ${s.sp3};
+`,Lt=a.div`
+  display: flex;
+  color: ${e=>e.theme.colors.primary};
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+  padding: 1px 6px;
+  height: 20px;
+  border: 1px solid ${e=>e.theme.colors.primary};
+  border-radius: ${s.sp1};
+  margin: 0 ${s.sp5} 0 ${s.sp3};
+`,zt=()=>null,Ft=()=>null,Mt=()=>null,Vt=a.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+`,Wt=a(Ge)`
+  margin-right: ${s.sp1};
+  width: ${s.sp3};
+  height: ${s.sp3};
+  color: ${e=>e.hasError?k.important:e.theme.colors.grey1};
+`,At=a(he)`
+  color: ${e=>e.hasError?k.important:e.theme.colors.grey1};
+`,Nt=a.div``,T={width:new x(343,580,726),height:new x(h[6],h[6]),controlHeight:new x(h[6],h[6]),paddingTopBottom:new x(h[2],h[2]),paddingRight:new x(h[0],h[2]),labelMarginLeft:new x(h[3],h[4]),labelMarginRight:new x(h[4],h[4]),labelMarginTop:new x(h[2],h[2])},Bt={infoLabel:new Y("extraSmallRegular","smallRegular")};function _t({isDisabled:e,label:l,hideLabel:i=!1,groupedSingleSelectField:o,style:n,controlWidth:r,additionalLabelInfo:m,valueToAdditionalLabel:c,disableCurrentOption:b,fullWidthSelect:d=!0}){const p=L(),{formState:{errors:f}}=ue(),j=U(f,o.name);return t.jsxs(Ht,{size:p,style:n,isDisabled:e!=null,controlWidth:r,isError:j,children:[!i&&t.jsx(Oe,{isDisabled:e,label:l.label,htmlFor:o.name,style:{marginLeft:T.labelMarginLeft.value(p),marginRight:T.labelMarginRight.value(p),marginTop:T.labelMarginTop.value(p),width:l.width??"auto"}}),t.jsxs(Gt,{fullWidthSelect:d,labelWidth:l.width,children:[t.jsx(st,{...o,isDisabled:e,style:{display:"flex",flexGrow:1,width:"-webkit-fill-available",height:T.controlHeight.value(p),cursor:"inherit"},additionalLabelInfo:m,disableCurrentOption:b}),o.defaultValue.selectedOption!=null?t.jsx(Ut,{size:p,isError:j,children:c?.(o.defaultValue.selectedOption)}):null]})]})}const Ht=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>e.controlWidth!==null?e.controlWidth:T.width.valuePx(e.size)};
+  min-height: ${e=>T.height.valuePx(e.size)};
+  padding-right: ${e=>T.paddingRight.valuePx(e.size)};
+  padding-top: ${e=>T.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>T.paddingTopBottom.valuePx(e.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: 2;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+    .select-control {
+      background-color: ${e=>e.isError?k.importantLight:e.theme.colors.background};
+    }
+  }
+
+  .select-control {
+    background-color: ${e=>e.isError?k.importantLight:e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: ${e=>e.isDisabled===!0?"none":`1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${e=>e.isDisabled===!0?e.theme.colors.grey5:e.isError?k.importantLight:e.theme.colors.background};
+    }
+  }
+`,Gt=a.div`
+  display: flex;
+  flex-direction: column;
+  width: ${e=>e.fullWidthSelect===!0?e.labelWidth!=null?`calc(100% - ${e.labelWidth}px)`:"auto":"50%"};
+  align-items: flex-end;
+  flex-grow: ${e=>e.fullWidthSelect===!0?1:"unset"};
+  position: relative;
+`,Ut=a.label`
+  color: ${e=>e.isError?k.important:e.theme.colors.grey1};
+  ${e=>`${Bt.infoLabel.style(e.size)}`};
+  padding-right: ${s.sp3};
+  text-align: right;
+`,D={width:new x(343,580,726),height:new x(h[6],h[6]),controlHeight:new x(h[6],h[6]),paddingTopBottom:new x(h[2],h[2]),marginRight:new x(h[2],h[2]),labelMarginLeft:new x(h[3],h[4]),labelMarginRight:new x(h[4],h[4]),labelMarginTop:new x(h[2],h[2])},Yt={infoLabel:new Y("extraSmallRegular","smallRegular")};function qt({isDisabled:e,label:l,singleSelectPickerField:i,allOptions:o,defaultValues:n,valueToAdditionalLabel:r,style:m}){const c=L(),{formState:{errors:b},control:d}=ue(),{fields:p,replace:f}=De({control:d,name:i.name}),j=U(b,i.name);return I.useEffect(()=>{const O=p.map(y=>y.selectedOption);if(!F(O,n)){const y=n.map($=>({selectedOption:$,allOptions:se(o,n,$)}));f(y)}},[o,n,p,f]),t.jsxs(Kt,{size:c,style:m,isDisabled:e!=null,children:[t.jsx(Oe,{isDisabled:e,label:l.label,htmlFor:i.name,style:{marginLeft:D.labelMarginLeft.value(c),marginRight:D.labelMarginRight.value(c),marginTop:D.labelMarginTop.value(c),width:l.width??"auto"}}),t.jsxs(Xt,{size:c,labelWidth:l.width,children:[p.map((O,y)=>{const $=n[y];return t.jsxs(ye,{children:[I.createElement(ge,{...i,name:`${i.name}.${y}`,key:O.id,defaultValue:{selectedOption:$,allOptions:se(o,n,$)},isDisabled:e,style:{display:"flex",flexGrow:1,width:"-webkit-fill-available",height:D.controlHeight.value(c),cursor:"inherit"}}),$!=null?t.jsx(Qt,{size:c,isError:j,children:r?.($)}):null]},`${i.name}.${y}`)}),e==null?t.jsx(ye,{children:t.jsx(ge,{...i,showEmptyState:p.length!==0,name:`${i.name}.${n.length}`,defaultValue:{selectedOption:void 0,allOptions:se(o,n)},isDisabled:e,style:{display:"flex",flexGrow:1,width:"-webkit-fill-available",height:D.controlHeight.value(c),cursor:"inherit"}})},`${i.name}.${n.length}`):t.jsx(Jt,{numberOfFields:p.length,placeholder:i.placeholder})]})]})}const Jt=({numberOfFields:e,placeholder:l})=>{const i=L();return e>0||l==null?t.jsx(t.Fragment,{}):t.jsx(Zt,{size:i,children:l})},Kt=a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${e=>e.theme.colors.grey5};
+  width: ${e=>D.width.valuePx(e.size)};
+  min-height: ${e=>D.height.valuePx(e.size)};
+  padding-right: ${e=>D.marginRight.valuePx(e.size)};
+  padding-top: ${e=>D.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${e=>D.paddingTopBottom.valuePx(e.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: 2;
+    outline: 1px solid ${e=>e.theme.colors.primary};
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: ${e=>e.isDisabled===!0?"none":`1px solid ${e.theme.colors.primary}`};
+  }
+`,Xt=a.div`
+  display: flex;
+  flex-direction: column;
+  width: ${e=>e.labelWidth!=null?`calc(100% - ${e.labelWidth}px)`:"auto"};
+  min-height: ${e=>D.controlHeight.valuePx(e.size)};
+  align-items: flex-end;
+  flex-grow: 1;
+`,ye=a.div`
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  :not(:last-of-type) {
+    margin-bottom: ${s.sp2};
+  }
+`,Qt=a.label`
+  color: ${e=>e.isError?k.important:e.theme.colors.grey1};
+  ${e=>`${Yt.infoLabel.style(e.size)}`};
+  padding-right: ${s.sp3};
+  text-align: right;
+`,Zt=a(he)`
+  color: ${e=>e.theme.colors.grey1};
+  height: 100%;
+  width: 100%;
+  min-height: ${e=>D.controlHeight.valuePx(e.size)};
+  display: flex;
+  padding: 0 ${s.sp3};
+  justify-content: flex-end;
+  align-items: center;
+  user-select: none;
+`,se=(e,l,i)=>e.map(o=>({...o,isDisabled:o.value!==i&&l.includes(o.value)})),ne={labelWidth:new x(115,145,155),mediumLabelWidth:new x(140,160,170),largeLabelWidth:new x(160,210,210)};function el({sectionId:e,isDisabled:l,subscriptionUpdateData:i,subscriptionMetaDetails:o,recommendedSubscriptionPlanId:n,style:r}){const m=L(),c=W.getLocalizedStrings().subscriptionUpdate,{dropDowns:b}=W.getLocalizedStrings(),{labels:d,placeholders:p}=c.dropDowns,f=ne.labelWidth.value(m),j=ne.mediumLabelWidth.value(m),O=ne.largeLabelWidth.value(m),{plans:y,addOns:$,coupons:P}=o;return t.jsx(tl,{style:r,children:t.jsxs(ll,{children:[t.jsx(_t,{label:{label:d.planName,width:j},isDisabled:l,groupedSingleSelectField:{name:re(e,"subscriptionPlan"),placeholder:p.selectPlan,valueToInfo:g=>{const S=y.find(w=>w.subscriptionPlanId===g);return de("0,0.00",S?.price)},defaultValue:{selectedOption:i?.subscriptionPlanId,allOptions:me(y,n)},registerOptions:{required:!0,validate:g=>g!=null&&g.selectedOption!=null||l!=null}},valueToAdditionalLabel:g=>{const S=y.find(w=>w.subscriptionPlanId===g);return $e(S?.price,S?.period)??""}}),t.jsx(ae,{}),t.jsx(qt,{label:{label:d.recurringAddOns,width:f},isDisabled:l,singleSelectPickerField:{name:re(e,"recurringAddOns"),placeholder:p.selectAddOn,valueToInfo:g=>{const S=$.find(w=>w.subscriptionAddOnId===g);return de("0,0.00",S?.price)}},valueToAdditionalLabel:g=>{const S=$.find(w=>w.subscriptionAddOnId===g);return $e(S?.price,S?.period)??""},defaultValues:i?.subscriptionAddOnIds??[],allOptions:$.map(g=>({label:g.name,value:g.subscriptionAddOnId}))}),t.jsx(ae,{}),t.jsx(Qe,{isDisabled:"readonly",label:{label:d.nonRecurringAddOns,width:O},style:{opacity:.32},button:{buttonTitle:b.add,style:{pointerEvents:"none"}}}),t.jsx(ae,{}),t.jsx(Ne,{isDisabled:l,label:{label:d.coupon,width:f},singleSelectPickerField:{name:re(e,"coupon"),placeholder:p.selectCoupon,defaultValue:{selectedOption:i?.subscriptionCouponIds[0],allOptions:P.map(g=>({label:g.name,value:g.subscriptionCouponId}))}}})]})})}const re=(e,l)=>`${e}.${l}`,tl=a.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${s.sp3};
+  padding-bottom: ${s.sp9};
+`,ll=a.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  box-shadow: ${e=>`${s.sp0} 2px ${s.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${s.sp2};
+`,ae=a.div`
+  display: flex;
+  flex: 1;
+  background-color: ${e=>e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`,me=(e,l)=>{const i=W.getLocalizedStrings().subscriptionUpdate,{groups:o}=i.dropDowns,n=[];return l!=null&&n.push({label:o.recommendedPlan,options:e.filter(r=>r.subscriptionPlanId===l).map(r=>({label:r.name,value:r.subscriptionPlanId}))}),n.push({label:o.allPlans,options:e.filter(r=>r.subscriptionPlanId!==l).map(r=>({label:r.name,value:r.subscriptionPlanId}))}),n},$e=(e,l)=>e==null?void 0:`${(de("0,0.00",e)+" "+il(l)).trim()}`,il=e=>{if(e==null)return"";const{count:l,unit:i}=e;return l===1?`/ ${i.substring(0,1).toUpperCase().concat(i.substring(1))}`:`/ ${i.substring(0,1).toUpperCase().concat(i.substring(1))} x ${l}`},we="subscriptionUpdatePlanPage",q="updatePlan",z="applyChanges";function ol(e){const l=L(),i=Se(),{localData:o,isDisabled:n,onSubscriptionDetailsChanged:r,onEstimateSuccess:m,onReviewClick:c,onBackClick:b,onResetClick:d}=e,[p,f]=I.useState(void 0),j=I.useRef(null),{data:O,subscriptionDetail:y,fetchState:$,estimateStatus:P}=o,g=fe(P.fetchState),S=fe($),w=Re({mode:"all",reValidateMode:"onChange",defaultValues:I.useMemo(()=>ve(o),[o])});I.useEffect(()=>()=>{f(void 0)},[]),I.useEffect(()=>{S==="In-Progress"&&$==="Completed"&&w.reset(ve(o))},[S,$,w,o]),I.useEffect(()=>{g==="In-Progress"&&(P.fetchState==="Error"?p!==P.fetchState&&f(P.fetchState):P.fetchState==="Completed"&&(f(void 0),m()))},[p,g,P.fetchState,m]);const K=async(E,u)=>{if(E.includes(q)||E.includes(z)){if(E.includes(z)){const{applyChanges:v}=u,{changeType:C,shouldProrate:G}=v;C==="applyImmediately"&&O?.applyEndOfTerm===!0&&G===!1?w.setValue(z,{...v,shouldProrate:!0},{shouldDirty:!0}):C==="applyEndOfTerm"&&O?.applyEndOfTerm===!1&&G===!0&&w.setValue(z,{...v,shouldProrate:!1},{shouldDirty:!0})}r(u)}};I.useEffect(()=>{const E=w.watch((u,{name:v})=>{v!=null&&u!=null&&Le(()=>K(v,u))});return()=>{E.unsubscribe()}});const A=w.handleSubmit(E=>{p!=null&&f(void 0),c()}),X=()=>H?.status.code!=="future"?t.jsx(et,{sectionId:z,style:{paddingBottom:s.sp9},subscriptionUpdateData:O,subscriptionTermEndDate:H?.currentTerm?.end,isSubscriptionDetailsChanged:Ie(o),isDisabled:n}):null,{updatePlan:Q,snackBar:Z,footer:_}=W.getLocalizedStrings().subscriptionUpdate,{title:ee}=Q,N=y?.summary?.summary,H=y?.subscription.subscription,te=y?.plan?.plan.subscriptionPlanId,le=N?.recommendedSubscriptionPlanId!=null&&te===N?.primarySubscriptionPlanId?N?.recommendedSubscriptionPlanId:void 0;return t.jsxs(sl,{children:[t.jsx(ze,{title:ee,backgroundColor:i.colors.grey4,style:{zIndex:3},onBackClick:b,scrollableContent:j,source:"SubscriptionUpdatePlanPage"}),p!=null?t.jsx(Xe,{fetchState:p,customMessageText:P.error?.message??Z.failedText,onRemoveSnackbar:()=>f(void 0)}):null,t.jsx(rl,{ref:j,windowSize:l,children:$==="In-Progress"||$==="Not-Started"?t.jsx(nl,{children:t.jsx(Fe,{size:"Large",start:!0})}):t.jsx(Me,{...w,children:t.jsxs("form",{id:pe(we),onSubmit:A,children:[t.jsx(el,{sectionId:q,subscriptionUpdateData:O,recommendedSubscriptionPlanId:le,subscriptionMetaDetails:J(o),isDisabled:n}),t.jsx(X,{})]})})}),Ve(w.formState.dirtyFields)||al(o)?t.jsx(We,{formId:pe(we),primaryBtn:{label:_.review,isLoading:P.fetchState==="In-Progress",isDisabled:e.isDisabled!=null&&P.fetchState!=="In-Progress"},cancelBtn:{label:_.cancel,shouldResetOnCancel:!0,onClick:()=>{w.reset(dl(o)),y!=null&&d(y)}}}):null]})}const sl=a.div`
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+  background-color: ${e=>e.theme.colors.grey4};
+  box-shadow: ${e=>`${s.sp0} 2px ${s.sp1} ${e.theme.colors.dropShadowNormal}`};
+`,nl=a.div`
+  display: flex;
+  width: 100%;
+  height: calc(100vh - 110px);
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.grey4};
+`,rl=a.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  height: 100%;
+  overflow-y: auto;
+`,pe=e=>`${e}_form`,ve=e=>{const{data:l,subscriptionDetail:i}=e,o=i?.summary?.summary,n=i?.subscription.subscription.subscriptionPlanId,{plans:r,addOns:m,coupons:c}=J(e),b=o?.recommendedSubscriptionPlanId!=null&&n===o?.primarySubscriptionPlanId?o?.recommendedSubscriptionPlanId:void 0;return{[q]:{subscriptionPlan:{selectedOption:l?.subscriptionPlanId,allOptions:me(r,b)},recurringAddOns:be(m,l?.subscriptionAddOnIds),coupon:{selectedOption:l?.subscriptionCouponIds[0],allOptions:c.map(d=>({label:d.name,value:d.subscriptionCouponId}))}},[z]:{changeType:l?.applyEndOfTerm===!0?"applyEndOfTerm":"applyImmediately",shouldProrate:l?.shouldProrate===!0}}},be=(e,l)=>l?.map(i=>{const o=e.map(n=>({label:n.name,value:n.subscriptionAddOnId,isDisabled:n.subscriptionAddOnId!==i&&l?.includes(n.subscriptionAddOnId)}));return{selectedOption:i,allOptions:o}})??[],J=e=>{const{subscriptionMetaDetails:l}=e,i=l.plans.filter(r=>r.plan.statusCode==="active").map(r=>r.plan),o=l.addOns.filter(r=>r.addOn.statusCode==="active"&&r.addOn.chargeType==="recurring").map(r=>r.addOn),n=l.coupons.filter(r=>r.coupon.statusCode==="active").map(r=>r.coupon);return{plans:i,addOns:o,coupons:n}},al=e=>{const{data:l,subscriptionDetail:i}=e;if(l==null||i==null)return!1;const o=i.subscription.subscription.status.code;return[Ie(e),!F(l.applyEndOfTerm,o!=="future"),!F(l.shouldProrate,o==="future"),!F(l.invoiceImmediately,!0)].reduce((n,r)=>n||r,!1)},Ie=e=>{const{data:l,subscriptionDetail:i}=e;return l==null||i==null?!1:[!F(l.subscriptionPlanId,i.plan?.plan.subscriptionPlanId),!F(l.subscriptionAddOnIds,i.addOns?.map(o=>o.addOn.subscriptionAddOnId)),!F(l.subscriptionCouponIds,i.coupons?.map(o=>o.coupon.subscriptionCouponId))].reduce((o,n)=>o||n,!1)},dl=e=>{const{subscriptionDetail:l}=e,i=l?.subscription.subscription.status.code,o=l?.summary?.summary,n=l?.subscription.subscription.subscriptionPlanId,{plans:r,addOns:m,coupons:c}=J(e),b=o?.recommendedSubscriptionPlanId!=null&&n===o?.primarySubscriptionPlanId?o?.recommendedSubscriptionPlanId:void 0;return{[q]:{subscriptionPlan:{selectedOption:n,allOptions:me(r,b)},recurringAddOns:be(m,l?.addOns.map(d=>d.addOn.subscriptionAddOnId)),coupon:{selectedOption:l?.coupons[0]?.coupon.subscriptionCouponId,allOptions:c.map(d=>({label:d.name,value:d.subscriptionCouponId}))}},[z]:{changeType:i==="future"?"applyImmediately":"applyEndOfTerm",shouldProrate:i==="future"}}},vl=Object.freeze(Object.defineProperty({__proto__:null,default:ol,getFilteredMetaDetails:J,getRecurringAddOnsOptions:be,uniqueName:pe},Symbol.toStringTag,{value:"Module"}));export{_t as L,vl as S,qt as a,J as b,be as c,me as g,$e as t};

package/dist/assets/SuccessAnimation-BtFsm6Oj-BU_bae75.js

@@ -0,0 +1,13 @@
+import{cS as u,hg as d,ac as f,j as i,ak as h}from"./index-D9zAXs3-.js";import{b as x,w as y,i as w,n as S,k as g}from"./vendor-Bs1fkIUX.js";const j=g`
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+`,E=S.div`
+  ${({fade:e})=>e&&w`
+      animation: ${j} 1s forwards;
+    `}
+`,$=({width:e=30,height:r=30,shouldDisplay:t,animationInLoop:n=!1,shouldFade:l=!0,onAnimationComplete:a})=>{const[,s]=u(d),[c,m]=x.useState(!1),[o]=f("Success"),p=()=>{m(!0),setTimeout(()=>{a&&a()},1e3)};return y.useEffect(()=>{t&&s(!0)},[t,s]),t&&o!=null?i.jsx(E,{fade:l?c:!1,children:i.jsx(h,{style:{width:e,height:r},play:!0,animationData:o,loop:n,rendererSettings:{preserveAspectRatio:"xMidYMid slice"},onComplete:p})}):null};export{$};

package/dist/assets/{SummaryCard-tsJZnge3-DE5AVV4x.js → SummaryCard--FoJZECU-DjUF26i-.js}

@@ -1 +1 @@
-import{j as d}from"./index-CyJdCOlu.js";import{E as n,T as t}from"./ReloadCard-CJfjUA_Q-iqgRrGxj.js";const o=r=>{function e(){return r.card.fetchState==="In-Progress"||r.card.fetchState==="Not-Started"?d.jsx(n,{dimension:r.card.dimension,animated:!r.card.disableAnimations}):r.card.fetchState==="Error"?d.jsx(t,{dimension:r.card.dimension,cardType:r.card.cardType,cardIndex:r.card.cardIndex,onReloadData:r.actions.onReloadData}):d.jsx("div",{children:r.children})}return d.jsx("div",{children:e()})};export{o as c};
+import{j as d}from"./index-D9zAXs3-.js";import{E as n,T as t}from"./ReloadCard-BuBuLupE-Cty15m_t.js";const o=r=>{function e(){return r.card.fetchState==="In-Progress"||r.card.fetchState==="Not-Started"?d.jsx(n,{dimension:r.card.dimension,animated:!r.card.disableAnimations}):r.card.fetchState==="Error"?d.jsx(t,{dimension:r.card.dimension,cardType:r.card.cardType,cardIndex:r.card.cardIndex,onReloadData:r.actions.onReloadData}):d.jsx("div",{children:r.children})}return d.jsx("div",{children:e()})};export{o as c};