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

package/dist/cjs/integration-template/components/dashboard.js

@@ -9,6 +9,8 @@ var index = require('../../node_modules/html-react-parser/esm/index.js');
 var index$1 = require('../../commons/constants/index.js');
 var confirmationModal = require('../../commons/components/confirmation-modal.js');
 var sync = require('../../commons/icons/sync.js');
+var dashboard_constants = require('../constants/dashboard.constants.js');
+var dashboard_utils = require('../utils/dashboard.utils.js');
 var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
 var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
 var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
@@ -28,15 +30,6 @@ var pencil = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/
 var _delete = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/delete.js');
 var table = require('../../node_modules/@sparrowengg/twigs-react/dist/es/table/table.js');
 
-const trasformToPastTense = (value) => {
-  if (value.endsWith("e")) {
-    return value + "d";
-  } else if (value.endsWith("y")) {
-    return value.slice(0, -1) + "ied";
-  } else {
-    return value + "ed";
-  }
-};
 const Dashboard = ({
   onMappingEditHandler,
   fieldOptions,
@@ -63,20 +56,20 @@ const Dashboard = ({
       alignItems: "center"
     },
     /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2" }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, integrationName), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral700" } }, dashboardDescription)),
-    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, hasMultiAccounts && /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null) }, "Add Account"), hasDropdownComponents.mapping && !hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, hasMultiAccounts && /* @__PURE__ */ React.createElement(button.Button, { size: "lg", color: "default", leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null) }, dashboard_constants.BUTTON_LABELS.ADD_ACCOUNT), hasDropdownComponents.mapping && !hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
       button.Button,
       {
         size: "lg",
         color: "primary",
         disabled: !mappingEnabled,
         leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
-        onClick: () => handleConfigurationType("MAPPING")
+        onClick: () => handleConfigurationType(dashboard_constants.DASHBOARD_TYPES.MAPPING)
       },
-      "New Mapping"
+      dashboard_constants.BUTTON_LABELS.NEW_MAPPING
     ) : null, hasDropdownComponents.trigger && hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(
       tooltip.Tooltip,
       {
-        content: !triggerEnabled && !mappingEnabled ? "You have reached the maximum limit for creating triggers/mappings" : ""
+        content: !triggerEnabled && !mappingEnabled ? dashboard_constants.TOOLTIP_MESSAGES.MAX_LIMIT_TRIGGERS_MAPPINGS : ""
       },
       /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         button.Button,
@@ -85,16 +78,16 @@ const Dashboard = ({
           disabled: !triggerEnabled && !mappingEnabled,
           rightIcon: /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, null)
         },
-        "Add New"
+        dashboard_constants.BUTTON_LABELS.ADD_NEW
       ))
     ), /* @__PURE__ */ React.createElement(
       dropdown.DropdownMenuContent,
       {
-        className: "dm-sans",
+        className: dashboard_constants.CSS_CLASSES.DM_SANS,
         sideOffset: 4,
         align: "start",
         css: {
-          maxWidth: 240,
+          maxWidth: dashboard_constants.MAX_DIMENSIONS.SELECT_MENU_WIDTH,
           zIndex: 10,
           "& p": {
             margin: "0 !important",
@@ -105,23 +98,23 @@ const Dashboard = ({
       hasDropdownComponents.trigger ? /* @__PURE__ */ React.createElement(
         DropdownItem,
         {
-          toolTipContent: "You have reached the maximum limit for creating triggers",
+          toolTipContent: dashboard_constants.TOOLTIP_MESSAGES.MAX_LIMIT_TRIGGERS,
           isDisabled: !triggerEnabled,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 24, color: "#6A6A6A" }),
-          heading: "Trigger",
-          description: "Trigger the Survey when a record is created/updated",
-          onClickHandler: () => handleConfigurationType("TRIGGER")
+          heading: dashboard_constants.TAB_LABELS.TRIGGER,
+          description: dashboard_constants.DESCRIPTION_TEMPLATES.TRIGGER_SURVEY,
+          onClickHandler: () => handleConfigurationType(dashboard_constants.DASHBOARD_TYPES.TRIGGER)
         }
       ) : null,
       hasDropdownComponents.mapping ? /* @__PURE__ */ React.createElement(
         DropdownItem,
         {
           isDisabled: !mappingEnabled,
-          toolTipContent: "You have reached the maximum limit for creating mappings",
+          toolTipContent: dashboard_constants.TOOLTIP_MESSAGES.MAX_LIMIT_MAPPINGS,
           icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 24, color: "#6A6A6A" }),
-          heading: "Mapping",
-          description: `Create/Update record in ${integrationName} from survey responses`,
-          onClickHandler: () => handleConfigurationType("MAPPING")
+          heading: dashboard_constants.TAB_LABELS.MAPPING,
+          description: dashboard_constants.DESCRIPTION_TEMPLATES.CREATE_UPDATE_RECORD.replace("{integration}", integrationName),
+          onClickHandler: () => handleConfigurationType(dashboard_constants.DASHBOARD_TYPES.MAPPING)
         }
       ) : null
     )) : null)
@@ -190,9 +183,9 @@ const MultiAccountDashboard = ({
         "& button": { color: "$neutral900" }
       }
     },
