Skip to content

Instantly share code, notes, and snippets.

@achisholm

achisholm/new.html

Last active March 22, 2023 11:50
Show Gist options
  • Save achisholm/e7b0f74f271035848d851ef35b689b02 to your computer and use it in GitHub Desktop.
Save achisholm/e7b0f74f271035848d851ef35b689b02 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
new.html
<!DOCTYPE html><html lang="en"><head><meta name="version" content=""><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- Start Template PageTitle --><title>Return Request Form | TLC Electrical</title><!-- End Template PageTitle --><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous"><link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&amp;display=swap"><link rel="preload" as="font" href="https://static.tlc-direct.co.uk/fonts/iconfont.ttf?vy4b9v" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/core.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&amp;display=swap" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://js.qcode.co.uk/vendor/qtip/2.2.1/jquery.qtip.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="/assets/css/checkout.css"><link rel="stylesheet" href="/assets/css/returns-form.css"><script src="/assets/js/log-error-to-server.js"></script>
<!-- beautify ignore:start --><script>var tagManagerDataLayer = tagManagerDataLayer || [];tagManagerDataLayer.push({'isPurchase': false,'google_tag_params': {}});</script><!-- Start Template GTMCustomDataLayer --><!-- End Template GTMCustomDataLayer --><script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','tagManagerDataLayer','GTM-PNZ7C2');</script><!-- beautify ignore:end --></head><body class="plugins-loading page--checkout page-flex"><!-- Start Template Header --><header class="navbar js-sticky-navbar"><div class="site-width-wrapper navbar__container"><div class="navbar-button js-mobile-menu-button"><span class="navbar-button__icon icon icon--menu"></span></div><a class="navbar__logo" href="/" title="TLC home"></a><span class="navbar__branding"></span><nav class="secondary-menu"><a class="secondary-menu__item" href="/Information/Services/Default.htm"> <div class="secondary-menu__icon icon icon--help"></div><div class="secondary-menu__text text-bold">Customer Services</div></a><a class="secondary-menu__item" href="/contact/"><div class="secondary-menu__icon icon icon--headset"></div><div class="secondary-menu__text">Contact Us</div></a><a class="secondary-menu__item" href="/Information/branches/"> <div class="secondary-menu__icon icon icon--pin"></div><div class="secondary-menu__text">Branch Finder</div></a><a class="secondary-menu__item" href="/tcl/my-order#quick-entry"> <div class="secondary-menu__icon icon icon--cart"></div><div class="secondary-menu__text">Quick Entry </div></a><a class="secondary-menu__item" href="/Information/delivery/Delivery.htm"> <div class="secondary-menu__icon icon icon--export"></div><div class="secondary-menu__text">Delivery &amp; Stock</div></a></nav><nav class="primary-menu"><div class="primary-menu__item primary-menu__item--home"><a class="primary-menu__home-link" href="/">Home</a><div class="primary-menu__dropdown-control menu-dropdown-parent js-category-menu-control" tabindex="0"><div class="primary-menu__icon icon icon--chevron-down"></div></div><div class="menu-dropdown-container"><div class="category-menu menu-dropdown js-category-menu is-loading"><p class="navbar-mobile-menu__title">All Categories A–Z</p><div class="category-menu__grid-container js-category-menu-container"><span class="ajax-spinner ajax-spinner--dark"></span></div></div></div></div><div class="primary-menu__item primary-menu__item--offers menu-dropdown-parent" tabindex="0">Offers<div class="primary-menu__icon icon icon--chevron-down"></div><div class="menu-dropdown-container"><div class="menu-dropdown"><a class="menu-dropdown__link" href="/Main_Index/Special_Offers/">Special Offers</a><a class="menu-dropdown__link" href="/Main_Index/Whats_New/">What's New</a><a class="menu-dropdown__link" href="/Main_Index/Clearance_Home/">Clearance</a></div></div></div></nav><form class="navbar-search js-navbar-search" action="/tcl/search" method="get"><input class="navbar-search__input js-navbar-search-input" type="text" name="query" placeholder="Search 17,000 products on TLC Direct…" data-placeholder-long="Search 17,000 products on TLC Direct…" data-placeholder-short="Search" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" autosave="off"><button class="navbar-search__button-submit" type="submit" title="Search"><span class="icon icon--magnify"></span></button><div class="autosuggest js-search-autosuggest"><div class="autosuggest-result js-autosuggest-result template" data-value=""><div class="autosuggest-result__image js-autosuggest-result-image"><img src="data:," alt=""></div><div class="autosuggest-result__text"><div class="autosuggest-result__title js-autosuggest-result-title"></div><div class="autosuggest-result__description js-autosuggest-result-description"></div></div><div class="autosuggest-result__aside js-autosuggest-result-aside"><div class="autosuggest-result__aside-image js-autosuggest-result-aside-image"><img src="data:," alt=""></div></div></div><div class="autosuggest__results js-search-autosuggest-results"></div></div></form><div class="navbar-account-menu menu-dropdown-parent js-navbar-account is-loading"><div class="navbar-account-menu__content navbar-account-menu__content--guest"><div class="navbar-account-menu__icon"><div class="icon icon--user-circle"></div></div><div class="navbar-account-menu__text"><div class="navbar-account-menu__text-line-1">Hello,&nbsp;<a class="js-navbar-sign-in-link" href="/tcl/user/sign-in">Sign In</a></div><div class="navbar-account-menu__text-line-2">or&nbsp;<a class="js-navbar-register-link" href="/tcl/user/register">Register</a></div></div></div><div class="navbar-account-menu__content navbar-account-menu__content--signed-in"><div class="navbar-account-menu__icon"><div class="icon icon--user-circle"></div></div><div class="navbar-account-menu__text"><div class="navbar-account-menu__text-line-1">Hello&nbsp;<span class="text-semibold navbar-account-menu__name js-navbar-account-name"></span></div><div class="navbar-account-menu__text-line-2 text-bold">My Account</div></div><div class="navbar-account-menu__icon"><div class="icon icon--chevron-down"></div></div><div class="menu-dropdown-container"><div class="menu-dropdown"><div class="my-account-menu"><div class="my-account-menu__column"><a class="menu-dropdown__link text-bold" href="/tcl/my-account">My Account</a><a class="menu-dropdown__link" href="/tcl/personal-details">Personal Details</a><a class="menu-dropdown__link" href="/tcl/address-book">Address Book</a><a class="menu-dropdown__link" href="/tcl/card-details">Card Details</a><a class="menu-dropdown__link" href="/tcl/vat-preference">VAT Preference</a><a class="menu-dropdown__link" href="/tcl/update-password">Update Password</a><div class="my-account-menu__column-footer"><form class="form-action-link js-navbar-sign-out-form" action="/tcl/user/sign-out" method="POST"><input class="form-action-link__input menu-dropdown__link p-b-0" type="submit" value="Sign Out"><input type="hidden" name="next_url" value="/"></form></div></div><div class="my-account-menu__column"><a class="menu-dropdown__link text-bold" href="/tcl/my-orders">My Orders</a><a class="menu-dropdown__link js-navbar-account-in-progress-orders is-hidden" href="/tcl/my-orders#in-progress">In-Progress<div class="badge"></div></a><a class="menu-dropdown__link" href="/tcl/my-orders#order-history">Order History</a><a class="menu-dropdown__link js-navbar-account-open-orders" href="/tcl/open-orders">Open Orders<div class="badge badge--inverted"></div></a><div class="my-account-menu__column-footer"><a class="menu-dropdown__link" href="/tcl/previous-purchases">Previous Purchases</a><a class="menu-dropdown__link" href="/tcl/return-requests/new">Start a Return</a></div></div></div></div></div></div></div><a class="navbar-basket js-navbar-basket is-loading" href="/tcl/my-order"><div class="navbar-basket__icon icon icon--cart"><div class="navbar-basket__count js-navbar-basket-count"><span class="ajax-spinner"></span></div></div><div class="navbar-basket__total js-navbar-basket-total"><span class="ajax-spinner"></span></div></a><div class="navbar-mobile-menu js-mobile-menu is-hidden"><div class="navbar-mobile-menu__header"><span class="navbar-mobile-menu__header-user-icon icon icon--user-circle"></span><span class="js-mobile-menu-welcome">Hello. <a href="/tcl/user/sign-in">Sign in</a> or <a href="/tcl/user/register">Register</a>.</span><span class="navbar-mobile-menu__header-close-icon icon icon--cross-2 js-mobile-menu-close-control"></span></div><div class="navbar-mobile-menu__body"><div class="navbar-mobile-menu__sub-menu js-mobile-sub-menu" data-menu-id="home"><div class="navbar-mobile-menu__signed-in-controls js-mobile-menu-signed-in-controls is-hidden"><p class="navbar-mobile-menu__title">My Account</p><span class="navbar-mobile-menu__item navbar-mobile-menu__item--children js-mobile-menu-item" data-show-menu="my-account">My Account</span><a class="navbar-mobile-menu__item" href="/tcl/my-orders">My Orders</a><a class="navbar-mobile-menu__item" href="/tcl/previous-purchases">Previous Purchases</a><div class="navbar-mobile-menu__divider"></div></div><p class="navbar-mobile-menu__title">Shop</p><a class="navbar-mobile-menu__item" href="/">Home</a><div class="navbar-mobile-menu__item navbar-mobile-menu__item--children js-mobile-menu-item" data-show-menu="all-categories">A&ndash;Z</div><a class="navbar-mobile-menu__item" href="/Main_Index/Special_Offers/">Special Offers</a><a class="navbar-mobile-menu__item" href="/Main_Index/Whats_New/">What's New</a><a class="navbar-mobile-menu__item" href="/Main_Index/Clearance_Home/">Clearance</a><div class="navbar-mobile-menu__divider"></div><p class="navbar-mobile-menu__title">Help and Support</p><a class="navbar-mobile-menu__item" href="/Information/branches/">Branch Finder</a><a class="navbar-mobile-menu__item" href="/Information/Services/">Customer Services</a><a class="navbar-mobile-menu__item" href="/Information/delivery/Delivery.htm">Delivery Information</a><a class="navbar-mobile-menu__item" href="/contact/">Contact Us</a></div><div class="navbar-mobile-menu__sub-menu js-mobile-sub-menu" data-menu-id="my-account"><div class="navbar-mobile-menu__back-button navbar-mobile-menu__item navbar-mobile-menu__item--back js-mobile-menu-item" data-show-menu="home"><span class="navbar-mobile-menu__back-icon icon icon--chevron-left"></span>
Go back</div><div class="navbar-mobile-menu__divider"></div><p class="navbar-mobile-menu__title">My Account</p><a class="navbar-mobile-menu__item" href="/tcl/personal-details">Personal Details</a><a class="navbar-mobile-menu__item" href="/tcl/update-password">Update Password</a><a class="navbar-mobile-menu__item" href="/tcl/card-details">Card Details</a><a class="navbar-mobile-menu__item" href="/tcl/address-book">Address Book</a><a class="navbar-mobile-menu__item" href="/tcl/my-orders">My Orders</a><a class="navbar-mobile-menu__item" href="/tcl/previous-purchases">Previous Purchases</a><a class="navbar-mobile-menu__item" href="/tcl/vat-preference">VAT Preference</a><a class="navbar-mobile-menu__item" href="/tcl/return-requests/new">Start a Return</a><div class="navbar-mobile-menu__divider"></div><a class="navbar-mobile-menu__item" href="/tcl/my-account">My Account Overview</a><span class="js-mobile-menu-sign-out"></span></div><div class="navbar-mobile-menu__sub-menu navbar-mobile-menu__sub-menu--categories js-mobile-sub-menu" data-menu-id="all-categories"><div class="navbar-mobile-menu__back-button navbar-mobile-menu__item navbar-mobile-menu__item--back js-mobile-menu-item" data-show-menu="home"><span class="navbar-mobile-menu__back-icon icon icon--chevron-left"></span>
Go back</div><div class="navbar-mobile-menu__divider"></div><div class="js-mobile-menu-categories is-loading"><p class="navbar-mobile-menu__title">All Categories A–Z</p><div class="category-menu__grid-container js-category-menu-container"><span class="ajax-spinner ajax-spinner--dark"></span></div></div></div></div></div></div></header><!-- End Template Header --><header class="header-listings"><div class="site-width-wrapper"><!-- Start Template Breadcrumbs --><nav class="breadcrumbs"><ul class="breadcrumbs__list"><li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">Customer Services</a></li><li class="breadcrumbs__item"><h1>Return Request Form</h1></li></ul></nav><!-- End Template Breadcrumbs --></div></header><section class="checkout checkout--medium section returns-form-wrapper"><h2 class="section__title">Return Request Form <small>for orders placed online</small></h2><p class="checkout__text">Return or replace faulty, damaged, incorrect or unwanted items you’ve ordered online using this form and we will aim to respond to your request as quickly as possible. Continue as a guest, or <a href="/Templates/checkout/log-in.html">sign&nbsp;in</a>.</p><form id="orderProducts" method="GET" action="/tcl/return-requests/order-products" novalidate="novalidate"><div class="fieldset"><div class="field field--quarter field--order-number"><div class="field__wrapper"><label class="field__label" for="order_number">Order Number</label><input class="field__input" id="order_number" name="order_number" placeholder="Order Number" type="text" value=""><div class="field__message field__message--tooltip"><span class="tooltip-icon"></span><div class="tooltip-bubble"><p class="checkout__text">This is a 7&ndash;8 digit number which can be found in your order confirmation email.</p></div></div><div class="field__message"><div class="loaded-indicator"></div></div></div></div><div class="field field--half"><div class="field__wrapper"><label class="field__label" for="email">Email Address</label><input class="field__input" id="email" name="email" placeholder="Email Address" type="text" autocomplete="on"></div></div><div class="field field--button field--quarter field--button-continue"><div class="field__wrapper"><button class="field__button" type="submit">Continue</button></div></div></div></form><form class="returns-form js-returns-form" id="returnRequest" action="/tcl/return-requests" method="POST" novalidate="novalidate"><div class="returns-form__product-selector"><h2 class="checkout__title">Order Items</h2><div class="product-selector js-product-selector"></div><div class="checkout-footer m-b-0 js-returns-form-submit is-hidden"><div class="checkout-footer__forward-link"><button class="button button--medium button--rounded button--positive">Submit <span class="icon icon--arrow-right pull-right"></span></button></div></div></div><div class="returns-form__customer-service-message"><div class="secondary-message-panel"><p>Wanting to return items purchased from a TLC&nbsp;trade&nbsp;counter?</p><p class="m-b-0">Please&nbsp;see our guide on <a href="/Information/Services/returns/#local-branch-van-delivery-returns">Local&nbsp;Branch&nbsp;Returns</a>.</p></div><div class="order-contact-footer"><h2 class="order-contact-footer__title">Other ways you can contact&nbsp;TLC</h2><h3 class="order-contact-footer__sub-title">Any questions? We&apos;re always happy to&nbsp;help!</h3><div class="order-contact-footer__details"><div class="order-contact-footer__phone"><span class="icon icon--headset"></span> 01293 565 630<p class="order-contact-footer__small-text"> Monday&mdash;Friday, 8am&mdash;5:30pm<br>
Saturday, 9am&mdash;12:30pm</p></div><div class="order-contact-footer__email"><span class="icon icon--email"></span><a href="mailto:[email protected]">[email protected]</a></div></div></div></div></form></section><template id="templateProduct"><div class="return-product js-product"><label class="return-product__label js-product-label"><span class="return-product__checkbox"><input class="js-product-checkbox" type="checkbox" value="true"></span><span class="return-product__image"><img class="js-product-image" src="#" alt=""></span><span class="return-product__text"><span class="return-product__code js-product-code"></span><span class="return-product__description js-product-description"></span></span><span class="return-product__select-button button button--small button--inline button--rounded">Select</span></label><div class="js-product-fieldset" data-visible="false"><div class="return-product__fields fieldset"><div class="field field--select field--five-twelfths js-field-reason"><div class="field__wrapper"><label class="field__label">Reason For Return</label><div class="field__input-wrapper"><select class="field__input"><option value="">Select&mldr;</option><option value="DEFECTIVE">Item is defective</option><option value="DAMAGED">Item arrived damaged</option><option value="INCORRECT">Incorrect item supplied</option><option value="UNWANTED">Unwanted item</option></select></div></div></div><div class="field field--select field--five-twelfths js-field-action"><div class="field__wrapper"><label class="field__label">Action Required</label><div class="field__input-wrapper"><select class="field__input"><option value="">Select&mldr;</option><option value="REFUND">Refund</option><option value="REPLACE">Replacement</option></select></div></div></div><div class="field field--sixth field--quantity-spinner return-product__field-quantity js-field-quantity"><div class="field__wrapper"><label class="field__label">Quantity</label><div class="field__input-wrapper"><span class="field__spinner-button field__spinner-button--down">&minus;</span><input class="field__input" type="tel"><span class="field__spinner-button field__spinner-button--up">+</span></div></div></div><div class="field js-field-notes"><div class="field__wrapper"><label class="field__label">Additional Notes</label><input class="field__input" data-default-placeholder-content="Additional notes or details (optional)" data-defective-placeholder-content="Please describe the fault" data-incorrect-placeholder-content="Please describe what item was received" data-default-label-content="Additional Notes" data-defective-label-content="Fault Description" data-incorrect-label-content="What item was received?" type="text" placeholder="Additional notes or details (optional)" maxlength="255"></div></div></div><div class="img-uploader js-img-uploader" data-visible="false"><h3 class="img-uploader__title">Photo Required</h3><p class="img-uploader__intro">Please provide photos of the damage / incorrect item&nbsp;supplied:</p><div class="img-uploader__dropzone js-img-uploader-dropzone dropzone upload-button"><svg class="img-uploader__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 20"><style>circle, path, polygon { fill: #6f6e91;}</style><circle cx="11.65" cy="11.48" r="3.97"></circle><path d="m20.74,10.72v6.78c0,.49-.4.9-.9.9H3.46c-.49,0-.9-.4-.9-.9V5.46c0-.49.4-.9.9-.9h9.54V1.16s-3.44,0-3.44,0l-1.66,1.4H3.46c-1.6,0-2.9,1.3-2.9,2.9v12.05c0,1.6,1.3,2.9,2.9,2.9h16.38c1.6,0,2.9-1.3,2.9-2.9v-6.78h-2Z"></path><polygon points="24.09 3.39 21.16 3.39 21.16 .46 19.11 .46 19.11 3.39 16.18 3.39 16.18 5.44 19.11 5.44 19.11 8.37 21.16 8.37 21.16 5.44 24.09 5.44 24.09 3.39"></polygon></svg><p class="img-uploader__description"><span class="img-uploader__text-link">Take / select a photo</span><span class="desktop-only">, <span class="text-nowrap">or drag and drop files</span></span></p><div class="img-uploader__dropzone-files js-img-uploader-files"></div></div></div><input class="js-file-ids" type="hidden"><input class="js-field-product-code" type="hidden"></div></div></template><!-- Start Template Footer --><footer class="page-footer"><div class="site-width-wrapper"><a class="page-footer__panel" href="/Information/branches/"><div class="page-footer__panel-icon"><span class="icon icon--pin"></span></div><p class="page-footer__panel-text">Branch Finder</p></a><a class="page-footer__panel" href="/tcl/quote-requests/new"><div class="page-footer__panel-icon"><span class="icon icon--calculator"></span></div><p class="page-footer__panel-text">Request a Quote</p></a><a class="page-footer__panel" href="/Technical/"><div class="page-footer__panel-icon"><span class="icon icon--info"></span></div><p class="page-footer__panel-text">Technical Section</p></a><a class="page-footer__panel" href="https://eepurl.com/Y1OJ5"><div class="page-footer__panel-icon"><span class="icon icon--email"></span></div><p class="page-footer__panel-text">TLC Newsletter</p></a><a class="page-footer__panel" href="https://uk.trustpilot.com/review/www.tlc-direct.co.uk"><img class="trustpilot-logo" src="/Graphics/trustpilot-logo-v2.svg" alt="Rated Excellent on TrustPilot" width="300" height="52"></a><div class="page-footer__panel"><a class="icon-social" title="Visit us on Facebook" href="https://www.facebook.com/pages/TLC-Direct/119470704850448"><span class="icon icon--facebook"></span></a><a class="icon-social" title="Follow us on Twitter" href="https://twitter.com/tlcdirect1"><span class="icon icon--twitter"></span></a><a class="icon-social" title="Pin us on Pinterest" href="https://www.pinterest.com/tlcdirect/"><span class="icon icon--pinterest"></span></a><a class="icon-social" title="Join us on Instagram" href="https://www.instagram.com/tlc_direct"><span class="icon icon--instagram"></span></a></div></div></footer><!-- End Template Footer --><!-- Category menu item template--><a class="template category-menu-item js-template-category-menu-item" href=""><div class="category-menu-item__image"><img class="js-category-menu-item-img" src="#" alt="" loading="lazy"></div><div class="category-menu-item__title js-category-menu-item-title"></div></a><script src="https://js.qcode.co.uk/vendor/jquery/3.5.1/jquery.min.js"></script><script src="https://js.qcode.co.uk/vendor/jquery-migrate/3.3.0/jquery-migrate.min.js"></script><script src="https://static.tlc-direct.co.uk/js/jquery-ui-1.13.2-custom.min.js"></script><script src="https://js.qcode.co.uk/vendor/jquery-validation/1.13.1/jquery.validate.min.js"></script><script src="https://js.qcode.co.uk/vendor/qtip/2.2.1/jquery.qtip.min.js"></script><script src="https://js.qcode.co.uk/vendor/js-cookie/1.5.1/js-cookie.min.js"></script><script src="/assets/js/qcode-ui-4.31.0-custom.js"></script><script src="/assets/js/core.js"></script><script src="/assets/js/return-requests.js"></script><script>// Trigger pluginsReady event.
$('body').trigger('pluginsReady');</script></body></html>
Raw
return-form.css
@media print,(min-width: 800px){.returns-form-wrapper{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}}.returns-form-wrapper .message-area{-webkit-flex-basis:auto;-moz-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto}#orderProducts[data-state=loading] .field--order-number .field__message--tooltip{opacity:0}#orderProducts[data-state=loading] .field--order-number .field__message--tooltip .tooltip-icon{pointer-events:none;cursor:default}#orderProducts[data-state=loaded] .field--order-number .field__message--tooltip{opacity:0}#orderProducts[data-state=loaded] .field--order-number .field__message--tooltip .tooltip-icon{pointer-events:none;cursor:default}#orderProducts[data-state=loaded] .field--order-number .loaded-indicator{opacity:1}.returns-form{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1 1 auto;-moz-box-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.returns-form__product-selector{transition:opacity .3s ease;opacity:0;height:0;overflow:hidden}.returns-form[data-state=loading] .returns-form__product-selector{opacity:0;height:auto}.returns-form[data-state=loading] .returns-form__customer-service-message{display:none}.returns-form[data-state=loaded] .returns-form__product-selector{opacity:1;height:auto}.returns-form[data-state=loaded] .returns-form__customer-service-message{display:none}.returns-form__customer-service-message{padding:10px 0;margin:auto}.field--order-number .field__message--tooltip{transition:opacity .3s ease}.field--order-number .field__message:not(.field__message--tooltip){position:static}.field--order-number .loaded-indicator{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;width:20px;height:20px;background:#5cba47;border-radius:50%;position:absolute;top:15px;right:15px;pointer-events:none;opacity:0;transition:opacity .3s ease}.field--order-number .loaded-indicator:after{content:"C";font-family:"iconfont";color:#fff;font-size:11px;position:relative;top:1px}.return-product{display:block;padding:10px;position:relative;border-width:1px;border-style:solid;border-color:#d5d5e2 rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0);transition-property:background-color,margin;transition-timing-function:ease;transition-duration:.3s;-webkit-tap-highlight-color:rgba(0,0,0,0)}.return-product:hover{background-color:#eaeaf1}.return-product:first-child{border-top-color:rgba(0,0,0,0)}.return-product.is-active{border:1px solid #d5d5e2;border-radius:5px;background-color:#f9f9fb}.return-product.is-active+.return-product{border-top-width:0}.return-product.is-active+.return-product.is-active{border-top-width:1px;margin-top:10px}.return-product.is-active .return-product__select-button{visibility:hidden;opacity:0}.return-product__label{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:1;position:relative;z-index:1}.return-product__checkbox{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;-webkit-flex:0 0 40px;-moz-box-flex:0 0 40px;-moz-flex:0 0 40px;-ms-flex:0 0 40px;flex:0 0 40px;width:40px;height:40px}@media(max-width: 799px){.return-product__checkbox{margin-left:-10px}}.return-product__image{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;-moz-align-items:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;width:30px;margin:0 10px 0 0}.return-product__image>img{width:auto;height:auto;max-width:30px;max-height:30px}.return-product__text{-webkit-flex:1 1 auto;-moz-box-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.return-product__code{display:block;color:#006;font-weight:600}.return-product__description{display:block;padding-top:3px}.return-product__select-button{-webkit-flex:0 0 auto;-moz-box-flex:0 0 auto;-moz-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}@media(max-width: 799px){.return-product__select-button{display:none}}.return-product .js-product-fieldset{padding:0 8px;overflow:hidden}.return-product .js-product-fieldset[data-visible=false]{display:none}@media print,(min-width: 800px){.return-product__fields{margin-top:-26px;padding-top:26px}}@media print,(min-width: 800px){.return-product__field-quantity{position:relative;top:-26px;margin-bottom:-26px}.return-product__field-quantity .field__label{text-align:center}}.checkout-footer.is-hidden{display:none}.secondary-message-panel{border:1px solid #d5d5e2;color:#6e6e91;margin:auto;border-radius:5px;width:100%;padding:10px 20px;text-align:center;background-color:#eaeaf1}@media print,(min-width: 1050px){.secondary-message-panel{padding:20px}}.secondary-message-panel a{color:#434356}.secondary-message-panel a:hover{color:#cc2127}.order-contact-footer{padding-top:30px}.order-contact-footer__title{text-align:center;font-weight:bold;font-size:24px;padding-bottom:3px}.order-contact-footer__sub-title{text-align:center;color:#595973;margin-bottom:25px}.order-contact-footer__details{display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;justify-content:center;font-weight:bold;font-size:20px;line-height:1.2;text-align:center}@media(min-width: 550px){.order-contact-footer__details{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;text-align:left}}.order-contact-footer__details .icon{padding-right:6px;color:#006;position:relative;top:3px}.order-contact-footer__phone{padding:0 20px 20px 20px}@media print,(min-width: 800px){.order-contact-footer__phone{padding:0 20px}}.order-contact-footer__small-text{font-weight:normal;font-size:14px;color:#7e7ea0;padding-left:33px}.order-contact-footer__email{padding:0 20px}.order-contact-footer__email a{text-decoration:none;color:#000}.order-contact-footer__email a:hover{text-decoration:underline;color:#cc2127}.img-uploader[data-visible=false]{display:none}.img-uploader__title{font-weight:bold;color:#006;padding:15px 0 3px 0}.img-uploader__intro{color:#595973;padding-bottom:10px;line-height:1.2}.img-uploader__dropzone{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px dashed #d5d5e2;border-radius:10px;padding:30px 15px;text-align:center;line-height:1.5;background-color:#f9f9fb;transition:all .2s ease-in-out;position:relative}.img-uploader__dropzone.drag-hover,.img-uploader__dropzone:hover{border-color:#06f;background-color:rgba(0,102,255,.05);cursor:pointer}.img-uploader__dropzone.drag-hover .img-uploader__text-link,.img-uploader__dropzone:hover .img-uploader__text-link{color:#06f}.img-uploader__dropzone.drag-hover .img-uploader__icon circle,.img-uploader__dropzone.drag-hover .img-uploader__icon path,.img-uploader__dropzone.drag-hover .img-uploader__icon polygon,.img-uploader__dropzone:hover .img-uploader__icon circle,.img-uploader__dropzone:hover .img-uploader__icon path,.img-uploader__dropzone:hover .img-uploader__icon polygon{fill:#06f}.img-uploader__dropzone:has(.invalid){border-width:2px;border-color:#cc2127}.img-uploader__icon{max-width:30px}.img-uploader__description{padding-top:10px;padding-bottom:20px;color:#595973}.img-uploader__text-link{color:blue;text-decoration:underline;text-underline-position:under}.panel{display:flex;align-items:center;padding:3px 5px 1px;border:1px solid #d5d5e2;border-radius:5px;transition:.4s ease-in-out;transition-property:background-color,color;background-color:#fff}.panel+.panel{margin-top:5px}.panel.error>.percent{color:#cc2127}.panel.complete>.percent{color:#5cba47}.panel>.filename{color:#595973;display:inline-block;padding-right:10px;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel>.percent{color:#595973;display:inline-block;white-space:nowrap;overflow:hidden;min-width:75px;text-align:center}
/*# sourceMappingURL=returns-form.css.map */
Raw
return-request.js
(function () {
'use strict';
// =============================================================================
// SlideOpen / SlideClose.
// Functions to transition the height of an element between 0 and its natural
// height.
// =============================================================================
function slideOpen(target, duration, callback) {
// Display the target element with a sliding transition.
if (target.dataset.visible === 'true') {
return;
}
target.dataset.visible = true;
target.style.removeProperty('display');
var display = window.getComputedStyle(target).display;
if (display === 'none') {
display = 'block';
}
target.style.display = display;
var height = target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
target.style.boxSizing = 'border-box';
target.style.transitionProperty = 'height, margin, padding';
target.style.transitionDuration = duration + 'ms';
window.setTimeout(function () {
target.style.height = height + 'px';
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
}, 1);
window.setTimeout(function () {
target.style.removeProperty('height');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
}, duration);
if (callback) {
window.setTimeout(callback, duration);
}
}
function slideClose(target, duration, callback) {
// Hide the target element with a sliding transition.
if (target.dataset.visible === 'false') {
return;
}
target.dataset.visible = false;
target.style.transitionProperty = 'height, margin, padding';
target.style.transitionDuration = duration + 'ms';
target.style.boxSizing = 'border-box';
target.style.height = target.offsetHeight + 'px';
window.setTimeout(function () {
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
}, 1);
window.setTimeout(function () {
target.style.removeProperty('height');
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
target.style.removeProperty('display');
target.style.removeProperty('box-sizing');
}, duration);
if (callback) {
window.setTimeout(callback, duration);
}
}
// ============================================================================
var formOrderProducts = document.getElementById('orderProducts');
var formReturnRequest = document.getElementById('returnRequest');
var orderNumberInput = document.getElementById('order_number');
var productSelector = document.querySelector('.js-product-selector');
// Register the hidden product selector form validation.
$(formOrderProducts).validation({
method: 'GET',
submit: false,
qtip: {
position: {
my: 'right center',
at: 'right center',
viewport: $(window),
adjust: {
method: 'shift',
x: -10
},
effect: false
},
style: {
tip: {
corner: false
}
}
},
messages: {
alert: {
before: formOrderProducts
},
error: {
before: formOrderProducts
},
notify: {
before: formOrderProducts
}
}
});
// Register validation.
$(formReturnRequest).validation({
qtip: {
position: {
my: 'right center',
at: 'right center',
viewport: $(window),
adjust: {
method: 'shift',
x: -10
},
effect: false
},
style: {
tip: {
corner: false
}
}
},
messages: {
alert: {
before: formReturnRequest,
classes: 'message-area alert m-b-0'
},
error: {
before: formReturnRequest,
classes: 'message-area error m-b-0'
},
notify: {
before: formReturnRequest,
classes: 'message-area notify m-b-0'
}
}
});
formOrderProducts.addEventListener('submit', function (event) {
formOrderProducts.setAttribute('data-state', 'loading');
formReturnRequest.setAttribute('data-state', 'loading');
});
$(formOrderProducts).on('valid.validation', function (event) {
formOrderProducts.setAttribute('data-state', 'loaded');
formReturnRequest.setAttribute('data-state', 'loaded');
// Order lookup submission valid event handler.
var orderNumber = event.response.record.order_number.value;
var emailAddress;
if (event.response.record.email) {
emailAddress = event.response.record.email.value;
}
var orderNumberHidden = formReturnRequest.querySelector('[name="order_number"]');
if (orderNumberHidden) {
orderNumberHidden.setAttribute('value', orderNumber);
} else {
orderNumberHidden = document.createElement('input');
orderNumberHidden.setAttribute('type', 'hidden');
orderNumberHidden.setAttribute('name', 'order_number');
orderNumberHidden.setAttribute('value', orderNumber);
formReturnRequest.appendChild(orderNumberHidden);
}
var emailAddressHidden = formReturnRequest.querySelector('[name="email"]');
if (emailAddress && emailAddressHidden) {
emailAddressHidden.setAttribute('value', emailAddress);
} else if (emailAddress) {
emailAddressHidden = document.createElement('input');
emailAddressHidden.setAttribute('type', 'hidden');
emailAddressHidden.setAttribute('name', 'email');
emailAddressHidden.setAttribute('value', emailAddress);
formReturnRequest.appendChild(emailAddressHidden);
} else if (emailAddressHidden) {
emailAddressHidden.remove();
}
// Order lookup submission valid event handler.
formReturnRequest.setAttribute('data-state', 'loaded');
productSelector.innerHTML = '';
var productsData = event.response.data.products;
productsData.forEach(function (product, index) {
// For each product in the order, generate and append a selectable
// product to the list.
var templateProduct = document.getElementById('templateProduct').content.cloneNode(true);
var template = templateProduct.querySelector('.js-product').cloneNode(true);
template.querySelector('.js-product-label').setAttribute('for', 'product_selected_' + index);
var checkbox = template.querySelector('.js-product-checkbox');
checkbox.setAttribute('id', 'product_selected_' + index);
checkbox.setAttribute('name', 'product_selected_' + index);
var image = template.querySelector('.js-product-image');
image.setAttribute('alt', product.product_code);
image.setAttribute('src', product.image_url);
template.querySelector('.js-product-code').textContent = product.product_code;
template.querySelector('.js-product-description').textContent = product.description;
var qtyInput = template.querySelector('.js-field-quantity input');
qtyInput.setAttribute('id', 'quantity_' + index);
qtyInput.setAttribute('name', 'quantity_' + index);
qtyInput.setAttribute('value', product.quantity);
template.querySelector('.js-field-reason select').setAttribute('name', 'reason_' + index);
template.querySelector('.js-field-action select').setAttribute('name', 'action_' + index);
var notesInput = template.querySelector('.js-field-notes input');
notesInput.setAttribute('id', 'notes_' + index);
notesInput.setAttribute('name', 'notes_' + index);
var productCodeInput = template.querySelector('.js-field-product-code');
productCodeInput.setAttribute('name', 'product_code_' + index);
productCodeInput.setAttribute('value', product.product_code);
var fileIDsInput = template.querySelector('.js-file-ids');
fileIDsInput.setAttribute('id', 'file_ids_' + index);
fileIDsInput.setAttribute('name', 'file_ids_' + index);
var uploader = template.querySelector('.js-img-uploader');
var uploadData = {};
if (emailAddress) {
// For guest user, include the email address as post data.
uploadData.email = emailAddress;
}
$(uploader).uploaderUI({
validation: function validation(files) {
var accepted = [];
var rejected = [];
var sizeLimit = '25MB';
var sizeLimitInBytes = bytesWithUnits2Int(sizeLimit);
var validMimeTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/svg+xml'];
for (var i = 0; i < files.length; i++) {
if (files[i].size > sizeLimitInBytes) {
rejected.push(files[i]);
} else if (!validMimeTypes.includes(files[i].type)) {
rejected.push(files[i]);
} else {
accepted.push(files[i]);
}
}
if (rejected.length > 0) {
rejected.forEach(function (file) {
// For each rejected file, add a progress panel to the uploader.
var filenameSpan = document.createElement('span');
filenameSpan.classList.add('filename');
filenameSpan.textContent = file.name;
var percentSpan = document.createElement('span');
percentSpan.classList.add('percent');
percentSpan.textContent = 'Error';
var progressPanel = document.createElement('div');
progressPanel.classList.add('panel', 'error');
progressPanel.appendChild(filenameSpan);
progressPanel.appendChild(percentSpan);
uploader.querySelector('.dropzone').appendChild(progressPanel);
});
$(formReturnRequest).validation('showMessage', "error", "Please upload a valid image (<" + sizeLimit + ").");
}
return accepted;
},
'headers': {
'Accept': "application/json"
},
uploadURL: '/tcl/orders/' + encodeURI(orderNumber) + '/upload',
uploadData: uploadData,
onUpload: function onUpload(response) {
// Add the image id to the file_ids_x hidden input which will have a
// value of the ids of the uploaded images as space-separated integers
if (response.data && response.data.file_id) {
var fileIDs = fileIDsInput.value;
if (fileIDs === '') {
fileIDs = response.data.file_id;
} else {
fileIDs = fileIDs + ' ' + response.data.file_id;
}
fileIDsInput.value = fileIDs;
}
}
});
document.querySelector('.js-product-selector').appendChild(template);
});
});
$(formOrderProducts).on('invalid.validation', function (event) {
formOrderProducts.setAttribute('data-state', '');
formReturnRequest.setAttribute('data-state', '');
});
// ============================================================================
// Product Selector Events
// ============================================================================
productSelector.addEventListener('change', function (event) {
// Checkbox change event handler.
if (event.target.closest('.js-product-checkbox') != null) {
$(formReturnRequest).validation('hideValidationMessage');
var isChecked = event.target.checked;
var product = event.target.closest('.js-product');
var fieldset = product.querySelector('.js-product-fieldset');
if (isChecked) {
// Check and show product fields.
product.classList.add('is-active');
slideOpen(fieldset, 400);
} else {
// Uncheck and hide product fields.
product.classList.remove('is-active');
slideClose(fieldset, 400);
}
// If any products are selected, reveal form's submit button.
var submitButton = document.querySelector('.js-returns-form-submit');
if (document.querySelectorAll('.js-product-checkbox:checked').length > 0) {
submitButton.classList.remove('is-hidden');
} else {
submitButton.classList.add('is-hidden');
}
}
// Change event listener for 'Reason For Return' dropdown fields.
if (event.target.closest('.js-field-reason select') != null) {
// Switch between 'Additional Notes' / 'Fault Description' text fields
// depending on the selected option.
var _product = event.target.closest('.js-product');
var notesFieldLabel = _product.querySelector('.js-field-notes label');
var notesFieldInput = _product.querySelector('.js-field-notes input');
var imageUploader = _product.querySelector('.js-img-uploader');
if (event.target.value === 'DEFECTIVE') {
// 'Item is defective' selected. Show required 'Fault Description' field.
notesFieldLabel.textContent = notesFieldInput.dataset.defectiveLabelContent;
notesFieldInput.setAttribute('placeholder', notesFieldInput.dataset.defectivePlaceholderContent);
} else if (event.target.value === 'INCORRECT') {
// 'Incorrect item supplied' selected. Show required 'Fault Description' field.
notesFieldLabel.textContent = notesFieldInput.dataset.incorrectLabelContent;
notesFieldInput.setAttribute('placeholder', notesFieldInput.dataset.incorrectPlaceholderContent);
} else {
// 'Item is defective' or 'Incorrect item supplied' not selected
// Show the standard optional 'Additional Notes' field.
notesFieldLabel.textContent = notesFieldInput.dataset.defaultLabelContent;
notesFieldInput.setAttribute('placeholder', notesFieldInput.dataset.defaultPlaceholderContent);
}
// Show/hide the image uploader depending on the selected option.
if (event.target.value.match(/(DEFECTIVE|INCORRECT|DAMAGED)/)) {
slideOpen(imageUploader, 400);
} else {
slideClose(imageUploader, 400);
}
// When 'Unwanted' is selected, disable the 'Replacement' option.
var replacementOption = _product.querySelector(".js-field-action option[value='REPLACE']");
if (event.target.value === 'UNWANTED') {
// Disable & unselect the 'Replacement' option.
replacementOption.setAttribute('disabled', 'disabled');
_product.querySelector('.js-field-action select').value = 'REFUND';
imageUploader.classList.add('is-hidden');
} else {
// Enable the 'Replacement' option.
replacementOption.removeAttribute('disabled');
}
}
});
// ============================================================================
// 'Continue' Button Auto-Submit.
// ============================================================================
if (orderNumberInput.value !== '') {
// Submit the if the Order Number field is
// populated to fetch the order's product list.
$(formOrderProducts).submit();
}
})();
//# sourceMappingURL=return-requests.js.map
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment