@sparrowengg/integrations-templates-frontend 1.2.4

package/dist/cjs/mapping/components/custom-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-menu.js","sources":["../../../../src/mapping/components/custom-menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { components } from \"react-select\";\nimport { Box, Flex, Text } from \"@sparrowengg/twigs-react\";\nimport { PlusIcon } from \"@sparrowengg/twigs-react-icons\";\n\nconst CustomMenu = (props: any) => {\n  return (\n    <components.Menu {...props}>\n      <Box\n        css={{\n          paddingBottom: \"$4\",\n          marginBlock: \"$6 $4\",\n          borderBottom: \"$borderWidths$xs solid $neutral100\"\n        }}\n      >\n        <Text\n          onClick={() => {\n            props.selectProps?.noneOptionHandler({\n              label: \"None\",\n              value: \"NONE\"\n            });\n            props.selectProps?.onMenuClose();\n          }}\n          size=\"sm\"\n          css={{ padding: \"$3 $6\", color: \"$neutral900\", cursor: \"pointer\" }}\n        >\n          None\n        </Text>\n      </Box>\n      {props.children}\n      <Flex\n        onClick={() => props?.selectProps?.customOnClick()}\n        css={{\n          background: \"rgba(100, 116, 139, 0.06)\",\n          padding: \"$6 $8\"\n        }}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n      >\n        <Text size=\"xs\" css={{ color: \"$neutral600\", lineHeight: \"$xs\" }}>\n          Select the right data type for the mapping to prevent errors when\n          sharing value.\n        </Text>\n      </Flex>\n    </components.Menu>\n  );\n};\n\nexport default CustomMenu;\n"],"names":["components","Box","Text","Flex"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKM,MAAA,UAAA,GAAa,CAAC,KAAe,KAAA;AACjC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAAA,mBAAA,CAAW,IAAX,EAAA,cAAA,CAAA,EAAA,EAAoB,KACnB,CAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA;AAAA,QACH,aAAe,EAAA,IAAA;AAAA,QACf,WAAa,EAAA,OAAA;AAAA,QACb,YAAc,EAAA,oCAAA;AAAA,OAChB;AAAA,KAAA;AAAA,oBAEA,KAAA,CAAA,aAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAS,MAAM;AAhBzB,UAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAiBY,UAAM,CAAA,EAAA,GAAA,KAAA,CAAA,WAAA,KAAN,mBAAmB,iBAAkB,CAAA;AAAA,YACnC,KAAO,EAAA,MAAA;AAAA,YACP,KAAO,EAAA,MAAA;AAAA,WACT,CAAA,CAAA;AACA,UAAA,CAAA,EAAA,GAAA,KAAA,CAAM,gBAAN,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,EAAA,CAAA;AAAA,SACrB;AAAA,QACA,IAAK,EAAA,IAAA;AAAA,QACL,KAAK,EAAE,OAAA,EAAS,SAAS,KAAO,EAAA,aAAA,EAAe,QAAQ,SAAU,EAAA;AAAA,OAAA;AAAA,MAClE,MAAA;AAAA,KAED;AAAA,GACF,EACC,MAAM,QACP,kBAAA,KAAA,CAAA,aAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAS,MAAG;AA/BpB,QAAA,IAAA,EAAA,CAAA;AA+BuB,QAAA,OAAA,CAAA,EAAA,GAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,CAAO,gBAAP,IAAoB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,aAAA,EAAA,CAAA;AAAA,OAAA;AAAA,MACnC,GAAK,EAAA;AAAA,QACH,UAAY,EAAA,2BAAA;AAAA,QACZ,OAAS,EAAA,OAAA;AAAA,OACX;AAAA,MACA,UAAW,EAAA,QAAA;AAAA,MACX,cAAe,EAAA,QAAA;AAAA,KAAA;AAAA,oBAEf,KAAA,CAAA,aAAA,CAACD,SAAK,EAAA,EAAA,IAAA,EAAK,IAAK,EAAA,GAAA,EAAK,EAAE,KAAA,EAAO,aAAe,EAAA,UAAA,EAAY,KAAM,EAAA,EAAA,EAAG,kFAGlE,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/mapping/components/custom-option.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var indexA301f526_esm = require('../../node_modules/react-select/dist/index-a301f526.esm.js');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+
+var __defProp = Object.defineProperty;
+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;
+};
+const CustomOption = (props) => {
+  var _a;
+  const subLabel = (_a = props.options.find((option) => option.value === props.value)) == null ? void 0 : _a.subLabel;
+  return /* @__PURE__ */ React.createElement(indexA301f526_esm.c.Option, __spreadValues({}, props), /* @__PURE__ */ React.createElement(box.Box, { css: { cursor: "pointer" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { lineHeight: "$md", color: "$neutral900" } }, props.label), !!subLabel && /* @__PURE__ */ React.createElement(text.Text, { size: "xs", css: { lineHeight: "$xs", color: "$neutral700" } }, subLabel)));
+};
+
+exports.default = CustomOption;
+//# sourceMappingURL=custom-option.js.map

