@e-llm-studio/instant-learning 1.3.2 → 1.3.3

package/dist/features/LearningManagement/components/StationOnboarding/StationOnboardModal.js

@@ -1,2 +1,991 @@
-import{__assign as e,__awaiter as r,__generator as o,__spreadArray as n}from"tslib";import{jsxs as t,jsx as i,Fragment as l}from"react/jsx-runtime";import{useState as a,useRef as s,useMemo as c,useEffect as d}from"react";import{Dialog as u,Box as p,Typography as f,IconButton as m,DialogContent as h,CircularProgress as g}from"@mui/material";import{X as x,Search as v,ArrowRight as y}from"lucide-react";import{Toast as b}from"primereact/toast";import{v4 as S}from"uuid";import{retrieveGenreScopes as w,fetchStationsByKeyword as C,searchScopes as _,inheritScopeBackwardCompatible as F,createRuleSet as k}from"../../apis/scopeApis.js";import D from"./StationAutocomplete.js";import T from"../CardSkeleton.js";import E from"./OnboardingLoader.js";import B from"./TemplateCard.js";import z from"../../styles/StationOnboardModal.module.css.js";import O from"./InputField.js";import A from"../../store/useAuthStore.js";import{useConfigStore as I}from"../../store/useConfigStore.js";import{useLearningTemplateStore as L}from"../../store/useLearningTemplateStore.js";import{IL_CONFIG_CONSTANTS as M}from"../../config.js";import{useAppSecRolesStore as j}from"../../store/useAppSecRolesStore.js";import R from"../../store/useEnvStore.js";import N from"../../RuleContent/AddScopeApprovalSearchComponent.js";import{useILMarketplaceThemeStyles as W}from"../../../IL-marketplace/marketplaceTheme.js";import q from"./DayToggleSelector.js";var P=[{label:"6am to 7pm",value:"06:00 AM - 7:00 PM"},{label:"5am to 7pm",value:"05:00 AM - 7:00 PM"}],G=[{label:"Low Sellout",value:"Low Sellout"},{label:"High Sellout",value:"High Sellout"},{label:"None",value:""}],U=[{label:"None",value:"None"},{label:"Distribute spots evenly across all breaks in the hour",value:"Distribute spots evenly across all breaks in the hour"}],H=[{label:"Mon",value:"monday"},{label:"Tue",value:"tuesday"},{label:"Wed",value:"wednesday"},{label:"Thu",value:"thursday"},{label:"Fri",value:"friday"},{label:"Sat",value:"saturday"},{label:"Sun",value:"sunday"}],K=function(K){var V,Y=K.isOpen,X=K.onClose,J=K.onBoardStation,Q=K.app_integration_id,Z=K.token,$=W(),ee=a(null),re=ee[0],oe=ee[1],ne=a([]),te=ne[0],ie=ne[1],le=a(0),ae=le[0],se=le[1],ce=a(!0),de=ce[0],ue=ce[1],pe=a(!1),fe=pe[0],me=pe[1],he=a([]),ge=he[0],xe=he[1],ve=a(""),ye=ve[0],be=ve[1],Se=a(""),we=Se[0],Ce=Se[1],_e=a(!1),Fe=_e[0],ke=_e[1],De=a(!1),Te=De[0],Ee=De[1],Be=a(null),ze=Be[0],Oe=Be[1],Ae=a(null);Ae[0],Ae[1];var Ie=a(!1),Le=Ie[0],Me=Ie[1],je=a(0),Re=je[0],Ne=je[1],We=a(""),qe=We[0],Pe=We[1],Ge=A().user,Ue=s(null),He=s(null),Ke=s(null),Ve=s(null);I().configuration;var Ye=s(null),Xe=j(function(e){return e.roles}),Je=R(function(e){return e.rbacConfig}),Qe=a("approval_required"),Ze=Qe[0],$e=Qe[1],er=a([]),rr=er[0],or=er[1],nr=a([]),tr=nr[0],ir=nr[1],lr=a(""),ar=lr[0],sr=lr[1],cr=L(function(e){return e.stationNameParam}),dr=a({region:"",primeTime:["06:00 AM - 7:00 PM"],genre:"Music",type:"",lowSelloutConfig:"",source_days:["wednesday","thursday","friday","saturday"],target_days:["monday","tuesday","wednesday"]}),ur=dr[0],pr=dr[1],fr=function(e,r){return e.find(function(e){return e.value===r})||null},mr=c(function(){return te.map(function(e){return{label:e.scope_name,value:e.scope_name}})},[te]),hr=c(function(){var e,r,o;if(!ur.genre)return null;var n=te.find(function(e){return e.scope_name===ur.genre});return n?{id:n.id,title:n.scope_name||"Unnamed Template",description:(null===(e=n.description)||void 0===e?void 0:e.trim())||"No description available.",inheritedText:(null===(r=n.inheritance)||void 0===r?void 0:r[0])||void 0,rulesCount:n.rules_count||0,tiersCount:n.tier_count||0,isCopy:null!==(o=n.is_copy)&&void 0!==o&&o}:null},[ur.genre,te]);d(function(){return function(){Ke.current&&clearTimeout(Ke.current)}},[]);var gr=function(e){return r(void 0,void 0,void 0,function(){var r,t,i;return o(this,function(o){switch(o.label){case 0:if(fe)return[2];me(!0),o.label=1;case 1:return o.trys.push([1,3,4,5]),[4,w({limit:"20",offset:String(e)})];case 2:return"success"===(null==(r=o.sent())?void 0:r.status)&&Array.isArray(null==r?void 0:r.data)?(t=r.data,ie(function(r){if(0===e)return t;var o=new Set(r.map(function(e){return e.id})),i=t.filter(function(e){return!o.has(e.id)});return n(n([],r,!0),i,!0)}),t.length<20?ue(!1):ue(!0),se(e+20)):ue(!1),[3,5];case 3:return i=o.sent(),console.error("[StationOnboard] Failed to fetch genre scopes:",i),ue(!1),[3,5];case 4:return me(!1),[7];case 5:return[2]}})})};d(function(){if(Y&&(ie([]),se(0),ue(!0),gr(0),cr)){Pe(cr);r(void 0,void 0,void 0,function(){var e,r,n;return o(this,function(o){switch(o.label){case 0:return o.trys.push([0,2,,3]),[4,C(cr,!0)];case 1:return!0===(null==(e=o.sent())?void 0:e.success)&&Array.isArray(null==e?void 0:e.data)&&(r=e.data.find(function(e){var r;return(null===(r=e.station_name)||void 0===r?void 0:r.toLowerCase())===cr.toLowerCase()&&!e.ruleset_id}),r&&oe(r)),[3,3];case 2:return n=o.sent(),console.error("[StationOnboard] Error auto-selecting station:",n),[3,3];case 3:return[2]}})})}},[Y,cr]);d(function(){pr(re?function(r){var o;return e(e({},r),{region:null!==(o=re.market)&&void 0!==o?o:""})}:{region:"",primeTime:["06:00 AM - 7:00 PM"],genre:"Music",type:"",lowSelloutConfig:"",source_days:["wednesday","thursday","friday","saturday"],target_days:["monday","tuesday","wednesday"]})},[re]),d(function(){var e=setTimeout(function(){Ce(ye)},500);return function(){return clearTimeout(e)}},[ye]),d(function(){r(void 0,void 0,void 0,function(){var e,r,n,t;return o(this,function(o){switch(o.label){case 0:if(!we.trim())return xe([]),[2];ke(!0),o.label=1;case 1:return o.trys.push([1,3,4,5]),[4,_({search_string:we.trim()})];case 2:return"success"===(null==(e=o.sent())?void 0:e.status)&&Array.isArray(null==e?void 0:e.data)?(r=e.data.filter(function(e){var r,o=null!==(r=e.inheritance)&&void 0!==r?r:[],n=o.indexOf(e.scope_name);return!(n<=0)&&o[n-1]===ur.genre}),n=r.map(function(e){var r,o,n;return{id:e.id,title:e.scope_name||"Unnamed Template",description:(null===(r=e.description)||void 0===r?void 0:r.trim())||"No description available.",inheritedText:(null===(o=e.inheritance)||void 0===o?void 0:o[0])||void 0,rulesCount:e.rules_count||0,tiersCount:e.tier_count||0,isCopy:null!==(n=e.is_copy)&&void 0!==n&&n}}),xe(n)):xe([]),[3,5];case 3:return t=o.sent(),console.error("[StationOnboard] Error searching scopes:",t),xe([]),[3,5];case 4:return ke(!1),[7];case 5:return[2]}})})},[we,ur.genre]),d(function(){!we.trim()&&hr&&Oe(hr.id)},[we,hr]);var xr=function(){setTimeout(function(){Ve.current&&Ve.current.scrollTo({top:Ve.current.scrollHeight,behavior:"smooth"})},100)},vr=function(){Pe(""),oe(null),pr({region:"",primeTime:["06:00 AM - 7:00 PM"],genre:"Music",type:"",lowSelloutConfig:"",source_days:["wednesday","thursday","friday","saturday"],target_days:["monday","tuesday","wednesday"]}),xe([]),be(""),Oe(null),$e("approval_required"),or([]),ir([]),sr(""),X()},yr=function(r,o){var n;if("primeTime"!==r)if("source_days"!==r&&"target_days"!==r){var t=null!==(n=null==o?void 0:o.value)&&void 0!==n?n:"";pr(function(o){var n;return e(e({},o),((n={})[r]=String(t),n))}),"genre"===r&&(Ee(!0),Ke.current&&clearTimeout(Ke.current),Ke.current=setTimeout(function(){var e=te.find(function(e){return e.scope_name===t});Oe(e?e.id:null),Ee(!1)},800))}else pr(function(n){var t;return e(e({},n),((t={})[r]=o,t))});else{var i=(null==o?void 0:o.value)?String(o.value):"";pr(function(r){return e(e({},r),{primeTime:i?[i]:[]})})}},br=Boolean(re&&ur.region&&ur.primeTime.length>0&&ur.genre);return t(u,e({open:Y,onClose:vr,maxWidth:!1,disableEscapeKeyDown:!0,PaperProps:{style:$,sx:{width:"90vw",height:"90vh",borderRadius:"12px",display:"flex",flexDirection:"column",overflow:"hidden",fontFamily:"sans-serif"}}},{children:[i(b,{ref:Ue}),t(p,e({sx:{p:"20px 20px 20px 27px",borderBottom:"1px solid #F0F2F5",display:"flex",justifyContent:"space-between",alignItems:"center",bgcolor:"#fff"}},{children:[t(p,e({sx:{display:"flex",flexDirection:"column",gap:.5}},{children:[i(f,e({sx:{fontSize:"18px",fontWeight:600,color:"#19213D"}},{children:"Onboard a Station"})),i(f,e({sx:{fontSize:"16px",fontWeight:400,color:"#666F8D"}},{children:"Onboard a station to start configuring learnings."}))]})),i(m,e({onClick:vr,disabled:Le,sx:{color:"#19213D"}},{children:i(x,{size:24})}))]})),t(h,e({sx:{p:0,bgcolor:"#F8FAFC",display:"flex",flexDirection:"row",overflow:"hidden",position:"relative"}},{children:[i(E,{isLoading:Le,currentStep:Re,onComplete:function(){Me(!1);var e=He.current;vr(),J(e||void 0),He.current=null}}),i(p,e({sx:{display:"flex",flex:1,flexDirection:"column",paddingY:"14px",paddingX:"20px",gap:2,overflowY:"auto"}},{children:t(p,e({sx:{display:"flex",gap:3}},{children:[t(p,e({ref:Ve,sx:{flex:1,bgcolor:"#fff",p:3,borderRadius:"16px",border:"1px solid #F0F2F5"}},{children:[i(f,e({sx:{fontSize:"1rem",fontWeight:600,mb:.5,color:"#19213D"}},{children:"Basic Details"})),i(f,e({sx:{fontSize:"0.75rem",color:"#00000080",mb:"20px"}},{children:"Set up basic station details to unlock AI recommended scopes."})),t(p,e({sx:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[t(p,e({className:z.formGroup},{children:[t("label",e({className:z.label},{children:[i("span",e({className:z.asterisk},{children:"*"})),"Station Name/Call Letters"]})),i(D,{value:qe,onChange:Pe,onStationSelect:function(e){return oe(e)}})]})),i(O,{required:!0,disabled:!0,label:"Region",placeholder:"Select Region",value:ur.region||void 0,isSearchable:!1}),i(O,{required:!0,label:"Prime Time Window",placeholder:"Select Prime Time",options:P,value:fr(P,(null===(V=ur.primeTime)||void 0===V?void 0:V[0])||""),onOptionChange:function(e){return yr("primeTime",e)},isSearchable:!1}),i(p,e({onClick:xr,sx:{width:"100%"}},{children:i(O,{label:"Station Sellout Type",placeholder:"None",options:G,value:fr(G,ur.type),onOptionChange:function(r){yr("type",r),"Low Sellout"!==(null==r?void 0:r.value)&&pr(function(r){return e(e({},r),{lowSelloutConfig:""})})},isSearchable:!1})})),"Low Sellout"===ur.type&&i(p,e({onClick:xr,sx:{width:"100%"}},{children:i(O,{label:"Low Sell Out Configurations",placeholder:"Select Configuration",options:U,value:fr(U,ur.lowSelloutConfig),onOptionChange:function(e){return yr("lowSelloutConfig",e)},isSearchable:!1})})),t(p,e({onClick:xr,sx:{width:"100%",display:"flex",flexDirection:"column",gap:"20px"}},{children:[i(f,e({sx:{fontSize:"1rem",fontWeight:600,color:"#19213D"}},{children:"Front-Loading Configuration"})),i(q,{label:"Source Days",subText:"Days from which spots can be front loaded.",options:H,selectedValues:ur.source_days,onChange:function(e){return yr("source_days",e)}}),i(q,{label:"Target Days",subText:"Days where front loaded spots can be placed.",options:H,selectedValues:ur.target_days,onChange:function(e){return yr("target_days",e)}})]})),L.getState().backwardCompatibility&&t("div",e({ref:Ye,style:{display:"flex",flexDirection:"column",marginTop:"12px"}},{children:[i(f,e({sx:{fontSize:"1rem",fontWeight:600,mb:.5,color:"#19213D"}},{children:"Approval Settings"})),i(f,e({sx:{fontSize:"0.75rem",color:"#00000080",mb:"20px"}},{children:"Configure who can approve learnings before they get published."})),t("div",e({style:{marginBottom:"12px",fontSize:"12px",color:"#8F2C23",gap:"16px"}},{children:[t("div",e({style:{marginBottom:"12px",fontSize:"12px",color:"#8F2C23",gap:"12px"}},{children:[t("div",e({role:"radio","aria-checked":"approval_required"===Ze,tabIndex:0,style:{cursor:"pointer",display:"flex",flexDirection:"column",gap:"4px",marginBottom:"8px"},onClick:function(){return $e("approval_required")},onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key||$e("approval_required")}},{children:[t("div",e({style:{display:"flex",alignItems:"center",gap:"8px"}},{children:[i("div",e({style:{display:"flex",height:"16px",width:"16px",flexShrink:0,alignItems:"center",justifyContent:"center",borderRadius:"50%",border:"2px solid ".concat("approval_required"===Ze?"#2563EB":"#CBD5E1")}},{children:"approval_required"===Ze&&i("div",{style:{height:"8px",width:"8px",borderRadius:"50%",backgroundColor:"#2563EB"}})})),i("span",e({style:{fontSize:"14px",fontWeight:500,color:"#19213D"}},{children:"Approval Required Before Publishing"}))]})),i("p",e({style:{margin:0,marginLeft:"24px",fontSize:"12px",color:"#666F8D"}},{children:"Learnings require approval before publishing."}))]})),t("div",e({style:{gap:"16px"}},{children:["approval_required"===Ze&&i(N,{selectedApprovers:rr,selectedGroupOfApprovers:tr,onApproversChange:function(e){or(e),sr("")},onGroupsChange:function(e){ir(e),sr("")}}),ar&&i("p",e({style:{margin:0,marginLeft:"24px",fontSize:"12px",color:"#8F2C23"}},{children:ar}))]}))]})),t("div",e({role:"radio","aria-checked":"publish_without"===Ze,tabIndex:0,style:{cursor:"pointer",display:"flex",flexDirection:"column",gap:"4px"},onClick:function(){$e("publish_without"),sr("")},onKeyDown:function(e){"Enter"!==e.key&&" "!==e.key||($e("publish_without"),sr(""))}},{children:[t("div",e({style:{display:"flex",alignItems:"center",gap:"8px"}},{children:[i("div",e({style:{display:"flex",height:"16px",width:"16px",flexShrink:0,alignItems:"center",justifyContent:"center",borderRadius:"50%",border:"2px solid ".concat("publish_without"===Ze?"#2563EB":"#CBD5E1")}},{children:"publish_without"===Ze&&i("div",{style:{height:"8px",width:"8px",borderRadius:"50%",backgroundColor:"#2563EB"}})})),i("span",e({style:{fontSize:"14px",fontWeight:500,color:"#19213D"}},{children:"Publish Without Approval"}))]})),i("p",e({style:{margin:0,marginLeft:"24px",fontSize:"12px",color:"#666F8D"}},{children:"Learnings can be published directly."}))]}))]}))]}))]}))]})),t(p,e({sx:{flex:1,bgcolor:"#fff",p:3,borderRadius:"12px",border:"1px solid #F0F2F5",display:"flex",flexDirection:"column"}},{children:[t(f,e({sx:{fontSize:"1rem",fontWeight:600,mb:.5,color:"#19213D"}},{children:[i("span",e({style:{color:"#E53E3E",marginRight:"2px"}},{children:"*"})),"Select a scope for your station"]})),i(f,e({sx:{fontSize:"0.75rem",color:"#64748B",mb:"16px"}},{children:"Your station will inherit the rules from the selected scope."})),i(p,e({sx:{mb:2}},{children:i(O,{required:!0,label:"",placeholder:"Select Genre",options:mr,value:fr(mr,ur.genre),onOptionChange:function(e){return yr("genre",e)},isSearchable:!1,onMenuScrollToBottom:function(){!fe&&de&&gr(ae)},isLoadingOptions:fe,hasMoreOptions:de})})),i(p,e({sx:{mb:3}},{children:Te?i(T,{}):hr?t(p,e({sx:{border:"1.5px solid #2563EB",borderRadius:"10px",p:"14px 16px",bgcolor:"#EFF6FF",display:"flex",alignItems:"flex-start",gap:"12px"}},{children:[i(p,e({sx:{width:36,height:36,borderRadius:"8px",bgcolor:"#DBEAFE",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}},{children:t("svg",e({width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"#2563EB",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},{children:[i("circle",{cx:"12",cy:"12",r:"2"}),i("path",{d:"M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14"})]}))})),t(p,e({sx:{flex:1,minWidth:0}},{children:[i(f,e({sx:{fontSize:"0.875rem",fontWeight:600,color:"#1E3A5F",mb:"2px"}},{children:hr.title})),i(f,e({sx:{fontSize:"0.75rem",color:"#2563EB",mb:"8px"}},{children:hr.description})),t(p,e({sx:{display:"flex",alignItems:"center",gap:"8px",flexWrap:"wrap"}},{children:[hr.inheritedText&&t(p,e({component:"span",sx:{fontSize:"0.7rem",color:"#475569",bgcolor:"#F1F5F9",border:"1px solid #E2E8F0",borderRadius:"4px",px:"6px",py:"2px",display:"inline-flex",alignItems:"center",gap:"4px"}},{children:[t("svg",e({width:"11",height:"11",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},{children:[i("polyline",{points:"15 3 21 3 21 9"}),i("path",{d:"M21 3L9 15"}),i("path",{d:"M3 21l6-6"})]})),hr.inheritedText]})),t(p,e({component:"span",sx:{fontSize:"0.7rem",color:"#475569",bgcolor:"#F1F5F9",border:"1px solid #E2E8F0",borderRadius:"4px",px:"6px",py:"2px"}},{children:[hr.rulesCount," rules"]})),t(p,e({component:"span",sx:{fontSize:"0.7rem",color:"#475569",bgcolor:"#F1F5F9",border:"1px solid #E2E8F0",borderRadius:"4px",px:"6px",py:"2px"}},{children:[hr.tiersCount," Tiers"]}))]}))]}))]})):ur.genre?null:i(p,e({sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",opacity:.4,py:6,gap:1}},{children:i(f,e({sx:{fontSize:"0.75rem",color:"#94A3B8"}},{children:"Select a genre to load the matching scope"}))}))})),ur.genre&&t(l,{children:[t(f,e({sx:{fontSize:"1rem",fontWeight:600,mb:.5,color:"#19213D"}},{children:["Select an Existing Station from the “",ur.genre,"” Scope"," ",i(f,e({component:"span",sx:{fontSize:"1rem",fontWeight:400,color:"#64748B"}},{children:"(Optional)"}))]})),t(f,e({sx:{fontSize:"0.75rem",color:"#64748B",mb:"12px"}},{children:["Please select an existing station under the “",ur.genre,"” category to copy its learnings."]})),t("div",e({className:z.searchWrapper,style:{marginBottom:"12px"}},{children:[i("input",{type:"text",value:ye,onChange:function(e){return be(e.target.value)},placeholder:"Search for station...",className:z.searchInput}),i(v,{className:z.searchIcon,size:16})]})),t(p,e({sx:{display:"flex",flexDirection:"column",gap:2}},{children:[Fe&&i(T,{}),!Fe&&0===ge.length&&we.trim()&&t(f,e({sx:{fontSize:"0.875rem",color:"#64748B",textAlign:"center",py:4}},{children:['No scopes found matching "',we,'".']})),!Fe&&ge.map(function(r){return i(B,e({},r,{isSelected:ze===r.id,onSelect:function(e){var r;Oe(ze===e?null!==(r=null==hr?void 0:hr.id)&&void 0!==r?r:null:e)}}),r.id)})]}))]})]}))]}))}))]})),t(p,e({sx:{p:"12px 20px",borderTop:"1px solid #F0F2F5",display:"flex",justifyContent:"flex-end",gap:2,bgcolor:"#fff"}},{children:[i("button",e({onClick:vr,disabled:Le,style:{padding:"7px 10px",borderRadius:"6px",color:"#64748B",border:"1px solid #E2E8F0",backgroundColor:"#fff",cursor:"pointer",fontSize:"14px",fontWeight:500}},{children:"Cancel"})),i("button",e({onClick:function(){return r(void 0,void 0,void 0,function(){var e,r,t,i,l,a,s,c,d,u,p,f,m,h,g,x,v,y,b;return o(this,function(o){switch(o.label){case 0:if(!re||!ze)return console.error("[StationOnboard] Missing required data for onboarding"),[2];if(L.getState().backwardCompatibility&&"approval_required"===Ze&&0===rr.length&&0===tr.length)return sr("Please select at least one approver or approver group."),setTimeout(function(){var e;null===(e=Ye.current)||void 0===e||e.scrollIntoView({behavior:"smooth",block:"center"})},50),[2];sr(""),e=hr?n([hr],ge,!0):ge,r=e.find(function(e){return e.id===ze}),null==r?void 0:r.isCopy,Me(!0),Ne(0),t=null,o.label=1;case 1:return o.trys.push([1,3,,4]),i=L.getState().backwardCompatibility,l=i?{topic:"customRuleSet",customScopeGroupName:M.CUSTOM_SCOPE_GROUP_NAME,scopeDescription:re.station_name||"New Station",parentScopeId:null!==(p=null==hr?void 0:hr.id)&&void 0!==p?p:null,customScopeName:re.station_name||"New Station",customScopeId:S(),createByName:(null==Ge?void 0:Ge.firstname)||"System",createdBy:(null==Ge?void 0:Ge.email)||"system@audacy.com",scopeType:"Station",approvalRequired:"approval_required"===Ze,audacyStationMetadata:{genre:ur.genre,low_sellout_configurations:"Low Sellout"===ur.type?ur.lowSelloutConfig:null,market:re.market,primetime_windows:ur.primeTime,region:re.region,station_guid:re.station_guid,station_type:""===ur.type?null:ur.type,source_days:ur.source_days,target_days:ur.target_days},appsecData:{application:null==Je?void 0:Je.applicationId,module:null==Je?void 0:Je.moduleId,roles:n(n([],"approval_required"===Ze?[{users:rr.map(function(e){return e.email}),groups:tr.map(function(e){return e._id}),role:null!==(m=null===(f=Xe.find(function(e){return"Learning Manager"===e.name}))||void 0===f?void 0:f._id)&&void 0!==m?m:""}]:[],!0),[{users:[null==Ge?void 0:Ge.email],groups:[],role:null!==(g=null===(h=Xe.find(function(e){return"Instant Learning Admin"===e.name}))||void 0===h?void 0:h._id)&&void 0!==g?g:""}],!1)}}:{topic:"customRuleSet",scope_reference_id:null,scopeDescription:"demo",parentScopeId:null,scopeName:re.station_name||"New Station",scopeReferenceMetadata:{},applicationMappingId:Q},console.log("[StationOnboard] Step 1: Creating rule set with payload:",l),[4,k(l,Z)];case 2:if(a=o.sent(),!(t=null===(x=null==a?void 0:a.data)||void 0===x?void 0:x.scopeId))throw new Error("Failed to create scope - no scopeId returned");return console.log("[StationOnboard] Step 1 Complete: Created scope with ID:",t),Ne(1),[3,4];case 3:return s=o.sent(),console.error("[StationOnboard] Error creating rule set:",s),null===(v=Ue.current)||void 0===v||v.show({severity:"error",life:3e3,summary:"Error",detail:"Failed to create rule set. Please try again."}),Me(!1),Ne(0),[2];case 4:return o.trys.push([4,6,,7]),c=null!==ze&&ze!==(null==hr?void 0:hr.id),d={source_scope_id:c?ze:null!==(y=null==hr?void 0:hr.id)&&void 0!==y?y:ze,target_scope_id:t,is_copy_parent_variant_id:c},console.log("[StationOnboard] Step 3: Inheriting scope with payload:",d),[4,F(d)];case 5:return o.sent(),console.log("[StationOnboard] Step 3 Complete: Scope inherited"),Ne(3),[3,7];case 6:return u=o.sent(),console.error("[StationOnboard] Error inheriting scope (no rollback):",u),null===(b=Ue.current)||void 0===b||b.show({severity:"error",life:3e3,summary:"Error",detail:"Failed to apply rule template. Please try again."}),Me(!1),Ne(0),[2];case 7:return He.current=t,console.log("[StationOnboard] Onboarding completed successfully!"),[2]}})})},disabled:!br||Le,style:{padding:"7px 10px",borderRadius:"6px",border:"none",backgroundColor:br?"#2563EB":"#BFDBFE",color:"#fff",cursor:br&&!Le?"pointer":"not-allowed",fontSize:"14px",fontWeight:500,display:"flex",alignItems:"center",gap:"7px"}},{children:t(l,Le?{children:[i(g,{size:16,color:"inherit"}),i("span",{children:"Onboarding..."})]}:{children:[i("span",{children:"Onboard Station"}),i(y,{size:16})]})}))]}))]}))};export{K as default};
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useEffect } from 'react';
+import { Dialog, Box, Typography, IconButton, DialogContent, CircularProgress } from '@mui/material';
+import { X, Search, ArrowRight } from 'lucide-react';
+import { Toast } from 'primereact/toast';
+import { v4 } from 'uuid';
+import { retrieveGenreScopes, fetchStationsByKeyword, searchScopes, createRuleSet, inheritScopeBackwardCompatible } from '../../apis/scopeApis.js';
+import StationAutocomplete from './StationAutocomplete.js';
+import CardSkeletonAnalysisLoader from '../CardSkeleton.js';
+import OnboardingLoader from './OnboardingLoader.js';
+import TemplateCard from './TemplateCard.js';
+import styles from '../../styles/StationOnboardModal.module.css.js';
+import InputField from './InputField.js';
+import useAuthStore from '../../store/useAuthStore.js';
+import { useConfigStore } from '../../store/useConfigStore.js';
+import { useLearningTemplateStore } from '../../store/useLearningTemplateStore.js';
+import { IL_CONFIG_CONSTANTS } from '../../config.js';
+import { useAppSecRolesStore } from '../../store/useAppSecRolesStore.js';
+import useEnvStore from '../../store/useEnvStore.js';
+import AddScopeApprovalSearchComponent from '../../RuleContent/AddScopeApprovalSearchComponent.js';
+import { useILMarketplaceThemeStyles } from '../../../IL-marketplace/marketplaceTheme.js';
+import DayToggleSelector from './DayToggleSelector.js';
+
+const DAY_PART_OPTIONS = [
+  { label: "6am to 7pm", value: "06:00 AM - 7:00 PM" },
+  { label: "5am to 7pm", value: "05:00 AM - 7:00 PM" }
+];
+const STATION_TYPE_OPTIONS = [
+  { label: "Low Sellout", value: "Low Sellout" },
+  { label: "High Sellout", value: "High Sellout" },
+  { label: "None", value: "" }
+];
+const LOW_SELLOUT_CONFIG_OPTIONS = [
+  { label: "None", value: "None" },
+  { label: "Distribute spots evenly across all breaks in the hour", value: "Distribute spots evenly across all breaks in the hour" }
+];
+const DaysOptions = [
+  { label: "Mon", value: "monday" },
+  { label: "Tue", value: "tuesday" },
+  { label: "Wed", value: "wednesday" },
+  { label: "Thu", value: "thursday" },
+  { label: "Fri", value: "friday" },
+  { label: "Sat", value: "saturday" },
+  { label: "Sun", value: "sunday" }
+];
+const StationOnboardModal = ({
+  isOpen,
+  onClose,
+  onBoardStation,
+  app_integration_id,
+  token
+}) => {
+  var _a;
+  const themeStyles = useILMarketplaceThemeStyles();
+  const [selectedStation, setSelectedStation] = useState(null);
+  const [genreScopeOptions, setGenreScopeOptions] = useState([]);
+  const [genreOffset, setGenreOffset] = useState(0);
+  const [hasMoreGenres, setHasMoreGenres] = useState(true);
+  const [isFetchingGenres, setIsFetchingGenres] = useState(false);
+  const [otherScopes, setOtherScopes] = useState([]);
+  const [scopeSearchText, setScopeSearchText] = useState("");
+  const [debouncedScopeSearchText, setDebouncedScopeSearchText] = useState("");
+  const [isSearchingScopes, setIsSearchingScopes] = useState(false);
+  const [isSimulatingTopScopeLoad, setIsSimulatingTopScopeLoad] = useState(false);
+  const [selectedTemplateId, setSelectedTemplateId] = useState(null);
+  useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [onboardingStep, setOnboardingStep] = useState(0);
+  const [stationSearchText, setStationSearchText] = useState("");
+  const { user } = useAuthStore();
+  const toast = useRef(null);
+  const newScopeIdRef = useRef(null);
+  const topScopeTimerRef = useRef(null);
+  const leftPanelRef = useRef(null);
+  useConfigStore();
+  const approvalPanelRef = useRef(null);
+  const roles = useAppSecRolesStore((state) => state.roles);
+  const rbacConfig = useEnvStore((state) => state.rbacConfig);
+  const [approvalSetting, setApprovalSetting] = useState("approval_required");
+  const [selectedApprovers, setSelectedApprovers] = useState([]);
+  const [selectedGroupOfApprovers, setSelectedGroupOfApprovers] = useState([]);
+  const [approvalError, setApprovalError] = useState("");
+  const stationNameParam = useLearningTemplateStore((state) => state.stationNameParam);
+  const [details, setDetails] = useState({
+    region: "",
+    // timezone: '',
+    primeTime: ["06:00 AM - 7:00 PM"],
+    genre: "Music",
+    type: "",
+    // description: '',
+    lowSelloutConfig: "",
+    source_days: ["wednesday", "thursday", "friday", "saturday"],
+    target_days: ["monday", "tuesday", "wednesday"]
+  });
+  const getOptionFromValue = (options, value) => options.find((opt) => opt.value === value) || null;
+  const genreSelectOptions = useMemo(() => {
+    return genreScopeOptions.map((scope) => ({
+      label: scope.scope_name,
+      value: scope.scope_name
+    }));
+  }, [genreScopeOptions]);
+  const mappedTopScope = useMemo(() => {
+    var _a2, _b, _c;
+    if (!details.genre) return null;
+    const selectedScope = genreScopeOptions.find((s) => s.scope_name === details.genre);
+    if (!selectedScope) return null;
+    return {
+      id: selectedScope.id,
+      title: selectedScope.scope_name || "Unnamed Template",
+      // badge: selectedScope.recommendation_type || 'AI Recommendation',
+      description: ((_a2 = selectedScope.description) == null ? void 0 : _a2.trim()) || "No description available.",
+      inheritedText: ((_b = selectedScope.inheritance) == null ? void 0 : _b[0]) || void 0,
+      rulesCount: selectedScope.rules_count || 0,
+      tiersCount: selectedScope.tier_count || 0,
+      isCopy: (_c = selectedScope.is_copy) != null ? _c : false
+    };
+  }, [details.genre, genreScopeOptions]);
+  useEffect(() => {
+    return () => {
+      if (topScopeTimerRef.current) {
+        clearTimeout(topScopeTimerRef.current);
+      }
+    };
+  }, []);
+  const fetchGenres = async (offsetToFetch) => {
+    if (isFetchingGenres) return;
+    setIsFetchingGenres(true);
+    try {
+      const response = await retrieveGenreScopes({ limit: "20", offset: String(offsetToFetch) });
+      if ((response == null ? void 0 : response.status) === "success" && Array.isArray(response == null ? void 0 : response.data)) {
+        const newData = response.data;
+        setGenreScopeOptions((prev) => {
+          if (offsetToFetch === 0) return newData;
+          const existingIds = new Set(prev.map((p) => p.id));
+          const uniqueNew = newData.filter((n) => !existingIds.has(n.id));
+          return [...prev, ...uniqueNew];
+        });
+        if (newData.length < 20) {
+          setHasMoreGenres(false);
+        } else {
+          setHasMoreGenres(true);
+        }
+        setGenreOffset(offsetToFetch + 20);
+      } else {
+        setHasMoreGenres(false);
+      }
+    } catch (error) {
+      console.error("[StationOnboard] Failed to fetch genre scopes:", error);
+      setHasMoreGenres(false);
+    } finally {
+      setIsFetchingGenres(false);
+    }
+  };
+  useEffect(() => {
+    if (isOpen) {
+      setGenreScopeOptions([]);
+      setGenreOffset(0);
+      setHasMoreGenres(true);
+      fetchGenres(0);
+      if (stationNameParam) {
+        setStationSearchText(stationNameParam);
+        const autoSelectStation = async () => {
+          try {
+            const response = await fetchStationsByKeyword(stationNameParam, true);
+            if ((response == null ? void 0 : response.success) === true && Array.isArray(response == null ? void 0 : response.data)) {
+              const match = response.data.find(
+                (station) => {
+                  var _a2;
+                  return ((_a2 = station.station_name) == null ? void 0 : _a2.toLowerCase()) === stationNameParam.toLowerCase() && !station.ruleset_id;
+                }
+              );
+              if (match) {
+                setSelectedStation(match);
+              }
+            }
+          } catch (error) {
+            console.error("[StationOnboard] Error auto-selecting station:", error);
+          }
+        };
+        autoSelectStation();
+      }
+    }
+  }, [isOpen, stationNameParam]);
+  const loadMoreGenres = () => {
+    if (!isFetchingGenres && hasMoreGenres) {
+      fetchGenres(genreOffset);
+    }
+  };
+  useEffect(() => {
+    if (selectedStation) {
+      setDetails((prev) => {
+        var _a2;
+        return {
+          ...prev,
+          region: (_a2 = selectedStation.market) != null ? _a2 : ""
+        };
+      });
+    } else {
+      setDetails({ region: "", primeTime: ["06:00 AM - 7:00 PM"], genre: "Music", type: "", lowSelloutConfig: "", source_days: ["wednesday", "thursday", "friday", "saturday"], target_days: ["monday", "tuesday", "wednesday"] });
+    }
+  }, [selectedStation]);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedScopeSearchText(scopeSearchText);
+    }, 500);
+    return () => clearTimeout(handler);
+  }, [scopeSearchText]);
+  useEffect(() => {
+    const fetchSearchedScopes = async () => {
+      if (!debouncedScopeSearchText.trim()) {
+        setOtherScopes([]);
+        return;
+      }
+      setIsSearchingScopes(true);
+      try {
+        const response = await searchScopes({ search_string: debouncedScopeSearchText.trim() });
+        if ((response == null ? void 0 : response.status) === "success" && Array.isArray(response == null ? void 0 : response.data)) {
+          const filteredData = response.data.filter((item) => {
+            var _a2;
+            const inheritance = (_a2 = item.inheritance) != null ? _a2 : [];
+            const scopeNameIndex = inheritance.indexOf(item.scope_name);
+            if (scopeNameIndex <= 0) return false;
+            return inheritance[scopeNameIndex - 1] === details.genre;
+          });
+          const mappedScopes = filteredData.map((item) => {
+            var _a2, _b, _c;
+            return {
+              id: item.id,
+              title: item.scope_name || "Unnamed Template",
+              description: ((_a2 = item.description) == null ? void 0 : _a2.trim()) || "No description available.",
+              inheritedText: ((_b = item.inheritance) == null ? void 0 : _b[0]) || void 0,
+              rulesCount: item.rules_count || 0,
+              tiersCount: item.tier_count || 0,
+              isCopy: (_c = item.is_copy) != null ? _c : false
+            };
+          });
+          setOtherScopes(mappedScopes);
+        } else {
+          setOtherScopes([]);
+        }
+      } catch (error) {
+        console.error("[StationOnboard] Error searching scopes:", error);
+        setOtherScopes([]);
+      } finally {
+        setIsSearchingScopes(false);
+      }
+    };
+    fetchSearchedScopes();
+  }, [debouncedScopeSearchText, details.genre]);
+  useEffect(() => {
+    if (!debouncedScopeSearchText.trim() && mappedTopScope) {
+      setSelectedTemplateId(mappedTopScope.id);
+    }
+  }, [debouncedScopeSearchText, mappedTopScope]);
+  const handleScrollToBottom = () => {
+    setTimeout(() => {
+      if (leftPanelRef.current) {
+        leftPanelRef.current.scrollTo({
+          top: leftPanelRef.current.scrollHeight,
+          behavior: "smooth"
+        });
+      }
+    }, 100);
+  };
+  const handleClose = () => {
+    setStationSearchText("");
+    setSelectedStation(null);
+    setDetails({
+      region: "",
+      // timezone: '',
+      primeTime: ["06:00 AM - 7:00 PM"],
+      genre: "Music",
+      type: "",
+      // description: '',
+      lowSelloutConfig: "",
+      source_days: ["wednesday", "thursday", "friday", "saturday"],
+      target_days: ["monday", "tuesday", "wednesday"]
+    });
+    setOtherScopes([]);
+    setScopeSearchText("");
+    setSelectedTemplateId(null);
+    setApprovalSetting("approval_required");
+    setSelectedApprovers([]);
+    setSelectedGroupOfApprovers([]);
+    setApprovalError("");
+    onClose();
+  };
+  const handleOnboard = async () => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    if (!selectedStation || !selectedTemplateId) {
+      console.error("[StationOnboard] Missing required data for onboarding");
+      return;
+    }
+    const backwardCompatibilityCheck = useLearningTemplateStore.getState().backwardCompatibility;
+    if (backwardCompatibilityCheck && approvalSetting === "approval_required" && selectedApprovers.length === 0 && selectedGroupOfApprovers.length === 0) {
+      setApprovalError("Please select at least one approver or approver group.");
+      setTimeout(() => {
+        var _a3;
+        (_a3 = approvalPanelRef.current) == null ? void 0 : _a3.scrollIntoView({ behavior: "smooth", block: "center" });
+      }, 50);
+      return;
+    }
+    setApprovalError("");
+    const availableScopes = mappedTopScope ? [mappedTopScope, ...otherScopes] : otherScopes;
+    const selectedScopeObj = availableScopes.find((s) => s.id === selectedTemplateId);
+    (_a2 = selectedScopeObj == null ? void 0 : selectedScopeObj.isCopy) != null ? _a2 : false;
+    setIsLoading(true);
+    setOnboardingStep(0);
+    let newScopeId = null;
+    try {
+      const backwardCompatibility = useLearningTemplateStore.getState().backwardCompatibility;
+      const createRuleSetPayload = backwardCompatibility ? {
+        // Legacy Payload
+        topic: "customRuleSet",
+        customScopeGroupName: IL_CONFIG_CONSTANTS.CUSTOM_SCOPE_GROUP_NAME,
+        scopeDescription: selectedStation.station_name || "New Station",
+        parentScopeId: (_b = mappedTopScope == null ? void 0 : mappedTopScope.id) != null ? _b : null,
+        customScopeName: selectedStation.station_name || "New Station",
+        customScopeId: v4(),
+        createByName: (user == null ? void 0 : user.firstname) || "System",
+        createdBy: (user == null ? void 0 : user.email) || "system@audacy.com",
+        scopeType: "Station",
+        approvalRequired: approvalSetting === "approval_required",
+        audacyStationMetadata: {
+          genre: details.genre,
+          low_sellout_configurations: details.type === "Low Sellout" ? details.lowSelloutConfig : null,
+          market: selectedStation.market,
+          primetime_windows: details.primeTime,
+          region: selectedStation.region,
+          station_guid: selectedStation.station_guid,
+          station_type: details.type === "" ? null : details.type,
+          source_days: details.source_days,
+          target_days: details.target_days
+        },
+        appsecData: {
+          application: rbacConfig == null ? void 0 : rbacConfig.applicationId,
+          module: rbacConfig == null ? void 0 : rbacConfig.moduleId,
+          roles: [
+            ...approvalSetting === "approval_required" ? [{
+              users: selectedApprovers.map((a) => a.email),
+              groups: selectedGroupOfApprovers.map((g) => g._id),
+              role: (_d = (_c = roles.find((r) => r.name === "Learning Manager")) == null ? void 0 : _c._id) != null ? _d : ""
+            }] : [],
+            {
+              users: [user == null ? void 0 : user.email],
+              groups: [],
+              role: (_f = (_e = roles.find((r) => r.name === "Instant Learning Admin")) == null ? void 0 : _e._id) != null ? _f : ""
+            }
+          ]
+        }
+      } : {
+        topic: "customRuleSet",
+        scope_reference_id: null,
+        scopeDescription: "demo",
+        parentScopeId: null,
+        scopeName: selectedStation.station_name || "New Station",
+        scopeReferenceMetadata: {},
+        applicationMappingId: app_integration_id
+      };
+      console.log("[StationOnboard] Step 1: Creating rule set with payload:", createRuleSetPayload);
+      const createResponse = await createRuleSet(createRuleSetPayload, token);
+      newScopeId = (_g = createResponse == null ? void 0 : createResponse.data) == null ? void 0 : _g.scopeId;
+      if (!newScopeId) {
+        throw new Error("Failed to create scope - no scopeId returned");
+      }
+      console.log("[StationOnboard] Step 1 Complete: Created scope with ID:", newScopeId);
+      setOnboardingStep(1);
+    } catch (error) {
+      console.error("[StationOnboard] Error creating rule set:", error);
+      (_h = toast.current) == null ? void 0 : _h.show({
+        severity: "error",
+        life: 3e3,
+        summary: "Error",
+        detail: "Failed to create rule set. Please try again."
+      });
+      setIsLoading(false);
+      setOnboardingStep(0);
+      return;
+    }
+    try {
+      const existingStationSelected = selectedTemplateId !== null && selectedTemplateId !== (mappedTopScope == null ? void 0 : mappedTopScope.id);
+      const inheritScopePayload = {
+        source_scope_id: existingStationSelected ? selectedTemplateId : (_i = mappedTopScope == null ? void 0 : mappedTopScope.id) != null ? _i : selectedTemplateId,
+        target_scope_id: newScopeId,
+        is_copy_parent_variant_id: existingStationSelected
+      };
+      console.log("[StationOnboard] Step 3: Inheriting scope with payload:", inheritScopePayload);
+      await inheritScopeBackwardCompatible(inheritScopePayload);
+      console.log("[StationOnboard] Step 3 Complete: Scope inherited");
+      setOnboardingStep(3);
+    } catch (error) {
+      console.error("[StationOnboard] Error inheriting scope (no rollback):", error);
+      (_j = toast.current) == null ? void 0 : _j.show({
+        severity: "error",
+        life: 3e3,
+        summary: "Error",
+        detail: "Failed to apply rule template. Please try again."
+      });
+      setIsLoading(false);
+      setOnboardingStep(0);
+      return;
+    }
+    newScopeIdRef.current = newScopeId;
+    console.log("[StationOnboard] Onboarding completed successfully!");
+  };
+  const handleLoaderComplete = () => {
+    setIsLoading(false);
+    const scopeId = newScopeIdRef.current;
+    handleClose();
+    onBoardStation(scopeId || void 0);
+    newScopeIdRef.current = null;
+  };
+  const updateDetail = (field, val) => {
+    var _a2;
+    if (field === "primeTime") {
+      const stringVal = (val == null ? void 0 : val.value) ? String(val.value) : "";
+      setDetails((prev) => ({ ...prev, primeTime: stringVal ? [stringVal] : [] }));
+      return;
+    }
+    if (field === "source_days" || field === "target_days") {
+      setDetails((prev) => ({ ...prev, [field]: val }));
+      return;
+    }
+    const value = (_a2 = val == null ? void 0 : val.value) != null ? _a2 : "";
+    setDetails((prev) => ({ ...prev, [field]: String(value) }));
+    if (field === "genre") {
+      setIsSimulatingTopScopeLoad(true);
+      if (topScopeTimerRef.current) {
+        clearTimeout(topScopeTimerRef.current);
+      }
+      topScopeTimerRef.current = setTimeout(() => {
+        const selectedScope = genreScopeOptions.find((s) => s.scope_name === value);
+        if (selectedScope) {
+          setSelectedTemplateId(selectedScope.id);
+        } else {
+          setSelectedTemplateId(null);
+        }
+        setIsSimulatingTopScopeLoad(false);
+      }, 800);
+    }
+  };
+  const isFormValid = Boolean(
+    selectedStation && details.region && // details.timezone &&
+    details.primeTime.length > 0 && details.genre
+    // details.description?.trim().length > 0,
+  );
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: isOpen,
+      onClose: handleClose,
+      maxWidth: false,
+      disableEscapeKeyDown: true,
+      PaperProps: {
+        style: themeStyles,
+        sx: {
+          width: "90vw",
+          height: "90vh",
+          borderRadius: "12px",
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden",
+          fontFamily: "sans-serif"
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(Toast, { ref: toast }),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              p: "20px 20px 20px 27px",
+              borderBottom: "1px solid #F0F2F5",
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              bgcolor: "#fff"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: [
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "18px", fontWeight: 600, color: "#19213D" }, children: "Onboard a Station" }),
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "16px", fontWeight: 400, color: "#666F8D" }, children: "Onboard a station to start configuring learnings." })
+              ] }),
+              /* @__PURE__ */ jsx(IconButton, { onClick: handleClose, disabled: isLoading, sx: { color: "#19213D" }, children: /* @__PURE__ */ jsx(X, { size: 24 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          DialogContent,
+          {
+            sx: {
+              p: 0,
+              bgcolor: "#F8FAFC",
+              display: "flex",
+              flexDirection: "row",
+              overflow: "hidden",
+              position: "relative"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                OnboardingLoader,
+                {
+                  isLoading,
+                  currentStep: onboardingStep,
+                  onComplete: handleLoaderComplete
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  sx: {
+                    display: "flex",
+                    flex: 1,
+                    flexDirection: "column",
+                    paddingY: "14px",
+                    paddingX: "20px",
+                    gap: 2,
+                    overflowY: "auto"
+                  },
+                  children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: 3 }, children: [
+                    /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        ref: leftPanelRef,
+                        sx: {
+                          flex: 1,
+                          bgcolor: "#fff",
+                          p: 3,
+                          borderRadius: "16px",
+                          border: "1px solid #F0F2F5"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1rem", fontWeight: 600, mb: 0.5, color: "#19213D" }, children: "Basic Details" }),
+                          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.75rem", color: "#00000080", mb: "20px" }, children: "Set up basic station details to unlock AI recommended scopes." }),
+                          /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: "16px" }, children: [
+                            /* @__PURE__ */ jsxs(Box, { className: styles.formGroup, children: [
+                              /* @__PURE__ */ jsxs("label", { className: styles.label, children: [
+                                /* @__PURE__ */ jsx("span", { className: styles.asterisk, children: "*" }),
+                                "Station Name/Call Letters"
+                              ] }),
+                              /* @__PURE__ */ jsx(
+                                StationAutocomplete,
+                                {
+                                  value: stationSearchText,
+                                  onChange: setStationSearchText,
+                                  onStationSelect: (station) => setSelectedStation(station)
+                                }
+                              )
+                            ] }),
+                            /* @__PURE__ */ jsx(
+                              InputField,
+                              {
+                                required: true,
+                                disabled: true,
+                                label: "Region",
+                                placeholder: "Select Region",
+                                value: details.region || void 0,
+                                isSearchable: false
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              InputField,
+                              {
+                                required: true,
+                                label: "Prime Time Window",
+                                placeholder: "Select Prime Time",
+                                options: DAY_PART_OPTIONS,
+                                value: getOptionFromValue(DAY_PART_OPTIONS, ((_a = details.primeTime) == null ? void 0 : _a[0]) || ""),
+                                onOptionChange: (val) => updateDetail("primeTime", val),
+                                isSearchable: false
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(Box, { onClick: handleScrollToBottom, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+                              InputField,
+                              {
+                                label: "Station Sellout Type",
+                                placeholder: "None",
+                                options: STATION_TYPE_OPTIONS,
+                                value: getOptionFromValue(STATION_TYPE_OPTIONS, details.type),
+                                onOptionChange: (val) => {
+                                  updateDetail("type", val);
+                                  if ((val == null ? void 0 : val.value) !== "Low Sellout") {
+                                    setDetails((prev) => ({ ...prev, lowSelloutConfig: "" }));
+                                  }
+                                },
+                                isSearchable: false
+                              }
+                            ) }),
+                            details.type === "Low Sellout" && /* @__PURE__ */ jsx(Box, { onClick: handleScrollToBottom, sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+                              InputField,
+                              {
+                                label: "Low Sell Out Configurations",
+                                placeholder: "Select Configuration",
+                                options: LOW_SELLOUT_CONFIG_OPTIONS,
+                                value: getOptionFromValue(LOW_SELLOUT_CONFIG_OPTIONS, details.lowSelloutConfig),
+                                onOptionChange: (val) => updateDetail("lowSelloutConfig", val),
+                                isSearchable: false
+                              }
+                            ) }),
+                            /* @__PURE__ */ jsxs(Box, { onClick: handleScrollToBottom, sx: { width: "100%", display: "flex", flexDirection: "column", gap: "20px" }, children: [
+                              /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1rem", fontWeight: 600, color: "#19213D" }, children: "Front-Loading Configuration" }),
+                              /* @__PURE__ */ jsx(
+                                DayToggleSelector,
+                                {
+                                  label: "Source Days",
+                                  subText: "Days from which spots can be front loaded.",
+                                  options: DaysOptions,
+                                  selectedValues: details.source_days,
+                                  onChange: (updatedValues) => updateDetail("source_days", updatedValues)
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                DayToggleSelector,
+                                {
+                                  label: "Target Days",
+                                  subText: "Days where front loaded spots can be placed.",
+                                  options: DaysOptions,
+                                  selectedValues: details.target_days,
+                                  onChange: (updatedValues) => updateDetail("target_days", updatedValues)
+                                }
+                              )
+                            ] }),
+                            useLearningTemplateStore.getState().backwardCompatibility && /* @__PURE__ */ jsxs(
+                              "div",
+                              {
+                                ref: approvalPanelRef,
+                                style: { display: "flex", flexDirection: "column", marginTop: "12px" },
+                                children: [
+                                  /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "1rem", fontWeight: 600, mb: 0.5, color: "#19213D" }, children: "Approval Settings" }),
+                                  /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.75rem", color: "#00000080", mb: "20px" }, children: "Configure who can approve learnings before they get published." }),
+                                  /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px", fontSize: "12px", color: "#8F2C23", gap: "16px" }, children: [
+                                    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px", fontSize: "12px", color: "#8F2C23", gap: "12px" }, children: [
+                                      /* @__PURE__ */ jsxs(
+                                        "div",
+                                        {
+                                          role: "radio",
+                                          "aria-checked": approvalSetting === "approval_required",
+                                          tabIndex: 0,
+                                          style: { cursor: "pointer", display: "flex", flexDirection: "column", gap: "4px", marginBottom: "8px" },
+                                          onClick: () => setApprovalSetting("approval_required"),
+                                          onKeyDown: (e) => {
+                                            if (e.key === "Enter" || e.key === " ") setApprovalSetting("approval_required");
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                                              /* @__PURE__ */ jsx("div", { style: { display: "flex", height: "16px", width: "16px", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: "50%", border: `2px solid ${approvalSetting === "approval_required" ? "#2563EB" : "#CBD5E1"}` }, children: approvalSetting === "approval_required" && /* @__PURE__ */ jsx("div", { style: { height: "8px", width: "8px", borderRadius: "50%", backgroundColor: "#2563EB" } }) }),
+                                              /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#19213D" }, children: "Approval Required Before Publishing" })
+                                            ] }),
+                                            /* @__PURE__ */ jsx("p", { style: { margin: 0, marginLeft: "24px", fontSize: "12px", color: "#666F8D" }, children: "Learnings require approval before publishing." })
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxs("div", { style: { gap: "16px" }, children: [
+                                        approvalSetting === "approval_required" && /* @__PURE__ */ jsx(
+                                          AddScopeApprovalSearchComponent,
+                                          {
+                                            selectedApprovers,
+                                            selectedGroupOfApprovers,
+                                            onApproversChange: (v) => {
+                                              setSelectedApprovers(v);
+                                              setApprovalError("");
+                                            },
+                                            onGroupsChange: (v) => {
+                                              setSelectedGroupOfApprovers(v);
+                                              setApprovalError("");
+                                            }
+                                          }
+                                        ),
+                                        approvalError && /* @__PURE__ */ jsx("p", { style: { margin: 0, marginLeft: "24px", fontSize: "12px", color: "#8F2C23" }, children: approvalError })
+                                      ] })
+                                    ] }),
+                                    /* @__PURE__ */ jsxs(
+                                      "div",
+                                      {
+                                        role: "radio",
+                                        "aria-checked": approvalSetting === "publish_without",
+                                        tabIndex: 0,
+                                        style: { cursor: "pointer", display: "flex", flexDirection: "column", gap: "4px" },
+                                        onClick: () => {
+                                          setApprovalSetting("publish_without");
+                                          setApprovalError("");
+                                        },
+                                        onKeyDown: (e) => {
+                                          if (e.key === "Enter" || e.key === " ") {
+                                            setApprovalSetting("publish_without");
+                                            setApprovalError("");
+                                          }
+                                        },
+                                        children: [
+                                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                                            /* @__PURE__ */ jsx("div", { style: { display: "flex", height: "16px", width: "16px", flexShrink: 0, alignItems: "center", justifyContent: "center", borderRadius: "50%", border: `2px solid ${approvalSetting === "publish_without" ? "#2563EB" : "#CBD5E1"}` }, children: approvalSetting === "publish_without" && /* @__PURE__ */ jsx("div", { style: { height: "8px", width: "8px", borderRadius: "50%", backgroundColor: "#2563EB" } }) }),
+                                            /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#19213D" }, children: "Publish Without Approval" })
+                                          ] }),
+                                          /* @__PURE__ */ jsx("p", { style: { margin: 0, marginLeft: "24px", fontSize: "12px", color: "#666F8D" }, children: "Learnings can be published directly." })
+                                        ]
+                                      }
+                                    )
+                                  ] })
+                                ]
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Box,
+                      {
+                        sx: {
+                          flex: 1,
+                          bgcolor: "#fff",
+                          p: 3,
+                          borderRadius: "12px",
+                          border: "1px solid #F0F2F5",
+                          display: "flex",
+                          flexDirection: "column"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "1rem", fontWeight: 600, mb: 0.5, color: "#19213D" }, children: [
+                            /* @__PURE__ */ jsx("span", { style: { color: "#E53E3E", marginRight: "2px" }, children: "*" }),
+                            "Select a scope for your station"
+                          ] }),
+                          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.75rem", color: "#64748B", mb: "16px" }, children: "Your station will inherit the rules from the selected scope." }),
+                          /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(
+                            InputField,
+                            {
+                              required: true,
+                              label: "",
+                              placeholder: "Select Genre",
+                              options: genreSelectOptions,
+                              value: getOptionFromValue(genreSelectOptions, details.genre),
+                              onOptionChange: (val) => updateDetail("genre", val),
+                              isSearchable: false,
+                              onMenuScrollToBottom: loadMoreGenres,
+                              isLoadingOptions: isFetchingGenres,
+                              hasMoreOptions: hasMoreGenres
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx(Box, { sx: { mb: 3 }, children: isSimulatingTopScopeLoad ? /* @__PURE__ */ jsx(CardSkeletonAnalysisLoader, {}) : mappedTopScope ? (
+                            /* Selected scope displayed as a detail card — no radio/select interaction */
+                            /* @__PURE__ */ jsxs(
+                              Box,
+                              {
+                                sx: {
+                                  border: "1.5px solid #2563EB",
+                                  borderRadius: "10px",
+                                  p: "14px 16px",
+                                  bgcolor: "#EFF6FF",
+                                  display: "flex",
+                                  alignItems: "flex-start",
+                                  gap: "12px"
+                                },
+                                children: [
+                                  /* @__PURE__ */ jsx(
+                                    Box,
+                                    {
+                                      sx: {
+                                        width: 36,
+                                        height: 36,
+                                        borderRadius: "8px",
+                                        bgcolor: "#DBEAFE",
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        flexShrink: 0
+                                      },
+                                      children: /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "#2563EB", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "2" }),
+                                        /* @__PURE__ */ jsx("path", { d: "M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" })
+                                      ] })
+                                    }
+                                  ),
+                                  /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+                                    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.875rem", fontWeight: 600, color: "#1E3A5F", mb: "2px" }, children: mappedTopScope.title }),
+                                    /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.75rem", color: "#2563EB", mb: "8px" }, children: mappedTopScope.description }),
+                                    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" }, children: [
+                                      mappedTopScope.inheritedText && /* @__PURE__ */ jsxs(
+                                        Box,
+                                        {
+                                          component: "span",
+                                          sx: {
+                                            fontSize: "0.7rem",
+                                            color: "#475569",
+                                            bgcolor: "#F1F5F9",
+                                            border: "1px solid #E2E8F0",
+                                            borderRadius: "4px",
+                                            px: "6px",
+                                            py: "2px",
+                                            display: "inline-flex",
+                                            alignItems: "center",
+                                            gap: "4px"
+                                          },
+                                          children: [
+                                            /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                                              /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+                                              /* @__PURE__ */ jsx("path", { d: "M21 3L9 15" }),
+                                              /* @__PURE__ */ jsx("path", { d: "M3 21l6-6" })
+                                            ] }),
+                                            mappedTopScope.inheritedText
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxs(
+                                        Box,
+                                        {
+                                          component: "span",
+                                          sx: {
+                                            fontSize: "0.7rem",
+                                            color: "#475569",
+                                            bgcolor: "#F1F5F9",
+                                            border: "1px solid #E2E8F0",
+                                            borderRadius: "4px",
+                                            px: "6px",
+                                            py: "2px"
+                                          },
+                                          children: [
+                                            mappedTopScope.rulesCount,
+                                            " rules"
+                                          ]
+                                        }
+                                      ),
+                                      /* @__PURE__ */ jsxs(
+                                        Box,
+                                        {
+                                          component: "span",
+                                          sx: {
+                                            fontSize: "0.7rem",
+                                            color: "#475569",
+                                            bgcolor: "#F1F5F9",
+                                            border: "1px solid #E2E8F0",
+                                            borderRadius: "4px",
+                                            px: "6px",
+                                            py: "2px"
+                                          },
+                                          children: [
+                                            mappedTopScope.tiersCount,
+                                            " Tiers"
+                                          ]
+                                        }
+                                      )
+                                    ] })
+                                  ] })
+                                ]
+                              }
+                            )
+                          ) : !details.genre ? (
+                            /* Empty state when no genre is selected */
+                            /* @__PURE__ */ jsx(
+                              Box,
+                              {
+                                sx: {
+                                  display: "flex",
+                                  flexDirection: "column",
+                                  alignItems: "center",
+                                  justifyContent: "center",
+                                  opacity: 0.4,
+                                  py: 6,
+                                  gap: 1
+                                },
+                                children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.75rem", color: "#94A3B8" }, children: "Select a genre to load the matching scope" })
+                              }
+                            )
+                          ) : null }),
+                          details.genre && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "1rem", fontWeight: 600, mb: 0.5, color: "#19213D" }, children: [
+                              "Select an Existing Station from the \u201C",
+                              details.genre,
+                              "\u201D Scope",
+                              " ",
+                              /* @__PURE__ */ jsx(Typography, { component: "span", sx: { fontSize: "1rem", fontWeight: 400, color: "#64748B" }, children: "(Optional)" })
+                            ] }),
+                            /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "0.75rem", color: "#64748B", mb: "12px" }, children: [
+                              "Please select an existing station under the \u201C",
+                              details.genre,
+                              "\u201D category to copy its learnings."
+                            ] }),
+                            /* @__PURE__ */ jsxs("div", { className: styles.searchWrapper, style: { marginBottom: "12px" }, children: [
+                              /* @__PURE__ */ jsx(
+                                "input",
+                                {
+                                  type: "text",
+                                  value: scopeSearchText,
+                                  onChange: (e) => setScopeSearchText(e.target.value),
+                                  placeholder: "Search for station...",
+                                  className: styles.searchInput
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(Search, { className: styles.searchIcon, size: 16 })
+                            ] }),
+                            /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                              isSearchingScopes && /* @__PURE__ */ jsx(CardSkeletonAnalysisLoader, {}),
+                              !isSearchingScopes && otherScopes.length === 0 && debouncedScopeSearchText.trim() && /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "0.875rem", color: "#64748B", textAlign: "center", py: 4 }, children: [
+                                'No scopes found matching "',
+                                debouncedScopeSearchText,
+                                '".'
+                              ] }),
+                              !isSearchingScopes && otherScopes.map((temp) => /* @__PURE__ */ jsx(
+                                TemplateCard,
+                                {
+                                  ...temp,
+                                  isSelected: selectedTemplateId === temp.id,
+                                  onSelect: (id) => {
+                                    var _a2;
+                                    if (selectedTemplateId === id) {
+                                      setSelectedTemplateId((_a2 = mappedTopScope == null ? void 0 : mappedTopScope.id) != null ? _a2 : null);
+                                    } else {
+                                      setSelectedTemplateId(id);
+                                    }
+                                  }
+                                },
+                                temp.id
+                              ))
+                            ] })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              p: "12px 20px",
+              borderTop: "1px solid #F0F2F5",
+              display: "flex",
+              justifyContent: "flex-end",
+              gap: 2,
+              bgcolor: "#fff"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleClose,
+                  disabled: isLoading,
+                  style: {
+                    padding: "7px 10px",
+                    borderRadius: "6px",
+                    color: "#64748B",
+                    border: "1px solid #E2E8F0",
+                    backgroundColor: "#fff",
+                    cursor: "pointer",
+                    fontSize: "14px",
+                    fontWeight: 500
+                  },
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleOnboard,
+                  disabled: !isFormValid || isLoading,
+                  style: {
+                    padding: "7px 10px",
+                    borderRadius: "6px",
+                    border: "none",
+                    backgroundColor: isFormValid ? "#2563EB" : "#BFDBFE",
+                    color: "#fff",
+                    cursor: isFormValid && !isLoading ? "pointer" : "not-allowed",
+                    fontSize: "14px",
+                    fontWeight: 500,
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "7px"
+                  },
+                  children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(CircularProgress, { size: 16, color: "inherit" }),
+                    /* @__PURE__ */ jsx("span", { children: "Onboarding..." })
+                  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { children: "Onboard Station" }),
+                    /* @__PURE__ */ jsx(ArrowRight, { size: 16 })
+                  ] })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var StationOnboardModal$1 = StationOnboardModal;
+
+export { StationOnboardModal$1 as default };
 //# sourceMappingURL=StationOnboardModal.js.map