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

142 lines
9.7 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="fa-duotone 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="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>
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="fa-duotone 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}}" autocomplete="off" autocorrect="off" />
<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" placeholder="59601" value="{{zipcode}}" autocomplete="off" autocorrect="off" inputmode="numeric" />
<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>
<label class="item-checkbox item-content text-align-left">
<!-- Checkbox input -->
<input type="checkbox" id="prepaid-label-checkbox" />
<!-- Checkbox icon -->
<i class="icon icon-checkbox"></i>
<span class="item-inner no-line-after">
<span>Package has a prepaid return label (extra fees may apply to prepaid pickups)</span>
</span>
</label>
</li>
<li class="padding text-align-left">
<p>
By requesting a pickup, you confirm that your package(s) don't contain anything fragile, liquid, perishable
or potentially hazardous such as perfume, lithium batteries, mercury, or anything on
our <a onclick="openBrowser('https://helena.express/articles/restricted-items')">restricted items list</a>.
</p>
<p>
You agree that we can bill your saved payment method for the shipping cost.
<br />
You also confirm that you've filled out a destination address on each package and indicated
any desired options (signature, insurance, etc).
<br />
We recommend using free Helena Express shipping labels, available <a href="/shop">from the shop</a>.
</p>
</li>
<li class="padding">
<div class="button hapticbtn button-fill" onclick="requestPickup()"><i class="fa-regular fa-dolly"></i> Request Pickup</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>