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

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

@@ -0,0 +1,380 @@
+import React__default, { useState } from 'react';
+import { surveySparrowURL, mappingTabValues } from '../../commons/constants/index.js';
+import Spinner from '../../commons/components/spinner.js';
+import { useMappingData } from '../hooks/useMappingData.js';
+import { getAllMappingCount, getMappingCount } from '../utils/index.js';
+import { IMPORT_METHODS, UI_TEXT, CONFIGURATION_FIELD_IDS, TAB_VALUES, MAPPING_FIELD_TYPES, FONT_FAMILIES, CHIP_COLORS } from '../constants/index.js';
+import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Heading } from '../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
+import { RadioGroup, Radio } from '../../node_modules/@sparrowengg/twigs-react/dist/es/radio/radio.js';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../node_modules/@sparrowengg/twigs-react/dist/es/tabs/tabs.js';
+import { Text } from '../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { Chip } from '../../node_modules/@sparrowengg/twigs-react/dist/es/chip/chip.js';
+import { Input } from '../../node_modules/@sparrowengg/twigs-react/dist/es/input/input.js';
+import { SearchIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/search.js';
+import { Tooltip } from '../../node_modules/@sparrowengg/twigs-react/dist/es/tooltip/tooltip.js';
+import { Checkbox } from '../../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const Mapping = ({
+  surveyId,
+  apiURL = surveySparrowURL,
+  token,
+  surveyProperties,
+  importResponse,
+  ssMappingData: externalSSMappingData,
+  setSSMappingData: externalSetSSMappingData,
+  editField,
+  setIsInitialLoad,
+  setOriginalMappingData
+}) => {
+  var _a;
+  const { ssMappingData, setSSMappingData, loader, handleFieldValues } = useMappingData({
+    surveyId,
+    apiURL,
+    token,
+    surveyProperties,
+    editField,
+    importResponse,
+    setIsInitialLoad,
+    setOriginalMappingData
+  });
+  React__default.useEffect(() => {
+    externalSetSSMappingData(ssMappingData);
+  }, [ssMappingData, externalSetSSMappingData]);
+  const [searchInput, setSearchInput] = useState("");
+  if (loader) {
+    return /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        justifyContent: "center",
+        css: { height: "calc(100vh - 57px)" }
+      },
+      /* @__PURE__ */ React__default.createElement(Spinner, null)
+    );
+  }
+  return /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", justifyContent: "center" }, /* @__PURE__ */ React__default.createElement(Box, { css: { maxWidth: 650, width: "100%", marginBlock: "$40" } }, (importResponse == null ? void 0 : importResponse.hasImportResponse) && /* @__PURE__ */ React__default.createElement(
+    ImportMethodSelector,
+    {
+      importResponse,
+      ssMappingData
+    }
+  ), ((_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.ImportMethod) === IMPORT_METHODS.SELECTED ? /* @__PURE__ */ React__default.createElement(
+    MappingTabs,
+    {
+      ssMappingData,
+      searchInput,
+      setSearchInput,
+      handleFieldValues
+    }
+  ) : /* @__PURE__ */ React__default.createElement(SendAllDataSummary, { ssMappingData })));
+};
+const ImportMethodSelector = ({
+  importResponse
+}) => {
+  var _a;
+  return /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column" }, /* @__PURE__ */ React__default.createElement(Heading, { size: "h5", css: { color: "$neutral900" } }, UI_TEXT.SELECT_IMPORT_DATA), /* @__PURE__ */ React__default.createElement(
+    RadioGroup,
+    {
+      defaultValue: (_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.ImportMethod,
+      onChange: (value) => {
+        importResponse.onChangeHandler({
+          id: CONFIGURATION_FIELD_IDS.IMPORT_METHOD,
+          value
+        });
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        gap: "$20",
+        css: {
+          marginTop: "$9",
+          "& label": { color: "$neutral800", cursor: "pointer" }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Radio, { size: "md", value: IMPORT_METHODS.SEND_ALL, css: { cursor: "pointer" } }, UI_TEXT.SEND_ALL_DATA),
+      /* @__PURE__ */ React__default.createElement(Radio, { size: "md", value: IMPORT_METHODS.SELECTED, css: { cursor: "pointer" } }, UI_TEXT.SEND_SELECTED_DATA)
+    )
+  ));
+};
+const MappingTabs = ({
+  ssMappingData,
+  searchInput,
+  setSearchInput,
+  handleFieldValues
+}) => {
+  return /* @__PURE__ */ React__default.createElement(Box, { css: { marginTop: "$24" } }, /* @__PURE__ */ React__default.createElement(Tabs, { defaultValue: TAB_VALUES.QUESTIONS }, /* @__PURE__ */ React__default.createElement(TabsList, { css: { borderBottom: "$borderWidths$xs solid $neutral200" } }, mappingTabValues.map((tab) => {
+    const count = getAllMappingCount(ssMappingData[tab.placeholder]);
+    if (tab.value === TAB_VALUES.DERIVED_QUESTIONS && count < 1) {
+      return null;
+    }
+    return /* @__PURE__ */ React__default.createElement(
+      TabsTrigger,
+      {
+        key: tab == null ? void 0 : tab.id,
+        value: tab == null ? void 0 : tab.value,
+        css: { padding: "$6 $4 !important" },
+        onClick: () => setSearchInput("")
+      },
+      /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "bold" }, tab.name),
+      !!getMappingCount(ssMappingData[tab.placeholder]) && /* @__PURE__ */ React__default.createElement(
+        Chip,
+        {
+          css: {
+            marginLeft: "$2",
+            borderRadius: "5px",
+            color: "$neutral800"
+          },
+          variant: "outline",
+          rounded: "sm"
+        },
+        getMappingCount(ssMappingData[tab.placeholder])
+      )
+    );
+  })), /* @__PURE__ */ React__default.createElement(
+    TabsContentComponent,
+    {
+      searchInput,
+      setSearchInput,
+      value: TAB_VALUES.QUESTIONS,
+      placeholder: UI_TEXT.QUESTIONS_LABEL,
+      fields: ssMappingData == null ? void 0 : ssMappingData.questions,
+      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.QUESTIONS, field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    TabsContentComponent,
+    {
+      searchInput,
+      setSearchInput,
+      fields: ssMappingData.variables,
+      value: TAB_VALUES.VARIABLE,
+      placeholder: UI_TEXT.VARIABLES_LABEL,
+      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.VARIABLES, field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    TabsContentComponent,
+    {
+      fields: ssMappingData.contactProperties,
+      searchInput,
+      setSearchInput,
+      value: TAB_VALUES.CONTACT,
+      placeholder: UI_TEXT.CONTACTS_LABEL,
+      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.CONTACT_PROPERTIES, field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    TabsContentComponent,
+    {
+      searchInput,
+      setSearchInput,
+      value: TAB_VALUES.EXPRESSION,
+      placeholder: UI_TEXT.EXPRESSIONS_LABEL,
+      fields: ssMappingData.expressions,
+      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.EXPRESSIONS, field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    TabsContentComponent,
+    {
+      value: TAB_VALUES.PROPERTY,
+      searchInput,
+      setSearchInput,
+      placeholder: UI_TEXT.PROPERTIES_LABEL,
+      fields: ssMappingData.property,
+      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.PROPERTY, field == null ? void 0 : field.id, value)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    TabsContentComponent,
+    {
+      value: TAB_VALUES.DERIVED_QUESTIONS,
+      searchInput,
+      setSearchInput,
+      placeholder: UI_TEXT.DERIVED_QUESTIONS_LABEL,
+      fields: ssMappingData.derivedQuestions,
+      handleFieldValues: (field, value) => handleFieldValues(MAPPING_FIELD_TYPES.DERIVED_QUESTIONS, field == null ? void 0 : field.id, value)
+    }
+  )));
+};
+const TabsContentComponent = ({
+  value,
+  searchInput,
+  setSearchInput,
+  fields,
+  handleFieldValues,
+  placeholder
+}) => {
+  const mappingFields = fields && fields.filter(
+    (field) => {
+      var _a;
+      return (_a = field.name) == null ? void 0 : _a.toLowerCase().includes(searchInput.toLowerCase());
+    }
+  );
+  return /* @__PURE__ */ React__default.createElement(TabsContent, { value, css: { padding: 0, position: "relative" } }, /* @__PURE__ */ React__default.createElement(
+    Input,
+    {
+      leftIcon: /* @__PURE__ */ React__default.createElement(SearchIcon, { color: "#848484" }),
+      variant: "filled",
+      placeholder: `${UI_TEXT.SEARCH_PREFIX} ${placeholder}`,
+      size: "lg",
+      css: { marginTop: "$8" },
+      value: searchInput,
+      onChange: (event) => setSearchInput(event.currentTarget.value)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      css: {
+        padding: "$8 $4 $32 $4",
+        marginTop: "$8",
+        height: "calc(100vh - 408px)",
+        overflow: "auto",
+        scrollbarWidth: "thin",
+        "&::-webkit-scrollbar": {
+          width: "4px"
+        },
+        "& label": {
+          lineHeight: "$sm"
+        }
+      },
+      flexDirection: "column",
+      gap: "$8"
+    },
+    (mappingFields == null ? void 0 : mappingFields.length) > 1 ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, mappingFields.map((field) => /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        key: field.id,
+        css: {
+          label: {
+            color: "$neutral900",
+            fontSize: "$sm",
+            maxWidth: "520px",
+            display: "block",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            cursor: "pointer"
+          }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Tooltip,
+        {
+          content: field.tooltip || "",
+          css: {
+            fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT,
+            zIndex: "9999999 !important"
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(Flex, { css: { width: "fit-content !important" } }, /* @__PURE__ */ React__default.createElement(
+          Checkbox,
+          {
+            size: "sm",
+            checked: field.isEnabled,
+            disabled: field.disabled,
+            onChange: (value2) => handleFieldValues(field, value2)
+          },
+          field.name
+        ))
+      )
+    ))) : /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        justifyContent: "center",
+        css: { marginTop: "$40" }
+      },
+      /* @__PURE__ */ React__default.createElement(Text, { size: "sm" }, UI_TEXT.NO_RESULTS_FOUND)
+    )
+  ), /* @__PURE__ */ React__default.createElement(
+    Box,
+    {
+      css: {
+        position: "absolute",
+        pointerEvents: "none",
+        top: "88%",
+        height: "$25",
+        width: "100%",
+        background: "linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))"
+      }
+    }
+  ));
+};
+const SendAllDataSummary = ({ ssMappingData }) => {
+  const fieldCounts = [
+    {
+      count: getAllMappingCount(ssMappingData.questions) - 1,
+      label: UI_TEXT.QUESTIONS_LABEL,
+      color: CHIP_COLORS.questions
+    },
+    {
+      count: getAllMappingCount(ssMappingData.derivedQuestions) - 1,
+      label: UI_TEXT.ENRICH_LABEL,
+      color: CHIP_COLORS.derivedQuestions
+    },
+    {
+      count: getAllMappingCount(ssMappingData.variables) - 1,
+      label: UI_TEXT.VARIABLES_LABEL,
+      color: CHIP_COLORS.variables
+    },
+    {
+      count: getAllMappingCount(ssMappingData.contactProperties) - 1,
+      label: UI_TEXT.CONTACTS_LABEL,
+      color: CHIP_COLORS.contactProperties
+    },
+    {
+      count: getAllMappingCount(ssMappingData.expressions) - 1,
+      label: UI_TEXT.EXPRESSIONS_LABEL,
+      color: CHIP_COLORS.expressions
+    },
+    {
+      count: getAllMappingCount(ssMappingData.property) - 1,
+      label: UI_TEXT.PROPERTIES_LABEL,
+      color: CHIP_COLORS.property
+    }
+  ];
+  return /* @__PURE__ */ React__default.createElement(Flex, { css: { marginTop: "$16" }, alignItems: "center", gap: "$6" }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "regular", css: { width: "90px", color: "$neutral900" } }, UI_TEXT.THIS_INCLUDES), /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", gap: "$4" }, fieldCounts.map(
+    ({ count, label, color }) => count > 0 && /* @__PURE__ */ React__default.createElement(CustomChip, { key: label, bgColor: color }, count, " ", label)
+  )));
+};
+const CustomChip = ({ children, bgColor, opacity }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Chip,
+    {
+      variant: "solid",
+      css: __spreadProps(__spreadValues(__spreadValues({}, opacity && { backgroundColor: bgColor }), opacity && { backgroundColorOpacity: [bgColor, 0.3] }), {
+        background: bgColor,
+        lineHeight: "$sm",
+        fontWeight: "$4",
+        fontFamily: FONT_FAMILIES.ROBOTO_MONO,
+        "& > * ": {
+          fontFamily: FONT_FAMILIES.ROBOTO_MONO,
+          fontWeight: "$4 !important"
+        }
+      })
+    },
+    children
+  );
+};
+
+export { Mapping as default };
+//# sourceMappingURL=Mapping.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Mapping.js","sources":["../../../../src/dynamic-mapping/components/Mapping.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n  Box,\n  Checkbox,\n  Chip,\n  Flex,\n  Heading,\n  Input,\n  Radio,\n  RadioGroup,\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  Text,\n  Tooltip,\n} from '@sparrowengg/twigs-react';\nimport { SearchIcon } from '@sparrowengg/twigs-react-icons';\nimport { surveySparrowURL, mappingTabValues } from '../../commons/constants';\nimport Spinner from '../../commons/components/spinner';\nimport { useMappingData } from '../hooks/useMappingData';\nimport { MappingComponentProps, SurveyField, CustomChipProps, MappingData } from '../types';\nimport { getMappingCount, getAllMappingCount } from '../utils';\nimport { IMPORT_METHODS, CHIP_COLORS, MAPPING_FIELD_TYPES, UI_TEXT, TAB_VALUES, FONT_FAMILIES, CONFIGURATION_FIELD_IDS } from '../constants';\n\nconst Mapping: React.FC<MappingComponentProps> = ({\n  surveyId,\n  apiURL = surveySparrowURL,\n  token,\n  surveyProperties,\n  importResponse,\n  ssMappingData: externalSSMappingData,\n  setSSMappingData: externalSetSSMappingData,\n  editField,\n  setIsInitialLoad,\n  setOriginalMappingData,\n}) => {\n  const { ssMappingData, setSSMappingData, loader, handleFieldValues } = useMappingData({\n    surveyId,\n    apiURL,\n    token,\n    surveyProperties,\n    editField,\n    importResponse,\n    setIsInitialLoad,\n    setOriginalMappingData,\n  });\n\n  // Sync internal state with external state\n  React.useEffect(() => {\n    externalSetSSMappingData(ssMappingData);\n  }, [ssMappingData, externalSetSSMappingData]);\n\n  const [searchInput, setSearchInput] = useState('');\n\n  if (loader) {\n    return (\n      <Flex\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        css={{ height: 'calc(100vh - 57px)' }}\n      >\n        <Spinner />\n      </Flex>\n    );\n  }\n\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      <Box css={{ maxWidth: 650, width: '100%', marginBlock: '$40' }}>\n        {importResponse?.hasImportResponse && (\n          <ImportMethodSelector\n            importResponse={importResponse}\n            ssMappingData={ssMappingData}\n          />\n        )}\n\n        {importResponse?.value?.ImportMethod === IMPORT_METHODS.SELECTED ? (\n          <MappingTabs\n            ssMappingData={ssMappingData}\n            searchInput={searchInput}\n            setSearchInput={setSearchInput}\n            handleFieldValues={handleFieldValues}\n          />\n        ) : (\n          <SendAllDataSummary ssMappingData={ssMappingData} />\n        )}\n      </Box>\n    </Flex>\n  );\n};\n\nexport default Mapping;\n\n// ==================== Sub Components ====================\n\ninterface ImportMethodSelectorProps {\n  importResponse: MappingComponentProps['importResponse'];\n  ssMappingData: MappingComponentProps['ssMappingData'];\n}\n\nconst ImportMethodSelector: React.FC<ImportMethodSelectorProps> = ({\n  importResponse,\n}) => {\n  return (\n    <Flex flexDirection=\"column\">\n      <Heading size=\"h5\" css={{ color: '$neutral900' }}>\n        {UI_TEXT.SELECT_IMPORT_DATA}\n      </Heading>\n      <RadioGroup\n        defaultValue={importResponse?.value?.ImportMethod}\n        onChange={(value) => {\n          importResponse.onChangeHandler({\n            id: CONFIGURATION_FIELD_IDS.IMPORT_METHOD,\n            value: value,\n          });\n        }}\n      >\n        <Flex\n          alignItems=\"center\"\n          gap=\"$20\"\n          css={{\n            marginTop: '$9',\n            '& label': { color: '$neutral800', cursor: 'pointer' },\n          }}\n        >\n          <Radio size=\"md\" value={IMPORT_METHODS.SEND_ALL} css={{ cursor: 'pointer' }}>\n            {UI_TEXT.SEND_ALL_DATA}\n          </Radio>\n          <Radio size=\"md\" value={IMPORT_METHODS.SELECTED} css={{ cursor: 'pointer' }}>\n            {UI_TEXT.SEND_SELECTED_DATA}\n          </Radio>\n        </Flex>\n      </RadioGroup>\n    </Flex>\n  );\n};\n\ninterface MappingTabsProps {\n  ssMappingData: MappingComponentProps['ssMappingData'];\n  searchInput: string;\n  setSearchInput: React.Dispatch<React.SetStateAction<string>>;\n  handleFieldValues: (type: keyof MappingData, id: string | number, value: boolean) => void;\n}\n\nconst MappingTabs: React.FC<MappingTabsProps> = ({\n  ssMappingData,\n  searchInput,\n  setSearchInput,\n  handleFieldValues,\n}) => {\n  return (\n    <Box css={{ marginTop: '$24' }}>\n      <Tabs defaultValue={TAB_VALUES.QUESTIONS}>\n        <TabsList css={{ borderBottom: '$borderWidths$xs solid $neutral200' }}>\n          {mappingTabValues.map((tab) => {\n            const count = getAllMappingCount(ssMappingData[tab.placeholder as keyof MappingData]);\n            \n            if (tab.value === TAB_VALUES.DERIVED_QUESTIONS && count < 1) {\n              return null;\n            }\n\n            return (\n              <TabsTrigger\n                key={tab?.id}\n                value={tab?.value}\n                css={{ padding: '$6 $4 !important' }}\n                onClick={() => setSearchInput('')}\n              >\n                <Text size=\"sm\" weight=\"bold\">\n                  {tab.name}\n                </Text>\n                {!!getMappingCount(ssMappingData[tab.placeholder as keyof MappingData]) && (\n                  <Chip\n                    css={{\n                      marginLeft: '$2',\n                      borderRadius: '5px',\n                      color: '$neutral800',\n                    }}\n                    variant=\"outline\"\n                    rounded=\"sm\"\n                  >\n                    {getMappingCount(ssMappingData[tab.placeholder as keyof MappingData])}\n                  </Chip>\n                )}\n              </TabsTrigger>\n            );\n          })}\n        </TabsList>\n\n        <TabsContentComponent\n          searchInput={searchInput}\n          setSearchInput={setSearchInput}\n          value={TAB_VALUES.QUESTIONS}\n          placeholder={UI_TEXT.QUESTIONS_LABEL}\n          fields={ssMappingData?.questions}\n          handleFieldValues={(field, value) =>\n            handleFieldValues(MAPPING_FIELD_TYPES.QUESTIONS, field?.id, value)\n          }\n        />\n        <TabsContentComponent\n          searchInput={searchInput}\n          setSearchInput={setSearchInput}\n          fields={ssMappingData.variables}\n          value={TAB_VALUES.VARIABLE}\n          placeholder={UI_TEXT.VARIABLES_LABEL}\n          handleFieldValues={(field, value) =>\n            handleFieldValues(MAPPING_FIELD_TYPES.VARIABLES, field?.id, value)\n          }\n        />\n        <TabsContentComponent\n          fields={ssMappingData.contactProperties}\n          searchInput={searchInput}\n          setSearchInput={setSearchInput}\n          value={TAB_VALUES.CONTACT}\n          placeholder={UI_TEXT.CONTACTS_LABEL}\n          handleFieldValues={(field, value) =>\n            handleFieldValues(MAPPING_FIELD_TYPES.CONTACT_PROPERTIES, field?.id, value)\n          }\n        />\n        <TabsContentComponent\n          searchInput={searchInput}\n          setSearchInput={setSearchInput}\n          value={TAB_VALUES.EXPRESSION}\n          placeholder={UI_TEXT.EXPRESSIONS_LABEL}\n          fields={ssMappingData.expressions}\n          handleFieldValues={(field, value) =>\n            handleFieldValues(MAPPING_FIELD_TYPES.EXPRESSIONS, field?.id, value)\n          }\n        />\n        <TabsContentComponent\n          value={TAB_VALUES.PROPERTY}\n          searchInput={searchInput}\n          setSearchInput={setSearchInput}\n          placeholder={UI_TEXT.PROPERTIES_LABEL}\n          fields={ssMappingData.property}\n          handleFieldValues={(field, value) =>\n            handleFieldValues(MAPPING_FIELD_TYPES.PROPERTY, field?.id, value)\n          }\n        />\n        <TabsContentComponent\n          value={TAB_VALUES.DERIVED_QUESTIONS}\n          searchInput={searchInput}\n          setSearchInput={setSearchInput}\n          placeholder={UI_TEXT.DERIVED_QUESTIONS_LABEL}\n          fields={ssMappingData.derivedQuestions}\n          handleFieldValues={(field, value) =>\n            handleFieldValues(MAPPING_FIELD_TYPES.DERIVED_QUESTIONS, field?.id, value)\n          }\n        />\n      </Tabs>\n    </Box>\n  );\n};\n\ninterface TabsContentComponentProps {\n  value: string;\n  searchInput: string;\n  setSearchInput: React.Dispatch<React.SetStateAction<string>>;\n  fields: SurveyField[];\n  handleFieldValues: (field: SurveyField, value: boolean) => void;\n  placeholder: string;\n}\n\nconst TabsContentComponent: React.FC<TabsContentComponentProps> = ({\n  value,\n  searchInput,\n  setSearchInput,\n  fields,\n  handleFieldValues,\n  placeholder,\n}) => {\n  const mappingFields =\n    fields &&\n    fields.filter((field) =>\n      field.name?.toLowerCase().includes(searchInput.toLowerCase())\n    );\n\n  return (\n    <TabsContent value={value} css={{ padding: 0, position: 'relative' }}>\n      <Input\n        leftIcon={<SearchIcon color=\"#848484\" />}\n        variant=\"filled\"\n        placeholder={`${UI_TEXT.SEARCH_PREFIX} ${placeholder}`}\n        size=\"lg\"\n        css={{ marginTop: '$8' }}\n        value={searchInput}\n        onChange={(event) => setSearchInput(event.currentTarget.value)}\n      />\n      <Flex\n        css={{\n          padding: '$8 $4 $32 $4',\n          marginTop: '$8',\n          height: 'calc(100vh - 408px)',\n          overflow: 'auto',\n          scrollbarWidth: 'thin',\n          '&::-webkit-scrollbar': {\n            width: '4px',\n          },\n          '& label': {\n            lineHeight: '$sm',\n          },\n        }}\n        flexDirection=\"column\"\n        gap=\"$8\"\n      >\n        {mappingFields?.length > 1 ? (\n          <>\n            {mappingFields.map((field) => (\n              <Box\n                key={field.id}\n                css={{\n                  label: {\n                    color: '$neutral900',\n                    fontSize: '$sm',\n                    maxWidth: '520px',\n                    display: 'block',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                    whiteSpace: 'nowrap',\n                    cursor: 'pointer',\n                  },\n                }}\n              >\n                <Tooltip\n                  content={field.tooltip || ''}\n                  css={{\n                    fontFamily: FONT_FAMILIES.DM_SANS_IMPORTANT,\n                    zIndex: '9999999 !important',\n                  }}\n                >\n                  <Flex css={{ width: 'fit-content !important' }}>\n                    <Checkbox\n                      size=\"sm\"\n                      checked={field.isEnabled}\n                      disabled={field.disabled}\n                      onChange={(value) => handleFieldValues(field, value as boolean)}\n                    >\n                      {field.name}\n                    </Checkbox>\n                  </Flex>\n                </Tooltip>\n              </Box>\n            ))}\n          </>\n        ) : (\n          <Flex\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            css={{ marginTop: '$40' }}\n          >\n            <Text size=\"sm\">{UI_TEXT.NO_RESULTS_FOUND}</Text>\n          </Flex>\n        )}\n      </Flex>\n      <Box\n        css={{\n          position: 'absolute',\n          pointerEvents: 'none',\n          top: '88%',\n          height: '$25',\n          width: '100%',\n          background:\n            'linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0))',\n        }}\n      />\n    </TabsContent>\n  );\n};\n\ninterface SendAllDataSummaryProps {\n  ssMappingData: MappingComponentProps['ssMappingData'];\n}\n\nconst SendAllDataSummary: React.FC<SendAllDataSummaryProps> = ({ ssMappingData }) => {\n  const fieldCounts = [\n    {\n      count: getAllMappingCount(ssMappingData.questions) - 1,\n      label: UI_TEXT.QUESTIONS_LABEL,\n      color: CHIP_COLORS.questions,\n    },\n    {\n      count: getAllMappingCount(ssMappingData.derivedQuestions) - 1,\n      label: UI_TEXT.ENRICH_LABEL,\n      color: CHIP_COLORS.derivedQuestions,\n    },\n    {\n      count: getAllMappingCount(ssMappingData.variables) - 1,\n      label: UI_TEXT.VARIABLES_LABEL,\n      color: CHIP_COLORS.variables,\n    },\n    {\n      count: getAllMappingCount(ssMappingData.contactProperties) - 1,\n      label: UI_TEXT.CONTACTS_LABEL,\n      color: CHIP_COLORS.contactProperties,\n    },\n    {\n      count: getAllMappingCount(ssMappingData.expressions) - 1,\n      label: UI_TEXT.EXPRESSIONS_LABEL,\n      color: CHIP_COLORS.expressions,\n    },\n    {\n      count: getAllMappingCount(ssMappingData.property) - 1,\n      label: UI_TEXT.PROPERTIES_LABEL,\n      color: CHIP_COLORS.property,\n    },\n  ];\n\n  return (\n    <Flex css={{ marginTop: '$16' }} alignItems=\"center\" gap=\"$6\">\n      <Text size=\"sm\" weight=\"regular\" css={{ width: '90px', color: '$neutral900' }}>\n        {UI_TEXT.THIS_INCLUDES}\n      </Text>\n      <Flex alignItems=\"center\" gap=\"$4\">\n        {fieldCounts.map(\n          ({ count, label, color }) =>\n            count > 0 && (\n              <CustomChip key={label} bgColor={color}>\n                {count} {label}\n              </CustomChip>\n            )\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n\nconst CustomChip: React.FC<CustomChipProps> = ({ children, bgColor, opacity }) => {\n  return (\n    <Chip\n      variant=\"solid\"\n      css={{\n        ...(opacity && { backgroundColor: bgColor }),\n        ...(opacity && { backgroundColorOpacity: [bgColor, 0.3] }),\n        background: bgColor,\n        lineHeight: '$sm',\n        fontWeight: '$4',\n        fontFamily: FONT_FAMILIES.ROBOTO_MONO,\n        '& > * ': {\n          fontFamily: FONT_FAMILIES.ROBOTO_MONO,\n          fontWeight: '$4 !important',\n        },\n      }}\n    >\n      {children}\n    </Chip>\n  );\n};\n"],"names":["React","value"],"mappings":"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"}

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

