@bikdotai/bik-component-library 0.0.687-beta.8 → 0.0.687-beta.9

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

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

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

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../../assets/icons/lto_icon.svg.js"),t=require("styled-components"),n=require("../../../TypographyStyle.js"),i=require("../../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=o(t);const d=s.default.div`
+	display: flex;
+	flex-direction: row;
+	background: #f6f6f6;
+	margin: 0px 10px;
+	overflow: hidden;
+	align-items: center;
+`,l=s.default.div`
+	width: 48px;
+	height: 48px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 24px;
+	background: #d8f0e7;
+	margin: 5px;
+`,c=s.default.div`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+`;exports.LimitedTimeOffer=t=>{const{text:o,dateTime:s,code:f}=t;return e.jsxs(d,{children:[e.jsx(l,{children:e.jsx(r.default,{width:24,height:24,style:{display:"flex"}})}),e.jsxs(c,{children:[e.jsx(n.BodySecondary,{numberOfLines:2,color:i.COLORS.content.primary,children:o}),e.jsxs(n.BodyTiny,{numberOfLines:3,style:{overflowWrap:"anywhere"},color:i.COLORS.content.secondary,children:["Offer Ends on ",s]}),e.jsxs(n.BodyTiny,{numberOfLines:2,color:i.COLORS.content.placeholder,children:["Code ",f]})]})]})},exports.StyledLimitedOfferTime=d,exports.StyledLtoIcon=l,exports.StyledLtoText=c;

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

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

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

