@bikdotai/bik-component-library 0.0.817-beta.7 → 0.0.817-beta.9

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

@@ -1,19 +1,19 @@
-import { jsxDEV as h, Fragment as De } from "react/jsx-dev-runtime";
+import { jsxDEV as T, Fragment as De } from "react/jsx-dev-runtime";
 import Be from "../../../assets/icons/edit.svg.js";
 import Ae from "../../../assets/icons/info.svg.js";
 import { format as se } from "date-fns";
 import $ from "lodash/cloneDeep";
-import { useState as P, useEffect as W } from "react";
+import { useState as P, useEffect as I } from "react";
 import K from "styled-components";
 import { Alert as Pe } from "../../alerts/Alert.js";
-import { ALERT_TYPES as We } from "../../alerts/AlertHelper.js";
-import { CustomDateTime as Ie } from "../../custom-date-time/CustomDateTime.js";
+import { ALERT_TYPES as Ie } from "../../alerts/AlertHelper.js";
+import { CustomDateTime as we } from "../../custom-date-time/CustomDateTime.js";
 import { Dropdown as Re } from "../../dropdown/Dropdown.js";
 import { Input as He } from "../../input/Input.js";
-import { truncate as Ye } from "../../product-picker-v2/collectionScreen.js";
-import { placeHolderNamePattern as Me } from "../../template-preview/constants/regexPatterns.js";
-import { isCarouselComponent as we } from "../../template-preview/helpers/templateMiscHelper.js";
-import { CHANNEL_TYPE as d } from "../../template-preview/models/Channels.js";
+import { truncate as We } from "../../product-picker-v2/collectionScreen.js";
+import { placeHolderNamePattern as Ye } from "../../template-preview/constants/regexPatterns.js";
+import { isCarouselComponent as Me } from "../../template-preview/helpers/templateMiscHelper.js";
+import { CHANNEL_TYPE as c } from "../../template-preview/models/Channels.js";
 import { WEB_PUSH_COMPONENT_TYPE as $e } from "../../template-preview/models/WebpushTemplate.js";
 import { POD as U, BUTTON_TYPE as q } from "../../template-preview/models/WhatsAppTemplate.js";
 import { BodySecondary as ze, BodyPrimary as Fe } from "../../TypographyStyle.js";
@@ -26,7 +26,7 @@ import { QueryParamsComponent as Ke } from "./QueryParamsComponent.js";
 const Xe = K.div`
 	/* surface/$color-background-warning-light */
 
-	background: ${(I) => I.focused && I.channel === d.EMAIL ? D.background.warning.light : "transparent"};
+	background: ${(w) => w.focused && w.channel === c.EMAIL ? D.background.warning.light : "transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
 `, Qe = K.div`
@@ -41,7 +41,7 @@ const Xe = K.div`
 	height: 100%;
 	width: 48%;
 	background: rgba(0, 0, 0, 0.1);
