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

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

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

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

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

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

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

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../shimmer/ShimmerComponent/BikShimmer.js"),s=require("../styles/TemplateAnalyticsStyles.js");const t=()=>e.jsxs("div",{className:"each--analytics--container",children:[e.jsxs("div",{className:"d-flex align--center",style:{gap:8},children:[e.jsx(i.BikShimmer,{boxes:[{width:"24px",height:"24px"}]}),e.jsx(i.BikShimmer,{boxes:[{width:"69px",height:"11px"}]})]}),e.jsxs("div",{className:"d-flex align--center",style:{gap:8},children:[e.jsx(i.BikShimmer,{boxes:[{width:"43px",height:"18px"}]}),e.jsx(i.BikShimmer,{boxes:[{width:"69px",height:"28px"}]})]})]});exports.TemplateAnalyticsSkeleton=r=>{const{skipTitleShimmer:x}=r;return e.jsxs(s.RightPanelContainer,{children:[e.jsx("div",{children:x?e.jsx(e.Fragment,{}):e.jsx(i.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",{className:"mt-3",children:[0,1,2].map((i=>e.jsx(t,{},i)))}),e.jsxs(e.Fragment,{children:[e.jsx("div",{children:e.jsx(i.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",{className:"mt-3",children:e.jsx(t,{})})]})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../shimmer/ShimmerComponent/BikShimmer.js"),i=require("../styles/TemplateAnalyticsStyles.js");const t=()=>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(s.BikShimmer,{boxes:[{width:"24px",height:"24px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"11px"}]})]})),e.jsxs("div",Object.assign({className:"d-flex align--center",style:{gap:8}},{children:[e.jsx(s.BikShimmer,{boxes:[{width:"43px",height:"18px"}]}),e.jsx(s.BikShimmer,{boxes:[{width:"69px",height:"28px"}]})]}))]}));exports.TemplateAnalyticsSkeleton=r=>{const{skipTitleShimmer:x}=r;return e.jsxs(i.RightPanelContainer,{children:[e.jsx("div",{children:x?e.jsx(e.Fragment,{}):e.jsx(s.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",Object.assign({className:"mt-3"},{children:[0,1,2].map((s=>e.jsx(t,{},s)))})),e.jsxs(e.Fragment,{children:[e.jsx("div",{children:e.jsx(s.BikShimmer,{boxes:[{width:"76px",height:"18px"}]})}),e.jsx("div",Object.assign({className:"mt-3"},{children:e.jsx(t,{})}))]})]})};

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

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

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

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

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from "../../template-preview/models/TemplateMeta";
+import { WEB_PUSH_COMPONENT_TYPE } from "../../template-preview/models/WebpushTemplate";
+import { BUTTON_TYPE } from "../../template-preview/models/WhatsAppTemplate";
+import { ComponentType } from './VariableConnectorWhatsApp';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {
+    focused?: boolean | undefined;
+    channel?: CHANNEL_TYPE | undefined;
+}, never>;
+/** COMPONENT BELOW */
+export interface VariableConnectorProps {
+    onFocus?: () => void;
+    variable: CUSTOM_VARIABLE;
+    index: number;
+    showVariableModal?: boolean;
+    setShowDiscountCheckBox?: any;
+    buttonType?: BUTTON_TYPE;
+    componentType?: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
+    CTAoptions?: ButtonPlaceHolderOptions[];
+}
+declare const VariableConnector: React.FC<VariableConnectorProps>;
+export default VariableConnector;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ButtonPlaceHolderOptions } from "../../template-preview/models/TemplateMeta";
+import { CTABtnValType, QRBBtnValType, TEMPLATE_BUTTON } from "../../template-preview/models/WhatsAppTemplate";
+import { WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
+export type URLBtnUpdateFunctionType = (val: CTABtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
+export type QRBBtnUpdateFunctionType = (val: QRBBtnValType, mode: 'custom' | 'placeholder', btnIndex?: number) => void;
+export interface WhatsAppTemplateCardButtonV2Props {
+    currentVariableList: WhatsAppTemplateVariables;
+    updateSelectedURLTemplateBtn?: URLBtnUpdateFunctionType;
+    updateSelectedQRBTemplateBtn?: QRBBtnUpdateFunctionType;
+    button: TEMPLATE_BUTTON;
+    CTAoptions?: ButtonPlaceHolderOptions[];
+    QRBoptions?: ButtonPlaceHolderOptions[];
+    variableListIndex: number;
+    disableEdit?: boolean;
+}
+declare const WhatsAppTemplateCardButtonV2: React.FC<WhatsAppTemplateCardButtonV2Props>;
+export default WhatsAppTemplateCardButtonV2;

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

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

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

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

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

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

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

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

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

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

package/dist/cjs/components/template-context-mapper/utils/TemplateConstants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../assets/icons/alert_triangle.svg.js"),t=require("../../../assets/icons/send_template.svg.js"),a=require("../../../assets/icons/tick.svg.js"),i=require("../../../assets/icons/tick_double.svg.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var r=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js");var n=require("../../template-preview/models/WhatsAppTemplate.js"),s=require("../../TypographyStyle.js");const l={[n.TEMPLATE_QUALITY.YELLOW]:{icon:e.default,title:"Medium quality template",sublineTextType:s.Caption,sublineColor:r.COLORS.content.secondary,subline:"Meta has downgraded this template to a medium-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[n.TEMPLATE_QUALITY.RED]:{icon:e.default,title:"Low quality template",sublineTextType:s.Caption,sublineColor:r.COLORS.content.secondary,subline:"Meta has downgraded this template to a low-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[n.TEMPLATE_QUALITY.GREEN]:{icon:"",title:"",sublineTextType:s.TitleSmall,sublineColor:"",subline:"Here is your template's delivery and engagement stats from the last 30 days. Higher engagement today can lead to better delivery rates in the future."}},o=[{title:"Sent",icon:t.default,valName:"totalSent"},{title:"Delivered",icon:a.default,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:i.default,valName:"totalReads",percentValName:"readPercentage"}];exports.ANALYTICS_ENGAGEMENT_MAP=o,exports.TEMPLATE_QUALITY_MAP=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../assets/icons/alert_triangle.svg.js"),t=require("../../../assets/icons/send_template.svg.js"),a=require("../../../assets/icons/tick.svg.js"),r=require("../../../assets/icons/tick_double.svg.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var i=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var s=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var l=require("../../TypographyStyle.js");const n={[s.TEMPLATE_QUALITY.YELLOW]:{icon:e.default,title:"Medium quality template",sublineTextType:l.Caption,sublineColor:i.COLORS.content.secondary,subline:"Meta has downgraded this template to a medium-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[s.TEMPLATE_QUALITY.RED]:{icon:e.default,title:"Low quality template",sublineTextType:l.Caption,sublineColor:i.COLORS.content.secondary,subline:"Meta has downgraded this template to a low-quality rating due to negative feedback from multiple customers or low read rates. We recommend improving its content or choosing a different template to enhance delivery and engagement in your next campaign"},[s.TEMPLATE_QUALITY.GREEN]:{icon:"",title:"",sublineTextType:l.TitleSmall,sublineColor:"",subline:"Here is your template's delivery and engagement stats from the last 30 days. Higher engagement today can lead to better delivery rates in the future."}},o=[{title:"Sent",icon:t.default,valName:"totalSent"},{title:"Delivered",icon:a.default,valName:"totalDelivered",percentValName:"deliveredPercentage"},{title:"Read",icon:r.default,valName:"totalReads",percentValName:"readPercentage"}];exports.ANALYTICS_ENGAGEMENT_MAP=o,exports.TEMPLATE_QUALITY_MAP=n;

package/dist/cjs/components/template-context-mapper/utils/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const BACKGROUND_PREVIEW_IMAGE = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f";
+export declare const STATIC_URL_VARIABLE_NAME = "((staticPlaceholderName))";