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

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

@@ -1,32 +1,32 @@
-import { jsxDEV as T, Fragment as De } from "react/jsx-dev-runtime";
+import { jsxDEV as y, Fragment as Ue } 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 I } from "react";
+import w from "lodash/cloneDeep";
+import { useState as I, useEffect as D } from "react";
 import K from "styled-components";
-import { Alert as Pe } from "../../alerts/Alert.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 { 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 { 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";
-import Ze from "../../../utils/StringUtils.js";
-import { COLORS as D } from "../../../constants/Theme.js";
-import { useTemplateModalContext as je } from "../context/templateModalContext.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 { 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: ${(w) => w.focused && w.channel === c.EMAIL ? D.background.warning.light : "transparent"};
+	background: ${(R) => R.focused && R.channel === d.EMAIL ? U.background.warning.light : "transparent"};
 	border-radius: 4px;
 	padding: 8px 10px;
 `, Qe = K.div`
@@ -41,16 +41,16 @@ const Xe = K.div`
 	height: 100%;
 	width: 48%;
 	background: rgba(0, 0, 0, 0.1);
-`, k = {
+`, g = {
   value: "custom_link",
   label: "Custom URL"
-}, S = {
+}, P = {
   value: "custom_text",
   label: "Custom text"
 }, G = {
   value: "static_expiry",
   label: "Static Expiry"
-}, Nt = (w) => {
+}, Nt = (R) => {
   const {
     onFocus: pe,
     variable: s,
@@ -58,198 +58,198 @@ const Xe = K.div`
     showVariableModal: X,
     setShowDiscountCheckBox: ue,
     componentType: u,
-    CTAoptions: de,
-    buttonType: z
-  } = 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()@:%_\+.~#?&\/=]*)$/, {
+    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()@:%_\+.~#?&\/=]*)$/, {
     variableList: ee,
-    setVariableList: xe,
-    setVariableCallback: Te,
-    setShowVariablePicker: Ce,
-    device: R,
+    setVariableList: he,
+    setVariableCallback: ye,
+    setShowVariablePicker: Te,
+    device: H,
     channel: b,
     isError: te,
-    originalVariableList: O,
+    originalVariableList: V,
     template: v,
-    templateSelectionTriggered: he,
-    setTemplate: H,
+    templateSelectionTriggered: Ce,
+    setTemplate: j,
     setDisplayContent: Ee,
     setOriginalVariableList: B,
     globalNormalizedPlaceholders: ae,
     enabledCustomText: _e,
-    pod: L,
-    selectedCarouselIndex: x,
-    isProductCarouselType: Z,
+    pod: O,
+    selectedCarouselIndex: h,
+    isProductCarouselType: F,
     isWhatsappCarousel: ve,
     disableEditVariable: W,
     disableEditExpiry: oe,
     templateErrorIndexes: ne,
     maxCharLimit: le,
     disableDatePicker: Ne,
