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

package/dist/cjs/components/template-context-mapper/helpers/WebpushTemplateHelper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../../_virtual/_tslib.js"),e=require("../../template-preview/constants/TemplateConstants.js"),i=require("../../template-preview/models/WhatsAppTemplate.js"),l=require("../../../utils/variableUtils.js");exports.default=()=>{function n(t,e,i,n){const o=e.map(((e,o)=>{const u=a(e);if(n)return{variableName:e,isEditableVariable:!1,updatedValue:e,index:o,variableValue:e,type:"string"};const s=function(t,e,i){const n=i&&i.length?i:l.extractVariables(t);if(!n||!n.length)return[];const a=[];return n.forEach(((t,i)=>{const l=r(e,`{{${t}}}`);if(l){const{actualValue:t,defaultValue:e}=l,n="{{custom.text}}"===t||"{{custom.url}}"===t;a.push({editable:n,variableVal:e,editableDefaultValues:e,variableName:t,idx:i})}})),a}(u?e:i,t);if(s.length>0){const t=s[0];return{variableName:t.variableName,isEditableVariable:!0,updatedValue:(null==t?void 0:t.updatedValue)?null==t?void 0:t.updatedValue:u?t.variableName:e,index:o,variableValue:t.variableVal,type:"string"}}return null})).filter((t=>null!==t));return o}const a=t=>t.includes("{{")&&t.includes("}}"),o=(t,e)=>t&&t.length?t.flatMap(((t,i)=>{var n;return a(t)?t.includes("editableVariable")?(null===(n=null==e?void 0:e[i])||void 0===n?void 0:n.value)||t:l.extractVariables(t).map((t=>`{{${t}}}`))||[]:t})):[];const r=(t,e)=>{for(const i of t)for(const t in i.variables){const l=i.variables[t];if(l.actualValue===e||e.includes("editableVariable")&&l.actualValue.includes("custom.text"))return l}return null};return{processWebpushTemplate:function(r,u,s,d){var b,c,v,p,f,m,L,V;return t.__awaiter(this,void 0,void 0,(function*(){const t=Object.assign({},r);t.components=function(t){let e;if("string"==typeof t)try{e=JSON.parse(t)}catch(t){console.error("Error parsing webpush component JSON:",t),e={}}else e=t;return e}(t.components);const{components:{title:h,body:g,buttons:y,icon:_,image:x},webpushBroadcastConfig:C}=t;let w={title:o(null!==(b=null==C?void 0:C.title)&&void 0!==b?b:[]),body:o(null!==(c=null==C?void 0:C.body)&&void 0!==c?c:[],null==g?void 0:g.variables),buttonsW:null!==(v=null==C?void 0:C.buttons)&&void 0!==v?v:[]};if(!t.webpushBroadcastConfig){const i=null!==(p=null==g?void 0:g.text)&&void 0!==p?p:"string"==typeof g?g:"",n=y&&(null==y?void 0:y.length)?y.map((t=>(null==t?void 0:t.websiteLink)==e.CUSTOM_URL_PLACEHOLDER?null==t?void 0:t.redirectionLink:null==t?void 0:t.websiteLink)).filter((t=>void 0!==t)):[],a=l.extractVariables(i).map(((t,e)=>{var i,l;return t.includes("editableVariable")?(null===(l=null===(i=null==g?void 0:g.variables)||void 0===i?void 0:i[e])||void 0===l?void 0:l.value)||t:`{{${t}}}`}));w={title:l.extractVariables(h).map((t=>`{{${t}}}`)),body:a,buttonsW:[]};const o={title:null!==(f=w.title)&&void 0!==f?f:[],body:null!==(m=w.body)&&void 0!==m?m:[],buttons:n,icon:_?[_]:void 0,image:x?[x]:void 0,redirectionLink:(null==g?void 0:g.redirectionLink)?[null==g?void 0:g.redirectionLink]:[]};t.webpushBroadcastConfig=o}const E=y&&y.length?y.map(((t,l)=>({type:i.BUTTON_TYPE.URL,text:null==t?void 0:t.text,url:"https://d.bik.ai/{{1}}",example:w.buttonsW&&w.buttonsW.length?a(w.buttonsW[l])?[""]:[w.buttonsW[l]]:t.redirectionLink?[t.redirectionLink]:void 0,buttonVariable:w.buttonsW&&w.buttonsW.length?a(w.buttonsW[l])?w.buttonsW[l]:e.CUSTOM_URL_PLACEHOLDER_VAR:t.websiteLink?t.websiteLink==e.CUSTOM_URL_PLACEHOLDER?e.CUSTOM_URL_PLACEHOLDER_VAR:t.websiteLink:e.CUSTOM_URL_PLACEHOLDER_VAR,index:l}))):[],O={title:n(u,w.title,h,d),body:n(u,w.body,(null==g?void 0:g.text)||"",d),buttons:E};return{templateVariableMapping:{title:(null===(L=null==s?void 0:s.title)||void 0===L?void 0:L.length)?s.title:O.title,body:(null===(V=null==s?void 0:s.body)||void 0===V?void 0:V.length)?s.body:O.body,buttons:O.buttons,icon:[],header:[]},webpushBroadcastConfig:t.webpushBroadcastConfig,template:t}}))},isValidUrl:t=>{try{return new URL(t),!0}catch(t){return!1}}}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js"),require("../../../constants/Theme.js"),require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var t=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var i=require("../../template-preview/constants/TemplateConstants.js"),l=require("../../../utils/variableUtils.js");exports.default=()=>{function n(e,t,i,n){const r=t.map(((t,r)=>{const u=a(t);if(n)return{variableName:t,isEditableVariable:!1,updatedValue:t,index:r,variableValue:t,type:"string"};const s=function(e,t,i){const n=i&&i.length?i:l.extractVariables(e);if(!n||!n.length)return[];const a=[];return n.forEach(((e,i)=>{const l=o(t,`{{${e}}}`);if(l){const{actualValue:e,defaultValue:t}=l,n="{{custom.text}}"===e||"{{custom.url}}"===e;a.push({editable:n,variableVal:t,editableDefaultValues:t,variableName:e,idx:i})}})),a}(u?t:i,e);if(s.length>0){const e=s[0];return{variableName:e.variableName,isEditableVariable:!0,updatedValue:(null==e?void 0:e.updatedValue)?null==e?void 0:e.updatedValue:u?e.variableName:t,index:r,variableValue:e.variableVal,type:"string"}}return null})).filter((e=>null!==e));return r}const a=e=>e.includes("{{")&&e.includes("}}"),r=(e,t)=>e&&e.length?e.flatMap(((e,i)=>{var n;return a(e)?e.includes("editableVariable")?(null===(n=null==t?void 0:t[i])||void 0===n?void 0:n.value)||e:l.extractVariables(e).map((e=>`{{${e}}}`))||[]:e})):[];const o=(e,t)=>{for(const i of e)for(const e in i.variables){const l=i.variables[e];if(l.actualValue===t||t.includes("editableVariable")&&l.actualValue.includes("custom.text"))return l}return null};return{processWebpushTemplate:function(o,u,s,d){return e.__awaiter(this,void 0,void 0,(function*(){var e,b,v,c,p,m,h,f;const L=Object.assign({},o);L.components=function(e){let t;if("string"==typeof e)try{t=JSON.parse(e)}catch(e){console.error("Error parsing webpush component JSON:",e),t={}}else t=e;return t}(L.components);const{components:{title:V,body:g,buttons:w,icon:y,image:_},webpushBroadcastConfig:C}=L;let x={title:r(null!==(e=null==C?void 0:C.title)&&void 0!==e?e:[]),body:r(null!==(b=null==C?void 0:C.body)&&void 0!==b?b:[],null==g?void 0:g.variables),buttonsW:null!==(v=null==C?void 0:C.buttons)&&void 0!==v?v:[]};if(!L.webpushBroadcastConfig){const e=null!==(c=null==g?void 0:g.text)&&void 0!==c?c:"string"==typeof g?g:"",t=w&&(null==w?void 0:w.length)?w.map((e=>(null==e?void 0:e.websiteLink)==i.CUSTOM_URL_PLACEHOLDER?null==e?void 0:e.redirectionLink:null==e?void 0:e.websiteLink)).filter((e=>void 0!==e)):[],n=l.extractVariables(e).map(((e,t)=>{var i,l;return e.includes("editableVariable")?(null===(l=null===(i=null==g?void 0:g.variables)||void 0===i?void 0:i[t])||void 0===l?void 0:l.value)||e:`{{${e}}}`}));x={title:l.extractVariables(V).map((e=>`{{${e}}}`)),body:n,buttonsW:[]};const a={title:null!==(p=x.title)&&void 0!==p?p:[],body:null!==(m=x.body)&&void 0!==m?m:[],buttons:t,icon:y?[y]:void 0,image:_?[_]:void 0,redirectionLink:(null==g?void 0:g.redirectionLink)?[null==g?void 0:g.redirectionLink]:[]};L.webpushBroadcastConfig=a}const W=w&&w.length?w.map(((e,l)=>({type:t.BUTTON_TYPE.URL,text:null==e?void 0:e.text,url:"https://d.bik.ai/{{1}}",example:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[l])?[""]:[x.buttonsW[l]]:e.redirectionLink?[e.redirectionLink]:void 0,buttonVariable:x.buttonsW&&x.buttonsW.length?a(x.buttonsW[l])?x.buttonsW[l]:i.CUSTOM_URL_PLACEHOLDER_VAR:e.websiteLink?e.websiteLink==i.CUSTOM_URL_PLACEHOLDER?i.CUSTOM_URL_PLACEHOLDER_VAR:e.websiteLink:i.CUSTOM_URL_PLACEHOLDER_VAR,index:l}))):[],k={title:n(u,x.title,V,d),body:n(u,x.body,(null==g?void 0:g.text)||"",d),buttons:W};return{templateVariableMapping:{title:(null===(h=null==s?void 0:s.title)||void 0===h?void 0:h.length)?s.title:k.title,body:(null===(f=null==s?void 0:s.body)||void 0===f?void 0:f.length)?s.body:k.body,buttons:k.buttons,icon:[],header:[]},webpushBroadcastConfig:L.webpushBroadcastConfig,template:L}}))},isValidUrl:e=>{try{return new URL(e),!0}catch(e){return!1}}}};

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

@@ -1,6 +1,6 @@
-export * from './TemplateContextMapper';
-export * from './utils/getDataFromTemplateComponent';
-export * from './utils/validateIsUrl';
-export * from './helpers/WebpushTemplateHelper';
-export * from './modalElements/TemplateAnalyticsSkeleton';
-export * from './modalElements/TemplateAnalyticsComponent';
+export * from './TemplateContextMapper';
+export * from './utils/getDataFromTemplateComponent';
+export * from './utils/validateIsUrl';
+export * from './helpers/WebpushTemplateHelper';
+export * from './modalElements/TemplateAnalyticsSkeleton';
+export * from './modalElements/TemplateAnalyticsComponent';

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

