www/templates/account/includes/signup.php
<div class="card subscribe">
    <div class="card-section">
        <div class="info">
            <p style="line-height: 1.5">WebPageTest Pro plans bring full access to the power and depth of WebPageTest's analysis, letting you pull performance data into your existing workflows and processes. It also includes access to No-Code Experiments, the WebPageTest API, bulk testing, and more!</p>
            <h3>Plan Features Comparison</h3>
            <!-- comparison table -->
            <table class="comparison-table">
                <thead>
                    <tr>
                        <td></td>
                        <th scope="col">
                            <div class="plan-selector">
                                <p class="plan-name">Starter</p>
                            </div>
                        </th>
                        <th scope="col">
                            <div class="plan-selector">
                                <p class="plan-name">Pro</p>
                            </div>
                        </th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <th scope="col">Runs Included</th>
                        <td>300</td>
                        <td>As per plan</td>
                    </tr>

                    <tr>
                        <th scope="col">Locations</th>
                        <td>30</td>
                        <td>35+<sup><a href="#fn1" id="ref1">*</a></sup></td>
                    </tr>

                    <tr>
                        <th scope="col">Browser</th>
                        <td>All</td>
                        <td>All</td>
                    </tr>

                    <tr>
                        <th scope="col">Connection Speeds</th>
                        <td>All</td>
                        <td>All</td>
                    </tr>

                    <tr>
                        <th scope="col">Filmstrip and Video</th>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>
                    </tr>

                    <tr>
                        <th scope="col">Google Lighthouse</th>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>
                    </tr>

                    <?php if (GetSetting('traceroute_enabled')): ?>
                    <tr>
                        <th scope="col">Traceroute</th>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>
                    </tr>
                    <?php endif; ?>

                    <tr>
                        <th scope="col">Test History</th>
                        <td>13 Months</td>
                        <td>13 Months</td>
                    </tr>

                    <tr>
                        <th scope="col">Priority Tests</th>
                        <td>
                            <i class="icon x-in-circle-temp" aria-hidden="true"></i>
                            <span class="visually-hidden">No</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>

                    </tr>


                    <tr>
                        <th scope="col">API Access</th>
                        <td>
                            <i class="icon x-in-circle-temp" aria-hidden="true"></i>
                            <span class="visually-hidden">No</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>

                    </tr>

                    <tr>
                        <th scope="col">Integrations</th>
                        <td>
                            <i class="icon x-in-circle-temp" aria-hidden="true"></i>
                            <span class="visually-hidden">No</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>

                    </tr>

                    <tr>
                        <th scope="col">Private Tests <em class="new-banner">NEW</em></th>
                        <td>
                            <i class="icon x-in-circle-temp" aria-hidden="true"></i>
                            <span class="visually-hidden">No</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>

                    </tr>

                    <tr>
                        <th scope="col">Bulk Testing <em class="new-banner">NEW</em></th>
                        <td>
                            <i class="icon x-in-circle-temp" aria-hidden="true"></i>
                            <span class="visually-hidden">No</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>

                    </tr>
                    <tr>
                        <th scope="col">Opportunities <em class="new-banner">NEW</em></th>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>
                    </tr>
                    <tr>
                        <th scope="col">Experiments <em class="new-banner">NEW</em></th>
                        <td>
                            <i class="icon x-in-circle-temp" aria-hidden="true"></i>
                            <span class="visually-hidden">No</span>
                        </td>
                        <td>
                            <i class="icon check" aria-hidden="true"></i>
                            <span class="visually-hidden">Yes</span>
                        </td>


                    <tr>
                        <th scope="col">Support</th>
                        <td>
                            Forums
                        </td>
                        <td>
                            Dedicated Support
                        </td>
                    </tr>

                    <tr class="custom-plan-mobile">
                        <th>Looking for something custom or have additional questions?</th>

                        <td style="border:none">
                            <a class="button signup-button" href="https://www.product.webpagetest.org/contact">Contact Us</a>
                        </td>
                    </tr>

                </tbody>
            </table>
            <p><sup id="fn1">* Our list of available test locations is continually growing.</sup></p>


        </div>
    </div>
