@sparrowengg/integrations-templates-frontend 2.1.0-beta.1 → 2.1.0-beta.2

package/dist/es/dynamic-mapping/components/Mapping.js

@@ -1,9 +1,7 @@
-import React__default, { useState } from 'react';
-import { surveySparrowURL, mappingTabValues } from '../../commons/constants/index.js';
+import React__default, { useState, useEffect } from 'react';
+import { mappingTabValues, surveySparrowURL, mappingPropertyValues } from '../../commons/constants/index.js';
 import Spinner from '../../commons/components/spinner.js';
-import { useMappingData } from '../hooks/useMappingData.js';
-import { getAllMappingCount, getMappingCount } from '../utils/index.js';
-import { IMPORT_METHODS, UI_TEXT, CONFIGURATION_FIELD_IDS, TAB_VALUES, MAPPING_FIELD_TYPES, FONT_FAMILIES, CHIP_COLORS } from '../constants/index.js';
+import { fetchSurveyQuestions, fetchSurveyVariables, fetchContactProperties, fetchSurveyExpression } from '../../mapping/services/index.js';
 import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
 import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
 import { Heading } from '../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
@@ -41,67 +39,254 @@ const Mapping = ({
   token,
   surveyProperties,
   importResponse,
-  ssMappingData: externalSSMappingData,
-  setSSMappingData: externalSetSSMappingData,
+  ssMappingData,
+  setSSMappingData,
   editField,
   setIsInitialLoad,
   setOriginalMappingData
 }) => {
-  var _a;
-  const { ssMappingData, setSSMappingData, loader, handleFieldValues } = useMappingData({
-    surveyId,
-    apiURL,
-    token,
-    surveyProperties,
-    editField,
-    importResponse,
-    setIsInitialLoad,
-    setOriginalMappingData
-  });
-  React__default.useEffect(() => {
-    externalSetSSMappingData(ssMappingData);
-  }, [ssMappingData, externalSetSSMappingData]);
+  var _a, _b, _c;
+  const [loader, setLoader] = useState(true);
   const [searchInput, setSearchInput] = useState("");
-  if (loader) {
-    return /* @__PURE__ */ React__default.createElement(
-      Flex,
-      {
-        alignItems: "center",
-        justifyContent: "center",
-        css: { height: "calc(100vh - 57px)" }
-      },
-      /* @__PURE__ */ React__default.createElement(Spinner, null)
-    );
-  }
-  return /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(Box, { css: { maxWidth: 650, width: "100%", marginBlock: "$40" } }, (importResponse == null ? void 0 : importResponse.hasImportResponse) && /* @__PURE__ */ React__default.createElement(
-    ImportMethodSelector,
-    {
-      importResponse,
-      ssMappingData
+  const [SSMappedFields, setSSMappedFields] = useState([]);
+  const modifiedMappingData = (mappingData, commonLabel, isEnabled = false) => {
+    const fields = mappingData.map((data) => {
+      var _a2, _b2, _c2;
+      return __spreadProps(__spreadValues({}, data), {
+        id: (_a2 = data == null ? void 0 : data.id) != null ? _a2 : data == null ? void 0 : data.name,
+        name: (_b2 = data == null ? void 0 : data.rtxt) != null ? _b2 : data == null ? void 0 : data.name,
+        isEnabled: (_c2 = data == null ? void 0 : data.isEnabled) != null ? _c2 : false
+      });
+    });
+    fields.unshift({ id: "ALL", name: commonLabel, isEnabled });
+    return fields;
+  };
+  const fetchInitalMappingData = async () => {
+    var _a2;
+    setLoader(true);
+    try {
+      if (surveyProperties) {
+        const { questions, variables, contactProperties, expressions, property, derivedQuestions } = surveyProperties;
+        setSSMappingData({
+          questions: (questions == null ? void 0 : questions.length) ? modifiedMappingData(questions, "Select all Questions") : [],
+          contactProperties: (contactProperties == null ? void 0 : contactProperties.length) ? modifiedMappingData(
+            contactProperties,
+            "Select all Contact Properties"
+          ) : [],
+          variables: (variables == null ? void 0 : variables.length) ? modifiedMappingData(variables, "Select all Variables") : [],
+          expressions: (expressions == null ? void 0 : expressions.length) ? modifiedMappingData(expressions, "Select all Expressions") : [],
+          property: (property == null ? void 0 : property.length) ? modifiedMappingData(property, "Select all Properties") : [],
+          derivedQuestions: (derivedQuestions == null ? void 0 : derivedQuestions.length) ? modifiedMappingData(derivedQuestions, "Select all Derived Questions") : []
+        });
+      } else {
+        const [questions, variables, contactProperties, expressions] = await Promise.all([
+          fetchSurveyQuestions(apiURL, surveyId, token),
+          fetchSurveyVariables(apiURL, surveyId, token),
+          fetchContactProperties(apiURL, token),
+          fetchSurveyExpression(apiURL, surveyId, token)
+        ]);
+        setSSMappingData({
+          questions: (questions == null ? void 0 : questions.length) ? modifiedMappingData(questions, "Select all Questions") : [],
+          contactProperties: (contactProperties == null ? void 0 : contactProperties.length) ? modifiedMappingData(
+            contactProperties,
+            "Select all Contact Properties"
+          ) : [],
+          variables: (variables == null ? void 0 : variables.length) ? modifiedMappingData(variables, "Select all Variables") : [],
+          expressions: (expressions == null ? void 0 : expressions.length) ? modifiedMappingData(expressions, "Select all Expressions") : [],
+          property: ((_a2 = mappingPropertyValues) == null ? void 0 : _a2.length) ? modifiedMappingData(mappingPropertyValues, "Select all Properties") : []
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoader(false);
     }
-  ), ((_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.ImportMethod) === IMPORT_METHODS.SELECTED ? /* @__PURE__ */ React__default.createElement(
-    MappingTabs,
-    {
-      ssMappingData,
-      searchInput,
-      setSearchInput,
-      handleFieldValues
+  };
+  const handleFieldValues = (type, id, value) => {
+    var _a2;
+    if (id === "ALL") {
+      setSSMappingData((prev) => {
+        var _a3;
+        return __spreadProps(__spreadValues({}, prev), {
+          [type]: (_a3 = prev[type]) == null ? void 0 : _a3.map((mapping) => {
+            return __spreadProps(__spreadValues({}, mapping), { isEnabled: value });
+          })
+        });
+      });
+    } else {
+      let modifiedMappedField = (_a2 = ssMappingData[type]) == null ? void 0 : _a2.map((mapping) => {
+        if ((mapping == null ? void 0 : mapping.id) === id) {
+          return __spreadProps(__spreadValues({}, mapping), { isEnabled: value });
+        }
+        return __spreadValues({}, mapping);
+      });
+      if (modifiedMappedField.filter((field) => (field == null ? void 0 : field.id) !== "ALL").every((field) => field.isEnabled)) {
+        modifiedMappedField = modifiedMappedField.map((field) => __spreadProps(__spreadValues({}, field), {
+          isEnabled: true
+        }));
+      } else {
+        modifiedMappedField = modifiedMappedField.map((field) => {
+          if ((field == null ? void 0 : field.id) === "ALL") {
+            return __spreadProps(__spreadValues({}, field), { isEnabled: false });
+          }
+          return field;
+        });
+      }
+      const mappedFields = __spreadProps(__spreadValues({}, ssMappingData), {
+        [type]: modifiedMappedField
+      });
+      setSSMappingData(mappedFields);
+      importResponse.onChangeHandler({
+        id: "mappedFields",
+        value: mappedFields
+      });
     }
-  ) : /* @__PURE__ */ React__default.createElement(SendAllDataSummary, { ssMappingData })));
-};
-const ImportMethodSelector = ({
-  importResponse
-}) => {
-  var _a;
-  return /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5", css: { color: "$neutral900" } }, UI_TEXT.SELECT_IMPORT_DATA), /* @__PURE__ */ React__default.createElement(
+  };
+  const getMappingCount = (mappingField) => {
+    let count = 0;
+    const mappedField = ssMappingData[mappingField];
+    mappedField == null ? void 0 : mappedField.forEach((field) => {
+      if ((field == null ? void 0 : field.id) !== "ALL" && field.isEnabled)
+        count += 1;
+    });
+    return count;
+  };
+  const getAllMappingCount = (mappingField) => {
+    const mappedField = ssMappingData[mappingField];
+    return mappedField == null ? void 0 : mappedField.length;
+  };
+  useEffect(() => {
+    var _a2;
+    if (!(editField == null ? void 0 : editField.id)) {
+      fetchInitalMappingData();
+    } else if (!!(editField == null ? void 0 : editField.id)) {
+      const { fieldValues: {
+        mappedFields
+      } } = editField;
+      if (((_a2 = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a2.ImportMethod) === "SELECTED_DATA") {
+        const processField = (field, label) => {
+          if (!(field == null ? void 0 : field.length))
+            return [];
+          if (field == null ? void 0 : field.some((item) => item.id === "ALL"))
+            return field;
+          return modifiedMappingData(field, label, field.every((item) => item.isEnabled));
+        };
+        const updatedSSMappingData = {
+          questions: processField(mappedFields == null ? void 0 : mappedFields.questions, "Select all Questions"),
+          variables: processField(mappedFields == null ? void 0 : mappedFields.variables, "Select all Variables"),
+          contactProperties: processField(mappedFields == null ? void 0 : mappedFields.contactProperties, "Select all Contact Properties"),
+          expressions: processField(mappedFields == null ? void 0 : mappedFields.expressions, "Select all Expressions"),
+          property: processField(mappedFields == null ? void 0 : mappedFields.property, "Select all Properties"),
+          derivedQuestions: processField(mappedFields == null ? void 0 : mappedFields.derivedQuestions, "Select all Enrich")
+        };
+        setSSMappingData(updatedSSMappingData);
+        setOriginalMappingData(updatedSSMappingData);
+      } else {
+        const { questions, variables, contactProperties, expressions, property, derivedQuestions } = surveyProperties;
+        const updatedSSMappingData = {
+          questions: (questions == null ? void 0 : questions.length) ? questions : [],
+          contactProperties: (contactProperties == null ? void 0 : contactProperties.length) ? contactProperties : [],
+          variables: (variables == null ? void 0 : variables.length) ? variables : [],
+          expressions: (expressions == null ? void 0 : expressions.length) ? expressions : [],
+          property: (property == null ? void 0 : property.length) ? property : [],
+          derivedQuestions: (derivedQuestions == null ? void 0 : derivedQuestions.length) ? derivedQuestions : []
+        };
+        setSSMappingData(updatedSSMappingData);
+        setOriginalMappingData(updatedSSMappingData);
+      }
+      setLoader(false);
+    } else {
+      setLoader(false);
+    }
+    setIsInitialLoad(false);
+  }, [token, surveyId]);
+  useEffect(() => {
+    var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    if (((_a2 = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a2.ImportMethod) === "SELECTED_DATA") {
+      if (!!(editField == null ? void 0 : editField.id)) {
+        const processField = (field, label) => {
+          if (!field.length)
+            return [];
+          if (field == null ? void 0 : field.some((item) => item.id === "ALL"))
+            return field;
+          return modifiedMappingData(field, label, field.every((item) => item.isEnabled));
+        };
+        setSSMappingData({
+          questions: processField((_c2 = (_b2 = editField == null ? void 0 : editField.fieldValues) == null ? void 0 : _b2.mappedFields) == null ? void 0 : _c2.questions, "Select all Questions"),
+          variables: processField((_e = (_d = editField == null ? void 0 : editField.fieldValues) == null ? void 0 : _d.mappedFields) == null ? void 0 : _e.variables, "Select all Variables"),
+          contactProperties: processField((_g = (_f = editField == null ? void 0 : editField.fieldValues) == null ? void 0 : _f.mappedFields) == null ? void 0 : _g.contactProperties, "Select all Contact Properties"),
+          expressions: processField((_i = (_h = editField == null ? void 0 : editField.fieldValues) == null ? void 0 : _h.mappedFields) == null ? void 0 : _i.expressions, "Select all Expressions"),
+          property: processField((_k = (_j = editField == null ? void 0 : editField.fieldValues) == null ? void 0 : _j.mappedFields) == null ? void 0 : _k.property, "Select all Properties"),
+          derivedQuestions: processField((_m = (_l = editField == null ? void 0 : editField.fieldValues) == null ? void 0 : _l.mappedFields) == null ? void 0 : _m.derivedQuestions, "Select all Enrich")
+        });
+      } else {
+        setSSMappingData({
+          questions: ((_n = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _n.some((question) => question.id === "ALL")) ? ssMappingData == null ? void 0 : ssMappingData.questions : ((_o = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _o.length) ? modifiedMappingData(ssMappingData == null ? void 0 : ssMappingData.questions, "Select all Questions") : [],
+          variables: ((_p = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _p.some((variable) => variable.id === "ALL")) ? ssMappingData == null ? void 0 : ssMappingData.variables : ((_q = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _q.length) ? modifiedMappingData(ssMappingData == null ? void 0 : ssMappingData.variables, "Select all Variables") : [],
+          contactProperties: ((_r = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _r.some((contactProperty) => contactProperty.id === "ALL")) ? ssMappingData == null ? void 0 : ssMappingData.contactProperties : ((_s = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _s.length) ? modifiedMappingData(ssMappingData == null ? void 0 : ssMappingData.contactProperties, "Select all Contact Properties") : [],
+          expressions: ((_t = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _t.some((expression) => expression.id === "ALL")) ? ssMappingData == null ? void 0 : ssMappingData.expressions : ((_u = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _u.length) ? modifiedMappingData(ssMappingData == null ? void 0 : ssMappingData.expressions, "Select all Expressions") : [],
+          property: ((_v = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _v.some((property) => property.id === "ALL")) ? ssMappingData == null ? void 0 : ssMappingData.property : ((_w = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _w.length) ? modifiedMappingData(ssMappingData == null ? void 0 : ssMappingData.property, "Select all Properties") : [],
+          derivedQuestions: ((_x = ssMappingData == null ? void 0 : ssMappingData.derivedQuestions) == null ? void 0 : _x.some((derivedQuestion) => derivedQuestion.id === "ALL")) ? ssMappingData == null ? void 0 : ssMappingData.derivedQuestions : ((_y = ssMappingData == null ? void 0 : ssMappingData.derivedQuestions) == null ? void 0 : _y.length) ? modifiedMappingData(ssMappingData == null ? void 0 : ssMappingData.derivedQuestions, "Select all Derived Questions") : []
+        });
+      }
+    }
+  }, [(_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.ImportMethod]);
+  useEffect(() => {
+    var _a2, _b2, _c2, _d, _e, _f;
+    if (((_a2 = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _a2.length) || ((_b2 = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _b2.length) || ((_c2 = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _c2.length) || ((_d = ssMappingData == null ? void 0 : ssMappingData.expressions) == null ? void 0 : _d.length) || ((_e = ssMappingData == null ? void 0 : ssMappingData.property) == null ? void 0 : _e.length)) {
+      const updatedFieldValues = Object.keys(ssMappingData).reduce((acc, key) => {
+        acc[key] = ssMappingData[key].map((field) => {
+          var _a3;
+          if (((_a3 = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a3.ImportMethod) === "SELECTED_DATA") {
+            return __spreadProps(__spreadValues({}, field), { isEnabled: field == null ? void 0 : field.isEnabled });
+          } else {
+            if ((field == null ? void 0 : field.id) !== "ALL") {
+              return __spreadProps(__spreadValues({}, field), { isEnabled: true });
+            }
+            return field;
+          }
+        });
+        return acc;
+      }, {});
+      setSSMappedFields(updatedFieldValues);
+      if (((_f = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _f.ImportMethod) === "SEND_ALL_DATA") {
+        importResponse.onChangeHandler({
+          id: "mappedFields",
+          value: updatedFieldValues
+        });
+      } else {
+        importResponse.onChangeHandler({
+          id: "mappedFields",
+          value: ssMappingData
+        });
+      }
+    }
+  }, [ssMappingData]);
+  return /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", justifyContent: "center" }, loader ? /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      css: { height: "calc(100vh - 57px)" }
+    },
+    /* @__PURE__ */ React__default.createElement(Spinner, null)
+  ) : /* @__PURE__ */ React__default.createElement(Box, { css: { maxWidth: 650, width: "100%", marginBlock: "$40" } }, (importResponse == null ? void 0 : importResponse.hasImportResponse) ? /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5", css: {
+    color: "$neutral900"
+  } }, "Select Import Data"), /* @__PURE__ */ React__default.createElement(
     RadioGroup,
     {
-      defaultValue: (_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.ImportMethod,
+      defaultValue: (_b = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _b.ImportMethod,
       onChange: (value) => {
         importResponse.onChangeHandler({
-          id: CONFIGURATION_FIELD_IDS.IMPORT_METHOD,
+          id: "ImportMethod",
           value
         });
+        if (value === "SEND_ALL_DATA") {
+          importResponse.onChangeHandler({
+            id: "mappedFields",
+            value: SSMappedFields
+          });
+        }
       }
     },
     /* @__PURE__ */ React__default.createElement(
@@ -114,54 +299,48 @@ const ImportMethodSelector = ({
           "& label": { color: "$neutral800", cursor: "pointer" }
         }
       },
-      /* @__PURE__ */ React__default.createElement(Radio, { size: "md", value: IMPORT_METHODS.SEND_ALL, css: { cursor: "pointer" } }, UI_TEXT.SEND_ALL_DATA),
-      /* @__PURE__ */ React__default.createElement(Radio, { size: "md", value: IMPORT_METHODS.SELECTED, css: { cursor: "pointer" } }, UI_TEXT.SEND_SELECTED_DATA)
+      /* @__PURE__ */ React__default.createElement(Radio, { size: "md", value: "SEND_ALL_DATA", css: {
+        cursor: "pointer"
+      } }, "Send all data"),
+      /* @__PURE__ */ React__default.createElement(Radio, { size: "md", value: "SELECTED_DATA", css: {
+        cursor: "pointer"
+      } }, "Send selected data")
     )
-  ));
-};
-const MappingTabs = ({
-  ssMappingData,
-  searchInput,
-  setSearchInput,
-  handleFieldValues
-}) => {
-  return /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: "$24" } }, /* @__PURE__ */ React__default.createElement(Tabs, { defaultValue: TAB_VALUES.QUESTIONS }, /* @__PURE__ */ React__default.createElement(TabsList, { css: { borderBottom: "$borderWidths$xs solid $neutral200" } }, mappingTabValues.map((tab) => {
-    const count = getAllMappingCount(ssMappingData[tab.placeholder]);
-    if (tab.value === TAB_VALUES.DERIVED_QUESTIONS && count < 1) {
-      return null;
-    }
-    return /* @__PURE__ */ React__default.createElement(
-      TabsTrigger,
-      {
-        key: tab == null ? void 0 : tab.id,
-        value: tab == null ? void 0 : tab.value,
-        css: { padding: "$6 $4 !important" },
-        onClick: () => setSearchInput("")
-      },
-      /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "bold" }, tab.name),
-      !!getMappingCount(ssMappingData[tab.placeholder]) && /* @__PURE__ */ React__default.createElement(
-        Chip,
-        {
-          css: {
-            marginLeft: "$2",
-            borderRadius: "5px",
-            color: "$neutral800"
+  )) : null, ((_c = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _c.ImportMethod) === "SELECTED_DATA" ? /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: "$24" } }, /* @__PURE__ */ React__default.createElement(Tabs, { defaultValue: "QUESTIONS" }, /* @__PURE__ */ React__default.createElement(
+    TabsList,
+    {
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200"
+      }
+    },
+    mappingTabValues.map((tab) => {
+      if (tab.value === "DERIVED_QUESTIONS" && getAllMappingCount(tab.placeholder) < 1) {
+        return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null);
+      } else {
+        return /* @__PURE__ */ React__default.createElement(
+          TabsTrigger,
+          {
+            key: tab == null ? void 0 : tab.id,
+            value: tab == null ? void 0 : tab.value,
+            css: {
+              padding: "$6 $4 !important"
+            },
+            onClick: () => setSearchInput("")
           },
-          variant: "outline",
-          rounded: "sm"
-        },
-        getMappingCount(ssMappingData[tab.placeholder])
-      )
-    );
-  })), /* @__PURE__ */ React__default.createElement(
+          /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "bold" }, tab.name),
+          !!getMappingCount(tab.placeholder) && /* @__PURE__ */ React__default.createElement(Chip, { css: { marginLeft: "$2", borderRadius: "5px", color: "$neutral800" }, variant: "outline", rounded: "sm" }, getMappingCount(tab.placeholder))
+        );
+      }
+    })
+  ), /* @__PURE__ */ React__default.createElement(
     TabsContentComponent,
     {
       searchInput,
       setSearchInput,
-      value: TAB_VALUES.QUESTIONS,
-      placeholder: UI_TEXT.QUESTIONS_LABEL,
+      value: "QUESTIONS",
+      placeholder: "Questions",
       fields: ssMappingData == null ? void 0 : ssMappingData.questions,
-      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.QUESTIONS, field == null ? void 0 : field.id, value)
+      handleFieldValues: (field, value) => handleFieldValues("questions", field == null ? void 0 : field.id, value)
     }
   ), /* @__PURE__ */ React__default.createElement(
     TabsContentComponent,
@@ -169,9 +348,9 @@ const MappingTabs = ({
       searchInput,
       setSearchInput,
       fields: ssMappingData.variables,
-      value: TAB_VALUES.VARIABLE,
-      placeholder: UI_TEXT.VARIABLES_LABEL,
-      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.VARIABLES, field == null ? void 0 : field.id, value)
+      value: "VARIABLE",
+      placeholder: "Variables",
+      handleFieldValues: (field, value) => handleFieldValues("variables", field == null ? void 0 : field.id, value)
     }
   ), /* @__PURE__ */ React__default.createElement(
     TabsContentComponent,
@@ -179,41 +358,41 @@ const MappingTabs = ({
       fields: ssMappingData.contactProperties,
       searchInput,
       setSearchInput,
-      value: TAB_VALUES.CONTACT,
-      placeholder: UI_TEXT.CONTACTS_LABEL,
-      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.CONTACT_PROPERTIES, field == null ? void 0 : field.id, value)
+      value: "CONTACT",
+      placeholder: "Contacts",
+      handleFieldValues: (field, value) => handleFieldValues("contactProperties", field == null ? void 0 : field.id, value)
     }
   ), /* @__PURE__ */ React__default.createElement(
     TabsContentComponent,
     {
       searchInput,
       setSearchInput,
-      value: TAB_VALUES.EXPRESSION,
-      placeholder: UI_TEXT.EXPRESSIONS_LABEL,
+      value: "EXPRESSION",
+      placeholder: "Expressions",
       fields: ssMappingData.expressions,
-      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.EXPRESSIONS, field == null ? void 0 : field.id, value)
+      handleFieldValues: (field, value) => handleFieldValues("expressions", field == null ? void 0 : field.id, value)
     }
   ), /* @__PURE__ */ React__default.createElement(
     TabsContentComponent,
     {
-      value: TAB_VALUES.PROPERTY,
+      value: "PROPERTY",
       searchInput,
       setSearchInput,
-      placeholder: UI_TEXT.PROPERTIES_LABEL,
+      placeholder: "Properties",
       fields: ssMappingData.property,
-      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.PROPERTY, field == null ? void 0 : field.id, value)
+      handleFieldValues: (field, value) => handleFieldValues("property", field == null ? void 0 : field.id, value)
     }
   ), /* @__PURE__ */ React__default.createElement(
     TabsContentComponent,
     {
-      value: TAB_VALUES.DERIVED_QUESTIONS,
+      value: "DERIVED_QUESTIONS",
       searchInput,
       setSearchInput,
-      placeholder: UI_TEXT.DERIVED_QUESTIONS_LABEL,
+      placeholder: "Derived Questions",
       fields: ssMappingData.derivedQuestions,
-      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.DERIVED_QUESTIONS, field == null ? void 0 : field.id, value)
+      handleFieldValues: (field, value) => handleFieldValues("derivedQuestions", field == null ? void 0 : field.id, value)
     }
-  )));
+  ))) : /* @__PURE__ */ React__default.createElement(Flex, { css: { marginTop: "$16" }, alignItems: "center", gap: "$6" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { width: "90px", color: "$neutral900" } }, "This Includes:"), /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4" }, getAllMappingCount("questions") - 1 > 0 ? /* @__PURE__ */ React__default.createElement(CustomChip, { bgColor: "#E5F2FF" }, " ", getAllMappingCount("questions") - 1, " Questions") : null, getAllMappingCount("derivedQuestions") - 1 > 0 ? /* @__PURE__ */ React__default.createElement(CustomChip, { bgColor: "#E5F2FF" }, " ", getAllMappingCount("derivedQuestions") - 1, " Enrich") : null, getAllMappingCount("variables") - 1 > 0 ? /* @__PURE__ */ React__default.createElement(CustomChip, { bgColor: "#E8F4E3" }, " ", getAllMappingCount("variables") - 1, " Variables") : null, getAllMappingCount("contactProperties") - 1 > 0 ? /* @__PURE__ */ React__default.createElement(CustomChip, { bgColor: "#FDEDE8" }, " ", getAllMappingCount("contactProperties") - 1, " Contacts") : null, getAllMappingCount("expressions") - 1 > 0 ? /* @__PURE__ */ React__default.createElement(CustomChip, { bgColor: "#F1F1F1" }, " ", getAllMappingCount("expressions") - 1, " Expressions") : null, getAllMappingCount("property") - 1 > 0 ? /* @__PURE__ */ React__default.createElement(CustomChip, { bgColor: "#4A9CA626" }, " ", getAllMappingCount("property") - 1, " Properties") : null))));
 };
 const TabsContentComponent = ({
   value,
@@ -234,7 +413,7 @@ const TabsContentComponent = ({
     {
       leftIcon: /* @__PURE__ */ React__default.createElement(SearchIcon, { color: "#848484" }),
       variant: "filled",
-      placeholder: `${UI_TEXT.SEARCH_PREFIX} ${placeholder}`,
+      placeholder: `Search ${placeholder}`,
       size: "lg",
       css: { marginTop: "$8" },
       value: searchInput,
@@ -259,51 +438,37 @@ const TabsContentComponent = ({
       flexDirection: "column",
       gap: "$8"
     },
-    (mappingFields == null ? void 0 : mappingFields.length) > 1 ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mappingFields.map((field) => /* @__PURE__ */ React__default.createElement(
-      Box,
+    (mappingFields == null ? void 0 : mappingFields.length) > 1 ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mappingFields.map((field) => /* @__PURE__ */ React__default.createElement(Box, { css: {
+      label: {
+        color: "$neutral900",
+        fontSize: "$sm",
+        maxWidth: "520px",
+        display: "block",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        cursor: "pointer"
+      }
+    } }, /* @__PURE__ */ React__default.createElement(Tooltip, { content: field.tooltip || "", css: {
+      fontFamily: "DM Sans !important",
+      zIndex: "9999999 !important"
+    } }, /* @__PURE__ */ React__default.createElement(Flex, { css: { width: "fit-content !important" } }, /* @__PURE__ */ React__default.createElement(
+      Checkbox,
       {
-        key: field.id,
-        css: {
-          label: {
-            color: "$neutral900",
-            fontSize: "$sm",
-            maxWidth: "520px",
-            display: "block",
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap",
-            cursor: "pointer"
-          }
-        }
+        size: "sm",
+        checked: field.isEnabled,
+        disabled: field.disabled,
+        onChange: (value2) => handleFieldValues(field, value2)
       },
-      /* @__PURE__ */ React__default.createElement(
-        Tooltip,
-        {
-          content: field.tooltip || "",
-          css: {
-            fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT,
-            zIndex: "9999999 !important"
-          }
-        },
-        /* @__PURE__ */ React__default.createElement(Flex, { css: { width: "fit-content !important" } }, /* @__PURE__ */ React__default.createElement(
-          Checkbox,
-          {
-            size: "sm",
-            checked: field.isEnabled,
-            disabled: field.disabled,
-            onChange: (value2) => handleFieldValues(field, value2)
-          },
-          field.name
-        ))
-      )
-    ))) : /* @__PURE__ */ React__default.createElement(
+      field.name
+    )))))) : /* @__PURE__ */ React__default.createElement(
       Flex,
       {
         alignItems: "center",
         justifyContent: "center",
         css: { marginTop: "$40" }
       },
-      /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, UI_TEXT.NO_RESULTS_FOUND)
+      /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, "No Results Found")
     )
   ), /* @__PURE__ */ React__default.createElement(
     Box,
@@ -319,62 +484,15 @@ const TabsContentComponent = ({
     }
   ));
 };
-const SendAllDataSummary = ({ ssMappingData }) => {
-  const fieldCounts = [
-    {
-      count: getAllMappingCount(ssMappingData.questions) - 1,
-      label: UI_TEXT.QUESTIONS_LABEL,
-      color: CHIP_COLORS.questions
-    },
-    {
-      count: getAllMappingCount(ssMappingData.derivedQuestions) - 1,
-      label: UI_TEXT.ENRICH_LABEL,
-      color: CHIP_COLORS.derivedQuestions
-    },
-    {
-      count: getAllMappingCount(ssMappingData.variables) - 1,
-      label: UI_TEXT.VARIABLES_LABEL,
-      color: CHIP_COLORS.variables
-    },
-    {
-      count: getAllMappingCount(ssMappingData.contactProperties) - 1,
-      label: UI_TEXT.CONTACTS_LABEL,
-      color: CHIP_COLORS.contactProperties
-    },
-    {
-      count: getAllMappingCount(ssMappingData.expressions) - 1,
-      label: UI_TEXT.EXPRESSIONS_LABEL,
-      color: CHIP_COLORS.expressions
-    },
-    {
-      count: getAllMappingCount(ssMappingData.property) - 1,
-      label: UI_TEXT.PROPERTIES_LABEL,
-      color: CHIP_COLORS.property
-    }
-  ];
-  return /* @__PURE__ */ React__default.createElement(Flex, { css: { marginTop: "$16" }, alignItems: "center", gap: "$6" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { width: "90px", color: "$neutral900" } }, UI_TEXT.THIS_INCLUDES), /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4" }, fieldCounts.map(
-    ({ count, label, color }) => count > 0 && /* @__PURE__ */ React__default.createElement(CustomChip, { key: label, bgColor: color }, count, " ", label)
-  )));
-};
 const CustomChip = ({ children, bgColor, opacity }) => {
-  return /* @__PURE__ */ React__default.createElement(
-    Chip,
-    {
-      variant: "solid",
-      css: __spreadProps(__spreadValues(__spreadValues({}, opacity && { backgroundColor: bgColor }), opacity && { backgroundColorOpacity: [bgColor, 0.3] }), {
-        background: bgColor,
-        lineHeight: "$sm",
-        fontWeight: "$4",
-        fontFamily: FONT_FAMILIES.ROBOTO_MONO,
-        "& > * ": {
-          fontFamily: FONT_FAMILIES.ROBOTO_MONO,
-          fontWeight: "$4 !important"
-        }
-      })
-    },
-    children
-  );
+  return /* @__PURE__ */ React__default.createElement(Chip, { variant: "solid", css: __spreadProps(__spreadValues(__spreadValues({}, opacity && { backgroundColor: bgColor }), opacity && { backgroundColorOpacity: [bgColor, 0.3] }), {
+    background: bgColor,
+    lineHeight: "$sm",
+    fontWeight: "$4",
+    fontFamily: "'Roboto Mono', monospace !important",
+    "& > * ": { fontFamily: "'Roboto Mono', monospace !important", fontWeight: "$4 !important" }
+  }) }, children);
 };
 
 export { Mapping as default };
-//# sourceMappingURL=Mapping.js.map
+//# sourceMappingURL=mapping.js.map