"use strict";(self.webpackChunkR2U=self.webpackChunkR2U||[]).push([[428],{8305:function(e,o,t){t.r(o),t.d(o,{default:function(){return z}});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};const v=(0,n.forwardRef)(((e,o)=>{const{exitImgSrc:t="https://sdk.r2u.io/assets/exit-icon.png",expandImgSrc:r="https://sdk.r2u.io/assets/expand-icon.png",popup:i=!0,children:l=null,waterMarkPosition:a,refViewerPopup:s,ModelViewerElement:v,refViewerFunctions:m}=e,f=p(e,["exitImgSrc","expandImgSrc","popup","children","waterMarkPosition","refViewerPopup","ModelViewerElement","refViewerFunctions"]),[g,b]=(0,n.useState)(!1),h=()=>{b(!1)};(0,n.useEffect)((()=>{s&&s.current&&s.current.addEventListener("mousedown",(e=>(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation(),!1)))}),[s]);const w=(0,n.useRef)(null),[y,x]=(0,n.useState)(!1),[E,k]=(0,n.useState)(f.glbSrc);return(0,n.useImperativeHandle)(o,(()=>({updateGlb:e=>{k(e)}})),[]),n.createElement(d,{expanded:g,bloom:y},n.createElement("div",{className:"viewer-container"},E&&n.createElement(v,Object.assign({ref:m,componentDidMount:f.componentDidMount,onClick:f.onClick,onSessionTimeCollect:f.onSessionTimeCollect},f,{glbSrc:E}),l,i&&n.createElement("button",{className:"expand-button",type:"button",onClick:()=>{b(!0)}},n.createElement("img",{className:"expand-image",alt:"",src:r})),a&&n.createElement(u.Z,{position:a}))),i&&g&&n.createElement("div",{className:"background",onMouseDown:h},n.createElement("div",{className:"viewer-container popup"},E&&n.createElement(v,Object.assign({ref:w,componentDidMount:f.componentDidMount,onClick:f.onClick,onSessionTimeCollect:f.onSessionTimeCollect},f,{enableBloomButton:!1,glbSrc:E}),l,f.bloom&&n.createElement("button",{className:"bloomButton",type:"button",onMouseDown:e=>e.stopPropagation(),onClick:()=>{x(!y),w.current&&w.current.updateBloom(!y)}},y?n.createElement(c.cu,{className:"lamp"}):n.createElement(c.H_,{className:"lamp"})),n.createElement("button",{className:"exit-button",type:"button",onClick:h},n.createElement("img",{alt:"",src:t})),a&&n.createElement(u.Z,{position:a})))))}));v.displayName="R2UModelViewer";var m=v,f=t(1841),g=t.n(f),b=t(7523),h=t(7374),w=t(2297),y=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 x(e,o){return y(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,w.U2)(t))||{}}catch(e){return console.error(`Error on getting customized model: ${e.message}`),Promise.reject(e)}}))}function E(e){return y(this,void 0,void 0,(function*(){try{const{status:o}=yield(0,w.U2)(`/job-status/${e}`);return["waiting","processing"].includes(o)?E(e):o}catch(e){return console.error(`Error on retry check conversion: ${e.message}`),Promise.reject(e)}}))}var k=t(5865);const S=({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&&S(e.activeModel)}))};var M=S;class C extends Error{constructor(e){super(e),this.name="ViewerError"}}var P=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 z={create:({element:e,sku:o,name:t,popup:i=!0,progressBarPosition:u="top",progressBarColor:c,poster:s,autoRotate:d=!0,viewerProps:p})=>P(void 0,void 0,void 0,(function*(){return new Promise(((v,f)=>P(void 0,void 0,void 0,(function*(){if(!a.Z.init)return f(new Error("R2U - Not initialized"));if(!o)return f(new Error("R2U - Missing SKU"));const{glb:S,name:z,viewerOptions:R}=yield(0,b.Z)(o);let $=S;const O=a.Z.customer.waterMarkPosition,N=R||a.Z.customer.viewerOptions||void 0,j=(0,n.createRef)(),H=(0,n.createRef)(),I=(0,n.createRef)(),U=(0,n.createRef)(),A=e=>P(void 0,void 0,void 0,(function*(){return new Promise(((o,t)=>P(void 0,void 0,void 0,(function*(){var n,r;try{const{glb:t}=yield(0,b.Z)(e);$=t,yield null===(n=I.current)||void 0===n?void 0:n.updateGlb(t),null===(r=U.current)||void 0===r||r.updateGlb(t),o()}catch(e){t(e)}}))))})),B=(...e)=>{var o;null===(o=I.current)||void 0===o||o.insertModelNode(...e)},Z=(...e)=>P(void 0,void 0,void 0,(function*(){var o;yield null===(o=I.current)||void 0===o?void 0:o.insertSlotModelNode(...e)})),V=(...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)},D=({sku:e,glb:o})=>P(void 0,void 0,void 0,(function*(){var t,n;if(o)return(null===(t=I.current)||void 0===t?void 0:t.loadMaterials(o))||!1;if(e){const{glb:o}=yield(0,b.Z)(e);return(null===(n=I.current)||void 0===n?void 0:n.loadMaterials(o))||!1}return!1})),F=(...e)=>{var o;null===(o=I.current)||void 0===o||o.setMaterial(...e)},_=(...e)=>{var o;return(null===(o=I.current)||void 0===o?void 0:o.setCustomMaterial(...e))||Promise.resolve(!1)},G=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getAllSlotsMaterials())||null},L=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getAllSlotsModels())||null},J=(...e)=>{var o;null===(o=I.current)||void 0===o||o.setModel(...e)},Q=(...e)=>{var o;null===(o=I.current)||void 0===o||o.setCamera(...e)},q=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateShadow(...e)},K=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateFog(...e)},W=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateBloomProps(...e)},X=(...e)=>{var o;null===(o=I.current)||void 0===o||o.updateEnvironment(...e)},Y=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getCamera())||null},ee=(e,t=!0)=>P(void 0,void 0,void 0,(function*(){try{if(!I.current)throw new C("Viewer not completely loaded!");let n=null;try{n=I.current.getCurrentCustomization(e)}catch(e){console.error(`Error on get current customization: ${e.message}`)}if(!n)throw new C("No customization returned!");M(n);const r=yield x(o,n);if(!r.glb){let e=null;try{e=yield I.current.getCustomizedModel(t)}catch(e){console.error(`Error on export the customization glb: ${e.message}`)}if(!e)throw new C("Could not export the customization glb!");r.glb=yield function(e,o,t){return y(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,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)}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 y(this,void 0,void 0,(function*(){try{const t=`/viewer-customization/customers/${a.Z.customer._id}/products/${e}/convert`;return yield(0,w.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 E(e.jobId)))throw new C("Error while converting to usdz!");r.usdz=e.usdz}return x(o,n),r}catch(e){return console.error(`Error getting customization AR: ${e.message}`),Promise.reject(e)}})),oe=(e=!1,o=!0)=>P(void 0,void 0,void 0,(function*(){try{const t=yield ee(e,o);return(0,k.activateAR)({glb:t.glb,usdz:t.usdz,mode:"ar_preferred"}),!0}catch(e){return console.error(`Error opening AR: ${e.message}`),!1}})),te=(e,o=!1,t=!0)=>P(void 0,void 0,void 0,(function*(){try{const i=yield ee(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}})),ne=(e=!1,o=!0)=>P(void 0,void 0,void 0,(function*(){try{const t=yield ee(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}})),re=(...e)=>{I.current&&I.current.downloadGlb(...e)},ie=e=>P(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)})),le=(...e)=>P(void 0,void 0,void 0,(function*(){yield ie((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.insertHotspot(...e)}))})),ae=(...e)=>P(void 0,void 0,void 0,(function*(){yield ie((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.updateHotspot(...e)}))})),ue=(...e)=>P(void 0,void 0,void 0,(function*(){yield ie((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.deleteHotspot(...e)}))})),ce=(...e)=>P(void 0,void 0,void 0,(function*(){yield ie((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.showHotspot(...e)}))})),se=(...e)=>P(void 0,void 0,void 0,(function*(){yield ie((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.hideHotspot(...e)}))})),de=(...e)=>P(void 0,void 0,void 0,(function*(){yield ie((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.focusHotspot(...e)}))})),pe=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getActiveHotspotId())||null},ve=(...e)=>P(void 0,void 0,void 0,(function*(){yield ie((()=>{var o;return null===(o=I.current)||void 0===o?void 0:o.lookToHotspot(...e)}))})),me=()=>{var e;return(null===(e=I.current)||void 0===e?void 0:e.getSceneTree())||null},fe=(...e)=>{var o;null===(o=I.current)||void 0===o||o.playAnimation(...e)},ge=()=>{var e;null===(e=I.current)||void 0===e||e.pauseAnimation()},be=(...e)=>P(void 0,void 0,void 0,(function*(){var o;null===(o=I.current)||void 0===o||o.stopAnimation(...e)})),he=(...e)=>P(void 0,void 0,void 0,(function*(){var o;return(null===(o=I.current)||void 0===o?void 0:o.takeSnapshot(...e))||null})),we=(...e)=>P(void 0,void 0,void 0,(function*(){var o;null===(o=I.current)||void 0===o||o.updateBackground(...e)}));r.render(n.createElement(m,Object.assign({ref:U,alt:t||z,autoRotate:d,poster:s,refViewer:j,refViewerPopup:H,refViewerFunctions:I,waterMarkPosition:O,progressBarPosition:u,progressBarColor:c,popup:i},N,p,{componentDidMount:h.E9.componentDidMount,onClick:e=>{h.E9.onClick(),(null==p?void 0:p.onClick)&&(null==p||p.onClick(e))},onSessionTimeCollect:h.E9.onSessionTimeCollect,ModelViewerElement:g(),onLoad:()=>{v({setSku:A,insertModelNode:B,insertSlotModelNode:Z,deleteModelNode:V,loadMaterials:D,setMaterial:F,setCustomMaterial:_,getAllSlotsMaterials:G,updateBloom:T,getAllSlotsModels:L,setModel:J,setCamera:Q,updateShadow:q,updateFog:K,updateBloomProps:W,updateEnvironment:X,getCamera:Y,insertHotspot:le,updateHotspot:ae,deleteHotspot:ue,showHotspot:ce,hideHotspot:se,focusHotspot:de,getActiveHotspotId:pe,lookToHotspot:ve,customization:{openAR:oe,renderQRCode:te,getViewerURL:ne},getSceneTree:me,playAnimation:fe,pauseAnimation:ge,stopAnimation:be,downloadGlb:re,takeSnapshot:he,updateBackground:we})},glbSrc:$})),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}})}}]);