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

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};

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

@@ -6,4 +6,4 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/
 	padding-right: 10px;
 	margin-bottom: 8px;
 	line-height: normal;
-`,p=i=>{let{headerText:r,subText:p,toolTipInfo:d,containerStyle:m}=i;return t(c,Object.assign({style:Object.assign({},m)},{children:[t("div",Object.assign({style:{display:"flex",gap:8}},{children:[e(s,Object.assign({style:{color:l.content.primary}},{children:r})),d&&e(n,Object.assign({body:p},{children:e("div",{children:e(o,{width:20,height:20,color:l.content.placeholder})})}))]})),e(a,Object.assign({style:{color:l.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:p}))]}))};export{p as default};
+`,p=i=>{let{headerText:r,subText:p,toolTipInfo:d,containerStyle:m}=i;return t(c,Object.assign({style:Object.assign({},m)},{children:[t("div",Object.assign({style:{display:"flex",gap:8}},{children:[e(s,Object.assign({style:{color:l.content.primary}},{children:r})),d&&e(n,Object.assign({body:d},{children:e("div",{children:e(o,{width:20,height:20,color:l.content.placeholder})})}))]})),e(a,Object.assign({style:{color:l.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:p}))]}))};export{p as default};

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

@@ -12,6 +12,7 @@ export interface WhatsAppTemplateCardButtonV2Props {
     CTAoptions?: ButtonPlaceHolderOptions[];
     QRBoptions?: ButtonPlaceHolderOptions[];
     variableList?: VariableListInterfaceV2[];
+    variableListIndex: number;
 }
-declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
 export default WhatsAppTemplateCardButtonV2;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a,useCallback as l,useMemo as o,useEffect as i}from"react";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as r}from"../../input/Input.js";import{editableVarPattern as n}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as d}from"../../template-preview/models/TemplateMeta.js";import{POD as p,BUTTON_TYPE as m}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as b}from"../../TypographyStyle.js";import{COLORS as c}from"../../../constants/Theme.js";import{useTemplateModalContext as u}from"../context/templateModalContext.js";import{validateIsUrl as v}from"../utils/validateIsUrl.js";import f,{Container as j}from"./VariableConnector.js";const y=y=>{let{button:g,updateSelectedURLTemplateBtn:h,updateSelectedQRBTemplateBtn:x,originalVariableList:O,CTAoptions:L,QRBoptions:T,variableList:V}=y;var R,U,w,C;const[I,B]=a(""),[N,H]=a(),E=l((()=>V?[...V,{description:"",displayName:"Custom variables",orderId:1,variables:{"Custom url":{description:void 0,displayName:"Custom url",actualValue:"{{custom.url}}",variableType:"any",isAvailable:!0}}}].sort(((e,t)=>e.orderId-t.orderId)):V),[V]),S=o((()=>E()),[E]),{setOriginalVariableList:A,isError:k,disableEditVariable:M,pod:P}=u();function Q(e){B(e);const t=[Object.assign(Object.assign({},O.buttons[0]),{type:m.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==A||A((e=>Object.assign(Object.assign({},e),{body:[...O.body],buttons:[...t]}))),null==h||h(`https://${e}`,"custom")}return i((()=>{var e;if(g.buttonVariable&&n.test(g.buttonVariable))H(d),B((null===(e=g.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===g.type?L:T;e="URL"===g.type?t.findIndex((e=>e.placeHolder===g.buttonVariable)):t.findIndex((e=>e.label===g.flowName)),e>-1&&H(t[e])}}),[]),P!==p.CHATBOT?e(j,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:c.content.primary}},{children:[g.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(s,{disabled:M,options:"URL"===g.type?L:T,isSearchable:!1,onSelect:function(e,t){const a=e;H(a);const l=("URL"===g.type?L:T).find((e=>e.placeHolder===a.placeHolder));if(l)if("custom_link"!==l.value){let e;"URL"===g.type?(e=[Object.assign(Object.assign({},O.buttons[0]),{type:"URL",buttonVariable:a.placeHolder,example:["https://bik.ai/"]})],null==h||h({defaultValue:l.value,placeHolder:l.placeHolder},"placeholder")):(e=O.buttons.map(((e,t)=>t===g.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:a.label,flowId:a.value}):e)),null==x||x({flowName:a.label,flowId:a.value},"placeholder",g.index)),null==A||A((t=>Object.assign(Object.assign({},t),{body:[...O.body],buttons:[...e]})))}else Q("")},defaultOptions:N?[Object.assign(Object.assign({},N),{selected:!0})]:[]})})),"custom_link"===(null==N?void 0:N.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(r,{state:M?"disabled":"none",errorMessage:k?I?v(I)?"":"Enter valid URL":"Required field":"",value:I,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Q,maxCharLimit:2e3})}))]}):t(f,{index:0,variable:{variableName:null!==(R=g.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===g.buttonVariable?`${null===(U=g.example)||void 0===U?void 0:U[0]}`:null!==(w=g.buttonVariable)&&void 0!==w?w:"",type:"link",isEditableVariable:!0,index:null!==(C=g.index)&&void 0!==C?C:0},showVariableModal:!0,componentType:"BUTTONS",variableList:S,CTAoptions:L})};export{y as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as a,useEffect as l}from"react";import{Dropdown as o}from"../../dropdown/Dropdown.js";import{Input as i}from"../../input/Input.js";import{editableVarPattern as s}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as n}from"../../template-preview/models/TemplateMeta.js";import{POD as r,BUTTON_TYPE as p}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{useAdditionalVariables as c}from"../custom-hooks/useAdditionalVariables.js";import{validateIsUrl as u}from"../utils/validateIsUrl.js";import v,{Container as f}from"./VariableConnector.js";const j=j=>{let{variableListIndex:g,button:y,updateSelectedURLTemplateBtn:h,updateSelectedQRBTemplateBtn:x,originalVariableList:O,CTAoptions:L,QRBoptions:V,variableList:R}=j;var T,U,w,C;const[B,N]=a(""),[I,H]=a(),E=c({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{setOriginalVariableList:S,isError:k,disableEditVariable:A,pod:M}=b();function P(e){N(e);const t=[Object.assign(Object.assign({},O.buttons[0]),{type:p.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==S||S((e=>Object.assign(Object.assign({},e),{body:[...O.body],buttons:[...t]}))),null==h||h(`https://${e}`,"custom")}return l((()=>{var e;if(y.buttonVariable&&s.test(y.buttonVariable))H(n),N((null===(e=y.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===y.type?L:V;e="URL"===y.type?t.findIndex((e=>e.placeHolder===y.buttonVariable)):t.findIndex((e=>e.label===y.flowName)),e>-1&&H(t[e])}}),[]),M!==r.CHATBOT?e(f,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(d,Object.assign({style:{color:m.content.primary}},{children:[y.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(o,{disabled:A,options:"URL"===y.type?L:V,isSearchable:!1,onSelect:function(e,t){const a=e;H(a);const l=("URL"===y.type?L:V).find((e=>e.placeHolder===a.placeHolder));if(l)if("custom_link"!==l.value){let e;"URL"===y.type?(e=[Object.assign(Object.assign({},O.buttons[0]),{type:"URL",buttonVariable:a.placeHolder,example:["https://bik.ai/"]})],null==h||h({defaultValue:l.value,placeHolder:l.placeHolder},"placeholder")):(e=O.buttons.map(((e,t)=>t===y.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:a.label,flowId:a.value}):e)),null==x||x({flowName:a.label,flowId:a.value},"placeholder",y.index)),null==S||S((t=>Object.assign(Object.assign({},t),{body:[...O.body],buttons:[...e]})))}else P("")},defaultOptions:I?[Object.assign(Object.assign({},I),{selected:!0})]:[]})})),"custom_link"===(null==I?void 0:I.value)&&t("div",Object.assign({style:{marginBottom:20}},{children:t(i,{state:A?"disabled":"none",errorMessage:k?B?u(B)?"":"Enter valid URL":"Required field":"",value:B,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:P,maxCharLimit:2e3})}))]}):t(v,{index:g,variable:{variableName:null!==(T=y.text)&&void 0!==T?T:"",updatedValue:"((customPlaceholderName))"===y.buttonVariable?`${null===(U=y.example)||void 0===U?void 0:U[0]}`:null!==(w=y.buttonVariable)&&void 0!==w?w:"",type:"link",isEditableVariable:!0,index:null!==(C=y.index)&&void 0!==C?C:0},showVariableModal:!0,componentType:"BUTTONS",variableList:E,CTAoptions:L})};export{j as default};

package/dist/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.js

@@ -1 +1 @@
-const o=o=>{var n,t;const e=[],i=[],p=[],l=[],s=[];let a=null;return o.components.forEach(((o,n)=>{var t,l,s,u,d,r;if("BODY"===o.type&&o.text&&e.push({component:o,i:n,type:"BODY"}),"HEADER"===o.type&&"NONE"!==o.format&&"TEXT"!==o.format&&(null===(l=null===(t=o.example)||void 0===t?void 0:t.header_handle)||void 0===l?void 0:l[0])&&(a=o),"HEADER"===o.type&&"TEXT"===o.format&&e.push({component:o,i:n,type:"HEADER"}),"BUTTONS"===o.type){const t=null===(u=null===(s=o.buttons)||void 0===s?void 0:s.filter)||void 0===u?void 0:u.call(s,(o=>"URL"===o.type));i.push({component:Object.assign(Object.assign({},o),{buttons:t}),i:n});const e=null===(r=null===(d=o.buttons)||void 0===d?void 0:d.filter)||void 0===r?void 0:r.call(d,(o=>"QUICK_REPLY"===o.type));p.push({component:Object.assign(Object.assign({},o),{buttons:e}),i:n}),p.push}})),o.mapping&&(null===(n=o.mapping.body)||void 0===n||n.forEach((o=>{l.push(o)}))),o.mapping&&(null===(t=o.mapping.header)||void 0===t||t.forEach((o=>{s.push(o)}))),{imageComponent:a,descriptionComponents:e,urlBtns:i,qrbBtns:p,bodyVariables:l,headerVariables:s}};export{o as getAllDataFromTemplateComponent};
+const t=t=>{var o,e;const n=[],i=[],p=[],l=[],s=[];let a=null;return t.components.forEach(((t,o)=>{var e,l,s,d,r,u;if("BODY"===t.type&&t.text&&n.push({component:t,i:o,type:"BODY"}),"HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format&&(null===(l=null===(e=t.example)||void 0===e?void 0:e.header_handle)||void 0===l?void 0:l[0])&&(a=t),"HEADER"===t.type&&"TEXT"===t.format&&n.push({component:t,i:o,type:"HEADER"}),"BUTTONS"===t.type){const e=null===(d=null===(s=t.buttons)||void 0===s?void 0:s.filter)||void 0===d?void 0:d.call(s,(t=>"URL"===t.type));i.push({component:Object.assign(Object.assign({},t),{buttons:e}),i:o});const n=null===(u=null===(r=t.buttons)||void 0===r?void 0:r.filter)||void 0===u?void 0:u.call(r,(t=>"QUICK_REPLY"===t.type));p.push({component:Object.assign(Object.assign({},t),{buttons:n}),i:o})}"limited_time_offer"===t.type&&n.push({component:t,i:o,type:"limited_time_offer"})})),t.mapping&&(null===(o=t.mapping.body)||void 0===o||o.forEach((t=>{l.push(t)}))),t.mapping&&(null===(e=t.mapping.header)||void 0===e||e.forEach((t=>{s.push(t)}))),{imageComponent:a,descriptionComponents:n,urlBtns:i,qrbBtns:p,bodyVariables:l,headerVariables:s}};export{t as getAllDataFromTemplateComponent};

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

@@ -1,2 +1,2 @@
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-export declare const getPreviewWidth: (channel: CHANNEL_TYPE) => 236 | 300 | 360;
+export declare const getPreviewWidth: (channel: CHANNEL_TYPE) => 240 | 300 | 360;

package/dist/esm/components/template-context-mapper/utils/getPreviewDimension.js

@@ -1 +1 @@
-import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";const r=r=>{switch(r){case e.WHATSAPP:return 236;case e.SMS:return 300;case e.EMAIL:return 360;default:return 300}};export{r as getPreviewWidth};
+import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";const r=r=>{switch(r){case e.WHATSAPP:return 240;case e.SMS:return 300;case e.EMAIL:return 360;default:return 300}};export{r as getPreviewWidth};

package/dist/esm/components/template-preview/TemplatePreview.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { WhatsAppCarouselTemplate } from "./models/WhatsappCarouselTemplate";
 import { CHANNEL_TYPE } from './models/Channels';
 import { EmailMeta, EmailTemplateType } from './models/EmailTemplate';
 import { SMSMeta, SMSTemplateType } from './models/SmsTemplate';
 import { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';
 export interface TemplatePreviewProps {
-    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
+    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType | WhatsAppCarouselTemplate;
     channel: CHANNEL_TYPE;
     onlyTemplateContent?: boolean;
     outsidePreview?: boolean;
@@ -16,5 +17,6 @@ export interface TemplatePreviewProps {
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
     showSampleValues?: boolean;
+    carouselCardIndex?: number;
 }
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, showSampleValues, carouselCardIndex, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/template-preview/TemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import i from"../../utils/StringUtils.js";import{COLORS as a}from"../../constants/Theme.js";import{TitleRegular as n}from"../TypographyStyle.js";import o from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as r}from"./models/Channels.js";import s from"./SmsTemplatePreview.js";import d from"./WhatsAppTemplatePreview.js";const p=p=>{let{template:c,channel:u,whatsAppSpecificMeta:v,templateCreationsInfo:h,hideHeader:S,size:b,onlyTemplateContent:y,emailSpecificMeta:g,smsSpecificMeta:j,showSampleValues:T}=p;var C,f;return u===r.SMS?e("div",Object.assign({style:Object.assign({marginTop:h?16:0,border:h?`1px solid ${a.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(s,{template:c,hideHeader:S,onlyTemplateContent:y,size:null!=b?b:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):u===r.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:h?16:0},null==g?void 0:g.templateContainerStyles)},{children:e(o,{template:c,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:S,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):u===r.WHATSAPP?l("div",Object.assign({style:Object.assign(Object.assign({},null==v?void 0:v.templateContainerStyles),h?m.WhatsAppWrapper:{})},{children:[h?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:i.convertToTitleCase(null!==(C=null==c?void 0:c.label)&&void 0!==C?C:"")})})):e(t,{}),e(d,{showSampleValues:T,showHeader:null==v?void 0:v.showWhatsAppHeader,extras:null==v?void 0:v.whatsAppExtras,template:c,size:h?"small":null!=b?b:"large",containerStyle:Object.assign({borderWidth:h?0:1,borderTopWidth:1},null!==(f=null==v?void 0:v.containerStyle)&&void 0!==f?f:{}),zeroStateComponent:null==v?void 0:v.zeroStateComponent,usePlaceHolderName:null==v?void 0:v.usePlaceHolderName})]})):e(t,{})},m={WhatsAppWrapper:{backgroundColor:a.surface.standard,borderRadius:4,border:`1px solid ${a.background.inactive}`,marginTop:16}};export{p as TemplatePreview};
+import{jsx as e,jsxs as l,Fragment as t}from"react/jsx-runtime";import{useTemplateModalContext as a}from"../template-context-mapper/context/templateModalContext.js";import i from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import{TitleRegular as n}from"../TypographyStyle.js";import r from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as s}from"./models/Channels.js";import d from"./SmsTemplatePreview.js";import p from"./WhatsAppTemplatePreview.js";const m=m=>{let{template:u,channel:v,whatsAppSpecificMeta:h,templateCreationsInfo:S,hideHeader:C,size:b,onlyTemplateContent:y,emailSpecificMeta:g,smsSpecificMeta:j,showSampleValues:T,carouselCardIndex:f}=m;var w,x;const{setSelectedCarouselIndex:H,isWhatsappCarousel:W}=a();return console.log("template preview: ",f,u),v===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:S?16:0,border:S?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(d,{template:u,hideHeader:C,onlyTemplateContent:y,size:null!=b?b:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):v===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:S?16:0},null==g?void 0:g.templateContainerStyles)},{children:e(r,{template:u,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:C,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):v===s.WHATSAPP?l("div",Object.assign({style:Object.assign(Object.assign({},null==h?void 0:h.templateContainerStyles),S?c.WhatsAppWrapper:{}),onClick:()=>{H&&W&&H(null!=f?f:-1)}},{children:[S?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:i.convertToTitleCase(null!==(w=null==u?void 0:u.label)&&void 0!==w?w:"")})})):e(t,{}),e(p,{showSampleValues:T,showHeader:null==h?void 0:h.showWhatsAppHeader,extras:null==h?void 0:h.whatsAppExtras,template:u,size:S?"small":null!=b?b:"large",containerStyle:Object.assign({borderWidth:S?0:1,borderTopWidth:1},null!==(x=null==h?void 0:h.containerStyle)&&void 0!==x?x:{}),zeroStateComponent:null==h?void 0:h.zeroStateComponent,usePlaceHolderName:null==h?void 0:h.usePlaceHolderName,carouselCardIndex:f})]})):e(t,{})},c={WhatsAppWrapper:{backgroundColor:o.surface.standard,borderRadius:4,border:`1px solid ${o.background.inactive}`,marginTop:16}};export{m as TemplatePreview};

package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.d.ts

@@ -1,4 +1,8 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    isCarouselCard?: boolean | undefined;
+    showBorder?: boolean | undefined;
+    isWhatsappCarousel?: boolean | undefined;
+}, never>;
 export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;

package/dist/esm/components/template-preview/WhatsApp/ChatUI.style.js

@@ -1,20 +1,28 @@
-import t from"styled-components";import{Caption as e}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const r=t.div`
-	background: ${o.surface.standard};
+import o from"styled-components";import{Caption as r}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";const t=o.div`
+	background: ${e.surface.standard};
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: 0px;
+	border-top-left-radius: ${o=>o.isCarouselCard?"12px":"0px"};
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-`,i=t(e)`
-	color: ${o.content.secondary};
+	border-width: 2px;
+	border-color: ${e.stroke.brand};
+	border-style: ${o=>o.showBorder?"solid":"none"};
+	:hover {
+		border: 2px
+			${o=>o.isWhatsappCarousel?o.showBorder?"solid":"dashed":"none"}
+			${e.stroke.brand};
+	}
+`,i=o(r)`
+	color: ${e.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	text-wrap: wrap;
-`,p=t.div`
+`,d=o.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -23,19 +31,19 @@ import t from"styled-components";import{Caption as e}from"../../TypographyStyle.
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,d=t.div`
+`,p=o.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
-	border-top: 1px solid ${o.stroke.primary};
-`,n=t.div`
+	border-top: 1px solid ${e.stroke.primary};
+`,s=o.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
-`;t.div`
+`;o.div`
 	position: absolute;
 	bottom: -1px;
 	left: 0;
@@ -46,11 +54,11 @@ import t from"styled-components";import{Caption as e}from"../../TypographyStyle.
 	display: flex;
 	flex-direction: row;
 	justify-content: start;
-	background: ${o.surface.hovered};
+	background: ${e.surface.hovered};
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
-`,t.div`
+`,o.div`
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`;export{d as ChatBtnContainer,r as Container,n as FooterWrapper,p as MediaContainer,i as TimeStamp};
+`;export{p as ChatBtnContainer,t as Container,s as FooterWrapper,d as MediaContainer,i as TimeStamp};

package/dist/esm/components/template-preview/WhatsApp/ChatUiV2.js

@@ -1,19 +1,19 @@
-import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/halfRectangle.svg.js";import i from"../../../assets/icons/phone.svg.js";import s from"../../../assets/icons/RedirectToNew.svg.js";import a from"styled-components";import{Tooltip as n}from"../../tooltips/Tooltip.js";import{Caption as p,BodySecondary as l}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import{VariableEditorHelper as d}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as h,ACTIONS_TYPES as c}from"../models/TemplateMeta.js";import{ChatBtn as f}from"./ChatBtn.js";import{Container as x,FooterWrapper as y,TimeStamp as g}from"./ChatUI.style.js";import{MediaCard as T}from"./MediaCard.js";const j=a.div`
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import r from"../../../assets/icons/copy-code-icon.svg.js";import i from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import a from"../../../assets/icons/RedirectToNew.svg.js";import n from"styled-components";import{useTemplateModalContext as m}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as l}from"../../tooltips/Tooltip.js";import{Caption as p,BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{VariableEditorHelper as c}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as f,ACTIONS_TYPES as x}from"../models/TemplateMeta.js";import{ChatBtn as y}from"./ChatBtn.js";import{Container as T,FooterWrapper as g,TimeStamp as u}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as C}from"./MediaCard.js";const b=n.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,b=a.div`
+`,v=n.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${m.content.primary};
+	color: ${h.content.primary};
 	word-wrap: break-word;
-`,w=a(b)`
+`,w=n(v)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,v=new d,u=a=>{const{bodyText:m,footerText:d,headerMediaType:u,headerText:I,headerAssetLink:L,headerAssetName:N,quickReplybtn:A,ctaBtn:C,actionTypes:M,extras:_,showHeader:E,imagePreviewStyles:S,size:k,bodyVariableList:H,headerVariableList:R}=a,z=v.format(m,H),B=v.format(I,R);return e(x,{children:[t(j,{children:t(r,{color:"white",height:8,width:8})}),u===h.TEXT?t(w,{dangerouslySetInnerHTML:{__html:B}}):u!==h.NONE?t(T,{headerAssetLink:L,headerAssetName:N,mediaType:u,imagePreviewStyles:u===h.IMAGE?S:{}}):t(o,{}),!!m&&t(o,{children:t(b,{dangerouslySetInnerHTML:{__html:z}})}),e(y,{children:[t(n,Object.assign({body:null!=d?d:"",placement:"top"},{children:t(g,Object.assign({style:{flex:1}},{children:d}))})),t(g,{children:"16:48"})]}),M===c.QUICK_REPLY?t("div",{children:null==A?void 0:A.map(((e,o)=>t(f,{text:e.text},o)))}):M===c.CTA_BTN?t("div",{children:null==C?void 0:C.map(((e,o)=>t(f,{textTypography:E?p:l,extraContent:_?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?i:s,size:k},o)))}):t(o,{})]})};export{u as ChatUIV2};
+`,I=new c,L=n=>{const{bodyText:h,footerText:c,headerMediaType:L,headerText:O,headerAssetLink:E,headerAssetName:N,quickReplybtn:_,ctaBtn:M,actionTypes:R,extras:A,showHeader:P,imagePreviewStyles:B,size:H,bodyVariableList:S,headerVariableList:U,buttons:k,limitedTimeOfferComponent:z,carouselCardIndex:V}=n,Y=I.format(h,S),K=I.format(O,U),{isWhatsappCarousel:Q,selectedCarouselIndex:W}=m(),q={COPY_CODE:r,PHONE_NUMBER:s,URL:a,QUICK_REPLY:()=>t(o,{})};return e(T,Object.assign({isCarouselCard:null!=V&&V>-1,showBorder:null!=V&&V===W,isWhatsappCarousel:Q},{children:[!Q&&t(b,{children:t(i,{color:"white",height:8,width:8})}),L===f.TEXT?t(w,{dangerouslySetInnerHTML:{__html:K}}):L!==f.NONE?t(C,{headerAssetLink:E,headerAssetName:N,mediaType:L,imagePreviewStyles:L===f.IMAGE?B:{}}):t(o,{}),(null==z?void 0:z.dateTime)?t(j,{text:z.text,dateTime:z.dateTime,code:z.code}):t(o,{}),!!h&&t(o,{children:t(v,{dangerouslySetInnerHTML:{__html:Y}})}),e(g,{children:[t(l,Object.assign({body:null!=c?c:"",placement:"top"},{children:t(u,Object.assign({style:{flex:1}},{children:c}))})),t(u,{children:"16:48"})]}),k&&k.length>0?k.map(((e,o)=>t(y,{text:e.text,Icon:q[e.type],size:H},o))):R===x.QUICK_REPLY?t("div",{children:null==_?void 0:_.map(((e,o)=>t(y,{text:e.text},o)))}):R===x.CTA_BTN?t("div",{children:null==M?void 0:M.map(((e,o)=>t(y,{textTypography:P?p:d,extraContent:A?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:a,size:H},o)))}):t(o,{})]}))};export{L as ChatUIV2};

package/dist/esm/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.d.ts

@@ -0,0 +1,9 @@
+import { CreateTemplateType } from '../../models/WhatsAppTemplate';
+/**
+ * Renders Limited Time Offer component
+ * Type of props is infered from template
+ */
+export declare const LimitedTimeOffer: (props: CreateTemplateType['limitedTimeOfferComponent']) => import("react/jsx-runtime").JSX.Element;
+export declare const StyledLimitedOfferTime: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledLtoText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js

@@ -0,0 +1,20 @@
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import r from"../../../../assets/icons/lto_icon.svg.js";import o from"styled-components";import{BodySecondary as i,BodyTiny as t}from"../../../TypographyStyle.js";import{COLORS as s}from"../../../../constants/Theme.js";const c=o=>{const{text:c,dateTime:f,code:m}=o;return e(d,{children:[n(l,{children:n(r,{width:24,height:24,style:{display:"flex"}})}),e(a,{children:[n(i,Object.assign({numberOfLines:2,color:s.content.primary},{children:c})),e(t,Object.assign({numberOfLines:3,style:{overflowWrap:"anywhere"},color:s.content.secondary},{children:["Ends on ",f]})),e(t,Object.assign({numberOfLines:2,color:s.content.placeholder},{children:["Code ",m]}))]})]})},d=o.div`
+	display: flex;
+	flex-direction: row;
+	background: #f6f6f6;
+	margin: 0px 10px;
+	overflow: hidden;
+`,l=o.div`
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+	background: #d8f0e7;
+	margin: 5px;
+`,a=o.div`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+`;export{c as LimitedTimeOffer,d as StyledLimitedOfferTime,l as StyledLtoIcon,a as StyledLtoText};

package/dist/esm/components/template-preview/WhatsApp/WhatsAppLikePreviewV2.js

@@ -1,12 +1,10 @@
-import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import n from"./ChatHeader.js";import{ChatUIV2 as d}from"./ChatUiV2.js";const p=t.div`
+import{jsx as e,Fragment as r,jsxs as o}from"react/jsx-runtime";import t from"styled-components";import{TitleRegular as i}from"../../TypographyStyle.js";import{COLORS as a}from"../../../constants/Theme.js";import{getPreviewPropLen as s}from"../utils/getPreviewPropLen.js";import n from"./ChatHeader.js";import{ChatUIV2 as p}from"./ChatUiV2.js";const d=t.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: ${e=>e.showHeader?0:1}px solid
-		${a.stroke.primary};
 	border-radius: 4px;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
 	position: relative;
-`,m=t(i)`
+`,c=t(i)`
 	color: ${a.content.primary};
-`,c=t=>{const i=s(t);return e(r,3===i?{children:t.zeroStateComponent}:{children:o(p,Object.assign({style:t.containerStyle,showHeader:t.showHeader},{children:[t.showHeader&&e(n,{}),o("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!t.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(m,{children:"Preview"})})),e(d,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{c as WhatsappLikePreviewV2};
+`,m=t=>{const i=s(t);return e(r,3===i?{children:t.zeroStateComponent}:{children:o(d,Object.assign({style:t.containerStyle,showHeader:t.showHeader},{children:[t.showHeader&&e(n,{}),o("div",Object.assign({style:{padding:"small"===t.size?"12px 32px 12px 12px":"16px 56px 12px 16px"}},{children:[!t.hidePreviewText&&e("div",Object.assign({style:{marginBottom:16}},{children:e(c,{children:"Preview"})})),e(p,Object.assign({showHeader:t.showHeader},t))]}))]}))})};export{m as WhatsappLikePreviewV2};

package/dist/esm/components/template-preview/WhatsAppTemplatePreview.d.ts

@@ -10,5 +10,6 @@ declare const WhatsappTemplatePreview: React.FC<{
     zeroStateComponent?: ReactElement;
     size?: 'small' | 'large';
     showSampleValues?: boolean;
+    carouselCardIndex?: number;
 }>;
 export default WhatsappTemplatePreview;

package/dist/esm/components/template-preview/WhatsAppTemplatePreview.js

@@ -1 +1 @@
-import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{TemplateCreatorHelper as i}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as o}from"./models/TemplateMeta.js";import{TemplateHelperUtils as n}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as r}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as d}from"./WhatsApp/WhatsAppLikePreviewV2.js";const p=p=>{let{template:s,extras:u,containerStyle:v,usePlaceHolderName:h,showHeader:m,zeroStateComponent:x,size:c,showSampleValues:b}=p;var T,y,w,N,k,B,V,f,A,L,S,j,P,C,g,F,H,O,q,z,R,U;const[W,I]=t(),M=new i,D=new n,E=[];return(null===(y=null===(T=null==W?void 0:W.ctaBtn)||void 0===T?void 0:T.phoneNumber)||void 0===y?void 0:y.isChecked)&&E.push({type:"phoneNumber",text:null!==(w=W.ctaBtn.phoneNumber.btnText)&&void 0!==w?w:"",extra:null!==(N=W.ctaBtn.phoneNumber.phoneNumber)&&void 0!==N?N:""}),(null===(B=null===(k=null==W?void 0:W.ctaBtn)||void 0===k?void 0:k.websiteLinkBtn)||void 0===B?void 0:B.isChecked)&&E.push({type:"website",text:null!==(V=W.ctaBtn.websiteLinkBtn.btnText)&&void 0!==V?V:"",extra:null!==(A=null===(f=W.ctaBtn.websiteLinkBtn)||void 0===f?void 0:f.linkOpens)&&void 0!==A?A:"",placeholder:null!==(L=W.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==L?L:""}),a((()=>{s&&M.parseUITemplateFromDBFormat({dbFormattedTemplate:s,isDuplicate:!1,showSampleValues:b,isV2:!s.htmlContentUrl}).then((e=>{I(Object.assign({},e))}))}),[s,b]),s?s.htmlContentUrl?e(r,{showHeader:m,containerPadding:"large"===c?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:v,textType:"html",bodyText:D.whatsappOnlyFillVariablesValueInBodyText(null!==(H=null==W?void 0:W.bodyText)&&void 0!==H?H:"",null!==(O=null==W?void 0:W.bodyVariables)&&void 0!==O?O:[],h),footerText:null==W?void 0:W.footerText,headerMediaType:(null==W?void 0:W.headerType)||o.NONE,headerText:D.fillVariablesValInBodyText(null!==(q=null==W?void 0:W.headerText)&&void 0!==q?q:"",null!==(z=null==W?void 0:W.headerVariables)&&void 0!==z?z:[],h),headerAssetLink:null!==(R=null==W?void 0:W.headerAssetLink)&&void 0!==R?R:"",headerAssetName:null!==(U=null==W?void 0:W.headerAssetName)&&void 0!==U?U:"",quickReplybtn:null==W?void 0:W.quickReply,ctaBtn:E,actionTypes:null==W?void 0:W.actionsType,extras:u,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=x?x:e(l,{children:" "})}):e(d,{showHeader:m,containerPadding:"large"===c?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:v,textType:"html",bodyText:null==W?void 0:W.bodyText,footerText:null==W?void 0:W.footerText,headerMediaType:(null==W?void 0:W.headerType)||o.NONE,headerText:null==W?void 0:W.headerText,headerAssetLink:null!==(S=null==W?void 0:W.headerAssetLink)&&void 0!==S?S:"",headerAssetName:null!==(j=null==W?void 0:W.headerAssetName)&&void 0!==j?j:"",quickReplybtn:null==W?void 0:W.quickReply,ctaBtn:E,actionTypes:null==W?void 0:W.actionsType,extras:u,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=x?x:e(l,{children:" "}),bodyVariableList:null!==(C=null===(P=null==W?void 0:W.bodyVariables)||void 0===P?void 0:P.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==C?C:[],headerVariableList:null!==(F=null===(g=null==W?void 0:W.headerVariables)||void 0===g?void 0:g.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==F?F:[]}):e(l,{children:x})};export{p as default};
+import{jsx as e,Fragment as l}from"react/jsx-runtime";import{useState as t,useEffect as a}from"react";import{useTemplateModalContext as o}from"../template-context-mapper/context/templateModalContext.js";import{TemplateCreatorHelper as i}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as n}from"./models/TemplateMeta.js";import{TemplateHelperUtils as r}from"./utils/TemplateHelperUtils.js";import{WhatsappLikePreview as d}from"./WhatsApp/WhatsAppLikePreview.js";import{WhatsappLikePreviewV2 as p}from"./WhatsApp/WhatsAppLikePreviewV2.js";const s=s=>{let{template:u,extras:v,containerStyle:m,usePlaceHolderName:h,showHeader:x,zeroStateComponent:c,size:b,showSampleValues:T,carouselCardIndex:y}=s;var w,f,B,N,V,k,C,A,L,j,S,g,F,P,O,I,H,U,q,z,D,M;console.log("template preview 22: ",y,u);const{selectedCarouselIndex:R}=o(),[W,E]=t(),G=new i,J=new r,K=[];return(null===(f=null===(w=null==W?void 0:W.ctaBtn)||void 0===w?void 0:w.phoneNumber)||void 0===f?void 0:f.isChecked)&&K.push({type:"phoneNumber",text:null!==(B=W.ctaBtn.phoneNumber.btnText)&&void 0!==B?B:"",extra:null!==(N=W.ctaBtn.phoneNumber.phoneNumber)&&void 0!==N?N:""}),(null===(k=null===(V=null==W?void 0:W.ctaBtn)||void 0===V?void 0:V.websiteLinkBtn)||void 0===k?void 0:k.isChecked)&&K.push({type:"website",text:null!==(C=W.ctaBtn.websiteLinkBtn.btnText)&&void 0!==C?C:"",extra:null!==(L=null===(A=W.ctaBtn.websiteLinkBtn)||void 0===A?void 0:A.linkOpens)&&void 0!==L?L:"",placeholder:null!==(j=W.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==j?j:""}),a((()=>{u&&G.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{E(Object.assign({},e))}))}),[u,T]),a((()=>{u&&G.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{E(Object.assign({},e))}))}),[R]),u?u.htmlContentUrl?e(d,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:J.whatsappOnlyFillVariablesValueInBodyText(null!==(H=null==W?void 0:W.bodyText)&&void 0!==H?H:"",null!==(U=null==W?void 0:W.bodyVariables)&&void 0!==U?U:[],h),footerText:null==W?void 0:W.footerText,headerMediaType:(null==W?void 0:W.headerType)||n.NONE,headerText:J.fillVariablesValInBodyText(null!==(q=null==W?void 0:W.headerText)&&void 0!==q?q:"",null!==(z=null==W?void 0:W.headerVariables)&&void 0!==z?z:[],h),headerAssetLink:null!==(D=null==W?void 0:W.headerAssetLink)&&void 0!==D?D:"",headerAssetName:null!==(M=null==W?void 0:W.headerAssetName)&&void 0!==M?M:"",quickReplybtn:null==W?void 0:W.quickReply,ctaBtn:K,actionTypes:null==W?void 0:W.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},zeroStateComponent:null!=c?c:e(l,{children:" "})}):e(p,{showHeader:x,containerPadding:"large"===b?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:m,textType:"html",bodyText:null==W?void 0:W.bodyText,footerText:null==W?void 0:W.footerText,headerMediaType:(null==W?void 0:W.headerType)||n.NONE,headerText:null==W?void 0:W.headerText,headerAssetLink:null!==(S=null==W?void 0:W.headerAssetLink)&&void 0!==S?S:"",headerAssetName:null!==(g=null==W?void 0:W.headerAssetName)&&void 0!==g?g:"",quickReplybtn:null==W?void 0:W.quickReply,ctaBtn:K,actionTypes:null==W?void 0:W.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:y,zeroStateComponent:null!=c?c:e(l,{children:" "}),bodyVariableList:null!==(P=null===(F=null==W?void 0:W.bodyVariables)||void 0===F?void 0:F.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==P?P:[],headerVariableList:null!==(I=null===(O=null==W?void 0:W.headerVariables)||void 0===O?void 0:O.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==I?I:[],buttons:null==W?void 0:W.allButtons,limitedTimeOfferComponent:null==W?void 0:W.limitedTimeOfferComponent}):e(l,{children:c})};export{s as default};

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.d.ts

@@ -12,6 +12,13 @@ export declare class TemplateCreatorHelper {
     private parseBodyComponent;
     private parseFooterComponent;
     private parseButtonComponent;
+    /**
+     * Parses LTO component to a format preview can understand.
+     * Points to Note -
+     * 1. Takes the Copy Code from previously parsed buttons.
+     * 2. LTO component does not have a dateTime expiry by default. Hence, while sending template to ContextMapper, send with a date or current Date and Time is picked here.
+     */
+    private parseLimitedTimeOfferComponent;
     parseUITemplateFromDBFormat(data: {
         dbFormattedTemplate: WhatsAppTemplate;
         isDuplicate?: boolean;

package/dist/esm/components/template-preview/helpers/TemplateCreatorHelper.js

@@ -1 +1 @@
-import{__awaiter as e}from"../../../_virtual/_tslib.js";import{COLORS as t}from"../../../constants/Theme.js";import{specialCharPattern as n,placeHolderNamePattern as i,editableVarPattern as o}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as l,NAME_LEN_LIMIT as a,NAME_LEN_ERROR as d,NO_SPECIAL_CHAR as r,HEADER_TEXT_LEN_LIMIT as v,HEADER_LEN_ERROR as s,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as p,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as m,QUICK_REPLY_BTN_TEXT_LIMIT as h,QUICK_REPLY_LEN_ERROR as b,BUTTON_EMOJI_ERROR as T,VALID_PHONE_NUMBER as y,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as f}from"../constants/TemplateConstants.js";import{HEADER_TYPES as k,ACTIONS_TYPES as N}from"../models/TemplateMeta.js";import{TemplateHelperUtils as g}from"../utils/TemplateHelperUtils.js";class C{parseDataFromHeaderComponent(e,t){var n,i,o,l,a,d,r,v,s,u;const p={headerType:k.NONE,headerVariables:[]},c=null===(n=e.components)||void 0===n?void 0:n.find((e=>"HEADER"===e.type));if(c){p.headerType=c.format,p.headerText=c.text,p.headerAssetLink=null===(o=null===(i=c.example)||void 0===i?void 0:i.header_handle)||void 0===o?void 0:o[0];const n=null===(a=null===(l=c.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],m=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=m;if(n&&m){const e=null==m?void 0:m.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),i=/\(\(/.test(m),o={idx:0,variableVal:t?n:h,editable:i,editableDefaultValues:i?void 0:n,variableName:e};p.headerVariables=[o],(null===(s=null===(v=c.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(p.headerText=null===(u=p.headerText)||void 0===u?void 0:u.replace("{{1}}",`{{${e}}}`))}}return p}validateState(e){var t,i,o,C,L,E,R,w,_,V,A,D,I,U,O,q,F,j,P,$,Y;const K=/\p{Extended_Pictographic}/u;let M="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},S=new g;let H=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>a?(Q.meta.name=d,M="invalid"):n.test(e.meta.name.trim())&&(Q.meta.name=r,M="invalid"):(Q.meta.name=l,M="invalid"),Q.meta.name&&!H&&(G(x.name),H=!0),e.headerType===k.TEXT){const t=null!==(o=null===(i=e.headerText)||void 0===i?void 0:i.trim())&&void 0!==o?o:"";if(t)if(t.length>v)Q.header=s,M="invalid";else{const e=S.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,M="invalid")}else Q.header=l,M="invalid"}else e.headerType===k.DOCUMENT||e.headerType===k.IMAGE||(e.headerType,k.VIDEO);if(e.headerType!==k.DOCUMENT&&e.headerType!==k.IMAGE&&e.headerType!==k.VIDEO||e.headerAssetLink||(Q.header=p,M="invalid"),Q.header&&!H&&(G(x.header),H=!0),e.bodyText?e.bodyTextRaw&&(null===(C=e.bodyTextRaw)||void 0===C?void 0:C.trim().length)>c&&(Q.body=m,M="invalid"):(Q.body=l,M="invalid"),Q.body&&!H&&(G(x.body),H=!0),e.footerText&&e.footerText.length>v&&(Q.footer=s,M="invalid"),(null==Q?void 0:Q.footer)&&!H&&(G(x.footer),H=!0),e.actionsType===N.CTA_BTN){if(null===(E=null===(L=e.ctaBtn)||void 0===L?void 0:L.phoneNumber)||void 0===E?void 0:E.isChecked){const t=null===(R=e.ctaBtn.phoneNumber.btnText)||void 0===R?void 0:R.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.phoneNumber.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.phoneNumber.btnText=T,M="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=l,M="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=y,M="invalid")}if(null===(_=null===(w=e.ctaBtn)||void 0===w?void 0:w.websiteLinkBtn)||void 0===_?void 0:_.isChecked){const t=null===(V=e.ctaBtn.websiteLinkBtn.btnText)||void 0===V?void 0:V.trim(),n=null===(A=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===A?void 0:A.trim(),i=null===(D=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===D?void 0:D.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=l,M="invalid"):Q.ctaBtn&&t&&t.length>h?(Q.ctaBtn.websiteLink.btnText=b,M="invalid"):Q.ctaBtn&&t&&K.test(t)&&(Q.ctaBtn.websiteLink.btnText=T,M="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=l,M="invalid")}}else if(e.actionsType===N.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=b,M="invalid";else if(K.test(o))t[i]=T,M="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=f,M="invalid")}else t[i]=l,M="invalid"})),Q.quickReply=t}if(e.actionsType===N.CTA_BTN||e.actionsType===N.QUICK_REPLY){const e=null===(I=Q.quickReply)||void 0===I?void 0:I.reduce(((e,t)=>e||!!t),!1);((null===(O=null===(U=null==Q?void 0:Q.ctaBtn)||void 0===U?void 0:U.websiteLink)||void 0===O?void 0:O.link)||(null===(F=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===F?void 0:F.btnText)||(null===(P=null===(j=Q.ctaBtn)||void 0===j?void 0:j.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===($=Q.ctaBtn)||void 0===$?void 0:$.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!H&&(G(x.actionButtons),H=!0)}return{status:M,errors:Q}}parseBodyComponent(e){let n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let u="";const p=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return p&&(null===(d=null===(a=p.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,n)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[n];const r=d,v=d&&/\(\(/.test(d),u=null==d?void 0:d.match(i);(null==u?void 0:u[2])&&(d=null==u?void 0:u[2]),s.push({idx:n,variableVal:o?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),u=e.htmlContentUrl?e.htmlContentUrl:(null===(r=p.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=p.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==s?void 0:s[i]){const o=s[i].variableName;return n?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${t.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:u}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,l,a,d;const r={actionsType:N.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0}},v=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(v&&(null===(n=null==v?void 0:v.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==v?void 0:v.buttons)||void 0===i?void 0:i[0].type)?N.QUICK_REPLY:N.CTA_BTN;if(r.actionsType=t,t===N.QUICK_REPLY){const e=null!==(a=null===(l=null==v?void 0:v.buttons)||void 0===l?void 0:l.map((e=>e)))&&void 0!==a?a:[];return r.quickReply=e,r}t===N.CTA_BTN&&(null===(d=null==v?void 0:v.buttons)||void 0===d||d.forEach((t=>{var n,i,l,a;if(t.phone_number&&(r.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(l=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==l?l:void 0;let v=!1;d&&o.test(d)&&(v=!0),r.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:v?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:v?void 0:d}}})))}return r}parseUITemplateFromDBFormat(t){var n;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:i,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:u,bodyVariable:p}=yield this.parseBodyComponent(e,o,l),{actionsType:c,quickReply:m,ctaBtn:h}=yield this.parseButtonComponent(e),b={quickReply:m,ctaBtn:h,meta:{name:i?`${e.label} Copy`:e.label,category:null===(n=e.category)||void 0===n?void 0:n.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:c,footerText:this.parseFooterComponent(e),bodyVariables:p,bodyText:u,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1},{errors:T}=this.validateState(b);return b.error=T,b}))}}export{C as TemplateCreatorHelper};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{format as t}from"date-fns";import{COLORS as n}from"../../../constants/Theme.js";import{specialCharPattern as i,placeHolderNamePattern as o,editableVarPattern as l}from"../constants/regexPatterns.js";import{REQUIRED_FIELD as a,NAME_LEN_LIMIT as d,NAME_LEN_ERROR as r,NO_SPECIAL_CHAR as v,HEADER_TEXT_LEN_LIMIT as s,HEADER_LEN_ERROR as p,ONE_VAR_ALLOWED as u,HEADER_ASSET_LINK_ERROR as m,BODY_TEXT_LEN_LIMIT as c,BODY_LEN_ERROR as h,QUICK_REPLY_BTN_TEXT_LIMIT as b,QUICK_REPLY_LEN_ERROR as T,BUTTON_EMOJI_ERROR as y,VALID_PHONE_NUMBER as f,QUICK_REPLY_NAME_LEN_LIMIT as B,CREATE_TEMPLATE_DOM_IDS as x,QUICK_REPLY_NAME_ERROR as k}from"../constants/TemplateConstants.js";import{HEADER_TYPES as C,ACTIONS_TYPES as g}from"../models/TemplateMeta.js";import{TemplateHelperUtils as N}from"../utils/TemplateHelperUtils.js";class E{parseDataFromHeaderComponent(e,t){var n,i,o,l,a,d,r,v,s,p;const u={headerType:C.NONE,headerVariables:[]},m=null===(n=e.components)||void 0===n?void 0:n.find((e=>"HEADER"===e.type));if(m){u.headerType=m.format,u.headerText=m.text,u.headerAssetLink=null===(o=null===(i=m.example)||void 0===i?void 0:i.header_handle)||void 0===o?void 0:o[0];const n=null===(a=null===(l=m.example)||void 0===l?void 0:l.header_text)||void 0===a?void 0:a[0],c=null===(r=null===(d=e.mapping)||void 0===d?void 0:d.header)||void 0===r?void 0:r[0],h=c;if(n&&c){const e=null==c?void 0:c.replace("[[","").replace("]]","").replace("{{","").replace("}}","").replace("((","").replace("))",""),i=/\(\(/.test(c),o={idx:0,variableVal:t?n:h,editable:i,editableDefaultValues:i?void 0:n,variableName:e};u.headerVariables=[o],(null===(s=null===(v=m.example)||void 0===v?void 0:v.header_text)||void 0===s?void 0:s.length)&&(u.headerText=null===(p=u.headerText)||void 0===p?void 0:p.replace("{{1}}",`{{${e}}}`))}}return u}validateState(e){var t,n,o,l,E,_,L,O,w,R,D,V,A,I,U,q,j,F,P,M,Y;const $=/\p{Extended_Pictographic}/u;let K="valid";const Q={meta:{},ctaBtn:{phoneNumber:{btnText:"",link:""},websiteLink:{btnText:"",link:""}},quickReply:[null,null,null]},S=new N;let H=!1;const G=e=>{var t;null===(t=document.getElementById(e))||void 0===t||t.scrollIntoView({behavior:"smooth",block:"nearest"})};if((null===(t=e.meta)||void 0===t?void 0:t.name)?e.meta.name.trim().length>d?(Q.meta.name=r,K="invalid"):i.test(e.meta.name.trim())&&(Q.meta.name=v,K="invalid"):(Q.meta.name=a,K="invalid"),Q.meta.name&&!H&&(G(x.name),H=!0),e.headerType===C.TEXT){const t=null!==(o=null===(n=e.headerText)||void 0===n?void 0:n.trim())&&void 0!==o?o:"";if(t)if(t.length>s)Q.header=p,K="invalid";else{const e=S.getTemplateVariablesFromState(t);e&&e.length>1&&(Q.header=u,K="invalid")}else Q.header=a,K="invalid"}else e.headerType===C.DOCUMENT||e.headerType===C.IMAGE||(e.headerType,C.VIDEO);if(e.headerType!==C.DOCUMENT&&e.headerType!==C.IMAGE&&e.headerType!==C.VIDEO||e.headerAssetLink||(Q.header=m,K="invalid"),Q.header&&!H&&(G(x.header),H=!0),e.bodyText?e.bodyTextRaw&&(null===(l=e.bodyTextRaw)||void 0===l?void 0:l.trim().length)>c&&(Q.body=h,K="invalid"):(Q.body=a,K="invalid"),Q.body&&!H&&(G(x.body),H=!0),e.footerText&&e.footerText.length>s&&(Q.footer=p,K="invalid"),(null==Q?void 0:Q.footer)&&!H&&(G(x.footer),H=!0),e.actionsType===g.CTA_BTN){if(null===(_=null===(E=e.ctaBtn)||void 0===E?void 0:E.phoneNumber)||void 0===_?void 0:_.isChecked){const t=null===(L=e.ctaBtn.phoneNumber.btnText)||void 0===L?void 0:L.trim(),n=e.ctaBtn.phoneNumber.phoneNumber;Q.ctaBtn&&!t?(Q.ctaBtn.phoneNumber.btnText=a,K="invalid"):Q.ctaBtn&&t&&t.length>b?(Q.ctaBtn.phoneNumber.btnText=T,K="invalid"):Q.ctaBtn&&t&&$.test(t)&&(Q.ctaBtn.phoneNumber.btnText=y,K="invalid"),Q.ctaBtn&&!n?(Q.ctaBtn.phoneNumber.link=a,K="invalid"):Q.ctaBtn&&n&&n.length<10&&(Q.ctaBtn.phoneNumber.link=f,K="invalid")}if(null===(w=null===(O=e.ctaBtn)||void 0===O?void 0:O.websiteLinkBtn)||void 0===w?void 0:w.isChecked){const t=null===(R=e.ctaBtn.websiteLinkBtn.btnText)||void 0===R?void 0:R.trim(),n=null===(D=e.ctaBtn.websiteLinkBtn.linkOpens)||void 0===D?void 0:D.trim(),i=null===(V=e.ctaBtn.websiteLinkBtn.placeholder)||void 0===V?void 0:V.trim();Q.ctaBtn&&!t?(Q.ctaBtn.websiteLink.btnText=a,K="invalid"):Q.ctaBtn&&t&&t.length>b?(Q.ctaBtn.websiteLink.btnText=T,K="invalid"):Q.ctaBtn&&t&&$.test(t)&&(Q.ctaBtn.websiteLink.btnText=y,K="invalid"),!Q.ctaBtn||n||i||(Q.ctaBtn.websiteLink.link=a,K="invalid")}}else if(e.actionsType===g.QUICK_REPLY){const t=["","",""];e.quickReply.forEach(((n,i)=>{const o=n.text.trim();if(o)if(o.length>B)t[i]=T,K="invalid";else if($.test(o))t[i]=y,K="invalid";else{const n=[...e.quickReply];n.splice(i,1);n.find((e=>e.text===o))&&(t[i]=k,K="invalid")}else t[i]=a,K="invalid"})),Q.quickReply=t}if(e.actionsType===g.CTA_BTN||e.actionsType===g.QUICK_REPLY){const e=null===(A=Q.quickReply)||void 0===A?void 0:A.reduce(((e,t)=>e||!!t),!1);((null===(U=null===(I=null==Q?void 0:Q.ctaBtn)||void 0===I?void 0:I.websiteLink)||void 0===U?void 0:U.link)||(null===(j=null===(q=Q.ctaBtn)||void 0===q?void 0:q.websiteLink)||void 0===j?void 0:j.btnText)||(null===(P=null===(F=Q.ctaBtn)||void 0===F?void 0:F.phoneNumber)||void 0===P?void 0:P.link)||(null===(Y=null===(M=Q.ctaBtn)||void 0===M?void 0:M.phoneNumber)||void 0===Y?void 0:Y.btnText)||e)&&!H&&(G(x.actionButtons),H=!0)}return{status:K,errors:Q}}parseBodyComponent(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=arguments.length>2?arguments[2]:void 0;var l,a,d,r,v;const s=[];let p="";const u=null===(l=e.components)||void 0===l?void 0:l.find((e=>"BODY"===e.type));return u&&(null===(d=null===(a=u.example)||void 0===a?void 0:a.body_text)||void 0===d||d[0].forEach(((t,n)=>{var l,a;let d=null===(a=null===(l=e.mapping)||void 0===l?void 0:l.body)||void 0===a?void 0:a[n];const r=d,v=d&&/\(\(/.test(d),p=null==d?void 0:d.match(o);(null==p?void 0:p[2])&&(d=null==p?void 0:p[2]),s.push({idx:n,variableVal:i?t:r,editable:!!v,editableDefaultValues:v?void 0:t,variableName:null!=d?d:""})})),p=e.htmlContentUrl?e.htmlContentUrl:(null===(r=u.text)||void 0===r?void 0:r.split(/\{\{[0-9]+\}\}/).length)?null===(v=u.text)||void 0===v?void 0:v.split(/\{\{[0-9]+\}\}/).map(((e,i)=>{if(null==s?void 0:s[i]){const o=s[i].variableName;return t?`${e}{{${o}}}`:`${e} <span> </span><span  style="color: ${n.content.brand}; text-decoration: underline;">{{${o}}}</span><span> </span>`}return e})).join(""):""),{bodyVariable:s,bodyText:p}}parseFooterComponent(e){var t;const n=null===(t=e.components)||void 0===t?void 0:t.find((e=>"FOOTER"===e.type));return null==n?void 0:n.text}parseButtonComponent(e){var t,n,i,o,a,d,r;const v={actionsType:g.NONE,quickReply:[],ctaBtn:{phoneNumber:void 0,websiteLinkBtn:void 0},allButtons:[]},s=null===(t=e.components)||void 0===t?void 0:t.find((e=>"BUTTONS"===e.type));if(s&&(null===(n=null==s?void 0:s.buttons)||void 0===n?void 0:n.length)){const t="QUICK_REPLY"===(null===(i=null==s?void 0:s.buttons)||void 0===i?void 0:i[0].type)?g.QUICK_REPLY:g.CTA_BTN;if(v.actionsType=t,t===g.QUICK_REPLY){const e=null!==(a=null===(o=null==s?void 0:s.buttons)||void 0===o?void 0:o.map((e=>e)))&&void 0!==a?a:[];v.quickReply=e}else t===g.CTA_BTN&&(null===(d=null==s?void 0:s.buttons)||void 0===d||d.forEach((t=>{var n,i,o,a;if(t.phone_number&&(v.ctaBtn.phoneNumber={isChecked:!0,btnText:t.text,phoneNumber:t.phone_number}),t.url){const d=null!==(o=null===(i=null===(n=null==e?void 0:e.mapping)||void 0===n?void 0:n.buttons)||void 0===i?void 0:i[0])&&void 0!==o?o:void 0;let r=!1;d&&l.test(d)&&(r=!0),v.ctaBtn.websiteLinkBtn={isChecked:!0,btnText:t.text,linkOpens:r?null===(a=t.example)||void 0===a?void 0:a[0]:t.url,placeholder:r?void 0:d}}})));v.allButtons=null===(r=s.buttons)||void 0===r?void 0:r.map((e=>{var t;return"COPY_CODE"===e.type?Object.assign(Object.assign({},e),{placeholder:null===(t=e.example)||void 0===t?void 0:t[0]}):e}))}return v}parseLimitedTimeOfferComponent(e,n){const i={text:"",dateTime:"",code:""};return e.components.forEach((e=>{var o,l,a;if("limited_time_offer"===e.type){i.text=null!==(l=null===(o=e.limited_time_offer)||void 0===o?void 0:o.text)&&void 0!==l?l:"";const n=null===(a=e.example)||void 0===a?void 0:a.limited_time_offer;n&&n.startsWith("{{")&&n.endsWith("}}")?i.dateTime=n:i.dateTime=t(n?new Date(n):new Date,"MMM dd")}n.forEach((e=>{var t;"COPY_CODE"===e.type&&(i.code=null!==(t=e.placeholder)&&void 0!==t?t:"")}))})),i}parseUITemplateFromDBFormat(t){var n;return e(this,void 0,void 0,(function*(){const{dbFormattedTemplate:e,isDuplicate:i,isV2:o=!1,showSampleValues:l}=t,{headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s}=yield this.parseDataFromHeaderComponent(e),{bodyText:p,bodyVariable:u}=yield this.parseBodyComponent(e,o,l),{actionsType:m,quickReply:c,ctaBtn:h,allButtons:b}=yield this.parseButtonComponent(e),T=this.parseLimitedTimeOfferComponent(e,b),y={quickReply:c,ctaBtn:h,allButtons:b,meta:{name:i?`${e.label} Copy`:e.label,category:null===(n=e.category)||void 0===n?void 0:n.toUpperCase(),subCategory:e.templateCategory,language:e.language,templateId:e.templateId},error:{header:void 0,body:void 0,footer:void 0,quickReply:void 0,meta:void 0,ctaBtn:void 0},actionsType:m,footerText:this.parseFooterComponent(e),bodyVariables:u,bodyText:p,headerType:a,headerAssetLink:d,headerAssetName:r,headerText:v,headerVariables:s,alreadyAsADraft:e.isDraft,mode:"edit",initialLoading:!1,limitedTimeOfferComponent:T},{errors:f}=this.validateState(y);return y.error=f,y}))}}export{E as TemplateCreatorHelper};

package/dist/esm/components/template-preview/models/TemplateMeta.d.ts

@@ -1,7 +1,7 @@
 import { SingleOption } from "../../dropdown/type";
 export type CUSTOM_VARIABLE = {
     variableName: string;
-    type: 'string' | 'link' | 'image';
+    type: 'string' | 'link' | 'image' | 'button' | 'date_time';
     isEditableVariable: boolean;
     updatedValue: string;
     index?: number;