import React, { useState, useEffect, useRef } from 'react'; import { Video, ShoppingBag, Settings, Layout, Play, Plus, Trash2, Save, ExternalLink, Monitor, Smartphone, RotateCcw, RotateCw, Maximize, Volume2, Settings as SettingsIcon, ChevronLeft, ChevronRight, Type, Circle, CheckCircle2 } from 'lucide-react'; function App() { const [activeTab, setActiveTab] = useState('design'); const [device, setDevice] = useState('desktop'); const [isEnabled, setIsEnabled] = useState(false); const isEnabledRef = useRef(false); // Keep ref in sync useEffect(() => { isEnabledRef.current = isEnabled; }, [isEnabled]); const [activeFeature, setActiveFeature] = useState('gallery'); // 'gallery' or 'reels' const [isFeatureModalOpen, setIsFeatureModalOpen] = useState(false); const [isGalleryEnabled, setIsGalleryEnabled] = useState(true); const [isReelsEnabled, setIsReelsEnabled] = useState(true); const [isReelsAutoplayEnabled, setIsReelsAutoplayEnabled] = useState(true); const [reelsTitle, setReelsTitle] = useState('Tagged with Reels'); const [isMobileCartOverlay, setIsMobileCartOverlay] = useState(true); const [mobileCartBgColor, setMobileCartBgColor] = useState('rgba(30, 41, 59, 0.7)'); const [mobileCartBgOpacity, setMobileCartBgOpacity] = useState(70); const [mobileCartTextColor, setMobileCartTextColor] = useState('#ffffff'); const [mobileCartBtnColor, setMobileCartBtnColor] = useState('#ffffff'); const [mobileCartBtnTextColor, setMobileCartBtnTextColor] = useState('#1E293B'); const [mobileCartBtnOpacity, setMobileCartBtnOpacity] = useState(100); const [layoutStyle, setLayoutStyle] = useState('Carousel (Horizontal)'); const [cornerRadius, setCornerRadius] = useState(8); const [titleSize, setTitleSize] = useState('16px'); const [titleColor, setTitleColor] = useState('#000000'); const [isSaving, setIsSaving] = useState(false); const [toast, setToast] = useState(null); // { message, type: 'success'|'error' } const [isLicenseModalOpen, setIsLicenseModalOpen] = useState(false); useEffect(() => { fetchSettings(); }, []); const fetchSettings = async () => { try { const baseUrl = window.wiseModuleData?.apiUrl || '/wp-json/wisecampaign/v1/'; const res = await fetch(`${baseUrl}video-commerce/settings`); if (res.ok) { const data = await res.json(); if (data) { setIsEnabled(data.status === 'active'); setActiveFeature(data.activeFeature || 'gallery'); setIsGalleryEnabled(data.galleryEnabled !== false); setIsReelsEnabled(data.reelsEnabled !== false); setIsReelsAutoplayEnabled(data.reelsAutoplayEnabled !== false); setReelsTitle(data.reelsTitle || 'Tagged with Reels'); setIsMobileCartOverlay(data.mobileCartOverlay === true); setMobileCartBgColor(data.mobileCartBgColor || 'rgba(30, 41, 59, 0.7)'); setMobileCartBgOpacity(data.mobileCartBgOpacity !== undefined ? data.mobileCartBgOpacity : 70); setMobileCartTextColor(data.mobileCartTextColor || '#ffffff'); setMobileCartBtnColor(data.mobileCartBtnColor || '#ffffff'); setMobileCartBtnTextColor(data.mobileCartBtnTextColor || '#1E293B'); setMobileCartBtnOpacity(data.mobileCartBtnOpacity !== undefined ? data.mobileCartBtnOpacity : 100); setLayoutStyle(data.layoutStyle || 'Carousel (Horizontal)'); setCornerRadius(data.cornerRadius || 8); setTitleSize(data.titleSize || '16px'); setTitleColor(data.titleColor || '#000000'); } } } catch (error) { console.error("Error fetching settings:", error); } }; const handleSave = async (statusOverride = null) => { setIsSaving(true); console.log('WiseVideo: Saving settings...', { statusOverride }); try { const baseUrl = window.wiseModuleData?.apiUrl || '/wp-json/wisecampaign/v1/'; const nonce = window.wiseModuleData?.nonce || window.wpApiSettings?.nonce || ''; console.log('WiseVideo: nonce available:', !!nonce); const res = await fetch(`${baseUrl}video-commerce/settings`, { method: 'POST', headers: { 'Content-Type': 'application/json', ...(nonce ? { 'X-WP-Nonce': nonce } : {}) }, body: JSON.stringify({ status: isEnabledRef.current ? 'active' : 'inactive', activeFeature, galleryEnabled: isGalleryEnabled, reelsEnabled: isReelsEnabled, reelsAutoplayEnabled: isReelsAutoplayEnabled, reelsTitle: reelsTitle, mobileCartOverlay: isMobileCartOverlay, mobileCartBgColor: mobileCartBgColor, mobileCartBgOpacity: mobileCartBgOpacity, mobileCartTextColor: mobileCartTextColor, mobileCartBtnColor: mobileCartBtnColor, mobileCartBtnTextColor: mobileCartBtnTextColor, mobileCartBtnOpacity: mobileCartBtnOpacity, layoutStyle, cornerRadius, titleSize, titleColor }) }); const data = await res.json(); console.log('WiseVideo: Response received', data); if (res.ok) { setToast({ message: 'Settings saved successfully!', type: 'success' }); setTimeout(() => setToast(null), 3000); } else { console.error('WiseVideo: API Error', data); setToast({ message: 'Failed to save settings.', type: 'error' }); setTimeout(() => setToast(null), 3000); } } catch (error) { console.error("WiseVideo: Network Error", error); setToast({ message: 'Network error. Please try again.', type: 'error' }); setTimeout(() => setToast(null), 3000); } finally { setIsSaving(false); } }; return ( {/* License Activation Modal */} {isLicenseModalOpen && (
e.stopPropagation()} >

