@bikdotai/bik-component-library 0.0.553 → 0.0.555-beta.1

package/dist/esm/components/dropdown/OpenedDropdown/utils/iterationOnOptions.js

@@ -1 +1 @@
-function s(s,n,t){return s.map((s=>{if(s.options){const i=s.options.map((s=>!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)));return Object.assign(Object.assign({},s),{options:[...i]})}return!t||t(s)?Object.assign(Object.assign({},s),n):Object.assign({},s)}))}function n(s,n){s.forEach((s=>{s.options?s.options.forEach(n):n(s)}))}export{s as iterateOnOptions,n as iterateOnOptionsRaw};
+function n(n,t,s){return n.map((n=>{if(n.options){const e=n.options.map((n=>!s||s(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)));return Object.assign(Object.assign({},n),{options:[...e]})}return!s||s(n)?Object.assign(Object.assign({},n),t):Object.assign({},n)}))}function t(n,t){n.forEach((n=>{n.options?n.options.forEach(t):t(n)}))}function s(n){if(n&&n.length)return n.map((n=>{var t;const s=n;return null!==(t=s.selectedLabel)&&void 0!==t?t:s.label})).join(", ")}export{s as getSelectedOptionsAsText,n as iterateOnOptions,t as iterateOnOptionsRaw};

package/dist/esm/components/dropdown/hooks/useDropdown.d.ts

@@ -19,6 +19,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
+        selectedLabel?: string | undefined;
     } | {
         label?: string | undefined;
         value?: string | undefined;
@@ -31,6 +32,7 @@ export declare const useDropdown: (version: string | undefined, options: Dropdow
         leadingIcon?: JSX.Element | undefined;
         customComponent?: JSX.Element | undefined;
         searchKey?: string | undefined;
+        selectedLabel?: string | undefined;
         options: SingleOption[];
     })[] | undefined;
     selectAllHandler: (newState: SelectAllCheckboxState) => void;

