@nuskin/ns-checkout
Version:
Ecomm3 Checkout module
625 lines (609 loc) • 157 kB
HTML
<ns-waiting-room id="waiting-room"
queue="{{config.waitingRoom.queueName}}"
information="{{tdc.wrInformation}}"
position="{{tdc.wrPosition}}"
waittime="{{tdc.wrTime}}">
</ns-waiting-room>
<ns-overlay id="requestInProgressOverlay"></ns-overlay>
<div class="requestInProgress">
<p>{{timeoutMessage}}</p>
<ns-button theme="primary-hit" data-ng-click="orderTimeoutContinue();">
{{tdc.continueText}}
</ns-button>
</div>
<div id="orderSummaryRoot" class="ns-atomic" data-ng-show="showCheckout">
<div id="backToCartButton" data-ng-hide="hideBackToCartButton()" data-ng-class="{'iw': runConfig.language==='iw'}">
<!-- The empty href is a solution for an accessibility issue -->
<a href="" data-ng-click="processBackToCart()" data-ng-class="{'pitch-checkout': isPitchCart, 'mecommerce-checkout': isGuestCheckout}"
data-ng-keypress="$event.keyCode == 13 && processBackToCart()" class="action-link"
aria-label="{{(isPitchCart) ? tdc.backToPersonalOfferText : tdc.backToCartText}}">
<iron-icon icon="nuskin:icon-smallcart-empty" class="cartIcon"></iron-icon>
{{tdc.backToCartText}}
</a>
</div>
<h1 data-ng-show="order.adr" class="checkoutHeader">
<span class="title">{{tdc.adrCheckoutTitle}}</span>
</h1>
<h1 data-ng-show="!order.adr" class="checkoutHeader">
<span class="title">{{tdc.orderCheckoutTitle}}</span>
</h1>
<div id="checkoutErrorSummary" data-ns-display-errors="sections.general.error"></div>
<span data-ng-bind-html="tdc.genericMessage"></span>
<article class="checkoutSection" data-ng-show="editMode || buyForOther">
<header>
<h1>
<span class="title">{{tdc.facilitatorInformation}}</span>
</h1>
<div class="summary" style="display: block;">
<span>{{tdc.nameLabel}} {{user.firstName}} {{user.lastName}}</span>
<span>{{tdc.mobilePhoneLabel}} {{user.mobilePhone}}</span>
<span>{{tdc.emailLabel}} {{user.email}}</span>
</div>
</header>
</article>
<div class="main-checkout">
<div class="checkout-main" data-ng-class="{'iw': runConfig.language==='iw'}">
<!-- Order Details Section -->
<div class="checkout-section" data-ng-show="showPointsPaymentOptions">
<article id="checkout-order-details" class="chevron checkoutSection"
data-ng-class="{active: sections.cart.edit==true || pointsEdited==true}">
<div class="completed" data-ng-class="{'iw': runConfig.language==='iw'}"
data-ng-show="!sections.cart.pristine && sections.cart.edit==false"></div>
<header data-ng-click="sections.cart.edit ? pointsContinueClicked() : updateEdit('cart')">
<h1 data-ng-class="{'section-completed': !sections.cart.pristine && sections.cart.edit==false, 'section-title-hebrew': runConfig.language==='iw'}">
<span class="ordinal" data-ng-class="{'iw': runConfig.language==='iw'}">
<iron-icon icon="{{detailsIcon}}"></iron-icon>
<iron-icon class="check-mark" icon="nuskin:icon-success-filled"
data-ng-show="!sections.cart.pristine && sections.cart.edit==false"></iron-icon>
</span>
<span class="title">{{orderDetailsHeader}}</span>
</h1>
<iron-icon icon="nuskin:icon-chevron-down"
data-ng-class="{'section-edit-hebrew' : runConfig.language==='iw', 'section-edit' : runConfig.language!=='iw', 'rotate' : sections.cart.edit, 'unrotate' : !sections.cart.edit}">
</iron-icon>
<div class="summary"
data-ng-show="(editMode || (sections.cart.keepOpen==false && sections.cart.edit==false && sections.cart.pristine==false))">
<!-- main ng-repeat begins here -->
<!--<ul class="summaryCartList summaryColumn">
<h3>{{tdc_cartItemsText}}</h3>
<li class="summaryCartItem" data-ng-repeat="item in order.cart.getItems({sapItems: true})"
data-ng-class="getLineItemClass(item)"
data-ng-if="order.adr && item.adr || !order.adr && !item.adr || adr.shipImmediate">
<span class="{{config.adrProgram | lowercase}}Badge badge"
data-ng-show="item.adr && !item.businessPortfolio"></span>
<span class="productQuantity" data-ng-hide="config.checkout.allowEditQuantity">{{item.qty}}</span>
<span id="productTitle_{{item.sku}}"
class="productTitle">{{item.getProduct().title}}</span>
</li>
</ul>-->
<div class="flex-container">
<span class="inline" data-ng-show="adr.shipImmediate">{{getItemCnt()}} {{tdc.itemsText}}</span>
<span class="inline" data-ng-show="order.adr && !adr.shipImmediate">{{getItemCnt()}}
{{tdc.itemsText}}</span>
<span class="inline" data-ng-show="!order.adr">{{getItemCnt()}} {{tdc.itemsText}}</span>
<span data-ng-show="showPsv"
class="no-mec">{{psvTotal | decimalPlaceFilter:2}} {{psvLabel}}</span>
<span class="inline bold">{{order.orderTotals.itemSubtotal | currencyFilter}}</span>
</div>
</div>
</header>
<div class="summary" ns-display-errors="sections.cart.error" id="productDetailsError"></div>
<div class="points-warning" data-ng-show="blockPointsPromoCombo && (editMode || sections.cart.keepOpen==true || sections.cart.edit) && tdc.disabledPromoWarning">
<iron-icon icon="nuskin:icon-warning-filled" /> {{tdc.disabledPromoWarning}}
</div>
<section data-ng-show="(editMode || sections.cart.keepOpen==true || sections.cart.edit)"
class="product-box">
<!-- Order Details ng-repeat begins here -->
<div class="total-points" data-ng-show="showPointsPaymentOptions==true">
<span class="points-label">{{tdc.points}} {{(userAvailablePoints - pointsTotal) | number:2}}</span>
</div>
<div id="checkout_container" data-ng-repeat="item in sapItems"
data-ng-class="getLineItemClass(item)"
data-ng-if="order.adr && item.isAdr || !order.adr && !item.isAdr || adr.shipImmediate">
<div data-ng-show="config.checkout.enablePoints" class="productThumb textRight order-details">
<img data-ng-src="{{item.thumbnail}}" alt="{{item.title}}">
</div>
<div class="checkout_items clearfix">
<div ng-show="!config.checkout.enablePoints" class="productThumb textRight order-details">
<img data-ng-src="{{item.thumbnail}}" alt="{{item.title}}">
</div>
<div class="productTitle">
<div class="{{config.adrProgram | lowercase}}Badge badge"
data-ng-show="item.isAdr && !item.isBusinessPortfolio"></div>
<h3 data-ns-html-title="{{item.title}}" data-ng-bind-html="item.title | sanitize"
data-ng-class="{'adr-product': item.isAdr && !item.isBusinessPortfolio}"></h3>
<span id="productDetailSubtitle_{{item.sku}}" class="productDetailSubtitle"
data-ng-class="{'adr-product': item.isAdr && !item.isBusinessPortfolio}">
<span class="backOrderDate ng-binding " data-ng-show="item.backOrderedDate != null"
style="color: #FF76B9; font-weight: 600;">
{{backOrdered}} {{ {date: item.backOrderedDate, locale:
runConfig.language + "_" + order.countryCode } | countryFormattedDate}}
</span>
<span data-ng-show="item.isAgelocme"
class="agelocmeLabel">{{item.agelocme.label}}</span>
</span>
</div>
<div class="prod_numbers">
<div class="productSKU">{{item.sku}}</div>
<div class="productPrice" data-ng-show="item.qty > 0">
<!-- The price that comes back from simulate is the line item price and not the individual price. -->
{{tdc.priceLabel}} <span
class="bold">{{::getItemUnitPrice(item) | currencyFilter}}</span>
</div>
<div class="qtyCell">
<figure id="qty_{{item.sku}}" class="qty">
<input type="text" class="qty" maxlength="3" data-ng-model="item.qty"
data-ns-onblur="updateItem(item)" data-ng-readonly="isBusy"
data-ns-select-on-click data-ng-show="config.checkout.allowEditQuantity">
<figcaption>
{{tdc.quantityLabel}} <span class="bold"
data-ng-hide="config.checkout.allowEditQuantity">{{item.qty}}</span>
</figcaption>
</figure>
</div>
<div id="itemSubtotal_{{item.sku}}" class="itemSubtotal">
{{tdc.totalLabel}} <span class="bold">{{item.price | currencyFilter}}</span>
</div>
<div id="psv_{{item.sku}}" data-ng-hide="hidePointValue">
{{item.singlePv | decimalPlaceFilter:2}} <span class="bold">{{psvLabel}}</span>
</div>
<div class="productRemove newLine" data-ng-show="config.checkout.allowDeleteItem">
<a href="" class="action-link"
data-ng-click="isBusy || removeItem(item)">{{tdc.deleteItemText}}</a>
</div>
</div>
</div>
<div id="points-checkout"
data-ng-show="showPointsPaymentOptions && hasPointsPrice(item) && sections.cart.edit"
class="points-checkout-flex-container" data-ng-init="sku = item.sku">
<!-- Render when qty for item equals one -->
<div class="points-checkout-flex-row" data-ng-if="item.qty === 1">
<span>
<input class="ns-checkbox" type="checkbox" id="purchaseWithPointsCheckbox_{{sku}}" name="purchaseWithPoints"
data-ng-click="syncSingleItemRedeem(item)" data-ng-model="item.redeem"
data-ng-disabled="blockPointsPromoCombo && ((order.shippingDiscountCode && order.shippingDiscountCode !== '') || (order.productDiscountCode && order.productDiscountCode !== ''))">
<label class="points-checkout-inline-label" for="purchaseWithPointsCheckbox_{{sku}}">
<iron-icon icon="nuskin:icon-checkmark"></iron-icon>
<span>
{{purchaseWithQtyPointsStr0}}
<span id="pointPriceBadge_">{{item.points | number:2}}</span>
{{purchaseWithQtyPointsStr1}}
</span>
</label>
</span>
</div>
<!-- Render when qty for item is greater than one -->
<div class="points-checkout-flex-row" data-ng-show="item.qty > 1">
<span>
<input class="ns-checkbox" type="checkbox" id="purchaseWithPointsCheckbox_{{sku}}" name="purchaseWithPoints"
data-ng-click="updatePtsForMultipleQtyItem(item, item.redeem)" data-ng-model="item.redeem"
data-ng-disabled="blockPointsPromoCombo && ((order.shippingDiscountCode && order.shippingDiscountCode !== '') || (order.productDiscountCode && order.productDiscountCode !== ''))">
<label class="points-checkout-inline-label" for="purchaseWithPointsCheckbox_{{sku}}">
<iron-icon icon="nuskin:icon-checkmark"></iron-icon>
{{tdc.purchaseWithPoints}}
</label>
</span>
<span id="pointPrice_{{sku}}" data-ng-show="item.redeem">
<span class="points-checkout-divider">|</span>
<label class="points-checkout-inline-label">
<span>{{tdc.pointPrice}} </span><span
id="pointPriceBadge_{{sku}}">{{item.points | number:2}}</span>
</label>
<span class="points-checkout-divider">|</span>
</span>
<span id="purchaseItemsWithPoints_{{sku}}" data-ng-show="item.redeem">
<label class="points-checkout-inline-label">
<span>
{{purchaseQtyWithPointsStr0}}
<span class="number-increment">
<button class="num-inc-btn num-inc-left"
data-ng-click="decreaseQtyRedeem(item)">-</button>
<input class="num-inc-input" type="tel" min="1" maxlength="2"
data-ng-blur="updateQtyRedeem(item)"
data-ng-change="updateQtyRedeem(item)" max="{{item.qty}}"
data-ng-model="item.qtyRedeemWithPoints" />
<button class="num-inc-btn num-inc-right"
data-ng-click="increaseQtyRedeem(item)">+</button>
</span>
{{purchaseQtyWithPointsStr1}}
</span>
</label>
<span class="points-checkout-divider">|</span>
</span>
<span id="pointTotalPrice_{{sku}}" data-ng-show="item.redeem">
<label class="points-checkout-inline-label">
<span>{{tdc.pointTotalPrice}} </span>
<span id="pointTotalPriceBadge_{{sku}}">
{{getItemSubtotalPoints(item) | number:2}}
</span>
</label>
</span>
</div>
</div>
</div>
<div class="cart-subtotal">
<div>{{tdc.orderTotalLabel}} <span
class="bold">{{order.orderTotals.itemSubtotal | currencyFilter}}</span></div>
</div>
<div id="details-orderPointTotal"
data-ng-show="config.checkout.enablePoints && showPointsPaymentOptions && sections.cart.edit">
<label class="points-checkout-inline-label">
{{tdc.orderPointTotal}} <span class="orderPointTotalBadge"
data-ng-bind="cartPointsSubtotal"></span>
</label>
</div>
<span class="pointsCancelApplyBtns">
<ns-button theme="primary-hit" data-ng-disabled="sections.cart.error.hasErrorMessages() || isBusy" data-ng-click="pointsContinueClicked(sections.cart.error.hasErrorMessages() || isBusy)"
data-ng-show="sections.cart.edit" size="{{nsButtonSize}}">
{{tdc.continueText}}
</ns-button>
</span>
</section>
</article>
</div>
<!-- Shipping Information Section -->
<div class="checkout-section" data-ng-hide="config.checkout.skipShippingAddress">
<article id="checkout-shipping-address" class="checkoutSection"
data-ng-class="{active: sections.shipping.edit==true}">
<div class="completed" data-ng-class="{'iw': runConfig.language==='iw'}"
data-ng-show="!sections.shipping.pristine && sections.shipping.edit==false && sections.shipping.editing==false && sections.shipping.selecting==false && sections.shipping.adding==false">
</div>
<header>
<div data-ng-click="shippingAccordionClicked()">
<h1
data-ng-class="{'section-completed': !sections.shipping.pristine && sections.shipping.edit==false && sections.shipping.editing==false && sections.shipping.selecting==false && sections.shipping.adding==false, 'section-title-hebrew': runConfig.language==='iw'}">
<span class="ordinal" data-ng-class="{'iw': runConfig.language==='iw'}">
<iron-icon class="flipped" icon="nuskin:icon-truck"></iron-icon>
<iron-icon class="check-mark" icon="nuskin:icon-success-filled"
data-ng-show="!sections.shipping.pristine && sections.shipping.edit==false && sections.shipping.editing==false && sections.shipping.selecting==false && sections.shipping.adding==false">
</iron-icon>
</span>
<span class="title">{{tdc.shippingInformation}}</span>
</h1>
<span class="edit-action" data-ng-class="{'iw' : runConfig.language==='iw'}"
data-ng-show="!sections.shipping.pristine && sections.shipping.edit==false && sections.shipping.editing==false && sections.shipping.selecting==false && sections.shipping.adding==false">{{commonStrings.cardEditText}}</span>
</div>
<div class="summary" ns-display-errors="sections.shipping.error" id="shippingDetailsError"
data-ng-show="sections.shipping.error.hasErrorMessages() || sections.shipping.error.hasInfoMessages()">
</div>
<div class="summary" data-ng-show="sections.shipping.edit==false && sections.shipping.pristine==false">
<!--<h3>{{tdc_addressText}}</h3>-->
<div data-ng-show="config.checkout.shippingAddressFormat != 'PostalCodeStateCity'">
<!--<li class="shippingAddressName">{{order.selectedAddress.shippingAddressName}}</li>-->
<span class="shippingAddress1 truncate">
{{getAddressSummary(order.selectedAddress)}}
</span>
<span class="shipFrom form-inline"
data-ng-show="user.isDistributor() && config.checkout.showShipFrom">
<label>{{tdc.shipFromText}}</label>
<input type="text" data-ng-model="order.distributorName">
</span>
</div>
<div data-ng-show="config.checkout.shippingAddressFormat == 'PostalCodeStateCity'">
<span>
{{order.selectedAddress.shippingAddressName}}
{{order.selectedAddress.shippingPostalCode}}
{{order.selectedAddress.shippingState | stateName}}{{order.selectedAddress.shippingCity}}{{order.selectedAddress.shippingCounty}}{{order.selectedAddress.shippingAddress1}}
</span>
<span class="shipFrom form-inline"
data-ng-show="user.isDistributor() && config.checkout.showShipFrom">
<label>{{tdc.shipFromText}}</label>
<input type="text" data-ng-model="order.distributorName">
</span>
</div>
</div>
<div data-ng-click="shippingAccordionClicked()" class="edit-action-mobile"
data-ng-class="{'iw' : runConfig.language==='iw'}"
data-ng-show="!sections.shipping.pristine && sections.shipping.edit==false && sections.shipping.editing==false && sections.shipping.selecting==false && sections.shipping.adding==false">
{{commonStrings.cardEditText}}</div>
</header>
<section class="data-shippingSection" data-ng-class="{mobile: sections.shipping.selecting}"
data-ng-show="editMode || sections.shipping.edit" id="checkout-edit-shipping">
<div id="qasWidget"></div> <!-- QAS dynamically loaded here -->
<div id="qasWrapper">
<!-- Anything inside qasWrapper gets hidden when qas appears. -->
<modal-dialog show="deleteShippingDialogId" hidex="true">
<div>
<div class="modal-paragraph-center">{{tdc.deleteThisAddress}}</div>
<div class="flex-buttons mobile-wide">
<ns-button class="btn-spaced" id="cancelDeleteShippingButton"
theme="{{nsCancelButtonTheme}}" data-ng-click="setDeleteShippingDialogId(null)"
fluid size="{{nsButtonSize}}">
{{tdc.cancelText}}
</ns-button>
<ns-button id="deleteShippingButton" theme="primary-hit" fluid size="{{nsButtonSize}}"
data-ng-click="deleteShippingAddress(deleteShippingDialogId)">
{{tdc.delete}}
</ns-button>
</div>
</div>
</modal-dialog>
<fieldset id="shippingAddresses"
data-ng-hide="(sections.shipping.adding || sections.shipping.editing)">
<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" data-ng-hide="isGuestCheckout || shippingAddresses.length === 1">
<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-show="address.shippingCounty">{{address.shippingCounty}}</li>
<li data-ng-hide="address.addressType=='7-11'">{{address.shippingCity}},
<span data-ng-bind-html="address.shippingState | stateName"></span> <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="action-link" 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>
</ul>
<ul data-ng-show="config.checkout.shippingAddressFormat == 'PostalCodeStateCity'">
<li>{{address.shippingAddressName}}</li>
<li>{{address.shippingPostalCode}} <span
data-ng-bind-html="address.shippingState | stateName"></span></li>
<li>{{address.shippingCity}}</li>
<li>{{address.shippingCounty}}</li>
<li>{{address.shippingAddress1}}</li>
<li>{{address.shippingPhone}}</li>
<li class="shippingEmail" data-ng-show="address.shippingEmail">
{{address.shippingEmail}}
</li>
<li class="shippingInstructions" data-ng-show="address.shippingInstructions">
{{address.shippingInstructions}}
</li>
<li>
<a aria-label="{{tdc.editText}} {{address.shippingAddressName}} {{address.shippingAddress1}}"
class="action-link" href=""
data-ng-click="isBusy || setupShippingAddress(address)">{{tdc.editText}}</a>
</li>
</ul>
</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>
<ns-button theme="secondary" size="{{nsButtonSize}}"
data-ng-hide="(!editMode && sections.shipping.adding) || isGuestCheckout"
data-ng-click="setupNewShippingAddress(isShippingChanging)"
data-ng-disabled="isShippingChanging">
{{tdc.addANewAddress}}
</ns-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 && !config.checkout.enablePolymerForms">
<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>
<div ng-if="config.checkout.enablePolymerForms">
<ns-shipping-address id="editShippingForm" ns-bind-polymer country="{{runConfig.country}}"
language="{{runConfig.language}}"
shipping-address-name="{{sections.shipping.editAddress.shippingAddressName}}"
shipping-address1="{{sections.shipping.editAddress.shippingAddress1}}"
shipping-address2="{{sections.shipping.editAddress.shippingAddress2}}"
shipping-city="{{sections.shipping.editAddress.shippingCity}}"
shipping-county="{{sections.shipping.editAddress.shippingCounty}}"
shipping-state="{{sections.shipping.editAddress.shippingState}}"
shipping-country="{{sections.shipping.editAddress.shippingCountry}}"
shipping-postal-code="{{sections.shipping.editAddress.shippingPostalCode}}"
shipping-phone="{{sections.shipping.editAddress.shippingPhone}}"
shipping-email="{{sections.shipping.editAddress.shippingEmail}}"
shipping-instructions="{{sections.shipping.editAddress.shippingInstructions}}"
valid="{{sections.shipping.editAddress.valid}}"
show-save-checkbox="{{isGuestCheckout}}">
</ns-shipping-address>
</div>
<ns-button theme="primary-hit" size="{{nsButtonSize}}"
data-ng-class="{disabled: isBusy || !isEditShippingFormChanged(), processing: isChosenElementBusy('editShippingButton'), valid: isChosenElementValid('editShippingButton')}"
data-ng-disabled="isBusy || !isEditShippingFormChanged()"
data-ng-click="saveShippingAddress(isBusy || !isEditShippingFormChanged(), 'editShippingButton')">
{{tdc.saveChangesText}}
</ns-button>
<ns-button theme="primary-inverse" size="{{nsButtonSize}}"
data-ng-click="cancelSaveShippingAddress()">
{{tdc.cancelText}}
</ns-button>
</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 && !config.checkout.enablePolymerForms">
<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>
<div ng-if="config.checkout.enablePolymerForms">
<ns-shipping-address id="addShippingForm" ns-bind-polymer
country="{{sections.shipping.newAddress.shippingCountry}}"
language="{{runConfig.language}}"
shipping-address-name="{{sections.shipping.newAddress.shippingAddressName}}"
shipping-address1="{{sections.shipping.newAddress.shippingAddress1}}"
shipping-address2="{{sections.shipping.newAddress.shippingAddress2}}"
shipping-city="{{sections.shipping.newAddress.shippingCity}}"
shipping-county="{{sections.shipping.newAddress.shippingCounty}}"
shipping-state="{{sections.shipping.newAddress.shippingState}}"
shipping-country="{{sections.shipping.newAddress.shippingCountry}}"
shipping-postal-code="{{sections.shipping.newAddress.shippingPostalCode}}"
shipping-phone="{{sections.shipping.newAddress.shippingPhone}}"
shipping-email="{{sections.shipping.newAddress.shippingEmail}}"
shipping-instructions="{{sections.shipping.newAddress.shippingInstructions}}"
valid="{{sections.shipping.newAddress.valid}}" show-save-checkbox="{{isGuestCheckout}}">
</ns-shipping-address>
</div>
<ns-button theme="primary-hit" size="{{nsButtonSize}}"
data-ng-disabled="isBusy || !isAddShippingFormChanged()"
data-ng-click="addShippingAddress(isBusy || !isAddShippingFormChanged(), 'add','addShippingButton')">
{{tdc.saveChangesText}}
</ns-button>
<ns-button theme="primary-inverse" size="{{nsButtonSize}}"
data-ng-click="cancelAddShippingAddress()" data-ng-show="!hideCancelChangeShipping">
{{tdc.cancelText}}
</ns-button>
</div>
<!-- end new address -->
</div>
</section>
<footer data-ng-show="(sections.shipping.edit || 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>-->
<ns-button id="shippingContinueButton" size="{{nsButtonSize}}"
aria-label="{{tdc.shippingInformation}} {{tdc.continueText}}" theme="primary-hit"
data-ng-hide="isBusy || sections.shipping.adding || sections.shipping.editing || sections.shipping.selecting"
data-ng-click="shippingAccordionClicked()"
data-ng-disabled="isBusy || sections.shipping.adding || sections.shipping.error.hasErrorMessages()">
{{tdc.continueText}}
</ns-button>
</div>
</footer>
</article>
</div>
<!-- Shipping Method Section -->
<div class="checkout-section">
<article id="checkout-shipping-method" class="checkoutSection"
data-ng-class="{active: sections.shipmethod.edit==true || shouldSelectPickupPoint()}">
<div class="completed" data-ng-class="{'iw': runConfig.language==='iw'}