-`, g = {
+`, k = {
   value: "custom_link",
   label: "Custom URL"
 }, S = {
@@ -50,468 +50,468 @@ const Xe = K.div`
 }, G = {
   value: "static_expiry",
   label: "Static Expiry"
-}, _t = (I) => {
+}, Nt = (w) => {
   const {
     onFocus: pe,
     variable: s,
-    index: C,
+    index: _,
     showVariableModal: X,
     setShowDiscountCheckBox: ue,
     componentType: u,
-    CTAoptions: ce,
+    CTAoptions: de,
     buttonType: z
-  } = I, [F, Q] = P(!1), [v, V] = P(""), [de, J] = P([]), [p, _] = P(), [be, fe] = P(!1), ye = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/, {
+  } = w, [F, Q] = P(!1), [C, V] = P(""), [ce, J] = P([]), [p, N] = P(), [be, fe] = P(!1), ye = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/, {
     variableList: ee,
     setVariableList: xe,
-    setVariableCallback: he,
-    setShowVariablePicker: ve,
+    setVariableCallback: Te,
+    setShowVariablePicker: Ce,
     device: R,
     channel: b,
     isError: te,
     originalVariableList: O,
-    template: E,
-    templateSelectionTriggered: ke,
+    template: v,
+    templateSelectionTriggered: he,
     setTemplate: H,
-    setDisplayContent: Te,
+    setDisplayContent: Ee,
     setOriginalVariableList: B,
     globalNormalizedPlaceholders: ae,
-    enabledCustomText: Ce,
+    enabledCustomText: _e,
     pod: L,
     selectedCarouselIndex: x,
     isProductCarouselType: Z,
-    isWhatsappCarousel: Ee,
-    disableEditVariable: Y,
+    isWhatsappCarousel: ve,
+    disableEditVariable: W,
     disableEditExpiry: oe,
     templateErrorIndexes: ne,
-    maxCharLimit: ie,
-    disableDatePicker: _e,
-    showDiscountCodeExpiryInfo: Ne,
+    maxCharLimit: le,
+    disableDatePicker: Ne,
+    showDiscountCodeExpiryInfo: ge,
     cardIndex: j = 1
   } = je();
-  W(() => {
+  I(() => {
     F && pe?.();
-  }, [F]), W(() => {
+  }, [F]), I(() => {
     Ve();
-  }, [ke]), W(() => {
-    ge();
+  }, [he]), I(() => {
+    ke();
   }, [x]);
-  function ge() {
+  function ke() {
     const e = [];
     let a = [];
-    if (b === d.MESSAGE && !Ce) {
-      const r = ae ?? [];
+    if (b === c.MESSAGE && !_e) {
+      const i = ae ?? [];
       J([
         {
           label: "",
-          options: [S, g]
+          options: [S, k]
         },
-        ...r
+        ...i
       ]), a = [
         {
           label: "",
-          options: [S, g]
+          options: [S, k]
         },
-        ...r
+        ...i
       ];
     } else {
       s?.type === "link" ? (e.push({
         label: "",
-        options: [g, S]
-      }), _(g)) : s?.type === "date_time" ? (e.push({
+        options: [k, S]
+      }), N(k)) : s?.type === "date_time" ? (e.push({
         label: "",
-        options: [g, S]
-      }), _(G)) : (e.push({
+        options: [k, S]
+      }), N(G)) : (e.push({
         label: "",
-        options: [g, S, G]
-      }), _(S));
-      const r = ae ?? [];
+        options: [k, S, G]
+      }), N(S));
+      const i = ae ?? [];
       J([
         ...e,
-        ...r.map((c) => ({
-          ...c,
+        ...i.map((d) => ({
+          ...d,
           label: Ze.toCapitilize(
-            c.label?.replace(/([A-Z])/g, " $1")?.toLowerCase()
+            d.label?.replace(/([A-Z])/g, " $1")?.toLowerCase()
           )
         }))
-      ]), a = [...e, ...r];
+      ]), a = [...e, ...i];
     }
-    if ((b === d.WHATSAPP || b === d.EMAIL || b === d.MESSAGE || b === d.WEBPUSH || b === d.RCS) && s.updatedValue)
-      if (Me.test(s.updatedValue) && (b === d.WHATSAPP || b === d.RCS) || s.updatedValue.startsWith("{{") && b !== d.WHATSAPP && b !== d.RCS) {
-        const r = Se(
+    if ((b === c.WHATSAPP || b === c.EMAIL || b === c.MESSAGE || b === c.WEBPUSH || b === c.RCS) && s.updatedValue)
+      if (Ye.test(s.updatedValue) && (b === c.WHATSAPP || b === c.RCS) || s.updatedValue.startsWith("{{") && b !== c.WHATSAPP && b !== c.RCS) {
+        const i = Se(
           s,
           a,
           b
         );
-        r.value && _(r);
+        i.value && N(i);
       } else
-        s.type === "date_time" ? (_(G), V(s.updatedValue), M(
+        s.type === "date_time" ? (N(G), V(s.updatedValue), Y(
           s.index ?? 0,
           s.updatedValue
-        )) : s.updatedValue?.startsWith("https") ? (_(g), V(s.updatedValue.split("https://")[1])) : (_(S), V(s.updatedValue));
+        )) : s.updatedValue?.startsWith("https") ? (N(k), V(s.updatedValue.split("https://")[1])) : (N(S), V(s.updatedValue));
   }
-  function Se(e, a, r) {
-    let c = { label: "", value: "" };
-    const n = r === (d.WHATSAPP || d.RCS) ? e.updatedValue.replace("[[", "").replace("]]", "") : e.updatedValue.replace("{{", "").replace("}}", "");
+  function Se(e, a, i) {
+    let d = { label: "", value: "" };
+    const n = i === (c.WHATSAPP || c.RCS) ? e.updatedValue.replace("[[", "").replace("]]", "") : e.updatedValue.replace("{{", "").replace("}}", "");
     if (X) {
       let y = e.updatedValue;
       if (L === U.CHATBOT && u === "BUTTONS") {
-        const o = ce?.filter(
-          (l) => l.placeHolder === e.updatedValue
+        const o = de?.filter(
+          (r) => r.placeHolder === e.updatedValue
         );
         o && o.length > 0 && (y = o[0].label);
       }
-      c = {
+      d = {
         label: y ? y.replace("{{", "").replace("}}", "").trim().replace(".", " ") : "",
         value: e.updatedValue ?? ""
       };
     } else
       a.map((y) => {
         y.options.map((o) => {
-          o.value?.replace("{{", "").replace("}}", "").trim() === n.trim() && (c = o);
+          o.value?.replace("{{", "").replace("}}", "").trim() === n.trim() && (d = o);
         });
       });
-    return c;
+    return d;
   }
   function A(e, a) {
-    const r = e;
-    V(""), _(r), b === d.WHATSAPP || b === d.RCS ? r.value !== "custom_text" && r.value !== "custom_link" && r.value !== "static_expiry" ? (N(r.value ?? "", "string"), M?.(
+    const i = e;
+    V(""), N(i), b === c.WHATSAPP || b === c.RCS ? i.value !== "custom_text" && i.value !== "custom_link" && i.value !== "static_expiry" ? (g(i.value ?? "", "string"), Y?.(
       s.index ?? 0,
-      r.value,
+      i.value,
       !0
-    )) : (M?.(
+    )) : (Y?.(
       s.index ?? 0,
       "",
       !0,
-      r.value
-    ), N(
+      i.value
+    ), g(
       "",
-      r.bikPlaceholderType === "url" ? "link" : "string"
-    )) : r.value !== "custom_text" && r.value !== "custom_link" ? (N(
-      r.value,
-      r.bikPlaceholderType === "url" ? "link" : "string"
-    ), b == d.WEBPUSH && le?.(
+      i.bikPlaceholderType === "url" ? "link" : "string"
+    )) : i.value !== "custom_text" && i.value !== "custom_link" ? (g(
+      i.value,
+      i.bikPlaceholderType === "url" ? "link" : "string"
+    ), b == c.WEBPUSH && re?.(
       s.index ?? 0,
-      r.value
-    )) : (V(""), N("", r.value));
+      i.value
+    )) : (V(""), g("", i.value));
   }
-  function re(e, a) {
+  function ie(e, a) {
     V(a);
-    const r = p?.value === "custom_link" && a ? a.includes("https") ? a : `https://${a}` : a;
-    N(r, e === "static_expiry" ? "string" : e), (b === d.WHATSAPP || b === d.RCS) && M?.(
+    const i = p?.value === "custom_link" && a ? a.includes("https") ? a : `https://${a}` : a;
+    g(i, e === "static_expiry" ? "string" : e), (b === c.WHATSAPP || b === c.RCS) && Y?.(
       s.index ?? 0,
-      r,
+      i,
       e === "custom_link" || L === U.CHATBOT && e === "custom_text",
       e
-    ), b === d.WEBPUSH && le?.(s.index ?? 0, r);
+    ), b === c.WEBPUSH && re?.(s.index ?? 0, i);
   }
