// console.log('Beatrix Multi Step Form'); // const BRAND = currentURL[2].replace('www.', '').replace('preview.', ''); const signupForm = document.querySelector('.registration-container.modal-overlay.dark-overlay'); //native join form var signupFormInputs; let currentStep = 1; // let formFieldGroups = { // 1: ['firstName', 'lastName', 'dateOfBirth', 'fourDigitPinCode'], // 2: ['phonePrefix', 'phone', 'email', 'password'], // 3: ['currency', 'referralMail'], // }; let formFieldGroups = { 1: ['firstName', 'lastName', 'dateOfBirth'], 2: ['fourDigitPinCode', 'phone'], 3: ['email', 'password'], }; let lastStep; const translations = { en: { headings: { start: 'let’s get started:
enter your details', middle: 'complete the details to proceed', final: 'complete the final step to start playing', // final: 'complete the final step to become a Ignitioner', }, buttons: { next: 'next', back: 'back', submit: 'register', }, error: { message: 'something went wrong :(', btn: 'join now', }, loggedIn: { message: 'all set to start playing!', btn: 'play now', }, }, es: { headings: { start: 'comienza ingresando
tus datos', middle: 'completa estos detalles para continuar', // final: 'estás a un paso de convertirte en Ignitioner', }, buttons: { next: 'siguiente', back: 'atrás', submit: 'finalizar', }, error: { message: 'algo salió mal :(', btn: 'únete ahora', }, loggedIn: { message: '¡todo listo para comenzar a jugar!', btn: 'jugar ahora', }, }, pt: { headings: { start: 'vamos começar:
insira seus dados', middle: 'complete os detalhes
para avançar', final: 'conclua a etapa final
para se tornar um Ignitioner', }, buttons: { next: 'continuar', back: 'voltar', submit: 'cadastrar', }, error: { message: 'algo deu errado :(', btn: 'junte-se agora', }, loggedIn: { message: 'tudo pronto para começar a jogar!', btn: 'jogar agora', }, }, }; // TO GET A COOKIE VALUE function getCookieValue(cName) { // Get cookies const decodedCookies = decodeURIComponent(document.cookie); const cookiesArr = decodedCookies.split(';'); // Get cookies as an array of arrays, [0] for name and [1] for value const keyValueArr = cookiesArr.map((item) => { const [key, value] = item.split('='); return [key.trim(), value?.trim()]; }); // If any of the cookie names match, return its value for (const [key, value] of keyValueArr) { if (key === cName) return value; } // Return an empty string if no match is found return ''; } // CHECK IF THE USER IS ALREADY LOGGED IN function isLogged() { // Try getting the session ID from cookies let sid = getCookieValue('sid'); // If there is no cookie, try getting the session ID from localStorage if (!sid) sid = localStorage.getItem('sessionId'); // Check that the session ID isn't null or empty if (sid) { return true; } else { return false; } } function filterNameId(id) { return id.replace(/^\w+-\d+-/, ''); } // IF THE {$formFieldGroups} VARIABLE IS EMPTY, DEVIDE THE EXISTING INPUTS INTO 3 DIFFERENT STEPS function handleMissingformFieldGroups() { formFieldGroups = { 1: [], 2: [], 3: [], }; signupFormInputs = signupForm.getElementsByTagName('input'); const totalInputs = signupFormInputs.length; const inputsPerGroup = Math.ceil(totalInputs / 3); // Distribute the inputs among the groups for (let i = 0; i < totalInputs; i++) { const groupNumber = Math.floor(i / inputsPerGroup) + 1; if (signupFormInputs[i].type !== 'hidden') { formFieldGroups[groupNumber].push(filterNameId(signupFormInputs[i].id)); } } lastStep = Object.keys(formFieldGroups).length; } // check if ${formFieldGroups} have all the ids on ${signupFormInputs} and if it dosent, creates a new key with the missing ids function checkInputs() { if (typeof formFieldGroups === 'undefined' || Object.keys(formFieldGroups).length === 0) { handleMissingformFieldGroups(); return; } else { lastStep = Object.keys(formFieldGroups).length; } let missingIds = []; signupFormInputs = signupForm.getElementsByTagName('input'); let predefinedIds = Object.values(formFieldGroups).flat(); let formInputsIds = []; // Iterate through the signupFormInputs collection for (let i = 0; i < signupFormInputs.length; i++) { let inputElement = signupFormInputs[i]; let id = filterNameId(inputElement.id); // Get the ID of each input element formInputsIds.push(id); // Push the ID into the formInputsIds array } predefinedIds.sort(); formInputsIds.sort(); let inputIdsSet = new Set(predefinedIds); let formFieldIdsSet = new Set(formInputsIds); for (let id of formFieldIdsSet) { if (!inputIdsSet.has(id)) { // Check if the input has type='hidden' or the 'disabled' property let element = signupForm.querySelector(`[id$='${id}']`); if (element && element.type !== 'hidden' && !element.disabled) { missingIds.push(id); } } } // Delete elements from inputIdsSet that do not exist in formFieldIdsSet for (let id of inputIdsSet) { if (!formFieldIdsSet.has(id)) { inputIdsSet.delete(id); } } // Remove elements from formFieldGroups that do not exist in formFieldIdsSet for (let step in formFieldGroups) { formFieldGroups[step] = formFieldGroups[step].filter((id) => formFieldIdsSet.has(id)); } if (missingIds.length > 0) { formFieldGroups[lastStep + 1] = missingIds; lastStep++; } // Remove empty keys from formFieldGroups for (let step in formFieldGroups) { if (formFieldGroups[step].length === 0) { delete formFieldGroups[step]; } } // Reorder keys in formFieldGroups let reorderedFormFieldGroups = {}; let currentIndex = 1; for (let step in formFieldGroups) { reorderedFormFieldGroups[currentIndex] = formFieldGroups[step]; currentIndex++; } formFieldGroups = reorderedFormFieldGroups; lastStep = Object.keys(formFieldGroups).length; if (lastStep === 1) { // if the previos statment is true, meaning that all the ids on {$formFieldGroups} were invalid. handleMissingformFieldGroups(); } // console.log(formFieldGroups); return true; } // GET THE LAST PARENT OF AN INPUT function getLastParent(inputId) { let input = document.querySelector(`[id$='${inputId}']`); if (!input) return; let parentElem = input.parentElement; while (parentElem) { if (parentElem.parentElement === signupForm.querySelector('form > bx-form-group > div')) { return parentElem; } parentElem = parentElem.parentElement; } return null; } // HIDE ALL THE ELEMENTS function hideAllElements() { [...signupFormInputs].forEach((element) => { let parentElement = getLastParent(element.id); if (parentElement) { parentElement.style.display = 'none'; } }); let footNote = document.querySelector('form > div.footnote'); if (footNote) footNote.style.display = 'none'; return true; } // DISPLAY STEPS function displayStep(step) { hideAllElements(); let arrStep = formFieldGroups[step]; arrStep.forEach((element) => { let parentElement = getLastParent(element); if (parentElement) { parentElement.style.display = 'block'; } }); if (step === lastStep) { let footNote = document.querySelector('form > div.footnote'); if (footNote) footNote.style.display = 'block'; } return true; } // CHECK IF THE INPUTS ON THE CURRENT STEP, AND ALL THE INPUTS ON THE PREVIOS STEPS ARE CORRECLTY FILLED. IF SO, RETURN TRUE function checkValidInputs(step) { // Loop backward from the given step to 1 for (let i = step; i >= 1; i--) { // Get the field group for the current step const fields = formFieldGroups[i]; // Loop through each field in the group for (let field of fields) { let input = document.querySelector(`[id$='${field}']`); if (input) { if (input.classList.contains('ng-invalid')) { // console.log('invalid field: ', input); return false; } } } } // if step === lastStep and all inputs are corrects, able the signup button if (step === lastStep) { let submitBtn = document.getElementById('next-step'); if (submitBtn) submitBtn.classList.remove('disabled'); } // If all fields are valid, return true return true; } // REAJUST THE HEIGHT OF THE {$signupForm} HEIGHT function adjustHeight() { signupForm.style.height = signupForm.firstElementChild.scrollHeight + 'px'; } // OBSERVE ANY CHANGE ON THE HEIGHT OF AN ELEMENT // REAJUST THE HEIGHT OF THE {$signupForm} HEIGHT const resizeObserver = new ResizeObserver((entries) => { for (let entry of entries) { adjustHeight(); } }); // INCREASE DECREASE PROGRESS BAR function barProgress(step) { function interpolateColor(color1, color2, percentage) { const r = Math.round(color1[0] + (color2[0] - color1[0]) * percentage); const g = Math.round(color1[1] + (color2[1] - color1[1]) * percentage); const b = Math.round(color1[2] + (color2[2] - color1[2]) * percentage); return `rgb(${r}, ${g}, ${b})`; } function getColorAtPercentage(percentage) { const color1 = [255, 0, 0]; // Red const color2 = [255, 205, 27]; // Yellow const color3 = [51, 162, 21]; // Green if (percentage <= 50) { return interpolateColor(color1, color2, percentage / 50); } else { return interpolateColor(color2, color3, (percentage - 50) / 50); } } let percentage = (step / lastStep) * 100; if (percentage === 0) { percentage = 3; } let resultColor = getColorAtPercentage(percentage); let progressBar = document.getElementById('progressBar'); if (progressBar) { progressBar.style.width = percentage + '%'; progressBar.style.backgroundColor = resultColor; } } // NAVIGATE THOGHT THE STEPS function navigateSteps(direction) { switch (direction) { case -1: currentStep += direction; // Ensure currentStep stays within valid range (1 to ${lastStep}) currentStep = Math.max(1, Math.min(lastStep, currentStep)); displayStep(currentStep); barProgress(currentStep); configButtons(currentStep); updateHeading(currentStep); break; case 1: if (checkValidInputs(currentStep)) { currentStep += direction; // Ensure currentStep stays within valid range (1 to ${lastStep}) currentStep = Math.max(1, Math.min(lastStep, currentStep)); displayStep(currentStep); barProgress(currentStep); configButtons(currentStep); updateHeading(currentStep); } break; } } // CONFIG THE NEXT AND PREV BUTTONS DEPENDING ON THE {$currentStep} function configButtons(currentStep) { const btnPrev = document.getElementById('previous-step'); const btnNext = document.getElementById('next-step'); let language = getCookieValue('LANG'); if (language === '') language = 'en'; switch (currentStep) { case 1: btnPrev.classList.add('disabled'); btnNext.removeEventListener('click', triggerSubmitnButton); btnNext.textContent = translations[language].buttons.next; break; case lastStep: btnNext.addEventListener('click', triggerSubmitnButton); btnPrev.classList.remove('disabled'); btnNext.textContent = translations[language].buttons.submit; break; default: btnPrev.classList.remove('disabled'); btnNext.removeEventListener('click', triggerSubmitnButton); btnNext.textContent = translations[language].buttons.next; } // Logic for the next button const isNextEnabled = checkValidInputs(currentStep); btnNext.classList.toggle('disabled', !isNextEnabled); } function updateHeading(currentStep) { let copyContainer = document.getElementById('stepForm-copy'); let language = getCookieValue('LANG'); if (language === '') language = 'en'; switch (currentStep) { case 1: copyContainer.innerHTML = `

${translations[language].headings.start}

`; break; case lastStep: copyContainer.innerHTML = `

${translations[language].headings.final}

`; break; default: copyContainer.innerHTML = `

${translations[language].headings.middle}

`; } } // CLICK THE HIDDEN SUBMIT BUTTON function triggerSubmitnButton() { let submitBtn = document.querySelector(`[id$='submit']`); if (submitBtn) submitBtn.click(); } function manageError() { let formwrapper = document.getElementById('stepForm'); //marketing page container if (!formwrapper) return; let language = getCookieValue('LANG'); if (language === '') language = 'en'; const errorMsg = `

${translations[language].error.message}

`; formwrapper.innerHTML = errorMsg; } function manageLoggedIn() { let formwrapper = document.getElementById('stepForm'); //marketing page container if (!formwrapper) return; let language = getCookieValue('LANG'); if (language === '') language = 'en'; const errorMsg = `

${translations[language].loggedIn.message}

`; formwrapper.innerHTML = errorMsg; } function observeDeferredRegistration() { // Callback function to execute when mutations are observed const observerCallback = function(mutationsList, observer) { for (let mutation of mutationsList) { if (mutation.type === 'childList') { if (signupForm.querySelector('bx-registration-deferred-form')) { manageError(); observer.disconnect(); // Stop observing after detecting the element break; } } } }; // Create a MutationObserver instance and pass the callback function const observer = new MutationObserver(observerCallback); // Configuration object for the observer const observerConfig = { childList: true, subtree: true, }; // Start observing the document body for changes observer.observe(document.body, observerConfig); } // init step form function initStepForm() { document.getElementById('stepForm').setAttribute('success', 'true'); checkInputs(); hideAllElements(); displayStep(1); configButtons(currentStep); window._stepFormInitialized = true; // observe the form modal for height changes let formModal = signupForm.firstElementChild; resizeObserver.observe(formModal); // adding listeners to each input to check for valid inputs [...signupFormInputs].forEach((element) => { if (element) { element.addEventListener('click', () => { checkValidInputs(currentStep); configButtons(currentStep); }); element.addEventListener('input', () => { checkValidInputs(currentStep); configButtons(currentStep); }); element.addEventListener('blur', () => { checkValidInputs(currentStep); configButtons(currentStep); }); if (element.type === 'checkbox') { element.addEventListener('change', () => { checkValidInputs(currentStep); configButtons(currentStep); }); } } }); // if (document.getElementById('stepForm').contains(signupForm)) { // document.getElementById('stepForm').setAttribute('success', 'true'); // } else { // document.getElementById('stepForm').setAttribute('success', 'false'); // } return true; } function initPage() { let stepFormContainer = document.getElementById('stepForm'); // return since the form is alreafy on place if (stepFormContainer && stepFormContainer.getAttribute('success') === 'true') { console.log('form already in place'); return true; } console.log('initializing page'); try { isLogged(); checkInputs(); observeDeferredRegistration(); let language = getCookieValue('LANG'); if (language === '') language = 'en'; // append copy let copyContainer = document.getElementById('stepForm-copy'); if (copyContainer) { copyContainer.innerHTML = `

${translations[language].headings.start}

`; } // append progress bar let progressContainer = document.getElementById('stepForm-progress'); if (progressContainer) { progressContainer.innerHTML = `

`; // init progressBar barProgress(1); } // append step form let stepFormContainer = document.getElementById('stepForm-container'); if (stepFormContainer) { stepFormContainer.innerHTML = ''; stepFormContainer.append(signupForm); signupForm.style.display = 'block'; } // append nav buttons stepForm-nav let navBtnContainer = document.getElementById('stepForm-nav'); if (navBtnContainer) { navBtnContainer.innerHTML = ` `; } // init navigation buttons let prevStep = document.getElementById('previous-step'); let nextStep = document.getElementById('next-step'); if (prevStep) { prevStep.addEventListener('click', function() { navigateSteps(-1); }); } if (nextStep) { nextStep.addEventListener('click', function() { navigateSteps(1); }); } // init step form return initStepForm(); } catch (error) { // console.error('Error during initPage:', error); // manageError(); window._stepFormInitialized = false; return false; } } // WAITING UNTIL THE SIGNUP FORM LOADS UNTIL INIT THE PAGE let checkExistenceInterval = setInterval(function() { // console.log('interval'); let signupForm = document.querySelector('bx-profile-registration-form'); let stepFormContainer = document.getElementById('stepForm'); if (window._stepFormInitialized === true) { console.log('Step form script already initialized'); clearInterval(checkExistenceInterval); // Stop checking clearTimeout(timeout); // Clear the timeout as the condition was met return; } else { // return since the form is alreafy on place if (stepFormContainer && stepFormContainer.getAttribute('success') === 'true') { console.log('form already in place'); clearInterval(checkExistenceInterval); // Stop checking clearTimeout(timeout); // Clear the timeout as the condition was met window._stepFormInitialized = true; return; } else { if (isLogged()) { // manage logged in users manageLoggedIn(); return; } else { // The signup form is fully loaded and the visitor is unlogged if (signupForm && signupForm.getAttribute('waiting-for-files-to-load') === 'success!' && !isLogged() ) { console.log(`giotest32`); // Its the first execution. Flag stored on window object if(window._stepFormInitialized === false || window._stepFormInitialized === undefined) { if(initPage()) { console.log('First script execution'); window._stepFormInitialized = true; }; } } } } } }, 1000); let timeout = setTimeout(function() { if(window._stepFormInitialized === false || window._stepFormInitialized === undefined) { manageError(); } clearTimeout(timeout); // Clear the timeout as the condition was met clearInterval(checkExistenceInterval); // Stop checking }, 5500);

100%Welcome BonusUp to USD 1,000 with your 1st deposit to play Poker