@bikdotai/bik-component-library 0.0.44-4.beta-2 → 0.0.44

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

@@ -1,18 +1,16 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+/// <reference types="react" />
 import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
 import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
 import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 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 {
-    currentVariableList: WhatsAppTemplateVariables;
+    originalVariableList: WhatsAppTemplateVariables;
     updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
     updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
     button: TEMPLATE_BUTTON;
     CTAoptions?: ButtonPlaceHolderOptions[];
     QRBoptions?: ButtonPlaceHolderOptions[];
-    variableList?: VariableListInterfaceV2[];
-    variableListIndex: number;
 }
-declare const WhatsAppTemplateCardButtonV2: ({ variableListIndex, button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, currentVariableList, CTAoptions, QRBoptions, variableList, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => JSX.Element;
 export default WhatsAppTemplateCardButtonV2;

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

@@ -1 +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})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../dropdown/Dropdown.js"),a=require("../../input/Input.js"),s=require("../../template-preview/constants/regexPatterns.js"),n=require("../../template-preview/models/TemplateMeta.js"),r=require("../../template-preview/models/WhatsAppTemplate.js"),o=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),d=require("../utils/validateIsUrl.js"),p=require("./VariableConnector.js");exports.default=c=>{let{button:b,updateSelectedURLTemplateBtn:m,updateSelectedQRBTemplateBtn:j,originalVariableList:x,CTAoptions:v,QRBoptions:y}=c;const[f,g]=t.useState(""),[h,O]=t.useState(),{setOriginalVariableList:R,isError:U}=u.useTemplateModalContext();function L(e){g(e);const t=[Object.assign(Object.assign({},x.buttons[0]),{type:r.BUTTON_TYPE.URL,buttonVariable:"((customPlaceholderName))",example:[`https://${e}`]})];null==R||R({body:[...x.body],buttons:[...t]}),null==m||m(`https://${e}`,"custom")}return t.useEffect((()=>{var e;if(b.buttonVariable&&s.editableVarPattern.test(b.buttonVariable))O(n.CUSTOM_URL_NAME),g((null===(e=b.example)||void 0===e?void 0:e[0].split("https://")[1])||"");else{let e=-1;const t="URL"===b.type?v:y;e="URL"===b.type?t.findIndex((e=>e.placeHolder===b.buttonVariable)):t.findIndex((e=>e.label===b.flowName)),e>-1&&O(t[e])}}),[]),e.jsxs(p.Container,{children:[e.jsx("div",Object.assign({style:{marginBottom:8}},{children:e.jsxs(o.BodySecondary,Object.assign({style:{color:i.COLORS.content.primary}},{children:[b.text," button"]}))})),e.jsx("div",Object.assign({style:{marginBottom:12}},{children:e.jsx(l.Dropdown,{options:"URL"===b.type?v:y,isSearchable:!1,onSelect:function(e,t){const l=e;O(l);const a=("URL"===b.type?v:y).find((e=>e.placeHolder===l.placeHolder));if(a)if("custom_link"!==a.value){let e;"URL"===b.type?(e=[Object.assign(Object.assign({},x.buttons[0]),{type:"URL",buttonVariable:l.placeHolder,example:["https://bik.ai/"]})],null==m||m({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder")):(e=x.buttons.map(((e,t)=>t===b.index?Object.assign(Object.assign({},e),{type:"QUICK_REPLY",flowName:l.label,flowId:l.value}):e)),null==j||j({flowName:l.label,flowId:l.value},"placeholder",b.index)),null==R||R({body:[...x.body],buttons:[...e]})}else L("")},defaultOptions:h?[Object.assign(Object.assign({},h),{selected:!0})]:[]})})),"custom_link"===(null==h?void 0:h.value)&&e.jsx("div",Object.assign({style:{marginBottom:20}},{children:e.jsx(a.Input,{errorMessage:U?f?d.validateIsUrl(f)?"":"Enter valid URL":"Required field":"",value:f,prefixText:"custom_link"===(null==h?void 0:h.value)?"https://":"",placeholder:"Enter custom URL here",onChangeText:L})}))]})};

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

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

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

@@ -1 +1 @@
-export declare const validateIsUrl: (receivedMediaLink: string) => boolean;
+export declare const validateIsUrl: (recievedMediaLink: string) => boolean;

