HelenaExpressApp/www/pages/dropandsend.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div class="page" data-name="dropandsend">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a class="link back" href="#">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
            <div class="title">Drop and Send</div>
        </div>
    </div>


    <div class="page-content">
        <div class="row justify-content-center">
            <div class="col-100 medium-90 xlarge-75 margin-horizontal">
                <div class="card margin">
                    <div class="card-content text-align-center padding-vertical">
                        <div class="list media-list">
                            <ul>
                                <li>
                                    <div class="block text-align-center">
                                        <img src="assets/images/drop-box-location.svg" class="margin" style="max-height: 20vh; max-width: 80%;" />
                                        <p class="margin">
                                            Use one of our Drop and Send drop boxes for easier shipping,
                                            and say goodbye to standing in line to send packages.
                                        </p>
                                    </div>
                                </li>
                                <li class="padding text-align-center" id="addPaymentMethodNag" style="display: none;">
                                    <i class="fa-duotone fa-exclamation-circle fa-2x text-color-orange"></i><br>
                                    You need an account with a linked credit card to use our drop boxes. <span class="taptext">Tap</span><span class="clicktext">Click</span> the button to update your account.
                                    <a class="button hapticbtn button-fill margin" href="/account"><i class="fa-solid fa-user-circle"></i> Update My Account</a>
                                </li>
                                <li class="padding text-align-center" id="pickupLateInDayWarning" style="display: none;">
                                    <i class="fa-duotone fa-clock fa-2x text-color-purple"></i><br>
                                    Packages dropped off after 3PM might not be shipped until the following day.
                                </li>
                                <li class="padding text-align-center" id="pickupWeekendWarning" style="display: none;">
                                    <i class="fa-duotone fa-calendar-exclamation fa-2x text-color-blue"></i><br>
                                    We pick up packages every day, but many won't ship out until Monday.
                                </li>
                                <li>
                                    <div class="item-content item-link hapticbtn popup-open" data-popup="#dasHowItWorksPopup">
                                        <div class="item-inner">
                                            <div class="item-title-row justify-content-center">
                                                <div class="item-title"><i class="fa-solid fa-question-circle"></i> How It Works</div>
                                            </div>
                                            <div class="item-text">Learn how Drop and Send works when sending a package.</div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content item-link hapticbtn popup-open" data-popup="#dasLocationMapPopup">
                                        <div class="item-inner">
                                            <div class="item-title-row justify-content-center">
                                                <div class="item-title"><i class="fa-solid fa-map-marked"></i> Locations</div>
                                            </div>
                                            <div class="item-text">Find a nearby Drop and Send location to use.</div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content item-link hapticbtn" id="pickupCodeQRScanBtn">
                                        <div class="item-inner">
                                            <div class="item-title-row justify-content-center">
                                                <div class="item-title"><i class="fa-solid fa-qrcode"></i> Scan Pickup Code</div>
                                            </div>
                                            <div class="item-text">Scan a Pickup Code on a drop box and we'll come get your package.</div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content item-link hapticbtn" id="pickupCodeManualEntryBtn">
                                        <div class="item-inner">
                                            <div class="item-title-row justify-content-center">
                                                <div class="item-title"><i class="fa-solid fa-keyboard"></i> Type Location Number</div>
                                            </div>
                                            <div class="item-text">Type the location number on the drop box and we'll come get your package.</div>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="item-content">
                                        <div class="item-inner">
                                            <div class="item-title-row">
                                            </div>
                                            <div class="item-text">By using Drop and Send you agree to the <a onclick="openBrowser('https://helena.express/das/terms')">terms of service</a>.</div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="popup" id="dasLocationMapPopup">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
                <div class="left">
                    <a class="link popup-close" href="#">
                        <i class="icon icon-back"></i>
                        <span class="if-not-md">Close</span>
                    </a>
                </div>
                <div class="title">Drop and Send Locations</div>
            </div>
        </div>
        <div class="mapbox" style="height: calc(100% - calc(var(--f7-navbar-height) + var(--f7-safe-area-top))); width: 100%;" id="mapbox-dropboxes"></div>
    </div>

    <div class="popup" id="dasHowItWorksPopup">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
                <div class="left">
                    <a class="link popup-close" href="#">
                        <i class="icon icon-back"></i>
                        <span class="if-not-md">Close</span>
                    </a>
                </div>
                <div class="title">How It Works</div>
            </div>
        </div>
        <div style="overflow-y: auto; height: calc(99% - calc(var(--f7-navbar-height) + var(--f7-safe-area-top)));">
            <div class="list basic-list no-margin no-hairlines">
                <ul>
                    <li>
                        <i class="fa-duotone fa-map-marked"></i> Use this app to find the closest Helena Express drop box.
                    </li>
                    <li>
                        <i class="fa-duotone fa-edit"></i> Write your account number<span id="dasHowItWorksAccountNumber"></span> and to and from addresses on your package.
                        <ul>
                            <li>
                                <i class="fa-duotone fa-sticky-note"></i> We recommend using free Helena Express labels. They're available <a href="/shop" class="popup-close">in the shop</a> or at any drop box.
                            </li>
                            <li>
                                <i class="fa-duotone fa-globe-europe"></i> If your package is going internationally or to an APO/FPO address, fill out and attach a customs form too.
                            </li>
                            <li>
                                <i class="fa-duotone fa-info-circle"></i> If your package already has a prepaid return label, just attach your account number.
                            </li>
                        </ul>
                    </li>
                    <li>
                        <i class="fa-duotone fa-box-alt"></i> Place your package inside the drop box.
                    </li>
                    <li>
                        <i class="fa-regular fa-qrcode"></i> Scan the Pickup Code to alert us there's a package to send.
                    </li>
                    <li>
                        <i class="fa-duotone fa-receipt"></i> Wait for an emailed receipt from us with the tracking code. Your credit card is automatically billed for the cost of shipping plus a small pickup fee.
                    </li>
                </ul>
            </div>
        </div>
    </div>

</div>