// 1Radar v3 — Shopify Stores & Product Import // ─── Mock data ──────────────────────────────────────────────────────────────── const MOCK_STORES = [ { id: 's1', name: 'Monarch Paris', domain: 'monarch-paris.myshopify.com', status: 'connected', productsCount: 142, collectionsCount: 18, currency: 'EUR', syncedAt: '2025-05-11T14:32:00Z', }, { id: 's2', name: 'Glossier US', domain: 'glossier.myshopify.com', status: 'connected', productsCount: 89, collectionsCount: 12, currency: 'USD', syncedAt: '2025-05-10T09:15:00Z', }, ]; const MOCK_CATALOG = { s1: { products: [ { id: 'p1', title: 'Radiance Glow Serum', collection: 'Face Care', price: '58.00', image: null, status: 'active', vendor: 'Monarch Paris' }, { id: 'p2', title: '24h Hydrating Cream', collection: 'Face Care', price: '42.00', image: null, status: 'active', vendor: 'Monarch Paris' }, { id: 'p3', title: 'Precious Dry Oil', collection: 'Body & Spa', price: '36.00', image: null, status: 'active', vendor: 'Monarch Paris' }, { id: 'p4', title: 'Clay Detox Mask', collection: 'Face Care', price: '28.00', image: null, status: 'draft', vendor: 'Monarch Paris' }, { id: 'p5', title: 'Gentle Micellar Water', collection: 'Cleansers', price: '22.00', image: null, status: 'active', vendor: 'Monarch Paris' }, { id: 'p6', title: 'Honey Lip Balm', collection: 'Lips', price: '14.00', image: null, status: 'active', vendor: 'Monarch Paris' }, { id: 'p7', title: 'Eye Contour Concentrate', collection: 'Face Care', price: '64.00', image: null, status: 'active', vendor: 'Monarch Paris' }, { id: 'p8', title: 'Autumn Ritual Gift Set', collection: 'Gift Sets', price: '98.00', image: null, status: 'active', vendor: 'Monarch Paris' }, ], collections: [ { id: 'c1', title: 'Face Care', productsCount: 4, image: null }, { id: 'c2', title: 'Body & Spa', productsCount: 1, image: null }, { id: 'c3', title: 'Cleansers', productsCount: 1, image: null }, { id: 'c4', title: 'Lips', productsCount: 1, image: null }, { id: 'c5', title: 'Gift Sets', productsCount: 1, image: null }, ], }, s2: { products: [ { id: 'p9', title: 'Boy Brow', collection: 'Brows', price: '18.00', image: null, status: 'active', vendor: 'Glossier' }, { id: 'p10', title: 'Cloud Paint', collection: 'Cheeks', price: '22.00', image: null, status: 'active', vendor: 'Glossier' }, { id: 'p11', title: 'Milky Jelly Cleanser', collection: 'Skin', price: '19.00', image: null, status: 'active', vendor: 'Glossier' }, { id: 'p12', title: 'Priming Moisturizer', collection: 'Skin', price: '25.00', image: null, status: 'active', vendor: 'Glossier' }, { id: 'p13', title: 'You Eau de Parfum', collection: 'Fragrance', price: '68.00', image: null, status: 'active', vendor: 'Glossier' }, ], collections: [ { id: 'c6', title: 'Brows', productsCount: 1, image: null }, { id: 'c7', title: 'Cheeks', productsCount: 1, image: null }, { id: 'c8', title: 'Skin', productsCount: 2, image: null }, { id: 'c9', title: 'Fragrance', productsCount: 1, image: null }, ], }, }; // ─── Helpers ────────────────────────────────────────────────────────────────── const timeSince = (iso) => { const d = new Date(iso); const mins = Math.floor((Date.now() - d) / 60000); if (mins < 60) return `${mins}m ago`; const hrs = Math.floor(mins / 60); if (hrs < 24) return `${hrs}h ago`; return `${Math.floor(hrs / 24)}d ago`; }; const productInitials = (title) => title.split(' ').slice(0, 2).map(w => w[0]).join('').toUpperCase(); // ─── Sub-components ─────────────────────────────────────────────────────────── const StatusDot = ({ status }) => ( ); const StoreCard = ({ store, onSync, onDisconnect }) => (
{store.name[0]}
{store.name}
{store.domain}
{store.status === 'connected' ? 'Connected' : 'Disconnected'}
{store.productsCount} products {store.collectionsCount} collections Synced {timeSince(store.syncedAt)}
); // Modal — confirm store disconnection const DisconnectConfirmModal = ({ store, onClose, onConfirm }) => (
{ if (e.target === e.currentTarget) onClose(); }}>
Disconnect {store.name}?
This will remove {store.domain} from 1Radar. Previously imported products will not be deleted.
); // Modal — connect a new store const ConnectStoreModal = ({ onClose, onConnect }) => { const [domain, setDomain] = React.useState(''); const [token, setToken] = React.useState(''); const [step, setStep] = React.useState(1); // 1 = form, 2 = loading, 3 = success const [error, setError] = React.useState(''); const handleConnect = () => { if (!domain.trim()) { setError('Please enter your store domain.'); return; } if (!token.trim()) { setError('Admin API token is required.'); return; } setError(''); setStep(2); setTimeout(() => setStep(3), 1800); }; const handleDone = () => { onConnect({ id: 's' + Date.now(), name: domain.split('.')[0].replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase()), domain: domain.includes('.') ? domain : domain + '.myshopify.com', status: 'connected', productsCount: 0, collectionsCount: 0, currency: 'USD', syncedAt: new Date().toISOString(), }); onClose(); }; return (
{ if (e.target === e.currentTarget) onClose(); }}>
{/* Header */}
Connect a Shopify store
Enter your Shopify access credentials
{/* Body */}
{step === 1 && (
{/* Info banner */}
Connect via Admin API
Create a private Shopify app to get your token
Guide
setDomain(e.target.value)} placeholder="my-store.myshopify.com" style={{ flex: 1, background: 'none', border: 'none', outline: 'none', fontSize: 14, color: 'var(--text)' }} />
setToken(e.target.value)} placeholder="shpat_••••••••••••••••••••••" style={{ flex: 1, background: 'none', border: 'none', outline: 'none', fontSize: 14, color: 'var(--text)', fontFamily: 'var(--font-mono)' }} />
{error && (
{error}
)}
)} {step === 2 && (
Connecting…
Verifying Shopify credentials
)} {step === 3 && (
Store connected!
Products are syncing in the background
)}
); }; // Shared: destination store picker (shown after product selection) const DestinationPicker = ({ stores, value, onChange }) => (
); // Shared: spinner line const Spinner = ({ label }) => (
{label}
); // Shared: checkbox row const CheckRow = ({ item, checked, onToggle, subtitle, badge }) => (
{checked && }
{productInitials(item.title)}
{item.title}
{subtitle}
{badge}
); // Tab: import from a product URL → push to a connected store const ImportByProductUrl = ({ stores }) => { const [url, setUrl] = React.useState(''); const [fetchStatus, setFetchStatus] = React.useState('idle'); // idle | loading | done const [result, setResult] = React.useState(null); const [destId, setDestId] = React.useState(stores[0]?.id || ''); const [pushStatus, setPushStatus] = React.useState('idle'); // idle | loading | success const handleFetch = () => { if (!url.trim()) return; setFetchStatus('loading'); setResult(null); setPushStatus('idle'); setTimeout(() => { setResult({ title: 'Radiance Glow Serum — Limited Edition', price: '58.00', currency: 'USD', variants: 3, images: 4, vendor: 'Glossier', collection: 'Face Care', status: 'active', }); setFetchStatus('done'); }, 1400); }; const handlePush = () => { setPushStatus('loading'); setTimeout(() => setPushStatus('success'), 1200); }; const dest = stores.find(s => s.id === destId); return (
Paste any product URL (competitor, supplier…). 1Radar fetches the product data and pushes it directly into your Shopify store.
{/* Step 1 — URL */}
{ setUrl(e.target.value); setFetchStatus('idle'); setResult(null); setPushStatus('idle'); }} placeholder="https://competitor.com/products/…" style={{ flex: 1, background: 'none', border: 'none', outline: 'none', fontSize: 13, color: 'var(--text)' }} onKeyDown={e => { if (e.key === 'Enter') handleFetch(); }} /> {url && ( )}
{fetchStatus === 'loading' && } {/* Step 2 — Preview + destination + push */} {fetchStatus === 'done' && result && (
{/* Preview card */}
Product found
{productInitials(result.title)}
{result.title}
{result.vendor} · {result.collection}
{result.currency} {result.price} {result.variants} variant{result.variants > 1 ? 's' : ''} {result.images} image{result.images > 1 ? 's' : ''} {result.status === 'active' ? 'Active' : 'Draft'}
{/* Destination + push */} {pushStatus !== 'success' && ( <> )} {pushStatus === 'success' && (
Product successfully added to {dest?.name}
)}
)}
); }; // Tab: import from a collection URL → pick products → push to a connected store const ImportByCollectionUrl = ({ stores }) => { const [url, setUrl] = React.useState(''); const [fetchStatus, setFetchStatus] = React.useState('idle'); const [results, setResults] = React.useState([]); const [selected, setSelected] = React.useState(new Set()); const [destId, setDestId] = React.useState(stores[0]?.id || ''); const [pushStatus, setPushStatus] = React.useState('idle'); const handleFetch = () => { if (!url.trim()) return; setFetchStatus('loading'); setSelected(new Set()); setPushStatus('idle'); setTimeout(() => { setResults(MOCK_CATALOG['s1'].products.slice(0, 5)); setFetchStatus('done'); }, 1600); }; const toggleAll = () => { if (selected.size === results.length) setSelected(new Set()); else setSelected(new Set(results.map(p => p.id))); }; const toggleOne = (id) => setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); const handlePush = () => { setPushStatus('loading'); setTimeout(() => setPushStatus('success'), 1400); }; const dest = stores.find(s => s.id === destId); return (
Paste a collection URL. 1Radar fetches all products in it — select the ones to push to your store.
{/* URL row */}
{ setUrl(e.target.value); setFetchStatus('idle'); setResults([]); setPushStatus('idle'); }} placeholder="https://competitor.com/collections/…" style={{ flex: 1, background: 'none', border: 'none', outline: 'none', fontSize: 13, color: 'var(--text)' }} onKeyDown={e => { if (e.key === 'Enter') handleFetch(); }} /> {url && ( )}
{fetchStatus === 'loading' && } {fetchStatus === 'done' && results.length > 0 && (
{/* Product list */}
{results.length} products found {selected.size > 0 && ( {selected.size} selected )}
{results.map((product, i) => (
toggleOne(product.id)} subtitle={`${product.collection} · ${product.price}`} badge={ {product.status === 'active' ? 'Active' : 'Draft'} } />
))}
{/* Destination + push */} {selected.size > 0 && pushStatus !== 'success' && ( <> )} {pushStatus === 'success' && (
{selected.size} product{selected.size > 1 ? 's' : ''} successfully added to {dest?.name}
)}
)}
); }; // Tab: browse any store catalog → select → push to a connected store const ImportGlobal = ({ stores }) => { const [sourceUrl, setSourceUrl] = React.useState(''); const [tab, setTab] = React.useState('products'); const [search, setSearch] = React.useState(''); const [selected, setSelected] = React.useState(new Set()); const [loading, setLoading] = React.useState(false); const [loaded, setLoaded] = React.useState(false); const [destId, setDestId] = React.useState(stores[0]?.id || ''); const [pushStatus, setPushStatus] = React.useState('idle'); const [expandedCollections, setExpandedCollections] = React.useState(new Set()); const toggleExpand = (id) => setExpandedCollections(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); // Simulate fetching catalog from the source URL (uses mock s1) const catalog = loaded ? (MOCK_CATALOG['s1'] || { products: [], collections: [] }) : { products: [], collections: [] }; const dest = stores.find(s => s.id === destId); const handleLoad = () => { if (!sourceUrl.trim()) return; setLoading(true); setLoaded(false); setSelected(new Set()); setSearch(''); setPushStatus('idle'); setTimeout(() => { setLoading(false); setLoaded(true); }, 1200); }; React.useEffect(() => { setLoaded(false); setSelected(new Set()); setSearch(''); setPushStatus('idle'); }, [sourceUrl]); const filteredProducts = catalog.products.filter(p => p.title.toLowerCase().includes(search.toLowerCase()) || p.collection.toLowerCase().includes(search.toLowerCase()) ); const filteredCollections = catalog.collections.filter(c => c.title.toLowerCase().includes(search.toLowerCase()) ); const items = tab === 'products' ? filteredProducts : filteredCollections; // All product IDs visible in the current tab (products in collections tab too) const getColProducts = (col) => catalog.products.filter(p => p.collection === col.title); const allVisibleProductIds = tab === 'products' ? filteredProducts.map(p => p.id) : filteredCollections.flatMap(c => getColProducts(c).map(p => p.id)); const allSelected = allVisibleProductIds.length > 0 && allVisibleProductIds.every(id => selected.has(id)); const toggleOne = (id) => setSelected(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); const toggleCollection = (col) => { const ids = getColProducts(col).map(p => p.id); const allSel = ids.every(id => selected.has(id)); setSelected(s => { const n = new Set(s); allSel ? ids.forEach(id => n.delete(id)) : ids.forEach(id => n.add(id)); return n; }); }; const toggleAll = () => { if (allSelected) setSelected(new Set()); else setSelected(new Set(allVisibleProductIds)); }; const handlePush = () => { setPushStatus('loading'); setTimeout(() => setPushStatus('success'), 1400); }; return (
Enter any Shopify store URL to browse its full catalog. Pick the products and collections you want, then push them to one of your stores.
{/* Source URL + load */}
setSourceUrl(e.target.value)} placeholder="https://competitor.myshopify.com" style={{ flex: 1, background: 'none', border: 'none', outline: 'none', fontSize: 13, color: 'var(--text)' }} onKeyDown={e => { if (e.key === 'Enter') handleLoad(); }} />
{!loaded && !loading && (
No catalog loaded
Enter a store URL above to browse its products
)} {loading && } {loaded && (
{/* Toolbar */}
{/* Tabs */}
{[ { id: 'products', label: 'Products', count: catalog.products.length }, { id: 'collections', label: 'Collections', count: catalog.collections.length }, ].map(t => ( ))}
{/* Search */}
setSearch(e.target.value)} placeholder={tab === 'products' ? 'Filter products…' : 'Filter collections…'} style={{ flex: 1, background: 'none', border: 'none', outline: 'none', fontSize: 12, color: 'var(--text)' }}/> {search && }
{/* Select all */}
{/* List */}
{items.length === 0 ? (
No results for "{search}"
) : tab === 'products' ? items.map((item, i) => (
toggleOne(item.id)} subtitle={`${item.collection} · ${item.price}`} badge={ {item.status === 'active' ? 'Active' : 'Draft'} } />
)) : items.map((col, i) => { const isExpanded = expandedCollections.has(col.id); const cProds = getColProducts(col); const colAllSel = cProds.length > 0 && cProds.every(p => selected.has(p.id)); const colSomeSel = !colAllSel && cProds.some(p => selected.has(p.id)); return (
{/* Collection header row */}
toggleCollection(col)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px', cursor: 'pointer', background: colAllSel ? 'var(--accent-soft)' : colSomeSel ? 'var(--bg-soft)' : 'transparent', transition: 'background .1s', }} >
{colAllSel && } {colSomeSel &&
}
{productInitials(col.title)}
{col.title}
{cProds.filter(p => selected.has(p.id)).length ? `${cProds.filter(p => selected.has(p.id)).length} / ${col.productsCount} selected` : `${col.productsCount} product${col.productsCount !== 1 ? 's' : ''}` }
{/* Expanded products */} {isExpanded && (
{cProds.length === 0 ? (
No products in this collection
) : cProds.map((p, j) => (
toggleOne(p.id)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px 9px 46px', borderTop: j ? '1px solid var(--border-soft)' : 'none', cursor: 'pointer', background: selected.has(p.id) ? 'var(--accent-soft)' : 'transparent', transition: 'background .1s', }} >
{selected.has(p.id) && }
{productInitials(p.title)}
{p.title}
{p.vendor} · {p.price}
{p.status === 'active' ? 'Active' : 'Draft'}
))}
)}
); })}
{/* Destination + push */} {selected.size > 0 && pushStatus !== 'success' && ( <> )} {pushStatus === 'success' && (
{selected.size} item{selected.size > 1 ? 's' : ''} successfully pushed to {dest?.name}
)}
)}
); }; // ─── Main screen ────────────────────────────────────────────────────────────── const ShopifyV3 = () => { const [stores, setStores] = React.useState(MOCK_STORES); const [importTab, setImportTab] = React.useState('product'); // product | collection | global const [connectOpen, setConnectOpen] = React.useState(false); const [disconnectTarget, setDisconnectTarget] = React.useState(null); const handleConnect = (newStore) => { setStores(prev => [...prev, newStore]); }; const handleSync = (id) => {}; const handleDisconnect = (id) => { setStores(prev => prev.filter(s => s.id !== id)); setDisconnectTarget(null); }; const IMPORT_TABS = [ { id: 'product', label: 'Product link', icon: 'link', desc: 'Import a single product' }, { id: 'collection', label: 'Collection link', icon: 'bookmark', desc: 'All products from a collection' }, { id: 'global', label: 'Browse catalog', icon: 'globe', desc: 'Pick products & collections' }, ]; return ( <> setConnectOpen(true)}> Connect a store } />
{/* ── Connected stores ── */}
Connected stores
{stores.length} store{stores.length !== 1 ? 's' : ''} · Click a store to use it in the import panel
{stores.length === 0 ? (
No stores connected
Connect your first Shopify store to start importing products
) : (
{stores.map(store => ( setDisconnectTarget(store)} /> ))}
)}
{/* ── Import panel ── */} {stores.length > 0 && (
Import products
Choose your import mode
{/* Mode selector */}
{IMPORT_TABS.map(t => { const active = importTab === t.id; return ( ); })}
{importTab === 'product' && } {importTab === 'collection' && } {importTab === 'global' && }
)}
{connectOpen && ( setConnectOpen(false)} onConnect={handleConnect} /> )} {disconnectTarget && ( setDisconnectTarget(null)} onConfirm={() => handleDisconnect(disconnectTarget.id)} /> )} ); };