-    showDiscountCodeExpiryInfo: ge,
-    cardIndex: j = 1
-  } = je();
-  I(() => {
-    F && pe?.();
-  }, [F]), I(() => {
-    Ve();
-  }, [he]), I(() => {
-    ke();
-  }, [x]);
-  function ke() {
+    showDiscountCodeExpiryInfo: ke,
+    cardIndex: Z = 1
+  } = Ze();
+  D(() => {
+    z && pe?.();
+  }, [z]), D(() => {
+    Se();
+  }, [Ce]), D(() => {
+    ge();
+  }, [h]);
+  function ge() {
     const e = [];
     let a = [];
-    if (b === c.MESSAGE && !_e) {
-      const i = ae ?? [];
+    if (b === d.MESSAGE && !_e) {
+      const r = ae ?? [];
       J([
         {
           label: "",
-          options: [S, k]
+          options: [P, g]
         },
-        ...i
+        ...r
       ]), a = [
         {
           label: "",
-          options: [S, k]
+          options: [P, g]
         },
-        ...i
+        ...r
       ];
     } else {
       s?.type === "link" ? (e.push({
         label: "",
-        options: [k, S]
-      }), N(k)) : s?.type === "date_time" ? (e.push({
+        options: [g, P]
+      }), N(g)) : s?.type === "date_time" ? (e.push({
         label: "",
-        options: [k, S]
+        options: [g, P]
       }), N(G)) : (e.push({
         label: "",
-        options: [k, S, G]
-      }), N(S));
-      const i = ae ?? [];
+        options: [g, P, G]
+      }), N(P));
+      const r = ae ?? [];
       J([
         ...e,
-        ...i.map((d) => ({
-          ...d,
-          label: Ze.toCapitilize(
-            d.label?.replace(/([A-Z])/g, " $1")?.toLowerCase()
+        ...r.map((c) => ({
+          ...c,
+          label: Fe.toCapitilize(
+            c.label?.replace(/([A-Z])/g, " $1")?.toLowerCase()
           )
         }))
-      ]), a = [...e, ...i];
+      ]), a = [...e, ...r];
     }
-    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(
+    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(
           s,
           a,
           b
         );
-        i.value && N(i);
+        r.value && N(r);
       } else
-        s.type === "date_time" ? (N(G), V(s.updatedValue), Y(
+        s.type === "date_time" ? (N(G), S(s.updatedValue), Y(
           s.index ?? 0,
           s.updatedValue
-        )) : s.updatedValue?.startsWith("https") ? (N(k), V(s.updatedValue.split("https://")[1])) : (N(S), V(s.updatedValue));
+        )) : s.updatedValue?.startsWith("https") ? (N(g), S(s.updatedValue.split("https://")[1])) : (N(P), S(s.updatedValue));
   }
