/** * Shois Chat Button — Template Editor * * 3-column layout: left sidebar (tabs) | center (controls) | right (live preview). * * @package ShoisChatButton */ import { useState, useCallback, useEffect, Component } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import apiFetch from '@wordpress/api-fetch'; import DesignTab from './editor/DesignTab'; import ContentTab from './editor/ContentTab'; import BehaviorTab from './editor/BehaviorTab'; import AnimationsTab from './AnimationsTab'; const EDITOR_TABS = [ { id: 'design', label: __('Design', 'shois-chat-button'), icon: '🎨' }, { id: 'content', label: __('Content', 'shois-chat-button'), icon: '✏️' }, { id: 'behavior', label: __('Behavior', 'shois-chat-button'), icon: '⚙️' }, { id: 'animations', label: __('Animations', 'shois-chat-button'), icon: '🎭' }, ]; /** * Live Preview panel. * * @param {Object} props Component props. * @param {Object} props.config Template config to preview. * @return {JSX.Element} Preview panel. */ const ICON_SVG = { chat: '', chat_dots: '', headset: '', help: '', phone: '', mail: '', whatsapp: '', telegram: '', messenger: '', instagram: '', viber: '', discord: '', line: '', skype: '', tiktok: '', }; /** * Live Preview panel. * * @param {Object} props Component props. * @return {JSX.Element} Preview panel. */ function LivePreview({ config }) { const templateSlug = config.template_slug || 'classic-green'; const primaryColor = config.primary_color || '#5170ff'; const headerBg = config.header_bg_color || primaryColor; const headerTextColor = config.header_text_color || '#ffffff'; const textColor = config.text_color || '#1e293b'; const bgColor = config.bg_color || '#ffffff'; // Use real widget values but they will be scaled down by CSS const popupWidth = config.popup_width || 360; const btnSize = config.btn_size || 60; const iconSize = config.icon_size || 24; const btnRadius = config.radius_btn !== undefined ? config.radius_btn : 50; const popupRadius = config.radius_popup !== undefined ? config.radius_popup : 16; const triggerIcon = config.trigger_icon || 'whatsapp'; const iconColor = config.icon_color || '#ffffff'; // Position in mocksite (scaled) const positionStyles = { bottom: config.position?.includes('bottom') ? '10px' : 'auto', top: config.position?.includes('top') ? '10px' : 'auto', right: config.position?.includes('right') ? '10px' : 'auto', left: config.position?.includes('left') ? '10px' : 'auto', }; return (
{__('Live Preview', 'shois-chat-button')}
{ /* Widget preview — Scaled container */}
{ /* Popup preview */}
{config.header_title || 'Chat with us! 👋'}
{config.header_subtitle || 'We reply within minutes'}

{config.welcome_message || 'Hi! How can we help you today?'}

D
Demo Agent
Online now
{ /* Popup Footer preview */}
{config.footer_text || 'Powered by Shois Chat Button'}
{ /* Trigger button preview */}
); } /** * Default color tokens for each template directly extracted from their CSS variables. */ export const TEMPLATE_DEFAULTS = { 'classic-green': { primary_color: '#00ff6e', header_bg_color: '#00ff6e', header_text_color: '#ffffff', text_color: '#333333', bg_color: '#ffffff', agent_bg_color: '#f8faf9', agent_text_color: '#1e293b' }, 'dark-elegance': { primary_color: '#8b5cf6', header_bg_color: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)', header_text_color: '#ffffff', text_color: '#e2e8f0', bg_color: '#1a1a2e' }, 'gradient-sunset': { primary_color: '#f97316', header_bg_color: 'linear-gradient(135deg, #f97316 0%, #ec4899 100%)', header_text_color: '#ffffff', text_color: '#1e293b', bg_color: '#ffffff' }, 'minimal-white': { primary_color: '#0f172a', header_bg_color: '#ffffff', header_text_color: '#0f172a', text_color: '#1e293b', bg_color: '#ffffff', agent_bg_color: '#fafafa', agent_text_color: '#1e293b' }, 'ivory-prism': { primary_color: '#FF5C3A', header_bg_color: '#1A0F0A', header_text_color: '#FFF8F0', text_color: '#2C1A10', bg_color: '#FDFAF6' }, 'bubblegum': { primary_color: '#FF6B9D', header_bg_color: 'linear-gradient(135deg, #FF6B9D 0%, #C084FC 100%)', header_text_color: '#ffffff', text_color: '#3D2B5E', bg_color: '#FEFCFF' }, 'sticker-board': { primary_color: '#FFE566', header_bg_color: '#FFE566', header_text_color: '#1A1A2E', text_color: '#1A1A2E', bg_color: '#FFFEF7' }, 'fold': { primary_color: '#D97706', header_bg_color: '#FAF8F3', header_text_color: '#1C1917', text_color: '#1C1917', bg_color: '#FAF8F3' }, 'ink': { primary_color: '#111111', header_bg_color: '#F9F7F4', header_text_color: '#111111', text_color: '#111111', bg_color: '#F9F7F4' }, 'vinyl': { primary_color: '#E8C547', header_bg_color: '#161414', header_text_color: '#ffffff', text_color: '#ffffff', bg_color: '#161414' }, 'soft': { primary_color: '#111111', header_bg_color: '#111111', header_text_color: '#ffffff', text_color: '#222222', bg_color: '#ffffff' }, }; /** * TemplateEditor — 3-column editor with live preview. * * @param {Object} props Component props. * @param {Object} props.template Template to edit. * @param {Function} props.onBack Back navigation handler. * @return {JSX.Element} Template editor. */ export default function TemplateEditor({ template, onBack }) { const templateSlug = template?.slug || 'classic-green'; const tplDefaults = TEMPLATE_DEFAULTS[templateSlug] || {}; const [activeTab, setActiveTab] = useState('design'); const [config, setConfig] = useState({ template_slug: templateSlug, primary_color: tplDefaults.primary_color || '#5170ff', header_bg_color: tplDefaults.header_bg_color || tplDefaults.primary_color || '#5170ff', header_text_color: tplDefaults.header_text_color || '#ffffff', text_color: tplDefaults.text_color || '#1e293b', bg_color: tplDefaults.bg_color || '#ffffff', agent_bg_color: tplDefaults.agent_bg_color || '#f8faf9', agent_text_color: tplDefaults.agent_text_color || '#1e293b', header_title: 'Chat with us! 👋', header_subtitle: 'We reply within minutes', welcome_message: 'Hi! How can we help you today?', offline_message: "We're currently offline.", position: 'bottom-right', btn_size: 60, icon_size: 24, icon_color: '#ffffff', popup_width: 360, auto_open: false, auto_open_delay: 3, close_on_outside_click: true, remember_closed: false, show_after_delay: false, delay_seconds: 0, show_after_scroll: false, scroll_percentage: 25, }); const [animations, setAnimations] = useState({}); const [saving, setSaving] = useState(false); const [saved, setSaved] = useState(false); // Color keys that must be reset when switching templates. const COLOR_KEYS = [ 'primary_color', 'header_bg_color', 'header_text_color', 'text_color', 'bg_color', 'agent_bg_color', 'agent_text_color', ]; // Load existing config and animations from settings on mount. useEffect(() => { apiFetch({ path: '/shois-chat/v1/settings' }) .then((data) => { if (data && data.template_config) { const savedConfig = data.template_config; setConfig((prev) => { // Priority: // 1. Current template from props (slug and defaults) // 2. Saved settings for other values (content, behavior, etc.) const isDifferentTemplate = template && template.slug !== savedConfig.template_slug; if (isDifferentTemplate) { // If switching to a new template: // Keep new template slug and colors (from prev), // but pull in content/behavior from saved config. const merged = { ...prev }; Object.keys(savedConfig).forEach(key => { if (!COLOR_KEYS.includes(key) && key !== 'template_slug') { merged[key] = savedConfig[key]; } }); return merged; } // If same template as saved: merge everything but ensure slug is correct return { ...prev, ...savedConfig, template_slug: templateSlug // Force the correct slug }; }); } if (data && data.animations) { setAnimations(data.animations); } }) .catch(() => { }); }, [template, templateSlug]); const updateConfig = useCallback((updates) => { setConfig((prev) => ({ ...prev, ...updates })); setSaved(false); }, []); const updateAnimations = useCallback((updates) => { setAnimations((prev) => ({ ...prev, ...updates })); setSaved(false); }, []); const handleSave = () => { setSaving(true); apiFetch({ path: '/shois-chat/v1/settings', method: 'POST', data: { template_config: config, animations: animations, active_template_slug: config.template_slug, }, }) .then(() => { setSaved(true); setTimeout(() => setSaved(false), 2000); }) .catch(() => { }) .finally(() => setSaving(false)); }; const renderTabContent = () => { switch (activeTab) { case 'design': return ; case 'content': return ; case 'behavior': return ; case 'animations': { const animValues = { entrance: config.entrance || '', idle: config.idle || '', hover: config.hover || '', popup: config.popup || '', idle_interval: config.idle_interval || 5, enable_pulse_ring: config.enable_pulse_ring !== false, }; return ( updateConfig(updatedValues)} /> ); } default: return null; } }; return (
{ /* Editor Toolbar */}

{__('Editing:', 'shois-chat-button')} {template?.name || 'Template'}

{saved && ( ✓ {__('Saved', 'shois-chat-button')} )}
{ /* Left: Tab sidebar */}
{EDITOR_TABS.map((tab) => ( ))}
{ /* Center: Controls */}
{renderTabContent()}
{ /* Right: Live Preview */}
); }