@bikdotai/bik-component-library 0.0.734 → 0.0.735-beta.1

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

@@ -1 +1 @@
-import{j as e}from"../../../node_modules/react/jsx-runtime.js";import t from"../../../assets/icons/click.svg.js";import n from"../../../assets/icons/speedometer.svg.js";import{useState as s,useEffect as a,useMemo as i}from"react";import{LineChart as l}from"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import{StyledModal as r}from"../../modals/styledModal.js";import{Tag as c}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as o}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as d,TitleSmall as m,Caption as u}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{TemplateContainer as j,LeftPanelContainer as p,RightPanelContainer as g,CustomTitleMedium as y}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as x,ANALYTICS_ENGAGEMENT_MAP as b}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as v}from"./TemplateAnalyticsSkeleton.js";const f=t=>{const{templateAnalytics:n,onClose:l,onProceed:c,onCancel:m,headingTitle:g,headingSubtitle:y,templateId:b}=t,{templateQuality:f=o.GREEN,fetchAnalytics:O}=n||{},{Icon:k,title:T,subline:w,sublineTextType:C,sublineColor:E}=x[f||o.GREEN],[L,A]=s((null==t?void 0:t.analyticsData)||{}),[R,W]=s(!0);a((()=>{(null==t?void 0:t.analyticsData)?W(!1):null==O||O(b||"").then((e=>{e.analytics&&A(e.analytics),W(!1)}))}),[]);const B=i((()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:c,disabled:R},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==l||l(),null==m||m()},disabled:R}})),[f,R,c,l,m]),S=C||u;return e.jsx(r,Object.assign({open:!0,headingTitle:g,tintedHeader:!0,modalHeaderStyles:{backgroundColor:h.surface.subdued},onBackPress:()=>{null==l||l()},headingSubtitle:y,footerShadow:!0,primaryButton:B.primaryButton,secondaryButton:B.secondaryButton,onClose:()=>{null==l||l()},width:"700px"},{children:e.jsxs(j,{children:[f!==o.UNKNOWN&&e.jsx(p,{children:e.jsxs("div",Object.assign({className:"inside--container"},{children:[e.jsx("div",Object.assign({className:"icon--container",style:{background:f===o.GREEN?h.background.positive.light:h.background.warning.light}},{children:e.jsx(k,{width:40,height:40,color:f===o.GREEN?h.content.positive:h.content.warning})})),T&&e.jsx(d,Object.assign({style:{textAlign:"center"}},{children:T})),e.jsx(S,Object.assign({style:{textAlign:"center",color:E||h.content.primary}},{children:w}))]}))}),R?e.jsx(v,{fullWidth:f===o.UNKNOWN}):e.jsx(N,{analyticsData:L,fullWidth:f===o.UNKNOWN})]})}))},N=n=>{var s;const{analyticsData:a,skipTitle:i,fullWidth:l}=n;return e.jsxs(g,Object.assign({fullWidth:l},{children:[i?e.jsx(e.Fragment,{}):e.jsx(m,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e.jsx("div",Object.assign({className:"mt-3"},{children:b.map(((t,n)=>e.jsx(O,{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?e.jsxs(e.Fragment,{children:[e.jsx(m,Object.assign({color:h.content.secondary},{children:"Clicked"})),e.jsx("div",Object.assign({className:"mt-3"},{children:Object.entries(a.clickAnalytics).map(((n,s)=>{let[a,i]=n;return e.jsx(O,{icon:t,title:a,value:i.totalClicks||0,percentValue:i.clickPercentage},s)}))}))]}):e.jsx(e.Fragment,{}),(null===(s=null==a?void 0:a.performance)||void 0===s?void 0:s.qualityTimeLine)&&a.performance.qualityTimeLine.length>0?e.jsxs(e.Fragment,{children:[e.jsx(m,Object.assign({color:h.content.secondary},{children:"Performance"})),e.jsx("div",Object.assign({className:"mt-3"},{children:e.jsx(k,{qualityTimeLine:a.performance.qualityTimeLine})}))]}):e.jsx(e.Fragment,{})]}))},O=t=>{const{icon:n,title:s,value:a,percentValue:i}=t;return e.jsxs("div",Object.assign({className:"each--analytics--container"},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsx(n,{width:"16px",height:"16px",color:h.background.brand})})),e.jsx(u,{children:s})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[i?e.jsx(c,{tagText:`${i}%`||0,theme:"light",type:"neutral"}):e.jsx(e.Fragment,{}),e.jsx(y,{children:a})]}))]}))},k=t=>{const{qualityTimeLine:s}=t,a=s.map((e=>{switch(e){case o.GREEN:return 2;case o.YELLOW:return 1;case o.RED:return.2;default:return 0}})),i=s.map(((e,t)=>`T${t+1}`)),r=s.map((e=>(e=>{switch(e){case o.GREEN:return h.content.positive;case o.YELLOW:return h.content.warning;case o.RED:return h.content.negative;default:return h.content.secondary}})(e)));return e.jsxs("div",Object.assign({className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${h.background.inactive}`}},{children:[e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8,width:"50%"}},{children:[e.jsx("div",Object.assign({className:"each--icon--container"},{children:e.jsx(n,{width:16,height:16,color:h.content.secondary})})),e.jsx(u,{children:"Quality timeline"})]})),e.jsx("div",Object.assign({className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80}},{children:e.jsx(l,{datas:[{data:a,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:r}],labels:i,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:e=>`${(e=>{switch(e){case 2:return"High";case 1:return"Medium";case.2:return"Low";default:return"Unknown"}})(e.parsed.y)}`,titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}})}))]}))};export{O as AnalyticsItem,k as QualityTimelineChart,N as RightPanelTemplateAnalytics,f as TemplateAnalyticsComponent};
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import i from"../../../assets/icons/click.svg.js";import a from"../../../assets/icons/speedometer.svg.js";import{useState as l,useEffect as r,useMemo as c}from"react";import{LineChart as o}from"../../analytics-chips-and-dropdowns/chart/LineChart/LineChart.js";import{StyledModal as s}from"../../modals/styledModal.js";import{Tag as d}from"../../tag/Tag.js";import{TEMPLATE_QUALITY as m}from"../../template-preview/models/WhatsAppTemplate.js";import{TitleRegular as u,TitleSmall as h,Caption as p}from"../../TypographyStyle.js";import{COLORS as y}from"../../../constants/Theme.js";import{TemplateContainer as g,LeftPanelContainer as v,RightPanelContainer as f,CustomTitleMedium as N}from"../styles/TemplateAnalyticsStyles.js";import{TEMPLATE_QUALITY_MAP as b,ANALYTICS_ENGAGEMENT_MAP as k}from"../utils/TemplateConstants.js";import{TemplateAnalyticsSkeleton as T}from"./TemplateAnalyticsSkeleton.js";const w=n=>{const{templateAnalytics:i,onClose:a,onProceed:o,onCancel:d,headingTitle:h,headingSubtitle:f,templateId:N}=n,{templateQuality:k=m.GREEN,fetchAnalytics:w}=i||{},{Icon:C,title:E,subline:j,sublineTextType:L,sublineColor:A}=b[k||m.GREEN],[R,W]=l((null==n?void 0:n.analyticsData)||{}),[B,S]=l(!0);r((()=>{(null==n?void 0:n.analyticsData)?S(!1):null==w||w(N||"").then((e=>{e.analytics&&W(e.analytics),S(!1)}))}),[]);const D=c((()=>({primaryButton:{buttonText:"Proceed with selection",buttonType:"primary",onClick:o,disabled:B},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",onClick:()=>{null==a||a(),null==d||d()},disabled:B}})),[k,B,o,a,d]),O=L||p;return e(s,{open:!0,headingTitle:h,tintedHeader:!0,modalHeaderStyles:{backgroundColor:y.surface.subdued},onBackPress:()=>{null==a||a()},headingSubtitle:f,footerShadow:!0,primaryButton:D.primaryButton,secondaryButton:D.secondaryButton,onClose:()=>{null==a||a()},width:"700px",children:t(g,{children:[k!==m.UNKNOWN&&e(v,{children:t("div",{className:"inside--container",children:[e("div",{className:"icon--container",style:{background:k===m.GREEN?y.background.positive.light:y.background.warning.light},children:e(C,{width:40,height:40,color:k===m.GREEN?y.content.positive:y.content.warning})}),E&&e(u,{style:{textAlign:"center"},children:E}),e(O,{style:{textAlign:"center",color:A||y.content.primary},children:j})]})}),B?e(T,{fullWidth:k===m.UNKNOWN}):e(x,{analyticsData:R,fullWidth:k===m.UNKNOWN})]})})},x=a=>{var l;const{analyticsData:r,skipTitle:c,fullWidth:o}=a;return t(f,{fullWidth:o,children:[c?e(n,{}):e(h,{children:"Here are your template's delivery & engagement stats for the last 30 days"}),e("div",{className:"mt-3",children:k.map(((t,n)=>e(C,{icon:t.icon,title:t.title,value:r[t.valName]||0,percentValue:t.percentValName?r[t.percentValName]:null},n)))}),(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics)&&Object.keys(null==r?void 0:r.clickAnalytics).length?t(n,{children:[e(h,{color:y.content.secondary,children:"Clicked"}),e("div",{className:"mt-3",children:Object.entries(r.clickAnalytics).map(((t,n)=>{let[a,l]=t;return e(C,{icon:i,title:a,value:l.totalClicks||0,percentValue:l.clickPercentage},n)}))})]}):e(n,{}),(null===(l=null==r?void 0:r.performance)||void 0===l?void 0:l.qualityTimeLine)&&r.performance.qualityTimeLine.length>0?t(n,{children:[e(h,{color:y.content.secondary,children:"Performance"}),e("div",{className:"mt-3",children:e(E,{qualityTimeLine:r.performance.qualityTimeLine})})]}):e(n,{})]})},C=i=>{const{icon:a,title:l,value:r,percentValue:c}=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(a,{width:"16px",height:"16px",color:y.background.brand})}),e(p,{children:l})]}),t("div",{className:"d-flex align--center",style:{gap:8},children:[c?e(d,{tagText:`${c}%`||0,theme:"light",type:"neutral"}):e(n,{}),e(N,{children:r})]})]})},E=n=>{const{qualityTimeLine:i}=n,l=i.map((e=>{switch(e){case m.GREEN:return 2;case m.YELLOW:return 1;case m.RED:return.2;default:return 0}})),r=i.map(((e,t)=>`T${t+1}`)),c=i.map((e=>(e=>{switch(e){case m.GREEN:return y.content.positive;case m.YELLOW:return y.content.warning;case m.RED:return y.content.negative;default:return y.content.secondary}})(e)));return t("div",{className:"each--analytics--container",style:{padding:16,display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",borderRadius:8,border:`1px solid ${y.background.inactive}`},children:[t("div",{className:"d-flex align--center",style:{gap:8,width:"50%"},children:[e("div",{className:"each--icon--container",children:e(a,{width:16,height:16,color:y.content.secondary})}),e(p,{children:"Quality timeline"})]}),e("div",{className:"d-flex align--center",style:{width:"50%",height:"62px",marginTop:-80},children:e(o,{datas:[{data:l,lineColor:"green",lineWidth:1,gradientColor:{start:"#E6F4E7",end:"#E6F4E7"},gradient:!0,pointColors:c}],labels:r,legends:[],canvasHeight:120,maintainAspectRatio:!1,min:0,max:4,stepSize:1,isNewStyles:!0,pointRadius:3.5,scaleText:{xDrawBorder:!1,yDrawBorder:!1},ticksLabelCallback:()=>"",labelCallback:e=>`${(e=>{switch(e){case 2:return"High";case 1:return"Medium";case.2:return"Low";default:return"Unknown"}})(e.parsed.y)}`,titleTooltipCallback:()=>"",customYHeaders:{0:"",1:"",2:""}})})]})};export{C as AnalyticsItem,E as QualityTimelineChart,x as RightPanelTemplateAnalytics,w as TemplateAnalyticsComponent};

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

@@ -1,4 +1,4 @@
-export declare const TemplateAnalyticsSkeleton: (props: {
-    skipTitleShimmer?: boolean;
-    fullWidth?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const TemplateAnalyticsSkeleton: (props: {
+    skipTitleShimmer?: boolean;
+    fullWidth?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

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

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

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

@@ -1,10 +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>;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+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/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

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

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

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

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

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

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