@sparrowengg/integrations-templates-frontend 1.2.4

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

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { c as components } from '../../node_modules/react-select/dist/index-a301f526.esm.js';
+import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { Text } from '../../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__default.createElement(components.Option, __spreadValues({}, props), /* @__PURE__ */ React__default.createElement(Box, { css: { cursor: "pointer" } }, /* @__PURE__ */ React__default.createElement(Text, { size: "sm", css: { lineHeight: "$md", color: "$neutral900" } }, props.label), !!subLabel && /* @__PURE__ */ React__default.createElement(Text, { size: "xs", css: { lineHeight: "$xs", color: "$neutral700" } }, subLabel)));
+};
+
+export { CustomOption as default };
+//# sourceMappingURL=custom-option.js.map

package/dist/es/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":["React"],"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,oDACG,UAAW,CAAA,MAAA,EAAX,mBAAsB,KACrB,CAAA,kBAAAA,cAAA,CAAA,aAAA,CAAC,OAAI,GAAK,EAAA,EAAE,QAAQ,SAAU,EAAA,EAAA,+CAC3B,IAAK,EAAA,EAAA,IAAA,EAAK,MAAK,GAAK,EAAA,EAAE,YAAY,KAAO,EAAA,KAAA,EAAO,aAAc,EAAA,EAAA,EAAI,MAAM,KAAM,CAAA,EAC9E,CAAC,CAAC,QAAA,iDAAa,IAAK,EAAA,EAAA,IAAA,EAAK,MAAK,GAAK,EAAA,EAAE,YAAY,KAAO,EAAA,KAAA,EAAO,eAAkB,EAAA,EAAA,QAAS,CAC7F,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/es/mapping/components/mapping.js

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

package/dist/es/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":["uuid","React"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+import React__default from 'react';
+import { Box } from '../../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+
+const PlaceholderSpan = ({ color, children }) => {
+  return /* @__PURE__ */ React__default.createElement(Box, { as: "span", css: { color } }, children);
+};
+
+export { PlaceholderSpan as default };
+//# sourceMappingURL=placeholder-span.js.map

package/dist/es/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":["React"],"mappings":";;;AAGA,MAAM,eAAkB,GAAA,CAAC,EAAE,KAAA,EAAO,UAAuD,KAAA;AACvF,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAC,OAAI,EAAG,EAAA,MAAA,EAAO,KAAK,EAAE,KAAA,MACnB,QACH,CAAA,CAAA;AAEJ;;;;"}

package/dist/es/mapping/field.js

