(function () { // Run only on the Neo COD checkout page if (location.pathname.indexOf('/apps/neo-cod/checkout') !== 0) return; // 1) CSS first, so the breadcrumb never flashes while the page loads var style = document.createElement('style'); style.textContent = 'nav.breadcrumbs[aria-label="breadcrumbs"]{display:none!important}' + '.page-width:has(> nav.breadcrumbs:only-child){display:none!important}'; (document.head || document.documentElement).appendChild(style); // 2) Fallback for older browsers without :has() — hide the empty wrapper too function hideBreadcrumb() { var nav = document.querySelector('nav.breadcrumbs[aria-label="breadcrumbs"]'); if (!nav) return; var wrap = nav.parentElement; var target = (wrap && wrap.children.length === 1 && wrap.classList.contains('page-width')) ? wrap : nav; target.style.setProperty('display', 'none', 'important'); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', hideBreadcrumb); } else { hideBreadcrumb(); } })(); (function () { 'use strict'; // ── Settings ───────────────────────────────────────────────────────────── var CONFIG = { // Height the fields start at, in lines of text. rows: 2, // Which fields (form element types). ADDRESS = "Address", // ORDER_NOTE = "Order note". fields: ['ORDER_NOTE'] }; // ── Guards ─────────────────────────────────────────────────────────────── var mount = document.getElementById('neo-cod-checkout-page'); if (!mount) return; if (window.__neoCodAddressNoteFields) return; window.__neoCodAddressNoteFields = true; if (typeof MutationObserver === 'undefined') return; var nativeValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); if (!nativeValue || !nativeValue.get || !nativeValue.set) return; var ROWS = Math.max(1, Math.min(Number(CONFIG.rows) || 2, 10)); var syncing = false; function formElements() { try { var list = window.COD.SettingsManager.getElements(); return Array.isArray(list) ? list : []; } catch (e) { return []; } } // Field keys by type, e.g. { ADDRESS: ['address1'], ORDER_NOTE: ['note'] }. function fieldKeys() { var keys = {}; formElements().forEach(function (item) { if (!item || !item.key || CONFIG.fields.indexOf(item.type) === -1) return; (keys[item.type] = keys[item.type] || []).push(item.key); }); return keys; } function findField(key) { var nodes = mount.querySelectorAll('[data-cod-embedded] .cod-field[data-cod-field]'); for (var i = 0; i < nodes.length; i++) { if (nodes[i].getAttribute('data-cod-field') === key) return nodes[i]; } return null; } // The app's own line box: 1.4 × the field's font size. function lineHeightOf(control) { var size = parseFloat(control.style.fontSize) || parseFloat(window.getComputedStyle(control).fontSize) || 14; return Math.round(size * 1.4); } // Padding 9px top and bottom + 1px border each side, as the app's inputs. function heightFor(lineHeight) { return ROWS * lineHeight + 20; } function singleLine(value) { return /[\r\n]/.test(value) ? value.replace(/[\r\n]+/g, ' ') : value; } // A height the shopper dragged to stays as the field's minimum, so the // field's own auto-grow (which re-measures on every keystroke) keeps it. function keepDraggedHeight(box) { box.addEventListener('pointerdown', function () { var before = box.offsetHeight; var done = function () { document.removeEventListener('pointerup', done, true); document.removeEventListener('pointercancel', done, true); var after = box.offsetHeight; if (after && Math.abs(after - before) > 1) { box.style.setProperty('min-height', after + 'px', 'important'); } }; document.addEventListener('pointerup', done, true); document.addEventListener('pointercancel', done, true); }); } // Keep the field's icon and prefix on the first line as it gets taller. function pinAdornments(wrapper, lineHeight) { var top = (9 + lineHeight / 2) + 'px'; var nodes = wrapper.querySelectorAll('.cod-field__icon, .cod-field__prefix'); for (var i = 0; i < nodes.length; i++) nodes[i].style.top = top; } // ── Address: the app's auto-growing textarea, made taller and resizable ── function upgradeAddress(field) { var box = field.querySelector('textarea.cod-field__textarea'); if (!box || box.getAttribute('data-ncf') === 'address') return; box.setAttribute('data-ncf', 'address'); var minHeight = heightFor(lineHeightOf(box)); box.style.setProperty('min-height', minHeight + 'px', 'important'); box.style.setProperty('resize', 'vertical', 'important'); box.style.setProperty('overflow-y', 'auto', 'important'); if (box.offsetHeight && box.offsetHeight < minHeight) box.style.height = minHeight + 'px'; keepDraggedHeight(box); } // ── Note: a textarea shown in place of the app's one-line input ────────── function upgradeNote(field) { var input = field.querySelector('input.cod-field__input'); if (!input || input.getAttribute('data-ncf') === 'note-source') return; var wrapper = input.parentElement; if (!wrapper) return; var lineHeight = lineHeightOf(input); var box = document.createElement('textarea'); var placeholderClass = (input.className.match(/(^|\s)(cod-ph-\S+)/) || [])[2] || ''; box.className = 'cod-field__textarea ' + placeholderClass; box.setAttribute('data-ncf', 'note'); box.id = (input.id || 'neo-cod-note') + '-box'; box.rows = ROWS; box.placeholder = input.placeholder || ''; if (input.maxLength > 0) box.maxLength = input.maxLength; ['autocomplete', 'aria-required', 'aria-describedby', 'aria-label', 'dir'].forEach(function (name) { if (input.hasAttribute(name)) box.setAttribute(name, input.getAttribute(name)); }); // The input's own look (padding for the icon, colors, border, radius). box.style.cssText = input.style.cssText; box.style.display = 'block'; box.style.lineHeight = lineHeight + 'px'; box.style.setProperty('height', heightFor(lineHeight) + 'px'); box.style.setProperty('min-height', heightFor(lineHeight) + 'px', 'important'); box.style.setProperty('resize', 'vertical', 'important'); box.style.setProperty('overflow-y', 'auto', 'important'); box.value = nativeValue.get.call(input); // The label now points at the box. var label = field.querySelector('label.cod-field__label'); if (label && input.id && label.htmlFor === input.id) label.htmlFor = box.id; // Box → input: the app listens on the input, so every change is passed on // as the same events the shopper's typing would have fired there. var pass = function (type) { try { input.dispatchEvent(new Event(type, { bubbles: true })); } catch (e) { /* ignore */ } }; var mirrorFocusStyle = function () { box.style.borderColor = input.style.borderColor; box.style.boxShadow = input.style.boxShadow; }; box.addEventListener('keydown', function (e) { if (e.key === 'Enter') e.preventDefault(); }); box.addEventListener('input', function () { var value = singleLine(box.value); if (value !== box.value) box.value = value; nativeValue.set.call(input, value); pass('input'); }); box.addEventListener('change', function () { pass('change'); }); box.addEventListener('focus', function () { try { input.dispatchEvent(new FocusEvent('focus')); } catch (e) { /* ignore */ } mirrorFocusStyle(); }); box.addEventListener('blur', function () { try { input.dispatchEvent(new FocusEvent('blur')); } catch (e) { /* ignore */ } mirrorFocusStyle(); }); // Input → box: the app fills the input itself when it restores a saved // form or prefills a returning customer. Only this one element's `value` // is wrapped; reading it is unchanged. try { Object.defineProperty(input, 'value', { configurable: true, get: function () { return nativeValue.get.call(this); }, set: function (value) { nativeValue.set.call(this, value); var current = nativeValue.get.call(this); if (box.value !== current) box.value = current; } }); // Anything that focuses the note (e.g. pointing at an error) lands in the box. input.focus = function () { box.focus(); }; } catch (e) { return; // can't keep them in step: leave the original input as it is } input.setAttribute('data-ncf', 'note-source'); input.setAttribute('tabindex', '-1'); input.setAttribute('aria-hidden', 'true'); input.style.setProperty('display', 'none', 'important'); wrapper.insertBefore(box, input.nextSibling); wrapper.classList.add('cod-field__input-wrapper--autogrow'); pinAdornments(wrapper, lineHeight); } function sync() { if (syncing) return; syncing = true; try { var keys = fieldKeys(); (keys.ADDRESS || []).forEach(function (key) { var field = findField(key); if (field) upgradeAddress(field); }); (keys.ORDER_NOTE || []).forEach(function (key) { var field = findField(key); if (field) upgradeNote(field); }); } catch (error) { if (window.console) console.error('[Neo COD custom JS] Address/Note fields:', error); } finally { syncing = false; } } // The form renders once the cart has loaded and may re-render later; each // new copy of a field is picked up here, before the browser paints it. new MutationObserver(sync).observe(mount, { childList: true, subtree: true }); sync(); })(); /* * Neo COD — "Payment method" section for the Checkout page * Paste into: Neo COD admin > Settings > Custom JavaScript * * What it does * On the checkout page (/apps/neo-cod/checkout) it lists the order buttons * your form already has (Cash on Delivery, bKash, SSLCommerz, Shopify * Checkout) as a radio list, and shows ONLY the button of the selected * method. That button is the app's own button, untouched, so a click does * exactly what that button always does: validation, OTP, partial payment, * fraud checks, the bKash / SSLCommerz redirect, the thank-you page. * * Safety * - Runs on the checkout page only. Every other page returns on line one. * - Never creates orders, sends requests or reads customer data. * - Fails open: if anything is missing or unexpected, every button stays * visible, exactly as without this script. * - Fewer than two order buttons on the form: does nothing. * - No heading of its own: the list sits under the form's "Payment method" * Text title (see placeAfterTitle). * - The method can't be changed while an order is being placed. * - Only text is written to the page (no innerHTML), all CSS is scoped to * the checkout page. * * Which methods appear is decided by the form builder: add or remove the * buttons there. Their order there is their order in this list. bKash and * SSLCommerz appear only while that gateway is switched on, like their buttons. */ (function () { 'use strict'; // ── Settings ───────────────────────────────────────────────────────────── var CONFIG = { // The list goes directly under the form's "Text title" element with this // text (letter case and spaces around it are ignored). The script adds no // heading of its own. No such title in the form: the list goes just // above the order button. placeAfterTitle: "Payment method", // The method selected when the page opens: 'buyItNow', 'BKASH_BUTTON', // 'SSLCOMMERZ_BUTTON' or 'SHOPIFY_CHECKOUT_BUTTON'. Empty = the first // button in the form. defaultMethod: "", // Keep the shopper's choice when the page is reloaded (this tab only). rememberChoice: true, // One entry per order button. A button that is not in the form is not // listed, whatever is written here. Badge: short text, or a logo image // (an https:// URL, e.g. from Shopify admin > Content > Files). methods: { buyItNow: { name: "Cash on Delivery (COD)", description: "Pay when you receive your order", badge: "COD", logoUrl: "", badgeBackground: "#F3F4F6", badgeColor: "#374151", }, BKASH_BUTTON: { name: "bKash", description: "Pay securely with bKash", badge: "bKash", logoUrl: "", badgeBackground: "#E2136E", badgeColor: "#FFFFFF", }, SSLCOMMERZ_BUTTON: { name: "SSLCommerz (Card / Mobile Banking)", description: "Visa, Mastercard, Nagad, Rocket and more", badge: "SSL", logoUrl: "", badgeBackground: "#0F4C81", badgeColor: "#FFFFFF", }, SHOPIFY_CHECKOUT_BUTTON: { name: "Pay online", description: "Pay securely by card", badge: "Online", logoUrl: "", badgeBackground: "#111827", badgeColor: "#FFFFFF", }, }, // Colors. Empty = taken from your form's "Shipping rates" element, so the // two lists match; if the form has none, the defaults in brackets. activeBorderColor: "", // (#005BD1) activeBackgroundColor: "", // (#F5F6FF) borderColor: "", // (#E5E5E5) backgroundColor: "", // (#FFFFFF) textColor: "", // (#000000) borderRadius: null, // number, px (8) }; // ── Guards ─────────────────────────────────────────────────────────────── var mount = document.getElementById('neo-cod-checkout-page'); if (!mount) return; if (window.__neoCodPaymentMethods) return; window.__neoCodPaymentMethods = true; if (typeof MutationObserver === 'undefined' || !document.querySelector) return; var STORAGE_KEY = 'neo-cod-payment-method'; var RADIO_NAME = 'neo-cod-pay-method'; var SECTION_CLASS = 'ncpm'; var METHOD_ORDER = ['buyItNow', 'BKASH_BUTTON', 'SSLCOMMERZ_BUTTON', 'SHOPIFY_CHECKOUT_BUTTON']; var CONSENT_TYPES = { TERMS_CONDITIONS: true, NEWSLETTER: true }; var selected = null; var section = null; var fieldset = null; var syncing = false; // ── Small helpers ──────────────────────────────────────────────────────── function app() { return window.COD || null; } function formElements() { try { var list = app().SettingsManager.getElements(); return Array.isArray(list) ? list : []; } catch (e) { return []; } } function formStyle() { try { return app().SettingsManager.getFormStyle() || {}; } catch (e) { return {}; } } function storageGet() { if (!CONFIG.rememberChoice) return ''; try { return window.sessionStorage.getItem(STORAGE_KEY) || ''; } catch (e) { return ''; } } function storageSet(value) { if (!CONFIG.rememberChoice) return; try { window.sessionStorage.setItem(STORAGE_KEY, value); } catch (e) { /* private mode */ } } function isSafeImageUrl(url) { return typeof url === 'string' && /^https:\/\/[^\s"'<>]+$/i.test(url.trim()); } function el(tag, className, text) { var node = document.createElement(tag); if (className) node.className = className; if (text) node.textContent = text; return node; } // The live form: the element list the checkout page builds. Absent before // the cart has loaded, and again once the thank-you page has replaced it. function formList() { return mount.querySelector('[data-cod-embedded] .cod-form-elements'); } /** Order buttons in form order, grouped by method. */ function collectButtons(list) { var byMethod = {}; var order = []; var nodes = list.querySelectorAll('button[data-cod-action]'); for (var i = 0; i < nodes.length; i++) { var action = nodes[i].getAttribute('data-cod-action'); if (METHOD_ORDER.indexOf(action) === -1 || !CONFIG.methods[action]) continue; if (!byMethod[action]) { byMethod[action] = []; order.push(action); } byMethod[action].push(nodes[i]); } return { byMethod: byMethod, order: order }; } // A button is busy from the click until its handler is done: the app // disables it (the empty-cart lock aside) and swaps its label for a spinner. function isBusy(btn) { if (btn.hasAttribute('data-original-content')) return true; if (btn.getAttribute('aria-busy') === 'true') return true; return btn.disabled && btn.getAttribute('data-cod-empty-cart-disabled') !== 'true'; } function anyBusy(buttons) { try { if (app() && app().FormRenderer && app().FormRenderer._navigatingAway) return true; } catch (e) { /* ignore */ } for (var method in buttons.byMethod) { if (!Object.prototype.hasOwnProperty.call(buttons.byMethod, method)) continue; var list = buttons.byMethod[method]; for (var i = 0; i < list.length; i++) if (isBusy(list[i])) return true; } return false; } // ── Styles (scoped to the checkout page) ───────────────────────────────── function injectStyles() { if (document.getElementById('ncpm-style')) return; var S = '#neo-cod-checkout-page .' + SECTION_CLASS; var css = [ '#neo-cod-checkout-page [data-ncpm-hidden]{display:none !important}', // The one visible button takes its whole row when it shared one. '#neo-cod-checkout-page .neo-cod-checkout__row>[data-ncpm-method]:not([data-ncpm-hidden]){grid-column:1/-1 !important}', S + '{display:block;margin:0;padding:0;min-width:0}', S + ' .ncpm__set{display:block !important;margin:0 !important;padding:0 !important;border:0 !important;min-width:0 !important;background:none !important;box-shadow:none !important}', S + ' .ncpm__list{display:flex;flex-direction:column;border:var(--ncpm-bw) solid var(--ncpm-border);border-radius:var(--ncpm-radius);overflow:hidden;background:var(--ncpm-bg)}', S + ' .ncpm__option{position:relative !important;display:flex !important;align-items:center !important;gap:12px !important;margin:0 !important;padding:12px 14px !important;min-height:0 !important;width:auto !important;cursor:pointer !important;background:var(--ncpm-bg) !important;color:var(--ncpm-text) !important;font-family:inherit !important;font-weight:400 !important;line-height:1.35 !important;text-transform:none !important;letter-spacing:normal !important;box-shadow:none !important;border:0 !important;border-radius:0 !important;transition:background-color .15s ease}', S + ' .ncpm__option+.ncpm__option{border-top:var(--ncpm-bw) solid var(--ncpm-border) !important}', S + ' .ncpm__option.is-selected{background:var(--ncpm-active-bg) !important;box-shadow:inset 0 0 0 var(--ncpm-bw) var(--ncpm-active) !important}', S + ' .ncpm__list>.ncpm__option:first-child{border-start-start-radius:var(--ncpm-radius) !important;border-start-end-radius:var(--ncpm-radius) !important}', S + ' .ncpm__list>.ncpm__option:last-child{border-end-start-radius:var(--ncpm-radius) !important;border-end-end-radius:var(--ncpm-radius) !important}', // The real radio: invisible but focusable and announced. S + ' .ncpm__input{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;margin:0 !important;padding:0 !important;opacity:0 !important;cursor:pointer !important;appearance:none !important;-webkit-appearance:none !important;border:0 !important;background:none !important;box-shadow:none !important;outline:none !important;z-index:1 !important}', S + ' .ncpm__option:has(.ncpm__input:focus-visible){outline:2px solid var(--ncpm-active) !important;outline-offset:-2px !important}', S + ' .ncpm__dot{flex:none !important;display:block !important;box-sizing:border-box !important;width:18px !important;height:18px !important;margin:0 !important;padding:0 !important;border:2px solid #9CA3AF !important;border-radius:50% !important;background:transparent !important}', S + ' .ncpm__option.is-selected .ncpm__dot{border:5px solid var(--ncpm-active) !important;background:#FFFFFF !important}', S + ' .ncpm__badge{flex:none !important;display:flex !important;align-items:center !important;justify-content:center !important;box-sizing:border-box !important;width:66px !important;height:32px !important;margin:0 !important;padding:0 6px !important;border-radius:6px !important;overflow:hidden !important;font-family:inherit !important;font-size:12px !important;font-weight:800 !important;line-height:1 !important;white-space:nowrap !important;text-overflow:ellipsis !important}', S + ' .ncpm__badge--text{border:1px solid rgba(0,0,0,.08) !important}', S + ' .ncpm__badge img{display:block !important;width:auto !important;height:auto !important;max-width:100% !important;max-height:100% !important;margin:0 !important;padding:0 !important;border:0 !important;object-fit:contain !important}', S + ' .ncpm__copy{display:flex !important;flex-direction:column !important;gap:2px !important;min-width:0 !important;margin:0 !important;padding:0 !important}', S + ' .ncpm__name{display:block !important;margin:0 !important;font-size:var(--ncpm-size) !important;font-weight:700 !important;color:inherit !important;overflow-wrap:anywhere !important}', S + ' .ncpm__desc{display:block !important;margin:0 !important;font-size:12px !important;font-weight:400 !important;color:inherit !important;opacity:.7 !important;overflow-wrap:anywhere !important}', S + ' .ncpm__set:disabled .ncpm__option,' + S + ' .ncpm__set:disabled .ncpm__input{cursor:progress !important}', S + ' .ncpm__set:disabled .ncpm__option:not(.is-selected){opacity:.55 !important}', '@media (max-width:560px){' + S + ' .ncpm__badge{width:56px !important;height:28px !important}' + S + ' .ncpm__option{padding:11px 12px !important;gap:10px !important}}' ].join('\n'); var style = el('style'); style.id = 'ncpm-style'; style.textContent = css; (document.head || document.documentElement).appendChild(style); } // Colors: the settings above, else the form's Shipping rates element (so the // two radio lists look alike), else the app's own defaults. function applyTheme(node) { var shipping = null; var elements = formElements(); for (var i = 0; i < elements.length; i++) { if (elements[i] && elements[i].type === 'SHIPPING_RATES') { shipping = elements[i].settings || {}; break; } } shipping = shipping || {}; var fs = formStyle(); var pick = function (own, fromShipping, fallback) { return own || fromShipping || fallback; }; var radius = typeof CONFIG.borderRadius === 'number' ? CONFIG.borderRadius : (typeof shipping.borderRadius === 'number' ? shipping.borderRadius : 8); var width = typeof shipping.borderWidth === 'number' ? shipping.borderWidth : 1; var textSize = Number(fs.textSize) || 14; var props = { '--ncpm-active': pick(CONFIG.activeBorderColor, shipping.activeBorderColor, '#005BD1'), '--ncpm-active-bg': pick(CONFIG.activeBackgroundColor, shipping.activeBackgroundColor, '#F5F6FF'), '--ncpm-border': pick(CONFIG.borderColor, shipping.borderColor, '#E5E5E5'), '--ncpm-bg': pick(CONFIG.backgroundColor, shipping.backgroundColor, '#FFFFFF'), '--ncpm-text': pick(CONFIG.textColor, shipping.textColor, '#000000'), '--ncpm-radius': Math.max(0, Math.min(radius, 40)) + 'px', '--ncpm-bw': Math.max(1, Math.min(width, 4)) + 'px', '--ncpm-size': textSize + 'px' }; // setProperty drops invalid values, so a typo cannot break the page. for (var key in props) { if (Object.prototype.hasOwnProperty.call(props, key)) node.style.setProperty(key, String(props[key])); } } // ── Section ────────────────────────────────────────────────────────────── function buildOption(method) { var cfg = CONFIG.methods[method] || {}; var option = el('label', 'ncpm__option'); option.setAttribute('data-ncpm-option', method); var input = el('input', 'ncpm__input'); input.type = 'radio'; input.name = RADIO_NAME; input.value = method; input.setAttribute('autocomplete', 'off'); option.appendChild(input); option.appendChild(el('span', 'ncpm__dot')); var badge = el('span', 'ncpm__badge'); badge.setAttribute('aria-hidden', 'true'); if (isSafeImageUrl(cfg.logoUrl)) { var img = el('img'); img.alt = ''; img.loading = 'lazy'; img.decoding = 'async'; img.referrerPolicy = 'no-referrer'; img.src = cfg.logoUrl.trim(); badge.appendChild(img); } else { badge.className += ' ncpm__badge--text'; badge.textContent = cfg.badge || ''; } if (cfg.badgeBackground) badge.style.setProperty('background', String(cfg.badgeBackground), 'important'); if (cfg.badgeColor) badge.style.setProperty('color', String(cfg.badgeColor), 'important'); if (!badge.textContent && !badge.firstChild) badge.style.setProperty('display', 'none', 'important'); option.appendChild(badge); var copy = el('span', 'ncpm__copy'); copy.appendChild(el('span', 'ncpm__name', cfg.name || method)); if (cfg.description) copy.appendChild(el('span', 'ncpm__desc', cfg.description)); option.appendChild(copy); return option; } function buildSection(methods) { var root = el('div', SECTION_CLASS); root.setAttribute('data-ncpm-section', methods.join(',')); applyTheme(root); fieldset = el('fieldset', 'ncpm__set'); // The visible heading is the form's own title; screen readers get it here. fieldset.setAttribute('aria-label', CONFIG.placeAfterTitle || 'Payment method'); var list = el('div', 'ncpm__list'); list.setAttribute('role', 'radiogroup'); methods.forEach(function (method) { list.appendChild(buildOption(method)); }); fieldset.appendChild(list); root.appendChild(fieldset); // The app's form listens for input/change on its own fields only; keep // ours from reaching it anyway. root.addEventListener('input', function (e) { e.stopPropagation(); }); root.addEventListener('change', function (e) { e.stopPropagation(); var target = e.target; if (!target || target.name !== RADIO_NAME) return; onSelect(target.value); }); return root; } // A node's place in its column: the field itself, or the row it shares // with other fields. function slotOf(node) { var parent = node.parentElement; return parent && parent.classList.contains('neo-cod-checkout__row') ? parent : node; } // The form's "Text title" element whose text is CONFIG.placeAfterTitle. function findTitle(list) { var wanted = String(CONFIG.placeAfterTitle || '').trim().toLowerCase(); if (!wanted) return null; var elements = formElements(); for (var i = 0; i < elements.length; i++) { var item = elements[i]; if (!item || item.type !== 'TEXT_TITLE' || !item.key) continue; var text = String((item.settings && item.settings.text) || '').trim().toLowerCase(); if (text !== wanted) continue; var nodes = list.querySelectorAll('[data-cod-field]'); for (var j = 0; j < nodes.length; j++) { if (nodes[j].getAttribute('data-cod-field') === item.key) return nodes[j]; } } return null; } // Directly under the "Payment method" title; without one, before the first // order button — and before the Terms / Newsletter checkboxes directly // above it, which belong with the button. function insertSection(list, firstButton) { var title = findTitle(list); if (title) { var slot = slotOf(title); if (!slot.parentNode || !list.contains(slot)) return false; slot.parentNode.insertBefore(section, slot.nextSibling); return true; } var anchor = firstButton; if (anchor.parentElement && anchor.parentElement.classList.contains('neo-cod-checkout__row')) { anchor = anchor.parentElement; } var types = {}; formElements().forEach(function (item) { if (item && item.key) types[item.key] = item.type; }); var prev = anchor.previousElementSibling; while (prev && CONSENT_TYPES[types[prev.getAttribute('data-cod-field') || '']]) { anchor = prev; prev = anchor.previousElementSibling; } if (!anchor.parentNode || !list.contains(anchor)) return false; anchor.parentNode.insertBefore(section, anchor); return true; } // ── Selection ──────────────────────────────────────────────────────────── function onSelect(method) { var list = formList(); if (!list || !section) return; var buttons = collectButtons(list); if (!buttons.byMethod[method]) return; // Never switch while an order is being placed: the busy button would be // hidden and another one, still enabled, shown in its place. if (anyBusy(buttons)) { render(buttons); return; } var previous = selected; selected = method; storageSet(method); if (previous && previous !== method) clearStaleErrors(buttons.byMethod[previous] || []); render(buttons); } // An order error the app put next to a button that is now hidden. function clearStaleErrors(buttons) { buttons.forEach(function (btn) { var before = btn.previousElementSibling; var after = btn.nextElementSibling; if (before && before.classList.contains('cod-order-error')) before.remove(); if (after && after.classList.contains('cod-cart-total-error')) after.remove(); }); } function showAll(list) { var hidden = list.querySelectorAll('[data-ncpm-hidden], [data-ncpm-method]'); for (var i = 0; i < hidden.length; i++) { hidden[i].removeAttribute('data-ncpm-hidden'); hidden[i].removeAttribute('data-ncpm-method'); } } // Bring the radios and the buttons in line with `selected`. Writes only what // differs, so the observer that calls it settles after one pass. function render(buttons) { var busy = anyBusy(buttons); if (fieldset && fieldset.disabled !== busy) fieldset.disabled = busy; var options = section.querySelectorAll('[data-ncpm-option]'); for (var i = 0; i < options.length; i++) { var option = options[i]; var isOn = option.getAttribute('data-ncpm-option') === selected; if (option.classList.contains('is-selected') !== isOn) option.classList.toggle('is-selected', isOn); var input = option.querySelector('input'); if (input && input.checked !== isOn) input.checked = isOn; } buttons.order.forEach(function (method) { buttons.byMethod[method].forEach(function (btn) { if (btn.getAttribute('data-ncpm-method') !== method) btn.setAttribute('data-ncpm-method', method); var hide = method !== selected; if (hide !== btn.hasAttribute('data-ncpm-hidden')) { if (hide) btn.setAttribute('data-ncpm-hidden', ''); else btn.removeAttribute('data-ncpm-hidden'); } }); }); } function initialMethod(order) { if (selected && order.indexOf(selected) !== -1) return selected; var saved = storageGet(); if (saved && order.indexOf(saved) !== -1) return saved; if (CONFIG.defaultMethod && order.indexOf(CONFIG.defaultMethod) !== -1) return CONFIG.defaultMethod; return order[0]; } function sync() { if (syncing) return; syncing = true; try { var list = formList(); if (!list) return; // still loading, or the thank-you page is showing var buttons = collectButtons(list); if (buttons.order.length < 2) { if (section && section.parentNode) section.parentNode.removeChild(section); showAll(list); return; } // Rebuild when the set of methods changed (e.g. the form re-rendered). var key = buttons.order.join(','); if (section && section.getAttribute('data-ncpm-section') !== key) { if (section.parentNode) section.parentNode.removeChild(section); section = null; } if (!section) section = buildSection(buttons.order); if (!list.contains(section)) { var first = buttons.byMethod[buttons.order[0]][0]; if (!insertSection(list, first)) { showAll(list); return; } } selected = initialMethod(buttons.order); render(buttons); } catch (error) { // Fail open: every order button visible, as without this script. try { var current = formList(); if (current) showAll(current); if (section && section.parentNode) section.parentNode.removeChild(section); } catch (e) { /* ignore */ } if (window.console) console.error('[Neo COD custom JS] Payment methods:', error); } finally { syncing = false; } } // ── Start ──────────────────────────────────────────────────────────────── injectStyles(); // The form renders once the cart has loaded, and parts of it re-render // later (totals, a country change, the thank-you page). Each change is // caught here, before the browser paints it. new MutationObserver(sync).observe(mount, { childList: true, subtree: true, attributes: true, attributeFilter: ['disabled', 'data-original-content', 'aria-busy'] }); // Back from bKash / SSLCommerz via the back button: the page may come back // from the browser's cache as it was left. window.addEventListener('pageshow', function (event) { if (event.persisted) sync(); }); sync(); })();