package/dist/cjs/mapping/components/custom-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-option.js","sources":["../../../../src/mapping/components/custom-option.tsx"],"sourcesContent":["import { Box, Text } from \"@sparrowengg/twigs-react\";\nimport React from \"react\";\nimport { components } from \"react-select\";\n\nconst CustomOption = (props: any) => {\n  const subLabel = props.options.find((option: any) => option.value === props.value)?.subLabel;\n  return (\n    <components.Option {...props}>\n      <Box css={{ cursor: \"pointer\" }}>\n        <Text size=\"sm\" css={{ lineHeight: \"$md\", color: \"$neutral900\" }}>{props.label}</Text>\n        {!!subLabel && <Text size=\"xs\" css={{ lineHeight: \"$xs\", color: \"$neutral700\" }}>{subLabel}</Text>}\n      </Box>\n    </components.Option>\n  );\n};\n\nexport default CustomOption;\n"],"names":["components","Box","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIM,MAAA,YAAA,GAAe,CAAC,KAAe,KAAA;AAJrC,EAAA,IAAA,EAAA,CAAA;AAKE,EAAM,MAAA,QAAA,GAAA,CAAW,EAAM,GAAA,KAAA,CAAA,OAAA,CAAQ,IAAK,CAAA,CAAC,MAAgB,KAAA,MAAA,CAAO,KAAU,KAAA,KAAA,CAAM,KAAK,CAAA,KAAhE,IAAmE,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,CAAA;AACpF,EAAA,2CACGA,mBAAW,CAAA,MAAA,EAAX,mBAAsB,KACrB,CAAA,kBAAA,KAAA,CAAA,aAAA,CAACC,WAAI,GAAK,EAAA,EAAE,QAAQ,SAAU,EAAA,EAAA,sCAC3BC,SAAK,EAAA,EAAA,IAAA,EAAK,MAAK,GAAK,EAAA,EAAE,YAAY,KAAO,EAAA,KAAA,EAAO,aAAc,EAAA,EAAA,EAAI,MAAM,KAAM,CAAA,EAC9E,CAAC,CAAC,QAAA,wCAAaA,SAAK,EAAA,EAAA,IAAA,EAAK,MAAK,GAAK,EAAA,EAAE,YAAY,KAAO,EAAA,KAAA,EAAO,eAAkB,EAAA,EAAA,QAAS,CAC7F,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/cjs/mapping/components/mapping.js

@@ -0,0 +1,286 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../commons/constants/index.js');
+var index$1 = require('../services/index.js');
+var importModal = require('../../commons/components/import-modal.js');
+var spinner = require('../../commons/components/spinner.js');
+var field = require('../field.js');
+var placeholderSpan = require('./placeholder-span.js');
+var v4 = require('../../node_modules/uuid/dist/esm-browser/v4.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 text = require('../../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var button = require('../../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var plus = require('../../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/plus.js');
+var select = require('../../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var checkbox = require('../../node_modules/@sparrowengg/twigs-react/dist/es/checkbox/checkbox.js');
+var formLabel = require('../../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.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 = ({
+  integrationName,
+  surveyId,
+  fields,
+  setFields,
+  integrationFields,
+  hasCustomMenuProperty,
+  setIntegrationFields,
+  apiURL = index.surveySparrowURL,
+  token,
+  surveyDetails,
+  customList,
+  oldResponse
+}) => {
+  const [ssMappingData, setSSMappingData] = React.useState({
+    questions: [],
+    variables: [],
+    contactProperties: [],
+    expressions: []
+  });
+  const [showCustomPropertyModal, setShowCustomPropertyModal] = React.useState(false);
+  const [customPropertyField, setCustomPropertyField] = React.useState("");
+  const [loader, setLoader] = React.useState(true);
+  const essentialFields = fields == null ? void 0 : fields.filter((field) => field == null ? void 0 : field.isEssentialField);
+  const commonFields = fields == null ? void 0 : fields.filter((field) => !(field == null ? void 0 : field.isEssentialField));
+  const handleFieldValue = (id, property, value) => {
+    setFields(
+      fields == null ? void 0 : fields.map((field) => {
+        if (field.id === id) {
+          return property === "type" ? __spreadProps(__spreadValues({}, field), { surveySparrowField: null, mappedType: value, id }) : __spreadProps(__spreadValues({}, field), { [property]: value });
+        } else {
+          return __spreadValues({}, field);
+        }
+      })
+    );
+  };
+  const hasRequiredProps = () => !!fields && !!setFields && !!integrationFields && !!setIntegrationFields && !!token;
+  const fetchInitalMappingData = async () => {
+    setLoader(true);
+    try {
+      const [questions, variables, contactProperties, expressions] = await Promise.all([
+        index$1.fetchSurveyQuestions(apiURL, surveyId, token),
+        index$1.fetchSurveyVariables(apiURL, surveyId, token),
+        index$1.fetchContactProperties(apiURL, token),
+        index$1.fetchSurveyExpression(apiURL, surveyId, token)
+      ]);
+      setSSMappingData({
+        questions,
+        contactProperties,
+        variables,
+        expressions
+      });
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setLoader(false);
+    }
+  };
+  const getEssentailFieldsNumber = (length) => {
+    var _a;
+    const numberMapping = {
+      1: "one",
+      2: "two",
+      3: "three",
+      4: "four",
+      5: "five",
+      6: "six",
+      7: "seven",
+      8: "eight",
+      9: "nine",
+      10: "ten"
+    };
+    return (_a = numberMapping[length]) != null ? _a : "These";
+  };
+  React.useEffect(() => {
+    setFields(
+      (fields == null ? void 0 : fields.length) === 0 ? [__spreadValues({}, index.defaultFieldValue)] : fields == null ? void 0 : fields.map((field) => __spreadProps(__spreadValues({}, field), { id: v4.default() }))
+    );
+    if (!!token && (token == null ? void 0 : token.length) > 60 && !!surveyId) {
+      fetchInitalMappingData();
+    } else {
+      setLoader(false);
+    }
+  }, [token, surveyId]);
+  return /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", justifyContent: "center" }, hasRequiredProps() ? /* @__PURE__ */ React.createElement(React.Fragment, null, loader ? /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      css: { height: "calc(100vh - 57px)" }
+    },
+    /* @__PURE__ */ React.createElement(spinner.Spinner, null)
+  ) : /* @__PURE__ */ React.createElement(box.Box, { css: { maxWidth: 1120, width: "100%", marginBlock: "$40" } }, /* @__PURE__ */ React.createElement(
+    heading.Heading,
+    {
+      size: "h5",
+      css: { color: "$neutral900" }
+    },
+    `Map to ${integrationName}`
+  ), /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", css: { marginTop: "$4" } }, /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral500" } }, "Survey Name:"), /* @__PURE__ */ React.createElement(text.Text, { size: "sm", css: { color: "$neutral800" } }, surveyDetails.surveyName)), !!(essentialFields == null ? void 0 : essentialFields.length) && /* @__PURE__ */ React.createElement(
+    box.Box,
+    {
+      css: {
+        width: "100%",
+        paddingBlock: "$12 $20",
+        borderBottom: "$borderWidths$xs dashed $neutral200",
+        maxWidth: 1084
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      text.Text,
+      {
+        size: "md",
+        css: {
+          color: "$neutral500",
+          lineHeight: "$md",
+          marginTop: "$4"
+        }
+      },
+      "This connection requires",
+      " ",
+      /* @__PURE__ */ React.createElement(placeholderSpan.default, { color: "$neutral600" }, getEssentailFieldsNumber(essentialFields == null ? void 0 : essentialFields.length)),
+      /* @__PURE__ */ React.createElement(placeholderSpan.default, { color: "$negative500" }, "*"),
+      " ",
+      "Essential mapping"
+    ),
+    /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        flexDirection: "column",
+        gap: "$20",
+        css: { marginTop: "$12" }
+      },
+      essentialFields == null ? void 0 : essentialFields.map((field$1, idx) => /* @__PURE__ */ React.createElement(
+        field.default,
+        {
+          key: field$1.id,
+          field: field$1,
+          integrationName,
+          handleFieldValue: (id, property, value) => handleFieldValue(id, property, value),
+          hasCustomMenuProperty,
+          integrationFields,
+          isBtnDisabled: commonFields.length === 1,
+          isFirstField: idx === 0,
+          ssMappingData,
+          showCustomPropertyModal: () => {
+            setShowCustomPropertyModal(true);
+          }
+        }
+      ))
+    )
+  ), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$16", css: { marginTop: "$16" } }, commonFields == null ? void 0 : commonFields.map((field$1, idx) => {
+    return /* @__PURE__ */ React.createElement(
+      field.default,
+      {
+        key: field$1.id,
+        field: field$1,
+        integrationName,
+        removeField: () => {
+          setFields(
+            (prev) => prev.filter(
+              (currentField) => currentField.id !== field$1.id
+            )
+          );
+        },
+        handleFieldValue: (id, property, value) => handleFieldValue(id, property, value),
+        hasCustomMenuProperty,
+        integrationFields,
+        isBtnDisabled: commonFields.length === 1,
+        isFirstField: idx === 0,
+        ssMappingData,
+        showCustomPropertyModal: () => {
+          setShowCustomPropertyModal(true);
+        }
+      }
+    );
+  })), !!commonFields.length && /* @__PURE__ */ React.createElement(
+    button.Button,
+    {
+      leftIcon: /* @__PURE__ */ React.createElement(plus.PlusIcon, null),
+      color: "default",
+      css: { marginTop: "$10" },
+      onClick: () => setFields([
+        ...fields,
+        __spreadProps(__spreadValues({}, index.defaultFieldValue), {
+          id: v4.default()
+        })
+      ]),
+      size: "md"
+    },
+    "New mapping field"
+  ), (customList == null ? void 0 : customList.hasCustomList) && /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { marginTop: "$40" },
+      flexDirection: "column",
+      gap: "$8"
+    },
+    /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$3" }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, "Choose a List"), /* @__PURE__ */ React.createElement(text.Text, { css: { color: "$neutral500" }, size: "sm" }, "Pick a list to save mapped fields; If not, they'll be saved under all profiles.")),
+    /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        css: { maxWidth: 400, width: "100%" },
+        size: "lg",
+        options: customList.options,
+        value: customList.value,
+        placeholder: "",
+        onChange: (value) => customList.onChangeHandler(value)
+      }
+    )
+  ), (oldResponse == null ? void 0 : oldResponse.hasOldResponse) && /* @__PURE__ */ React.createElement(
+    checkbox.Checkbox,
+    {
+      onChange: (value) => oldResponse.onChangeHandler(value),
+      css: { marginBlock: "$8", cursor: "pointer" },
+      checked: oldResponse.value
+    },
+    /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "sm" }, "Import Old Response")
+  ), showCustomPropertyModal && /* @__PURE__ */ React.createElement(
+    importModal.default,
+    {
+      onCloseHandler: () => setShowCustomPropertyModal(false),
+      onInputHandler: (value) => setCustomPropertyField(value),
+      onSaveHandler: () => {
+        setIntegrationFields && setIntegrationFields((prev) => [
+          ...prev,
+          {
+            label: customPropertyField,
+            value: customPropertyField
+          }
+        ]);
+        setShowCustomPropertyModal(false);
+      }
+    }
+  ))) : /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      alignItems: "center",
+      justifyContent: "center",
+      css: { height: "100%" }
+    },
+    /* @__PURE__ */ React.createElement(heading.Heading, { size: "h4", weight: "bold" }, "Provide the needed props to import Mapping Template")
+  ));
+};
+
+exports.Mapping = Mapping;
+//# sourceMappingURL=mapping.js.map

