https://dz.diesel.com/on/demandware.static/Sites-DieselWW-Site/-/e…/js/component-View3DBagsModal.chunks.js

1(self.webpackChunkapp_project=self.webpackChunkapp_project||[]).push([[4639],{63890:(e,t,o)=>{"use strict";o.r(t),o.d(t,{default:()=>S});var n=o(96156),r=o(67294),a=o(38302),l=o(12737),c=o(79510),d=o(13385),i=o.n(d),s=o(36008),u=o.n(s),h=o(20745);const m=o(11253).Z,p=o(14863).ZP,y=o(66462);function b(e){let{modelId:t}=e;const o=["xsmall","small"].indexOf(m.getCurrentBreakPoint())>=0;return r.createElement(u(),{wannaSdk:i(),iframeSrc:window.virtual_try_on_iframeSrc,models:[{id:t,pois:["","",""]}],license:window.virtual_try_on_wanna_licenseKey,viewMode:o?s.VIEW_MODE_MOBILE:s.VIEW_MODE_DESKTOP,mode:i().MODE_TYPE_3D,modelsType:i().MODEL_TYPE_BAG,onError:e=>console.error("WannaUI error:",e)})}class S extends a.default{get CLASSES(){return{keyboardInteraction:"keyboard-interaction",mouseInteraction:"mouse-interaction"}}get KEYBOARD_INPUT(){return"keyboard"===this.html.dataset.whatintent||this.body.classList.contains(this.CLASSES.keyboardInteraction)}constructor(e){super(e),(0,n.Z)(this,"pdpSelector",".product-detail"),(0,n.Z)(this,"show3DButtonSelector",".show_3d_bags"),(0,n.Z)(this,"backButtonSelector",".back-btn"),(0,n.Z)(this,"selectSelector",".view3D__select"),(0,n.Z)(this,"allyTabFocusHandler",void 0);const t=this;this.element=e,t.addToCartButtonSelector='.button.main-button.full-box[data-action="add-to-cart"]',t.notifyMeModalButtonSelector=".modal-actions-box .js-notify-when-available",this.selectElements(),t.handleToggleShow3DButton(t),l.Z.on("product:selectAttributes",(e=>{t.productSelectAttributes(e,t)})),l.Z.on("product:afterColorChange",(e=>{t.closeModal(t),t.handleChangeVariation(t,e,!0)})),l.Z.on("modal:open",(e=>{t.openModal(e,t);const o=this.element.querySelector(this.selectSelector);o&&o.addEventListener("change",(e=>this.handleProductInformations(t,e)));const n=t.element.querySelector(t.addToCartButtonSelector),r=t.element.querySelector(t.notifyMeModalButtonSelector);n&&n.addEventListener("click",(()=>{t.closeModal(t)})),r&&r.addEventListener("click",(()=>{t.closeModal(t),l.Z.emit("notifyWhenAvailable:clickedFrom3DBagsVTO",r)}))}))}keyboardEvents(e,t){t&&t.key&&t.key.toUpperCase()===c.hY&&e.closeModal(e)}handleProductInformations(e,t){const o=t?t.target:this.element.querySelector(".form-element__select");let n=null,r=null;if(o){if(n=o.options[o.options.selectedIndex],n){r=n.dataset.url;const t=n.dataset.vtoId;t.length>0&&e.changeModel(e,{modelID:t})}}else{const t=document.querySelector(".show_3d_bags");e.changeModel(e,{modelID:t.dataset.virtualtryonmodelid}),r=t.dataset.variationUrl}r&&(l.Z.emit("loader:start",{element:e.element}),p("".concat(r)).then((e=>e.json())).then((t=>{l.Z.emit("loader:end",{element:e.element})})))}selectElements(){this.inputPreorder=this.element.querySelectorAll('input[name="isPreorder"]'),this.inputAvailable=this.element.querySelectorAll('input[name="available"]'),this.addToCartButton=this.element.querySelectorAll('.add-to-cart-section [data-action="add-to-cart"]'),this.backInStock=this.element.querySelectorAll(".back-in-stock"),this.preorder=this.element.querySelectorAll(".js-preorder"),this.addToCartSection=this.element.querySelectorAll(".add-to-cart-section"),this.addPreorderToCartSection=this.element.querySelectorAll(".add-preorder-to-cart-section"),this.currentItem=document.querySelector(".btn.show_3d_bags"),this.body=document.body,this.html=document.documentElement}handleChangeVariation(e,t,o){e.element.querySelector('input[name="pid"]').value=t.product.id;const n=t.product.available&&t.product.isOrderable,r=t.product.id===t.product.masterID,a=!n&&t.product.showBackInStockNotification&&!r;if(e.handleAddCartButton(e,t,n,a,!0),e.handleBackInStockNotify(e,t,a),t.product.customIsPreorder&&!t.product.notifyWhenAvailableHtml?e.handleCustomPreorder(e,t):e.handleNotPreorderable(e),[...e.inputPreorder].forEach((e=>{e.value=t.product.customIsPreorder&&!t.product.notifyWhenAvailableHtml})),[...e.inputAvailable].forEach((e=>{e.value=t.product.available})),o){const o=e.element.querySelector(".actions-wrapper select");t.product.variationAttributes.filter((e=>"color"===e.id))[0].values.forEach((e=>{e.selected&&(o.value=e.id)}))}}handleNotPreorderable(e){e.addToCartSection.forEach((function(e){e.setAttribute("style","")})),e.addPreorderToCartSection.forEach((function(e){e.setAttribute("style","display:none;")}))}handleCustomPreorder(e,t){e.addToCartSection.forEach((function(e){e.setAttribute("style","display:none;")})),e.addPreorderToCartSection.forEach((function(e){e.setAttribute("style","")}))}handleBackInStockNotify(e,t,o){o&&e.backInStock?(e.backInStock.forEach((function(e){e.innerHTML=t.product.notifyWhenAvailableHtml})),l.Z.emit("notifyWhenAvailable:buttonCreated",e.backInStock),e.preorder.forEach((function(e){e.classList.add("d-none")}))):(e.backInStock.forEach((function(e){e.innerHTML=""})),e.preorder.forEach((function(e){e.classList.remove("d-none")})))}handleAddCartButton(e,t,o,n,r){e.addToCartButton.forEach((e=>{e.classList.toggle("master",!r||!o),"physical"!==t.product.giftcardType&&e.setAttribute("type",r&&o?"submit":"button"),e.classList.toggle("button-add-to-cart-none",!!n)}))}changeModel(e,t){e.unmountRoot(e),e.mountRoot(e,t.modelID)}productSelectAttributes(e,t){const o=document.querySelectorAll(t.show3DButtonSelector);

1o&&[...o].forEach((t=>{t.dataset.id=e.product.id,t.dataset.virtualtryonmodelid=e.product.virtualTryOnModelId?e.product.virtualTryOnModelId:"",t.dataset.url=window.location.origin+e.product.selectedProductUrl,t.dataset.title=e.product.productName,t.dataset.subtitle=e.product.productNameForTile,t.dataset.price=e.product.price.sales.formatted})),t.handleToggleShow3DButton(t)}handleToggleShow3DButton(e){const t=document.querySelectorAll(e.show3DButtonSelector);t&&[...t].forEach((t=>{t.style.display=e.isMobileDevice&&t.dataset.virtualtryonmodelid||!e.isMobileDevice&&t.dataset.virtualtryonmodelid?"flex":"none"}))}initShow3DButton(e){const t=document.querySelector(e.show3DButtonSelector);t&&t.addEventListener("click",(t=>{e.openModal(t,e)}))}initBackButtons(e){const t=e.element.querySelectorAll(e.backButtonSelector);t&&[...t].forEach((t=>{t.addEventListener("click",(t=>{e.closeModal(e)}))})),e.element.addEventListener("click",(t=>{e.closeModal(e)})),e.element.querySelector(".modal-dialog").addEventListener("click",(e=>e.stopPropagation()))}openModal(e,t){e.preventDefault(),document.getElementById("wanna-root")&&(t.initBackButtons(t),t.wannaRoot=document.getElementById("wanna-root"),t.handleProductInformations(t)),document.addEventListener("keyup",(e=>this.keyboardEvents(t,e)),{once:!0}),this.KEYBOARD_INPUT&&y.when.visibleArea({context:this.element,callback:e=>{this.allyTabFocusHandler=y.maintain.tabFocus({context:this.element});const t=y.query.firstTabbable({context:e,defaultToContext:!0});t&&t.focus()},area:.2}),l.Z.emit("body:lock",{lock:!0}),t.element.classList.remove("hidden")}closeModal(e){this.allyTabFocusHandler&&this.allyTabFocusHandler.disengage(),this.KEYBOARD_INPUT&&this.currentItem&&y.element.focus(this.currentItem),l.Z.emit("body:lock",{lock:!1}),e.element.classList.add("hidden"),e.unmountRoot(e)}mountRoot(e,t){e.root=(0,h.s)(e.wannaRoot),e.root.render(r.createElement(b,{modelId:t}))}unmountRoot(e){e.root&&e.root.unmount()}}}}]);