npm - @bikdotai/bik-component-library - Versions diffs - 0.0.444 → 0.0.445-beta.2 - Mend

@bikdotai/bik-component-library 0.0.444 → 0.0.445-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppCarouselTemplateV2.js ADDED Viewed

@@ -0,0 +1,47 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/PlusIcon.js"),i=require("lodash"),s=require("react"),r=require("styled-components"),l=require("../../add-variableV2/AddVariableV2SideModal.js");require("../../../_virtual/_tslib.js"),require("../../add-variableV2/AddVariableV2.styled.js");var a=require("../../button/Button.js"),o=require("../../icon-button/IconButton.js");require("../../input/Input.js"),require("../../tooltips/Tooltip.js");var n=require("../../../constants/Theme.js");require("../../modals/modal.styled.js"),require("../../switch/Switch.js");var d=require("../../TypographyStyle.js"),c=require("../../product-picker-v2/modal.js"),u=require("../context/templateModalContext.js"),p=require("./EditWhatsAppTemplateV2.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var m=require("../../template-preview/models/WhatsAppTemplate.js"),h=require("../../../assets/icons/box.svg.js"),f=require("../../../assets/icons/delete.svg.js"),g=require("../../../assets/icons/edit.svg.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=t=>{const{cardBody:i,deleteItem:s,editItem:r}=t;return e.jsxs(y,Object.assign({width:"100%"},{children:[e.jsx("div",Object.assign({style:{width:36,height:36}},{children:e.jsx(h.default,{})})),e.jsx("div",Object.assign({className:"card-body"},{children:e.jsx(d.TitleRegular,{children:i})})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:[r&&e.jsx(o.IconButton,{style:{display:"flex"},Icon:g.default,onClick:e=>{r(),e.stopPropagation()}}),e.jsx(o.IconButton,{style:{display:"flex",color:"#919191"},Icon:f.default,onClick:e=>{s(),e.stopPropagation()}})]}))]}))},y=x(r).default.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;
+		}
+	}
+`;exports.default=r=>{let{template:o,whatsappSpecificPickerMeta:h,showVariableModal:f,variableList:g,variableListForImage:x,discountCode:y,setDiscountCode:v}=r;var b,I;const{selectedCarouselIndex:C,setTemplate:w,pickerConf:q,isProductCarouselType:O,pod:P,cardCount:T,carouselProducts:k,setCarouselProducts:S,isError:B,cardImages:V,disableEditVariable:A,onDeleteSelectedProducts:L}=u.useTemplateModalContext(),[M,E]=s.useState(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)"),[_,D]=s.useState(!1),[F,W]=s.useState(!1),[z,R]=s.useState(!1);s.useEffect((()=>{E(-1==C?"First Message (Step 1/2)":"Carousel Cards (Step 2/2)")}),[C]);return e.jsxs("div",{children:[e.jsx(d.TitleMedium,Object.assign({style:{marginLeft:10,marginBottom:10}},{children:M})),O&&(null!==(b=null==k?void 0:k.length)&&void 0!==b?b:0)>0&&null!=C&&C>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:16,marginBottom:16,flexDirection:"column"}},{children:[e.jsx(j,{editItem:()=>D(!_),cardBody:`${null==k?void 0:k.length} Products Selected`,deleteItem:()=>{const e=i.cloneDeep(Object.assign({},o));e&&(null==V||V.forEach(((t,i)=>{var s;e.components[1].cards[i].components[0].example.header_handle=[null!==(s=V[i])&&void 0!==s?s:""]})),null==w||w(e)),null==S||S([]),null==L||L()}}),e.jsx(a.Button,{disabled:(null!==(I=null==k?void 0:k.length)&&void 0!==I?I:0)<=1,style:{alignSelf:"flex-end",background:n.COLORS.surface.subdued},onClick:()=>{W(!0),D(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!A&&O&&0===(null==k?void 0:k.length)&&null!=C&&C>=0&&e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:12,marginRight:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:B?`2px dashed ${n.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:B?"tertiaryGray":"dashBold",LeadingIcon:t.default,onClick:e=>{D(!0)}}),P===m.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(d.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(a.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%"},size:"medium",buttonText:"Add Product(s) Variable",buttonType:"dashBold",LeadingIcon:t.default,onClick:e=>{R(!0)}})]})]})),e.jsx(p.default,{whatsappSpecificPickerMeta:h,template:o,onTemplateChange:e=>{null==w||w(e)},showVariableModal:f,variableList:g,variableListForImage:x,discountCode:y,setDiscountCode:v}),_&&q&&e.jsx(c.ProductPickerModal,{zIndex:200,rearrangeEnabled:F,limit:null!=T?T:1,storeId:q.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const i of e){const e=null==i?void 0:i.collectionId,s=i.productId,r=i.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),s in t[e].products||(t[e].products[s]={variants:{},name:(null==i?void 0:i.productName)||"",image:(null==i?void 0:i.productImage)||""}),t[e].products[s].variants[r]={name:(null==i?void 0:i.name)||"",price:"",image:(null==i?void 0:i.image)||"",quantity:i.quantity||0,displayOrder:i.displayOrder}}return t}return{}})(null!=k?k:[]),collectionFetcher:q.fetchCollections,productFetcher:q.fetchProducts,onAdd:(e,t)=>{W(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const i=e[t].products;if(void 0!==i&&Object.keys(i).length)for(const e of Object.keys(i)){const r=i[e].variants;if(void 0!==r&&Object.keys(r).length)for(const l of Object.keys(r)){const{name:a,image:o,quantity:n,displayOrder:d}=r[l],c={name:a,image:o,quantity:n,variantId:l,productId:e,displayOrder:d,collectionId:t,productName:i[e].name,productImage:i[e].image};s.push(c)}}}const r=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),l=s.map((e=>e.image)),a=i.cloneDeep(Object.assign({},o));a&&(l.forEach(((e,t)=>{var i;a.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(i=null==V?void 0:V[t])&&void 0!==i?i:""]})),null==w||w(a)),null==S||S(r),D(!1)},searchInCollectionFetcher:q.searchInCollection,searchFetcher:q.searchProducts,visible:_,onClose:()=>{D(!1)},exactLimit:null!=T?T:1}),z&&e.jsx(l.AddVariableV2SideModal,{zIndex:2e3,data:null!=g?g:[],showVariable:z,setShowVariable:R,placeholder:"Add a variable",customTrigger:e=>{}})]})};

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

	@@ -1 +1 @@
1	- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),n=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),r=require("../context/templateModalContext.js"),l=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(i);const c=e=>/^{{.}}$/.test(e);exports.default=d=>{let{mediaComponent:p,template:m,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:f,variableListForImage:E}=d;var g,h,j,b,_,M,x,y;const{disableEditVariable:A}=r.useTemplateModalContext(),[C,S]=i.useState(void 0),[T,I]=i.useState(),[q,R]=i.useState(),[O,D]=i.useState(!1),w=u.default.createRef(),[H,P]=i.useState(!1),[k,F]=i.useState(""),{template:U,setTemplate:Y}=r.useTemplateModalContext();let L;function N(){var e;(null===(e=null==w?void 0:w.current)\|\|void 0===e?void 0:e.click)&&w.current.click()}function V(t){var i;return e.__awaiter(this,void 0,void 0,(function(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate(t);if(a)F(a),P(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield ~~f.uploadMediaFiles~~({file:t,fileName:C,isImage:e});if(a.success){const[e]=t.type.split("/");v(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else F("An unknown technical error ~~occured~~");P(!1)}}else F("An unknown technical error ~~occured~~"),P(!1)}))}return L=p.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":p.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(l.default,{mediaComponentFormat:null!==(g=p.format)&&void 0!==g?g:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i;return e.__awaiter(this,void 0,void 0,(function(){if(F(""),R(""),D(!1),t)if(t.startsWith("https"))try{P(!0);const e=yield fetch(t),i=yield e.blob();yield V(i)}catch(e){F("An unknown technical error occurred")}else if(c(t)){R(t);const e=Object.assign({},U);if(e.components){const a=null===(i=null==e?void 0:e.components)\|\|void 0===i?void 0:i.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==a&&a>-1&&(null==e?void 0:e.components[a])){const i=Object.assign(Object.assign({},e.components[a]),{format:p.format,example:{header_handle:[t]}}),n=[...e.components];n[a]=i,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),P(!1),null==Y\|\|Y(Object.assign({},e))}else P(!1),F("Invalid URL or variable");else N()}))},variableListForImage:E\|\|[],setOpenEditMedia:D,openEditMedia:O}),!!T&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:T,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function(){P(!1),F("");const e=yield fetch(t);V(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{P(!1),I(""),w.current&&(w.current.value="")}}),t.jsx("input",{ref:w,style:{display:"none"},type:"file",onChange:function(e){var t;F(""),P(!0);const i=null===(t=e.target.files)\|\|void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;I(""),S(""),e.onload=()=>{I(e.result),S(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else V(i)},accept:L}),t.jsx(s.default,{imageName:null!==(j=null===(h=null==p?void 0:p.example)\|\|void 0===h?void 0:h.header_handle)&&void 0!==j?j:[],handleImageChange:N,mediaType:null==p?void 0:p.format,error:k,isLoading:H,setOpenEditMedia:D,selectedVariable:c(null!==(M=null===(_=null===(b=null==p?void 0:p.example)\|\|void 0===b?void 0:b.header_handle)\|\|void 0===_?void 0:_[0])&&void 0!==M?M:"")?null===(y=null===(x=null==p?void 0:p.example)\|\|void 0===x?void 0:x.header_handle)\|\|void 0===y?void 0:y[0]:q,disableEditVariable:A})]})};
1	+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),n=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js"),require("../../spinner/Spinner.js");var o=require("../../template-preview/models/TemplateMeta.js"),l=require("../context/templateModalContext.js"),r=require("./EditMediaModal.js"),s=require("./EditMediaV2.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(i);const c=e=>/^{{.}}$/.test(e);exports.default=d=>{let{mediaComponent:p,template:m,updateTemplateImageUrl:v,whatsappSpecificPickerMeta:f,variableListForImage:E}=d;var g,h,j,b,_,M,y,x;const{disableEditVariable:A}=l.useTemplateModalContext(),[C,S]=i.useState(void 0),[T,I]=i.useState(),[q,R]=i.useState(),[D,w]=i.useState(!1),H=u.default.createRef(),[O,k]=i.useState(!1),[P,F]=i.useState(""),{template:U,setTemplate:Y}=l.useTemplateModalContext(),{uploadMediaFiles:L,uploadMediaLink:N}=f;let V;function G(){var e;(null===(e=null==H?void 0:H.current)\|\|void 0===e?void 0:e.click)&&H.current.click()}function z(t){var i;return e.__awaiter(this,void 0,void 0,(function(){const e=new a.FileUploaderHelper;if(t instanceof Blob){const a=e.validate({file:t});if(a)F(a),k(!1);else{const e=p.format===o.HEADER_TYPES.IMAGE,a=yield L({file:t,fileName:C,isImage:e});if(a.success){const[e]=t.type.split("/");v(null!==(i=a.url)&&void 0!==i?i:"","application"===e?o.HEADER_TYPES.DOCUMENT:o.HEADER_TYPES[e.toUpperCase()])}else F("An unknown technical error occurred");k(!1)}}else F("An unknown technical error occurred"),k(!1)}))}return V=p.format===o.HEADER_TYPES.IMAGE?"image/png, image/jpeg":p.format===o.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx(r.default,{mediaComponentFormat:null!==(g=p.format)&&void 0!==g?g:o.HEADER_TYPES.IMAGE,uploadMedia:function(t){var i,n;return e.__awaiter(this,void 0,void 0,(function(){if(F(""),R(""),w(!1),t)if(t.startsWith("https"))try{if(k(!0),N){const e=yield N(t),{type:n,size:l,success:r}=e;if(r){const t=(new a.FileUploaderHelper).validate({linkData:{type:n,size:l}});if(t)return F(t),void k(!1);const[r]=n.split("/");v(null!==(i=e.url)&&void 0!==i?i:"",o.HEADER_TYPES[r.toUpperCase()])}else F("An unknown technical error occurred");k(!1)}else{const e=yield fetch(t),i=yield e.blob();yield z(i)}}catch(e){F("An unknown technical error occurred")}else if(c(t)){R(t);const e=Object.assign({},U);if(e.components){const i=null===(n=null==e?void 0:e.components)\|\|void 0===n?void 0:n.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==i&&i>-1&&(null==e?void 0:e.components[i])){const a=Object.assign(Object.assign({},e.components[i]),{format:p.format,example:{header_handle:[t]}}),n=[...e.components];n[i]=a,e.components=n}}e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[t]})),k(!1),null==Y\|\|Y(Object.assign({},e))}else k(!1),F("Invalid URL or variable");else G()}))},variableListForImage:E\|\|[],setOpenEditMedia:w,openEditMedia:D}),!!T&&t.jsx(n.BikImageCropper,{aspectRatio:15/8,src:T,onCropComplete:function(t){return e.__awaiter(this,void 0,void 0,(function(){k(!1),F("");const e=yield fetch(t);z(yield e.blob()).then((()=>{I(void 0)}))}))},onCancel:()=>{k(!1),I(""),H.current&&(H.current.value="")}}),t.jsx("input",{ref:H,style:{display:"none"},type:"file",onChange:function(e){var t;F(""),k(!0);const i=null===(t=e.target.files)\|\|void 0===t?void 0:t[0];if(p.format===o.HEADER_TYPES.IMAGE){const e=new FileReader;I(""),S(""),e.onload=()=>{I(e.result),S(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else z(i)},accept:V}),t.jsx(s.default,{imageName:null!==(j=null===(h=null==p?void 0:p.example)\|\|void 0===h?void 0:h.header_handle)&&void 0!==j?j:[],handleImageChange:G,mediaType:null==p?void 0:p.format,error:P,isLoading:O,setOpenEditMedia:w,selectedVariable:c(null!==(M=null===(_=null===(b=null==p?void 0:p.example)\|\|void 0===b?void 0:b.header_handle)\|\|void 0===_?void 0:_[0])&&void 0!==M?M:"")?null===(x=null===(y=null==p?void 0:p.example)\|\|void 0===y?void 0:y.header_handle)\|\|void 0===x?void 0:x[0]:q,disableEditVariable:A})]})};

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.d.ts CHANGED Viewed