-  function Se(e, a, i) {
-    let d = { label: "", value: "" };
-    const n = i === (c.WHATSAPP || c.RCS) ? e.updatedValue.replace("[[", "").replace("]]", "") : e.updatedValue.replace("{{", "").replace("}}", "");
+  function Pe(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 y = e.updatedValue;
-      if (L === U.CHATBOT && u === "BUTTONS") {
-        const o = de?.filter(
-          (r) => r.placeHolder === e.updatedValue
+      let x = e.updatedValue;
+      if (O === L.CHATBOT && u === "BUTTONS") {
+        const o = ce?.filter(
+          (i) => i.placeHolder === e.updatedValue
         );
-        o && o.length > 0 && (y = o[0].label);
+        o && o.length > 0 && (x = o[0].label);
       }
-      d = {
-        label: y ? y.replace("{{", "").replace("}}", "").trim().replace(".", " ") : "",
+      c = {
+        label: x ? x.replace("{{", "").replace("}}", "").trim().replace(".", " ") : "",
         value: e.updatedValue ?? ""
       };
     } else
-      a.map((y) => {
-        y.options.map((o) => {
-          o.value?.replace("{{", "").replace("}}", "").trim() === n.trim() && (d = o);
+      a.map((x) => {
+        x.options.map((o) => {
+          o.value?.replace("{{", "").replace("}}", "").trim() === n.trim() && (c = o);
         });
       });
-    return d;
+    return c;
   }
   function A(e, a) {
-    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?.(
+    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?.(
       s.index ?? 0,
-      i.value,
+      r.value,
       !0
     )) : (Y?.(
       s.index ?? 0,
       "",
       !0,
-      i.value
-    ), g(
+      r.value
+    ), k(
       "",
-      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?.(
+      r.bikPlaceholderType === "url" ? "link" : "string"
+    )) : r.value !== "custom_text" && r.value !== "custom_link" ? (k(
+      r.value,
+      r.bikPlaceholderType === "url" ? "link" : "string"
+    ), b == d.WEBPUSH && ie?.(
       s.index ?? 0,
-      i.value
-    )) : (V(""), g("", i.value));
+      r.value
+    )) : (S(""), k("", r.value));
   }
-  function ie(e, a) {
-    V(a);
-    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?.(
+  function re(e, a) {
+    S(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?.(
       s.index ?? 0,
-      i,
-      e === "custom_link" || L === U.CHATBOT && e === "custom_text",
+      r,
+      e === "custom_link" || O === L.CHATBOT && e === "custom_text",
       e
-    ), b === c.WEBPUSH && re?.(s.index ?? 0, i);
+    ), b === d.WEBPUSH && ie?.(s.index ?? 0, r);
   }
-  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 === c.EMAIL ? y?.contentWindow?.document.getElementById(n) : document.getElementById(n);
+  function k(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);
       o && ((a === "custom_text" || a === "custom_link") && !e ? o.textContent = s.variableName : o.textContent = e);
-      const r = O.map(
-        (m, t) => t === _ ? { ...m, type: d, updatedValue: e } : m
+      const i = V.map(
+        (m, t) => t === _ ? { ...m, type: c, updatedValue: e } : m
       );
-      B?.(r);
+      B?.(i);
     }
-    if (b === c.WEBPUSH) {
-      const n = O, y = (r) => r?.map(
+    if (b === d.WEBPUSH) {
+      const n = V, x = (i) => i?.map(
         (m, t) => t === _ ? {
           ...m,
-          type: d,
+          type: c,
           updatedValue: e
         } : m
       ), o = {
-        BODY: u === "BODY" ? y(n.body) : n.body,
-        TITLE: u === $e.TITLE.toUpperCase() ? y(n.title) : n.title
+        BODY: u === "BODY" ? x(n.body) : n.body,
+        TITLE: u === we.TITLE.toUpperCase() ? x(n.title) : n.title
       };
-      B?.((r) => ({
-        ...r,
+      B?.((i) => ({
+        ...i,
         title: o.TITLE,
         body: o.BODY,
         buttons: n.buttons
       }));
     }
-    if (b === c.WHATSAPP || b === c.RCS) {
-      if (x != null && x > -1 && Z) {
+    if (b === d.WHATSAPP || b === d.RCS) {
+      if (h != null && h > -1 && F) {
         const t = {
-          ...O
-        }.cards.map((l, h) => u === "BODY" ? {
+          ...V
+        }.cards.map((l, C) => u === "BODY" ? {
           ...l,
           body: l.body?.map((f, E) => _ === E ? {
             ...f,
-            type: d,
+            type: c,
             updatedValue: e
           } : f)
         } : u === "TITLE" ? {
           ...l,
           title: l.title?.map((f, E) => _ === E ? {
             ...f,
-            type: d,
+            type: c,
             updatedValue: e
           } : f)
         } : u === "BUTTONS" ? {
@@ -266,32 +266,32 @@ const Xe = K.div`
         }));
         return;
       }
-      const n = x != null && x > -1 ? O.cards[x] : O;
-      let y = n.body, o = n.title, r = n.header, m = n.buttons;
-      if (u === "BODY" ? y = n.body?.map((t, l) => l === _ ? {
+      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 === _ ? {
         ...t,
-        type: d,
+        type: c,
         updatedValue: e
       } : t) : u === "TITLE" ? o = n?.title?.map((t, l) => l === _ ? {
         ...t,
-        type: d,
+        type: c,
         updatedValue: e
-      } : t) : u === "HEADER" ? r = n.header?.map((t, l) => l === _ ? {
+      } : t) : u === "HEADER" ? i = n.header?.map((t, l) => l === _ ? {
         ...t,
-        type: d,
+        type: c,
         updatedValue: e
       } : 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: i ?? []
-      } : t)), x != null && x > -1) {
-        const t = $(
-          O.cards
+        queryParams: r ?? []
+      } : t)), h != null && h > -1) {
+        const t = w(
+          V.cards
         );
-        t[x] = {
-          header: r,
-          body: y,
+        t[h] = {
+          header: i,
+          body: x,
           buttons: m,
           title: o
         }, B?.((l) => ({
@@ -301,36 +301,36 @@ const Xe = K.div`
       } else
         B?.((t) => ({
           ...t,
-          header: r,
-          body: y,
+          header: i,
+          body: x,
           buttons: m,
           title: o
         }));
     }
   }
-  I(() => {
-    R && p && C && setTimeout(() => {
-      const e = p?.value === "custom_link" && C ? C.includes("https") ? C : `https://${C}` : C;
-      g(
+  D(() => {
+    H && p && T && setTimeout(() => {
+      const e = p?.value === "custom_link" && T ? T.includes("https") ? T : `https://${T}` : T;
+      k(
         e,
         p.value
       );
     }, 100);
-  }, [R]), I(() => {
+  }, [H]), D(() => {
     !be && p && s.updatedValue && setTimeout(() => {
       const e = p?.value === "custom_link" && s.updatedValue ? s.updatedValue.includes("https") ? s.updatedValue : `https://${s.updatedValue}` : s.updatedValue;
-      g(
+      k(
         e,
         p.value
       ), fe(!0);
     }, 100);
   }, [p]);
-  function Ve() {
-    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 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 Y(e, a, i, d) {
-    if (x != null && x > -1 && Z) {
+  function Y(e, a, r, c) {
+    if (h != null && h > -1 && F) {
       const o = {
         ...v
       }.components.map((m) => Me(m.type) ? {
@@ -340,13 +340,13 @@ const Xe = K.div`
           components: t.components.map((l) => {
             if (l.type === "BODY" && u === "BODY")
               if (l.example?.body_text?.[0]) {
-                const h = [
+                const C = [
                   ...l.example?.body_text?.[0] ?? []
                 ];
-                h[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
+                C[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
                 const f = {
                   ...l.example,
-                  body_text: [h]
+                  body_text: [C]
                 };
                 return {
                   ...l,
@@ -356,13 +356,13 @@ const Xe = K.div`
                 return l;
             if (l.type === "TITLE" && u === "TITLE")
               if (l.example?.title_text?.[0]) {
-                const h = [
+                const C = [
                   ...l.example?.title_text?.[0] ?? []
                 ];
-                h[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
+                C[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
                 const f = {
                   ...l.example,
-                  title_text: [h]
+                  title_text: [C]
                 };
                 return {
                   ...l,
@@ -371,95 +371,95 @@ const Xe = K.div`
               } else
                 return l;
             else if (l.type === "BUTTONS" && u === "BUTTONS") {
-              const h = l.buttons?.map(
+              const C = l.buttons?.map(
                 (f, E) => E === e ? {
                   ...f,
                   example: [a]
                 } : f
               );
-              return h ? {
+              return C ? {
                 ...l,
-                buttons: h
+                buttons: C
               } : l;
             } else
               return l;
           })
         }))
-      } : m), r = $(v);
-      if (i) {
+      } : m), i = w(v);
+      if (r) {
         const m = {
           ...v
         }.mapping.cards?.map((t, l) => {
           if (u === "BODY")
             return {
               ...t,
-              body: t.body?.map((h, f) => e === f ? d === "custom_text" ? `((editableVariable${f + 10}))` : a : h)
+              body: t.body?.map((C, f) => e === f ? c === "custom_text" ? `((editableVariable${f + 10}))` : a : C)
             };
           if (u === "TITLE")
             return {
               ...t,
-              title: t?.title?.map((h, f) => e === f ? d === "custom_text" ? `((editableVariable${f + 10}))` : a : h)
+              title: t?.title?.map((C, f) => e === f ? c === "custom_text" ? `((editableVariable${f + 10}))` : a : C)
             };
           if (u === "BUTTONS" && t?.buttons) {
-            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));
+            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));
               });
             }), {
               ...t,
-              buttons: t.buttons?.map((E, M) => M === f ? d === "custom_link" ? "((customPlaceholderName))" : a : E)
+              buttons: t.buttons?.map((E, M) => M === f ? c === "custom_link" ? "((customPlaceholderName))" : a : E)
             };
           } else
             return t;
         });
-        r.mapping.cards = m;
+        i.mapping.cards = m;
       }
-      r.components = o, H?.(r);
+      i.components = o, j?.(i);
       return;
     }
-    const n = x != null && x > -1 ? {
-      components: { ...v }.components[j].cards?.[x].components,
-      mapping: { ...v }.mapping.cards?.[x]
-    } : { ...v }, y = n?.components?.map((o) => {
-      const r = { ...o };
+    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 };
       if (o.type === "BODY" && u === "BODY" && (Array.isArray(o.example?.body_text) || o.example?.body_text?.[0])) {
-        const m = [...r.example?.body_text?.[0] ?? []];
+        const m = [...i.example?.body_text?.[0] ?? []];
         m[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
         const t = {
-          ...r.example,
+          ...i.example,
           body_text: [m]
         };
         return {
-          ...r,
+          ...i,
           example: t
         };
       }
       if (o.type === "TITLE" && u === "TITLE") {
         if (Array.isArray(o.example?.title_text) || o.example?.title_text?.[0]) {
           const m = [
-            ...r.example?.title_text?.[0] ?? []
+            ...i.example?.title_text?.[0] ?? []
           ];
           m[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
           const t = {
-            ...r.example,
+            ...i.example,
             title_text: [m]
           };
           return {
-            ...r,
+            ...i,
             example: t
           };
         }
       } else if (o.type === "HEADER" && u === "HEADER") {
         if (o.example?.header_text) {
-          const m = [...r.example?.header_text ?? []];
+          const m = [...i.example?.header_text ?? []];
           m[e] = a.replace("{{", "").replace("}}", "").replace("((", "").replace("))", "");
           const t = {
-            ...r.example,
+            ...i.example,
             header_text: m
           };
           return {
-            ...r,
+            ...i,
             example: t
           };
         }
@@ -469,54 +469,54 @@ const Xe = K.div`
           example: t.type === "COPY_CODE" ? a : [a]
         } : t);
         return m ? {
-          ...r,
+          ...i,
           buttons: m
-        } : r;
+        } : i;
       } else if (o.type === "limited_time_offer" && u === "limited_time_offer")
         return {
-          ...r,
+          ...i,
           example: {
-            ...r.example,
+            ...i.example,
             limited_time_offer: a
           }
         };
       return o;
     });
-    if (n.components = y, i) {
+    if (n.components = x, r) {
       if (u === "BODY" && n?.mapping?.body)
         n.mapping = {
           ...n.mapping,
-          body: n.mapping?.body?.map((o, r) => e === r ? d === "custom_text" ? `((editableVariable${r + 10}))` : a : o)
+          body: n.mapping?.body?.map((o, i) => e === i ? c === "custom_text" ? `((editableVariable${i + 10}))` : a : o)
         };
       else if (u === "TITLE" && n?.mapping?.title)
         n.mapping = {
           ...n.mapping,
-          title: n.mapping?.title?.map((o, r) => e === r ? d === "custom_text" ? `((editableVariable${r + 10}))` : a : o)
+          title: n.mapping?.title?.map((o, i) => e === i ? c === "custom_text" ? `((editableVariable${i + 10}))` : a : o)
         };
       else if (u === "HEADER" && n?.mapping?.header)
         n.mapping = {
           ...n.mapping,
-          header: n.mapping.header.map((o, r) => e === r ? d === "custom_text" ? `((editableVariable${r + 20}))` : a : o)
+          header: n.mapping.header.map((o, i) => e === i ? c === "custom_text" ? `((editableVariable${i + 20}))` : a : o)
         };
       else if (u === "BUTTONS" && n?.mapping?.buttons) {
-        let o = -1, r = -1;
-        y.forEach((m) => {
+        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" && (r = o));
+            t.type === "URL" && (o++, l === e && t.type == "URL" && (i = o));
           });
         }), n.mapping = {
           ...n.mapping,
-          buttons: n.mapping.buttons.map((m, t) => t === r ? d === "custom_link" ? "((customPlaceholderName))" : a : m)
+          buttons: n.mapping.buttons.map((m, t) => t === i ? c === "custom_link" ? "((customPlaceholderName))" : a : m)
         };
       }
     }
-    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);
+    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);
     } else
-      H?.({ ...n });
+      j?.({ ...n });
   }
-  const Oe = (e) => {
+  const Ve = (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"
     });
-  }, Le = () => {
+  }, Oe = () => {
     let e = Array.isArray(ee) ? [...ee] : [];
-    const a = (i, d, n) => {
-      const y = qe({
+    const a = (r, c, n) => {
+      const x = qe({
         variableList: e,
-        categoryDisplayName: i,
-        variableDisplayName: d,
+        categoryDisplayName: r,
+        variableDisplayName: c,
         variableValue: n
       });
-      Array.isArray(y) && (e = y);
+      Array.isArray(x) && (e = x);
     };
-    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);
+    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);
   };
-  function re(e, a) {
-    const i = $(v), d = u.toLocaleLowerCase();
-    i.webpushBroadcastConfig?.[d] && (i.webpushBroadcastConfig[d][e] = a), H?.({ ...i });
+  function ie(e, a) {
+    const r = w(v), c = u.toLocaleLowerCase();
+    r.webpushBroadcastConfig?.[c] && (r.webpushBroadcastConfig[c][e] = a), j?.({ ...r });
   }
-  return /* @__PURE__ */ T(
+  return /* @__PURE__ */ y(
     Xe,
     {
       channel: b,
-      focused: F,
+      focused: z,
       onMouseEnter: () => Q(!0),
       onMouseLeave: () => Q(!1),
       children: [
-        /* @__PURE__ */ T("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ T(
-          ze,
+        /* @__PURE__ */ y("div", { style: { marginBottom: 8 }, children: /* @__PURE__ */ y(
+          $e,
           {
             style: {
-              color: te && !p ? D.content.negative : D.content.primary
+              color: te && !p ? U.content.negative : U.content.primary
             },
             children: [
               s.variableName?.replace("{{", "").replace("}}", ""),
@@ -575,17 +575,17 @@ const Xe = K.div`
           void 0,
           !0,
           {
-            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1160,
             columnNumber: 5
           },
           void 0
         ) }, void 0, !1, {
-          fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+          fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
           lineNumber: 1159,
           columnNumber: 4
         }, void 0),
-        /* @__PURE__ */ T("div", { style: { marginBottom: 12 }, children: X ? /* @__PURE__ */ T(
+        /* @__PURE__ */ y("div", { style: { marginBottom: 12 }, children: X ? /* @__PURE__ */ y(
           "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 ? D.background.base : void 0
+              backgroundColor: s?.type === "date_time" && oe ? U.background.base : void 0
             },
             children: [
-              /* @__PURE__ */ T(Fe, { numberOfLines: 1, children: L === U.CHATBOT ? ["static_expiry", "custom_text", "custom_link"].includes(
+              /* @__PURE__ */ y(ze, { numberOfLines: 1, children: O === L.CHATBOT ? ["static_expiry", "custom_text", "custom_link"].includes(
                 p?.value ?? ""
               ) ? 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",
+                fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                 lineNumber: 1189,
                 columnNumber: 7
               }, void 0),
-              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",
+              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",
                 lineNumber: 1200,
                 columnNumber: 8
-              }, void 0) : /* @__PURE__ */ T(
+              }, void 0) : /* @__PURE__ */ y(
                 Be,
                 {
                   onClick: () => {
-                    Le(), Te(() => Oe), Ce(!0);
+                    Oe(), ye(() => Ve), Te(!0);
                   },
                   width: 24,
                   height: 24,
-                  color: D.content.primary
+                  color: U.content.primary
                 },
                 void 0,
                 !1,
                 {
-                  fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+                  fileName: "/Users/prateekchouhan/Projects/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/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1174,
             columnNumber: 6
           },
           void 0
-        ) : /* @__PURE__ */ T(
-          Re,
+        ) : /* @__PURE__ */ y(
+          He,
           {
             disabled: W,
-            options: ce,
+            options: de,
             isSearchable: !1,
             onSelect: A,
             defaultOptions: p ? [{ ...p, selected: !0 }] : []
@@ -649,30 +649,30 @@ const Xe = K.div`
           void 0,
           !1,
           {
-            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1215,
             columnNumber: 6
           },
           void 0
         ) }, void 0, !1, {
-          fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+          fileName: "/Users/prateekchouhan/Projects/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__ */ T(
-          He,
+        (p?.value === "custom_text" || p?.value === "custom_link") && /* @__PURE__ */ y(
+          je,
           {
             state: W ? "disabled" : "none",
             labelText: p?.value === "custom_text" ? "Custom text value" : p?.value === "custom_link" ? "Custom URL value" : "",
             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" : "" : "",
+            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),
             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) => {
-              ie(
+              re(
                 p.value,
                 e
               );
@@ -681,14 +681,14 @@ const Xe = K.div`
           void 0,
           !1,
           {
-            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1234,
             columnNumber: 5
           },
           void 0
         ),
-        p?.value === "static_expiry" && /* @__PURE__ */ T("div", { style: { position: "relative" }, children: [
-          (W || Ne) && /* @__PURE__ */ T(
+        p?.value === "static_expiry" && /* @__PURE__ */ y("div", { style: { position: "relative" }, children: [
+          (W || Ne) && /* @__PURE__ */ y(
             Qe,
             {
               onClick: (e) => e.preventDefault(),
@@ -697,13 +697,13 @@ const Xe = K.div`
                 justifyContent: "space-between"
               },
               children: [
-                /* @__PURE__ */ T(me, {}, void 0, !1, {
-                  fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+                /* @__PURE__ */ y(me, {}, void 0, !1, {
+                  fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                   lineNumber: 1302,
                   columnNumber: 8
                 }, void 0),
-                /* @__PURE__ */ T(me, {}, void 0, !1, {
-                  fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+                /* @__PURE__ */ y(me, {}, void 0, !1, {
+                  fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                   lineNumber: 1303,
                   columnNumber: 8
                 }, void 0)
@@ -712,91 +712,91 @@ const Xe = K.div`
             void 0,
             !0,
             {
-              fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+              fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
               lineNumber: 1295,
               columnNumber: 7
             },
             void 0
           ),
-          /* @__PURE__ */ T(
-            we,
+          /* @__PURE__ */ y(
+            Re,
             {
               placement: "auto",
-              time: C ? se(new Date(C), "hh:mm a") : se(/* @__PURE__ */ new Date(), "hh:mm a"),
-              date: C ? new Date(C) : /* @__PURE__ */ new Date(),
+              time: T ? se(new Date(T), "hh:mm a") : se(/* @__PURE__ */ new Date(), "hh:mm a"),
+              date: T ? new Date(T) : /* @__PURE__ */ new Date(),
               minDate: /* @__PURE__ */ new Date(),
               error: "",
               setError: () => {
               },
               onChange: (e) => {
-                ie("static_expiry", e.toISOString());
+                re("static_expiry", e.toISOString());
               }
             },
             void 0,
             !1,
             {
-              fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+              fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
               lineNumber: 1307,
               columnNumber: 6
             },
             void 0
           )
         ] }, void 0, !0, {
-          fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+          fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
           lineNumber: 1293,
           columnNumber: 5
         }, void 0),
-        p?.value === "static_expiry" && ge && /* @__PURE__ */ T("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ T(
-          Pe,
+        p?.value === "static_expiry" && ke && /* @__PURE__ */ y("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ y(
+          Ie,
           {
             containerStyle: { padding: "4px 8px" },
-            icon: () => /* @__PURE__ */ T(
+            icon: () => /* @__PURE__ */ y(
               Ae,
               {
                 width: 16,
                 height: 16,
-                color: D.content.secondary
+                color: U.content.secondary
               },
               void 0,
               !1,
               {
-                fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+                fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
                 lineNumber: 1334,
                 columnNumber: 9
               },
               void 0
             ),
-            type: Ie.NEUTRAL,
+            type: De.NEUTRAL,
             text: `Please use the same expiration code that you applied when creating
 the code on Shopify`
           },
           void 0,
           !1,
           {
-            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
             lineNumber: 1331,
             columnNumber: 7
           },
           void 0
         ) }, void 0, !1, {
-          fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+          fileName: "/Users/prateekchouhan/Projects/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 && !ve && L === U.CHATBOT && /* @__PURE__ */ T(
+        s.type === "link" && p?.value !== "custom_link" && !F && !ve && O === L.CHATBOT && /* @__PURE__ */ y(
           Ke,
           {
             isError: ne?.buttons?.includes(s?.index ?? -1) ?? !1,
             params: s.queryParams ?? [],
             onChange: (e) => {
-              g(s.updatedValue, "link", e);
+              k(s.updatedValue, "link", e);
             },
             variableValue: s.updatedValue
           },
           void 0,
           !1,
           {
-            fileName: "/Users/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+            fileName: "/Users/prateekchouhan/Projects/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/syedanoorain/Downloads/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
+      fileName: "/Users/prateekchouhan/Projects/bik-component-library/src/components/template-context-mapper/modalElements/VariableConnector.tsx",
       lineNumber: 1153,
       columnNumber: 3
     },