@bikdotai/bik-component-library 0.0.418 → 0.0.419-beta.10

package/dist/esm/components/carousel-preview/CarouselPreview.js

@@ -0,0 +1,46 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import o from"../../assets/icons/chevronLeft.svg.js";import i from"../../assets/icons/chevronRight.svg.js";import{CarouselProvider as r,ButtonBack as n,Slider as l,Slide as a,ButtonNext as s}from"pure-react-carousel";import d,{useEffect as c}from"react";import p from"styled-components";import m from"./CarouselPreviewCard.js";import{COLORS as h}from"../../constants/Theme.js";const u=p.div`
+	background-image: 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');
+	border-color: ${h.stroke.primary};
+	border-top-style: solid;
+	border-bottom-style: solid;
+	border-top-width: 1px;
+	border-bottom-width: 1px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+	height: 500px;
+	overflow-y: auto;
+`,b=p.div`
+	flex-direction: row;
+	display: flex;
+	align-items: center;
+	.left_button {
+		border-radius: 50%;
+		width: 38px;
+		height: 36px;
+		align-items: center;
+		justify-content: center;
+		display: flex;
+		position: absolute;
+		left: 0;
+		z-index: 10;
+		margin-left: 4px;
+	}
+	.right_button {
+		border-radius: 50%;
+		width: 38px;
+		height: 36px;
+		align-items: center;
+		justify-content: center;
+		display: flex;
+		position: absolute;
+		right: 0;
+		z-index: 10;
+		margin-right: 4px;
+	}
+	.slider {
+		width: 360px;
+		height: 480px;
+	}
+`,g=d.forwardRef(((d,p)=>{let{channel:g,template:v,showSampleValues:f}=d;var x,y,j,w,k,O;return c((()=>{console.log("template mapper  use effect: ",-1,v)}),[null===(x=null==v?void 0:v.components)||void 0===x?void 0:x[1].cards]),e(u,{children:[t(m,{channel:g,template:v,isHeader:!0,carouselCardIndex:-1}),t(r,Object.assign({naturalSlideWidth:100,naturalSlideHeight:125,totalSlides:null!==(w=null===(j=null===(y=null==v?void 0:v.components)||void 0===y?void 0:y[1].cards)||void 0===j?void 0:j.length)&&void 0!==w?w:1,orientation:"horizontal",visibleSlides:1.2},{children:e(b,{children:[t(n,Object.assign({className:"left_button"},{children:t(o,{height:16,width:16,color:h.content.primary})})),t(l,Object.assign({className:"slider"},{children:null===(O=null===(k=null==v?void 0:v.components)||void 0===k?void 0:k[1].cards)||void 0===O?void 0:O.map(((e,o)=>{var i,r;const n={components:e.components,mapping:null===(r=null===(i=null==v?void 0:v.mapping)||void 0===i?void 0:i.cards)||void 0===r?void 0:r[o]};return t(a,Object.assign({index:o},{children:t(m,{channel:g,template:n,isHeader:!1,carouselCardIndex:o},o)}),o)}))})),t(s,Object.assign({className:"right_button"},{children:t(i,{height:16,width:16,color:h.content.primary})}))]})}))]})}));export{g as CarouselPreview};

