@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
1 lines • 6.82 kB
JavaScript
(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[22],{869:function(e,t){e.exports='<style>\n :host {\n width: 100%;\n height: 100%;\n }\n</style>\n\n<iframe id="frameID" width="100%" height="100%" style="border: none"></iframe>\n'},940:function(e,t,i){"use strict";i.r(t),i.d(t,"AuWidgetDataDrivenEditor",(function(){return d})),i.d(t,"widget",(function(){return d}));var s=i(0),a=i(1),n=i(2),r=i(160),o=i(869);let d=class extends r.c{constructor(){super(),this.previewUrls=[],this._frameIsReady=!1,this._isReadyEmitted=!1,this._initIFrame=this._initIFrame.bind(this)}async exportWidgetData(e){return this.params?{design:{designId:this.stateId,isPrivateDesign:!0,designPath:this.params.config.design.designPath,dataSetId:this.params.config.design.dataSetId},access:{userId:this.userId}}:{}}async restoreWidgetFromData(e,t){this._isRestoring=!0,this._getEditorElement().then((async()=>{var t;const i=null!==(t=this.params.config)&&void 0!==t?t:{},s=Object.assign(Object.assign({},i),{access:Object.assign(Object.assign({},i.access),e.access),design:Object.assign(Object.assign({},i.design),e.design)});this.stateId=e.design.designId,this.userId=e.access.userId,await this.setEditorConfig(s)})),this._isRestoring=!1,this.emitChange()}updateParams(e,t){}async updateParamsAsync(e,t){if(await super.updateParamsAsync(e,t),e.config&&!this._frameIsReady&&await this._initIFrame(),this._element=this._getEditorEl(),!this._element)return;if(null==e.config)return;this.params=e,this.userId=this.driver.user.id;const{token:i,assetProcessorUrl:s,designAtomsApiUrl:a,assetStorageUrl:n,tenantId:r,backOfficeUrl:o}=this.driver.backOffice,d=this.language.slice(0,2),c=await this.getLocalization(d),h=Object.assign(Object.assign({},e.config),{access:Object.assign({userId:this.userId,tenantId:null==r?void 0:r.toString(),token:i},e.config.access),api:Object.assign({assetProcessor:s,assetStorage:n,designAtoms:a,backOffice:o},e.config.api),settings:Object.assign({lang:d},e.config.settings),translation:c});this.setEditorConfig(h).then((()=>this._emitOnReady())),this._scheduleTokenUpdate(e.config),this._element.$isValid.subscribe((e=>{this.isValid=e,this.emitChange()}))}_emitOnReady(){if(!1===this._isReadyEmitted){const e=[].concat(this.params.onReady).filter((e=>e));a.a.functionWrapperConstructor(e)(),this._isReadyEmitted=!0}}_scheduleTokenUpdate(e){this._timerId&&(clearInterval(this._timerId),this._updateToken(e)),this._timerId=setInterval((async()=>this._updateToken(e)),27e5)}async _updateToken(e){var t,i,s;const a=null!==(s=null!==(t=e.api.backOffice)&&void 0!==t?t:null===(i=this.driver.backOffice)||void 0===i?void 0:i.backOfficeUrl)&&void 0!==s?s:"";if(!a)return;const n=await this._getToken({backOfficeUrl:a,tenantId:e.access.tenantId,userId:this.driver.user.id});this._element.updateToken&&this._element.updateToken(n)}async _getToken({backOfficeUrl:e,tenantId:t,userId:i}){const s=a.a.ensureEndsWith(e,"/")+`/api/v1/tenants/${t}/integrations/gettoken`,n=window.location.origin,r=await fetch(s,{method:"post",headers:{"Content-type":"application/json"},body:JSON.stringify({userGuid:i,ecommerceDomain:n,origin:n})});return(await r.json()).result}async getLocalization(e){var t,i;const s=null===(i=null===(t=this.driver)||void 0===t?void 0:t.localization)||void 0===i?void 0:i.find((e=>"data-driven-editor"===e.app));let n={};if(s)if(a.a.isNotNullOrUndefined(s.url)&&!a.a.isEmptyString(s.url)&&"string"==typeof s.url)try{n=await a.a.loadJson(s.url+"?ts="+Date.now())}catch(r){console.error(r)}else a.a.isNotNullOrUndefined(s.data)&&"object"==typeof s.data&&0!==Object.keys(s.data).length&&(n=-1!==Object.keys(s.data).indexOf(e)?a.a.DeepMerge(n,s.data):a.a.DeepMerge(n,{[e]:s.data}));return n}async setEditorConfig(e){await this._element.setEditorConfig(e)}setLang(e){this._element.setLang(e)}updateToken(e){}async createPdfPreview(e){e=e||this.params.config.renderer;try{return this.pdfUrl=await this._element.getPdfPreview(e),this.emitChange(),this.pdfUrl}catch(t){return this.showToast("Error: can't create pdf file."),""}}async createPreview(e){e=e||this.params.config.renderer;try{const{width:e,height:t}=this.params.config.preview;return this.previewUrls=await this._element.getPreview(this.stateId,e,t),this.emitChange(),this.previewUrls}catch(t){return this.showToast("Error: can't create preview images."),[]}}async createIdStr(){return this.idStr=await this._element.getIdString(),this.emitChange(),this.idStr}async saveProduct(e){this.stateId=await this._element.save(e);const{width:t,height:i}=this.params.config.preview;this.previewUrlLink=await this._element.getPreviewLink(this.stateId,t,i),this.emitChange()}validate(){return this._element.validate()}setUserInfo(e){this._element.setUserInfo(e)}getFormData(e){return this._element.getFormData(e)}_getEditorEl(){if(this._element)return this._element;{const e=this._iframeDoc.getElementById("dd-editor");return window.Aurigma=Object.assign(window.Aurigma,this._iframeWin.contentWindow.Aurigma),e}}async _initIFrame(){this._iFrameEl=this.querySelectorShadow("#frameID"),this._iframeWin=this._iFrameEl||this._iFrameEl.contentWindow,this._iframeDoc=this._iFrameEl.contentDocument||this._iframeWin.document,this._iframeDoc.write('<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />'),this._iframeDoc.write('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />'),this._iframeDoc.write("<style> .mat-button-toggle-button { height: 100%; } </style>"),this._iframeDoc.write('<div style="width:100%; height:100%">\n<au-data-driven-editor id="dd-editor"></au-data-driven-editor>\n</div>');const e=await this._getWorkflowElementsBaseUrl();this._iframeDoc.write(`<link href="${e}/data-driven-editor/styles.css" rel="stylesheet">`);const t=this._iframeDoc.createElement("script");return t.src=`${e}/data-driven-editor/index.js`,this._iframeDoc.body.appendChild(t),this._frameIsReady=!0,new Promise(((e,i)=>{t.onload=()=>e(),t.onerror=()=>{i("Can't load widget script!"),this._iframeDoc.write("Can't load widget script!")}}))}async _getWorkflowElementsBaseUrl(){const{backOfficeUrl:e,tenantId:t,token:i}=this.driver.backOffice;if(null!=e){const s=a.a.removeTrailingSlash(e),n=await fetch(`${s}/api/storefront/v1/tenant-info/applications?tenantId=${t}`,{headers:{Authorization:`Bearer ${i}`}});return(await n.json()).workflowElementsUrl}this._iframeDoc.write("This widget unsupported work without Back Office services!")}_getEditorElement(){return new Promise(((e,t)=>{if(this._element)e(this._element);else{const t=()=>{setTimeout((async()=>{this._iframeDoc&&(this._element?e(this._element):t())}),200)};t()}}))}};d=Object(s.a)([Object(n.a)("au-widget-data-driven-editor",o),Object(s.b)("design:paramtypes",[])],d)}}]);