You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
HelenaExpressApp/www/pages/dropandsend.html

167 lines
9.9 KiB
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 class="padding text-align-center">
Use one of our Drop and Send drop boxes or shipping locations for easier shipping,
and say goodbye to standing in line to send packages. Use your choice of
carrier (or let us pick the cheapest), purchase shipping
insurance, and more!
</li>
<li class="padding text-align-center" id="addPaymentMethodNag" style="display: none;">
<i class="fad fa-exclamation-circle fa-2x text-color-orange"></i><br>
You need an account with a linked credit card to send packages with Drop and Send. <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="fas fa-user-circle"></i> My Account</a>
</li>
<li class="padding text-align-center" id="pickupLateInDayWarning" style="display: none;">
<i class="fad fa-clock fa-2x text-color-purple"></i><br>
Packages dropped off after 4PM might not be shipped until the following day.
</li>
<li class="padding text-align-center" id="pickupWeekendWarning" style="display: none;">
<i class="fad fa-calendar-exclamation fa-2x text-color-blue"></i><br>
Most packages won't leave Helena 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="fas 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="fas 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="fas 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="fas 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="fad fa-map-marked"></i> Use this app to find the closest Drop and Send package drop box.
</li>
<li>
<i class="fad fa-edit"></i> Fill out a provided label with your account number<span id="dasHowItWorksAccountNumber"></span>, to and from addresses, and any extra options like speed and insurance. Put the label on your package.
<ul>
<li>
<i class="fad fa-globe-europe"></i> If your package is going to a military APO/FPO address, or is going to another country, fill out and attach a customs form too.
</li>
<li>
<i class="fad fa-info-circle"></i> If your package already has a prepaid shipping label, or it's too small for a full-size label, just add your account number to the package. Small labels are provided and will be removed by us before we ship your package.
</li>
<li>
<i class="fad fa-sticky-note"></i> Order labels pre-printed with your account number and return address <a href="/shop" class="popup-close">in the shop</a>.
</li>
</ul>
</li>
<li>
<i class="far fa-qrcode"></i> Scan the Pickup Code (or type the location number) on the drop box to alert us there's a package to send.
</li>
<li>
<i class="fad fa-box-alt"></i> Place your package inside the secure drop box.
</li>
<li>
<i class="fad 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.
</li>
</ul>
</div>
</div>
</div>
</div>