-  function N(e, a, r) {
-    const c = a === "custom_link" ? "link" : a === "custom_text" ? "string" : a;
-    if (b !== d.WHATSAPP && b !== d.WEBPUSH && b !== d.RCS) {
-      const n = Ge(C + 1), y = document?.getElementById(
+  function g(e, a, i) {
+    const d = a === "custom_link" ? "link" : a === "custom_text" ? "string" : a;
+    if (b !== c.WHATSAPP && b !== c.WEBPUSH && b !== c.RCS) {
+      const n = Ge(_ + 1), y = document?.getElementById(
         R === "mobile" ? "template_html_mobile" : "template_html_desktop"
-      ), o = b === d.EMAIL ? y?.contentWindow?.document.getElementById(n) : document.getElementById(n);
+      ), o = b === c.EMAIL ? y?.contentWindow?.document.getElementById(n) : document.getElementById(n);
       o && ((a === "custom_text" || a === "custom_link") && !e ? o.textContent = s.variableName : o.textContent = e);
-      const l = O.map(
-        (m, t) => t === C ? { ...m, type: c, updatedValue: e } : m
+      const r = O.map(
+        (m, t) => t === _ ? { ...m, type: d, updatedValue: e } : m
       );
-      B?.(l);
+      B?.(r);
     }
-    if (b === d.WEBPUSH) {
-      const n = O, y = (l) => l?.map(
-        (m, t) => t === C ? {
+    if (b === c.WEBPUSH) {
+      const n = O, y = (r) => r?.map(
+        (m, t) => t === _ ? {
           ...m,
-          type: c,
+          type: d,
           updatedValue: e
         } : m
       ), o = {
         BODY: u === "BODY" ? y(n.body) : n.body,
         TITLE: u === $e.TITLE.toUpperCase() ? y(n.title) : n.title
       };
-      B?.((l) => ({
-        ...l,
+      B?.((r) => ({
+        ...r,
         title: o.TITLE,
         body: o.BODY,
         buttons: n.buttons
       }));
     }
-    if (b === d.WHATSAPP || b === d.RCS) {
+    if (b === c.WHATSAPP || b === c.RCS) {
       if (x != null && x > -1 && Z) {
         const t = {
           ...O
-        }.cards.map((i, k) => u === "BODY" ? {
-          ...i,
-          body: i.body?.map((f, T) => C === T ? {
+        }.cards.map((l, h) => u === "BODY" ? {
+          ...l,
+          body: l.body?.map((f, E) => _ === E ? {
             ...f,
-            type: c,
+            type: d,
             updatedValue: e
           } : f)
         } : u === "TITLE" ? {
-          ...i,
-          title: i.title?.map((f, T) => C === T ? {
+          ...l,
+          title: l.title?.map((f, E) => _ === E ? {
             ...f,
-            type: c,
+            type: d,
             updatedValue: e
           } : f)
         } : u === "BUTTONS" ? {
-          ...i,
-          buttons: i.buttons?.map((f, T) => T === C ? {
+          ...l,
+          buttons: l.buttons?.map((f, E) => E === _ ? {
             ...f,
             buttonVariable: a === "custom_link" ? "((customPlaceholderName))" : e,
             example: f.type === "COPY_CODE" ? e : [e]
           } : f)
-        } : i);
-        B?.((i) => ({
-          ...i,
+        } : l);
+        B?.((l) => ({
+          ...l,
           cards: t
         }));
         return;
       }
       const n = x != null && x > -1 ? O.cards[x] : O;
-      let y = n.body, o = n.title, l = n.header, m = n.buttons;
-      if (u === "BODY" ? y = n.body?.map((t, i) => i === C ? {
+      let y = n.body, o = n.title, r = n.header, m = n.buttons;
+      if (u === "BODY" ? y = n.body?.map((t, l) => l === _ ? {
         ...t,
-        type: c,
+        type: d,
         updatedValue: e
-      } : t) : u === "TITLE" ? o = n?.title?.map((t, i) => i === C ? {
+      } : t) : u === "TITLE" ? o = n?.title?.map((t, l) => l === _ ? {
         ...t,
-        type: c,
+        type: d,
         updatedValue: e
-      } : t) : u === "HEADER" ? l = n.header?.map((t, i) => i === C ? {
+      } : t) : u === "HEADER" ? r = n.header?.map((t, l) => l === _ ? {
         ...t,
-        type: c,
+        type: d,
         updatedValue: e
-      } : t) : u === "BUTTONS" && (m = n.buttons?.map((t, i) => i === C ? {
+      } : t) : u === "BUTTONS" && (m = n.buttons?.map((t, l) => l === _ ? {
         ...t,
         buttonVariable: a === "custom_link" ? "((customPlaceholderName))" : e,
         example: t.type === "COPY_CODE" ? e : [e],
-        queryParams: r ?? []
+        queryParams: i ?? []
       } : t)), x != null && x > -1) {
         const t = $(
           O.cards
         );
         t[x] = {
-          header: l,
+          header: r,
           body: y,
           buttons: m,
           title: o
-        }, B?.((i) => ({
-          ...i,
+        }, B?.((l) => ({
+          ...l,
           cards: t
         }));
       } else
         B?.((t) => ({
           ...t,
-          header: l,
+          header: r,
           body: y,
           buttons: m,
           title: o
         }));
     }
   }
-  W(() => {
-    R && p && v && setTimeout(() => {
-      const e = p?.value === "custom_link" && v ? v.includes("https") ? v : `https://${v}` : v;
-      N(
+  I(() => {
+    R && p && C && setTimeout(() => {
+      const e = p?.value === "custom_link" && C ? C.includes("https") ? C : `https://${C}` : C;
+      g(
         e,
         p.value
       );
     }, 100);
-  }, [R]), W(() => {
+  }, [R]), I(() => {
     !be && p && s.updatedValue && setTimeout(() => {
       const e = p?.value === "custom_link" && s.updatedValue ? s.updatedValue.includes("https") ? s.updatedValue : `https://${s.updatedValue}` : s.updatedValue;
-      N(
+      g(
         e,
         p.value
       ), fe(!0);
     }, 100);
   }, [p]);
   function Ve() {
-    const e = R === "mobile" ? "template_html_mobile" : "template_html_desktop", a = document.getElementById(e), r = (a?.contentWindow?.document?.body?.innerHTML ?? "") + a?.contentWindow?.document.head.innerHTML;
-    b === d.EMAIL && Te?.(r);
+    const e = R === "mobile" ? "template_html_mobile" : "template_html_desktop", a = document.getElementById(e), i = (a?.contentWindow?.document?.body?.innerHTML ?? "") + a?.contentWindow?.document.head.innerHTML;
+    b === c.EMAIL && Ee?.(i);
   }
-  function M(e, a, r, c) {
+  function Y(e, a, i, d) {
     if (x != null && x > -1 && Z) {
       const o = {
-        ...E
-      }.components.map((m) => we(m.type) ? {
+        ...v
+      }.components.map((m) => Me(m.type) ? {
         ...m,
         cards: m.cards?.map((t) => ({
           ...t,
-          components: t.components.map((i) => {
-            if (i.type === "BODY" && u === "BODY")
-              if (i.example?.body_text?.[0]) {
-                const k = [
-                  ...i.example?.body_text?.[0] ?? []
+          components: t.components.map((l) => {
+            if (l.type === "BODY" && u === "BODY")
+              if (l.example?.body_text?.[0]) {
+                const h = [
+                  ...l.example?.body_text?.[0] ?? []
                 ];
-                k[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
+                h[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
                 const f = {
-                  ...i.example,
-                  body_text: [k]
+                  ...l.example,
+                  body_text: [h]
                 };
                 return {
-                  ...i,
+                  ...l,
                   example: f
                 };
               } else
-                return i;
-            if (i.type === "TITLE" && u === "TITLE")
-              if (i.example?.title_text?.[0]) {
-                const k = [
-                  ...i.example?.title_text?.[0] ?? []
+                return l;
+            if (l.type === "TITLE" && u === "TITLE")
+              if (l.example?.title_text?.[0]) {
+                const h = [
+                  ...l.example?.title_text?.[0] ?? []
                 ];
-                k[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
+                h[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
                 const f = {
-                  ...i.example,
-                  title_text: [k]
+                  ...l.example,
+                  title_text: [h]
                 };
                 return {
-                  ...i,
+                  ...l,
                   example: f
                 };
               } else
-                return i;
-            else if (i.type === "BUTTONS" && u === "BUTTONS") {
-              const k = i.buttons?.map(
-                (f, T) => T === e ? {
+                return l;
+            else if (l.type === "BUTTONS" && u === "BUTTONS") {
+              const h = l.buttons?.map(
+                (f, E) => E === e ? {
                   ...f,
                   example: [a]
                 } : f
               );
-              return k ? {
-                ...i,
-                buttons: k
-              } : i;
+              return h ? {
+                ...l,
+                buttons: h
+              } : l;
             } else
-              return i;
+              return l;
           })
         }))
-      } : m), l = $(E);
-      if (r) {
+      } : m), r = $(v);
+      if (i) {
         const m = {
-          ...E
-        }.mapping.cards?.map((t, i) => {
+          ...v
+        }.mapping.cards?.map((t, l) => {
           if (u === "BODY")
             return {
               ...t,
-              body: t.body?.map((k, f) => e === f ? c === "custom_text" ? `((editableVariable${f + 10}))` : a : k)
+              body: t.body?.map((h, f) => e === f ? d === "custom_text" ? `((editableVariable${f + 10}))` : a : h)
             };
           if (u === "TITLE")
             return {
               ...t,
-              title: t?.title?.map((k, f) => e === f ? c === "custom_text" ? `((editableVariable${f + 10}))` : a : k)
+              title: t?.title?.map((h, f) => e === f ? d === "custom_text" ? `((editableVariable${f + 10}))` : a : h)
             };
           if (u === "BUTTONS" && t?.buttons) {
-            let k = -1, f = -1;
-            return E.components[j].cards?.[i].components.forEach((T) => {
-              T.type === "BUTTONS" && T.buttons?.forEach((w, Ue) => {
-                w.type === "URL" && (k++, Ue === e && w.type == "URL" && (f = k));
+            let h = -1, f = -1;
+            return v.components[j].cards?.[l].components.forEach((E) => {
+              E.type === "BUTTONS" && E.buttons?.forEach((M, Ue) => {
+                M.type === "URL" && (h++, Ue === e && M.type == "URL" && (f = h));
               });
             }), {
               ...t,
-              buttons: t.buttons?.map((T, w) => w === f ? c === "custom_link" ? "((customPlaceholderName))" : a : T)
+              buttons: t.buttons?.map((E, M) => M === f ? d === "custom_link" ? "((customPlaceholderName))" : a : E)
             };
           } else
             return t;
         });
-        l.mapping.cards = m;
+        r.mapping.cards = m;
       }
-      l.components = o, H?.(l);
+      r.components = o, H?.(r);
       return;
     }
     const n = x != null && x > -1 ? {
-      components: { ...E }.components[j].cards?.[x].components,
-      mapping: { ...E }.mapping.cards?.[x]
-    } : { ...E }, y = n?.components?.map((o) => {
-      const l = { ...o };
+      components: { ...v }.components[j].cards?.[x].components,
+      mapping: { ...v }.mapping.cards?.[x]
+    } : { ...v }, y = n?.components?.map((o) => {
+      const r = { ...o };
       if (o.type === "BODY" && u === "BODY" && (Array.isArray(o.example?.body_text) || o.example?.body_text?.[0])) {
-        const m = [...l.example?.body_text?.[0] ?? []];
+        const m = [...r.example?.body_text?.[0] ?? []];
         m[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
         const t = {
-          ...l.example,
+          ...r.example,
           body_text: [m]
         };
         return {
-          ...l,
+          ...r,
           example: t
         };
       }
       if (o.type === "TITLE" && u === "TITLE") {
         if (Array.isArray(o.example?.title_text) || o.example?.title_text?.[0]) {
           const m = [
-            ...l.example?.title_text?.[0] ?? []
+            ...r.example?.title_text?.[0] ?? []
           ];
           m[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
           const t = {
-            ...l.example,
+            ...r.example,
             title_text: [m]
           };
           return {
-            ...l,
+            ...r,
             example: t
           };
         }
       } else if (o.type === "HEADER" && u === "HEADER") {
         if (o.example?.header_text) {
-          const m = [...l.example?.header_text ?? []];
+          const m = [...r.example?.header_text ?? []];
           m[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
           const t = {
-            ...l.example,
+            ...r.example,
             header_text: m
           };
           return {
-            ...l,
+            ...r,
             example: t
           };
         }
       } else if (o.type === "BUTTONS" && u === "BUTTONS") {
-        const m = o.buttons?.map((t, i) => i === e ? {
+        const m = o.buttons?.map((t, l) => l === e ? {
           ...t,
           example: t.type === "COPY_CODE" ? a : [a]
         } : t);
         return m ? {
-          ...l,
+          ...r,
           buttons: m
-        } : l;
+        } : r;
       } else if (o.type === "limited_time_offer" && u === "limited_time_offer")
         return {
-          ...l,
+          ...r,
           example: {
-            ...l.example,
+            ...r.example,
             limited_time_offer: a
           }
         };
       return o;
     });
-    if (n.components = y, r) {
+    if (n.components = y, i) {
       if (u === "BODY" && n?.mapping?.body)
         n.mapping = {
           ...n.mapping,
-          body: n.mapping?.body?.map((o, l) => e === l ? c === "custom_text" ? `((editableVariable${l + 10}))` : a : o)
+          body: n.mapping?.body?.map((o, r) => e === r ? d === "custom_text" ? `((editableVariable${r + 10}))` : a : o)
         };
       else if (u === "TITLE" && n?.mapping?.title)
         n.mapping = {
           ...n.mapping,
-          title: n.mapping?.title?.map((o, l) => e === l ? c === "custom_text" ? `((editableVariable${l + 10}))` : a : o)
+          title: n.mapping?.title?.map((o, r) => e === r ? d === "custom_text" ? `((editableVariable${r + 10}))` : a : o)
         };
       else if (u === "HEADER" && n?.mapping?.header)
         n.mapping = {
           ...n.mapping,
-          header: n.mapping.header.map((o, l) => e === l ? c === "custom_text" ? `((editableVariable${l + 20}))` : a : o)
+          header: n.mapping.header.map((o, r) => e === r ? d === "custom_text" ? `((editableVariable${r + 20}))` : a : o)
         };
       else if (u === "BUTTONS" && n?.mapping?.buttons) {
-        let o = -1, l = -1;
+        let o = -1, r = -1;
         y.forEach((m) => {
-          m.type === "BUTTONS" && m.buttons?.forEach((t, i) => {
-            t.type === "URL" && (o++, i === e && t.type == "URL" && (l = o));
+          m.type === "BUTTONS" && m.buttons?.forEach((t, l) => {
+            t.type === "URL" && (o++, l === e && t.type == "URL" && (r = o));
           });
         }), n.mapping = {
           ...n.mapping,
-          buttons: n.mapping.buttons.map((m, t) => t === l ? c === "custom_link" ? "((customPlaceholderName))" : a : m)
+          buttons: n.mapping.buttons.map((m, t) => t === r ? d === "custom_link" ? "((customPlaceholderName))" : a : m)
         };
       }
     }
-    if (x != null && x > -1 && E) {
-      const o = $(E);
+    if (x != null && x > -1 && v) {
+      const o = $(v);
       o.components[j].cards[x].components = n.components, o.mapping.cards[x] = n.mapping, H?.(o);
     } else
       H?.({ ...n });
@@ -537,22 +537,22 @@ const Xe = K.div`
     });
   }, Le = () => {
     let e = Array.isArray(ee) ? [...ee] : [];
-    const a = (r, c, n) => {
+    const a = (i, d, n) => {
       const y = qe({
         variableList: e,
-        categoryDisplayName: r,
-        variableDisplayName: c,
+        categoryDisplayName: i,
+        variableDisplayName: d,
         variableValue: n
       });
       Array.isArray(y) && (e = y);
     };
     L === U.CHATBOT && z !== q.URL && u !== "limited_time_offer" && a("Custom Variables", "Custom Text", "{{custom.text}}"), z === q.URL && L === U.CHATBOT ? a("Custom Variables", "Custom URL", "{{custom.url}}") : u === "limited_time_offer" ? a("Static Variables", "Static Expiry", "{{static.expiry}}") : z === q.COPY_CODE && a("Custom Variables", "Custom Text", "{{custom.text}}"), xe(e);
   };
-  function le(e, a) {
-    const r = $(E), c = u.toLocaleLowerCase();
-    r.webpushBroadcastConfig?.[c] && (r.webpushBroadcastConfig[c][e] = a), H?.({ ...r });
+  function re(e, a) {
+    const i = $(v), d = u.toLocaleLowerCase();
+    i.webpushBroadcastConfig?.[d] && (i.webpushBroadcastConfig[d][e] = a), H?.({ ...i });
   }
-  return /* @__PURE__ */ h(
+  return /* @__PURE__ */ T(
     Xe,
     {
       channel: b,
@@ -560,7 +560,7 @@ const Xe = K.div`
       onMouseEnter: () => Q(!0),
       onMouseLeave: () => Q(!1),
       children: [
-        /* @__PURE__ */ h("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ h(
+        /* @__PURE__ */ T("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ T(
           ze,
           {
             style: {
@@ -575,17 +575,17 @@ const Xe = K.div`
           void 0,
           !0,
           {
-            fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1160,
             columnNumber: 5
           },
           void 0
         ) }, void 0, !1, {
-          fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+          fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
           lineNumber: 1159,
           columnNumber: 4
         }, void 0),
-        /* @__PURE__ */ h("div", { style: { marginBottom: 12 }, children: X ? /* @__PURE__ */ h(
+        /* @__PURE__ */ T("div", { style: { marginBottom: 12 }, children: X ? /* @__PURE__ */ T(
           "div",
           {
             style: {
@@ -597,22 +597,22 @@ const Xe = K.div`
               backgroundColor: s?.type === "date_time" && oe ? D.background.base : void 0
             },
             children: [
-              /* @__PURE__ */ h(Fe, { numberOfLines: 1, children: L === U.CHATBOT ? ["static_expiry", "custom_text", "custom_link"].includes(
+              /* @__PURE__ */ T(Fe, { numberOfLines: 1, children: L === U.CHATBOT ? ["static_expiry", "custom_text", "custom_link"].includes(
                 p?.value ?? ""
-              ) ? p?.label : p?.value : Ye(p?.label ?? "", 20) }, void 0, !1, {
-                fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+              ) ? p?.label : p?.value : We(p?.label ?? "", 20) }, void 0, !1, {
+                fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                 lineNumber: 1189,
                 columnNumber: 7
               }, void 0),
-              Y || s?.type === "date_time" && oe ? /* @__PURE__ */ h(De, {}, void 0, !1, {
-                fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+              W || s?.type === "date_time" && oe ? /* @__PURE__ */ T(De, {}, void 0, !1, {
+                fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                 lineNumber: 1200,
                 columnNumber: 8
-              }, void 0) : /* @__PURE__ */ h(
+              }, void 0) : /* @__PURE__ */ T(
                 Be,
                 {
                   onClick: () => {
-                    Le(), he(() => Oe), ve(!0);
+                    Le(), Te(() => Oe), Ce(!0);
                   },
                   width: 24,
                   height: 24,
@@ -621,7 +621,7 @@ const Xe = K.div`
                 void 0,
                 !1,
                 {
-                  fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+                  fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                   lineNumber: 1202,
                   columnNumber: 8
                 },
@@ -632,16 +632,16 @@ const Xe = K.div`
           void 0,
           !0,
           {
-            fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1174,
             columnNumber: 6
           },
           void 0
-        ) : /* @__PURE__ */ h(
+        ) : /* @__PURE__ */ T(
           Re,
           {
-            disabled: Y,
-            options: de,
+            disabled: W,
+            options: ce,
             isSearchable: !1,
             onSelect: A,
             defaultOptions: p ? [{ ...p, selected: !0 }] : []
@@ -649,30 +649,30 @@ const Xe = K.div`
           void 0,
           !1,
           {
-            fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1215,
             columnNumber: 6
           },
           void 0
         ) }, void 0, !1, {
-          fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+          fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
           lineNumber: 1172,
           columnNumber: 4
         }, void 0),
-        (p?.value === "custom_text" || p?.value === "custom_link") && /* @__PURE__ */ h(
+        (p?.value === "custom_text" || p?.value === "custom_link") && /* @__PURE__ */ T(
           He,
           {
-            state: Y ? "disabled" : "none",
+            state: W ? "disabled" : "none",
             labelText: p?.value === "custom_text" ? "Custom text value" : p?.value === "custom_link" ? "Custom URL value" : "",
-            id: `variable-value-${p?.value}-${C}`,
-            value: v,
-            errorMessage: te && ne?.buttons?.includes(s?.index ?? -1) ? !v || v.trim().length === 0 ? "Required field" : p.value === "custom_link" && (!ye.test(`https://${v.trim()}`) || v.trim().length === 0) ? "Enter valid URL" : p.value !== "custom_link" && v.length > 30 ? "Length cannot be more than 30" : u === "BUTTONS" && p.value !== "custom_link" ? "Enter valid alpha numeric code" : "" : "",
-            maxCharLimit: ie || (p?.value === "custom_link" ? 2e3 : u === "BUTTONS" ? 15 : 30),
+            id: `variable-value-${p?.value}-${_}`,
+            value: C,
+            errorMessage: te && ne?.buttons?.includes(s?.index ?? -1) ? !C || C.trim().length === 0 ? "Required field" : p.value === "custom_link" && (!ye.test(`https://${C.trim()}`) || C.trim().length === 0) ? "Enter valid URL" : p.value !== "custom_link" && C.length > 30 ? "Length cannot be more than 30" : u === "BUTTONS" && p.value !== "custom_link" ? "Enter valid alpha numeric code" : "" : "",
+            maxCharLimit: le || (p?.value === "custom_link" ? 2e3 : u === "BUTTONS" ? 15 : 30),
             noKeyDownChange: !0,
             prefixText: p?.value === "custom_link" ? "https://" : "",
             placeholder: s.type === "link" || p.value === "custom_link" ? "Enter custom URL here" : "Enter custom text here",
             onChangeText: (e) => {
-              re(
+              ie(
                 p.value,
                 e
               );
@@ -681,14 +681,14 @@ const Xe = K.div`
           void 0,
           !1,
           {
-            fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1234,
             columnNumber: 5
           },
           void 0
         ),
-        p?.value === "static_expiry" && /* @__PURE__ */ h("div", { style: { position: "relative" }, children: [
-          (Y || _e) && /* @__PURE__ */ h(
+        p?.value === "static_expiry" && /* @__PURE__ */ T("div", { style: { position: "relative" }, children: [
+          (W || Ne) && /* @__PURE__ */ T(
             Qe,
             {
               onClick: (e) => e.preventDefault(),
@@ -697,13 +697,13 @@ const Xe = K.div`
                 justifyContent: "space-between"
               },
               children: [
-                /* @__PURE__ */ h(me, {}, void 0, !1, {
-                  fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+                /* @__PURE__ */ T(me, {}, void 0, !1, {
+                  fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                   lineNumber: 1302,
                   columnNumber: 8
                 }, void 0),
-                /* @__PURE__ */ h(me, {}, void 0, !1, {
-                  fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+                /* @__PURE__ */ T(me, {}, void 0, !1, {
+                  fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                   lineNumber: 1303,
                   columnNumber: 8
                 }, void 0)
@@ -712,45 +712,45 @@ const Xe = K.div`
             void 0,
             !0,
             {
-              fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+              fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
               lineNumber: 1295,
               columnNumber: 7
             },
             void 0
           ),
-          /* @__PURE__ */ h(
-            Ie,
+          /* @__PURE__ */ T(
+            we,
             {
               placement: "auto",
-              time: v ? se(new Date(v), "hh:mm a") : se(/* @__PURE__ */ new Date(), "hh:mm a"),
-              date: v ? new Date(v) : /* @__PURE__ */ new Date(),
+              time: C ? se(new Date(C), "hh:mm a") : se(/* @__PURE__ */ new Date(), "hh:mm a"),
+              date: C ? new Date(C) : /* @__PURE__ */ new Date(),
               minDate: /* @__PURE__ */ new Date(),
               error: "",
               setError: () => {
               },
               onChange: (e) => {
-                re("static_expiry", e.toISOString());
+                ie("static_expiry", e.toISOString());
               }
             },
             void 0,
             !1,
             {
-              fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+              fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
               lineNumber: 1307,
               columnNumber: 6
             },
             void 0
           )
         ] }, void 0, !0, {
-          fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+          fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
           lineNumber: 1293,
           columnNumber: 5
         }, void 0),
-        p?.value === "static_expiry" && Ne && /* @__PURE__ */ h("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ h(
+        p?.value === "static_expiry" && ge && /* @__PURE__ */ T("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ T(
           Pe,
           {
             containerStyle: { padding: "4px 8px" },
-            icon: () => /* @__PURE__ */ h(
+            icon: () => /* @__PURE__ */ T(
               Ae,
               {
                 width: 16,
@@ -760,43 +760,43 @@ const Xe = K.div`
               void 0,
               !1,
               {
-                fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+                fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                 lineNumber: 1334,
                 columnNumber: 9
               },
               void 0
             ),
-            type: We.NEUTRAL,
+            type: Ie.NEUTRAL,
             text: `Please use the same expiration code that you applied when creating
 the code on Shopify`
           },
           void 0,
           !1,
           {
-            fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1331,
             columnNumber: 7
           },
           void 0
         ) }, void 0, !1, {
-          fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+          fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
           lineNumber: 1330,
           columnNumber: 6
         }, void 0),
-        s.type === "link" && p?.value !== "custom_link" && !Z && !Ee && L === U.CHATBOT && /* @__PURE__ */ h(
+        s.type === "link" && p?.value !== "custom_link" && !Z && !ve && L === U.CHATBOT && /* @__PURE__ */ T(
           Ke,
           {
             isError: ne?.buttons?.includes(s?.index ?? -1) ?? !1,
             params: s.queryParams ?? [],
             onChange: (e) => {
-              N(s.updatedValue, "link", e);
+              g(s.updatedValue, "link", e);
             },
             variableValue: s.updatedValue
           },
           void 0,
           !1,
           {
-            fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1352,
             columnNumber: 6
           },
@@ -807,7 +807,7 @@ the code on Shopify`
     void 0,
     !0,
     {
-      fileName: "/Users/himanshusrivastava/Desktop/Work/bik-component-library/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+      fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
       lineNumber: 1153,
       columnNumber: 3
     },
@@ -816,6 +816,6 @@ the code on Shopify`
 };
 export {
   Xe as Container,
-  _t as default
+  Nt as default
 };
 //# sourceMappingURL=VariableConnector.js.map