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/pickup.html

123 lines
8.3 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="pickup">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="left">
<a class="link back hapticbtn" href="#">
<i class="icon icon-back"></i>
<span class="if-not-md">Back</span>
</a>
</div>
<div class="title">Request Pickup</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" id="pickupRequestForm">
<div class="list media-list">
<ul>
<li>
<div class="block text-align-center">
<img src="assets/images/package-pickup.svg" class="margin" style="max-height: 20vh; max-width: 80%;" />
<p class="margin">
Leave your package somewhere safe
(front porch, shed, garage, etc) and we'll come get it.
Your saved credit card will be billed automatically when we ship your package.
</p>
</div>
</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 use this service. <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>
Pickups requested after 4PM might not be completed until the next day. If your package hasn't been picked up after 6PM, put it back out before 10AM the next morning for pickup.
</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>
While we do offer pickups seven days a week, most packages we pick up over the weekend won't leave Helena until Monday.
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Pickup Address</div>
<div class="item-input-wrap">
<input type="text" id="streetaddress" placeholder="1234 Your Rd" value="{{streetaddress}}" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">ZIP Code</div>
<div class="item-input-wrap">
<input type="text" id="zipcode" value="{{zipcode}}"/>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Number of Packages</div>
<div class="item-input-wrap">
<input type="number" id="packagecount" min="1" max="200"/>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Package Location</div>
<div class="item-input-wrap input-dropdown-wrap">
<select id="packagelocation">
<option></option>
<option>Porch</option>
<option>Front Door</option>
<option>Back Door</option>
<option>Side Door</option>
<option>Garage</option>
<option>Office</option>
<option>Reception</option>
<option>I'm home all day, knock on the door</option>
<option value="OTHER">Other (add instructions)</option>
</select>
</div>
</div>
</li>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Extra Instructions</div>
<div class="item-input-wrap">
<textarea id="instructions" class="resizable" placeholder="Where to find package, access code, etc"></textarea>
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="padding">
By requesting a pickup, you confirm that you aren't sending any <a onclick="openBrowser('https://helena.express/articles/restricted-items')">restricted items</a>.
You agree that we can bill your saved payment method for the shipping cost.
You also confirm that you've filled out a destination address on each package and indicated
any desired options (signature, insurance, etc).
We recommend using free Helena Express shipping labels, available <a href="/shop">from the shop</a>.
</li>
<li class="padding">
<div class="button hapticbtn button-fill" onclick="requestPickup()"><i class="far fa-dolly"></i> Request Pickup</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>