Ticket Number: " + ticketNumber + "

"; newDiv.appendChild(ticketNumberBox); var qrcode = document.createElement("img"); qrcode.id = "barcode"; qrcode.src = `https://api.qrserver.com/v1/create-qr-code/?data=${ticketNumber}&size=100x100`; qrcode.alt = ""; qrcode.width = "100"; qrcode.height = "100"; //qrcode.style = "margin-bottom: 15px;"; newDiv.appendChild(qrcode); var qrcodeLabel = document.createElement("div"); qrcodeLabel.innerHTML = `${ticketNumber}`; qrcodeLabel.style = "font-size: 10px; line-height: 1.3; margin-bottom: 20px;"; newDiv.appendChild(qrcodeLabel); var step3Header = document.createElement("h6") if (shippingMethod.toUpperCase().includes("SHIPPING MY OWN MODULES")) { step3Header.innerText = "2. Securely package your module(s) and ship them to us!"; step3Header.style = "text-align: start; margin-top: 15px;"; newDiv.appendChild(step3Header); } else { step3Header.innerText = "2. Order your module(s) dirently from an Authorized Retailer and put Battle Beaver's shipping information in the order!"; step3Header.style = "text-align: start; margin-top: 15px;"; newDiv.appendChild(step3Header); var step3Body1a = document.createElement("p") step3Body1a.innerHTML = `We recommend purchasing Modules directly from Sony's Website.`; step3Body1a.style = "text-align: center; margin: 15px 0px 15px; font-weight: 700;"; newDiv.appendChild(step3Body1a); var step3img = document.createElement("img"); step3img.src = "https://storage.googleapis.com/battle_beaver_public_images/Service%20Center%20Send-Ins/DSEM%20shipping%20info%202.png"; step3img.style = "width: 100%; height: auto;"; newDiv.appendChild(step3img); step2Header.innerText = "1. Take note of your Ticket Number, shown below."; } var step3Body1 = document.createElement("p") step3Body1.innerText = "Battle Beaver Customs"; step3Body1.style = "text-align: start; margin: 15px 10px 0px 10px;"; newDiv.appendChild(step3Body1); var step3Body2 = document.createElement("p") step3Body2.innerText = "901 International Pkwy"; step3Body2.style = "text-align: start; margin: 0px 10px 0px 10px;"; newDiv.appendChild(step3Body2); var step3Body3 = document.createElement("p") step3Body3.innerText = "STE 200"; step3Body3.style = "text-align: start; margin: 0px 10px 0px 10px;"; newDiv.appendChild(step3Body3); var step3Body4 = document.createElement("p") step3Body4.innerText = "Richardson TX, 75081"; step3Body4.style = "text-align: start; margin: 0px 10px 10px 10px;"; newDiv.appendChild(step3Body4); var step4Header = document.createElement("h6") step4Header.innerText = "3. All done!"; step4Header.style = "text-align: start; margin-top: 15px;"; newDiv.appendChild(step4Header); var step4Body = document.createElement("p") step4Body.innerText = "Keep an eye on your email. We will contact you with additional details when your module(s) have been checked in by our team members at our facility."; step4Body.style = "text-align: start; margin-top: 15px; margin-left: 10px;"; newDiv.appendChild(step4Body); //var extraNote = document.createElement("p") //extraNote.innerHTML = "NOTE: If you are sending more than one controller, you must submit a service request form for each one!"; //extraNote.style = "text-align: start; margin-top: 30px;"; //newDiv.appendChild(extraNote); } waitForResponseElement(); }, true); // true changes this event listener to activate first (rather than the actual submit function) document.getElementById("module-minus").addEventListener("click", function() { if(document.getElementById('module-count').value > 1) { deleteModule(document.getElementById('module-count').value); } }); document.getElementById("module-plus").addEventListener("click", function() { if (document.getElementById('module-count').value < 10) { document.getElementById('module-count').value++; triggerChangeEvent(document.getElementById('module-count')); generateModule(document.getElementById('module-count').value); document.getElementById("modules-div").style.display = "block"; } }); function triggerChangeEvent(element) { var event = new Event('change', {bubbles: true, cancelable: true,}); element.dispatchEvent(event); } function deleteModule(count) { document.getElementById(`module-${count}-div`).remove(); document.getElementById(`module-${Number(count) - 1}-div`).classList.add("last-module"); document.getElementById('module-count').value--; triggerChangeEvent(document.getElementById('module-count')); outputData(); } function generateModule(count) { const parent = document.getElementById("modules-div"); document.querySelectorAll('div[class*="last-module"]').forEach(function(div) {div.classList.remove("last-module");}); const div = document.createElement("div"); div.id = `module-${count}-div`; if(count % 2 == 1) {div.style.backgroundColor = "rgb(231 231 231)";} else {div.style.backgroundColor = "rgb(241 241 241)";} div.style.padding = "10px"; div.style.position = "relative"; if (count == 1) {div.classList.add("first-module");} div.classList.add("last-module"); const col1 = document.createElement("div"); const bold = document.createElement("b"); bold.innerHTML = `

