https://app.superlemon.xyz/assets/index-C6GIzCrf.js

1import{u as G,c as J,a as Y,b as K,r as d,aA as $,j as e,B as n,i as t,h as a,G as l,ao as q,k as Q,a4 as Z,l as p,a1 as R,S as ee,J as se,a8 as ae}from"./index-Bfuskbvf.js";import{P as te}from"./PageMarkup-Wdu19r-5.js";import{P as re}from"./PageHeader-B4MQwna_.js";import{H as ne}from"./TemplateSection-DlzzOa4-.js";import{W as oe}from"./WhatsAppTemplatePreview-DH5QdBtS.js";import{u as ie}from"./usePrivateWabaOnboarding-71xIQoql.js";import{b as de}from"./shopifyFlowPrompt-DTPukl48.js";import{S as _}from"./CheckIcon.svg-CGbzQukX.js";import{C as le}from"./Card-OPaZ3948.js";import{B as pe}from"./Banner-CA00zSsJ.js";import{D as g}from"./Divider-BmCnuIDs.js";import{S as ce}from"./ClipboardIcon.svg-bT3iH4Pf.js";import{S as he}from"./ExternalIcon.svg-oo2gJIS1.js";import"./InfoIcon.svg-ByI-v68A.js";import"./campaigns-DF_1YeRp.js";import"./Filters-CP7-UWdS.js";import"./ChoiceList-lJgzmq9l.js";import"./RadioButton-uoiHGclV.js";import"./Checkbox-JrDf54NZ.js";/* empty css                 */const me="/assets/shopify-flow-home-CSPPBWhu.png",ge="/assets/shopify-flow-create-lSK4_chg.png",c=({n:h})=>e.jsx(t,{minWidth:"28px",minHeight:"28px",background:"bg-fill-info",borderRadius:"full",children:e.jsx(t,{padding:"050",children:e.jsx(a,{variant:"bodyMd",fontWeight:"bold",alignment:"center",as:"span",children:h})})}),Re=()=>{var W,O;const h=G(),B=J(),{shopDetailsData:i}=Y(K(s=>({shopDetailsData:s.shopDetailsData}))),S=Number((i==null?void 0:i.planId)||0),U=S===se||S===ae,{needsOnboarding:u}=ie(),b=i==null?void 0:i.userId,v=((i==null?void 0:i.url)||"").replace(".myshopify.com",""),H=v?`https://admin.shopify.com/store/${v}/apps/flow`:"https://admin.shopify.com/store/flow",[j,L]=d.useState([]),[C,k]=d.useState(!1),[I,y]=d.useState(!1),[M,A]=d.useState(!1),[N,f]=d.useState(!1),[r,P]=d.useState(null),[w,z]=d.useState(""),[T,E]=d.useState(!1);d.useEffect(()=>{b&&(k(!0),y(!1),$(b).then(s=>{var o;if((s==null?void 0:s.status)==="success"&&Array.isArray(s.templates)){L(s.templates);const x=(o=B.state)==null?void 0:o.templateId;if(x){const F=s.templates.find(X=>X.id===x);F&&P(F)}}else y(!0)}).catch(()=>y(!0)).finally(()=>k(!1)))},[b]);const m=r&&w.trim()?de(r,w):"",D=()=>{m&&navigator.clipboard.writeText(m).then(()=>{R("shopify_flow_prompt_copied",{template_id:String((r==null?void 0:r.id)??"")}),E(!0),setTimeout(()=>E(!1),2e3)})},V=e.jsxs(n,{gap:"400",children:[r&&e.jsx(oe,{html:(r.body||"").replace(/\n/g,"<br>"),ctaLabel:(O=(W=r.buttons)==null?void 0:W.find(s=>s.type==="URL"))==null?void 0:O.name,mediaType:(()=>{const s=(r.header||"").toUpperCase();if(["IMAGE","VIDEO","DOCUMENT"].includes(s))return s;const o=(r.type||"").toUpperCase();if(["IMAGE","VIDEO","DOCUMENT"].includes(o))return o})(),footer:r.footer||void 0,previewLabel:"Template Preview"}),e.jsx(t,{padding:"400",background:"bg-surface",borderColor:"border",borderWidth:"1",borderRadius:"200",shadow:"200",children:e.jsxs(n,{gap:"300",children:[e.jsx(a,{variant:"headingSm",as:"h3",children:"What is Shopify Flow?"}),e.jsx(a,{variant:"bodyMd",tone:"subdued",as:"p",children:"Shopify Flow is a free no-code automation builder app. It lets you trigger actions based on events from Shopify and any connected app."}),e.jsx(a,{variant:"bodyMd",tone:"subdued",as:"p",children:"With Superlemon connected as an action, you can send personalised WhatsApp messages on any trigger — orders, fulfilments, reviews, loyalty events, and more."})]})}),e.jsx(t,{padding:"400",background:"bg-surface",borderColor:"border",borderWidth:"1",borderRadius:"200",shadow:"200",children:e.jsxs(n,{gap:"300",children:[e.jsx(a,{variant:"headingSm",as:"h3",children:"Example flows"}),["Order fulfilled → send tracking update","Judge.me review submitted → thank the customer",'Customer tagged "VIP" → send exclusive offer',"Product back in stock → notify waiting customers","Loyalty points milestone reached → send reward","Subscription renewed → send confirmation"].map(s=>e.jsxs(l,{gap:"200",blockAlign:"start",wrap:!1,children:[e.jsx(q,{source:_,tone:"success"}),e.jsx(a,{variant:"bodyMd",as:"p",children:s})]},s))]})})]});return e.jsxs(te,{headerTopContent:e.jsx(t,{paddingBlockEnd:"200",children:e.jsx(p,{variant:"plain",icon:ee,onClick:()=>h.push("/automations"),children:"Back to Automated Campaigns"})}),customHeader:e.jsx(re,{title:"Custom Automated Campaigns (via Shopify Flow)",subtitle:"Use Superlemon's deep Shopify integration to send WhatsApp messages using triggers available from Shopify and other apps"}),pageClassName:"sl-templates-page",rightSidePanel:V,children:[e.jsx(le,{children:e.jsx(t,{padding:"500",children:e.jsxs(n,{gap:"600",children:[I&&e.jsx(pe,{tone:"warning",children:"Could not load your templates. Make sure your WhatsApp API is connected and try refreshing."}),e.jsxs(n,{gap:"300",children:[e.jsxs(l,{gap:"300",blockAlign:"center",wrap:!1,children:[e.jsx(c,{n:1}),e.jsx(a,{variant:"headingMd",as:"h3",children:"When do you want to send the message?"})]}),e.jsx(t,{paddingInlineStart:"700",children:e.jsx(Q,{label:"",labelHidden:!0,value:w,onChange:z,placeholder:"e.g. When a Judge.me review is submitted, when an order is fulfilled…",helpText:"Describe in plain English — you'll be able to edit the flow later in Shopify.",autoComplete:"off"})})]}),e.jsx(g,{}),e.jsxs(n,{gap:"300",children:[e.jsxs(l,{gap:"300",blockAlign:"center",wrap:!1,children:[e.jsx(c,{n:2}),e.jsx(a,{variant:"headingMd",as:"h3",children:"Select the template you want to send"})]}),e.jsx(t,{paddingInlineStart:"700",children:e.jsxs(n,{gap:"300",children:[C?e.jsxs(l,{gap:"200",blockAlign:"center",children:[e.jsx(Z,{size:"small"}),e.jsx(a,{variant:"bodyMd",tone:"subdued",as:"span",children:"Loading templates…"})]}):e.jsx(p,{onClick:()=>U&&!u?A(!0):f(!0),children:r?r.name:"Select template"}

1),j.length===0&&!C&&!I&&e.jsx(a,{variant:"bodySm",tone:"subdued",as:"p",children:"No approved templates found."})]})})]}),e.jsx(g,{}),e.jsxs(n,{gap:"300",children:[e.jsxs(l,{gap:"300",blockAlign:"center",wrap:!1,children:[e.jsx(c,{n:3}),e.jsx(a,{variant:"headingMd",as:"h3",children:"Copy this prompt"})]}),e.jsx(t,{paddingInlineStart:"700",children:e.jsxs(n,{gap:"300",children:[e.jsx(t,{background:"bg-surface-secondary",padding:"400",borderRadius:"200",children:m?e.jsx("pre",{style:{margin:0,whiteSpace:"pre-wrap",fontFamily:"inherit",fontSize:"13px",lineHeight:"1.6"},children:m}):e.jsx(a,{variant:"bodyMd",tone:"subdued",as:"p",children:"Complete steps 1 and 2 to generate your prompt."})}),e.jsx(t,{children:e.jsx(p,{icon:T?_:ce,onClick:D,variant:"primary",disabled:!m,children:T?"Copied!":"Copy prompt"})})]})})]}),e.jsx(g,{}),e.jsxs(n,{gap:"300",children:[e.jsxs(l,{gap:"300",blockAlign:"center",wrap:!1,children:[e.jsx(c,{n:4}),e.jsx(a,{variant:"headingMd",as:"h3",children:'Open Shopify Flow and click "Create workflow" at the top-right'})]}),e.jsx(t,{paddingInlineStart:"700",children:e.jsxs(n,{gap:"300",children:[e.jsx(a,{variant:"bodyMd",tone:"subdued",as:"p",children:"Please install the app if you don't have it already — it's free and by Shopify."}),e.jsx(t,{children:e.jsx(p,{variant:"primary",icon:he,onClick:()=>window.open(H,"_blank","noopener,noreferrer"),children:"Open Shopify Flow"})}),e.jsx(t,{borderRadius:"200",overflowX:"hidden",overflowY:"hidden",children:e.jsx("img",{src:me,alt:"Shopify Flow dashboard — click Create workflow in the top right",style:{width:"100%",borderRadius:"8px",border:"1px solid var(--p-color-border)"}})})]})})]}),e.jsx(g,{}),e.jsxs(n,{gap:"300",children:[e.jsxs(l,{gap:"300",blockAlign:"center",wrap:!1,children:[e.jsx(c,{n:5}),e.jsx(a,{variant:"headingMd",as:"h3",children:"Paste the prompt in the text box"})]}),e.jsx(t,{paddingInlineStart:"700",children:e.jsx(t,{borderRadius:"200",overflowX:"hidden",overflowY:"hidden",children:e.jsx("img",{src:ge,alt:"Shopify Flow create workflow dialog — paste your prompt in the text box",style:{width:"100%",borderRadius:"8px",border:"1px solid var(--p-color-border)"}})})})]}),e.jsx(g,{}),e.jsxs(n,{gap:"300",children:[e.jsxs(l,{gap:"300",blockAlign:"center",wrap:!1,children:[e.jsx(c,{n:6}),e.jsx(a,{variant:"headingMd",as:"h3",children:"Verify the trigger and variable mapping"})]}),e.jsx(t,{paddingInlineStart:"700",children:e.jsx(a,{variant:"bodyMd",tone:"subdued",as:"p",children:'Shopify Flow will draft the workflow based on your prompt. Review the trigger and confirm each variable is mapped to the correct data field (e.g. customer name, order number). Then click "Turn on workflow" to activate it.'})})]})]})})}),N&&e.jsx("div",{style:{position:"fixed",inset:0,background:"rgba(0,0,0,0.5)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:500},children:e.jsxs("div",{style:{background:"#fff",borderRadius:12,width:480,boxShadow:"0 8px 32px rgba(0,0,0,0.18)"},children:[e.jsx("div",{style:{padding:"20px 24px",borderBottom:"1px solid #e5e7eb"},children:e.jsx("p",{style:{margin:0,fontWeight:600,fontSize:16},children:u?"Complete your WhatsApp onboarding":"Upgrade to use Shopify Flow"})}),e.jsx("div",{style:{padding:"20px 24px",borderBottom:"1px solid #e5e7eb"},children:e.jsx("p",{style:{margin:0,fontSize:14,color:"#374151",lineHeight:1.6},children:u?"Your plan includes WhatsApp Business API access. Complete onboarding to start sending automated messages from your own number.":e.jsxs(e.Fragment,{children:["Shopify Flow automations are available on the ",e.jsx("strong",{children:"Scale"})," plan. Upgrade to send automated WhatsApp messages from your own dedicated number."]})})}),e.jsxs("div",{style:{padding:"16px 24px",display:"flex",justifyContent:"flex-end",gap:12},children:[e.jsx(p,{variant:"plain",onClick:()=>f(!1),children:"Maybe later"}),u?e.jsx(p,{variant:"primary",tone:"success",onClick:()=>{f(!1),h.push("/whatsapp-onboarding")},children:"Start Onboarding"}):e.jsx(p,{variant:"primary",tone:"success",onClick:()=>{f(!1),h.push("/pricing")},children:"See plans"})]})]})}),M&&e.jsx(ne,{fetchedTemplates:j,isHsmTemplateModalOpen:M,setHsmTemplateModalOpen:A,from:"Campaign",selectTemplate:s=>{const o=j.find(x=>x.id===s);o&&(P(o),R("shopify_flow_template_selected",{template_id:String(o.id),template_name:o.name}))},setTemplateId:()=>{}})]})};export{Re as default};