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

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

@@ -1,4 +1,4 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../../assets/icons/delete.svg.js";import o from"../../../assets/icons/PlusIcon.js";import{useState as i,useEffect as r}from"react";import l from"styled-components";import{Button as s}from"../../button/Button.js";import{CheckBox as a}from"../../checkBox/CheckBox.js";import{IconButton as c}from"../../icon-button/IconButton.js";import{Input as p}from"../../input/Input.js";import{TitleSmall as m}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";const h=l=>{const{params:h,onChange:y,isError:f,variableValue:g}=l,[x,v]=i(h.length>0),[j,C]=i(h);return r((()=>{C(h)}),[g]),e(u,{children:[e("div",{style:{display:"flex"},children:[t(a,{isChecked:x,onValueChange:e=>{C([]),y([]),v(e)}}),t(m,{style:{marginLeft:8},children:"Add custom query params"})]}),x&&j.map(((o,i)=>e("div",{style:{display:"flex",gap:"8px"},children:[t(p,{placeholder:"Key",value:o.key,onChangeText:e=>{const t=j.map(((t,n)=>n===i?{...t,key:e}:t));C(t),y(t)},state:f&&!o.key.length?"invalid":"none"}),t(p,{placeholder:"Value",value:o.value,onChangeText:e=>{const t=j.map(((t,n)=>n===i?{...t,value:e}:t));C(t),y(t)},state:f&&!o.value.length?"invalid":"none"}),t(c,{Icon:n,width:20,height:20,onClick:()=>{const e=j.filter(((e,t)=>t!=i));C(e),y(e)}})]},i))),x&&h.length<10&&t(s,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"},children:t(o,{width:16,height:16,color:d.content.secondary})}),onClick:()=>{const e=[...j,{key:"",value:""}];C(e),y(e)}})]})},u=l.div`
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import n from"../../../assets/icons/delete.svg.js";import o from"../../../assets/icons/PlusIcon.js";import{useState as s,useEffect as i}from"react";import a from"styled-components";import{Button as r}from"../../button/Button.js";import{CheckBox as l}from"../../checkBox/CheckBox.js";import{IconButton as c}from"../../icon-button/IconButton.js";import{Input as p}from"../../input/Input.js";import{TitleSmall as m}from"../../TypographyStyle.js";import{COLORS as d}from"../../../constants/Theme.js";const h=a=>{const{params:h,onChange:u,isError:y,variableValue:f}=a,[j,x]=s(h.length>0),[b,v]=s(h);return i((()=>{v(h)}),[f]),e(g,{children:[e("div",Object.assign({style:{display:"flex"}},{children:[t(l,{isChecked:j,onValueChange:e=>{v([]),u([]),x(e)}}),t(m,Object.assign({style:{marginLeft:8}},{children:"Add custom query params"}))]})),j&&b.map(((o,s)=>e("div",Object.assign({style:{display:"flex",gap:"8px"}},{children:[t(p,{placeholder:"Key",value:o.key,onChangeText:e=>{const t=b.map(((t,n)=>n===s?Object.assign(Object.assign({},t),{key:e}):t));v(t),u(t)},state:y&&!o.key.length?"invalid":"none"}),t(p,{placeholder:"Value",value:o.value,onChangeText:e=>{const t=b.map(((t,n)=>n===s?Object.assign(Object.assign({},t),{value:e}):t));v(t),u(t)},state:y&&!o.value.length?"invalid":"none"}),t(c,{Icon:n,width:20,height:20,onClick:()=>{const e=b.filter(((e,t)=>t!=s));v(e),u(e)}})]}),s))),j&&h.length<10&&t(r,{buttonText:"Add Params",buttonType:"dashRegular",style:{display:"flex",alignItems:"center",justifyContent:"center"},IconComponent:()=>t("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"center",width:"20px",height:"20px"}},{children:t(o,{width:16,height:16,color:d.content.secondary})})),onClick:()=>{const e=[...b,{key:"",value:""}];v(e),u(e)}})]})},g=a.div`
 	display: flex;
 	flex-direction: column;
 	gap: 12px;

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

@@ -1,16 +1,12 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from '../../template-preview/models/WhatsAppTemplate.js';
-
-declare const TemplateAnalyticsComponent: (props: TemplateAnalyticsComponentI) => react_jsx_runtime.JSX.Element;
-declare const RightPanelTemplateAnalytics: (props: {
-    analyticsData: TemplateAnalyticsDataI;
-    skipTitle?: boolean;
-}) => react_jsx_runtime.JSX.Element;
-declare const AnalyticsItem: (props: {
-    icon: React.ElementType;
-    title: string;
-    value: number;
-    percentValue?: number;
-}) => react_jsx_runtime.JSX.Element;
-
-export { AnalyticsItem, RightPanelTemplateAnalytics, TemplateAnalyticsComponent };
+import { TemplateAnalyticsComponentI, TemplateAnalyticsDataI } from "../../template-preview/models/WhatsAppTemplate";
+export declare const TemplateAnalyticsComponent: (props: TemplateAnalyticsComponentI) => import("react/jsx-runtime").JSX.Element;
+export declare const RightPanelTemplateAnalytics: (props: {
+    analyticsData: TemplateAnalyticsDataI;
+    skipTitle?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const AnalyticsItem: (props: {
+    icon: React.ElementType;
+    title: string;
+    value: number;
+    percentValue?: number;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"../../../assets/icons/alert_triangle.svg.js";import l from"../../../assets/icons/click.svg.js";import{useState as a,useEffect as c,useMemo as r}from"react";import{StyledModal as o}from"../../modals/styledModal.js";import{Tag as s}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as d}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as m,TitleSmall as p,Caption as y}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{TemplateContainer as u,LeftPanelContainer as g,RightPanelContainer as b,CustomTitleMedium as T}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as k,ANALYTICS_ENGAGEMENT_MAP as f}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const x=n=>{const{templateAnalytics:l,onClose:s,onProceed:p,onCancel:b,headingTitle:T,headingSubtitle:f,templateId:x}=n,{templateQuality:j=d.GREEN,fetchAnalytics:C}=l||{},{icon:A,title:B,subline:w,sublineTextType:E,sublineColor:S}=k[j||d.GREEN],[G,P]=a({}),[V,R]=a(!0);c((()=>{C?.(x||"").then((e=>{e.analytics&&P(e.analytics),R(!1)}))}),[]);const H=r((()=>j===d.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:p,disabled:V},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{s?.(),b?.()},disabled:V}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{s?.(),b?.()},disabled:V},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:p,disabled:V}}),[j,V]),O=E||y;return e(o,{open:!0,headingTitle:T,tintedHeader:!0,modalHeaderStyles:{backgroundColor:h.surface.subdued},onBackPress:()=>{s?.()},headingSubtitle:f,footerShadow:!0,primaryButton:H.primaryButton,secondaryButton:H.secondaryButton,onClose:()=>{s?.()},width:"700px",children:t(u,{children:[e(g,{children:t("div",{className:"inside--container",children:[A&&e("div",{className:"icon--container",children:e(i,{width:40,height:40,color:h.content.warning})}),B&&e(m,{style:{textAlign:"center"},children:B}),e(O,{style:{textAlign:"center",color:S||h.content.primary},children:w})]})}),V?e(v,{}):e(N,{analyticsData:G,skipTitle:j==d.GREEN})]})})},N=i=>{const{analyticsData:a,skipTitle:c}=i;return t(b,{children:[c?e(n,{}):e(p,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",{className:"mt-3",children:f.map(((t,n)=>e(j,{icon:t.icon,title:t.title,value:a[t.valName]||0,percentValue:t.percentValName?a[t.percentValName]:null},n)))}),a?.clickAnalytics&&Object.keys(a?.clickAnalytics)&&Object.keys(a?.clickAnalytics).length?t(n,{children:[e(p,{color:h.content.secondary,children:"Clicked"}),e("div",{className:"mt-3",children:Object.entries(a.clickAnalytics).map((([t,n],i)=>e(j,{icon:l,title:t,value:n.totalClicks||0,percentValue:n.clickPercentage},i)))})]}):e(n,{})]})},j=i=>{const{icon:l,title:a,value:c,percentValue:r}=i;return t("div",{className:"each--analytics--container",children:[t("div",{className:"d-flex align--center",style:{gap:8},children:[e("div",{className:"each--icon--container",children:e(l,{width:"16px",height:"16px",color:h.background.brand})}),e(y,{children:a})]}),t("div",{className:"d-flex align--center",style:{gap:8},children:[r?e(s,{tagText:`${r}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(T,{children:c})]})]})};export{j as AnalyticsItem,N as RightPanelTemplateAnalytics,x as TemplateAnalyticsComponent};
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import l from"../../../assets/icons/alert_triangle.svg.js";import i from"../../../assets/icons/click.svg.js";import{useState as a,useEffect as c,useMemo as s}from"react";import{StyledModal as r}from"../../modals/styledModal.js";import{Tag as o}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as d}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as m,TitleSmall as p,Caption as u}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as h,LeftPanelContainer as g,RightPanelContainer as b,CustomTitleMedium as j}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as T,ANALYTICS_ENGAGEMENT_MAP as k}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const f=n=>{const{templateAnalytics:i,onClose:o,onProceed:p,onCancel:b,headingTitle:j,headingSubtitle:k,templateId:f}=n,{templateQuality:N=d.GREEN,fetchAnalytics:O}=i||{},{icon:C,title:A,subline:B,sublineTextType:w,sublineColor:E}=T[N||d.GREEN],[S,G]=a({}),[P,V]=a(!0);c((()=>{null==O||O(f||"").then((e=>{e.analytics&&G(e.analytics),V(!1)}))}),[]);const R=s((()=>N===d.GREEN?{primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:p,disabled:P},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==o||o(),null==b||b()},disabled:P}}:{primaryButton:{buttonText:"Cancel",buttonType:"primary",onClick:()=>{null==o||o(),null==b||b()},disabled:P},secondaryButton:{buttonText:"Proceed with selection",buttonType:"secondary",onClick:p,disabled:P}}),[N,P]),H=w||u;return e(r,Object.assign({open:!0,headingTitle:j,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==o||o()},headingSubtitle:k,footerShadow:!0,primaryButton:R.primaryButton,secondaryButton:R.secondaryButton,onClose:()=>{null==o||o()},width:"700px"},{children:t(h,{children:[e(g,{children:t("div",Object.assign({className:"inside--container"},{children:[C&&e("div",Object.assign({className:"icon--container"},{children:e(l,{width:40,height:40,color:y.content.warning})})),A&&e(m,Object.assign({style:{textAlign:"center"}},{children:A})),e(H,Object.assign({style:{textAlign:"center",color:E||y.content.primary}},{children:B}))]}))}),P?e(v,{}):e(x,{analyticsData:S,skipTitle:N==d.GREEN})]})}))},x=l=>{const{analyticsData:a,skipTitle:c}=l;return t(b,{children:[c?e(n,{}):e(p,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",Object.assign({className:"mt-3"},{children:k.map(((t,n)=>e(N,{icon:t.icon,title:t.title,value:a[t.valName]||0,percentValue:t.percentValName?a[t.percentValName]:null},n)))})),(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics)&&Object.keys(null==a?void 0:a.clickAnalytics).length?t(n,{children:[e(p,Object.assign({color:y.content.secondary},{children:"Clicked"})),e("div",Object.assign({className:"mt-3"},{children:Object.entries(a.clickAnalytics).map(((t,n)=>{let[l,a]=t;return e(N,{icon:i,title:l,value:a.totalClicks||0,percentValue:a.clickPercentage},n)}))}))]}):e(n,{})]})},N=l=>{const{icon:i,title:a,value:c,percentValue:s}=l;return t("div",Object.assign({className:"each--analytics--container"},{children:[t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e("div",Object.assign({className:"each--icon--container"},{children:e(i,{width:"16px",height:"16px",color:y.background.brand})})),e(u,{children:a})]})),t("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[s?e(o,{tagText:`${s}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(j,{children:c})]}))]}))};export{N as AnalyticsItem,x as RightPanelTemplateAnalytics,f as TemplateAnalyticsComponent};

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

@@ -1,7 +1,3 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-
-declare const TemplateAnalyticsSkeleton: (props: {
-    skipTitleShimmer?: boolean;
-}) => react_jsx_runtime.JSX.Element;
-
-export { TemplateAnalyticsSkeleton };
+export declare const TemplateAnalyticsSkeleton: (props: {
+    skipTitleShimmer?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as t}from"react/jsx-runtime";import{BikShimmer as h}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as s}from"../styles/TemplateAnalyticsStyles.js";const r=r=>{const{skipTitleShimmer:m}=r;return e(s,{children:[i("div",{children:m?i(t,{}):i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:[0,1,2].map((e=>i(l,{},e)))}),e(t,{children:[i("div",{children:i(h,{boxes:[{width:"76px",height:"18px"}]})}),i("div",{className:"mt-3",children:i(l,{})})]})]})},l=()=>e("div",{className:"each--analytics--container",children:[e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"24px",height:"24px"}]}),i(h,{boxes:[{width:"69px",height:"11px"}]})]}),e("div",{className:"d-flex align--center",style:{gap:8},children:[i(h,{boxes:[{width:"43px",height:"18px"}]}),i(h,{boxes:[{width:"69px",height:"28px"}]})]})]});export{r as TemplateAnalyticsSkeleton};
+import{jsxs as e,jsx as i,Fragment as s}from"react/jsx-runtime";import{BikShimmer as t}from"../../shimmer/ShimmerComponent/BikShimmer.js";import{RightPanelContainer as h}from"../styles/TemplateAnalyticsStyles.js";const c=c=>{const{skipTitleShimmer:a}=c;return e(h,{children:[i("div",{children:a?i(s,{}):i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((e=>i(n,{},e)))})),e(s,{children:[i("div",{children:i(t,{boxes:[{width:"76px",height:"18px"}]})}),i("div",Object.assign({className:"mt-3"},{children:i(n,{})}))]})]})},n=()=>e("div",Object.assign({className:"each--analytics--container"},{children:[e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"24px",height:"24px"}]}),i(t,{boxes:[{width:"69px",height:"11px"}]})]})),e("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i(t,{boxes:[{width:"43px",height:"18px"}]}),i(t,{boxes:[{width:"69px",height:"28px"}]})]}))]}));export{c as TemplateAnalyticsSkeleton};

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

@@ -0,0 +1,21 @@
+import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+export interface TemplateSelectModalContentProps {
+    channel: CHANNEL_TYPE;
+    showVariableMapping?: boolean;
+    hideHeader?: boolean;
+    showOnlyContent?: boolean;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    showVariableModal?: boolean;
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+    showSampleValues?: boolean;
+    fileName?: string;
+    setFileName?: (name: string) => void;
+    variableListFromProps?: VariableListInterfaceV2[];
+    skipDefaultVariableContent?: boolean;
+}
+declare const TemplateSelectModalContent: ({ channel, showVariableMapping, variableListFromProps, showOnlyContent, whatsappSpecificPickerMeta, showVariableModal, discountCode, setDiscountCode, variableListForImage, showSampleValues, fileName, setFileName, skipDefaultVariableContent, }: TemplateSelectModalContentProps) => import("react/jsx-runtime").JSX.Element;
+export default TemplateSelectModalContent;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as o}from"../../template-preview/models/Channels.js";import i from"./Body.js";import t from"./Header.js";const s=({channel:s,showVariableMapping:l,variableListFromProps:r,showOnlyContent:n,whatsappSpecificPickerMeta:p,showVariableModal:m,discountCode:d,setDiscountCode:c,variableListForImage:h,showSampleValues:w,fileName:f,setFileName:b,skipDefaultVariableContent:u})=>e("div",{style:{paddingBottom:0},children:a("div",{children:[s===o.EMAIL&&e(t,{showOnlyContent:n}),e(i,{variableListFromProps:r,whatsappSpecificPickerMeta:p,showVariableMapping:!!l,showOnlyContent:n,showVariableModal:m,discountCode:d,setDiscountCode:c,variableListForImage:h,showSampleValues:w,fileName:f,setFileName:b,skipDefaultVariableContent:u})]})});export{s as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{CHANNEL_TYPE as t}from"../../template-preview/models/Channels.js";import i from"./Body.js";import o from"./Header.js";const s=s=>{let{channel:r,showVariableMapping:l,variableListFromProps:n,showOnlyContent:p,whatsappSpecificPickerMeta:m,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:b,fileName:f,setFileName:u,skipDefaultVariableContent:C}=s;return e("div",Object.assign({style:{paddingBottom:0}},{children:a("div",{children:[r===t.EMAIL&&e(o,{showOnlyContent:p}),e(i,{variableListFromProps:n,whatsappSpecificPickerMeta:m,showVariableMapping:!!l,showOnlyContent:p,showVariableModal:d,discountCode:c,setDiscountCode:h,variableListForImage:w,showSampleValues:b,fileName:f,setFileName:u,skipDefaultVariableContent:C})]})}))};export{s as default};

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
+import { WEB_PUSH_COMPONENT_TYPE } from "../../template-preview/models/WebpushTemplate";
+import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
+import { ComponentType } from './VariableConnectorWhatsApp';
+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;
+    setShowDiscountCheckBox?: any;
+    buttonType?: BUTTON_TYPE;
+    componentType?: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
+    CTAoptions?: ButtonPlaceHolderOptions[];
+}
+declare const VariableConnector: React.FC<VariableConnectorProps>;
+export default VariableConnector;

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

@@ -1,10 +1,10 @@
-import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import l from"../../../assets/icons/edit.svg.js";import o from"../../../assets/icons/info.svg.js";import{format as i}from"date-fns";import{cloneDeep as n}from"lodash";import{useState as r,useEffect as s}from"react";import p from"styled-components";import{Alert as m}from"../../alerts/Alert.js";import{ALERT_TYPES as u}from"../../alerts/AlertHelper.js";import{CustomDateTime as c}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as d}from"../../dropdown/Dropdown.js";import{Input as b}from"../../input/Input.js";import{truncate as y}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as x}from"../../template-preview/constants/regexPatterns.js";import{isCarouselComponent as h}from"../../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as f}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as T}from"../../template-preview/models/WebpushTemplate.js";import{POD as _,BUTTON_TYPE as v}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as g,BodyPrimary as E}from"../../TypographyStyle.js";import C from"../../../utils/StringUtils.js";import{COLORS as V}from"../../../constants/Theme.js";import{useTemplateModalContext as S}from"../context/templateModalContext.js";import{updateVariables as k}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as A}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as B}from"./QueryParamsComponent.js";const L=p.div`
+import{jsxs as e,jsx as t,Fragment as l}from"react/jsx-runtime";import i from"../../../assets/icons/edit.svg.js";import a from"../../../assets/icons/info.svg.js";import{format as n}from"date-fns";import{cloneDeep as o}from"lodash";import{useState as s,useEffect as u}from"react";import d from"styled-components";import{Alert as r}from"../../alerts/Alert.js";import{ALERT_TYPES as c}from"../../alerts/AlertHelper.js";import{CustomDateTime as p}from"../../custom-date-time/CustomDateTime.js";import{Dropdown as m}from"../../dropdown/Dropdown.js";import{Input as v}from"../../input/Input.js";import{truncate as b}from"../../product-picker-v2/collectionScreen.js";import{placeHolderNamePattern as g}from"../../template-preview/constants/regexPatterns.js";import{isCarouselComponent as O}from"../../template-preview/helpers/templateMiscHelper.js";import{CHANNEL_TYPE as j}from"../../template-preview/models/Channels.js";import{WEB_PUSH_COMPONENT_TYPE as y}from"../../template-preview/models/WebpushTemplate.js";import{POD as x,BUTTON_TYPE as h}from"../../template-preview/models/WhatsAppTemplate.js";import{BodySecondary as f,BodyPrimary as T}from"../../TypographyStyle.js";import _ from"../../../utils/StringUtils.js";import{COLORS as E}from"../../../constants/Theme.js";import{useTemplateModalContext as C}from"../context/templateModalContext.js";import{updateVariables as V}from"../custom-hooks/useAdditionalVariables.js";import{getVariableNameForEmailByIndex as S}from"../utils/getVariableNameEmail.js";import{QueryParamsComponent as k}from"./QueryParamsComponent.js";const A=d.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${e=>e.focused&&e.channel===f.EMAIL?V.background.warning.light:"transparent"};
+	background: ${e=>e.focused&&e.channel===j.EMAIL?E.background.warning.light:"transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
-`,O=p.div`
+`,B=d.div`
 	position: absolute;
 	top: 0;
 	left: 0;
@@ -12,8 +12,8 @@ import{jsxs as e,jsx as t,Fragment as a}from"react/jsx-runtime";import l from"..
 	height: 100%;
 	z-index: 1000;
 	cursor: not-allowed;
-`,P=p.div`
+`,L=d.div`
 	height: 100%;
 	width: 48%;
 	background: rgba(0, 0, 0, 0.1);
-`,w={value:"custom_link",label:"Custom URL"},D={value:"custom_text",label:"Custom text"},U={value:"static_expiry",label:"Static Expiry"},H=p=>{const{onFocus:H,variable:N,index:R,showVariableModal:I,setShowDiscountCheckBox:j,componentType:W,CTAoptions:Y,buttonType:$}=p,[M,z]=r(!1),[Z,q]=r(""),[G,F]=r([]),[K,Q]=r(),[J,X]=r(!1),{variableList:ee,setVariableList:te,setVariableCallback:ae,setShowVariablePicker:le,device:oe,channel:ie,isError:ne,originalVariableList:re,template:se,templateSelectionTriggered:pe,setTemplate:me,setDisplayContent:ue,setOriginalVariableList:ce,globalNormalizedPlaceholders:de,enabledCustomText:be,pod:ye,selectedCarouselIndex:xe,isProductCarouselType:he,isWhatsappCarousel:fe,disableEditVariable:Te,disableEditExpiry:_e,templateErrorIndexes:ve,maxCharLimit:ge,disableDatePicker:Ee,showDiscountCodeExpiryInfo:Ce,cardIndex:Ve=1}=S();function Se(e,t){const a=e;q(""),Q(a),ie===f.WHATSAPP||ie===f.RCS?"custom_text"!==a.value&&"custom_link"!==a.value&&"static_expiry"!==a.value?(Ae(a.value??"","string"),Be?.(N.index??0,a.value,!0)):(Be?.(N.index??0,"",!0,a.value),Ae("","url"===a.bikPlaceholderType?"link":"string")):"custom_text"!==a.value&&"custom_link"!==a.value?(Ae(a.value,"url"===a.bikPlaceholderType?"link":"string"),ie==f.WEBPUSH&&Oe?.(N.index??0,a.value)):(q(""),Ae("",a.value))}function ke(e,t){q(t);const a="custom_link"===K?.value&&t?t.includes("https")?t:`https://${t}`:t;Ae(a,"static_expiry"===e?"string":e),ie!==f.WHATSAPP&&ie!==f.RCS||Be?.(N.index??0,a,"custom_link"===e||ye===_.CHATBOT&&"custom_text"===e,e),ie===f.WEBPUSH&&Oe?.(N.index??0,a)}function Ae(e,t,a){const l="custom_link"===t?"link":"custom_text"===t?"string":t;if(ie!==f.WHATSAPP&&ie!==f.WEBPUSH&&ie!==f.RCS){const a=A(R+1),o=document?.getElementById("mobile"===oe?"template_html_mobile":"template_html_desktop"),i=ie===f.EMAIL?o?.contentWindow?.document.getElementById(a):document.getElementById(a);i&&(i.textContent="custom_text"!==t&&"custom_link"!==t||e?e:N.variableName);const n=re.map(((t,a)=>a===R?{...t,type:l,updatedValue:e}:t));ce?.(n)}if(ie===f.WEBPUSH){const t=re,a=t=>t?.map(((t,a)=>a===R?{...t,type:l,updatedValue:e}:t)),o={BODY:"BODY"===W?a(t.body):t.body,TITLE:W===T.TITLE.toUpperCase()?a(t.title):t.title};ce?.((e=>({...e,title:o.TITLE,body:o.BODY,buttons:t.buttons})))}if(ie===f.WHATSAPP||ie===f.RCS){if(null!=xe&&xe>-1&&he){const a={...re}.cards.map(((a,o)=>"BODY"===W?{...a,body:a.body?.map(((t,a)=>R===a?{...t,type:l,updatedValue:e}:t))}:"TITLE"===W?{...a,title:a.title?.map(((t,a)=>R===a?{...t,type:l,updatedValue:e}:t))}:"BUTTONS"===W?{...a,buttons:a.buttons?.map(((a,l)=>l===R?{...a,buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===a.type?e:[e]}:a))}:a));return void ce?.((e=>({...e,cards:a})))}const o=null!=xe&&xe>-1?re.cards[xe]:re;let i=o.body,r=o.title,s=o.header,p=o.buttons;if("BODY"===W?i=o.body?.map(((t,a)=>a===R?{...t,type:l,updatedValue:e}:t)):"TITLE"===W?r=o?.title?.map(((t,a)=>a===R?{...t,type:l,updatedValue:e}:t)):"HEADER"===W?s=o.header?.map(((t,a)=>a===R?{...t,type:l,updatedValue:e}:t)):"BUTTONS"===W&&(p=o.buttons?.map(((l,o)=>o===R?{...l,buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e],queryParams:a??[]}:l))),null!=xe&&xe>-1){const e=n(re.cards);e[xe]={header:s,body:i,buttons:p,title:r},ce?.((t=>({...t,cards:e})))}else ce?.((e=>({...e,header:s,body:i,buttons:p,title:r})))}}function Be(e,t,a,l){if(null!=xe&&xe>-1&&he){const o={...se}.components.map((a=>h(a.type)?{...a,cards:a.cards?.map((a=>({...a,components:a.components.map((a=>{if("BODY"===a.type&&"BODY"===W){if(a.example?.body_text?.[0]){const l=[...a.example?.body_text?.[0]??[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const o={...a.example,body_text:[l]};return{...a,example:o}}return a}if("TITLE"===a.type&&"TITLE"===W){if(a.example?.title_text?.[0]){const l=[...a.example?.title_text?.[0]??[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const o={...a.example,title_text:[l]};return{...a,example:o}}return a}if("BUTTONS"===a.type&&"BUTTONS"===W){const l=a.buttons?.map(((a,l)=>l===e?{...a,example:[t]}:a));return l?{...a,buttons:l}:a}return a}))})))}:a)),i=n(se);if(a){const a={...se}.mapping.cards?.map(((a,o)=>{if("BODY"===W)return{...a,body:a.body?.map(((a,o)=>e===o?"custom_text"===l?`((editableVariable${o+10}))`:t:a))};if("TITLE"===W)return{...a,title:a?.title?.map(((a,o)=>e===o?"custom_text"===l?`((editableVariable${o+10}))`:t:a))};if("BUTTONS"===W&&a?.buttons){let i=-1,n=-1;return se.components[Ve].cards?.[o].components.forEach((t=>{"BUTTONS"===t.type&&t.buttons?.forEach(((t,a)=>{"URL"===t.type&&(i++,a===e&&"URL"==t.type&&(n=i))}))})),{...a,buttons:a.buttons?.map(((e,a)=>a===n?"custom_link"===l?"((customPlaceholderName))":t:e))}}return a}));i.mapping.cards=a}return i.components=o,void me?.(i)}const o=null!=xe&&xe>-1?{components:{...se}.components[Ve].cards?.[xe].components,mapping:{...se}.mapping.cards?.[xe]}:{...se},i=o?.components?.map((a=>{const l={...a};if("BODY"===a.type&&"BODY"===W&&(Array.isArray(a.example?.body_text)||a.example?.body_text?.[0])){const a=[...l.example?.body_text?.[0]??[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const o={...l.example,body_text:[a]};return{...l,example:o}}if("TITLE"===a.type&&"TITLE"===W){if(Array.isArray(a.example?.title_text)||a.example?.title_text?.[0]){const a=[...l.example?.title_text?.[0]??[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const o={...l.example,title_text:[a]};return{...l,example:o}}}else if("HEADER"===a.type&&"HEADER"===W){if(a.example?.header_text){const a=[...l.example?.header_text??[]];a[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const o={...l.example,header_text:a};return{...l,example:o}}}else{if("BUTTONS"===a.type&&"BUTTONS"===W){const o=a.buttons?.map(((a,l)=>l===e?{...a,example:"COPY_CODE"===a.type?t:[t]}:a));return o?{...l,buttons:o}:l}if("limited_time_offer"===a.type&&"limited_time_offer"===W)return{...l,example:{...l.example,limited_time_offer:t}}}return a}));if(o.components=i,a)if("BODY"===W&&o?.mapping?.body)o.mapping={...o.mapping,body:o.mapping?.body?.map(((a,o)=>e===o?"custom_text"===l?`((editableVariable${o+10}))`:t:a))};else if("TITLE"===W&&o?.mapping?.title)o.mapping={...o.mapping,title:o.mapping?.title?.map(((a,o)=>e===o?"custom_text"===l?`((editableVariable${o+10}))`:t:a))};else if("HEADER"===W&&o?.mapping?.header)o.mapping={...o.mapping,header:o.mapping.header.map(((a,o)=>e===o?"custom_text"===l?`((editableVariable${o+20}))`:t:a))};else if("BUTTONS"===W&&o?.mapping?.buttons){let a=-1,n=-1;i.forEach((t=>{"BUTTONS"===t.type&&t.buttons?.forEach(((t,l)=>{"URL"===t.type&&(a++,l===e&&"URL"==t.type&&(n=a))}))})),o.mapping={...o.mapping,buttons:o.mapping.buttons.map(((e,a)=>a===n?"custom_link"===l?"((customPlaceholderName))":t:e))}}if(null!=xe&&xe>-1&&se){const e=n(se);e.components[Ve].cards[xe].components=o.components,e.mapping.cards[xe]=o.mapping,me?.(e)}else me?.({...o})}s((()=>{M&&H?.()}),[M]),s((()=>{!function(){const e="mobile"===oe?"template_html_mobile":"template_html_desktop",t=document.getElementById(e),a=(t?.contentWindow?.document?.body?.innerHTML??"")+t?.contentWindow?.document.head.innerHTML;ie===f.EMAIL&&ue?.(a)}()}),[pe]),s((()=>{!function(){const e=[];let t=[];if(ie!==f.MESSAGE||be){"link"===N?.type?(e.push({label:"",options:[w,D]}),Q(w)):"date_time"===N?.type?(e.push({label:"",options:[w,D]}),Q(U)):(e.push({label:"",options:[w,D,U]}),Q(D));const a=de??[];F([...e,...a.map((e=>({...e,label:C.toCapitilize(e.label?.replace(/([A-Z])/g," $1")?.toLowerCase())})))]),t=[...e,...a]}else{const e=de??[];F([{label:"",options:[D,w]},...e]),t=[{label:"",options:[D,w]},...e]}if((ie===f.WHATSAPP||ie===f.EMAIL||ie===f.MESSAGE||ie===f.WEBPUSH||ie===f.RCS)&&N.updatedValue)if(x.test(N.updatedValue)&&(ie===f.WHATSAPP||ie===f.RCS)||N.updatedValue.startsWith("{{")&&ie!==f.WHATSAPP&&ie!==f.RCS){const e=function(e,t,a){let l={label:"",value:""};const o=a===(f.WHATSAPP||f.RCS)?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(I){let t=e.updatedValue;if(ye===_.CHATBOT&&"BUTTONS"===W){const a=Y?.filter((t=>t.placeHolder===e.updatedValue));a&&a.length>0&&(t=a[0].label)}l={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:e.updatedValue??""}}else t.map((e=>{e.options.map((e=>{e.value?.replace("{{","").replace("}}","").trim()===o.trim()&&(l=e)}))}));return l}(N,t,ie);e.value&&Q(e)}else"date_time"===N.type?(Q(U),q(N.updatedValue),Be(N.index??0,N.updatedValue)):N.updatedValue?.startsWith("https")?(Q(w),q(N.updatedValue.split("https://")[1])):(Q(D),q(N.updatedValue))}()}),[xe]),s((()=>{oe&&K&&Z&&setTimeout((()=>{Ae("custom_link"===K?.value&&Z?Z.includes("https")?Z:`https://${Z}`:Z,K.value)}),100)}),[oe]),s((()=>{!J&&K&&N.updatedValue&&setTimeout((()=>{Ae("custom_link"===K?.value&&N.updatedValue?N.updatedValue.includes("https")?N.updatedValue:`https://${N.updatedValue}`:N.updatedValue,K.value),X(!0)}),100)}),[K]);const Le=e=>{j?.(!1),"{{custom.url}}"===e.actualValue?Se({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?Se({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?Se({label:e.displayName,selected:!0,value:"static_expiry"}):Se({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Oe(e,t){const a=n(se),l=W.toLocaleLowerCase();a.webpushBroadcastConfig?.[l]&&(a.webpushBroadcastConfig[l][e]=t),me?.({...a})}return e(L,{channel:ie,focused:M,onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1),children:[t("div",{style:{marginBottom:8},children:e(g,{style:{color:ne&&!K?V.content.negative:V.content.primary},children:[N.variableName?.replace("{{","").replace("}}","")," ","link"===N?.type?"link":"variable"]})}),t("div",{style:{marginBottom:12},children:I?e("div",{style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:K?.label?"space-between":"flex-end",backgroundColor:"date_time"===N?.type&&_e?V.background.base:void 0},children:[t(E,{numberOfLines:1,children:ye===_.CHATBOT?["static_expiry","custom_text","custom_link"].includes(K?.value??"")?K?.label:K?.value:y(K?.label??"",20,!0)}),Te||"date_time"===N?.type&&_e?t(a,{}):t(l,{onClick:()=>{(()=>{let e=Array.isArray(ee)?[...ee]:[];const t=(t,a,l)=>{const o=k({variableList:e,categoryDisplayName:t,variableDisplayName:a,variableValue:l});Array.isArray(o)&&(e=o)};ye===_.CHATBOT&&$!==v.URL&&"limited_time_offer"!==W&&t("Custom Variables","Custom Text","{{custom.text}}"),$===v.URL&&ye===_.CHATBOT?t("Custom Variables","Custom URL","{{custom.url}}"):"limited_time_offer"===W?t("Static Variables","Static Expiry","{{static.expiry}}"):$===v.COPY_CODE&&t("Custom Variables","Custom Text","{{custom.text}}"),te(e)})(),ae((()=>Le)),le(!0)},width:24,height:24,color:V.content.primary})]}):t(d,{disabled:Te,options:G,isSearchable:!1,onSelect:Se,defaultOptions:K?[{...K,selected:!0}]:[]})}),("custom_text"===K?.value||"custom_link"===K?.value)&&t(b,{state:Te?"disabled":"none",labelText:"custom_text"===K?.value?"Custom text value":"custom_link"===K?.value?"Custom URL value":"",id:`variable-value-${K?.value}-${R}`,value:Z,errorMessage:ne&&ve?.buttons?.includes(N?.index??-1)?Z&&0!==Z.trim().length?"custom_link"!==K.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${Z.trim()}`)&&0!==Z.trim().length?"custom_link"!==K.value&&Z.length>30?"Length cannot be more than 30":"BUTTONS"===W&&"custom_link"!==K.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:ge||("custom_link"===K?.value?2e3:"BUTTONS"===W?15:30),noKeyDownChange:!0,prefixText:"custom_link"===K?.value?"https://":"",placeholder:"link"===N.type||"custom_link"===K.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{ke(K.value,e)}}),"static_expiry"===K?.value&&e("div",{style:{position:"relative"},children:[(Te||Ee)&&e(O,{onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"},children:[t(P,{}),t(P,{})]}),t(c,{placement:"auto",time:i(Z?new Date(Z):new Date,"hh:mm a"),date:Z?new Date(Z):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{ke("static_expiry",e.toISOString())}})]}),"static_expiry"===K?.value&&Ce&&t("div",{style:{marginTop:8},children:t(m,{containerStyle:{padding:"4px 8px"},icon:()=>t(o,{width:16,height:16,color:V.content.secondary}),type:u.NEUTRAL,text:"Please use the same expiration code that you applied when creating\nthe code on Shopify"})}),"link"===N.type&&"custom_link"!==K?.value&&!he&&!fe&&ye===_.CHATBOT&&t(B,{isError:ve?.buttons?.includes(N?.index??-1)??!1,params:N.queryParams??[],onChange:e=>{Ae(N.updatedValue,"link",e)},variableValue:N.updatedValue})]})};export{L as Container,H as default};
+`,P={value:"custom_link",label:"Custom URL"},w={value:"custom_text",label:"Custom text"},D={value:"static_expiry",label:"Static Expiry"},U=d=>{var U,H,N,R,I,W,Y,$,M;const{onFocus:z,variable:Z,index:q,showVariableModal:G,setShowDiscountCheckBox:F,componentType:K,CTAoptions:Q,buttonType:J}=d,[X,ee]=s(!1),[te,le]=s(""),[ie,ae]=s([]),[ne,oe]=s(),[se,ue]=s(!1),{variableList:de,setVariableList:re,setVariableCallback:ce,setShowVariablePicker:pe,device:me,channel:ve,isError:be,originalVariableList:ge,template:Oe,templateSelectionTriggered:je,setTemplate:ye,setDisplayContent:xe,setOriginalVariableList:he,globalNormalizedPlaceholders:fe,enabledCustomText:Te,pod:_e,selectedCarouselIndex:Ee,isProductCarouselType:Ce,isWhatsappCarousel:Ve,disableEditVariable:Se,disableEditExpiry:ke,templateErrorIndexes:Ae,maxCharLimit:Be,disableDatePicker:Le,showDiscountCodeExpiryInfo:Pe,cardIndex:we=1}=C();function De(e,t){var l,i,a,n;const o=e;le(""),oe(o),ve===j.WHATSAPP||ve===j.RCS?"custom_text"!==o.value&&"custom_link"!==o.value&&"static_expiry"!==o.value?(He(null!==(l=o.value)&&void 0!==l?l:"","string"),null==Ne||Ne(null!==(i=Z.index)&&void 0!==i?i:0,o.value,!0)):(null==Ne||Ne(null!==(a=Z.index)&&void 0!==a?a:0,"",!0,o.value),He("","url"===o.bikPlaceholderType?"link":"string")):"custom_text"!==o.value&&"custom_link"!==o.value?(He(o.value,"url"===o.bikPlaceholderType?"link":"string"),ve==j.WEBPUSH&&(null==Ie||Ie(null!==(n=Z.index)&&void 0!==n?n:0,o.value))):(le(""),He("",o.value))}function Ue(e,t){var l,i;le(t);const a="custom_link"===(null==ne?void 0:ne.value)&&t?t.includes("https")?t:`https://${t}`:t;He(a,"static_expiry"===e?"string":e),ve!==j.WHATSAPP&&ve!==j.RCS||null==Ne||Ne(null!==(l=Z.index)&&void 0!==l?l:0,a,"custom_link"===e||_e===x.CHATBOT&&"custom_text"===e,e),ve===j.WEBPUSH&&(null==Ie||Ie(null!==(i=Z.index)&&void 0!==i?i:0,a))}function He(e,t,l){var i,a,n,s,u;const d="custom_link"===t?"link":"custom_text"===t?"string":t;if(ve!==j.WHATSAPP&&ve!==j.WEBPUSH&&ve!==j.RCS){const l=S(q+1),a=null===document||void 0===document?void 0:document.getElementById("mobile"===me?"template_html_mobile":"template_html_desktop"),n=ve===j.EMAIL?null===(i=null==a?void 0:a.contentWindow)||void 0===i?void 0:i.document.getElementById(l):document.getElementById(l);n&&(n.textContent="custom_text"!==t&&"custom_link"!==t||e?e:Z.variableName);const o=ge.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t));null==he||he(o)}if(ve===j.WEBPUSH){const t=ge,l=t=>null==t?void 0:t.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)),i={BODY:"BODY"===K?l(t.body):t.body,TITLE:K===y.TITLE.toUpperCase()?l(t.title):t.title};null==he||he((e=>Object.assign(Object.assign({},e),{title:i.TITLE,body:i.BODY,buttons:t.buttons})))}if(ve===j.WHATSAPP||ve===j.RCS){if(null!=Ee&&Ee>-1&&Ce){const l=Object.assign({},ge).cards.map(((l,i)=>{var a,n,o;return"BODY"===K?Object.assign(Object.assign({},l),{body:null===(a=l.body)||void 0===a?void 0:a.map(((t,l)=>q===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t))}):"TITLE"===K?Object.assign(Object.assign({},l),{title:null===(n=l.title)||void 0===n?void 0:n.map(((t,l)=>q===l?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t))}):"BUTTONS"===K?Object.assign(Object.assign({},l),{buttons:null===(o=l.buttons)||void 0===o?void 0:o.map(((l,i)=>i===q?Object.assign(Object.assign({},l),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===l.type?e:[e]}):l))}):l}));return void(null==he||he((e=>Object.assign(Object.assign({},e),{cards:l}))))}const i=null!=Ee&&Ee>-1?ge.cards[Ee]:ge;let r=i.body,c=i.title,p=i.header,m=i.buttons;if("BODY"===K?r=null===(a=i.body)||void 0===a?void 0:a.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"TITLE"===K?c=null===(n=null==i?void 0:i.title)||void 0===n?void 0:n.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"HEADER"===K?p=null===(s=i.header)||void 0===s?void 0:s.map(((t,l)=>l===q?Object.assign(Object.assign({},t),{type:d,updatedValue:e}):t)):"BUTTONS"===K&&(m=null===(u=i.buttons)||void 0===u?void 0:u.map(((i,a)=>a===q?Object.assign(Object.assign({},i),{buttonVariable:"custom_link"===t?"((customPlaceholderName))":e,example:"COPY_CODE"===i.type?e:[e],queryParams:null!=l?l:[]}):i))),null!=Ee&&Ee>-1){const e=o(ge.cards);e[Ee]={header:p,body:r,buttons:m,title:c},null==he||he((t=>Object.assign(Object.assign({},t),{cards:e})))}else null==he||he((e=>Object.assign(Object.assign({},e),{header:p,body:r,buttons:m,title:c})))}}function Ne(e,t,l,i){var a,n,s,u,d,r,c,p,m,v,b,g;if(null!=Ee&&Ee>-1&&Ce){const n=Object.assign({},Oe).components.map((l=>{var i;return O(l.type)?Object.assign(Object.assign({},l),{cards:null===(i=l.cards)||void 0===i?void 0:i.map((l=>Object.assign(Object.assign({},l),{components:l.components.map((l=>{var i,a,n,o,s,u,d,r,c,p,m;if("BODY"===l.type&&"BODY"===K){if(null===(a=null===(i=l.example)||void 0===i?void 0:i.body_text)||void 0===a?void 0:a[0]){const i=[...null!==(s=null===(o=null===(n=l.example)||void 0===n?void 0:n.body_text)||void 0===o?void 0:o[0])&&void 0!==s?s:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{body_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("TITLE"===l.type&&"TITLE"===K){if(null===(d=null===(u=l.example)||void 0===u?void 0:u.title_text)||void 0===d?void 0:d[0]){const i=[...null!==(p=null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])&&void 0!==p?p:[]];i[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const a=Object.assign(Object.assign({},l.example),{title_text:[i]});return Object.assign(Object.assign({},l),{example:a})}return l}if("BUTTONS"===l.type&&"BUTTONS"===K){const i=null===(m=l.buttons)||void 0===m?void 0:m.map(((l,i)=>i===e?Object.assign(Object.assign({},l),{example:[t]}):l));return i?Object.assign(Object.assign({},l),{buttons:i}):l}return l}))})))}):l})),s=o(Oe);if(l){const l=null===(a=Object.assign({},Oe).mapping.cards)||void 0===a?void 0:a.map(((l,a)=>{var n,o,s,u;if("BODY"===K)return Object.assign(Object.assign({},l),{body:null===(n=l.body)||void 0===n?void 0:n.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("TITLE"===K)return Object.assign(Object.assign({},l),{title:null===(o=null==l?void 0:l.title)||void 0===o?void 0:o.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});if("BUTTONS"===K&&(null==l?void 0:l.buttons)){let n=-1,o=-1;return null===(s=Oe.components[we].cards)||void 0===s||s[a].components.forEach((t=>{var l;"BUTTONS"===t.type&&(null===(l=t.buttons)||void 0===l||l.forEach(((t,l)=>{"URL"===t.type&&(n++,l===e&&"URL"==t.type&&(o=n))})))})),Object.assign(Object.assign({},l),{buttons:null===(u=l.buttons)||void 0===u?void 0:u.map(((e,l)=>l===o?"custom_link"===i?"((customPlaceholderName))":t:e))})}return l}));s.mapping.cards=l}return s.components=n,void(null==ye||ye(s))}const j=null!=Ee&&Ee>-1?{components:null===(n=Object.assign({},Oe).components[we].cards)||void 0===n?void 0:n[Ee].components,mapping:null===(s=Object.assign({},Oe).mapping.cards)||void 0===s?void 0:s[Ee]}:Object.assign({},Oe),y=null===(u=null==j?void 0:j.components)||void 0===u?void 0:u.map((l=>{var i,a,n,o,s,u,d,r,c,p,m,v,b,g,O,j;const y=Object.assign({},l);if("BODY"===l.type&&"BODY"===K&&(Array.isArray(null===(i=l.example)||void 0===i?void 0:i.body_text)||(null===(n=null===(a=l.example)||void 0===a?void 0:a.body_text)||void 0===n?void 0:n[0]))){const l=[...null!==(u=null===(s=null===(o=y.example)||void 0===o?void 0:o.body_text)||void 0===s?void 0:s[0])&&void 0!==u?u:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},y.example),{body_text:[l]});return Object.assign(Object.assign({},y),{example:i})}if("TITLE"===l.type&&"TITLE"===K){if(Array.isArray(null===(d=l.example)||void 0===d?void 0:d.title_text)||(null===(c=null===(r=l.example)||void 0===r?void 0:r.title_text)||void 0===c?void 0:c[0])){const l=[...null!==(v=null===(m=null===(p=y.example)||void 0===p?void 0:p.title_text)||void 0===m?void 0:m[0])&&void 0!==v?v:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},y.example),{title_text:[l]});return Object.assign(Object.assign({},y),{example:i})}}else if("HEADER"===l.type&&"HEADER"===K){if(null===(b=l.example)||void 0===b?void 0:b.header_text){const l=[...null!==(O=null===(g=y.example)||void 0===g?void 0:g.header_text)&&void 0!==O?O:[]];l[e]=t.replace("{{","").replace("}}","").replace("((","").replace("))","");const i=Object.assign(Object.assign({},y.example),{header_text:l});return Object.assign(Object.assign({},y),{example:i})}}else{if("BUTTONS"===l.type&&"BUTTONS"===K){const i=null===(j=l.buttons)||void 0===j?void 0:j.map(((l,i)=>i===e?Object.assign(Object.assign({},l),{example:"COPY_CODE"===l.type?t:[t]}):l));return i?Object.assign(Object.assign({},y),{buttons:i}):y}if("limited_time_offer"===l.type&&"limited_time_offer"===K)return Object.assign(Object.assign({},y),{example:Object.assign(Object.assign({},y.example),{limited_time_offer:t})})}return l}));if(j.components=y,l)if("BODY"===K&&(null===(d=null==j?void 0:j.mapping)||void 0===d?void 0:d.body))j.mapping=Object.assign(Object.assign({},j.mapping),{body:null===(c=null===(r=j.mapping)||void 0===r?void 0:r.body)||void 0===c?void 0:c.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("TITLE"===K&&(null===(p=null==j?void 0:j.mapping)||void 0===p?void 0:p.title))j.mapping=Object.assign(Object.assign({},j.mapping),{title:null===(v=null===(m=j.mapping)||void 0===m?void 0:m.title)||void 0===v?void 0:v.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+10}))`:t:l))});else if("HEADER"===K&&(null===(b=null==j?void 0:j.mapping)||void 0===b?void 0:b.header))j.mapping=Object.assign(Object.assign({},j.mapping),{header:j.mapping.header.map(((l,a)=>e===a?"custom_text"===i?`((editableVariable${a+20}))`:t:l))});else if("BUTTONS"===K&&(null===(g=null==j?void 0:j.mapping)||void 0===g?void 0:g.buttons)){let l=-1,a=-1;y.forEach((t=>{var i;"BUTTONS"===t.type&&(null===(i=t.buttons)||void 0===i||i.forEach(((t,i)=>{"URL"===t.type&&(l++,i===e&&"URL"==t.type&&(a=l))})))})),j.mapping=Object.assign(Object.assign({},j.mapping),{buttons:j.mapping.buttons.map(((e,l)=>l===a?"custom_link"===i?"((customPlaceholderName))":t:e))})}if(null!=Ee&&Ee>-1&&Oe){const e=o(Oe);e.components[we].cards[Ee].components=j.components,e.mapping.cards[Ee]=j.mapping,null==ye||ye(e)}else null==ye||ye(Object.assign({},j))}u((()=>{X&&(null==z||z())}),[X]),u((()=>{!function(){var e,t,l,i,a;const n="mobile"===me?"template_html_mobile":"template_html_desktop",o=document.getElementById(n),s=(null!==(i=null===(l=null===(t=null===(e=null==o?void 0:o.contentWindow)||void 0===e?void 0:e.document)||void 0===t?void 0:t.body)||void 0===l?void 0:l.innerHTML)&&void 0!==i?i:"")+(null===(a=null==o?void 0:o.contentWindow)||void 0===a?void 0:a.document.head.innerHTML);ve===j.EMAIL&&(null==xe||xe(s))}()}),[je]),u((()=>{!function(){var e,t;const l=[];let i=[];if(ve!==j.MESSAGE||Te){"link"===(null==Z?void 0:Z.type)?(l.push({label:"",options:[P,w]}),oe(P)):"date_time"===(null==Z?void 0:Z.type)?(l.push({label:"",options:[P,w]}),oe(D)):(l.push({label:"",options:[P,w,D]}),oe(w));const e=null!=fe?fe:[];ae([...l,...e.map((e=>{var t,l;return Object.assign(Object.assign({},e),{label:_.toCapitilize(null===(l=null===(t=e.label)||void 0===t?void 0:t.replace(/([A-Z])/g," $1"))||void 0===l?void 0:l.toLowerCase())})}))]),i=[...l,...e]}else{const e=null!=fe?fe:[];ae([{label:"",options:[w,P]},...e]),i=[{label:"",options:[w,P]},...e]}if((ve===j.WHATSAPP||ve===j.EMAIL||ve===j.MESSAGE||ve===j.WEBPUSH||ve===j.RCS)&&Z.updatedValue)if(g.test(Z.updatedValue)&&(ve===j.WHATSAPP||ve===j.RCS)||Z.updatedValue.startsWith("{{")&&ve!==j.WHATSAPP&&ve!==j.RCS){const e=function(e,t,l){var i;let a={label:"",value:""};const n=l===(j.WHATSAPP||j.RCS)?e.updatedValue.replace("[[","").replace("]]",""):e.updatedValue.replace("{{","").replace("}}","");if(G){let t=e.updatedValue;if(_e===x.CHATBOT&&"BUTTONS"===K){const l=null==Q?void 0:Q.filter((t=>t.placeHolder===e.updatedValue));l&&l.length>0&&(t=l[0].label)}a={label:t?t.replace("{{","").replace("}}","").trim().replace("."," "):"",value:null!==(i=e.updatedValue)&&void 0!==i?i:""}}else t.map((e=>{e.options.map((e=>{var t;(null===(t=e.value)||void 0===t?void 0:t.replace("{{","").replace("}}","").trim())===n.trim()&&(a=e)}))}));return a}(Z,i,ve);e.value&&oe(e)}else"date_time"===Z.type?(oe(D),le(Z.updatedValue),Ne(null!==(e=Z.index)&&void 0!==e?e:0,Z.updatedValue)):(null===(t=Z.updatedValue)||void 0===t?void 0:t.startsWith("https"))?(oe(P),le(Z.updatedValue.split("https://")[1])):(oe(w),le(Z.updatedValue))}()}),[Ee]),u((()=>{me&&ne&&te&&setTimeout((()=>{He("custom_link"===(null==ne?void 0:ne.value)&&te?te.includes("https")?te:`https://${te}`:te,ne.value)}),100)}),[me]),u((()=>{!se&&ne&&Z.updatedValue&&setTimeout((()=>{He("custom_link"===(null==ne?void 0:ne.value)&&Z.updatedValue?Z.updatedValue.includes("https")?Z.updatedValue:`https://${Z.updatedValue}`:Z.updatedValue,ne.value),ue(!0)}),100)}),[ne]);const Re=e=>{null==F||F(!1),"{{custom.url}}"===e.actualValue?De({label:e.displayName,selected:!0,value:"custom_link"}):"{{custom.text}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"custom_text"}):"{{static.expiry}}"==e.actualValue?De({label:e.displayName,selected:!0,value:"static_expiry"}):De({label:e.displayName.replace("{{","").replace("}}","").trim().replace("."," "),selected:!0,value:e.actualValue,bikPlaceholderType:"string"})};function Ie(e,t){var l;const i=o(Oe),a=K.toLocaleLowerCase();(null===(l=i.webpushBroadcastConfig)||void 0===l?void 0:l[a])&&(i.webpushBroadcastConfig[a][e]=t),null==ye||ye(Object.assign({},i))}return e(A,Object.assign({channel:ve,focused:X,onMouseEnter:()=>ee(!0),onMouseLeave:()=>ee(!1)},{children:[t("div",Object.assign({style:{marginBottom:8}},{children:e(f,Object.assign({style:{color:be&&!ne?E.content.negative:E.content.primary}},{children:[null===(U=Z.variableName)||void 0===U?void 0:U.replace("{{","").replace("}}","")," ","link"===(null==Z?void 0:Z.type)?"link":"variable"]}))})),t("div",Object.assign({style:{marginBottom:12}},{children:G?e("div",Object.assign({style:{display:"flex",border:"#E0E0E0 1px solid",borderRadius:4,padding:10,justifyContent:(null==ne?void 0:ne.label)?"space-between":"flex-end",backgroundColor:"date_time"===(null==Z?void 0:Z.type)&&ke?E.background.base:void 0}},{children:[t(T,Object.assign({numberOfLines:1},{children:_e===x.CHATBOT?["static_expiry","custom_text","custom_link"].includes(null!==(H=null==ne?void 0:ne.value)&&void 0!==H?H:"")?null==ne?void 0:ne.label:null==ne?void 0:ne.value:b(null!==(N=null==ne?void 0:ne.label)&&void 0!==N?N:"",20,!0)})),Se||"date_time"===(null==Z?void 0:Z.type)&&ke?t(l,{}):t(i,{onClick:()=>{(()=>{let e=Array.isArray(de)?[...de]:[];const t=(t,l,i)=>{const a=V({variableList:e,categoryDisplayName:t,variableDisplayName:l,variableValue:i});Array.isArray(a)&&(e=a)};_e===x.CHATBOT&&J!==h.URL&&"limited_time_offer"!==K&&t("Custom Variables","Custom Text","{{custom.text}}"),J===h.URL&&_e===x.CHATBOT?t("Custom Variables","Custom URL","{{custom.url}}"):"limited_time_offer"===K?t("Static Variables","Static Expiry","{{static.expiry}}"):J===h.COPY_CODE&&t("Custom Variables","Custom Text","{{custom.text}}"),re(e)})(),ce((()=>Re)),pe(!0)},width:24,height:24,color:E.content.primary})]})):t(m,{disabled:Se,options:ie,isSearchable:!1,onSelect:De,defaultOptions:ne?[Object.assign(Object.assign({},ne),{selected:!0})]:[]})})),("custom_text"===(null==ne?void 0:ne.value)||"custom_link"===(null==ne?void 0:ne.value))&&t(v,{state:Se?"disabled":"none",labelText:"custom_text"===(null==ne?void 0:ne.value)?"Custom text value":"custom_link"===(null==ne?void 0:ne.value)?"Custom URL value":"",id:`variable-value-${null==ne?void 0:ne.value}-${q}`,value:te,errorMessage:be&&(null===(R=null==Ae?void 0:Ae.buttons)||void 0===R?void 0:R.includes(null!==(I=null==Z?void 0:Z.index)&&void 0!==I?I:-1))?te&&0!==te.trim().length?"custom_link"!==ne.value||/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/.test(`https://${te.trim()}`)&&0!==te.trim().length?"custom_link"!==ne.value&&te.length>30?"Length cannot be more than 30":"BUTTONS"===K&&"custom_link"!==ne.value?"Enter valid alpha numeric code":"":"Enter valid URL":"Required field":"",maxCharLimit:Be||("custom_link"===(null==ne?void 0:ne.value)?2e3:"BUTTONS"===K?15:30),noKeyDownChange:!0,prefixText:"custom_link"===(null==ne?void 0:ne.value)?"https://":"",placeholder:"link"===Z.type||"custom_link"===ne.value?"Enter custom URL here":"Enter custom text here",onChangeText:e=>{Ue(ne.value,e)}}),"static_expiry"===(null==ne?void 0:ne.value)&&e("div",Object.assign({style:{position:"relative"}},{children:[(Se||Le)&&e(B,Object.assign({onClick:e=>e.preventDefault(),style:{display:"flex",justifyContent:"space-between"}},{children:[t(L,{}),t(L,{})]})),t(p,{placement:"auto",time:n(te?new Date(te):new Date,"hh:mm a"),date:te?new Date(te):new Date,minDate:new Date,error:"",setError:()=>{},onChange:e=>{Ue("static_expiry",e.toISOString())}})]})),"static_expiry"===(null==ne?void 0:ne.value)&&Pe&&t("div",Object.assign({style:{marginTop:8}},{children:t(r,{containerStyle:{padding:"4px 8px"},icon:()=>t(a,{width:16,height:16,color:E.content.secondary}),type:c.NEUTRAL,text:"Please use the same expiration code that you applied when creating\nthe code on Shopify"})})),"link"===Z.type&&"custom_link"!==(null==ne?void 0:ne.value)&&!Ce&&!Ve&&_e===x.CHATBOT&&t(k,{isError:null!==($=null===(W=null==Ae?void 0:Ae.buttons)||void 0===W?void 0:W.includes(null!==(Y=null==Z?void 0:Z.index)&&void 0!==Y?Y:-1))&&void 0!==$&&$,params:null!==(M=Z.queryParams)&&void 0!==M?M:[],onChange:e=>{He(Z.updatedValue,"link",e)},variableValue:Z.updatedValue})]}))};export{A as Container,U as default};

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

@@ -0,0 +1,14 @@
+import { AllTemplateVariables, CHANNEL_TYPE } from "../../template-preview";
+import { WEB_PUSH_COMPONENT_TYPE, WebpushComponentKeyType, WebpushTemplateVariables } from "../../template-preview/models/WebpushTemplate";
+import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+export type ComponentType = WhatsAppTemplate['components'][0];
+export interface VariableConnectorWhatsAppProps {
+    originalVariableList: WhatsAppTemplateVariables | WebpushTemplateVariables | AllTemplateVariables;
+    descriptionComponent: ComponentType | WebpushComponentKeyType;
+    type: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
+    showVariableModal?: boolean;
+    originalList?: WhatsAppTemplateVariables | WebpushTemplateVariables | AllTemplateVariables;
+    channel?: CHANNEL_TYPE;
+}
+declare const VariableConnectorWhatsApp: (props: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
+export default VariableConnectorWhatsApp;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import{Input as i}from"../../input/Input.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as r}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{useTemplateModalContext as p}from"../context/templateModalContext.js";import n from"./VariableConnector.js";const d=d=>{const{descriptionComponent:s,type:m,showVariableModal:c,originalList:b,channel:h}=d,{originalVariableList:x,disableEditVariable:v,selectedCarouselIndex:f,initialExpiryDateTime:y}=p();let T=x;h&&(h==l.WHATSAPP||h==l.RCS)&&b&&(T=b);const u=s.type;if("BODY"===u||"TITLE"===u.toLocaleUpperCase())return e("div",{children:(null!=f&&f>-1?"TITLE"===u.toLocaleUpperCase()?T.cards[f]?.title:T.cards[f].body:"TITLE"===u.toLocaleUpperCase()?(l.RCS,T?.title):T?.body)?.map(((a,l)=>v||!a.isEditableVariable?t("div",{style:{margin:"16px 8px"},children:[t(o,{style:{color:r.content.primary},children:["HEADER"===m?"Header":""," Locked variable ",l+1]}),e(i,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]},l):e(n,{index:l,variable:a,showVariableModal:c,componentType:u},`${l}-${a.index}`)))});if("HEADER"===u)return e("div",{children:(null!=f&&f>-1?T.cards[f].header:T?.header)?.map(((a,l)=>a.isEditableVariable?e(n,{index:l,variable:a,showVariableModal:c,componentType:u},`${l}-${a.index}`):t("div",{style:{margin:"16px 8px"},children:[t(o,{style:{color:r.content.primary},children:["HEADER"===m?"Header":""," Locked variable ",l+1]}),e(i,{state:"disabled",placeholder:a.variableName,onChangeText:()=>{}})]},l)))});if("limited_time_offer"===u){let t=s.example?.limited_time_offer??(new Date).toISOString();return y&&(t=new Date(y).toISOString()),e("div",{children:e(n,{index:0,variable:{variableName:s?.limited_time_offer?.text??"Expires after",updatedValue:t,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:c,componentType:u},`${u}`)})}return e(a,{})};export{d as default};
+import{jsx as e,jsxs as i,Fragment as t}from"react/jsx-runtime";import{Input as a}from"../../input/Input.js";import"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js";import{COLORS as l}from"../../../constants/Theme.js";import"../../curtain/CurtainHelper.js";import"../../variable-picker-v3/model.js";import"../../template-preview/models/TemplateMeta.js";import"../../template-preview/models/WhatsAppTemplate.js";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";import{BodySecondary as o}from"../../TypographyStyle.js";import{useTemplateModalContext as n}from"../context/templateModalContext.js";import p from"./VariableConnector.js";const d=d=>{var s,m,v,c,b,h,u;const{descriptionComponent:x,type:f,showVariableModal:j,originalList:y,channel:T}=d,{originalVariableList:w,disableEditVariable:E,selectedCarouselIndex:g,initialExpiryDateTime:C}=n();let L=w;T&&(T==r.WHATSAPP||T==r.RCS)&&y&&(L=y);const V=x.type;if("BODY"===V||"TITLE"===V.toLocaleUpperCase())return e("div",{children:null===(m=null!=g&&g>-1?"TITLE"===V.toLocaleUpperCase()?null===(s=L.cards[g])||void 0===s?void 0:s.title:L.cards[g].body:"TITLE"===V.toLocaleUpperCase()?(r.RCS,null==L?void 0:L.title):null==L?void 0:L.body)||void 0===m?void 0:m.map(((t,r)=>E||!t.isEditableVariable?i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(o,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===f?"Header":""," Locked variable ",r+1]})),e(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),r):e(p,{index:r,variable:t,showVariableModal:j,componentType:V},`${r}-${t.index}`)))});if("HEADER"===V)return e("div",{children:null===(v=null!=g&&g>-1?L.cards[g].header:null==L?void 0:L.header)||void 0===v?void 0:v.map(((t,r)=>t.isEditableVariable?e(p,{index:r,variable:t,showVariableModal:j,componentType:V},`${r}-${t.index}`):i("div",Object.assign({style:{margin:"16px 8px"}},{children:[i(o,Object.assign({style:{color:l.content.primary}},{children:["HEADER"===f?"Header":""," Locked variable ",r+1]})),e(a,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),r)))});if("limited_time_offer"===V){let i=null!==(b=null===(c=x.example)||void 0===c?void 0:c.limited_time_offer)&&void 0!==b?b:(new Date).toISOString();return C&&(i=new Date(C).toISOString()),e("div",{children:e(p,{index:0,variable:{variableName:null!==(u=null===(h=null==x?void 0:x.limited_time_offer)||void 0===h?void 0:h.text)&&void 0!==u?u:"Expires after",updatedValue:i,type:"date_time",isEditableVariable:!0,index:0},showVariableModal:j,componentType:V},`${V}`)})}return e(t,{})};export{d as default};

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

@@ -0,0 +1,10 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface VariableConnectorsProps {
+    onFocus?: (variableIndex: number) => void;
+    showVariableModal?: boolean;
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+}
+declare const VariableConnectors: ({ onFocus, showVariableModal, 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,8 +1,8 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import o from"../../../assets/icons/info.svg.js";import{useState as t,useRef as r,useEffect as a}from"react";import l from"styled-components";import{CheckBox as n}from"../../checkBox/CheckBox.js";import{Input as d}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{TitleRegular as s,BodySecondary as p,TitleSmall as h}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import u from"../../../assets/icons/plus.svg.js";import{useTemplateModalContext as f}from"../context/templateModalContext.js";import g from"./VariableConnector.js";const x=l.div`
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"../../../assets/icons/info.svg.js";import{useState as o,useRef as a,useEffect as r}from"react";import n from"styled-components";import{CheckBox as l}from"../../checkBox/CheckBox.js";import{Input as s}from"../../input/Input.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{TitleRegular as d,BodySecondary as p,TitleSmall as h}from"../../TypographyStyle.js";import{COLORS as m}from"../../../constants/Theme.js";import g from"../../../assets/icons/plus.svg.js";import{useTemplateModalContext as b}from"../context/templateModalContext.js";import u from"./VariableConnector.js";const f=n.div`
 	display: flex;
 	flex-direction: column;
 	height: 100%;
-`,y=({onFocus:l,showVariableModal:y,discountCode:v,setDiscountCode:k})=>{const{originalVariableList:w,disableEditVariable:V,setVariableCallback:C,setShowVariablePicker:j}=f(),[T,B]=t(!1),[E,L]=t(!1),[D,F]=t(""),[I,M]=t(!1),N=r(),S=r();a((()=>{k&&k(v+D)}),[D]);a((()=>{w.some((e=>"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")))?(B(!0),v&&M(!0)):(B(!1),M?.(!1),k?.(""))}),[w]);const A=e=>{F(e.actualValue)};return e(x,{children:[e("div",{style:{padding:8},children:[e("div",{style:{display:"flex",gap:8,alignItems:"center",marginBottom:4},children:[i(s,{style:{color:m.content.primary},children:"Edit variables and links"}),i(c,{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",{style:{display:"flex"},children:i(o,{width:20,height:20,color:m.content.placeholder})})})]}),i(p,{style:{color:m.content.secondary},children:"You can view variables and links on the left underlined in purple colour."})]}),w?.map(((o,t)=>!o.isEditableVariable||V?e("div",{style:{margin:"16px 8px"},children:[e(p,{style:{color:m.content.primary},children:["Locked variable ",t+1]}),i(d,{state:"disabled",placeholder:o.variableName,onChangeText:()=>{}})]},t):i("div",{style:{marginTop:16},children:i(g,{index:t,variable:o,onFocus:()=>l?.(t),showVariableModal:y,setShowDiscountCheckBox:B})},t))),(T||v)&&e("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[i(n,{isChecked:I,onValueChange:()=>{I&&k&&k(""),M(!I)}}),i(h,{style:{marginLeft:8},children:"Add discount code"})]}),I&&e("div",{ref:N,style:{margin:10},children:[i(d,{placeholder:"Enter your discount code",onChangeText:e=>{k&&k(e)},value:v,onFocus:()=>{L(!0)},onBlur:e=>{"addVar"===e.relatedTarget?.id?(N.current&&N.current.focus(),L(!0)):L(!1)},noErrorHint:!0,validate:e=>[!0,""]}),E&&i(b,{ref:S,id:"addVar",onClick:e=>{e.stopPropagation(),C((()=>A)),j(!0)},children:e("div",{className:"add",children:[i(u,{width:20,height:20,color:"white"}),i("div",{className:"variable",children:"Add variable"})]})})]})]})},b=l.button`
+`,x=n=>{let{onFocus:x,showVariableModal:v,discountCode:j,setDiscountCode:O}=n;const{originalVariableList:k,disableEditVariable:w,setVariableCallback:V,setShowVariablePicker:C}=b(),[T,B]=o(!1),[E,L]=o(!1),[D,F]=o(""),[I,M]=o(!1),N=a(),S=a();r((()=>{O&&O(j+D)}),[D]);r((()=>{k.some((e=>"checkout.checkoutUrl"===e.updatedValue.replace("{{","").replace("}}","")))?(B(!0),j&&M(!0)):(B(!1),null==M||M(!1),null==O||O(""))}),[k]);const A=e=>{F(e.actualValue)};return e(f,{children:[e("div",Object.assign({style:{padding:8}},{children:[e("div",Object.assign({style:{display:"flex",gap:8,alignItems:"center",marginBottom:4}},{children:[i(d,Object.assign({style:{color:m.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:m.content.placeholder})}))}))]})),i(p,Object.assign({style:{color:m.content.secondary}},{children:"You can view variables and links on the left underlined in purple colour."}))]})),null==k?void 0:k.map(((t,o)=>!t.isEditableVariable||w?e("div",Object.assign({style:{margin:"16px 8px"}},{children:[e(p,Object.assign({style:{color:m.content.primary}},{children:["Locked variable ",o+1]})),i(s,{state:"disabled",placeholder:t.variableName,onChangeText:()=>{}})]}),o):i("div",Object.assign({style:{marginTop:16}},{children:i(u,{index:o,variable:t,onFocus:()=>null==x?void 0:x(o),showVariableModal:v,setShowDiscountCheckBox:B})}),o))),(T||j)&&e("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[i(l,{isChecked:I,onValueChange:()=>{I&&O&&O(""),M(!I)}}),i(h,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),I&&e("div",Object.assign({ref:N,style:{margin:10}},{children:[i(s,{placeholder:"Enter your discount code",onChangeText:e=>{O&&O(e)},value:j,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)},noErrorHint:!0,validate:e=>[!0,""]}),E&&i(y,Object.assign({ref:S,id:"addVar",onClick:e=>{e.stopPropagation(),V((()=>A)),C(!0)}},{children:e("div",Object.assign({className:"add"},{children:[i(g,{width:20,height:20,color:"white"}),i("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]}))]})},y=n.button`
 	padding: 2px 8px;
 	cursor: pointer;
 	color: white;
@@ -25,4 +25,4 @@ import{jsxs as e,jsx as i}from"react/jsx-runtime";import o from"../../../assets/
 		align-items: center;
 		gap: 5px;
 	}
-`;export{b as AddVariableStyled,x as Container,y as default};
+`;export{y as AddVariableStyled,f as Container,x as default};

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

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+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 {
+    currentVariableList: WhatsAppTemplateVariables;
+    updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
+    updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
+    button: TEMPLATE_BUTTON;
+    CTAoptions?: ButtonPlaceHolderOptions[];
+    QRBoptions?: ButtonPlaceHolderOptions[];
+    variableListIndex: number;
+    disableEdit?: boolean;
+}
+declare const WhatsAppTemplateCardButtonV2: React.FC<WhatsAppTemplateCardButtonV2Props>;
+export default WhatsAppTemplateCardButtonV2;

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

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

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IMimeTypeResponse, WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+export type UseEditWhatsappTemplateMediaResponse = ReturnType<typeof useEditWhatsappTemplateMedia>;
+interface UseEditWhatsappTemplateMediaProps {
+    uploadMediaLink?: WhatsAppPickerMeta['uploadMediaLink'];
+    uploadMediaFiles: WhatsAppPickerMeta['uploadMediaFiles'];
+    validateMimeType?: (blob: Blob) => Promise<IMimeTypeResponse>;
+    updateTemplateImageUrl: (url: string, format: WhatsAppTemplate['components'][0]['format']) => void;
+    fileRef: React.RefObject<HTMLInputElement | null>;
+    mediaComponent: any;
+}
+export declare const useEditWhatsappTemplateMedia: (props: UseEditWhatsappTemplateMediaProps) => {
+    uploadMedia: (urlOrVariable?: string) => Promise<void>;
+    processImageUpload: (file?: Blob | File) => Promise<void>;
+    handleImageUpload: ($event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleImageChange: () => void;
+    onCropComplete: (base64: string) => Promise<void>;
+    editIconRef: React.MutableRefObject<null>;
+    fileName: string | undefined;
+    setFileName: React.Dispatch<React.SetStateAction<string | undefined>>;
+    selectedVariable: string | undefined;
+    setSelectedVariable: React.Dispatch<React.SetStateAction<string | undefined>>;
+    openEditMedia: boolean;
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedImage: string | undefined;
+    setSelectedImage: React.Dispatch<React.SetStateAction<string | undefined>>;
+    loading: boolean;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+    error: string;
+    setError: React.Dispatch<React.SetStateAction<string>>;
+};
+export {};

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

@@ -1 +1 @@
-import{cloneDeep as e}from"lodash";import{useState as t,useRef as o,useEffect as n}from"react";import{FileUploaderHelper as a}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as i}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const l=l=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,validateMimeType:m,mediaComponent:d,uploadMediaFiles:f,fileRef:u}=l,{template:g,selectedCarouselIndex:h,setTemplate:w}=s(),[v,I]=t(void 0),[M,E]=t(),[y,U]=t(!1),[C,T]=t(""),[b,k]=t(!1),[A,N]=t(),x=o(null);async function R(e){const t=new a;if(e instanceof Blob){if(m){const{isValid:t,mimeType:o}=await m(e);if(!t)return void T(`MIME type ${o} is not supported`)}const o=t.validate({file:e});if(o)T(o),k(!1),U(!1);else{const t=d.format===i.IMAGE,o=await f({file:e,fileName:v,isImage:t});if(o.success){const[t]=e.type.split("/");p(o.url??"","application"===t?i.DOCUMENT:i[t.toUpperCase()])}else k(!1),T("An unknown technical error occurred");k(!1),U(!1)}}else T("An unknown technical error occurred"),k(!1)}function D(){u?.current?.click&&u.current.click()}return n((()=>{I(void 0),N(void 0),E(void 0),U(!1),k(!1),T("")}),[h]),{uploadMedia:async function(t){if(T(""),E(""),t)if(t.startsWith("https"))try{if(k(!0),c){const e=await c(t),{type:o,size:n,success:s}=e;if(s){const t=(new a).validate({linkData:{type:o,size:n}});if(t)return T(t),void k(!1);const[s]=o.split("/");p(e.url??"",s.includes("application")?i.DOCUMENT:i[s.toUpperCase()])}else k(!1),T("An unknown technical error occurred");k(!1)}else{const e=await fetch(t),o=await e.blob();await R(o)}}catch(e){k(!1),T("An unknown technical error occurred")}else if(r(t)){let o;if(E(t),o=null!=h&&h>-1?{components:g.components[1]?.cards?.[h].components,mapping:g?.mapping?.cards?.[h]}:{...g},o.components){const e=o?.components?.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==e&&e>-1&&o?.components[e]){const n={...o.components[e],format:d.format,example:{header_handle:[t]}},a=[...o.components];a[e]=n,o.components=a}}if(o.mapping&&(o.mapping={...o.mapping,header:[t]}),k(!1),null!=h&&h>-1){const t=e(g);t.components[1].cards[h].components=o.components,t.mapping.cards[h]=o.mapping,w?.({...t})}else w?.({...o})}else k(!1),T("Invalid URL or variable");else D()},processImageUpload:R,handleImageUpload:function(e){T(""),k(!0);const t=e.target.files?.[0];if(d.format===i.IMAGE){const e=new FileReader;N(""),I(""),e.onload=()=>{N(e.result),I(t?.name)},t&&e.readAsDataURL(t)}else R(t)},handleImageChange:D,onCropComplete:async function(e){k(!1),T("");const t=await fetch(e),o=await t.blob();await R(o),N(void 0),U(!1)},editIconRef:x,fileName:v,setFileName:I,selectedVariable:M,setSelectedVariable:E,openEditMedia:y,setOpenEditMedia:U,selectedImage:A,setSelectedImage:N,loading:b,setLoading:k,error:C,setError:T}};export{l as useEditWhatsappTemplateMedia};
+import{__awaiter as e}from"../../../_virtual/_tslib.js";import{cloneDeep as o}from"lodash";import{useState as i,useRef as n,useEffect as t}from"react";import{FileUploaderHelper as l}from"../../helpers/FileUploaderHelper.js";import{HEADER_TYPES as a}from"../../template-preview/models/TemplateMeta.js";import{useTemplateModalContext as s}from"../context/templateModalContext.js";import{isVariable as r}from"../utils/validateIsUrl.js";const d=d=>{const{uploadMediaLink:c,updateTemplateImageUrl:p,validateMimeType:m,mediaComponent:u,uploadMediaFiles:f,fileRef:v}=d,{template:g,selectedCarouselIndex:h,setTemplate:y}=s(),[b,I]=i(void 0),[M,j]=i(),[E,O]=i(!1),[U,C]=i(""),[T,k]=i(!1),[w,A]=i(),N=n(null);function x(o){var i;return e(this,void 0,void 0,(function*(){const e=new l;if(o instanceof Blob){if(m){const{isValid:e,mimeType:i}=yield m(o);if(!e)return void C(`MIME type ${i} is not supported`)}const n=e.validate({file:o});if(n)C(n),k(!1),O(!1);else{const e=u.format===a.IMAGE,n=yield f({file:o,fileName:b,isImage:e});if(n.success){const[e]=o.type.split("/");p(null!==(i=n.url)&&void 0!==i?i:"","application"===e?a.DOCUMENT:a[e.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1),O(!1)}}else C("An unknown technical error occurred"),k(!1)}))}function R(){var e;(null===(e=null==v?void 0:v.current)||void 0===e?void 0:e.click)&&v.current.click()}return t((()=>{I(void 0),A(void 0),j(void 0),O(!1),k(!1),C("")}),[h]),{uploadMedia:function(i){var n,t,s,d,m,f;return e(this,void 0,void 0,(function*(){if(C(""),j(""),i)if(i.startsWith("https"))try{if(k(!0),c){const e=yield c(i),{type:o,size:t,success:s}=e;if(s){const i=(new l).validate({linkData:{type:o,size:t}});if(i)return C(i),void k(!1);const[s]=o.split("/");p(null!==(n=e.url)&&void 0!==n?n:"",s.includes("application")?a.DOCUMENT:a[s.toUpperCase()])}else k(!1),C("An unknown technical error occurred");k(!1)}else{const e=yield fetch(i),o=yield e.blob();yield x(o)}}catch(e){k(!1),C("An unknown technical error occurred")}else if(r(i)){let e;if(j(i),e=null!=h&&h>-1?{components:null===(s=null===(t=g.components[1])||void 0===t?void 0:t.cards)||void 0===s?void 0:s[h].components,mapping:null===(m=null===(d=null==g?void 0:g.mapping)||void 0===d?void 0:d.cards)||void 0===m?void 0:m[h]}:Object.assign({},g),e.components){const o=null===(f=null==e?void 0:e.components)||void 0===f?void 0:f.findIndex((e=>{if("HEADER"===e.type&&"NONE"!==e.format&&"TEXT"!==e.format)return!0}));if(void 0!==o&&o>-1&&(null==e?void 0:e.components[o])){const n=Object.assign(Object.assign({},e.components[o]),{format:u.format,example:{header_handle:[i]}}),t=[...e.components];t[o]=n,e.components=t}}if(e.mapping&&(e.mapping=Object.assign(Object.assign({},e.mapping),{header:[i]})),k(!1),null!=h&&h>-1){const i=o(g);i.components[1].cards[h].components=e.components,i.mapping.cards[h]=e.mapping,null==y||y(Object.assign({},i))}else null==y||y(Object.assign({},e))}else k(!1),C("Invalid URL or variable");else R()}))},processImageUpload:x,handleImageUpload:function(e){var o;C(""),k(!0);const i=null===(o=e.target.files)||void 0===o?void 0:o[0];if(u.format===a.IMAGE){const e=new FileReader;A(""),I(""),e.onload=()=>{A(e.result),I(null==i?void 0:i.name)},i&&e.readAsDataURL(i)}else x(i)},handleImageChange:R,onCropComplete:function(o){return e(this,void 0,void 0,(function*(){k(!1),C("");const e=yield fetch(o),i=yield e.blob();yield x(i),A(void 0),O(!1)}))},editIconRef:N,fileName:b,setFileName:I,selectedVariable:M,setSelectedVariable:j,openEditMedia:E,setOpenEditMedia:O,selectedImage:w,setSelectedImage:A,loading:T,setLoading:k,error:U,setError:C}};export{d as useEditWhatsappTemplateMedia};

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

@@ -0,0 +1,7 @@
+export declare const TemplateContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RightPanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftPanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CustomTitleMedium: import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;

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

@@ -0,0 +1,44 @@
+/// <reference types="react" />
+export declare const TEMPLATE_QUALITY_MAP: {
+    YELLOW: {
+        icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        title: string;
+        sublineTextType: import("styled-components").StyledComponent<"div", any, {
+            numberOfLines?: number | undefined;
+            color?: string | undefined;
+        }, never>;
+        sublineColor: string;
+        subline: string;
+    };
+    RED: {
+        icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+        title: string;
+        sublineTextType: import("styled-components").StyledComponent<"div", any, {
+            numberOfLines?: number | undefined;
+            color?: string | undefined;
+        }, never>;
+        sublineColor: string;
+        subline: string;
+    };
+    GREEN: {
+        icon: string;
+        title: string;
+        sublineTextType: import("styled-components").StyledComponent<"div", any, {
+            numberOfLines?: number | undefined;
+            color?: string | undefined;
+        }, never>;
+        sublineColor: string;
+        subline: string;
+    };
+};
+export declare const ANALYTICS_ENGAGEMENT_MAP: ({
+    title: string;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    valName: string;
+    percentValName?: undefined;
+} | {
+    title: string;
+    icon: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
+    valName: string;
+    percentValName: string;
+})[];