Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
97 lines (97 sloc) 6.23 KB
<md-dialog class="padding-medium" layout="row" layout-padding layout-wrap style="max-width: 40rem;">
<md-button class="md-icon-button md-warn md-raised absolute" ng-click="cancel()" style="top: .5rem; right: .5rem;" aria-label="Close shipping address dialog">
<i class="mdi-content-clear"></i>
</md-button>
<h3 class="headline">Shipping Address</h3>
<!-- Shipping Address -->
<form name="addressForm">
<div layout="row" layout-align="start start" layout-wrap>
<md-input-container flex="100">
<label for="name">
<span>Recipient Name</span>
<!-- <strong class="text-small text-error margin-horizontal-small">{{ errorMessages.recipient }}</strong> -->
</label>
<input id="name" type="text" ng-model="$storage.address.recipient" ng-blur="validateAddress($storage.address)" required>
</md-input-container>
<md-input-container flex="100">
<label for="email">
<span>Notification Email</span>
<!-- <strong class="text-small text-error margin-horizontal-small">{{ errorMessages.email }}</strong> -->
</label>
<input id="email" type="text" ng-model="$storage.address.email" ng-blur="validateAddress($storage.address)" required>
</md-input-container>
<md-input-container flex="100">
<md-select id="country-code" ng-model="$storage.address.countryCodeIndex" aria-label="Country telephone code" required>
<md-option value="">Country code</md-option>
<md-option ng-repeat="code in countryCodes" value="{{ $index }}">{{ code.value }}</md-option>
</md-select>
</md-input-container>
<md-input-container flex>
<label for="address-phone">
<span>Notification Phone</span>
<strong class="text-small text-error margin-horizontal-small">{{ errorMessages.countryCode }}</strong>
<strong class="text-small text-error margin-horizontal-small">{{ errorMessages.phone }}</strong>
</label>
<input class="margin-zero-important" type="text" ng-model="$storage.address.phone" ng-blur="validateAddress($storage.address)" required>
</md-input-container>
<div flex="100">
<md-switch ng-model="$storage.address.sms" aria-label="Enable SMS notifications">
Enable SMS Notifications
</md-switch>
</div>
<md-input-container flex="100">
<label for="address-line-one">
<span>Street Address</span>
<!-- <strong class="text-small text-error margin-horizontal-small">{{ errorMessages.street }}</strong> -->
</label>
<input id="address-line-one" type="text" ng-model="$storage.address.street1" ng-blur="validateAddress($storage.address)" required>
</md-input-container>
<md-input-container flex="100">
<label for="line-two">Line 2</label>
<input id="line-two" type="text" ng-model="$storage.address.street2">
</md-input-container>
<md-input-container flex="100">
<label for="line-three">Line 3</label>
<input id="line-three" type="text" ng-model="$storage.address.street3">
</md-input-container>
<md-input-container flex="100">
<label for="city">
<span>City</span>
<!-- <strong class="text-small text-error margin-horizontal-small">{{ errorMessages.city }}</strong> -->
</label>
<input id="city" type="text" ng-model="$storage.address.city" ng-blur="validateAddress($storage.address)" required>
</md-input-container>
<md-input-container flex="100">
<label for="postal-code">
<span>Postal Code</span>
<!-- <strong class="text-small text-error margin-horizontal-small">{{ errorMessages.postalCode }}</strong> -->
</label>
<input id="postal-code" type="text" ng-model="$storage.address.postalCode" ng-blur="validateAddress($storage.address)" required>
</md-input-container>
<md-input-container class="text-left" flex="100" ng-show="$storage.address.country === 'US'">
<md-select id="state" ng-model="$storage.address.state" ng-blur="validateAddress($storage.address)" ng-change="updateAddress()" placeholder="State..." style="margin-top: 4px;">
<md-option value="">Select State</md-option>
<md-option ng-repeat="state in states" value="{{ state.abbreviation }}">{{ state.name }}</md-option>
</md-select>
</md-input-container>
<md-input-container flex="100">
<md-select id="country" ng-model="$storage.address.country" ng-blur="validateAddress($storage.address)" placeholder="Country..." style="margin-top: 4px;" required>
<md-option value="">Select Country</md-option>
<md-option ng-repeat="country in countries" value="{{ country['alpha-2'] }}">{{ country.name }}</md-option>
</md-select>
</md-input-container>
<md-input-container flex="100" ng-show="$storage.address.country !== 'US'">
<label for="address-state">
<span>Territory</span>
<!-- <strong class="text-small text-error margin-horizontal-small">{{ errorMessages.territory }}</strong> -->
</label>
<input type="text" ng-model="$storage.address.territory" ng-blur="validateAddress($storage.address)">
</md-input-container>
<md-input-container flex="100">
<label for="address-instructions">Shipping Instructions</label>
<textarea ng-model="$storage.address.instructions"></textarea>
</md-input-container>
<md-button class="md-raised md-primary margin-zero min-16 max-16" flex ng-click="saveAddress($storage.address, cancel);">Save Address</md-button>
</div>
</form>
</md-dialog>