"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),a=t(2367),u=t(5060),c=t(3026),s=t(9163);const d=s.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?s.css`
                box-shadow: inset -2px -2px 4px #ffffff,
                  inset 2px 2px 4px rgba(86, 86, 86, 0.25);
              `:s.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:a,ModelViewerElement:s,refViewerFunctions:v}=e,m=p(e,["exitImgSrc","expandImgSrc","popup","children","waterMarkPosition","refViewerPopup","ModelViewerElement","refViewerFunctions"]),[f,g]=(0,n.useState)(!1),b=()=>{g(!1)};(0,n.useEffect)((()=>{a&&a.current&&a.current.addEventListener("mousedown",(e=>(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),!1)))}),[a]);const h=(0,n.useRef)(null),[w,y]=(0,n.useState)(!1);return n.createElement(d,{expanded:f,bloom:w},n.createElement("div",{className:"viewer-container"},m.glbSrc&&n.createElement(s,Object.assign({ref:v,componentDidMount:m.componentDidMount,onClick:m.onClick,onSessionTimeCollect:m.onSessionTimeCollect},m),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(u.Z,{position:l}))),r&&f&&n.createElement("div",{className:"background",onMouseDown:b},n.createElement("div",{className:"viewer-container popup"},m.glbSrc&&n.createElement(s,Object.assign({ref:h,componentDidMount:m.componentDidMount,onClick:m.onClick,onSessionTimeCollect:m.onSessionTimeCollect},m,{enableBloomButton:!1}),i,m.bloom&&n.createElement("button",{className:"bloomButton",type:"button",onMouseDown:e=>e.stopPropagation(),onClick:()=>{y(!w),h.current&&h.current.updateBloom(!w)}},w?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(u.Z,{position:l})))))},m=t(1841),f=t.n(m),g=t(7523),b=t(7374),h=t(2297),w=function(e,o,t,n){return new(t||(t=Promise))((function(r,i){function l(e){try{u(n.next(e))}catch(e){i(e)}}function a(e){try{u(n.throw(e))}catch(e){i(e)}}function u(e){var o;e.done?r(e.value):(o=e.value,o instanceof t?o:new t((function(e){e(o)}))).then(l,a)}u((n=n.apply(e,o||[])).next())}))};function y(e,o){return w(this,void 0,void 0,(function*(){try{const t=`/viewer-customization/customer/${a.Z.customer._id}/products/${e}?customization=${encodeURI(JSON.stringify(o))}`;return(yield(0,h.U2)(t))||{}}catch(e){return console.error(`Error on getting customized model: ${e.message}`),Promise.reject(e)}}))}function x(e){return w(this,void 0,void 0,(function*(){try{const{status:o}=yield(0,h.U2)(`/job-status/${e}`);return["waiting","processing"].includes(o)?x(e):o}catch(e){return console.error(`Error on retry check conversion: ${e.message}`),Promise.reject(e)}}))}var E=t(5865);const k=({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&&k(e.activeModel)}))};var S=k;class M extends Error{constructor(e){super(e),this.name="ViewerError"}}var C=function(e,o,t,n){return new(t||(t=Promise))((function(r,i){function l(e){try{u(n.next(e))}catch(e){i(e)}}function a(e){try{u(n.throw(e))}catch(e){i(e)}}function u(e){var o;e.done?r(e.value):(o=e.value,o instanceof t?o:new t((function(e){e(o)}))).then(l,a)}u((n=n.apply(e,o||[])).next())}))};var P={create:({element:e,sku:o,name:t,popup:i=!0,progressBarPosition:u="top",progressBarColor:c,poster:s,autoRotate:d=!0,viewerProps:p})=>C(void 0,void 0,void 0,(function*(){return new Promise(((m,k)=>C(void 0,void 0,void 0,(function*(){if(!a.Z.init)return k(new Error("R2U - Not initialized"));if(!o)return k(new Error("R2U - Missing SKU"));const{glb:P,name:z,viewerOptions:$}=yield(0,g.Z)(o);let O=P;const R=a.Z.customer.waterMarkPosition,j=$||a.Z.customer.viewerOptions||void 0,N=(0,n.createRef)(),A=(0,n.createRef)(),H=(0,n.createRef)(),I=e=>C(void 0,void 0,void 0,(function*(){return new Promise(((o,t)=>C(void 0,void 0,void 0,(function*(){var n;try{const{glb:t}=yield(0,g.Z)(e);O=t,yield null===(n=H.current)||void 0===n?void 0:n.updateGlb(t),o()}catch(e){t(e)}}))))})),U=(...e)=>{var o;null===(o=H.current)||void 0===o||o.insertModelNode(...e)},B=(...e)=>C(void 0,void 0,void 0,(function*(){var o;yield null===(o=H.current)||void 0===o?void 0:o.insertSlotModelNode(...e)})),Z=(...e)=>{var o;null===(o=H.current)||void 0===o||o.deleteModelNode(...e)},T=(...e)=>{var o;null===(o=H.current)||void 0===o||o.updateBloom(...e)},V=({sku:e,glb:o})=>C(void 0,void 0,void 0,(function*(){var t,n;if(o)return(null===(t=H.current)||void 0===t?void 0:t.loadMaterials(o))||!1;if(e){const{glb:o}=yield(0,g.Z)(e);return(null===(n=H.current)||void 0===n?void 0:n.loadMaterials(o))||!1}return!1})),D=(...e)=>{var o;null===(o=H.current)||void 0===o||o.setMaterial(...e)},F=(...e)=>{var o;return(null===(o=H.current)||void 0===o?void 0:o.setCustomMaterial(...e))||Promise.resolve(!1)},_=()=>{var e;return(null===(e=H.current)||void 0===e?void 0:e.getAllSlotsMaterials())||null},L=()=>{var e;return(null===(e=H.current)||void 0===e?void 0:e.getAllSlotsModels())||null},G=(...e)=>{var o;null===(o=H.current)||void 0===o||o.setModel(...e)},J=(...e)=>{var o;null===(o=H.current)||void 0===o||o.setCamera(...e)},Q=(...e)=>{var o;null===(o=H.current)||void 0===o||o.updateShadow(...e)},q=(...e)=>{var o;null===(o=H.current)||void 0===o||o.updateFog(...e)},K=(...e)=>{var o;null===(o=H.current)||void 0===o||o.updateBloomProps(...e)},W=(...e)=>{var o;null===(o=H.current)||void 0===o||o.updateEnvironment(...e)},X=()=>{var e;return(null===(e=H.current)||void 0===e?void 0:e.getCamera())||null},Y=(e,t=!0)=>C(void 0,void 0,void 0,(function*(){try{if(!H.current)throw new M("Viewer not completely loaded!");let n=null;try{n=H.current.getCurrentCustomization(e)}catch(e){console.error(`Error on get current customization: ${e.message}`)}if(!n)throw new M("No customization returned!");S(n);const r=yield y(o,n);if(!r.glb){let e=null;try{e=yield H.current.getCustomizedModel(t)}catch(e){console.error(`Error on export the customization glb: ${e.message}`)}if(!e)throw new M("Could not export the customization glb!");r.glb=yield function(e,o,t){return w(this,void 0,void 0,(function*(){try{const n=`/viewer-customization/customer/${a.Z.customer._id}/products/${e}/upload-customization-data?customization=${encodeURI(JSON.stringify(o))}`,r=yield(0,h.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)}catch(e){return console.error(`Error on upload customization: ${e.message}`),Promise.reject(e)}}))}(o,n,e)}if(!r.usdz){const e=yield function(e,o){return w(this,void 0,void 0,(function*(){try{const t=`/viewer-customization/customers/${a.Z.customer._id}/products/${e}/convert`;return yield(0,h.v_)(t,{filename:o})}catch(e){return console.error(`Error on request sku conversion: ${e.message}`),Promise.reject(e)}}))}(o,r.glb.split("/").pop());if("success"!==(yield x(e.jobId)))throw new M("Error while converting to usdz!");r.usdz=e.usdz}return y(o,n),r}catch(e){return console.error(`Error getting customization AR: ${e.message}`),Promise.reject(e)}})),ee=(e=!1,o=!0)=>C(void 0,void 0,void 0,(function*(){try{const t=yield Y(e,o);return(0,E.activateAR)({glb:t.glb,usdz:t.usdz,mode:"ar_preferred"}),!0}catch(e){return console.error(`Error opening AR: ${e.message}`),!1}})),oe=(e,o=!1,t=!0)=>C(void 0,void 0,void 0,(function*(){try{const i=yield Y(o,t),a=`https://viewer.r2u.io/?customizationUri=${encodeURIComponent(i.glb.replace("https://storage.googleapis.com/","").replace(/\.glb$/,""))}&autoOpen=1`;return r.render(n.createElement(l(),Object.assign({},{"data-url":a},{value:a,style:{width:"100%",height:"100%"},renderAs:"svg"})),e),!0}catch(e){return console.error(`Error generating QR Code: ${e.message}`),!1}})),te=(e=!1,o=!0)=>C(void 0,void 0,void 0,(function*(){try{const t=yield Y(e,o);return`https://viewer.r2u.io/?customizationUri=${encodeURIComponent(t.glb.replace("https://storage.googleapis.com/","").replace(/\.glb$/,""))}&autoOpen=1`}catch(e){return console.error(`Error generating viewer URL: ${e.message}`),null}})),ne=(...e)=>{H.current&&H.current.downloadGlb(...e)},re=e=>C(void 0,void 0,void 0,(function*(){const o=setInterval((()=>{H.current&&(clearInterval(o),e())}),200);setTimeout((()=>{if(!H.current)throw clearInterval(o),new Error("Internal error: Unable to load viewerRefFunctions.")}),1e4)})),ie=(...e)=>C(void 0,void 0,void 0,(function*(){yield re((()=>{var o;return null===(o=H.current)||void 0===o?void 0:o.insertHotspot(...e)}))})),le=(...e)=>C(void 0,void 0,void 0,(function*(){yield re((()=>{var o;return null===(o=H.current)||void 0===o?void 0:o.updateHotspot(...e)}))})),ae=(...e)=>C(void 0,void 0,void 0,(function*(){yield re((()=>{var o;return null===(o=H.current)||void 0===o?void 0:o.deleteHotspot(...e)}))})),ue=(...e)=>C(void 0,void 0,void 0,(function*(){yield re((()=>{var o;return null===(o=H.current)||void 0===o?void 0:o.showHotspot(...e)}))})),ce=(...e)=>C(void 0,void 0,void 0,(function*(){yield re((()=>{var o;return null===(o=H.current)||void 0===o?void 0:o.hideHotspot(...e)}))})),se=(...e)=>C(void 0,void 0,void 0,(function*(){yield re((()=>{var o;return null===(o=H.current)||void 0===o?void 0:o.focusHotspot(...e)}))})),de=()=>{var e;return(null===(e=H.current)||void 0===e?void 0:e.getActiveHotspotId())||null},pe=(...e)=>C(void 0,void 0,void 0,(function*(){yield re((()=>{var o;return null===(o=H.current)||void 0===o?void 0:o.lookToHotspot(...e)}))})),ve=()=>{var e;return(null===(e=H.current)||void 0===e?void 0:e.getSceneTree())||null},me=(...e)=>{var o;null===(o=H.current)||void 0===o||o.playAnimation(...e)},fe=()=>{var e;null===(e=H.current)||void 0===e||e.pauseAnimation()},ge=(...e)=>C(void 0,void 0,void 0,(function*(){var o;null===(o=H.current)||void 0===o||o.stopAnimation(...e)})),be=(...e)=>C(void 0,void 0,void 0,(function*(){var o;return(null===(o=H.current)||void 0===o?void 0:o.takeSnapshot(...e))||null})),he=(...e)=>C(void 0,void 0,void 0,(function*(){var o;null===(o=H.current)||void 0===o||o.updateBackground(...e)}));r.render(n.createElement(v,Object.assign({glbSrc:O,alt:t||z,autoRotate:d,poster:s,refViewer:N,refViewerPopup:A,refViewerFunctions:H,waterMarkPosition:R,progressBarPosition:u,progressBarColor:c,popup:i},j,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:f(),onLoad:()=>{m({setSku:I,insertModelNode:U,insertSlotModelNode:B,deleteModelNode:Z,loadMaterials:V,setMaterial:D,setCustomMaterial:F,getAllSlotsMaterials:_,updateBloom:T,getAllSlotsModels:L,setModel:G,setCamera:J,updateShadow:Q,updateFog:q,updateBloomProps:K,updateEnvironment:W,getCamera:X,insertHotspot:ie,updateHotspot:le,deleteHotspot:ae,showHotspot:ue,hideHotspot:ce,focusHotspot:se,getActiveHotspotId:de,lookToHotspot:pe,customization:{openAR:ee,renderQRCode:oe,getViewerURL:te},getSceneTree:ve,playAnimation:me,pauseAnimation:fe,stopAnimation:ge,downloadGlb:ne,takeSnapshot:be,updateBackground:he})}})),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}})}}]);