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

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

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

package/dist/cjs/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":["surveySparrowURL","useMappingData","useState","Flex","Spinner","Box","IMPORT_METHODS","Heading","UI_TEXT","RadioGroup","CONFIGURATION_FIELD_IDS","Radio","Tabs","TAB_VALUES","TabsList","mappingTabValues","getAllMappingCount","TabsTrigger","Text","getMappingCount","Chip","MAPPING_FIELD_TYPES","TabsContent","Input","SearchIcon","Tooltip","FONT_FAMILIES","Checkbox","value","CHIP_COLORS"],"mappings":"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"}

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

@@ -0,0 +1,230 @@
+'use strict';
+
+var React = require('react');
+var editConfirmation = require('../../commons/components/edit-confirmation.js');
+var NamingModal = require('../../commons/components/NamingModal.js');
+var arrow = require('../../commons/icons/arrow.js');
+var index$1 = require('../utils/index.js');
+var index = require('../constants/index.js');
+var flex = require('../../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var iconButton = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var arrowLeft = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/arrow-left.js');
+var heading = require('../../node_modules/@sparrowengg/twigs-react/dist/es/heading/heading.js');
+var button = require('../../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] = React.useState(false);
+  const isButtonDisabled = React.useCallback(() => {
+    var _a2, _b, _c;
+    if (isMappingPage) {
+      if (mappingType === index.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) === index.IMPORT_METHODS.SEND_ALL) {
+        return !index$1.hasAnyEnabledFields(ssMappingData);
+      } else {
+        return !index$1.hasAnyEnabledFields(ssMappingData);
+      }
+    } else {
+      const allFieldsDisabled = index$1.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) === index.CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_SETTINGS
+      )) == null ? void 0 : _c.value;
+      if (hasResponseImportSettings) {
+        return allFieldsDisabled || !index$1.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 = React.useCallback(() => {
+    var _a2, _b;
+    const allFieldsDisabled = index$1.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) === index.CONFIGURATION_FIELD_IDS.RESPONSE_IMPORT_SETTINGS
+    )) == null ? void 0 : _b.value;
+    if (hasResponseImportSettings) {
+      return allFieldsDisabled || !index$1.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) ? index.UI_TEXT.UPDATE_MAPPING : index.UI_TEXT.SAVE_MAPPING;
+    }
+    return index.UI_TEXT.CONTINUE_MAPPING;
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "space-between",
+      css: {
+        borderBottom: "$borderWidths$xs solid $neutral200",
+        padding: "$8 $12"
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        gap: "$6",
+        alignItems: "center",
+        css: { visibility: hasExistingMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React.createElement(
+        iconButton.IconButton,
+        {
+          onClick: () => previousMappingHandler == null ? void 0 : previousMappingHandler(),
+          color: "default",
+          icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null),
+          size: "lg"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, (editField == null ? void 0 : editField.id) ? index.UI_TEXT.EDIT_MAPPING : index.UI_TEXT.NEW_MAPPING)
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        alignItems: "center",
+        gap: "$4",
+        css: {
+          "& button": { background: "transparent !important", fontSize: "$md" }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: { color: !isMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md",
+          onClick: () => isMappingPage && navigateConfigPage()
+        },
+        index.UI_TEXT.CONFIGURATION
+      ),
+      /* @__PURE__ */ React.createElement(arrow.default, null),
+      /* @__PURE__ */ React.createElement(
+        button.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"
+        },
+        index.UI_TEXT.MAPPING
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        justifyContent: "end",
+        css: {
+          width: "180px"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          size: "lg",
+          disabled: isButtonDisabled(),
+          onClick: handleSaveClick
+        },
+        getButtonText()
+      )
+    )
+  ), hasNamingModal && isMappingPage && /* @__PURE__ */ React.createElement(
+    NamingModal.default,
+    {
+      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.createElement(
+    editConfirmation.default,
+    {
+      name: index.UI_TEXT.EDIT_CONFIRMATION_TITLE,
+      description: index.UI_TEXT.EDIT_CONFIRMATION_DESCRIPTION,
+      onConfirm: async () => {
+        await onSaveHandler({});
+        setIsEditConfirmationOpen(false);
+      },
+      onCancel: () => {
+        setIsEditConfirmationOpen(false);
+      }
+    }
+  ));
+};
+
+exports.MappingHeader = MappingHeader;
+//# sourceMappingURL=MappingHeader.js.map