</div>
<form id="wpt-account-signup" method="post" action="/account">
    <h3>Save 20% by paying annually!</h3>
    <fieldset class="wpt-plans radiobutton-tab-container">
        <legend for="pro-plan-selector" class="visually-hidden"> Choose payment plan frequency:</legend>
        <input id="annual-plans" type="radio" name="plans" value="annual" checked />
        <input id="monthly-plans" type="radio" name="plans" value="monthly" />
        <div class="radiobutton-group subscription-type-selector" id="pro-plan-selector">
            <div class="radio-button">
                <label for="annual-plans">Annual</label>
            </div>
            <div class="radio-button">
                <label for="monthly-plans">Monthly</label>
            </div>
        </div>
        <div class="wpt-plan-set annual-plans">
            <?php
            $renewalDate = $newDate = date('Y-m-d', strtotime(' + 1 years'));

            foreach ($annual_plans as $key => $plan) :
                $plan_block = <<<HTML
                  <div class="form-wrapper-radio">
                    <input type="radio" id="annual-{$plan->getId()}" name="plan" value="{$plan->getId()}"  data-cost="{$plan->getAnnualPrice()}" data-cycle="{$renewalDate}" required {$selected} />
                    <label class="wpt-plan card" for="annual-{$plan->getId()}">
                      <h5>{$plan->getName()}</h5>
                      <div><strong>\${$plan->getAnnualPrice()}</strong>/Year</div>
                      <span aria-hidden="true" class="pill-button yellow">Select</span>
                    </label>
                  </div>
                HTML;
                echo $plan_block;
            endforeach; ?>
        </div>
        <div class="wpt-plan-set monthly-plans">
            <?php
            $renewalDateMonthly = $newDate = date('Y-m-d', strtotime('+ 1 month'));
            foreach ($monthly_plans as $key => $plan) :
                $plan_block = <<<HTML
                  <div class="form-wrapper-radio">
                    <input type="radio" id="monthly-{$plan->getId()}" name="plan" value="{$plan->getId()}"  data-cost="{$plan->getMonthlyPrice()}" data-cycle="{$renewalDateMonthly}" required />
                    <label class="card wpt-plan" for="monthly-{$plan->getId()}">
                      <h5>{$plan->getName()}</h5>
                      <div><strong>\${$plan->getMonthlyPrice()}</strong>/Month</div>
                      <span aria-hidden="true" class="pill-button yellow">Select</span>
                    </label>
                  </div>
                 HTML;
                echo $plan_block;
            endforeach; ?>
        </div>
    </fieldset>
    <div class="card">
        <div>Looking to run more than 20,000 tests in a month?</div>
        <div><a href=" https://www.product.webpagetest.org/contact">Contact Us</a></div>
    </div>
    <div class="plan-billing-container">
        <div class="card billing-container">
            <div id="braintree-container"></div>
            <div class="billing-info-section">
                <div class="info-container street-address">
                    <label for="street-address">Street Address</label>
                    <div>
                        <input name="street-address" type="text" required />
                    </div>
                </div>
                <div class="info-container city">
                    <label for="city">City</label>
                    <div>
                        <input name="city" type="text" required />
                    </div>
                </div>
                <div class="info-container state">
                    <label for="state">State</label>
                    <div>
                        <select name="state" data-country-selector="state-selector" required>
                            <?php foreach ($state_list as $stateAbbr => $stateText) : ?>
                                <option value="<?= $stateAbbr ?>">
                                    <?= $stateText; ?>
                                </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
                <div class="info-container country">
                    <label for="country">Country</label>
                    <select name="country" data-country-selector="selector" required>
                        <?php foreach ($country_list as $country) : ?>
                            <option value="<?= $country["key"] ?>" <?php ($country["key"] === "United States") ? 'selected' : '' ?>>
                                <?= $country["text"]; ?>
                            </option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="info-container zipcode">
                    <label for="zipcode">Zip Code</label>
                    <div>
                        <input type="text" name="zipcode" required />
                    </div>
                </div>
            </div> <!-- /.billing-info-section -->

            <ul class="subscription-total">
              <li><strong>Total due today:</strong> <span id="data-plan-total"> </span></li>
              <li><strong>Next payment due:</strong> <span id="data-plan-renewal"> </span></li>
            </ul>
        </div> <!-- /.billing-container -->

        <div class="card plan-details-container">
            <h3>WebPageTest Pro plans include</h3>
            <ul class="bulleted-list">
                <li>Everything in the Starter plan, including real browsers in real locations, custom scripting for page level and user journey measurements, access to 13 months of test history, and the all new Opportunities report to help you zero in on areas of improvement. </li>
                <li>Access to all new no-code Experiments</li>
                <li>API access for easier integration into your CI/CD, visualizations, alerting and more </li>
                <li>High priority tests to help you jump the queue and experience lower wait times </li>
                <li>Access to new and exclusive, premium-only, test locations </li>
                <li>Dedicated support to help you get back to work faster </li>
                <li>Bulk testing to enable testing of many pages at once </li>
                <li>Private tests for ensuring your private test results stay that way</li>
            </ul>
        </div> <!-- /.plan-details-container -->
    </div> <!-- /.plan-billing-container -->

    <input type="hidden" name="nonce" id="hidden-nonce-input" required />
    <input type="hidden" name="type" value="account-signup" required />
    <input type="hidden" name="csrf_token" value="<?= $csrf_token; ?>" />

    <div class="add-subscription-button-wrapper">
        <button type="submit" class="pill-button blue">Add Subscription</button>
    </div>
</form>

<script src="https://js.braintreegateway.com/web/3.85.2/js/client.min.js"></script>
<script src="https://js.braintreegateway.com/web/dropin/1.33.0/js/dropin.min.js"></script>

<script>
const radios = document.querySelectorAll('input[name="plan"]')
for (const radio of radios) {
  radio.onclick = (e) => {
    document.getElementById('data-plan-total').innerText = "$"+e.target.dataset.cost;
    document.getElementById('data-plan-renewal').innerText = e.target.dataset.cycle;
  }
}
  // check default
   document.getElementsByName("plan")[1]['checked'] = true;
   document.getElementById('data-plan-total').innerText = "$"+document.getElementsByName("plan")[1].dataset.cost
   document.getElementById('data-plan-renewal').innerText = document.getElementsByName("plan")[1].dataset.cycle

    braintree.dropin.create({
        authorization: "<?= $bt_client_token ?>",
        container: '#braintree-container',
        card: {
            cardholderName: {
                required: true
            }
        }
    }, (error, dropinInstance) => {
        var hiddenNonceInput = document.querySelector('#hidden-nonce-input');
        var form = document.querySelector("#wpt-account-signup");

        form.addEventListener('submit', function(event) {
            event.preventDefault();

            dropinInstance.requestPaymentMethod(function(err, payload) {
                if (err) {
                    // handle error
                    console.error(err);
                    return;
                }

                hiddenNonceInput.value = payload.nonce;
                form.submit();
            });
        });
    });
</script>