@@ -0,0 +1,277 @@
+import React__default from 'react';
+import Trash from '../commons/icons/trash.js';
+import CustomMenu from './components/custom-menu.js';
+import { mappingType, subMenuOptions } from '../commons/constants/index.js';
+import { handleMappingOptions } from '../commons/helpers/index.js';
+import Arrow from '../commons/icons/arrow.js';
+import CustomDateMenu from './components/custom-date-menu.js';
+import CustomOption from './components/custom-option.js';
+import PlaceholderSpan from './components/placeholder-span.js';
+import { Flex } from '../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js';
+import { Text } from '../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js';
+import { FormLabel } from '../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js';
+import { Select } from '../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js';
+import { Box } from '../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js';
+import { IconButton } from '../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js';
+import { Input } from '../node_modules/@sparrowengg/twigs-react/dist/es/input/input.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 customStyles = {
+  menuList: (prevStyles) => __spreadProps(__spreadValues({}, prevStyles), {
+    maxHeight: 176
+  })
+};
+const subMenuCustomStyles = {
+  menu: (prevStyles) => __spreadProps(__spreadValues({}, prevStyles), {
+    width: 260,
+    right: 0
+  })
+};
+const Field = ({
+  field,
+  isFirstField,
+  handleFieldValue,
+  ssMappingData,
+  integrationFields,
+  integrationName,
+  hasCustomMenuProperty,
+  isBtnDisabled,
+  removeField,
+  showCustomPropertyModal
+}) => {
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$8" }, (field == null ? void 0 : field.essentialFieldLabel) && /* @__PURE__ */ React__default.createElement(Text, { size: "sm", weight: "bold" }, field.essentialFieldLabel, /* @__PURE__ */ React__default.createElement(PlaceholderSpan, { color: "$negative500" }, "*")), /* @__PURE__ */ React__default.createElement(
+    Flex,
+    {
+      key: field.id,
+      css: {
+        width: "100%",
+        "&:hover": {
+          "& button": {
+            opacity: 1
+          },
+          "& #arrow path": {
+            fill: "$secondary500"
+          }
+        }
+      },
+      alignItems: "center",
+      gap: "$6"
+    },
+    /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$2", css: { width: 144 } }, (isFirstField || field.isEssentialField) && /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Type"), /* @__PURE__ */ React__default.createElement(
+      Select,
+      {
+        placeholder: "Choose",
+        size: "lg",
+        isSearchable: false,
+        value: field == null ? void 0 : field.mappedType,
+        options: mappingType,
+        onChange: (type) => handleFieldValue(field == null ? void 0 : field.id, "type", type),
+        styles: customStyles
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center", css: { flex: 1 }, gap: "11px" }, /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$2", css: { width: "100%" } }, (isFirstField || field.isEssentialField) && /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "SurveySparrow Field"), /* @__PURE__ */ React__default.createElement(
+      Select,
+      {
+        size: "lg",
+        placeholder: "Choose",
+        value: field == null ? void 0 : field.surveySparrowField,
+        onChange: (ssField) => handleFieldValue(field == null ? void 0 : field.id, "surveySparrowField", ssField),
+        options: handleMappingOptions(
+          (_b = (_a = field == null ? void 0 : field.mappedType) == null ? void 0 : _a.value) != null ? _b : "QUESTION",
+          ssMappingData.questions,
+          ssMappingData.contactProperties,
+          ssMappingData.variables,
+          ssMappingData.expressions
+        ),
+        styles: customStyles
+      }
+    )), /* @__PURE__ */ React__default.createElement(
+      Box,
+      {
+        as: "span",
+        id: "arrow",
+        css: {
+          paddingTop: isFirstField || field.isEssentialField ? "$9" : 0
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(Arrow, null)
+    ), /* @__PURE__ */ React__default.createElement(Flex, { flexDirection: "column", gap: "$2", css: { width: "100%" } }, (isFirstField || field.isEssentialField) && /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, `${integrationName} Field`), /* @__PURE__ */ React__default.createElement(Flex, { alignItems: "center" }, /* @__PURE__ */ React__default.createElement(
+      Select,
+      {
+        placeholder: "Choose",
+        size: "lg",
+        value: field == null ? void 0 : field.integrationField,
+        onChange: (integration) => handleFieldValue(field == null ? void 0 : field.id, "integrationField", integration),
+        css: {
+          width: 260,
+          "& .twigs-select__control": {
+            borderTopRightRadius: 0,
+            borderBottomRightRadius: 0
+          }
+        },
+        options: integrationFields,
+        styles: customStyles,
+        components: __spreadValues({}, hasCustomMenuProperty && {
+          Menu: (props) => /* @__PURE__ */ React__default.createElement(
+            CustomMenu,
+            __spreadProps(__spreadValues({}, props), {
+              customOnClick: showCustomPropertyModal
+            })
+          )
+        })
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      Select,
+      {
+        css: {
+          width: 112,
+          "& .twigs-select__control": {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            border: "$borderWidths$xs solid $neutral200"
+          }
+        },
+        isDisabled: !((_c = field == null ? void 0 : field.integrationField) == null ? void 0 : _c.value),
+        value: field == null ? void 0 : field.integrationFieldType,
+        onChange: (integration) => handleFieldValue(
+          field == null ? void 0 : field.id,
+          "integrationFieldType",
+          integration
+        ),
+        styles: subMenuCustomStyles,
+        options: subMenuOptions,
+        closeMenuOnSelect: true,
+        noneOptionHandler: (value) => handleFieldValue(field == null ? void 0 : field.id, "integrationFieldType", value),
+        components: { Menu: CustomMenu, Option: CustomOption },
+        placeholder: "Choose",
+        size: "lg"
+      }
+    ))), /* @__PURE__ */ React__default.createElement(
+      Flex,
+      {
+        flexDirection: "column",
+        gap: "$2",
+        css: { maxWidth: 180, width: "100%" }
+      },
+      (isFirstField || field.isEssentialField) && /* @__PURE__ */ React__default.createElement(FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Default Value (Optional)"),
+      /* @__PURE__ */ React__default.createElement(
+        DefaultField,
+        {
+          handleFieldValue: (value) => {
+            handleFieldValue(field == null ? void 0 : field.id, "defaultValue", value);
+          },
+          integrationFieldType: field == null ? void 0 : field.integrationFieldType,
+          value: (_d = field == null ? void 0 : field.defaultValue) == null ? void 0 : _d.value
+        }
+      )
+    )),
+    !field.isEssentialField && /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        css: {
+          transition: "all .3s ease",
+          marginTop: isFirstField ? "$11" : 0
+        },
+        size: "sm",
+        icon: /* @__PURE__ */ React__default.createElement(Trash, null),
+        variant: "ghost",
+        color: "default",
+        disabled: isBtnDisabled,
+        onClick: removeField
+      }
+    )
+  ));
+};
+const DefaultField = ({
+  integrationFieldType,
+  handleFieldValue,
+  value
+}) => {
+  switch (`${integrationFieldType == null ? void 0 : integrationFieldType.value}`) {
+    case "BOOLEAN":
+      return /* @__PURE__ */ React__default.createElement(
+        Select,
+        {
+          options: [
+            {
+              label: "true",
+              value: "TRUE"
+            },
+            {
+              label: "false",
+              value: "FALSE"
+            }
+          ],
+          size: "lg",
+          value,
+          placeholder: "",
+          onChange: (booleanValue) => handleFieldValue({
+            type: "BOOLEAN",
+            value: booleanValue
+          })
+        }
+      );
+    case "DATE_TIME":
+      return /* @__PURE__ */ React__default.createElement(
+        CustomDateMenu,
+        {
+          value,
+          onChangeHandler: (dateValue) => {
+            handleFieldValue({
+              type: "DATE_TIME",
+              value: dateValue
+            });
+          }
+        }
+      );
+    case "NUMBER":
+      return /* @__PURE__ */ React__default.createElement(
+        Input,
+        {
+          size: "lg",
+          type: "number",
+          placeholder: "",
+          value,
+          onChange: (e) => handleFieldValue({
+            type: "NUMBER",
+            value: e.currentTarget.value
+          })
+        }
+      );
+    default:
+      return /* @__PURE__ */ React__default.createElement(
+        Input,
+        {
+          size: "lg",
+          placeholder: "",
+          value,
+          onChange: (e) => handleFieldValue({
+            type: "STRING",
+            value: e.currentTarget.value
+          })
+        }
+      );
+  }
+};
+
+export { Field as default };
+//# sourceMappingURL=field.js.map