Pro License Required

WiseVideo Commerce is a premium feature. You must have the wiseCampaign Pro plugin installed and an active license key to enable this widget.

Activate License Key
)} {/* Feature Selection Modal */} {isFeatureModalOpen && (
e.stopPropagation()} >

Select Active Feature

Choose the primary video commerce experience for your store.

{/* Feature 1: Gallery */}
{ setActiveFeature('gallery'); setIsFeatureModalOpen(false); }} className={`p-6 rounded-2xl border-2 cursor-pointer transition-all hover:shadow-xl group ${activeFeature === 'gallery' ? 'border-emerald-500 bg-emerald-50/30' : 'border-slate-100 hover:border-emerald-200 bg-white'}`} >

Product gallery videos

Replace standard product images with high-converting video galleries and shoppable overlays.

{activeFeature === 'gallery' ? ( <> Active & Editing ) : ( 'Select to Activate' )}
{/* Feature 2: Reels */}
{ setActiveFeature('reels'); setIsFeatureModalOpen(false); }} className={`p-6 rounded-2xl border-2 cursor-pointer transition-all hover:shadow-xl group ${activeFeature === 'reels' ? 'border-emerald-500 bg-emerald-50/30' : 'border-slate-100 hover:border-emerald-200 bg-white'}`} >

Product Reels (UGC)

Embed vertical customer UGC videos under the add to cart button to strengthen social proof.

{activeFeature === 'reels' ? ( <> Active & Editing ) : ( 'Select to Activate' )}

More features coming soon...

)}
{/* Header */}
wiseCampaign
WiseVideo Commerce Editor
{toast && ( {toast.type === 'success' ? : } {toast.message} )}
{/* Left Controls Sidebar */} {/* Preview Area */}
{/* Browser Mockup */}
{/* Browser Bar */}
mystore.com/products/bag
{/* Page Content View */}
{/* Left: Video & Gallery */}
{activeFeature === 'gallery' && (
Product {/* Video Overlays */}
{/* Controls Overlays */}
{/* Bottom Controls Bar */}
{/* Mobile Add to Cart Overlay Preview */} {device === 'mobile' && isMobileCartOverlay && (
0 ? 'blur(10px)' : 'none', border: mobileCartBgOpacity > 0 ? '1px solid rgba(255,255,255,0.1)' : 'none', boxShadow: mobileCartBgOpacity > 0 ? '0 10px 30px rgba(0,0,0,0.3)' : 'none' }} >

The Rouge Carry

$200.00

)}
)} {activeFeature === 'gallery' && ( /* Gallery Thumbnails */
{[1,2,3,4,5].map((i) => (
))}
)} {activeFeature === 'reels' && ( /* Static Placeholder for Reels in left col if needed, but they show under Add to Cart */
)}
{/* Right: Product Details */}

The Rouge Carry

$200.00 – $900.00

1
{activeFeature === 'reels' && isReelsEnabled && (

{reelsTitle}

{[1,2,3,4].map((i) => (
{/* User Info overlay (UGC feel) */}
@user_{i}
))}
)}
{/* WiseVideo Widget Placeholder */}
WiseVideo Widget

See it in action

{[1,2,3,4].map((i) => (
))}
{/* Preview Disabled Overlay */} {!isEnabled && (

Preview Disabled

Activate the widget status in the sidebar to enable the live preview mode.

)}
); } export default App;