@@ -1,4 +1,4 @@
-export declare const BackTrackComponent: (props: {
-    backTrackMessage?: string | undefined;
-    setBackTrackMessage?: ((backTrackMessage: string) => void) | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const BackTrackComponent: (props: {
+    backTrackMessage?: string;
+    setBackTrackMessage?: (backTrackMessage: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../checkBox/CheckBox.js"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js");exports.BackTrackComponent=s=>{const{backTrackMessage:n,setBackTrackMessage:c}=s,[l,x]=r.useState(!!n);return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8,width:"300px",padding:"20px 0px"}},{children:[e.jsx(t.CheckBox,{isChecked:l,onValueChange:()=>{l&&c&&c(""),x(!l)}}),e.jsx(i.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Prevent BackTracking"}))]})),l&&e.jsx("div",Object.assign({style:{margin:10}},{children:e.jsx(a.Input,{type:"multiline",placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{c&&c(e)},height:"120px",maxCharLimit:1024,value:n,noErrorHint:!0,validate:e=>[!0,""]})}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../../checkBox/CheckBox.js"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js");exports.BackTrackComponent=s=>{const{backTrackMessage:n,setBackTrackMessage:c}=s,[l,x]=r.useState(!!n);return e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8,width:"300px",padding:"20px 0px"},children:[e.jsx(t.CheckBox,{isChecked:l,onValueChange:()=>{l&&c&&c(""),x(!l)}}),e.jsx(i.TitleSmall,{style:{marginLeft:8},children:"Prevent BackTracking"})]}),l&&e.jsx("div",{style:{margin:10},children:e.jsx(a.Input,{type:"multiline",placeholder:"Enter your text here",labelText:"Message if user tries backtracking",onChangeText:e=>{c&&c(e)},height:"120px",maxCharLimit:1024,value:n,noErrorHint:!0,validate:e=>[!0,""]})})]})};

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

@@ -1,18 +1,18 @@
-import type { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-import type { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
-export interface BodyProps {
-    showVariableMapping: 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 Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
-export default Body;
+import { VariableListInterfaceV2 } from '@src/components/add-variableV2/AddVariableV2';
+import { WhatsAppPickerMeta } from '@src/components/template-preview/models/WhatsAppTemplate';
+export interface BodyProps {
+    showVariableMapping: 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 Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export default Body;

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

@@ -1,22 +1,22 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../curtain/CurtainHelper.js");var a=require("../../variable-picker-v3/model.js"),t=require("lodash/cloneDeep"),i=require("react"),l=require("styled-components"),r=require("../../carousel-preview/CarouselPreview.js"),o=require("./EditWhatsAppCarouselTemplateV2.js"),s=require("../../template-preview/TemplatePreview.js"),n=require("../../template-preview/models/Channels.js"),d=require("../../TypographyStyle.js"),p=require("../../variable-picker-v3/VariablePicker.js"),u=require("../../../constants/Theme.js"),c=require("../context/templateModalContext.js"),h=require("../utils/constants.js"),C=require("../utils/getVariableNameEmail.js"),m=require("../utils/highlightFor.js"),P=require("./DesktopPreview.js"),E=require("./EditWebpushTemplate.js"),v=require("./EditWhatsAppTemplateV2.js"),w=require("./MobilePreview.js"),b=require("./VariableConnectorsPanel.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=f(t),N=f(l);const g=N.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../curtain/CurtainHelper.js");var a=require("../../variable-picker-v3/model.js"),t=require("lodash"),i=require("react"),l=require("styled-components"),r=require("../../carousel-preview/CarouselPreview.js"),o=require("./EditWhatsAppCarouselTemplateV2.js"),s=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var n=require("../../../constants/Theme.js");require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var p=require("../../template-preview/models/Channels.js"),d=require("../../TypographyStyle.js"),u=require("../../variable-picker-v3/VariablePicker.js"),c=require("../context/templateModalContext.js"),h=require("../utils/constants.js"),m=require("../utils/getVariableNameEmail.js"),C=require("../utils/highlightFor.js"),v=require("./DesktopPreview.js"),P=require("./EditWebpushTemplate.js"),w=require("./EditWhatsAppTemplateV2.js"),E=require("./MobilePreview.js"),b=require("./VariableConnectorsPanel.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=f(l);const A=x.default.div`
 	display: flex;
 	//	height: 100%;
-`,j=N.default.div`
+`,N=x.default.div`
 	max-width: 450px;
-	max-width: ${e=>e.channel===n.CHANNEL_TYPE.EMAIL?"400px":"450px"};
+	max-width: ${e=>e.channel===p.CHANNEL_TYPE.EMAIL?"400px":"450px"};
 
-	height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	height: ${e=>e.channel===p.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
 	overflow-y: auto;
 	padding-bottom: 24px;
-	border-left: ${u.COLORS.stroke.primary} 1px solid;
-	border-top: ${e=>e.isWhatsappCarousel?`${u.COLORS.stroke.primary} 1px solid`:void 0};
+	border-left: ${n.COLORS.stroke.primary} 1px solid;
+	border-top: ${e=>e.isWhatsappCarousel?`${n.COLORS.stroke.primary} 1px solid`:void 0};
 	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
-`,A=N.default.div`
+`,T=x.default.div`
 	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
 	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
 	overflow-y: auto;
-	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===n.CHANNEL_TYPE.WHATSAPP?`url(${h.BACKGROUND_PREVIEW_IMAGE});`:"none"};
-	display: ${e=>!e.hideDeviceContainerInPreview||e.channel!==n.CHANNEL_TYPE.WHATSAPP&&e.channel!==n.CHANNEL_TYPE.RCS?"initial":"flex"};
+	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===p.CHANNEL_TYPE.WHATSAPP?`url(${h.BACKGROUND_PREVIEW_IMAGE});`:"none"};
+	display: ${e=>!e.hideDeviceContainerInPreview||e.channel!==p.CHANNEL_TYPE.WHATSAPP&&e.channel!==p.CHANNEL_TYPE.RCS?"initial":"flex"};
 	align-items: flex-start;
-`;exports.default=t=>{const{showVariableMapping:l,showOnlyContent:h,whatsappSpecificPickerMeta:f,showVariableModal:N,discountCode:T,setDiscountCode:S,variableListForImage:L,showSampleValues:y,variableListFromProps:H,fileName:_,setFileName:V,skipDefaultVariableContent:k}=t,M=i.useRef(),q=i.useRef(),{variableList:W,setVariableList:D,variableCallback:O,showVariablePicker:Y,setShowVariablePicker:I,device:B,display_content:R,channel:F,template:$,setTemplate:G,isWhatsappCarousel:U,isProductCarouselType:K,hideDeviceContainerInPreview:z,onDefaultVariableSelect:J}=c.useTemplateModalContext();const Q=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return e.jsxs(g,{children:[e.jsx(A,Object.assign({showOnlyContent:h,showVariableMapping:l,isWhatsappCarousel:U,hideDeviceContainerInPreview:z,channel:F,skipDefaultVariableContent:k},{children:"mobile"===B?e.jsx(w.default,{ref:q,display_content:null!=R?R:"",channel:F,template:$,showSampleValues:y}):F!==n.CHANNEL_TYPE.WHATSAPP&&F!==n.CHANNEL_TYPE.RCS||!U?F===n.CHANNEL_TYPE.WEBPUSH?e.jsx(s.TemplatePreview,{showSampleValues:y,channel:F,hideHeader:!0,template:$}):F!==n.CHANNEL_TYPE.MESSAGE?e.jsx(P.default,{ref:M,channel:F,display_content:null!=R?R:"",showSampleValues:y}):e.jsx(e.Fragment,{}):e.jsx(r.CarouselPreview,{ref:M,channel:F,template:$,showSampleValues:y,isPreview:!1,showArrows:!0})})),(K||l)&&e.jsxs(j,Object.assign({channel:F,isWhatsappCarousel:U,showVariableMapping:!0},{children:[e.jsx("div",Object.assign({style:{height:"100%",width:"whatsapp"===F?428:400,display:Y?"block":"none"}},{children:e.jsx(p.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{D(x.default(H)),I(!1)},onSelect:e=>{O(e),D(x.default(H)),I(!1)},type:a.PickerType.EMBEDDED,data:null!=W?W:[],onDefaultVariableSelect:J,skipDefaultVariableContent:k},Math.random())})),e.jsx("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===F||"webpush"==F||"rcs"==F?428:400,display:Y?"none":"block"}},{children:F!==n.CHANNEL_TYPE.WHATSAPP&&F!==(null===n.CHANNEL_TYPE||void 0===n.CHANNEL_TYPE?void 0:n.CHANNEL_TYPE.RCS)?F==n.CHANNEL_TYPE.WEBPUSH?e.jsx(E.default,{whatsappSpecificPickerMeta:f,template:$,onTemplateChange:e=>{null==G||G(e)},showVariableModal:N}):e.jsx(b.default,{onFocus:F===n.CHANNEL_TYPE.EMAIL?function(e){var a,t,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===B?"template_html_mobile":"template_html_desktop"),r=C.getVariableNameForEmailByIndex(e+1),o=F===n.CHANNEL_TYPE.EMAIL?null===(a=null==l?void 0:l.contentWindow)||void 0===a?void 0:a.document.getElementById(r):document.getElementById(r),s=Q(o),d=null==o?void 0:o.offsetLeft;"desktop"===B?s&&M.current&&(null===(t=null==l?void 0:l.contentWindow)||void 0===t||t.scrollTo(null!=d?d:0,s),m.highlightFor(r,u.COLORS.background.warning.light,2,F,B)):s&&q.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,s),m.highlightFor(r,u.COLORS.background.warning.light,2,F,B))}:void 0,showVariableModal:N,discountCode:T,setDiscountCode:S}):F!==n.CHANNEL_TYPE.WHATSAPP&&F!==n.CHANNEL_TYPE.RCS||!U?e.jsx(v.default,{whatsappSpecificPickerMeta:f,template:$,onTemplateChange:e=>{null==G||G(e)},showVariableModal:N,variableListForImage:L,discountCode:T,setDiscountCode:S,fileName:_,setFileName:V}):e.jsx(o.default,{whatsappSpecificPickerMeta:f,template:$,showVariableModal:N,variableListForImage:L,discountCode:T,setDiscountCode:S})}))]})),[n.CHANNEL_TYPE.WHATSAPP,n.CHANNEL_TYPE.SMS].includes(F)&&!l&&!K&&e.jsx(j,{children:e.jsx(d.BodySecondary,Object.assign({color:u.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};
+`;exports.default=l=>{const{showVariableMapping:h,showOnlyContent:f,whatsappSpecificPickerMeta:x,showVariableModal:j,discountCode:g,setDiscountCode:S,variableListForImage:L,showSampleValues:y,variableListFromProps:H,fileName:k,setFileName:V,skipDefaultVariableContent:_}=l,W=i.useRef(),q=i.useRef(),{variableList:M,setVariableList:D,variableCallback:Y,showVariablePicker:I,setShowVariablePicker:O,device:B,display_content:R,channel:F,template:$,setTemplate:G,isWhatsappCarousel:U,isProductCarouselType:K,hideDeviceContainerInPreview:z,onDefaultVariableSelect:J}=c.useTemplateModalContext();const Q=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return e.jsxs(A,{children:[e.jsx(T,{showOnlyContent:f,showVariableMapping:h,isWhatsappCarousel:U,hideDeviceContainerInPreview:z,channel:F,skipDefaultVariableContent:_,children:"mobile"===B?e.jsx(E.default,{ref:q,display_content:null!=R?R:"",channel:F,template:$,showSampleValues:y}):F!==p.CHANNEL_TYPE.WHATSAPP&&F!==p.CHANNEL_TYPE.RCS||!U?F===p.CHANNEL_TYPE.WEBPUSH?e.jsx(s.TemplatePreview,{showSampleValues:y,channel:F,hideHeader:!0,template:$}):F!==p.CHANNEL_TYPE.MESSAGE?e.jsx(v.default,{ref:W,channel:F,display_content:null!=R?R:"",showSampleValues:y}):e.jsx(e.Fragment,{}):e.jsx(r.CarouselPreview,{ref:W,channel:F,template:$,showSampleValues:y,isPreview:!1,showArrows:!0})}),(K||h)&&e.jsxs(N,{channel:F,isWhatsappCarousel:U,showVariableMapping:!0,children:[e.jsx("div",{style:{height:"100%",width:"whatsapp"===F?428:400,display:I?"block":"none"},children:e.jsx(u.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{D(t.cloneDeep(H)),O(!1)},onSelect:e=>{Y(e),D(t.cloneDeep(H)),O(!1)},type:a.PickerType.EMBEDDED,data:null!=M?M:[],onDefaultVariableSelect:J,skipDefaultVariableContent:_},Math.random())}),e.jsx("div",{style:{padding:"16px 14px",width:"whatsapp"===F||"webpush"==F||"rcs"==F?428:400,display:I?"none":"block"},children:F!==p.CHANNEL_TYPE.WHATSAPP&&F!==(null===p.CHANNEL_TYPE||void 0===p.CHANNEL_TYPE?void 0:p.CHANNEL_TYPE.RCS)?F==p.CHANNEL_TYPE.WEBPUSH?e.jsx(P.default,{whatsappSpecificPickerMeta:x,template:$,onTemplateChange:e=>{null==G||G(e)},showVariableModal:j}):e.jsx(b.default,{onFocus:F===p.CHANNEL_TYPE.EMAIL?function(e){var a,t,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===B?"template_html_mobile":"template_html_desktop"),r=m.getVariableNameForEmailByIndex(e+1),o=F===p.CHANNEL_TYPE.EMAIL?null===(a=null==l?void 0:l.contentWindow)||void 0===a?void 0:a.document.getElementById(r):document.getElementById(r),s=Q(o),d=null==o?void 0:o.offsetLeft;"desktop"===B?s&&W.current&&(null===(t=null==l?void 0:l.contentWindow)||void 0===t||t.scrollTo(null!=d?d:0,s),C.highlightFor(r,n.COLORS.background.warning.light,2,F,B)):s&&q.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,s),C.highlightFor(r,n.COLORS.background.warning.light,2,F,B))}:void 0,showVariableModal:j,discountCode:g,setDiscountCode:S}):F!==p.CHANNEL_TYPE.WHATSAPP&&F!==p.CHANNEL_TYPE.RCS||!U?e.jsx(w.default,{whatsappSpecificPickerMeta:x,template:$,onTemplateChange:e=>{null==G||G(e)},showVariableModal:j,variableListForImage:L,discountCode:g,setDiscountCode:S,fileName:k,setFileName:V}):e.jsx(o.default,{whatsappSpecificPickerMeta:x,template:$,showVariableModal:j,variableListForImage:L,discountCode:g,setDiscountCode:S})})]}),[p.CHANNEL_TYPE.WHATSAPP,p.CHANNEL_TYPE.SMS].includes(F)&&!h&&!K&&e.jsx(N,{children:e.jsx(d.BodySecondary,{color:n.COLORS.content.secondary,style:{fontStyle:"italic"},children:"Click on ‘Select template’ below to use it"})})]})};

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-declare const DesktopPreview: React.ForwardRefExoticComponent<{
-    display_content: string;
-    channel: CHANNEL_TYPE;
-    showSampleValues?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default DesktopPreview;
+import React from 'react';
+import { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';
+declare const DesktopPreview: React.ForwardRefExoticComponent<{
+    display_content: string;
+    channel: CHANNEL_TYPE;
+    showSampleValues?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+export default DesktopPreview;

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

@@ -1,20 +1,20 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js"),s=require("../../template-preview/models/Channels.js"),d=require("../../../constants/Theme.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(r),n=l(t);const p=n.default.div`
-	background: ${d.COLORS.surface.standard};
-	border: 1px solid ${d.COLORS.stroke.primary};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=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 p=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(r),o=l(t);const n=o.default.div`
+	background: ${s.COLORS.surface.standard};
+	border: 1px solid ${s.COLORS.stroke.primary};
 	border-radius: 8px;
 	overflow-y: auto;
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,u=n.default.div`
+`,u=o.default.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
-	border-bottom-color: ${d.COLORS.stroke.primary};
-`,h=n.default.div`
+	border-bottom-color: ${s.COLORS.stroke.primary};
+`,m=o.default.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,m=o.default.forwardRef(((r,t)=>{let{display_content:d,showSampleValues:l}=r;return e.jsxs(p,Object.assign({ref:t},{children:[e.jsxs(u,{children:[e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{})]}),e.jsx("div",{children:d?e.jsx(a.TemplatePreview,{showSampleValues:l,channel:s.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:d,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i.Spinner,{size:"small"})}))})]}))}));m.displayName="DesktopPreview",exports.default=m;
+`,h=d.default.forwardRef(((r,t)=>{let{display_content:s,showSampleValues:l}=r;return e.jsxs(n,{ref:t,children:[e.jsxs(u,{children:[e.jsx(m,{}),e.jsx(m,{}),e.jsx(m,{})]}),e.jsx("div",{children:s?e.jsx(a.TemplatePreview,{showSampleValues:l,channel:p.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):e.jsx("div",{style:{padding:20},children:e.jsx(i.Spinner,{size:"small"})})})]})}));h.displayName="DesktopPreview",exports.default=h;

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

@@ -1,4 +1,4 @@
-export declare const DiscountCodeComponent: (props: {
-    discountCode?: string | undefined;
-    setDiscountCode?: ((code: string) => void) | undefined;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const DiscountCodeComponent: (props: {
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../../assets/icons/PlusIcon.js"),t=require("react"),r=require("../../checkBox/CheckBox.js"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),n=require("../context/templateModalContext.js"),o=require("./VariableConnectorsPanel.js");exports.DiscountCodeComponent=l=>{const{discountCode:c,setDiscountCode:d}=l,[u,j]=t.useState(""),[x,h]=t.useState(!!c),[g,p]=t.useState(!1),{setVariableCallback:b,setShowVariablePicker:C}=n.useTemplateModalContext(),f=t.useRef(),v=t.useRef();t.useEffect((()=>{d&&u&&d(c+u)}),[u]);const m=e=>{j(e.actualValue)};return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8}},{children:[e.jsx(r.CheckBox,{isChecked:x,onValueChange:()=>{x&&d&&(d(""),j("")),h(!x)}}),e.jsx(i.TitleSmall,Object.assign({style:{marginLeft:8}},{children:"Add discount code"}))]})),x&&e.jsxs("div",Object.assign({ref:f,style:{margin:10}},{children:[e.jsx(a.Input,{placeholder:"Enter your discount code",onChangeText:e=>{d&&d(e)},value:c,onFocus:()=>{p(!0)},onBlur:e=>{var s;"addVar"===(null===(s=e.relatedTarget)||void 0===s?void 0:s.id)?(f.current&&f.current.focus(),p(!0)):p(!1)},noErrorHint:!0,validate:e=>[!0,""]}),g&&e.jsx(o.AddVariableStyled,Object.assign({ref:v,id:"addVar",onClick:e=>{e.stopPropagation(),b((()=>m)),C(!0)}},{children:e.jsxs("div",Object.assign({className:"add"},{children:[e.jsx(s.default,{width:14,height:14,color:"white"}),e.jsx("div",Object.assign({className:"variable"},{children:"Add variable"}))]}))}))]}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../../assets/icons/PlusIcon.js"),t=require("react"),s=require("../../checkBox/CheckBox.js"),a=require("../../input/Input.js"),i=require("../../TypographyStyle.js"),o=require("../context/templateModalContext.js"),l=require("./VariableConnectorsPanel.js");exports.DiscountCodeComponent=n=>{const{discountCode:d,setDiscountCode:c}=n,[u,x]=t.useState(""),[h,j]=t.useState(!!d),[p,C]=t.useState(!1),{setVariableCallback:f,setShowVariablePicker:v}=o.useTemplateModalContext(),m=t.useRef(),g=t.useRef();t.useEffect((()=>{c&&u&&c(d+u)}),[u]);const y=e=>{x(e.actualValue)};return e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",marginLeft:10,marginTop:8},children:[e.jsx(s.CheckBox,{isChecked:h,onValueChange:()=>{h&&c&&(c(""),x("")),j(!h)}}),e.jsx(i.TitleSmall,{style:{marginLeft:8},children:"Add discount code"})]}),h&&e.jsxs("div",{ref:m,style:{margin:10},children:[e.jsx(a.Input,{placeholder:"Enter your discount code",onChangeText:e=>{c&&c(e)},value:d,onFocus:()=>{C(!0)},onBlur:e=>{var r;"addVar"===(null===(r=e.relatedTarget)||void 0===r?void 0:r.id)?(m.current&&m.current.focus(),C(!0)):C(!1)},noErrorHint:!0,validate:e=>[!0,""]}),p&&e.jsx(l.AddVariableStyled,{ref:g,id:"addVar",onClick:e=>{e.stopPropagation(),f((()=>y)),v(!0)},children:e.jsxs("div",{className:"add",children:[e.jsx(r.default,{width:14,height:14,color:"white"}),e.jsx("div",{className:"variable",children:"Add variable"})]})})]})]})};

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

@@ -1,17 +1,17 @@
-import React from 'react';
-import type { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
-import type { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';
-interface EditMediaModalProps {
-    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
-    openEditMedia: boolean;
-    mediaComponentFormat: HEADER_TYPES;
-    variableListForImage: VariableListInterfaceV2[];
-    uploadMedia: (urlOrVariable?: string) => void;
-    editIconRef: React.MutableRefObject<HTMLDivElement | null>;
-    fileRef: React.MutableRefObject<HTMLInputElement | null>;
-    useEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;
-    skipAddVariable?: boolean;
-}
-declare const EditMediaModal: React.FC<EditMediaModalProps>;
-export default EditMediaModal;
+import React from 'react';
+import { VariableListInterfaceV2 } from '@src/components/add-variableV2';
+import { HEADER_TYPES } from '@src/components/template-preview';
+import { UseEditWhatsappTemplateMediaResponse } from './useEditWhtasappTemplateMedia';
+interface EditMediaModalProps {
+    setOpenEditMedia: React.Dispatch<React.SetStateAction<boolean>>;
+    openEditMedia: boolean;
+    mediaComponentFormat: HEADER_TYPES;
+    variableListForImage: VariableListInterfaceV2[];
+    uploadMedia: (urlOrVariable?: string) => void;
+    editIconRef: React.MutableRefObject<HTMLDivElement | null>;
+    fileRef: React.MutableRefObject<HTMLInputElement | null>;
+    useEditWhatsappTemplateMediaResponse: UseEditWhatsappTemplateMediaResponse;
+    skipAddVariable?: boolean;
+}
+declare const EditMediaModal: React.FC<EditMediaModalProps>;
+export default EditMediaModal;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),i=require("../../../assets/icons/info.svg.js");require("../../curtain/CurtainHelper.js");var a=require("../../variable-picker-v3/model.js"),s=require("react"),r=require("../../button/Button.js"),o=require("../../image-cropper/BikImageCropper.js"),n=require("../../input-with-vars/InputWithVariables.js"),l=require("../../spinner/Spinner.js"),d=require("../../template-preview/models/TemplateMeta.js"),c=require("../../template-preview/models/WhatsAppTemplate.js"),p=require("../../TypographyStyle.js"),u=require("../../../utils/validator.js"),g=require("../../../constants/Theme.js"),x=require("../../../assets/icons/file.svg.js"),E=require("../../../assets/icons/filePdf.svg.js"),m=require("../../../assets/icons/image.svg.js"),h=require("../../../assets/icons/upload.svg.js"),j=require("../context/templateModalContext.js"),b=require("../utils/validateIsUrl.js");exports.default=f=>{let{setOpenEditMedia:y,mediaComponentFormat:v,variableListForImage:T,openEditMedia:C,uploadMedia:M,fileRef:I,useEditWhatsappTemplateMediaResponse:A,skipAddVariable:D}=f;const{pod:O,setHideCrossButton:S,setHideFooterButton:R}=j.useTemplateModalContext(),[P,k]=s.useState(""),[q,H]=s.useState(void 0),[B,w]=s.useState(!1),[L,V]=s.useState("");let _;if(s.useEffect((()=>(R(!0),()=>{R(!1)})),[]),s.useEffect((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&H(e)}),[A.loading]),_=v===d.HEADER_TYPES.IMAGE?"image/png, image/jpeg":v===d.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!C)return e.jsx(e.Fragment,{});const U=()=>v===d.HEADER_TYPES.IMAGE?"Image":v===d.HEADER_TYPES.VIDEO?"Video":"Document";return e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"}},{children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),y(!1),k("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(p.TitleRegular,{children:"Update Media"})]})),e.jsxs("div",Object.assign({style:{position:"relative",padding:16,borderRadius:4,border:B?`1px dashed ${g.DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`:`1px dashed ${g.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:g.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:A.loading?"flex":"initial"}},{children:[e.jsxs("div",Object.assign({style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16}},{children:[A.loading?e.jsx(l.PureSpinner,{width:"40px",height:"40px",color:g.COLORS.content.brand}):e.jsx("div",Object.assign({style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:g.DEFAULT_THEME.colorsV2.background.base}},{children:v===d.HEADER_TYPES.IMAGE?e.jsx(m.default,{width:40,height:40}):v===d.HEADER_TYPES.VIDEO?e.jsx(x.default,{width:40,height:40}):e.jsx(E.default,{width:40,height:40})})),e.jsx(p.TitleMedium,{children:A.loading?"Upload in progress...":v===d.HEADER_TYPES.IMAGE?"Upload an image":v===d.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(p.BodySecondary,Object.assign({color:g.COLORS.content.secondary},{children:A.loading?`Your ${v.toLowerCase()} is getting loaded. This may take a couple of minutes.`:v===d.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":v===d.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"}))]})),!A.loading&&e.jsxs(e.Fragment,{children:[e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"6px"}},{children:e.jsx(n.InputWithVariables,{labelText:`${U()} URL`,onPickerToggle:e=>{S(!!e)},pickerType:a.PickerType.EMBEDDED,portalElement:null!=q?q:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{V(e.actualValue),w(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:P,prevVariable:{actualValue:"",variableType:"string"},variablesList:T,placeHolder:D?"Enter URL":"Enter URL/Add variable",showAddButton:O!==c.POD.CAMPAIGN||!D&&v===d.HEADER_TYPES.IMAGE})})),e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"}},{children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(p.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]})),e.jsx("div",Object.assign({style:{display:"flex",width:"100%"}},{children:e.jsx(r.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:h.default,onClick:()=>{M(),w(!1)},size:"medium"})}))]}),B&&e.jsxs("div",Object.assign({style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4}},{children:[e.jsx(i.default,{width:16,height:16,color:g.COLORS.content.negative}),e.jsx(p.BodyCaption,Object.assign({style:{color:g.COLORS.content.negative}},{children:`Select ${U()}`}))]}))]})),!A.loading&&e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",marginTop:8}},{children:e.jsx(r.Button,{buttonText:`Add ${U()}`,onClick:()=>{L?u.validateURL(L)||b.isVariable(L)?(M(L),y(!1),k(""),w(!1)):k("Enter valid URL"):w(!0)}})})),e.jsx("input",{ref:I,style:{display:"none"},type:"file",onChange:A.handleImageUpload,accept:_}),!!A.selectedImage&&e.jsx(o.BikImageCropper,{aspectRatio:15/8,src:A.selectedImage,onCropComplete:A.onCropComplete,onCancel:()=>{A.setLoading(!1),A.setSelectedImage(""),I.current&&(I.current.value="")}})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/arrow_back.svg.js"),i=require("../../../assets/icons/info.svg.js");require("../../curtain/CurtainHelper.js");var a=require("../../variable-picker-v3/model.js"),r=require("react"),s=require("../../button/Button.js"),o=require("../../image-cropper/BikImageCropper.js");require("../../image-compress/ImageCompress.js"),require("../../states/StateComponent.js"),require("../../../_virtual/_tslib.js"),require("../../../constants/zindex.js"),require("../../modals/styledModal.js");var l=require("../../spinner/Spinner.js"),n=require("../../input-with-vars/InputWithVariables.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var d=require("../../../constants/Theme.js"),p=require("../../template-preview/models/TemplateMeta.js"),u=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var c=require("../../TypographyStyle.js"),g=require("../../../utils/validator.js"),m=require("../../../assets/icons/file.svg.js"),h=require("../../../assets/icons/filePdf.svg.js"),x=require("../../../assets/icons/image.svg.js"),E=require("../../../assets/icons/upload.svg.js"),j=require("../context/templateModalContext.js"),v=require("../utils/validateIsUrl.js");exports.default=f=>{let{setOpenEditMedia:y,mediaComponentFormat:T,variableListForImage:C,openEditMedia:b,uploadMedia:M,fileRef:A,useEditWhatsappTemplateMediaResponse:q,skipAddVariable:I}=f;const{pod:D,setHideCrossButton:S,setHideFooterButton:P}=j.useTemplateModalContext(),[R,w]=r.useState(""),[k,H]=r.useState(void 0),[L,_]=r.useState(!1),[B,V]=r.useState("");let O;if(r.useEffect((()=>(P(!0),()=>{P(!1)})),[]),r.useEffect((()=>{const e=document.querySelector('[class*="ModalWrapper"]');e&&H(e)}),[q.loading]),O=T===p.HEADER_TYPES.IMAGE?"image/png, image/jpeg":T===p.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",!b)return e.jsx(e.Fragment,{});const U=()=>T===p.HEADER_TYPES.IMAGE?"Image":T===p.HEADER_TYPES.VIDEO?"Video":"Document";return e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",gap:"10px",alignItems:"center",marginBottom:"16px"},children:[e.jsx(t.default,{onClick:e=>{e.stopPropagation(),y(!1),w("")},style:{cursor:"pointer"},width:16,height:16}),e.jsx(c.TitleRegular,{children:"Update Media"})]}),e.jsxs("div",{style:{position:"relative",padding:16,borderRadius:4,border:L?`1px dashed ${d.DEFAULT_THEME.colorsV2.stroke.negative.vibrant}`:`1px dashed ${d.DEFAULT_THEME.colorsV2.stroke.primary}`,backgroundColor:d.DEFAULT_THEME.colorsV2.surface.subdued,width:"100%",height:"100%",alignItems:"center",display:q.loading?"flex":"initial"},children:[e.jsxs("div",{style:{marginBottom:24,display:"flex",justifyContent:"center",flexDirection:"column",alignItems:"center",gap:16},children:[q.loading?e.jsx(l.PureSpinner,{width:"40px",height:"40px",color:d.COLORS.content.brand}):e.jsx("div",{style:{height:64,width:64,borderRadius:"100%",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:d.DEFAULT_THEME.colorsV2.background.base},children:T===p.HEADER_TYPES.IMAGE?e.jsx(x.default,{width:40,height:40}):T===p.HEADER_TYPES.VIDEO?e.jsx(m.default,{width:40,height:40}):e.jsx(h.default,{width:40,height:40})}),e.jsx(c.TitleMedium,{children:q.loading?"Upload in progress...":T===p.HEADER_TYPES.IMAGE?"Upload an image":T===p.HEADER_TYPES.VIDEO?"Upload a video":"Upload a document"}),e.jsx(c.BodySecondary,{color:d.COLORS.content.secondary,children:q.loading?`Your ${T.toLowerCase()} is getting loaded. This may take a couple of minutes.`:T===p.HEADER_TYPES.IMAGE?"JPEG/ PNG format • Max 5MB":T===p.HEADER_TYPES.VIDEO?"MP4 format video • Max 16MB":"PDF format document • Max 100MB"})]}),!q.loading&&e.jsxs(e.Fragment,{children:[e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"6px"},children:e.jsx(n.InputWithVariables,{labelText:`${U()} URL`,onPickerToggle:e=>{S(!!e)},pickerType:a.PickerType.EMBEDDED,portalElement:null!=k?k:document.body,noMaxCharCheck:!0,allowMix:!1,onChange:e=>{V(e.actualValue),_(!1)},showVarHeader:!0,varHeaderText:"Select variable",errorMessage:R,prevVariable:{actualValue:"",variableType:"string"},variablesList:C,placeHolder:I?"Enter URL":"Enter URL/Add variable",showAddButton:D!==u.POD.CAMPAIGN||!I&&T===p.HEADER_TYPES.IMAGE})}),e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:"4px",marginBottom:"12px"},children:[e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}}),e.jsx(c.BodyCaption,{children:"Or upload media from device"}),e.jsx("hr",{style:{height:"2px",flex:.5,backgroundColor:"black"}})]}),e.jsx("div",{style:{display:"flex",width:"100%"},children:e.jsx(s.Button,{matchParentWidth:!0,buttonText:"Upload",buttonType:"dashBold",LeadingIcon:E.default,onClick:()=>{M(),_(!1)},size:"medium"})})]}),L&&e.jsxs("div",{style:{position:"absolute",display:"flex",alignItems:"center",bottom:-24,left:0,gap:4},children:[e.jsx(i.default,{width:16,height:16,color:d.COLORS.content.negative}),e.jsx(c.BodyCaption,{style:{color:d.COLORS.content.negative},children:`Select ${U()}`})]})]}),!q.loading&&e.jsx("div",{style:{display:"flex",justifyContent:"flex-end",marginTop:8},children:e.jsx(s.Button,{buttonText:`Add ${U()}`,onClick:()=>{B?g.validateURL(B)||v.isVariable(B)?(M(B),y(!1),w(""),_(!1)):w("Enter valid URL"):_(!0)}})}),e.jsx("input",{ref:A,style:{display:"none"},type:"file",onChange:q.handleImageUpload,accept:O}),!!q.selectedImage&&e.jsx(o.BikImageCropper,{aspectRatio:15/8,src:q.selectedImage,onCropComplete:q.onCropComplete,onCancel:()=>{q.setLoading(!1),q.setSelectedImage(""),A.current&&(A.current.value="")}})]})};

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

