https://app-theflowops.web.app/assets/index-CW8P33Ut.js

1import{j as n}from"./chunk-maps-BwFKK2ai.js";import{r as o}from"./chunk-state-Be9ntrKz.js";import{t as P,i as M,M as C,q as I,A as R,g as te,U as ne,X as re}from"./hooks-CPHcGIez.js";import{T as L}from"./ToolbarButton-CZdfvAd4.js";import{L as se}from"./loader-circle-D4hLqWyB.js";import{A as oe,L as ae,C as ie,a as le}from"./lightbulb-YIguNRnr.js";import{C as ce}from"./chevron-right-9Z1vsMFh.js";import{S as ue}from"./Skeleton-DDwC3C4E.js";import{B as de}from"./Badge-hzp4ZmEm.js";import{S as fe}from"./image-2NpLdfbM.js";import{C as me}from"./Card-DwuJ2lW2.js";import"./chunk-dnd-C-C9ODMl.js";import"./index-CVxwXLTi.js";import"./createLucideIcon-Bo0fN4yp.js";import"./FullAppShell-C0W-pIWt.js";import"./404-BZkptLOD.js";import"./arrow-left-Ct-Dc9_A.js";const A="ohw:onboarding-slot-draft",B={name:"",what:"",who:"",goal:""};function he(){try{const e=window.localStorage.getItem(A);if(!e)return B;const t=JSON.parse(e);return{name:typeof t.name=="string"?t.name:"",what:typeof t.what=="string"?t.what:"",who:typeof t.who=="string"?t.who:"",goal:typeof t.goal=="string"?t.goal:""}}catch{return B}}function pe(e){try{Object.values(e).every(r=>r.trim().length===0)?window.localStorage.removeItem(A):window.localStorage.setItem(A,JSON.stringify(e))}catch{}}function F(){try{window.localStorage.removeItem(A)}catch{}}const ge={name:"business name",what:"what you offer",who:"who it's for",goal:"your goal"},xe={name:["Serenity Yoga","The Corner Bakery","Nord Consulting"],what:["mobile dog grooming","personal training","event planning"],who:["busy pet owners","young families","local businesses"],goal:["get more bookings","showcase our work","sell our products"]},be=24,we=["name"," offers ","what"," to ","who",", and our website aims to ","goal","."],_=["name","what","who","goal"];function ye({value:e,placeholder:t,onChange:r,onFocus:s,inputRef:d,onAdvance:f}){const p=`${Math.min(Math.max(e.length+1,t.length+1),be)}ch`;return n.jsx("input",{ref:d,type:"text",value:e,placeholder:t,onChange:i=>r(i.target.value),onFocus:s,onKeyDown:i=>{i.key==="Enter"&&(i.preventDefault(),f())},style:{width:p},className:`inline-block bg-transparent outline-none font-figtree text-sm leading-6 text-primary placeholder:text-primary/40 border-b border-dashed border-primary/40 focus:border-primary transition-colors mx-0.5 min-w-[4ch] max-w-full ${e?"text-left":"text-center"}`})}function ve({widthClassName:e="w-[min(880px,calc(100vw-3rem))]",onSubmit:t,submitting:r=!1}

1){const[s,d]=o.useState(he),[f,p]=o.useState("name"),[i,u]=o.useState(!1),m=o.useRef({}),w=(l,b)=>d(S=>({...S,[l]:b}));o.useEffect(()=>{pe(s)},[s]);const v=_.every(l=>s[l].trim().length>0),y=v&&!r&&!!t,j=()=>{y&&(t==null||t({name:s.name.trim(),what:s.what.trim(),who:s.who.trim(),goal:s.goal.trim()}))},h=l=>{var S;const b=_[_.indexOf(l)+1];b?(S=m.current[b])==null||S.focus():j()},T=l=>{w(f,l),u(!1),h(f)};return n.jsxs("div",{className:`flex flex-col items-center ${e}`,children:[n.jsx("div",{className:`flex gap-[3px] items-start w-full transition-all duration-200 ${i?"opacity-100 translate-y-0 mb-2":"opacity-0 pointer-events-none translate-y-1 h-0 overflow-hidden"}`,children:xe[f].map((l,b)=>n.jsx("button",{type:"button",onClick:()=>T(l),className:"bg-primary hover:bg-[#0672e0] drop-shadow-[0px_4px_2px_rgba(0,0,0,0.1)] flex items-center justify-center max-w-[220px] px-2.5 py-0.5 rounded-[32px] shrink-0 active:scale-[0.98] transition-all duration-150 cursor-pointer",children:n.jsx("p",{className:"font-figtree text-sm leading-6 text-white truncate",children:l})},`${f}-${b}`))}),n.jsxs("div",{className:"bg-white flex flex-col gap-2 p-3 relative rounded-[18px] w-full border border-solid border-[#E7E5E4]",style:{boxShadow:"0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1)"},children:[n.jsxs("div",{className:"flex items-start justify-between w-full gap-2",children:[n.jsx("p",{className:"flex-1 min-w-0 font-figtree text-sm leading-8 text-[#0c0a09] pl-1.5 py-1 ",children:we.map((l,b)=>typeof l=="string"&&!_.includes(l)?n.jsx("span",{children:l},b):n.jsx(ye,{value:s[l],placeholder:ge[l],onChange:S=>w(l,S),onFocus:()=>p(l),inputRef:S=>{m.current[l]=S},onAdvance:()=>h(l)},l))}),n.jsx("button",{type:"button",disabled:!y,onClick:j,"aria-label":"Build my site","aria-busy":r,className:`flex items-center justify-center rounded-full size-8 shrink-0 transition-colors duration-150 ${y?"bg-primary hover:bg-[#0672e0] cursor-pointer active:scale-[0.98]":r||v?"bg-primary/50 cursor-default":"bg-primary/30 cursor-default"}`,children:r?n.jsx(se,{className:"size-4 text-white animate-spin",strokeWidth:1.33,"aria-hidden":!0}):n.jsx(oe,{className:"size-4 text-white",strokeWidth:1.33})})]}),n.jsx("div",{className:"flex items-center w-full",children:n.jsxs("button",{type:"button",onClick:()=>u(l=>!l),"aria-pressed":i,"aria-label":"Toggle suggestions for the current field",className:`flex items-center justify-center gap-1 rounded-full px-2 py-1.5 transition-colors duration-150 cursor-pointer ${i?"bg-primary text-primary-foreground":"bg-[#eff6ff] text-primary hover:bg-[#e0efff]"}`,children:[n.jsx(ae,{className:"size-3 shrink-0",strokeWidth:1.5,"aria-hidden":!0}),n.jsx("span",{className:"font-figtree text-xs leading-4 font-medium whitespace-nowrap",children:"Suggestions"})]})})]})]})}const je=3,Se=5,z=`${je} / ${Se}`,H=380,G="w-[80vw] sm:w-[300px] lg:w-[380px]",Ne=50,Ee=2e3,Te=4,Y=8,E={h1:"Choose a template to start",subtitle:"Then describe your business — we'll build the rest for you.",headerButton:"Browse all templates",tilePrimary:"Use template",tileSecondary:"Preview"},U="(prefers-reduced-motion: reduce)";function Ce(){const[e,t]=o.useState(()=>typeof window<"u"&&window.matchMedia(U).matches);return o.useEffect(()=>{const r=window.matchMedia(U),s=()=>t(r.matches);return r.addEventListener("change",s),()=>r.removeEventListener("change",s)},[]),e}function V({onLeft:e,onRight:t}){const r="absolute top-1/2 z-10 hidden size-9 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-white text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 lg:flex";return n.jsxs(n.Fragment,{children:[n.jsx("button",{type:"button","aria-label":"Scroll templates left",onClick:e,className:`${r} left-3`,children:n.jsx(ie,{className:"size-5","aria-hidden":!0})}),n.jsx("button",{type:"button","aria-label":"Scroll templates right",onClick:t,className:`${r} right-3`,children:n.jsx(ce,{className:"size-5","aria-hidden":!0})})]})}function W({count:e=Y}){return n.jsx("div",{className:"flex gap-5 px-6","aria-hidden":!0,

1children:Array.from({length:e}).map((t,r)=>n.jsx("div",{className:`${G} relative shrink-0`,style:{aspectRatio:z},children:n.jsx(ue,{className:"absolute inset-0 rounded-xl"})},r))})}const Re=({src:e,className:t,loading:r,alt:s,imgClassName:d,lazy:f,srcSet:p,sizes:i,onLoad:u,onError:m,fit:w="cover"})=>{const v=w==="top"?"absolute left-0 top-0 block h-auto w-full":"absolute inset-0 h-full w-full object-cover";return r?n.jsx("div",{role:"status",className:P("relative w-full h-full animate-pulse",t),children:n.jsx("div",{className:"flex items-center justify-center w-full h-full bg-gray-300 rounded-lg dark:bg-gray-700",children:n.jsx(fe,{className:"h-10 w-10 text-gray-200"})})}):n.jsx("div",{className:P("relative w-full h-full",t),children:n.jsx("img",{src:e,alt:s,srcSet:p,sizes:i,loading:f?"lazy":void 0,onLoad:u,onError:m,className:P(v,"rounded-lg",d)})})},_e={background:"linear-gradient(to top, var(--card) 12%, transparent 100%)"};function Ae({template:e,index:t,eager:r,duplicate:s,disabled:d,choosing:f,onChoose:p,onPreview:i}){const u=e.site_name??e.subdomain,m=o.useMemo(()=>[e.marquee_preview_image??void 0,`/template-previews/${e.subdomain}.webp`,e.preview_image??void 0].filter(Boolean),[e.marquee_preview_image,e.subdomain,e.preview_image]),[w,v]=o.useState(0),y=m[w],j=()=>{d||p({template:e,index:t})};return n.jsx("div",{"data-tile":!0,className:`${G} group relative max-h-[calc(100dvh-13rem)] shrink-0 snap-start ${d?"pointer-events-none":""}`,style:{aspectRatio:z},children:n.jsxs(me,{role:"button","aria-label":`${E.tilePrimary}: ${u}`,"aria-hidden":s||void 0,tabIndex:s?-1:0,onClick:j,onKeyDown:h=>{(h.key==="Enter"||h.key===" ")&&(h.preventDefault(),j())},className:"relative h-full w-full cursor-pointer gap-0 overflow-hidden p-0 outline-none ring-primary/40 transition-shadow focus-visible:ring-2",children:[y?n.jsx(Re,{src:y,alt:u,fit:"top",className:"absolute inset-0",imgClassName:"rounded-none object-cover h-full object-top",lazy:!r,onLoad:h=>(h.currentTarget,void 0),onError:()=>v(h=>h+1)},y):n.jsx("div",{className:"absolute inset-0 bg-muted"}),n.jsx("div",{className:"pointer-events-none absolute inset-x-0 bottom-0 h-2/5",style:_e}),n.jsxs("div",{className:"absolute inset-x-0 bottom-0 flex flex-col gap-1.5 p-4",children:[e.vertical&&n.jsx(de,{className:"bg-background/80 px-2 py-0.5",children:n.jsx("span",{className:"font-figtree text-xs text-muted-foreground",children:e.vertical})}),n.jsx("p",{className:"font-figtree text-base font-semibold text-card-foreground",children:u})]}),n.jsxs("div",{className:"pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/50 opacity-0 transition-opacity duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100 [@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100",children:[n.jsx(L,{variant:"primary",tabIndex:-1,disabled:f,onClick:h=>{h.stopPropagation(),j()},children:E.tilePrimary}),n.jsx(L,{variant:"secondary","aria-label":`${E.tileSecondary} ${u} (opens in a new tab)`,"aria-hidden":s||void 0,tabIndex:s?-1:0,trailingIcon:n.jsx(le,{"aria-hidden":!0}),onClick:h=>{h.stopPropagation(),i({template:e,index:t})},children:E.tileSecondary})]})]})})}const ke=o.memo(Ae),O=20,Pe=6;function K(e,t){return e.templates.map((r,s)=>n.jsx(ke,{template:r,index:s,eager:!t&&s<Te,duplicate:t,disabled:e.disabled,choosing:e.choosingSubdomain===r.subdomain,onChoose:e.onChoose,onPreview:e.onPreview},`${t?"dup-":""}${r.id}`))}function Ie(e){const t=o.useRef(null),r=s=>{var d;return(d=t.current)==null?void 0:d.scrollBy({left:s*(H+O),behavior:"smooth"})};return n.jsxs("div",{className:"relative w-full",children:[n.jsx("div",{ref:t,className:"scrollbar-hide flex snap-x snap-mandatory gap-5 overflow-x-auto scroll-smooth px-6",children:K(e,!1)}),n.jsx(V,{onLeft:()=>r(-1),onRight:()=>r(1)})]})}function Le(e){const t=o.useRef(null),r=o.useRef(null),s=o.useRef(0),[d,f]=o.useState(0),[p,i]=o.useState(2),u=o.useRef(0),m=o.useRef(!1),w=o.useRef(0),v=o.useRef(e.disabled),y=o.useRef(null),j=o.useRef(!1),h=o.useRef(!1);v.current=e.disabled;const T=c=>{const a=u.current||1;return(c%a+a)%a},l=c=>{s.current=c,f(c)},b=()=>{m.current=!0},S=()=>{m.current=!1,w.current=0},k=()=>{m.current&&(m.current=!1,w.current=performance.now()+Ee)};o.useLayoutEffect(()=>{const c=()=>{const g=r.current,x=t.current;if(!g||!x)return;const N=g.scrollWidth+O;u.current=N,i(N>0?Math.max(2,Math.ceil(x.clientWidth/N)+1):2)};c();const a=new ResizeObserver(c);return r.current&&a.observe(r.current),t.current&&a.observe(t.current),()=>a.disconnect()},[e.templates.length]),o.useEffect(()=>{let c=0,a=0;const g=x=>{a||(a=x);const N=Math.min((x-a)/1e3,.05);a=x,u.current>0&&!m.current&&!v.current&&x>=w.current&&l(T(s.current+Ne*N)),c=requestAnimationFrame(g)};return c=requestAnimationFrame(g),()=>cancelAnimationFrame(c)},[]);const J=c=>{c.pointerType==="mouse"&&c.button!==0||(h.current=!0,y.current={startX:c.clientX,startOffset:s.current,active:!1})},Q=c=>{var x,N;const a=y.current;if(!a)return;const g=c.clientX-a.startX;!a.active&&Math.abs(g)<Pe||(a.active||(a.active=!0,b(),(N=(x=t.current)==null?void 0:x.setPointerCapture)==null||N.call(x,c.pointerId)),l(T(a.startOffset-g)))},D=c=>{var g,x;const a=y.current;h.current=!1,y.current=null,a!=null&&a.active&&(j.current=!0,(x=(g=t.current)==null?void 0:g.releasePointerCapture)==null||x.call(g,c.pointerId),k())},Z=c=>{j.current&&(c.stopPropagation(),c.preventDefault(),j.current=!1)},ee=c=>{if(b(),h.current)return;const a=r.current,g=c.target.closest("[data-tile]");a&&g&&a.contains(g)&&l(T(g.offsetLeft))},$=c=>{b(),l(T(s.current+c*(H+O))),k()};return n.jsxs("div",{ref:t,className:"relative w-full overflow-hidden",onMouseEnter:b,onMouseLeave:S,onFocusCapture:ee,onBlurCapture:k,onPointerDown:J,onPointerMove:Q,onPointerUp:D,onPointerCancel:D,onClickCapture:Z,children:[n.jsx("div",{className:"flex w-max touch-pan-y gap-5 will-change-transform",style:{transform:`translateX(${-d}px)`},children:Array.from({length:p}).map((c,a)=>n.jsx("div",{ref:a===0?r:void 0,"aria-hidden":a>0,className:"flex gap-5",children:K(e,a>0)},a))}),n.jsx(V,{onLeft:()=>$(-1),onRight:()=>$(1)})]})}function Oe(e){const t=Ce();return e.loading?n.jsx(W,{}):e.templates.length===0?e.error?n.jsx("p",{className:"w-full px-6 text-center font-figtree text-sm text-muted-foreground",children:"We couldn't load templates just now. Use “Browse all templates” above, or describe your business below."}):n.jsx(W,{}):t?n.jsx(Ie,{...e}):n.jsx(Le,{...e})}const Me="ohhwells.site";function De(e){return`https://${e.custom_domain??`${e.subdomain}.${Me}`}`}