@@ -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;
+    template: WhatsAppTemplate | WhatsAppCarouselTemplate;
+    onTemplateChange?: (template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | WhatsAppCarouselTemplate) => void;
     showVariableModal?: boolean;
     variableList?: VariableListInterfaceV2[];
     variableListForImage?: VariableListInterfaceV2[];

package/dist/cjs/components/template-context-mapper/modalElements/EditWhatsAppTemplateV2.js CHANGED Viewed

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

package/dist/cjs/components/template-context-mapper/modalElements/Footer.d.ts CHANGED Viewed

@@ -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/cjs/components/template-context-mapper/modalElements/Footer.js CHANGED Viewed

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

package/dist/cjs/components/template-context-mapper/modalElements/MobilePreview.d.ts CHANGED Viewed

@@ -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/cjs/components/template-context-mapper/modalElements/MobilePreview.js CHANGED Viewed

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../context/templateModalContext.js"),s=require("../utils/getPreviewDimension.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=l(t),n=l(i);const d=n.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../template-preview/models/TemplateMeta.js");var r=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../context/templateModalContext.js"),o=require("../utils/getPreviewDimension.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=l(t),n=l(i);const d=n.default.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
-	width: ${e=>s.getPreviewWidth(e.channel)}px;
+	width: ${e=>o.getPreviewWidth(e.channel)}px;
 	background-color: white;
 	margin: auto;
 	overflow-y: auto;
@@ -17,4 +17,4 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=p.default.forwardRef(((t,i)=>{let{display_content:l,channel:p,template:n,showSampleValues:h}=t;const{pod:m}=o.useTemplateModalContext();return e.jsx("div",{children:e.jsxs(d,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:s.getPreviewWidth(p),height:443}}),e.jsx(c,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,{showSampleValues:h,template:n,channel:p,smsSpecificMeta:{smsDisplayContent:l},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:m!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:l,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}}})}))]}))})}));h.displayName="MobilePreview",exports.default=h;
+`,h=p.default.forwardRef(((t,i)=>{let{display_content:l,channel:p,template:n,showSampleValues:h}=t;const{pod:m}=s.useTemplateModalContext();return e.jsx("div",{children:e.jsxs(d,Object.assign({channel:p},{children:[e.jsx("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:o.getPreviewWidth(p),height:443}}),e.jsx(c,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,{showSampleValues:h,template:n,channel:p,smsSpecificMeta:{smsDisplayContent:l},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:m!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:l,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0})}))]}))})}));h.displayName="MobilePreview",exports.default=h;

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnector.js CHANGED Viewed

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

package/dist/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts CHANGED Viewed

@@ -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/cjs/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.js CHANGED Viewed

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

package/dist/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.d.ts CHANGED Viewed

@@ -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/cjs/components/template-context-mapper/modalElements/WhatsAppTemplateCardButtonV2.js CHANGED Viewed

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

package/dist/cjs/components/template-preview/TemplatePreview.d.ts CHANGED Viewed

@@ -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,8 @@ export interface TemplatePreviewProps {
     size?: 'small' | 'large';
     templateContainerStyles?: React.CSSProperties;
     showSampleValues?: boolean;
+    carouselCardIndex?: number;
+    isWhatsappCarousel?: boolean;
+    isPreview?: 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, isPreview, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/template-preview/TemplatePreview.js CHANGED Viewed

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

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.js CHANGED Viewed

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/halfRectangle.svg.js"),r=require("../../../assets/icons/phone.svg.js"),s=require("../../../assets/icons/RedirectToNew.svg.js"),a=require("react"),i=require("styled-components"),o=require("../../tooltips/Tooltip.js"),n=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),l=require("../helpers/WhatsAppFormatToHTML.js"),h=require("../models/TemplateMeta.js"),p=require("./ChatBtn.js"),c=require("./ChatUI.style.js"),x=require("./MediaCard.js"),T=require("./RenderTemplateWithVariable.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=u(i).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/halfRectangle.svg.js"),r=require("../../../assets/icons/phone.svg.js"),s=require("../../../assets/icons/RedirectToNew.svg.js"),i=require("react"),a=require("styled-components"),o=require("../../tooltips/Tooltip.js"),n=require("../../TypographyStyle.js"),d=require("../../../constants/Theme.js"),l=require("../helpers/WhatsAppFormatToHTML.js"),c=require("../models/TemplateMeta.js"),h=require("./ChatBtn.js"),p=require("./ChatUI.style.js"),x=require("./MediaCard.js"),T=require("./RenderTemplateWithVariable.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=j(a).default.div`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`;exports.default=i=>{const{bodyText:u,footerText:m,headerMediaType:y,headerText:S,headerAssetLink:g,headerAssetName:f,quickReplybtn:q,ctaBtn:E,actionTypes:v,textType:b,extras:C,showHeader:A,imagePreviewStyles:N,size:w,children:F}=i,M=new l.WhatsAppFormatToHTML,O=a.useMemo((()=>({color:d.COLORS.content.primary,margin:12,fontSize:A?d.FONTS.caption.fontSize:d.FONTS.bodySecondary.fontSize,fontWeight:d.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(c.Container,{children:[e.jsx(j,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),y===h.HEADER_TYPES.TEXT?e.jsx(T.default,{bold:!0,text:S}):y!==h.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:g,headerAssetName:f,mediaType:y,imagePreviewStyles:y===h.HEADER_TYPES.IMAGE?N:{}}):e.jsx(e.Fragment,{}),!!u&&e.jsx(e.Fragment,{children:F?e.jsx(e.Fragment,{children:F}):e.jsx(e.Fragment,{children:"html"===b?e.jsx("div",{className:"richTextEditor",style:O,dangerouslySetInnerHTML:{__html:M.convertToHTML(u)}}):e.jsx(n.BodySecondary,{children:u})})}),e.jsxs(c.FooterWrapper,{children:[e.jsx(o.Tooltip,Object.assign({body:null!=m?m:"",placement:"top"},{children:e.jsx(c.TimeStamp,Object.assign({style:{flex:1}},{children:m}))})),e.jsx(c.TimeStamp,{children:"16:48"})]}),v===h.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==q?void 0:q.map(((t,r)=>e.jsx(p.ChatBtn,{text:t.text},r)))}):v===h.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==E?void 0:E.map(((t,a)=>e.jsx(p.ChatBtn,{textTypography:A?n.Caption:n.BodySecondary,extraContent:C?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:w},a)))}):e.jsx(e.Fragment,{})]})};
+`;exports.default=a=>{const{bodyText:j,footerText:m,headerMediaType:y,headerText:S,headerAssetLink:g,headerAssetName:f,quickReplybtn:v,ctaBtn:q,actionTypes:E,textType:b,extras:w,showHeader:C,imagePreviewStyles:A,size:N,children:O,isPreview:F}=a,M=new l.WhatsAppFormatToHTML,P=i.useMemo((()=>({color:d.COLORS.content.primary,margin:12,fontSize:C?d.FONTS.caption.fontSize:d.FONTS.bodySecondary.fontSize,fontWeight:d.FONTS.bodySecondary.fontWeight,maxWidth:"100%",whiteSpace:"pre-wrap",marginBottom:0,marginTop:8,wordBreak:"break-word"})),[]);return e.jsxs(p.Container,Object.assign({isPreview:F},{children:[e.jsx(u,{children:e.jsx(t.default,{color:"white",height:8,width:8})}),y===c.HEADER_TYPES.TEXT?e.jsx(T.default,{bold:!0,text:S}):y!==c.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:g,headerAssetName:f,mediaType:y,imagePreviewStyles:y===c.HEADER_TYPES.IMAGE?A:{}}):e.jsx(e.Fragment,{}),!!j&&e.jsx(e.Fragment,{children:O?e.jsx(e.Fragment,{children:O}):e.jsx(e.Fragment,{children:"html"===b?e.jsx("div",{className:"richTextEditor",style:P,dangerouslySetInnerHTML:{__html:M.convertToHTML(j)}}):e.jsx(n.BodySecondary,{children:j})})}),e.jsxs(p.FooterWrapper,{children:[e.jsx(o.Tooltip,Object.assign({body:null!=m?m:"",placement:"top"},{children:e.jsx(p.TimeStamp,Object.assign({style:{flex:1}},{children:m}))})),e.jsx(p.TimeStamp,{children:"16:48"})]}),E===c.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==v?void 0:v.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):E===c.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==q?void 0:q.map(((t,i)=>e.jsx(h.ChatBtn,{textTypography:C?n.Caption:n.BodySecondary,extraContent:w?t.extra:void 0,placeholder:t.placeholder,text:t.text,Icon:"phoneNumber"===t.type?r.default:s.default,size:N},i)))}):e.jsx(e.Fragment,{})]}))};

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.d.ts CHANGED Viewed

