https://snapio.ai/assets/simple-snap-content-BpMwpurd.js

1import{D as Me,r as t,aJ as ze,c4 as Ee,b4 as Le,l as le,j as e,C as D,e as G,X as v,B as i,c5 as xe,a5 as W,a7 as fe,t as ge,v as pe,m as Pe,o as Be,p as Oe,q as $e,s as Ue,P as Ne,bW as je,c3 as qe,bn as ie,u as He}from"./index-BSiIgY1-.js";import{M as ne,a as re}from"./index-uIRvuXGK.js";import{F as ve}from"./filter-Bh6Eb6IO.js";import{S as We}from"./SnapGoalSearch-DLhQjhLy.js";import"./textarea-CRU9TMWG.js";import"./send-CYnAy85S.js";/**
2 * @license lucide-react v0.453.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const De=Me("Target",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["circle",{cx:"12",cy:"12",r:"6",key:"1vlfrh"}],["circle",{cx:"12",cy:"12",r:"2",key:"1c9p78"}]]);function Ge({preSelectedProductId:z,preSelectedSnapName:I,prefillContentId:K,prefillImageIndex:J,externalMobileFilterOpen:w,onExternalMobileFilterChange:E,filterBySnapIds:k,onSnapsRecommended:V,showRecommendedBanner:_,recommendedSnapIds:L=[],aiSearchReasoning:U,onClearAIFilter:Q}){const[d,f]=t.useState(""),[c,S]=t.useState([]),[o,u]=t.useState("all"),[X,T]=t.useState(!1),[g,F]=t.useState(null),[q,y]=t.useState(!1),[a,b]=t.useState(!1),{user:n}=ze(),{favoriteSnapIds:x,toggleFavorite:P,isToggling:B,isSnapFavorited:O}=Ee(),{isActive:N}=Le(),p=t.useRef(!1),Y=t.useRef(null),Z=t.useRef(null),ee=t.useRef(null),R=t.useRef(null),[Ke,we]=t.useState(!1),[Je,Se]=t.useState(!1),[oe,ye]=t.useState(!1),be=t.useRef(null),Ce=s=>{R.current&&(R.current.disconnect(),R.current=null),be.current=s,s&&(R.current=new IntersectionObserver(([r])=>{ye(!r.isIntersecting)},{rootMargin:"-65px 0px 0px 0px",threshold:0}),R.current.observe(s))};t.useEffect(()=>()=>{R.current&&R.current.disconnect()},[]);const $=()=>{const s=Y.current;s&&(we(s.scrollLeft>0),Se(s.scrollLeft<s.scrollWidth-s.clientWidth-1))},se=t.useRef(!1),ce=t.useRef([]),te=s=>{se.current=!0,s==="all"?(S([]),ce.current=[]):S(r=>{const l=r.includes(s)?r.filter(m=>m!==s):[...r,s];return ce.current=l,l})};t.useEffect(()=>{if(!se.current)return;se.current=!1;const s=setTimeout(()=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(Z.current&&ee.current){const l=ee.current.offsetHeight,h=Z.current.getBoundingClientRect().top+window.scrollY-64-l-8;window.scrollTo({top:Math.max(0,h),behavior:"smooth"})}})})},150);return()=>clearTimeout(s)},[c]);const Ie=w!==void 0?w:X,de=E!==void 0?E:T,me=()=>{y(!1),F(null)},{data:j=[],isLoading:ke,error:Fe}=le({queryKey:["/api/snaps"],...ie.SNAPS,refetchOnWindowFocus:!1}),{data:H=[],isLoading:Re}=le({queryKey:["/api/categories"],...ie.CATEGORIES,refetchOnWindowFocus:!1});t.useEffect(()=>{if(j.length>0&&!p.current){if(I){const r=I.toLowerCase().replace(/[^a-z0-9]/g,""),l=j.find(m=>m.name.toLowerCase().replace(/[^a-z0-9]/g,"")===r);if(l){F(l),y(!0),p.current=!0;return}}const s=sessionStorage.getItem("rerunSnapId");if(s){const r=j.find(l=>String(l.id)===s);r&&(F(r),y(!0),p.current=!0)}}},[I,j]),t.useEffect(()=>{I||(p.current=!1)},[I]),t.useEffect(()=>{const s=Y.current;if(s){const r=setTimeout(()=>{$()},100);return s.addEventListener("scroll",$),window.addEventListener("resize",$),()=>{clearTimeout(r),s.removeEventListener("scroll",$),window.removeEventListener("resize",$)}}},[H,j]);const C=t.useMemo(()=>!j||j.length===0?[]:j.filter(s=>{if(!s)return!1;const r=(n==null?void 0:n.role)==="manager"||(n==null?void 0:n.role)==="admin";if(!s.isActive&&!r||k&&k.length>0&&!k.includes(s.id)||c.length>0&&!c.some(M=>M==="favorites"?x.includes(s.id):s.categoryId===M))return!1;const l=d===""||s.name&&s.name.toLowerCase().includes(d.toLowerCase()),m=o==="all"||s.contentType===o;return l&&m}),[j,d,o,n==null?void 0:n.role,k,c,x]),ae=()=>{f(""),u("all"),S([])},he=s=>{q&&(g==null?void 0:g.id)!==s.id&&!N?(me(),setTimeout(()=>{F(s),y(!0)},100)):(F(s),y(!0))},A=d||o!=="all"||c.length>0,Te=d||o!=="all",ue=t.useMemo(()=>{const s=[],r=H.filter(m=>C.some(h=>h.categoryId===m.id)),l=c.includes("favorites");if(l){const m=C.filter(h=>x.includes(h.id));m.length>0&&s.push({category:{id:"favorites",name:"Favorites",description:null},snaps:m})}return r.forEach(m=>{let h=C.filter(M=>M.categoryId===m.id);l&&(h=h.filter(M=>!x.includes(M.id))),h.length>0&&s.push({category:m,snaps:h})}),s},[C,H,c,x]);if(ke||Re)return e.jsxs("div",{className:"space-y-6",children:[e.jsx("div",{className:"h-12 bg-gray-200 rounded-lg animate-pulse"}),e.jsx("div",{className:"h-10 bg-gray-200 rounded-lg animate-pulse"}),e.jsx("div",{className:"mx-auto",children:e.jsx(ne,{columnsCountBreakPoints:{350:2,768:3,1024:4,1280:5,1536:6},children:e.jsx(re,{gutter:"12px",children:Array.from({length:12}).map((s,r)=>{const l=[200,260,180,240,220,280,190,250,210,270,185,235];return e.jsx("div",{className:"relative overflow-hidden rounded-lg bg-white border border-border",children:e.jsx("div",{className:"w-full animate-pulse bg-gray-200",style:{height:`${l[r%l.length]}px`}})},r)})})})})]});if(Fe)return e.jsx(D,{children:e.jsxs(G,{className:"flex flex-col items-center justify-center py-12",children:[e.jsx(v,{className:"h-12 w-12 text-red-500 mb-4"}),e.jsx("h3",{className:"text-lg font-medium mb-2",children:"Error Loading Snaps"}),e.jsx("p",{className:"text-gray-600 text-center",children:"Unable to load snaps. Please try again later."})]})});const Ae=()=>e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"relative",children:[e.jsx(ge,{className:"absolute left-2.5 top-2.5 h-4 w-4 text-gray-400"}),e.jsx(pe,{placeholder:"Search snaps...",value:d,onChange:s=>

6f(s.target.value),className:"pl-8"})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("label",{className:"text-sm font-medium",children:"Content Type"}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(i,{variant:o==="all"?"default":"outline",size:"sm",onClick:()=>u("all"),className:"flex-1",children:"All"}),e.jsx(i,{variant:o==="image"?"default":"outline",size:"sm",onClick:()=>u("image"),className:"flex-1",children:"Images"}),e.jsx(i,{variant:o==="video"?"default":"outline",size:"sm",onClick:()=>u("video"),className:"flex-1",children:"Videos"})]})]}),A&&e.jsxs(i,{variant:"outline",onClick:ae,className:"w-full",children:[e.jsx(v,{className:"w-4 h-4 mr-2"}),"Clear All Filters"]})]});return e.jsxs("div",{"data-testid":"snaps-page-container",children:[e.jsx("div",{ref:Ce,className:"h-px"}),e.jsx("div",{ref:ee,className:"sticky top-16 z-20 w-full",children:e.jsx("div",{className:`pb-3 pt-2 transition-all duration-300 ease-in-out ${oe?"bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80 border-b border-border/50":"mx-4 sm:mx-6 lg:mx-8"}`,children:e.jsx("div",{className:`transition-all duration-300 ease-in-out ${oe?"px-4 sm:px-6 lg:px-8":"px-2"}`,children:e.jsxs("div",{ref:Y,className:"flex items-center gap-2 overflow-x-auto pb-1 scrollbar-hide",children:[e.jsx(i,{variant:c.length===0?"default":"outline",size:"sm",onClick:()=>te("all"),className:"flex-shrink-0",children:"All"}),x.length>0&&e.jsxs(i,{variant:c.includes("favorites")?"default":"outline",size:"sm",onClick:()=>te("favorites"),className:"flex-shrink-0 gap-1",children:[e.jsx(xe,{className:`w-3.5 h-3.5 text-red-500 ${c.includes("favorites")?"fill-red-500":""}`}),"Favorites",e.jsxs("span",{className:"ml-0.5 text-xs",children:["(",x.length,")"]})]}),H.filter(s=>j.some(r=>r.categoryId===s.id&&((n==null?void 0:n.role)==="manager"||(n==null?void 0:n.role)==="admin"||r.isActive))).map(s=>e.jsx(i,{variant:c.includes(s.id)?"default":"outline",size:"sm",onClick:()=>te(s.id),className:"flex-shrink-0",children:s.name},s.id))]})})})}),e.jsxs("div",{ref:Z,className:"px-4 sm:px-6 lg:px-8 space-y-4 mt-4",children:[e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2",children:[e.jsxs("div",{className:"flex items-center justify-between sm:justify-start gap-2",children:[_&&L.length>0?e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(De,{className:"h-4 w-4 text-primary flex-shrink-0"}),e.jsxs("div",{className:"text-sm text-gray-600",children:[e.jsxs("span",{className:"font-medium text-primary",children:["Showing ",L.length," recommended snap",L.length!==1?"s":""]}),U&&e.jsxs("span",{className:"text-xs text-gray-500 ml-1",children:["— ",U]})]}),e.jsx(i,{variant:"ghost",size:"sm",onClick:Q,className:"text-gray-400 hover:text-gray-600 p-1 h-auto flex-shrink-0",children:e.jsx(v,{className:"w-4 h-4"})})]}):e.jsxs("span",{className:"text-sm text-muted-foreground whitespace-nowrap",children:[C.length," snap",C.length!==1?"s":"",c.length>0&&e.jsxs("span",{className:"font-medium text-foreground",children:[" ","in ",c.length," ",c.length===1?"category":"categories"]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(i,{variant:a?"default":"outline",size:"sm",onClick:()=>b(!a),className:`gap-1.5 sm:hidden ${a?"ring-2 ring-primary ring-offset-2":""}`,children:[a?e.jsx(v,{className:"w-4 h-4"}):e.jsx(ve,{className:"w-4 h-4"}),A&&!a&&e.jsx(W,{variant:"secondary",className:"h-5 px-1.5 text-xs",children:(d?1:0)+(o!=="all"?1:0)}),a&&e.jsx("span",{className:"text-xs",children:"Close"}),e.jsx(fe,{className:`w-3 h-3 transition-transform ${a?"rotate-180":""}`})]}),e.jsxs(i,{variant:a?"default":"outline",size:"sm",onClick:()=>b(!a),className:`gap-1.5 hidden sm:flex ${a?"ring-2 ring-primary ring-offset-2":""}`,children:[a?e.jsx(v,{className:"w-4 h-4"}):e.jsx(ve,{className:"w-4 h-4"}),a?"Close Filters":"Filters",A&&!a&&e.jsx(W,{variant:"secondary",className:"ml-1 h-5 px-1.5 text-xs",children:(d?1:0)+(o!=="all"?1:0)}),e.jsx(fe,{className:`w-3 h-3 transition-transform ${a?"rotate-180":""}`})]})]})]}),e.jsxs("div",{className:"relative w-full",children:[e.jsx(ge,{className:"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"}),e.jsx(pe,{placeholder:"Search snaps...",value:d,onChange:s=>

6f(s.target.value),className:"pl-9 h-10 bg-background border-border/60 focus-visible:ring-1"}),d&&e.jsx(i,{variant:"ghost",size:"sm",onClick:()=>f(""),className:"absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0 hover:bg-muted",children:e.jsx(v,{className:"h-3.5 w-3.5"})})]})]}),Te&&e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"Active filters:"}),d&&e.jsxs(W,{variant:"secondary",className:"text-xs gap-1",children:['Search: "',d,'"',e.jsx(v,{className:"w-3 h-3 cursor-pointer hover:text-destructive",onClick:()=>f("")})]}),o!=="all"&&e.jsxs(W,{variant:"secondary",className:"text-xs gap-1",children:["Type: ",o,e.jsx(v,{className:"w-3 h-3 cursor-pointer hover:text-destructive",onClick:()=>u("all")})]})]})]}),a&&e.jsx("div",{className:"bg-muted/50 rounded-lg p-4 border border-border/50",children:e.jsxs("div",{className:"flex flex-col sm:flex-row items-center justify-center gap-4",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-sm text-muted-foreground hidden sm:inline",children:"Type:"}),e.jsxs("div",{className:"flex gap-1",children:[e.jsx(i,{variant:o==="all"?"default":"outline",size:"sm",onClick:()=>u("all"),children:"All"}),e.jsx(i,{variant:o==="image"?"default":"outline",size:"sm",onClick:()=>u("image"),children:"Images"}),e.jsx(i,{variant:o==="video"?"default":"outline",size:"sm",onClick:()=>u("video"),children:"Videos"})]})]}),A&&e.jsxs(i,{variant:"ghost",size:"sm",onClick:ae,className:"text-gray-500 hover:text-gray-700",children:[e.jsx(v,{className:"w-4 h-4 mr-1"}),"Clear All"]})]})}),e.jsx(Pe,{open:Ie,onOpenChange:de,children:e.jsxs(Be,{side:"bottom",className:"h-[80vh]",children:[e.jsxs(Oe,{children:[e.jsx($e,{children:"Search & Filter Snaps"}),e.jsx(Ue,{children:"Search and filter snaps to find exactly what you need."})]}),e.jsxs("div",{className:"mt-6",children:[e.jsx(Ae,{}),e.jsx(i,{onClick:()=>de(!1),className:"w-full mt-4",children:"Apply Filters"})]})]})}),C.length===0?e.jsx(D,{children:e.jsxs(G,{className:"flex flex-col items-center justify-center py-12",children:[e.jsx(Ne,{className:"h-12 w-12 text-muted-foreground mb-4"}),e.jsx("h3",{className:"text-lg font-medium mb-2",children:"No Snaps Found"}),e.jsx("p",{className:"text-muted-foreground text-center mb-4",children:A?"No snaps match your current filters. Try adjusting your search or filters.":"No snaps have been configured yet."}),A&&e.jsx(i,{variant:"outline",onClick:ae,children:"Clear Filters"})]})}):ue?e.jsx("div",{className:"space-y-8",children:ue.map(({category:s,snaps:r})=>e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"border-b border-border/50 pb-2",children:[e.jsxs("h3",{className:"text-lg font-semibold text-foreground flex items-center gap-2",children:[s.id==="favorites"&&e.jsx(xe,{className:"w-5 h-5 text-red-500 fill-red-500"}),s.name,e.jsxs("span",{className:"text-sm font-normal text-muted-foreground",children:["(",r.length,")"]})]}),s.description&&e.jsx("p",{className:"text-sm text-muted-foreground mt-1",children:s.description})]}),e.jsx(ne,{columnsCountBreakPoints:{350:2,768:3,1024:4,1280:5,1536:6},children:e.jsx(re,{gutter:"12px",children:r.map(l=>e.jsx("div",{className:"w-full",children:e.jsx(je,{snap:l,onSelect:he,preSelectedProductId:z,onToggleFavorite:n?P:void 0,isToggling:B,isFavorited:O(l.id),isManager:(n==null?void 0:n.role)==="manager"||(n==null?void 0:n.role)==="admin"})},l.id))})})]},s.id))}):e.jsx(ne,{columnsCountBreakPoints:{350:2,768:3,1024:4,1280:5,1536:6},children:e.jsx(re,{gutter:"12px",children:C.map(s=>e.jsx("div",{className:"w-full",children:e.jsx(je,{snap:s,onSelect:he,preSelectedProductId:z,onToggleFavorite:n?P:void 0,isToggling:B,isFavorited:O(s.id),isManager:(n==null?void 0:n.role)==="manager"||(n==null?void 0:n.role)==="admin"})},s.id))})}),e.jsx(qe,{snap:g,open:q,onOpenChange:s=>{s?y(s):me()},preSelectedProductId:z,prefillContentId:K,prefillImageIndex:J})]})]})}function es(){const[z,I]=He(),[K,J]=t.useState(!1),[w,E]=t.useState(null),[k,V]=t.useState(null),[_,L]=t.useState(null),[U,Q]=t.useState(null),[d,f]=t.useState([]),[c,S]=t.useState(!1),[o,u]=t.useState(null),[X,T]=t.useState(!1);t.useEffect(()=>{const a=new URLSearchParams(window.location.search),b=a.get("product")?parseInt(a.get("product")):null,n=a.get("snap");E(b),V(n);const x=sessionStorage.getItem("recommendedSnapIds");if(x)try{const N=JSON.parse(x);N.length>0&&(f(N),S(!0),T(!0)),sessionStorage.removeItem("recommendedSnapIds")}catch(N){console.error("[SimpleSnapContent] Error parsing recommended snap IDs:",N),sessionStorage.removeItem("recommendedSnapIds")}const P=a.get("recommended");if(P&&!x){const N=P.split(",").map(p=>parseInt(p)).filter(p=>!isNaN(p));if(N.length>0){f(N),S(!0),T(!0),a.delete("recommended");const p=a.toString()?`${window.location.pathname}?${a.toString()}`:window.location.pathname;window.history.replaceState({},"",p)}}const B=sessionStorage.getItem("prefillContentId"),O=sessionStorage.getItem("prefillImageIndex");B&&O&&(L(parseInt(B)),Q(parseInt(O)),sessionStorage.removeItem("prefillContentId"),sessionStorage.removeItem("prefillImageIndex"))},[z]),t.useEffect(()=>{if(k){V(null);const a=new URLSearchParams(window.location.search);a.delete("snap");const b=a.toString()?`${window.location.pathname}?${a.toString()}`:window.location.pathname;window.history.replaceState({},"",b)}},[]);const{data:g}=le({queryKey:["/api/products",w],queryFn:async()=>{const a=await fetch(`/api/products/${w}`);if(!a.ok)throw new Error("Failed to fetch product");return a.json()},enabled:!!w,...ie.PRODUCTS}),F=w&&g,q=()=>{E(null),I("/snaps")},y=()=>{S(!1),T(!1),f([]),u(null)};return e.jsxs("div",{className:"py-6",children:[e.jsxs("div",{className:"px-4 sm:px-6 lg:px-8",children:[e.jsx(D,{className:"mb-6 border-primary/30 bg-gradient-to-br from-primary/10 via-primary/5 to-transparent shadow-sm",children:e.jsx(G,{className:"p-5",children:e.jsxs("div",{className:"flex flex-col gap-3",children:[e.jsx("h3",{className:"text-lg font-semibold text-gray-900",children:"What would you like to create today?"}),e.jsx(We,{onSnapsRecommended:(a,b)=>{f(a),S(!0),T(!0),u(b||null)}})]})})}),F&&e.jsx(D,{className:"mb-6 border-gray-200 bg-white shadow-sm overflow-hidden",children:e.jsx(G,{className:"p-0",children:e.jsxs("div",{className:"flex items-stretch",children:[e.jsx("div",{className:"flex-shrink-0",children:g.imageUrl?e.jsx("img",{src:g.imageUrl,alt:g.name,className:"w-20 h-full object-cover rounded-l-lg"}):e.jsx("div",{className:"w-20 h-full bg-yellow-400 flex items-center justify-center rounded-l-lg",children:e.jsx(Ne,{className:"w-8 h-8 text-yellow-800"})})}),e.jsxs("div",{className:"flex-grow p-4 flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("div",{className:"text-gray-600 text-sm font-medium",children:"Creating for:"}),e.jsx("h3",{className:"text-lg font-semibold text-gray-900",children:g.name})]}),e.jsx(i,{variant:"ghost",size:"sm",onClick:q,className:"text-gray-400 hover:text-gray-600 p-1",children:e.jsx(v,{className:"w-5 h-5"})})]})]})})})]}),e.jsx(Ge,{preSelectedProductId:w,preSelectedSnapName:k,prefillContentId:_,prefillImageIndex:U,externalMobileFilterOpen:K,onExternalMobileFilterChange:J,filterBySnapIds:X?d:void 0,showRecommendedBanner:c,recommendedSnapIds:d,aiSearchReasoning:o,onClearAIFilter:y})]})}export{es as default};