https://www.belvilla.com/assets/desktop/yoImageUploadTemplate.7a6f73153b75e2393832.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[1038],{12314:(e,t,n)=>{n.r(t),n.d(t,{default:()=>te});var r=n(41322),o=n(98661),a=n(61811),i=n.n(a),c=n(37101),l=n(61409),s=n(75025),u=n(53572),f=n(79280),p=n(83064),d=n(91211),m=n(95239),g=n(57154),y=n(27763),b=(n(55900),(0,r.css)("border-color:",g.HM,";color:",g.HM,";")),h=(0,r.css)("color:",g.HM,";margin-top:8px;font-size:12px;text-align:center;"),v=(0,r.css)({name:"10nbs9",styles:"width:150px;height:104px;border-radius:6px;"}),x=(0,r.css)({name:"z5lv7",styles:"position:relative;width:150px;height:104px;border-radius:6px;margin:16px 16px 0px 0px;"}),w=(0,r.css)({name:"mad44o",styles:"background:white;font-size:14px;border-radius:4px;position:absolute;bottom:8px;padding:4px;left:100px;"}),C=(0,r.css)({name:"npfjef",styles:"opacity:0.54;font-size:12px;margin:10px 20px 0 20px;font-weight:500;font-stretch:normal;font-style:normal;line-height:1.14;letter-spacing:normal;text-align:center;"}),k=(0,r.css)("overflow:hidden;width:100%;height:100%;border-radius:4px;border:solid 1px ",y.tm,";background-color:rgba(52,69,89,0.02);display:flex;flex-direction:column;align-items:center;justify-content:center;"),O=(0,r.css)({name:"1kz3i44",styles:"position:absolute;bottom:30%;left:64px;background:rgb(0,0,0,0.3);border-radius:50%;padding:3px 3px 0px 3px;"}),j=(0,r.css)("& circle{stroke:",y.Gf," !important;}");function E(e){return E="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},E(e)}function I(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function P(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function N(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function _(e,t){return _=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},_(e,t)}function S(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=H(e);if(t){var o=H(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return D(this,n)}}function D(e,t){if(t&&("object"===E(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function H(e){return H=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},H(e)}var U=[".png",".jpg",".jpeg"],M=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&_(e,t)}(c,e);var t,n,a,i=S(c);function c(){return P(this,c),i.apply(this,arguments)}return t=c,n=[{key:"render",value:function(){var e=this.props,t=e.onCrossClick,n=e.onClick,a=e.onChange,i=e.value,c=e.error,l=e.imageData,s=e.isMandatoryField,u=e.imageContainerClass,g=e.imageInputWrapper,y=e.imgBlockClass,E=e.LabelIcon,P=e.uploaderLabel,N=e.imageClass,_=e.errorClass,S=e.crossContainerClass,D=e.onImageClick,H=e.acceptVal,M=e.imageUploaderIndex,z=e.capture,B=l.labelCta,L=P||(s?"".concat(l.label,"*"):l.label),R="number"==typeof M?M:l;return o.default.createElement("div",{className:g},o.default.createElement("div",{className:(0,r.cx)(x,u)},o.default.createElement("label",{htmlFor:l.fieldKey,className:(0,r.cx)(k,y,I({},b,c))},i&&o.default.createElement("div",{onClick:function(){return D&&D(M)}},o.default.createElement("img",{alt:l.fieldKey,className:(0,r.cx)(v,N),src:i})),!i&&(l.loading&&o.default.createElement(m.Z,{loaderClassName:j})||(E?o.default.createElement(E,null):o.default.createElement(d.Zb,null))),!i&&o.default.createElement("div",{className:C},L),i&&B&&o.default.createElement("span",{className:w},B),i&&o.default.createElement("div",{onClick:function(e){return t(e,R)},className:(0,r.cx)(O,S)},o.default.createElement(f.Ji,{matchContainer:!0})))),c&&o.default.createElement("div",{className:(0,r.cx)(h,_)},c),o.default.createElement("input",{id:l.fieldKey,onClick:n,onChange:function(e){return a(e,R)},className:p.o6b,type:"file",accept:H||U.join(","),capture:z}))}}],n&&N(t.prototype,n),a&&N(t,a),Object.defineProperty(t,"prototype",{writable:!1}),c}(o.default.PureComponent),z=n(45023),B=n(82994),L=n(77235),R=n(86646),V=n(35600),W=n(72701),F=n(85087),Z=n(99114);function A(e){return A="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},A(e)}function T(){return T=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},T.apply(this,arguments)}function J(e,t,n,r,o,a,i){try{var c=e[a](i),l=c.value}catch(e){return void n(e)}c.done?t(l):Promise.resolve(l).then(r,o)}function K(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function q(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function G(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function Y(e,t){return Y=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e},Y(e,t)}function Q(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=ee(e);

