185 lines
		
	
	
		
			10 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			185 lines
		
	
	
		
			10 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="account">
 | 
						|
 | 
						|
    <div class="navbar">
 | 
						|
        <div class="navbar-bg"></div>
 | 
						|
        <div class="navbar-inner">
 | 
						|
            <div class="left">
 | 
						|
                <a class="link hapticbtn" href="/home">
 | 
						|
                    <i class="icon icon-back"></i>
 | 
						|
                    <span class="if-not-md">Back</span>
 | 
						|
                </a>
 | 
						|
            </div>
 | 
						|
            <div class="title">My Account</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 id="loadingaccountbox" style="text-align: center;">
 | 
						|
                            <div class="preloader"></div>
 | 
						|
                            <br /><br />
 | 
						|
                            Loading...
 | 
						|
                        </div>
 | 
						|
 | 
						|
                        <div id="hasaccountbox" style="display: none;">
 | 
						|
                            <div id="addPaymentMethodBox" style="display: none;">
 | 
						|
                                Add a credit or debit card to use Drop and Send. It'll be securely saved for future use.
 | 
						|
                                <div class="button hapticbtn button-fill margin" onclick="openCheckoutWindowToSaveCard()"><i class="fas fa-credit-card"></i> Add Card</div>
 | 
						|
                                <hr />
 | 
						|
                            </div>
 | 
						|
                            <div class="card-content-padding">
 | 
						|
                                Your Account Number:
 | 
						|
                                <h2><span id="accountnumberspan">Loading...</span></h2>
 | 
						|
                            </div>
 | 
						|
                            <div id="loyaltyBalanceBox" class="card-content-padding">
 | 
						|
                                <div>You have earned a total of</div>
 | 
						|
                                <h2 id="loyaltyCreditBalanceHeading">...</h2>
 | 
						|
                                <img id="loyaltyBarcodeImg" style="width: 90%; max-width: 300px; padding: 1.2em; background: white;" />
 | 
						|
                            </div>
 | 
						|
                            <div class="block">
 | 
						|
                                <div class="button hapticbtn popup-open button-outline" data-popup="#accountUpdatePopup"><i class="fas fa-edit"></i> Update account details</div>
 | 
						|
                            </div>
 | 
						|
                            <div id="loyaltyErrorMessage"></div>
 | 
						|
                            <div class="block margin-top">
 | 
						|
                                Loyalty points have no cash value. All points and associated discounts
 | 
						|
                                are offered as a courtesy by and at the discretion of Helena Express
 | 
						|
                                and may be revoked, canceled, or modified at any time for any reason.
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
 | 
						|
 | 
						|
                        <div id="setupaccountbox" style="display: none;">
 | 
						|
                            <div class="block">
 | 
						|
                                Set up an account to use our Drop and Send service, earn rewards points, and more!
 | 
						|
                            </div>
 | 
						|
                            <div class="block">
 | 
						|
                                Already have an account?
 | 
						|
                                <div class="button hapticbtn" id="connectExistingAccountBtn">
 | 
						|
                                    <span class="taptext">Tap</span>
 | 
						|
                                    <span class="clicktext">Click</span> here</div>
 | 
						|
                                to connect it.
 | 
						|
                            </div>
 | 
						|
 | 
						|
                            <div class="list">
 | 
						|
                                <ul id="accountsetupform">
 | 
						|
                                    <li class="item-content item-input item-input-outline">
 | 
						|
                                        <div class="item-inner">
 | 
						|
                                            <div class="item-title item-floating-label">Name</div>
 | 
						|
                                            <div class="item-input-wrap">
 | 
						|
                                                <input type="text" id="name" />
 | 
						|
                                                <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</div>
 | 
						|
                                            <div class="item-input-wrap">
 | 
						|
                                                <input type="email" id="email" 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">Phone Number</div>
 | 
						|
                                            <div class="item-input-wrap">
 | 
						|
                                                <input type="tel" id="phonenumber" />
 | 
						|
                                                <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">House number and street</div>
 | 
						|
                                            <div class="item-input-wrap">
 | 
						|
                                                <input type="text" id="streetaddress" placeholder="1234 Notareal Road" 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" autocomplete="off" autocorrect="off" inputmode="numeric"/>
 | 
						|
                                                <span class="input-clear-button"></span>
 | 
						|
                                            </div>
 | 
						|
                                        </div>
 | 
						|
                                    </li>
 | 
						|
                                </ul>
 | 
						|
                            </div>
 | 
						|
                            <div class="card-content-padding">
 | 
						|
                                <div class="button hapticbtn button-fill" id="setupAccountBtn"><i class="far fa-plus"></i> Setup Account</div>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div class="popup text-color-black" id="accountUpdatePopup">
 | 
						|
        <div class="block">
 | 
						|
            <h3>Update Account</h3>
 | 
						|
        </div>
 | 
						|
        <div class="list no-hairlines">
 | 
						|
            <ul id="accountupdateform" style="background: transparent;">
 | 
						|
                <li class="item-content item-input item-input-outline">
 | 
						|
                    <div class="item-inner">
 | 
						|
                        <div class="item-title item-floating-label">Name</div>
 | 
						|
                        <div class="item-input-wrap">
 | 
						|
                            <input type="text" id="name" />
 | 
						|
                            <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</div>
 | 
						|
                        <div class="item-input-wrap">
 | 
						|
                            <input type="email" id="email" 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">House number and street</div>
 | 
						|
                        <div class="item-input-wrap">
 | 
						|
                            <input type="text" id="streetaddress" placeholder="1234 Notareal Road" 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" autocomplete="off" autocorrect="off" inputmode="numeric"/>
 | 
						|
                            <span class="input-clear-button"></span>
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </li>
 | 
						|
            </ul>
 | 
						|
        </div>
 | 
						|
        <div class="card-content-padding">
 | 
						|
            <div class="button hapticbtn button-outline" onclick="openCheckoutWindowToSaveCard()"><i class="fas fa-credit-card"></i> Add New Card</div>
 | 
						|
        </div>
 | 
						|
        <div class="card-content-padding">
 | 
						|
            <div class="button button-fill hapticbtn" id="updateAccountBtn"><i class="far fa-edit"></i> Update Account</div>
 | 
						|
        </div>
 | 
						|
        <div class="block text-align-center">
 | 
						|
            <p><a class="button popup-close" href="#">Cancel</a></p>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
</div> |