@sparrowengg/integrations-templates-frontend 1.9.69 → 1.9.71

package/dist/cjs/single-mapping/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var string = require('../node_modules/@internationalized/date/dist/string.js');
+var editConfirmation = require('../commons/components/edit-confirmation.js');
 var React = require('react');
 var arrow = require('../commons/icons/arrow.js');
 var mapping = require('./components/mapping.js');
@@ -69,11 +70,26 @@ const SingleMapping = ({
     expressions: [],
     property: []
   });
+  const [isEditConfirmationOpen, setIsEditConfirmationOpen] = React.useState(false);
+  const [originalMappingData, setOriginalMappingData] = React.useState(null);
+  const [originalConfigurationFields, setOriginalConfigurationFields] = React.useState(null);
+  const [originalConfiguredFields, setOriginalConfiguredFields] = React.useState(null);
   React.useEffect(() => {
     if (!!(editField == null ? void 0 : editField.id)) {
       navigateMappingPage(true);
+      setOriginalMappingData(JSON.parse(JSON.stringify(ssMappingData)));
+      setOriginalConfigurationFields(JSON.parse(JSON.stringify(configuration.configurationFields)));
+      setOriginalConfiguredFields(JSON.parse(JSON.stringify(configuration.configuredFields)));
     }
   }, []);
