import { html, render, useState, useEffect } from "https://esm.sh/htm/preact/standalone"; const brand = "16a5d192"; const program = "6105e192"; const uniqueIdentifier = "starburst"; const bambuUrl = "https://temp.api.bambumeta.software/forms"; const passUiUrl = "https://wallet-pass.bambumeta.software/"; const optionTierMapping = { "Sports": 80, "Gaming": 79, "Crafting": 81, "Music": 78, "Reading": 82 }; function handleRecaptcha () { return new Promise((resolve, reject) => { grecaptcha.ready(function() { grecaptcha.execute("6LdTqjApAAAAAMbCMMMrGOHEwXBN4w2zSxyMx57q", { action: "submit" }).then((token) => { resolve(token); }).catch((error) => { reject(error); }); }); }); } function Checkbox ({ value, onChange }) { return value ? html` onChange(false)} name="checkbox">` : html` onChange(true)} name="square-outline">`; } function Form () { const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [email, setEmail] = useState(""); const [phone, setPhone] = useState(""); const [unwrapJoyOptions, setUnwrapJoyOptions] = useState(Object.keys(optionTierMapping)); const [selectedUnwrapJoyOption, setSelectedUnwrapJoyOption] = useState(null); const [optionsExpanded, setOptionsExpanded] = useState(false); const [selectedOption, setSelectedOption] = useState(""); const [showAgeGate, setShowAgeGate] = useState(true); const [showAgeGateNotAllowed, setShowAgeGateNotAllowed] = useState(false); const [ageGateMonth, setAgeGateMonth] = useState(""); const [ageGateYear, setAgeGateYear] = useState(""); const [_18AndAbove, set18AndAbove] = useState(false); const [marketingConsent, setMarketingConsent] = useState(true); const [showBorderOn18AndAbove, setShowBorderOn18AndAbove] = useState(false); const [loadingSubmit, setLoadingSubmit] = useState(false); useEffect(() => { try { const ageGate = JSON.parse(localStorage.getItem("ageGate")); if (ageGate) { setShowAgeGate(false); setShowAgeGateNotAllowed(!ageGate.allowed); } } catch {} }, []); useEffect(() => { if (showBorderOn18AndAbove) { setTimeout(() => { setShowBorderOn18AndAbove(false); }, 5000); } }, [showBorderOn18AndAbove]); async function submitForm (event) { event.preventDefault(); const recaptchaToken = await handleRecaptcha(); if (!recaptchaToken) { alert("reCAPTCHA failed. Please reload the page."); return; } if (showAgeGateNotAllowed) { window.alert("You cannot submit this form."); return; } setLoadingSubmit(true); if (!validateInputs()) { setLoadingSubmit(false); return; } const payload = { person: { firstName, lastName, email, phone, }, metaData: { unwrapjoy: selectedOption, marketingConsent, }, templateTierId: optionTierMapping[selectedOption], }; fetch( `${bambuUrl}/${brand}/programs/${program}/landing-pages/${uniqueIdentifier}/recaptcha-issue-wallet`, { method: "POST", headers: { "X-Recaptcha-Response": recaptchaToken, "Content-Type": "application/json" }, body: JSON.stringify(payload) } ) .then(response => response.json()) .then(responseData => { if (responseData.downloadUrl) { window.location.href = `${passUiUrl}${responseData.downloadUrl.slice(1)}`; } else { alert("Wallet Pass issue failed. Please try again."); } }) .catch(error => { console.error("An error ocurred while trying to issue a wallet pass"); console.error(error); alert("Wallet Pass issue failed. Please try again."); }) .finally(() => { setLoadingSubmit(false); }); } function validateInputs () { if (!firstName) { alert("Please enter a first name"); return false; } if (!lastName) { alert("Please enter a last name"); return false; } if (!email) { alert("Please enter an email"); return false; } if (!phone) { alert("Please enter a phone number"); return false; } if (!selectedOption) { alert("Please select a How do you unwrap joy? option"); return false; } if (!_18AndAbove) { setShowBorderOn18AndAbove(true); return false; } return true; } function toggleExpanded () { setOptionsExpanded(!optionsExpanded); } function selectOption (option) { setSelectedOption(option); setOptionsExpanded(false); } function submitAgeGate (event) { event.preventDefault(); if (!ageGateMonth || !ageGateYear) { alert("Please enter a valid date"); return; } const isAllowed = new Date(ageGateYear, ageGateMonth - 1) < new Date(new Date().getFullYear() - 13, new Date().getMonth()); const ageGate = { allowed: isAllowed }; localStorage.setItem("ageGate", JSON.stringify(ageGate)); setShowAgeGate(false); setShowAgeGateNotAllowed(!ageGate.allowed); } function submitDisabled () { return !firstName || !lastName || !email || !phone || !selectedOption; } return html`

Let Us Fund Your Juicy Fun

On average, we spend $312.00 more on gifts for others than on new experiences for ourselves. But holiday festivities shouldn’t stop you from unwrapping your own universe of joy.

That’s why we’re introducing the Starburst Pink Passion Protection Program, providing fans with an extra $312.00 to fuel juicy fun that feels different every time. Enter below for a chance to win!

${showAgeGate && (html`

HOLD UP.

Enter your birthday and you’re free to go. We know you’re hungry.

For more information about responsible use of our products, please follow the link to the Mars Marketing Code.

`)} ${showAgeGateNotAllowed && (html`

We are sorry.

Our marketing code states that you are not authorized to access the content you requested. Unfortunately, you cannot view the additional content in this section of the website.

MORE INFORMATION ABOUT THE MARS MARKETING CODE > IMPRINT >

`)}

setFirstName(event.target.value)} placeholder="First Name: " /> setLastName(event.target.value)} placeholder="Last Name: " />

setEmail(event.target.value)} placeholder="Email: " /> setPhone(event.target.value)} placeholder="Phone Number: " />

How do you unwrap joy? ${selectedOption && (html`

${selectedOption}

`)}

${unwrapJoyOptions.map(option => html`

selectOption(option)}>${option}

`)}

<${Checkbox} value=${marketingConsent} onChange=${setMarketingConsent} /> Yes! I would like to receive future marketing communications from STARBURST and other Mars Wrigley brands via the email provided. You can opt out at any time.