@nuskin/ns-checkout
Version:
Ecomm3 Checkout module
623 lines (608 loc) • 176 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" data-ng-class="{'no-side-bar': !config.checkout.usecheckoutSideBar}">
<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' && config.checkout.usecheckoutSideBar, 'padding-none': !config.checkout.usecheckoutSideBar}">
<!-- First Address Section - Displays if the user doesn't have an address for the given market -->
<article id="firstAddressSection" class="checkoutSection checkout-section"
data-ng-class="{active: sections.pre.edit==true}" data-ng-show="sections.pre.edit || editMode">
<header>
<h1>
<span class="title">{{tdc.shippingAddress}}</span>
</h1>
</header>
<section>
<div id="preQasWidget"></div>
<div id="preQasWrapper">
<div class="newAddress">
<div ng-if="config.checkout.enableSEAShoppe">
<label for="seaShipCountryPre">
<b>{{tdc.countryLabel}}</b>
</label>
<select id="seaShipCountryPre" 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.preShippingForm" class="css-form" novalidate tabindex="23">
<div data-ns-include="sections.pre.shippingFormUrl"></div>
<!-- For the Create Account checkbox to be visible the order must not be ADR based and
we must be in a guest checkout. ADR guest checkout orders will create an account creation
when the continue button is clicked (form submitted). -->
<div class="section" data-ng-if="(isPitchCart || isStorefrontCart) && !hideGovtIdfield">
<fieldset>
<label for="govtID" class="nuskinRequiredBefore">
{{tdc.governmentIDLabel}}
</label>
<!-- This field is always required when the market turns this on -->
<input id="govtIDField" name="govtID" size="35"
data-ng-model="sections.shipping.newAddress.govtID"
ng-blur="forms.preShippingForm.govtID.$dirty = true" required type="text">
<ul class="error-list">
<li
data-ng-show="(forms.preShippingForm.govtID.$dirty || forms.preShippingForm.showValidationError) && forms.preShippingForm.govtID.$error.required">
<label for="userPassword"
class="orderSummaryError">{{tdc.requiredFieldLabel}}</label>
</li>
</ul>
</fieldset>
</div>
<div class="singleCheckbox section"
data-ng-show="enableCreateAccount && !orderHasAdr && isGuestCheckout">
<fieldset>
<input id="createAccountCheckbox" type="checkbox" class="ns-checkbox btn-outline" data-ng-model="createAccount" data-ng-click="toggleCreateAccount(createAccount)" />
<label for="createAccountCheckbox" id="createAccountToggle">
<iron-icon icon="nuskin:icon-checkmark"></iron-icon>
{{tdc.createAccountLabel}}
</label>
</fieldset>
</div>
<div class="section" id="userPassword" data-ng-show="createAccount">
<fieldset>
<label for="userPassword" id="userPasswordLabel" class="nuskinRequiredBefore">
{{tdc.passwordLabel}}
</label>
<input id="userPasswordField" name="userPassword" aria-label="Password"
type="password" maxlength="25" size="35"
data-ng-model="sections.shipping.newAddress.userPassword"
ng-required="createAccount"
ng-blur="forms.preShippingForm.userPassword.$dirty = true">
<ul class="error-list">
<li
data-ng-show="(forms.preShippingForm.userPassword.$dirty || forms.preShippingForm.showValidationError) && forms.preShippingForm.userPassword.$error.required">
<label for="userPassword"
class="orderSummaryError">{{tdc.requiredFieldLabel}}</label>
</li>
<li data-ng-show="accountCreationStates.isInvalidPassword">
<label for="userPassword"
class="orderSummaryError">{{tdc.passwordCriteriaLabel}}</label>
</li>
</ul>
</fieldset>
</div>
<div class="section" id="confirmationUserPassword" data-ng-show="createAccount">
<fieldset>
<label for="confirmationUserPassword" id="confirmationUserPasswordLbl"
class="nuskinRequiredBefore">
{{tdc.confirmationUserPasswordLbl}}
</label>
<input id="confirmationUserPasswordField" name="confirmationUserPassword"
aria-label="Confirmation Password" type="password" maxlength="25" size="35"
data-ng-model="sections.shipping.newAddress.confirmationUserPassword"
ng-required="createAccount"
ng-blur="forms.preShippingForm.confirmationUserPassword.$dirty = true">
<ul class="error-list">
<li
data-ng-show="(forms.preShippingForm.confirmationUserPassword.$dirty || forms.preShippingForm.showValidationError) && forms.preShippingForm.confirmationUserPassword.$error.required">
<label for="confirmationUserPassword"
class="orderSummaryError">{{tdc.requiredFieldLabel}}</label>
</li>
<li data-ng-show="accountCreationStates.passwordsDontMatch">
<label for="confirmationUserPassword"
class="orderSummaryError">{{tdc.passwordsDontMatchLbl}}</label>
</li>
</ul>
</fieldset>
</div>
<div class="singleCheckbox section" data-ng-show="createAccount">
<fieldset>
<input id="createAccountTermsConditionsCheckbox" type="checkbox" class="ns-checkbox btn-outline"
data-ng-model="accountCreationStates.createAccountTermsConditionsChecked"
data-ng-click="toggleCreateAccountTermsConditionsChecked()" />
<label for="createAccountTermsConditionsCheckbox" id="createAccountTermsConditionsCheckboxLbl">
<iron-icon icon="nuskin:icon-checkmark"></iron-icon>
<span class="rich-text-span"
data-ng-bind-html="tdc.createAccountTermsConditionsPrivayPolicy | sanitize"></span>
</label>
<ul class="error-list">
<li
data-ng-show="forms.preShippingForm.showValidationError && !accountCreationStates.createAccountTermsConditionsChecked">
<label for="confirmationUserPassword"
class="orderSummaryError">{{tdc.requiredFieldLabel}}</label>
</li>
</ul>
</fieldset>
</div>
<div class="singleCheckbox section" data-ng-show="createAccount">
<fieldset>
<input id="futureContactCheckbox" type="checkbox" class="ns-checkbox btn-outline"
data-ng-model="accountCreationStates.futureContactChecked" data-ng-click="toggleFutureContactChecked()" />
<label for="futureContactCheckbox" id="futureContactLbl">
<iron-icon icon="nuskin:icon-checkmark"></iron-icon>
{{tdc.futureContactCheckboxLbl}}
</label>
<br>
<br>
<span data-ng-show="createAccount && accountCreationStates.futureContactChecked">
<label id="howToContactLbl">{{tdc.howToContactLbl}}</label>
<input id="contactByEmailCheckbox" type="checkbox" class="ns-checkbox btn-outline"
data-ng-model="accountCreationStates.contactByEmailChecked" data-ng-click="toggleContactByEmailChecked()" />
<label style="padding-right: 1rem" for="contactByEmailCheckbox"
id="contactByEmailCheckboxLbl">
<iron-icon icon="nuskin:icon-checkmark"></iron-icon>
{{tdc.contactByEmailCheckboxLbl}}
</label>
<input id="contactBySMSCheckbox" type="checkbox" class="ns-checkbox btn-outline"
data-ng-model="accountCreationStates.contactBySMSChecked" data-ng-click="toggleContactBySMSChecked()" />
<label for="contactBySMSCheckbox" id="contactBySMSCheckboxLbl">
<iron-icon icon="nuskin:icon-checkmark"></iron-icon>
{{tdc.contactBySMSCheckboxLbl}}
</label>
</span>
</fieldset>
</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('pre')"></div>
</form>
<form name="forms.addShippingPostForm"
data-ng-show="sections.shipping.newAddress.delivery == 'Post'">
<div data-ns-include="getDeliveryShippingFormUrl('pre')"></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.preShippingBNForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'BN'">
<div data-ns-include="getSeaShoppeShippingFormUrl('pre','BN')"></div>
</form>
<form name="forms.preShippingIDForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'ID'">
<div data-ns-include="getSeaShoppeShippingFormUrl('pre','ID')"></div>
</form>
<form name="forms.preShippingMYForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'MY'">
<div data-ns-include="getSeaShoppeShippingFormUrl('pre','MY')"></div>
</form>
<form name="forms.preShippingPHForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'PH'">
<div data-ns-include="getSeaShoppeShippingFormUrl('pre','PH')"></div>
</form>
<form name="forms.preShippingSGForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'SG'">
<div data-ns-include="getSeaShoppeShippingFormUrl('pre','SG')"></div>
</form>
<form name="forms.preShippingTHForm"
data-ng-show="sections.shipping.newAddress.shippingCountry == 'TH'">
<div data-ns-include="getSeaShoppeShippingFormUrl('pre','TH')"></div>
</form>
</div>
<div ng-if="config.checkout.enablePolymerForms">
<ns-form id="preShippingFormWithCreate">
<ns-shipping-address id="preShippingForm" 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}}">
</ns-shipping-address>
<!-- For the Create Account checkbox to be visible the order must not be ADR based and
we must be in a guest checkout. ADR guest checkout orders will create an account creation
when the continue button is clicked (form submitted). -->
<div class="section" data-ng-if="isGuestCheckout && !hideGovtIdfield">
<ns-form id="createAccountForm">
<ns-input ns-bind-polymer id="govtIDField" name="govtID"
placeholder="{{cityPlaceholder}}" max-length="35"
label="{{tdc.governmentIDLabel}}" regex-validation="{{cityPattern}}"
language="{{language}}" country="{{country}}"
required-message="{{tdc.requiredFieldLabel}}" required
value="{{sections.shipping.newAddress.govtID}}">
</ns-input>
</ns-form>
</div>
</ns-form>
</div>
</div>
</div>
</section>
<footer>
<div class="actions">
<ns-button analytics-id="shippingComplete" theme="primary" size="{{nsButtonSize}}"
class="btn btn-primary continue simulateRequest"
data-ng-click="addShippingAddressOrderSummary('pre','shippingButton', isBusy || sections.pre.error.hasErrorMessages())"
data-ng-disabled="isBusy || sections.pre.error.hasErrorMessages()">
{{tdc.continueText}}
</ns-button>
</div>
</footer>
</article>
<!-- Order Details Section -->
<div class="checkout-section" data-ng-show="showPointsPaymentOptions || !config.checkout.usecheckoutSideBar">
<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)) && !sections.pre.edit">
<!-- 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>
<section data-ng-show="(editMode || sections.cart.keepOpen==true || sections.cart.edit) && !sections.pre.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"
data-ng-show="!section.pre.edit">
<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">
<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-if="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">
<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-if="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-if="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="number" min="1" maxlength="2"
data-ng-model-options="{updateOn: 'blur'}"
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" 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">
<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>
<iron-icon icon="nuskin:icon-chevron-down"
data-ng-class="{'section-edit-hebrew' : runConfig.language==='iw', 'section-edit' : runConfig.language!=='iw', 'rotate' : sections.shipping.edit, 'unrotate' : !sections.shipping.edit}"
data-ng-show="enableChangeShippingAddress">
</iron-icon>
<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">{{tdc.changeText}}</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">
{{tdc.changeText}}</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" 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.editTex