@@ -0,0 +1,4 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),r=require("../../TypographyStyle.js"),n=require("../../../constants/Theme.js"),a=require("../constants/regexPatterns.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=s(t).default.div`
+	padding: 8px 12px 0px;
+	/* display: inline; */
+`;exports.default=t=>{const{text:s,bold:i}=t,o=s?.match(a.templateVariablePattern),d=i?{fontWeight:"600"}:{};return s?e.jsx(l,{children:s.split(a.templateVariablePattern).map(((t,a)=>e.jsxs(e.Fragment,{children:[e.jsx(r.BodyRegular,{style:d,children:t}),!!o?.[a]&&e.jsx(r.BodyRegular,{style:{color:n.COLORS.content.brand,...d},children:o?.[a]})]})))}):e.jsx(e.Fragment,{})};

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

@@ -0,0 +1,6 @@
+import React__default from 'react';
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate.js';
+
+declare const WhatsappLikePreview: React__default.FC<WhatsappLikePreviewTypes>;
+
+export { WhatsappLikePreview };

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

@@ -0,0 +1,12 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../TypographyStyle.js"),a=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),o=require("./ChatHeader.js"),s=require("./ChatUI.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=d(r);const p=n.default.div`
+	background-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');
+	border: ${e=>e.showHeader?0:1}px solid
+		${a.COLORS.stroke.primary};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+`,l=n.default(t.TitleRegular)`
+	color: ${a.COLORS.content.primary};
+`;exports.WhatsappLikePreview=r=>3===i.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):e.jsx(e.Fragment,{children:e.jsxs(p,{style:r.containerStyle,showHeader:r.showHeader,children:[r.showHeader&&e.jsx(o.default,{}),e.jsxs("div",{style:{padding:"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"},children:[!r.hidePreviewText&&e.jsx("div",{style:{marginBottom:16},children:e.jsx(l,{children:"Preview"})}),e.jsx(s.default,{showHeader:r.showHeader,...r})]})]})});

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

@@ -0,0 +1,6 @@
+import React__default from 'react';
+import { WhatsappLikePreviewTypes } from '../models/WhatsAppTemplate.js';
+
+declare const WhatsappLikePreviewV2: React__default.FC<WhatsappLikePreviewTypes>;
+
+export { WhatsappLikePreviewV2 };

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

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("styled-components"),t=require("../../template-context-mapper/context/templateModalContext.js"),a=require("../../template-context-mapper/utils/constants.js"),s=require("../../TypographyStyle.js"),o=require("../../../constants/Theme.js"),i=require("../utils/getPreviewPropLen.js"),n=require("./ChatHeader.js"),p=require("./ChatUiV2.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(r);const d=u.default.div`
+	background-image: ${e=>e.isWhatsappCarousel?"none":`url(${a.BACKGROUND_PREVIEW_IMAGE})`};
+	border-radius: 4px;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: cover;
+	position: relative;
+	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
+`,h=u.default(s.TitleRegular)`
+	color: ${o.COLORS.content.primary};
+`;exports.WhatsappLikePreviewV2=r=>{const{hideDeviceContainerInPreview:a}=t.useTemplateModalContext();return 3===i.getPreviewPropLen(r)?e.jsx(e.Fragment,{children:r.zeroStateComponent}):a?e.jsx(p.ChatUIV2,{showHeader:r.showHeader,...r}):e.jsx(e.Fragment,{children:e.jsxs(d,{style:r.containerStyle,showHeader:r.showHeader,isWhatsappCarousel:r.isWhatsappCarousel,children:[r.showHeader&&e.jsx(n.default,{}),e.jsxs("div",{style:{padding:"small"===r.size?"12px 32px 12px 12px":`16px ${r.isWhatsappCarousel?"0px":"56px"} ${r.isWhatsappCarousel?"2px":"16px"} 16px`,height:"100%",overflowY:"auto"},children:[!r.hidePreviewText&&e.jsx("div",{style:{marginBottom:16},children:e.jsx(h,{children:"Preview"})}),e.jsx(p.ChatUIV2,{showHeader:r.showHeader,...r})]})]})})};

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

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

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e="create-template",t={name:`${e}-name`,header:`${e}-header`,body:`${e}-body`,actionButtons:`${e}-action-buttons`,footer:`${e}-footer`};exports.BODY_LEN_ERROR="Maximum 1,024 characters are allowed",exports.BODY_TEXT_LEN_LIMIT=1024,exports.BUTTON_EMOJI_ERROR="Emojis are not allowed in button",exports.CREATE_TEMPLATE_DOM_IDS=t,exports.CUSTOM_URL_PLACEHOLDER="{{customUrl}}",exports.CUSTOM_URL_PLACEHOLDER_VAR="((customPlaceholderName))",exports.HEADER_ASSET_LINK_ERROR="Please attach the required media",exports.HEADER_LEN_ERROR="Maximum 60 characters are allowed",exports.HEADER_TEXT_LEN_LIMIT=60,exports.NAME_LEN_ERROR="Maximum 512 characters allowed",exports.NAME_LEN_LIMIT=512,exports.NO_SPECIAL_CHAR="No special characters allowed",exports.ONE_VAR_ALLOWED="Only one variable allowed in text header",exports.QUICK_REPLY_BTN_TEXT_LIMIT=25,exports.QUICK_REPLY_LEN_ERROR="Maximum 20 characters are allowed",exports.QUICK_REPLY_NAME_ERROR="Buttons with same name are not allowed",exports.QUICK_REPLY_NAME_LEN_LIMIT=20,exports.REQUIRED_FIELD="Required field",exports.VALID_PHONE_NUMBER="Please enter a valid 10-digit phone number";

package/dist/cjs/components/template-preview/constants/regexPatterns.d.ts

@@ -0,0 +1,13 @@
+declare const lockedVarPattern: RegExp;
+declare const editableVarPattern: RegExp;
+declare const placeHolderNamePattern: RegExp;
+declare const globalVariablePattern: RegExp;
+declare const globalHalfVariablePattern: RegExp;
+declare const specialCharPattern: RegExp;
+declare const variablePattern: RegExp;
+declare const variablePatternGlobal: RegExp;
+declare const templateVariablePattern: RegExp;
+declare const previewLinkMDFormatPattern: RegExp;
+declare const editableBracketPattern: RegExp;
+
+export { editableBracketPattern, editableVarPattern, globalHalfVariablePattern, globalVariablePattern, lockedVarPattern, placeHolderNamePattern, previewLinkMDFormatPattern, specialCharPattern, templateVariablePattern, variablePattern, variablePatternGlobal };

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

@@ -0,0 +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;

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

@@ -0,0 +1,5 @@
+import { CUSTOM_VARIABLE } from '../models/TemplateMeta.js';
+
+declare const renderVariableUIForPreview: (content: string, variablStore?: CUSTOM_VARIABLE[], brandColor?: string, uniqueId?: string) => string;
+
+export { renderVariableUIForPreview };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../constants/Theme.js"),a=require("../constants/regexPatterns.js");exports.renderVariableUIForPreview=(r,t,n=e.COLORS.content.brand,s)=>{const o=t?.length?t?.map((e=>e.updatedValue)):r.match(a.variablePatternGlobal);return a.variablePatternGlobal.lastIndex=0,r.split(a.variablePattern).map(((e,a)=>o?.[a]?`${e}<span></span><span id="${s||""}connectors_variable_${a+1}" style="color: ${n}; text-decoration: underline; word-break: break-word;">${o?.[a]??""}</span><span> </span>`:e)).join("")};

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

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

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

@@ -0,0 +1,10 @@
+type variableType = {
+    placeholder: string;
+    value: string;
+};
+declare class VariableEditorHelper {
+    format(text?: string, variableList?: variableType[]): string;
+}
+
+export { VariableEditorHelper };
+export type { variableType };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../helpers/BaseWhatsappContentLang.helper.js");require("../../curtain/CurtainHelper.js");var r=require("../constants/regexPatterns.js");const a=new e.BaseWhatsappContentLangHelper;exports.VariableEditorHelper=class{format(e,t){if(!e)return"";const l=new RegExp(r.variablePattern,"g"),p=e.match(l),n=t?.map((({placeholder:e})=>e))??[],c=e.split(r.variablePattern).map(((e,r)=>{const a=p?.[r];if(a){const r=a.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))",""),l=n.findIndex((e=>e.replace("{{","").replace("}}","").replace("[[","").replace("]]","").replace("((","").replace("))","")===r));return l>-1?e+'<code style="color: #731DCF">'+t?.[l]?.value+"</code>":e+a}return e})).join("");return a.getHTML(c)}};

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

@@ -0,0 +1,10 @@
+declare class WhatsAppFormatToHTML {
+    convertToHTML(str: string): string;
+    convertToBold(str: string): string;
+    convertItalics(str: string): string;
+    convertStrike(str: string): string;
+    convertNewline(str: string): string;
+    removeExtraNewLines(md: string): string;
+}
+
+export { WhatsAppFormatToHTML };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.WhatsAppFormatToHTML=class{convertToHTML(e){return this.convertNewline(this.convertStrike(this.convertItalics(this.convertToBold(e))))}convertToBold(e){return e.replace(/\*(.*?)\*/gim,"<b>$1</b>")}convertItalics(e){return e.replace(/_(.*)_/gim,"<em>$1</em>")}convertStrike(e){return e.replace(/~(.*)~/gim,"<s>$1</s>")}convertNewline(e){return e}removeExtraNewLines(e){return e.replace(/\n\n/g,"\n")}};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../models/Channels.js"),s=require("../models/RCSTemplate.js");const r=s=>s===e.CHANNEL_TYPE.RCS?0:1,o=e=>"carousel"===e?.toLowerCase();exports.determineCardIndex=r,exports.isCarouselComponent=o,exports.isItCarousal=(e,s)=>{const t=r(e);return o(s?.components?.[t]?.type)},exports.isRCSChannel=s=>s==e.CHANNEL_TYPE.RCS,exports.isRichAndCarouselCards=e=>e===s.RCS_TEMPLATE_TYPE.RICH_CARD||e===s.RCS_TEMPLATE_TYPE.CAROUSEL;

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

@@ -0,0 +1,12 @@
+declare enum CHANNEL_TYPE {
+    WHATSAPP = "whatsapp",
+    INSTAGRAM = "instagram",
+    TIKTOK = "tiktok",
+    EMAIL = "email",
+    SMS = "message",
+    WEBPUSH = "webpush",
+    MESSAGE = "message",
+    RCS = "rcs"
+}
+
+export { CHANNEL_TYPE };

package/dist/cjs/components/template-preview/models/Channels.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=(e=>(e.WHATSAPP="whatsapp",e.INSTAGRAM="instagram",e.TIKTOK="tiktok",e.EMAIL="email",e.SMS="message",e.WEBPUSH="webpush",e.MESSAGE="message",e.RCS="rcs",e))(e||{});exports.CHANNEL_TYPE=e;

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

@@ -0,0 +1,42 @@
+import { CHANNEL_TYPE } from './Channels.js';
+import { TEMPLATE_EDITOR, TEMPLATE_STATUS, CUSTOM_VARIABLE } from './TemplateMeta.js';
+
+type EmailTemplateType = {
+    category: string;
+    channel: CHANNEL_TYPE;
+    channelTemplateId: string;
+    createdAt: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    createdBy: 'admin';
+    editor: TEMPLATE_EDITOR;
+    htmlContentUrl: string;
+    name: string;
+    subject: string;
+    sendGridCategories: string[];
+    plainContent: string;
+    status: TEMPLATE_STATUS;
+    storeId: string;
+    templateId: string;
+    thumbnailUrl: string;
+    html_content?: string;
+    mapping: {
+        body: CUSTOM_VARIABLE[];
+    };
+    updatedAt: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    label: string;
+};
+type EmailMeta = {
+    hideViewButtonForEmail?: boolean;
+    containerStyle?: React.CSSProperties | undefined;
+    handleViewTemplate?: () => void;
+    emailDisplayContent?: string;
+    templateContainerStyles?: React.CSSProperties | undefined;
+    emailHtmlContainerId?: string;
+};
+
+export type { EmailMeta, EmailTemplateType };

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

@@ -0,0 +1,40 @@
+import { CHANNEL_TYPE } from './Channels.js';
+import { TEMPLATE_STATUS } from './TemplateMeta.js';
+import { WhatsAppTemplate } from './WhatsAppTemplate.js';
+
+interface RCSTemplateType extends WhatsAppTemplate {
+    id: string;
+    status: TEMPLATE_STATUS;
+    name: string;
+    content?: string;
+    mapping: {
+        [key: string]: string[] | object[];
+    };
+    mediaTemplateActionButtonTypes: {
+        [key: string]: string[] | object[];
+    };
+    customParams?: Record<string, string>;
+    destinationUrl?: Record<string, string>;
+    createdAt: number;
+    updatedAt: number;
+    templateType?: RCS_TEMPLATE_TYPE;
+    rcsBroadcastConfig?: {
+        mapping: {
+            [key: string]: string | object;
+        };
+    };
+    htmlContentUrl?: string;
+    templateId?: string;
+    channel: CHANNEL_TYPE;
+    headers?: string[];
+}
+declare enum RCS_TEMPLATE_TYPE {
+    TEXT_MESSAGE = "text_message",
+    TEXT_MESSAGE_WITH_PDF = "text_message_with_pdf",
+    CAROUSEL = "carousel",
+    RICH_CARD = "rich_card",
+    UNKNOWN = "unknown"
+}
+
+export { RCS_TEMPLATE_TYPE };
+export type { RCSTemplateType };

package/dist/cjs/components/template-preview/models/RCSTemplate.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=(e=>(e.TEXT_MESSAGE="text_message",e.TEXT_MESSAGE_WITH_PDF="text_message_with_pdf",e.CAROUSEL="carousel",e.RICH_CARD="rich_card",e.UNKNOWN="unknown",e))(e||{});exports.RCS_TEMPLATE_TYPE=e;

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

@@ -0,0 +1,39 @@
+import { CHANNEL_TYPE } from './Channels.js';
+import { CUSTOM_VARIABLE } from './TemplateMeta.js';
+
+type SMSTemplateType = {
+    category: 'other';
+    channel: CHANNEL_TYPE.SMS;
+    channelTemplateId: string;
+    content: string;
+    createdAt: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    createdBy: 'admin';
+    externalStatus: 'APPROVED';
+    headers: string[];
+    header?: string | null;
+    name: string;
+    status: 'ACTIVE';
+    storeId: string;
+    templateId: string;
+    templateType: string;
+    /** FRONTEND-ONLY DONT SEND TO FINAL PAYLOAD */
+    mapping: {
+        body: CUSTOM_VARIABLE[];
+    };
+    updatedAt: {
+        _seconds: number;
+        _nanoseconds: number;
+    };
+    label: string;
+};
+type SMSMeta = {
+    smsVariableStore?: CUSTOM_VARIABLE[];
+    smsDisplayContent?: string;
+    templateContainerStyles?: React.CSSProperties | undefined;
+    uniqueId?: string;
+};
+
+export type { SMSMeta, SMSTemplateType };

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

@@ -0,0 +1,95 @@
+import { SingleOption } from '../../dropdown/type.js';
+
+type CUSTOM_VARIABLE = {
+    variableName: string;
+    type: 'string' | 'link' | 'image' | 'button' | 'date_time';
+    isEditableVariable: boolean;
+    updatedValue: string;
+    index?: number;
+    variableValue?: string;
+    queryParams?: {
+        key: string;
+        value: string;
+    }[];
+    initialValue?: string;
+};
+type QueryParamtype = {
+    key: string;
+    value: string;
+};
+declare enum TEMPLATE_EDITOR {
+    SEND_GRID = "sendgrid",
+    BEE = "bee"
+}
+declare enum TEMPLATE_STATUS {
+    APPROVED = "APPROVED",
+    DISABLED = "DISABLED",
+    FLAGGED = "FLAGGED",
+    PENDING = "PENDING",
+    DRAFT = "DRAFT",
+    REJECTED = "REJECTED",
+    PENDING_DELETION = "PENDING_DELETION",
+    IN_REVIEW = "IN REVIEW",
+    PAUSED = "PAUSED",
+    ACTIVE = "ACTIVE",
+    LIBRARY = "LIBRARY"
+}
+declare enum HEADER_TYPES {
+    NONE = "NONE",
+    TEXT = "TEXT",
+    IMAGE = "IMAGE",
+    VIDEO = "VIDEO",
+    DOCUMENT = "DOCUMENT"
+}
+declare enum ACTIONS_TYPES {
+    NONE = "NONE",
+    CTA_BTN = "CTA_BTN",
+    QUICK_REPLY = "QUICK_REPLY"
+}
+interface QUICK_REPLY_BUTTON {
+    text: string;
+    flowId: string;
+    flowName: string;
+}
+declare const CUSTOM_URL_NAME: {
+    value: string;
+    label: string;
+    placeHolder: string;
+};
+declare const STATIC_URL_CTA_OPTION: {
+    label: string;
+    value: string;
+    placeHolder: string;
+};
+type GlobalPlaceholderType = {
+    MARKETING: {
+        customer: baseAPITemplateVariableType[];
+        storeDetails: baseAPITemplateVariableType[];
+        orderDetails: baseAPITemplateVariableType[];
+        abandonedCart: baseAPITemplateVariableType[];
+    };
+    TRANSACTIONAL: {
+        customer: baseAPITemplateVariableType[];
+        storeDetails: baseAPITemplateVariableType[];
+        orderDetails: baseAPITemplateVariableType[];
+        abandonedCart: baseAPITemplateVariableType[];
+    };
+};
+type baseAPITemplateVariableType = {
+    title: string;
+    default_value: string;
+    placeHolder: string;
+    type?: 'string' | 'url';
+};
+type globalNormalizedPlaceholdersType = {
+    label: string;
+    options: SingleOption[];
+};
+interface ButtonPlaceHolderOptions {
+    value: string;
+    label: string;
+    placeHolder: string;
+}
+
+export { ACTIONS_TYPES, CUSTOM_URL_NAME, HEADER_TYPES, STATIC_URL_CTA_OPTION, TEMPLATE_EDITOR, TEMPLATE_STATUS };
+export type { ButtonPlaceHolderOptions, CUSTOM_VARIABLE, GlobalPlaceholderType, QUICK_REPLY_BUTTON, QueryParamtype, baseAPITemplateVariableType, globalNormalizedPlaceholdersType };

package/dist/cjs/components/template-preview/models/TemplateMeta.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var E=(E=>(E.SEND_GRID="sendgrid",E.BEE="bee",E))(E||{}),T=(E=>(E.APPROVED="APPROVED",E.DISABLED="DISABLED",E.FLAGGED="FLAGGED",E.PENDING="PENDING",E.DRAFT="DRAFT",E.REJECTED="REJECTED",E.PENDING_DELETION="PENDING_DELETION",E.IN_REVIEW="IN REVIEW",E.PAUSED="PAUSED",E.ACTIVE="ACTIVE",E.LIBRARY="LIBRARY",E))(T||{}),N=(E=>(E.NONE="NONE",E.TEXT="TEXT",E.IMAGE="IMAGE",E.VIDEO="VIDEO",E.DOCUMENT="DOCUMENT",E))(N||{}),e=(E=>(E.NONE="NONE",E.CTA_BTN="CTA_BTN",E.QUICK_REPLY="QUICK_REPLY",E))(e||{});exports.ACTIONS_TYPES=e,exports.CUSTOM_URL_NAME={value:"custom_link",label:"Custom URL",placeHolder:"custom placeholder"},exports.HEADER_TYPES=N,exports.STATIC_URL_CTA_OPTION={label:"Custom URL (No tracking)",value:"static_link",placeHolder:"{{staticUrl}}"},exports.TEMPLATE_EDITOR=E,exports.TEMPLATE_STATUS=T;

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

@@ -0,0 +1,64 @@
+import { CHANNEL_TYPE } from './Channels.js';
+import { CUSTOM_VARIABLE } from './TemplateMeta.js';
+import { WhatsAppPickerMeta, WhatsAppTemplateVariables, TEMPLATE_BUTTON } from './WhatsAppTemplate.js';
+
+type WebpushTemplateType = {
+    name: string;
+    label: string;
+    templateId?: string;
+    channel: CHANNEL_TYPE;
+    templateCategory: string;
+    category: string;
+    mapping?: {
+        title?: string[];
+        body?: string[];
+        buttons?: string[];
+        icon?: string[];
+        image?: string[];
+    };
+    templateVariables?: WebpushTemplateVariables;
+    webpushBroadcastConfig?: {
+        [k in WEB_PUSH_COMPONENT_TYPE]?: string[];
+    };
+    components: WebPushTemplateComponent;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+};
+type WebpushMetaType = {
+    containerStyle?: React.CSSProperties | undefined;
+    extraContainerCss?: React.CSSProperties | undefined;
+};
+declare enum WEB_PUSH_COMPONENT_TYPE {
+    TITLE = "title",
+    BODY = "body",
+    ICON = "icon",
+    IMAGE = "image",
+    BUTTONS = "buttons",
+    redirectionLink = "redirectionLink"
+}
+type WebPushComponentType = {
+    text: string;
+    redirectionLink?: string;
+    websiteLink?: string;
+    variables?: {
+        name: string;
+        value: string;
+    }[];
+};
+type WebPushTemplateComponent = {
+    [WEB_PUSH_COMPONENT_TYPE.TITLE]: string;
+    [WEB_PUSH_COMPONENT_TYPE.BODY]: WebPushComponentType;
+    [WEB_PUSH_COMPONENT_TYPE.ICON]: string;
+    [WEB_PUSH_COMPONENT_TYPE.IMAGE]: string;
+    [WEB_PUSH_COMPONENT_TYPE.BUTTONS]: WebPushComponentType[];
+    [WEB_PUSH_COMPONENT_TYPE.redirectionLink]?: string;
+};
+interface WebpushTemplateVariables extends WhatsAppTemplateVariables {
+    title: CUSTOM_VARIABLE[];
+    body: CUSTOM_VARIABLE[];
+    buttons: TEMPLATE_BUTTON[];
+    image?: CUSTOM_VARIABLE[];
+    icon: CUSTOM_VARIABLE[];
+}
+
+export { WEB_PUSH_COMPONENT_TYPE };
+export type { WebPushComponentType, WebPushTemplateComponent, WebpushMetaType, WebpushTemplateType, WebpushTemplateVariables };

package/dist/cjs/components/template-preview/models/WebpushTemplate.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=(e=>(e.TITLE="title",e.BODY="body",e.ICON="icon",e.IMAGE="image",e.BUTTONS="buttons",e.redirectionLink="redirectionLink",e))(e||{});exports.WEB_PUSH_COMPONENT_TYPE=e;