/* ─── Seller Panel — form screens (create/edit flows) ──────────────────────── Add Product, Create Promotion, Add Campaign, Package Inserts. */ /* ── ADD PRODUCT ───────────────────────────────────────────────────────────── */ const COUNTRIES = ['India','USA','Canada','UK','Australia']; const MARKETPLACES = [ /* products */ { k:'amazon', label:'Amazon', hint:'Amazon product URL', popular:true, how:['Open your product page on Amazon (Seller Central \u2192 Manage Inventory \u2192 View).','Copy the page URL and paste it here. We detect the ASIN automatically.'] }, { k:'ebay', label:'eBay', hint:'eBay listing URL', popular:true, only:['USA','Canada','UK','Australia'], how:['Seller Hub \u2192 Listings \u2192 open the item.','Copy the URL and paste it here.'] }, { k:'etsy', label:'Etsy', hint:'Etsy listing URL', popular:true, only:['USA','Canada'], how:['Shop Manager \u2192 Listings \u2192 open the listing \u2192 Preview.','Copy the URL and paste it here.'] }, { k:'flipkart', label:'Flipkart', hint:'Flipkart product URL', popular:true, only:['India'], how:['Seller Hub \u2192 My Listings \u2192 open your product.','Copy the URL and paste it here.'] }, { k:'myntra', label:'Myntra', hint:'Myntra product URL', only:['India'], how:['Seller Portal \u2192 Products \u2192 open your product.','Copy the URL and paste it here.'] }, { k:'nykaa', label:'Nykaa', hint:'Nykaa product URL', only:['India'], how:['Seller Portal \u2192 open your product listing.','Copy the URL and paste it here.'] }, { k:'meesho', label:'Meesho', hint:'Meesho product link (Share \u2192 Copy link)', only:['India'], how:['Supplier Panel \u2192 My Products.','Tap Share on the product and copy the link.','Paste it here.'] }, { k:'walmart', label:'Walmart', hint:'Walmart product URL', only:['USA'], how:['Seller Center \u2192 Manage Items \u2192 open the item.','Copy the URL and paste it here.'] }, { k:'target', label:'Target', hint:'Target product URL', only:['USA'], how:['Open your product on Target.com.','Copy the URL and paste it here.'] }, { k:'homedepot', label:'Home Depot', hint:'Home Depot product URL', only:['USA'], how:['Open your product on HomeDepot.com.','Copy the URL and paste it here.'] }, { k:'bestbuy', label:'Best Buy', hint:'Best Buy product URL', only:['USA'], how:['Open your product on BestBuy.com.','Copy the URL and paste it here.'] }, { k:'wayfair', label:'Wayfair', hint:'Wayfair product URL', only:['USA'], how:['Open your product on Wayfair.','Copy the URL and paste it here.'] }, { k:'chewy', label:'Chewy', hint:'Chewy product URL', only:['USA'], how:['Open your product on Chewy.com.','Copy the URL and paste it here.'] }, { k:'walmart_ca', label:'Walmart Canada', hint:'Walmart.ca product URL', only:['Canada'], how:['Walmart Canada Seller Portal \u2192 Items \u2192 open the item.','Copy the URL and paste it here.'] }, { k:'bestbuy_ca', label:'Best Buy Canada', hint:'BestBuy.ca product URL', only:['Canada'], how:['Open your product on BestBuy.ca.','Copy the URL and paste it here.'] }, { k:'homedepot_ca',label:'Home Depot Canada',hint:'HomeDepot.ca product URL', only:['Canada'], how:['Open your product on HomeDepot.ca.','Copy the URL and paste it here.'] }, { k:'cdntire', label:'Canadian Tire', hint:'Canadian Tire product URL', only:['Canada'], how:['Open your product on CanadianTire.ca.','Copy the URL and paste it here.'] }, { k:'asos', label:'ASOS', hint:'ASOS product URL', only:['UK'], how:['Open your product on ASOS.','Copy the URL and paste it here.'] }, { k:'currys', label:'Currys', hint:'Currys product URL', only:['UK'], how:['Open your product on Currys.co.uk.','Copy the URL and paste it here.'] }, { k:'zalando', label:'Zalando', hint:'Zalando product URL', only:['UK'], how:['Partner Program \u2192 Products \u2192 open the product.','Copy the URL and paste it here.'] }, { k:'catch', label:'Catch', hint:'Catch product URL', only:['Australia'], how:['Open your product in the Catch seller portal.','Copy the URL and paste it here.'] }, { k:'kogan', label:'Kogan', hint:'Kogan product URL', only:['Australia'], how:['Open your product in the Kogan seller portal.','Copy the URL and paste it here.'] }, { k:'mydeal', label:'MyDeal', hint:'MyDeal product URL', only:['Australia'], how:['Open your product in the MyDeal seller portal.','Copy the URL and paste it here.'] }, /* services */ { k:'google', label:'Google Business Profile', hint:'Google review share link or Maps URL', popular:true, service:true, how:['Go to your Business Profile (business.google.com).','Select \u2018Read Reviews\u2019 \u2192 \u2018Get more reviews\u2019.','Copy the share link and paste it here. (Or just paste your Google Maps business link.)'] }, { k:'trustpilot', label:'Trustpilot', hint:'Your website URL or domain', popular:true, service:true, how:['Enter your website address (e.g. yourbrand.com).','That\u2019s it \u2014 no account linking needed.'] }, { k:'zomato', label:'Zomato', hint:'Zomato restaurant URL', only:['India'], service:true, how:['Zomato for Business \u2192 View on Zomato.','Copy the restaurant URL and paste it here.'] }, { k:'facebook', label:'Facebook Page', hint:'Facebook Page URL', service:true, how:['Open your Facebook Page.','Copy the URL from the address bar and paste it here.','\u26a0\ufe0f Reviews/Recommendations must be turned ON in Page Settings \u2014 we check this for you.'] }, { k:'checkatrade', label:'Checkatrade', hint:'Checkatrade profile URL', only:['UK'], service:true, how:['Open your Checkatrade profile.','Copy the URL and paste it here.'] }, { k:'productreview',label:'ProductReview.com.au', hint:'ProductReview listing URL', only:['Australia'], service:true, how:['Search your brand on ProductReview.com.au.','Open your listing, copy the URL and paste it here.'] }, { k:'tripadvisor', label:'TripAdvisor', hint:'TripAdvisor listing URL', service:true, how:['Open your listing on TripAdvisor.','Copy the URL and paste it here. We extract everything automatically \u2014 no IDs to look up.'] }, /* custom — available everywhere, both types */ { k:'custom', label:'Add your own marketplace', hint:'Preferred review link (URL)', custom:true, how:['Open your listing or profile on the marketplace.','Copy the link to the page where customers leave reviews.','Paste it here with the marketplace name.'] }, ]; /* light format check per marketplace input */ const mktInputOk = (k, v) => { const s = (v || '').trim(); if (!s) return false; if (k === 'trustpilot') return /^(https?:\/\/)?(www\.)?[a-z0-9.-]+\.[a-z]{2,}/i.test(s); return /^(https?:\/\/)?\S+\.\S{2,}/.test(s); }; function AddProduct({ onNav }) { const [step, setStep] = React.useState(1); const [ltype, setLtype] = React.useState('product'); // product | service const [country, setCountry] = React.useState('India'); const [mkts, setMkts] = React.useState({}); const [productName, setProductName] = React.useState(''); const [bulletInputs, setBulletInputs] = React.useState(['','','','','']); const [tags, setTags] = React.useState([]); const [generating, setGenerating] = React.useState(false); const [aiError, setAiError] = React.useState(''); const [selectedTags, setSelectedTags] = React.useState([]); const [widgetStars, setWidgetStars] = React.useState(0); const [hoverStars, setHoverStars] = React.useState(0); const [image, setImage] = React.useState(null); const [customName, setCustomName] = React.useState(''); const [infoKey, setInfoKey] = React.useState(null); const [videos, setVideos] = React.useState([{url:'',tagline:'How to use',file:null}]); const [eduFiles, setEduFiles] = React.useState([{kind:'User manual',url:'',file:null},{kind:'Care instructions',url:'',file:null},{kind:'Product link',url:'',file:null}]); const toggleMkt = k => setMkts(p => { if (k in p) { const n={...p}; delete n[k]; return n; } return {...p, [k]:''}; }); const setMktUrl = (k, url) => setMkts(p => ({...p, [k]: url})); const selectedMktCount = Object.keys(mkts).length; const setBullet = (i, val) => { const n=[...bulletInputs]; n[i]=val; setBulletInputs(n); }; const toggleTag = tag => setSelectedTags(p => p.includes(tag)?p.filter(t=>t!==tag):[...p,tag]); const canNext = step===1 ? selectedMktCount>0 : step===2 ? productName.trim().length>0 : true; const loadImageFile = f => { if(!f || !f.type.startsWith('image/')) return; const r=new FileReader(); r.onload=()=>setImage(r.result); r.readAsDataURL(f); }; const AI_INSTRUCTIONS = `You convert product or service feature bullets into short, tappable keyword tags for a customer review widget. Each tag is the aspect a shopper would tap to say what they liked or disliked about that feature. Rules: Produce 1-2 tags per bullet. Return 3-5 tags total. 1-3 words each, Title Case, neutral aspect names only (no sentiment, no banned marketing words). Return ONLY a flat JSON array of strings.`; const goToPreview = async () => { const lines = bulletInputs.filter(Boolean); setGenerating(true); setAiError(''); setSelectedTags([]); try { if (lines.length) { const text = await window.claude.complete({ messages:[{role:'user', content:`${AI_INSTRUCTIONS}\n\nProduct features:\n${lines.map((l,i)=>`${i+1}. ${l}`).join('\n')}`}] }); const parsed = JSON.parse(text.trim()); setTags(Array.isArray(parsed) ? parsed.slice(0,5) : []); } } catch(e) { setAiError('Could not generate tags — try again.'); } finally { setGenerating(false); setStep(3); } }; /* ── Stepper ── */ const STEPS = [ { n:1, label:'Target & Marketplace' }, { n:2, label:'Product Details' }, { n:3, label:'Preview' }, ]; const StepBar = () => (
{STEPS.map((s,i) => (
s.n ? 'bg-accent-200 acc-text' : 'bg-gray-100 text-ink-muted')}> {step > s.n ? : s.n}
{s.label}
{i < STEPS.length-1 && (
s.n ? 'acc-bg' : 'bg-gray-200')} style={{minWidth:60}}/> )} ))}
); /* ══════════════════════════════════════════════════════ STEP 1 — Target & Marketplace ══════════════════════════════════════════════════════ */ const Step1 = () => (

What are you adding?

This sets the labels, review platforms and promotion types that apply.

{[['product','Physical product','Sold on marketplaces \u00b7 shipped'],['service','Service','Booked \u00b7 delivered in person or online']].map(([id,lb,hint])=>( ))}

Target Country

Select the primary market for this {ltype}.

{COUNTRIES.map(c => ( ))}

Marketplace Setup

{selectedMktCount > 0 && ( {selectedMktCount} active )}

Click a platform to activate it, then paste the product URL.

{(() => { const visible = MARKETPLACES.filter(m => (!m.only || m.only.includes(country)) && (m.custom || (ltype==='service' ? m.service : !m.service))); const card = m => { const sel = m.k in mkts; const info = infoKey === m.k; return (
toggleMkt(m.k)} className={"relative rounded-xl border-2 p-3 cursor-pointer transition-all select-none self-start " + (sel ? 'border-[var(--accent)] bg-[var(--accent-50)]' : 'border-gray-200 bg-white hover:border-gray-300')}>
{m.label} {m.how && ( )} {sel && }
{info && (
e.stopPropagation()} className="absolute left-2 right-2 top-[calc(100%-6px)] z-20 bg-white border border-line rounded-xl shadow-card p-3">

How to get it

    {m.how.map((s,i)=>(
  1. {i+1} {s}
    2. ))}
)} {sel && m.custom && (
e.stopPropagation()}> setCustomName(e.target.value)} placeholder="Marketplace name" className="w-full bg-white rounded-lg px-2.5 py-1.5 text-[11.5px] text-ink border border-[var(--accent-50)] outline-none focus:border-[var(--accent)] transition-colors"/>
)} {sel && (
e.stopPropagation()}> setMktUrl(m.k,e.target.value)} placeholder={m.hint} className="w-full bg-white rounded-lg pl-2.5 pr-7 py-1.5 text-[11.5px] text-ink border border-[var(--accent-50)] outline-none focus:border-[var(--accent)] transition-colors"/> {mkts[m.k] && (mktInputOk(m.k, mkts[m.k]) ? : )}
)}
); }; return [['Popular', visible.filter(m=>m.popular)], ['More marketplaces', visible.filter(m=>!m.popular)]].map(([g,list]) => list.length ? (

{g}

{list.map(card)}
) : null); })()}
); /* ══════════════════════════════════════════════════════ STEP 2 — Product Details ══════════════════════════════════════════════════════ */ const Step2 = () => (

{ltype==='service'?'Service Name':'Product Name'}

The name shown to customers in the review flow.

setProductName(e.target.value)}/>