@@ -1,14 +1,13 @@
-/// <reference types="react" />
-import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
-export interface EditMediaV2Props {
-    imageName: string[];
-    selectedVariable?: string;
-    errorSecondaryText?: string;
-    error?: string;
-    isLoading?: boolean;
-    mediaType?: HEADER_TYPES;
-    handleImageChange?: () => void;
-    setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
-}
-declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
-export default EditMediaV2;
+import { HEADER_TYPES } from '@src/components/template-preview/models/TemplateMeta';
+export interface EditMediaV2Props {
+    imageName: string[];
+    selectedVariable?: string;
+    errorSecondaryText?: string;
+    error?: string;
+    isLoading?: boolean;
+    mediaType?: HEADER_TYPES;
+    handleImageChange?: () => void;
+    setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
+}
+declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditMediaV2;

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

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/broken_media_image.svg.js"),t=require("../../../assets/icons/document_pdf.svg.js"),s=require("../../../assets/icons/edit.svg.js"),r=require("../../../assets/icons/refresh.svg.js"),n=require("styled-components"),a=require("../../shimmer-image/ShimmerImage.js"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),c=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),h=require("../context/templateModalContext.js"),u=require("./EditMediaV2.style.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const m=j(n).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/broken_media_image.svg.js"),t=require("../../../assets/icons/document_pdf.svg.js"),r=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),n=require("styled-components"),o=require("../../shimmer-image/ShimmerImage.js"),l=require("../../spinner/Spinner.js"),a=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),c=require("../../../utils/StringUtils.js"),h=require("../../../constants/Theme.js"),u=require("../context/templateModalContext.js"),g=require("./EditMediaV2.style.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p=m(n).default.div`
 	padding-left: 14px;
 	padding-right: 6px;
 	height: 100%;
-	border-left: 1px solid ${g.COLORS.stroke.primary};
+	border-left: 1px solid ${h.COLORS.stroke.primary};
 	cursor: pointer;
 	display: flex;
 	align-items: center;
-`;exports.default=n=>{const{imageName:j,error:p,isLoading:x,mediaType:f,selectedVariable:y,setOpenEditMedia:O}=n,b=null==j?void 0:j[0].split("/"),v=null==b?void 0:b[b.length-1],{disableEditVariable:C}=h.useTemplateModalContext();return e.jsxs(u.Container,{children:[e.jsx(u.ImageContainer,Object.assign({error:!!p,onClick:()=>null==O?void 0:O(!0)},{children:p?e.jsx(i.default,{width:56,height:56}):x?e.jsx(o.Spinner,{size:"small"}):y?e.jsx(a.ShimmerImage,{imageUrl:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",width:56,height:56}):f===l.HEADER_TYPES.IMAGE?e.jsx(a.ShimmerImage,{imageUrl:null==j?void 0:j[0],width:56,height:56}):f===l.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:j[0],style:{width:56,height:56}},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:j[0]})})):e.jsx(t.default,{width:18,height:22,color:g.COLORS.content.placeholder})})),e.jsxs(u.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:p?"unset":1}},{children:j&&p?e.jsx(e.Fragment,{}):x?e.jsx(d.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(d.BodySecondary,Object.assign({style:{color:g.COLORS.content.primary,marginLeft:8}},{children:y||c.default.toCapitilize(null==f?void 0:f.toLowerCase())||v}))})),!!p&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:g.COLORS.content.negative}},{children:["Error loading this ",null==f?void 0:f.toLowerCase(),". Retry"]})),e.jsx(d.Caption,Object.assign({style:{color:g.COLORS.content.secondary}},{children:p}))]}))]}),!C&&!x&&e.jsx(m,Object.assign({onClick:()=>null==O?void 0:O(!0),onKeyDown:()=>null==O?void 0:O(!0),role:"presentation"},{children:p?e.jsx(r.default,{color:g.COLORS.content.brand,width:24,height:24}):e.jsx(s.default,{width:24,height:24,color:g.COLORS.content.placeholder})}))]})};
+`;exports.default=n=>{const{imageName:m,error:j,isLoading:x,mediaType:f,selectedVariable:y,setOpenEditMedia:v}=n,C=null==m?void 0:m[0].split("/"),S=null==C?void 0:C[C.length-1],{disableEditVariable:O}=u.useTemplateModalContext();return e.jsxs(g.Container,{children:[e.jsx(g.ImageContainer,{error:!!j,onClick:()=>null==v?void 0:v(!0),children:j?e.jsx(i.default,{width:56,height:56}):x?e.jsx(l.Spinner,{size:"small"}):y?e.jsx(o.ShimmerImage,{imageUrl:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",width:56,height:56}):f===a.HEADER_TYPES.IMAGE?e.jsx(o.ShimmerImage,{imageUrl:null==m?void 0:m[0],width:56,height:56}):f===a.HEADER_TYPES.VIDEO?e.jsx("video",{src:m[0],style:{width:56,height:56},children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:m[0]})}):e.jsx(t.default,{width:18,height:22,color:h.COLORS.content.placeholder})}),e.jsxs(g.RightComponent,{children:[e.jsx("div",{style:{flex:j?"unset":1},children:m&&j?e.jsx(e.Fragment,{}):x?e.jsx(d.BodyCaption,{style:{marginLeft:8},children:"Your media is getting loaded..."}):e.jsx(d.BodySecondary,{style:{color:h.COLORS.content.primary,marginLeft:8},children:y||c.default.toCapitilize(null==f?void 0:f.toLowerCase())||S})}),!!j&&e.jsxs("div",{style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"},children:[e.jsxs(d.BodySecondary,{style:{color:h.COLORS.content.negative},children:["Error loading this ",null==f?void 0:f.toLowerCase(),". Retry"]}),e.jsx(d.Caption,{style:{color:h.COLORS.content.secondary},children:j})]})]}),!O&&!x&&e.jsx(p,{onClick:()=>null==v?void 0:v(!0),onKeyDown:()=>null==v?void 0:v(!0),role:"presentation",children:j?e.jsx(s.default,{color:h.COLORS.content.brand,width:24,height:24}):e.jsx(r.default,{width:24,height:24,color:h.COLORS.content.placeholder})})]})};

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

@@ -1,6 +1,6 @@
-export declare const RightComponent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
-    error: boolean;
-}, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EditTemplateMediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RightComponent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    error: boolean;
+}>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EditTemplateMediaContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,10 +1,10 @@
-import { type WebpushTemplateType } from "../../template-preview/models/WebpushTemplate";
-import type { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
-export interface EditWebpushTemplateV2Props {
-    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
-    template: WebpushTemplateType;
-    onTemplateChange?: (template: WebpushTemplateType) => void;
-    showVariableModal?: boolean;
-}
-declare const EditWebpushTemplate: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, }: EditWebpushTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
-export default EditWebpushTemplate;
+import { WebpushTemplateType } from '@src/components/template-preview/models/WebpushTemplate';
+import { WhatsAppPickerMeta } from '@src/components/template-preview/models/WhatsAppTemplate';
+export interface EditWebpushTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WebpushTemplateType;
+    onTemplateChange?: (template: WebpushTemplateType) => void;
+    showVariableModal?: boolean;
+}
+declare const EditWebpushTemplate: ({ template, onTemplateChange, whatsappSpecificPickerMeta, showVariableModal, }: EditWebpushTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWebpushTemplate;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash/cloneDeep"),a=require("react"),i=require("../../input/Input.js"),n=require("../../template-preview/models/Channels.js"),l=require("../../template-preview/models/TemplateMeta.js"),o=require("../context/templateModalContext.js"),s=require("../helpers/WebpushTemplateHelper.js"),d=require("../utils/getDataFromTemplateComponent.js"),r=require("./EditMediaModal.js"),u=require("./EditMediaV2.js"),p=require("./EditMediaV2.style.js"),c=require("./useEditWhtasappTemplateMedia.js"),m=require("./VariableConnectorsPanel.js"),h=require("./VariableConnectorWhatsApp.js"),b=require("./VariableEditorHeader.js"),g=require("./WhatsAppTemplateCardButtonV2.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var M=f(t);exports.default=t=>{let{template:f,onTemplateChange:E,whatsappSpecificPickerMeta:j,showVariableModal:C}=t;var T,v,x;const[V,L]=a.useState(null),[y,I]=a.useState(null),{variableList:w,disableEditVariable:O,originalVariableList:q,setOriginalVariableList:R}=o.useTemplateModalContext(),{processWebpushTemplate:A,isValidUrl:S}=s.default(),[k,B]=a.useState(null),[W,H]=a.useState(null),[D,P]=a.useState(null);a.useEffect((()=>{w&&A(f,w,q,O).then((e=>{let{templateVariableMapping:t,template:a,webpushBroadcastConfig:i}=e;L(t),null==R||R(t),null==E||E(Object.assign({},a)),I(i)}))}),[w,O]);const{descriptionComponents:F,bodyVariables:U,titleVariables:_}=a.useMemo((()=>{if(V&&y){const e=d.getAllDataFromWebpushTemplateComponent(y,V);return k||B(e.iconImage),W||H(e.bannerImage),D||P(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[V,y]),{uploadMediaLink:N,uploadMediaFiles:Y,validateMimeType:G}=j,$=a.useRef(null),K=c.useEditWhatsappTemplateMedia({uploadMediaLink:N,uploadMediaFiles:Y,updateTemplateImageUrl:e=>J(e,"icon"),validateMimeType:G,mediaComponent:k,fileRef:$}),z=c.useEditWhatsappTemplateMedia({uploadMediaLink:N,uploadMediaFiles:Y,updateTemplateImageUrl:e=>J(e,"image"),validateMimeType:G,mediaComponent:W,fileRef:$});function J(e,t){const a=Object.assign({},f),i=M.default(a);"icon"===t?(i.webpushBroadcastConfig.icon=[e],B([e])):"image"===t&&(i.webpushBroadcastConfig.image=[e],H([e])),null==E||E(Object.assign({},i))}function Q(e,t,a){var i;const n=Object.assign({},f),l=M.default(n),o="custom"===t&&"string"==typeof e,s=null===(i=null==l?void 0:l.webpushBroadcastConfig)||void 0===i?void 0:i.buttons;if(s&&s.length>0){s[a]=o?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},l.webpushBroadcastConfig),{buttons:s});l.webpushBroadcastConfig=t}null==E||E(l)}const X=K.openEditMedia?K:z.openEditMedia?z:null;if(X)return e.jsx(m.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460}},{children:e.jsx(r.default,{mediaComponentFormat:l.HEADER_TYPES.IMAGE,uploadMedia:X.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:X,setOpenEditMedia:X.setOpenEditMedia,openEditMedia:X.openEditMedia,editIconRef:X.editIconRef,fileRef:$,skipAddVariable:!0})}));return e.jsxs(m.Container,Object.assign({style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"}},{children:[k&&k.length?e.jsx(p.EditTemplateMediaContainer,{children:e.jsx(u.default,{imageName:k,handleImageChange:K.handleImageChange,mediaType:l.HEADER_TYPES.IMAGE,error:K.error,isLoading:K.loading,setOpenEditMedia:K.setOpenEditMedia})}):null,W&&W.length?e.jsx(p.EditTemplateMediaContainer,{children:e.jsx(u.default,{imageName:W,handleImageChange:z.handleImageChange,mediaType:l.HEADER_TYPES.IMAGE,error:z.error,isLoading:z.loading,setOpenEditMedia:z.setOpenEditMedia})}):null,(null==U?void 0:U.length)||(null==_?void 0:_.length)?e.jsx(b.default,{containerStyle:{paddingTop:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}):null,null==F?void 0:F.map(((t,a)=>e.jsx(h.default,{originalVariableList:V,originalList:q,channel:n.CHANNEL_TYPE.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:C},a))),D&&D.length?e.jsx("div",Object.assign({style:{padding:"16px 14px"}},{children:e.jsx(i.Input,{labelText:"Redirection Link",id:"redirection-link",value:D[0].replace("https://",""),errorMessage:S(D[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:O?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var t;const a=`https://${e}`;P([a]);const i=M.default(f);(null===(t=i.webpushBroadcastConfig)||void 0===t?void 0:t.redirectionLink)&&(i.webpushBroadcastConfig.redirectionLink=[a]),null==E||E(Object.assign({},i))}(e)}})})):e.jsx(e.Fragment,{}),(null===(v=null===(T=null==V?void 0:V.buttons)||void 0===T?void 0:T.filter((e=>"URL"===e.type)))||void 0===v?void 0:v.length)>0&&e.jsx(b.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(x=null==V?void 0:V.buttons)||void 0===x?void 0:x.map(((t,a)=>e.jsx(g.default,{variableListIndex:a,CTAoptions:null==j?void 0:j.CTAoptions,button:t,currentVariableList:V,updateSelectedURLTemplateBtn:Q},`${a}`)))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),a=require("react"),i=require("../../input/Input.js"),n=require("../../template-preview/models/Channels.js"),l=require("../../template-preview/models/TemplateMeta.js"),o=require("../context/templateModalContext.js"),s=require("../helpers/WebpushTemplateHelper.js"),d=require("../utils/getDataFromTemplateComponent.js"),r=require("./EditMediaModal.js"),p=require("./EditMediaV2.js"),u=require("./EditMediaV2.style.js"),c=require("./useEditWhtasappTemplateMedia.js"),m=require("./VariableConnectorsPanel.js"),h=require("./VariableConnectorWhatsApp.js"),b=require("./VariableEditorHeader.js"),g=require("./WhatsAppTemplateCardButtonV2.js");exports.default=f=>{let{template:M,onTemplateChange:E,whatsappSpecificPickerMeta:C,showVariableModal:T}=f;var x,j,v;const[V,L]=a.useState(null),[y,I]=a.useState(null),{variableList:w,disableEditVariable:q,originalVariableList:O,setOriginalVariableList:R}=o.useTemplateModalContext(),{processWebpushTemplate:A,isValidUrl:S}=s.default(),[k,B]=a.useState(null),[D,W]=a.useState(null),[H,P]=a.useState(null);a.useEffect((()=>{w&&A(M,w,O,q).then((e=>{let{templateVariableMapping:t,template:a,webpushBroadcastConfig:i}=e;L(t),null==R||R(t),null==E||E(Object.assign({},a)),I(i)}))}),[w,q]);const{descriptionComponents:F,bodyVariables:U,titleVariables:_}=a.useMemo((()=>{if(V&&y){const e=d.getAllDataFromWebpushTemplateComponent(y,V);return k||B(e.iconImage),D||W(e.bannerImage),H||P(e.redirectionLink),{descriptionComponents:e.descriptionComponents,bodyVariables:e.bodyVariables,titleVariables:e.titleVariables}}return{descriptionComponents:[],bodyVariables:[],titleVariables:[],iconImage:null,bannerImage:null}}),[V,y]),{uploadMediaLink:N,uploadMediaFiles:Y,validateMimeType:G}=C,$=a.useRef(null),K=c.useEditWhatsappTemplateMedia({uploadMediaLink:N,uploadMediaFiles:Y,updateTemplateImageUrl:e=>J(e,"icon"),validateMimeType:G,mediaComponent:k,fileRef:$}),z=c.useEditWhatsappTemplateMedia({uploadMediaLink:N,uploadMediaFiles:Y,updateTemplateImageUrl:e=>J(e,"image"),validateMimeType:G,mediaComponent:D,fileRef:$});function J(e,a){const i=Object.assign({},M),n=t.cloneDeep(i);"icon"===a?(n.webpushBroadcastConfig.icon=[e],B([e])):"image"===a&&(n.webpushBroadcastConfig.image=[e],W([e])),null==E||E(Object.assign({},n))}function Q(e,a,i){var n;const l=Object.assign({},M),o=t.cloneDeep(l),s="custom"===a&&"string"==typeof e,d=null===(n=null==o?void 0:o.webpushBroadcastConfig)||void 0===n?void 0:n.buttons;if(d&&d.length>0){d[i]=s?e:"string"!=typeof e?e.placeHolder:"";const t=Object.assign(Object.assign({},o.webpushBroadcastConfig),{buttons:d});o.webpushBroadcastConfig=t}null==E||E(o)}const X=K.openEditMedia?K:z.openEditMedia?z:null;if(X)return e.jsx(m.Container,{style:{flexDirection:"column",width:400,maxHeight:460},children:e.jsx(r.default,{mediaComponentFormat:l.HEADER_TYPES.IMAGE,uploadMedia:X.uploadMedia,variableListForImage:[],useEditWhatsappTemplateMediaResponse:X,setOpenEditMedia:X.setOpenEditMedia,openEditMedia:X.openEditMedia,editIconRef:X.editIconRef,fileRef:$,skipAddVariable:!0})});return e.jsxs(m.Container,{style:{flexDirection:"column",width:400,maxHeight:460,minWidth:"auto"},children:[k&&k.length?e.jsx(u.EditTemplateMediaContainer,{children:e.jsx(p.default,{imageName:k,handleImageChange:K.handleImageChange,mediaType:l.HEADER_TYPES.IMAGE,error:K.error,isLoading:K.loading,setOpenEditMedia:K.setOpenEditMedia})}):null,D&&D.length?e.jsx(u.EditTemplateMediaContainer,{children:e.jsx(p.default,{imageName:D,handleImageChange:z.handleImageChange,mediaType:l.HEADER_TYPES.IMAGE,error:z.error,isLoading:z.loading,setOpenEditMedia:z.setOpenEditMedia})}):null,(null==U?void 0:U.length)||(null==_?void 0:_.length)?e.jsx(b.default,{containerStyle:{paddingTop:8},headerText:"Edit variable values",subText:"Edit values for the variables used in template",toolTipInfo:"Variables are placeholder texts which can either be filled through data or custom texts. These can be edited through the dropdowns below"}):null,null==F?void 0:F.map(((t,a)=>e.jsx(h.default,{originalVariableList:V,originalList:O,channel:n.CHANNEL_TYPE.WEBPUSH,type:t.type,descriptionComponent:t.component,showVariableModal:T},a))),H&&H.length?e.jsx("div",{style:{padding:"16px 14px"},children:e.jsx(i.Input,{labelText:"Redirection Link",id:"redirection-link",value:H[0].replace("https://",""),errorMessage:S(H[0])?"":"Please enter a valid URL",maxCharLimit:2e3,noKeyDownChange:!0,state:q?"disabled":"none",prefixText:"https://",placeholder:"Enter custom URL here",onChangeText:e=>{!function(e){var a;const i=`https://${e}`;P([i]);const n=t.cloneDeep(M);(null===(a=n.webpushBroadcastConfig)||void 0===a?void 0:a.redirectionLink)&&(n.webpushBroadcastConfig.redirectionLink=[i]),null==E||E(Object.assign({},n))}(e)}})}):e.jsx(e.Fragment,{}),(null===(j=null===(x=null==V?void 0:V.buttons)||void 0===x?void 0:x.filter((e=>"URL"===e.type)))||void 0===j?void 0:j.length)>0&&e.jsx(b.default,{headerText:"Edit buttons",subText:"Edit the link connected to the CTA button"}),null===(v=null==V?void 0:V.buttons)||void 0===v?void 0:v.map(((t,a)=>e.jsx(g.default,{variableListIndex:a,CTAoptions:null==C?void 0:C.CTAoptions,button:t,currentVariableList:V,updateSelectedURLTemplateBtn:Q},`${a}`)))]})};

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

@@ -1,13 +1,24 @@
-import type { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
-import type { WhatsAppCarouselTemplate } from "../../template-preview/models/WhatsappCarouselTemplate";
-import { type WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
-export interface EditWhatsAppCarouselTemplateV2Props {
-    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
-    template: WhatsAppCarouselTemplate;
-    showVariableModal?: boolean;
-    variableListForImage?: VariableListInterfaceV2[];
-    discountCode?: string;
-    setDiscountCode?: (code: string) => void;
-}
-declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
-export default EditWhatsAppCarouselTemplateV2;
+import { VariableListInterfaceV2 } from '@src/components/add-variableV2';
+import { WhatsAppPickerMeta } from '@src/components/template-preview';
+import { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';
+export interface EditWhatsAppCarouselTemplateV2Props {
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    template: WhatsAppCarouselTemplate;
+    showVariableModal?: boolean;
+    variableListForImage?: VariableListInterfaceV2[];
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+}
+export interface CarouselProduct {
+    name: string;
+    image: string;
+    quantity: number;
+    variantId: string;
+    productId: string;
+    displayOrder: number;
+    collectionId: string;
+    productName: string;
+    productImage: string;
+}
+declare const EditWhatsAppCarouselTemplateV2: ({ template, whatsappSpecificPickerMeta, showVariableModal, variableListForImage, discountCode, setDiscountCode, }: EditWhatsAppCarouselTemplateV2Props) => import("react/jsx-runtime").JSX.Element;
+export default EditWhatsAppCarouselTemplateV2;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@bikdotai/bik-models/growth/models/bik-store"),l=require("../../../assets/icons/arrow_back.svg.js"),n=require("../../../assets/icons/chevronLeft.svg.js"),o=require("../../../assets/icons/chevronRight.svg.js"),i=require("../../../assets/icons/PlusIcon.js"),a=require("lodash/cloneDeep"),r=require("react"),s=require("../../button/Button.js"),d=require("../../icon-button/IconButton.js"),c=require("../../product-picker-v2/modal.js"),u=require("../../product-picker-v2/type.js"),p=require("../Badge/index.js"),v=require("../context/templateModalContext.js"),h=require("./EditWhatsAppTemplateV2.js"),g=require("./ProductBox.js"),m=require("../../template-preview/helpers/templateMiscHelper.js"),y=require("../../template-preview/models/WhatsAppTemplate.js"),x=require("../../TypographyStyle.js"),f=require("../../../constants/Theme.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=j(a);exports.default=a=>{let{template:j,whatsappSpecificPickerMeta:C,showVariableModal:O,variableListForImage:I,discountCode:S,setDiscountCode:k}=a;var P,q,T,w,B,R,L,E;const{selectedCarouselIndex:M,setTemplate:D,pickerConf:F,isProductCarouselType:V,pod:A,cardCount:N,carouselProducts:$,setCarouselProducts:_,isError:W,cardImages:z,disableEditVariable:G,onDeleteSelectedProducts:H,setSelectedCarouselIndex:K,setVariableCallback:J,setShowVariablePicker:Q,sliderRef:U}=v.useTemplateModalContext(),[X,Y]=r.useState(m.isRCSChannel(null==j?void 0:j.channel)?"Carousel Cards":-1==M?"First Message (Step 1/2)":V?"Product Carousel "+((null===(q=null===(P=null==j?void 0:j.mapping)||void 0===P?void 0:P.body)||void 0===q?void 0:q.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(w=null===(T=null==j?void 0:j.mapping)||void 0===T?void 0:T.body)||void 0===w?void 0:w.length)?"(Step 2/2)":"")),[Z,ee]=r.useState(!1),[te,le]=r.useState(!1),ne=M===(null!=N?N:-1)-1,oe=(null!=M?M:-1)<1;r.useEffect((()=>{var e,t,l,n;Y(m.isRCSChannel(null==j?void 0:j.channel)?"Carousel Cards":-1==M?"First Message (Step 1/2)":V?"Product Carousel "+((null===(t=null===(e=null==j?void 0:j.mapping)||void 0===e?void 0:e.body)||void 0===t?void 0:t.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(n=null===(l=null==j?void 0:j.mapping)||void 0===l?void 0:l.body)||void 0===n?void 0:n.length)?"(Step 2/2)":""))}),[M]);const ie=e=>{null==_||_([{name:"variable",productName:e.actualValue}])};return r.useEffect((()=>{-1===M&&m.isRCSChannel(null==j?void 0:j.channel)&&(null==K||K(0))}),[M,null==j?void 0:j.channel]),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center"}},{children:[!m.isRCSChannel(null==j?void 0:j.channel)&&null!=M&&M>=0&&!!(null===(R=null===(B=null==j?void 0:j.mapping)||void 0===B?void 0:B.body)||void 0===R?void 0:R.length)&&e.jsx(d.IconButton,{Icon:l.default,onClick:()=>{null==K||K(-1)}}),e.jsx(x.TitleMedium,Object.assign({style:{marginLeft:10}},{children:X}))]})),V&&(null!==(L=null==$?void 0:$.length)&&void 0!==L?L:0)>0&&null!=M&&M>=0&&e.jsxs("div",Object.assign({style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"}},{children:[e.jsx(g.ProductBox,{editItem:()=>{1===(null==$?void 0:$.length)&&"variable"===$[0].name?(J((()=>ie)),Q(!0)):ee(!Z)},cardBody:1===(null==$?void 0:$.length)&&"variable"===$[0].name?`${$[0].productName}`:`${null==$?void 0:$.length} Products Selected`,hideIcon:1===(null==$?void 0:$.length)&&"variable"===$[0].name,deleteItem:()=>{var e;if(1===(null==$?void 0:$.length)&&"variable"===$[0].name)return void(null==_||_([]));const t=b.default(Object.assign({},j));t&&(z&&z.length>0?null==z||z.forEach(((e,l)=>{var n;t.components[1].cards[l].components[0].example.header_handle=[null!==(n=z[l])&&void 0!==n?n:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==t?void 0:t.components[1].cards)||void 0===e||e.forEach(((e,l)=>{t.components[1].cards[l].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==D||D(t)),null==_||_([]),null==H||H()}}),$&&(null==$?void 0:$.length)>0&&"variable"!=$[0].name&&e.jsx(s.Button,{disabled:(null!==(E=null==$?void 0:$.length)&&void 0!==E?E:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{le(!0),ee(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]})),!G&&V&&0===(null==$?void 0:$.length)&&null!=M&&M>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{marginLeft:12}},{children:[e.jsx(x.TitleRegular,{children:"Product(s)"}),e.jsx(x.BodySecondary,{children:`Select ${null!=N?N:1} products`})]})),e.jsxs("div",Object.assign({style:{marginTop:16,marginBottom:16,marginLeft:W?16:12,marginRight:W?16:12,flexDirection:"column",display:"flex",alignItems:"center"}},{children:[e.jsx(s.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:W?`2px dashed ${f.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:W?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex",width:18,height:18}},{children:e.jsx(i.default,{width:18,height:18,color:f.COLORS.content.secondary})})),onClick:e=>{ee(!0)}}),A===y.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"}},{children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(x.BodyCaption,Object.assign({style:{color:"#616161",overflow:"unset"}},{children:"OR"})),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]})),e.jsx(s.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:W?`2px dashed ${f.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:W?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",Object.assign({style:{display:"flex"}},{children:e.jsx(i.default,{width:18,height:18,color:f.COLORS.content.secondary})})),onClick:e=>{J((()=>ie)),Q(!0)}})]})]})),W&&e.jsx("div",Object.assign({style:{marginLeft:10,marginBottom:16}},{children:e.jsx(p.Badge,{padding:"8px",errorText:"Please add products"})}))]}),!V&&(null!=M?M:-1)>-1&&e.jsxs("div",Object.assign({style:{display:"flex",background:f.COLORS.surface.hovered,alignItems:"center"}},{children:[e.jsx(d.IconButton,{Icon:n.default,disabled:oe,width:8,height:14,svgStyle:oe?{}:{color:f.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==U?void 0:U.current)||void 0===e||e.slickPrev(),(null!=M?M:-1)<1||null==K||K((e=>e-1))}}),e.jsx(x.TitleRegular,Object.assign({style:{flex:1,display:"flex",justifyContent:"center"},color:f.COLORS.content.secondary},{children:`Card ${(null!=M?M:0)+1}/${N}`})),e.jsx(d.IconButton,{Icon:o.default,width:8,height:14,disabled:ne,svgStyle:ne?{}:{color:f.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==U?void 0:U.current)||void 0===e||e.slickNext(),(null!=M?M:-1)>=(null!=N?N:-1)-1||null==K||K((e=>e+1))}})]})),e.jsx(h.default,{whatsappSpecificPickerMeta:C,template:j,onTemplateChange:e=>{null==D||D(e)},showVariableModal:O,variableListForImage:I,discountCode:S,setDiscountCode:k}),Z&&F&&e.jsx(c.ProductPickerModal,{zIndex:200,startupScreen:te?u.ScreenName.RearrangeProducts:u.ScreenName.Collections,rearrangeEnabled:!0,storeId:F.storeId,selectedItems:(e=>{if(e.length>0){const t={};for(const l of e){const e=null==l?void 0:l.collectionId,n=l.productId,o=l.variantId;e in t||(t[e]={products:{},name:"",image:"",isSmartCollection:!1}),n in t[e].products||(t[e].products[n]={variants:{},name:(null==l?void 0:l.productName)||"",image:(null==l?void 0:l.productImage)||""}),t[e].products[n].variants[o]={name:(null==l?void 0:l.name)||"",price:"",image:(null==l?void 0:l.image)||"",quantity:l.quantity||0,displayOrder:l.displayOrder}}return t}return{}})(null!=$?$:[]),collectionFetcher:F.fetchCollections,productFetcher:F.fetchProducts,onAdd:(e,t)=>{var l,n,o,i,a,r;le(!1);const s=[];delete e.isCustom;for(const t of Object.keys(e)){const d=e[t].products;if(void 0!==d&&Object.keys(d).length)for(const e of Object.keys(d)){const c=d[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:v,quantity:h,displayOrder:g}=c[u],m={name:p,image:null!==(n=null!=v?v:null===(l=d[e])||void 0===l?void 0:l.image)&&void 0!==n?n:"",quantity:h,variantId:u,productId:e,displayOrder:g,collectionId:t,productName:null!==(i=null===(o=d[e])||void 0===o?void 0:o.name)&&void 0!==i?i:"",productImage:null!==(r=null===(a=d[e])||void 0===a?void 0:a.image)&&void 0!==r?r:""};s.push(m)}}}const d=s.sort(((e,t)=>e.displayOrder-t.displayOrder)),c=s.map((e=>e.image)),u=b.default(Object.assign({},j));u&&(c.forEach(((e,t)=>{var l;u.components[1].cards[t].components[0].example.header_handle=e?[e]:[null!==(l=null==z?void 0:z[t])&&void 0!==l?l:""]})),null==D||D(u)),null==_||_(d),ee(!1)},searchInCollectionFetcher:F.searchInCollection,searchFetcher:F.searchProducts,visible:Z,onClose:()=>{ee(!1)},exactLimit:null!=N?N:1,appType:F.appType||t.ApplicationType.BIK})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("@bikdotai/bik-models/growth/models/bik-store"),t=require("../../../assets/icons/arrow_back.svg.js"),n=require("../../../assets/icons/chevronLeft.svg.js"),i=require("../../../assets/icons/chevronRight.svg.js"),o=require("../../../assets/icons/PlusIcon.js"),r=require("lodash"),a=require("react"),d=require("../../button/Button.js"),s=require("../../icon-button/IconButton.js"),c=require("../../product-picker-v2/modal.js"),u=require("../../product-picker-v2/type.js"),p=require("../Badge/index.js"),v=require("../context/templateModalContext.js"),h=require("./EditWhatsAppTemplateV2.js"),m=require("./ProductBox.js");require("../../template-preview/TemplatePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var g=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js");var y=require("../../template-preview/models/WhatsAppTemplate.js");require("../../template-preview/models/Channels.js");var x=require("../../template-preview/helpers/templateMiscHelper.js"),f=require("../../TypographyStyle.js");exports.default=j=>{let{template:C,whatsappSpecificPickerMeta:b,showVariableModal:I,variableListForImage:S,discountCode:k,setDiscountCode:q}=j;var O,w,P,T,B,L,R,E;const{selectedCarouselIndex:M,setTemplate:A,pickerConf:D,isProductCarouselType:F,pod:V,cardCount:W,carouselProducts:N,setCarouselProducts:$,isError:_,cardImages:z,disableEditVariable:G,onDeleteSelectedProducts:H,setSelectedCarouselIndex:K,setVariableCallback:J,setShowVariablePicker:Q,sliderRef:U}=v.useTemplateModalContext(),[X,Y]=a.useState(x.isRCSChannel(null==C?void 0:C.channel)?"Carousel Cards":-1==M?"First Message (Step 1/2)":F?"Product Carousel "+((null===(w=null===(O=null==C?void 0:C.mapping)||void 0===O?void 0:O.body)||void 0===w?void 0:w.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(T=null===(P=null==C?void 0:C.mapping)||void 0===P?void 0:P.body)||void 0===T?void 0:T.length)?"(Step 2/2)":"")),[Z,ee]=a.useState(!1),[le,te]=a.useState(!1),ne=M===(null!=W?W:-1)-1,ie=(null!=M?M:-1)<1;a.useEffect((()=>{var e,l,t,n;Y(x.isRCSChannel(null==C?void 0:C.channel)?"Carousel Cards":-1==M?"First Message (Step 1/2)":F?"Product Carousel "+((null===(l=null===(e=null==C?void 0:C.mapping)||void 0===e?void 0:e.body)||void 0===l?void 0:l.length)?"(Step 2/2)":""):"Carousel Cards "+((null===(n=null===(t=null==C?void 0:C.mapping)||void 0===t?void 0:t.body)||void 0===n?void 0:n.length)?"(Step 2/2)":""))}),[M]);const oe=e=>{null==$||$([{name:"variable",productName:e.actualValue}])};return a.useEffect((()=>{-1===M&&x.isRCSChannel(null==C?void 0:C.channel)&&(null==K||K(0))}),[M,null==C?void 0:C.channel]),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",alignItems:"center"},children:[!x.isRCSChannel(null==C?void 0:C.channel)&&null!=M&&M>=0&&!!(null===(L=null===(B=null==C?void 0:C.mapping)||void 0===B?void 0:B.body)||void 0===L?void 0:L.length)&&e.jsx(s.IconButton,{Icon:t.default,onClick:()=>{null==K||K(-1)}}),e.jsx(f.TitleMedium,{style:{marginLeft:10},children:X})]}),F&&(null!==(R=null==N?void 0:N.length)&&void 0!==R?R:0)>0&&null!=M&&M>=0&&e.jsxs("div",{style:{display:"flex",rowGap:8,marginBottom:16,marginLeft:10,marginRight:10,flexDirection:"column"},children:[e.jsx(m.ProductBox,{editItem:()=>{1===(null==N?void 0:N.length)&&"variable"===N[0].name?(J((()=>oe)),Q(!0)):ee(!Z)},cardBody:1===(null==N?void 0:N.length)&&"variable"===N[0].name?`${N[0].productName}`:`${null==N?void 0:N.length} Products Selected`,hideIcon:1===(null==N?void 0:N.length)&&"variable"===N[0].name,deleteItem:()=>{var e;if(1===(null==N?void 0:N.length)&&"variable"===N[0].name)return void(null==$||$([]));const l=r.cloneDeep(Object.assign({},C));l&&(z&&z.length>0?null==z||z.forEach(((e,t)=>{var n;l.components[1].cards[t].components[0].example.header_handle=[null!==(n=z[t])&&void 0!==n?n:"https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})):null===(e=null==l?void 0:l.components[1].cards)||void 0===e||e.forEach(((e,t)=>{l.components[1].cards[t].components[0].example.header_handle=["https://res.cloudinary.com/drqhot9ot/image/upload/v1708753454/fake-product.png"]})),null==A||A(l)),null==$||$([]),null==H||H()}}),N&&(null==N?void 0:N.length)>0&&"variable"!=N[0].name&&e.jsx(d.Button,{disabled:(null!==(E=null==N?void 0:N.length)&&void 0!==E?E:0)<=1,style:{alignSelf:"flex-end"},onClick:()=>{te(!0),ee(!0)},buttonText:"Rearrange Products",buttonType:"tertiary"})]}),!G&&F&&0===(null==N?void 0:N.length)&&null!=M&&M>=0&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{marginLeft:12},children:[e.jsx(f.TitleRegular,{children:"Product(s)"}),e.jsx(f.BodySecondary,{children:`Select ${null!=W?W:1} products`})]}),e.jsxs("div",{style:{marginTop:16,marginBottom:16,marginLeft:_?16:12,marginRight:_?16:12,flexDirection:"column",display:"flex",alignItems:"center"},children:[e.jsx(d.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",width:"100%",marginBottom:12,border:_?`2px dashed ${g.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s)",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",{style:{display:"flex",width:18,height:18},children:e.jsx(o.default,{width:18,height:18,color:g.COLORS.content.secondary})}),onClick:e=>{ee(!0)}}),V===y.POD.CHATBOT&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",flex:1,alignItems:"center",justifyContent:"space-between",flexDirection:"row",width:"100%"},children:[e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginRight:8}}),e.jsx(f.BodyCaption,{style:{color:"#616161",overflow:"unset"},children:"OR"}),e.jsx("div",{style:{width:"100%",height:1,backgroundColor:"#E0E0E0",marginLeft:8}})]}),e.jsx(d.Button,{matchParentWidth:!0,style:{flex:1,display:"flex",marginTop:12,width:"100%",border:_?`2px dashed ${g.COLORS.content.negative}`:void 0},size:"medium",buttonText:"Add Product(s) Variable",buttonType:_?"tertiaryGray":"dashBold",LeadingIcon:()=>e.jsx("div",{style:{display:"flex"},children:e.jsx(o.default,{width:18,height:18,color:g.COLORS.content.secondary})}),onClick:e=>{J((()=>oe)),Q(!0)}})]})]}),_&&e.jsx("div",{style:{marginLeft:10,marginBottom:16},children:e.jsx(p.Badge,{padding:"8px",errorText:"Please add products"})})]}),!F&&(null!=M?M:-1)>-1&&e.jsxs("div",{style:{display:"flex",background:g.COLORS.surface.hovered,alignItems:"center"},children:[e.jsx(s.IconButton,{Icon:n.default,disabled:ie,width:8,height:14,svgStyle:ie?{}:{color:g.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==U?void 0:U.current)||void 0===e||e.slickPrev(),(null!=M?M:-1)<1||null==K||K((e=>e-1))}}),e.jsx(f.TitleRegular,{style:{flex:1,display:"flex",justifyContent:"center"},color:g.COLORS.content.secondary,children:`Card ${(null!=M?M:0)+1}/${W}`}),e.jsx(s.IconButton,{Icon:i.default,width:8,height:14,disabled:ne,svgStyle:ne?{}:{color:g.COLORS.content.secondary},onClick:()=>{var e;null===(e=null==U?void 0:U.current)||void 0===e||e.slickNext(),(null!=M?M:-1)>=(null!=W?W:-1)-1||null==K||K((e=>e+1))}})]}),e.jsx(h.default,{whatsappSpecificPickerMeta:b,template:C,onTemplateChange:e=>{null==A||A(e)},showVariableModal:I,variableListForImage:S,discountCode:k,setDiscountCode:q}),Z&&D&&e.jsx(c.ProductPickerModal,{zIndex:200,startupScreen:le?u.ScreenName.RearrangeProducts:u.ScreenName.Collections,rearrangeEnabled:!0,storeId:D.storeId,selectedItems:(e=>{if(e.length>0){const l={};for(const t of e){const e=null==t?void 0:t.collectionId,n=t.productId,i=t.variantId;e in l||(l[e]={products:{},name:"",image:"",isSmartCollection:!1}),n in l[e].products||(l[e].products[n]={variants:{},name:(null==t?void 0:t.productName)||"",image:(null==t?void 0:t.productImage)||""}),l[e].products[n].variants[i]={name:(null==t?void 0:t.name)||"",price:"",image:(null==t?void 0:t.image)||"",quantity:t.quantity||0,displayOrder:t.displayOrder}}return l}return{}})(null!=N?N:[]),collectionFetcher:D.fetchCollections,productFetcher:D.fetchProducts,onAdd:(e,l)=>{var t,n,i,o,a,d;te(!1);const s=[];delete e.isCustom;for(const l of Object.keys(e)){const r=e[l].products;if(void 0!==r&&Object.keys(r).length)for(const e of Object.keys(r)){const c=r[e].variants;if(void 0!==c&&Object.keys(c).length)for(const u of Object.keys(c)){const{name:p,image:v,quantity:h,displayOrder:m}=c[u],g={name:p,image:null!==(n=null!=v?v:null===(t=r[e])||void 0===t?void 0:t.image)&&void 0!==n?n:"",quantity:h,variantId:u,productId:e,displayOrder:m,collectionId:l,productName:null!==(o=null===(i=r[e])||void 0===i?void 0:i.name)&&void 0!==o?o:"",productImage:null!==(d=null===(a=r[e])||void 0===a?void 0:a.image)&&void 0!==d?d:""};s.push(g)}}}const c=s.sort(((e,l)=>e.displayOrder-l.displayOrder)),u=s.map((e=>e.image)),p=r.cloneDeep(Object.assign({},C));p&&(u.forEach(((e,l)=>{var t;p.components[1].cards[l].components[0].example.header_handle=e?[e]:[null!==(t=null==z?void 0:z[l])&&void 0!==t?t:""]})),null==A||A(p)),null==$||$(c),ee(!1)},searchInCollectionFetcher:D.searchInCollection,searchFetcher:D.searchProducts,visible:Z,onClose:()=>{ee(!1)},exactLimit:null!=W?W:1,appType:D.appType||l.ApplicationType.BIK})]})};