@bikdotai/bik-component-library 0.0.511-beta.tcm-3 → 0.0.511-beta.tcm-5

package/dist/cjs/components/template-context-mapper/modalElements/Body.js

@@ -3,7 +3,7 @@
 	//	height: 100%;
 `,C=v.default.div`
 	padding: 16px 14px;
-	max-width: 450px;
+	max-width: ${e=>e.channel===o.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
 	height: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
@@ -17,4 +17,4 @@
 	overflow-y: auto;
 	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');":"none"};
 	display: ${e=>e.hideDeviceContainerInPreview&&e.channel===o.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
-`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:v,whatsappSpecificPickerMeta:g,showVariableModal:P,variableList:w,discountCode:x,setDiscountCode:E,variableListForImage:j,showSampleValues:A,fileName:T,setFileName:N}=a,L=t.useRef(),y=t.useRef(),{device:S,display_content:_,channel:W,template:M,setTemplate:H,isWhatsappCarousel:V,isProductCarouselType:q,hideDeviceContainerInPreview:I}=s.useTemplateModalContext();const O=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(f,{children:[e.jsx(b,Object.assign({showOnlyContent:v,showVariableMapping:m,isWhatsappCarousel:V,hideDeviceContainerInPreview:I,channel:W},{children:"mobile"===S?e.jsx(c.default,{ref:y,display_content:null!=_?_:"",channel:W,template:M,showSampleValues:A}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(i.CarouselPreview,{ref:L,channel:W,template:M,showSampleValues:A,isPreview:!1}):W!==o.CHANNEL_TYPE.MESSAGE?e.jsx(u.default,{ref:L,channel:W,display_content:null!=_?_:"",showSampleValues:A}):e.jsx(e.Fragment,{})})),(q||m)&&e.jsx(C,Object.assign({channel:W,isWhatsappCarousel:V},{children:W!==o.CHANNEL_TYPE.WHATSAPP?e.jsx(h.default,{onFocus:W===o.CHANNEL_TYPE.EMAIL?function(e){var t,a,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===S?"template_html_mobile":"template_html_desktop"),s=r.getVariableNameForEmailByIndex(e+1),u=W===o.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(s):document.getElementById(s),p=O(u),c=null==u?void 0:u.offsetLeft;"desktop"===S?p&&L.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),d.highlightFor(s,n.COLORS.background.warning.light,2,W,S)):p&&y.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),d.highlightFor(s,n.COLORS.background.warning.light,2,W,S))}:void 0,showVariableModal:P,variableList:w,discountCode:x,setDiscountCode:E}):W===o.CHANNEL_TYPE.WHATSAPP&&V?e.jsx(l.default,{whatsappSpecificPickerMeta:g,template:M,showVariableModal:P,variableList:w,variableListForImage:j,discountCode:x,setDiscountCode:E}):e.jsx(p.default,{whatsappSpecificPickerMeta:g,template:M,onTemplateChange:e=>{null==H||H(e)},showVariableModal:P,variableList:w,variableListForImage:j,discountCode:x,setDiscountCode:E,fileName:T,setFileName:N})}))]})};
+`;exports.default=a=>{const{showVariableMapping:m,showOnlyContent:v,whatsappSpecificPickerMeta:P,showVariableModal:g,variableList:w,discountCode:x,setDiscountCode:E,variableListForImage:A,showSampleValues:j,fileName:N,setFileName:T}=a,L=t.useRef(),y=t.useRef(),{device:S,display_content:_,channel:M,template:W,setTemplate:H,isWhatsappCarousel:I,isProductCarouselType:V,hideDeviceContainerInPreview:q}=s.useTemplateModalContext();const O=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(f,{children:[e.jsx(b,Object.assign({showOnlyContent:v,showVariableMapping:m,isWhatsappCarousel:I,hideDeviceContainerInPreview:q,channel:M},{children:"mobile"===S?e.jsx(c.default,{ref:y,display_content:null!=_?_:"",channel:M,template:W,showSampleValues:j}):M===o.CHANNEL_TYPE.WHATSAPP&&I?e.jsx(i.CarouselPreview,{ref:L,channel:M,template:W,showSampleValues:j,isPreview:!1}):M!==o.CHANNEL_TYPE.MESSAGE?e.jsx(u.default,{ref:L,channel:M,display_content:null!=_?_:"",showSampleValues:j}):e.jsx(e.Fragment,{})})),(V||m)&&e.jsx(C,Object.assign({channel:M,isWhatsappCarousel:I},{children:M!==o.CHANNEL_TYPE.WHATSAPP?e.jsx(h.default,{onFocus:M===o.CHANNEL_TYPE.EMAIL?function(e){var t,a,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===S?"template_html_mobile":"template_html_desktop"),s=r.getVariableNameForEmailByIndex(e+1),u=M===o.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(s):document.getElementById(s),p=O(u),c=null==u?void 0:u.offsetLeft;"desktop"===S?p&&L.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,p),d.highlightFor(s,n.COLORS.background.warning.light,2,M,S)):p&&y.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),d.highlightFor(s,n.COLORS.background.warning.light,2,M,S))}:void 0,showVariableModal:g,variableList:w,discountCode:x,setDiscountCode:E}):M===o.CHANNEL_TYPE.WHATSAPP&&I?e.jsx(l.default,{whatsappSpecificPickerMeta:P,template:W,showVariableModal:g,variableList:w,variableListForImage:A,discountCode:x,setDiscountCode:E}):e.jsx(p.default,{whatsappSpecificPickerMeta:P,template:W,onTemplateChange:e=>{null==H||H(e)},showVariableModal:g,variableList:w,variableListForImage:A,discountCode:x,setDiscountCode:E,fileName:N,setFileName:T})}))]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaModal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),a=require("react"),i=require("../../button/Button.js"),s=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var r=require("../../spinner/Spinner.js"),l=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var n=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var o=require("../../template-preview/models/TemplateMeta.js"),d=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),c=require("../../../utils/validator.js"),u=require("../../../assets/icons/file.svg.js"),g=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),j=require("../../../assets/icons/upload.svg.js"),h=require("../context/templateModalContext.js"),x=require("../utils/validateIsUrl.js");exports.default=E=>{let{setOpenEditMedia:v,mediaComponentFormat:b,variableListForImage:y,openEditMedia:f,uploadMedia:C,fileRef:M,useEditWhatsappTemplateMediaResponse:I}=E;const{pod:T}=h.useTemplateModalContext(),[q,A]=a.useState("");let P;if(P=b===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":b===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!f)return e.jsx(e.Fragment,{});return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),v(!1),A("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${n.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:n.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:I.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[I.loading?e.jsx(r.Spinner,{size:"large"}):e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:n.DEFAULT_THEME.colorsV2.background.base}},{children:b===o.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):b===o.HEADER_TYPES.VIDEO?e.jsx(u.default,{width:40,height:40}):e.jsx(g.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:I.loading?"Upload in progress...":b===o.HEADER_TYPES.IMAGE?"Upload an image":b===o.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:n.COLORS.content.secondary},{children:I.loading?"Your image is getting loaded. This may take a couple of minutes.":b===o.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":b===o.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!I.loading&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e.jsx(p.BodyCaption,{children:"Press Enter after adding url/variable to add"}),e.jsx(l.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(c.validateURL(e)||x.isVariable(e)?(C(e),v(!1),A("")):A("Invalid Url/Variable"))},errorMessage:q,prevVariable:{actualValue:"",variableType:"string"},variablesList:y,showSideVariablePanel:!0,placeHolder:"Enter URL/Add variable",showAddButton:T!==d.POD.CAMPAIGN||b===o.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(i.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:j.default,onClick:()=>C(),size:"medium"})}))]})]})),e.jsx("input",{ref:M,style:{display:"none"},type:"file",onChange:I.handleImageUpload,accept:P}),!!I.selectedImage&&e.jsx(s.BikImageCropper,{aspectRatio:15/8,src:I.selectedImage,onCropComplete:I.onCropComplete,onCancel:()=>{I.setLoading(!1),I.setSelectedImage(""),M.current&&(M.current.value="")}})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),a=require("react"),i=require("../../button/Button.js"),s=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var r=require("../../spinner/Spinner.js"),l=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var n=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var o=require("../../template-preview/models/TemplateMeta.js"),d=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),c=require("../../../utils/validator.js"),u=require("../../../assets/icons/file.svg.js"),g=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),j=require("../../../assets/icons/upload.svg.js"),h=require("../context/templateModalContext.js"),x=require("../utils/validateIsUrl.js");exports.default=E=>{let{setOpenEditMedia:v,mediaComponentFormat:b,variableListForImage:y,openEditMedia:f,uploadMedia:C,fileRef:M,useEditWhatsappTemplateMediaResponse:I}=E;const{pod:T}=h.useTemplateModalContext(),[q,A]=a.useState("");let P;if(P=b===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":b===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!f)return e.jsx(e.Fragment,{});return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),v(!1),A("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${n.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:n.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:I.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[I.loading?e.jsx(r.Spinner,{size:"large"}):e.jsx("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:n.DEFAULT_THEME.colorsV2.background.base}},{children:b===o.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):b===o.HEADER_TYPES.VIDEO?e.jsx(u.default,{width:40,height:40}):e.jsx(g.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:I.loading?"Upload in progress...":b===o.HEADER_TYPES.IMAGE?"Upload an image":b===o.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:n.COLORS.content.secondary},{children:I.loading?`Your ${b.toLowerCase()} is getting loaded. This may take a couple of minutes.`:b===o.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":b===o.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!I.loading&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e.jsx(p.BodyCaption,{children:"Press Enter after adding url/variable to add"}),e.jsx(l.InputWithVariables,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(c.validateURL(e)||x.isVariable(e)?(C(e),v(!1),A("")):A("Invalid Url/Variable"))},errorMessage:q,prevVariable:{actualValue:"",variableType:"string"},variablesList:y,showSideVariablePanel:!0,placeHolder:"Enter URL/Add variable",showAddButton:T!==d.POD.CAMPAIGN||b===o.HEADER_TYPES.IMAGE})]})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(i.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:j.default,onClick:()=>C(),size:"medium"})}))]})]})),e.jsx("input",{ref:M,style:{display:"none"},type:"file",onChange:I.handleImageUpload,accept:P}),!!I.selectedImage&&e.jsx(s.BikImageCropper,{aspectRatio:15/8,src:I.selectedImage,onCropComplete:I.onCropComplete,onCancel:()=>{I.setLoading(!1),I.setSelectedImage(""),M.current&&(M.current.value="")}})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.style.js

@@ -26,7 +26,6 @@
 	border-radius: 4px;
 	margin-left: 8px;
 	align-items: center;
-	height: 100%;
 `,a=i.default.div`
 	padding-bottom: 0px;
 	min-width: 285px;

package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=o(t),n=o(i);const d=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),l=require("../utils/getPreviewDimension.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(t),p=o(i);const c=p.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,c=n.default.div`
+`,d=p.default.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,9 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=p.default.forwardRef(((t,i)=>{let{display_content:o,channel:p,template:n,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w}=s.useTemplateModalContext(),v={showSampleValues:h,template:n,channel:p,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},v))}):e.jsx(e.Fragment,{children:e.jsxs(d,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l.getPreviewWidth(p),height:443}}),e.jsx(c,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},v))}))]}))})}));h.displayName="MobilePreview";const m=n.default.div`
+`,h=n.default.forwardRef(((t,i)=>{let{display_content:o,channel:n,template:p,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w}=s.useTemplateModalContext(),f={showSampleValues:h,template:p,channel:n,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:n},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l.getPreviewWidth(n),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},f))}))]}))})}));h.displayName="MobilePreview";const m=p.default.div`
 	display: flex;
 	align-items: center;
+	justify-content: center;
+	flex: 1;
 `;exports.default=h;

package/dist/esm/components/template-context-mapper/modalElements/Body.js

@@ -3,7 +3,7 @@ import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as
 	//	height: 100%;
 `,b=a.div`
 	padding: 16px 14px;
-	max-width: 450px;
+	max-width: ${e=>e.channel===s.EMAIL?"400px":"450px"};
 
 	height: ${e=>e.channel===s.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
@@ -17,4 +17,4 @@ import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as
 	overflow-y: auto;
 	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===s.WHATSAPP?"url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');":"none"};
 	display: ${e=>e.hideDeviceContainerInPreview&&e.channel===s.WHATSAPP?"flex":"initial"};
-`,g=a=>{const{showVariableMapping:g,showOnlyContent:C,whatsappSpecificPickerMeta:P,showVariableModal:x,variableList:y,discountCode:A,setDiscountCode:W,variableListForImage:S,showSampleValues:T,fileName:j,setFileName:M}=a,V=i(),k=i(),{device:I,display_content:D,channel:E,template:L,setTemplate:F,isWhatsappCarousel:$,isProductCarouselType:_,hideDeviceContainerInPreview:H}=p();const N=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return e(v,{children:[o(w,Object.assign({showOnlyContent:C,showVariableMapping:g,isWhatsappCarousel:$,hideDeviceContainerInPreview:H,channel:E},{children:"mobile"===I?o(u,{ref:k,display_content:null!=D?D:"",channel:E,template:L,showSampleValues:T}):E===s.WHATSAPP&&$?o(l,{ref:V,channel:E,template:L,showSampleValues:T,isPreview:!1}):E!==s.MESSAGE?o(c,{ref:V,channel:E,display_content:null!=D?D:"",showSampleValues:T}):o(t,{})})),(_||g)&&o(b,Object.assign({channel:E,isWhatsappCarousel:$},{children:E!==s.WHATSAPP?o(f,{onFocus:E===s.EMAIL?function(e){var o,t,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===I?"template_html_mobile":"template_html_desktop"),l=d(e+1),n=E===s.EMAIL?null===(o=null==a?void 0:a.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),p=N(n),c=null==n?void 0:n.offsetLeft;"desktop"===I?p&&V.current&&(null===(t=null==a?void 0:a.contentWindow)||void 0===t||t.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,E,I)):p&&k.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,E,I))}:void 0,showVariableModal:x,variableList:y,discountCode:A,setDiscountCode:W}):E===s.WHATSAPP&&$?o(n,{whatsappSpecificPickerMeta:P,template:L,showVariableModal:x,variableList:y,variableListForImage:S,discountCode:A,setDiscountCode:W}):o(h,{whatsappSpecificPickerMeta:P,template:L,onTemplateChange:e=>{null==F||F(e)},showVariableModal:x,variableList:y,variableListForImage:S,discountCode:A,setDiscountCode:W,fileName:j,setFileName:M})}))]})};export{g as default};
+`,g=a=>{const{showVariableMapping:g,showOnlyContent:C,whatsappSpecificPickerMeta:P,showVariableModal:x,variableList:y,discountCode:A,setDiscountCode:W,variableListForImage:M,showSampleValues:S,fileName:T,setFileName:j}=a,I=i(),V=i(),{device:k,display_content:E,channel:L,template:D,setTemplate:$,isWhatsappCarousel:F,isProductCarouselType:_,hideDeviceContainerInPreview:H}=p();const N=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return e(v,{children:[o(w,Object.assign({showOnlyContent:C,showVariableMapping:g,isWhatsappCarousel:F,hideDeviceContainerInPreview:H,channel:L},{children:"mobile"===k?o(u,{ref:V,display_content:null!=E?E:"",channel:L,template:D,showSampleValues:S}):L===s.WHATSAPP&&F?o(l,{ref:I,channel:L,template:D,showSampleValues:S,isPreview:!1}):L!==s.MESSAGE?o(c,{ref:I,channel:L,display_content:null!=E?E:"",showSampleValues:S}):o(t,{})})),(_||g)&&o(b,Object.assign({channel:L,isWhatsappCarousel:F},{children:L!==s.WHATSAPP?o(f,{onFocus:L===s.EMAIL?function(e){var o,t,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===k?"template_html_mobile":"template_html_desktop"),l=d(e+1),n=L===s.EMAIL?null===(o=null==a?void 0:a.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),p=N(n),c=null==n?void 0:n.offsetLeft;"desktop"===k?p&&I.current&&(null===(t=null==a?void 0:a.contentWindow)||void 0===t||t.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,L,k)):p&&V.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),m(l,r.background.warning.light,2,L,k))}:void 0,showVariableModal:x,variableList:y,discountCode:A,setDiscountCode:W}):L===s.WHATSAPP&&F?o(n,{whatsappSpecificPickerMeta:P,template:D,showVariableModal:x,variableList:y,variableListForImage:M,discountCode:A,setDiscountCode:W}):o(h,{whatsappSpecificPickerMeta:P,template:D,onTemplateChange:e=>{null==$||$(e)},showVariableModal:x,variableList:y,variableListForImage:M,discountCode:A,setDiscountCode:W,fileName:T,setFileName:j})}))]})};export{g as default};

package/dist/esm/components/template-context-mapper/modalElements/EditMediaModal.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"../../../assets/icons/arrow_back.svg.js";import{useState as o}from"react";import{Button as r}from"../../button/Button.js";import{BikImageCropper as s}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../_virtual/_tslib.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import{Spinner as l}from"../../spinner/Spinner.js";import{InputWithVariables as n}from"../../input-with-vars/InputWithVariables.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as p,COLORS as d}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{HEADER_TYPES as m}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as g,TitleMedium as h,BodySecondary as f,BodyCaption as u}from"../../TypographyStyle.js";import{validateURL as j}from"../../../utils/validator.js";import v from"../../../assets/icons/file.svg.js";import b from"../../../assets/icons/filePdf.svg.js";import y from"../../../assets/icons/image.svg.js";import x from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as I}from"../context/templateModalContext.js";import{isVariable as C}from"../utils/validateIsUrl.js";const M=M=>{let{setOpenEditMedia:w,mediaComponentFormat:k,variableListForImage:E,openEditMedia:A,uploadMedia:O,fileRef:P,useEditWhatsappTemplateMediaResponse:V}=M;const{pod:T}=I(),[U,B]=o("");let G;if(G=k===m.IMAGE?"image/png, image/jpeg":k===m.VIDEO?"video/mp4":"application/pdf",!A)return e(t,{});return i(t,{children:[i("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e(a,{onClick:e=>{e.stopPropagation(),w(!1),B("")},style:{cursor:"pointer"},width:16,height:16}),e(g,{children:"Update Media"})]})),i("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${p.colorsV2.stroke.primary}`,backgroundColor:p.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:V.loading?"flex":"initial"}},{children:[i("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[V.loading?e(l,{size:"large"}):e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:p.colorsV2.background.base}},{children:k===m.IMAGE?e(y,{width:40,height:40}):k===m.VIDEO?e(v,{width:40,height:40}):e(b,{width:40,height:40})})),e(h,{children:V.loading?"Upload in progress...":k===m.IMAGE?"Upload an image":k===m.VIDEO?"Upload a video":"Upload a document"}),e(f,Object.assign({color:d.content.secondary},{children:V.loading?"Your image is getting loaded. This may take a couple of minutes.":k===m.IMAGE?"JPEG/ PNG format • Max 5MB":k===m.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!V.loading&&i(t,{children:[i("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e(u,{children:"Press Enter after adding url/variable to add"}),e(n,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(j(e)||C(e)?(O(e),w(!1),B("")):B("Invalid Url/Variable"))},errorMessage:U,prevVariable:{actualValue:"",variableType:"string"},variablesList:E,showSideVariablePanel:!0,placeHolder:"Enter URL/Add variable",showAddButton:T!==c.CAMPAIGN||k===m.IMAGE})]})),i("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(u,{children:"Or upload media from device"}),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(r,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:x,onClick:()=>O(),size:"medium"})}))]})]})),e("input",{ref:P,style:{display:"none"},type:"file",onChange:V.handleImageUpload,accept:G}),!!V.selectedImage&&e(s,{aspectRatio:15/8,src:V.selectedImage,onCropComplete:V.onCropComplete,onCancel:()=>{V.setLoading(!1),V.setSelectedImage(""),P.current&&(P.current.value="")}})]})};export{M as default};
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"../../../assets/icons/arrow_back.svg.js";import{useState as o}from"react";import{Button as r}from"../../button/Button.js";import{BikImageCropper as s}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../_virtual/_tslib.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import{Spinner as l}from"../../spinner/Spinner.js";import{InputWithVariables as n}from"../../input-with-vars/InputWithVariables.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{DEFAULT_THEME as p,COLORS as d}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{HEADER_TYPES as m}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as g,TitleMedium as h,BodySecondary as f,BodyCaption as u}from"../../TypographyStyle.js";import{validateURL as j}from"../../../utils/validator.js";import v from"../../../assets/icons/file.svg.js";import b from"../../../assets/icons/filePdf.svg.js";import y from"../../../assets/icons/image.svg.js";import x from"../../../assets/icons/upload.svg.js";import{useTemplateModalContext as C}from"../context/templateModalContext.js";import{isVariable as I}from"../utils/validateIsUrl.js";const M=M=>{let{setOpenEditMedia:w,mediaComponentFormat:k,variableListForImage:E,openEditMedia:A,uploadMedia:O,fileRef:P,useEditWhatsappTemplateMediaResponse:V}=M;const{pod:T}=C(),[U,B]=o("");let G;if(G=k===m.IMAGE?"image/png, image/jpeg":k===m.VIDEO?"video/mp4":"application/pdf",!A)return e(t,{});return i(t,{children:[i("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e(a,{onClick:e=>{e.stopPropagation(),w(!1),B("")},style:{cursor:"pointer"},width:16,height:16}),e(g,{children:"Update Media"})]})),i("div",Object.assign({style:{padding:24,borderRadius:4,border:`1px dashed ${p.colorsV2.stroke.primary}`,backgroundColor:p.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:V.loading?"flex":"initial"}},{children:[i("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[V.loading?e(l,{size:"large"}):e("div",Object.assign({style:{height:80,width:80,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:p.colorsV2.background.base}},{children:k===m.IMAGE?e(y,{width:40,height:40}):k===m.VIDEO?e(v,{width:40,height:40}):e(b,{width:40,height:40})})),e(h,{children:V.loading?"Upload in progress...":k===m.IMAGE?"Upload an image":k===m.VIDEO?"Upload a video":"Upload a document"}),e(f,Object.assign({color:d.content.secondary},{children:V.loading?`Your ${k.toLowerCase()} is getting loaded. This may take a couple of minutes.`:k===m.IMAGE?"JPEG/ PNG format • Max 5MB":k===m.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!V.loading&&i(t,{children:[i("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:[e(u,{children:"Press Enter after adding url/variable to add"}),e(n,{noMaxCharCheck:!0,allowMix:!1,onChange:()=>{},onEnterPress:e=>{e&&(j(e)||I(e)?(O(e),w(!1),B("")):B("Invalid Url/Variable"))},errorMessage:U,prevVariable:{actualValue:"",variableType:"string"},variablesList:E,showSideVariablePanel:!0,placeHolder:"Enter URL/Add variable",showAddButton:T!==c.CAMPAIGN||k===m.IMAGE})]})),i("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"16px"}},{children:[e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e(u,{children:"Or upload media from device"}),e("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e(r,{matchParentWidth:!0,buttonText:"Upload",buttonType:"secondary",LeadingIcon:x,onClick:()=>O(),size:"medium"})}))]})]})),e("input",{ref:P,style:{display:"none"},type:"file",onChange:V.handleImageUpload,accept:G}),!!V.selectedImage&&e(s,{aspectRatio:15/8,src:V.selectedImage,onCropComplete:V.onCropComplete,onCancel:()=>{V.setLoading(!1),V.setSelectedImage(""),P.current&&(P.current.value="")}})]})};export{M as default};