@@ -1,4 +1,10 @@
-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;
+    hasError?: boolean | undefined;
+    isPreview?: boolean | undefined;
+}, never>;
 export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js CHANGED Viewed

@@ -1,20 +1,27 @@
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=o(e);const a=i.default.div`
 	background: ${r.COLORS.surface.standard};
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: 0px;
+	border-top-left-radius: ${e=>e.isCarouselCard?"12px":"0px"};
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-`,p=i.default(t.Caption)`
+	border: 2px solid
+		${e=>e.hasError?`${r.COLORS.content.negative}`:e.showBorder?`${r.COLORS.stroke.brand}`:`${r.COLORS.text.white}`};
+	:hover {
+		border: 2px
+			${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
+			${r.COLORS.stroke.brand};
+	}
+`,d=i.default(t.Caption)`
 	color: ${r.COLORS.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	text-wrap: wrap;
-`,d=i.default.div`
+`,s=i.default.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -30,7 +37,7 @@
 	justify-content: center;
 	align-items: center;
 	border-top: 1px solid ${r.COLORS.stroke.primary};
-`,s=i.default.div`
+`,p=i.default.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
@@ -53,4 +60,4 @@
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=d,exports.TimeStamp=p;
+`,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterWrapper=p,exports.MediaContainer=s,exports.TimeStamp=d;

package/dist/cjs/components/template-preview/WhatsApp/ChatUiV2.js CHANGED Viewed

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

package/dist/cjs/components/template-preview/WhatsApp/LimitedTimeOffer/LimitedTimeOffer.index.js CHANGED Viewed

@@ -4,6 +4,7 @@
 	background: #f6f6f6;
 	margin: 0px 10px;
 	overflow: hidden;
+	align-items: center;
 `,l=o.default.div`
 	width: 48px;
 	height: 48px;