ShubhraSaha/context-selector-pro-flow
0
1document.addEventListener('DOMContentLoaded', function() {2 // Mock product data3 const mockProducts = [4 {"asin":"B08PP5MSVB","title":"Runner Pro Shoe - Blue","image":"https://via.placeholder.com/64","metrics":{"sales_30":1423,"cvr_30":0.18,"clicks_30":921}},5 {"asin":"B09XYZ1234","title":"Trail Grip Shoe - Black","image":"https://via.placeholder.com/64","metrics":{"sales_30":543,"cvr_30":0.12,"clicks_30":320}},6 {"asin":"B07ABC9876","title":"Daily Comfort Sneaker","image":"https://via.placeholder.com/64","metrics":{"sales_30":12,"cvr_30":0.02,"clicks_30":4}},7 {"asin":"B0A1B2C3D4","title":"Performance Running Shorts","image":"https://via.placeholder.com/64","metrics":{"sales_30":876,"cvr_30":0.15,"clicks_30":421}},8 {"asin":"B0D5E6F7G8","title":"Athletic Compression Socks","image":"https://via.placeholder.com/64","metrics":{"sales_30":321,"cvr_30":0.08,"clicks_30":154}},9 {"asin":"B0H9I8J7K6","title":"Yoga Mat - Extra Thick","image":"https://via.placeholder.com/64","metrics":{"sales_30":654,"cvr_30":0.22,"clicks_30":298}},10 {"asin":"B0L1M2N3O4","title":"Adjustable Dumbbell Set","image":"https://via.placeholder.com/64","metrics":{"sales_30":432,"cvr_30":0.14,"clicks_30":187}},11 {"asin":"B0P5Q6R7S8","title":"Foam Roller - High Density","image":"https://via.placeholder.com/64","metrics":{"sales_30":189,"cvr_30":0.07,"clicks_30":92}},12 {"asin":"B0T9U8V7W6","title":"Resistance Bands Set","image":"https://via.placeholder.com/64","metrics":{"sales_30":567,"cvr_30":0.19,"clicks_30":301}},13 {"asin":"B0X1Y2Z3A4","title":"Jump Rope - Weighted","image":"https://via.placeholder.com/64","metrics":{"sales_30":234,"cvr_30":0.11,"clicks_30":123}}14 ];15 16 // DOM Elements17 const selectContextBtn = document.getElementById('selectContextBtn');18 const contextPanel = document.getElementById('contextPanel');19 const parseBtn = document.getElementById('parseBtn');20 const asinInput = document.getElementById('asinInput');21 const previewSection = document.getElementById('previewSection');22 const previewGrid = document.getElementById('previewGrid');23 const totalValidCount = document.getElementById('totalValidCount');24 const selectAllBtn = document.getElementById('selectAllBtn');25 const deselectAllBtn = document.getElementById('deselectAllBtn');26 const selectedCountText = document.getElementById('selectedCountText');27 const applySelectionBtn = document.getElementById('applySelectionBtn');28 const saveContextCheckbox = document.getElementById('saveContextCheckbox');29 const contextNameInput = document.getElementById('contextNameInput');30 const tabButtons = document.querySelectorAll('.tab-btn');31 const tabContents = document.querySelectorAll('.tab-content');32 const toast = document.getElementById('toast');33 const confirmModal = document.getElementById('confirmModal');34 const modalCount = document.getElementById('modalCount');35 const confirmInput = document.getElementById('confirmInput');36 const cancelConfirmBtn = document.getElementById('cancelConfirmBtn');37 const proceedConfirmBtn = document.getElementById('proceedConfirmBtn');38 39 // State40 let selectedProducts = [];41 let currentTab = 'manual';42 43 // Event Listeners44 selectContextBtn.addEventListener('click', toggleContextPanel);45 parseBtn.addEventListener('click', parseAsins);46 selectAllBtn.addEventListener('click', selectAllProducts);47 deselectAllBtn.addEventListener('click', deselectAllProducts);48 applySelectionBtn.addEventListener('click', applySelection);49 saveContextCheckbox.addEventListener('change', toggleSaveContextInput);50 51 tabButtons.forEach(button => {52 button.addEventListener('click', () => switchTab(button.dataset.tab));53 });54 55 confirmInput.addEventListener('input', checkConfirmation);56 cancelConfirmBtn.addEventListener('click', closeConfirmModal);57 proceedConfirmBtn.addEventListener('click', confirmAndApply);58 59 // Functions60 function toggleContextPanel() {61 contextPanel.classList.toggle('hidden');62 if (!contextPanel.classList.contains('hidden')) {63 // Focus first input when panel opens64 if (currentTab === 'manual') {65 asinInput.focus();66 }67 }68 }69 70 function switchTab(tabName) {71 currentTab = tabName;72 73 // Update tab button states74 tabButtons.forEach(button => {75 if (button.dataset.tab === tabName) {76 button.classList.add('active-tab');77 } else {78 button.classList.remove('active-tab');79 }80 });81 82 // Show/hide tab contents83 tabContents.forEach(content => {84 if (content.id === `${tabName}Tab`) {85 content.classList.remove('hidden');86 } else {87 content.classList.add('hidden');88 }89 });90 }91 92 function parseAsins() {93 const asinsText = asinInput.value.trim();94 95 if (!asinsText) {96 return;97 }98 99 // Simulate API call100 setTimeout(() => {101 // Validate ASINs (mock)102 const validProducts = mockProducts.slice(0, 10); // Just show first 10 for demo103 const totalCount = 142; // Mock total count104 105 // Update UI106 renderProductPreview(validProducts);107 totalValidCount.textContent = totalCount;108 previewSection.classList.remove('hidden');109 110 // Update selected count111 updateSelectedCount();112 }, 300);113 }114 115 function renderProductPreview(products) {116 previewGrid.innerHTML = '';117 118 products.forEach(product => {119 const productCard = document.createElement('div');120 productCard.className = 'product-card bg-[#1E1F23] rounded-md p-3 cursor-pointer';121 productCard.dataset.asin = product.asin;122 123 productCard.innerHTML = `124 <div class="flex">125 <div class="flex-shrink-0 mr-3">126 <img src="${product.image}" alt="${product.title}" class="w-16 h-16 object-cover rounded">127 </div>128 <div class="flex-1 min-w-0">129 <h4 class="text-sm font-medium truncate-2-lines" title="${product.title}">${product.title}</h4>130 <div class="flex items-center mt-1">131 <span class="bg-[#131417] text-xs px-1.5 py-0.5 rounded font-mono">${product.asin}</span>132 </div>133 <div class="flex flex-wrap gap-1.5 mt-2">134 <span class="bg-[#1A1C21] text-xs px-1.5 py-0.5 rounded">Sales: ${product.metrics.sales_30}</span>135 <span class="bg-[#1A1C21] text-xs px-1.5 py-0.5 rounded">CVR: ${(product.metrics.cvr_30 * 100).toFixed(1)}%</span>136 <span class="bg-[#1A1C21] text-xs px-1.5 py-0.5 rounded">Clicks: ${product.metrics.clicks_30}</span>137 </div>138 </div>139 <div class="ml-2 flex-shrink-0">140 <input type="checkbox" class="product-checkbox" data-asin="${product.asin}">141 </div>142 </div>143 `;144 145 // Add event listeners146 const checkbox = productCard.querySelector('.product-checkbox');147 checkbox.addEventListener('change', () => toggleProductSelection(product.asin, checkbox.checked));148 149 productCard.addEventListener('click', (e) => {150 if (e.target.tagName !== 'INPUT') {151 checkbox.checked = !checkbox.checked;152 toggleProductSelection(product.asin, checkbox.checked);153 }154 });155 156 previewGrid.appendChild(productCard);157 });158 }159 160 function toggleProductSelection(asin, isSelected) {161 if (isSelected && !selectedProducts.includes(asin)) {162 selectedProducts.push(asin);163 } else if (!isSelected) {164 selectedProducts = selectedProducts.filter(a => a !== asin);165 }166 167 // Update UI168 updateSelectedCount();169 highlightSelectedCards();170 }171 172 function selectAllProducts() {173 const checkboxes = document.querySelectorAll('.product-checkbox');174 checkboxes.forEach(checkbox => {175 checkbox.checked = true;176 if (!selectedProducts.includes(checkbox.dataset.asin)) {177 selectedProducts.push(checkbox.dataset.asin);178 }179 });180 181 updateSelectedCount();182 highlightSelectedCards();183 }184 185 function deselectAllProducts() {186 const checkboxes = document.querySelectorAll('.product-checkbox');187 checkboxes.forEach(checkbox => {188 checkbox.checked = false;189 });190 191 selectedProducts = [];192 updateSelectedCount();193 highlightSelectedCards();194 }195 196 function highlightSelectedCards() {197 const productCards = document.querySelectorAll('.product-card');198 productCards.forEach(card => {199 if (selectedProducts.includes(card.dataset.asin)) {200 card.classList.add('selected');201 } else {202 card.classList.remove('selected');203 }204 });205 }206 207 function updateSelectedCount() {208 const count = selectedProducts.length;209 selectedCountText.textContent = `Selected: ${count} product${count !== 1 ? 's' : ''}`;210 211 // Show warning if count is large212 if (count > 500) {213 selectedCountText.innerHTML += ` <span class="text-yellow-400">(Large selection)</span>`;214 }215 }216 217 function toggleSaveContextInput() {218 if (saveContextCheckbox.checked) {219 contextNameInput.classList.remove('hidden');220 contextNameInput.focus();221 } else {222 contextNameInput.classList.add('hidden');223 }224 }225 226 function applySelection() {227 const count = selectedProducts.length;228 229 if (count === 0) {230 showToast('Please select at least one product');231 return;232 }233 234 if (count > 5000) {235 showConfirmModal(count);236 return;237 }238 239 if (count > 500) {240 // Soft warning - just proceed241 proceedWithApply();242 } else {243 proceedWithApply();244 }245 }246 247 function showConfirmModal(count) {248 modalCount.textContent = count.toLocaleString();249 confirmModal.classList.remove('hidden');250 confirmInput.value = '';251 proceedConfirmBtn.disabled = true;252 }253 254 function closeConfirmModal() {255 confirmModal.classList.add('hidden');256 }257 258 function checkConfirmation() {259 proceedConfirmBtn.disabled = confirmInput.value.trim().toUpperCase() !== 'CONFIRM';260 }261 262 function confirmAndApply() {263 closeConfirmModal();264 proceedWithApply();265 }266 267 function proceedWithApply() {268 const contextName = saveContextCheckbox.checked ? contextNameInput.value.trim() : null;269 270 // Simulate API call271 setTimeout(() => {272 // Update step 1 subtitle273 const subtitle = document.querySelector('#contextPanel + div p');274 subtitle.textContent = `Context: ${selectedProducts.length} product${selectedProducts.length !== 1 ? 's' : ''} selected`;275 if (contextName) {276 subtitle.textContent += ` (Saved as "${contextName}")`;277 }278 279 // Close panel280 contextPanel.classList.add('hidden');281 282 // Show success toast283 showToast('Context applied successfully');284 285 // Reset selection for next time286 selectedProducts = [];287 asinInput.value = '';288 previewSection.classList.add('hidden');289 saveContextCheckbox.checked = false;290 contextNameInput.classList.add('hidden');291 contextNameInput.value = '';292 }, 500);293 }294 295 function showToast(message) {296 const toastMessage = document.getElementById('toastMessage');297 toastMessage.textContent = message;298 toast.classList.remove('hidden');299 300 setTimeout(() => {301 toast.classList.add('hidden');302 }, 3000);303 }304 305 // Initialize306 switchTab('manual');307});