@bikdotai/bik-component-library 0.0.395 → 0.0.396

package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts

@@ -1,18 +0,0 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    focused?: boolean | undefined;
-    channel?: CHANNEL_TYPE | undefined;
-}, never>;
-/** COMPONENT BELOW */
-export interface VariableConnectorProps {
-    onFocus?: () => void;
-    variable: CUSTOM_VARIABLE;
-    index: number;
-    showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
-    setShowDiscountCheckBox?: any;
-}
-declare const VariableConnector: ({ onFocus, variable, index, showVariableModal, variableList, setShowDiscountCheckBox, }: VariableConnectorProps) => import("react/jsx-runtime").JSX.Element;
-export default VariableConnector;

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

@@ -1,7 +0,0 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import t from"../../../assets/icons/edit.svg.js";import{useState as a,useEffect as o}from"react";import n from"styled-components";import{AddVariableV2SideModal as i}from"../../add-variableV2/AddVariableV2SideModal.js";import{Dropdown as u}from"../../dropdown/Dropdown.js";import{Input as s}from"../../input/Input.js";import{truncate as d}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as r}from"../../template-preview/constants/regexPatterns.js";import{CHANNEL_TYPE as c}from"../../template-preview/models/Channels.js";import{BodySecondary as m,BodyPrimary as p}from"../../TypographyStyle.js";import v from"../../../utils/StringUtils.js";import{COLORS as b}from"../../../constants/Theme.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as h}from"../utils/getVariableNameEmail.js";const x=n.div`
-	/* surface/$color-background-warning-light */
-
-	background: ${e=>e.focused&&e.channel===c.EMAIL?b.background.warning.light:"transparent"};
-	border-radius: 4px;
-	padding: 8px 10px;
-`,f={value:"custom_link",label:"Custom URL"},_={value:"custom_text",label:"Custom text"},j=n=>{let{onFocus:j,variable:k,index:y,showVariableModal:V,variableList:A,setShowDiscountCheckBox:O}=n;var T,E;const[P,S]=a(!1),[w,L]=a(""),[C,M]=a([]),[W,$]=a(),[H,I]=a(!1),[B,N]=a(!1),{device:z,channel:R,isError:U,originalVariableList:D,template:Z,templateSelectionTriggered:G,setTemplate:q,setDisplayContent:F,setOriginalVariableList:Y,globalNormalizedPlaceholders:J,enabledCustomText:K}=g();function Q(e,l){var t,a,o;const n=e;L(""),$(n),R===c.WHATSAPP?"custom_text"!==n.value&&"custom_link"!==n.value?(X(null!==(t=n.value)&&void 0!==t?t:"","string"),null==ee||ee(null!==(a=k.index)&&void 0!==a?a:0,`[[${n.value}]]`)):(null==ee||ee(null!==(o=k.index)&&void 0!==o?o:0,k.variableName),X("","url"===n.bikPlaceholderType?"link":"string")):"custom_text"!==n.value&&"custom_link"!==n.value?X(n.value,"url"===n.bikPlaceholderType?"link":"string"):(L(""),X("",n.value))}function X(e,l){var t,a;const o="custom_link"===l?"link":"custom_text"===l?"string":l;if(R!==c.WHATSAPP){const a=h(y+1),n=null===document||void 0===document?void 0:document.getElementById("mobile"===z?"template_html_mobile":"template_html_desktop"),i=R===c.EMAIL?null===(t=null==n?void 0:n.contentWindow)||void 0===t?void 0:t.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==l&&"custom_link"!==l||e?e:k.variableName);const u=D.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==Y||Y(u)}if(R===c.WHATSAPP){const l=null===(a=D.body)||void 0===a?void 0:a.map(((l,t)=>t===y?Object.assign(Object.assign({},l),{type:o,updatedValue:e}):l));null==Y||Y((e=>Object.assign(Object.assign({},e),{body:l,buttons:D.buttons})))}}function ee(e,l){var t;const a=Object.assign({},Z),o=null===(t=null==a?void 0:a.components)||void 0===t?void 0:t.map((t=>{var a,o,n,i,u;const s=Object.assign({},t);if("BODY"===t.type&&(null===(o=null===(a=t.example)||void 0===a?void 0:a.body_text)||void 0===o?void 0:o[0])){const t=[...null!==(u=null===(i=null===(n=s.example)||void 0===n?void 0:n.body_text)||void 0===i?void 0:i[0])&&void 0!==u?u:[]];t[e]=l.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},s.example),{body_text:[t]});return Object.assign(Object.assign({},s),{example:a})}return t}));a.components=o,null==q||q(a)}return o((()=>{P&&(null==j||j())}),[P]),o((()=>{!function(){var e,l,t,a,o;const n="mobile"===z?"template_html_mobile":"template_html_desktop",i=document.getElementById(n),u=(null!==(a=null===(t=null===(l=null===(e=null==i?void 0:i.contentWindow)||void 0===e?void 0:e.document)||void 0===l?void 0:l.body)||void 0===t?void 0:t.innerHTML)&&void 0!==a?a:"")+(null===(o=null==i?void 0:i.contentWindow)||void 0===o?void 0:o.document.head.innerHTML);R===c.EMAIL&&(null==F||F(u))}()}),[G]),o((()=>{var e;const l=[];let t=[];if(R!==c.MESSAGE||K){"link"===(null==k?void 0:k.type)?(l.push({label:"",options:[f,_]}),$(f)):(l.push({label:"",options:[f,_]}),$(_));const e=null!=J?J:[];M([...l,...e.map((e=>{var l,t;return Object.assign(Object.assign({},e),{label:v.toCapitilize(null===(t=null===(l=e.label)||void 0===l?void 0:l.replace(/([A-Z])/g," $1"))||void 0===t?void 0:t.toLowerCase())})}))]),t=[...l,...e]}else{const e=null!=J?J:[];M([{label:"",options:[_,f]},...e]),t=[{label:"",options:[_,f]},...e]}if((R===c.WHATSAPP||R===c.EMAIL||R===c.MESSAGE)&&k.updatedValue)if(r.test(k.updatedValue)&&R===c.WHATSAPP||k.updatedValue.startsWith("{{")&&R!==c.WHATSAPP){const e=function(e,l,t){var a;let o={label:"",value:""};const n=t===c.WHATSAPP?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");V?o={label:e.updatedValue?e.updatedValue.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(a=e.updatedValue)&&void 0!==a?a:""}:l.map((e=>{e.options.map((e=>{var l;(null===(l=e.value)||void 0===l?void 0:l.replace("{{","").replace("}}","").trim())===n.trim()&&(o=e)}))}));return o}(k,t,R);e.value&&$(e)}else(null===(e=k.updatedValue)||void 0===e?void 0:e.startsWith("https"))?($(f),L(k.updatedValue.split("https://")[1])):($(_),L(k.updatedValue))}),[]),o((()=>{z&&W&&w&&setTimeout((()=>{X("custom_link"===(null==W?void 0:W.value)?w.includes("https")?w:`https://${w}`:w,W.value)}),100)}),[z]),o((()=>{!B&&W&&k.updatedValue&&setTimeout((()=>{X("custom_link"===(null==W?void 0:W.value)?w.includes("https")?k.updatedValue:`https://${k.updatedValue}`:k.updatedValue,W.value),N(!0)}),100)}),[W]),e(x,Object.assign({channel:R,focused:P,onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1)},{children:[l("div",Object.assign({style:{marginBottom:8}},{children:e(m,Object.assign({style:{color:U&&!W?b.content.negative:b.content.primary}},{children:[null===(T=k.variableName)||void 0===T?void 0:T.replace("{{","").replace("}}","")," ","link"===(null==k?void 0:k.type)?"link":"variable"]}))})),l("div",Object.assign({style:{marginBottom:12}},{children:V?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==W?void 0:W.label)?"space-between":"flex-end"}},{children:[l(p,{children:d(null!==(E=null==W?void 0:W.label)&&void 0!==E?E:"",20,!0)}),l(t,{onClick:()=>{I(!H)},width:24,height:24,color:b.content.primary})]})):l(u,{options:C,isSearchable:!1,onSelect:Q,defaultOptions:W?[Object.assign(Object.assign({},W),{selected:!0})]:[]})})),("custom_text"===(null==W?void 0:W.value)||"custom_link"===(null==W?void 0:W.value))&&l(s,{labelText:"custom_text"===(null==W?void 0:W.value)?"Custom text value":"custom_link"===(null==W?void 0:W.value)?"Custom URL value":"",id:`variable-value-${null==W?void 0:W.value}-${y}`,value:w,errorMessage:U?w&&0!==w.trim().length?"custom_link"!==W.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${w.trim()}`)&&0!==w.trim().length?"custom_link"!==W.value&&w.length>30?"Length cannot be more than 30":"":"Enter valid URL":"Required field":"",maxCharLimit:"custom_link"===(null==W?void 0:W.value)?void 0:30,prefixText:"custom_link"===(null==W?void 0:W.value)?"https://":"",placeholder:"link"===k.type||"custom_link"===W.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{!function(e,l){var t;L(l);const a="custom_link"===(null==W?void 0:W.value)?l.includes("https")?l:`https://${l}`:l;X(a,e),R===c.WHATSAPP&&(null==ee||ee(null!==(t=k.index)&&void 0!==t?t:0,a))}(W.value,e)}}),H&&l(i,{zIndex:2e3,data:null!=A?A:[],showVariable:H,setShowVariable:I,placeholder:"Add a variable",customTrigger:e=>{O(!1),"{{custom.url}}"===e.actualValue?Q({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Q({label:e.displayName,selected:!0,value:"custom_text"}):Q({label:e.actualValue.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})}})]}))};export{x as Container,j as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorWhatsApp.d.ts