package/dist/cjs/components/template-context-mapper/utils/validateIsUrl.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateIsUrl=e=>new RegExp("^(https?://)?([a-z0-9-]+\\.)+[a-z]{2,}(\\.[a-z]{2,})?(\\:[0-9]+)?(/[\\w@.-]*)*$","i").test(e);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.validateIsUrl=e=>!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_,.~+=-]*)?(\\#[-a-z\\d_]*)?$","i").test(e);

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.d.ts

@@ -2,10 +2,6 @@ export declare const Header: import("styled-components").StyledComponent<"div",
 export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
     hideHeader?: boolean | undefined;
 }, never>;
-export declare const CardLoadingContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-}, never>;
-export declare const IframeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ViewButton: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EmailContainer: import("styled-components").StyledComponent<"div", any, {
     hideHeader?: boolean | undefined;

package/dist/cjs/components/template-preview/EmailTemplatePreview.styled.js

@@ -1,43 +1,29 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const d=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("styled-components"),e=require("../../constants/Theme.js");function t(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var o=t(r);const d=o.default.div`
 	padding: 16px;
 	padding-bottom: 12px;
 	border-top-left-radius: 4px;
 	border-top-right-radius: 4px;
-	border: 1px solid ${r.COLORS.stroke.primary};
+	border: 1px solid ${e.COLORS.stroke.primary};
 `,i=o.default.div`
 	width: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	border-left: 1px solid ${r.COLORS.stroke.primary};
-	border-right: 1px solid ${r.COLORS.stroke.primary};
-	border-top-color: ${r.COLORS.stroke.primary};
-	border-top-width: ${e=>e.hideHeader?"1px":"0px"};
+	border-left: 1px solid ${e.COLORS.stroke.primary};
+	border-right: 1px solid ${e.COLORS.stroke.primary};
+	border-top-color: ${e.COLORS.stroke.primary};
+	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
 	overflow: scroll;
 `,a=o.default.div`
-	width: 100%;
-	height: 100%;
-	background-color: ${r.BASE_COLORS.grayscale[100]};
-`,n=o.default.div`
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	flex-grow: 1;
-	min-height: 180px;
-`,s=o.default.div`
 	display: flex;
 	justify-content: center;
 	width: 100%;
-	background: ${r.COLORS.surface.standard};
+	background: ${e.COLORS.surface.standard};
 	border-bottom-left-radius: 4px;
 	border-bottom-right-radius: 4px;
-	border: 1px solid ${r.COLORS.stroke.primary};
-`,l=o.default.div`
+	border: 1px solid ${e.COLORS.stroke.primary};
+`,s=o.default.div`
 	border-radius: 4px;
-	background-color: ${r.COLORS.surface.standard};
-	margin-top: ${e=>e.hideHeader?0:16};
-	display: flex;
-	flex-direction: column;
-`;exports.CardLoadingContainer=a,exports.EmailContainer=l,exports.Header=d,exports.IframeContainer=n,exports.ImageContainer=i,exports.ViewButton=s;
+	background-color: ${e.COLORS.surface.standard};
+	margin-top: ${r=>r.hideHeader?0:16};
+`;exports.EmailContainer=s,exports.Header=d,exports.ImageContainer=i,exports.ViewButton=a;

package/dist/cjs/components/template-preview/EmailTemplateThumbnailPreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("./EmailTemplatePreview.styled.js");exports.default=n=>{let{template:a,handleViewTemplate:l,hideHeader:s,hideViewButton:d,containerStyle:o,emailHtmlContainerId:u,emailDisplayContent:j}=n;return e.jsxs(r.EmailContainer,Object.assign({hideHeader:s,style:Object.assign({},null!=o?o:{})},{children:[!s&&e.jsx(r.Header,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:a.name}))}),e.jsx(r.IframeContainer,{children:j?e.jsx("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:j,height:"100%",style:{pointerEvents:"none"}}):e.jsx(r.ImageContainer,Object.assign({hideHeader:s},{children:e.jsx(r.CardLoadingContainer,{})}))}),!d&&e.jsx(r.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{l&&l()}})})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../button/Button.js"),i=require("../TypographyStyle.js"),r=require("./EmailTemplatePreview.styled.js");exports.default=n=>{let{template:l,handleViewTemplate:a,hideHeader:s,hideViewButton:d,containerStyle:o,emailHtmlContainerId:u,emailDisplayContent:c}=n;return e.jsxs(r.EmailContainer,Object.assign({hideHeader:s,style:Object.assign({},null!=o?o:{})},{children:[!s&&e.jsx(r.Header,{children:e.jsx(i.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:l.name}))}),c?e.jsx("iframe",{title:"Email template preview",id:null!=u?u:"",width:"100%",srcDoc:c,height:"100%",style:{pointerEvents:"none"}}):e.jsx(r.ImageContainer,Object.assign({hideHeader:s},{children:e.jsx("img",{alt:"",src:l.thumbnailUrl,style:{objectFit:"contain",width:"100%"}})})),!d&&e.jsx(r.ViewButton,{children:e.jsx(t.Button,{buttonType:"tertiary",buttonText:"View",onClick:()=>{a&&a()}})})]}))};

package/dist/cjs/components/template-preview/SMS/SMSBubble.d.ts

@@ -1,8 +1,9 @@
+/// <reference types="react" />
 export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export type SMSBubbleProps = {
     content: string;
     size?: 'small' | 'large';
 };
-declare const SMSBubble: (props: SMSBubbleProps) => import("react/jsx-runtime").JSX.Element;
+declare const SMSBubble: (props: SMSBubbleProps) => JSX.Element;
 export default SMSBubble;

package/dist/cjs/components/template-preview/SmsTemplatePreview.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:u,hideHeader:j,display_content:h,onlyTemplateContent:x,size:g}=d;var p;const S=null==c?void 0:c.content;return e.jsxs(e.Fragment,{children:[!j&&!x&&e.jsx(o.SMSCardHeader,{children:e.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!x&&e.jsx(o.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(l.Caption,{children:null===(p=null==c?void 0:c.headers)||void 0===p?void 0:p[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary})]}))]})}),e.jsx(o.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(a.default,{size:null!=g?g:"large",content:null!=h?h:n.renderVariableUIForPreview(S,null!=u?u:[])})}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_left.svg.js"),r=require("../../assets/icons/more_vertical.svg.js"),t=require("../../assets/icons/search.svg.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),n=require("./helpers/SmsTemplateHelper.js"),a=require("./SMS/SMSBubble.js"),o=require("./SmsTemplatePreview.styled.js");exports.default=d=>{let{template:c,variableStore:j,hideHeader:u,display_content:h,onlyTemplateContent:x,size:g}=d;var p;const S=null==c?void 0:c.content;return e.jsxs(e.Fragment,{children:[!u&&!x&&e.jsx(o.SMSCardHeader,{children:e.jsx(l.TitleRegular,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),!x&&e.jsx(o.SMSHeader,{children:e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(s.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(l.Caption,{children:null===(p=c.headers)||void 0===p?void 0:p[0]})]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e.jsx(t.default,{width:16,height:16,color:i.COLORS.content.secondary}),e.jsx(r.default,{width:16,height:16,color:i.COLORS.content.secondary})]}))]})}),e.jsx(o.SMSBubbleContainer,Object.assign({size:g},{children:e.jsx(a.default,{size:null!=g?g:"large",content:null!=h?h:n.renderVariableUIForPreview(S,null!=j?j:[])})}))]})};

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

@@ -1,11 +1,10 @@
 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 | WhatsAppCarouselTemplate;
+    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
     channel: CHANNEL_TYPE;
     onlyTemplateContent?: boolean;
     outsidePreview?: boolean;
@@ -16,9 +15,5 @@ export interface TemplatePreviewProps {
     hideHeader?: boolean;
     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, carouselCardIndex, isWhatsappCarousel, isPreview, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, }: TemplatePreviewProps) => JSX.Element;

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

@@ -1 +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,{})};
+"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:j,onlyTemplateContent:h,emailSpecificMeta:S,smsSpecificMeta:b}=d;var g,y;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:h,size:null!=j?j:"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!==(g=null==p?void 0:p.label)&&void 0!==g?g:"")})})):e.jsx(e.Fragment,{}),e.jsx(s.default,{showHeader:null==m?void 0:m.showWhatsAppHeader,extras:null==m?void 0:m.whatsAppExtras,template:p,size:c?"small":null!=j?j:"large",containerStyle:Object.assign({borderWidth:c?0:1,borderTopWidth:1},null!==(y=null==m?void 0:m.containerStyle)&&void 0!==y?y:{}),zeroStateComponent:null==m?void 0:m.zeroStateComponent,usePlaceHolderName:null==m?void 0:m.usePlaceHolderName})]})):e.jsx(e.Fragment,{})};

package/dist/cjs/components/template-preview/WhatsApp/ChatBtn.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),n=require("./ChatUI.style.js");exports.ChatBtn=i=>{let{Icon:s,text:l,extraContent:o,placeholder:a,textTypography:c,size:p}=i;const d=c||t.BodySecondary;return e.jsx(n.ChatBtnContainer,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[s&&e.jsx(s,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:l}))]})),!!o&&e.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden"}},{children:a?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(a):o}))]}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../TypographyStyle.js"),r=require("../../../constants/Theme.js"),n=require("./ChatUI.style.js");exports.ChatBtn=s=>{let{Icon:i,text:c,extraContent:a,placeholder:l,textTypography:o,size:p}=s;const d=o||t.BodySecondary;return e.jsx(n.ChatBtnContainer,{children:e.jsxs("div",Object.assign({style:{textAlign:"center",maxWidth:"100%"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center",alignItems:"center"}},{children:[i&&e.jsx(i,{color:r.COLORS.special.brand.facebook,height:16,width:16,style:{marginRight:8}}),e.jsx(d,Object.assign({style:{color:r.COLORS.special.brand.facebook,textAlign:"center",fontSize:"small"===p?12:14}},{children:c}))]})),!!a&&e.jsx(t.Caption,Object.assign({style:{marginTop:2,color:r.COLORS.content.placeholder}},{children:l?function(e){return e.replace("[[","").replace("]]","").replace(/([A-Z])/g," $1").replace(/^./,(function(e){return e.toUpperCase()}))}(l):a}))]}))})};

package/dist/cjs/components/template-preview/WhatsApp/ChatHeader.d.ts

@@ -1,2 +1,3 @@
-declare const ChatHeader: () => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+declare const ChatHeader: () => JSX.Element;
 export default ChatHeader;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate';
-declare const ChatUI: (props: WhatsappLikePreviewTypes) => import("react/jsx-runtime").JSX.Element;
+declare const ChatUI: (props: WhatsappLikePreviewTypes) => JSX.Element;
 export default ChatUI;

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

@@ -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"),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`
+"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"),p=require("../models/TemplateMeta.js"),h=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`
 	position: absolute;
 	width: 8px;
 	height: 8px;
 	left: -8px;
 	top: -9px;
-`;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,{})]}))};
+`;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}=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===p.HEADER_TYPES.TEXT?e.jsx(T.default,{bold:!0,text:S}):y!==p.HEADER_TYPES.NONE?e.jsx(x.MediaCard,{headerAssetLink:g,headerAssetName:f,mediaType:y,imagePreviewStyles:y===p.HEADER_TYPES.IMAGE?N:{}}):e.jsx(e.Fragment,{}),!!u&&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===p.ACTIONS_TYPES.QUICK_REPLY?e.jsx("div",{children:null==q?void 0:q.map(((t,r)=>e.jsx(h.ChatBtn,{text:t.text},r)))}):v===p.ACTIONS_TYPES.CTA_BTN?e.jsx("div",{children:null==E?void 0:E.map(((t,a)=>e.jsx(h.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,{})]})};

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

@@ -1,14 +1,5 @@
-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;
-}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,27 +1,19 @@
 "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: ${e=>e.isCarouselCard?"12px":"0px"};
+	border-top-left-radius: 0px;
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-	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;
-`,s=i.default.div`
+`,n=i.default.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -30,15 +22,16 @@
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,n=i.default.div`
+`,p=i.default.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	border-top: 1px solid ${r.COLORS.stroke.primary};
-`,p=i.default.div`
+`,s=i.default.div`
 	display: flex;