-    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "ALL" }, "All"),
-    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "TRIGGER" }, "Trigger"),
-    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "MAPPING" }, "Mapping")
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "ALL" }, dashboard_constants.TAB_LABELS.ALL),
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "TRIGGER" }, dashboard_constants.TAB_LABELS.TRIGGER),
+    /* @__PURE__ */ React.createElement(tabs.TabsTrigger, { value: "MAPPING" }, dashboard_constants.TAB_LABELS.MAPPING)
   ), /* @__PURE__ */ React.createElement(
     tabs.TabsContent,
     {
@@ -200,7 +193,7 @@ const MultiAccountDashboard = ({
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
     /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, triggerFields == null ? void 0 : triggerFields.map((field) => {
-      var _a2, _b2, _c2, _d2, _e;
+      var _a2, _b2, _c2, _d2, _e, _f;
       return /* @__PURE__ */ React.createElement(
         DashboardItem,
         {
@@ -208,15 +201,15 @@ const MultiAccountDashboard = ({
           isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
-          heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : "Field",
+          heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : dashboard_constants.DEFAULT_VALUES.FIELD,
           id: field.id,
-          description: `Trigger survey when an ${(_d2 = field == null ? void 0 : field.object) == null ? void 0 : _d2.toLowerCase()} is ${(_e = field == null ? void 0 : field.action) == null ? void 0 : _e.toLowerCase()} in ${integrationName}`,
+          description: dashboard_constants.DESCRIPTION_TEMPLATES.TRIGGER_SURVEY_WHEN.replace("{article}", /^[aeiouAEIOU]$/.test(((_d2 = field == null ? void 0 : field.object) == null ? void 0 : _d2[0]) || "") ? "an" : "a").replace("{object}", ((_e = field == null ? void 0 : field.object) == null ? void 0 : _e.toLowerCase()) || "").replace("{action}", ((_f = field == null ? void 0 : field.action) == null ? void 0 : _f.toLowerCase()) || "").replace("{integration}", integrationName),
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
           handleDashboardPage,
           handleEditField,
-          type: "TRIGGER",
+          type: dashboard_constants.DASHBOARD_TYPES.TRIGGER,
           toggleDashboardField,
           deleteFieldHandler
         }
@@ -224,22 +217,22 @@ const MultiAccountDashboard = ({
     })) : null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map(
       (field) => {
         var _a2, _b2, _c2, _d2, _e, _f, _g, _h, _i;
-        return /* @__PURE__ */ React.createElement(React.Fragment, null, (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, (mappingFields == null ? void 0 : mappingFields.type) === dashboard_constants.DASHBOARD_TYPES.MULTI_MAPPING ? /* @__PURE__ */ React.createElement(
           DashboardItem,
           {
             key: field.id,
             isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
             onMappingEditHandler,
             icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-            heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : "Field",
+            heading: (_c2 = (_b2 = field.domain) != null ? _b2 : field.email) != null ? _c2 : dashboard_constants.DEFAULT_VALUES.FIELD,
             id: field.id,
-            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_f = (_e = (_d2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _d2.events) == null ? void 0 : _e.label) == null ? void 0 : _f.toLowerCase()} is ${trasformToPastTense(`${(_i = (_h = (_g = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _g.action) == null ? void 0 : _h.label) == null ? void 0 : _i.toLowerCase()}`)}`,
+            description: (field == null ? void 0 : field.mappingDescription) || dashboard_constants.DESCRIPTION_TEMPLATES.SYNC_RESPONSES_WHEN.replace("{integration}", integrationName).replace("{event}", ((_f = (_e = (_d2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _d2.events) == null ? void 0 : _e.label) == null ? void 0 : _f.toLowerCase()) || "").replace("{action}", dashboard_utils.transformToPastTense(((_i = (_h = (_g = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _g.action) == null ? void 0 : _h.label) == null ? void 0 : _i.toLowerCase()) || "")),
             fields: field.fields,
             isEnabled: field.isEnabled,
             integrationName,
             handleDashboardPage,
             handleEditField,
-            type: "MAPPING",
+            type: dashboard_constants.DASHBOARD_TYPES.MAPPING,
             toggleDashboardField,
             deleteFieldHandler
           }
@@ -267,7 +260,7 @@ const MultiAccountDashboard = ({
       css: { paddingBlock: "$12", paddingInline: 0 }
     },
     !!(triggerFields == null ? void 0 : triggerFields.length) ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, triggerFields == null ? void 0 : triggerFields.map((field) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2, _c2, _d2;
       return /* @__PURE__ */ React.createElement(
         DashboardItem,
         {
@@ -275,15 +268,15 @@ const MultiAccountDashboard = ({
           isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
-          heading: "Trigger",
+          heading: dashboard_constants.DEFAULT_VALUES.TRIGGER,
           id: field.id,
-          description: `Trigger survey when an ${(_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2.toLowerCase()} is ${(_c2 = field == null ? void 0 : field.action) == null ? void 0 : _c2.toLowerCase()} in ${integrationName}`,
+          description: dashboard_constants.DESCRIPTION_TEMPLATES.TRIGGER_SURVEY_WHEN.replace("{article}", /^[aeiouAEIOU]$/.test(((_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2[0]) || "") ? "an" : "a").replace("{object}", ((_c2 = field == null ? void 0 : field.object) == null ? void 0 : _c2.toLowerCase()) || "").replace("{action}", ((_d2 = field == null ? void 0 : field.action) == null ? void 0 : _d2.toLowerCase()) || "").replace("{integration}", integrationName),
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
           handleDashboardPage,
           handleEditField,
-          type: "TRIGGER",
+          type: dashboard_constants.DASHBOARD_TYPES.TRIGGER,
           toggleDashboardField,
           deleteFieldHandler
         }
@@ -291,8 +284,8 @@ const MultiAccountDashboard = ({
     })) : /* @__PURE__ */ React.createElement(
       MultiAccountFallback,
       {
-        title: "Trigger",
-        onClickHandler: () => handleConfigurationType("TRIGGER")
+        title: dashboard_constants.TAB_LABELS.TRIGGER,
+        onClickHandler: () => handleConfigurationType(dashboard_constants.DASHBOARD_TYPES.TRIGGER)
       }
     )
   ), /* @__PURE__ */ React.createElement(
@@ -304,22 +297,22 @@ const MultiAccountDashboard = ({
     !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map(
       (field) => {
         var _a2, _b2, _c2, _d2, _e, _f, _g;
-        return /* @__PURE__ */ React.createElement(React.Fragment, null, (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React.createElement(React.Fragment, null, (mappingFields == null ? void 0 : mappingFields.type) === dashboard_constants.DASHBOARD_TYPES.MULTI_MAPPING ? /* @__PURE__ */ React.createElement(
           DashboardItem,
           {
             key: field.id,
             isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
             onMappingEditHandler,
             icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-            heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+            heading: (field == null ? void 0 : field.mappingName) || dashboard_constants.DEFAULT_VALUES.MAPPING,
             id: field.id,
-            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.action) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()}`)}`,
+            description: (field == null ? void 0 : field.mappingDescription) || dashboard_constants.DESCRIPTION_TEMPLATES.SYNC_RESPONSES_WHEN.replace("{integration}", integrationName).replace("{event}", ((_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()) || "").replace("{action}", dashboard_utils.transformToPastTense(((_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.action) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()) || "")),
             fields: field.fields,
             isEnabled: field.isEnabled,
             integrationName,
             handleDashboardPage,
             handleEditField,
-            type: "MAPPING",
+            type: dashboard_constants.DASHBOARD_TYPES.MAPPING,
             toggleDashboardField,
             deleteFieldHandler
           }
@@ -342,8 +335,8 @@ const MultiAccountDashboard = ({
     ))) : /* @__PURE__ */ React.createElement(
       MultiAccountFallback,
       {
-        title: "Mapping",
-        onClickHandler: () => handleConfigurationType("MAPPING")
+        title: dashboard_constants.TAB_LABELS.MAPPING,
+        onClickHandler: () => handleConfigurationType(dashboard_constants.DASHBOARD_TYPES.MAPPING)
       }
     )
   )));
@@ -360,7 +353,7 @@ const MultiAccountFallback = ({
       alignItems: "center",
       css: { paddingTop: 182 }
     },
-    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, `Zero ${title} Entries`),
+    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, `${title} Entries`),
     /* @__PURE__ */ React.createElement(
       text.Text,
       {
@@ -382,7 +375,7 @@ const MultiAccountFallback = ({
         variant: "outline",
         onClick: onClickHandler
       },
-      `New ${title}`
+      `${dashboard_constants.BUTTON_LABELS.NEW_PREFIX} ${title}`
     )
   );
 };
@@ -409,7 +402,7 @@ const SingleAccountDashboard = ({
         isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
         fieldOptions,
         field,
-        description: `Trigger survey when ${/^[aeiouAEIOU]$/.test(((_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2[0]) || "") ? "an" : "a"} ${(_c2 = field == null ? void 0 : field.object) == null ? void 0 : _c2.toLowerCase()} is ${(_d2 = field == null ? void 0 : field.action) == null ? void 0 : _d2.toLowerCase()} in ${integrationName}`,
+        description: dashboard_constants.DESCRIPTION_TEMPLATES.TRIGGER_SURVEY_WHEN.replace("{article}", /^[aeiouAEIOU]$/.test(((_b2 = field == null ? void 0 : field.object) == null ? void 0 : _b2[0]) || "") ? "an" : "a").replace("{object}", ((_c2 = field == null ? void 0 : field.object) == null ? void 0 : _c2.toLowerCase()) || "").replace("{action}", ((_d2 = field == null ? void 0 : field.action) == null ? void 0 : _d2.toLowerCase()) || "").replace("{integration}", integrationName),
         key: field.id,
         integrationName,
         icon: /* @__PURE__ */ React.createElement(cursor.default, { size: 32, color: "#56B0BB" }),
@@ -422,22 +415,22 @@ const SingleAccountDashboard = ({
   })) : null, (mappingFields == null ? void 0 : mappingFields.type) === "DYNAMIC_MAPPING" ? /* @__PURE__ */ React.createElement(React.Fragment, null, !!((_a = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _a.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_b = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _b.map(
     (field) => {
       var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
-      if ((field == null ? void 0 : field.type) === "MULTI_MAPPING") {
+      if ((field == null ? void 0 : field.type) === dashboard_constants.DASHBOARD_TYPES.MULTI_MAPPING) {
         return /* @__PURE__ */ React.createElement(
           DashboardItem,
           {
             isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
             onMappingEditHandler,
             icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-            heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+            heading: (field == null ? void 0 : field.mappingName) || dashboard_constants.DEFAULT_VALUES.MAPPING,
             id: field.id,
-            description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()}`)}`,
+            description: (field == null ? void 0 : field.mappingDescription) || dashboard_constants.DESCRIPTION_TEMPLATES.SYNC_RESPONSES_WHEN.replace("{integration}", integrationName).replace("{event}", ((_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()) || "").replace("{action}", dashboard_utils.transformToPastTense(((_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()) || "")),
             fields: field.fields,
             isEnabled: field.isEnabled,
             integrationName,
             handleDashboardPage,
             handleEditField,
-            type: "MAPPING",
+            type: dashboard_constants.DASHBOARD_TYPES.MAPPING,
             toggleDashboardField,
             deleteFieldHandler
           }
@@ -460,7 +453,7 @@ const SingleAccountDashboard = ({
         );
       }
     }
-  )) : null) : /* @__PURE__ */ React.createElement(React.Fragment, null, !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) && (mappingFields == null ? void 0 : mappingFields.type) === "MULTI_MAPPING" ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map(
+  )) : null) : /* @__PURE__ */ React.createElement(React.Fragment, null, !!((_c = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _c.length) && (mappingFields == null ? void 0 : mappingFields.type) === dashboard_constants.DASHBOARD_TYPES.MULTI_MAPPING ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_d = mappingFields == null ? void 0 : mappingFields.fields) == null ? void 0 : _d.map(
     (field) => {
       var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
       return /* @__PURE__ */ React.createElement(
@@ -469,21 +462,21 @@ const SingleAccountDashboard = ({
           isDraft: (_a2 = field == null ? void 0 : field.isDraft) != null ? _a2 : false,
           onMappingEditHandler,
           icon: /* @__PURE__ */ React.createElement(mapping.default, { size: 32, color: "#56B0BB" }),
-          heading: (field == null ? void 0 : field.mappingName) || "Mapping",
+          heading: (field == null ? void 0 : field.mappingName) || dashboard_constants.DEFAULT_VALUES.MAPPING,
           id: field.id,
-          description: (field == null ? void 0 : field.mappingDescription) || `Sync survey responses to ${integrationName} when ${(_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()} is ${trasformToPastTense(`${(_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()}`)}`,
+          description: (field == null ? void 0 : field.mappingDescription) || dashboard_constants.DESCRIPTION_TEMPLATES.SYNC_RESPONSES_WHEN.replace("{integration}", integrationName).replace("{event}", ((_d2 = (_c2 = (_b2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _b2.events) == null ? void 0 : _c2.label) == null ? void 0 : _d2.toLowerCase()) || "").replace("{action}", dashboard_utils.transformToPastTense(((_g2 = (_f2 = (_e2 = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e2.action) == null ? void 0 : _f2.label) == null ? void 0 : _g2.toLowerCase()) || "")),
           fields: field.fields,
           isEnabled: field.isEnabled,
           integrationName,
           handleDashboardPage,
           handleEditField,
-          type: "MAPPING",
+          type: dashboard_constants.DASHBOARD_TYPES.MAPPING,
           toggleDashboardField,
           deleteFieldHandler
         }
       );
     }
-  )) : null, ((_e = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _e.type) === "SINGLE_MAPPING" && !!((_g = (_f = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _f.fields) == null ? void 0 : _g.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_i = (_h = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _h.fields) == null ? void 0 : _i.map(
+  )) : null, ((_e = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _e.type) === dashboard_constants.DASHBOARD_TYPES.SINGLE_MAPPING && !!((_g = (_f = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _f.fields) == null ? void 0 : _g.length) ? /* @__PURE__ */ React.createElement(box.Box, { css: { marginTop: !(triggerFields == null ? void 0 : triggerFields.length) ? "$20" : "$8" } }, (_i = (_h = mappingFields == null ? void 0 : mappingFields.mappedFields) == null ? void 0 : _h.fields) == null ? void 0 : _i.map(
     (field, index) => {
       return /* @__PURE__ */ React.createElement(
         SingleMappingDashboardItem,
@@ -530,14 +523,14 @@ const TriggerDasboardItem = ({
         const fieldLabel = (_b2 = fieldOptions.find(
           (options) => options.value === field2
         )) == null ? void 0 : _b2.label;
-        return `${fieldLabel} ${formattedComparator === "NO_PREFERENCE" ? "has no preference" : formattedComparator} ${value}`;
+        return `${fieldLabel} ${formattedComparator === dashboard_constants.CONDITION_TEXT.NO_PREFERENCE ? dashboard_constants.CONDITION_TEXT.HAS_NO_PREFERENCE : formattedComparator} ${value}`;
       })) == null ? void 0 : _a2.join(
         ` <span style="color: #6A6A6A;font-weight: 600;">${filterGroup.condition.toLowerCase()}</span> `
       );
     }).join(
-      `<br /> <span style="color: #6A6A6A;font-weight: 600;">${data.condition.toLowerCase() === "or" ? "Or" : "And"} When,</span> `
+      `<br /> <span style="color: #6A6A6A;font-weight: 600;">${data.condition.toLowerCase() === "or" ? dashboard_constants.CONDITION_TEXT.OR_WHEN : dashboard_constants.CONDITION_TEXT.AND_WHEN}</span> `
     );
-    return `<p style="font-family: 'DM Sans'; font-size: 13.33px; font-weight: 400;line-height: 30px; color: #848484;"><span style="color: #6A6A6A;font-weight: 600;">When</span> ${filterConditions}</p>`;
+    return `<p style="font-family: 'DM Sans'; font-size: 13.33px; font-weight: 400;line-height: 30px; color: #848484;"><span style="color: #6A6A6A;font-weight: 600;">${dashboard_constants.CONDITION_TEXT.WHEN}</span> ${filterConditions}</p>`;
   };
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     flex.Flex,
@@ -572,7 +565,7 @@ const TriggerDasboardItem = ({
           onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
         },
         isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
-        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (_a = field == null ? void 0 : field.email) != null ? _a : "Trigger"), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, description != null ? description : `Trigger survey when an event happens in ${integrationName}`)))
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, icon, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (_a = field == null ? void 0 : field.email) != null ? _a : dashboard_constants.DEFAULT_VALUES.TRIGGER), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral600" } }, description != null ? description : dashboard_constants.DESCRIPTION_TEMPLATES.TRIGGER_SURVEY_GENERIC.replace("{integration}", integrationName))))
       ),
       /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, isDraft && /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, /* @__PURE__ */ React.createElement(chip.Chip, { rounded: "full", size: "sm" }, /* @__PURE__ */ React.createElement(
         box.Box,
@@ -622,7 +615,7 @@ const TriggerDasboardItem = ({
       )), /* @__PURE__ */ React.createElement(
         dropdown.DropdownMenuContent,
         {
-          className: "dm-sans",
+          className: dashboard_constants.CSS_CLASSES.DM_SANS,
           css: {
             minWidth: 180,
             zIndex: 10,
@@ -642,14 +635,14 @@ const TriggerDasboardItem = ({
             },
             onClick: () => {
               handleEditField({
-                type: "TRIGGER",
+                type: dashboard_constants.DASHBOARD_TYPES.TRIGGER,
                 values: field,
                 id: field.id
               });
-              handleDashboardPage(false, "TRIGGER");
+              handleDashboardPage(false, dashboard_constants.DASHBOARD_TYPES.TRIGGER);
             }
           },
-          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, dashboard_constants.BUTTON_LABELS.EDIT))
         ),
         /* @__PURE__ */ React.createElement(
           dropdown.DropdownMenuItem,
@@ -659,7 +652,7 @@ const TriggerDasboardItem = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete"))
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, dashboard_constants.BUTTON_LABELS.DELETE))
         )
       )))
     ),
@@ -690,7 +683,7 @@ const TriggerDasboardItem = ({
             weight: "bold",
             css: { textTransform: "uppercase" }
           },
-          "CONDITION"
+          dashboard_constants.SECTION_HEADINGS.CONDITION
         ),
         index.default(transformDataToString(field.fields))
       ), /* @__PURE__ */ React.createElement(
@@ -706,9 +699,9 @@ const TriggerDasboardItem = ({
       ((_g = (_f = (_e = (_d = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _d.variables) == null ? void 0 : _e.filter) == null ? void 0 : _f.call(_e, (variable) => variable.isEnabled)) == null ? void 0 : _g.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: ((_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.variables) == null ? void 0 : _i.length) > 1 ? "PASSING VARIABLES TO SURVEY" : "PASSING VARIABLE TO SURVEY",
+          heading: ((_i = (_h = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _h.variables) == null ? void 0 : _i.length) > 1 ? dashboard_constants.SECTION_HEADINGS.PASSING_VARIABLES_MULTIPLE : dashboard_constants.SECTION_HEADINGS.PASSING_VARIABLES_SINGLE,
           fields: field.triggerDetails.variables,
-          backgroundColor: "$positive100"
+          backgroundColor: dashboard_constants.CHIP_COLORS.VARIABLES
         }
       ) : null,
       /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
@@ -718,17 +711,17 @@ const TriggerDasboardItem = ({
           gap: "$6",
           css: { paddingBlock: "$8" }
         },
-        /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, "SEND SURVEY"),
+        /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, dashboard_constants.SECTION_HEADINGS.SEND_SURVEY),
         /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, ((_k = (_j = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _j.shareType) == null ? void 0 : _k.value) ? /* @__PURE__ */ React.createElement(
           EventComponent,
           {
-            heading: "Share Type:",
+            heading: dashboard_constants.FIELD_LABELS.SHARE_TYPE,
             description: (_m = (_l = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _l.shareType) == null ? void 0 : _m.label
           }
         ) : null, ((_o = (_n = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _n.shareRecipient) == null ? void 0 : _o.value) ? /* @__PURE__ */ React.createElement(
           EventComponent,
           {
-            heading: "Recipient:",
+            heading: dashboard_constants.FIELD_LABELS.RECIPIENT,
             hasBorder: true,
             description: (_q = (_p = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _p.shareRecipient) == null ? void 0 : _q.label
           }
@@ -736,7 +729,7 @@ const TriggerDasboardItem = ({
           EventComponent,
           {
             hasBorder: true,
-            heading: "Share Channel:",
+            heading: dashboard_constants.FIELD_LABELS.SHARE_CHANNEL,
             description: (_u = (_t = field == null ? void 0 : field.triggerDetails) == null ? void 0 : _t.shareChannel) == null ? void 0 : _u.label
           }
         ) : null)
@@ -762,21 +755,21 @@ const TriggerDasboardItem = ({
           variant: "ghost",
           onClick: () => {
             handleEditField({
-              type: "TRIGGER",
+              type: dashboard_constants.DASHBOARD_TYPES.TRIGGER,
               values: field,
               id: field.id
             });
-            handleDashboardPage(false, "TRIGGER");
+            handleDashboardPage(false, dashboard_constants.DASHBOARD_TYPES.TRIGGER);
           }
         },
-        "Edit Trigger"
+        dashboard_constants.BUTTON_LABELS.EDIT_TRIGGER
       )
     )
   ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
     confirmationModal.default,
     {
-      name: "Delete Trigger?",
-      description: `Are you sure you want to delete the trigger? This action cannot be undone.`,
+      title: dashboard_constants.MODAL_TITLES.DELETE_TRIGGER,
+      description: dashboard_constants.MODAL_MESSAGES.DELETE_TRIGGER_CONFIRMATION,
       onConfirm: () => deleteFieldHandler == null ? void 0 : deleteFieldHandler(field.id),
       onCancel: () => setIsDeleteModalOpen(false)
     }
@@ -831,11 +824,11 @@ const SingleMappingDashboardItem = ({
           onClick: () => setIsMappingDisplayed(!isMappingDisplayed)
         },
         isMappingDisplayed ? /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 40, color: "#848484" }) : /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, { size: 40, color: "#848484" }),
-        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? icon : null, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (field == null ? void 0 : field.mappingName) ? field == null ? void 0 : field.mappingName : (_d = (_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) != null ? _d : "Mapping"), (field == null ? void 0 : field.mappingDescription) && /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { "& span": {
+        /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$4" }, (() => (field == null ? void 0 : field.isEnabled) !== null && (field == null ? void 0 : field.isEnabled) !== void 0)() ? icon : null, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$1", flexDirection: "column" }, /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "bold" }, (field == null ? void 0 : field.mappingName) ? field == null ? void 0 : field.mappingName : (_d = (_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) != null ? _d : dashboard_constants.DEFAULT_VALUES.MAPPING), (field == null ? void 0 : field.mappingDescription) && /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { "& span": {
           fontFamily: "'DM Sans', sans-serif !important"
-        }, color: "$neutral600", "& b": { fontWeight: "$6 !important", fontFamily: "'DM Sans', sans-serif !important" } }, dangerouslySetInnerHTML: { __html: (field == null ? void 0 : field.mappingDescription) ? field == null ? void 0 : field.mappingDescription : `Sync survey responses to ${integrationName} when ${(_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.events) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()} is ${trasformToPastTense(`${(_j = (_i = (_h = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _h.action) == null ? void 0 : _i.label) == null ? void 0 : _j.toLowerCase()}`)}` } })))
+        }, color: "$neutral600", "& b": { fontWeight: "$6 !important", fontFamily: "'DM Sans', sans-serif !important" } }, dangerouslySetInnerHTML: { __html: (field == null ? void 0 : field.mappingDescription) ? field == null ? void 0 : field.mappingDescription : dashboard_constants.DESCRIPTION_TEMPLATES.SYNC_RESPONSES_WHEN.replace("{integration}", integrationName).replace("{event}", ((_g = (_f = (_e = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _e.events) == null ? void 0 : _f.label) == null ? void 0 : _g.toLowerCase()) || "").replace("{action}", dashboard_utils.transformToPastTense(((_j = (_i = (_h = field == null ? void 0 : field.mappingConfiguration) == null ? void 0 : _h.action) == null ? void 0 : _i.label) == null ? void 0 : _j.toLowerCase()) || "")) } })))
       ),
-      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, syncMapping ? /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "Sync", className: "dm-sans" }, /* @__PURE__ */ React.createElement(
+      /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$12" }, syncMapping ? /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: dashboard_constants.BUTTON_LABELS.SYNC, className: dashboard_constants.CSS_CLASSES.DM_SANS }, /* @__PURE__ */ React.createElement(
         button.Button,
         {
           variant: "ghost",
@@ -850,7 +843,7 @@ const SingleMappingDashboardItem = ({
         /* @__PURE__ */ React.createElement(
           flex.Flex,
           {
-            className: `rotating-div ${isSyncing === field.id ? "rotate" : ""}`,
+            className: `${dashboard_constants.CSS_CLASSES.ROTATING_DIV} ${isSyncing === field.id ? dashboard_constants.CSS_CLASSES.ROTATE : ""}`,
             justifyContent: "center",
             alignItems: "center",
             onClick: async () => {
@@ -858,7 +851,7 @@ const SingleMappingDashboardItem = ({
               setTimeout(async () => {
                 await (syncMapping == null ? void 0 : syncMapping(field.id));
                 setIsSyncing(null);
-              }, 2e3);
+              }, dashboard_constants.ANIMATION_DURATIONS.SYNC);
             }
           },
           /* @__PURE__ */ React.createElement(sync.default, null)
@@ -879,7 +872,7 @@ const SingleMappingDashboardItem = ({
           checked: field.isEnabled,
           onChange: (value) => toggleDashboardField == null ? void 0 : toggleDashboardField(field.id, value)
         }
-      ) : null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: "More", className: "dm-sans" }, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
+      ) : null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenu, null, /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: dashboard_constants.BUTTON_LABELS.MORE, className: dashboard_constants.CSS_CLASSES.DM_SANS }, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
         iconButton.IconButton,
         {
           variant: "ghost",
@@ -890,7 +883,7 @@ const SingleMappingDashboardItem = ({
       ))), /* @__PURE__ */ React.createElement(
         dropdown.DropdownMenuContent,
         {
-          className: "dm-sans",
+          className: dashboard_constants.CSS_CLASSES.DM_SANS,
           css: {
             minWidth: 180,
             zIndex: 10,
@@ -911,14 +904,14 @@ const SingleMappingDashboardItem = ({
             onClick: () => {
               onMappingEditHandler(field.id);
               handleEditField({
-                type: "MAPPING",
+                type: dashboard_constants.DASHBOARD_TYPES.MAPPING,
                 values: field,
                 id: field.id
               });
-              handleDashboardPage(false, "MAPPING");
+              handleDashboardPage(false, dashboard_constants.DASHBOARD_TYPES.MAPPING);
             }
           },
-          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, dashboard_constants.BUTTON_LABELS.EDIT))
         ),
         /* @__PURE__ */ React.createElement(
           dropdown.DropdownMenuItem,
@@ -928,7 +921,7 @@ const SingleMappingDashboardItem = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete"))
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, dashboard_constants.BUTTON_LABELS.DELETE))
         )
       )))
     ),
@@ -948,9 +941,9 @@ const SingleMappingDashboardItem = ({
       !!((_n = (_m = (_l = (_k = field == null ? void 0 : field.mappedFields) == null ? void 0 : _k.questions) == null ? void 0 : _l.filter) == null ? void 0 : _m.call(_l, (question) => question.isEnabled)) == null ? void 0 : _n.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: "Questions",
+          heading: dashboard_constants.SECTION_HEADINGS.QUESTIONS,
           fields: (_q = (_p = (_o = field == null ? void 0 : field.mappedFields) == null ? void 0 : _o.questions) == null ? void 0 : _p.filter) == null ? void 0 : _q.call(_p, (question) => question.isEnabled),
-          backgroundColor: "#E5F2FF"
+          backgroundColor: dashboard_constants.CHIP_COLORS.QUESTIONS
         }
       ) : null,
       !!((_u = (_t = (_s = (_r = field == null ? void 0 : field.mappedFields) == null ? void 0 : _r.derivedQuestions) == null ? void 0 : _s.filter) == null ? void 0 : _t.call(
@@ -959,45 +952,45 @@ const SingleMappingDashboardItem = ({
       )) == null ? void 0 : _u.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: "Enrich",
+          heading: dashboard_constants.SECTION_HEADINGS.ENRICH,
           fields: (_x = (_w = (_v = field == null ? void 0 : field.mappedFields) == null ? void 0 : _v.derivedQuestions) == null ? void 0 : _w.filter) == null ? void 0 : _x.call(
             _w,
             (derivedQuestion) => derivedQuestion.isEnabled
           ),
-          backgroundColor: "#E5F2FF"
+          backgroundColor: dashboard_constants.CHIP_COLORS.QUESTIONS
         }
       ) : null,
       !!((_B = (_A = (_z = (_y = field == null ? void 0 : field.mappedFields) == null ? void 0 : _y.variables) == null ? void 0 : _z.filter) == null ? void 0 : _A.call(_z, (variable) => variable.isEnabled)) == null ? void 0 : _B.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: "Variables",
+          heading: dashboard_constants.SECTION_HEADINGS.VARIABLES,
           fields: (_E = (_D = (_C = field == null ? void 0 : field.mappedFields) == null ? void 0 : _C.variables) == null ? void 0 : _D.filter) == null ? void 0 : _E.call(_D, (variable) => variable.isEnabled),
-          backgroundColor: "$positive100"
+          backgroundColor: dashboard_constants.CHIP_COLORS.VARIABLES
         }
       ) : null,
       !!((_I = (_H = (_G = (_F = field == null ? void 0 : field.mappedFields) == null ? void 0 : _F.contactProperties) == null ? void 0 : _G.filter) == null ? void 0 : _H.call(_G, (property) => property.isEnabled)) == null ? void 0 : _I.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: "Contacts",
+          heading: dashboard_constants.SECTION_HEADINGS.CONTACTS,
           fields: (_L = (_K = (_J = field == null ? void 0 : field.mappedFields) == null ? void 0 : _J.contactProperties) == null ? void 0 : _K.filter) == null ? void 0 : _L.call(_K, (property) => property.isEnabled),
-          backgroundColor: "$negative100"
+          backgroundColor: dashboard_constants.CHIP_COLORS.CONTACTS
         }
       ) : null,
       !!((_P = (_O = (_N = (_M = field == null ? void 0 : field.mappedFields) == null ? void 0 : _M.expressions) == null ? void 0 : _N.filter) == null ? void 0 : _O.call(_N, (expression) => expression.isEnabled)) == null ? void 0 : _P.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: "Expression",
-          backgroundColor: "$neutral100",
+          heading: dashboard_constants.SECTION_HEADINGS.EXPRESSION,
+          backgroundColor: dashboard_constants.CHIP_COLORS.EXPRESSIONS,
           fields: (_S = (_R = (_Q = field == null ? void 0 : field.mappedFields) == null ? void 0 : _Q.expressions) == null ? void 0 : _R.filter) == null ? void 0 : _S.call(_R, (expression) => expression.isEnabled)
         }
       ) : null,
       !!((_W = (_V = (_U = (_T = field == null ? void 0 : field.mappedFields) == null ? void 0 : _T.property) == null ? void 0 : _U.filter) == null ? void 0 : _V.call(_U, (property) => property.isEnabled)) == null ? void 0 : _W.length) ? /* @__PURE__ */ React.createElement(
         SingleMappingChipWrapper,
         {
-          heading: "Property",
+          heading: dashboard_constants.SECTION_HEADINGS.PROPERTY,
           hideBorder: true,
           fields: (_Z = (_Y = (_X = field == null ? void 0 : field.mappedFields) == null ? void 0 : _X.property) == null ? void 0 : _Y.filter) == null ? void 0 : _Z.call(_Y, (property) => property.isEnabled),
-          backgroundColor: "rgba(74, 156, 166, 0.15)"
+          backgroundColor: dashboard_constants.CHIP_COLORS.PROPERTY
         }
       ) : null
     ), isMappingDisplayed && /* @__PURE__ */ React.createElement(
@@ -1021,21 +1014,21 @@ const SingleMappingDashboardItem = ({
           onClick: () => {
             onMappingEditHandler(field.id);
             handleEditField({
-              type: "SINGLE_MAPPING",
+              type: dashboard_constants.DASHBOARD_TYPES.SINGLE_MAPPING,
               values: field,
               id: field.id
             });
-            handleDashboardPage(false, "MAPPING");
+            handleDashboardPage(false, dashboard_constants.DASHBOARD_TYPES.MAPPING);
           }
         },
-        "Edit Mapping"
+        dashboard_constants.BUTTON_LABELS.EDIT_MAPPING
       )
     )) : null
   ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
     confirmationModal.default,
     {
-      name: "Delete Mapping?",
-      description: `Are you sure you want to delete the mapping? This action cannot be undone.`,
+      title: dashboard_constants.MODAL_TITLES.DELETE_MAPPING,
+      description: dashboard_constants.MODAL_MESSAGES.DELETE_MAPPING_CONFIRMATION,
       onConfirm: () => deleteFieldHandler == null ? void 0 : deleteFieldHandler(field.id),
       onCancel: () => setIsDeleteModalOpen(false)
     }
@@ -1081,23 +1074,23 @@ const SingleMappingEventWrapper = ({
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K;
   const hasEventSection = !!((_c = (_b = (_a = field == null ? void 0 : field.configurationFields) == null ? void 0 : _a.account) == null ? void 0 : _b.value) == null ? void 0 : _c.label) || !!field.action || !!field.exisitingSheet || !!(field == null ? void 0 : field.configurationFields) || !!field.object && isTrigger;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, hasEventSection ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, "Event"), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, !!((_f = (_e = (_d = field == null ? void 0 : field.configurationFields) == null ? void 0 : _d.account) == null ? void 0 : _e.value) == null ? void 0 : _f.label) ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, hasEventSection ? /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, dashboard_constants.SECTION_HEADINGS.EVENT_UPPERCASE), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, !!((_f = (_e = (_d = field == null ? void 0 : field.configurationFields) == null ? void 0 : _d.account) == null ? void 0 : _e.value) == null ? void 0 : _f.label) ? /* @__PURE__ */ React.createElement(
     EventComponent,
     {
-      heading: "Account:",
+      heading: dashboard_constants.FIELD_LABELS.ACCOUNT,
       description: (_i = (_h = (_g = field == null ? void 0 : field.configurationFields) == null ? void 0 : _g.account) == null ? void 0 : _h.value) == null ? void 0 : _i.label
     }
   ) : null, !!((_l = (_k = (_j = field == null ? void 0 : field.configurationFields) == null ? void 0 : _j.object) == null ? void 0 : _k.value) == null ? void 0 : _l.label) ? /* @__PURE__ */ React.createElement(
     EventComponent,
     {
-      heading: "Object:",
+      heading: dashboard_constants.FIELD_LABELS.OBJECT,
       description: (_p = (_o = (_n = (_m = field == null ? void 0 : field.configurationFields) == null ? void 0 : _m.object) == null ? void 0 : _n.value) == null ? void 0 : _o.label) == null ? void 0 : _p.replace(/^./, (char) => char == null ? void 0 : char.toUpperCase())
     }
   ) : null, !!((_r = (_q = field == null ? void 0 : field.configurationFields) == null ? void 0 : _q.action) == null ? void 0 : _r.hasAction) ? /* @__PURE__ */ React.createElement(
     EventComponent,
     {
       hasBorder: true,
-      heading: "Action:",
+      heading: dashboard_constants.FIELD_LABELS.ACTION,
       description: (_u = (_t = (_s = field == null ? void 0 : field.configurationFields) == null ? void 0 : _s.action) == null ? void 0 : _t.value) == null ? void 0 : _u.label
     }
   ) : null, !!((_w = (_v = field == null ? void 0 : field.configurationFields) == null ? void 0 : _v.spreadsheet) == null ? void 0 : _w.value) ? /* @__PURE__ */ React.createElement(
@@ -1105,7 +1098,7 @@ const SingleMappingEventWrapper = ({
     {
       hasLink: (_x = field == null ? void 0 : field.configurationFields) == null ? void 0 : _x.sheetURL,
       hasBorder: true,
-      heading: "Sheet:",
+      heading: dashboard_constants.FIELD_LABELS.SHEET,
       description: typeof ((_y = field == null ? void 0 : field.configurationFields) == null ? void 0 : _y.spreadsheet) === "object" ? (_B = (_A = (_z = field == null ? void 0 : field.configurationFields) == null ? void 0 : _z.spreadsheet) == null ? void 0 : _A.value) == null ? void 0 : _B.label : (_D = (_C = field == null ? void 0 : field.configurationFields) == null ? void 0 : _C.spreadsheet) == null ? void 0 : _D.value
     }
   ) : null, !!((_E = field == null ? void 0 : field.configurationFields) == null ? void 0 : _E.reference) ? /* @__PURE__ */ React.createElement(
@@ -1135,7 +1128,7 @@ const SingleMappingChipWrapper = ({
   backgroundColor
 }) => {
   const modifiedFields = fields.filter(
-    (field) => field.id !== "ALL"
+    (field) => field.id !== dashboard_constants.ID_CONSTANTS.ALL
   );
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$6", css: { paddingBlock: "$8" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold", css: { textTransform: "uppercase" } }, heading), /* @__PURE__ */ React.createElement(
     flex.Flex,
@@ -1159,10 +1152,10 @@ const SingleMappingChipWrapper = ({
         tooltip.Tooltip,
         {
           delayDuration: 300,
-          content: (name == null ? void 0 : name.length) > 52 ? name : "",
+          content: (name == null ? void 0 : name.length) > dashboard_constants.MAX_DIMENSIONS.CHIP_TEXT_LENGTH ? name : "",
           size: "md",
           sideOffset: 4,
-          className: "dm-sans"
+          className: dashboard_constants.CSS_CLASSES.DM_SANS
         },
         /* @__PURE__ */ React.createElement(
           chip.Chip,
@@ -1176,7 +1169,7 @@ const SingleMappingChipWrapper = ({
                 textAlign: "center !important",
                 alignContent: "center !important",
                 display: "block",
-                maxWidth: "230px",
+                maxWidth: `${dashboard_constants.MAX_DIMENSIONS.CHIP_TEXT_WIDTH}px`,
                 overflow: "hidden",
                 fontFamily: "'Roboto Mono', monospace !important",
                 fontWeight: "$4 !important",
@@ -1185,7 +1178,7 @@ const SingleMappingChipWrapper = ({
               }
             }
           },
-          "$" + name
+          dashboard_constants.CHIP_PREFIX + name
         )
       );
     })
@@ -1216,7 +1209,7 @@ const DashboardItem = ({
   const [isDeleteModalOpen, setIsDeleteModalOpen] = React.useState(false);
   const getDefaultFieldValue = (defaultValue) => {
     var _a;
-    let field = "--";
+    let field = dashboard_constants.DEFAULT_VALUES.EMPTY;
     switch (defaultValue == null ? void 0 : defaultValue.type) {
       case "DATE_TIME": {
         field = defaultValue == null ? void 0 : defaultValue.value;
@@ -1227,7 +1220,7 @@ const DashboardItem = ({
         break;
       }
       default: {
-        field = ((_a = defaultValue == null ? void 0 : defaultValue.value) == null ? void 0 : _a.label) || "--";
+        field = ((_a = defaultValue == null ? void 0 : defaultValue.value) == null ? void 0 : _a.label) || dashboard_constants.DEFAULT_VALUES.EMPTY;
         break;
       }
     }
@@ -1287,7 +1280,7 @@ const DashboardItem = ({
             color: "$neutral800"
           }
         },
-        "DRAFT"
+        dashboard_constants.STATUS_LABELS.DRAFT
       )), /* @__PURE__ */ React.createElement(
         box.Box,
         {
@@ -1315,7 +1308,7 @@ const DashboardItem = ({
       )), /* @__PURE__ */ React.createElement(
         dropdown.DropdownMenuContent,
         {
-          className: "dm-sans",
+          className: dashboard_constants.CSS_CLASSES.DM_SANS,
           css: {
             minWidth: 180,
             zIndex: 10,
@@ -1343,7 +1336,7 @@ const DashboardItem = ({
               handleDashboardPage(false, type);
             }
           },
-          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Edit"))
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(pencil.PencilIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, dashboard_constants.BUTTON_LABELS.EDIT))
         ),
         /* @__PURE__ */ React.createElement(
           dropdown.DropdownMenuItem,
@@ -1353,7 +1346,7 @@ const DashboardItem = ({
               cursor: "pointer"
             }
           },
-          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, "Delete"))
+          /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(_delete.DeleteIcon, { color: "#6A6A6A", size: 20 }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, dashboard_constants.BUTTON_LABELS.DELETE))
         )
       )))
     ),
@@ -1369,7 +1362,7 @@ const DashboardItem = ({
         {
           css: {
             borderInline: "$borderWidths$xs solid $black400",
-            maxHeight: 432,
+            maxHeight: dashboard_constants.MAX_DIMENSIONS.TABLE_HEIGHT,
             height: "100%",
             position: "relative",
             overflow: "auto"
@@ -1393,10 +1386,10 @@ const DashboardItem = ({
               zIndex: 10
             }
           },
-          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingLeft: "$38 !important" } }, "Type"),
-          /* @__PURE__ */ React.createElement(table.Th, null, "SurveySparrow Field"),
-          /* @__PURE__ */ React.createElement(table.Th, null, `${integrationName} Field`),
-          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingRight: "$20 !important" } }, "Default Value")
+          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingLeft: "$38 !important" } }, dashboard_constants.TABLE_HEADERS.TYPE),
+          /* @__PURE__ */ React.createElement(table.Th, null, dashboard_constants.TABLE_HEADERS.SURVEYSPARROW_FIELD),
+          /* @__PURE__ */ React.createElement(table.Th, null, dashboard_constants.TABLE_HEADERS.INTEGRATION_FIELD_TEMPLATE.replace("{integration}", integrationName)),
+          /* @__PURE__ */ React.createElement(table.Th, { css: { paddingRight: "$20 !important" } }, dashboard_constants.TABLE_HEADERS.DEFAULT_VALUE)
         ), /* @__PURE__ */ React.createElement(
           table.Tbody,
           {
@@ -1433,10 +1426,10 @@ const DashboardItem = ({
                   }
                 }
               },
-              /* @__PURE__ */ React.createElement(table.Td, null, (_b = (_a = field.mappedType) == null ? void 0 : _a.label) != null ? _b : "--"),
-              /* @__PURE__ */ React.createElement(table.Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : "--"),
-              /* @__PURE__ */ React.createElement(table.Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : "--"),
-              /* @__PURE__ */ React.createElement(table.Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : "--")
+              /* @__PURE__ */ React.createElement(table.Td, null, (_b = (_a = field.mappedType) == null ? void 0 : _a.label) != null ? _b : dashboard_constants.DEFAULT_VALUES.EMPTY),
+              /* @__PURE__ */ React.createElement(table.Td, null, (_d = (_c = field.surveySparrowField) == null ? void 0 : _c.label) != null ? _d : dashboard_constants.DEFAULT_VALUES.EMPTY),
+              /* @__PURE__ */ React.createElement(table.Td, null, (_f = (_e = field.integrationField) == null ? void 0 : _e.label) != null ? _f : dashboard_constants.DEFAULT_VALUES.EMPTY),
+              /* @__PURE__ */ React.createElement(table.Td, null, (_g = getDefaultFieldValue(field.defaultValue)) != null ? _g : dashboard_constants.DEFAULT_VALUES.EMPTY)
             );
           })
         )) : null
@@ -1468,15 +1461,15 @@ const DashboardItem = ({
             color: "primary",
             variant: "ghost"
           },
-          `Edit ${heading}`
+          `${dashboard_constants.BUTTON_LABELS.EDIT} ${heading}`
         )
       )
     )
   ), isDeleteModalOpen && /* @__PURE__ */ React.createElement(
     confirmationModal.default,
     {
-      name: "Delete Mapping?",
-      description: `Are you sure you want to delete the mapping? This action cannot be undone.`,
+      title: dashboard_constants.MODAL_TITLES.DELETE_MAPPING,
+      description: dashboard_constants.MODAL_MESSAGES.DELETE_MAPPING_CONFIRMATION,
       onConfirm: () => {
         deleteFieldHandler(id);
         setIsDeleteModalOpen(false);
@@ -1501,7 +1494,7 @@ const DropdownItem = ({
       content: isDisabled ? toolTipContent : "",
       css: {
         zIndex: "99999999",
-        minWidth: "280px",
+        minWidth: `${dashboard_constants.MAX_DIMENSIONS.TOOLTIP_TEXT_WIDTH}px`,
         textAlign: "center"
       }
     },