{ltype==='service'?'Service Image':'Product Image'}

Shown to customers in the review flow.

{image ? (
Product
) : ( )}

{ltype==='service'?'Service Highlights':'Product Features'}

Enter up to 5 key {ltype==='service'?'highlights':'features'}. AI will generate tappable review tags from these on the next step.

{bulletInputs.map((val, i) => (
{i+1} setBullet(i,e.target.value)}/>
))}
{aiError && (
{aiError}
)}

Click Next to auto-generate AI review tags from these features.

Product Videos optional

Shown to customers in the claim funnel — setup guides, how-to demos. Paste a URL or upload a file.

Increases customer experience and reduces returns by 3X.

Super tip: Record a personal thank-you to your customers for choosing your brand — a 30-second hello turns a delivery into a relationship. 10X the experience.

{videos.map((v,i)=>(
{const n=[...videos];n[i]={...n[i],tagline:e.target.value};setVideos(n);}} placeholder="e.g. How to use" className="w-full h-10 rounded-xl border border-line bg-white pl-3 pr-7 text-[12.5px] font-semibold text-ink outline-none focus:border-[var(--accent)] placeholder:text-ink-soft"/>
{const n=[...videos];n[i]={...n[i],url:e.target.value,file:null};setVideos(n);}} placeholder="Paste YouTube / video URL" className="flex-1 h-10 rounded-xl border border-line bg-white px-3 text-[13px] text-ink outline-none focus:border-[var(--accent)] placeholder:text-ink-soft"/> {videos.length>1 && ( )}
))}
{videos.length<5 && ( )}

