@bikdotai/bik-component-library 0.0.530-beta0.rt3 → 0.0.530-beta0.rt5

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

@@ -17,7 +17,7 @@
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,h=n.default.forwardRef(((t,i)=>{let{display_content:o,channel:n,template:p,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w,originalVariableList:v}=s.useTemplateModalContext(),f={showSampleValues:h,template:p,channel:n,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return console.log("hideDeviceContainerInPreview",w,f,v),w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:n},{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:l.getPreviewWidth(n),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},f))}))]}))})}));h.displayName="MobilePreview";const m=p.default.div`
+`,h=n.default.forwardRef(((t,i)=>{let{display_content:o,channel:n,template:p,showSampleValues:h}=t;const{pod:u,hideDeviceContainerInPreview:w}=s.useTemplateModalContext(),f={showSampleValues:h,template:p,channel:n,smsSpecificMeta:{smsDisplayContent:o},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:u!==r.POD.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:o,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return w?e.jsx(m,{children:e.jsx(a.TemplatePreview,Object.assign({},f))}):e.jsx(e.Fragment,{children:e.jsxs(c,Object.assign({channel:n},{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:l.getPreviewWidth(n),height:443}}),e.jsx(d,Object.assign({ref:i},{children:e.jsx(a.TemplatePreview,Object.assign({},f))}))]}))})}));h.displayName="MobilePreview";const m=p.default.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

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

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:j,onlyTemplateContent:C,emailSpecificMeta:S,smsSpecificMeta:g,showSampleValues:b,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T}=p;var O,w;const{setSelectedCarouselIndex:P}=l.useTemplateModalContext();return console.log("smsSpecificMeta",g,null==g?void 0:g.smsVariableStore),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==g?void 0:g.templateContainerStyles)},{children:e.jsx(r.default,{template:u,hideHeader:h,onlyTemplateContent:C,size:null!=j?j:"large",variableStore:null==g?void 0:g.smsVariableStore,display_content:null==g?void 0:g.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:()=>{var e,l;if(P&&y){if(-1===x&&!(null===(l=null===(e=null==u?void 0:u.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length))return;P(null!=x?x:-1)}}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(O=null==u?void 0:u.label)&&void 0!==O?O:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:b,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:u,size:v?"small":null!=j?j:"large",containerStyle:Object.assign(Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(w=null==c?void 0:c.containerStyle)&&void 0!==w?w:{}),{height:"100%"}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T})]})):e.jsx(e.Fragment,{})};
+"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"),r=require("./models/Channels.js"),s=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:j,onlyTemplateContent:C,emailSpecificMeta:g,smsSpecificMeta:S,showSampleValues:b,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T}=p;var O,w;const{setSelectedCarouselIndex:P}=l.useTemplateModalContext();return m===r.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==S?void 0:S.templateContainerStyles)},{children:e.jsx(s.default,{template:u,hideHeader:h,onlyTemplateContent:C,size:null!=j?j:"large",variableStore:null==S?void 0:S.smsVariableStore,display_content:null==S?void 0:S.smsDisplayContent})})):m===r.CHANNEL_TYPE.EMAIL?e.jsx("div",Object.assign({style:Object.assign({marginTop:v?16:0},null==g?void 0:g.templateContainerStyles)},{children:e.jsx(n.default,{template:u,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:h,hideViewButton:null==g?void 0:g.hideViewButtonForEmail,containerStyle:null==g?void 0:g.containerStyle,emailDisplayContent:null==g?void 0:g.emailDisplayContent,emailHtmlContainerId:null==g?void 0:g.emailHtmlContainerId})})):m===r.CHANNEL_TYPE.WHATSAPP?e.jsxs("div",Object.assign({style:Object.assign(Object.assign({},null==c?void 0:c.templateContainerStyles),v?d.WhatsAppWrapper:{}),onClick:()=>{var e,l;if(P&&y){if(-1===x&&!(null===(l=null===(e=null==u?void 0:u.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length))return;P(null!=x?x:-1)}}},{children:[v?e.jsx("div",Object.assign({style:{padding:16}},{children:e.jsx(i.TitleRegular,{children:t.default.convertToTitleCase(null!==(O=null==u?void 0:u.label)&&void 0!==O?O:"")})})):e.jsx(e.Fragment,{}),e.jsx(o.default,{showSampleValues:b,showHeader:null==c?void 0:c.showWhatsAppHeader,extras:null==c?void 0:c.whatsAppExtras,template:u,size:v?"small":null!=j?j:"large",containerStyle:Object.assign(Object.assign({borderWidth:v?0:1,borderTopWidth:1},null!==(w=null==c?void 0:c.containerStyle)&&void 0!==w?w:{}),{height:"100%"}),zeroStateComponent:null==c?void 0:c.zeroStateComponent,usePlaceHolderName:null==c?void 0:c.usePlaceHolderName,carouselCardIndex:x,isWhatsappCarousel:y,isPreview:T})]})):e.jsx(e.Fragment,{})};

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

@@ -1,2 +1,4 @@
 import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
-export declare const renderVariableUIForPreview: (content: string, variableStore?: CUSTOM_VARIABLE[], brandColor?: string) => string;
+import { WhatsAppCarouselTemplateVariables } from '../models/WhatsappCarouselTemplate';
+import { WhatsAppTemplateVariables } from '../models/WhatsAppTemplate';
+export declare const renderVariableUIForPreview: (content: string, variableStore?: CUSTOM_VARIABLE[], originalVariables?: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, brandColor?: string) => string;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),r=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(a,t){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e.COLORS.content.brand;const l=(null==t?void 0:t.length)?t.map((e=>e.updatedValue)):a.match(r.variablePatternGlobal);return r.variablePatternGlobal.lastIndex=0,a.replace(r.variablePatternGlobal,((e,r)=>{var a;const t=null!==(a=null==l?void 0:l[r])&&void 0!==a?a:"";return`${e}<span id="${`connectors_variable_${r+1}`}" style="color: ${n}; text-decoration: underline; word-break: break-word;">${t}</span><span> </span>`}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),r=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=function(t,n,a){let l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:e.COLORS.content.brand;console.log("here we are",a);const o=(null==n?void 0:n.length)?n.map((e=>e.updatedValue)):t.match(r.variablePatternGlobal);r.variablePatternGlobal.lastIndex=0;let s="",i=0;return t.replace(r.variablePatternGlobal,((e,r)=>{var n;const a=null!==(n=null==o?void 0:o[r])&&void 0!==n?n:"",d=`connectors_variable_${r+1}`;return s+=t.substring(i,r),s+=`${e}<span id="${d}" style="color: ${l}; text-decoration: underline; word-break: break-word;">${a}</span>`,i=r+e.length,e})),s+=t.substring(i),s};

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

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

@@ -1,4 +1,4 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as s}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=o.div`
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"react";import o from"styled-components";import{TemplatePreview as r}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../template-preview/models/TemplateMeta.js";import{POD as p}from"../../template-preview/models/WhatsAppTemplate.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{getPreviewWidth as l}from"../utils/getPreviewDimension.js";const n=o.div`
 	position: relative;
 	height: 100%;
 	border-radius: 31px;
@@ -17,7 +17,7 @@ import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import a from"re
 	height: calc(100% - 17px);
 	border-radius: 16px;
 	overflow-y: auto;
-`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:w,showSampleValues:f}=a;const{pod:b,hideDeviceContainerInPreview:g,originalVariableList:v}=p(),u={showSampleValues:f,template:w,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==s.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return console.log("hideDeviceContainerInPreview",g,u,v),g?e(h,{children:e(r,Object.assign({},u))}):e(t,{children:i(n,Object.assign({channel:d},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l(d),height:443}}),e(m,Object.assign({ref:o},{children:e(r,Object.assign({},u))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
+`,c=a.forwardRef(((a,o)=>{let{display_content:c,channel:d,template:f,showSampleValues:w}=a;const{pod:b,hideDeviceContainerInPreview:g}=s(),v={showSampleValues:w,template:f,channel:d,smsSpecificMeta:{smsDisplayContent:c},whatsAppSpecificMeta:{showWhatsAppHeader:!0,whatsAppExtras:b!==p.CHATBOT,containerStyle:{border:"none",borderBottomRightRadius:0,borderBottomLeftRadius:0,minHeight:426,width:240}},size:"small",hideHeader:!0,emailSpecificMeta:{emailDisplayContent:c,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_mobile",containerStyle:{height:"100%",width:"100%"},templateContainerStyles:{height:"100%"}},isPreview:!0};return g?e(h,{children:e(r,Object.assign({},v))}):e(t,{children:i(n,Object.assign({channel:d},{children:[e("img",{alt:"",src:"https://firebasestorage.googleapis.com/v0/b/staging-bikayi.appspot.com/o/bik%2FkNwEVoGlLpVjOsXoO1M8WgvWicP2%2F6f07b850-8b4b-4d58-96cc-8ba6df7b4e4a-Device___Frame.jpg?alt=media&token=253f1bfe-8481-4f54-bdef-3c0a73697d6a",style:{width:l(d),height:443}}),e(m,Object.assign({ref:o},{children:e(r,Object.assign({},v))}))]}))})}));c.displayName="MobilePreview";const h=o.div`
 	display: flex;
 	align-items: center;
 	justify-content: center;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/arrow_left.svg.js";import l from"../../assets/icons/more_vertical.svg.js";import r from"../../assets/icons/search.svg.js";import{COLORS as i}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as m}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as g}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:v,variableStore:j,hideHeader:y,display_content:u,onlyTemplateContent:x,size:w}=f;var b;const S=null==v?void 0:v.content,{hideDeviceContainerInPreview:T}=s();return console.log("templateContent in smsTemplatePreview",S,j),T?e(p,Object.assign({size:w},{children:e(d,{size:null!=w?w:"large",content:null!=u?u:m(S,null!=j?j:[])})})):t(n,{children:[!y&&!x&&e(h,{children:e(a,Object.assign({style:{maxWidth:"100%"}},{children:v.name}))}),!x&&e(g,{children:t(n,{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(o,{width:16,height:16,color:i.content.secondary}),e(c,{children:null===(b=null==v?void 0:v.headers)||void 0===b?void 0:b[0]})]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(r,{width:16,height:16,color:i.content.secondary}),e(l,{width:16,height:16,color:i.content.secondary})]}))]})}),e(p,Object.assign({size:w},{children:e(d,{size:null!=w?w:"large",content:null!=u?u:m(S,null!=j?j:[])})}))]})};export{f as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import l from"../../assets/icons/arrow_left.svg.js";import n from"../../assets/icons/more_vertical.svg.js";import o from"../../assets/icons/search.svg.js";import{COLORS as r}from"../../constants/Theme.js";import{useTemplateModalContext as s}from"../template-context-mapper/context/templateModalContext.js";import{TitleRegular as a,Caption as c}from"../TypographyStyle.js";import{renderVariableUIForPreview as m}from"./helpers/SmsTemplateHelper.js";import d from"./SMS/SMSBubble.js";import{SMSBubbleContainer as p,SMSCardHeader as h,SMSHeader as g}from"./SmsTemplatePreview.styled.js";const f=f=>{let{template:v,variableStore:j,hideHeader:y,display_content:u,onlyTemplateContent:x,size:b}=f;var w;const S=null==v?void 0:v.content,{hideDeviceContainerInPreview:T,originalVariableList:z}=s();return console.log("templateContent in smsTemplatePreview",z),T?e(p,Object.assign({size:b},{children:e(d,{size:null!=b?b:"large",content:null!=u?u:m(S,null!=j?j:[])})})):t(i,{children:[!y&&!x&&e(h,{children:e(a,Object.assign({style:{maxWidth:"100%"}},{children:v.name}))}),!x&&e(g,{children:t(i,{children:[t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(l,{width:16,height:16,color:r.content.secondary}),e(c,{children:null===(w=null==v?void 0:v.headers)||void 0===w?void 0:w[0]})]})),t("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:8}},{children:[e(o,{width:16,height:16,color:r.content.secondary}),e(n,{width:16,height:16,color:r.content.secondary})]}))]})}),e(p,Object.assign({size:b},{children:e(d,{size:null!=b?b:"large",content:null!=u?u:m(S,null!=j?j:[],z)})}))]})};export{f as default};

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

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

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