+
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
@@ -60,4 +53,4 @@
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`,exports.ChatBtnContainer=n,exports.Container=a,exports.FooterWrapper=p,exports.MediaContainer=s,exports.TimeStamp=d;
+`,exports.ChatBtnContainer=p,exports.Container=a,exports.FooterWrapper=s,exports.MediaContainer=n,exports.TimeStamp=d;

package/dist/cjs/components/template-preview/WhatsApp/MediaCard.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),i=require("../../../assets/icons/videoRecorder.svg.js"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),d=require("../models/TemplateMeta.js"),n=require("./ChatUI.style.js"),o=require("../../shimmer-image/ShimmerImage.js");const c=o=>{let{headerAssetName:c,mediaType:l}=o;const m=l===d.HEADER_TYPES.IMAGE?r.default:l===d.HEADER_TYPES.VIDEO?i.default:s.default;return e.jsxs(n.MediaContainer,{children:[e.jsx(m,{height:40,width:40,color:a.COLORS.icon.placeholder}),!!c&&e.jsx(t.BodySecondary,Object.assign({style:{color:a.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:i,mediaType:t,imagePreviewStyles:a}=s;if(!r||t===d.HEADER_TYPES.DOCUMENT)return e.jsx(c,Object.assign({},{headerAssetLink:r,headerAssetName:i,mediaType:t}));return e.jsx(n.MediaContainer,{children:t===d.HEADER_TYPES.IMAGE?e.jsx(o.ShimmerImage,{imageUrl:r,alt:r,width:"100%",height:156,borderRadius:8}):t===d.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:{width:"100%",minHeight:"156px",borderRadius:8},controls:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/filePdf.svg.js"),r=require("../../../assets/icons/image.svg.js"),t=require("../../../assets/icons/videoRecorder.svg.js"),a=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js"),n=require("../models/TemplateMeta.js"),d=require("./ChatUI.style.js");const o=o=>{let{headerAssetName:c,mediaType:l}=o;const j=l===n.HEADER_TYPES.IMAGE?r.default:l===n.HEADER_TYPES.VIDEO?t.default:s.default;return e.jsxs(d.MediaContainer,{children:[e.jsx(j,{height:40,width:40,color:i.COLORS.icon.placeholder}),!!c&&e.jsx(a.BodySecondary,Object.assign({style:{color:i.COLORS.content.secondary,marginTop:8}},{children:c}))]})};exports.MediaCard=s=>{let{headerAssetLink:r,headerAssetName:t,mediaType:a,imagePreviewStyles:i}=s;if(!r||a===n.HEADER_TYPES.DOCUMENT)return e.jsx(o,Object.assign({},{headerAssetLink:r,headerAssetName:t,mediaType:a}));const c={width:"100%",minHeight:"156px",borderRadius:8};return e.jsx(d.MediaContainer,{children:a===n.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"Header displays here",style:Object.assign(Object.assign({},c),i),src:r}):a===n.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:r,style:c,controls:!0},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:r})})):e.jsx(e.Fragment,{})})},exports.NoMediaCard=o;