Guides & Links optional

Up to 3 resources shown below the video in the funnel — upload a PDF or paste a link.

Tip: add your brand store link for cross-selling.

{eduFiles.map((f,i)=>(
{const n=[...eduFiles];n[i]={...n[i],kind:e.target.value};setEduFiles(n);}} placeholder="e.g. User manual" className="w-full h-10 rounded-xl border border-line bg-white pl-3 pr-7 text-[12.5px] font-semibold text-ink outline-none focus:border-[var(--accent)] placeholder:text-ink-soft"/>
{const n=[...eduFiles];n[i]={...n[i],url:e.target.value,file:null};setEduFiles(n);}} placeholder={f.kind==='Product link' ? 'Paste product / storefront URL' : 'Paste link or upload PDF'} className="flex-1 h-10 rounded-xl border border-line bg-white px-3 text-[13px] text-ink outline-none focus:border-[var(--accent)] placeholder:text-ink-soft"/>
))}

These appear as “User manual · Care guide · Our products” links in the customer funnel.

{['How to use','Setup instructions','Unboxing','Care & maintenance','Troubleshooting'].map(t=> {['User manual','Care instructions','Product link','Warranty terms','Recipe book'].map(t=>
); /* ══════════════════════════════════════════════════════ STEP 3 — Preview ══════════════════════════════════════════════════════ */ const Step3 = () => (
{/* Left: summary + tags */}

{ltype==='service'?'Service Summary':'Product Summary'} click a card to edit

{image && Product}
{[ { label:'Type', val: ltype==='service'?'Service':'Product', go:1 }, { label:'Name', val: productName || '—', go:2 }, { label:'Country', val: country, go:1 }, { label:'Marketplaces',val: selectedMktCount || '—', go:1 }, { label:'Review Tags', val: tags.length || '—', go:2 }, { label:'Videos & Guides', val: (videos.filter(v=>v.url||v.file).length + eduFiles.filter(f=>f.url||f.file).length) || '—', go:2 }, ].map(row=>( ))}
{selectedMktCount > 0 && (
{Object.keys(mkts).map(k=>{ const m=MARKETPLACES.find(x=>x.k===k); if(!m) return null; const lbl = m.custom ? (customName.trim() || 'Custom marketplace') : m.label; return {lbl}; })}
)}
{tags.length > 0 && (

AI-Generated Review Tags

Customers will tap these in the review widget.

{tags.map((tag,i)=>( {tag} ))}
)} {bulletInputs.filter(Boolean).length > 0 && (

Product Features

    {bulletInputs.filter(Boolean).map((b,i)=>(
  • {i+1} {b}
    • ))}
)}
{/* Right: widget preview */}

Customer Widget Preview

ReviewBuddie
{image && }

How was your experience with

{productName || 'your product'}?

Overall Rating

{[1,2,3,4,5].map(s=>( ))}

What stood out?

{(tags.length ? tags : ['Build Quality','Battery Life','Camera']).map((tag,i)=>( ))} {!tags.length &&

Placeholder — your tags appear here

}
)}
Claim page will ask for
{asked.length ? asked.map(f=>{f}) : Nothing — informational promotion}
); } function CreatePromotion({ ctx, layout = 'Standard' }) { const PD = window.PROMOS_DATA || []; const getTH = () => window.TH_DATA || []; const initType = ctx?.type || 'Warranty'; const initIdx = TYPE_TO_PROMO_IDX[initType] ?? 0; const initPD = PD[initIdx] || {}; const [type, setType] = React.useState(initType); const [name, setName] = React.useState(''); const [title, setTitle] = React.useState(initPD.copies?.[0]?.t || ''); const [desc, setDesc] = React.useState(initPD.copies?.[0]?.s || ''); const [features, setFeatures] = React.useState((initPD.pills || []).slice(0,3).map(p=>p.lb)); const [themeIdx, setThemeIdx] = React.useState(initPD.th ?? 0); const [animIdx, setAnimIdx] = React.useState(0); const [ctaText, setCtaText] = React.useState(''); const [market, setMarket] = React.useState('India'); const [methods, setMethods] = React.useState(['upi']); const [orderIdMode, setOrderIdMode] = React.useState('required'); const [ltype, setLtype] = React.useState('product'); // product | service const [brand, setBrand] = React.useState((window.RB_BRANDS||[{name:'Brontix'}])[0]?.name || 'Brontix'); const promoIdx = TYPE_TO_PROMO_IDX[type] ?? 0; const pd = PD[promoIdx] || {}; const themes = getTH(); const valid = name.trim().length > 0; /* Reset card content when promotion type changes */ React.useEffect(() => { const idx = TYPE_TO_PROMO_IDX[type] ?? 0; const p = (window.PROMOS_DATA || [])[idx] || {}; setTitle(p.copies?.[0]?.t || ''); setDesc(p.copies?.[0]?.s || ''); setFeatures((p.pills || []).slice(0,3).map(x=>x.lb)); setThemeIdx(p.th ?? 0); setAnimIdx(0); }, [type]); const updateFeature = (i, val) => { const nf = [...features]; nf[i] = val; setFeatures(nf); }; /* helpers: does current text exactly match a preset? */ const titlePresetVal = (pd.copies||[]).some(cp=>cp.t===title) ? title : '__custom__'; const descPresetVal = (pd.copies||[]).some(cp=>cp.s===desc) ? desc : '__custom__'; /* ── Clean (canvas) layout ─────────────────────────────────────── */ if (layout === 'Clean') return ( <>
{/* Top bar: name · type · theme · create */}
setName(e.target.value)} className="w-52"/>
{themes.map((th,i)=>(
Create Promotion
{/* Controls + Card */}
{/* Controls column */}
{/* Title */}
cp.t)}/>
{/* Subtitle */}
cp.s)}/>
{/* CTA */}
{/* Animation */}
{typeof AnimPicker !== 'undefined' && ( )}
{/* Feature pills */}
{[0,1,2].map(i=>( updateFeature(i,e.target.value)}/> ))}
This promotion is for : {[['product','Product'],['service','Service']].map(([id,lb])=>( ))}
{/* Live card — fixed 360px, right side */}
{typeof PromoCard !== 'undefined' && ( )}
); return ( <>
{/* ── Left: form ── */} {/* Type + Name + Brand — two columns */}
setName(e.target.value)}/>
{/* Title */}
cp.t)}/>
{/* Animation picker — below title */} {typeof AnimPicker !== 'undefined' && (
Animation
)} {/* Subtitle */}
cp.s)}/>
{/* CTA button text */}
{/* Feature pills */}
Feature Pills
{[0,1,2].map(i => ( updateFeature(i, e.target.value)}/> ))}
This promotion is for : {[['product','Product'],['service','Service']].map(([id,lb])=>( ))}
Create Promotion
{/* ── Right: live card preview ── */}
{/* Theme dots */}
Theme
{themes.map((t, i) => (
{/* Card */} {typeof PromoCard !== 'undefined' && ( )}
); } const PromoStockImg = ({ kind }) => { const map = { 'shield': , 'star-seal': , 'trophy': , 'badge': , 'coupon-stock': , }; return map[kind] || map['shield']; }; function PromoPreviewScreen({ title, desc, imgKind }) { return (
⚡ Brontix

{title}

{desc}

); } /* ── ADD CAMPAIGN ──────────────────────────────────────────────────────────── */ function AddCampaign() { const [name, setName] = React.useState(''); return ( <>

Campaign Details

setName(e.target.value)}/>
Create Campaign

Extend Your
Protection!
); } /* ── PACKAGE INSERTS ───────────────────────────────────────────────────────── */ /* decorative branded QR — deterministic fake module pattern, real gen wired later */ function BrandedQR({ size=112, color='#1B2733', dot='square', logo=true, frame, frameColor }) { const N=21, cell=size/N, mods=[]; const inEye=(r,c)=>(r<7&&c<7)||(r<7&&c>=N-7)||(r>=N-7&&c<7); const inLogo=(r,c)=>logo && r>=8&&r<=12&&c>=8&&c<=12; for(let r=0;r( ); return (
{mods.map(([r,c])=>dot==='dots' ? : )} {eye(0,0)}{eye(N-7,0)}{eye(0,N-7)} {logo && B}
{frame && {frame}}
); } function PackageInserts() { const [title, setTitle] = React.useState(''); const [sub, setSub] = React.useState(''); const [bg, setBg] = React.useState('#FFFFFF'); const [url, setUrl] = React.useState(''); const [qrColor, setQrColor] = React.useState('#1B2733'); const [qrDot, setQrDot] = React.useState('square'); const [qrLogo, setQrLogo] = React.useState(true); const [qrFrame, setQrFrame] = React.useState(true); const [qrCta, setQrCta] = React.useState(''); const contrastOk = (h=>{const n=parseInt((h||'#000').slice(1),16);const L=0.2126*(n>>16&255)+0.7152*(n>>8&255)+0.0722*(n&255);return L<160;})(qrColor); return ( <>
Upload your brand logo

Drag your file(s) or browse

setTitle(e.target.value)}/>
setBg(e.target.value)} placeholder="#ffffff"/> setBg(e.target.value)} className="w-12 h-11 rounded-lg border border-gray-200 cursor-pointer"/>