package/dist/esm/components/carousel-preview/CarouselPreviewCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CHANNEL_TYPE } from "../template-preview/models/Channels";
+declare const CarouselPreviewCard: React.ForwardRefExoticComponent<{
+    channel: CHANNEL_TYPE;
+    template: any;
+    showSampleValues?: boolean | undefined;
+    isHeader?: boolean | undefined;
+    carouselCardIndex?: number | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default CarouselPreviewCard;

package/dist/esm/components/carousel-preview/CarouselPreviewCard.js

@@ -0,0 +1,13 @@
+import{jsx as e}from"react/jsx-runtime";import t from"react";import p from"styled-components";import{TemplatePreview as a}from"../template-preview/TemplatePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../constants/Theme.js";import"../template-preview/models/TemplateMeta.js";import"../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as r}from"../template-preview/models/Channels.js";const i=p.div`
+	position: relative;
+	height: ${e=>e.isHeader?"150px":"100%"};
+	width: ${e=>e.channel===r.WHATSAPP?"360px":"300px"};
+`,l=p.div`
+	position: absolute;
+	flex: 1;
+	scroll-behavior: smooth;
+	left: 12px;
+	top: 8px;
+	width: calc(100% - 25px);
+	height: calc(100% - 17px);
+`,s=t.forwardRef(((t,p)=>{let{channel:r,template:s,showSampleValues:o,isHeader:m,carouselCardIndex:n}=t;return e("div",{children:e(i,Object.assign({channel:r,isHeader:null!=m&&m},{children:e(l,Object.assign({ref:p},{children:e(a,{showSampleValues:o,template:s,channel:r,size:"small",hideHeader:!0,carouselCardIndex:n})}))}))})}));export{s as default};

package/dist/esm/components/carousel-preview/index.d.ts

@@ -0,0 +1 @@
+export * from './CarouselPreview';

package/dist/esm/components/custom-date-time/CustomDateTime.js

@@ -1 +1 @@
-import{jsxs as e,jsx as o}from"react/jsx-runtime";import{format as t,isToday as r}from"date-fns";import{useState as n,useEffect as s}from"react";import i from"./DateSelector/DateSelector.js";import{DropdownPopover as m}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"../zeroState/ZeroState.js";import{BodySecondary as p}from"../TypographyStyle.js";import"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import{Input as d}from"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import l from"../../utils/DateUtils.js";import c from"../../assets/icons/chevronDown.svg.js";import a from"../../assets/icons/clock.svg.js";import{CustomDateTimeStyle as u}from"./CustomDateTime.styled.js";const j=()=>{const e=[];for(let o=0;o<2;o++)for(let t=0;t<12;t++){let r;r=0===t?"12":t<10?`0${t}`:`${t}`;const n=`${r}:00 ${0===o?"AM":"PM"}`,s=`${r}:30 ${0===o?"AM":"PM"}`;e.push({label:n,value:n,selected:!1},{label:s,value:s,selected:!1})}return e},w=w=>{const[D,f]=n(w.time),[h,v]=n(w.date);s((()=>{w.setError(void 0);const e=l.convert12HourTimeTo24Hour(D),o=t(new Date,"HH:mm:ss");if(r(h)&&e<o)return void w.setError("Selected time should be later than current time");w.setError(void 0);const[n,s]=e.split(":"),i=new Date(h.getTime());i.setHours(+n,+s),w.onChange(i)}),[h,D]);return e(u,{children:[e("div",Object.assign({style:{display:"flex",gap:16}},{children:[o("div",Object.assign({style:{flex:1}},{children:o(i,{customDate:h,setCustomDate:v,placement:w.placement,minDate:w.minDate})})),o("div",Object.assign({style:{flex:1}},{children:o(m,Object.assign({options:j(),onSelect:e=>{f(e.value)}},{children:o(d,{value:D,leftIcon:{icon:a},rightIcon:{icon:c},onChangeText:e=>(e=>{if(l.timeFormatValidation(e)){const o=l.convert12HourTimeTo24Hour(e),n=t(new Date,"HH:mm:ss");if(r(h)&&o<n)return void w.setError("Selected time should be later than current time");w.setError(void 0),f(e)}else w.setError('Format of time should be "HH:MM AM" or "HH:MM PM"')})(e)})}))}))]})),w.error&&o(p,Object.assign({style:{paddingTop:8}},{children:w.error}))]})};export{w as CustomDateTime};
+import{jsxs as e,jsx as o}from"react/jsx-runtime";import{format as t,isToday as r}from"date-fns";import{useState as n,useEffect as s}from"react";import i from"./DateSelector/DateSelector.js";import{DropdownPopover as m}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"../zeroState/ZeroState.js";import{BodySecondary as p}from"../TypographyStyle.js";import"../../constants/Theme.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import{Input as d}from"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import l from"../../utils/DateUtils.js";import c from"../../assets/icons/chevronDown.svg.js";import a from"../../assets/icons/clock.svg.js";import{CustomDateTimeStyle as u}from"./CustomDateTime.styled.js";const j=e=>{const o=[];for(let t=0;t<2;t++)for(let r=0;r<12;r++){let n;n=0===r?"12":r<10?`0${r}`:`${r}`;const s=`${n}:00 ${0===t?"AM":"PM"}`,i=`${n}:30 ${0===t?"AM":"PM"}`;o.push({label:s,value:s,selected:s===e},{label:i,value:i,selected:i===e})}return o},w=w=>{const[D,f]=n(w.time),[h,v]=n(w.date);s((()=>{w.setError(void 0);const e=l.convert12HourTimeTo24Hour(D),o=t(new Date,"HH:mm:ss");if(r(h)&&e<o)return void w.setError("Selected time should be later than current time");w.setError(void 0);const[n,s]=e.split(":"),i=new Date(h.getTime());i.setHours(+n,+s),w.onChange(i)}),[h,D]);return e(u,{children:[e("div",Object.assign({style:{display:"flex",gap:16}},{children:[o("div",Object.assign({style:{flex:1}},{children:o(i,{customDate:h,setCustomDate:v,placement:w.placement,minDate:w.minDate})})),o("div",Object.assign({style:{flex:1}},{children:o(m,Object.assign({options:j(D),onSelect:e=>{f(e.value)}},{children:o(d,{value:D,leftIcon:{icon:a},rightIcon:{icon:c},onChangeText:e=>(e=>{if(l.timeFormatValidation(e)){const o=l.convert12HourTimeTo24Hour(e),n=t(new Date,"HH:mm:ss");if(r(h)&&o<n)return void w.setError("Selected time should be later than current time");w.setError(void 0),f(e)}else w.setError('Format of time should be "HH:MM AM" or "HH:MM PM"')})(e)})}))}))]})),w.error&&o(p,Object.assign({style:{paddingTop:8}},{children:w.error}))]})};export{w as CustomDateTime};

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as r,useContext as l,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as v}from"../TypographyStyle.js";import d from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as f,IconHolder as m,PrefixHolder as x,InputContainer as y,InputContainerSmall as b,SuffixHolder as j,InputHeader as C,MaxCharStyle as w}from"./Input.styled.js";const I=i(((i,I)=>{var O,k,L,T,D;const{placeholder:A,leftIcon:E,rightIcon:F,labelText:M,maxCharLimit:z,isRequired:B,hintText:S,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),$=null==E?void 0:E.icon,_=null==F?void 0:F.icon,[ee,te]=r(!1),[ne,ie]=r(!1),[re,le]=r(),oe="small"===q?"18px":"22px",ae=l(h),[se,ce]=r(),ue=o(null),ve=null!=I?I:ue;a((()=>{ce(G)}),[G]),a((()=>{var e;ve.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,ve.current))}),[ve]),a((()=>{const e=ve.current;if(e)return e.addEventListener("wheel",ge,{passive:!1}),()=>{e.removeEventListener("wheel",ge)}}),[]),a((()=>{Q&&ce("")}),[Q]),a((()=>{var e;ie(!!i.isActive),i.isActive&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{le(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;te(!1),("invalid"===i.state||re)&&te(!0),"active"===i.state&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.state,re]),a((()=>{te(!!re)}),[re]);const de=function(e){if(c(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},he=()=>"zip"===K?6:60,pe=e=>{const t=z||he();if(X||W(G||"",e),Z)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ge=e=>{e.preventDefault()},fe=e=>{const t=e.target.value,n=z||he();if(!Z&&n>0&&t.length>=n)return void e.preventDefault();W(t,e),i.textControl||ce(t);const r=H||u;if(!r||!c(r))return;const[l,o]=r(t,K,U);te(!l),le(i.errorMessage?i.errorMessage:o)},me=e=>{var t;i.skipFocus||ie(!0),de(null===(t=i.onFocus)||void 0===t?void 0:t.call(i,e))},xe=e=>{var t;i.skipFocus||ie(!1),de(null===(t=i.onBlur)||void 0===t?void 0:t.call(i,e))},ye=()=>{var r;return e(n,{children:["multiline"!==K&&t("input",{id:i.id,style:null!==(r=null==ae?void 0:ae.input)&&void 0!==r?r:{},ref:ve,type:["phonenumber","zip","number"].includes(K)?"number":K,value:se,onFocus:e=>me(e),onBlur:e=>xe(e),placeholder:A||"Enter here",onChange:fe,onKeyDown:e=>pe(e)}),"multiline"===K&&t("textarea",{value:se,ref:ve,onFocus:e=>me(e),onBlur:e=>xe(e),placeholder:A||"Enter here",onChange:fe,onKeyDown:e=>pe(e),maxLength:z>0?z:void 0})]})};return e(p,Object.assign({width:i.width,height:i.height,state:R,type:K,style:null!==(O=null==ae?void 0:ae.RootContainer)&&void 0!==O?O:{}},{children:[!J&&(!!S||!!re)&&e(g,Object.assign({invalid:!!re},{children:[!!re&&t(d,{width:16,height:16}),re||S]})),e(f,Object.assign({variant:q,state:R,width:i.width,isActive:"active"===R||ne,isInvalid:ee,style:null!==(k=null==ae?void 0:ae.InputWrapper)&&void 0!==k?k:{},version:Y,height:i.height},{children:[!!$&&t(m,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==E?void 0:E.callback),isLeft:!0,style:null!==(L=null==ae?void 0:ae.IconHolder)&&void 0!==L?L:{}},{children:t($,{})})),!!V&&t(x,Object.assign({variant:q},{children:V})),"default"===q&&t(y,Object.assign({height:i.height,type:i.type},{children:ye()})),"small"===q&&t(b,Object.assign({height:i.height,type:i.type},{children:ye()})),!!_&&t(m,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==F?void 0:F.callback),isLeft:!1},{children:t(_,{})})),!!P&&t(j,Object.assign({variant:q},{children:P})),N&&N.text&&t(s,{buttonText:N.text,onClick:()=>de(null==N?void 0:N.onClick)})]})),(!!M||!!z)&&e(C,Object.assign({invalid:ee},{children:[e(v,{children:[M,B?t("span",{children:"*"}):""]}),z>0&&e(w,{children:[null!==(D=null===(T=i.value)||void 0===T?void 0:T.length)&&void 0!==D?D:0,"/",z]})]}))]}))}));I.displayName="Input";export{I as Input};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as r,useContext as l,useRef as o,useEffect as a}from"react";import{Button as s}from"../button/Button.js";import{isFunction as c,validateInput as u}from"./Input-helper.js";import{BodySecondary as v}from"../TypographyStyle.js";import d from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as h}from"./context/InputStyleProvider.js";import{RootContainer as p,InputFooter as g,InputWrapper as m,IconHolder as f,PrefixHolder as b,InputContainer as x,InputContainerSmall as y,SuffixHolder as j,InputHeader as C,MaxCharStyle as w}from"./Input.styled.js";const I=i(((i,I)=>{var O,k,L,T,D;const{placeholder:z,leftIcon:A,rightIcon:E,labelText:F,maxCharLimit:M,isRequired:B,hintText:S,type:K,state:R,validate:H,variant:q,button:N,suffixText:P,prefixText:V,onChangeText:W,value:G,noErrorHint:J,reset:Q,rangeValidation:U,noKeyDownChange:X,version:Y,noMaxCharCheck:Z}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),$=null==A?void 0:A.icon,_=null==E?void 0:E.icon,[ee,te]=r(!1),[ne,ie]=r(!1),[re,le]=r(),oe="small"===q?"18px":"22px",ae=l(h),[se,ce]=r(),ue=o(null),ve=null!=I?I:ue;a((()=>{ce(G)}),[G]),a((()=>{var e;ve.current&&(null===(e=i.onReferenceInit)||void 0===e||e.call(i,ve.current))}),[ve]),a((()=>{const e=ve.current;if(e&&["phonenumber","zip","number"].includes(K))return e.addEventListener("wheel",ge,{passive:!1}),()=>{e.removeEventListener("wheel",ge)}}),[]),a((()=>{Q&&ce("")}),[Q]),a((()=>{var e;ie(!!i.isActive),i.isActive&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.isActive]),a((()=>{le(i.errorMessage)}),[i.errorMessage]),a((()=>{var e;te(!1),("invalid"===i.state||re)&&te(!0),"active"===i.state&&(null===(e=ve.current)||void 0===e||e.focus())}),[i.state,re]),a((()=>{te(!!re)}),[re]);const de=function(e){if(c(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},he=()=>"zip"===K?6:60,pe=e=>{const t=0!==M?M:he();if(X||W(G||"",e),Z)return;const n=e.target.value;![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},ge=e=>{e.preventDefault()},me=e=>{const t=e.target.value,n=0!==M?M+1:he();if(!Z&&n>0&&t.length>=n)return void e.preventDefault();W(t,e),i.textControl||ce(t);const r=H||u;if(!r||!c(r))return;const[l,o]=r(t,K,U);te(!l),le(i.errorMessage?i.errorMessage:o)},fe=e=>{var t;i.skipFocus||ie(!0),de(null===(t=i.onFocus)||void 0===t?void 0:t.call(i,e))},be=e=>{var t;i.skipFocus||ie(!1),de(null===(t=i.onBlur)||void 0===t?void 0:t.call(i,e))},xe=()=>{var r;return e(n,{children:["multiline"!==K&&t("input",{id:i.id,style:null!==(r=null==ae?void 0:ae.input)&&void 0!==r?r:{},ref:ve,type:["phonenumber","zip","number"].includes(K)?"number":K,value:se,onFocus:e=>fe(e),onBlur:e=>be(e),placeholder:z||"Enter here",onChange:me,onKeyDown:e=>pe(e)}),"multiline"===K&&t("textarea",{value:se,ref:ve,onFocus:e=>fe(e),onBlur:e=>be(e),placeholder:z||"Enter here",onChange:me,onKeyDown:e=>pe(e),maxLength:M>0?M:void 0})]})};return e(p,Object.assign({width:i.width,height:i.height,state:R,type:K,style:null!==(O=null==ae?void 0:ae.RootContainer)&&void 0!==O?O:{}},{children:[!J&&(!!S||!!re)&&e(g,Object.assign({invalid:!!re},{children:[!!re&&t(d,{width:16,height:16}),re||S]})),e(m,Object.assign({variant:q,state:R,width:i.width,isActive:"active"===R||ne,isInvalid:ee,style:null!==(k=null==ae?void 0:ae.InputWrapper)&&void 0!==k?k:{},version:Y,height:i.height},{children:[!!$&&t(f,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==A?void 0:A.callback),isLeft:!0,style:null!==(L=null==ae?void 0:ae.IconHolder)&&void 0!==L?L:{}},{children:t($,{})})),!!V&&t(b,Object.assign({variant:q},{children:V})),"default"===q&&t(x,Object.assign({height:i.height,type:i.type},{children:xe()})),"small"===q&&t(y,Object.assign({height:i.height,type:i.type},{children:xe()})),!!_&&t(f,Object.assign({variant:q,iconSize:oe,onClick:()=>de(null==E?void 0:E.callback),isLeft:!1},{children:t(_,{})})),!!P&&t(j,Object.assign({variant:q},{children:P})),N&&N.text&&t(s,{buttonText:N.text,onClick:()=>de(null==N?void 0:N.onClick)})]})),(!!F||!!M)&&e(C,Object.assign({invalid:ee},{children:[e(v,{children:[F,B?t("span",{children:"*"}):""]}),M>0&&e(w,{children:[null!==(D=null===(T=i.value)||void 0===T?void 0:T.length)&&void 0!==D?D:0,"/",M]})]}))]}))}));I.displayName="Input";export{I as Input};

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

@@ -1,21 +1,23 @@
+import 'pure-react-carousel/dist/react-carousel.es.css';
 import { VariableListInterfaceV2 } from "../add-variableV2/AddVariableV2";
+import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../template-preview/models/WhatsappCarouselTemplate";
 import { CHANNEL_TYPE } from '../template-preview/models/Channels';
 import { EmailTemplateType } from '../template-preview/models/EmailTemplate';
 import { SMSTemplateType } from '../template-preview/models/SmsTemplate';
 import { CUSTOM_VARIABLE, GlobalPlaceholderType } from '../template-preview/models/TemplateMeta';
 import { ExtrasWhatsapp, POD, WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
 export interface TemplateContextMapperProps {
-    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType;
+    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate;
     closeDialog?: () => void;
     showVariableMapping: boolean;
     channel: CHANNEL_TYPE;
     globalPlaceholders: GlobalPlaceholderType;
     /** List of variables being used in this template */
-    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
+    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
     /** Only for initial-UI-purpose for the modal */
     htmlContent: string;
     showOnlyContent?: boolean;
-    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables, display_content?: string): string | void;
+    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate | WhatsAppCarouselTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, display_content?: string): string | void;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     zIndex?: number;
     showVariableModal?: boolean;

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

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

@@ -3,6 +3,7 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
 import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
+import { WhatsAppCarouselTemplate, WhatsAppCarouselTemplateVariables } from "../../template-preview/models/WhatsappCarouselTemplate";
 import { ExtrasWhatsapp, WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
@@ -10,12 +11,12 @@ export declare const TemplateModalContext: React.Context<{
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
     setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
-    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
-    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
     channel: CHANNEL_TYPE;
     setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
-    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null>> | undefined;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null>> | undefined;
     isError: boolean;
     setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
@@ -25,18 +26,21 @@ export declare const TemplateModalContext: React.Context<{
     disableEditVariable?: boolean | undefined;
     pod?: string | undefined;
     extras?: ExtrasWhatsapp | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    selectedCarouselIndex?: number | undefined;
+    setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
     setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
-    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
-    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
     channel: CHANNEL_TYPE;
     setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
-    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null>> | undefined;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null>> | undefined;
     isError: boolean;
     setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
@@ -46,4 +50,7 @@ export declare const useTemplateModalContext: () => {
     disableEditVariable?: boolean | undefined;
     pod?: string | undefined;
     extras?: ExtrasWhatsapp | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+    selectedCarouselIndex?: number | undefined;
+    setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
 };

package/dist/esm/components/template-context-mapper/custom-hooks/useAdditionalVariables.d.ts

@@ -0,0 +1,12 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+export type AdditionalVariableProps = {
+    variableList?: VariableListInterfaceV2[];
+    categoryDisplayName: string;
+    variableDisplayName: string;
+    variableValue: string;
+};
+/**
+ * Takes the previous variable list and adds any custom variable given as prop.
+ * E.g - Custom Text, Custom URL, Static Expiry
+ */
+export declare const useAdditionalVariables: (props: AdditionalVariableProps) => VariableListInterfaceV2[] | undefined;

package/dist/esm/components/template-context-mapper/custom-hooks/useAdditionalVariables.js

@@ -0,0 +1 @@
+const a=a=>{const{variableList:e,categoryDisplayName:i,variableDisplayName:r,variableValue:l}=a;return e?[...e,{description:"",displayName:i,orderId:1,variables:{variableDisplayName:{description:void 0,displayName:r,actualValue:l,variableType:"any",isAvailable:!0}}}].sort(((a,e)=>a.orderId-e.orderId)):e};export{a as useAdditionalVariables};

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2";
+import { WhatsAppPickerMeta } from "../../template-preview";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
+export interface EditWhatsAppCarouselTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WhatsAppCarouselTemplate;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+}
+declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableList, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWhatsAppCarouselTemplateV2;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a,useEffect as r}from"react";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import o from"./EditWhatsAppTemplateV2.js";import{TitleMedium as i}from"../../TypographyStyle.js";const l=l=>{let{template:p,whatsappSpecificPickerMeta:m,showVariableModal:c,variableList:n,variableListForImage:d,discountCode:u,setDiscountCode:C}=l;const{selectedCarouselIndex:f,setTemplate:g}=s(),[h,b]=a(-1==f?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)");return r((()=>{b(-1==f?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[f]),e("div",{children:[t(i,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:h})),t(o,{whatsappSpecificPickerMeta:m,template:p,onTemplateChange:e=>{null==g||g(e)},showVariableModal:c,variableList:n,variableListForImage:d,discountCode:u,setDiscountCode:C})]})};export{l as default};

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

@@ -1,11 +1,12 @@
 import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
 import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
 export interface EditWhatsAppTemplateV2Props {
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
     template: WhatsAppTemplate;
-    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType) => void;
+    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate) => void;
     showVariableModal?: boolean;
     variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];

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

@@ -1 +1 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useState as e,useEffect as n}from"react";import{POD as i}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{getAllDataFromTemplateComponent as a}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as s}from"./BackTrackComponent.js";import{DiscountCodeComponent as d}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as r}from"./EditMediaV2.style.js";import p from"./EditWhatsAppTemplateMediaV2.js";import{Container as c}from"./VariableConnectorsPanel.js";import u from"./VariableConnectorWhatsApp.js";import m from"./VariableEditorHeader.js";import v from"./WhatsAppTemplateCardButtonV2.js";const b=b=>{let{template:g,onTemplateChange:h,whatsappSpecificPickerMeta:f,showVariableModal:T,variableList:j,variableListForImage:C,discountCode:O,setDiscountCode:x}=b;var E,k,y,V,w,B,L,I,A,M,R,U,H,D,S,N;const{originalVariableList:P,pod:Q,extras:W}=l(),{descriptionComponents:F,urlBtns:_,qrbBtns:K,imageComponent:Y,bodyVariables:$,headerVariables:q}=a(g),[X,z]=e(!1);function G(t,o){var e,n,i,l,a;const s=Object.assign({},g),d=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==d&&d>-1){const a=null===(e=null==s?void 0:s.components[d].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==a&&a>-1){const e="custom"===o&&"string"==typeof t,r=[...null!==(l=null===(i=null===(n=s.components)||void 0===n?void 0:n[d])||void 0===i?void 0:i.buttons)&&void 0!==l?l:[]];r[a]=Object.assign(Object.assign({},r[a]),{url:"https://d.bik.ai/{{1}}",example:[e?t:"string"!=typeof t?t.defaultValue:""]});const p=Object.assign(Object.assign({},s.components[d]),{buttons:r}),c=Object.assign(Object.assign({},s.mapping),{buttons:e?["((customBtnPlaceholder))"]:"string"!=typeof t?[t.placeHolder]:void 0});s.mapping=c;const u=[...s.components];u[d]=p,s.components=u}}if("string"!=typeof t){"checkout.checkoutUrl"===(null===(a=t.placeHolder)||void 0===a?void 0:a.slice(2,-2))?z(!0):(z(!1),null==x||x(""))}null==h||h(s)}function J(t,o,e){var n;const i=Object.assign({},g),l=null==i?void 0:i.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==l&&l>-1){const o=null===(n=null==i?void 0:i.components[l].buttons)||void 0===n?void 0:n.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const a=Object.assign(Object.assign({},i.components[l]),{buttons:o}),s=[...i.components];s[l]=a,i.components=s}null==h||h(i)}return n((()=>{var t;const o=null===(t=g.mapping.buttons)||void 0===t?void 0:t[0];"checkout.checkoutUrl"===(null==o?void 0:o.slice(2,-2))?z(!0):(z(!1),null==x||x(""))}),[g]),t(c,Object.assign({style:{flexDirection:"column",maxHeight:460}},{children:[!!Y&&o(r,{children:o(p,{whatsappSpecificPickerMeta:f,mediaComponent:Y,updateTemplateImageUrl:function(t,o){var e;let n=Object.assign({},g);const i=null===(e=null==n?void 0:n.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==i&&i>-1&&(null==n?void 0:n.components[i])){const e=Object.assign(Object.assign({},n.components[i]),{format:o,example:{header_handle:[t]}}),l=[...n.components];l[i]=e,n=Object.assign(Object.assign({},n),{components:l})}n.mapping&&(n.mapping=Object.assign(Object.assign({},n.mapping),{header:void 0})),null==h||h(Object.assign({},n))},template:g,variableListForImage:C})}),($.length>0||q.length>0)&&o(m,{containerStyle:{paddingTop:Y?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null==F?void 0:F.map(((t,e)=>o(u,{originalVariableList:P,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?g.mapping.header:g.mapping.body,showVariableModal:T,variableList:j},e))),(null===(k=null===(E=_[0])||void 0===E?void 0:E.component)||void 0===k?void 0:k.buttons)&&(null===(w=null===(V=null===(y=_[0])||void 0===y?void 0:y.component)||void 0===V?void 0:V.buttons)||void 0===w?void 0:w.length)>0&&o(m,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(B=null==P?void 0:P.buttons)||void 0===B?void 0:B.map(((t,e)=>{if("URL"===t.type)return o(v,{CTAoptions:null==f?void 0:f.CTAoptions,button:t,originalVariableList:P,updateSelectedURLTemplateBtn:G,variableList:j},`${e}`)})),(null===(I=null===(L=K[0])||void 0===L?void 0:L.component)||void 0===I?void 0:I.buttons)&&(null===(R=null===(M=null===(A=K[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)||void 0===R?void 0:R.length)>0&&(Q!==i.CHATBOT?o(m,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):o(s,{backTrackMessage:null===(U=null==W?void 0:W.backTrackExtra)||void 0===U?void 0:U[0],setBackTrackMessage:null===(H=null==W?void 0:W.backTrackExtra)||void 0===H?void 0:H[1]})),null===(D=null==P?void 0:P.buttons)||void 0===D?void 0:D.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(v,{QRBoptions:null==f?void 0:f.QRBoptions,button:t,originalVariableList:P,updateSelectedQRBTemplateBtn:J},`${e}`)})),Q===i.CHATBOT&&X&&o(d,{discountCode:null===(S=null==W?void 0:W.discountCodeExtra)||void 0===S?void 0:S[0],setDiscountCode:null===(N=null==W?void 0:W.discountCodeExtra)||void 0===N?void 0:N[1],variableList:j})]}))};export{b as default};
+import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as e}from"lodash";import{useState as t,useEffect as i}from"react";import{POD as s}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import{useAdditionalVariables as a}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as d}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as r}from"./BackTrackComponent.js";import{DiscountCodeComponent as p}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as c}from"./EditMediaV2.style.js";import m from"./EditWhatsAppTemplateMediaV2.js";import u from"./VariableConnector.js";import{Container as b}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import h from"./WhatsAppTemplateCardButtonV2.js";const f=f=>{let{template:C,onTemplateChange:V,whatsappSpecificPickerMeta:j,showVariableModal:T,variableList:B,variableListForImage:x,discountCode:O,setDiscountCode:y}=f;var E,k,L,I,w,q,A,U,M,N,D,R,S,H,P,Q,W,_;const{originalVariableList:F,pod:Y,extras:K,selectedCarouselIndex:$}=l(),{descriptionComponents:X,urlBtns:z,qrbBtns:G,imageComponent:J,bodyVariables:Z,headerVariables:oo}=d(C),[no,eo]=t(!1),[to,io]=t(-1===$?{descriptionComponents:X,urlBtns:z,qrbBtns:G,imageComponent:J,bodyVariables:Z,headerVariables:oo}:{}),[so,lo]=t(!1);function ao(o,n){var t,i,s,l,a,d,r;const p=null!=$&&$>-1?{components:null===(t=Object.assign({},C).components[1].cards)||void 0===t?void 0:t[$].components,mapping:null===(i=Object.assign({},C).mapping.cards)||void 0===i?void 0:i[$]}:Object.assign({},C),c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const e=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.findIndex((o=>"URL"===o.type));if(void 0!==e&&e>-1){const t="custom"===n&&"string"==typeof o,i=[...null!==(d=null===(a=null===(l=p.components)||void 0===l?void 0:l[c])||void 0===a?void 0:a.buttons)&&void 0!==d?d:[]];i[e]=Object.assign(Object.assign({},i[e]),{url:"https://d.bik.ai/{{1}}",example:[t?o:"string"!=typeof o?o.defaultValue:""]});const s=Object.assign(Object.assign({},p.components[c]),{buttons:i}),r=Object.assign(Object.assign({},p.mapping),{buttons:t?["((customBtnPlaceholder))"]:"string"!=typeof o?[o.placeHolder]:void 0});p.mapping=r;const m=[...p.components];m[c]=s,p.components=m}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(r=o.placeHolder)||void 0===r?void 0:r.slice(2,-2))?eo(!0):(eo(!1),null==y||y(""))}if(null!=$&&$>-1){const o=e(C);o.components[1].cards[$].components=p.components,o.mapping.cards[$]=p.mapping,null==V||V(Object.assign({},o))}else null==V||V(p)}function ro(o,n,t){var i,s,l;const a=null!=$&&$>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[$].components,mapping:null===(s=Object.assign({},C).mapping.cards)||void 0===s?void 0:s[$]}:Object.assign({},C),d=null==a?void 0:a.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==d&&d>-1){const n=null===(l=null==a?void 0:a.components[d].buttons)||void 0===l?void 0:l.filter((o=>"QUICK_REPLY"===o.type));n&&(n[t]=Object.assign(Object.assign({},n[t]),{flowId:o.flowId,flowName:o.flowName}));const e=Object.assign(Object.assign({},a.components[d]),{buttons:n}),i=[...a.components];i[d]=e,a.components=i}if(null!=$&&$>-1){const o=e(C);o.components[1].cards[$].components=a.components,o.mapping.cards[$]=a.mapping,null==V||V(Object.assign({},o))}else null==V||V(a)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))eo(!0);else{eo(!1);const o=null===(n=null==K?void 0:K.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{var o,n,e,t;if(console.log("right panel selectedCarouselIndex: ",$),null!=$&&$>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[$].components,mapping:null===(t=null===(e=null==C?void 0:C.mapping)||void 0===e?void 0:e.cards)||void 0===t?void 0:t[$]},{descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);console.log("right panel descriptionComponents: ",{descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),io({descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=$&&-1===$){const{descriptionComponents:o,urlBtns:n,qrbBtns:e,imageComponent:t,bodyVariables:i,headerVariables:s}=d(C);io({descriptionComponents:o,urlBtns:n,qrbBtns:e,imageComponent:t,bodyVariables:i,headerVariables:s})}}),[$]),i((()=>{var o,n,e,t;if(console.log("right panel selectedCarouselIndex: ",$),null!=$&&$>-1&&so){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[$].components,mapping:null===(t=null===(e=null==C?void 0:C.mapping)||void 0===e?void 0:e.cards)||void 0===t?void 0:t[$]},{descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);console.log("right panel descriptionComponents2: ",{descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),io({descriptionComponents:s,urlBtns:l,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),lo(!1)}}),[so]);const po=a({variableList:B,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(b,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!to.imageComponent&&n(c,{children:n(m,{whatsappSpecificPickerMeta:j,mediaComponent:to.imageComponent,updateTemplateImageUrl:function(o,n){var t,i,s,l,a;let d;d=null!=$&&$>-1?{components:null===(i=null===(t=C.components[1])||void 0===t?void 0:t.cards)||void 0===i?void 0:i[$].components,mapping:null===(l=null===(s=null==C?void 0:C.mapping)||void 0===s?void 0:s.cards)||void 0===l?void 0:l[$]}:Object.assign({},C);const r=null===(a=null==d?void 0:d.components)||void 0===a?void 0:a.findIndex((o=>{if("HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format)return!0}));if(void 0!==r&&r>-1&&(null==d?void 0:d.components[r])){const e=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),t=[...d.components];t[r]=e,d=Object.assign(Object.assign({},d),{components:t})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=$&&$>-1){const o=e(C);o.components[1].cards[$].components=d.components,o.mapping.cards[$]=d.mapping,null==V||V(Object.assign({},o)),lo(!0)}else null==V||V(Object.assign({},d))},template:C,variableListForImage:x})}),(to.bodyVariables.length>0||to.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:to.mediaComponent?24:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}),null===(E=to.descriptionComponents)||void 0===E?void 0:E.map(((o,e)=>n(v,{originalVariableList:null!=$&&$>-1?F.cards[$]:F,type:o.type,descriptionComponent:o.component,showVariableModal:T,variableList:B},e))),(null===(L=null===(k=to.urlBtns[0])||void 0===k?void 0:k.component)||void 0===L?void 0:L.buttons)&&(null===(q=null===(w=null===(I=to.urlBtns[0])||void 0===I?void 0:I.component)||void 0===w?void 0:w.buttons)||void 0===q?void 0:q.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(A=null!=$&&$>-1?F.cards[$].buttons:null==F?void 0:F.buttons)||void 0===A?void 0:A.map(((o,e)=>{if("URL"===o.type)return n(h,{variableListIndex:e,CTAoptions:null==j?void 0:j.CTAoptions,button:o,originalVariableList:null!=$&&$>-1?F.cards[$]:F,updateSelectedURLTemplateBtn:ao,variableList:B},`${e}`)})),(null===(M=null===(U=to.qrbBtns[0])||void 0===U?void 0:U.component)||void 0===M?void 0:M.buttons)&&(null===(R=null===(D=null===(N=to.qrbBtns[0])||void 0===N?void 0:N.component)||void 0===D?void 0:D.buttons)||void 0===R?void 0:R.length)>0&&(Y!==s.CHATBOT?n(g,{headerText:"Edit buttons",subText:"Edit the chatflows triggered on clicking  the buttons",toolTipInfo:"There is an option to trigger chatflows through the buttons which can keep the user engaged"}):n(r,{backTrackMessage:null===(S=null==K?void 0:K.backTrackExtra)||void 0===S?void 0:S[0],setBackTrackMessage:null===(H=null==K?void 0:K.backTrackExtra)||void 0===H?void 0:H[1]})),null===(P=null!=$&&$>-1?F.cards[$].buttons:null==F?void 0:F.buttons)||void 0===P?void 0:P.map(((o,e)=>{if("QUICK_REPLY"===o.type)return n(h,{variableListIndex:e,QRBoptions:null==j?void 0:j.QRBoptions,button:o,originalVariableList:null!=$&&$>-1?F.cards[$]:F,updateSelectedQRBTemplateBtn:ro},`${e}`)})),Y===s.CHATBOT&&no&&n(p,{discountCode:null===(Q=null==K?void 0:K.discountCodeExtra)||void 0===Q?void 0:Q[0],setDiscountCode:null===(W=null==K?void 0:K.discountCodeExtra)||void 0===W?void 0:W[1],variableList:B}),null===(_=null!=$&&$>-1?F.cards[$].buttons:null==F?void 0:F.buttons)||void 0===_?void 0:_.map(((o,e)=>{var t,i,s;if("COPY_CODE"===o.type)return n(u,{index:e,variable:{variableName:null!==(t=o.text)&&void 0!==t?t:"",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(s=o.index)&&void 0!==s?s:0},showVariableModal:!0,variableList:po,componentType:"BUTTONS"},e)}))]}))};export{f as default};

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

@@ -1,5 +1,6 @@
 export interface FooterProps {
+    isWhatsappCarousel: boolean;
     onSelect: () => void;
 }
-declare const Footer: ({ onSelect }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Footer: ({ isWhatsappCarousel, onSelect }: FooterProps) => import("react/jsx-runtime").JSX.Element;
 export default Footer;

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

@@ -1,7 +1,7 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"styled-components";import{Button as r}from"../../button/Button.js";import{COLORS as i}from"../../../constants/Theme.js";import{Badge as n}from"../Badge/index.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";const p=o.div`
-	background: ${i.surface.standard};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as r}from"react";import s from"styled-components";import{Button as a}from"../../button/Button.js";import{COLORS as n}from"../../../constants/Theme.js";import{Badge as i}from"../Badge/index.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";const l=s.div`
+	background: ${n.surface.standard};
 	border-top-width: 1px;
-	border-top-color: ${i.stroke.primary};
+	border-top-color: ${n.stroke.primary};
 	box-shadow: 0px -4px 12px rgba(0, 0, 0, 0.12);
 	width: 100%;
 	padding: 16px 24px;
@@ -10,4 +10,4 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"styled-component
 	gap: 12;
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-`,a=o=>{let{onSelect:i}=o;const{isError:a}=s();return t(p,{children:[a&&e(n,{errorText:"Some inputs are missing or incorrect. Please check"}),e(r,{id:"select-template-btn",buttonText:"Select template",size:"large",onClick:i})]})};export{a as default};
+`,d=s=>{let{isWhatsappCarousel:n,onSelect:d}=s;const{isError:m,selectedCarouselIndex:c,setSelectedCarouselIndex:x}=p(),[u,f]=o(n?"Next":"Select template");return r((()=>{n&&-1===c?f("Next"):n&&null!=c&&c>-1&&f("Save & Select Template")}),[c]),e(l,{children:[m&&t(i,{errorText:"Some inputs are missing or incorrect. Please check"}),t(a,{id:"select-template-btn",buttonText:u,size:n?"small":"large",onClick:function(){n&&-1===c&&x?x(0):d()}})]})};export{d as default};

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

@@ -2,11 +2,12 @@ import React from 'react';
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
 import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
 import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
 declare const MobilePreview: React.ForwardRefExoticComponent<{
     display_content: string;
     channel: CHANNEL_TYPE;
-    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate | null;
     showSampleValues?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default MobilePreview;

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

@@ -17,4 +17,4 @@ import{jsx as e,jsxs as t}from"react/jsx-runtime";import i from"react";import o
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,n=i.forwardRef(((i,o)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=r();return e("div",{children:t(l,Object.assign({channel:h},{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:s(h),height:443}}),e(m,Object.assign({ref:o},{children:e(a,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:236}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));n.displayName="MobilePreview";export{n as default};
+`,n=i.forwardRef(((i,o)=>{let{display_content:n,channel:h,template:c,showSampleValues:d}=i;const{pod:w}=r();return e("div",{children:t(l,Object.assign({channel:h},{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:s(h),height:443}}),e(m,Object.assign({ref:o},{children:e(a,{showSampleValues:d,template:c,channel:h,smsSpecificMeta:{smsDisplayContent:n},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:w!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:n,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));n.displayName="MobilePreview";export{n as default};

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

@@ -14,7 +14,7 @@ export interface VariableConnectorProps {
     showVariableModal?: boolean;
     variableList?: VariableListInterfaceV2[];
     setShowDiscountCheckBox?: any;
-    componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER';
+    componentType?: 'HEADER' | 'BODY' | 'BUTTONS' | 'FOOTER' | 'limited_time_offer';
     CTAoptions?: ButtonPlaceHolderOptions[];
 }
 declare const VariableConnector: React.FC<VariableConnectorProps>;

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

@@ -1,7 +1,7 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/icons/edit.svg.js";import{useState as a,useEffect as i}from"react";import n from"styled-components";import{AddVariableV2SideModal as o}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as u}from"../../input/Input.js";import{truncate as d}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as r}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as c}from"../../template-preview/models/Channels.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as m,BodyPrimary as v}from"../../TypographyStyle.js";import b from"../../../utils/StringUtils.js";import{COLORS as g}from"../../../constants/Theme.js";import{useTemplateModalContext as h}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as x}from"../utils/getVariableNameEmail.js";const j=n.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import l from"../../../assets/icons/edit.svg.js";import{format as a}from"date-fns";import{cloneDeep as i}from"lodash";import{useState as n,useEffect as o}from"react";import s from"styled-components";import{AddVariableV2SideModal as u}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as d}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as r}from"../../dropdown/Dropdown.js";import{Input as c}from"../../input/Input.js";import{truncate as p}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as m}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as v}from"../../template-preview/models/Channels.js";import{POD as b}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as g,BodyPrimary as h}from"../../TypographyStyle.js";import x from"../../../utils/StringUtils.js";import{COLORS as f}from"../../../constants/Theme.js";import{useTemplateModalContext as j}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as O}from"../utils/getVariableNameEmail.js";const y=s.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===c.EMAIL?g.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===v.EMAIL?f.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,O={value:"custom_link",label:"Custom URL"},_={value:"custom_text",label:"Custom text"},f=n=>{let{onFocus:f,variable:y,index:T,showVariableModal:k,variableList:A,setShowDiscountCheckBox:V,componentType:E,CTAoptions:S}=n;var P,w;const[C,B]=a(!1),[L,H]=a(""),[N,M]=a([]),[W,$]=a(),[D,I]=a(!1),[R,U]=a(!1),{device:z,channel:Y,isError:Z,originalVariableList:G,template:q,templateSelectionTriggered:F,setTemplate:J,setDisplayContent:K,setOriginalVariableList:Q,globalNormalizedPlaceholders:X,enabledCustomText:ee,pod:te}=h();function le(e,t){var l,a,i;const n=e;H(""),$(n),Y===c.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(ae(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ie||ie(null!==(a=y.index)&&void 0!==a?a:0,n.value,!0)):(null==ie||ie(null!==(i=y.index)&&void 0!==i?i:0,y.variableName,!0,"custom_text"),ae("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?ae(n.value,"url"===n.bikPlaceholderType?"link":"string"):(H(""),ae("",n.value))}function ae(e,t){var l,a,i,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(Y!==c.WHATSAPP){const a=x(T+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),n=Y===c.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:y.variableName);const s=G.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==Q||Q(s)}if(Y===c.WHATSAPP){const l=G;let s=l.body,u=l.header,d=l.buttons;"BODY"===E?s=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===E?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===T?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===E&&(d=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===T?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null==Q||Q((e=>Object.assign(Object.assign({},e),{header:u,body:s,buttons:d})))}}function ie(e,t,l,a){var i,n,o,s;const u=Object.assign({},q),d=null===(i=null==u?void 0:u.components)||void 0===i?void 0:i.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===E){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===E){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===E&&(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example)){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}return l}));u.components=d,l&&("BODY"===E&&(null===(n=null==u?void 0:u.mapping)||void 0===n?void 0:n.body)?u.mapping=Object.assign(Object.assign({},u.mapping),{body:u.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))}):"HEADER"===E&&(null===(o=null==u?void 0:u.mapping)||void 0===o?void 0:o.header)?u.mapping=Object.assign(Object.assign({},u.mapping),{header:u.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))}):"BUTTONS"===E&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)&&(u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((e,l)=>0===l?"custom_link"===a?"((customPlaceholderName))":t:e))}))),null==J||J(Object.assign({},u))}return i((()=>{C&&(null==f||f())}),[C]),i((()=>{!function(){var e,t,l,a,i;const n="mobile"===z?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);Y===c.EMAIL&&(null==K||K(s))}()}),[F]),i((()=>{var e;const t=[];let l=[];if(Y!==c.MESSAGE||ee){"link"===(null==y?void 0:y.type)?(t.push({label:"",options:[O,_]}),$(O)):(t.push({label:"",options:[O,_]}),$(_));const e=null!=X?X:[];M([...t,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:b.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),l=[...t,...e]}else{const e=null!=X?X:[];M([{label:"",options:[_,O]},...e]),l=[{label:"",options:[_,O]},...e]}if((Y===c.WHATSAPP||Y===c.EMAIL||Y===c.MESSAGE)&&y.updatedValue)if(r.test(y.updatedValue)&&Y===c.WHATSAPP||y.updatedValue.startsWith("{{")&&Y!==c.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===c.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(k){let t=e.updatedValue;if(te===p.CHATBOT&&"BUTTONS"===E){const l=null==S?void 0:S.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(y,l,Y);e.value&&$(e)}else(null===(e=y.updatedValue)||void 0===e?void 0:e.startsWith("https"))?($(O),H(y.updatedValue.split("https://")[1])):($(_),H(y.updatedValue))}),[]),i((()=>{z&&W&&L&&setTimeout((()=>{ae("custom_link"===(null==W?void 0:W.value)&&L?L.includes("https")?L:`https://${L}`:L,W.value)}),100)}),[z]),i((()=>{!R&&W&&y.updatedValue&&setTimeout((()=>{ae("custom_link"===(null==W?void 0:W.value)&&y.updatedValue?y.updatedValue.includes("https")?y.updatedValue:`https://${y.updatedValue}`:y.updatedValue,W.value),U(!0)}),100)}),[W]),e(j,Object.assign({channel:Y,focused:C,onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(m,Object.assign({style:{color:Z&&!W?g.content.negative:g.content.primary}},{children:[null===(P=y.variableName)||void 0===P?void 0:P.replace("{{","").replace("}}","")," ","link"===(null==y?void 0:y.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:k?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==W?void 0:W.label)?"space-between":"flex-end"}},{children:[t(v,{children:d(null!==(w=null==W?void 0:W.label)&&void 0!==w?w:"",20,!0)}),t(l,{onClick:()=>{I(!D)},width:24,height:24,color:g.content.primary})]})):t(s,{options:N,isSearchable:!1,onSelect:le,defaultOptions:W?[Object.assign(Object.assign({},W),{selected:!0})]:[]})})),("custom_text"===(null==W?void 0:W.value)||"custom_link"===(null==W?void 0:W.value))&&t(u,{labelText:"custom_text"===(null==W?void 0:W.value)?"Custom text value":"custom_link"===(null==W?void 0:W.value)?"Custom URL value":"",id:`variable-value-${null==W?void 0:W.value}-${T}`,value:L,errorMessage:Z?L&&0!==L.trim().length?"custom_link"!==W.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${L.trim()}`)&&0!==L.trim().length?"custom_link"!==W.value&&L.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==W?void 0:W.value)?2e3:30,prefixText:"custom_link"===(null==W?void 0:W.value)?"https://":"",placeholder:"link"===y.type||"custom_link"===W.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,t){var l;H(t);const a="custom_link"===(null==W?void 0:W.value)&&t?t.includes("https")?t:`https://${t}`:t;ae(a,e),Y===c.WHATSAPP&&(null==ie||ie(null!==(l=y.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}(W.value,e)}}),D&&t(o,{zIndex:2e3,data:null!=A?A:[],showVariable:D,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{null==V||V(!1),"{{custom.url}}"===e.actualValue?le({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?le({label:e.displayName,selected:!0,value:"custom_text"}):le({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{j as Container,f as default};
+`,_={value:"custom_link",label:"Custom URL"},T={value:"custom_text",label:"Custom text"},k={value:"static_expiry",label:"Static Expiry"},V=s=>{let{onFocus:V,variable:A,index:E,showVariableModal:S,variableList:w,setShowDiscountCheckBox:C,componentType:P,CTAoptions:B}=s;var L,D;const[N,H]=n(!1),[U,M]=n(""),[W,I]=n([]),[R,$]=n(),[z,Y]=n(!1),[Z,G]=n(!1),{device:q,channel:F,isError:K,originalVariableList:J,template:Q,templateSelectionTriggered:X,setTemplate:ee,setDisplayContent:te,setOriginalVariableList:le,globalNormalizedPlaceholders:ae,enabledCustomText:ie,pod:ne,selectedCarouselIndex:oe}=j();function se(){var e,t;const l=[];let a=[];if(F!==v.MESSAGE||ie){"link"===(null==A?void 0:A.type)?(l.push({label:"",options:[_,T]}),$(_)):"date_time"===(null==A?void 0:A.type)?(l.push({label:"",options:[_,T]}),$(k)):(l.push({label:"",options:[_,T,k]}),$(T));const e=null!=ae?ae:[];I([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:x.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),a=[...l,...e]}else{const e=null!=ae?ae:[];I([{label:"",options:[T,_]},...e]),a=[{label:"",options:[T,_]},...e]}if((F===v.WHATSAPP||F===v.EMAIL||F===v.MESSAGE)&&A.updatedValue)if(m.test(A.updatedValue)&&F===v.WHATSAPP||A.updatedValue.startsWith("{{")&&F!==v.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(S){let t=e.updatedValue;if(ne===b.CHATBOT&&"BUTTONS"===P){const l=null==B?void 0:B.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}i={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(i=e)}))}));return i}(A,a,F);e.value&&$(e)}else"date_time"===A.type?($(k),M(A.updatedValue),ce(null!==(e=A.index)&&void 0!==e?e:0,A.updatedValue)):(null===(t=A.updatedValue)||void 0===t?void 0:t.startsWith("https"))?($(_),M(A.updatedValue.split("https://")[1])):($(T),M(A.updatedValue))}function ue(e,t){var l,a,i;const n=e;M(""),$(n),F===v.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(re(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ce||ce(null!==(a=A.index)&&void 0!==a?a:0,n.value,!0)):(null==ce||ce(null!==(i=A.index)&&void 0!==i?i:0,U,!0,n.value),re("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?re(n.value,"url"===n.bikPlaceholderType?"link":"string"):(M(""),re("",n.value))}function de(e,t){var l;M(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;re(a,"static_expiry"===e?"string":e),F===v.WHATSAPP&&(null==ce||ce(null!==(l=A.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function re(e,t){var l,a,n,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(F!==v.WHATSAPP){const a=O(E+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===q?"template_html_mobile":"template_html_desktop"),n=F===v.EMAIL?null===(l=null==i?void 0:i.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:A.variableName);const o=J.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t));null==le||le(o)}if(F===v.WHATSAPP){const l=null!=oe&&oe>-1?J.cards[oe]:J;let u=l.body,d=l.header,r=l.buttons;if(console.log("variableList: ",l),"BODY"===P?u=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"HEADER"===P?d=null===(n=l.header)||void 0===n?void 0:n.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===P&&(r=null===(o=l.buttons)||void 0===o?void 0:o.map(((l,a)=>a===E?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null!=oe&&oe>-1){const e=i(J.cards);e[oe]={header:d,body:u,buttons:r},null==le||le((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==le||le((e=>Object.assign(Object.assign({},e),{header:d,body:u,buttons:r})))}}function ce(e,t,l,a){var n,o,s,u,d,r;const c=null!=oe&&oe>-1?{components:null===(n=Object.assign({},Q).components[1].cards)||void 0===n?void 0:n[oe].components,mapping:null===(o=Object.assign({},Q).mapping.cards)||void 0===o?void 0:o[oe]}:Object.assign({},Q),p=null===(s=null==c?void 0:c.components)||void 0===s?void 0:s.map((l=>{var a,i,n,o,s,u,d,r,c,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(i=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===i?void 0:i[0]){const l=[...null!==(s=null===(o=null===(n=m.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{body_text:[l]});return Object.assign(Object.assign({},m),{example:a})}}else if("HEADER"===l.type&&"HEADER"===P){if(null===(u=l.example)||void 0===u?void 0:u.header_text){const l=[...null!==(r=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==r?r:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},m.example),{header_text:l});return Object.assign(Object.assign({},m),{example:a})}}else if("BUTTONS"===l.type&&"BUTTONS"===P){if(null===(p=null===(c=l.buttons)||void 0===c?void 0:c[e])||void 0===p?void 0:p.example){const a=l.buttons.map(((l,a)=>a===e?Object.assign(Object.assign({},l),{example:[t]}):l));return Object.assign(Object.assign({},m),{buttons:a})}}else if("limited_time_offer"===l.type&&"limited_time_offer"===P)return Object.assign(Object.assign({},m),{example:Object.assign(Object.assign({},m.example),{limited_time_offer:t})});return l}));if(c.components=p,l)if("BODY"===P&&(null===(u=null==c?void 0:c.mapping)||void 0===u?void 0:u.body))c.mapping=Object.assign(Object.assign({},c.mapping),{body:c.mapping.body.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+10}))`:t:l))});else if("HEADER"===P&&(null===(d=null==c?void 0:c.mapping)||void 0===d?void 0:d.header))c.mapping=Object.assign(Object.assign({},c.mapping),{header:c.mapping.header.map(((l,i)=>e===i?"custom_text"===a?`((editableVariable${i+20}))`:t:l))});else if("BUTTONS"===P&&(null===(r=null==c?void 0:c.mapping)||void 0===r?void 0:r.buttons)){let l=-1,i=-1;p.forEach((t=>{var a;"BUTTONS"===t.type&&(null===(a=t.buttons)||void 0===a||a.forEach(((t,a)=>{"URL"===t.type&&(l++,a===e&&"URL"==t.type&&(i=l))})))})),c.mapping=Object.assign(Object.assign({},c.mapping),{buttons:c.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=oe&&oe>-1&&Q){const e=i(Q);e.components[1].cards[oe].components=c.components,e.mapping.cards[oe]=c.mapping,null==ee||ee(e),console.log("templateCopy: ",e)}else null==ee||ee(Object.assign({},c)),console.log("currentTemplate 0000: ",c)}return o((()=>{N&&(null==V||V())}),[N]),o((()=>{!function(){var e,t,l,a,i;const n="mobile"===q?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(a=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==a?a:"")+(null===(i=null==o?void 0:o.contentWindow)||void 0===i?void 0:i.document.head.innerHTML);F===v.EMAIL&&(null==te||te(s))}()}),[X]),o((()=>{se()}),[]),o((()=>{se()}),[oe]),o((()=>{q&&R&&U&&setTimeout((()=>{re("custom_link"===(null==R?void 0:R.value)&&U?U.includes("https")?U:`https://${U}`:U,R.value)}),100)}),[q]),o((()=>{!Z&&R&&A.updatedValue&&setTimeout((()=>{re("custom_link"===(null==R?void 0:R.value)&&A.updatedValue?A.updatedValue.includes("https")?A.updatedValue:`https://${A.updatedValue}`:A.updatedValue,R.value),G(!0)}),100)}),[R]),e(y,Object.assign({channel:F,focused:N,onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(g,Object.assign({style:{color:K&&!R?f.content.negative:f.content.primary}},{children:[null===(L=A.variableName)||void 0===L?void 0:L.replace("{{","").replace("}}","")," ","link"===(null==A?void 0:A.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:S?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==R?void 0:R.label)?"space-between":"flex-end"}},{children:[t(h,{children:p(null!==(D=null==R?void 0:R.label)&&void 0!==D?D:"",20,!0)}),t(l,{onClick:()=>{Y(!z)},width:24,height:24,color:f.content.primary})]})):t(r,{options:W,isSearchable:!1,onSelect:ue,defaultOptions:R?[Object.assign(Object.assign({},R),{selected:!0})]:[]})})),("custom_text"===(null==R?void 0:R.value)||"custom_link"===(null==R?void 0:R.value))&&t(c,{labelText:"custom_text"===(null==R?void 0:R.value)?"Custom text value":"custom_link"===(null==R?void 0:R.value)?"Custom URL value":"",id:`variable-value-${null==R?void 0:R.value}-${E}`,value:U,errorMessage:K?U&&0!==U.trim().length?"custom_link"!==R.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${U.trim()}`)&&0!==U.trim().length?"custom_link"!==R.value&&U.length>30?"Length cannot be more than 30":"BUTTONS"===P&&"custom_link"!==R.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==R?void 0:R.value)?2e3:"BUTTONS"===P?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==R?void 0:R.value)?"https://":"",placeholder:"link"===A.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{de(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&t(d,{placement:"auto",time:a(U?new Date(U):new Date,"hh:mm a"),date:U?new Date(U):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{de("static_expiry",e.toISOString())}}),z&&t(u,{zIndex:2e3,data:null!=w?w:[],showVariable:z,setShowVariable:Y,placeholder:"Add a variable",customTrigger:e=>{null==C||C(!1),"{{custom.url}}"===e.actualValue?ue({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ue({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ue({label:e.displayName,selected:!0,value:"static_expiry"}):ue({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{y as Container,V as default};

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

@@ -4,7 +4,6 @@ export type ComponentType = WhatsAppTemplate['components'][0];
 export interface VariableConnectorWhatsAppProps {
     originalVariableList: WhatsAppTemplateVariables;
     descriptionComponent: ComponentType;
-    variableMapping: string[] | undefined;
     type: ComponentType['type'];
     showVariableModal?: boolean;
     variableList?: VariableListInterfaceV2[];

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 l}from"../../../constants/Theme.js";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const d=d=>{let{descriptionComponent:s,type:p,showVariableModal:b,variableList:c}=d;var m,v;const{originalVariableList:y,disableEditVariable:h}=o();return"BODY"===s.type?e("div",{children:null===(m=null==y?void 0:y.body)||void 0===m?void 0:m.map(((i,o)=>h||!i.isEditableVariable?a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),o):e(n,{index:o,variable:i,showVariableModal:b,variableList:c,componentType:s.type},`${o}-${i.index}`)))}):"HEADER"===s.type?e("div",{children:null===(v=null==y?void 0:y.header)||void 0===v?void 0:v.map(((i,o)=>i.isEditableVariable?e(n,{index:o,variable:i,showVariableModal:b,variableList:c,componentType:s.type},`${o}-${i.index}`):a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),o)))}):e(i,{})};export{d as default};
+import{jsx as e,jsxs as i,Fragment as a}from"react/jsx-runtime";import{Input as l}from"../../input/Input.js";import{BodySecondary as t}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{useTemplateModalContext as r}from"../context/templateModalContext.js";import{useAdditionalVariables as n}from"../custom-hooks/useAdditionalVariables.js";import d from"./VariableConnector.js";const s=s=>{let{descriptionComponent:p,type:b,showVariableModal:c,variableList:m}=s;var v,y,h,u,x,g;const{originalVariableList:f,disableEditVariable:V,selectedCarouselIndex:E}=r(),j=n({variableList:m,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});return console.log("right panel originalVariableList: ",f),console.log("right panel descriptionComponent: ",p),"BODY"===p.type?e("div",{children:null===(v=null!=E&&E>-1?f.cards[E].body:null==f?void 0:f.body)||void 0===v?void 0:v.map(((a,r)=>(console.log("right panel variable: ",a),V||!a.isEditableVariable?i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(t,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===b?"Header":""," Locked variable ",r+1]})),e(l,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),r):e(d,{index:r,variable:a,showVariableModal:c,variableList:m,componentType:p.type},`${r}-${a.index}`))))}):"HEADER"===p.type?e("div",{children:null===(y=null!=E&&E>-1?f.cards[E].header:null==f?void 0:f.header)||void 0===y?void 0:y.map(((a,r)=>(console.log("right panel variable 2: ",a),a.isEditableVariable?e(d,{index:r,variable:a,showVariableModal:c,variableList:m,componentType:p.type},`${r}-${a.index}`):i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(t,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===b?"Header":""," Locked variable ",r+1]})),e(l,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),r))))}):"limited_time_offer"===p.type?e("div",{children:e(d,{index:0,variable:{variableName:null!==(u=null===(h=null==p?void 0:p.limited_time_offer)||void 0===h?void 0:h.text)&&void 0!==u?u:"Expires after",updatedValue:null!==(g=null===(x=p.example)||void 0===x?void 0:x.limited_time_offer)&&void 0!==g?g:(new Date).toISOString(),type:"date_time",isEditableVariable:!0,index:0},showVariableModal:c,variableList:j,componentType:p.type},`${p.type}`)}):e(a,{})};export{s as default};