"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[77074],{77074:function(e,t,i){i.r(t),i.d(t,{Flowpage:function(){return Flowpage},Form:function(){return Form},Manager:function(){return BigImage_Manager},maskTypeOptions:function(){return X}});var r=i(93828),a=i(29362),n=i(89932),l=i(52853),d=i(22527),o=i(84646),u=i(80578),c=i(77862),s=i(47423),g=i(1267),m=i(86692),h=i(56917),p=i(80479),k=i(20302),Z=i(77522),b=i(58166),v=i(71524),x=i(85521),I=i(44947),y=i(77764),E=i(52768),w=i(47229),C=i(72554),f=i(46419),B=i(95679),R=i(26407),L=i(38734),T=i(44391),O=i(95788);let useBigImageFormState=e=>{var t,i,r,a;let{curr:n,order:l,handleClose:d}=e,o=n?n.id:(0,O.Z)(),u="bigImage",c=(0,f.lq)(null==n?void 0:n.actionData,"maskType"),s=(0,T.H)(),{register:g,setValue:m,handleSubmit:h,watch:p,formState:Z}=(0,E.cI)({defaultValues:{image:null!==(r=null==n?void 0:n.thumbNailImgUrl)&&void 0!==r?r:"",maskType:null!==(a=null==c?void 0:c.maskType)&&void 0!==a?a:k.O.RECTANGLE}}),b=p(),v=(0,C.aQ)(b.maskType),x=b[I.a.image]?void 0:null===(i=Z.errors)||void 0===i?void 0:null===(t=i[I.a.image])||void 0===t?void 0:t.message,A=(0,B.P)(),onSubmit=async()=>{await s({curr:n,image:b.image,widgetType:u,actionData:{maskType:b.maskType},fields:{id:o,order:l}}),d()},S=(0,R.useMemo)(()=>({...w.dS,id:o,order:l,thumbNailImgUrl:b.image||v,provider:y.kB.WIDGET,type:u,actionData:{maskType:b.maskType}}),[b.image,b.maskType]),{setValue:D}=(0,L.Ci)(S,m);return(0,R.useEffect)(()=>{g(I.a.maskType),g(I.a.image,{required:"Please select an image"})},[g]),{formTitle:"".concat(n?"Edit this":"Add an"," Image"),formValues:b,imageErrorMessage:x,setValue:D,handleSubmit:h(onSubmit),deleteImageLink:()=>{A({linkId:o,linkOrder:l}),d()}}};var A=i(29268),S=i(35156),D=i.n(S);let X=[{value:k.O.CIRCLE,title:D()(k.O.CIRCLE)},{value:k.O.SQUARE,title:D()(k.O.SQUARE)},{value:k.O.RECTANGLE,title:D()(k.O.RECTANGLE)}],Form=e=>{let{curr:t,order:i,handleClose:n}=e,{formTitle:o,formValues:g,handleSubmit:m,setValue:h,deleteImageLink:p,imageErrorMessage:k}=useBigImageFormState({curr:t,order:i,handleClose:n});return(0,r.BX)(c.J7,{onSubmit:m,children:[(0,r.BX)(d.x,{width:"100%",display:["none","none","flex"],children:[(0,r.tZ)(s.E,{src:a.go,height:"20px",width:"20px"}),(0,r.tZ)(b.LZ,{mr:"8px"}),(0,r.tZ)(v.xv,{color:"primary.black",variant:"button/general",children:o})]}),(0,r.tZ)(u.i,{display:["none","none","block"]}),(0,r.tZ)(l.cd,{imageUrl:g.image,setValue:h,id:"big-image-picker"}),k&&(0,r.tZ)(v.xv,{mb:"8px",color:"status.errorDark",children:k}),(0,r.BX)(d.x,{justifyContent:"space-between",children:[(0,r.BX)(Z.kq,{height:"40px",width:"49%",borderColor:"status.errorDark",onClick:p,type:"button",children:[(0,r.tZ)(s.E,{src:x.WTX}),(0,r.tZ)(b.LZ,{mr:"8px"}),(0,r.tZ)(v.xv,{variant:"button/general",color:"status.errorDark","data-testid":"delete-link-btn",children:"Delete Image"})]}),(0,r.tZ)(Z.KM,{width:"49%",height:"40px",type:"submit",label:"Save Image"})]})]})},Flowpage=e=>{let{link:t}=e;return(0,r.tZ)(l.kh,{link:t})},BigImage_Manager=e=>{let{link:t,handle:i,editWidget:a}=e,{onDeleteLink:u,deleteLinkModeActive:c,toggleDeleteMode:s,showEditLink:k,setShowEditLink:Z,toggleActivate:v,isActive:x,managerContainerStyles:I,hasViewOnlyAccess:y,toggleEditMode:E,childOnClick:w,isTemplateConfigLocked:C}=(0,A.a)(t,a);return(0,r.BX)(g.eI,{showEditLink:k,padding:k?"0":"16px 0 0 0",viewOnly:y||C,...I.deactivatedContainerStyles,children:[k?(0,r.tZ)(m.y,{handleClose:()=>Z(!1)}):(0,r.BX)(d.x,{width:"100%",alignItems:"center",children:[!C&&(0,r.tZ)(p.N,{onClickEdit:E,onClickDelete:s,disabled:y,deleteModeActive:c,viewOnly:y}),C&&(0,r.tZ)(h.a,{}),(0,r.tZ)(b.LZ,{mr:"16px"}),(0,r.tZ)(d.x,{width:"100%",justifyContent:"center",onClick:w,children:(0,r.tZ)(l.kh,{isEditLinkPreview:!0,link:t})}),(0,r.BX)(r.HY,{children:[(0,r.tZ)(n.L,{viewOnly:y||C,toggleActivated:v,activated:x}),(0,r.tZ)(b.LZ,{mr:"12px"}),!y&&i,(0,r.tZ)(b.LZ,{mr:y?"52px":"12px"})]})]}),(0,r.tZ)(b.LZ,{mb:"16px"}),!k&&(0,r.tZ)(o.j,{deleteModeActive:c,toggleDeleteMode:s,onDelete:u})]})}},52853:function(e,t,i){i.d(t,{cd:function(){return BigImagePickerAndEditor},kh:function(){return BigImageComponent}});var r=i(93828),a=i(29362),n=i(44947),l=i(22527),d=i(26407),o=i(94809),u=i(89845),c=i(47423),s=i(77522),g=i(38260),m=i(58166),h=i(71524),p=i(42274),k=i(72554),Z=i(49817),b=i(85521),v=i(19825);let BigImageComponent=e=>{let{link:t,isEditLinkPreview:i}=e,{actionData:a,thumbNailImgUrl:n}=t,{borderRadius:d,width:o,height:u}=(0,k.vx)(null==a?void 0:a.maskType);return(0,r.tZ)(l.x,{justifyContent:"center",width:"100%",children:(0,r.tZ)(c.E,{src:n,width:i?o:"100%",height:i?u:"initial",borderRadius:d})})},BigImagePickerAndEditor=e=>{let{id:t,imageUrl:i,setValue:s,addCopy:b="Add Image",imageFormFieldName:x=u.FormFields.IMAGE,maskTypeFormFieldName:I=n.a.maskType,deleteImage:y=!1}=e,{resultImageUrl:E,maskType:w,openImageEditModal:C}=(0,v.I)();(0,d.useEffect)(()=>{s(x,E||void 0),s(I,w)},[w,E]);let{width:f,height:B,borderRadius:R}=(0,k.vx)(w);return(0,r.tZ)(r.HY,{children:(0,r.BX)(l.x,{display:"block",children:[(0,r.tZ)(o.a6,{handleUpload:e=>{var t;let i=null===(t=e.target.files)||void 0===t?void 0:t[0];i&&((0,p.b)(i.size)?(0,Z._p)("Image is too large to upload (size limit 10MB)"):C({sourceImageUrl:URL.createObjectURL(i),maskType:w}))},id:t,position:"relative",width:"100%",children:(0,r.tZ)(l.x,{justifyContent:"center",children:i?(0,r.tZ)(c.E,{src:i||"",width:f,height:B,borderRadius:R}):(0,r.BX)(g.$,{width:f,height:B,borderRadius:R,bg:"primary.grey",display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",children:[(0,r.tZ)(c.E,{src:a.I_,width:"25px"}),(0,r.tZ)(m.LZ,{mb:"8px"}),(0,r.tZ)(h.xv,{variant:"input/label",color:"primary.white",children:b})]})})}),(0,r.tZ)(m.LZ,{mb:"8px"}),(0,r.tZ)(l.x,{display:"block"}),i&&(0,r.BX)(l.x,{children:[y&&(0,r.tZ)(DeleteImageButton,{onClick:()=>s(x,null)}),(0,r.tZ)(EditImageButton,{onClick:()=>{i&&C({sourceImageUrl:i,maskType:w})}})]})]})})},EditImageButton=e=>{let{onClick:t}=e;return(0,r.BX)(s.kq,{height:"40px",width:"100%",borderColor:"primary.flowBlue",onClick:t,mb:"8px",type:"button",children:[(0,r.tZ)(c.E,{src:a.$T,width:"20px",height:"20px"}),(0,r.tZ)(m.LZ,{mr:"8px"}),(0,r.tZ)(h.xv,{variant:"button/general",color:"primary.flowBlue","data-testid":"delete-link-btn",children:"Edit Image"})]})},DeleteImageButton=e=>{let{onClick:t}=e;return(0,r.BX)(s.kq,{height:"40px",width:"100%",borderColor:"status.errorDark",onClick:t,mb:"8px",mr:"8px",type:"button",children:[(0,r.tZ)(c.E,{src:b.WTX,width:"20px",height:"20px"}),(0,r.tZ)(m.LZ,{mr:"8px"}),(0,r.tZ)(h.xv,{variant:"button/general",color:"status.errorDark",children:"Delete Image"})]})}},44947:function(e,t,i){var r,a;i.d(t,{a:function(){return r}}),(a=r||(r={})).maskType="maskType",a.image="image"},72554:function(e,t,i){i.d(t,{JY:function(){return getCRMImageStyle},aQ:function(){return getBigImagePlaceholder},vx:function(){return getBigImageStyle}});var r=i(20302);let getCRMImageStyle=e=>{switch(e){case r.O.SQUARE:return{width:70,height:70,borderRadius:8};case r.O.CIRCLE:return{width:70,height:70,borderRadius:"50%"};case r.O.RECTANGLE:return{width:125,height:70,borderRadius:8};default:return{width:"100%",borderRadius:8}}},getBigImageStyle=e=>{switch(e){case r.O.SQUARE:return{width:140,height:140,borderRadius:8};case r.O.CIRCLE:return{width:140,height:140,borderRadius:"50%"};case r.O.RECTANGLE:return{width:249,height:140,borderRadius:8};default:return{width:"100%",borderRadius:8}}},getBigImagePlaceholder=e=>{switch(e){case r.O.SQUARE:case r.O.CIRCLE:return"/static/placeholders/BigImage-square-placeholder.png";case r.O.RECTANGLE:default:return"/static/placeholders/BigImage-rectangle-placeholder.png"}}}}]);
//# sourceMappingURL=77074.7fca7d0067ae952d.js.map