@bikdotai/bik-component-library 0.0.433-beta.19 → 0.0.433-beta.2

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

@@ -1,27 +1,28 @@
-import r from"styled-components";import{Caption as t}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";const o=r.div`
+import o from"styled-components";import{Caption as r}from"../../TypographyStyle.js";import{COLORS as e}from"../../../constants/Theme.js";const t=o.div`
 	background: ${e.surface.standard};
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: ${r=>r.isCarouselCard?"12px":"0px"};
+	border-top-left-radius: ${o=>o.isCarouselCard?"12px":"0px"};
 	border-top-right-radius: 12px;
 	border-bottom-right-radius: 12px;
 	border-bottom-left-radius: 12px;
 	position: relative;
 	padding: 8px 0px;
-	border: 2px solid
-		${r=>r.hasError?`${e.content.negative}`:r.showBorder?`${e.stroke.brand}`:`${e.text.white}`};
+	border-width: 2px;
+	border-color: ${e.stroke.brand};
+	border-style: ${o=>o.showBorder?"solid":"none"};
 	:hover {
 		border: 2px
-			${r=>r.isWhatsappCarousel?r.hasError?"dashed":r.showBorder?"solid":"dashed":"solid"}
+			${o=>o.isWhatsappCarousel?o.showBorder?"solid":"dashed":"none"}
 			${e.stroke.brand};
 	}
-`,i=r(t)`
+`,i=o(r)`
 	color: ${e.content.secondary};
 	max-width: 80px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	overflow: hidden;
 	text-wrap: wrap;
-`,d=r.div`
+`,d=o.div`
 	border-radius: 8px;
 	display: flex;
 	flex-direction: column;
@@ -30,19 +31,19 @@ import r from"styled-components";import{Caption as t}from"../../TypographyStyle.
 	min-height: 152px;
 	margin-bottom: 4px;
 	margin: 0px 8px;
-`,p=r.div`
+`,p=o.div`
 	padding: 12px;
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	border-top: 1px solid ${e.stroke.primary};
-`,s=r.div`
+`,s=o.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin: 8px 12px;
-`;r.div`
+`;o.div`
 	position: absolute;
 	bottom: -1px;
 	left: 0;
@@ -56,8 +57,8 @@ import r from"styled-components";import{Caption as t}from"../../TypographyStyle.
 	background: ${e.surface.hovered};
 	border-bottom-right-radius: 8px;
 	border-bottom-left-radius: 8px;
-`,r.div`
+`,o.div`
 	position: absolute;
 	top: 16px;
 	right: 16px;
-`;export{p as ChatBtnContainer,o as Container,s as FooterWrapper,d as MediaContainer,i as TimeStamp};
+`;export{p as ChatBtnContainer,t as Container,s as FooterWrapper,d as MediaContainer,i as TimeStamp};

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

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

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

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

package/dist/esm/components/template-preview/models/WhatsappCarouselTemplate.d.ts

@@ -73,7 +73,6 @@ export type WhatsAppCarouselTemplate = {
     createdAt: number;
     updatedAt: number;
     isDraft?: boolean;
-    isProductCarouselType?: boolean;
 };
 export interface WhatsAppCarouselTemplateVariables {
     body: CUSTOM_VARIABLE[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.433-beta.19",
+	"version": "0.0.433-beta.2",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",