UNPKG

@nuskin/ns-checkout

Version:

Ecomm3 Checkout module

167 lines (156 loc) • 10.5 kB
<div id="page-checkout"> <div id="content"> <div class="singleCheckout section"> <section id="mainContent"> <div data-ng-show="contentLoaded" class="ns-atomic"> <div class="print-confirm-logo"> <img src="/content/dam/apps/checkout/nuskin-logo-print.svg"> </div> <section id="orderConfirmation" class="ns-atomic"> <h1>{{tdc.orderConfirmationTitle}} <h2 id="orderType" ng-show="order.adrOverrideNumber != null"> <img ng-src="{{logoADRUrl}}" border="0" alt="" data-ng-show="config.adrProgram=='ADR'"> <img ng-src="{{logoAROUrl}}" border="0" alt="" data-ng-show="config.adrProgram=='ARO'"> <img ng-src="{{logoADPUrl}}" border="0" alt="" data-ng-show="config.adrProgram=='ADP'"> {{tdc.adrNumberLabel}} {{order.adrOverrideNumber}} </h2> </h1> <section id="orderNumbers" class="subSection clearfix"> <header> <h1 data-ng-show="order.orderId != null"> <span data-ng-show="order.adr && (order.adrOverrideNumber == null)" id="confirmationADRMark"> <img ng-src="{{logoADRUrl}}" border="0" alt="" style="background-size:25px 25px;" width="25px" height="25px" data-ng-show="config.adrProgram=='ADR'"> <img ng-src="{{logoAROUrl}}" border="0" alt="" style="background-size:25px 25px;" width="25px" height="25px" data-ng-show="config.adrProgram=='ARO'"> <img ng-src="{{logoADPUrl}}" border="0" alt="" style="background-size:25px 25px;" width="25px" height="25px" data-ng-show="config.adrProgram=='ADP'"> {{tdc.adrNumberLabel}} {{order.orderId}}</span> <span data-ng-show="!(order.adr && (order.adrOverrideNumber == null))">{{tdc.orderNumberLabel}} {{order.orderId}}</span> </h1> </header> </section> <section id="shippingAndPayment" class="subSection clearfix" data-ng-show="order.selectedPayment"> <div id="paymentMethod" class="shippingPanel"> <h3>{{tdc.paymentMethodLabel}}</h3> <img ng-src="/content/dam/apps/checkout/creditcards/CC-{{order.selectedPayment.paymentTypeId}}.png" alt=""> </div> </section> <section id="orderedProducts" class="subSection clearfix"> <div class="grid large-12 columns product-row" data-ng-repeat="item in order.cart.getItems({sapItems: true})"> <div class="grid small-6 columns product-details"> <div class="grid small-1 columns no-padding" data-ng-show="config.adrProgram=='ADR'"> <img data-ng-show="item.adr && !item.businessPortfolio" ng-src="{{logoADRUrl}}" class="adr-logo"> </div> <div class="grid small-1 columns no-padding" data-ng-show="config.adrProgram=='ARO'"> <img data-ng-show="item.adr && !item.businessPortfolio" ng-src="{{logoAROUrl}}" class="adr-logo"> </div> <div class="grid small-1 columns no-padding" data-ng-show="config.adrProgram=='ADP'"> <img data-ng-show="item.adr && !item.businessPortfolio" ng-src="{{logoADPUrl}}" class="adr-logo"> </div> <div class="grid small-2 columns no-padding"> <img data-ng-src="{{item.getProduct().getThumbnail()}}" alt=""> </div> <div class="grid small-9 columns product-details"> <span class="productTitle" data-ns-html-title="{{item.getProduct().title}}" data-ng-bind-html="item.getProduct().title | sanitize"></span> <span class="productSKU">{{item.getProduct().sku}}</span> <span data-ng-show="item.isAgelocme" class="agelocmeLabel">{{item.getProduct().agelocme.label}}</span> <span class="itemPrice newLine"> {{(item.getProduct().getPrice() / item.qty) | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}} </span> <span class="backOrderDate" ng-show="item.getProduct().getBackOrderDate() != null"> {{backOrdered}} {{ {date: item.getProduct().getBackOrderDate(), locale: runConfig.language + "_" + order.countryCode } | countryFormattedDate }}</span> </div> </div> <div class="grid small-6 columns totals"> <div class="grid small-3 columns">{{tdc.quantityLabel}} {{item.qty}}</div> <div class="grid small-5 columns">{{item.getProduct().getPrice() | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}</div> <div class="grid small-4 columns" data-ng-show="showPsv">{{item.getProduct().pv | decimalPlaceFilter:2}} {{psvLabel}}</div> </div> </div> <div class="order-mssg"> <div id="backdating" class="backdating" data-ng-show="config.checkout.enableBackdating && order.isBackdated()">{{tdc.backdating_backdatedText}}</div> <div id="processingDates" class="grid large-12 columns product-row" data-ng-show="order.adr && adr.processAdrText" data-ng-bind-html="adr.processAdrText | sanitize"></div> </div> </section> <section class="scan_cards subSection clearfix" data-ng-show="scanCards.length > 0"> <h2>{{tdc.scanCardsText}}</h2> <table class="responsiveTable"> <tr data-ng-repeat="scanCard in scanCards"> <td class="scan_card_number"> <h3>Scan Card Number</h3> {{scanCard.cardNumber}} </td> <td> <h3>Scan Card Username</h3> {{scanCard.cardName}} </td> </tr> </table> </section> <section id="costBreakdown" class="subSection clearfix"> <table class="reviewOrderDetails"> <tbody> <tr class="orderSubtotal"> <td>{{tdc.orderSubtotalLabel}}</td> <td>{{order.orderTotals.itemSubtotal | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}</td> </tr> <tr class="orderShippingTotal" data-ng-hide="config.checkout.hideShipping"> <td> <span data-ng-show="!config.checkout.showPickupHandling || (!order.selectedShippingMethod.pickupInfo)">{{tdc.shippingLabel}}</span> <span data-ng-show="config.checkout.showPickupHandling && (order.selectedShippingMethod.pickupInfo)">{{tdc.handlingLabel}}</span> </td> <td data-ng-show="order.orderTotals.shipping <= 0"> {{tdc.freeShipping}} </td> <td data-ng-show="order.orderTotals.shipping > 0">{{order.orderTotals.shipping | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}</td> </tr> <tr class="orderTaxTotal" data-ng-hide="order.orderTotals.tax <= 0 || config.checkout.hideTaxes"> <td>{{tdc.taxLabel}}</td> <td>{{order.orderTotals.tax | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}</td> </tr> <tr class="orderTotal"> <td>{{tdc.orderTotalLabel}}</td> <td>{{order.orderTotals.grandTotal | currencyFilter:order.currencyCode:runConfig.language + '_' + order.countryCode}}</td> </tr> <tr class="orderPSVTotal" data-ng-show="showPsv"> <td>{{psvLabel}}:</td> <td>{{order.orderTotals.psvTotal | decimalPlaceFilter:2}}</td> </tr> </tbody> </table> <div class="webSavings" data-ng-if="showWebSavings && webSavings > 0.0"> {{tdc.webSavingsText | replaceCurrencyFilter : webSavings}} </div> </section> </section> <section id="buttonBar"> <script src="https://www.google.com/cloudprint/client/cpgadget.js"></script> <script> /* var iOS = ( nuskin.util.MobileUtils.isIOS() ? true : false ), windowWidth = $(window).width(); if ( windowWidth < 787) { //Check for mobile if (iOS == false) { // If this is not an IOS device, reconfigure the button for GCP $("#print_btn").hide(); // All non IOS mobile devices except Android support printing. if (!nuskin.util.MobileUtils.isAndroid()){ var confirmationName = order.orderID || order.adrOverrideNumber; var gadget = new cloudprint.Gadget(); gadget.setPrintButton( cloudprint.Gadget.createDefaultPrintButton("googleCloudPrintContainer")); // div id to contain the button gadget.setPrintDocument("[document mimetype]", "[document title]", "[document content]", "[encoding] (optional)"); gadget.setPrintDocument("url", "Order Confirmation", document.URL); } } } */ </script> <div id="googleCloudPrintContainer"></div> <button class="btn btn-primary continue noprint phone-width-full" id="print_btn" data-ng-click="printConfirmation()">{{tdc.printSaveText}}</button> <button data-ng-click="goHome()" class="btn btn-secondary noprint phone-width-full">{{tdc.returnHomeText}}</button> </section> <div data-ng-bind-html="tdc.checkoutElements"></div> </div> </section> </div> </div> </div>