@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
1 lines • 7.09 kB
JavaScript
(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[22],{870:function(t,e){t.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'},939:function(t,e,i){"use strict";i.r(e),i.d(e,"AuWidgetDataDrivenEditor",(function(){return d})),i.d(e,"widget",(function(){return d}));var s=i(0),a=i(1),n=i(2),r=i(160),o=i(870);let d=class extends r.c{constructor(){super(),this.previewUrls=[],this._frameIsReady=!1,this._isReadyEmitted=!1,this._frameIsIniting=!1,this._initIFrame=this._initIFrame.bind(this)}async exportWidgetData(t){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(t,e){this._isRestoring=!0,this._getEditorElement().then((async()=>{var e;const i=null!==(e=this.params.config)&&void 0!==e?e:{},s=Object.assign(Object.assign({},i),{access:Object.assign(Object.assign({},i.access),t.access),design:Object.assign(Object.assign({},i.design),t.design)});this.stateId=t.design.designId,this.userId=t.access.userId,await this.setEditorConfig(s)})),this._isRestoring=!1,this.emitChange()}updateParams(t,e){}async updateParamsAsync(t,e){if(await super.updateParamsAsync(t,e),!t.config||this._frameIsReady||this._frameIsIniting||await this._initIFrame(),this._element=this._getEditorEl(),!this._element||!this._frameIsReady)return;if(null==t.config)return;this.params=t,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({},t.config),{access:Object.assign({userId:this.userId,tenantId:null==r?void 0:r.toString(),token:i},t.config.access),api:Object.assign({assetProcessor:s,assetStorage:n,designAtoms:a,backOffice:o},t.config.api),settings:Object.assign({lang:d},t.config.settings),translation:c});this.setEditorConfig(h).then((()=>this._emitOnReady())),this._scheduleTokenUpdate(t.config),this._element.$isValid.subscribe((t=>{this.isValid=t,this.emitChange()}))}_emitOnReady(){if(!1===this._isReadyEmitted){const t=[].concat(this.params.onReady).filter((t=>t));a.a.functionWrapperConstructor(t)(),this._isReadyEmitted=!0}}_scheduleTokenUpdate(t){var e;this._timerId&&(clearInterval(this._timerId),a.a.jwtTokenIsExpired(null!==(e=this._token)&&void 0!==e?e:this.driver.backOffice.token)&&this._updateToken(t)),this._timerId=setInterval((async()=>this._updateToken(t)),27e5)}async _updateToken(t){var e,i,s;const a=null!==(s=null!==(e=t.api.backOffice)&&void 0!==e?e:null===(i=this.driver.backOffice)||void 0===i?void 0:i.backOfficeUrl)&&void 0!==s?s:"";a&&(this._token=await this._getToken({backOfficeUrl:a,tenantId:t.access.tenantId,userId:this.driver.user.id}),this._element.updateToken&&this._element.updateToken(this._token))}async _getToken({backOfficeUrl:t,tenantId:e,userId:i}){const{storefrontId:s}=this.driver.backOffice,n=a.a.ensureEndsWith(t,"/")+`/api/v1/tenants/${e}/integrations/gettoken`,r=window.location.origin,o=await fetch(n,{method:"post",headers:{"Content-type":"application/json"},body:JSON.stringify({userGuid:i,ecommerceDomain:r,origin:r,storefrontId:s})});return(await o.json()).result}async getLocalization(t){var e,i;const s=null===(i=null===(e=this.driver)||void 0===e?void 0:e.localization)||void 0===i?void 0:i.find((t=>"data-driven-editor"===t.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(t)?a.a.DeepMerge(n,s.data):a.a.DeepMerge(n,{[t]:s.data}));return n}async setEditorConfig(t){await this._element.setEditorConfig(t)}setLang(t){this._element.setLang(t)}updateToken(t){}async createPdfPreview(t){t=t||this.params.config.renderer;try{return this.pdfUrl=await this._element.getPdfPreview(t),this.emitChange(),this.pdfUrl}catch(e){return this.showToast("Error: can't create pdf file."),""}}async createPreview(t){t=t||this.params.config.renderer;try{const{width:t,height:e}=this.params.config.preview;return this.previewUrls=await this._element.getPreview(this.stateId,t,e),this.emitChange(),this.previewUrls}catch(e){return this.showToast("Error: can't create preview images."),[]}}async createIdStr(){return this.idStr=await this._element.getIdString(),this.emitChange(),this.idStr}async saveProduct(t){this.stateId=await this._element.save(t);const{width:e,height:i}=this.params.config.preview;this.previewUrlLink=await this._element.getPreviewLink(this.stateId,e,i),this.emitChange()}validate(){return this._element.validate()}setUserInfo(t){this._element.setUserInfo(t)}getFormData(t){return this._element.getFormData(t)}_getEditorEl(){if(this._element)return this._element;{const t=this._iframeDoc.getElementById("dd-editor");return window.Aurigma=Object.assign(window.Aurigma,this._iframeWin.contentWindow.Aurigma),t}}async _initIFrame(){this._frameIsIniting=!0,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 t=await this._getWorkflowElementsBaseUrl();this._iframeDoc.write(`<link href="${t}/data-driven-editor/styles.css" rel="stylesheet">`);const e=this._iframeDoc.createElement("script");return e.src=`${t}/data-driven-editor/index.js`,this._iframeDoc.body.appendChild(e),this._frameIsReady=!0,this._frameIsIniting=!1,new Promise(((t,i)=>{e.onload=()=>t(),e.onerror=()=>{i("Can't load widget script!"),this._iframeDoc.write("Can't load widget script!")}}))}async _getWorkflowElementsBaseUrl(){const{backOfficeUrl:t,tenantId:e,token:i}=this.driver.backOffice;if(null!=t){const s=a.a.removeTrailingSlash(t),n=await fetch(`${s}/api/storefront/v1/tenant-info/applications?tenantId=${e}`,{headers:{Authorization:`Bearer ${i}`}});return(await n.json()).workflowElementsUrl}this._iframeDoc.write("This widget unsupported work without Back Office services!")}_getEditorElement(){return new Promise(((t,e)=>{if(this._element)t(this._element);else{const e=()=>{setTimeout((async()=>{this._iframeDoc&&(this._element?t(this._element):e())}),200)};e()}}))}};d=Object(s.a)([Object(n.a)("au-widget-data-driven-editor",o),Object(s.b)("design:paramtypes",[])],d)}}]);