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

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

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),i=require("../../carousel-preview/CarouselPreview.js"),l=require("./EditWhatsAppCarouselTemplateV2.js"),o=require("../../template-preview/models/Channels.js"),n=require("../../../constants/Theme.js"),s=require("../context/templateModalContext.js"),r=require("../utils/getVariableNameEmail.js"),d=require("../utils/highlightFor.js"),u=require("./DesktopPreview.js"),p=require("./EditWhatsAppTemplateV2.js"),c=require("./MobilePreview.js"),h=require("./VariableConnectorsPanel.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=m(a);const f=v.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("styled-components"),i=require("../../carousel-preview/CarouselPreview.js"),l=require("./EditWhatsAppCarouselTemplateV2.js"),o=require("../../template-preview/models/Channels.js"),n=require("../../TypographyStyle.js"),s=require("../../../constants/Theme.js"),r=require("../context/templateModalContext.js"),d=require("../utils/getVariableNameEmail.js"),p=require("../utils/highlightFor.js"),u=require("./DesktopPreview.js"),c=require("./EditWhatsAppTemplateV2.js"),h=require("./MobilePreview.js"),m=require("./VariableConnectorsPanel.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var C=v(a);const f=C.default.div`
 	display: flex;
 	//	height: 100%;
-`,C=v.default.div`
+`,b=C.default.div`
 	padding: 16px 14px;
 	max-width: ${e=>e.channel===o.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
 	height: ${e=>e.channel===o.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
-	border-left: ${n.COLORS.stroke.primary} 1px solid;
-	border-top: ${e=>e.isWhatsappCarousel?`${n.COLORS.stroke.primary} 1px solid`:void 0};
-`,b=v.default.div`
+	border-left: ${s.COLORS.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${s.COLORS.stroke.primary} 1px solid`:void 0};
+`,g=C.default.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	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: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})}))]})};
+`;exports.default=a=>{const{showVariableMapping:v,showOnlyContent:C,whatsappSpecificPickerMeta:P,showVariableModal:x,variableList:w,discountCode:E,setDiscountCode:j,variableListForImage:A,showSampleValues:T,fileName:y,setFileName:N}=a,L=t.useRef(),S=t.useRef(),{device:_,display_content:M,channel:W,template:H,setTemplate:q,isWhatsappCarousel:I,isProductCarouselType:V,hideDeviceContainerInPreview:k}=r.useTemplateModalContext();const O=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(f,{children:[e.jsx(g,Object.assign({showOnlyContent:C,showVariableMapping:v,isWhatsappCarousel:I,hideDeviceContainerInPreview:k,channel:W},{children:"mobile"===_?e.jsx(h.default,{ref:S,display_content:null!=M?M:"",channel:W,template:H,showSampleValues:T}):W===o.CHANNEL_TYPE.WHATSAPP&&I?e.jsx(i.CarouselPreview,{ref:L,channel:W,template:H,showSampleValues:T,isPreview:!1}):W!==o.CHANNEL_TYPE.MESSAGE?e.jsx(u.default,{ref:L,channel:W,display_content:null!=M?M:"",showSampleValues:T}):e.jsx(e.Fragment,{})})),(V||v)&&e.jsx(b,Object.assign({channel:W,isWhatsappCarousel:I},{children:W!==o.CHANNEL_TYPE.WHATSAPP?e.jsx(m.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"===_?"template_html_mobile":"template_html_desktop"),n=d.getVariableNameForEmailByIndex(e+1),r=W===o.CHANNEL_TYPE.EMAIL?null===(t=null==l?void 0:l.contentWindow)||void 0===t?void 0:t.document.getElementById(n):document.getElementById(n),u=O(r),c=null==r?void 0:r.offsetLeft;"desktop"===_?u&&L.current&&(null===(a=null==l?void 0:l.contentWindow)||void 0===a||a.scrollTo(null!=c?c:0,u),p.highlightFor(n,s.COLORS.background.warning.light,2,W,_)):u&&S.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,u),p.highlightFor(n,s.COLORS.background.warning.light,2,W,_))}:void 0,showVariableModal:x,variableList:w,discountCode:E,setDiscountCode:j}):W===o.CHANNEL_TYPE.WHATSAPP&&I?e.jsx(l.default,{whatsappSpecificPickerMeta:P,template:H,showVariableModal:x,variableList:w,variableListForImage:A,discountCode:E,setDiscountCode:j}):e.jsx(c.default,{whatsappSpecificPickerMeta:P,template:H,onTemplateChange:e=>{null==q||q(e)},showVariableModal:x,variableList:w,variableListForImage:A,discountCode:E,setDiscountCode:j,fileName:y,setFileName:N})})),!v&&!V&&e.jsx(b,{children:e.jsx(n.BodySecondary,{children:"Click on ‘Select template’ below to use it"})})]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),n=require("lodash"),t=require("react"),i=require("../../helpers/FileUploaderHelper.js"),o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),a=require("../utils/validateIsUrl.js");exports.useEditWhatsappTemplateMedia=s=>{const{uploadMediaLink:r,updateTemplateImageUrl:d,mediaComponent:c,uploadMediaFiles:u,fileRef:p}=s,{template:m,selectedCarouselIndex:v,setTemplate:f}=l.useTemplateModalContext(),[E,g]=t.useState(void 0),[h,b]=t.useState(),[_,M]=t.useState(!1),[I,T]=t.useState(""),[y,A]=t.useState(!1),[S,j]=t.useState(),R=t.useRef(null);function U(n){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=new i.FileUploaderHelper;if(n instanceof Blob){const i=e.validate({file:n});if(i)T(i),A(!1),M(!1);else{const e=c.format===o.HEADER_TYPES.IMAGE,i=yield u({file:n,fileName:E,isImage:e});if(i.success){const[e]=n.type.split("/");d(null!==(t=i.url)&&void 0!==t?t:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else T("An unknown technical error occurred");A(!1),M(!1)}}else T("An unknown technical error occurred"),A(!1)}))}function C(){var e;console.log("handleImageChange",p,null==p?void 0:p.current),(null===(e=null==p?void 0:p.current)||void 0===e?void 0:e.click)&&p.current.click()}return t.useEffect((()=>{g(void 0),j(void 0),b(void 0),M(!1),A(!1),T("")}),[v]),{uploadMedia:function(t){var l,s,u,E,g,h;return e.__awaiter(this,void 0,void 0,(function*(){if(T(""),b(""),console.log("uef uploadMedia",p,null==p?void 0:p.current),t)if(t.startsWith("https"))try{if(A(!0),console.log("uploadMediaLink",r),r){const e=yield r(t),{type:n,size:a,success:s}=e;if(s){const t=(new i.FileUploaderHelper).validate({linkData:{type:n,size:a}});if(t)return T(t),void A(!1);const[s]=n.split("/");d(null!==(l=e.url)&&void 0!==l?l:"",s.includes("application")?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[s.toUpperCase()])}else T("An unknown technical error occurred");A(!1)}else{const e=yield fetch(t),n=yield e.blob();yield U(n)}}catch(e){T("An unknown technical error occurred")}else if(a.isVariable(t)){let e;if(b(t),e=null!=v&&v>-1?{components:null===(u=null===(s=m.components[1])||void 0===s?void 0:s.cards)||void 0===u?void 0:u[v].components,mapping:null===(g=null===(E=null==m?void 0:m.mapping)||void 0===E?void 0:E.cards)||void 0===g?void 0:g[v]}:Object.assign({},m),e.components){const n=null===(h=null==e?void 0:e.components)||void 0===h?void 0:h.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==n&&n>-1&&(null==e?void 0:e.components[n])){const i=Object.assign(Object.assign({},e.components[n]),{format:c.format,example:{header_handle:[t]}}),o=[...e.components];o[n]=i,e.components=o}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),A(!1),null!=v&&v>-1){const t=n.cloneDeep(m);t.components[1].cards[v].components=e.components,t.mapping.cards[v]=e.mapping,null==f||f(Object.assign({},t))}else null==f||f(Object.assign({},e))}else A(!1),T("Invalid URL or variable");else C()}))},processImageUpload:U,handleImageUpload:function(e){var n;T(""),A(!0);const t=null===(n=e.target.files)||void 0===n?void 0:n[0];if(c.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;j(""),g(""),e.onload=()=>{j(e.result),g(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else U(t)},handleImageChange:C,onCropComplete:function(n){return e.__awaiter(this,void 0,void 0,(function*(){A(!1),T("");const e=yield fetch(n),t=yield e.blob();yield U(t),j(void 0),M(!1)}))},editIconRef:R,fileName:E,setFileName:g,selectedVariable:h,setSelectedVariable:b,openEditMedia:_,setOpenEditMedia:M,selectedImage:S,setSelectedImage:j,loading:y,setLoading:A,error:I,setError:T}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),n=require("lodash"),t=require("react"),i=require("../../helpers/FileUploaderHelper.js"),o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),a=require("../utils/validateIsUrl.js");exports.useEditWhatsappTemplateMedia=s=>{const{uploadMediaLink:r,updateTemplateImageUrl:d,mediaComponent:c,uploadMediaFiles:u,fileRef:p}=s,{template:m,selectedCarouselIndex:v,setTemplate:f}=l.useTemplateModalContext(),[E,g]=t.useState(void 0),[h,b]=t.useState(),[_,M]=t.useState(!1),[I,T]=t.useState(""),[y,A]=t.useState(!1),[S,j]=t.useState(),R=t.useRef(null);function U(n){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=new i.FileUploaderHelper;if(n instanceof Blob){const i=e.validate({file:n});if(i)T(i),A(!1),M(!1);else{const e=c.format===o.HEADER_TYPES.IMAGE,i=yield u({file:n,fileName:E,isImage:e});if(i.success){const[e]=n.type.split("/");d(null!==(t=i.url)&&void 0!==t?t:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else A(!1),T("An unknown technical error occurred");A(!1),M(!1)}}else T("An unknown technical error occurred"),A(!1)}))}function C(){var e;console.log("handleImageChange",p,null==p?void 0:p.current),(null===(e=null==p?void 0:p.current)||void 0===e?void 0:e.click)&&p.current.click()}return t.useEffect((()=>{g(void 0),j(void 0),b(void 0),M(!1),A(!1),T("")}),[v]),{uploadMedia:function(t){var l,s,u,E,g,h;return e.__awaiter(this,void 0,void 0,(function*(){if(T(""),b(""),console.log("uef uploadMedia",p,null==p?void 0:p.current),t)if(t.startsWith("https"))try{if(A(!0),console.log("uploadMediaLink",r),r){const e=yield r(t),{type:n,size:a,success:s}=e;if(s){const t=(new i.FileUploaderHelper).validate({linkData:{type:n,size:a}});if(t)return T(t),void A(!1);const[s]=n.split("/");d(null!==(l=e.url)&&void 0!==l?l:"",s.includes("application")?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[s.toUpperCase()])}else A(!1),T("An unknown technical error occurred");A(!1)}else{const e=yield fetch(t),n=yield e.blob();yield U(n)}}catch(e){A(!1),T("An unknown technical error occurred")}else if(a.isVariable(t)){let e;if(b(t),e=null!=v&&v>-1?{components:null===(u=null===(s=m.components[1])||void 0===s?void 0:s.cards)||void 0===u?void 0:u[v].components,mapping:null===(g=null===(E=null==m?void 0:m.mapping)||void 0===E?void 0:E.cards)||void 0===g?void 0:g[v]}:Object.assign({},m),e.components){const n=null===(h=null==e?void 0:e.components)||void 0===h?void 0:h.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==n&&n>-1&&(null==e?void 0:e.components[n])){const i=Object.assign(Object.assign({},e.components[n]),{format:c.format,example:{header_handle:[t]}}),o=[...e.components];o[n]=i,e.components=o}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),A(!1),null!=v&&v>-1){const t=n.cloneDeep(m);t.components[1].cards[v].components=e.components,t.mapping.cards[v]=e.mapping,null==f||f(Object.assign({},t))}else null==f||f(Object.assign({},e))}else A(!1),T("Invalid URL or variable");else C()}))},processImageUpload:U,handleImageUpload:function(e){var n;T(""),A(!0);const t=null===(n=e.target.files)||void 0===n?void 0:n[0];if(c.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;j(""),g(""),e.onload=()=>{j(e.result),g(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else U(t)},handleImageChange:C,onCropComplete:function(n){return e.__awaiter(this,void 0,void 0,(function*(){A(!1),T("");const e=yield fetch(n),t=yield e.blob();yield U(t),j(void 0),M(!1)}))},editIconRef:R,fileName:E,setFileName:g,selectedVariable:h,setSelectedVariable:b,openEditMedia:_,setOpenEditMedia:M,selectedImage:S,setSelectedImage:j,loading:y,setLoading:A,error:I,setError:T}};

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

@@ -1,20 +1,20 @@
-import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as i}from"react";import a from"styled-components";import{CarouselPreview as l}from"../../carousel-preview/CarouselPreview.js";import n from"./EditWhatsAppCarouselTemplateV2.js";import{CHANNEL_TYPE as s}from"../../template-preview/models/Channels.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as d}from"../utils/getVariableNameEmail.js";import{highlightFor as m}from"../utils/highlightFor.js";import c from"./DesktopPreview.js";import h from"./EditWhatsAppTemplateV2.js";import u from"./MobilePreview.js";import f from"./VariableConnectorsPanel.js";const v=a.div`
+import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useRef as i}from"react";import a from"styled-components";import{CarouselPreview as l}from"../../carousel-preview/CarouselPreview.js";import n from"./EditWhatsAppCarouselTemplateV2.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{BodySecondary as s}from"../../TypographyStyle.js";import{COLORS as p}from"../../../constants/Theme.js";import{useTemplateModalContext as d}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as m}from"../utils/getVariableNameEmail.js";import{highlightFor as c}from"../utils/highlightFor.js";import h from"./DesktopPreview.js";import u from"./EditWhatsAppTemplateV2.js";import f from"./MobilePreview.js";import v from"./VariableConnectorsPanel.js";const b=a.div`
 	display: flex;
 	//	height: 100%;
-`,b=a.div`
+`,w=a.div`
 	padding: 16px 14px;
-	max-width: ${e=>e.channel===s.EMAIL?"400px":"450px"};
+	max-width: ${e=>e.channel===r.EMAIL?"400px":"450px"};
 
-	height: ${e=>e.channel===s.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===r.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
-	border-left: ${r.stroke.primary} 1px solid;
-	border-top: ${e=>e.isWhatsappCarousel?`${r.stroke.primary} 1px solid`:void 0};
-`,w=a.div`
+	border-left: ${p.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${p.stroke.primary} 1px solid`:void 0};
+`,g=a.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	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: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};
+	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===r.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===r.WHATSAPP?"flex":"initial"};
+`,C=a=>{const{showVariableMapping:C,showOnlyContent:P,whatsappSpecificPickerMeta:x,showVariableModal:y,variableList:A,discountCode:S,setDiscountCode:W,variableListForImage:T,showSampleValues:j,fileName:M,setFileName:k}=a,I=i(),V=i(),{device:E,display_content:L,channel:D,template:$,setTemplate:F,isWhatsappCarousel:_,isProductCarouselType:H,hideDeviceContainerInPreview:N}=d();const O=e=>{let o=0;for(;e;)o+=e.offsetTop,e=e.offsetParent;return o};return e(b,{children:[o(g,Object.assign({showOnlyContent:P,showVariableMapping:C,isWhatsappCarousel:_,hideDeviceContainerInPreview:N,channel:D},{children:"mobile"===E?o(f,{ref:V,display_content:null!=L?L:"",channel:D,template:$,showSampleValues:j}):D===r.WHATSAPP&&_?o(l,{ref:I,channel:D,template:$,showSampleValues:j,isPreview:!1}):D!==r.MESSAGE?o(h,{ref:I,channel:D,display_content:null!=L?L:"",showSampleValues:j}):o(t,{})})),(H||C)&&o(w,Object.assign({channel:D,isWhatsappCarousel:_},{children:D!==r.WHATSAPP?o(v,{onFocus:D===r.EMAIL?function(e){var o,t,i;const a=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),l=m(e+1),n=D===r.EMAIL?null===(o=null==a?void 0:a.contentWindow)||void 0===o?void 0:o.document.getElementById(l):document.getElementById(l),s=O(n),d=null==n?void 0:n.offsetLeft;"desktop"===E?s&&I.current&&(null===(t=null==a?void 0:a.contentWindow)||void 0===t||t.scrollTo(null!=d?d:0,s),c(l,p.background.warning.light,2,D,E)):s&&V.current&&(null===(i=null==a?void 0:a.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,s),c(l,p.background.warning.light,2,D,E))}:void 0,showVariableModal:y,variableList:A,discountCode:S,setDiscountCode:W}):D===r.WHATSAPP&&_?o(n,{whatsappSpecificPickerMeta:x,template:$,showVariableModal:y,variableList:A,variableListForImage:T,discountCode:S,setDiscountCode:W}):o(u,{whatsappSpecificPickerMeta:x,template:$,onTemplateChange:e=>{null==F||F(e)},showVariableModal:y,variableList:A,variableListForImage:T,discountCode:S,setDiscountCode:W,fileName:M,setFileName:k})})),!C&&!H&&o(w,{children:o(s,{children:"Click on ‘Select template’ below to use it"})})]})};export{C as default};

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as n,useRef as i,useEffect as l}from"react";import{FileUploaderHelper as t}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,mediaComponent:u,uploadMediaFiles:m,fileRef:f}=d,{template:v,selectedCarouselIndex:g,setTemplate:h}=s(),[b,I]=n(void 0),[y,M]=n(),[j,C]=n(!1),[E,O]=n(""),[U,k]=n(!1),[w,A]=n(),N=i(null);function T(o){var n;return e(this,void 0,void 0,(function*(){const e=new t;if(o instanceof Blob){const i=e.validate({file:o});if(i)O(i),k(!1),C(!1);else{const e=u.format===a.IMAGE,i=yield m({file:o,fileName:b,isImage:e});if(i.success){const[e]=o.type.split("/");p(null!==(n=i.url)&&void 0!==n?n:"","application"===e?a.DOCUMENT:a[e.toUpperCase()])}else O("An unknown technical error occurred");k(!1),C(!1)}}else O("An unknown technical error occurred"),k(!1)}))}function x(){var e;console.log("handleImageChange",f,null==f?void 0:f.current),(null===(e=null==f?void 0:f.current)||void 0===e?void 0:e.click)&&f.current.click()}return l((()=>{I(void 0),A(void 0),M(void 0),C(!1),k(!1),O("")}),[g]),{uploadMedia:function(n){var i,l,s,d,m,b;return e(this,void 0,void 0,(function*(){if(O(""),M(""),console.log("uef uploadMedia",f,null==f?void 0:f.current),n)if(n.startsWith("https"))try{if(k(!0),console.log("uploadMediaLink",c),c){const e=yield c(n),{type:o,size:l,success:s}=e;if(s){const n=(new t).validate({linkData:{type:o,size:l}});if(n)return O(n),void k(!1);const[s]=o.split("/");p(null!==(i=e.url)&&void 0!==i?i:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else O("An unknown technical error occurred");k(!1)}else{const e=yield fetch(n),o=yield e.blob();yield T(o)}}catch(e){O("An unknown technical error occurred")}else if(r(n)){let e;if(M(n),e=null!=g&&g>-1?{components:null===(s=null===(l=v.components[1])||void 0===l?void 0:l.cards)||void 0===s?void 0:s[g].components,mapping:null===(m=null===(d=null==v?void 0:v.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[g]}:Object.assign({},v),e.components){const o=null===(b=null==e?void 0:e.components)||void 0===b?void 0:b.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const i=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[n]}}),l=[...e.components];l[o]=i,e.components=l}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[n]})),k(!1),null!=g&&g>-1){const n=o(v);n.components[1].cards[g].components=e.components,n.mapping.cards[g]=e.mapping,null==h||h(Object.assign({},n))}else null==h||h(Object.assign({},e))}else k(!1),O("Invalid URL or variable");else x()}))},processImageUpload:T,handleImageUpload:function(e){var o;O(""),k(!0);const n=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==n?void 0:n.name)},n&&e.readAsDataURL(n)}else T(n)},handleImageChange:x,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),O("");const e=yield fetch(o),n=yield e.blob();yield T(n),A(void 0),C(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:y,setSelectedVariable:M,openEditMedia:j,setOpenEditMedia:C,selectedImage:w,setSelectedImage:A,loading:U,setLoading:k,error:E,setError:O}};export{d as useEditWhatsappTemplateMedia};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as n,useRef as i,useEffect as l}from"react";import{FileUploaderHelper as t}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,mediaComponent:u,uploadMediaFiles:m,fileRef:f}=d,{template:v,selectedCarouselIndex:g,setTemplate:h}=s(),[b,I]=n(void 0),[y,M]=n(),[j,C]=n(!1),[E,O]=n(""),[U,k]=n(!1),[w,A]=n(),N=i(null);function T(o){var n;return e(this,void 0,void 0,(function*(){const e=new t;if(o instanceof Blob){const i=e.validate({file:o});if(i)O(i),k(!1),C(!1);else{const e=u.format===a.IMAGE,i=yield m({file:o,fileName:b,isImage:e});if(i.success){const[e]=o.type.split("/");p(null!==(n=i.url)&&void 0!==n?n:"","application"===e?a.DOCUMENT:a[e.toUpperCase()])}else k(!1),O("An unknown technical error occurred");k(!1),C(!1)}}else O("An unknown technical error occurred"),k(!1)}))}function x(){var e;console.log("handleImageChange",f,null==f?void 0:f.current),(null===(e=null==f?void 0:f.current)||void 0===e?void 0:e.click)&&f.current.click()}return l((()=>{I(void 0),A(void 0),M(void 0),C(!1),k(!1),O("")}),[g]),{uploadMedia:function(n){var i,l,s,d,m,b;return e(this,void 0,void 0,(function*(){if(O(""),M(""),console.log("uef uploadMedia",f,null==f?void 0:f.current),n)if(n.startsWith("https"))try{if(k(!0),console.log("uploadMediaLink",c),c){const e=yield c(n),{type:o,size:l,success:s}=e;if(s){const n=(new t).validate({linkData:{type:o,size:l}});if(n)return O(n),void k(!1);const[s]=o.split("/");p(null!==(i=e.url)&&void 0!==i?i:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else k(!1),O("An unknown technical error occurred");k(!1)}else{const e=yield fetch(n),o=yield e.blob();yield T(o)}}catch(e){k(!1),O("An unknown technical error occurred")}else if(r(n)){let e;if(M(n),e=null!=g&&g>-1?{components:null===(s=null===(l=v.components[1])||void 0===l?void 0:l.cards)||void 0===s?void 0:s[g].components,mapping:null===(m=null===(d=null==v?void 0:v.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[g]}:Object.assign({},v),e.components){const o=null===(b=null==e?void 0:e.components)||void 0===b?void 0:b.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const i=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[n]}}),l=[...e.components];l[o]=i,e.components=l}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[n]})),k(!1),null!=g&&g>-1){const n=o(v);n.components[1].cards[g].components=e.components,n.mapping.cards[g]=e.mapping,null==h||h(Object.assign({},n))}else null==h||h(Object.assign({},e))}else k(!1),O("Invalid URL or variable");else x()}))},processImageUpload:T,handleImageUpload:function(e){var o;O(""),k(!0);const n=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==n?void 0:n.name)},n&&e.readAsDataURL(n)}else T(n)},handleImageChange:x,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),O("");const e=yield fetch(o),n=yield e.blob();yield T(n),A(void 0),C(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:y,setSelectedVariable:M,openEditMedia:j,setOpenEditMedia:C,selectedImage:w,setSelectedImage:A,loading:U,setLoading:k,error:E,setError:O}};export{d as useEditWhatsappTemplateMedia};

package/package.json

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