@@ -0,0 +1,228 @@
+import React__default, { useState, useCallback } from 'react';
+import EditConfirmation from '../../commons/components/edit-confirmation.js';
+import NamingModal from '../../commons/components/NamingModal.js';
+import ArrowIcon from '../../commons/icons/arrow.js';
+import { hasAnyEnabledFields, hasEmptyConfigurationFields, hasResponseImportType } from '../utils/index.js';
+import { MAPPING_TYPES, IMPORT_METHODS, CONFIGURATION_FIELD_IDS, UI_TEXT } from '../constants/index.js';
+import { Flex } from '../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { IconButton } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { ArrowLeftIcon } from '../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js';
+import { Heading } from '../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js';
+import { Button } from '../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js';
+
+const MappingHeader = ({
+  hasNamingModal,
+  isEditConfirmationOpen,
+  editField,
+  importResponse,
+  hasExistingMapping,
+  ssMappingData,
+  isMappingPage,
+  navigateConfigPage,
+  onSaveHandler,
+  previousMappingHandler,
+  saveConfiguration,
+  configuration,
+  setIsEditConfirmationOpen,
+  hasFieldsChanged,
+  mappingType,
+  essentialFields,
+  commonFields
+}) => {
+  var _a;
+  const [isNamingModalOpen, setIsNamingModalOpen] = useState(false);
+  const isButtonDisabled = useCallback(() => {
+    var _a2, _b, _c;
+    if (isMappingPage) {
+      if (mappingType === MAPPING_TYPES.MULTI) {
+        return !(essentialFields == null ? void 0 : essentialFields.length) ? commonFields == null ? void 0 : commonFields.every(
+          (field) => !(field == null ? void 0 : field.integrationField) && !(field == null ? void 0 : field.surveySparrowField)
+        ) : essentialFields == null ? void 0 : essentialFields.some(
+          (field) => !(field == null ? void 0 : field.surveySparrowField)
+        );
+      }
+      if (editField == null ? void 0 : editField.id) {
+        return !hasFieldsChanged;
+      }
+      if (((_a2 = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a2.ImportMethod) === IMPORT_METHODS.SEND_ALL) {
+        return !hasAnyEnabledFields(ssMappingData);
+      } else {
+        return !hasAnyEnabledFields(ssMappingData);
+      }
+    } else {
+      const allFieldsDisabled = hasEmptyConfigurationFields(
+        configuration == null ? void 0 : configuration.configurationFields
+      );
+      const hasResponseImportSettings = (_c = (_b = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _b.find(
+        (field) => (field == null ? void 0 : field.id) === CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_SETTINGS
+      )) == null ? void 0 : _c.value;
+      if (hasResponseImportSettings) {
+        return allFieldsDisabled || !hasResponseImportType(configuration == null ? void 0 : configuration.configuredFields);
+      }
+      return allFieldsDisabled;
+    }
+  }, [
+    isMappingPage,
+    mappingType,
+    essentialFields,
+    commonFields,
+    editField == null ? void 0 : editField.id,
+    hasFieldsChanged,
+    (_a = importResponse == null ? void 0 : importResponse.value) == null ? void 0 : _a.ImportMethod,
+    ssMappingData,
+    configuration
+  ]);
+  const isMappingPageDisabled = useCallback(() => {
+    var _a2, _b;
+    const allFieldsDisabled = hasEmptyConfigurationFields(
+      configuration == null ? void 0 : configuration.configurationFields
+    );
+    const hasResponseImportSettings = (_b = (_a2 = configuration == null ? void 0 : configuration.configurationFields) == null ? void 0 : _a2.find(
+      (field) => (field == null ? void 0 : field.id) === CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_SETTINGS
+    )) == null ? void 0 : _b.value;
+    if (hasResponseImportSettings) {
+      return allFieldsDisabled || !hasResponseImportType(configuration == null ? void 0 : configuration.configuredFields);
+    }
+    return allFieldsDisabled;
+  }, [configuration]);
+  const handleSaveClick = () => {
+    if (hasNamingModal && isMappingPage) {
+      setIsNamingModalOpen(true);
+    } else {
+      if (isMappingPage) {
+        if (editField == null ? void 0 : editField.id) {
+          setIsEditConfirmationOpen(true);
+        } else {
+          onSaveHandler({});
+        }
+      } else {
+        saveConfiguration();
+      }
+    }
+  };
+  const getButtonText = () => {
+    if (isMappingPage) {
+      return (editField == null ? void 0 : editField.id) ? UI_TEXT.UPDATE_MAPPING : UI_TEXT.SAVE_MAPPING;
+    }
+    return UI_TEXT.CONTINUE_MAPPING;
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasExistingMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        IconButton,
+        {
+          onClick: () => previousMappingHandler == null ? void 0 : previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React__default.createElement(ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(Heading, { size: "h6" }, (editField == null ? void 0 : editField.id) ? UI_TEXT.EDIT_MAPPING : UI_TEXT.NEW_MAPPING)
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          css: { color: !isMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isMappingPage && navigateConfigPage()
+        },
+        UI_TEXT.CONFIGURATION
+      ),
+      /* @__PURE__ */ React__default.createElement(ArrowIcon, null),
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          disabled: isMappingPageDisabled(),
+          css: {
+            color: isMappingPage ? "$neutral900" : "$neutral800",
+            cursor: isMappingPageDisabled() ? "not-allowed" : "pointer"
+          },
+          color: "default",
+          variant: "ghost",
+          onClick: () => {
+            if (isMappingPage) {
+              onSaveHandler({});
+            } else {
+              saveConfiguration();
+            }
+          },
+          size: "md"
+        },
+        UI_TEXT.MAPPING
+      )
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        justifyContent: "end",
+        css: {
+          width: "180px"
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          size: "lg",
+          disabled: isButtonDisabled(),
+          onClick: handleSaveClick
+        },
+        getButtonText()
+      )
+    )
+  ), hasNamingModal && isMappingPage && /* @__PURE__ */ React__default.createElement(
+    NamingModal,
+    {
+      editFieldId: editField == null ? void 0 : editField.id,
+      saveHandler: () => onSaveHandler(editField == null ? void 0 : editField.id),
+      closeHandler: () => setIsNamingModalOpen(false),
+      value: (configuration == null ? void 0 : configuration.currentMappingName) || "",
+      setValue: (value) => {
+        var _a2;
+        return (_a2 = configuration == null ? void 0 : configuration.setMappingName) == null ? void 0 : _a2.call(configuration, value);
+      },
+      isOpen: isNamingModalOpen
+    }
+  ), isEditConfirmationOpen && /* @__PURE__ */ React__default.createElement(
+    EditConfirmation,
+    {
+      name: UI_TEXT.EDIT_CONFIRMATION_TITLE,
+      description: UI_TEXT.EDIT_CONFIRMATION_DESCRIPTION,
+      onConfirm: async () => {
+        await onSaveHandler({});
+        setIsEditConfirmationOpen(false);
+      },
+      onCancel: () => {
+        setIsEditConfirmationOpen(false);
+      }
+    }
+  ));
+};
+
+export { MappingHeader };
+//# sourceMappingURL=MappingHeader.js.map