1function X(e,t){const r=I(R.CANVAS_EDITOR,{subdomain:e}),s=t==null?void 0:t.trim();return s?`${r}?prompt=${encodeURIComponent(s)}`:r}function $e(){const e=M(),[t,r]=o.useState(null),s=o.useRef(!1),d=o.useCallback(async(p,i)=>{const{template:u}=p;if(!s.current){s.current=!0,r(u.subdomain);try{const{data:m}=await C.post(`/api/user/sites/${u.subdomain}/choose`,{fresh:!0});e(X(m.subdomain,i))}catch{e(X(u.subdomain,i))}finally{s.current=!1,r(null)}}},[e]),f=o.useCallback(p=>{window.open(De(p.template),"_blank","noopener")},[]);return{choosing:t,chooseTemplate:d,previewTemplate:f}}const Be=ne.STARTER_TEMPLATE;function Fe(){const e=M(),{show:t}=te(),[r,s]=o.useState(!1),d=o.useRef(!1),f=o.useCallback(i=>{t({title:i,toastType:"warning",appearance:"sonner",position:"top-right-custom"})},[t]),p=o.useCallback(async i=>{if(d.current)return;d.current=!0,s(!0);let u=null;try{const{data:m}=await C.post(`/api/user/sites/${Be}/choose`,{fresh:!0,siteName:i.name});u=m.subdomain,await C.patch(`/api/user/sites/${u}/brand-name`,{businessName:i.name}),await C.post(`/api/user/sites/${u}/ai/generate-homepage`,{name:i.name,what:i.what,who:i.who,goal:i.goal}),F(),e(I(R.CANVAS_EDITOR,{subdomain:u}))}catch{u?(f("We couldn't generate your homepage, but your site was created."),F(),e(I(R.CANVAS_EDITOR,{subdomain:u}))):f("We couldn't create your site. Please try again.")}finally{d.current=!1,s(!1)}},[e,f]);return{generating:r,generateHomepage:p}}const Ue=new Set(["ohhwells-starter"]),We={"morning-club":"Community",meridien:"Financial advisory","coach-compass":"Coaching","professional-services":"Professional services","local-fnb":"Café & dining","serene-oasis":"Spa","yoga-studio":"Yoga","wellness-space":"Wellness"};function q(e){const t=e?Date.parse(e):NaN;return Number.isNaN(t)?-1/0:t}function Xe(e,t){const r=q(e.created_at),s=q(t.created_at);return r===s?0:r>s?-1:1}function qe(e){return e.filter(t=>t.is_published&&t.status==="ACTIVE"&&!Ue.has(t.subdomain)).sort(Xe).slice(0,Y).map(t=>({...t,vertical:We[t.subdomain]}))}async function ze(){const e=await C.get("/api/user/sites/templates");return Array.isArray(e.data)?e.data:[]}function He(){const e=re({queryKey:["onboarding","templateSites"],queryFn:ze,retry:!1}),t=e.data?qe(e.data):[];return{...e,templates:t}}const ut=()=>{const e=M(),{templates:t,isPending:r,isError:s}=He(),{choosing:d,chooseTemplate:f,previewTemplate:p}=$e(),{generating:i,generateHomepage:u}=Fe(),m=d!==null||i,w=o.useCallback(v=>f(v),[f]);return n.jsxs("div",{className:"fixed inset-0 flex flex-col bg-background",children:[n.jsxs("header",{className:"flex shrink-0 items-start justify-between gap-4 border-b border-border px-6 py-4 lg:px-10",children:[n.jsxs("div",{className:"min-w-0",children:[n.jsx("h1",{className:"font-charlie-display text-2xl font-bold text-foreground lg:text-3xl",children:E.h1}),n.jsx("p",{className:"mt-1 font-figtree text-sm text-muted-foreground lg:text-base",children:E.subtitle})]}),n.jsx("div",{className:"hidden shrink-0 sm:block",children:n.jsx(L,{variant:"secondary",onClick:()=>e(R.MY_SITE_TEMPLATE,{state:{type:"HOMEPAGE",backTo:R.ONBOARDING_START}}),children:E.headerButton})})]}),n.jsx("main",{className:"flex min-h-0 flex-1 items-center overflow-hidden",children:n.jsx(Oe,{templates:t,loading:r,error:s,disabled:m,choosingSubdomain:d,onChoose:w,onPreview:p})}),n.jsx("footer",{className:"flex shrink-0 flex-col items-center border-t border-border px-6 py-4",children:n.jsx(ve,{onSubmit:u,submitting:i})})]})};export{ut as default};