"use strict";

window.fbmPayments && (window.fbmPayments.initForm = async function () {

    var pay = window.fbmPayments,
        paymentForm,
        card,
        headerImg = '/yokee/images/header-bg.jpg',
        logoImg = '/yokee/images/app-logo-248-beveled.png',
        closeImg = '/images/close-button-white.png',
        anims = {};



    async function onPaymentConfirmed(e) {
        var d = e.detail || {},
            action = pay.selectedAction;

        if (paymentForm) {
            paymentForm.removeEventListener('submit', onPaymentFormSubmit);
        }
        clearCache();
        var body = {
            intentId: d.intentId,
            setupIntentId: d.setupIntentId,
            subId: d.subId,
            attribution: urlParamsAsObject()
        };
        Object.assign(body, browserInfo());
        try {
            var completeInfo = await pay.post('/complete', body);
            if (completeInfo.voucher.isNew) {
                var price = completeInfo.invoice.price;
                pay.trackEvent('purchase', {
                    affiliation: pay.provider,
                    currency: (completeInfo.invoice.currency || '').toUpperCase(),
                    transaction_id: completeInfo.invoice.id,
                    value: price,
                    items: [{
                        id: action.priceId,
                        name: action.offer,
                        brand: action.brand,
                        variant: action.desc,
                        quantity: 1,
                        price
                    }]
                });
            }
            if (!paymentForm) showForm({ completeInfo }); else showCompleteView(completeInfo);
        } catch (err) {
            pay.dispatchPaymentFailedEvent(err);
        }
    }



    function showCompleteView(completeInfo) {
        submitButtons().forEach(function(x) { x.remove() });
        var mainElements = paymentForm.querySelectorAll('.main > :not(.complete)');
        mainElements.forEach(function(x) { if (!x.classList.contains('complete')) x.remove(); })
        paymentForm.querySelectorAll('.complete').forEach(function(e) { e.classList.toggle('hidden'); });
        paymentForm.querySelectorAll('.activate').forEach(function(e) { e.href = completeInfo.voucher.url });
        if (completeInfo.customer && completeInfo.customer.email) {
            var msg;
            if (isAppCompatible()) {
                msg = '<b>Want to activate later?</b><br>The activation link was just sent to {{email}}. You can share or activate it at any time. Please note it can be activated only once.'.replace(
                    '{{email}}', completeInfo.customer.email
                );
            } else {
                msg = '<b>An email has been sent to {{email}}.</b> Open it from your mobile device to download and activate Yokee.'.replace(
                    '{{email}}', completeInfo.customer.email
                );
            }
            setTimeout(function() {
                paymentForm.querySelectorAll('.notice').forEach(function(e) {
                    e.innerHTML = msg;
                });
            }, 0);
        }
        paymentForm.querySelectorAll('.contact_link').forEach(function(e) {
            var url = 'mailto:support@yokee.tv?subject=Purchase+Number+{{code}}'.replace(
                '{{code}}', completeInfo.voucher.code
            );
            e.href = url;
        });
        paymentForm.querySelectorAll('.purchase_confirmation').forEach(function(e) {
            var msg = 'Confirmation: {{code}}'.replace(
                '{{code}}', completeInfo.voucher.code
            );
            e.innerHTML = msg;
        });
        var animElems = paymentForm.querySelectorAll('.anim');
        for (var e of animElems) anims[e.id].play();
    }



    function onPaymentMethodVerified(e) {
        var action = pay.selectedAction;
        pay.trackEvent('checkout_progress', {
            currency: (action.price.currency || '').toUpperCase(),
            value: action.price.amount,
            checkout_option: pay.provider,
            checkout_step: pay.CHECKOUT_STEP_METHOD_VERIFIED,
            items: [{
                id: action.priceId,
                name: action.offer,
                brand: action.brand,
                variant: action.desc,
                quantity: 1,
                price: action.price.amount
            }]
        });
        createSubscription(e.detail);
    }



    function onPaymentRequiresAction(e) {
        var d = e.detail || {},
            action = pay.selectedAction;
        pay.trackEvent('checkout_progress', {
            currency: (action.price.currency || '').toUpperCase(),
            value: action.price.amount,
            checkout_option: pay.provider,
            checkout_step: pay.CHECKOUT_STEP_ACTION_REQUIRED,
            items: [{
                id: action.priceId,
                name: action.offer,
                brand: action.brand,
                variant: action.desc,
                quantity: 1,
                price: action.price.amount
            }]
        });
        if (d.pendingSetupIntent && d.pendingSetupIntent.id) {
            confirmPaymentSetup({
                pendingSetupIntent: d.pendingSetupIntent,
                subId: d.subId
            })
        } else {
            confirmPayment({
                paymentMethodId: d.paymentMethodId,
                paymentIntent: d.paymentIntent
            });
        }
    }



    function onPaymentFailed(e) {
        var d = e.detail,
            err = d.error,
            action = pay.selectedAction;

        if (err.error) err = err.error;
        var msg;
        if (err.code === undefined) {
            msg = 'Payment failed: {{message}}'.replace(
                '{{message}}', err.message
            );
        } else {
            msg = 'Payment failed: {{message}} ({{code}})'.replace(
                '{{code}}', err.code
            ).replace(
                '{{message}}', err.message
            );
        }

        // https://developers.google.com/gtagjs/reference/event#exception
        pay.trackEvent('exception', {
            description: msg,
            fatal: true
        });

        if (paymentForm) {
            var errorElement = document.querySelector('#payment-error');
            errorElement.textContent = msg;
            toggleSubmitLoader();
        } else {
            pay.resetModal();
            setTimeout(function () {
                alert(msg);
            }, 1);
        }
    }



    async function createSubscription({ paymentMethodId, complete }) {
        try {
            var result = await pay.post('/sub', {
                paymentMethodId, priceId: pay.selectedAction.priceId
            });
            await processCreateSubscriptionResult({ paymentMethodId, result });
            if (complete) complete('success');
            return Promise.resolve();
        } catch (err) {
            if (complete) complete('fail');
            return pay.dispatchPaymentFailedEvent(err);
        }
    }



    async function confirmPaymentSetup({ pendingSetupIntent, subId }) {
        var psi = pendingSetupIntent;
        try {
            var res = await pay.stripe.confirmCardSetup(psi.client_secret);
            // start code flow to handle updating the payment details
            // Display error message in your UI.
            // The card was declined (i.e. insufficient funds, card has expired, etc)
            if (!res) throw new Error('missing setup response');
            if (res.error) throw res.error; // error-like object
            var si = res.setupIntent;
            if (!si) throw new Error('missing setup info');
            if (si.status !== 'succeeded') throw new Error(`invalid setup status ${si.status}`);
            if (!si.id) throw new Error(`missing setup id`);
            return pay.dispatchPaymentConfirmedEvent({ setupIntentId: si.id, subId });
        } catch (err) {
            return pay.dispatchPaymentFailedEvent(err);
        }
    }



    async function confirmPayment({ paymentMethodId, paymentIntent }) {
        var pmId = paymentMethodId;
        var pi = paymentIntent;
        try {
            var res = await pay.stripe.confirmCardPayment(pi.client_secret, {
                payment_method: pmId
            })
            // start code flow to handle updating the payment details
            // Display error message in your UI.
            // The card was declined (i.e. insufficient funds, card has expired, etc)
            if (!res) throw new Error('missing payment response');
            if (res.error) throw res.error; // error-like object
            var pi = res.paymentIntent;
            if (!pi) throw new Error('missing payment info');
            if (pi.status !== 'succeeded') throw new Error(`invalid payment status ${pi.status}`);
            if (!pi.id) throw new Error(`missing payment id`);
            return pay.dispatchPaymentConfirmedEvent({ intentId: pi.id });
        } catch (err) {
            return pay.dispatchPaymentFailedEvent(err);
        }
    }



    async function createPaymentMethod({ billingDetails, invoiceId, customerId }) {
        try {
            // invoiceId, customerId exist IFF we retry
            var result = await pay.stripe.createPaymentMethod({
                type: 'card',
                card: card,
                billing_details: billingDetails,
            });
            if (result.error) return pay.dispatchPaymentFailedEvent(result);
            if (invoiceId && customerId) {
                // Update the payment method and retry invoice payment
                return retryInvoiceWithNewPaymentMethod({
                    paymentMethodId: result.paymentMethod.id,
                    customerId,
                    invoiceId
                });
            } else {
                return pay.dispatchPaymentMethodVerifiedEvent({
                    paymentMethodId: result.paymentMethod.id
                });
            }
        } catch(err) {
            return pay.dispatchPaymentFailedEvent(err);
        }
    }



    async function retryInvoiceWithNewPaymentMethod({ customerId, paymentMethodId, invoiceId }) {
        var result = await pay.post('/retry', { customerId, paymentMethodId, invoiceId });
        return processRetryInvoiceResult({ paymentMethodId, result });
    }



    async function processCreateSubscriptionResult({ paymentMethodId, result }) {
        if (result.error) throw result;
        var sub = result.subscription || {};
        var pi = sub.payment_intent || {};
        if (processActiveSubscription(sub, pi)) return;
        // const subStatusToProcess = new Set(['active', 'trialing']);
        // const intentStatusToProcess = new Set(['succeeded', '']);
        // if (!subStatusToProcess.has(sub.status)) return false;
        // if (!intentStatusToProcess.has(pi.status))
        var psi = sub.pending_setup_intent || {};
        if (pi.status === 'requires_confirmation') {
            return confirmPayment({
                paymentMethodId,
                paymentIntent: pi
            });
        } else if (pi.status === 'requires_action' || psi.status === 'requires_confirmation') {
            // additional authentication required by financial institution? (3DS, 2FA)
            return pay.dispatchPaymentRequiresActionEvent({
                paymentMethodId,
                paymentIntent: pi,
                pendingSetupIntent: psi,
                subId: sub.id
            });
        } else if (pi.status === 'requires_payment_method') {
            // Card attached to customer but charging the customer failed?
            return processRequiresPaymentMethod({
                invoiceId: sub.latest_invoice,
                customerId: sub.customer.id,
                paymentIntent: pi
            });
        }
        throw new Error(`invalid inactive status ${pi.status}`);
    }



    function processRetryInvoiceResult({paymentMethodId, result }) {
        if (result.error) throw result;
        var sub = result.subscription || {};
        var pi = sub.payment_intent || {};
        if (processActiveSubscription(sub, pi)) return;
        if (['requires_action', 'requires_payment_method'].indexOf(pi.status) >= 0) {
            // additional authentication required or
            // we need to re-confirm the previously-failed payment:
            return pay.dispatchPaymentRequiresActionEvent({
                paymentMethodId,
                paymentIntent: pi
            });
        }
        throw new Error(`invalid inactive status ${pi.status}`);
    }



    function processActiveSubscription(sub, pi) {
        if (sub.status !== 'active') return false;
        if (pi.status !== 'succeeded')
            throw new Error(`invalid active status ${pi.status}`);
        pay.dispatchPaymentConfirmedEvent({ intentId: pi.id });
        return true;
    }



    function processRequiresPaymentMethod({ invoiceId, customerId, paymentIntent }) {
        // Using localStorage to store the state of the retry: latest invoice ID and status
        localStorage.setItem('latestInvoiceId', invoiceId);
        localStorage.setItem('customerId', customerId);
        localStorage.setItem(
            'lastPaymentIntentStatus',
            paymentIntent.status
        );
        throw new Error('Your card was declined');
    }



    function onPaymentFormSubmit(ev) {
        ev.preventDefault();
        clearOutcome();
        toggleSubmitLoader();
        var name = document.querySelector("#payment-name").value;
        var email = document.querySelector("#payment-email").value;
        var countryCode = document.querySelector("#payment-country").value;
        try {
            validateUserInput(name, email, countryCode);
        } catch (err) {
            return pay.dispatchPaymentFailedEvent(err);
        }
        var billingDetails = {
            name: name,
            email: email,
            address: {
                country: countryCode
            }
        };

        var lastPaymentIntentStatus = localStorage.getItem('lastPaymentIntentStatus');
        if (lastPaymentIntentStatus === 'requires_payment_method') {
            // If a previous payment failed, reuse lastest invoice and customer
            // with a new payment method:
            var invoiceId = localStorage.getItem('latestInvoiceId');
            var customerId = localStorage.getItem('customerId');
            // create new payment method & retry payment on invoice with new payment method
            createPaymentMethod({
                billingDetails,
                priceId: pay.selectedAction.priceId,
                card, customerId, invoiceId
            });
        } else {
            // create new payment method & create subscription
            createPaymentMethod({
                billingDetails,
                priceId: pay.selectedAction.priceId,
                card
            });
        }
    }



    function validateUserInput(name, email, countryCode) {
        if (!name || name.trim().length == 0) throw new Error('Missing name');
        if (!email || email.trim().length == 0) throw new Error('Missing email');
        if (!countryCode || countryCode.trim().length == 0) throw new Error('Missing country');
    }



    function toggleSubmitLoader() {
        var btnElems = submitButtons();
        btnElems.forEach(function(btnElem) {
            var textElem = btnElem.querySelector("span");
            var loaderElem = btnElem.querySelector(".loader");
            textElem.classList.toggle('hidden');
            loaderElem.classList.toggle('hidden');
            if (btnElem.getAttribute('disabled'))
                btnElem.removeAttribute('disabled');
            else
                btnElem.setAttribute('disabled', 'disabled');
        });
    }



    function submitButtons() {
        return paymentForm.querySelectorAll("[type='submit']");
    }



    function initCardElement() {
        var elements = pay.stripe.elements();
        card = elements.create('card', {
            iconStyle: 'solid',
            style: {
                base: {
                    iconColor: '#8898AA',
                    color: '#586A82',
                    lineHeight: '36px',
                    fontWeight: 300,
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSize: '19px',

                    '::placeholder': {
                        color: '#8898AA',
                    },
                },
                invalid: {
                    iconColor: '#e85746',
                    color: '#e85746',
                }
            },
            classes: {
                base: 'field',
                focus: 'is-focused',
            },
        });
        card.mount("#payment-card");
    }



    function showForm({ completeInfo }) {
        buildForm();
        setTimeout(function () {
            paymentForm.style.visibility = 'visible';
            document.getElementById("payment-email").focus();
            if (completeInfo) showCompleteView(completeInfo);
        }, 20); // fonts need some time to load, to avoid flicker

    }



    function buildForm() {
        var modal = pay.modal();
        modal.innerHTML = `
            <style>
    @font-face {
        font-family: 'CoreSans';
        src: url("/fonts/CoreSansA45Regular.woff") format("woff");
        font-weight: normal;
    }

    @font-face {
        font-family: 'CoreSans';
        src: url("/fonts/CoreSansA55Medium.woff") format("woff");
        font-weight: bold;
    }

    .paymentForm {
        font-size: 19px;
        font-variant: normal;
        margin: 0;
        display: flex;
        flex-direction: column;
        background: rgb(255, 255, 255);
        overflow: auto;
        border-radius: 10px;
        font-family: 'CoreSans';
    }

    .paymentForm * {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }

    .paymentForm *::selection {
        background-color: lightgray;
    }

    .paymentForm .hidden {
        display: none !important;
    }

    .paymentForm .main {
        margin: 10px 30px 20px 30px;
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }

    .paymentForm a {
        font-size: 14px;
    }

    .paymentForm .complete {
        display: none;
        flex-direction: column;
        flex: 1 0 auto;
        padding-top: 20px;
        font-size: 14px;
        letter-spacing: 0px;
    }

    .paymentForm .complete .panel {
        background-color: rgb(242, 243, 246);
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 10px;
        padding: 0px 40px 20px 40px;
    }

    .paymentForm .complete .text
    {
        margin-top: 5vh;
    }

    .paymentForm .complete .panel .title {
        font-size: 16px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    .paymentForm .complete .icon {
        height: 55px;
        margin-top: 10px;
    }

    .paymentForm .field {
        height: 30px;
        position: relative;
        display: block;
        margin-top: 28px;
        font-weight: normal;
        font-size: 16px;
        border: 0;
        color: #586A82;
        border-bottom: 1px solid rgb(181, 181, 181);
        width: 100%;
        background: transparent;
        outline: none;
        cursor: text;
        padding: 0; /* safari */
        /* pointer-events: none; */
    }

    .paymentForm .field.is-focused {
        border-bottom-color: rgb(242, 0, 97);
    }

    .paymentForm .field::-webkit-input-placeholder,
    .paymentForm .field::-moz-placeholder,
    .paymentForm .field:-ms-input-placeholder
     {
        color: rgb(152, 152, 152);
    }

    .paymentForm select {
        height: 36px;
    }

    .paymentForm .primary {
        color: white;
        border: 0;
        font-size: 18px;
        width: 100%;
        height: 50px;
        padding-top: 1px;
        outline: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-weight: bold;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .paymentForm .primary,
    .paymentForm .primary:active {
        background: rgb(242, 0, 97);
    }


    .paymentForm .primary:hover,
    .paymentForm .primary:focus {
        background: rgb(252, 10, 107);
    }

    .paymentForm .outcome {
        padding-top: 20px;
        min-height: 45px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-align: center;
        margin-top: auto;
        margin-bottom: 16px;
        font-size: 13px;
        color: red;
    }

    .paymentModal {
        font-family: 'CoreSans';
        letter-spacing: 1px;
    }

    .paymentForm select,
    .paymentForm input,
    .paymentForm .primary {
        font-family: 'CoreSans';
        letter-spacing: 1px;
    }

    .paymentForm .top {
        box-sizing: content-box; /* safari */
        display: flex;
        padding: 16px 30px 20px 30px;
        color: white;
        font-size: 16px;
        background-size: cover;
    }

    .paymentForm .info > * + * {
        /* safari doesn't support 'gap' on parent */
        /* https://www.youtube.com/watch?v=VvqyUUROmJw */
        margin-left: 10px;
    }

    .paymentForm .top > div {
        display: flex;
    }

    .paymentForm .top .nav {
        width: 100%;
        justify-content: flex-end;
        position: absolute;
    }

    .paymentForm .top .nav .close {
        margin-right: 20px;
    }

    .paymentForm .top .info {
        align-self: flex-end;
    }

    .paymentForm .top .logo {
        width: 106px;
    }

    .paymentForm .top .desc {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .paymentForm .top .offer {
        font-weight: bold;
        font-size: 23px;
        margin-bottom: 5px;
    }

    .paymentForm .top .price {
        opacity: 0.7;
    }

    .paymentForm .close {
        opacity: 1;
        height: 30px;
        width: 30px;
        background-size: 30px;
        background-repeat: no-repeat;
        background-position: center;
        border: none;
        background-color: transparent;
    }

    .paymentForm a {
        text-decoration: none;
        font-weight: bold;
    }

    .paymentForm .contact a {
        color: black;        
    }

    .payment .justifier {
        display: none;
    }

    /* desktop/tablet */
    @media screen and (min-height: 481px) and (min-width: 481px) {
        .paymentModal {
            justify-content: center;
            align-items: center;
        }
        .paymentForm {
            width: 385px;
            min-height: 635px;
        }
        .paymentForm .top {
            flex-direction: column;
        }
        .paymentForm .top .nav {
            justify-content: flex-end;
            position: initial;
        }
        .paymentForm .top .info {
            align-self: initial;
        }
        .paymentForm .top .nav .close {
            margin-right: -12px;
        }
        .paymentForm .complete.non-landscape {
            display: flex;
        }
        .paymentForm .complete .panel {
            padding-top: 0;
            padding-bottom: 0;
        }

        .paymentModal .complete .icon.compatible {
            height: 55px;
        }
        .paymentForm .complete .icon.incompatible {
            height: 110px;
            width: 265px;
            margin-top: 0px;
        }
        .paymentForm .complete .text.title {
            font-size: 19px;
        }
        .text.title.incompatible + .text {
           margin-top: 2vh;
        }
        .paymentForm .activate {
            margin-bottom: 20px;
        }
    }

    /* portrait mobile */
    @media screen and (max-width: 480px) {
        .paymentForm {
            border-radius: 0;
            flex: 1 1 auto;
        }
        .paymentForm .top {
            min-height: 112px;
            max-height: 132px;
            flex: 1 1 auto;
        }
        .paymentForm .top .info {
            align-self: flex-end;
        }
        .paymentForm .complete.non-landscape {
            display: flex;
        }
        .paymentForm .top .nav .close {
            margin-right: 50px;
        }
    }

    /* landscape mobile */
    @media screen and (max-height: 480px) and (min-width: 481px) {
        .paymentForm .top {
            flex-direction: column;
            align-items: center;
            flex: 1 1 390px;
            justify-content: center;
            padding: 20px;
            min-inline-size: 250px;
        }
        .paymentForm .close {
            align-self: flex-start;
        }
        .paymentForm .top > div {
            justify-content: center;
        }
        .paymentForm .top .nav {
            justify-content: initial;
            align-self: flex-start;
            margin-bottom: auto;
            position: initial;
            width: initial;
        }
        .paymentForm .top .info {
            align-self: initial;
        }
        .paymentForm .justifier {
            display: block;
            height: 30px;
            margin-top: auto;
        }
        .paymentForm {
            border-radius: 0;
            flex-direction: row;
            flex: 1 1 auto;
        }

        .paymentForm .main {
            flex: 1 1 385px;
            min-inline-size: 334px;
            margin-bottom: 13px;
        }

        .paymentForm .form-fields {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1 1 auto;
        }
        .paymentForm .field {
            font-size: 16px;
            height: 27px;
            margin-top: 22px;
        }

        .paymentForm .outcome {
            padding-top: 0;
            margin-bottom: 4px;
        }

        .paymentForm .primary {
            width: 334px;
            align-self: center;
        }

        .paymentForm .complete {
            margin: 0;
            padding-top: 0;
            justify-content: space-between;
        }

        .paymentForm .complete.landscape {
            display: flex;
            justify-content: space-evenly;
        }

        .paymentForm .complete .text
        {
            margin-top: 0;
        }

        .paymentForm .complete .primary {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .paymentForm .complete .icon {
            width: 35px;
            margin-top: 0;
            margin-right: 7px;
            margin-left: -6px;
        }

    }

</style>

<form id="payment-form" class="paymentForm" action="">
    <div class="top">
        <div class="nav">
            <a href="#" id="payment-form-close" tabindex="9" class="close">
            </a>
        </div>
        <div class="info">
            <div>
                <img class="logo"/>
            </div>
            <div class="desc">
                <div id="payment-brand" class="brand"></div>
                <div id="payment-offer" class="offer"></div>
                <div id="payment-price" class="price"></div>
            </div>
        </div>
        <div class="justifier"></div>
    </div>
    <div class="main">
    
        <div class="form-fields">
            <input id="payment-email" name="email" placeholder="Email"
                class="field" type="email" required="required" tabindex="0"/>

            <div id="payment-card" class="field" tabindex="1"></div>

            <input id="payment-name" name="name-on-card" placeholder="Name on Card"
                class="field" type="text" required="required" tabindex="2"/>

            <select id="payment-country" class="field" name="country" placeholder="Country"
                required="required" tabindex="3"
                autocomplete="Country"
                aria-label="Credit Card">
                <option value="AF">Afghanistan</option>
                <option value="AX">Åland Islands</option>
                <option value="AL">Albania</option>
                <option value="DZ">Algeria</option>
                <option value="AD">Andorra</option>
                <option value="AO">Angola</option>
                <option value="AI">Anguilla</option>
                <option value="AQ">Antarctica</option>
                <option value="AG">Antigua &amp; Barbuda</option>
                <option value="AR">Argentina</option>
                <option value="AM">Armenia</option>
                <option value="AW">Aruba</option>
                <option value="AC">Ascension Island</option>
                <option value="AU">Australia</option>
                <option value="AT">Austria</option>
                <option value="AZ">Azerbaijan</option>
                <option value="BS">Bahamas</option>
                <option value="BH">Bahrain</option>
                <option value="BD">Bangladesh</option>
                <option value="BB">Barbados</option>
                <option value="BY">Belarus</option>
                <option value="BE">Belgium</option>
                <option value="BZ">Belize</option>
                <option value="BJ">Benin</option>
                <option value="BM">Bermuda</option>
                <option value="BT">Bhutan</option>
                <option value="BO">Bolivia</option>
                <option value="BA">Bosnia &amp; Herzegovina</option>
                <option value="BW">Botswana</option>
                <option value="BV">Bouvet Island</option>
                <option value="BR">Brazil</option>
                <option value="IO">British Indian Ocean Territory</option>
                <option value="VG">British Virgin Islands</option>
                <option value="BN">Brunei</option>
                <option value="BG">Bulgaria</option>
                <option value="BF">Burkina Faso</option>
                <option value="BI">Burundi</option>
                <option value="KH">Cambodia</option>
                <option value="CM">Cameroon</option>
                <option value="CA">Canada</option>
                <option value="CV">Cape Verde</option>
                <option value="BQ">Caribbean Netherlands</option>
                <option value="KY">Cayman Islands</option>
                <option value="CF">Central African Republic</option>
                <option value="TD">Chad</option>
                <option value="CL">Chile</option>
                <option value="CN">China</option>
                <option value="CO">Colombia</option>
                <option value="KM">Comoros</option>
                <option value="CG">Congo - Brazzaville</option>
                <option value="CD">Congo - Kinshasa</option>
                <option value="CK">Cook Islands</option>
                <option value="CR">Costa Rica</option>
                <option value="CI">Côte d’Ivoire</option>
                <option value="HR">Croatia</option>
                <option value="CW">Curaçao</option>
                <option value="CY">Cyprus</option>
                <option value="CZ">Czechia</option>
                <option value="DK">Denmark</option>
                <option value="DJ">Djibouti</option>
                <option value="DM">Dominica</option>
                <option value="DO">Dominican Republic</option>
                <option value="EC">Ecuador</option>
                <option value="EG">Egypt</option>
                <option value="SV">El Salvador</option>
                <option value="GQ">Equatorial Guinea</option>
                <option value="ER">Eritrea</option>
                <option value="EE">Estonia</option>
                <option value="ET">Ethiopia</option>
                <option value="FK">Falkland Islands</option>
                <option value="FO">Faroe Islands</option>
                <option value="FJ">Fiji</option>
                <option value="FI">Finland</option>
                <option value="FR">France</option>
                <option value="GF">French Guiana</option>
                <option value="PF">French Polynesia</option>
                <option value="TF">French Southern Territories</option>
                <option value="GA">Gabon</option>
                <option value="GM">Gambia</option>
                <option value="GE">Georgia</option>
                <option value="DE">Germany</option>
                <option value="GH">Ghana</option>
                <option value="GI">Gibraltar</option>
                <option value="GR">Greece</option>
                <option value="GL">Greenland</option>
                <option value="GD">Grenada</option>
                <option value="GP">Guadeloupe</option>
                <option value="GU">Guam</option>
                <option value="GT">Guatemala</option>
                <option value="GG">Guernsey</option>
                <option value="GN">Guinea</option>
                <option value="GW">Guinea-Bissau</option>
                <option value="GY">Guyana</option>
                <option value="HT">Haiti</option>
                <option value="HN">Honduras</option>
                <option value="HK">Hong Kong SAR China</option>
                <option value="HU">Hungary</option>
                <option value="IS">Iceland</option>
                <option value="IN">India</option>
                <option value="ID">Indonesia</option>
                <option value="IR">Iran</option>
                <option value="IQ">Iraq</option>
                <option value="IE">Ireland</option>
                <option value="IM">Isle of Man</option>
                <option value="IL">Israel</option>
                <option value="IT">Italy</option>
                <option value="JM">Jamaica</option>
                <option value="JP">Japan</option>
                <option value="JE">Jersey</option>
                <option value="JO">Jordan</option>
                <option value="KZ">Kazakhstan</option>
                <option value="KE">Kenya</option>
                <option value="KI">Kiribati</option>
                <option value="XK">Kosovo</option>
                <option value="KW">Kuwait</option>
                <option value="KG">Kyrgyzstan</option>
                <option value="LA">Laos</option>
                <option value="LV">Latvia</option>
                <option value="LB">Lebanon</option>
                <option value="LS">Lesotho</option>
                <option value="LR">Liberia</option>
                <option value="LY">Libya</option>
                <option value="LI">Liechtenstein</option>
                <option value="LT">Lithuania</option>
                <option value="LU">Luxembourg</option>
                <option value="MO">Macau SAR China</option>
                <option value="MK">Macedonia</option>
                <option value="MG">Madagascar</option>
                <option value="MW">Malawi</option>
                <option value="MY">Malaysia</option>
                <option value="MV">Maldives</option>
                <option value="ML">Mali</option>
                <option value="MT">Malta</option>
                <option value="MQ">Martinique</option>
                <option value="MR">Mauritania</option>
                <option value="MU">Mauritius</option>
                <option value="YT">Mayotte</option>
                <option value="MX">Mexico</option>
                <option value="MD">Moldova</option>
                <option value="MC">Monaco</option>
                <option value="MN">Mongolia</option>
                <option value="ME">Montenegro</option>
                <option value="MS">Montserrat</option>
                <option value="MA">Morocco</option>
                <option value="MZ">Mozambique</option>
                <option value="MM">Myanmar (Burma)</option>
                <option value="NA">Namibia</option>
                <option value="NR">Nauru</option>
                <option value="NP">Nepal</option>
                <option value="NL">Netherlands</option>
                <option value="NC">New Caledonia</option>
                <option value="NZ">New Zealand</option>
                <option value="NI">Nicaragua</option>
                <option value="NE">Niger</option>
                <option value="NG">Nigeria</option>
                <option value="NU">Niue</option>
                <option value="NO">Norway</option>
                <option value="OM">Oman</option>
                <option value="PK">Pakistan</option>
                <option value="PS">Palestinian Territories</option>
                <option value="PA">Panama</option>
                <option value="PG">Papua New Guinea</option>
                <option value="PY">Paraguay</option>
                <option value="PE">Peru</option>
                <option value="PH">Philippines</option>
                <option value="PN">Pitcairn Islands</option>
                <option value="PL">Poland</option>
                <option value="PT">Portugal</option>
                <option value="PR">Puerto Rico</option>
                <option value="QA">Qatar</option>
                <option value="RE">Réunion</option>
                <option value="RO">Romania</option>
                <option value="RU">Russia</option>
                <option value="RW">Rwanda</option>
                <option value="WS">Samoa</option>
                <option value="SM">San Marino</option>
                <option value="ST">São Tomé &amp; Príncipe</option>
                <option value="SA">Saudi Arabia</option>
                <option value="SN">Senegal</option>
                <option value="RS">Serbia</option>
                <option value="SC">Seychelles</option>
                <option value="SL">Sierra Leone</option>
                <option value="SG">Singapore</option>
                <option value="SX">Sint Maarten</option>
                <option value="SK">Slovakia</option>
                <option value="SI">Slovenia</option>
                <option value="SB">Solomon Islands</option>
                <option value="SO">Somalia</option>
                <option value="ZA">South Africa</option>
                <option value="GS">South Georgia &amp; South Sandwich Islands</option>
                <option value="KR">South Korea</option>
                <option value="SS">South Sudan</option>
                <option value="ES">Spain</option>
                <option value="LK">Sri Lanka</option>
                <option value="BL">St. Barthélemy</option>
                <option value="SH">St. Helena</option>
                <option value="KN">St. Kitts &amp; Nevis</option>
                <option value="LC">St. Lucia</option>
                <option value="MF">St. Martin</option>
                <option value="PM">St. Pierre &amp; Miquelon</option>
                <option value="VC">St. Vincent &amp; Grenadines</option>
                <option value="SR">Suriname</option>
                <option value="SJ">Svalbard &amp; Jan Mayen</option>
                <option value="SZ">Swaziland</option>
                <option value="SE">Sweden</option>
                <option value="CH">Switzerland</option>
                <option value="TW">Taiwan</option>
                <option value="TJ">Tajikistan</option>
                <option value="TZ">Tanzania</option>
                <option value="TH">Thailand</option>
                <option value="TL">Timor-Leste</option>
                <option value="TG">Togo</option>
                <option value="TK">Tokelau</option>
                <option value="TO">Tonga</option>
                <option value="TT">Trinidad &amp; Tobago</option>
                <option value="TA">Tristan da Cunha</option>
                <option value="TN">Tunisia</option>
                <option value="TR">Turkey</option>
                <option value="TM">Turkmenistan</option>
                <option value="TC">Turks &amp; Caicos Islands</option>
                <option value="TV">Tuvalu</option>
                <option value="UG">Uganda</option>
                <option value="UA">Ukraine</option>
                <option value="AE">United Arab Emirates</option>
                <option value="GB">United Kingdom</option>
                <option value="US" selected="selected">United States</option>
                <option value="UY">Uruguay</option>
                <option value="UZ">Uzbekistan</option>
                <option value="VU">Vanuatu</option>
                <option value="VA">Vatican City</option>
                <option value="VE">Venezuela</option>
                <option value="VN">Vietnam</option>
                <option value="WF">Wallis &amp; Futuna</option>
                <option value="EH">Western Sahara</option>
                <option value="YE">Yemen</option>
                <option value="ZM">Zambia</option>
                <option value="ZW">Zimbabwe</option>
            </select>
        </div>

        <div class="outcome" role="alert">
            <div id="payment-error" class="error"></div>
        </div>

        <div class="complete non-landscape hidden">
            <div class="panel">
                <div class="anim icon incompatible" id="complete-animation-email-non-landscape"></div>
                <div class="anim icon compatible" id="complete-animation-non-landscape"></div>
                <div class="title compatible">
                    Purchase Completed
                </div>
                <a class="primary activate compatible">
                    Activate Now
                </a>
            </div>
            <div>
                <div class="text title incompatible">
                    <b>Purchase completed,<br>check your email on mobile</b>
                </div>
                <div class="text notice"></div>
                <div class="text contact">
                    Having trouble?
                    <a class="contact_link" href="#" tabindex="5">Contact us</a>
                    <div class="purchase_confirmation"></div>
                </div>
            </div>
        </div>

        <div class="complete landscape hidden">
            <a class="primary activate">
                <div class="anim icon incompatible" id="complete-animation-email-landscape"></div>
                <div class="anim icon compatible" id="complete-animation-landscape"></div>
                <div class="text">Activate Now</div>
            </a>
            <div class="text notice"></div>
            <div class="text contact">
                Having trouble?
                <a class="contact_link" href="#" tabindex="5">Contact us</a>
                <div class="purchase_confirmation"></div>
            </div>
        </div>

        <button type="submit"  class="primary" tabindex="4">
            <span>Subscribe</span>
        </button>
    </div>
</form>

        `;

        paymentForm = document.getElementById('payment-form');
        paymentForm.style.visibility = 'hidden';
        paymentForm.querySelector('.top').style.backgroundImage = `url("${headerImg}")`;
        paymentForm.querySelector('.logo').src = logoImg;
        paymentForm.querySelector('.close').style.backgroundImage = `url("${closeImg}")`;

        // remove elements that don't belong to this device:
        paymentForm.querySelectorAll(isAppCompatible() ? '.incompatible' : '.compatible')
            .forEach(function(e) { e.remove() });

        // preload anims as early as possible:
        if (isAppCompatible()) {
            loadAnim('complete-animation-non-landscape', 'complete');
            loadAnim('complete-animation-landscape', 'complete-bordered');
        } else {
            loadAnim('complete-animation-email-non-landscape', 'complete-email');
            loadAnim('complete-animation-email-landscape', 'complete-email');
        }

        initCardElement();

        var closeButton = document.getElementById('payment-form-close');
        if (closeButton) closeButton.onclick = closeForm;

        submitButtons().forEach(function(b) {
            b.appendChild(pay.createLoader('hidden'));
        });

        var inputs = document.querySelectorAll('.field');
        Array.prototype.forEach.call(inputs, function (input) {
            input.addEventListener('focus', function () {
                input.classList.add('is-focused');
            });
            input.addEventListener('blur', function () {
                input.classList.remove('is-focused');
            });
            function onChange() {
                if (input.value.length === 0) {
                    input.classList.add('is-empty');
                } else {
                    input.classList.remove('is-empty');
                }
            }
            input.addEventListener('keyup', onChange);
            input.addEventListener('change', onChange);
        });

        card.on('change', function (event) {
            clearOutcome();
        });

        paymentForm.addEventListener('submit', onPaymentFormSubmit);

        if (pay.selectedAction) {
            document.getElementById('payment-brand').innerHTML = pay.selectedAction.brand;
            document.getElementById('payment-price').innerHTML = pay.selectedAction.priceName;
            document.getElementById('payment-offer').innerHTML = pay.selectedAction.offer;
        }
    }



    function closeForm() {
        pay.resetModal();
        card = undefined;
        paymentForm = undefined;
    }



    // Gets available attribution URL params for a download link
    function browserInfo() {
        const res = {
            isMobile: !!isAppCompatible(),
            referrer: document.referrer,
        };
        var v = document.getElementsByTagName('title')[0];
        if (v) res.title = v.text;
        return res;
    }



    function isAppCompatible() {
        return navigator.userAgent.match(/Android/i) ||
            navigator.userAgent.match(/iPhone|iPad|iPod/i);
    }



    function clearOutcome() {
        var errorElement = document.querySelector('#payment-error');
        errorElement.textContent = '';
    }



    function clearCache() {
        localStorage.clear();
    }



    function urlParamsAsObject() {
        var p = new URLSearchParams(window.location.search);
        var res = {};
        for(var [key, value] of p.entries()) res[key] = value;
        var toRemove = ['env', 'domain'];
        toRemove.forEach(function(k) { delete res[k]; });
        return res;
    }



    function loadImage(url) {
        return new Promise(function(resolve, reject) {
            var imageUrl = new URL(url, pay.launcherUrl);
            var img = new Image();
            img.onload = resolve;
            img.onerror = reject;
            img.src = imageUrl.toString();
        });
    }



    function initPaymentListeners() {
        document.addEventListener('paymentFailed', onPaymentFailed);
        document.addEventListener('paymentMethodVerified', onPaymentMethodVerified);
        document.addEventListener('paymentRequiresAction', onPaymentRequiresAction);
        document.addEventListener('paymentConfirmed', onPaymentConfirmed);
    }



    function loadAnim(id, file) {
        anims[id] = lottie.loadAnimation({
            container: document.getElementById(id),
            path: `/yokee/images/${file}.lottie`,
            loop: false,
            autoplay: false
        });
        return anims[id];
    }



    Object.assign(pay, {
        closeForm,
        showForm
    });

    await Promise.all([
        pay.initScript('https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.8/lottie_light.min.js'),
        loadImage(headerImg),
        loadImage(logoImg),
        fetch(new URL('fonts/CoreSansA45Regular.woff', pay.launcherUrl), { mode: 'no-cors' }),
        fetch(new URL('fonts/CoreSansA55Medium.woff', pay.launcherUrl), { mode: 'no-cors' }),
    ]);
    clearCache();
    initPaymentListeners();
    return Promise.resolve();
});