@sparrowengg/integrations-templates-frontend 2.1.0-notion-release.35 → 2.1.0-notion-release.37

package/dist/cjs/single-mapping/components/MappingHeader.js

@@ -87,6 +87,11 @@ const MappingHeader = ({
       alignItems: "center",
       justifyContent: "space-between",
       css: {
+        position: "sticky",
+        top: 0,
+        width: "100%",
+        zIndex: 99,
+        background: "#ffff",
         borderBottom: "$borderWidths$xs solid $neutral200",
         padding: "$8 $12"
       }

package/dist/cjs/single-mapping/components/MappingHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MappingHeader.js","sources":["../../../../src/single-mapping/components/MappingHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Box, Button, Flex, Heading, IconButton } from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon, ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport EditConfirmation from \"../../commons/components/edit-confirmation\";\nimport { MappingData } from \"../../commons/types/enhanced\";\nimport { ConfigurationType } from \"../types/configuration.types\";\nimport {\n  hasMappingDataEnabled,\n  hasMappingDataLength,\n  areAllConfigFieldsFilled,\n  isResponseImportSettingsValid,\n} from \"../utils/validation.utils\";\n\ntype MappingHeaderProps = {\n  ssMappingData: MappingData;\n  configuration: ConfigurationType;\n  hasFieldsChanged: boolean;\n  isEditConfirmationOpen: boolean;\n  editField?: any;\n  importResponse: any;\n  hasExistingMapping: boolean;\n  isMappingPage: boolean;\n  navigateConfigPage: (value?: boolean) => void;\n  onSaveHandler: (fields: any) => void;\n  previousMappingHandler?: (value?: boolean) => void;\n  saveConfiguration: () => void;\n  setIsEditConfirmationOpen: (value: boolean) => void;\n};\n\n/**\n * Header component for the single mapping interface\n * Handles navigation between configuration and mapping pages\n */\nexport const MappingHeader: React.FC<MappingHeaderProps> = ({\n  ssMappingData,\n  configuration,\n  hasFieldsChanged,\n  isEditConfirmationOpen,\n  editField,\n  importResponse,\n  hasExistingMapping,\n  isMappingPage,\n  navigateConfigPage,\n  onSaveHandler,\n  previousMappingHandler,\n  saveConfiguration,\n  setIsEditConfirmationOpen,\n}) => {\n  const isButtonDisabled = (): boolean => {\n    if (isMappingPage) {\n      return isMappingPageButtonDisabled();\n    }\n    return isConfigurationPageButtonDisabled();\n  };\n\n  const isMappingPageButtonDisabled = (): boolean => {\n    // In edit mode, check if any fields have changed\n    if (editField?.id) {\n      return !hasFieldsChanged;\n    }\n\n    // Check import method\n    if ((importResponse?.value as any)?.importMethod === \"SEND_ALL_DATA\") {\n      return !hasMappingDataLength(ssMappingData);\n    }\n\n    return !hasMappingDataEnabled(ssMappingData);\n  };\n\n  const isConfigurationPageButtonDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const isMappingNavigationDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const handleSaveClick = () => {\n    if (isMappingPage) {\n      if (editField?.id) {\n        setIsEditConfirmationOpen(true);\n      } else {\n        onSaveHandler({});\n      }\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const handleMappingNavigation = () => {\n    if (isMappingPage) {\n      onSaveHandler({});\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const getButtonText = (): string => {\n    if (isMappingPage) {\n      return editField?.id ? \"Update Mapping\" : \"Save Mapping\";\n    }\n    return \"Continue, Mapping\";\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      {/* Back Button and Title */}\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasExistingMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={() => previousMappingHandler?.()}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editField?.id ? \"Edit Mapping\" : \"New Mapping\"}\n        </Heading>\n      </Flex>\n\n      {/* Navigation Buttons */}\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isMappingPage && navigateConfigPage()}\n        >\n          Configuration\n        </Button>\n        <Arrow />\n        <Button\n          disabled={isMappingNavigationDisabled()}\n          css={{\n            color: isMappingPage ? \"$neutral900\" : \"$neutral800\",\n            cursor: isMappingNavigationDisabled() ? \"not-allowed\" : \"pointer\",\n          }}\n          color=\"default\"\n          variant=\"ghost\"\n          onClick={handleMappingNavigation}\n          size=\"md\"\n        >\n          Mapping\n        </Button>\n      </Flex>\n\n      {/* Save Button */}\n      <Flex justifyContent=\"end\" css={{ width: \"180px\" }}>\n        <Button size=\"lg\" disabled={isButtonDisabled()} onClick={handleSaveClick}>\n          {getButtonText()}\n        </Button>\n      </Flex>\n\n      {/* Edit Confirmation Modal */}\n      {isEditConfirmationOpen && (\n        <EditConfirmation\n          name=\"Are you sure?\"\n          description=\"Saving this updated mapping properties will generate new sheet with the revised mapping.\"\n          onConfirm={async () => {\n            await onSaveHandler({});\n            setIsEditConfirmationOpen(false);\n          }}\n          onCancel={() => {\n            setIsEditConfirmationOpen(false);\n          }}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["hasMappingDataLength","hasMappingDataEnabled","areAllConfigFieldsFilled","isResponseImportSettingsValid","Flex","IconButton","ArrowLeftIcon","Heading","Button","Arrow","EditConfirmation"],"mappings":"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"}
+{"version":3,"file":"MappingHeader.js","sources":["../../../../src/single-mapping/components/MappingHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Box, Button, Flex, Heading, IconButton } from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon, ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport EditConfirmation from \"../../commons/components/edit-confirmation\";\nimport { MappingData } from \"../../commons/types/enhanced\";\nimport { ConfigurationType } from \"../types/configuration.types\";\nimport {\n  hasMappingDataEnabled,\n  hasMappingDataLength,\n  areAllConfigFieldsFilled,\n  isResponseImportSettingsValid,\n} from \"../utils/validation.utils\";\n\ntype MappingHeaderProps = {\n  ssMappingData: MappingData;\n  configuration: ConfigurationType;\n  hasFieldsChanged: boolean;\n  isEditConfirmationOpen: boolean;\n  editField?: any;\n  importResponse: any;\n  hasExistingMapping: boolean;\n  isMappingPage: boolean;\n  navigateConfigPage: (value?: boolean) => void;\n  onSaveHandler: (fields: any) => void;\n  previousMappingHandler?: (value?: boolean) => void;\n  saveConfiguration: () => void;\n  setIsEditConfirmationOpen: (value: boolean) => void;\n};\n\n/**\n * Header component for the single mapping interface\n * Handles navigation between configuration and mapping pages\n */\nexport const MappingHeader: React.FC<MappingHeaderProps> = ({\n  ssMappingData,\n  configuration,\n  hasFieldsChanged,\n  isEditConfirmationOpen,\n  editField,\n  importResponse,\n  hasExistingMapping,\n  isMappingPage,\n  navigateConfigPage,\n  onSaveHandler,\n  previousMappingHandler,\n  saveConfiguration,\n  setIsEditConfirmationOpen,\n}) => {\n  const isButtonDisabled = (): boolean => {\n    if (isMappingPage) {\n      return isMappingPageButtonDisabled();\n    }\n    return isConfigurationPageButtonDisabled();\n  };\n\n  const isMappingPageButtonDisabled = (): boolean => {\n    // In edit mode, check if any fields have changed\n    if (editField?.id) {\n      return !hasFieldsChanged;\n    }\n\n    // Check import method\n    if ((importResponse?.value as any)?.importMethod === \"SEND_ALL_DATA\") {\n      return !hasMappingDataLength(ssMappingData);\n    }\n\n    return !hasMappingDataEnabled(ssMappingData);\n  };\n\n  const isConfigurationPageButtonDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const isMappingNavigationDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const handleSaveClick = () => {\n    if (isMappingPage) {\n      if (editField?.id) {\n        setIsEditConfirmationOpen(true);\n      } else {\n        onSaveHandler({});\n      }\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const handleMappingNavigation = () => {\n    if (isMappingPage) {\n      onSaveHandler({});\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const getButtonText = (): string => {\n    if (isMappingPage) {\n      return editField?.id ? \"Update Mapping\" : \"Save Mapping\";\n    }\n    return \"Continue, Mapping\";\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        position: \"sticky\",\n        top: 0,\n        width: \"100%\",\n        zIndex: 99,\n        background: \"#ffff\",\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      {/* Back Button and Title */}\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasExistingMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={() => previousMappingHandler?.()}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editField?.id ? \"Edit Mapping\" : \"New Mapping\"}\n        </Heading>\n      </Flex>\n\n      {/* Navigation Buttons */}\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isMappingPage && navigateConfigPage()}\n        >\n          Configuration\n        </Button>\n        <Arrow />\n        <Button\n          disabled={isMappingNavigationDisabled()}\n          css={{\n            color: isMappingPage ? \"$neutral900\" : \"$neutral800\",\n            cursor: isMappingNavigationDisabled() ? \"not-allowed\" : \"pointer\",\n          }}\n          color=\"default\"\n          variant=\"ghost\"\n          onClick={handleMappingNavigation}\n          size=\"md\"\n        >\n          Mapping\n        </Button>\n      </Flex>\n\n      {/* Save Button */}\n      <Flex justifyContent=\"end\" css={{ width: \"180px\" }}>\n        <Button size=\"lg\" disabled={isButtonDisabled()} onClick={handleSaveClick}>\n          {getButtonText()}\n        </Button>\n      </Flex>\n\n      {/* Edit Confirmation Modal */}\n      {isEditConfirmationOpen && (\n        <EditConfirmation\n          name=\"Are you sure?\"\n          description=\"Saving this updated mapping properties will generate new sheet with the revised mapping.\"\n          onConfirm={async () => {\n            await onSaveHandler({});\n            setIsEditConfirmationOpen(false);\n          }}\n          onCancel={() => {\n            setIsEditConfirmationOpen(false);\n          }}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["hasMappingDataLength","hasMappingDataEnabled","areAllConfigFieldsFilled","isResponseImportSettingsValid","Flex","IconButton","ArrowLeftIcon","Heading","Button","Arrow","EditConfirmation"],"mappings":"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"}

package/dist/es/single-mapping/components/MappingHeader.js

@@ -85,6 +85,11 @@ const MappingHeader = ({
       alignItems: "center",
       justifyContent: "space-between",
       css: {
+        position: "sticky",
+        top: 0,
+        width: "100%",
+        zIndex: 99,
+        background: "#ffff",
         borderBottom: "$borderWidths$xs solid $neutral200",
         padding: "$8 $12"
       }

package/dist/es/single-mapping/components/MappingHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MappingHeader.js","sources":["../../../../src/single-mapping/components/MappingHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Box, Button, Flex, Heading, IconButton } from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon, ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport EditConfirmation from \"../../commons/components/edit-confirmation\";\nimport { MappingData } from \"../../commons/types/enhanced\";\nimport { ConfigurationType } from \"../types/configuration.types\";\nimport {\n  hasMappingDataEnabled,\n  hasMappingDataLength,\n  areAllConfigFieldsFilled,\n  isResponseImportSettingsValid,\n} from \"../utils/validation.utils\";\n\ntype MappingHeaderProps = {\n  ssMappingData: MappingData;\n  configuration: ConfigurationType;\n  hasFieldsChanged: boolean;\n  isEditConfirmationOpen: boolean;\n  editField?: any;\n  importResponse: any;\n  hasExistingMapping: boolean;\n  isMappingPage: boolean;\n  navigateConfigPage: (value?: boolean) => void;\n  onSaveHandler: (fields: any) => void;\n  previousMappingHandler?: (value?: boolean) => void;\n  saveConfiguration: () => void;\n  setIsEditConfirmationOpen: (value: boolean) => void;\n};\n\n/**\n * Header component for the single mapping interface\n * Handles navigation between configuration and mapping pages\n */\nexport const MappingHeader: React.FC<MappingHeaderProps> = ({\n  ssMappingData,\n  configuration,\n  hasFieldsChanged,\n  isEditConfirmationOpen,\n  editField,\n  importResponse,\n  hasExistingMapping,\n  isMappingPage,\n  navigateConfigPage,\n  onSaveHandler,\n  previousMappingHandler,\n  saveConfiguration,\n  setIsEditConfirmationOpen,\n}) => {\n  const isButtonDisabled = (): boolean => {\n    if (isMappingPage) {\n      return isMappingPageButtonDisabled();\n    }\n    return isConfigurationPageButtonDisabled();\n  };\n\n  const isMappingPageButtonDisabled = (): boolean => {\n    // In edit mode, check if any fields have changed\n    if (editField?.id) {\n      return !hasFieldsChanged;\n    }\n\n    // Check import method\n    if ((importResponse?.value as any)?.importMethod === \"SEND_ALL_DATA\") {\n      return !hasMappingDataLength(ssMappingData);\n    }\n\n    return !hasMappingDataEnabled(ssMappingData);\n  };\n\n  const isConfigurationPageButtonDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const isMappingNavigationDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const handleSaveClick = () => {\n    if (isMappingPage) {\n      if (editField?.id) {\n        setIsEditConfirmationOpen(true);\n      } else {\n        onSaveHandler({});\n      }\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const handleMappingNavigation = () => {\n    if (isMappingPage) {\n      onSaveHandler({});\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const getButtonText = (): string => {\n    if (isMappingPage) {\n      return editField?.id ? \"Update Mapping\" : \"Save Mapping\";\n    }\n    return \"Continue, Mapping\";\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      {/* Back Button and Title */}\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasExistingMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={() => previousMappingHandler?.()}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editField?.id ? \"Edit Mapping\" : \"New Mapping\"}\n        </Heading>\n      </Flex>\n\n      {/* Navigation Buttons */}\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isMappingPage && navigateConfigPage()}\n        >\n          Configuration\n        </Button>\n        <Arrow />\n        <Button\n          disabled={isMappingNavigationDisabled()}\n          css={{\n            color: isMappingPage ? \"$neutral900\" : \"$neutral800\",\n            cursor: isMappingNavigationDisabled() ? \"not-allowed\" : \"pointer\",\n          }}\n          color=\"default\"\n          variant=\"ghost\"\n          onClick={handleMappingNavigation}\n          size=\"md\"\n        >\n          Mapping\n        </Button>\n      </Flex>\n\n      {/* Save Button */}\n      <Flex justifyContent=\"end\" css={{ width: \"180px\" }}>\n        <Button size=\"lg\" disabled={isButtonDisabled()} onClick={handleSaveClick}>\n          {getButtonText()}\n        </Button>\n      </Flex>\n\n      {/* Edit Confirmation Modal */}\n      {isEditConfirmationOpen && (\n        <EditConfirmation\n          name=\"Are you sure?\"\n          description=\"Saving this updated mapping properties will generate new sheet with the revised mapping.\"\n          onConfirm={async () => {\n            await onSaveHandler({});\n            setIsEditConfirmationOpen(false);\n          }}\n          onCancel={() => {\n            setIsEditConfirmationOpen(false);\n          }}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":"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"}
+{"version":3,"file":"MappingHeader.js","sources":["../../../../src/single-mapping/components/MappingHeader.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Box, Button, Flex, Heading, IconButton } from \"@sparrowengg/twigs-react\";\nimport { ArrowLeftIcon, ChevronRightIcon } from \"@sparrowengg/twigs-react-icons\";\nimport Arrow from \"../../commons/icons/arrow\";\nimport EditConfirmation from \"../../commons/components/edit-confirmation\";\nimport { MappingData } from \"../../commons/types/enhanced\";\nimport { ConfigurationType } from \"../types/configuration.types\";\nimport {\n  hasMappingDataEnabled,\n  hasMappingDataLength,\n  areAllConfigFieldsFilled,\n  isResponseImportSettingsValid,\n} from \"../utils/validation.utils\";\n\ntype MappingHeaderProps = {\n  ssMappingData: MappingData;\n  configuration: ConfigurationType;\n  hasFieldsChanged: boolean;\n  isEditConfirmationOpen: boolean;\n  editField?: any;\n  importResponse: any;\n  hasExistingMapping: boolean;\n  isMappingPage: boolean;\n  navigateConfigPage: (value?: boolean) => void;\n  onSaveHandler: (fields: any) => void;\n  previousMappingHandler?: (value?: boolean) => void;\n  saveConfiguration: () => void;\n  setIsEditConfirmationOpen: (value: boolean) => void;\n};\n\n/**\n * Header component for the single mapping interface\n * Handles navigation between configuration and mapping pages\n */\nexport const MappingHeader: React.FC<MappingHeaderProps> = ({\n  ssMappingData,\n  configuration,\n  hasFieldsChanged,\n  isEditConfirmationOpen,\n  editField,\n  importResponse,\n  hasExistingMapping,\n  isMappingPage,\n  navigateConfigPage,\n  onSaveHandler,\n  previousMappingHandler,\n  saveConfiguration,\n  setIsEditConfirmationOpen,\n}) => {\n  const isButtonDisabled = (): boolean => {\n    if (isMappingPage) {\n      return isMappingPageButtonDisabled();\n    }\n    return isConfigurationPageButtonDisabled();\n  };\n\n  const isMappingPageButtonDisabled = (): boolean => {\n    // In edit mode, check if any fields have changed\n    if (editField?.id) {\n      return !hasFieldsChanged;\n    }\n\n    // Check import method\n    if ((importResponse?.value as any)?.importMethod === \"SEND_ALL_DATA\") {\n      return !hasMappingDataLength(ssMappingData);\n    }\n\n    return !hasMappingDataEnabled(ssMappingData);\n  };\n\n  const isConfigurationPageButtonDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const isMappingNavigationDisabled = (): boolean => {\n    const allFieldsFilled = areAllConfigFieldsFilled(configuration.configurationFields);\n    const importSettingsValid = isResponseImportSettingsValid(\n      configuration.configurationFields,\n      configuration.configuredFields\n    );\n\n    return !allFieldsFilled || !importSettingsValid;\n  };\n\n  const handleSaveClick = () => {\n    if (isMappingPage) {\n      if (editField?.id) {\n        setIsEditConfirmationOpen(true);\n      } else {\n        onSaveHandler({});\n      }\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const handleMappingNavigation = () => {\n    if (isMappingPage) {\n      onSaveHandler({});\n    } else {\n      saveConfiguration();\n    }\n  };\n\n  const getButtonText = (): string => {\n    if (isMappingPage) {\n      return editField?.id ? \"Update Mapping\" : \"Save Mapping\";\n    }\n    return \"Continue, Mapping\";\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        position: \"sticky\",\n        top: 0,\n        width: \"100%\",\n        zIndex: 99,\n        background: \"#ffff\",\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\",\n      }}\n    >\n      {/* Back Button and Title */}\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasExistingMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton\n          onClick={() => previousMappingHandler?.()}\n          color=\"default\"\n          icon={<ArrowLeftIcon />}\n          size=\"lg\"\n        />\n        <Heading size=\"h6\">\n          {editField?.id ? \"Edit Mapping\" : \"New Mapping\"}\n        </Heading>\n      </Flex>\n\n      {/* Navigation Buttons */}\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" },\n        }}\n      >\n        <Button\n          css={{ color: !isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isMappingPage && navigateConfigPage()}\n        >\n          Configuration\n        </Button>\n        <Arrow />\n        <Button\n          disabled={isMappingNavigationDisabled()}\n          css={{\n            color: isMappingPage ? \"$neutral900\" : \"$neutral800\",\n            cursor: isMappingNavigationDisabled() ? \"not-allowed\" : \"pointer\",\n          }}\n          color=\"default\"\n          variant=\"ghost\"\n          onClick={handleMappingNavigation}\n          size=\"md\"\n        >\n          Mapping\n        </Button>\n      </Flex>\n\n      {/* Save Button */}\n      <Flex justifyContent=\"end\" css={{ width: \"180px\" }}>\n        <Button size=\"lg\" disabled={isButtonDisabled()} onClick={handleSaveClick}>\n          {getButtonText()}\n        </Button>\n      </Flex>\n\n      {/* Edit Confirmation Modal */}\n      {isEditConfirmationOpen && (\n        <EditConfirmation\n          name=\"Are you sure?\"\n          description=\"Saving this updated mapping properties will generate new sheet with the revised mapping.\"\n          onConfirm={async () => {\n            await onSaveHandler({});\n            setIsEditConfirmationOpen(false);\n          }}\n          onCancel={() => {\n            setIsEditConfirmationOpen(false);\n          }}\n        />\n      )}\n    </Flex>\n  );\n};\n\n"],"names":["React"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparrowengg/integrations-templates-frontend",
-  "version": "2.1.0-notion-release.35",
+  "version": "2.1.0-notion-release.37",
   "license": "MIT",
   "module": "dist/es/index.js",
   "main": "dist/cjs/index.js",