+  const hasFieldsChanged = () => {
+    if (!(editField == null ? void 0 : editField.id) || !originalMappingData)
+      return true;
+    const mappingDataChanged = JSON.stringify(ssMappingData) !== JSON.stringify(originalMappingData);
+    const configFieldsChanged = JSON.stringify(configuration.configurationFields) !== JSON.stringify(originalConfigurationFields);
+    const configuredFieldsChanged = JSON.stringify(configuration.configuredFields) !== JSON.stringify(originalConfiguredFields);
+    return mappingDataChanged || configFieldsChanged || configuredFieldsChanged;
+  };
   return /* @__PURE__ */ React.createElement(
     themeProvider.ThemeProvider,
     {
@@ -87,10 +103,13 @@ const SingleMapping = ({
     /* @__PURE__ */ React.createElement(box.Box, { css: { width: "100%" } }, /* @__PURE__ */ React.createElement(
       MappingHeader,
       {
+        isEditConfirmationOpen,
+        setIsEditConfirmationOpen,
         editField,
         importResponse,
         ssMappingData,
         configuration,
+        hasFieldsChanged,
         saveConfiguration: () => {
           configuration.onSaveHandler();
         },
@@ -140,6 +159,7 @@ const SingleMapping = ({
   );
 };
 const MappingHeader = ({
+  isEditConfirmationOpen,
   editField,
   importResponse,
   hasExistingMapping,
@@ -149,20 +169,35 @@ const MappingHeader = ({
   onSaveHandler,
   previousMappingHandler,
   saveConfiguration,
-  configuration
+  configuration,
+  setIsEditConfirmationOpen,
+  hasFieldsChanged
 }) => {
   const isButtonDisabled = () => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     if (isMappingPage) {
+      if ((editField == null ? void 0 : editField.id) && !hasFieldsChanged()) {
+        return true;
+      }
       if ((importResponse == null ? void 0 : importResponse.value.ImportMethod) === "SEND_ALL_DATA") {
         return !(((_a = ssMappingData == null ? void 0 : ssMappingData.questions) == null ? void 0 : _a.length) || ((_b = ssMappingData == null ? void 0 : ssMappingData.variables) == null ? void 0 : _b.length) || ((_c = ssMappingData == null ? void 0 : ssMappingData.contactProperties) == null ? void 0 : _c.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));
       } else {
-        const isMappingDisabled = ssMappingData.questions.some((question) => question.isEnabled) || ssMappingData.variables.some((variable) => variable.isEnabled) || ssMappingData.contactProperties.some((property) => property.isEnabled) || ssMappingData.expressions.some((expression) => expression.isEnabled) || ssMappingData.property.some((property) => property.isEnabled);
+        const isMappingDisabled = ssMappingData.questions.some((question) => question.isEnabled) || ssMappingData.variables.some((variable) => variable.isEnabled) || ssMappingData.contactProperties.some(
+          (property) => property.isEnabled
+        ) || ssMappingData.expressions.some(
+          (expression) => expression.isEnabled
+        ) || ssMappingData.property.some((property) => property.isEnabled);
         return !isMappingDisabled;
       }
     } else {
-      const isAllFieldsDisabled = (_f = Object.values((configuration == null ? void 0 : configuration.configurationFields) || {})) == null ? void 0 : _f.some((field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0);
-      if ((_h = (_g = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _g.find((field) => (field == null ? void 0 : field.id) === "responseImportSettings")) == null ? void 0 : _h.value) {
+      const isAllFieldsDisabled = (_f = Object.values(
+        (configuration == null ? void 0 : configuration.configurationFields) || {}
+      )) == null ? void 0 : _f.some(
+        (field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0
+      );
+      if ((_h = (_g = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _g.find(
+        (field) => (field == null ? void 0 : field.id) === "responseImportSettings"
+      )) == null ? void 0 : _h.value) {
         return isAllFieldsDisabled || !((_i = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _i.responseImportType);
       } else {
         return isAllFieldsDisabled;
@@ -171,8 +206,14 @@ const MappingHeader = ({
   };
   const isMappingPageDisabled = () => {
     var _a, _b, _c, _d;
-    const isAllFieldsDisabled = (_a = Object.values((configuration == null ? void 0 : configuration.configurationFields) || {})) == null ? void 0 : _a.some((field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0);
-    if ((_c = (_b = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _b.find((field) => (field == null ? void 0 : field.id) === "responseImportSettings")) == null ? void 0 : _c.value) {
+    const isAllFieldsDisabled = (_a = Object.values(
+      (configuration == null ? void 0 : configuration.configurationFields) || {}
+    )) == null ? void 0 : _a.some(
+      (field) => (field == null ? void 0 : field.value) === null || (field == null ? void 0 : field.value) === void 0
+    );
+    if ((_c = (_b = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _b.find(
+      (field) => (field == null ? void 0 : field.id) === "responseImportSettings"
+    )) == null ? void 0 : _c.value) {
       return isAllFieldsDisabled || !((_d = configuration == null ? void 0 : configuration.configuredFields) == null ? void 0 : _d.responseImportType);
     } else {
       return isAllFieldsDisabled;
@@ -231,7 +272,10 @@ const MappingHeader = ({
         button.Button,
         {
           disabled: isMappingPageDisabled(),
-          css: { color: isMappingPage ? "$neutral900" : "$neutral800", cursor: isMappingPageDisabled() ? "not-allowed" : "pointer" },
+          css: {
+            color: isMappingPage ? "$neutral900" : "$neutral800",
+            cursor: isMappingPageDisabled() ? "not-allowed" : "pointer"
+          },
           color: "default",
           variant: "ghost",
           onClick: () => {
@@ -246,23 +290,48 @@ const MappingHeader = ({
         "Mapping"
       )
     ),
-    /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center", css: {
-      width: "180px"
-    } }, /* @__PURE__ */ React.createElement(
-      button.Button,
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
       {
-        size: "lg",
-        disabled: isButtonDisabled(),
-        onClick: () => {
-          if (isMappingPage) {
-            onSaveHandler();
-          } else {
-            saveConfiguration();
-          }
+        justifyContent: "end",
+        css: {
+          width: "180px"
         }
       },
-      isMappingPage ? (editField == null ? void 0 : editField.id) ? "Update Mapping" : "Save Mapping" : "Continue, Mapping"
-    ))
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "lg",
+          disabled: isButtonDisabled(),
+          onClick: () => {
+            if (isMappingPage) {
+              if (editField == null ? void 0 : editField.id) {
+                setIsEditConfirmationOpen(true);
+              } else {
+                onSaveHandler();
+              }
+            } else {
+              saveConfiguration();
+            }
+          }
+        },
+        isMappingPage ? (editField == null ? void 0 : editField.id) ? "Update Mapping" : "Save Mapping" : "Continue, Mapping"
+      )
+    ),
+    isEditConfirmationOpen && /* @__PURE__ */ React.createElement(
+      editConfirmation.default,
+      {
+        name: "Are you sure?",
+        description: "Saving this updated mapping properties will generate new sheet with the revised mapping.",
+        onConfirm: async () => {
+          await onSaveHandler();
+          setIsEditConfirmationOpen(false);
+        },
+        onCancel: () => {
+          setIsEditConfirmationOpen(false);
+        }
+      }
+    )
   );
 };
 const ConfigurationSetup = ({
@@ -270,19 +339,26 @@ const ConfigurationSetup = ({
   surveyName
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
-  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, "Event Details"), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, "Survey Name:"), /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: (surveyName == null ? void 0 : surveyName.length) > 30 ? surveyName : "", css: {
-    zIndex: "9999999 !important",
-    fontFamily: "DM Sans !important"
-  } }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
-    text.Text,
+  return /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 488, width: "100%" } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, "Event Details"), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, "Survey Name:"), /* @__PURE__ */ React.createElement(
+    tooltip.Tooltip,
     {
-      size: "sm",
-      weight: "medium",
-      truncate: true,
-      css: { color: "$neutral800", maxWidth: "270px" }
+      content: (surveyName == null ? void 0 : surveyName.length) > 25 ? surveyName : "",
+      css: {
+        zIndex: "9999999 !important",
+        fontFamily: "DM Sans !important"
+      }
     },
-    surveyName
-  )))), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "sm",
+        weight: "medium",
+        truncate: true,
+        css: { color: "$neutral800", maxWidth: "270px" }
+      },
+      surveyName
+    ))
+  )), /* @__PURE__ */ React.createElement(
     flex.Flex,
     {
       flexDirection: "column",
@@ -355,7 +431,7 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
     input.Input,
     {
       size: "lg",
-      rightIcon: /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 30 }),
+      rightIcon: /* @__PURE__ */ React.createElement(chevronDown.ChevronDownIcon, { size: 30, color: "#6A6A6A" }),
       placeholder: "Choose",
       value: (value == null ? void 0 : value.type) === "date" ? `${value == null ? void 0 : value.label} > ${value == null ? void 0 : value.value}` : (value == null ? void 0 : value.type) === "dateRange" ? `${value == null ? void 0 : value.label} - ${((_c = value == null ? void 0 : value.value) == null ? void 0 : _c.type) === "custom" ? `${(_d = value == null ? void 0 : value.value) == null ? void 0 : _d.value} days` : (_e = value == null ? void 0 : value.value) == null ? void 0 : _e.label}` : value == null ? void 0 : value.label,
       css: {
@@ -370,7 +446,7 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
       css: {
         width: "488px",
         marginBlockStart: "$2",
-        "p": {
+        p: {
           margin: "0px !important"
         },
         zIndex: "99 !important"
@@ -411,31 +487,23 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
                   width: "100%"
                 }
               },
-              /* @__PURE__ */ React.createElement(
-                flex.Flex,
+              /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center", flexDirection: "column" }, /* @__PURE__ */ React.createElement(
+                text.Text,
                 {
-                  justifyContent: "center",
-                  flexDirection: "column"
+                  size: "sm",
+                  weight: "regular",
+                  css: { color: "$neutral900" }
                 },
-                /* @__PURE__ */ React.createElement(
-                  text.Text,
-                  {
-                    size: "sm",
-                    weight: "regular",
-                    css: { color: "$neutral900" }
-                  },
-                  option.label
-                ),
-                /* @__PURE__ */ React.createElement(
-                  text.Text,
-                  {
-                    size: "xs",
-                    weight: "regular",
-                    css: { color: "$neutral700" }
-                  },
-                  option.description
-                )
-              )
+                option.label
+              ), /* @__PURE__ */ React.createElement(
+                text.Text,
+                {
+                  size: "xs",
+                  weight: "regular",
+                  css: { color: "$neutral700" }
+                },
+                option.description
+              ))
             )
           ))
         );
@@ -449,42 +517,53 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
               zIndex: "9999999 !important"
             }
           },
-          /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuSub, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuSubTrigger, { disabled: option == null ? void 0 : option.disabled, css: { cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important", background: (value == null ? void 0 : value.type) === option.type ? "#4A9CA626 !important" : "transparent !important" } }, " ", /* @__PURE__ */ React.createElement(
-            flex.Flex,
+          /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(dropdown.DropdownMenuSub, null, /* @__PURE__ */ React.createElement(
+            dropdown.DropdownMenuSubTrigger,
             {
-              justifyContent: "space-between",
-              alignItems: "center",
+              disabled: option == null ? void 0 : option.disabled,
               css: {
-                width: "100%"
+                cursor: (option == null ? void 0 : option.disabled) ? "not-allowed !important" : "pointer !important",
+                background: (value == null ? void 0 : value.type) === option.type ? "#4A9CA626 !important" : "transparent !important"
               }
             },
+            " ",
             /* @__PURE__ */ React.createElement(
               flex.Flex,
               {
-                css: { cursor: "pointer" },
-                justifyContent: "center",
-                flexDirection: "column"
+                justifyContent: "space-between",
+                alignItems: "center",
+                css: {
+                  width: "100%"
+                }
               },
               /* @__PURE__ */ React.createElement(
-                text.Text,
-                {
-                  size: "sm",
-                  weight: "regular",
-                  css: { color: "$neutral900" }
-                },
-                option.label
-              ),
-              /* @__PURE__ */ React.createElement(
-                text.Text,
+                flex.Flex,
                 {
-                  size: "xs",
-                  weight: "regular",
-                  css: { color: "$neutral700" }
+                  css: { cursor: "pointer" },
+                  justifyContent: "center",
+                  flexDirection: "column"
                 },
-                option.description
+                /* @__PURE__ */ React.createElement(
+                  text.Text,
+                  {
+                    size: "sm",
+                    weight: "regular",
+                    css: { color: "$neutral900" }
+                  },
+                  option.label
+                ),
+                /* @__PURE__ */ React.createElement(
+                  text.Text,
+                  {
+                    size: "xs",
+                    weight: "regular",
+                    css: { color: "$neutral700" }
+                  },
+                  option.description
+                )
               )
             )
-          )), /* @__PURE__ */ React.createElement(
+          ), /* @__PURE__ */ React.createElement(
             dropdown.DropdownMenuSubContent,
             {
               sideOffset: 10,
@@ -498,7 +577,7 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
               }, option.type === "date" && {
                 border: "none !important"
               }), {
-                "p": {
+                p: {
                   margin: "0px !important"
                 },
                 marginBlockEnd: "$10 !important"
@@ -512,63 +591,139 @@ const CustomDropdown = ({ data, onChangeHandler, value }) => {
                 size: "md",
                 value: date,
                 onChange: setDate
-              }, (option == null ? void 0 : option.minValue) && { minValue: string.parseDate(option == null ? void 0 : option.minValue) }), (option == null ? void 0 : option.maxValue) && { maxValue: string.parseDate(option == null ? void 0 : option.maxValue) }), {
+              }, (option == null ? void 0 : option.minValue) && {
+                minValue: string.parseDate(option == null ? void 0 : option.minValue)
+              }), (option == null ? void 0 : option.maxValue) && {
+                maxValue: string.parseDate(option == null ? void 0 : option.maxValue)
+              }), {
                 footerAction: () => {
                   onChangeHandler({
                     id: "responseImportType",
                     value: __spreadProps(__spreadValues({}, option), {
-                      value: dayjs_min.default(date.toString()).format("MMM D, YYYY")
+                      value: dayjs_min.default(date.toString()).format(
+                        "MMM D, YYYY"
+                      )
                     })
                   });
                   setOpen(false);
                 }
               })
             ),
-            option.type === "dateRange" && /* @__PURE__ */ React.createElement(flex.Flex, { css: {
-              paddingInline: "$4 !important",
-              paddingBlock: "$8 !important"
-            }, flexDirection: "column", gap: "$4" }, /* @__PURE__ */ React.createElement(radio.RadioGroup, { defaultValue: value == null ? void 0 : value.value, onChange: (value2) => {
-              var _a3;
-              onChangeHandler({
-                id: "responseImportType",
-                value: __spreadProps(__spreadValues({}, option), {
-                  value: {
-                    type: value2,
-                    value: value2,
-                    label: (_a3 = index.dynamicDateOptions.find((option2) => option2.value === value2)) == null ? void 0 : _a3.label
+            option.type === "dateRange" && /* @__PURE__ */ React.createElement(
+              flex.Flex,
+              {
+                css: {
+                  paddingInline: "$4 !important",
+                  paddingBlock: "$8 !important"
+                },
+                flexDirection: "column",
+                gap: "$4"
+              },
+              /* @__PURE__ */ React.createElement(
+                radio.RadioGroup,
+                {
+                  defaultValue: value == null ? void 0 : value.value,
+                  onChange: (value2) => {
+                    var _a3;
+                    onChangeHandler({
+                      id: "responseImportType",
+                      value: __spreadProps(__spreadValues({}, option), {
+                        value: {
+                          type: value2,
+                          value: value2,
+                          label: (_a3 = index.dynamicDateOptions.find(
+                            (option2) => option2.value === value2
+                          )) == null ? void 0 : _a3.label
+                        }
+                      })
+                    });
                   }
-                })
-              });
-            } }, index.dynamicDateOptions.map((option2) => /* @__PURE__ */ React.createElement(box.Box, { css: {
-              padding: "$4 !important"
-            } }, /* @__PURE__ */ React.createElement(radio.Radio, { value: option2.value }, " ", option2.label, " ")))), ((_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type) === "custom" && /* @__PURE__ */ React.createElement(box.Box, { css: {
-              paddingRight: "$4 !important",
-              position: "relative"
-            } }, /* @__PURE__ */ React.createElement(input.Input, { size: "md", variant: "filled", value: days, onChange: (e) => setDays(e.target.value) }), /* @__PURE__ */ React.createElement(text.Text, { css: {
-              position: "absolute",
-              right: "$8",
-              top: "$3"
-            } }, "Days")), /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "space-between", css: { borderBlockStart: "$borderWidths$xs, solid, $neutral200 !important", padding: "$8" } }, /* @__PURE__ */ React.createElement(button.Button, { size: "sm", variant: "ghost", color: "secondary" }, "Cancel"), /* @__PURE__ */ React.createElement(button.Button, { size: "sm", variant: "ghost", color: "primary", onClick: () => {
-              var _a3, _b2;
-              onChangeHandler({
-                id: "responseImportType",
-                value: __spreadProps(__spreadValues({}, option), {
-                  value: {
-                    type: (_a3 = value == null ? void 0 : value.value) == null ? void 0 : _a3.type,
+                },
+                index.dynamicDateOptions.map((option2) => /* @__PURE__ */ React.createElement(
+                  box.Box,
+                  {
+                    css: {
+                      padding: "$4 !important"
+                    }
+                  },
+                  /* @__PURE__ */ React.createElement(radio.Radio, { value: option2.value }, " ", option2.label, " ")
+                ))
+              ),
+              ((_a2 = value == null ? void 0 : value.value) == null ? void 0 : _a2.type) === "custom" && /* @__PURE__ */ React.createElement(
+                box.Box,
+                {
+                  css: {
+                    paddingRight: "$4 !important",
+                    position: "relative"
+                  }
+                },
+                /* @__PURE__ */ React.createElement(
+                  input.Input,
+                  {
+                    size: "md",
+                    variant: "filled",
                     value: days,
-                    label: (_b2 = value == null ? void 0 : value.value) == null ? void 0 : _b2.label
+                    onChange: (e) => setDays(e.target.value)
                   }
-                })
-              });
-              setOpen(false);
-            } }, "Apply")))
+                ),
+                /* @__PURE__ */ React.createElement(
+                  text.Text,
+                  {
+                    css: {
+                      position: "absolute",
+                      right: "$8",
+                      top: "$3"
+                    }
+                  },
+                  "Days"
+                )
+              ),
+              /* @__PURE__ */ React.createElement(
+                flex.Flex,
+                {
+                  justifyContent: "space-between",
+                  css: {
+                    borderBlockStart: "$borderWidths$xs, solid, $neutral200 !important",
+                    padding: "$8"
+                  }
+                },
+                /* @__PURE__ */ React.createElement(button.Button, { size: "sm", variant: "ghost", color: "secondary" }, "Cancel"),
+                /* @__PURE__ */ React.createElement(
+                  button.Button,
+                  {
+                    size: "sm",
+                    variant: "ghost",
+                    color: "primary",
+                    onClick: () => {
+                      var _a3, _b2;
+                      onChangeHandler({
+                        id: "responseImportType",
+                        value: __spreadProps(__spreadValues({}, option), {
+                          value: {
+                            type: (_a3 = value == null ? void 0 : value.value) == null ? void 0 : _a3.type,
+                            value: days,
+                            label: (_b2 = value == null ? void 0 : value.value) == null ? void 0 : _b2.label
+                          }
+                        })
+                      });
+                      setOpen(false);
+                    }
+                  },
+                  "Apply"
+                )
+              )
+            )
           )))
         );
       }
     })
   ));
 };
