@nuskin/ns-checkout
Version:
Ecomm3 Checkout module
484 lines (469 loc) • 34.4 kB
HTML
<!-- Shipping Information Section -->
<div class="checkout-section">
<article id="checkout-shipping-address" class="checkoutSection"
data-ng-class="{active: sections.shipping.edit==true}">
<header>
<h1>
<span class="ordinal">2</span>
<span class="title">{{tdc.shippingInformation}}</span>
</h1>
<button class="btn btn-secondary section-edit"
aria-label="{{tdc.editText}} {{tdc.shippingInformation}}"
data-ng-show="enableChangeShippingAddress && sections.shipping.edit==false && sections.shipping.pristine==false"
data-ng-class="{disabled: isBusy || order.errorResponseInfo}"
data-ng-disabled="isBusy || order.errorResponseInfo"
data-ng-click="updateEdit('shipping')">{{tdc.editText}}
</button>
<div class="summary" ns-display-errors="sections.shipping.error" id="shippingDetailsError"></div>
<div class="summary"
data-ng-show="sections.shipping.edit==false && sections.shipping.pristine==false">
<div class="shippingAddressSummary summaryColumn">
<h3>{{tdc_addressText}}</h3>
<ul data-ng-show="config.checkout.shippingAddressFormat != 'PostalCodeStateCity'">
<li class="shippingAddressName">{{order.selectedAddress.shippingAddressName}}</li>
<li class="shippingAddress1">{{order.selectedAddress.shippingAddress1}}</li>
<li class="shippingAddress2">{{order.selectedAddress.shippingAddress2}}</li>
<li class="shippingCity" data-ng-hide="order.selectedAddress.addressType == '7-11'">
{{order.selectedAddress.shippingCity}}, {{order.selectedAddress.shippingState}}
<span data-ng-hide="config.checkout.hideShippingPostalCode">{{order.selectedAddress.shippingPostalCode}}</span>
</li>
<li class="shippingCountry" data-ng-show="order.selectedAddress.shippingCountry">
{{order.selectedAddress.shippingCountry}}
</li>
<li class="shippingPhone">{{order.selectedAddress.shippingPhone}}</li>
<li class="shippingEmail" data-ng-show="order.selectedAddress.shippingEmail">
{{order.selectedAddress.shippingEmail}}
</li>
<li class="shippingInstruction"
data-ng-show="order.selectedAddress.shippingInstructions">
{{order.selectedAddress.shippingInstructions}}
</li>
<li class="shipFrom form-inline"
data-ng-show="user.isDistributor() && config.checkout.showShipFrom"><label>{{tdc.shipFromText}}</label><input
type="text" data-ng-model="order.distributorName"></li>
</ul>
<ul data-ng-show="config.checkout.shippingAddressFormat == 'PostalCodeStateCity'">
<li>{{order.selectedAddress.shippingAddressName}}</li>
<li>{{order.selectedAddress.shippingPostalCode}} <span
data-ng-bind-html="getShippingStateName(order.selectedAddress.shippingState)"></span>
</li>
<li>{{order.selectedAddress.shippingCity}}</li>
<li>{{order.selectedAddress.shippingCounty}}</li>
<li>{{order.selectedAddress.shippingAddress1}}</li>
<li>{{order.selectedAddress.shippingPhone}}</li>
<li class="shippingEmail" data-ng-show="order.selectedAddress.shippingEmail">
{{order.selectedAddress.shippingEmail}}
</li>
<li class="shippingInstructions"
data-ng-show="order.selectedAddress.shippingInstructions">
{{order.selectedAddress.shippingInstructions}}
</li>
<li class="shipFrom form-inline"
data-ng-show="user.isDistributor() && config.checkout.showShipFrom"><label>{{tdc.shipFromText}}</label><input
type="text" data-ng-model="order.distributorName"></li>
</ul>
</div>
<div class="summaryColumn">
<h3>{{tdc.shipMethodLabel}}</h3>
<span class="shippingMethodText">{{order.selectedShippingMethod.Description}}</span>
</div>
</div>
</header>
<section class="data-shippingSection" data-ng-class="{mobile: sections.shipping.selecting}"
data-ng-show="editMode || sections.shipping.edit" id="checkout-edit-shipping">
<h3 data-ng-hide="sections.shipping.selecting == true" class="firstCol">{{tdc.shippingToLabel}}<a
aria-label="{{tdc.shippingToLabel}} {{order.selectedAddress.shippingAddressName}} {{order.selectedAddress.shippingAddress1}}"
data-scroll id="shipToLabel" href=""></a></h3>
<h3 data-ng-hide="sections.shipping.selecting == false">{{tdc.shippingToLabel}}<a
aria-label="{{tdc.shippingToLabel}} {{order.selectedAddress.shippingAddressName}} {{order.selectedAddress.shippingAddress1}}"
data-scroll id="shipToLabel" href=""></a></h3>
<div class="addressReadOnly firstCol"
data-ng-hide="!editMode && (sections.shipping.selecting || sections.shipping.adding || sections.shipping.editing)">
<ul data-ng-show="config.checkout.shippingAddressFormat != 'PostalCodeStateCity'">
<li class="shippingAddressName">{{order.selectedAddress.shippingAddressName}}</li>
<li class="shippingAddress">{{order.selectedAddress.shippingAddress1}}</li>
<li class="shippingAddress2" ng-show="order.selectedAddress.shippingAddress2">
{{order.selectedAddress.shippingAddress2}}
</li>
<li class="shippingCity" data-ng-hide="order.selectedAddress.addressType == '7-11'">
{{order.selectedAddress.shippingCity}}, {{order.selectedAddress.shippingState}} <span
data-ng-hide="config.checkout.hideShippingPostalCode">{{order.selectedAddress.shippingPostalCode}}</span>
</li>
<li class="shippingCountry" data-ng-show="order.selectedAddress.shippingCountry">
{{order.selectedAddress.shippingCountry}}
</li>
<li class="shippingPhone" ng-show="order.selectedAddress.shippingPhone">
{{order.selectedAddress.shippingPhone}}
</li>
<li class="shippingEmail" data-ng-show="order.selectedAddress.shippingEmail">
{{order.selectedAddress.shippingEmail}}
</li>
<li class="shippingInstructions" data-ng-show="order.selectedAddress.shippingInstructions">
{{order.selectedAddress.shippingInstructions}}
</li>
<li><a id="changeAddress" href="" class="changeAddress"
data-ng-show="enableChangeShippingAddress"
data-ng-click="isShippingChanging=false;hideCancelChangeShipping=false;sections.shipping.selecting=true;currentSelectedAddress=order.selectedAddress;">{{tdc.changeText}}</a>
</li>
</ul>
<ul data-ng-show="config.checkout.shippingAddressFormat == 'PostalCodeStateCity'">
<li>{{order.selectedAddress.shippingAddressName}}</li>
<li>{{order.selectedAddress.shippingPostalCode}} <span
data-ng-bind-html="getShippingStateName(order.selectedAddress.shippingState)"></span>
</li>
<li>{{order.selectedAddress.shippingCity}}</li>
<li>{{order.selectedAddress.shippingCounty}}</li>
<li>{{order.selectedAddress.shippingAddress1}}</li>
<li>{{order.selectedAddress.shippingPhone}}</li>
<li class="shippingEmail" data-ng-show="order.selectedAddress.shippingEmail">
{{order.selectedAddress.shippingEmail}}
</li>
<li class="shippingInstructions" data-ng-show="order.selectedAddress.shippingInstructions">
{{order.selectedAddress.shippingInstructions}}
</li>
<li><a id="changeAddress" href="" class="changeAddress"
data-ng-show="enableChangeShippingAddress"
data-ng-click="isShippingChanging=false;hideCancelChangeShipping=false;sections.shipping.selecting=true;currentSelectedAddress=order.selectedAddress;">{{tdc.changeText}}</a>
</li>
</ul>
</div>
<div id="qasWidget"></div> <!-- QAS dynamically loaded here -->
<div id="qasWrapper">
<!-- Anything inside qasWrapper gets hidden when qas appears. -->
<fieldset id="shippingAddresses"
data-ng-hide="!editMode && (sections.shipping.adding || sections.shipping.editing || !sections.shipping.selecting)">
<label id="{{address.beShippingAddressId}}" class="shipToSelection"
data-ng-repeat="address in shippingAddresses"
data-ng-class="{selected: address.beShippingAddressId==order.selectedAddress.beShippingAddressId}">
<!-- if we bind the ng-model to the object instead of the value it strips out all the functions from the object. The workaround is to bind ng-model to the id and then
on ng-change set the object manually thus maintaining all the functions in the object. -->
<input type="radio" name="shippingTo" data-ng-value="{{address}}"
data-ng-model="order.selectedAddress" data-ng-disabled="isBusy">
<h4 data-ng-show="address.addressType == 'postal'">{{tdc.postOfficeDeliveryText}}</h4>
<span class="deleteThis"><a
aria-label="{{tdc.delete}} {{address.shippingAddressName}} {{address.shippingAddress1}}"
class="btn-edit" href=""
data-ng-click="setDeleteShippingDialogId(address.beShippingAddressId)"> </a></span>
<span class="defaultOptionLabel" data-ng-show="address.defaultShipping">{{tdc.defaultAddressText}}</span>
<ul data-ng-show="config.checkout.shippingAddressFormat != 'PostalCodeStateCity'">
<li>{{address.shippingAddressName}}</li>
<li>{{address.shippingAddress1}}</li>
<li>{{address.shippingAddress2}}</li>
<li data-ng-hide="address.addressType=='7-11'">{{address.shippingCity}},
{{address.shippingState}} <span
data-ng-hide="config.checkout.hideShippingPostalCode">{{address.shippingPostalCode}}</span>
</li>
<li class="shippingCountry" data-ng-show="address.shippingCountry">
{{address.shippingCountry}}
</li>
<li>{{address.shippingPhone}}</li>
<li data-ng-show="address.shippingEmail">{{address.shippingEmail}}</li>
<li data-ng-show="address.shippingInstructions">{{address.shippingInstructions}}
</li>
<li>
<a aria-label="{{tdc.editText}} {{address.shippingAddressName}} {{address.shippingAddress1}}"
class="btn-edit" href=""
data-ng-click="isBusy || setupShippingAddress(address)">{{tdc.editText}}</a>
</li>
<li data-ng-hide="address.shippingEmail"></li>
<li data-ng-hide="address.shippingInstructions"></li>
<li>
<button aria-label="{{tdc.shipToThisAddressText}} {{address.shippingAddressName}} {{address.shippingAddress1}}"
class="btn btn-primary simulateRequest horizontal-center"
data-ng-class="{disabled: isBusy, processing: isChosenElementBusy(address), valid: isChosenElementValid(address)}"
data-ng-click="changeShippingAddressAndSimulate(address);"
data-ng-disabled="isBusy"><span class="valid-submit"></span><span
class="process-submit"></span>{{tdc.shipToThisAddressText}}
</button>
</li>
</ul>
<ul data-ng-show="config.checkout.shippingAddressFormat == 'PostalCodeStateCity'">
<li>{{address.shippingAddressName}}</li>
<li>{{address.shippingPostalCode}} <span
data-ng-bind-html="getShippingStateName(address.shippingState)"></span></li>
<li>{{address.shippingCity}}</li>
<li>{{address.shippingCounty}}</li>
<li>{{address.shippingAddress1}}</li>
<li>{{address.shippingPhone}}</li>
<li class="shippingEmail" data-ng-show="order.selectedAddress.shippingEmail">
{{address.shippingEmail}}
</li>
<li class="shippingInstructions"
data-ng-show="order.selectedAddress.shippingInstructions">
{{address.shippingInstructions}}
</li>
<li>
<a aria-label="{{tdc.editText}} {{address.shippingAddressName}} {{address.shippingAddress1}}"
class="btn-edit" href=""
data-ng-click="isBusy || setupShippingAddress(address)">{{tdc.editText}}</a>
</li>
<li>
<button aria-label="{{tdc.shipToThisAddressText}} {{address.shippingAddressName}} {{address.shippingAddress1}}"
class="btn btn-primary simulateRequest horizontal-center"
data-ng-class="{disabled: isBusy, processing: isChosenElementBusy(address), valid: isChosenElementValid(address)}"
data-ng-click="changeShippingAddressAndSimulate(address);"
data-ng-disabled="isBusy"><span class="valid-submit"></span><span
class="process-submit"></span>{{tdc.shipToThisAddressText}}
</button>
</li>
</ul>
<modal-dialog show="showDeleteShippingDialog(address.beShippingAddressId)" hidex="true">
<div>
<p class="modal-paragraph-center">{{tdc.deleteThisAddress}}</p>
<p class="modal-paragraph-center">
<a href="" class="btn-edit cancel-shipping"
data-ng-click="setDeleteShippingDialogId(null)">{{tdc.cancelText}}</a>
<button id="deleteShippingButton"
class="btn btn-primary continue btn-primary-dialog"
data-ng-click="deleteShippingAddress(address.beShippingAddressId)">
{{tdc.delete}}
</button>
</p>
</div>
</modal-dialog>
</label>
<div class="section-controls">
<select data-ng-show="order.addressTypeList.length > 1" id="addNewAddressSelect"
data-ng-model="sections.shipping.newAddress.addressType"
data-ng-options="type.code as type.description for type in order.addressTypeList"></select>
<button href="" class="addANewAddress btn btn-secondary"
data-ng-hide="!editMode && sections.shipping.adding"
data-ng-click="setupNewShippingAddress()"
data-ng-class="{disabled: isShippingChanging}"
data-ng-disabled="isShippingChanging">
{{tdc.addANewAddress}}
</button>
</div>
</fieldset>
<div class="newAddress" data-ng-show="sections.shipping.editing">
<div ng-if="config.checkout.enableSEAShoppe">
<label for="seaShipCountryNew">
<b>{{tdc.countryLabel}}</b>
</label>
<select id="seaShipCountryEdit"
data-ng-model="sections.shipping.editAddress.shippingCountry">
<option value="BN">{{bruneiName}}</option>
<option value="ID">{{indonesiaName}}</option>
<option value="MY">{{malaysiaName}}</option>
<option value="PH">{{philippinesName}}</option>
<option value="SG">{{singaporeName}}</option>
<option value="TH">{{thailandName}}</option>
</select>
</div>
<!-- For ZA we prompt for Home delivery or PO box -->
<div ng-if="config.checkout.enablePostOfficeAddress">
<input type="radio" name="delivery" data-ng-value="Home"
data-ng-model="sections.shipping.editAddress.delivery">
<span>{{tdc.homeDeliveryText}}</span>
<input type="radio" name="delivery" data-ng-value="Post"
data-ng-model="sections.shipping.editAddress.delivery">
<span>{{tdc.postOfficeDeliveryText}}</span>
</div>
<div ng-if="!config.checkout.enableSEAShoppe && !config.checkout.enablePostOfficeAddress">
<form name="forms.editShippingForm" class="css-form narrow" novalidate>
<div data-ns-include="sections.shipping.editFormUrl"></div>
</form>
</div>
<div ng-if="config.checkout.enablePostOfficeAddress">
<form name="forms.editShippingHomeForm"
data-ng-show="sections.shipping.editAddress.delivery == 'Home'">
<div data-ns-include="getDeliveryShippingFormUrl('edit')"></div>
</form>
<form name="forms.editShippingPostForm"
data-ng-show="sections.shipping.editAddress.delivery == 'Post'">
<div data-ns-include="getDeliveryShippingFormUrl('edit')"></div>
</form>
</div>
<div ng-if="config.checkout.enableSEAShoppe">
<!-- for validation to work we must load all the forms and show and hide the currently selected one -->
<form name="forms.editShippingBNForm"
data-ng-show="sections.shipping.editAddress.shippingCountry == 'BN'">
<div data-ns-include="getSeaShoppeShippingFormUrl('edit','BN')"></div>
</form>
<form name="forms.editShippingIDForm"
data-ng-show="sections.shipping.editAddress.shippingCountry == 'ID'">
<div data-ns-include="getSeaShoppeShippingFormUrl('edit','ID')"></div>
</form>
<form name="forms.editShippingMYForm"
data-ng-show="sections.shipping.editAddress.shippingCountry == 'MY'">
<div data-ns-include="getSeaShoppeShippingFormUrl('edit','MY')"></div>
</form>
<form name="forms.editShippingPHForm"
data-ng-show="sections.shipping.editAddress.shippingCountry == 'PH'">
<div data-ns-include="getSeaShoppeShippingFormUrl('edit','PH')"></div>
</form>
<form name="forms.editShippingSGForm"
data-ng-show="sections.shipping.editAddress.shippingCountry == 'SG'">
<div data-ns-include="getSeaShoppeShippingFormUrl('edit','SG')"></div>
</form>
<form name="forms.editShippingTHForm"
data-ng-show="sections.shipping.editAddress.shippingCountry == 'TH'">
<div data-ns-include="getSeaShoppeShippingFormUrl('edit','TH')"></div>
</form>
</div>
<button class="btn btn-primary saveAddressChanges simulateRequest"
data-ng-class="{disabled: isBusy || !isEditShippingFormChanged(), processing: isChosenElementBusy('editShippingButton'), valid: isChosenElementValid('editShippingButton')}"
data-ng-disabled="isBusy || !isEditShippingFormChanged()"
data-ng-click="saveShippingAddress('editShippingButton')">{{tdc.saveChangesText}}
</button>
<a href="" data-ng-click="cancelSaveShippingAddress()"
data-ng-show="!hideCancelChangeShipping">{{tdc.cancelText}}</a>
</div>
</div>
<div class="newAddress" data-ng-show="sections.shipping.adding">
<div ng-if="config.checkout.enableSEAShoppe">
<label for="seaShipCountryNew">
<b>{{tdc.countryLabel}}</b>
</label>
<select id="seaShipCountryNew" data-ng-model="sections.shipping.newAddress.shippingCountry">
<option value="BN">{{bruneiName}}</option>
<option value="ID">{{indonesiaName}}</option>
<option value="MY">{{malaysiaName}}</option>
<option value="PH">{{philippinesName}}</option>
<option value="SG">{{singaporeName}}</option>
<option value="TH">{{thailandName}}</option>
</select>
</div>
<div ng-if="config.checkout.enablePostOfficeAddress">
<input type="radio" name="delivery" data-ng-value="Home"
data-ng-model="sections.shipping.newAddress.delivery">
<span>{{tdc.homeDeliveryText}}</span>
<input type="radio" name="delivery" data-ng-value="Post"
data-ng-model="sections.shipping.newAddress.delivery">
<span>{{tdc.postOfficeDeliveryText}}</span>
</div>
<div ng-if="!config.checkout.enableSEAShoppe && !config.checkout.enablePostOfficeAddress">
<form name="forms.addShippingForm" class="css-form narrow" novalidate>
<div data-ns-include="sections.shipping.newFormUrl"></div>
</form>
</div>
<div ng-if="config.checkout.enablePostOfficeAddress">
<form name="forms.addShippingHomeForm"
data-ng-show="sections.shipping.newAddress.delivery == 'Home'">
<div data-ns-include="getDeliveryShippingFormUrl('add')"></div>
</form>
<form name="forms.addShippingPostForm"
data-ng-show="sections.shipping.newAddress.delivery == 'Post'">
<div data-ns-include="getDeliveryShippingFormUrl('add')"></div>
</form>
</div>
<div ng-if="config.checkout.enableSEAShoppe">
<!-- for validation to work we must load all the forms and show and hide the currently selected one -->
<form name="forms.addShippingBNForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'BN'">
<div data-ns-include="getSeaShoppeShippingFormUrl('add','BN')"></div>
</form>
<form name="forms.addShippingIDForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'ID'">
<div data-ns-include="getSeaShoppeShippingFormUrl('add','ID')"></div>
</form>
<form name="forms.addShippingMYForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'MY'">
<div data-ns-include="getSeaShoppeShippingFormUrl('add','MY')"></div>
</form>
<form name="forms.addShippingPHForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'PH'">
<div data-ns-include="getSeaShoppeShippingFormUrl('add','PH')"></div>
</form>
<form name="forms.addShippingSGForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'SG'">
<div data-ns-include="getSeaShoppeShippingFormUrl('add','SG')"></div>
</form>
<form name="forms.addShippingTHForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'TH'">
<div data-ns-include="getSeaShoppeShippingFormUrl('add','TH')"></div>
</form>
</div>
<button class="btn btn-primary saveAddressChanges simulateRequest"
data-ng-class="{disabled: isBusy || !isAddShippingFormChanged(), processing: isChosenElementBusy('addShippingButton'), valid: isChosenElementValid('addShippingButton')}"
data-ng-disabled="isBusy || !isAddShippingFormChanged()"
data-ng-click="addShippingAddress('add','addShippingButton')">{{tdc.saveChangesText}}
</button>
<a href="" data-ng-click="cancelAddShippingAddress()" data-ng-show="!hideCancelChangeShipping">{{tdc.cancelText}}</a>
</div>
<!-- end new address -->
<div id="shippingMethod" style="" data-ng-hide="sections.shipping.selecting == true">
<h3>{{tdc.shippingMethodLabel}}</h3>
<!--<div data-ng-show="order.shippingAvailableMethods.isEmpty()">Free Shipping!</div> Free Shipping is not based on no ship methods -->
<fieldset>
<div data-ng-show="order.shippingAvailableMethods.length > 0">
<label class="simulateRequest"
data-ng-class="{processing: isChosenElementBusy(method), valid: isChosenElementValid(method)}"
data-ng-repeat="method in order.shippingAvailableMethods"
data-ng-show="!config.checkout.showPickupPointsInDropdown">
<!-- if we bind the ng-model to the object instead of the value it strips out all the functions from the object. The workaround is to bind ng-model to the id and then
on ng-change set the object manually thus maintaining all the functions in the object. -->
<!-- There is a $watch on order.selectedShippingMethod.Code in the shippingAddressUtil that performs the simulate call-->
<input type="radio" name="shippingMethod" data-ng-value="method"
data-ng-model="order.selectedShippingMethod" data-ng-disabled="isBusy"
checked data-ng-show="order.shippingAvailableMethods.length > 1">
<span>{{method.Description}}</span><span
data-ng-hide="config.checkout.hideShippingMethodPrices"> - {{method.Cost | currencyFilter}}</span>
<div class="pickup-address"
data-ng-show="method.pickupInfo && order.selectedShippingMethod==method"
data-ng-bind-html="method.pickupInfo | sanitize"></div>
</label>
<div data-ng-show="config.checkout.showPickupPointsInDropdown">
<label class="simulateRequest"
data-ng-class="{processing: isChosenElementBusy(order.selectedShippingMethod), valid: isChosenElementValid(order.selectedShippingMethod)}">
<select data-ng-model="order.selectedShippingMethod"
data-ng-options="method.Description for method in order.shippingAvailableMethods">
</select>
<div class="pickup-address"
data-ng-show="order.selectedShippingMethod.pickupInfo"
data-ng-bind-html="order.selectedShippingMethod.pickupInfo | sanitize"></div>
</label>
</div>
</div>
<div data-ng-show="editMode || order.shippingDeliveryTimeSlots.length > 0">
<label>
<span>{{tdc.deliveryTimesLabel}}</span>
<select data-ng-model="order.selectedDeliveryTimeSlot"
data-ng-options="time.startDate | deliveryTimeFilter: time.duration for time in shippingDeliveryTimeSlots"></select>
</label>
</div>
<a id="shippingRatePopupLink"
ng-click="toggleModal1({size: 'large', id:'shippingRatesModal'})">
{{tdc.shippingRatesText}}
</a>
<div data-ng-if="config.checkout.enablePickUpPerson">
<div class="pickUpPerson" data-ng-show="editMode || sections.shipping.showPickUpPerson">
<h3>{{tdc.pickUpPersonHeader}}</h3>
<fieldset>
<label for="pickUpName">
{{tdc.pickUpPersonName}}
</label>
<input id="pickUpName" type="text" data-ng-model="sections.shipping.pickUpName">
<label for="pickUpNumber">
{{tdc.pickUpPersonNumber}}
</label>
<input id="pickUpNumber" type="text"
data-ng-model="sections.shipping.pickUpNumber">
</fieldset>
</div>
</div>
</fieldset>
</div>
<modal-dialog show='modalShown1'>
<div data-ng-bind-html="tdc.shippingRatesContent"></div>
</modal-dialog>
</section>
<footer data-ng-show="sections.shipping.edit || sections.shipping.selecting || sections.shipping.adding">
<div class="actions">
<a href="" class="btn sectionCancelLink" data-ng-click="cancelChangeShippingAddress();"
data-ng-show="!sections.pre.edit && !hideCancelChangeShipping && (sections.shipping.editing || sections.shipping.adding || sections.shipping.selecting)">{{tdc.cancelText}}
{{allowCancelChangeShipping}}</a>
<button id="shippingContinueButton"
aria-label="{{tdc.shippingInformation}} {{tdc.continueText}}"
class="btn btn-primary continue"
data-ng-hide="isBusy || sections.shipping.adding || sections.shipping.editing || sections.shipping.selecting || sections.pre.edit"
data-ng-click="continueEdit('shipping')"
data-ng-class="{disabled: isBusy || sections.shipping.adding || sections.shipping.editing || sections.shipping.selecting}"
data-ng-disabled="isBusy || sections.shipping.selecting || sections.shipping.adding || sections.shipping.error.hasErrorMessages()">
{{tdc.continueText}}
</button>
</div>
</footer>
<div ng-show="tdc.shippingDisclaimer" class="disclaimer">{{tdc.shippingDisclaimer}}</div>
</article>
</div>