@bikdotai/bik-component-library 0.0.432 → 0.0.433-beta.10

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

@@ -0,0 +1,47 @@
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import i from"../../../assets/icons/PlusIcon.js";import{useState as r,useEffect as s}from"react";import a from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import"../../add-variableV2/AddVariableV2.styled.js";import{Button as l}from"../../button/Button.js";import{IconButton as d}from"../../icon-button/IconButton.js";import"../../input/Input.js";import"../../tooltips/Tooltip.js";import{COLORS as c}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleMedium as p,BodyCaption as m,TitleRegular as u}from"../../TypographyStyle.js";import{ProductPickerModal as h}from"../../product-picker-v2/modal.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import g from"./EditWhatsAppTemplateV2.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as y}from"../../template-preview/models/WhatsAppTemplate.js";import b from"../../../assets/icons/box.svg.js";import v from"../../../assets/icons/delete.svg.js";import j from"../../../assets/icons/edit.svg.js";const x=a=>{let{template:d,whatsappSpecificPickerMeta:u,showVariableModal:b,variableList:v,variableListForImage:j,discountCode:x,setDiscountCode:w}=a;const{selectedCarouselIndex:C,setTemplate:O,pickerConf:T,isProductCarouselType:k,pod:P,cardCount:A}=f(),[S,V]=r(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[B,L]=r(!1),[E,M]=r(!1),[_,F]=r(!1),[W,z]=r([]);s((()=>{V(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[C]);return e("div",{children:[t(p,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:S})),k&&W.length>0&&null!=C&&C>=0&&e("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[t(I,{editItem:()=>L(!B),cardBody:`${W.length} Products Selected`,deleteItem:()=>{z([])}}),t(l,{disabled:W.length<=1,style:{alignSelf:"flex-end",background:c.surface.subdued},onClick:()=>{M(!0),L(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),k&&0===W.length&&null!=C&&C>=0&&e("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[t(l,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12},size:"medium",buttonText:"Add Product(s)",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{L(!0)}}),P===y.CHATBOT&&e(o,{children:[e("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),t(m,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),t("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),t(l,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:i,onClick:e=>{F(!0)}})]})]})),t(g,{whatsappSpecificPickerMeta:u,template:d,onTemplateChange:e=>{null==O||O(e)},showVariableModal:b,variableList:v,variableListForImage:j,discountCode:x,setDiscountCode:w}),B&&T&&t(h,{zIndex:200,rearrangeEnabled:E,limit:null!=A?A:1,storeId:T.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const o of e){const e=null==o?void 0:o.collectionId,i=o.productId,r=o.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),i in t[e].products||(t[e].products[i]={variants:{},name:(null==o?void 0:o.productName)||"",image:(null==o?void 0:o.productImage)||""}),t[e].products[i].variants[r]={name:(null==o?void 0:o.name)||"",price:"",image:(null==o?void 0:o.image)||"",quantity:o.quantity||0,displayOrder:o.displayOrder}}return t}return{}})(W),collectionFetcher:T.fetchCollections,productFetcher:T.fetchProducts,onAdd:(e,t)=>{console.log("items: ",e),M(!1);const o=[],i=[];delete e.isCustom;for(const t of Object.keys(e)){const r=e[t].products;if(void 0!==r&&Object.keys(r).length)for(const e of Object.keys(r)){const s=r[e].variants;if(void 0!==s&&Object.keys(s).length)for(const a of Object.keys(s)){const{name:n,image:l,quantity:d,displayOrder:c}=s[a],p={name:n,image:l,quantity:d,variantId:a,productId:e,displayOrder:c,collectionId:t,productName:r[e].name,productImage:r[e].image};i.push(p),o.push(l)}}}const r=i.sort(((e,t)=>e.displayOrder-t.displayOrder)),s=Object.assign({},d);o.forEach(((e,t)=>{e&&(s.components[1].cards[t].components[0].example.header_handle=[e])})),null==O||O(s),z(r),L(!1)},searchInCollectionFetcher:T.searchInCollection,searchFetcher:T.searchProducts,visible:B,onClose:()=>{L(!1)}}),_&&t(n,{zIndex:2e3,data:null!=v?v:[],showVariable:_,setShowVariable:F,placeholder:"Add a variable",customTrigger:e=>{}})]})},I=o=>{const{cardBody:i,deleteItem:r,editItem:s}=o;return e(w,Object.assign({width:"100%"},{children:[t("div",Object.assign({style:{width:36,height:36}},{children:t(b,{})})),t("div",Object.assign({className:"card-body"},{children:t(u,{children:i})})),e("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[s&&t(d,{style:{display:"flex"},Icon:j,onClick:e=>{s(),e.stopPropagation()}}),t(d,{style:{display:"flex",color:"#919191"},Icon:v,onClick:e=>{r(),e.stopPropagation()}})]}))]}))},w=a.div`
+	width: ${e=>e.width};
+	padding: 12px;
+	display: flex;
+	flex-direction: row;
+	column-gap: 14px;
+	justify-content: center;
+	align-items: center;
+	background: #ffffff;
+
+	border: 1px solid #e0e0e0;
+	border-radius: 4px;
+
+	.card-body {
+		width: 256px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		&__dynamic {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 16px;
+			line-height: 24px;
+			color: #731dcf;
+
+			&__desc {
+				font-family: 'Inter';
+				font-style: normal;
+				font-weight: 400;
+				font-size: 12px;
+				line-height: 16px;
+				color: #616161;
+			}
+		}
+
+		&__simple {
+			font-family: 'Inter';
+			font-style: normal;
+			font-weight: 400;
+			font-size: 16px;
+			line-height: 24px;
+			color: #000000;
+		}
+	}
+`;export{x 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 i}from"react";import{POD as n}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as a}from"../context/templateModalContext.js";import{useAdditionalVariables as l}from"../custom-hooks/useAdditionalVariables.js";import{getAllDataFromTemplateComponent as s}from"../utils/getDataFromTemplateComponent.js";import{BackTrackComponent as d}from"./BackTrackComponent.js";import{DiscountCodeComponent as r}from"./DiscountCodeComponent.js";import{EditTemplateMediaContainer as p}from"./EditMediaV2.style.js";import c from"./EditWhatsAppTemplateMediaV2.js";import u from"./VariableConnector.js";import{Container as m}from"./VariableConnectorsPanel.js";import v from"./VariableConnectorWhatsApp.js";import b from"./VariableEditorHeader.js";import g from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:f,onTemplateChange:T,whatsappSpecificPickerMeta:j,showVariableModal:x,variableList:C,variableListForImage:O,discountCode:y,setDiscountCode:E}=h;var V,k,L,w,B,I,A,M,U,D,N,R,H,S,P,Q,W;const{originalVariableList:_,pod:F,extras:Y}=a(),{descriptionComponents:K,urlBtns:$,qrbBtns:q,imageComponent:X,bodyVariables:z,headerVariables:G}=s(f),[J,Z]=e(!1);function tt(t,o){var e,i,n,a,l;const s=Object.assign({},f),d=null==s?void 0:s.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==d&&d>-1){const l=null===(e=null==s?void 0:s.components[d].buttons)||void 0===e?void 0:e.findIndex((t=>"URL"===t.type));if(void 0!==l&&l>-1){const e="custom"===o&&"string"==typeof t,r=[...null!==(a=null===(n=null===(i=s.components)||void 0===i?void 0:i[d])||void 0===n?void 0:n.buttons)&&void 0!==a?a:[]];r[l]=Object.assign(Object.assign({},r[l]),{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===(l=t.placeHolder)||void 0===l?void 0:l.slice(2,-2))?Z(!0):(Z(!1),null==E||E(""))}null==T||T(s)}function ot(t,o,e){var i;const n=Object.assign({},f),a=null==n?void 0:n.components.findIndex((t=>"BUTTONS"===t.type));if(void 0!==a&&a>-1){const o=null===(i=null==n?void 0:n.components[a].buttons)||void 0===i?void 0:i.filter((t=>"QUICK_REPLY"===t.type));o&&(o[e]=Object.assign(Object.assign({},o[e]),{flowId:t.flowId,flowName:t.flowName}));const l=Object.assign(Object.assign({},n.components[a]),{buttons:o}),s=[...n.components];s[a]=l,n.components=s}null==T||T(n)}i((()=>{var t,o;if(null===(t=f.mapping.buttons)||void 0===t?void 0:t.find((t=>"checkout.checkoutUrl"===t.slice(2,-2))))Z(!0);else{Z(!1);const t=null===(o=null==Y?void 0:Y.discountCodeExtra)||void 0===o?void 0:o[1];null==t||t("")}}),[f]);const et=l({variableList:C,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return t(m,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!X&&o(p,{children:o(c,{whatsappSpecificPickerMeta:j,mediaComponent:X,updateTemplateImageUrl:function(t,o){var e;let i=Object.assign({},f);const n=null===(e=null==i?void 0:i.components)||void 0===e?void 0:e.findIndex((t=>{if("HEADER"===t.type&&"NONE"!==t.format&&"TEXT"!==t.format)return!0}));if(void 0!==n&&n>-1&&(null==i?void 0:i.components[n])){const e=Object.assign(Object.assign({},i.components[n]),{format:o,example:{header_handle:[t]}}),a=[...i.components];a[n]=e,i=Object.assign(Object.assign({},i),{components:a})}i.mapping&&(i.mapping=Object.assign(Object.assign({},i.mapping),{header:void 0})),null==T||T(Object.assign({},i))},template:f,variableListForImage:O})}),(z.length>0||G.length>0)&&o(b,{containerStyle:{paddingTop:X?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==K?void 0:K.map(((t,e)=>o(v,{originalVariableList:_,type:t.type,descriptionComponent:t.component,variableMapping:"HEADER"===t.type?f.mapping.header:f.mapping.body,showVariableModal:x,variableList:C},e))),(null===(k=null===(V=$[0])||void 0===V?void 0:V.component)||void 0===k?void 0:k.buttons)&&(null===(B=null===(w=null===(L=$[0])||void 0===L?void 0:L.component)||void 0===w?void 0:w.buttons)||void 0===B?void 0:B.length)>0&&o(b,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(I=null==_?void 0:_.buttons)||void 0===I?void 0:I.map(((t,e)=>{if("URL"===t.type)return o(g,{variableListIndex:e,CTAoptions:null==j?void 0:j.CTAoptions,button:t,originalVariableList:_,updateSelectedURLTemplateBtn:tt,variableList:C},`${e}`)})),(null===(M=null===(A=q[0])||void 0===A?void 0:A.component)||void 0===M?void 0:M.buttons)&&(null===(N=null===(D=null===(U=q[0])||void 0===U?void 0:U.component)||void 0===D?void 0:D.buttons)||void 0===N?void 0:N.length)>0&&(F!==n.CHATBOT?o(b,{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(d,{backTrackMessage:null===(R=null==Y?void 0:Y.backTrackExtra)||void 0===R?void 0:R[0],setBackTrackMessage:null===(H=null==Y?void 0:Y.backTrackExtra)||void 0===H?void 0:H[1]})),null===(S=null==_?void 0:_.buttons)||void 0===S?void 0:S.map(((t,e)=>{if("QUICK_REPLY"===t.type)return o(g,{variableListIndex:e,QRBoptions:null==j?void 0:j.QRBoptions,button:t,originalVariableList:_,updateSelectedQRBTemplateBtn:ot},`${e}`)})),F===n.CHATBOT&&J&&o(r,{discountCode:null===(P=null==Y?void 0:Y.discountCodeExtra)||void 0===P?void 0:P[0],setDiscountCode:null===(Q=null==Y?void 0:Y.discountCodeExtra)||void 0===Q?void 0:Q[1],variableList:C}),null===(W=null==_?void 0:_.buttons)||void 0===W?void 0:W.map(((t,e)=>{var i,n,a;if("COPY_CODE"===t.type)return o(u,{index:e,variable:{variableName:null!==(i=t.text)&&void 0!==i?i:"",updatedValue:null!==(n=t.buttonVariable)&&void 0!==n?n:"",type:"string",isEditableVariable:!0,index:null!==(a=t.index)&&void 0!==a?a:0},showVariableModal:!0,variableList:et,componentType:"BUTTONS"},e)}))]}))};export{h as default};
+import{jsxs as o,jsx as n}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useState as e,useEffect as i}from"react";import{POD as l}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}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 u from"./EditWhatsAppTemplateMediaV2.js";import m from"./VariableConnector.js";import{Container as v}from"./VariableConnectorsPanel.js";import b from"./VariableConnectorWhatsApp.js";import g from"./VariableEditorHeader.js";import f from"./WhatsAppTemplateCardButtonV2.js";const h=h=>{let{template:C,onTemplateChange:j,whatsappSpecificPickerMeta:O,showVariableModal:y,variableList:T,variableListForImage:x,discountCode:V,setDiscountCode:B}=h;var L,E,U,I,k,w,R,N,A,P,S,_,D,M;const{originalVariableList:Q,pod:q,extras:Y,selectedCarouselIndex:H,isProductCarouselType:K}=s(),{descriptionComponents:W,urlBtns:$,qrbBtns:F,imageComponent:X,bodyVariables:z,headerVariables:G}=d(C),[J,Z]=e(!1),[oo,no]=e(-1===H?{descriptionComponents:W,urlBtns:$,qrbBtns:F,imageComponent:X,bodyVariables:z,headerVariables:G}:{}),[to,eo]=e(!1);function io(o,n,e){var i,l,s,a,d,r,p,c;const u=null!=H&&H>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[H]}:Object.assign({},C),m="custom"===n&&"string"==typeof o?o:"string"!=typeof o?o.defaultValue:"";if(null!=H&&H>-1&&K){const o=Object.assign({},C).components.map((o=>{var n;return"CAROUSEL"===o.type?Object.assign(Object.assign({},o),{cards:null===(n=o.cards)||void 0===n?void 0:n.map((o=>Object.assign(Object.assign({},o),{components:o.components.map((o=>{var n,t,i;if("BUTTONS"===o.type){const l=null===(n=o.buttons)||void 0===n?void 0:n.filter((o=>"URL"===o.type));let s=null!==(t=null==l?void 0:l[e])&&void 0!==t?t:{};s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[m]});const a=null===(i=o.buttons)||void 0===i?void 0:i.map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o));return Object.assign(Object.assign({},o),{buttons:a})}return o}))})))}):o})),n=t(C);return n.components=o,console.log("newTemplate: ",n),void(null==j||j(Object.assign({},n)))}const v=null==u?void 0:u.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==v&&v>-1){const t=null===(s=null==u?void 0:u.components[v].buttons)||void 0===s?void 0:s.filter((o=>"URL"===o.type));if((null==t?void 0:t.length)>0){const i="custom"===n&&"string"==typeof o,l=i?o:"string"!=typeof o?o.defaultValue:"";let s=t[e];s=Object.assign(Object.assign({},s),{url:"https://d.bik.ai/{{1}}",example:[l]}),console.log("templateCopy test: ",e,s,n,o);const c=[...null!==(r=null===(d=null===(a=u.components)||void 0===a?void 0:a[v])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"URL"===o.type&&(null==o?void 0:o.text)===(null==s?void 0:s.text)?s:o)),m=Object.assign(Object.assign({},u.components[v]),{buttons:c}),b=null===(p=u.mapping)||void 0===p?void 0:p.buttons;b&&b.length>0&&(b[e]=i?"((customBtnPlaceholder))":"string"!=typeof o?o.placeHolder:"");const g=Object.assign(Object.assign({},u.mapping),{buttons:b});u.mapping=g;const f=[...u.components];f[v]=m,u.components=f}}if("string"!=typeof o){"checkout.checkoutUrl"===(null===(c=o.placeHolder)||void 0===c?void 0:c.slice(2,-2))?Z(!0):(Z(!1),null==B||B(""))}if(null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=u.components,o.mapping.cards[H]=u.mapping,console.log("templateCopy: ",o),null==j||j(Object.assign({},o))}else null==j||j(u)}function lo(o,n,e){var i,l,s,a,d,r;const p=null!=H&&H>-1?{components:null===(i=Object.assign({},C).components[1].cards)||void 0===i?void 0:i[H].components,mapping:null===(l=Object.assign({},C).mapping.cards)||void 0===l?void 0:l[H]}:Object.assign({},C);if(null!=H&&H>-1&&K){const n=Object.assign({},C).components.map((n=>{var t;return"CAROUSEL"===n.type?Object.assign(Object.assign({},n),{cards:null===(t=n.cards)||void 0===t?void 0:t.map((n=>Object.assign(Object.assign({},n),{components:n.components.map((n=>{var t,i,l;if("BUTTONS"===n.type){const s=null===(t=n.buttons)||void 0===t?void 0:t.filter((o=>"QUICK_REPLY"===o.type));let a=null!==(i=null==s?void 0:s[e])&&void 0!==i?i:{};a=Object.assign(Object.assign({},a),{flowId:o.flowId,flowName:o.flowName});const d=null===(l=n.buttons)||void 0===l?void 0:l.map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==a?void 0:a.text)?a:o));return Object.assign(Object.assign({},n),{buttons:d})}return n}))})))}):n})),i=t(C);return i.components=n,void(null==j||j(Object.assign({},i)))}const c=null==p?void 0:p.components.findIndex((o=>"BUTTONS"===o.type));if(void 0!==c&&c>-1){const n=null===(s=null==p?void 0:p.components[c].buttons)||void 0===s?void 0:s.filter((o=>"QUICK_REPLY"===o.type));if(n){let t=n[e];t=Object.assign(Object.assign({},t),{flowId:o.flowId,flowName:o.flowName});const i=[...null!==(r=null===(d=null===(a=p.components)||void 0===a?void 0:a[c])||void 0===d?void 0:d.buttons)&&void 0!==r?r:[]].map((o=>"QUICK_REPLY"===o.type&&(null==o?void 0:o.text)===(null==t?void 0:t.text)?t:o)),l=Object.assign(Object.assign({},p.components[c]),{buttons:i}),s=[...p.components];s[c]=l,p.components=s}}if(null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=p.components,o.mapping.cards[H]=p.mapping,console.log("templateCopy 2: ",o),null==j||j(Object.assign({},o))}else null==j||j(p)}i((()=>{var o,n;if(null===(o=C.mapping.buttons)||void 0===o?void 0:o.find((o=>"checkout.checkoutUrl"===o.slice(2,-2))))Z(!0);else{Z(!1);const o=null===(n=null==Y?void 0:Y.discountCodeExtra)||void 0===n?void 0:n[1];null==o||o("")}}),[C]),i((()=>{console.log("templateComponentData: ",oo)}),[oo]),i((()=>{var o,n,t,e;if(null!=H&&H>-1){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[H].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[H]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);no({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c})}else if(null!=H&&-1===H){const{descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l}=d(C);no({descriptionComponents:o,urlBtns:n,qrbBtns:t,imageComponent:e,bodyVariables:i,headerVariables:l})}}),[H]),i((()=>{var o,n,t,e;if(console.log("right panel selectedCarouselIndex: ",H),null!=H&&H>-1&&to){const i={components:null===(n=null===(o=C.components[1])||void 0===o?void 0:o.cards)||void 0===n?void 0:n[H].components,mapping:null===(e=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.cards)||void 0===e?void 0:e[H]},{descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}=d(i);no({descriptionComponents:l,urlBtns:s,qrbBtns:a,imageComponent:r,bodyVariables:p,headerVariables:c}),eo(!1)}}),[to]);const so=a({variableList:T,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom Text",variableValue:"{{custom.text}}"});return o(v,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:[!!oo.imageComponent&&!K&&n(c,{children:n(u,{whatsappSpecificPickerMeta:O,mediaComponent:oo.imageComponent,updateTemplateImageUrl:function(o,n){var e,i,l,s,a;let d;d=null!=H&&H>-1?{components:null===(i=null===(e=C.components[1])||void 0===e?void 0:e.cards)||void 0===i?void 0:i[H].components,mapping:null===(s=null===(l=null==C?void 0:C.mapping)||void 0===l?void 0:l.cards)||void 0===s?void 0:s[H]}: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 t=Object.assign(Object.assign({},d.components[r]),{format:n,example:{header_handle:[o]}}),e=[...d.components];e[r]=t,d=Object.assign(Object.assign({},d),{components:e})}if(d.mapping&&(d.mapping=Object.assign(Object.assign({},d.mapping),{header:void 0})),null!=H&&H>-1){const o=t(C);o.components[1].cards[H].components=d.components,o.mapping.cards[H]=d.mapping,null==j||j(Object.assign({},o)),eo(!0)}else null==j||j(Object.assign({},d))},template:C,variableListForImage:x})}),(oo.bodyVariables.length>0||oo.headerVariables.length>0)&&n(g,{containerStyle:{paddingTop:oo.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===(L=oo.descriptionComponents)||void 0===L?void 0:L.map(((o,t)=>n(b,{originalVariableList:null!=H&&H>-1?Q.cards[H]:Q,type:o.type,descriptionComponent:o.component,showVariableModal:y,variableList:T},t))),(null===(U=null===(E=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===E?void 0:E.filter((o=>"URL"===o.type)))||void 0===U?void 0:U.length)>0&&n(g,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(k=null===(I=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===I?void 0:I.filter((o=>"URL"===o.type)))||void 0===k?void 0:k.map(((o,t)=>{if("URL"===o.type)return n(f,{variableListIndex:t,CTAoptions:null==O?void 0:O.CTAoptions,button:o,currentVariableList:null!=H&&H>-1?Q.cards[H]:Q,updateSelectedURLTemplateBtn:io,variableList:T},`${t}_${H}`)})),(null===(R=null===(w=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===w?void 0:w.filter((o=>"QUICK_REPLY"===o.type)))||void 0===R?void 0:R.length)>0&&(q!==l.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===(N=null==Y?void 0:Y.backTrackExtra)||void 0===N?void 0:N[0],setBackTrackMessage:null===(A=null==Y?void 0:Y.backTrackExtra)||void 0===A?void 0:A[1]})),null===(S=null===(P=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===P?void 0:P.filter((o=>"QUICK_REPLY"===o.type)))||void 0===S?void 0:S.map(((o,t)=>{if("QUICK_REPLY"===o.type)return n(f,{variableListIndex:t,QRBoptions:null==O?void 0:O.QRBoptions,button:o,currentVariableList:null!=H&&H>-1?Q.cards[H]:Q,updateSelectedQRBTemplateBtn:lo},`${t}_${H}`)})),q===l.CHATBOT&&J&&n(p,{discountCode:null===(_=null==Y?void 0:Y.discountCodeExtra)||void 0===_?void 0:_[0],setDiscountCode:null===(D=null==Y?void 0:Y.discountCodeExtra)||void 0===D?void 0:D[1],variableList:T}),null===(M=null!=H&&H>-1?Q.cards[H].buttons:null==Q?void 0:Q.buttons)||void 0===M?void 0:M.map(((o,t)=>{var e,i,l;if("COPY_CODE"===o.type)return n(m,{index:t,variable:{variableName:null!==(e=o.text)&&void 0!==e?e:"",updatedValue:null!==(i=o.buttonVariable)&&void 0!==i?i:"",type:"string",isEditableVariable:!0,index:null!==(l=o.index)&&void 0!==l?l:0},showVariableModal:!0,variableList:so,componentType:"BUTTONS"},t)}))]}))};export{h 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/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{format as a}from"date-fns";import{useState as i,useEffect as n}from"react";import o from"styled-components";import{AddVariableV2SideModal as s}from"../../add-variableV2/AddVariableV2SideModal.js";import{CustomDateTime as u}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as d}from"../../dropdown/Dropdown.js";import{Input as r}from"../../input/Input.js";import{truncate as c}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as p}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as m}from"../../template-preview/models/Channels.js";import{POD as v}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as b,BodyPrimary as g}from"../../TypographyStyle.js";import h from"../../../utils/StringUtils.js";import{COLORS as x}from"../../../constants/Theme.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as j}from"../utils/getVariableNameEmail.js";const O=o.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 n}from"lodash";import{useState as i,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 c}from"../../dropdown/Dropdown.js";import{Input as r}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 O}from"../../TypographyStyle.js";import j from"../../../utils/StringUtils.js";import{COLORS as h}from"../../../constants/Theme.js";import{useTemplateModalContext as x}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as f}from"../utils/getVariableNameEmail.js";const y=s.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===m.EMAIL?x.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===v.EMAIL?h.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,_={value:"custom_link",label:"Custom URL"},y={value:"custom_text",label:"Custom text"},T={value:"static_expiry",label:"Static Expiry"},k=o=>{let{onFocus:k,variable:V,index:A,showVariableModal:E,variableList:S,setShowDiscountCheckBox:w,componentType:P,CTAoptions:C}=o;var B,D;const[L,N]=i(!1),[H,U]=i(""),[M,W]=i([]),[R,$]=i(),[I,z]=i(!1),[Y,Z]=i(!1),{device:G,channel:q,isError:F,originalVariableList:K,template:J,templateSelectionTriggered:Q,setTemplate:X,setDisplayContent:ee,setOriginalVariableList:te,globalNormalizedPlaceholders:le,enabledCustomText:ae,pod:ie}=f();function ne(e,t){var l,a,i;const n=e;U(""),$(n),q===m.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value&&"static_expiry"!==n.value?(se(null!==(l=n.value)&&void 0!==l?l:"","string"),null==ue||ue(null!==(a=V.index)&&void 0!==a?a:0,n.value,!0)):(null==ue||ue(null!==(i=V.index)&&void 0!==i?i:0,H,!0,n.value),se("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?se(n.value,"url"===n.bikPlaceholderType?"link":"string"):(U(""),se("",n.value))}function oe(e,t){var l;U(t);const a="custom_link"===(null==R?void 0:R.value)&&t?t.includes("https")?t:`https://${t}`:t;se(a,"static_expiry"===e?"string":e),q===m.WHATSAPP&&(null==ue||ue(null!==(l=V.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function se(e,t){var l,a,i,n;const o="custom_link"===t?"link":"custom_text"===t?"string":t;if(q!==m.WHATSAPP){const a=j(A+1),i=null===document||void 0===document?void 0:document.getElementById("mobile"===G?"template_html_mobile":"template_html_desktop"),n=q===m.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:V.variableName);const s=K.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t));null==te||te(s)}if(q===m.WHATSAPP){const l=K;let s=l.body,u=l.header,d=l.buttons;"BODY"===P?s=null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"HEADER"===P?u=null===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===A?Object.assign(Object.assign({},t),{type:o,updatedValue:e}):t)):"BUTTONS"===P&&(d=null===(n=l.buttons)||void 0===n?void 0:n.map(((l,a)=>a===A?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:[e]}):l))),null==te||te((e=>Object.assign(Object.assign({},e),{header:u,body:s,buttons:d})))}}function ue(e,t,l,a){var i,n,o,s;const u=Object.assign({},J),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"===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(u.components=d,l)if("BODY"===P&&(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))});else if("HEADER"===P&&(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))});else if("BUTTONS"===P&&(null===(s=null==u?void 0:u.mapping)||void 0===s?void 0:s.buttons)){let l=-1,i=-1;d.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))})))})),u.mapping=Object.assign(Object.assign({},u.mapping),{buttons:u.mapping.buttons.map(((e,l)=>l===i?"custom_link"===a?"((customPlaceholderName))":t:e))})}null==X||X(Object.assign({},u))}return n((()=>{L&&(null==k||k())}),[L]),n((()=>{!function(){var e,t,l,a,i;const n="mobile"===G?"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);q===m.EMAIL&&(null==ee||ee(s))}()}),[Q]),n((()=>{var e,t;const l=[];let a=[];if(q!==m.MESSAGE||ae){"link"===(null==V?void 0:V.type)?(l.push({label:"",options:[_,y]}),$(_)):"date_time"===(null==V?void 0:V.type)?(l.push({label:"",options:[_,y]}),$(T)):(l.push({label:"",options:[_,y,T]}),$(y));const e=null!=le?le:[];W([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:h.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!=le?le:[];W([{label:"",options:[y,_]},...e]),a=[{label:"",options:[y,_]},...e]}if((q===m.WHATSAPP||q===m.EMAIL||q===m.MESSAGE)&&V.updatedValue)if(p.test(V.updatedValue)&&q===m.WHATSAPP||V.updatedValue.startsWith("{{")&&q!==m.WHATSAPP){const e=function(e,t,l){var a;let i={label:"",value:""};const n=l===m.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(E){let t=e.updatedValue;if(ie===v.CHATBOT&&"BUTTONS"===P){const l=null==C?void 0:C.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}(V,a,q);e.value&&$(e)}else"date_time"===V.type?($(T),U(V.updatedValue),ue(null!==(e=V.index)&&void 0!==e?e:0,V.updatedValue)):(null===(t=V.updatedValue)||void 0===t?void 0:t.startsWith("https"))?($(_),U(V.updatedValue.split("https://")[1])):($(y),U(V.updatedValue))}),[]),n((()=>{G&&R&&H&&setTimeout((()=>{se("custom_link"===(null==R?void 0:R.value)&&H?H.includes("https")?H:`https://${H}`:H,R.value)}),100)}),[G]),n((()=>{!Y&&R&&V.updatedValue&&setTimeout((()=>{se("custom_link"===(null==R?void 0:R.value)&&V.updatedValue?V.updatedValue.includes("https")?V.updatedValue:`https://${V.updatedValue}`:V.updatedValue,R.value),Z(!0)}),100)}),[R]),e(O,Object.assign({channel:q,focused:L,onMouseEnter:()=>N(!0),onMouseLeave:()=>N(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(b,Object.assign({style:{color:F&&!R?x.content.negative:x.content.primary}},{children:[null===(B=V.variableName)||void 0===B?void 0:B.replace("{{","").replace("}}","")," ","link"===(null==V?void 0:V.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:E?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(g,{children:c(null!==(D=null==R?void 0:R.label)&&void 0!==D?D:"",20,!0)}),t(l,{onClick:()=>{z(!I)},width:24,height:24,color:x.content.primary})]})):t(d,{options:M,isSearchable:!1,onSelect:ne,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(r,{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}-${A}`,value:H,errorMessage:F?H&&0!==H.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://${H.trim()}`)&&0!==H.trim().length?"custom_link"!==R.value&&H.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"===V.type||"custom_link"===R.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{oe(R.value,e)}}),"static_expiry"===(null==R?void 0:R.value)&&t(u,{placement:"auto",time:a(H?new Date(H):new Date,"hh:mm a"),date:H?new Date(H):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{oe("static_expiry",e.toISOString())}}),I&&t(s,{zIndex:2e3,data:null!=S?S:[],showVariable:I,setShowVariable:z,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?ne({label:e.displayName,selected:!0,value:"static_expiry"}):ne({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{O as Container,k as default};
+`,_={value:"custom_link",label:"Custom URL"},T={value:"custom_text",label:"Custom text"},V={value:"static_expiry",label:"Static Expiry"},k=s=>{let{onFocus:k,variable:A,index:E,showVariableModal:S,variableList:C,setShowDiscountCheckBox:w,componentType:P,CTAoptions:B}=s;var L,D;const[N,H]=i(!1),[U,M]=i(""),[W,R]=i([]),[$,I]=i(),[z,Y]=i(!1),[Z,G]=i(!1),{device:q,channel:F,isError:K,originalVariableList:J,template:Q,templateSelectionTriggered:X,setTemplate:ee,setDisplayContent:te,setOriginalVariableList:le,globalNormalizedPlaceholders:ae,enabledCustomText:ne,pod:ie,selectedCarouselIndex:oe,isProductCarouselType:se}=x();function ue(){var e,t;const l=[];let a=[];if(F!==v.MESSAGE||ne){"link"===(null==A?void 0:A.type)?(l.push({label:"",options:[_,T]}),I(_)):"date_time"===(null==A?void 0:A.type)?(l.push({label:"",options:[_,T]}),I(V)):(l.push({label:"",options:[_,T,V]}),I(T));const e=null!=ae?ae:[];R([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:j.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:[];R([{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 n={label:"",value:""};const i=l===v.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(S){let t=e.updatedValue;if(ie===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)}n={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())===i.trim()&&(n=e)}))}));return n}(A,a,F);e.value&&I(e)}else"date_time"===A.type?(I(V),M(A.updatedValue),pe(null!==(e=A.index)&&void 0!==e?e:0,A.updatedValue)):(null===(t=A.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(I(_),M(A.updatedValue.split("https://")[1])):(I(T),M(A.updatedValue))}function de(e,t){var l,a,n;const i=e;M(""),I(i),F===v.WHATSAPP?"custom_text"!==i.value&&"custom_link"!==i.value&&"static_expiry"!==i.value?(re(null!==(l=i.value)&&void 0!==l?l:"","string"),null==pe||pe(null!==(a=A.index)&&void 0!==a?a:0,i.value,!0)):(null==pe||pe(null!==(n=A.index)&&void 0!==n?n:0,U,!0,i.value),re("","url"===i.bikPlaceholderType?"link":"string")):"custom_text"!==i.value&&"custom_link"!==i.value?re(i.value,"url"===i.bikPlaceholderType?"link":"string"):(M(""),re("",i.value))}function ce(e,t){var l;M(t);const a="custom_link"===(null==$?void 0:$.value)&&t?t.includes("https")?t:`https://${t}`:t;re(a,"static_expiry"===e?"string":e),F===v.WHATSAPP&&(null==pe||pe(null!==(l=A.index)&&void 0!==l?l:0,a,"custom_link"===e,e))}function re(e,t){var l,a,i,o;const s="custom_link"===t?"link":"custom_text"===t?"string":t;if(F!==v.WHATSAPP){const a=f(E+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===q?"template_html_mobile":"template_html_desktop"),i=F===v.EMAIL?null===(l=null==n?void 0:n.contentWindow)||void 0===l?void 0:l.document.getElementById(a):document.getElementById(a);i&&(i.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){if(null!=oe&&oe>-1&&se){const t=Object.assign({},J).cards.map(((t,l)=>{var a;return Object.assign(Object.assign({},t),{body:null===(a=t.body)||void 0===a?void 0:a.map(((l,a)=>E===a?Object.assign(Object.assign({},l),{type:s,updatedValue:e}):t))})}));return void(null==le||le((e=>Object.assign(Object.assign({},e),{cards:t}))))}const l=null!=oe&&oe>-1?J.cards[oe]:J;let u=l.body,d=l.header,c=l.buttons;if("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===(i=l.header)||void 0===i?void 0:i.map(((t,l)=>l===E?Object.assign(Object.assign({},t),{type:s,updatedValue:e}):t)):"BUTTONS"===P&&(c=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=n(J.cards);e[oe]={header:d,body:u,buttons:c},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:c})))}}function pe(e,t,l,a){var i,o,s,u,d,c,r;if(null!=oe&&oe>-1&&se){const o=Object.assign({},Q).components.map((l=>{var a;return"CAROUSEL"===l.type?Object.assign(Object.assign({},l),{cards:null===(a=l.cards)||void 0===a?void 0:a.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var a,n,i,o,s;if("BODY"!==l.type)return l;if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const a=[...null!==(s=null===(o=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const n=Object.assign(Object.assign({},l.example),{body_text:[a]});return Object.assign(Object.assign({},l),{example:n})}}))})))}):l})),s=n(Q);if(l){const l=null===(i=Object.assign({},Q).mapping.cards)||void 0===i?void 0:i.map((l=>{var n;return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:t:l))})}));s.mapping.cards=l}return s.components=o,console.log("mappingComponent templateCopy: ",s),void(null==ee||ee(s))}const p=null!=oe&&oe>-1?{components:null===(o=Object.assign({},Q).components[1].cards)||void 0===o?void 0:o[oe].components,mapping:null===(s=Object.assign({},Q).mapping.cards)||void 0===s?void 0:s[oe]}:Object.assign({},Q),m=null===(u=null==p?void 0:p.components)||void 0===u?void 0:u.map((l=>{var a,n,i,o,s,u,d,c,r,p;const m=Object.assign({},l);if("BODY"===l.type&&"BODY"===P){if(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]){const l=[...null!==(s=null===(o=null===(i=m.example)||void 0===i?void 0:i.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!==(c=null===(d=m.example)||void 0===d?void 0:d.header_text)&&void 0!==c?c:[]];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===(r=l.buttons)||void 0===r?void 0:r[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(p.components=m,l)if("BODY"===P&&(null===(d=null==p?void 0:p.mapping)||void 0===d?void 0:d.body))p.mapping=Object.assign(Object.assign({},p.mapping),{body:p.mapping.body.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+10}))`:t:l))});else if("HEADER"===P&&(null===(c=null==p?void 0:p.mapping)||void 0===c?void 0:c.header))p.mapping=Object.assign(Object.assign({},p.mapping),{header:p.mapping.header.map(((l,n)=>e===n?"custom_text"===a?`((editableVariable${n+20}))`:t:l))});else if("BUTTONS"===P&&(null===(r=null==p?void 0:p.mapping)||void 0===r?void 0:r.buttons)){let l=-1,n=-1;m.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&&(n=l))})))})),p.mapping=Object.assign(Object.assign({},p.mapping),{buttons:p.mapping.buttons.map(((e,l)=>l===n?"custom_link"===a?"((customPlaceholderName))":t:e))})}if(null!=oe&&oe>-1&&Q){const e=n(Q);e.components[1].cards[oe].components=p.components,e.mapping.cards[oe]=p.mapping,null==ee||ee(e)}else null==ee||ee(Object.assign({},p))}return o((()=>{N&&(null==k||k())}),[N]),o((()=>{!function(){var e,t,l,a,n;const i="mobile"===q?"template_html_mobile":"template_html_desktop",o=document.getElementById(i),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===(n=null==o?void 0:o.contentWindow)||void 0===n?void 0:n.document.head.innerHTML);F===v.EMAIL&&(null==te||te(s))}()}),[X]),o((()=>{ue()}),[]),o((()=>{ue()}),[oe]),o((()=>{q&&$&&U&&setTimeout((()=>{re("custom_link"===(null==$?void 0:$.value)&&U?U.includes("https")?U:`https://${U}`:U,$.value)}),100)}),[q]),o((()=>{!Z&&$&&A.updatedValue&&setTimeout((()=>{re("custom_link"===(null==$?void 0:$.value)&&A.updatedValue?A.updatedValue.includes("https")?A.updatedValue:`https://${A.updatedValue}`:A.updatedValue,$.value),G(!0)}),100)}),[$]),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&&!$?h.content.negative:h.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==$?void 0:$.label)?"space-between":"flex-end"}},{children:[t(O,Object.assign({numberOfLines:1},{children:ie===b.CHATBOT?null==$?void 0:$.value:p(null!==(D=null==$?void 0:$.label)&&void 0!==D?D:"",20,!0)})),t(l,{onClick:()=>{Y(!z)},width:24,height:24,color:h.content.primary})]})):t(c,{options:W,isSearchable:!1,onSelect:de,defaultOptions:$?[Object.assign(Object.assign({},$),{selected:!0})]:[]})})),("custom_text"===(null==$?void 0:$.value)||"custom_link"===(null==$?void 0:$.value))&&t(r,{labelText:"custom_text"===(null==$?void 0:$.value)?"Custom text value":"custom_link"===(null==$?void 0:$.value)?"Custom URL value":"",id:`variable-value-${null==$?void 0:$.value}-${E}`,value:U,errorMessage:K?U&&0!==U.trim().length?"custom_link"!==$.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"!==$.value&&U.length>30?"Length cannot be more than 30":"BUTTONS"===P&&"custom_link"!==$.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==$?void 0:$.value)?2e3:"BUTTONS"===P?15:30,noKeyDownChange:!0,prefixText:"custom_link"===(null==$?void 0:$.value)?"https://":"",placeholder:"link"===A.type||"custom_link"===$.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ce($.value,e)}}),"static_expiry"===(null==$?void 0:$.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=>{ce("static_expiry",e.toISOString())}}),z&&t(u,{zIndex:2e3,data:null!=C?C:[],showVariable:z,setShowVariable:Y,placeholder:"Add a variable",customTrigger:e=>{null==w||w(!1),"{{custom.url}}"===e.actualValue?de({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?de({label:e.displayName,selected:!0,value:"static_expiry"}):de({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{y as Container,k 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 i,Fragment as a}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as l}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import{useAdditionalVariables as d}from"../custom-hooks/useAdditionalVariables.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:p,type:m,showVariableModal:b,variableList:c}=s;var v,y,x,h,u,f;const{originalVariableList:V,disableEditVariable:g}=o(),E=d({variableList:c,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});return"BODY"===p.type?e("div",{children:null===(v=null==V?void 0:V.body)||void 0===v?void 0:v.map(((a,o)=>g||!a.isEditableVariable?i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(l,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===m?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o):e(n,{index:o,variable:a,showVariableModal:b,variableList:c,componentType:p.type},`${o}-${a.index}`)))}):"HEADER"===p.type?e("div",{children:null===(y=null==V?void 0:V.header)||void 0===y?void 0:y.map(((a,o)=>a.isEditableVariable?e(n,{index:o,variable:a,showVariableModal:b,variableList:c,componentType:p.type},`${o}-${a.index}`):i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(l,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===m?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o)))}):"limited_time_offer"===p.type?e("div",{children:e(n,{index:0,variable:{variableName:null!==(h=null===(x=null==p?void 0:p.limited_time_offer)||void 0===x?void 0:x.text)&&void 0!==h?h:"Expires after",updatedValue:null!==(f=null===(u=p.example)||void 0===u?void 0:u.limited_time_offer)&&void 0!==f?f:(new Date).toISOString(),type:"date_time",isEditableVariable:!0,index:0},showVariableModal:b,variableList:E,componentType:p.type},`${p.type}`)}):e(a,{})};export{s as default};
+import{jsx as e,jsxs as i,Fragment as a}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as l}from"../../TypographyStyle.js";import{COLORS as r}from"../../../constants/Theme.js";import{useTemplateModalContext as o}from"../context/templateModalContext.js";import{useAdditionalVariables as d}from"../custom-hooks/useAdditionalVariables.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:p,type:m,showVariableModal:b,variableList:c}=s;var v,y,u,x,h,f;const{originalVariableList:V,disableEditVariable:g,selectedCarouselIndex:E}=o(),j=d({variableList:c,categoryDisplayName:"Static Variables",variableDisplayName:"Static Expiry",variableValue:"{{static.expiry}}"});return"BODY"===p.type?e("div",{children:null===(v=null!=E&&E>-1?V.cards[E].body:null==V?void 0:V.body)||void 0===v?void 0:v.map(((a,o)=>g||!a.isEditableVariable?i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(l,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===m?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o):e(n,{index:o,variable:a,showVariableModal:b,variableList:c,componentType:p.type},`${o}-${a.index}`)))}):"HEADER"===p.type?e("div",{children:null===(y=null!=E&&E>-1?V.cards[E].header:null==V?void 0:V.header)||void 0===y?void 0:y.map(((a,o)=>a.isEditableVariable?e(n,{index:o,variable:a,showVariableModal:b,variableList:c,componentType:p.type},`${o}-${a.index}`):i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(l,Object.assign({style:{color:r.content.primary}},{children:["HEADER"===m?"Header":""," Locked variable ",o+1]})),e(t,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]}),o)))}):"limited_time_offer"===p.type?e("div",{children:e(n,{index:0,variable:{variableName:null!==(x=null===(u=null==p?void 0:p.limited_time_offer)||void 0===u?void 0:u.text)&&void 0!==x?x:"Expires after",updatedValue:null!==(f=null===(h=p.example)||void 0===h?void 0:h.limited_time_offer)&&void 0!==f?f:(new Date).toISOString(),type:"date_time",isEditableVariable:!0,index:0},showVariableModal:b,variableList:j,componentType:p.type},`${p.type}`)}):e(a,{})};export{s as default};

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

@@ -5,7 +5,7 @@ import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAp
 export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
 export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
 export interface WhatsAppTemplateCardButtonV2Props {
-    originalVariableList: WhatsAppTemplateVariables;
+    currentVariableList: WhatsAppTemplateVariables;
     updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
     updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
     button: TEMPLATE_BUTTON;
@@ -14,5 +14,5 @@ export interface WhatsAppTemplateCardButtonV2Props {
     variableList?: VariableListInterfaceV2[];
     variableListIndex: number;
 }
-declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, currentVariableList, 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,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};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as a}from"react";import{Dropdown as s}from"../../dropdown/Dropdown.js";import{Input as n}from"../../input/Input.js";import{editableVarPattern as o}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as i}from"../../template-preview/models/TemplateMeta.js";import{POD as r}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as c}from"../../TypographyStyle.js";import{COLORS as u}from"../../../constants/Theme.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import{useAdditionalVariables as d}from"../custom-hooks/useAdditionalVariables.js";import{validateIsUrl as p}from"../utils/validateIsUrl.js";import m,{Container as g}from"./VariableConnector.js";const j=j=>{let{variableListIndex:f,button:v,updateSelectedURLTemplateBtn:O,updateSelectedQRBTemplateBtn:y,currentVariableList:x,CTAoptions:L,QRBoptions:h,variableList:R}=j;var U,V,w,C;const[T,I]=l(""),[N,E]=l(),H=d({variableList:R,categoryDisplayName:"Custom Variables",variableDisplayName:"Custom URL",variableValue:"{{custom.url}}"}),{isError:P,disableEditVariable:B,pod:Q,selectedCarouselIndex:_,originalVariableList:S,setOriginalVariableList:A,isProductCarouselType:K}=b();function Y(e){if(I(e),null!=_&&_>-1&&K){const t=S;if("URL"===v.type){const l=t.cards.map((t=>{let l=t.buttons.filter((e=>"URL"===e.type))[f];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const a=t.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==l?void 0:l.text)?l:e));return Object.assign(Object.assign({},t),{buttons:a})}));null==A||A((e=>Object.assign(Object.assign({},e),{cards:l}))),null==O||O(`https://${e}`,"custom",f)}return}let t=x.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]});const l=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),a=Object.assign({},null!=_&&_>-1?S.cards[_]:S);if(a.buttons=l,null!=_&&_>-1){const e=[...S.cards];e[_]=a,null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==A||A((e=>Object.assign(Object.assign({},e),{buttons:[...l]})));null==O||O(`https://${e}`,"custom",f)}return a((()=>{var e;if(v.buttonVariable&&o.test(v.buttonVariable))E(i),I((null===(e=v.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===v.type?L:h;e="URL"===v.type?t.findIndex((e=>e.placeHolder===v.buttonVariable)):t.findIndex((e=>e.label===v.flowName)),e>-1&&E(t[e])}}),[]),Q!==r.CHATBOT?e(g,{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(c,Object.assign({style:{color:u.content.primary}},{children:[v.text," button"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:t(s,{disabled:B,options:"URL"===v.type?L:h,isSearchable:!1,onSelect:function(e,t){const l=e;E(l);const a=("URL"===v.type?L:h).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){if(null!=_&&_>-1&&K){const e=S;if("URL"===v.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder});const a=e.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:a})}));null==O||O({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f),null==A||A((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll: ",t)}else if("QUICK_REPLY"===v.type){const t=e.cards.map((e=>{let t=e.buttons.filter((e=>"QUICK_REPLY"===e.type))[f];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value});const a=e.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e));return Object.assign(Object.assign({},e),{buttons:a})}));null==y||y({flowName:l.label,flowId:l.value},"placeholder",f),null==A||A((e=>Object.assign(Object.assign({},e),{cards:t}))),console.log("newList ll uui: ",t)}return}let e;if("URL"===v.type){let t=x.buttons.filter((e=>"URL"===e.type))[f];t=Object.assign(Object.assign({},t),{buttonVariable:l.placeHolder}),e=x.buttons.map((e=>"URL"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==O||O({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f)}else{let t=x.buttons.filter((e=>"QUICK_REPLY"===e.type))[f];t=Object.assign(Object.assign({},t),{flowName:l.label,flowId:l.value}),e=x.buttons.map((e=>"QUICK_REPLY"===e.type&&(null==e?void 0:e.text)===(null==t?void 0:t.text)?t:e)),null==y||y({flowName:l.label,flowId:l.value},"placeholder",f)}console.log("templateCopy updatedVariables: ",e);const t=Object.assign({},null!=_&&_>-1?S.cards[_]:S);if(t.buttons=e,null!=_&&_>-1){const e=[...S.cards];e[_]=t,null==A||A((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==A||A((t=>Object.assign(Object.assign({},t),{buttons:[...e]})))}else Y("")},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(n,{state:B?"disabled":"none",errorMessage:P?T?p(T)?"":"Enter valid URL":"Required field":"",value:T,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):t(m,{index:f,variable:{variableName:null!==(U=v.text)&&void 0!==U?U:"",updatedValue:"((customPlaceholderName))"===v.buttonVariable?`${null===(V=v.example)||void 0===V?void 0:V[0]}`:null!==(w=v.buttonVariable)&&void 0!==w?w:"",type:"link",isEditableVariable:!0,index:null!==(C=v.index)&&void 0!==C?C:0},showVariableModal:!0,componentType:"BUTTONS",variableList:H,CTAoptions:L})};export{j as default};

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,7 @@ export interface TemplatePreviewProps {
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
     showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
 }
-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, isWhatsappCarousel, }: 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 t,Fragment as l}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:h,whatsAppSpecificMeta:v,templateCreationsInfo:C,hideHeader:S,size:b,onlyTemplateContent:y,emailSpecificMeta:g,smsSpecificMeta:j,showSampleValues:T,carouselCardIndex:f,isWhatsappCarousel:w}=m;var x,W;const{setSelectedCarouselIndex:H}=a();return h===s.SMS?e("div",Object.assign({style:Object.assign({marginTop:C?16:0,border:C?`1px solid ${o.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(d,{template:u,hideHeader:S,onlyTemplateContent:y,size:null!=b?b:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):h===s.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:C?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: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})})):h===s.WHATSAPP?t("div",Object.assign({style:Object.assign(Object.assign({},null==v?void 0:v.templateContainerStyles),C?c.WhatsAppWrapper:{}),onClick:()=>{H&&w&&H(null!=f?f:-1)}},{children:[C?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:i.convertToTitleCase(null!==(x=null==u?void 0:u.label)&&void 0!==x?x:"")})})):e(l,{}),e(p,{showSampleValues:T,showHeader:null==v?void 0:v.showWhatsAppHeader,extras:null==v?void 0:v.whatsAppExtras,template:u,size:C?"small":null!=b?b:"large",containerStyle:Object.assign({borderWidth:C?0:1,borderTopWidth:1},null!==(W=null==v?void 0:v.containerStyle)&&void 0!==W?W:{}),zeroStateComponent:null==v?void 0:v.zeroStateComponent,usePlaceHolderName:null==v?void 0:v.usePlaceHolderName,carouselCardIndex:f,isWhatsappCarousel:w})]})):e(l,{})},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 i from"../../../assets/icons/copy-code-icon.svg.js";import r from"../../../assets/icons/halfRectangle.svg.js";import s from"../../../assets/icons/phone.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import a from"styled-components";import{Tooltip as m}from"../../tooltips/Tooltip.js";import{Caption as p,BodySecondary as d}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";import{VariableEditorHelper as h}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as c,ACTIONS_TYPES as f}from"../models/TemplateMeta.js";import{ChatBtn as x}from"./ChatBtn.js";import{Container as y,FooterWrapper as T,TimeStamp as g}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as b}from"./MediaCard.js";const v=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/qrb.svg.js";import n from"../../../assets/icons/RedirectToNew.svg.js";import l from"styled-components";import{useTemplateModalContext as m}from"../../template-context-mapper/context/templateModalContext.js";import{Tooltip as p}from"../../tooltips/Tooltip.js";import{Caption as d,BodySecondary as c}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{VariableEditorHelper as f}from"../helpers/VariableEditorHelper.js";import{HEADER_TYPES as x,ACTIONS_TYPES as y}from"../models/TemplateMeta.js";import{ChatBtn as T}from"./ChatBtn.js";import{Container as g,FooterWrapper as u,TimeStamp as C}from"./ChatUI.style.js";import{LimitedTimeOffer as j}from"./LimitedTimeOffer/LimitedTimeOffer.index.js";import{MediaCard as b}from"./MediaCard.js";const v=l.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`,w=a.div`
+`,w=l.div`
 	font-family: 'Inter';
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	padding: 8px 12px 0px;
-	color: ${l.content.primary};
+	color: ${h.content.primary};
 	word-wrap: break-word;
-`,u=a(w)`
+`,O=l(w)`
 	font-weight: 600;
 	margin-bottom: 8px;
-`,L=new h,C=a=>{const{bodyText:l,footerText:h,headerMediaType:C,headerText:E,headerAssetLink:I,headerAssetName:N,quickReplybtn:O,ctaBtn:_,actionTypes:M,extras:R,showHeader:A,imagePreviewStyles:P,size:H,bodyVariableList:S,headerVariableList:U,buttons:k,limitedTimeOfferComponent:z}=a,B=L.format(l,S),V=L.format(E,U),Y={COPY_CODE:i,PHONE_NUMBER:s,URL:n,QUICK_REPLY:()=>t(o,{})};return e(y,{children:[t(v,{children:t(r,{color:"white",height:8,width:8})}),C===c.TEXT?t(u,{dangerouslySetInnerHTML:{__html:V}}):C!==c.NONE?t(b,{headerAssetLink:I,headerAssetName:N,mediaType:C,imagePreviewStyles:C===c.IMAGE?P:{}}):t(o,{}),(null==z?void 0:z.dateTime)?t(j,{text:z.text,dateTime:z.dateTime,code:z.code}):t(o,{}),!!l&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:B}})}),e(T,{children:[t(m,Object.assign({body:null!=h?h:"",placement:"top"},{children:t(g,Object.assign({style:{flex:1}},{children:h}))})),t(g,{children:"16:48"})]}),k&&k.length>0?k.map(((e,o)=>t(x,{text:e.text,Icon:Y[e.type],size:H},o))):M===f.QUICK_REPLY?t("div",{children:null==O?void 0:O.map(((e,o)=>t(x,{text:e.text},o)))}):M===f.CTA_BTN?t("div",{children:null==_?void 0:_.map(((e,o)=>t(x,{textTypography:A?p:d,extraContent:R?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:H},o)))}):t(o,{})]})};export{C as ChatUIV2};
+`,I=new f,L=l=>{const{bodyText:h,footerText:f,headerMediaType:L,headerText:E,headerAssetLink:_,headerAssetName:N,quickReplybtn:M,ctaBtn:P,actionTypes:R,extras:A,showHeader:B,imagePreviewStyles:H,size:S,bodyVariableList:U,headerVariableList:k,buttons:z,limitedTimeOfferComponent:Y,carouselCardIndex:V}=l,q=I.format(h,U),D=I.format(E,k),{isWhatsappCarousel:K,selectedCarouselIndex:Q,isProductCarouselType:W}=m(),G={COPY_CODE:r,PHONE_NUMBER:s,URL:n,QUICK_REPLY:a};return e(g,Object.assign({isCarouselCard:null!=V&&V>-1,showBorder:null!=V&&V===Q||W&&null!=V&&V>-1&&null!=Q&&Q>-1,isWhatsappCarousel:K},{children:[!K&&t(v,{children:t(i,{color:"white",height:8,width:8})}),L===x.TEXT?t(O,{dangerouslySetInnerHTML:{__html:D}}):L!==x.NONE?t(b,{headerAssetLink:_,headerAssetName:N,mediaType:L,imagePreviewStyles:L===x.IMAGE?H:{}}):t(o,{}),(null==Y?void 0:Y.dateTime)?t(j,{text:Y.text,dateTime:Y.dateTime,code:Y.code}):t(o,{}),!!h&&t(o,{children:t(w,{dangerouslySetInnerHTML:{__html:q}})}),e(u,{children:[t(p,Object.assign({body:null!=f?f:"",placement:"top"},{children:t(C,Object.assign({style:{flex:1}},{children:f}))})),t(C,{children:"16:48"})]}),z&&z.length>0?z.map(((e,o)=>t(T,{text:"COPY_CODE"===e.type?"Copy code":e.text,Icon:G[e.type],size:S},o))):R===y.QUICK_REPLY?t("div",{children:null==M?void 0:M.map(((e,o)=>t(T,{text:e.text},o)))}):R===y.CTA_BTN?t("div",{children:null==P?void 0:P.map(((e,o)=>t(T,{textTypography:B?d:c,extraContent:A?e.extra:void 0,placeholder:e.placeholder,text:e.text,Icon:"phoneNumber"===e.type?s:n,size:S},o)))}):t(o,{})]}))};export{L as ChatUIV2};

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

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

@@ -10,5 +10,7 @@ declare const WhatsappTemplatePreview: React.FC<{
     zeroStateComponent?: ReactElement;
     size?: 'small' | 'large';
     showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
 }>;
 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 i}from"react";import{TemplateCreatorHelper as o}from"./helpers/TemplateCreatorHelper.js";import{HEADER_TYPES as a}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:m,showHeader:h,zeroStateComponent:x,size:c,showSampleValues:b}=p;var T,y,w,N,f,k,B,V,A,L,C,S,j,P,g,O,F,H,q,z,R,U;const[W,I]=t(),M=new o,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===(k=null===(f=null==W?void 0:W.ctaBtn)||void 0===f?void 0:f.websiteLinkBtn)||void 0===k?void 0:k.isChecked)&&E.push({type:"website",text:null!==(B=W.ctaBtn.websiteLinkBtn.btnText)&&void 0!==B?B:"",extra:null!==(A=null===(V=W.ctaBtn.websiteLinkBtn)||void 0===V?void 0:V.linkOpens)&&void 0!==A?A:"",placeholder:null!==(L=W.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==L?L:""}),i((()=>{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:h,containerPadding:"large"===c?"16px 56px 12px 16px":"12px 56px 12px 12px",containerStyle:v,textType:"html",bodyText:D.whatsappOnlyFillVariablesValueInBodyText(null!==(F=null==W?void 0:W.bodyText)&&void 0!==F?F:"",null!==(H=null==W?void 0:W.bodyVariables)&&void 0!==H?H:[],m),footerText:null==W?void 0:W.footerText,headerMediaType:(null==W?void 0:W.headerType)||a.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:[],m),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:h,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)||a.NONE,headerText:null==W?void 0:W.headerText,headerAssetLink:null!==(C=null==W?void 0:W.headerAssetLink)&&void 0!==C?C:"",headerAssetName:null!==(S=null==W?void 0:W.headerAssetName)&&void 0!==S?S:"",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!==(P=null===(j=null==W?void 0:W.bodyVariables)||void 0===j?void 0:j.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!==(O=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!==O?O:[],buttons:null==W?void 0:W.allButtons,limitedTimeOfferComponent:null==W?void 0:W.limitedTimeOfferComponent}):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,isWhatsappCarousel:w}=s;var f,B,N,V,k,C,A,L,j,S,F,P,g,O,I,H,U,W,q,z,D,M;const{selectedCarouselIndex:R}=o(),[E,G]=t(),J=new i,K=new r,Q=[];return(null===(B=null===(f=null==E?void 0:E.ctaBtn)||void 0===f?void 0:f.phoneNumber)||void 0===B?void 0:B.isChecked)&&Q.push({type:"phoneNumber",text:null!==(N=E.ctaBtn.phoneNumber.btnText)&&void 0!==N?N:"",extra:null!==(V=E.ctaBtn.phoneNumber.phoneNumber)&&void 0!==V?V:""}),(null===(C=null===(k=null==E?void 0:E.ctaBtn)||void 0===k?void 0:k.websiteLinkBtn)||void 0===C?void 0:C.isChecked)&&Q.push({type:"website",text:null!==(A=E.ctaBtn.websiteLinkBtn.btnText)&&void 0!==A?A:"",extra:null!==(j=null===(L=E.ctaBtn.websiteLinkBtn)||void 0===L?void 0:L.linkOpens)&&void 0!==j?j:"",placeholder:null!==(S=E.ctaBtn.websiteLinkBtn.placeholder)&&void 0!==S?S:""}),a((()=>{u&&J.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{G(Object.assign({},e))}))}),[u,T]),a((()=>{u&&J.parseUITemplateFromDBFormat({dbFormattedTemplate:u,isDuplicate:!1,showSampleValues:T,isV2:!u.htmlContentUrl}).then((e=>{G(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:K.whatsappOnlyFillVariablesValueInBodyText(null!==(U=null==E?void 0:E.bodyText)&&void 0!==U?U:"",null!==(W=null==E?void 0:E.bodyVariables)&&void 0!==W?W:[],h),footerText:null==E?void 0:E.footerText,headerMediaType:(null==E?void 0:E.headerType)||n.NONE,headerText:K.fillVariablesValInBodyText(null!==(q=null==E?void 0:E.headerText)&&void 0!==q?q:"",null!==(z=null==E?void 0:E.headerVariables)&&void 0!==z?z:[],h),headerAssetLink:null!==(D=null==E?void 0:E.headerAssetLink)&&void 0!==D?D:"",headerAssetName:null!==(M=null==E?void 0:E.headerAssetName)&&void 0!==M?M:"",quickReplybtn:null==E?void 0:E.quickReply,ctaBtn:Q,actionTypes:null==E?void 0:E.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==E?void 0:E.bodyText,footerText:null==E?void 0:E.footerText,headerMediaType:(null==E?void 0:E.headerType)||n.NONE,headerText:null==E?void 0:E.headerText,headerAssetLink:null!==(F=null==E?void 0:E.headerAssetLink)&&void 0!==F?F:"",headerAssetName:null!==(P=null==E?void 0:E.headerAssetName)&&void 0!==P?P:"",quickReplybtn:null==E?void 0:E.quickReply,ctaBtn:Q,actionTypes:null==E?void 0:E.actionsType,extras:v,hidePreviewText:!0,imagePreviewStyles:{objectFit:"cover"},carouselCardIndex:y,zeroStateComponent:null!=c?c:e(l,{children:" "}),bodyVariableList:null!==(O=null===(g=null==E?void 0:E.bodyVariables)||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!==O?O:[],headerVariableList:null!==(H=null===(I=null==E?void 0:E.headerVariables)||void 0===I?void 0:I.map((e=>{var l;return{placeholder:e.variableName,value:null!==(l=e.variableVal)&&void 0!==l?l:e.variableName}})))&&void 0!==H?H:[],buttons:null==E?void 0:E.allButtons,limitedTimeOfferComponent:null==E?void 0:E.limitedTimeOfferComponent,isWhatsappCarousel:w}):e(l,{children:c})};export{s as default};