-const Configuration = ({ field, configuredFields, responseImportType = null }) => {
+const Configuration = ({
+  field,
+  configuredFields,
+  responseImportType = null
+}) => {
   var _a, _b, _c, _d;
   let fieldValue = null;
   fieldValue = (_b = (_a = configuredFields == null ? void 0 : configuredFields[field.id]) == null ? void 0 : _a.value) != null ? _b : null;
@@ -579,27 +734,43 @@ const Configuration = ({ field, configuredFields, responseImportType = null }) =
   });
   switch (field.fieldType) {
     case "switch":
-      return /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$4", alignItems: "center", css: {
-        marginBlockStart: "$12",
-        borderTop: "$borderWidths$xs solid $neutral200",
-        paddingTop: "$16"
-      } }, /* @__PURE__ */ React.createElement(
-        _switch.Switch,
+      return /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          gap: "$4",
+          alignItems: "center",
+          css: {
+            marginBlockStart: "$12",
+            borderTop: "$borderWidths$xs solid $neutral200",
+            paddingTop: "$16"
+          }
+        },
+        /* @__PURE__ */ React.createElement(
+          _switch.Switch,
+          {
+            disabled: field == null ? void 0 : field.disabled,
+            size: "sm",
+            checked: field == null ? void 0 : field.value,
+            onChange: (value) => field.onChangeHandler({
+              id: field.id,
+              value
+            })
+          }
+        ),
+        /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "regular", css: { color: "$neutral900" } }, field.label)
+      );
+    case "checkbox":
+      return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", alignItems: "start", gap: "$4" }, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$4", alignItems: "center" }, /* @__PURE__ */ React.createElement(
+        checkbox.Checkbox,
         {
           disabled: field == null ? void 0 : field.disabled,
-          size: "sm",
-          checked: field == null ? void 0 : field.value,
+          checked: !!fieldValue,
           onChange: (value) => field.onChangeHandler({
             id: field.id,
             value
           })
         }
-      ), /* @__PURE__ */ React.createElement(text.Text, { size: "md", weight: "regular", css: { color: "$neutral900" } }, field.label));
-    case "checkbox":
-      return /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", alignItems: "start", gap: "$4" }, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$4", alignItems: "center" }, /* @__PURE__ */ React.createElement(checkbox.Checkbox, { disabled: field == null ? void 0 : field.disabled, checked: !!fieldValue, onChange: (value) => field.onChangeHandler({
-        id: field.id,
-        value
-      }) }), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label)), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, field.value ? field.ifChecked() : field.ifUnchecked(responseImportType)));
+      ), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral900" } }, field.label)), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "regular", css: { color: "$neutral500" } }, field.value ? field.ifChecked() : field.ifUnchecked(responseImportType)));
     case "input":
       return /* @__PURE__ */ React.createElement(React.Fragment, null, (field == null ? void 0 : field.id) === "spreadsheet" ? /* @__PURE__ */ React.createElement(React.Fragment, null, ((_c = configuredFields == null ? void 0 : configuredFields.action) == null ? void 0 : _c.value) ? /* @__PURE__ */ React.createElement(
         box.Box,
@@ -777,16 +948,48 @@ const CustomAddNewSelect = ({ field }) => {
 };
 const CustomShareOption = (props) => {
   if (props.data.value === "ADD_NEW") {
-    return /* @__PURE__ */ React.createElement(tooltip.Tooltip, { content: props.data.tooltip || "", css: {
-      zIndex: 999999999,
-      fontFamily: "DM Sans !important"
-    } }, /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { justifyContent: "center", alignItems: "center", css: { cursor: "pointer", zIndex: 999999999 } }, /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", alignItems: "center", css: {
-      color: "$primary500",
-      fontSize: "$sm",
-      fontWeight: "$7"
-    } }, /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: "#4A9CA6" }), "Add Account")))));
+    return /* @__PURE__ */ React.createElement(
+      tooltip.Tooltip,
+      {
+        content: props.data.tooltip || "",
+        css: {
+          zIndex: 999999999,
+          fontFamily: "DM Sans !important"
+        }
+      },
+      /* @__PURE__ */ React.createElement(box.Box, null, /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+        flex.Flex,
+        {
+          justifyContent: "center",
+          alignItems: "center",
+          css: { cursor: "pointer", zIndex: 999999999 }
+        },
+        /* @__PURE__ */ React.createElement(
+          flex.Flex,
+          {
+            gap: "$2",
+            alignItems: "center",
+            css: {
+              color: "$primary500",
+              fontSize: "$sm",
+              fontWeight: "$7"
+            }
+          },
+          /* @__PURE__ */ React.createElement(plus.PlusIcon, { size: 16, color: "#4A9CA6" }),
+          "Add Account"
+        )
+      )))
+    );
   } else {
-    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(flex.Flex, { css: { cursor: "pointer", zIndex: 999999999 }, alignItems: "center", gap: "$2" }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.label)));
+    return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        css: { cursor: "pointer", zIndex: 999999999 },
+        alignItems: "center",
+        gap: "$2"
+      },
+      /* @__PURE__ */ React.createElement(text.Text, { size: "sm" }, props.label)
+    ));
   }
 };
 const CustomSingleValue = (props) => {