1if(t){var o=ee(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return X(this,n)}}function X(e,t){if(t&&("object"===A(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return $(e)}function $(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function ee(e){return ee=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)},ee(e)}const te=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&Y(e,t)}(g,e);var t,n,a,f,d,m=Q(g);function g(e){var t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,g),t=m.call(this,e);for(var n=[],r=(0,R.NA)(e,"nodeContent.additionalInformation.max_images",z.vvT),o=0;o<r;o+=1)n.push({fieldKey:"yo_image_uploader_".concat(o+1),imageUrl:null,error:null,loading:!1});return t.state={imagesData:n,imagesUploaded:0,selectedImageIndex:null},i()($(t)),t}return t=g,n=[{key:"componentDidMount",value:function(){var e=this.props,t=e.exitNodeRef,n=void 0===t?{}:t,r=e.yoHeaderRef,o=void 0===r?{}:r;n.current&&n.current.classList.add(p.o6b),o.current&&o.current.classList.add(p.o6b)}},{key:"componentWillUnmount",value:function(){var e=this.props,t=e.exitNodeRef,n=void 0===t?{}:t,r=e.yoHeaderRef,o=void 0===r?{}:r;n.current&&n.current.classList.remove(p.o6b),o.current&&o.current.classList.remove(p.o6b)}},{key:"getImagesDataCopy",value:function(){return this.state.imagesData.map((function(e){return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?K(Object(n),!0).forEach((function(t){q(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):K(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},e)}))}},{key:"uploadImage",value:function(e,t,n){var r=this,o=this.state.imagesUploaded,a=this.props,i=a.actions,c=(i=void 0===i?{}:i).yoImageUpload,l=a.nodeContent,s=this.getImagesDataCopy(),u={encoded_file:n,file_type:"image",file_name:t,sessionId:(0,R.NA)(l,"additionalInformation.action.api_info.sessionId"),access_token:(0,L.ej)("token"),source:"IMAGEUPLOAD"};c&&c({onStart:function(){s[e].loading=!0,r.setState({imagesData:s})},onSuccess:function(t){s[e].imageUrl=t.data.file_url,s[e].error=null,s[e].loading=!1,r.setState({imagesData:s,imagesUploaded:o+1})},onError:function(t){s[e].imageUrl=null,s[e].error=t.error,s[e].loading=!1,r.setState({imagesData:s})},body:u})}},{key:"deleteImage",value:function(e,t,n){e.preventDefault();var r=this.state.imagesUploaded,o=this.getImagesDataCopy();o[t].imageUrl=null,o[t].error=null,this.setState({imagesData:o,imagesUploaded:r-1,selectedImageIndex:null},(function(){return n&&l.mW.goBack()})),e.stopPropagation()}},{key:"onChange",value:(f=regeneratorRuntime.mark((function e(t,n){var r,a,i;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=t.target.files[0],t.target.value="",!(r&&r.size/1024<=10240)){e.next=9;break}return e.next=5,(0,B.hv)(r,!0);case 5:a=e.sent,this.uploadImage(n,r&&r.name,a),e.next=13;break;case 9:(i=this.getImagesDataCopy())[n].error=o.default.createElement(c.FormattedMessage,Z.d.fileSizeError),i[n].imageUrl=null,this.setState({imagesData:i});case 13:case"end":return e.stop()}}),e,this)})),d=function(){var e=this,t=arguments;return new Promise((function(n,r){var o=f.apply(e,t);function a(e){J(o,n,r,a,i,"next",e)}function i(e){J(o,n,r,a,i,"throw",e)}a(void 0)}))},function(e,t){return d.apply(this,arguments)})},{key:"onImageClick",value:function(e){(0,s.DI)({modal:"selectedImage"}),this.setState({selectedImageIndex:e+1})}},{key:"onButtonClick",value:function(e){var t=this.state,n=t.imagesData,r=t.selectedImageIndex,a=t.imagesUploaded,i=this.props.buttonTypeHelper;if(r)this.deleteImage(e,r-1,!0);else if(a){var s=[];

1n.forEach((function(e){e.imageUrl&&s.push(e.imageUrl)}));var u={attachments:s};i.removeListOption(e,!0,o.default.createElement(c.FormattedMessage,T({},Z.d.imageAttached,{values:{count:a}})),u),l.mW.goBack()}}},{key:"onBackButtonClick",value:function(){this.state.selectedImageIndex?this.setState({selectedImageIndex:null},(function(){l.mW.goBack()})):l.mW.goBack()}},{key:"render",value:function(){var e,t=this,n=this.state,a=n.imagesData,i=n.imagesUploaded,l=n.selectedImageIndex,s=this.props,f=s.nodeContent,d=(f=void 0===f?{}:f).additionalInformation,m=(d=void 0===d?{}:d).action,g=d.add_image,y=d.delete_image,b=d.upload_image,h=d.max_images_text,v=s.popUpStates,x=(v=void 0===v?{}:v).selectedImage;return o.default.createElement("div",{className:(0,r.cx)(W._U,q({},W.Ob,x))},o.default.createElement(u.Z,{onClickFn:this.onBackButtonClick,wrapperClassName:(0,r.cx)(W.A7,q({},W.bc,x)),noShadow:!0}),o.default.createElement("div",{className:(0,r.cx)(W.vq,q({},p.o6b,x))},o.default.createElement(c.FormattedMessage,T({},Z.d.imagesSelected,{values:{count:i}})),o.default.createElement("div",{className:W.tH},h)),o.default.createElement("div",{className:(0,r.cx)(W.FZ,q({},p.o6b,x))},a.map((function(e,n){return o.default.createElement(M,{imageData:e,uploaderLabel:g,acceptVal:"image/*",value:e&&e.imageUrl,error:e&&e.error,errorClass:W.YQ,imageInputWrapper:W.aW,imageContainerClass:W.LM,imgBlockClass:(0,r.cx)(W.aO,q({},p.Y4J,e&&e.imageUrl)),imageClass:W.L,crossContainerClass:W.LN,LabelIcon:F.xm,onChange:t.onChange,onClick:function(t){return e&&e.imageUrl&&t.preventDefault()},onCrossClick:t.deleteImage,onImageClick:t.onImageClick,imageUploaderIndex:n,capture:!0})}))),x&&l&&o.default.createElement(V.Z,{wrapperClassName:W.F1,src:a[l-1].imageUrl}),o.default.createElement("div",{className:(0,r.cx)(W.jH,q({},W.U,x))},o.default.createElement("div",{className:(0,r.cx)(W.Lq,(e={},q(e,W.s1,!i),q(e,W.kJ,x),e)),"data-type":m&&m.type,"data-node-content":JSON.stringify(m&&m.api_info),onClick:this.onButtonClick},o.default.createElement("div",{className:W.kE},x?y:b))))}}],n&&G(t.prototype,n),a&&G(t,a),Object.defineProperty(t,"prototype",{writable:!1}),g}(o.Component)},53572:(e,t,n)=>{n.d(t,{Z:()=>x});var r=n(41322),o=n(98661),a=n(79280),i=n(61409),c=n(27763),l=n(55900),s=(0,r.css)("height:56px;box-shadow:inset 0px -1px 0px rgba(0,0,0,0.12);background-color:",c.ix,";display:flex;align-items:center;padding:0 16px;box-sizing:border-box;"),u=(0,r.css)(l.EH,""),f=(0,r.css)("font-size:14px;font-weight:400;color:",c.v7,";"),p=(0,r.css)({name:"1fpdoqt",styles:"display:flex;flex-direction:column;justify-content:center;margin-left:16px;"}),d=(0,r.css)({name:"94c8m7",styles:"box-shadow:none;border-bottom:none;"}),m=(0,r.css)({name:"1b7bwed",styles:"position:fixed;"}),g=(0,r.css)({name:"1d47e10",styles:"height:20px;width:20px;z-index:20;"}),y=(0,r.css)({name:"f69wld",styles:"text-align:center;color:white;font-size:16px;"}),b=(0,r.css)({name:"1v0kgdb",styles:"width:100%;position:absolute;left:0;margin:0;"});function h(){return h=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},h.apply(this,arguments)}function v(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}const x=function(e){var t,n=e.wrapperClassName,c=void 0===n?"":n,l=e.title,x=void 0===l?"":l,w=e.subtitle,C=void 0===w?"":w,k=e.onClickFn,O=e.noShadow,j=e.isFixed,E=e.iconClassName,I=void 0===E?"":E,P=e.iconProps,N=void 0===P?{}:P,_=e.isTextCenter,S=e.showOldButton;e.openedInWebView;return o.default.createElement("div",{className:(0,r.cx)(s,c,(t={},v(t,d,O),v(t,m,j),t))},S?o.default.createElement(a.xCe,h({lazyLoad:!0,className:(0,r.cx)(g,I),onClick:function(e){"function"==typeof k?k(e):i.mW.goBack()}},N)):o.default.createElement(a.Ji,h({lazyLoad:!0,className:(0,r.cx)(g,I),onClick:function(e){"function"==typeof k?k(e):i.mW.goBack()}},N)),o.default.createElement("div",{className:(0,r.cx)(p,v({},b,_))},x&&o.default.createElement("div",{className:(0,r.cx)(u,v({},y,_))}," ",x," "),C&&o.default.createElement("div",{className:f}," ",C," ")))}},91211:(e,t,n)=>{n.d(t,{Zb:()=>l,nS:()=>s});var r=n(98661),o=n(37333),a=(n(79761),n(17895)),i=n(53891);function c(){return c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c.apply(this,arguments)}var l=function(e){return r.default.createElement(o.Z,c({},e,{src:a}))},s=function(e){return r.default.createElement(o.Z,c({},e,{src:i}))}},53891:e=>{e.exports="data:image/svg+xml,%3csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3ccircle cx='20' cy='20' r='20' fill='%232298DA' fill-opacity='0.08'/%3e %3cpath d='M26.6667 26V24.6667C26.6667 23.9594 26.3857 23.2811 25.8856 22.781C25.3855 22.281 24.7072 22 24 22H19.3333C18.6261 22 17.9478 22.281 17.4477 22.781C16.9476 23.2811 16.6667 23.9594 16.6667 24.6667V26M24.3333 16.6667C24.3333 18.1394 23.1394 19.3333 21.6667 19.3333C20.1939 19.3333 19 18.1394 19 16.6667C19 15.1939 20.1939 14 21.6667 14C23.1394 14 24.3333 15.1939 24.3333 16.6667Z' stroke='%232298DA' stroke-linecap='round' stroke-linejoin='round'/%3e %3cpath d='M15.3333 17.3333V21.3333M17.3333 19.3333H13.3333' stroke='%232298DA' stroke-linecap='round' stroke-linejoin='round'/%3e %3c/svg%3e"},17895:e=>{e.exports="data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='26' height='37' viewB

1ox='0 0 26 37'%3e %3cg opacity='.87'%3e %3cpath d='M23.92 2.586h-7.757l1.163-1.552c.215-.285.157-.69-.129-.904-.285-.214-.69-.157-.904.13l-1.747 2.326H11.39L10.276.358c-.16-.32-.549-.448-.868-.29-.32.16-.449.549-.289.868l.826 1.65H1.94c-1.07 0-1.94.87-1.94 1.94v30.27c0 1.069.87 1.939 1.94 1.939h21.98c1.07 0 1.94-.87 1.94-1.94V4.525c0-1.069-.87-1.939-1.94-1.939zm.647 32.21c0 .356-.29.646-.646.646H1.94c-.357 0-.647-.29-.647-.647V4.525c0-.356.29-.646.647-.646h8.651l.647 1.293c-.544.475-.894 1.163-.894 1.94 0 1.426 1.16 2.586 2.586 2.586s2.586-1.16 2.586-2.586c0-1.427-1.16-2.586-2.586-2.586-.185 0-.366.02-.54.058l-.353-.705H23.92c.357 0 .646.29.646.647v30.27zM11.852 6.4l.5 1c.113.226.341.357.579.357.097 0 .196-.022.288-.068.32-.16.449-.548.29-.867l-.499-.996c.675.042 1.213.6 1.213 1.285 0 .713-.58 1.293-1.293 1.293s-1.293-.58-1.293-1.293c0-.263.08-.507.215-.711z' opacity='.7'/%3e %3cpath d='M19.395 26.507H6.465c-.357 0-.646.289-.646.646 0 .358.289.647.646.647h12.93c.358 0 .647-.29.647-.647 0-.357-.29-.646-.647-.646zM19.395 29.74H6.465c-.357 0-.646.288-.646.646 0 .357.289.646.646.646h12.93c.358 0 .647-.289.647-.646 0-.358-.29-.647-.647-.647zM16.81 23.92h2.585V10.99H6.465v12.93H16.81zm-6.466-1.292c0-1.427 1.16-2.586 2.586-2.586s2.586 1.16 2.586 2.586h-5.172zm.647-5.819c0-1.07.87-1.94 1.94-1.94 1.068 0 1.939.87 1.939 1.94 0 1.07-.87 1.94-1.94 1.94-1.07 0-1.94-.87-1.94-1.94zm-3.233 5.819V12.284h10.344v10.344H16.81c0-1.402-.75-2.628-1.866-3.31.737-.593 1.22-1.491 1.22-2.509 0-1.782-1.45-3.232-3.233-3.232-1.782 0-3.232 1.45-3.232 3.232 0 1.018.482 1.916 1.22 2.51-1.118.68-1.867 1.907-1.867 3.309H7.758z' opacity='.7'/%3e %3c/g%3e %3c/svg%3e"},79761:e=>{e.exports="data:image/svg+xml,%3csvg width='18' height='22' viewBox='0 0 18 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M11 1H3C2.46957 1 1.96086 1.21071 1.58579 1.58579C1.21071 1.96086 1 2.46957 1 3V19C1 19.5304 1.21071 20.0391 1.58579 20.4142C1.96086 20.7893 2.46957 21 3 21H15C15.5304 21 16.0391 20.7893 16.4142 20.4142C16.7893 20.0391 17 19.5304 17 19V7M11 1L17 7M11 1V7H17M13 12H5M13 16H5M7 8H5' stroke='%23212121' stroke-linecap='round' stroke-linejoin='round'/%3e %3c/svg%3e"}}]);