https://dashboard.orderlyne.app/assets/ThemeLibrary.DvWp1EGP.js

1import{r as h,j as e,fL as J,E as U,V as X,u as $,aZ as E,aA as F,aB as M,aC as P,aD as R,gu as O,O as ee,aT as te,by as re,s as ae,c as z,bS as w,L as se,gm as ne,gn as oe,z as ie}from"./index.BZs0H5f9.js";import{w as le,c as de,a as ce,d as me,r as xe,g as ge}from"./storefrontPreviewUrl.Dlv5dttU.js";import{g as q}from"./index.CUN2jeL6.js";import{P as ue}from"./palette.BOgjyrU-.js";import{M as he}from"./monitor.CEW3CUYV.js";function L({src:r,viewportWidth:a,title:s,className:n}){const o=h.useRef(null),[l,g]=h.useState({w:0,h:0});h.useEffect(()=>{const m=o.current;if(!m||typeof ResizeObserver>"u")return;const u=new ResizeObserver(y=>{const x=y[0]?.contentRect;x&&g({w:x.width,h:x.height})});return u.observe(m),()=>u.disconnect()},[]);const d=l.w>0?l.w/a:0;return e.jsx("div",{ref:o,className:n,children:d>0&&e.jsx("iframe",{src:r,title:s,loading:"lazy",scrolling:"no",tabIndex:-1,"aria-hidden":"true",className:"absolute left-0 top-0 border-0 pointer-events-none",style:{width:`${a}px`,height:`${l.h/d}px`,transform:`scale(${d})`,transformOrigin:"top left"}})})}function ye({theme:r,storefrontUrl:a,onCustomize:s,onRename:n}){const[o,l]=h.useState(!1),[g,d]=h.useState(r.name),m=h.useRef(null),u=()=>{d(r.name),l(!0),setTimeout(()=>m.current?.focus(),0)},y=()=>{const c=g.trim();c&&c!==r.name?n(r.id,c):d(r.name),l(!1)},x=c=>{c.key==="Enter"?y():c.key==="Escape"&&(d(r.name),l(!1))};return e.jsx("div",{className:"bg-white dark:bg-gray-900 rounded-lg border border-gray-200/80 dark:border-gray-800 border-l-[3px] border-l-emerald-500",children:e.jsxs("div",{className:"px-4 sm:px-5 py-4",children:[e.jsx("div",{className:"flex items-center justify-between mb-4",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"inline-flex items-center gap-1.5 text-xs font-medium text-gray-600 dark:text-gray-400",children:[e.jsx("span",{className:"inline-block h-1.5 w-1.5 rounded-full bg-emerald-500 flex-shrink-0"}),"Active"]}),o?e.jsx("input",{ref:m,type:"text",value:g,onChange:c=>d(c.target.value),onBlur:y,onKeyDown:x,className:"text-sm font-semibold text-gray-900 dark:text-gray-100 bg-transparent border-b border-gray-900 dark:border-gray-100 outline-none px-1"}):e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"inline-block h-2 w-2 rounded-full bg-emerald-500 flex-shrink-0"}),e.jsx("h2",{className:"text-sm font-semibold text-gray-900 dark:text-gray-100",children:r.name}),e.jsx("button",{onClick:u,className:"h-7 w-7 rounded-md flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors","aria-label":"Rename theme",children:e.jsx(J,{className:"h-3.5 w-3.5"})})]})]})}),a&&e.jsxs("div",{className:"mb-4 flex flex-col items-center gap-4 lg:flex-row lg:items-stretch",children:[e.jsxs("div",{className:"hidden min-w-0 flex-1 flex-col lg:flex",children:[e.jsx(L,{src:a,viewportWidth:1280,title:"Desktop preview",className:"relative h-[380px] w-full overflow-hidden rounded-lg border border-gray-100 bg-white dark:border-gray-800"}),e.jsx("span",{className:"mt-1.5 text-center text-[11px] text-gray-400",children:"Desktop"})]}),e.jsxs("div",{className:"flex shrink-0 flex-col",children:[e.jsx(L,{src:a,viewportWidth:390,title:"Mobile preview",className:"relative h-[380px] w-[200px] overflow-hidden rounded-[1.5rem] border-[3px] border-gray-800 bg-white"}),e.jsx("span",{className:"mt-1.5 text-center text-[11px] text-gray-400",children:"Mobile"})]})]}),e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx("button",{onClick:()=>s(r.id),className:"bg-gray-900 hover:bg-gray-800 text-white dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 px-3 py-1.5 rounded-md text-xs font-medium transition-colors inline-flex items-center gap-1.5",children:"Customize"}),a&&e.jsxs("a",{href:a,target:"_blank",rel:"noopener noreferrer",className:"text-gray-500 hover:text-gray-900 dark:hover:text-gray-100 text-xs font-medium px-2 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors inline-flex items-center gap-1",children:["View store",e.jsx(U,{className:"h-3.5 w-3.5"})]})]})]})})}function be({theme:r,onCustomize:a,onActivate:s,onDelete:n}){return e.jsx("div",{className:"bg-white dark:bg-gray-900 rounded-lg border border-gray-200/80 dark:border-gray-800",children:e.jsxs("div",{className:"px-4 sm:px-5 py-4",children:[e.jsx("h3",{className:"text-sm font-medium text-gray-900 dark:text-gray-100 mb-3",children:r.name}),e.jsx("div",{className:"aspect-[16/10] rounded-lg mb-4 overflow-hidden bg-gray-100 dark:bg-gray-800",children:e.jsx("img",{src:q(r.theme_key),alt:`${r.name} preview`,className:"w-full h-full object-cover object-top",loading:"lazy"})}),e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex gap-2",children:[e.jsx("button",{className:"flex-1 h-8 rounded-md text-xs font-medium border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center justify-center gap-1.5 px-3",onClick:()=>a(r.id),children:"Customize"}),e.jsx("button",{className:"flex-1 h-8 rounded-md text-xs font-medium bg-gray-900 hover:bg-gray-800 text-white dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 transition-colors inline-flex items-center justify-center gap-1.5 px-3",onClick:()=>s(r.id),children:"Activate"})]}),e.jsxs("button",{className:"w-full text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950 text-xs font-medium px-2 py-1 rounded-md transition-colors inline-flex items-center justify-center gap-1",onClick:()=>n(r.id),children:[e.jsx(X,{className:"h-3.5 w-3.5"}),"Delete"]})]})]})})}function pe({themeKey:r,displayName:a,subtitle:s,isSaved:n,isActive:o,canAdd:l,lockReason:g,requiredPlan:d="Starter",onPreview:m,onAdd:u}){const y=$(),x=g||(l===!1?"slot_full":null),c=()=>o?e.jsx("button",{disabled:!0,className:"flex-1 h-8 rounded-md text-xs font-medium text-gray-400 inline-flex items-center justify-center gap-1.5 px-3 opacity-50 cursor-not-allowed",children:"Active"}):n?e.jsx("button",{disabled:!0,className:"flex-1 h-8 rounded-md text-xs font-medium text-gray-400 inline-flex items-center justify-center gap-1.5 px-3 opacity-50 cursor-not-allowed",children:"Added"}):x==="plan_locked"?e.jsx(F,{delayDuration:100,children:e.jsxs(M,{children:[e.jsx(P,{asChild:!0,children:e.jsxs("button",{type:"button",onClick:()=>y("/settings?tab=subscription"),className:"flex-1 h-8 rounded-md text-xs font-medium border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 inline-flex items-center justify-center gap-1.5 px-3 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors",children:[e.jsx(E,{className:"h-3 w-3"}),"Upgrade"]})}),e.jsx(R,{side:"top",align:"center",className:"max-w-[220px] text-center",children:e.jsxs("p",{children:["Available on ",e.jsx("strong",{children:d})," and above. Click to upgrade."]})})]})}):x==="slot_full"?e.jsx(F,{delayDuration:100,children:e.jsxs(M,{children:[e.jsx(P,{type:"button","aria-disabled":"true",className:"flex-1 h-8 rounded-md text-xs font-medium border border-gray-200 dark:border-gray-700 text-gray-400 inline-flex items-center justify-center px-3 opacity-50 cursor-not-allowed",children:"Add"}),e.jsx(R,{side:"top",align:"center",className:"max-w-[220px] text-center",children:e.jsx("p",{children:"You've reached your theme slot limit. Delete a saved theme to add this one."})})]})}):e.jsx("button",{className:"flex-1 h-8 rounded-md text-xs font-medium border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center justify-center gap-1.5 px-3",onClick:()=>u(r,a),children:"Add"}),f=x==="plan_locked";return e.jsx("div",{className:"bg-white dark:bg-gray-900 rounded-lg border border-gray-200/80 dark:border-gray-800",children:e.jsxs("div",{className:"px-4 sm:px-5 py-4",children:[e.jsxs("div",{className:"relative aspect-[16/10] rounded-lg mb-3 overflow-hidden bg-gray-100 dark:bg-gray-800",children:[e.jsx("img",{src:q(r),alt:`${a} theme preview`,className:"w-full h-full object-cover object-top",loading:"lazy"}),f&&e.jsxs("div",{className:"absolute top-2 right-2 inline-flex items-center gap-1 rounded-md bg-white/90 dark:bg-gray-900/90 backdrop-blur-sm px-1.5 py-0.5 text-[11px] font-medium text-gray-600 dark:text-gray-400 border border-gray-200/80 dark:border-gray-700",children:[e.jsx(E,{className:"h-2.5 w-2.5"}),d,"+"]})]}),e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx("h3",{className:"text-sm font-medium text-gray-900 dark:text-gray-100",children:a}),o&&e.jsx("span",{className:"inline-block h-2 w-2 rounded-full bg-emerald-500 flex-shrink-0"}),n&&!o&&e.jsx("span",{className:"text-[11px] text-gray-400",children:"Saved"})]}),s&&e.jsx("p",{className:"text-xs text-gray-500 mt-0.5",children:s}),e.jsxs("div",{className:"flex gap-2 mt-3",children:[e.jsx("button",{className:"flex-1 h-8 rounded-md text-xs font-medium border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors inline-flex items-center justify-center gap-1.5 px-3",onClick:()=>m(r),children:"Preview"}),c()]})]})})}function fe({open:r,onOpenChange:a,themeName:s,currentActiveName:n,onConfirm:o,loading:l}){return e.jsx(O,{open:r,onOpenChange:a,title:`Activate ${s}?`,description:`Your store will switch to this theme. Your current theme (${n}) will be saved and can be restored anytime.`,confirmText:"Activate",onConfirm:o,loading:l})}function ve({open:r,onOpenChange:a,themeName:s,onConfirm:n,loading:o}){return e.jsx(O,{open:r,onOpenChange:a,title:`Delete ${s}?`,description:"This cannot be undone. Your customizations for this theme will be permanently lost.",confirmText:"Delete",onConfirm:n,loading:o,destructive:!0})}const N=[{key:"default",name:"Default",subtitle:"Niche-neutral starter — fits any store",color:"#475569",mode:"light"},{key:"daisy",name:"Daisy",subtitle:"Clean skincare, wellness",color:"#4a7c59",mode:"light"}

1,{key:"reel",name:"Reel",subtitle:"K-fashion, co-ords, aesthetic",color:"#c4a0a0",mode:"light"},{key:"muse",name:"Muse",subtitle:"Silver/oxidised jewellery",color:"#5c4a3a",mode:"light"},{key:"drop",name:"Drop",subtitle:"Thrift, Y2K, limited drops",color:"#8b2e2e",mode:"light"},{key:"crumb",name:"Crumb",subtitle:"Home bakers, chocolates, hampers",color:"#c67d4a",mode:"light"},{key:"studio",name:"Studio",subtitle:"Candles, resin, crochet, stationery",color:"#3d5a3a",mode:"light"},{key:"lullaby",name:"Lullaby",subtitle:"Mom/baby, kids, personalised gifts",color:"#7ba7c4",mode:"light"},{key:"utsav",name:"Utsav",subtitle:"Sarees, ethnic, bridal, festive",color:"#7a1f1f",mode:"light"},{key:"nook",name:"Nook",subtitle:"Posters, plants, room decor",color:"#1f5c5c",mode:"light"},{key:"hype",name:"Hype",subtitle:"Streetwear, anime merch, drops",color:"#1a1a1a",mode:"dark"},{key:"ember",name:"Ember",subtitle:"Fitness, supplements, performance",color:"#FF5722",mode:"dark"},{key:"phantom",name:"Phantom",subtitle:"Tech, electronics, gadgets",color:"#00D4FF",mode:"dark"},{key:"velvet",name:"Velvet",subtitle:"Premium beauty, luxury",color:"#C9A27A",mode:"dark"},{key:"slate",name:"Slate",subtitle:"Stationery, journals, paper goods",color:"#C4A57A",mode:"dark"}],ke=[{value:"all",label:"All"},{value:"light",label:"Light"},{value:"dark",label:"Dark"}],je=new Set(["daisy","reel","crumb"]),we=r=>r==="default"?"Free":je.has(r)?"Starter":"Growth";function Ae(){const r=$(),{toast:a}=ee(),s=te(),[n,o]=h.useState({open:!1,theme:null}),[l,g]=h.useState({open:!1,theme:null}),[d,m]=h.useState(!1),[u,y]=h.useState("all"),x=u==="all"?N:N.filter(t=>t.mode===u),c=re("(max-width: 1023px)"),f=ae.getSelectedStoreId(),{data:T}=z({queryKey:["current-store",f],queryFn:()=>ie.getCurrentStore(),staleTime:1e3*60*5}),v=T?.current_store||T?.available_stores?.find(t=>t.id===f),K=(()=>{if(!v?.slug)return null;const i=window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"?`http://localhost:3001?store=${v.slug}`:`https://${v.slug}.orderlyne.in`;return le(i,v)})(),{data:k,isLoading:I}=z({queryKey:["themes"],queryFn:ge,staleTime:1e3*60*2}),j=k?.themes||[],Q=k?.can_add_theme??!0,Y=k?.themes_count||0,b=j.find(t=>t.is_active),C=j.filter(t=>!t.is_active),B=j.map(t=>t.theme_key),H=new Set(k?.allowed_themes??N.map(t=>t.key)),V=w({mutationFn:de,onSuccess:t=>{s.invalidateQueries({queryKey:["themes"]});const i=t?.id||t?.data?.id;i&&r(`/storefront/themes/v2/${i}`),a({title:"Theme added",variant:"success"})},onError:t=>{a({title:"Failed to add theme",description:t?.response?.data?.error||"Try again",variant:"destructive"})}}),S=w({mutationFn:t=>ce(t),onSuccess:()=>{s.invalidateQueries({queryKey:["themes"]}),o({open:!1,theme:null}),a({title:"Theme activated",description:"Your store has been updated",variant:"success"})},onError:t=>{a({title:"Failed to activate",description:t?.response?.data?.error,variant:"destructive"})}}),D=w({mutationFn:t=>me(t),onSuccess:()=>{s.invalidateQueries({queryKey:["themes"]}),g({open:!1,theme:null}),a({title:"Theme deleted",variant:"success"})},onError:t=>{a({title:"Cannot delete theme",description:t?.response?.data?.error,variant:"destructive"})}}),G=w({mutationFn:({id:t,name:i})=>xe(t,i),onSuccess:()=>{s.invalidateQueries({queryKey:["themes"]})}}),A=t=>{if(c){m(!0);return}r(`/storefront/themes/v2/${t}`)},W=t=>{const p=window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"?`http://localhost:3001/?store=${t}-demo`:`https://${t}-demo.orderlyne.in`;window.open(p,"_blank","noopener,noreferrer")},Z=(t,i)=>{V.mutate({theme_key:t,name:i})};return e.jsx("div",{className:"min-h-screen bg-[#f6f6f7] dark:bg-gray-950 p-3 sm:p-6",children:e.jsxs("div",{className:"max-w-[1400px] mx-auto space-y-5",children:[e.jsx("div",{className:"flex items-end justify-between gap-4",children:e.jsxs("div",{children:[e.jsx("h1",{className:"font-heading text-2xl sm:text-3xl tracking-tight text-gray-900 dark:text-gray-100",children:"Themes"}),e.jsx("p",{className:"text-sm text-gray-500 dark:text-gray-400 mt-0.5 hidden sm:block",children:"Customize your store's look and feel"})]})}),e.jsxs("section",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(ue,{className:"h-3.5 w-3.5 text-gray-400"}),e.jsx("h2",{className:"text-[11px] font-semibold text-gray-400 uppercase tracking-wider",children:"Your Themes"}),e.jsxs("span",{className:"text-[11px] text-gray-400 ml-1",children:["(",Y,"/3)"]})]}),I?e.jsx("div",{className:"bg-white dark:bg-gray-900 rounded-lg border border-gray-200/80 dark:border-gray-800",children:e.jsx("div",{className:"px-4 sm:px-5 py-4",children:e.jsx("div",{className:"h-[320px] rounded-lg bg-gray-100 dark:bg-gray-800 animate-pulse"})})}):e.jsxs("div",{className:"space-y-3",children:[b&&e.jsx(ye,{theme:b,storefrontUrl:K,onCustomize:()=>A(b.id),onRename:(t,i)=>G.mutate({id:t,name:i})}),C.length>0&&e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4",children:C.map(t=>e.jsx(be,{theme:t,onCustomize:()=>A(t.id),onActivate:()=>o({open:!0,theme:t}),onDelete:()=>g({open:!0,theme:t})},t.id))})]})]}),e.jsxs("section",{className:"space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between gap-3 flex-wrap",children:[e.jsxs("div",{className:"flex items-center gap-1.5",children:[e.jsx(se,{className:"h-3.5 w-3.5 text-gray-400"}),e.jsx("h2",{className:"text-[11px] font-semibold text-gray-400 uppercase tracking-wider",children:"More Themes"})]}),e.jsx("div",{role:"tablist","aria-label":"Filter themes by appearance",className:"inline-flex items-center gap-0.5 p-1 rounded-lg bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 shadow-sm",children:ke.map(t=>{const i=u===t.value;return e.jsx("button",{type:"button",role:"tab","aria-selected":i,onClick:()=>y(t.value),className:`px-3 sm:px-4 h-7 sm:h-8 rounded-md text-xs sm:text-sm font-medium transition-colors ${i?"bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900":"text-gray-600 hover:text-gray-900 hover:bg-gray-50 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-gray-800"}`,children:t.label},t.value)})})]}),e.jsx("div",{className:"grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4",children:x.map(t=>{const i=H.has(t.key);let p=null;return i?Q||(p="slot_full"):p="plan_locked",e.jsx(pe,{themeKey:t.key,displayName:t.name,subtitle:t.subtitle,color:t.color,isSaved:B.includes(t.key)&&!j.find(_=>_.theme_key===t.key&&_.is_active),isActive:b?.theme_key===t.key,lockReason:p,requiredPlan:we(t.key),onPreview:()=>W(t.key),onAdd:()=>Z(t.key,t.name)}

1,t.key)})})]}),e.jsx(fe,{open:n.open,onOpenChange:t=>!t&&o({open:!1,theme:null}),themeName:n.theme?.name,currentActiveName:b?.name,onConfirm:()=>S.mutate(n.theme?.id),loading:S.isPending}),e.jsx(ve,{open:l.open,onOpenChange:t=>!t&&g({open:!1,theme:null}),themeName:l.theme?.name,onConfirm:()=>D.mutate(l.theme?.id),loading:D.isPending}),e.jsxs(ne,{open:d,onOpenChange:m,title:"Open on a desktop",description:"The theme editor is available on desktop only.",children:[e.jsxs("div",{className:"flex flex-col items-center gap-3 text-center",children:[e.jsx("div",{className:"h-12 w-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center",children:e.jsx(he,{className:"h-6 w-6 text-gray-500 dark:text-gray-400"})}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:"Customizing a theme needs more room than a phone or tablet can give. Switch to a desktop or laptop to continue editing."})]}),e.jsx(oe,{children:e.jsx("button",{className:"w-full h-9 rounded-md text-sm font-medium bg-gray-900 hover:bg-gray-800 text-white dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 transition-colors",onClick:()=>m(!1),children:"Got it"})})]})]})})}export{Ae as ThemeLibrary,Ae as default};