@@ -1,2 +1,4 @@
 import { CUSTOM_VARIABLE } from '../models/TemplateMeta';
-export declare const renderVariableUIForPreview: (content: string, variableStore?: CUSTOM_VARIABLE[], brandColor?: string) => string;
+import { WhatsAppCarouselTemplateVariables } from '../models/WhatsappCarouselTemplate';
+import { WhatsAppTemplateVariables } from '../models/WhatsAppTemplate';
+export declare const renderVariableUIForPreview: (content: string, variableStore?: CUSTOM_VARIABLE[], originalVariables?: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables, brandColor?: string) => string;

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

@@ -1 +1 @@
-import{COLORS as n}from"../../../constants/Theme.js";import{variablePatternGlobal as t}from"../constants/regexPatterns.js";const e=function(e,o){let r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:n.content.brand;const a=(null==o?void 0:o.length)?o.map((n=>n.updatedValue)):e.match(t);return t.lastIndex=0,e.replace(t,((n,t)=>{var e;const o=null!==(e=null==a?void 0:a[t])&&void 0!==e?e:"";return`${n}<span id="${`connectors_variable_${t+1}`}" style="color: ${r}; text-decoration: underline; word-break: break-word;">${o}</span><span> </span>`}))};export{e as renderVariableUIForPreview};
+import{COLORS as e}from"../../../constants/Theme.js";import{variablePatternGlobal as n}from"../constants/regexPatterns.js";const t=function(t,o,r){let l=arguments.length>3&&void 0!==arguments[3]?arguments[3]:e.content.brand;console.log("here we are",r);const s=(null==o?void 0:o.length)?o.map((e=>e.updatedValue)):t.match(n);n.lastIndex=0;let a="",c=0;return t.replace(n,((e,n)=>{var o;const r=null!==(o=null==s?void 0:s[n])&&void 0!==o?o:"",d=`connectors_variable_${n+1}`;return a+=t.substring(c,n),a+=`${e}<span id="${d}" style="color: ${l}; text-decoration: underline; word-break: break-word;">${r}</span>`,c=n+e.length,e})),a+=t.substring(c),a};export{t as renderVariableUIForPreview};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.530-beta0.rt3",
+	"version": "0.0.530-beta0.rt5",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",