package/dist/cjs/components/template-preview/WhatsApp/RenderTemplateWithVariable.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 export interface RenderTemplateWithVariableInterface {
     text?: string;
     bold?: boolean;
 }
-declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => import("react/jsx-runtime").JSX.Element;
+declare const RenderTemplateWithVariable: (props: RenderTemplateWithVariableInterface) => JSX.Element;
 export default RenderTemplateWithVariable;

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

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

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

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

package/dist/cjs/components/template-preview/constants/regexPatterns.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 .]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 .]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\{\{|\(\()(.*?)(\)\)|\}\}|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 ._]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=/\{\{[A-Za-z0-9 ]+\}\}/g,t=e;exports.editableBracketPattern=/[((|))]/,exports.editableVarPattern=/\((\(|\[)[A-Za-z0-9 ]+(\]|\))\)/,exports.globalHalfVariablePattern=/\{\{[a-zA-Z0-9]+(?=( |\}))(?!\}\})/g,exports.globalVariablePattern=e,exports.lockedVarPattern=/\[\[[A-Za-z0-9 ]+\]\]/,exports.placeHolderNamePattern=/(\[\[|\(\()(.*)(\)\)|\]\])/,exports.previewLinkMDFormatPattern=/\[([^[]+)\](\(.*\))/,exports.specialCharPattern=/[!@#$%^&*()_+\-={};':"\\|,.<>?]+/,exports.templateVariablePattern=t,exports.variablePattern=/\{\{[A-Za-z0-9 _]+\}\}/,exports.variablePatternGlobal=/\{\{[A-Za-z0-9 _]+\}\}/g;

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

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

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

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

package/dist/cjs/components/template-preview/index.d.ts

@@ -2,10 +2,5 @@ import * as regexPatterns from './constants/regexPatterns';
 export { regexPatterns };
 export * from './TemplatePreview';
 export * from './WhatsApp/WhatsAppLikePreview';
-export * from './WhatsApp/WhatsAppLikePreviewV2';
 export * from './helpers/SmsTemplateHelper';
 export * from './helpers/WhatsAppFormatToHTML';
-export * from './helpers/VariableEditorHelper';
-export * from './models/EmailTemplate';
-export * from './models/TemplateMeta';
-export * from './models/WhatsAppTemplate';

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

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