@bikdotai/bik-component-library 0.0.380-beta.4 → 0.0.380

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -24,6 +24,5 @@ export interface TemplateContextMapperProps {
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
     enabledCustomText?: boolean;
-    disableEditVariable?: boolean;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),o=require("./modalElements/Footer.js"),r=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:b,templateVariables:h,onTemplateSelect:C,globalPlaceholders:g,showOnlyContent:S,whatsappSpecificPickerMeta:T,zIndex:v,showVariableModal:E,variableList:j,discountCode:x,setDiscountCode:M,onBackPress:P,enabledCustomText:L,disableEditVariable:f}=d;var w,q;t.useEffect((()=>{V(b)}),[b]);const[y,A]=t.useState(m===s.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[N,V]=t.useState(b),[k,D]=t.useState(!1),[_,H]=t.useState(c),[I,O]=t.useState(null!=h?h:[]),[B,Y]=t.useState(!1);const z=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(g)),[g]);return e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{template:_,setTemplate:H,device:y,setDevice:A,display_content:N,setDisplayContent:V,originalVariableList:I,setOriginalVariableList:O,isError:k,setIsError:D,channel:m,globalNormalizedPlaceholders:z,templateSelectionTriggered:B,setTemplateSelectionTriggered:Y,enabledCustomText:L,disableEditVariable:f}},{children:S?e.jsx(r.default,{channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:v,centralContainerStyles:{width:m===s.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==_?void 0:_.label,headingSubtitle:m===s.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(w=null==_?void 0:_.category)&&void 0!==w?w:"")} • ${null!==(q=null==_?void 0:_.templateCategory)&&void 0!==q?q:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(r.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:T,showVariableModal:E,variableList:j,discountCode:x,setDiscountCode:M}),C?e.jsx(o.default,{onSelect:function(){const e=null==C?void 0:C(_,I,null!=N?N:"");e?D(!!e):Y(!0)}}):e.jsx(e.Fragment,{})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),s=require("../template-preview/models/Channels.js"),o=require("./context/templateModalContext.js"),i=require("./modalElements/Footer.js"),n=require("./modalElements/TemplateSelectModalContent.js"),r=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:C,onTemplateSelect:g,globalPlaceholders:b,showOnlyContent:S,whatsappSpecificPickerMeta:T,zIndex:v,showVariableModal:j,variableList:x,discountCode:M,setDiscountCode:E,onBackPress:P,enabledCustomText:L}=d;var f,w;t.useEffect((()=>{N(h)}),[h]);const[q,y]=t.useState(m===s.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[A,N]=t.useState(h),[k,D]=t.useState(!1),[V,_]=t.useState(c),[H,I]=t.useState(null!=C?C:[]),[O,B]=t.useState(!1);const Y=t.useMemo((()=>r.convertPlaceholdersToBikDropdown(b)),[b]);return e.jsx(o.TemplateModalContext.Provider,Object.assign({value:{template:V,setTemplate:_,device:q,setDevice:y,display_content:A,setDisplayContent:N,originalVariableList:H,setOriginalVariableList:I,isError:k,setIsError:D,channel:m,globalNormalizedPlaceholders:Y,templateSelectionTriggered:O,setTemplateSelectionTriggered:B,enabledCustomText:L}},{children:S?e.jsx(n.default,{channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({zIndex:v,centralContainerStyles:{width:m===s.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==V?void 0:V.label,headingSubtitle:m===s.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(f=null==V?void 0:V.category)&&void 0!==f?f:"")} • ${null!==(w=null==V?void 0:V.templateCategory)&&void 0!==w?w:""}`:"",onBackPress:()=>{null==P||P()}},{children:[e.jsx(n.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:T,showVariableModal:j,variableList:x,discountCode:M,setDiscountCode:E}),g?e.jsx(i.default,{onSelect:function(){const e=null==g?void 0:g(V,H,null!=A?A:"");e?D(!!e):B(!0)}}):e.jsx(e.Fragment,{})]}))}))};

package/dist/cjs/components/template-context-mapper/context/templateModalContext.d.ts

@@ -22,7 +22,6 @@ export declare const TemplateModalContext: React.Context<{
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     enabledCustomText?: boolean | undefined;
-    disableEditVariable?: boolean | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -41,5 +40,4 @@ export declare const useTemplateModalContext: () => {
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     enabledCustomText?: boolean | undefined;
-    disableEditVariable?: boolean | undefined;
 };

package/dist/cjs/components/template-context-mapper/context/templateModalContext.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1});exports.TemplateModalContext=a,exports.useTemplateModalContext=()=>e.useContext(a);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1});exports.TemplateModalContext=r,exports.useTemplateModalContext=()=>e.useContext(r);

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.d.ts

@@ -6,7 +6,6 @@ export interface EditMediaV2Props {
     isLoading?: boolean;
     mediaType?: HEADER_TYPES;
     handleImageChange?: () => void;
-    disableEditVariable?: boolean;
 }
 declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditMediaV2;

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

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/document_pdf.svg.js"),i=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("../../../assets/icons/video_camcorder.svg.js"),n=require("styled-components"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),a=require("../../TypographyStyle.js"),d=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),h=require("./EditMediaV2.style.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=g(n).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/document_pdf.svg.js"),i=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("../../../assets/icons/video_camcorder.svg.js"),n=require("styled-components"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),a=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),h=require("./EditMediaV2.style.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=g(n).default.div`
 	padding-left: 14px;
 	padding-right: 6px;
 	width: 44px;
 	height: 24px;
 	border-left: 1px solid ${c.COLORS.stroke.primary};
 	cursor: pointer;
-`;exports.default=n=>{const{imageName:g,error:u,isLoading:p,mediaType:x,handleImageChange:y,disableEditVariable:O}=n,m=null==g?void 0:g[0].split("/"),f=null==m?void 0:m[m.length-1];return e.jsxs(h.Container,{children:[e.jsx(h.ImageContainer,Object.assign({error:!!u,onClick:u?y:void 0},{children:u?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(o.Spinner,{size:"small"}):x===l.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"",src:null==g?void 0:g[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):x===l.HEADER_TYPES.VIDEO?e.jsx(r.default,{width:18,height:22,color:c.COLORS.content.placeholder}):e.jsx(t.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(h.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:g&&u?e.jsx(e.Fragment,{}):p?e.jsx(a.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(a.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:d.default.toCapitilize(null==x?void 0:x.toLowerCase())||f}))})),!!u&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(a.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==x?void 0:x.toLowerCase(),". Retry"]})),e.jsx(a.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:u}))]})),!O&&!u&&!p&&e.jsx(j,Object.assign({onClick:y,onKeyDown:y,role:"presentation"},{children:e.jsx(i.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};
+`;exports.default=n=>{const{imageName:g,error:u,isLoading:p,mediaType:x,handleImageChange:y}=n,O=null==g?void 0:g[0].split("/"),m=null==O?void 0:O[O.length-1];return e.jsxs(h.Container,{children:[e.jsx(h.ImageContainer,Object.assign({error:!!u,onClick:u?y:void 0},{children:u?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(o.Spinner,{size:"small"}):x===l.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"",src:null==g?void 0:g[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):x===l.HEADER_TYPES.VIDEO?e.jsx(r.default,{width:18,height:22,color:c.COLORS.content.placeholder}):e.jsx(t.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(h.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:g&&u?e.jsx(e.Fragment,{}):p?e.jsx(d.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:a.default.toCapitilize(null==x?void 0:x.toLowerCase())||m}))})),!!u&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==x?void 0:x.toLowerCase(),". Retry"]})),e.jsx(d.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:u}))]})),!u&&!p&&e.jsx(j,Object.assign({onClick:y,onKeyDown:y,role:"presentation"},{children:e.jsx(i.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),r=require("../../helpers/FileUploaderHelper.js"),a=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),n=require("./EditMediaV2.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(i);exports.default=s=>{let{mediaComponent:u,template:c,updateTemplateImageUrl:p,whatsappSpecificPickerMeta:m}=s;var f,v;const{disableEditVariable:E}=l.useTemplateModalContext(),[j,g]=i.useState(void 0),[_,h]=i.useState(),C=d.default.createRef(),[q,S]=i.useState(!1),[x,A]=i.useState("");function M(t){var i;return e.__awaiter(this,void 0,void 0,(function*(){const e=new r.FileUploaderHelper;if(t instanceof Blob){const r=e.validate(t);if(r)A(r),S(!1);else{const e=u.format===o.HEADER_TYPES.IMAGE,r=yield m.uploadMediaFiles({file:t,fileName:j,isImage:e});if(r.success){const[e]=t.type.split("/");p(null!==(i=r.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else A("An unknown technical error occured");S(!1)}}else A("An unknown technical error occured"),S(!1)}))}let y;return y=u.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":u.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[!!_&&t.jsx(a.BikImageCropper,{aspectRatio:15/8,src:_,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){S(!1),A("");const e=yield fetch(t);M(yield e.blob()).then((()=>{h(void 0)}))}))},onCancel:()=>{S(!1),h("")}}),t.jsx("input",{ref:C,style:{display:"none"},type:"file",onChange:function(e){var t;A(""),S(!0);const i=null===(t=e.target.files)||void 0===t?void 0:t[0];if(u.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;h(""),g(""),e.onload=()=>{h(e.result),g(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else M(i)},accept:y}),t.jsx(n.default,{imageName:null!==(v=null===(f=null==u?void 0:u.example)||void 0===f?void 0:f.header_handle)&&void 0!==v?v:[],handleImageChange:function(){var e;(null===(e=null==C?void 0:C.current)||void 0===e?void 0:e.click)&&C.current.click()},mediaType:null==u?void 0:u.format,error:x,isLoading:q,disableEditVariable:E})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),i=require("../../helpers/FileUploaderHelper.js"),a=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var n=require("../../template-preview/models/TemplateMeta.js"),o=require("./EditMediaV2.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=l(r);exports.default=l=>{let{mediaComponent:u,template:d,updateTemplateImageUrl:c,whatsappSpecificPickerMeta:p}=l;var m,f;const[v,E]=r.useState(void 0),[g,j]=r.useState(),_=s.default.createRef(),[h,S]=r.useState(!1),[q,A]=r.useState("");function C(t){var r;return e.__awaiter(this,void 0,void 0,(function*(){const e=new i.FileUploaderHelper;if(t instanceof Blob){const i=e.validate(t);if(i)A(i),S(!1);else{const e=u.format===n.HEADER_TYPES.IMAGE,i=yield p.uploadMediaFiles({file:t,fileName:v,isImage:e});if(i.success){const[e]=t.type.split("/");c(null!==(r=i.url)&&void 0!==r?r:"","application"===e?n.HEADER_TYPES.DOCUMENT:n.HEADER_TYPES[e.toUpperCase()])}else A("An unknown technical error occured");S(!1)}}else A("An unknown technical error occured"),S(!1)}))}let y;return y=u.format===n.HEADER_TYPES.IMAGE?"image/png, image/jpeg":u.format===n.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[!!g&&t.jsx(a.BikImageCropper,{aspectRatio:15/8,src:g,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function*(){S(!1),A("");const e=yield fetch(t);C(yield e.blob()).then((()=>{j(void 0)}))}))},onCancel:()=>{S(!1),j("")}}),t.jsx("input",{ref:_,style:{display:"none"},type:"file",onChange:function(e){var t;A(""),S(!0);const r=null===(t=e.target.files)||void 0===t?void 0:t[0];if(u.format===n.HEADER_TYPES.IMAGE){const e=new FileReader;j(""),E(""),e.onload=()=>{j(e.result),E(null==r?void 0:r.name)},r&&e.readAsDataURL(r)}else C(r)},accept:y}),t.jsx(o.default,{imageName:null!==(f=null===(m=null==u?void 0:u.example)||void 0===m?void 0:m.header_handle)&&void 0!==f?f:[],handleImageChange:function(){var e;(null===(e=null==_?void 0:_.current)||void 0===e?void 0:e.click)&&_.current.click()},mediaType:null==u?void 0:u.format,error:q,isLoading:h})]})};

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),r=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),l=require("./VariableConnector.js");exports.default=s=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=s;var u;const{originalVariableList:b,disableEditVariable:c}=i.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(u=null==b?void 0:b.body)||void 0===u?void 0:u.map(((i,s)=>c||!i.isEditableVariable?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(r.BodySecondary,Object.assign({style:{color:t.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",s+1]})),e.jsx(a.Input,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),s):e.jsx(l.default,{index:s,variable:i,showVariableModal:d,variableList:p},`${s}-${i.index}`)))}):e.jsx(e.Fragment,{})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../input/Input.js"),r=require("../../TypographyStyle.js"),t=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),s=require("./VariableConnector.js");exports.default=l=>{let{descriptionComponent:n,type:o,showVariableModal:d,variableList:p}=l;var u;const{originalVariableList:c}=i.useTemplateModalContext();return"BODY"===n.type?e.jsx("div",{children:null===(u=null==c?void 0:c.body)||void 0===u?void 0:u.map(((i,l)=>i.isEditableVariable?e.jsx(s.default,{index:l,variable:i,showVariableModal:d,variableList:p},`${l}-${i.index}`):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(r.BodySecondary,Object.assign({style:{color:t.COLORS.content.primary}},{children:["HEADER"===o?"Header":""," Locked variable ",l+1]})),e.jsx(a.Input,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l)))}):e.jsx(e.Fragment,{})};

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

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),r=require("../../add-variableV2/AddVariableV2SideModal.js"),s=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var l=require("../../input/Input.js"),n=require("../../tooltips/Tooltip.js"),o=require("../../../constants/Theme.js"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../context/templateModalContext.js"),h=require("./VariableConnector.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=x(i);const p=b.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../../assets/icons/info.svg.js"),t=require("react"),i=require("styled-components"),r=require("../../add-variableV2/AddVariableV2SideModal.js"),s=require("../../../assets/icons/plus.svg.js");require("../../add-variableV2/AddVariableV2.styled.js"),require("../../button/Button.js"),require("../../icon-button/IconButton.js");var l=require("../../input/Input.js"),n=require("../../tooltips/Tooltip.js"),o=require("../../../constants/Theme.js"),d=require("../../TypographyStyle.js"),c=require("../../checkBox/CheckBox.js"),u=require("../../template-preview/models/Channels.js"),h=require("../context/templateModalContext.js"),x=require("./VariableConnector.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=p(i);const j=b.default.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,j=b.default.button`
+`,g=b.default.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,4 +25,4 @@
 		display: flex;
 		align-items: center;
 	}
-`;exports.AddVariableStyled=j,exports.Container=p,exports.default=i=>{let{onFocus:x,showVariableModal:b,variableList:g,discountCode:f,setDiscountCode:v}=i;const{originalVariableList:y,disableEditVariable:m}=u.useTemplateModalContext(),[V,O]=t.useState(!1),[C,S]=t.useState(!1),[q,w]=t.useState(!1),[k,T]=t.useState(""),[B,L]=t.useState(!1),E=t.useRef(),A=t.useRef();return t.useEffect((()=>{v&&v(f+k)}),[k]),t.useEffect((()=>{y.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(O(!0),f&&L&&L(!0))}))}),[y]),e.jsxs(p,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==y?void 0:y.map(((a,t)=>!a.isEditableVariable||m?e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t):e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(h.default,{index:t,variable:a,onFocus:()=>null==x?void 0:x(t),showVariableModal:b,variableList:g,setShowDiscountCheckBox:O})}),t))),(V||f)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{B&&v&&v(""),L(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:E,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{v&&v(e)},value:f,onFocus:()=>{S(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(E.current&&E.current.focus(),S(!0)):(S(!1),w(!1))},noErrorHint:!0,validate:e=>[!0,""]}),C&&e.jsx(j,Object.assign({ref:A,id:"addVar",onClick:e=>{e.stopPropagation(),w(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),q&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:q,setShowVariable:w,variableValue:k,setVariableValue:T,placeholder:"Add a variable",customTrigger:e=>{T(e.actualValue),S(!1)}})]})};
+`;exports.AddVariableStyled=g,exports.Container=j,exports.default=i=>{let{onFocus:p,showVariableModal:b,variableList:f,discountCode:v,setDiscountCode:y}=i;const{originalVariableList:m,channel:V}=h.useTemplateModalContext(),[O,C]=t.useState(!1),[S,q]=t.useState(!1),[w,T]=t.useState(!1),[k,L]=t.useState(""),[B,E]=t.useState(!1),A=t.useRef(),I=t.useRef();return t.useEffect((()=>{y&&y(v+k)}),[k]),t.useEffect((()=>{m.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(C(!0),v&&E&&E(!0))}))}),[m]),e.jsxs(j,{children:[e.jsxs("div",Object.assign({style:{padding:8}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[e.jsx(d.TitleRegular,Object.assign({style:{color:o.COLORS.content.primary}},{children:"Edit variables and links"})),e.jsx(n.Tooltip,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(a.default,{width:20,height:20,color:o.COLORS.content.placeholder})}))}))]})),e.jsx(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==m?void 0:m.map(((a,t)=>V!==u.CHANNEL_TYPE.EMAIL||a.isEditableVariable?e.jsx("div",Object.assign({style:{marginTop:16}},{children:e.jsx(x.default,{index:t,variable:a,onFocus:()=>null==p?void 0:p(t),showVariableModal:b,variableList:f,setShowDiscountCheckBox:C})}),t):e.jsxs("div",Object.assign({style:{margin:"16px 8px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:o.COLORS.content.primary}},{children:["Locked variable ",t+1]})),e.jsx(l.Input,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),t))),(O||v)&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(c.CheckBox,{isChecked:B,onValueChange:()=>{B&&y&&y(""),E(!B)}}),e.jsx(d.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),B&&e.jsxs("div",Object.assign({ref:A,style:{margin:10}},{children:[e.jsx(l.Input,{placeholder:"Enter your discount code",onChangeText:e=>{y&&y(e)},value:v,onFocus:()=>{q(!0)},onBlur:e=>{var a;"addVar"===(null===(a=e.relatedTarget)||void 0===a?void 0:a.id)?(A.current&&A.current.focus(),q(!0)):(q(!1),T(!1))},noErrorHint:!0,validate:e=>[!0,""]}),S&&e.jsx(g,Object.assign({ref:I,id:"addVar",onClick:e=>{e.stopPropagation(),T(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:20,height:20,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),w&&e.jsx(r.AddVariableV2SideModal,{zIndex:2e3,data:null!=f?f:[],showVariable:w,setShowVariable:T,variableValue:k,setVariableValue:L,placeholder:"Add a variable",customTrigger:e=>{L(e.actualValue),q(!1)}})]})};

package/dist/esm/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -24,6 +24,5 @@ export interface TemplateContextMapperProps {
     discountCode?: string;
     setDiscountCode?: (code: string) => void;
     enabledCustomText?: boolean;
-    disableEditVariable?: boolean;
 }
-export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, disableEditVariable, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, zIndex, showVariableModal, variableList, discountCode, setDiscountCode, onBackPress, enabledCustomText, }: TemplateContextMapperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as d}from"./context/templateModalContext.js";import c from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:b,closeDialog:h,showVariableMapping:g,channel:v,htmlContent:C,templateVariables:f,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:j,zIndex:w,showVariableModal:P,variableList:E,discountCode:V,setDiscountCode:x,onBackPress:L,enabledCustomText:y,disableEditVariable:k}=u;var D,I;o((()=>{B(C)}),[C]);const[A,O]=a(v===s.EMAIL?"desktop":"mobile"),[z,B]=a(C),[F,H]=a(!1),[$,N]=a(b),[U,W]=a(null!=f?f:[]),[_,q]=a(!1);const G=i((()=>p(S)),[S]);return e(d.Provider,Object.assign({value:{template:$,setTemplate:N,device:A,setDevice:O,display_content:z,setDisplayContent:B,originalVariableList:U,setOriginalVariableList:W,isError:F,setIsError:H,channel:v,globalNormalizedPlaceholders:G,templateSelectionTriggered:_,setTemplateSelectionTriggered:q,enabledCustomText:y,disableEditVariable:k}},{children:T?e(m,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({zIndex:w,centralContainerStyles:{width:v===s.EMAIL&&g?1e3:650},open:!0,onClose:()=>{null==h||h()},headingTitle:null==$?void 0:$.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(D=null==$?void 0:$.category)&&void 0!==D?D:"")} • ${null!==(I=null==$?void 0:$.templateCategory)&&void 0!==I?I:""}`:"",onBackPress:()=>{null==L||L()}},{children:[e(m,{showVariableMapping:g,channel:v,whatsappSpecificPickerMeta:j,showVariableModal:P,variableList:E,discountCode:V,setDiscountCode:x}),M?e(c,{onSelect:function(){const e=null==M?void 0:M($,U,null!=z?z:"");e?H(!!e):q(!0)}}):e(l,{})]}))}))};export{u as TemplateContextMapper};
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as a,useMemo as i}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import d from"./modalElements/Footer.js";import m from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as p}from"./utils/convertPlaceholdersToBikDropdown.js";const u=u=>{let{selectedTemplate:h,closeDialog:g,showVariableMapping:b,channel:v,htmlContent:C,templateVariables:f,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:T,whatsappSpecificPickerMeta:j,zIndex:w,showVariableModal:P,variableList:x,discountCode:L,setDiscountCode:y,onBackPress:E,enabledCustomText:V}=u;var k,D;o((()=>{z(C)}),[C]);const[I,A]=a(v===s.EMAIL?"desktop":"mobile"),[O,z]=a(C),[B,F]=a(!1),[H,$]=a(h),[N,U]=a(null!=f?f:[]),[W,_]=a(!1);const q=i((()=>p(S)),[S]);return e(c.Provider,Object.assign({value:{template:H,setTemplate:$,device:I,setDevice:A,display_content:O,setDisplayContent:z,originalVariableList:N,setOriginalVariableList:U,isError:B,setIsError:F,channel:v,globalNormalizedPlaceholders:q,templateSelectionTriggered:W,setTemplateSelectionTriggered:_,enabledCustomText:V}},{children:T?e(m,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({zIndex:w,centralContainerStyles:{width:v===s.EMAIL&&b?1e3:650},open:!0,onClose:()=>{null==g||g()},headingTitle:null==H?void 0:H.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(k=null==H?void 0:H.category)&&void 0!==k?k:"")} • ${null!==(D=null==H?void 0:H.templateCategory)&&void 0!==D?D:""}`:"",onBackPress:()=>{null==E||E()}},{children:[e(m,{showVariableMapping:b,channel:v,whatsappSpecificPickerMeta:j,showVariableModal:P,variableList:x,discountCode:L,setDiscountCode:y}),M?e(d,{onSelect:function(){const e=null==M?void 0:M(H,N,null!=O?O:"");e?F(!!e):_(!0)}}):e(l,{})]}))}))};export{u as TemplateContextMapper};

package/dist/esm/components/template-context-mapper/context/templateModalContext.d.ts

@@ -22,7 +22,6 @@ export declare const TemplateModalContext: React.Context<{
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     enabledCustomText?: boolean | undefined;
-    disableEditVariable?: boolean | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
@@ -41,5 +40,4 @@ export declare const useTemplateModalContext: () => {
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     enabledCustomText?: boolean | undefined;
-    disableEditVariable?: boolean | undefined;
 };

package/dist/esm/components/template-context-mapper/context/templateModalContext.js

@@ -1 +1 @@
-import e,{useContext as t}from"react";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";const r=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:l.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1}),a=()=>t(r);export{r as TemplateModalContext,a as useTemplateModalContext};
+import e,{useContext as t}from"react";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";const r=e.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:l.EMAIL,template:null,isError:!1,enabledCustomText:!1}),o=()=>t(r);export{r as TemplateModalContext,o as useTemplateModalContext};

package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.d.ts

@@ -6,7 +6,6 @@ export interface EditMediaV2Props {
     isLoading?: boolean;
     mediaType?: HEADER_TYPES;
     handleImageChange?: () => void;
-    disableEditVariable?: boolean;
 }
 declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
 export default EditMediaV2;

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

@@ -1,8 +1,8 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as d}from"../../spinner/Spinner.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as c,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as y}from"./EditMediaV2.style.js";const v=l.div`
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import l from"styled-components";import{Spinner as c}from"../../spinner/Spinner.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as a,BodySecondary as m,Caption as p}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{Container as f,ImageContainer as j,RightComponent as y}from"./EditMediaV2.style.js";const v=l.div`
 	padding-left: 14px;
 	padding-right: 6px;
 	width: 44px;
 	height: 24px;
 	border-left: 1px solid ${g.stroke.primary};
 	cursor: pointer;
-`,b=l=>{const{imageName:b,error:u,isLoading:x,mediaType:w,handleImageChange:O,disableEditVariable:C}=l,L=null==b?void 0:b[0].split("/"),E=null==L?void 0:L[L.length-1];return e(f,{children:[t(j,Object.assign({error:!!u,onClick:u?O:void 0},{children:u?t(s,{color:g.content.brand,width:32,height:32}):x?t(d,{size:"small"}):w===a.IMAGE?t("img",{alt:"",src:null==b?void 0:b[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===a.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(y,{children:[t("div",Object.assign({style:{flex:1}},{children:b&&u?t(i,{}):x?t(c,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||E}))})),!!u&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:u}))]})),!C&&!u&&!x&&t(v,Object.assign({onClick:O,onKeyDown:O,role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{b as default};
+`,u=l=>{const{imageName:u,error:b,isLoading:x,mediaType:w,handleImageChange:O}=l,C=null==u?void 0:u[0].split("/"),L=null==C?void 0:C[C.length-1];return e(f,{children:[t(j,Object.assign({error:!!b,onClick:b?O:void 0},{children:b?t(s,{color:g.content.brand,width:32,height:32}):x?t(c,{size:"small"}):w===d.IMAGE?t("img",{alt:"",src:null==u?void 0:u[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===d.VIDEO?t(n,{width:18,height:22,color:g.content.placeholder}):t(o,{width:18,height:22,color:g.content.placeholder})})),e(y,{children:[t("div",Object.assign({style:{flex:1}},{children:u&&b?t(i,{}):x?t(a,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(m,Object.assign({style:{color:g.content.primary,marginLeft:8}},{children:h.toCapitilize(null==w?void 0:w.toLowerCase())||L}))})),!!b&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(m,Object.assign({style:{color:g.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(p,Object.assign({style:{color:g.content.secondary}},{children:b}))]})),!b&&!x&&t(v,Object.assign({onClick:O,onKeyDown:O,role:"presentation"},{children:t(r,{width:24,height:24,color:g.content.placeholder})}))]})]})};export{u as default};

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

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as t,jsx as i}from"react/jsx-runtime";import a,{useState as r}from"react";import{FileUploaderHelper as n}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import m from"./EditMediaV2.js";const d=d=>{let{mediaComponent:c,template:f,updateTemplateImageUrl:u,whatsappSpecificPickerMeta:v}=d;var g,h;const{disableEditVariable:j}=p(),[C,M]=r(void 0),[y,I]=r(),b=a.createRef(),[E,k]=r(!1),[w,x]=r("");function A(o){var t;return e(this,void 0,void 0,(function*(){const e=new n;if(o instanceof Blob){const i=e.validate(o);if(i)x(i),k(!1);else{const e=c.format===s.IMAGE,i=yield v.uploadMediaFiles({file:o,fileName:C,isImage:e});if(i.success){const[e]=o.type.split("/");u(null!==(t=i.url)&&void 0!==t?t:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else x("An unknown technical error occured");k(!1)}}else x("An unknown technical error occured"),k(!1)}))}let U;return U=c.format===s.IMAGE?"image/png, image/jpeg":c.format===s.VIDEO?"video/mp4":"application/pdf",o(t,{children:[!!y&&i(l,{aspectRatio:15/8,src:y,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),x("");const e=yield fetch(o);A(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{k(!1),I("")}}),i("input",{ref:b,style:{display:"none"},type:"file",onChange:function(e){var o;x(""),k(!0);const t=null===(o=e.target.files)||void 0===o?void 0:o[0];if(c.format===s.IMAGE){const e=new FileReader;I(""),M(""),e.onload=()=>{I(e.result),M(null==t?void 0:t.name)},t&&e.readAsDataURL(t)}else A(t)},accept:U}),i(m,{imageName:null!==(h=null===(g=null==c?void 0:c.example)||void 0===g?void 0:g.header_handle)&&void 0!==h?h:[],handleImageChange:function(){var e;(null===(e=null==b?void 0:b.current)||void 0===e?void 0:e.click)&&b.current.click()},mediaType:null==c?void 0:c.format,error:w,isLoading:E,disableEditVariable:j})]})};export{d as default};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as i,jsx as t}from"react/jsx-runtime";import n,{useState as r}from"react";import{FileUploaderHelper as a}from"../../helpers/FileUploaderHelper.js";import{BikImageCropper as l}from"../../image-cropper/BikImageCropper.js";import"../../image-compress/ImageCompress.js";import"../../states/StateComponent.js";import"../../../constants/zindex.js";import"../../modals/styledModal.js";import"../../spinner/Spinner.js";import{HEADER_TYPES as s}from"../../template-preview/models/TemplateMeta.js";import p from"./EditMediaV2.js";const m=m=>{let{mediaComponent:c,template:d,updateTemplateImageUrl:f,whatsappSpecificPickerMeta:u}=m;var v,g;const[h,j]=r(void 0),[C,y]=r(),I=n.createRef(),[M,k]=r(!1),[w,A]=r("");function E(o){var i;return e(this,void 0,void 0,(function*(){const e=new a;if(o instanceof Blob){const t=e.validate(o);if(t)A(t),k(!1);else{const e=c.format===s.IMAGE,t=yield u.uploadMediaFiles({file:o,fileName:h,isImage:e});if(t.success){const[e]=o.type.split("/");f(null!==(i=t.url)&&void 0!==i?i:"","application"===e?s.DOCUMENT:s[e.toUpperCase()])}else A("An unknown technical error occured");k(!1)}}else A("An unknown technical error occured"),k(!1)}))}let U;return U=c.format===s.IMAGE?"image/png, image/jpeg":c.format===s.VIDEO?"video/mp4":"application/pdf",o(i,{children:[!!C&&t(l,{aspectRatio:15/8,src:C,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),A("");const e=yield fetch(o);E(yield e.blob()).then((()=>{y(void 0)}))}))},onCancel:()=>{k(!1),y("")}}),t("input",{ref:I,style:{display:"none"},type:"file",onChange:function(e){var o;A(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(c.format===s.IMAGE){const e=new FileReader;y(""),j(""),e.onload=()=>{y(e.result),j(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else E(i)},accept:U}),t(p,{imageName:null!==(g=null===(v=null==c?void 0:c.example)||void 0===v?void 0:v.header_handle)&&void 0!==g?g:[],handleImageChange:function(){var e;(null===(e=null==I?void 0:I.current)||void 0===e?void 0:e.click)&&I.current.click()},mediaType:null==c?void 0:c.format,error:w,isLoading:M})]})};export{m as default};

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:d,type:p,showVariableModal:m,variableList:b}=s;var c;const{originalVariableList:v,disableEditVariable:h}=l();return"BODY"===d.type?e("div",{children:null===(c=null==v?void 0:v.body)||void 0===c?void 0:c.map(((i,l)=>h||!i.isEditableVariable?a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l):e(n,{index:l,variable:i,showVariableModal:m,variableList:b},`${l}-${i.index}`)))}):e(i,{})};export{s as default};
+import{jsx as e,jsxs as a,Fragment as t}from"react/jsx-runtime";import{Input as i}from"../../input/Input.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:d,type:p,showVariableModal:m,variableList:c}=s;var b;const{originalVariableList:v}=l();return"BODY"===d.type?e("div",{children:null===(b=null==v?void 0:v.body)||void 0===b?void 0:b.map(((t,l)=>t.isEditableVariable?e(n,{index:l,variable:t,showVariableModal:m,variableList:c},`${l}-${t.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(i,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),l)))}):e(t,{})};export{s as default};

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

@@ -1,9 +1,9 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as a,useRef as o,useEffect as r}from"react";import l from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import s from"../../../assets/icons/plus.svg.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as d}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import{TitleRegular as h,BodySecondary as m,TitleSmall as b}from"../../TypographyStyle.js";import{CheckBox as g}from"../../checkBox/CheckBox.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import f from"./VariableConnector.js";const v=l.div`
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as a,useRef as o,useEffect as r}from"react";import l from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import s from"../../../assets/icons/plus.svg.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as d}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import{TitleRegular as h,BodySecondary as m,TitleSmall as b}from"../../TypographyStyle.js";import{CheckBox as g}from"../../checkBox/CheckBox.js";import{CHANNEL_TYPE as u}from"../../template-preview/models/Channels.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import v from"./VariableConnector.js";const x=l.div`
 	overflow-y: auto;
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,x=l=>{let{onFocus:x,showVariableModal:j,variableList:V,discountCode:w,setDiscountCode:O}=l;const{originalVariableList:k,disableEditVariable:C}=u(),[T,B]=a(!1),[E,L]=a(!1),[A,I]=a(!1),[M,S]=a(""),[D,F]=a(!1),N=o(),z=o();return r((()=>{O&&O(w+M)}),[M]),r((()=>{k.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(B(!0),w&&F&&F(!0))}))}),[k]),e(v,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==k?void 0:k.map(((t,a)=>!t.isEditableVariable||C?e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a):i("div",Object.assign({style:{marginTop:16}},{children:i(f,{index:a,variable:t,onFocus:()=>null==x?void 0:x(a),showVariableModal:j,variableList:V,setShowDiscountCheckBox:B})}),a))),(T||w)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(g,{isChecked:D,onValueChange:()=>{D&&O&&O(""),F(!D)}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),D&&e("div",Object.assign({ref:N,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:w,onFocus:()=>{L(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(N.current&&N.current.focus(),L(!0)):(L(!1),I(!1))},noErrorHint:!0,validate:e=>[!0,""]}),E&&i(y,Object.assign({ref:z,id:"addVar",onClick:e=>{e.stopPropagation(),I(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),A&&i(n,{zIndex:2e3,data:null!=V?V:[],showVariable:A,setShowVariable:I,variableValue:M,setVariableValue:S,placeholder:"Add a variable",customTrigger:e=>{S(e.actualValue),L(!1)}})]})},y=l.button`
+`,y=l=>{let{onFocus:y,showVariableModal:V,variableList:w,discountCode:O,setDiscountCode:k}=l;const{originalVariableList:C,channel:T}=f(),[B,L]=a(!1),[A,E]=a(!1),[I,M]=a(!1),[S,D]=a(""),[F,N]=a(!1),z=o(),H=o();return r((()=>{k&&k(O+S)}),[S]),r((()=>{C.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(L(!0),O&&N&&N(!0))}))}),[C]),e(x,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(h,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(m,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==C?void 0:C.map(((t,a)=>T!==u.EMAIL||t.isEditableVariable?i("div",Object.assign({style:{marginTop:16}},{children:i(v,{index:a,variable:t,onFocus:()=>null==y?void 0:y(a),showVariableModal:V,variableList:w,setShowDiscountCheckBox:L})}),a):e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(m,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a))),(B||O)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(g,{isChecked:F,onValueChange:()=>{F&&k&&k(""),N(!F)}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),F&&e("div",Object.assign({ref:z,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{k&&k(e)},value:O,onFocus:()=>{E(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(z.current&&z.current.focus(),E(!0)):(E(!1),M(!1))},noErrorHint:!0,validate:e=>[!0,""]}),A&&i(j,Object.assign({ref:H,id:"addVar",onClick:e=>{e.stopPropagation(),M(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),I&&i(n,{zIndex:2e3,data:null!=w?w:[],showVariable:I,setShowVariable:M,variableValue:S,setVariableValue:D,placeholder:"Add a variable",customTrigger:e=>{D(e.actualValue),E(!1)}})]})},j=l.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,4 +25,4 @@ import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/
 		display: flex;
 		align-items: center;
 	}
-`;export{y as AddVariableStyled,v as Container,x as default};
+`;export{j as AddVariableStyled,x as Container,y as default};

package/package.json

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