package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.style.js

@@ -26,7 +26,6 @@ import e from"styled-components";import{COLORS as r}from"../../../constants/Them
 	border-radius: 4px;
 	margin-left: 8px;
 	align-items: center;
-	height: 100%;
 `,n=e.div`
 	padding-bottom: 0px;
 	min-width: 285px;

package/dist/esm/components/template-context-mapper/modalElements/MobilePreview.js

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const m=o.div`
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=o.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -6,7 +6,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
-`,n=o.div`
+`,m=o.div`
 	position: absolute;
 	flex: 1;
 	background-color: white;
@@ -17,7 +17,9 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:w,showSampleValues:f}=a;const{pod:b,hideDeviceContainerInPreview:g}=s(),v={showSampleValues:f,template:w,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return g?e(h,{children:e(r,Object.assign({},v))}):e(t,{children:i(m,Object.assign({channel:d},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l(d),height:443}}),e(n,Object.assign({ref:o},{children:e(r,Object.assign({},v))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
+`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:f,showSampleValues:w}=a;const{pod:b,hideDeviceContainerInPreview:g}=s(),v={showSampleValues:w,template:f,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return g?e(h,{children:e(r,Object.assign({},v))}):e(t,{children:i(n,Object.assign({channel:d},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l(d),height:443}}),e(m,Object.assign({ref:o},{children:e(r,Object.assign({},v))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
 	display: flex;
 	align-items: center;
+	justify-content: center;
+	flex: 1;
 `;export{c as default};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.511-beta.tcm-3",
+	"version": "0.0.511-beta.tcm-5",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",