package/dist/cjs/mapping/components/mapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mapping.js","sources":["../../../../src/mapping/components/mapping.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Checkbox,\n  Flex,\n  FormLabel,\n  Heading,\n  Select,\n  Text\n} from \"@sparrowengg/twigs-react\";\nimport React, { useEffect, useState } from \"react\";\nimport { PlusIcon } from \"@sparrowengg/twigs-react-icons\";\nimport { defaultFieldValue, surveySparrowURL } from \"../../commons/constants\";\nimport { v4 as uuid } from \"uuid\";\nimport {\n  fetchContactProperties,\n  fetchSurveyQuestions,\n  fetchSurveyVariables,\n  fetchSurveyExpression\n} from \"../services\";\nimport { MappingTypeProps, ssMappingDataResponse } from \"../types\";\nimport ImportModal from \"../../commons/components/import-modal\";\nimport { Spinner } from \"../../commons/components/spinner\";\nimport Field from \"../field\";\nimport PlaceholderSpan from \"./placeholder-span\";\n\nexport const Mapping = ({\n  integrationName,\n  surveyId,\n  fields,\n  setFields,\n  integrationFields,\n  hasCustomMenuProperty,\n  setIntegrationFields,\n  apiURL = surveySparrowURL,\n  token,\n  surveyDetails,\n  customList,\n  oldResponse\n}: MappingTypeProps) => {\n  const [ssMappingData, setSSMappingData] = useState<\n    ssMappingDataResponse<any>\n  >({\n    questions: [],\n    variables: [],\n    contactProperties: [],\n    expressions: []\n  });\n  const [showCustomPropertyModal, setShowCustomPropertyModal] = useState(false);\n  const [customPropertyField, setCustomPropertyField] = useState(\"\");\n  const [loader, setLoader] = useState(true);\n  const essentialFields = fields?.filter((field) => field?.isEssentialField);\n  const commonFields = fields?.filter((field) => !field?.isEssentialField);\n\n  const handleFieldValue = (id: string, property: string, value: any) => {\n    setFields(\n      fields?.map((field) => {\n        if (field.id === id) {\n          return property === \"type\"\n            ? { ...field, surveySparrowField: null, mappedType: value, id }\n            : { ...field, [property]: value };\n        } else {\n          return { ...field };\n        }\n      })\n    );\n  };\n  const hasRequiredProps = () =>\n    !!fields &&\n    !!setFields &&\n    !!integrationFields &&\n    !!setIntegrationFields &&\n    !!token;\n\n  const fetchInitalMappingData = async () => {\n    setLoader(true);\n    try {\n      const [questions, variables, contactProperties, expressions] =\n        await Promise.all([\n          fetchSurveyQuestions(apiURL, surveyId, token),\n          fetchSurveyVariables(apiURL, surveyId, token),\n          fetchContactProperties(apiURL, token),\n          fetchSurveyExpression(apiURL, surveyId, token)\n        ]);\n      setSSMappingData({\n        questions,\n        contactProperties,\n        variables,\n        expressions\n      });\n    } catch (error) {\n      console.error(error);\n    } finally {\n      setLoader(false);\n    }\n  };\n\n  const getEssentailFieldsNumber = (length: number): string => {\n    const numberMapping: any = {\n      1: 'one',\n      2: 'two',\n      3: 'three',\n      4: 'four',\n      5: 'five',\n      6: 'six',\n      7: 'seven',\n      8: 'eight',\n      9: 'nine',\n      10: 'ten'\n    };\n    return numberMapping[length] ?? 'These';\n  }\n\n  useEffect(() => {\n    setFields(\n      fields?.length === 0\n        ? [{ ...defaultFieldValue }]\n        : fields?.map((field) => ({ ...field, id: uuid() }))\n    );\n    if (!!token && token?.length > 60 && !!surveyId) {\n      fetchInitalMappingData();\n    } else {\n      setLoader(false);\n    }\n  }, [token, surveyId]);\n\n  return (\n    <Flex alignItems=\"center\" justifyContent=\"center\">\n      {hasRequiredProps() ? (\n        <>\n          {loader ? (\n            <Flex\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              css={{ height: \"calc(100vh - 57px)\" }}\n            >\n              <Spinner />\n            </Flex>\n          ) : (\n            <Box css={{ maxWidth: 1120, width: \"100%\", marginBlock: \"$40\" }}>\n              <Heading\n                size=\"h5\"\n                css={{ color: \"$neutral900\" }}\n              >{`Map to ${integrationName}`}</Heading>\n              <Flex gap=\"$2\" css={{ marginTop: \"$4\" }}>\n                <Text size=\"sm\" css={{ color: \"$neutral500\" }}>\n                  Survey Name:\n                </Text>\n                <Text size=\"sm\" css={{ color: \"$neutral800\" }}>\n                  {surveyDetails.surveyName}\n                </Text>\n              </Flex>\n              {!!essentialFields?.length && (\n                <Box\n                  css={{\n                    width: \"100%\",\n                    paddingBlock: \"$12 $20\",\n                    borderBottom: \"$borderWidths$xs dashed $neutral200\",\n                    maxWidth: 1084\n                  }}\n                >\n                  <Text\n                    size=\"md\"\n                    css={{\n                      color: \"$neutral500\",\n                      lineHeight: \"$md\",\n                      marginTop: \"$4\"\n                    }}\n                  >\n                    This connection requires{\" \"}\n                    <PlaceholderSpan color=\"$neutral600\">{getEssentailFieldsNumber(essentialFields?.length)}</PlaceholderSpan>\n                    <PlaceholderSpan color=\"$negative500\">\n                      *\n                    </PlaceholderSpan>{\" \"}\n                    Essential mapping\n                  </Text>\n                  <Flex\n                    flexDirection=\"column\"\n                    gap=\"$20\"\n                    css={{ marginTop: \"$12\" }}\n                  >\n                    {essentialFields?.map((field, idx) => (\n                      <Field\n                        key={field.id}\n                        field={field}\n                        integrationName={integrationName}\n                        handleFieldValue={(id, property, value) =>\n                          handleFieldValue(id, property, value)\n                        }\n                        hasCustomMenuProperty={hasCustomMenuProperty}\n                        integrationFields={integrationFields}\n                        isBtnDisabled={commonFields.length === 1}\n                        isFirstField={idx === 0}\n                        ssMappingData={ssMappingData}\n                        showCustomPropertyModal={() => {\n                          setShowCustomPropertyModal(true);\n                        }}\n                      />\n                    ))}\n                  </Flex>\n                </Box>\n              )}\n              <Flex flexDirection=\"column\" gap=\"$16\" css={{ marginTop: \"$16\" }}>\n                {commonFields?.map((field, idx) => {\n                  return (\n                    <Field\n                      key={field.id}\n                      field={field}\n                      integrationName={integrationName}\n                      removeField={() => {\n                        setFields((prev) =>\n                          prev.filter(\n                            (currentField) => currentField.id !== field.id\n                          )\n                        );\n                      }}\n                      handleFieldValue={(id, property, value) =>\n                        handleFieldValue(id, property, value)\n                      }\n                      hasCustomMenuProperty={hasCustomMenuProperty}\n                      integrationFields={integrationFields}\n                      isBtnDisabled={commonFields.length === 1}\n                      isFirstField={idx === 0}\n                      ssMappingData={ssMappingData}\n                      showCustomPropertyModal={() => {\n                        setShowCustomPropertyModal(true);\n                      }}\n                    />\n                  );\n                })}\n              </Flex>\n              {!!commonFields.length && (\n                <Button\n                  leftIcon={<PlusIcon />}\n                  color=\"default\"\n                  css={{ marginTop: \"$10\" }}\n                  onClick={() =>\n                    setFields([\n                      ...fields,\n                      {\n                        ...defaultFieldValue,\n                        id: uuid()\n                      }\n                    ])\n                  }\n                  size=\"md\"\n                >\n                  New mapping field\n                </Button>\n              )}\n\n              {/* Custom List */}\n              {customList?.hasCustomList && (\n                <Flex\n                  css={{ marginTop: \"$40\" }}\n                  flexDirection=\"column\"\n                  gap=\"$8\"\n                >\n                  <Flex flexDirection=\"column\" gap=\"$3\">\n                    <Heading size=\"h5\">Choose a List</Heading>\n                    <Text css={{ color: \"$neutral500\" }} size=\"sm\">\n                      Pick a list to save mapped fields; If not, they'll be\n                      saved under all profiles.\n                    </Text>\n                  </Flex>\n                  <Select\n                    css={{ maxWidth: 400, width: \"100%\" }}\n                    size=\"lg\"\n                    options={customList.options}\n                    value={customList.value}\n                    placeholder=\"\"\n                    onChange={(value) => customList.onChangeHandler(value)}\n                  />\n                </Flex>\n              )}\n              {/* Old Response */}\n              {oldResponse?.hasOldResponse && (\n                <Checkbox\n                  onChange={(value) => oldResponse.onChangeHandler(value)}\n                  css={{ marginBlock: \"$8\", cursor: \"pointer\" }}\n                  checked={oldResponse.value as boolean}\n                >\n                  <FormLabel size=\"sm\">Import Old Response</FormLabel>\n                </Checkbox>\n              )}\n              {showCustomPropertyModal && (\n                <ImportModal\n                  onCloseHandler={() => setShowCustomPropertyModal(false)}\n                  onInputHandler={(value) => setCustomPropertyField(value)}\n                  onSaveHandler={() => {\n                    setIntegrationFields &&\n                      setIntegrationFields((prev) => [\n                        ...prev,\n                        {\n                          label: customPropertyField,\n                          value: customPropertyField\n                        }\n                      ]);\n                    setShowCustomPropertyModal(false);\n                  }}\n                />\n              )}\n            </Box>\n          )}\n        </>\n      ) : (\n        <Flex\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          css={{ height: \"100%\" }}\n        >\n          <Heading size=\"h4\" weight=\"bold\">\n            Provide the needed props to import Mapping Template\n          </Heading>\n        </Flex>\n      )}\n    </Flex>\n  );\n};\n"],"names":["surveySparrowURL","useState","fetchSurveyQuestions","fetchSurveyVariables","fetchContactProperties","fetchSurveyExpression","useEffect","defaultFieldValue","uuid","Flex","Spinner","Box","Heading","Text","PlaceholderSpan","field","Field","Button","PlusIcon","Select","Checkbox","FormLabel","ImportModal"],"mappings":"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"}

package/dist/cjs/mapping/components/placeholder-span.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var box = require('../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+
+const PlaceholderSpan = ({ color, children }) => {
+  return /* @__PURE__ */ React.createElement(box.Box, { as: "span", css: { color } }, children);
+};
+
+exports.default = PlaceholderSpan;
+//# sourceMappingURL=placeholder-span.js.map

package/dist/cjs/mapping/components/placeholder-span.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder-span.js","sources":["../../../../src/mapping/components/placeholder-span.tsx"],"sourcesContent":["import { Box } from \"@sparrowengg/twigs-react\";\nimport React, { ReactNode } from \"react\";\n\nconst PlaceholderSpan = ({ color, children }: { color: string, children: ReactNode }) => {\n  return (\n    <Box as=\"span\" css={{ color: color }}>\n      {children}\n    </Box>\n  )\n}\n\nexport default PlaceholderSpan;\n"],"names":["Box"],"mappings":";;;;;;;AAGA,MAAM,eAAkB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAuD,KAAA;AACvF,EACE,uBAAA,KAAA,CAAA,aAAA,CAACA,WAAI,EAAG,EAAA,MAAA,EAAO,KAAK,EAAE,KAAA,MACnB,QACH,CAAA,CAAA;AAEJ;;;;"}