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

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

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