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

142 lines
8.5 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="noticeslip">
<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">Pick Up and Redeliver</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">
<div class="block padding-vertical-half">
Missed a delivery? For a fee, we'll pick up your oversized or signature-required item from the Helena Post Office and deliver it to your front door, even if nobody's home to sign for it.
</div>
<div class="block padding-vertical-half">
You just need to fill out this form, sign the back of the pink notice slip, and take a picture of it with this app. Information provided must match the information on the notice slip.
</div>
<div class="block padding-vertical-half">
Your item will be delivered within one business day of submitting a request, excluding postal holidays. This service is not available for Restricted Delivery or Registered Mail.
</div>
<div class="list" id="noticeform">
<ul>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Recipient Name</div>
<div class="item-input-wrap">
<input type="text" id="name" placeholder="Jon Doe" />
<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">Street Address</div>
<div class="item-input-wrap">
<input type="text" id="street" placeholder="1234 Example Rd, Apt 1A" />
<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="zip" placeholder="59602" 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">Phone Number</div>
<div class="item-input-wrap">
<input type="tel" id="phone" />
<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">Email Address</div>
<div class="item-input-wrap">
<input type="email" id="email" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="block">
Press the buttons to take a photo of the front and back of your signed notice slip.
<div class="row" style="min-height: 100px;">
<div class="col-50">
<div class="button button-outline margin" onclick="takeDocPhoto('front')"><i class="fas fa-camera"></i> Front</div>
<img src="assets/images/3849_front.png" id="noticefrontimg" style="max-width: 100%; max-height: 50vh;" />
</div>
<div class="col-50">
<div class="button button-outline margin" onclick="takeDocPhoto('back')"><i class="fas fa-camera"></i> Back</div>
<img src="assets/images/3849_back.png" id="noticebackimg" style="max-width: 100%; max-height: 50vh;" />
</div>
</div>
</div>
<div class="block margin-vertical">
By signing below, you authorize a Helena Express agent to sign for and take possession of your item from the Helena Post Office and to deliver it to the address entered above.
</div>
<div class="signature-wrapper">
<img src="assets/images/signature-line.svg" />
<canvas id="signaturecanvas"></canvas>
<i class="fas fa-undo text-color-blue" id="signatureUndoBtn"></i>
<i class="fas fa-trash text-color-red" id="signatureClearBtn"></i>
</div>
<div class="list" id="noticesignform">
<ul>
<li class="item-content item-input item-input-outline">
<div class="item-inner">
<div class="item-title item-floating-label">Your Name</div>
<div class="item-input-wrap">
<input type="text" id="signature" />
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="card-content-padding">
<div class="button" onclick="noticeSlipPayAndFinish()"><i class="far fa-arrow-right"></i> Finish</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="popup text-color-black" id="noticeslip-pay-popup">
<div class="block text-align-center">
<h2>Finish and pay</h2>
<h3>Total: $<span id="noticeslip-pay-amount"></span></h3>
<div id="noticeslip-stripe-elements">
<i class="fas fa-spin fa-spinner"></i> Loading secure card form...
</div>
<div id="noticeslip-card-errors" style="text-color-red"></div>
<div class="button" onclick="submitNoticeSlip()"><i class="far fa-arrow-right"></i> Pay and Submit</div>
<p><a class="button popup-close" href="#">Cancel</a></p>
</div>
</div>
</div>