@@ -1,13 +0,0 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
-export type ComponentType = WhatsAppTemplate['components'][0];
-export interface VariableConnectorWhatsAppProps {
-    originalVariableList: WhatsAppTemplateVariables;
-    descriptionComponent: ComponentType;
-    variableMapping: string[] | undefined;
-    type: ComponentType['type'];
-    showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
-}
-declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, variableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
-export default VariableConnectorWhatsApp;

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

@@ -1 +0,0 @@
-import{jsx as e,jsxs as a,Fragment as i}from"react/jsx-runtime";import{Input as t}from"../../input/Input.js";import{BodySecondary as r}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";import{useTemplateModalContext as l}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const s=s=>{let{descriptionComponent:d,type:p,showVariableModal:m,variableList:b}=s;var c;const{originalVariableList:v,disableEditVariable:h}=l();return"BODY"===d.type?e("div",{children:null===(c=null==v?void 0:v.body)||void 0===c?void 0:c.map(((i,l)=>h||!i.isEditableVariable?a("div",Object.assign({style:{margin:"16px 8px"}},{children:[a(r,Object.assign({style:{color:o.content.primary}},{children:["HEADER"===p?"Header":""," Locked variable ",l+1]})),e(t,{state:"disabled",placeholder:i.variableName,onChangeText:()=>{}})]}),l):e(n,{index:l,variable:i,showVariableModal:m,variableList:b},`${l}-${i.index}`)))}):e(i,{})};export{s as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts

