'; }).join(''); chipsEl.hidden = false; } if (chipsEl) { chipsEl.addEventListener('click', function(ev){ var b = ev.target.closest('.email-chip'); if (!b) return; var v = emailEl.value.trim(); var at = v.lastIndexOf('@'); // REPLACE what follows the last @, never append — otherwise // "bo@gmai" + gmail.com becomes "bo@gmaigmail.com". emailEl.value = (at < 0 ? v : v.slice(0, at)) + '@' + b.getAttribute('data-domain'); hide(); renderChips(); emailEl.focus(); try { emailEl.setSelectionRange(emailEl.value.length, emailEl.value.length); } catch(e){} }); } function show(sugg){ // Emphasise the domain — that is the part being corrected, and seeing // it is how the customer decides whether we are right. var at = sugg.lastIndexOf('@'); suggestEl.innerHTML = 'Did you mean ' + esc(sugg.slice(0, at+1)) + esc(sugg.slice(at+1)) + '?Tap to use this address'; suggestEl.hidden = false; emailEl.classList.add('has-suggestion'); renderChips(); } function restoreButton(){ var btn = emailEl.form && emailEl.form.querySelector('button[type=submit]'); if (btn && btn.dataset.origHtml) { btn.innerHTML = btn.dataset.origHtml; btn.dataset.origHtml = ''; btn.classList.remove('cta-anyway'); } } function hide(){ suggestEl.hidden = true; suggestEl.classList.remove('nudge'); emailEl.classList.remove('has-suggestion'); emailEl.classList.remove('nudge-input'); renderChips(); } function check(){ if (dismissed) { hide(); return; } var s = suggestFor(emailEl.value.trim()); if (s) show(s); else hide(); } emailEl.addEventListener('blur', check); emailEl.addEventListener('input', function(){ // Editing the address makes the warning stale — drop the nudge, and // put the button back so it never says "use X anyway" about an X they // have since changed. nudged = false; restoreButton(); emailEl.classList.remove('nudge-input'); renderChips(); if (!suggestEl.hidden) check(); }); suggestEl.addEventListener('click', function(){ var s = suggestFor(emailEl.value.trim()); if (s) { emailEl.value = s; // The value changes below the fold of their attention; without a // visible acknowledgement the tap reads as having done nothing. emailEl.classList.remove('just-fixed'); void emailEl.offsetWidth; emailEl.classList.add('just-fixed'); setTimeout(function(){ emailEl.classList.remove('just-fixed'); }, 1000); } nudged = false; restoreButton(); hide(); }); // Last chance. Submitting with an unresolved suggestion still on screen // is the moment the typo becomes permanent, so draw the eye to it once // — then get out of the way. The second press goes through regardless, // because we may simply be wrong about their address. var nudged = false; if (emailEl.form) { emailEl.form.addEventListener('submit', function(ev){ if (!suggestEl.hidden && !nudged) { ev.preventDefault(); // stopImmediatePropagation, not just preventDefault. The // double-submit guard below is a second 'submit' listener on this // same form, registered after this one, so it would otherwise // still run on a press that never submits — disabling the button // the customer needs to press again, and logging a 'submitted' // funnel event for a submission that did not happen. ev.stopImmediatePropagation(); nudged = true; // Draw the eye to BOTH halves — the address they typed and the // correction on offer — since the question is which of the two is // right, and looking at only one does not answer it. suggestEl.classList.remove('nudge'); emailEl.classList.remove('nudge-input'); void suggestEl.offsetWidth; suggestEl.classList.add('nudge'); emailEl.classList.add('nudge-input'); try { suggestEl.scrollIntoView({ block: 'center', behavior: 'smooth' }); } catch (e) {} // Say what the next press will do. Leaving the button reading // "GET MY CARD" after it visibly did not get the card reads as // broken; naming the outcome makes the second press a choice. var btn = emailEl.form.querySelector('button[type=submit]'); if (btn && !btn.dataset.origHtml) { btn.dataset.origHtml = btn.innerHTML; btn.innerHTML = 'USE ' + esc(emailEl.value.trim()) + ' ANYWAY'; btn.classList.add('cta-anyway'); } return; } // Typing on after ignoring it once should not keep re-nagging. dismissed = true; hide(); }); } } // ------------------------------------------------------------------ var SHOP = "thebbeffectstudio-f6e4dc"; // Session id survives the in-app-browser handoff by living in the URL. // // The normal journey for an Instagram customer is TWO page loads: once // inside Instagram's WebView (where they're shown the "open in Safari" // explainer, because Wallet can't be reached from there — see // lib/inAppBrowser.ts), then again in Safari where they actually fill // the form. A freshly-minted uuid per load therefore counted one person // as two sessions, and made the in-app drop-off impossible to measure. // // It cannot be fixed with storage: Instagram's WebView and Safari have // completely isolated localStorage and cookie jars, so nothing written // in one is visible to the other. The URL is the only thing that // crosses, because "Open in Safari" opens the address currently shown. // So: mint once, replaceState it into the query string, and let the // second load inherit it. var SESSION_ID; try { SESSION_ID = new URLSearchParams(location.search).get('sid') || ''; } catch (e) { SESSION_ID = ''; } if (!/^[0-9a-f-]{36}$/i.test(SESSION_ID)) { SESSION_ID = (window.crypto && crypto.randomUUID) ? crypto.randomUUID() : (String(Date.now()) + Math.random()); try { var u = new URL(location.href); u.searchParams.set('sid', SESSION_ID); history.replaceState(null, '', u.toString()); } catch (e) {} } var sent = {}; function send(step){ if (sent[step]) return; sent[step] = true; var payload = JSON.stringify({ shop: SHOP, session_id: SESSION_ID, step: step }); try { if (navigator.sendBeacon) { navigator.sendBeacon('/api/signup-funnel', new Blob([payload], { type: 'application/json' })); return; } } catch (e) {} fetch('/api/signup-funnel', { method: 'POST', body: payload, headers: { 'Content-Type': 'application/json' }, keepalive: true }).catch(function(){}); } send('page_view'); function trackField(id, step, evt){ var el = document.getElementById(id); if (!el) return; el.addEventListener(evt || 'blur', function(){ if (el.value && el.value.trim()) send(step); }); } trackField('field-name', 'name_filled'); trackField('field-email', 'email_filled'); trackField('field-phone', 'phone_filled'); // 'change' not 'blur' — the birthday hidden input (see // BirthdaySelect.tsx) is never focusable itself (the two

GET YOURTHEBBEFFECTSTUDIO CARD

GET YOUR
THEBBEFFECTSTUDIO CARD