"use strict";(self.webpackChunkR2U=self.webpackChunkR2U||[]).push([[428],{8305:function(e,o,t){t.r(o),t.d(o,{default:function(){return P}});var n=t(7294),r=t(3935),i=t(9361),l=t.n(i),u=t(2367),a=t(5060),c=t(3026),d=t(9163);const s=d.default.div`
  width: 100%;
  height: 100%;

  --r2u-viewer-background-color: transparent;
  --r2u-viewer-box-shadow: 0px 2px 12px #f2f2f2;

  .viewer-container {
    width: 100%;
    height: 100%;

    background-color: var(--r2u-viewer-background-color);
    /* box-shadow: var(--r2u-viewer-box-shadow); */

    & > div {
      opacity: 1 !important;
      width: 100%;
      height: 100%;

      .expand-button {
        padding: 12px;
        position: absolute;
        bottom: 5px;
        right: 5px;
        width: 24px;
        z-index: 999999;
        cursor: pointer;
        background: none !important;
        border: none !important;
        outline: none;
        transition: opacity 2s;
        img {
          transition: 0.5s ease;
          width: 24px;
          height: 24px;
          backface-visibility: hidden;
        }
      }

      .expand-image {
        position: absolute;
        right: 0px;
        bottom: 0px;
      }

      .bloomButton {
        padding: 8px;
        position: absolute;
        left: 16px;
        right: auto !important;
        top: 4px;
        z-index: 9999999;
        background: #f9f9f9;
        ${({bloom:e})=>e?d.css`
                box-shadow: inset -2px -2px 4px #ffffff,
                  inset 2px 2px 4px rgba(86, 86, 86, 0.25);
              `:d.css`
                box-shadow: -2px -2px 4px #ffffff,
                  2px 2px 4px rgba(86, 86, 86, 0.25);
              `}
        border-radius: 20px;
        margin: 0px 10px;
        outline: none;
        border: none;
        cursor: pointer;

        :hover {
          box-shadow: inset -2px -2px 4px #ffffff,
            inset 2px 2px 4px rgba(86, 86, 86, 0.25);
        }

        .lamp {
          width: 30px;
          height: 30px;
        }
      }

      .exit-button {
        width: 26px;
        height: auto;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
        margin: 12px;
        padding: 3px;

        cursor: pointer;
        background: none !important;
        border: none !important;
        outline: none;
        img {
          width: 100%;
        }
      }
    }

    canvas {
      min-height: 220px;
    }
  }

  .background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    background-color: rgba(0, 0, 0, 0.4);

    display: ${({expanded:e})=>e?"flex":"none"};
    justify-content: center;
    align-items: center;

    .popup {
      background-color: #fff;
      width: 60vw;
      height: 60vh;
      box-shadow: none;
    }
  }
`;var p=function(e,o){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&o.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(n=Object.getOwnPropertySymbols(e);r<n.length;r++)o.indexOf(n[r])<0&&Object.prototype.propertyIsEnumerable.call(e,n[r])&&(t[n[r]]=e[n[r]])}return t};var v=e=>{const{exitImgSrc:o="https://sdk.r2u.io/assets/exit-icon.png",expandImgSrc:t="https://sdk.r2u.io/assets/expand-icon.png",popup:r=!0,children:i=null,waterMarkPosition:l,refViewerPopup:u,ModelViewerElement:d,refViewerFunctions:v}=e,f=p(e,["exitImgSrc","expandImgSrc","popup","children","waterMarkPosition","refViewerPopup","ModelViewerElement","refViewerFunctions"]),[m,g]=(0,n.useState)(!1),b=()=>{g(!1)};(0,n.useEffect)((()=>{u&&u.current&&u.current.addEventListener("mousedown",(e=>(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),!1)))}),[u]);const w=(0,n.useRef)(null),[h,y]=(0,n.useState)(!1);return n.createElement(s,{expanded:m,bloom:h},n.createElement("div",{className:"viewer-container"},f.glbSrc&&n.createElement(d,Object.assign({ref:v,componentDidMount:f.componentDidMount,onClick:f.onClick,onSessionTimeCollect:f.onSessionTimeCollect},f),i,r&&n.createElement("button",{className:"expand-button",type:"button",onClick:()=>{g(!0)}},n.createElement("img",{className:"expand-image",alt:"",src:t})),l&&n.createElement(a.Z,{position:l}))),r&&m&&n.createElement("div",{className:"background",onMouseDown:b},n.createElement("div",{className:"viewer-container popup"},f.glbSrc&&n.createElement(d,Object.assign({ref:w,componentDidMount:f.componentDidMount,onClick:f.onClick,onSessionTimeCollect:f.onSessionTimeCollect},f,{enableBloomButton:!1}),i,f.bloom&&n.createElement("button",{className:"bloomButton",type:"button",onMouseDown:e=>e.stopPropagation(),onClick:()=>{y(!h),w.current&&w.current.updateBloom(!h)}},h?n.createElement(c.cu,{className:"lamp"}):n.createElement(c.H_,{className:"lamp"})),n.createElement("button",{className:"exit-button",type:"button",onClick:b},n.createElement("img",{alt:"",src:o})),l&&n.createElement(a.Z,{position:l})))))},f=t(1841),m=t.n(f),g=t(7523),b=t(7374),w=t(2297),h=function(e,o,t,n){return new(t||(t=Promise))((function(r,i){function l(e){try{a(n.next(e))}catch(e){i(e)}}function u(e){try{a(n.throw(e))}catch(e){i(e)}}function a(e){var o;e.done?r(e.value):(o=e.value,o instanceof t?o:new t((function(e){e(o)}))).then(l,u)}a((n=n.apply(e,o||[])).next())}))};function y(e,o){return h(this,void 0,void 0,(function*(){const t=`/viewer-customization/customer/${u.Z.customer._id}/products/${e}?customization=${encodeURI(JSON.stringify(o))}`;return(yield(0,w.U2)(t))||{}}))}function x(e){return h(this,void 0,void 0,(function*(){const{status:o}=yield(0,w.U2)(`/job-status/${e}`);return["waiting","processing"].includes(o)?x(e):o}))}var k=t(5865);const E=({materialSlots:e,modelSlots:o})=>{e.sort(((e,o)=>e.slot>o.slot?1:e.slot<o.slot?-1:0)),o.sort(((e,o)=>e.slot>o.slot?1:e.slot<o.slot?-1:0)),o.forEach((e=>{e.activeModel&&E(e.activeModel)}))};var S=E;class C extends Error{constructor(e){super(e),this.name="ViewerError"}}var M=function(e,o,t,n){return new(t||(t=Promise))((function(r,i){function l(e){try{a(n.next(e))}catch(e){i(e)}}function u(e){try{a(n.throw(e))}catch(e){i(e)}}function a(e){var o;e.done?r(e.value):(o=e.value,o instanceof t?o:new t((function(e){e(o)}))).then(l,u)}a((n=n.apply(e,o||[])).next())}))};var P={create:({element:e,sku:o,name:t,popup:i=!0,progressBarPosition:a="top",progressBarColor:c,poster:d,autoRotate:s=!0,viewerProps:p})=>M(void 0,void 0,void 0,(function*(){return new Promise(((f,E)=>M(void 0,void 0,void 0,(function*(){if(!u.Z.init)return E(new Error("R2U - Not initialized"));if(!o)return E(new Error("R2U - Missing SKU"));const{glb:P,name:z,viewerOptions:O}=yield(0,g.Z)(o);let R=P;const N=u.Z.customer.waterMarkPosition,$=O||u.Z.customer.viewerOptions||void 0,B=(0,n.createRef)(),H=(0,n.createRef)(),I=(0,n.createRef)(),U=o=>M(void 0,void 0,void 0,(function*(){return new Promise(((l,u)=>M(void 0,void 0,void 0,(function*(){try{const{glb:u}=yield(0,g.Z)(o);R=u,r.render(n.createElement(v,Object.assign({glbSrc:R,alt:t||z,autoRotate:s,poster:d,refViewer:B,refViewerPopup:H,refViewerFunctions:I,waterMarkPosition:N,progressBarPosition:a,progressBarColor:c,popup:i},$,p,{componentDidMount:b.E9.componentDidMount,onClick:e=>{b.E9.onClick(),(null==p?void 0:p.onClick)&&(null==p||p.onClick(e))},onSessionTimeCollect:b.E9.onSessionTimeCollect,ModelViewerElement:m(),onLoad:l})),e)}catch(e){u(e)}}))))})),V=(...e)=>{var o;null===(o=I.current)||void 0===o||o.insertModelNode(...e)},A=(...e)=>M(void 0,void 0,void 0,(function*(){var o;yield null===(o=I.current)||void 0===o?void 0:o.insertSlotModelNode(...e)})),j=(...e)=>{var o;null===(o=I.current)||void 0===o||o.deleteModelNode(...e)},T=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateBloom(...e)},Z=(...e)=>{var o;null===(o=I.current)||void 0===o||o.setMaterial(...e)},D=(...e)=>{var o;return(null===(o=I.current)||void 0===o?void 0:o.setCustomMaterial(...e))||Promise.resolve(!1)},F=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getAllSlotsMaterials())||null},_=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getAllSlotsModels())||null},L=(...e)=>{var o;null===(o=I.current)||void 0===o||o.setModel(...e)},G=(...e)=>{var o;null===(o=I.current)||void 0===o||o.setCamera(...e)},J=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateShadow(...e)},Q=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateFog(...e)},K=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateBloomProps(...e)},q=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateEnvironment(...e)},W=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getCamera())||null},X=e=>M(void 0,void 0,void 0,(function*(){if(!I.current)throw new C("Viewer not completely loaded!");const t=I.current.getCurrentCustomization(e);if(!t)throw new C("No customization returned!");S(t);const n=yield y(o,t);if(!n.glb){const e=yield I.current.getCustomizedModel();if(!e)throw new C("Could not export the customization glb!");n.glb=yield function(e,o,t){return h(this,void 0,void 0,(function*(){const n=`/viewer-customization/customer/${u.Z.customer._id}/products/${e}/upload-customization-data?customization=${encodeURI(JSON.stringify(o))}`,r=yield(0,w.U2)(n),i=new File([t],r.filename),l=new FormData;return Object.keys(r.fields).forEach((e=>l.append(e,r.fields[e]))),l.append("file",i),yield fetch(r.url,{method:"POST",body:l}),r.url.concat(r.fields.key)}))}(o,t,e)}if(!n.usdz){const e=yield function(e,o){return h(this,void 0,void 0,(function*(){const t=`/viewer-customization/customers/${u.Z.customer._id}/products/${e}/convert`;return yield(0,w.v_)(t,{filename:o})}))}(o,n.glb.split("/").pop());if("success"!==(yield x(e.jobId)))throw new C("Error while converting to usdz!");n.usdz=e.usdz}return y(o,t),n})),Y=(e=!1)=>M(void 0,void 0,void 0,(function*(){try{const o=yield X(e);return(0,k.activateAR)({glb:o.glb,usdz:o.usdz,mode:"ar_preferred"}),!0}catch(e){return console.error(`Error opening AR: ${e.message}`),!1}})),ee=(e,o=!1)=>M(void 0,void 0,void 0,(function*(){try{const t=yield X(o),i=`https://viewer.r2u.io/?customizationUri=${encodeURIComponent(t.glb.replace("https://storage.googleapis.com/","").replace(/\.glb$/,""))}&autoOpen=1`;return r.render(n.createElement(l(),Object.assign({},{"data-url":i},{value:i,style:{width:"100%",height:"100%"},renderAs:"svg"})),e),!0}catch(e){return console.error(`Error generating QR Code: ${e.message}`),!1}})),oe=(e=!1)=>M(void 0,void 0,void 0,(function*(){try{const o=yield X(e);return`https://viewer.r2u.io/?customizationUri=${encodeURIComponent(o.glb.replace("https://storage.googleapis.com/","").replace(/\.glb$/,""))}&autoOpen=1`}catch(e){return console.error(`Error generating viewer URL: ${e.message}`),null}})),te=(...e)=>{I.current&&I.current.downloadGlb(...e)},ne=e=>M(void 0,void 0,void 0,(function*(){const o=setInterval((()=>{I.current&&(clearInterval(o),e())}),200);setTimeout((()=>{if(!I.current)throw clearInterval(o),new Error("Internal error: Unable to load viewerRefFunctions.")}),1e4)})),re=(...e)=>M(void 0,void 0,void 0,(function*(){yield ne((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.insertHotspot(...e)}))})),ie=(...e)=>M(void 0,void 0,void 0,(function*(){yield ne((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.updateHotspot(...e)}))})),le=(...e)=>M(void 0,void 0,void 0,(function*(){yield ne((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.deleteHotspot(...e)}))})),ue=(...e)=>M(void 0,void 0,void 0,(function*(){yield ne((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.showHotspot(...e)}))})),ae=(...e)=>M(void 0,void 0,void 0,(function*(){yield ne((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.hideHotspot(...e)}))})),ce=(...e)=>M(void 0,void 0,void 0,(function*(){yield ne((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.focusHotspot(...e)}))})),de=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getActiveHotspotId())||null},se=(...e)=>M(void 0,void 0,void 0,(function*(){yield ne((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.lookToHotspot(...e)}))})),pe=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getSceneTree())||null},ve=(...e)=>{var o;null===(o=I.current)||void 0===o||o.playAnimation(...e)},fe=()=>{var e;null===(e=I.current)||void 0===e||e.pauseAnimation()},me=(...e)=>M(void 0,void 0,void 0,(function*(){var o;null===(o=I.current)||void 0===o||o.stopAnimation(...e)})),ge=(...e)=>M(void 0,void 0,void 0,(function*(){var o;return(null===(o=I.current)||void 0===o?void 0:o.takeSnapshot(...e))||null})),be=(...e)=>M(void 0,void 0,void 0,(function*(){var o;null===(o=I.current)||void 0===o||o.updateBackground(...e)}));r.render(n.createElement(v,Object.assign({glbSrc:R,alt:t||z,autoRotate:s,poster:d,refViewer:B,refViewerPopup:H,refViewerFunctions:I,waterMarkPosition:N,progressBarPosition:a,progressBarColor:c,popup:i},$,p,{componentDidMount:b.E9.componentDidMount,onClick:e=>{b.E9.onClick(),(null==p?void 0:p.onClick)&&(null==p||p.onClick(e))},onSessionTimeCollect:b.E9.onSessionTimeCollect,ModelViewerElement:m(),onLoad:()=>{f({setSku:U,insertModelNode:V,insertSlotModelNode:A,deleteModelNode:j,setMaterial:Z,setCustomMaterial:D,getAllSlotsMaterials:F,updateBloom:T,getAllSlotsModels:_,setModel:L,setCamera:G,updateShadow:J,updateFog:Q,updateBloomProps:K,updateEnvironment:q,getCamera:W,insertHotspot:re,updateHotspot:ie,deleteHotspot:le,showHotspot:ue,hideHotspot:ae,focusHotspot:ce,getActiveHotspotId:de,lookToHotspot:se,customization:{openAR:Y,renderQRCode:ee,getViewerURL:oe},getSceneTree:pe,playAnimation:ve,pauseAnimation:fe,stopAnimation:me,downloadGlb:te,takeSnapshot:ge,updateBackground:be})}})),e)}))))}))}},5671:function(e,o,t){function n(e,o){if(!(e instanceof o))throw new TypeError("Cannot call a class as a function")}t.d(o,{Z:function(){return n}})},3144:function(e,o,t){function n(e,o){for(var t=0;t<o.length;t++){var n=o[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function r(e,o,t){return o&&n(e.prototype,o),t&&n(e,t),e}t.d(o,{Z:function(){return r}})},4942:function(e,o,t){function n(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}t.d(o,{Z:function(){return n}})},1002:function(e,o,t){function n(e){return n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n(e)}t.d(o,{Z:function(){return n}})}}]);