Module ${count}

`; bold.style = "text-align: center; font-size: 18px;"; col1.appendChild(bold); const pricing = document.createElement("div"); pricing.innerHTML = ""; // + (Thumbstick **) pricing.classList.add("pricing-div"); pricing.id = `module-${count}-pricing`; col1.appendChild(pricing); const mechTypeDiv = document.createElement("div"); const mechType = document.createElement("select"); mechType.id = `module-${count}-mech-type`; mechType.classList.add("form-control"); generateOptions(mechType, [ ["", "Select Mechanism Type", true], ["No Service Needed", "$0 - No Service Needed"], ["TMR", "$25 - Magneto Mechanism (TMR)"], ["Alps", "$20 - OEM/Analog Mechanism"] ] ); const mechTypeLabel = document.createElement("label"); mechTypeLabel.classList.add("fitText"); mechTypeLabel.classList.add("block_label"); mechTypeLabel.htmlFor = `module-${count}-mech-type`; mechTypeLabel.tabIndex = -1; mechTypeLabel.innerText = "Replacement Thumbstick Mechanism*"; mechTypeLabel.style = "display: inline;"; mechTypeDiv.appendChild(mechTypeLabel); mechTypeDiv.appendChild(mechType); col1.appendChild(mechTypeDiv); const tensionDiv = document.createElement("div"); const tension = document.createElement("select"); tension.id = `module-${count}-tension`; tension.classList.add("form-control"); tension.disabled = true; generateOptions(tension, [ ["", "Select Tension", true], ["Decreased", "+$5 - Decreased Tension (-40%)"], ["Light", "+$5 - Light Tension (-20%)"], ["Stock", "+$0 - Stock Tension"], ["Increased", "+$5 - Increased Tension (+75%)"], ["Heavy", "+$5 - Heavy Tension (+150%)"] ] ); const tensionLabel = document.createElement("label"); tensionLabel.classList.add("fitText"); tensionLabel.classList.add("block_label"); tensionLabel.htmlFor = `module-${count}-tension`; tensionLabel.tabIndex = -1; tensionLabel.innerText = "Tension*"; tensionLabel.style = "display: inline;"; tensionDiv.appendChild(tensionLabel); tensionDiv.appendChild(tension); col1.appendChild(tensionDiv); const stickClickDiv = document.createElement("div"); const stickClick = document.createElement("select"); stickClick.id = `module-${count}-stick-click`; stickClick.classList.add("form-control"); stickClick.disabled = true; generateOptions(stickClick, [ ["", "Select Stick Click", true], ["Smart Stick Click", "+$15 - Smart Stick Click"], ["Stock Stick Click", "+$0 - Stock Stick Click"] ] ); const stickClickLabel = document.createElement("label"); stickClickLabel.classList.add("fitText"); stickClickLabel.classList.add("block_label"); stickClickLabel.htmlFor = `module-${count}-stick-click`; stickClickLabel.tabIndex = -1; stickClickLabel.innerText = "Add Smart Stick Click?*"; stickClickLabel.style = "display: inline;"; stickClickDiv.appendChild(stickClickLabel); stickClickDiv.appendChild(stickClick); col1.appendChild(stickClickDiv); const stickTypeDiv = document.createElement("div"); const stickType = document.createElement("input"); stickType.type = "text"; stickType.classList.add("autocomplete"); stickType.classList.add("validate"); stickType.classList.add("form-control"); stickType.id = `module-${count}-stick-type`; stickType.placeholder = "Ex: OEM Edge, PS5 Solid Blue, Clear/Black Z-Stick, etc."; //stickType.autocomplete = "off"; const stickTypeLabel = document.createElement("label"); stickTypeLabel.classList.add("fitText"); stickTypeLabel.classList.add("block_label"); stickTypeLabel.htmlFor = `module-${count}-stick-type`; stickTypeLabel.tabIndex = -1; stickTypeLabel.style = "width: 100%; display: inline;"; stickTypeLabel.innerHTML = "Replacement Thumbstick ** See Available Thumbsticks"; const stickTypeFooter = document.createElement("p"); stickTypeFooter.innerText = "** Edge Modules are only compatiple with OEM Edge Sticks ($5), PS5 OEM Black Sticks ($0), PS5 Solid Sticks ($7), Z-Sticks ($10), Pro Sticks ($10), and Interchangeable Sticks ($15)."; stickTypeFooter.style = "font-size: 12px; line-height: 1.5; margin-bottom: 0; margin-top: 5px;"; stickTypeDiv.appendChild(stickTypeLabel); stickTypeDiv.appendChild(stickType); stickTypeDiv.appendChild(stickTypeFooter); col1.appendChild(stickTypeDiv); stickType.addEventListener("keydown", function(event) { if (event.key === "'" || event.key === "(" || event.key === ")") { event.preventDefault(); } }); stickType.addEventListener("keydown", function(event) { if (event.key === "Enter" || event.key === "\\" || event.key === "{" || event.key === "}" || event.key === "[" || event.key === "]" || event.key === "`" || event.key === '"') { event.preventDefault(); } }); stickType.addEventListener("paste", function(event) { event.preventDefault(); const clipboardData = event.clipboardData || window.clipboardData; const pastedText = clipboardData.getData('text/plain'); const modifiedText = pastedText .replace(/"/g, "") .replace(/`/g, "") .replace(/{/g, "") .replace(/}/g, "") .replace(/'/g, "") .replace(/$/g, "") .replace(/$/g, "") .replace(/\[/g, "") .replace(/]/g, "") .replace(/\\/g, "") .replace(/\n/g, ""); document.execCommand('insertText', false, modifiedText); }); const toastContainer = document.createElement("div"); toastContainer.id = `module-${count}-toast-container`; toastContainer.classList.add("toast-container"); div.appendChild(toastContainer); div.appendChild(col1); parent.appendChild(div); stickType.oninput = function() {outputData();}; mechType.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; tension.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; stickClick.onchange = function() {handleMech(mechType, tension, stickClick, toastContainer); outputData();}; outputData(); document.getElementById("form-height-reset-checkbox-1").click(); document.getElementById("form-height-reset-checkbox-1").click(); } function outputData() { const count = document.getElementById('module-count').value; var output = document.getElementById("modules-data"); var mechTypeValidation = ""; var tensionValidation = ""; var stickClickValidation = ""; var pricing = document.getElementById("pricing-div"); pricing.innerHTML = ""; var pricingString = ""; var pricingArray = []; var totalPrice = 0; var grandTotalPrice = 0; output.value = ""; if (count == 0) {return;} for (var i = 1; i <= count; i++) { output.value += `${(i > 1 ? ", " : "")}'Module ${i}': ('Mech Type': '${document.getElementById(`module-${i}-mech-type`).value}', 'Tension': '${document.getElementById(`module-${i}-tension`).value}', 'Stick Click': '${document.getElementById(`module-${i}-stick-click`).value}', 'Thumbstick': '${document.getElementById(`module-${i}-stick-type`).value}')`; if (document.getElementById(`module-${i}-mech-type`).value === "") {mechTypeValidation += "Missing Data";} else if (document.getElementById(`module-${i}-mech-type`).value.includes("TMR")) {pricingArray.push([25, "$25 Magneto Mechanism"]);} else if (document.getElementById(`module-${i}-mech-type`).value.includes("Alps")) {pricingArray.push([20, "$20 OEM Mechanism"]);} else if (document.getElementById(`module-${i}-mech-type`).value.includes("No Service Needed")) {pricingArray.push([0, "$0 No Mechanism Service"]);} if (!document.getElementById(`module-${i}-tension`).disabled && document.getElementById(`module-${i}-tension`).value === "") {tensionValidation += "Missing Data";} else if (!document.getElementById(`module-${i}-tension`).disabled) { if (document.getElementById(`module-${i}-tension`).value.includes("Stock")) {pricingArray.push([0, " + $0 Stock Tension"]);} else {pricingArray.push([5, ` + $5 ${document.getElementById(`module-${i}-tension`).value} Tension`]);} } if (!document.getElementById(`module-${i}-stick-click`).disabled && document.getElementById(`module-${i}-stick-click`).value === "") {stickClickValidation += "Missing Data";} else if (!document.getElementById(`module-${i}-stick-click`).disabled) { if (document.getElementById(`module-${i}-stick-click`).value.includes("Smart")) {pricingArray.push([15, " + $15 Smart Stick Click"]);} else {pricingArray.push([0, " + $0 Stock Stick Click"]);} } pricingArray.forEach(price => {totalPrice += price[0];}); pricingString += `

Module ${i} ≈ $${totalPrice} ≈ `; pricingArray.forEach(price => {pricingString += price[1];}); pricingString += "

"; document.getElementById(`module-${i}-pricing`).innerHTML = `≈ $${totalPrice}`; pricingArray = []; grandTotalPrice += totalPrice; totalPrice = 0; } output.value = `(${output.value})`; if (mechTypeValidation !== "") {document.getElementById("mech-type-data-validation").value = "";} else {document.getElementById("mech-type-data-validation").value = "Validated";} if (tensionValidation !== "") {document.getElementById("tension-data-validation").value = "";} else {document.getElementById("tension-data-validation").value = "Validated";} if (stickClickValidation !== "") {document.getElementById("stick-click-data-validation").value = "";} else {document.getElementById("stick-click-data-validation").value = "Validated";} pricingString += `

--------------------

Grand Total ≈ $${grandTotalPrice} ***

*** Price does not include the cost of Replacement Thumbsticks or the cost of shipping. Price is subject to change. Payment will be due when the Service Center emails you your invoice after the Service Center has received your shipped module(s) and checked them into our system. Orders below $15 may have a processing fee applied.

*** We are only able to fulfil requests for total modules received. Any missing modules will not have requested repairs fulfilled.

`; pricing.innerHTML = pricingString; } function handleMech(mechType, tension, stickClick, toastContainer) { if (mechType.value === "" || mechType.value.includes("No Service Needed")) { tension.selectedIndex = 0; stickClick.selectedIndex = 0; tension.disabled = true; stickClick.disabled = true; } else { tension.disabled = false; } if (tension.value === "") { stickClick.selectedIndex = 0; stickClick.disabled = true; } else if (tension.value.includes("Increased") || tension.value.includes("Heavy")) { stickClick.selectedIndex = 0; stickClick.disabled = true; // Add toast or something to tell customer that Smart Click isn't available w/ Incr./Heavy showToast(toastContainer, 'Smart Stick Click is not available for Increased or Heavy Tension.', 'error'); } else { stickClick.disabled = false; } } function generateOptions(container, values) { // const container = document.currentScript.previousElementSibling; values.forEach(function(value) { const option = document.createElement("option"); option.value = value[0]; option.innerText = (value[1] ? value[1] : value[0]); option.selected = (value[2] ? true : false); if (value[0] === "line break") { console.log("test") option.innerText = "------------------------------"; option.disabled = true; } /// Change this to listen for domContentLoaded and manually edit the .dropdown-content li to add the

element container.appendChild(option); }); } function showToast(toastContainer, message, type = 'info') { if (!toastContainer) { console.error("Toast container not found."); return; } const toast = document.createElement('div'); toast.classList.add('toast'); toast.textContent = message; // Add type-specific classes for styling (e.g., 'success', 'error', 'warning') if (type === 'success') { toast.style.backgroundColor = '#4CAF50'; // Green } else if (type === 'error') { toast.style.backgroundColor = '#f44336'; // Red } else if (type === 'warning') { toast.style.backgroundColor = '#ff9800'; // Orange } toastContainer.appendChild(toast); // Remove the toast after a few seconds setTimeout(() => { toast.remove(); }, 6000); // 6 seconds } })

BUILD YOURS NOW

QUICK PICKS

PRE-BUILTS

CONTROLLER BUILDER

QUICK PICKS

PRE-BUILTS

BUILD YOURS NOW

QUICK PICKS

PRE-BUILTS

All Quick Picks