@bikdotai/bik-component-library 0.0.578-beta-01 → 0.0.578-beta-03

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-import { AllTemplateVariables } from "../../template-preview";
+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];
@@ -7,6 +7,8 @@ export interface VariableConnectorWhatsAppProps {
     descriptionComponent: ComponentType | WebpushComponentKeyType;
     type: ComponentType['type'] | WEB_PUSH_COMPONENT_TYPE;
     showVariableModal?: boolean;
+    originalList?: WhatsAppTemplateVariables | WebpushTemplateVariables | AllTemplateVariables;
+    channel?: CHANNEL_TYPE;
 }
-declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, originalVariableList, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
+declare const VariableConnectorWhatsApp: ({ descriptionComponent, type, showVariableModal, originalList, channel, }: VariableConnectorWhatsAppProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableConnectorWhatsApp;

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

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

package/package.json

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