@@ -1,12 +0,0 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface VariableConnectorsProps {
-    onFocus?: (variableIndex: number) => void;
-    showVariableModal?: boolean;
-    variableList?: VariableListInterfaceV2[];
-    discountCode?: string;
-    setDiscountCode?: (code: string) => void;
-}
-declare const VariableConnectors: ({ onFocus, showVariableModal, variableList, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
-export default VariableConnectors;
-export declare const AddVariableStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -1,28 +0,0 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as a,useRef as o,useEffect as r}from"react";import l from"styled-components";import{AddVariableV2SideModal as n}from"../../add-variableV2/AddVariableV2SideModal.js";import"../../../_virtual/_tslib.js";import s from"../../../assets/icons/plus.svg.js";import"../../add-variableV2/AddVariableV2.styled.js";import"../../button/Button.js";import"../../icon-button/IconButton.js";import{Input as d}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as p}from"../../../constants/Theme.js";import"../../modals/modal.styled.js";import"../../switch/Switch.js";import{TitleRegular as m,BodySecondary as h,TitleSmall as b}from"../../TypographyStyle.js";import{CheckBox as u}from"../../checkBox/CheckBox.js";import{useTemplateModalContext as g}from"../context/templateModalContext.js";import f from"./VariableConnector.js";const v=l.div`
-	overflow-y: auto;
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-`,j=l=>{let{onFocus:j,showVariableModal:x,variableList:V,discountCode:w,setDiscountCode:O}=l;const{originalVariableList:k,disableEditVariable:C}=g(),[T,B]=a(!1),[E,L]=a(!1),[A,I]=a(!1),[S,M]=a(""),[D,F]=a(!1),N=o(),z=o();return r((()=>{O&&O(w+S)}),[S]),r((()=>{k.forEach((e=>{"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")&&(B(!0),w&&F&&F(!0))}))}),[k]),e(v,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(m,Object.assign({style:{color:p.content.primary}},{children:"Edit variables and links"})),i(c,Object.assign({body:"Variables are placeholder texts which can either be filled by data, eg: customer name or can have any custom text within them"},{children:i("div",Object.assign({style:{display:"flex"}},{children:i(t,{width:20,height:20,color:p.content.placeholder})}))}))]})),i(h,Object.assign({style:{color:p.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==k?void 0:k.map(((t,a)=>!t.isEditableVariable||C?e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(h,Object.assign({style:{color:p.content.primary}},{children:["Locked variable ",a+1]})),i(d,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),a):i("div",Object.assign({style:{marginTop:16}},{children:i(f,{index:a,variable:t,onFocus:()=>null==j?void 0:j(a),showVariableModal:x,variableList:V,setShowDiscountCheckBox:B})}),a))),(T||w)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(u,{isChecked:D,onValueChange:()=>{D&&O&&O(""),F(!D)}}),i(b,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),D&&e("div",Object.assign({ref:N,style:{margin:10}},{children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:w,onFocus:()=>{L(!0)},onBlur:e=>{var i;"addVar"===(null===(i=e.relatedTarget)||void 0===i?void 0:i.id)?(N.current&&N.current.focus(),L(!0)):(L(!1),I(!1))},noErrorHint:!0,validate:e=>[!0,""]}),E&&i(y,Object.assign({ref:z,id:"addVar",onClick:e=>{e.stopPropagation(),I(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(s,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]})),A&&i(n,{zIndex:2e3,data:null!=V?V:[],showVariable:A,setShowVariable:I,variableValue:S,setVariableValue:M,placeholder:"Add a variable",customTrigger:e=>{M(e.actualValue),L(!1)}})]})},y=l.button`
-	padding: 2px 8px;
-	cursor: pointer;
-	color: white;
-	background-color: black;
-	width: fit-content;
-	float: right;
-	margin-top: 0px;
-	font-family: Inter;
-	font-style: normal;
-	font-weight: 600;
-	font-size: 14px;
-	line-height: 20px;
-	align-self: flex-end;
-	border-radius: 4px;
-	border: 1px solid #ccc;
-	margin-right: 1px;
-
-	.add {
-		display: flex;
-		align-items: center;
-	}
-`;export{y as AddVariableStyled,v as Container,j as default};

package/dist/esm/components/template-context-mapper/modalElements/VariableEditorHeader.d.ts

@@ -1,9 +0,0 @@
-import { CSSProperties } from 'react';
-export interface VariableEditorHeaderProps {
-    headerText: string;
-    subText: string;
-    toolTipInfo?: string;
-    containerStyle?: CSSProperties;
-}
-declare const VariableEditorHeader: ({ headerText, subText, toolTipInfo, containerStyle, }: VariableEditorHeaderProps) => import("react/jsx-runtime").JSX.Element;
-export default VariableEditorHeader;

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

@@ -1,9 +0,0 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o from"../../../assets/icons/info.svg.js";import i from"styled-components";import{Tooltip as n}from"../../tooltips/Tooltip.js";import{BodySecondary as r,TitleRegular as s}from"../../TypographyStyle.js";import{COLORS as l}from"../../../constants/Theme.js";const a=i(r)`
-	line-height: 1.5 !important;
-`,c=i.div`
-	padding-top: 24px;
-	padding-left: 10px;
-	padding-right: 10px;
-	margin-bottom: 8px;
-	line-height: normal;
-`,p=i=>{let{headerText:r,subText:p,toolTipInfo:d,containerStyle:m}=i;return t(c,Object.assign({style:Object.assign({},m)},{children:[t("div",Object.assign({style:{display:"flex",gap:8}},{children:[e(s,Object.assign({style:{color:l.content.primary}},{children:r})),d&&e(n,Object.assign({body:p},{children:e("div",{children:e(o,{width:20,height:20,color:l.content.placeholder})})}))]})),e(a,Object.assign({style:{color:l.content.secondary,marginBottom:0,lineHeight:20,display:"block"}},{children:p}))]}))};export{p as default};

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

@@ -1,15 +0,0 @@
-import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
-import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
-import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
-export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
-export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
-export interface WhatsAppTemplateCardButtonV2Props {
-    originalVariableList: WhatsAppTemplateVariables;
-    updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
-    updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
-    button: TEMPLATE_BUTTON;
-    CTAoptions?: ButtonPlaceHolderOptions[];
-    QRBoptions?: ButtonPlaceHolderOptions[];
-}
-declare const WhatsAppTemplateCardButtonV2: ({ button, updateSelectedURLTemplateBtn, updateSelectedQRBTemplateBtn, originalVariableList, CTAoptions, QRBoptions, }: WhatsAppTemplateCardButtonV2Props) => import("react/jsx-runtime").JSX.Element;
-export default WhatsAppTemplateCardButtonV2;

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

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

package/dist/esm/components/template-context-mapper/utils/convertPlaceholdersToBikDropdown.d.ts

@@ -1,6 +0,0 @@
-import { SingleOption } from "../../dropdown/type";
-import { GlobalPlaceholderType } from "../../template-preview/models/TemplateMeta";
-export declare const convertPlaceholdersToBikDropdown: (data?: GlobalPlaceholderType) => {
-    label: string;
-    options: SingleOption[];
-}[];

package/dist/esm/components/template-context-mapper/utils/convertPlaceholdersToBikDropdown.js

@@ -1 +0,0 @@
-const l=l=>{const e=[];return l&&Object.keys(l).forEach((o=>{var t;const r=l[o],n=null!==(t=null==r?void 0:r.map((l=>{var e;return{label:l.title,value:l.placeHolder,bikPlaceholderType:null!==(e=l.type)&&void 0!==e?e:"string"}})))&&void 0!==t?t:[];e.push({label:o,options:n})})),e};export{l as convertPlaceholdersToBikDropdown};

package/dist/esm/components/template-context-mapper/utils/getDataFromTemplateComponent.d.ts

@@ -1,21 +0,0 @@
-import { WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
-type ComponentType = WhatsAppTemplate['components'][0];
-export declare const getAllDataFromTemplateComponent: (template: WhatsAppTemplate) => {
-    imageComponent: null;
-    descriptionComponents: {
-        component: ComponentType;
-        i: number;
-        type: ComponentType['type'];
-    }[];
-    urlBtns: {
-        component: ComponentType;
-        i: number;
-    }[];
-    qrbBtns: {
-        component: ComponentType;
-        i: number;
-    }[];
-    bodyVariables: string[];
-    headerVariables: string[];
-};
-export {};

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

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

package/dist/esm/components/template-context-mapper/utils/getFormattedMonthDate.d.ts

@@ -1 +0,0 @@
-export declare function getFormattedMonthDate(date: Date): string;

package/dist/esm/components/template-context-mapper/utils/getFormattedMonthDate.js

@@ -1 +0,0 @@
-const t=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];function e(e){if("string"==typeof e)return e;const n=t[e.getMonth()],r=e.getDate();return`${n} ${r<10?"0":""}${r}`}export{e as getFormattedMonthDate};

package/dist/esm/components/template-context-mapper/utils/getVariableNameEmail.d.ts

@@ -1,2 +0,0 @@
-export declare const SMS_TEMPLATE_VAR_PATTERN: RegExp;
-export declare const getVariableNameForEmailByIndex: (index: number) => string;

package/dist/esm/components/template-context-mapper/utils/getVariableNameEmail.js

@@ -1 +0,0 @@
-const o=o=>"connectors_variable_"+o;export{o as getVariableNameForEmailByIndex};

package/dist/esm/components/template-context-mapper/utils/highlightFor.d.ts

@@ -1,3 +0,0 @@
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { DEVICE_TYPES } from '../context/templateModalContext';
-export declare function highlightFor(id: string, color: string, seconds: number, channel: CHANNEL_TYPE, device: DEVICE_TYPES): void;

package/dist/esm/components/template-context-mapper/utils/highlightFor.js

@@ -1 +0,0 @@
-import{CHANNEL_TYPE as e}from"../../template-preview/models/Channels.js";function o(o,t,n,l,d){var m;const i=null===document||void 0===document?void 0:document.getElementById("mobile"===d?"template_html_mobile":"template_html_desktop"),u=l===e.EMAIL?null===(m=null==i?void 0:i.contentWindow)||void 0===m?void 0:m.document.getElementById(o):document.getElementById(o);if(u){const e=u.style.backgroundColor;u.style.backgroundColor=t,setTimeout((function(){u.style.backgroundColor=e}),1e3*n)}}export{o as highlightFor};

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

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

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

@@ -1 +0,0 @@
-const d=d=>!!new RegExp("^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_,.~+=/-]*)?(\\#[-a-z\\d_]*)?$","i").test(d);export{d as validateIsUrl};

package/dist/esm/components/template-preview/EmailTemplateHTMLPreview.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare const EmailTemplateHTMLPreview: React.FC<{
-    display_content: string;
-    containerId: string;
-}>;

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

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

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

@@ -1,43 +0,0 @@
-import r from"styled-components";import{COLORS as e,BASE_COLORS as o}from"../../constants/Theme.js";const t=r.div`
-	padding: 16px;
-	padding-bottom: 12px;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	border: 1px solid ${e.stroke.primary};
-`,i=r.div`
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-left: 1px solid ${e.stroke.primary};
-	border-right: 1px solid ${e.stroke.primary};
-	border-top-color: ${e.stroke.primary};
-	border-top-width: ${r=>r.hideHeader?"1px":"0px"};
-	overflow: scroll;
-`,d=r.div`
-	width: 100%;
-	height: 100%;
-	background-color: ${o.grayscale[100]};
-`,s=r.div`
-	height: 100%;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	flex-grow: 1;
-	min-height: 180px;
-`,p=r.div`
-	display: flex;
-	justify-content: center;
-	width: 100%;
-	background: ${e.surface.standard};
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-	border: 1px solid ${e.stroke.primary};
-`,a=r.div`
-	border-radius: 4px;
-	background-color: ${e.surface.standard};
-	margin-top: ${r=>r.hideHeader?0:16};
-	display: flex;
-	flex-direction: column;
-`;export{d as CardLoadingContainer,a as EmailContainer,t as Header,s as IframeContainer,i as ImageContainer,p as ViewButton};

package/dist/esm/components/template-preview/EmailTemplateThumbnailPreview.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { CSSProperties } from 'styled-components';
-import { EmailTemplateType } from './models/EmailTemplate';
-declare const EmailTemplateThumbnailPreview: React.FC<{
-    template: EmailTemplateType;
-    hideHeader?: boolean;
-    handleViewTemplate: () => void;
-    hideViewButton?: boolean;
-    containerStyle?: CSSProperties;
-    emailHtmlContainerId?: string;
-    emailDisplayContent?: string;
-}>;
-export default EmailTemplateThumbnailPreview;

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

@@ -1 +0,0 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{Button as i}from"../button/Button.js";import{TitleRegular as n}from"../TypographyStyle.js";import{EmailContainer as r,Header as l,IframeContainer as a,ImageContainer as o,CardLoadingContainer as m,ViewButton as s}from"./EmailTemplatePreview.styled.js";const d=d=>{let{template:c,handleViewTemplate:h,hideHeader:p,hideViewButton:y,containerStyle:u,emailHtmlContainerId:j,emailDisplayContent:b}=d;return e(r,Object.assign({hideHeader:p,style:Object.assign({},null!=u?u:{})},{children:[!p&&t(l,{children:t(n,Object.assign({style:{maxWidth:"100%"}},{children:c.name}))}),t(a,{children:b?t("iframe",{title:"Email template preview",id:null!=j?j:"",width:"100%",srcDoc:b,height:"100%",style:{pointerEvents:"none"}}):t(o,Object.assign({hideHeader:p},{children:t(m,{})}))}),!y&&t(s,{children:t(i,{buttonType:"tertiary",buttonText:"View",onClick:()=>{h&&h()}})})]}))};export{d as default};

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

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

package/dist/esm/components/template-preview/SMS/SMSBubble.js

@@ -1,12 +0,0 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import e from"../../../assets/icons/union.svg.js";import i from"styled-components";import{COLORS as n}from"../../../constants/Theme.js";const r=i.div`
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	left: -10px;
-	bottom: -1px;
-`,s=i.div`
-	padding: 12px;
-	background: ${n.background.base};
-	border-radius: 16px;
-	position: relative;
-`,d=i=>{const{content:d,size:a}=i;return t(s,{children:[o(r,{children:o(e,{color:n.background.base,height:27,width:27})}),o("div",{style:{fontSize:"small"===a?12:14},dangerouslySetInnerHTML:{__html:d}})]})};export{s as SMSContainer,r as SideCaret,d as default};

package/dist/esm/components/template-preview/SmsTemplatePreview.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { SMSTemplateType } from './models/SmsTemplate';
-import { CUSTOM_VARIABLE } from './models/TemplateMeta';
-declare const SmsTemplatePreview: React.FC<{
-    template: SMSTemplateType;
-    variableStore?: CUSTOM_VARIABLE[];
-    hideHeader?: boolean;
-    onlyTemplateContent?: boolean;
-    display_content?: string;
-    size?: 'small' | 'large';
-}>;
-export default SmsTemplatePreview;

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

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

package/dist/esm/components/template-preview/SmsTemplatePreview.styled.d.ts

@@ -1,13 +0,0 @@
-export declare const SideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSBubbleContainer: import("styled-components").StyledComponent<"div", any, {
-    size?: "small" | "large" | undefined;
-}, never>;
-export declare const SMSCardHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSInnerContainer: import("styled-components").StyledComponent<"div", any, {
-    hideHeader?: boolean | undefined;
-    outsidePreview?: boolean | undefined;
-}, never>;
-export declare const BubbleSideCaret: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BubbleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SMSHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,46 +0,0 @@
-import r from"styled-components";import{COLORS as o}from"../../constants/Theme.js";r.div`
-	position: absolute;
-	width: 8px;
-	height: 8px;
-	left: -5px;
-	bottom: 2px;
-`;const d=r.div`
-	padding: ${r=>"small"===r.size?"12px 32px 12px 12px":"16px 56px 12px 16px"};
-	background: ${o.surface.standard};
-	border-radius: 4px;
-`,p=r.div`
-	padding: 16px;
-	background: ${o.surface.standard};
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-	border-bottom: 1px solid ${o.stroke.primary};
-`;r.div`
-	border: 1px solid ${o.stroke.primary};
-	height: 100%;
-	border-top-left-radius: 4px;
-	border-top-right-radius: 4px;
-`,r.div`
-	margin-top: ${r=>r.hideHeader?0:"16px"};
-	border-radius: 4px;
-	border-color: ${o.stroke.primary};
-	border-width: ${r=>r.outsidePreview?0:"1px"};
-`,r.div`
-	position: absolute;
-	width: 30px;
-	height: 30px;
-	left: -10px;
-	bottom: -1px;
-`,r.div`
-	padding: 12px;
-	background: ${o.background.base};
-	border-radius: 16px;
-`;const t=r.div`
-	padding: 10px;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-	background: ${o.surface.standard};
-	display: flex;
-	justify-content: space-between;
-	border-bottom: 1px solid ${o.background.base};
-`;export{d as SMSBubbleContainer,p as SMSCardHeader,t as SMSHeader};

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { CHANNEL_TYPE } from './models/Channels';
-import { EmailMeta, EmailTemplateType } from './models/EmailTemplate';
-import { SMSMeta, SMSTemplateType } from './models/SmsTemplate';
-import { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';
-export interface TemplatePreviewProps {
-    template?: WhatsAppTemplate | SMSTemplateType | EmailTemplateType;
-    channel: CHANNEL_TYPE;
-    onlyTemplateContent?: boolean;
-    outsidePreview?: boolean;
-    templateCreationsInfo?: boolean;
-    whatsAppSpecificMeta?: WhatsappMeta;
-    emailSpecificMeta?: EmailMeta;
-    smsSpecificMeta?: SMSMeta;
-    hideHeader?: boolean;
-    size?: 'small' | 'large';
-    templateContainerStyles?: React.CSSProperties;
-}
-export declare const TemplatePreview: ({ template, channel, whatsAppSpecificMeta, templateCreationsInfo, hideHeader, size, onlyTemplateContent, emailSpecificMeta, smsSpecificMeta, }: TemplatePreviewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +0,0 @@
-import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import i from"../../utils/StringUtils.js";import{COLORS as a}from"../../constants/Theme.js";import{TitleRegular as n}from"../TypographyStyle.js";import o from"./EmailTemplateThumbnailPreview.js";import{CHANNEL_TYPE as r}from"./models/Channels.js";import s from"./SmsTemplatePreview.js";import d from"./WhatsAppTemplatePreview.js";const p=p=>{let{template:c,channel:u,whatsAppSpecificMeta:v,templateCreationsInfo:h,hideHeader:b,size:y,onlyTemplateContent:S,emailSpecificMeta:g,smsSpecificMeta:j}=p;var T,C;return u===r.SMS?e("div",Object.assign({style:Object.assign({marginTop:h?16:0,border:h?`1px solid ${a.stroke.primary}`:"none",borderRadius:4},null==j?void 0:j.templateContainerStyles)},{children:e(s,{template:c,hideHeader:b,onlyTemplateContent:S,size:null!=y?y:"large",variableStore:null==j?void 0:j.smsVariableStore,display_content:null==j?void 0:j.smsDisplayContent})})):u===r.EMAIL?e("div",Object.assign({style:Object.assign({marginTop:h?16:0},null==g?void 0:g.templateContainerStyles)},{children:e(o,{template:c,handleViewTemplate:()=>{var e;null===(e=null==g?void 0:g.handleViewTemplate)||void 0===e||e.call(g)},hideHeader:b,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})})):u===r.WHATSAPP?t("div",Object.assign({style:Object.assign(Object.assign({},null==v?void 0:v.templateContainerStyles),h?m.WhatsAppWrapper:{})},{children:[h?e("div",Object.assign({style:{padding:16}},{children:e(n,{children:i.convertToTitleCase(null!==(T=null==c?void 0:c.label)&&void 0!==T?T:"")})})):e(l,{}),e(d,{showHeader:null==v?void 0:v.showWhatsAppHeader,extras:null==v?void 0:v.whatsAppExtras,template:c,size:h?"small":null!=y?y:"large",containerStyle:Object.assign({borderWidth:h?0:1,borderTopWidth:1},null!==(C=null==v?void 0:v.containerStyle)&&void 0!==C?C:{}),zeroStateComponent:null==v?void 0:v.zeroStateComponent,usePlaceHolderName:null==v?void 0:v.usePlaceHolderName})]})):e(l,{})},m={WhatsAppWrapper:{backgroundColor:a.surface.standard,borderRadius:4,border:`1px solid ${a.background.inactive}`,marginTop:16}};export{p as TemplatePreview};

package/dist/esm/components/template-preview/WhatsApp/ChatBtn.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export declare const ChatBtn: React.FC<{
-    Icon?: React.FC<React.SVGProps<SVGSVGElement>>;
-    text: string;
-    extraContent?: string;
-    placeholder?: string;
-    textTypography?: React.FC;
-    size?: 'small' | 'large';
-}>;

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

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

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

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

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

@@ -1 +0,0 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import t from"../../../assets/icons/arrow_left.svg.js";import s from"../../../assets/icons/user_icon.svg.js";import o from"../../../assets/icons/vertical_dots.svg.js";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as n}from"../../../constants/Theme.js";import{HeaderContainer as c,LeftContainer as m,IconContainer as a,TitleContainer as h,SubTitle as l}from"./ChatHeader.style.js";const p=()=>r(c,{children:[r(m,{children:[e(t,{height:16,width:16,color:n.content.primaryInverse}),e(a,{children:e(s,{height:14,width:14,color:n.content.primaryInverse})}),r(h,{children:[e(i,Object.assign({color:n.content.primaryInverse},{children:"Brand name"})),e(l,{children:"Business account"})]})]}),e(o,{height:16,width:16,color:n.content.primaryInverse})]});export{p as default};

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

@@ -1,5 +0,0 @@
-export declare const HeaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LeftContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SubTitle: import("styled-components").StyledComponent<"p", any, {}, never>;

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

@@ -1,37 +0,0 @@
-import e from"styled-components";import{COLORS as t}from"../../../constants/Theme.js";const n=e.div`
-	height: 50px;
-	background-color: #008069;
-	position: sticky;
-	top: 0px;
-	z-index: 200;
-	padding: 6px 4px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 5px;
-`,i=e.div`
-	display: flex;
-	align-items: center;
-	gap: 5px;
-`,o=e.div`
-	height: 27px;
-	width: 27px;
-	border-radius: 15px;
-	background-color: #d1d8db;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 6px;
-`,p=e.div`
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-`,r=e.p`
-	font-family: 'Inter';
-	font-style: normal;
-	font-weight: 400;
-	font-size: 8px;
-	line-height: 11px;
-	color: ${t.content.primaryInverse};
-	margin-bottom: 0px;
-`;export{n as HeaderContainer,o as IconContainer,i as LeftContainer,r as SubTitle,p as TitleContainer};

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

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

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

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

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

@@ -1,10 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TimeStamp: import("styled-components").StyledComponent<"div", any, {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
-}, never>;
-export declare const MediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChatBtnContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const FooterWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MediaNameAbsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DownloadMediaIconHolder: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,56 +0,0 @@
-import t from"styled-components";import{Caption as e}from"../../TypographyStyle.js";import{COLORS as o}from"../../../constants/Theme.js";const r=t.div`
-	background: ${o.surface.standard};
-	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
-	border-top-left-radius: 0px;
-	border-top-right-radius: 12px;
-	border-bottom-right-radius: 12px;
-	border-bottom-left-radius: 12px;
-	position: relative;
-	padding: 8px 0px;
-`,i=t(e)`
-	color: ${o.content.secondary};
-	max-width: 80px;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: hidden;
-`,p=t.div`
-	border-radius: 8px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	min-height: 152px;
-	margin-bottom: 4px;
-	margin: 0px 8px;
-`,d=t.div`
-	padding: 12px;
-	display: flex;
-	flex-direction: row;
-	justify-content: center;
-	align-items: center;
-	border-top: 1px solid ${o.stroke.primary};
-`,n=t.div`
-	display: flex;
-
-	flex-direction: row;
-	justify-content: space-between;
-	margin: 8px 12px;
-`;t.div`
-	position: absolute;
-	bottom: -1px;
-	left: 0;
-	text-align: center;
-	width: 100%;
-	padding: 10px;
-	align-items: center;
-	display: flex;
-	flex-direction: row;
-	justify-content: start;
-	background: ${o.surface.hovered};
-	border-bottom-right-radius: 8px;
-	border-bottom-left-radius: 8px;
-`,t.div`
-	position: absolute;
-	top: 16px;
-	right: 16px;
-`;export{d as ChatBtnContainer,r as Container,n as FooterWrapper,p as MediaContainer,i as TimeStamp};