package/dist/esm/components/dropdown/type.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { Placement, PositioningStrategy } from '@popperjs/core';
+import { Type } from '../button/model';
 export interface OpenDropdownProps {
     defaultOptions?: DropdownOption[];
     options: DropdownOption[];
@@ -19,6 +20,11 @@ export interface OpenDropdownProps {
     headerRef?: any;
     hideSelectAll?: boolean;
     primaryButtonText?: string;
+    onInfiniteScroll?: () => void;
+    onMultiSelectClear?: () => void;
+    onDropdownItemClick?: (option: DropdownOption) => void;
+    buttonOptions?: ButtonOptions;
+    isSearchLoading?: boolean;
 }
 export type GroupedOption = {
     label?: string;
@@ -37,7 +43,14 @@ export type SingleOption = {
     leadingIcon?: JSX.Element;
     customComponent?: JSX.Element;
     searchKey?: string;
+    selectedLabel?: string;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;
+export interface ButtonOptions {
+    primaryButtonText?: string;
+    primaryButtonType?: Type;
+    secondaryButtonText?: string;
+    secondaryButtonType?: Type;
+}
 export type { Placement };

package/dist/esm/components/side-modal/SideModal.style.js

@@ -1,8 +1,8 @@
-import e,{css as t}from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as o}from"../../constants/zindex.js";const r=e.div`
+import e,{css as t}from"styled-components";import{COLORS as o}from"../../constants/Theme.js";import{ComponentZindex as i}from"../../constants/zindex.js";const r=e.div`
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: ${e=>e.zIndex||o.SIDE_MODAL};
+	z-index: ${e=>e.zIndex||i.SIDE_MODAL};
 	height: 100%;
 	width: 100%;
 	background-color: rgba(0, 0, 0, 0.4);
@@ -12,7 +12,7 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 `,n=e.div`
 	height: 100%;
 	width: ${e=>e.width||"566px"};
-	background: ${i.surface.standard};
+	background: ${o.surface.standard};
 	position: relative;
 	display: flex;
 	flex-direction: column;
@@ -25,23 +25,25 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
-	background: ${i.surface.standard};
+	background: ${o.surface.standard};
 	padding: 0px 24px;
-	border-bottom: 1px solid ${i.stroke.primary};
+	border-bottom: 1px solid ${o.stroke.primary};
 	svg:hover {
 		cursor: pointer;
+		background: ${o.background.base};
+		border-radius: 4px;
 	}
-	${e=>{let{headerStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{headerStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
 `,s=e.div`
 	overflow-y: auto;
 	padding: 24px;
 	height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
-	${e=>{let{bodyStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{bodyStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,p=e.div`
+`,a=e.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
@@ -50,14 +52,14 @@ import e,{css as t}from"styled-components";import{COLORS as i}from"../../constan
 	flex-direction: ${e=>e.footerDirection||"row"};
 	justify-content: space-between;
 	align-items: center;
-	background: ${i.surface.standard};
-	border-top: 1px solid ${i.stroke.primary};
+	background: ${o.surface.standard};
+	border-top: 1px solid ${o.stroke.primary};
 	padding: 0px 24px;
-	${e=>{let{footerStyle:i}=e;return t`
-		${Object.keys(i).map((e=>`${e}: ${i[e]};`)).join("\n")}
+	${e=>{let{footerStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
 	`}}
-`,a=e.div`
+`,p=e.div`
 	display: flex;
 	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;export{a as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,p as SideModalFooter,d as SideModalHeader,r as SideModalStyle};
+`;export{p as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,a as SideModalFooter,d as SideModalHeader,r as SideModalStyle};

package/dist/esm/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as i,useState as r,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as c}from"../modals/styledModal.js";import{CHANNEL_TYPE as u}from"../template-preview/models/Channels.js";import{TemplateModalContext as m}from"./context/templateModalContext.js";import p from"./modalElements/Footer.js";import v from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as h}from"./utils/convertPlaceholdersToBikDropdown.js";const b=b=>{let{selectedTemplate:C,closeDialog:g,showVariableMapping:x,channel:P,htmlContent:f,templateVariables:E,onTemplateSelect:I,globalPlaceholders:S,showOnlyContent:y,whatsappSpecificPickerMeta:w,zIndex:L,showVariableModal:T,variableList:V,discountCode:k,setDiscountCode:M,onBackPress:j,enabledCustomText:D,variableListForImage:A,showSampleValues:F,disableEditVariable:H,pod:B,extras:O,pickerConf:W,selectedCarouselProducts:N,disableEditExpiry:z,cardWidth:R,onDeleteSelectedProducts:$,fileName:U,setFileName:_,hideDeviceContainerInPreview:q,maxCharLimit:G}=b;var J,K,Q,X,Y,Z,ee,le;i((()=>{de(f)}),[f]);const oe=P===u.WHATSAPP&&"CAROUSEL"===(null===(K=null===(J=null==C?void 0:C.components)||void 0===J?void 0:J[1])||void 0===K?void 0:K.type),te=null==C?void 0:C.isProductCarouselType,[ie,re]=r(P===u.EMAIL||oe?"desktop":"mobile"),[ae,se]=r(!1),[ne,de]=r(f),[ce,ue]=r(!1),[me,pe]=r([]),[ve,he]=r({}),[be,Ce]=r(C),[ge,xe]=r([]),[Pe,fe]=r(null),[Ee,Ie]=r(!1),[Se,ye]=r(null!=E?E:[]),[we,Le]=r(!1),[Te,Ve]=r(oe?(null===(X=null===(Q=null==be?void 0:be.mapping)||void 0===Q?void 0:Q.body)||void 0===X?void 0:X.length)?-1:0:-1),[ke,Me]=r([]),[je,De]=r(void 0),Ae=a(null),[Fe,He]=r(!1),[Be,Oe]=r(!1);i((()=>{N?Me(N):te&&Me([])}),[N]),i((()=>{var e;if(!Ee&&te&&(!N||0===Me.length)){const l=null===(e=null==be?void 0:be.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,i;"HEADER"===e.type&&o.push(null!==(i=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==i?i:"")}))})),xe(o),Ie(!0)}}),[Ee]);const We=s((()=>h(S)),[S]);return i((()=>{De(t(V))}),[V]),e(m.Provider,Object.assign({value:{hideCrossButton:Be,setHideCrossButton:Oe,variableList:je,setVariableList:De,variableCallback:Pe,setVariableCallback:fe,showVariablePicker:ae,setShowVariablePicker:se,template:be,setTemplate:Ce,device:ie,setDevice:re,display_content:ne,setDisplayContent:de,originalVariableList:Se,setOriginalVariableList:ye,isError:ce,setIsError:ue,channel:P,globalNormalizedPlaceholders:We,templateSelectionTriggered:we,setTemplateSelectionTriggered:Le,enabledCustomText:D,disableEditVariable:H,pod:B,extras:O,isWhatsappCarousel:oe,selectedCarouselIndex:Te,setSelectedCarouselIndex:Ve,isProductCarouselType:te,templateErrorIndexes:ve,cardCount:oe?null===(Z=null===(Y=C.components)||void 0===Y?void 0:Y[1].cards)||void 0===Z?void 0:Z.length:void 0,errorIndexes:me,setErrorIndexes:pe,pickerConf:W,carouselProducts:ke,setCarouselProducts:Me,disableEditExpiry:z,cardWidth:R,cardImages:ge,onDeleteSelectedProducts:$,hideDeviceContainerInPreview:q,sliderRef:Ae,isCarouselHovered:Fe,setIsCarouselHovered:He,maxCharLimit:G}},{children:y?e(v,{variableListFromProps:V,channel:u.EMAIL,hideHeader:!0}):l(c,Object.assign({hideCrossButton:Be,zIndex:L,centralContainerStyles:{width:oe?900:P===u.EMAIL&&x?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==be?void 0:be.label,headingSubtitle:P===u.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(ee=null==be?void 0:be.category)&&void 0!==ee?ee:"")} • ${null!==(le=null==be?void 0:be.templateCategory)&&void 0!==le?le:""}`:"",onBackPress:()=>{null==j||j()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(v,{variableListFromProps:V,showSampleValues:F,showVariableMapping:x,channel:P,whatsappSpecificPickerMeta:w,showVariableModal:T,discountCode:k,setDiscountCode:M,variableListForImage:A&&(null==A?void 0:A.length)>0?A:je,fileName:U,setFileName:e=>{null==_||_(e)}}),I?e(p,{isWhatsappCarousel:null!=oe&&oe,onSelect:function(){var e;if((null==ke?void 0:ke.length)<1&&te)return void ue(!0);const l=null==I?void 0:I(be,Se,null!=ne?ne:"",ke);he(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&pe(l.errorIndexes),(null==l?void 0:l.error)&&ue(!!(null==l?void 0:l.error))):Le(!0)}}):e(o,{})]}))}))};export{b as TemplateContextMapper};
+import{jsx as e,jsxs as l,Fragment as o}from"react/jsx-runtime";import{cloneDeep as t}from"lodash";import{useEffect as r,useState as i,useRef as a,useMemo as s}from"react";import n from"../../utils/StringUtils.js";import{COLORS as d}from"../../constants/Theme.js";import{StyledModal as c}from"../modals/styledModal.js";import{CHANNEL_TYPE as u}from"../template-preview/models/Channels.js";import{TemplateModalContext as m}from"./context/templateModalContext.js";import p from"./modalElements/Footer.js";import v from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as h}from"./utils/convertPlaceholdersToBikDropdown.js";const b=b=>{let{selectedTemplate:C,closeDialog:g,showVariableMapping:f,channel:x,htmlContent:P,templateVariables:E,onTemplateSelect:I,globalPlaceholders:S,showOnlyContent:y,whatsappSpecificPickerMeta:w,zIndex:L,showVariableModal:T,variableList:V,discountCode:k,setDiscountCode:j,onBackPress:M,enabledCustomText:D,variableListForImage:A,showSampleValues:O,disableEditVariable:F,pod:H,extras:B,pickerConf:W,selectedCarouselProducts:N,disableEditExpiry:z,cardWidth:R,onDeleteSelectedProducts:$,fileName:U,setFileName:_,hideDeviceContainerInPreview:q,maxCharLimit:G}=b;var J,K,Q,X,Y,Z,ee,le;r((()=>{de(P)}),[P]);const oe=x===u.WHATSAPP&&"CAROUSEL"===(null===(K=null===(J=null==C?void 0:C.components)||void 0===J?void 0:J[1])||void 0===K?void 0:K.type),te=null==C?void 0:C.isProductCarouselType,[re,ie]=i(x===u.EMAIL||oe?"desktop":"mobile"),[ae,se]=i(!1),[ne,de]=i(P),[ce,ue]=i(!1),[me,pe]=i([]),[ve,he]=i({}),[be,Ce]=i(C),[ge,fe]=i([]),[xe,Pe]=i(null),[Ee,Ie]=i(!1),[Se,ye]=i(null!=E?E:[]),[we,Le]=i(!1),[Te,Ve]=i(oe?(null===(X=null===(Q=null==be?void 0:be.mapping)||void 0===Q?void 0:Q.body)||void 0===X?void 0:X.length)?-1:0:-1),[ke,je]=i([]),[Me,De]=i(void 0),Ae=a(null),[Oe,Fe]=i(!1),[He,Be]=i(!1),[We,Ne]=i({});r((()=>{N?je(N):te&&je([])}),[N]),r((()=>{var e;if(!Ee&&te&&(!N||0===je.length)){const l=null===(e=null==be?void 0:be.components)||void 0===e?void 0:e[1].cards,o=[];null==l||l.forEach((e=>{var l;null===(l=null==e?void 0:e.components)||void 0===l||l.forEach((e=>{var l,t,r;"HEADER"===e.type&&o.push(null!==(r=null===(t=null===(l=e.example)||void 0===l?void 0:l.header_handle)||void 0===t?void 0:t[0])&&void 0!==r?r:"")}))})),fe(o),Ie(!0)}}),[Ee]);const ze=s((()=>h(S)),[S]);return r((()=>{De(t(V))}),[V]),e(m.Provider,Object.assign({value:{hideCrossButton:He,setHideCrossButton:Be,variableList:Me,setVariableList:De,variableCallback:xe,setVariableCallback:Pe,showVariablePicker:ae,setShowVariablePicker:se,template:be,setTemplate:Ce,device:re,setDevice:ie,display_content:ne,setDisplayContent:de,originalVariableList:Se,setOriginalVariableList:ye,isError:ce,setIsError:ue,channel:x,globalNormalizedPlaceholders:ze,templateSelectionTriggered:we,setTemplateSelectionTriggered:Le,enabledCustomText:D,disableEditVariable:F,pod:H,extras:B,isWhatsappCarousel:oe,selectedCarouselIndex:Te,setSelectedCarouselIndex:Ve,isProductCarouselType:te,templateErrorIndexes:ve,cardCount:oe?null===(Z=null===(Y=C.components)||void 0===Y?void 0:Y[1].cards)||void 0===Z?void 0:Z.length:void 0,errorIndexes:me,setErrorIndexes:pe,pickerConf:W,carouselProducts:ke,setCarouselProducts:je,disableEditExpiry:z,cardWidth:R,cardImages:ge,onDeleteSelectedProducts:$,hideDeviceContainerInPreview:q,sliderRef:Ae,isCarouselHovered:Oe,setIsCarouselHovered:Fe,maxCharLimit:G,ctaOptionsErrors:We,setCtaOptionsErrors:Ne}},{children:y?e(v,{variableListFromProps:V,channel:u.EMAIL,hideHeader:!0}):l(c,Object.assign({hideCrossButton:He,zIndex:L,centralContainerStyles:{width:oe?900:x===u.EMAIL&&f?1e3:800},open:!0,onClose:()=>{null==g||g()},headingTitle:null==be?void 0:be.label,headingSubtitle:x===u.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(ee=null==be?void 0:be.category)&&void 0!==ee?ee:"")} • ${null!==(le=null==be?void 0:be.templateCategory)&&void 0!==le?le:""}`:"",onBackPress:()=>{null==M||M()},modalHeaderStyles:{borderBottom:`1px solid ${d.stroke.primary}`}},{children:[e(v,{variableListFromProps:V,showSampleValues:O,showVariableMapping:f,channel:x,whatsappSpecificPickerMeta:w,showVariableModal:T,discountCode:k,setDiscountCode:j,variableListForImage:A&&(null==A?void 0:A.length)>0?A:Me,fileName:U,setFileName:e=>{null==_||_(e)}}),I?e(p,{isWhatsappCarousel:null!=oe&&oe,onSelect:function(){var e;if((null==ke?void 0:ke.length)<1&&te)return void ue(!0);if(Object.keys(We).length>0)return void ue(!0);const l=null==I?void 0:I(be,Se,null!=ne?ne:"",ke);he(null!==(e=null==l?void 0:l.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==l?void 0:l.errorIndexes)||(null==l?void 0:l.error)?((null==l?void 0:l.errorIndexes)&&pe(l.errorIndexes),(null==l?void 0:l.error)&&ue(!!(null==l?void 0:l.error))):Le(!0)}}):e(o,{})]}))}))};export{b as TemplateContextMapper};

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

@@ -66,6 +66,12 @@ export declare const TemplateModalContext: React.Context<{
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
     maxCharLimit?: number | undefined;
+    ctaOptionsErrors?: {
+        [key: string]: string;
+    } | undefined;
+    setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
+        [key: string]: string;
+    }>> | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
     hideCrossButton: boolean;
@@ -124,4 +130,10 @@ export declare const useTemplateModalContext: () => {
     isCarouselHovered?: boolean | undefined;
     setIsCarouselHovered?: ((value: boolean) => void) | undefined;
     maxCharLimit?: number | undefined;
+    ctaOptionsErrors?: {
+        [key: string]: string;
+    } | undefined;
+    setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
+        [key: string]: string;
+    }>> | undefined;
 };

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

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as j}from"./VariableConnector.js";const f=f=>{let{variableListIndex:g,button:O,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:y,currentVariableList:x,CTAoptions:h,QRBoptions:L}=f;var R,U,V,T,w;const[I,C]=s(""),[P,E]=s(),{isError:H,disableEditVariable:N,pod:B,selectedCarouselIndex:Q,originalVariableList:_,setOriginalVariableList:S,isProductCarouselType:K}=p();function Y(t){if(C(t),null!=Q&&Q>-1&&K){const e=l(_);if("URL"===O.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[g];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:s})}));null==S||S((t=>Object.assign(Object.assign({},t),{cards:l}))),null==v||v(`https://${t}`,"custom",g)}return}let e=x.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),a=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(a.buttons=s,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=a,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...s]})));null==v||v(`https://${t}`,"custom",g)}return a((()=>{var t;if(O.buttonVariable&&i.test(O.buttonVariable))E(r),C((null===(t=O.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===O.type?h:L;t="URL"===O.type?e.findIndex((t=>t.placeHolder===O.buttonVariable)):e.findIndex((t=>t.label===O.flowName)),t>-1&&E(e[t])}}),[]),B!==c.CHATBOT?t(j,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(n,{disabled:N,options:"URL"===O.type?h:L,isSearchable:!0,onSelect:function(t,e){const s=t;E(s);const a=("URL"===O.type?h:L).find((t=>t.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=Q&&Q>-1&&K){const t=l(_);if("URL"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder});const l=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",g),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[g];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value});const l=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==y||y({flowName:s.label,flowId:s.value},"placeholder",g),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===O.type){let e=x.buttons.filter((t=>"URL"===t.type))[g];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder}),t=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",g)}else{let e=x.buttons.filter((t=>"QUICK_REPLY"===t.type))[g];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value}),t=x.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==y||y({flowName:s.label,flowId:s.value},"placeholder",g)}const e=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(e.buttons=t,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=e,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else Y("")},defaultOptions:P?[Object.assign(Object.assign({},P),{selected:!0})]:[]})})),"custom_link"===(null==P?void 0:P.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(o,{state:N?"disabled":"none",errorMessage:H?I?b(I)?"":"Enter valid URL":"Required field":"",value:I,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:Y,maxCharLimit:2e3})}))]}):e(m,{index:g,variable:{variableName:null!==(R=O.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(U=O.example)||void 0===U?void 0:U[0]}`:null!==(V=O.buttonVariable)&&void 0!==V?V:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0,queryParams:null!==(w=O.queryParams)&&void 0!==w?w:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:h})};export{f as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{cloneDeep as l}from"lodash";import{useState as s,useEffect as a}from"react";import{Dropdown as n}from"../../dropdown/Dropdown.js";import{Input as o}from"../../input/Input.js";import{editableVarPattern as i}from"../../template-preview/constants/regexPatterns.js";import{CUSTOM_URL_NAME as r}from"../../template-preview/models/TemplateMeta.js";import{POD as c}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as u}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import{validateIsUrl as b}from"../utils/validateIsUrl.js";import m,{Container as j}from"./VariableConnector.js";const g=g=>{let{variableListIndex:f,button:O,updateSelectedURLTemplateBtn:v,updateSelectedQRBTemplateBtn:y,currentVariableList:x,CTAoptions:h,QRBoptions:L}=g;var R,U,V,T,w;const[C,I]=s(""),[E,P]=s(),{isError:H,disableEditVariable:N,pod:B,selectedCarouselIndex:Q,originalVariableList:_,setOriginalVariableList:S,isProductCarouselType:K,ctaOptionsErrors:Y,setCtaOptionsErrors:$}=p();function q(t){if(I(t),null!=Q&&Q>-1&&K){const e=l(_);if("URL"===O.type){const l=e.cards.map((e=>{let l=e.buttons.filter((t=>"URL"===t.type))[f];l=Object.assign(Object.assign({},l),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=e.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==l?void 0:l.text)?l:t));return Object.assign(Object.assign({},e),{buttons:s})}));null==S||S((t=>Object.assign(Object.assign({},t),{cards:l}))),null==v||v(`https://${t}`,"custom",f)}return}let e=x.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:"((customPlaceholderName))",example:[`https://${t}`]});const s=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),a=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(a.buttons=s,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=a,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((t=>Object.assign(Object.assign({},t),{buttons:[...s]})));null==v||v(`https://${t}`,"custom",f)}return a((()=>{var t;if(O.buttonVariable&&i.test(O.buttonVariable))P(r),I((null===(t=O.example)||void 0===t?void 0:t[0].split("https://")[1])||"");else{let t=-1;const e="URL"===O.type?h:L;t="URL"===O.type?e.findIndex((t=>t.placeHolder===O.buttonVariable)):e.findIndex((t=>t.label===O.flowName)),t>-1?P(e[t]):null==$||$((t=>Object.assign(Object.assign({},t),{[f]:"Required field!"})))}}),[]),B!==c.CHATBOT?t(j,{children:[e("div",Object.assign({style:{marginBottom:8}},{children:t(u,Object.assign({style:{color:d.content.primary}},{children:[O.text," button"]}))})),e("div",Object.assign({style:{marginBottom:12}},{children:e(n,{disabled:N,options:"URL"===O.type?h:L,isSearchable:!0,onSelect:function(t,e){null==$||$((t=>(delete t[f],Object.assign({},t))));const s=t;P(s);const a=("URL"===O.type?h:L).find((t=>t.placeHolder===s.placeHolder));if(a)if("custom_link"!==a.value){if(null!=Q&&Q>-1&&K){const t=l(_);if("URL"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder});const l=t.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}else if("QUICK_REPLY"===O.type){const e=t.cards.map((t=>{let e=t.buttons.filter((t=>"QUICK_REPLY"===t.type))[f];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value});const l=t.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t));return Object.assign(Object.assign({},t),{buttons:l})}));null==y||y({flowName:s.label,flowId:s.value},"placeholder",f),null==S||S((t=>Object.assign(Object.assign({},t),{cards:e})))}return}let t;if("URL"===O.type){let e=x.buttons.filter((t=>"URL"===t.type))[f];e=Object.assign(Object.assign({},e),{buttonVariable:s.placeHolder}),t=x.buttons.map((t=>"URL"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==v||v({defaultValue:a.value,placeHolder:a.placeHolder},"placeholder",f)}else{let e=x.buttons.filter((t=>"QUICK_REPLY"===t.type))[f];e=Object.assign(Object.assign({},e),{flowName:s.label,flowId:s.value}),t=x.buttons.map((t=>"QUICK_REPLY"===t.type&&(null==t?void 0:t.text)===(null==e?void 0:e.text)?e:t)),null==y||y({flowName:s.label,flowId:s.value},"placeholder",f)}const e=Object.assign({},null!=Q&&Q>-1?_.cards[Q]:_);if(e.buttons=t,null!=Q&&Q>-1){const t=[..._.cards];t[Q]=e,null==S||S((e=>Object.assign(Object.assign({},e),{cards:t})))}else null==S||S((e=>Object.assign(Object.assign({},e),{buttons:[...t]})))}else q("")},defaultOptions:E?[Object.assign(Object.assign({},E),{selected:!0})]:[],error:H?null==Y?void 0:Y[f]:void 0})})),"custom_link"===(null==E?void 0:E.value)&&e("div",Object.assign({style:{marginBottom:20}},{children:e(o,{state:N?"disabled":"none",errorMessage:H?C?b(C)?"":"Enter valid URL":"Required field":"",value:C,prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:q,maxCharLimit:2e3})}))]}):e(m,{index:f,variable:{variableName:null!==(R=O.text)&&void 0!==R?R:"",updatedValue:"((customPlaceholderName))"===O.buttonVariable?`${null===(U=O.example)||void 0===U?void 0:U[0]}`:null!==(V=O.buttonVariable)&&void 0!==V?V:"",type:"link",isEditableVariable:!0,index:null!==(T=O.index)&&void 0!==T?T:0,queryParams:null!==(w=O.queryParams)&&void 0!==w?w:[]},showVariableModal:!0,componentType:"BUTTONS",buttonType:O.type,CTAoptions:h})};export{g as default};

package/dist/esm/components/zeroState/ZeroState.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export declare const ZeroState: React.FC<{
+    isLoading?: boolean;
     title: string;
     subTitle?: string;
     IconHolderStyle?: React.CSSProperties;

package/dist/esm/components/zeroState/ZeroState.js

@@ -1,12 +1,12 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{TitleRegular as r,BodyCaption as o}from"../TypographyStyle.js";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const s=n.div`
-	background: ${i.surface.standard};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-components";import{Spinner as r}from"../spinner/Spinner.js";import{TitleRegular as o,BodyCaption as i}from"../TypographyStyle.js";import{COLORS as s}from"../../constants/Theme.js";import l from"../../assets/icons/alert.svg.js";const c=n.div`
+	background: ${s.surface.standard};
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-`,c=n.div`
-	background: ${i.background.base};
+`,a=n.div`
+	background: ${s.background.base};
 	width: 48px;
 	height: 48px;
 	display: flex;
@@ -14,4 +14,4 @@ import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"styled-component
 	align-items: center;
 	justify-content: center;
 	border-radius: 24px;
-`,a=n=>{let{subTitle:a,title:d,IconHolderStyle:m,style:p}=n;return e(s,Object.assign({style:null!=p?p:{}},{children:[t(c,Object.assign({style:null!=m?m:{}},{children:t(l,{color:i.content.placeholder,height:24,width:24})})),t(r,Object.assign({style:{marginTop:8,color:i.content.primary}},{children:null!=d?d:"No results found"})),!!a&&t(o,Object.assign({style:{marginTop:4,color:i.content.secondary,textAlign:"center",maxWidth:184}},{children:a}))]}))};export{a as ZeroState};
+`,d=n=>{let{subTitle:d,title:m,IconHolderStyle:p,style:g,isLoading:u}=n;return e(c,Object.assign({style:null!=g?g:{}},{children:[u?t(r,{size:"large",color:s.stroke.brand}):t(a,Object.assign({style:null!=p?p:{}},{children:t(l,{color:s.content.placeholder,height:24,width:24})})),t(o,Object.assign({style:{marginTop:8,color:s.content.primary}},{children:u?"Loading...":m||"No results found"})),!!d&&!u&&t(i,Object.assign({style:{marginTop:4,color:s.content.secondary,textAlign:"center",maxWidth:184}},{children:d}))]}))};export{d as ZeroState};

package/dist/esm/utils/StringUtils.d.ts

@@ -9,4 +9,5 @@ export default class StringUtils {
     static firstLetters: (string: string) => string;
     static capitaliseFirstLetterOfString(string: string): string;
     static toCapitilize(string?: string): string;
+    static truncateText: (text: string, maxLength: number) => string;
 }

package/dist/esm/utils/StringUtils.js

@@ -1 +1 @@
-class e{static convertToTitleCase(e){const t=(e=e.toLowerCase()).split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].slice(1);return t.join(" ")}static getAvatarText(e){if(e){const t=e.match(/\b(\w)/g),r=null==t?void 0:t.join("");return r?r.substring(0,2).toUpperCase():"C"}return""}static capitaliseFirstLetterOfString(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}static toCapitilize(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.slice(1)}}Object.defineProperty(e,"normalizeName",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const r=e.split(t).join(" ");return r[0].toUpperCase()+r.slice(1)}}),Object.defineProperty(e,"capitalize",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;return e.charAt(0).toUpperCase()+(null===(t=e.slice(1))||void 0===t?void 0:t.toLowerCase())}}),Object.defineProperty(e,"pluralize",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>0===t||t>1?e+"s":e}),Object.defineProperty(e,"getFullPhoneNumber",{enumerable:!0,configurable:!0,writable:!0,value:e=>e?"+91"+e.slice(e.length-10):""}),Object.defineProperty(e,"detectUrl",{enumerable:!0,configurable:!0,writable:!0,value:e=>e.match(/(((https?:\/\/)|(www\.))[^\s]+)/g)}),Object.defineProperty(e,"firstLetters",{enumerable:!0,configurable:!0,writable:!0,value:e=>{let t="";return e.split(" ").forEach((e=>{e.length&&(t+=e[0])})),t.substr(0,2)}});export{e as default};
+class e{static convertToTitleCase(e){const t=(e=e.toLowerCase()).split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].slice(1);return t.join(" ")}static getAvatarText(e){if(e){const t=e.match(/\b(\w)/g),r=null==t?void 0:t.join("");return r?r.substring(0,2).toUpperCase():"C"}return""}static capitaliseFirstLetterOfString(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}static toCapitilize(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return e.charAt(0).toUpperCase()+e.slice(1)}}Object.defineProperty(e,"normalizeName",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const r=e.split(t).join(" ");return r[0].toUpperCase()+r.slice(1)}}),Object.defineProperty(e,"capitalize",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;return e.charAt(0).toUpperCase()+(null===(t=e.slice(1))||void 0===t?void 0:t.toLowerCase())}}),Object.defineProperty(e,"pluralize",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>0===t||t>1?e+"s":e}),Object.defineProperty(e,"getFullPhoneNumber",{enumerable:!0,configurable:!0,writable:!0,value:e=>e?"+91"+e.slice(e.length-10):""}),Object.defineProperty(e,"detectUrl",{enumerable:!0,configurable:!0,writable:!0,value:e=>e.match(/(((https?:\/\/)|(www\.))[^\s]+)/g)}),Object.defineProperty(e,"firstLetters",{enumerable:!0,configurable:!0,writable:!0,value:e=>{let t="";return e.split(" ").forEach((e=>{e.length&&(t+=e[0])})),t.substr(0,2)}}),Object.defineProperty(e,"truncateText",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>(null==e?void 0:e.length)>t?e.slice(0,t)+"...":e});export{e as default};

package/package.json

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