https://withhark.com/assets/Preview-C-R6inRp.js

1import{u as we,r as a,a as x,j as e,L as i,H as k,as as ve,at as Ne,au as ye,av as z,aw as ke,ax as Se,ay as Ce,a7 as Te,a8 as Pe,a9 as B,aa as S,ab as _e,az as Fe,ac as C,ad as Ee,Z as T,_ as P,$ as _,a0 as F,a1 as E,T as Le,U as Re,V as He,W as De,X as We}from"./index-5_38nf4v.js";import{T as Me,a as $e,b as G,c as V,Q as Ae}from"./tabs-DA-zx4Nd.js";const K=[{id:"classic",label:"Classic"},{id:"bw",label:"Black + White"},{id:"forest",label:"Forest Green"},{id:"lime",label:"Brand Green"}],J=["What should we carry?","What should we serve?","What do you want to see?","What should we stock?","What are you looking for?"],X="inline-flex min-h-9 cursor-pointer items-center rounded px-2 text-xs font-medium text-neutral-500 no-underline transition-all duration-200 hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900";function qe(){const{token:l}=we(),[n,Y]=a.useState(null),[m,L]=a.useState([]),[c,Z]=a.useState("suggestion_count"),[ee,te]=a.useState(!0),[se,ae]=a.useState(!1);a.useEffect(()=>{l&&Promise.all([x.getPreview(l),x.getPreviewSuggestions(l)]).then(([t,s])=>{document.title=`${t.name} — Hark`,Y(t),L(s.data)}).catch(()=>ae(!0)).finally(()=>te(!1))},[l]);const o=a.useMemo(()=>{const t=[...m];return c==="suggestion_count"?t.sort((s,r)=>r.suggestion_count-s.suggestion_count):t.sort((s,r)=>new Date(r.last_suggested_at).getTime()-new Date(s.last_suggested_at).getTime()),t},[m,c]),ne=a.useMemo(()=>m.reduce((t,s)=>t+s.suggestion_count,0),[m]),le=a.useMemo(()=>{if(o.length===0||c!=="suggestion_count")return null;const t=o[0];return t.suggestion_count>=3?t:null},[o,c]),[re,p]=a.useState(!1),[g,R]=a.useState(!1),H=`<script src="https://withhark.com/widget.js" data-store-id="${(n==null?void 0:n.id)??""}"><\/script>`,[d,f]=a.useState(!1),ie=n!=null&&n.slug?`https://withhark.com/s/${n.slug}`:null,[h,oe]=a.useState(J[0]),[D,ce]=a.useState(null),[de,b]=a.useState(!1),[j,ue]=a.useState({}),[xe,W]=a.useState(!1),[,me]=a.useState();a.useEffect(()=>{!d||!l||(b(!0),x.getPreviewQrCode(l).then(({blob:t})=>{const s=new FileReader;s.onloadend=()=>{ce(s.result),b(!1)},s.readAsDataURL(t)}).catch(()=>b(!1)))},[d,l]),a.useEffect(()=>{if(!d||!l)return;W(!0),Object.values(j).forEach(s=>URL.revokeObjectURL(s));let t={};return Promise.all(K.map(async s=>{const r=await x.getPreviewSticker(l,h,s.id);return{id:s.id,url:URL.createObjectURL(r)}})).then(s=>{const r={};for(const u of s)r[u.id]=u.url;t=r,ue(r)}).catch(()=>{}).finally(()=>W(!1)),()=>{Object.values(t).forEach(s=>URL.revokeObjectURL(s))}},[d,l,h]);async function he(){await navigator.clipboard.writeText(H),R(!0),setTimeout(()=>R(!1),2e3)}const w=a.useRef(),[pe,v]=a.useState(!1),[N,M]=a.useState(""),[$,A]=a.useState(""),[U,O]=a.useState(""),[ge,y]=a.useState(!1),[Q,q]=a.useState(!1);function fe(){M(""),A(""),O(""),y(!1),v(!0)}async function be(){const t=N.trim();if(!(!t||!n)){q(!0);try{const s={store_id:n.id,product_name:t},r=$.trim();r&&(s.customer_email=r);const u=U.trim();if(u&&(s.customer_phone=u),(await fetch("/api/suggestions",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s)})).ok){if(y(!0),l){const je=await x.getPreviewSuggestions(l);L(je.data)}w.current=setTimeout(()=>v(!1),3e3)}}catch{}finally{q(!1)}}}const I=n!=null&&n.slug?`${window.location.origin}/s/${n.slug}`:null;return ee?e.jsx("div",{className:"flex min-h-screen items-center justify-center bg-neutral-50",children:e.jsx("p",{className:"text-sm text-neutral-400",children:"Loading..."})}):se||!n?e.jsxs("div",{className:"flex min-h-screen flex-col items-center justify-center gap-4 bg-neutral-50",children:[e.jsx("p",{className:"text-sm text-neutral-500",children:"This preview link is no longer available."}),e.jsx(i,{to:"/",className:"text-sm font-medium text-neutral-900 underline",children:"Go to Hark"})]}):e.jsxs("div",{className:"flex min-h-screen flex-col bg-neutral-50",children:[e.jsxs("header",{className:"sticky top-0 z-10 flex items-center justify-between gap-2 border-b border-neutral-200 bg-white/80 px-4 py-3 backdrop-blur-sm sm:px-6",children:[e.jsxs("div",{className:"flex min-w-0 items-center gap-2 sm:gap-3",children:[e.jsxs(i,{to:"/",className:"font-display logo-gradient inline-flex shrink-0 items-center gap-1 text-sm font-extrabold no-underline","aria-label":"Hark home",children:[e.jsx(k,{size:12,className:"text-neutral-900"}),"Hark"]}),e.jsx("span",{className:"hidden text-neutral-300 sm:inline",children:"/"}),e.jsx("span",{className:"hidden truncate text-sm font-medium text-neutral-600 sm:inline",children:n.name}),e.jsx("span",{className:"rounded-full bg-amber-100 px-2.5 py-1 text-[10px] font-bold tracking-wider text-amber-800 uppercase",children:"Preview"})]}),e.jsxs("nav",{className:"flex items-center gap-2 sm:gap-4","aria-label":"Preview actions",children:[e.jsxs("div",{className:"hidden items-center gap-2 sm:flex sm:gap-4",children:[e.jsx("button",{onClick:()=>f(!0),className:X,children:"QR code"}),e.jsx("button",{onClick:()=>p(!0),className:X,children:"Embed code"})]}),e.jsxs(ve,{modal:!1,children:[e.jsx(Ne,{asChild:!0,children:e.jsx("button",{className:"inline-flex min-h-9 items-center justify-center rounded px-2 text-neutral-500 transition-colors hover:text-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 sm:hidden","aria-label":"Menu",children:e.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none","aria-hidden":"true",children:e.jsx("path",{d:"M3 5h14M3 10h14M3 15h14",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})})}),e.jsxs(ye,{align:"end",className:"min-w-40",children:[e.jsx(z,{onSelect:()=>f(!0),children:"QR code"}),e.jsx(z,{onSelect:()=>p(!0),children:"Embed code"})]})]})]})]}),e.jsx("div",{className:"border-b border-amber-200 bg-amber-50 px-4 py-3 sm:px-6",children:e.jsxs("div",{className:"mx-auto flex max-w-5xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",children:[e.jsx("p",{className:"text-sm text-pretty text-amber-900",children:"This is a preview of your store. You can claim it at any time. We set it up so you could see what it looks like."}),e.jsx(i,{to:`/claim/${n.id}`,className:"inline-flex shrink-0 items-center justify-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white no-underline transition-colors hover:bg-neutral-800",children:"Claim your store"})]})}),e.jsxs("main",{className:"mx-auto w-full max-w-5xl flex-1 px-4 py-6 sm:px-6 sm:py-8",children:[e.jsxs("h1",{className:"mb-4 font-display text-xl font-bold tracking-tight text-balance text-neutral-900 sm:text-2xl",children:[ke(),", ",n.name]}),e.jsxs("div",{className:"mb-6 grid gap-4 sm:grid-cols-2",children:[e.jsx(Se,{total:ne,topProduct:le}),I&&e.jsxs("div",{className:"flex flex-col justify-between rounded-2xl border-2 border-[#CAF

1F57] bg-[#CAFF57]/10 p-4",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsx("p",{className:"mb-1 text-xs font-semibold text-neutral-900",children:"Suggestion page"}),e.jsx("p",{className:"truncate font-mono text-sm text-neutral-700",children:I}),e.jsx("p",{className:"mt-1.5 text-xs text-neutral-500",children:"Share in your bio, email signature, or social links."})]}),e.jsxs("div",{className:"mt-3 flex items-center gap-2",children:[e.jsx("button",{type:"button",onClick:fe,className:"inline-flex cursor-pointer items-center justify-center rounded-lg border-2 border-[#CAFF57] bg-white px-3 py-1.5 text-xs font-medium text-neutral-900 transition-colors hover:bg-[#CAFF57]/20",children:"Try widget"}),e.jsx("a",{href:`/s/${n.slug}`,target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center justify-center rounded-lg border-2 border-[#CAFF57] bg-white px-3 py-1.5 text-xs font-medium text-neutral-900 no-underline transition-colors hover:bg-[#CAFF57]/20",children:"Try page →"})]})]})]}),e.jsxs("div",{className:"mb-4 flex flex-col justify-between gap-3 sm:flex-row sm:items-center",children:[e.jsxs("h2",{className:"font-display text-base font-bold text-neutral-900",children:["Product suggestions",e.jsxs("span",{className:"ml-2 text-sm font-normal text-neutral-400",children:["(",o.length,")"]})]}),e.jsxs("div",{className:"flex items-center justify-end gap-3",children:[e.jsx("button",{disabled:!0,"aria-label":"CSV export requires claiming your store",className:"min-h-9 cursor-not-allowed rounded-lg bg-neutral-100 px-3 text-xs font-medium text-neutral-400 transition-all duration-200",children:"Export CSV"}),e.jsx(Ce,{value:c,onChange:Z})]})]}),o.length===0?e.jsx("div",{className:"rounded-lg border border-dashed border-neutral-300 p-8 text-center",children:e.jsx("p",{className:"text-sm text-neutral-500",children:"No suggestions yet."})}):e.jsx("div",{className:"-mx-4 overflow-hidden rounded-2xl border border-neutral-200 bg-white sm:mx-0",children:e.jsxs(Te,{className:"table-fixed",children:[e.jsx(Pe,{className:"bg-neutral-50/50",children:e.jsxs(B,{className:"border-neutral-100 hover:bg-transparent",children:[e.jsx(S,{className:"w-[50%] px-5 py-3.5 text-xs font-medium tracking-wider text-neutral-400 uppercase",children:"Product"}),e.jsx(S,{className:"w-[25%] px-5 py-3.5 text-right text-xs font-medium tracking-wider text-neutral-400 uppercase",children:"Requests"}),e.jsx(S,{className:"hidden w-[25%] px-5 py-3.5 text-right text-xs font-medium tracking-wider text-neutral-400 uppercase sm:table-cell",children:"Last requested"})]})}),e.jsx(_e,{children:o.map(t=>{const s=Fe(t.suggestion_count);return e.jsxs(B,{className:`group/row border-neutral-100 ${s.row}`,children:[e.jsx(C,{className:"px-5 py-3.5 font-medium text-neutral-900",children:e.jsxs("span",{className:"inline-flex items-center gap-1.5 transition-transform duration-200 group-hover/row:translate-x-0.5",children:[s.icon&&e.jsx("span",{children:s.icon}),t.product_name]})}),e.jsx(C,{className:"px-5 py-3.5 text-right",children:e.jsx("span",{className:`inline-flex min-w-8 items-center justify-center rounded-lg px-2 py-0.5 font-mono text-xs font-semibold transition-transform duration-200 group-hover/row:scale-105 ${s.pill}`,children:t.suggestion_count})}),e.jsx(C,{className:"hidden px-5 py-3.5 text-right text-sm text-neutral-500 sm:table-cell",children:Ee(t.last_suggested_at)})]},t.id)})})]})})]}),e.jsx("footer",{className:"border-t border-neutral-200 bg-white px-4 py-5 sm:px-6",children:e.jsxs("div",{className:"mx-auto flex max-w-5xl flex-col items-center justify-between gap-3 text-xs text-neutral-400 sm:flex-row",children:[e.jsxs(i,{to:"/",className:"font-display logo-gradient inline-flex items-center gap-1 font-bold no-underline",children:[e.jsx(k,{size:12}),"Hark"]}),e.jsxs("nav",{className:"flex items-center gap-4","aria-label":"Footer",children:[e.jsx(i,{to:"/",className:"no-underline transition-all duration-200 hover:text-neutral-900",children:"Home"}),e.jsx(i,{to:"/terms",className:"no-underline transition-all duration-200 hover:text-neutral-900",children:"Terms"}),e.jsx(i,{to:"/privacy",className:"no-underline transition-all duration-200 hover:text-neutral-900",children:"Privacy"}),e.jsx(i,{to:"/guide",className:"no-underline transition-all duration-200 hover:text-neutral-900",children:"Tips"})]})]})}),e.jsx(T,{open:d,onOpenChange:f,children:e.jsxs(P,{className:"sm:max-h-[85vh] sm:max-w-lg",children:[e.jsx(_,{children:e.jsx("div",{className:"flex items-center justify-between",children:e.jsxs("div",{children:[e.jsx(F,{className:"font-display text-balance",children:"In-store QR code"}),e.jsx(E,{children:"Print as a sticker or card. Customers scan to suggest products."})]})})}),e.jsxs(Me,{defaultValue:"sticker",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{className:"relative",children:[e.jsx("select",{value:h,onChange:t=>oe(t.target.value),className:"cursor-pointer appearance-none rounded-lg border border-neutral-200 bg-white py-1.5 pr-7 pl-2.5 text-xs font-medium text-neutral-700 transition-colors outline-none hover:border-neutral-300",children:J.map(t=>e.jsx("option",{value:t,children:t},t))}),e.jsx("svg",{"aria-hidden":"true",className:"pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 text-neutral-400",width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",children:e.jsx("path",{d:"M4 6l4 4 4-4",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})]}),e.jsxs($e,{children:[e.jsx(G,{value:"card",children:"Card"}),e.jsx(G,{value:"sticker",children:"Sticker"})]})]}),e.jsx(V,{value:"card",className:"min-h-[420px]",children:e.jsxs("div",{className:"mx-auto mt-2 max-w-xs overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-lg",children:[e.jsx("div",{className:"h-1.5 rounded-t-2xl",style:{background:"#CAFF57"}}),e.jsxs("div",{className:"flex flex-col items-center px-6 pt-8 pb-6 text-center",children:[e.jsx("div",{className:"mb-6",children:de?e.jsx("div",{className:"flex items-center justify-center",style:{width:160,height:160},children:e.jsx("div",{className:"h-8 w-8 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-600"})}):D?e.jsx("img",{src:D,alt:"QR code",width:160,height:160}):e.jsx(Ae,{value:ie,size:160,level:"H",imageSettings:{src:"/hark-logo.png",height:38,width:38,excavate:!0}})}),e.jsx("h3",{className:"font-display mb-2 text-lg font-extrabold tracking-tight text-neutral-900",children:h}),e.jsx("p",{className:"mb-4 text-sm leading-normal text-balance text-neutral-500",children:"Scan to suggest products you'd like to see here."}),e.jsx("p",{className:"font-display text-base font-bold text-neutral-900",children:n.name}),e.jsxs("p",{className:"font-mono text-[11px] text-neutral-400",children:["withhark.com/s/",n.slug]})]}),e.jsxs("div",{className:"flex items-center justify-center gap-1 border-t border-neutral-100 py-2.5 text-[10px] leading-none text-neutral-400",children:[e.jsx("span",{children:"Powered by"}),e.jsxs("span",{className:"inline-flex items-center gap-px",children:[e.jsx("span",{className:"relative",style:{to

1p:"-0.5px"},children:e.jsx(k,{size:10,className:"text-neutral-400"})}),e.jsx("span",{className:"font-display font-bold",children:"Hark"})]})]})]})}),e.jsx(V,{value:"sticker",className:"min-h-[420px] overflow-hidden",children:e.jsx("div",{className:"mx-auto mt-2 max-w-xs px-10",children:e.jsxs(Le,{setApi:me,opts:{loop:!0},children:[e.jsx(Re,{children:K.map(t=>e.jsx(He,{children:e.jsxs("div",{className:"flex flex-col items-center",children:[xe||!j[t.id]?e.jsx("div",{className:"flex aspect-square w-full items-center justify-center rounded-xl bg-neutral-200",children:e.jsx("div",{className:"h-6 w-6 animate-spin rounded-full border-2 border-neutral-300 border-t-neutral-600"})}):e.jsx("img",{src:j[t.id],alt:`${t.label} sticker`,width:400,height:400,className:"w-full rounded-xl shadow-lg"}),e.jsx("p",{className:"mt-2 text-xs font-medium text-neutral-600",children:t.label})]})},t.id))}),e.jsx(De,{}),e.jsx(We,{})]})})})]}),e.jsx("div",{className:"flex justify-center pt-1",children:e.jsx(i,{to:`/claim/${n.id}`,className:"inline-flex items-center justify-center rounded-xl px-4 py-2.5 text-sm font-semibold text-neutral-900 no-underline transition-all duration-200 hover:scale-[1.02] active:scale-[0.97]",style:{background:"#CAFF57"},children:"Claim store to download"})})]})}),e.jsx(T,{open:re,onOpenChange:p,children:e.jsxs(P,{children:[e.jsxs(_,{children:[e.jsx(F,{className:"font-display text-balance",children:"Embed on your site"}),e.jsxs(E,{children:["Paste this before the closing"," ",e.jsx("code",{className:"rounded bg-neutral-100 px-1 py-0.5 font-mono text-neutral-700",children:"</body>"})," ","tag on your website."]})]}),e.jsx("div",{className:"rounded-xl bg-neutral-100 px-4 py-3 font-mono text-xs break-all text-neutral-700 transition-colors duration-200 select-all hover:bg-neutral-200/60",children:H}),e.jsx("button",{onClick:he,className:`mt-3 cursor-pointer rounded-xl px-4 py-2.5 text-sm font-semibold transition-all duration-200 hover:scale-[1.02] active:scale-[0.97] ${g?"bg-neutral-900 text-white":"text-neutral-900"}`,style:g?void 0:{background:"#CAFF57"},children:g?"✓ Copied!":"Copy to clipboard"})]})}),e.jsx(T,{open:pe,onOpenChange:t=>{v(t),t||(y(!1),w.current&&clearTimeout(w.current))},children:e.jsx(P,{className:"sm:max-w-md",children:ge?e.jsxs("div",{className:"py-2 text-center",children:[e.jsx("h2",{className:"text-base font-semibold text-neutral-900",children:"Heard!"}),e.jsx("p",{className:"mt-2 text-sm text-neutral-500",children:"We'll look into stocking this. Thanks for speaking up!"})]}):e.jsxs(e.Fragment,{children:[e.jsxs(_,{children:[e.jsxs(F,{className:"flex items-center gap-2 text-base font-semibold text-neutral-900",children:[(n==null?void 0:n.has_logo)&&e.jsx("img",{src:`/api/stores/${n.id}/logo`,alt:"",className:"h-6 w-6 rounded object-cover"}),"Suggest a product"]}),e.jsx(E,{className:"text-sm text-balance text-neutral-500",children:"Tell us what you're looking for. If enough people ask, we'll stock it."})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-xs font-medium text-neutral-600",children:"Product name"}),e.jsx("input",{type:"text",value:N,onChange:t=>M(t.target.value),placeholder:"The thing you came here looking for...",className:"min-h-9 w-full rounded-lg border border-neutral-200 px-3 text-xs text-neutral-900 placeholder:text-neutral-500 focus:border-neutral-400 focus:outline-none"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-xs font-medium text-neutral-600",children:"Email (optional — we'll tell you when it lands)"}),e.jsx("input",{type:"email",value:$,onChange:t=>A(t.target.value),placeholder:"[email protected]",className:"min-h-9 w-full rounded-lg border border-neutral-200 px-3 text-xs text-neutral-900 placeholder:text-neutral-500 focus:border-neutral-400 focus:outline-none"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-xs font-medium text-neutral-600",children:"Phone (optional — we'll text you when it lands)"}),e.jsx("input",{type:"tel",value:U,onChange:t=>O(t.target.value),placeholder:"555-555-5555",className:"min-h-9 w-full rounded-lg border border-neutral-200 px-3 text-xs text-neutral-900 placeholder:text-neutral-500 focus:border-neutral-400 focus:outline-none"})]}),e.jsx("button",{type:"button",onClick:be,disabled:Q||!N.trim(),className:"min-h-9 w-full rounded-lg bg-neutral-900 px-4 text-xs font-medium text-white transition-all duration-200 hover:bg-neutral-800 disabled:opacity-50",children:Q?"Sending...":"Send it"})]})]})})})]})}export{qe as default};