@sparrowengg/integrations-templates-frontend 1.2.4

package/dist/cjs/mapping/field.js

@@ -0,0 +1,281 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var trash = require('../commons/icons/trash.js');
+var customMenu = require('./components/custom-menu.js');
+var index = require('../commons/constants/index.js');
+var index$1 = require('../commons/helpers/index.js');
+var arrow = require('../commons/icons/arrow.js');
+var customDateMenu = require('./components/custom-date-menu.js');
+var customOption = require('./components/custom-option.js');
+var placeholderSpan = require('./components/placeholder-span.js');
+var flex = require('../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.js');
+var text = require('../node_modules/@sparrowengg/twigs-react/dist/es/text/text.js');
+var formLabel = require('../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
+var select = require('../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var box = require('../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var iconButton = require('../node_modules/@sparrowengg/twigs-react/dist/es/button/icon-button.js');
+var input = require('../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.createElement(flex.Flex, { flexDirection: "column", gap: "$8" }, (field == null ? void 0 : field.essentialFieldLabel) && /* @__PURE__ */ React.createElement(text.Text, { size: "sm", weight: "bold" }, field.essentialFieldLabel, /* @__PURE__ */ React.createElement(placeholderSpan.default, { color: "$negative500" }, "*")), /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      key: field.id,
+      css: {
+        width: "100%",
+        "&:hover": {
+          "& button": {
+            opacity: 1
+          },
+          "& #arrow path": {
+            fill: "$secondary500"
+          }
+        }
+      },
+      alignItems: "center",
+      gap: "$6"
+    },
+    /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2", css: { width: 144 } }, (isFirstField || field.isEssentialField) && /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Type"), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        placeholder: "Choose",
+        size: "lg",
+        isSearchable: false,
+        value: field == null ? void 0 : field.mappedType,
+        options: index.mappingType,
+        onChange: (type) => handleFieldValue(field == null ? void 0 : field.id, "type", type),
+        styles: customStyles
+      }
+    )),
+    /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center", css: { flex: 1 }, gap: "11px" }, /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2", css: { width: "100%" } }, (isFirstField || field.isEssentialField) && /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "SurveySparrow Field"), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        size: "lg",
+        placeholder: "Choose",
+        value: field == null ? void 0 : field.surveySparrowField,
+        onChange: (ssField) => handleFieldValue(field == null ? void 0 : field.id, "surveySparrowField", ssField),
+        options: index$1.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.createElement(
+      box.Box,
+      {
+        as: "span",
+        id: "arrow",
+        css: {
+          paddingTop: isFirstField || field.isEssentialField ? "$9" : 0
+        }
+      },
+      /* @__PURE__ */ React.createElement(arrow.default, null)
+    ), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$2", css: { width: "100%" } }, (isFirstField || field.isEssentialField) && /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, `${integrationName} Field`), /* @__PURE__ */ React.createElement(flex.Flex, { alignItems: "center" }, /* @__PURE__ */ React.createElement(
+      select.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.createElement(
+            customMenu.default,
+            __spreadProps(__spreadValues({}, props), {
+              customOnClick: showCustomPropertyModal
+            })
+          )
+        })
+      }
+    ), /* @__PURE__ */ React.createElement(
+      select.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: index.subMenuOptions,
+        closeMenuOnSelect: true,
+        noneOptionHandler: (value) => handleFieldValue(field == null ? void 0 : field.id, "integrationFieldType", value),
+        components: { Menu: customMenu.default, Option: customOption.default },
+        placeholder: "Choose",
+        size: "lg"
+      }
+    ))), /* @__PURE__ */ React.createElement(
+      flex.Flex,
+      {
+        flexDirection: "column",
+        gap: "$2",
+        css: { maxWidth: 180, width: "100%" }
+      },
+      (isFirstField || field.isEssentialField) && /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Default Value (Optional)"),
+      /* @__PURE__ */ React.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.createElement(
+      iconButton.IconButton,
+      {
+        css: {
+          transition: "all .3s ease",
+          marginTop: isFirstField ? "$11" : 0
+        },
+        size: "sm",
+        icon: /* @__PURE__ */ React.createElement(trash.default, 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.createElement(
+        select.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.createElement(
+        customDateMenu.default,
+        {
+          value,
+          onChangeHandler: (dateValue) => {
+            handleFieldValue({
+              type: "DATE_TIME",
+              value: dateValue
+            });
+          }
+        }
+      );
+    case "NUMBER":
+      return /* @__PURE__ */ React.createElement(
+        input.Input,
+        {
+          size: "lg",
+          type: "number",
+          placeholder: "",
+          value,
+          onChange: (e) => handleFieldValue({
+            type: "NUMBER",
+            value: e.currentTarget.value
+          })
+        }
+      );
+    default:
+      return /* @__PURE__ */ React.createElement(
+        input.Input,
+        {
+          size: "lg",
+          placeholder: "",
+          value,
+          onChange: (e) => handleFieldValue({
+            type: "STRING",
+            value: e.currentTarget.value
+          })
+        }
+      );
+  }
+};
+
+exports.default = Field;
+//# sourceMappingURL=field.js.map

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

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

package/dist/cjs/mapping/index.js

@@ -0,0 +1,227 @@
+'use strict';
+
+var React = require('react');
+var arrow = require('../commons/icons/arrow.js');
+var mapping = require('./components/mapping.js');
+var index = require('../commons/constants/index.js');
+var themeProvider = require('../node_modules/@sparrowengg/twigs-react/dist/es/theme-provider/theme-provider.js');
+var box = require('../node_modules/@sparrowengg/twigs-react/dist/es/box/box.js');
+var flex = require('../node_modules/@sparrowengg/twigs-react/dist/es/flex/flex.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 formLabel = require('../node_modules/@sparrowengg/twigs-react/dist/es/form-label/form-label.js');
+var select = require('../node_modules/@sparrowengg/twigs-react/dist/es/select/select.js');
+var button = require('../node_modules/@sparrowengg/twigs-react/dist/es/button/button.js');
+var chevronRight = require('../node_modules/@sparrowengg/twigs-react-icons/dist/es/icons/chevron-right.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');
+
+const Mapping = ({
+  surveyDetails,
+  integrationName,
+  fields,
+  setFields,
+  integrationFields,
+  setIntegrationFields,
+  apiURL = index.surveySparrowURL,
+  token,
+  accounts,
+  events,
+  actions,
+  isMappingPage,
+  navigateMappingPage,
+  customList,
+  oldResponse,
+  hasPreviousMapping,
+  onSaveHandler,
+  editField,
+  previousMappingHandler
+}) => {
+  const [previousMapping, setPreviousMapping] = React.useState(hasPreviousMapping != null ? hasPreviousMapping : false);
+  React.useEffect(() => {
+    if (!!(editField == null ? void 0 : editField.id)) {
+      navigateMappingPage(true);
+      setFields(editField.fieldValues);
+      setPreviousMapping(true);
+    }
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    themeProvider.ThemeProvider,
+    {
+      theme: {
+        fonts: {
+          body: "DM Sans, Roboto Mono, sans-serif",
+          heading: "DM Sans, Roboto Mono,  sans-serif"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { height: "100vh", width: "100vw" } }, /* @__PURE__ */ React.createElement(
+      MappingHeader,
+      {
+        hasPreviousMapping: previousMapping,
+        isMappingPage,
+        fields,
+        editFieldId: editField == null ? void 0 : editField.id,
+        onSaveHandler,
+        navigateEventPage: () => navigateMappingPage(false),
+        previousMappingHandler
+      }
+    ), !isMappingPage ? /* @__PURE__ */ React.createElement(
+      EventSetup,
+      {
+        surveyDetails,
+        accounts,
+        events,
+        actions,
+        navigateMappingPage
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      mapping.Mapping,
+      {
+        fields,
+        setFields,
+        surveyDetails,
+        integrationFields,
+        setIntegrationFields,
+        surveyId: surveyDetails.surveyId,
+        token,
+        apiURL,
+        integrationName,
+        customList,
+        oldResponse
+      }
+    ))
+  );
+};
+const EventSetup = ({
+  surveyDetails,
+  accounts,
+  events,
+  actions,
+  navigateMappingPage
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    flex.Flex,
+    {
+      css: { paddingTop: "$40" },
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    /* @__PURE__ */ React.createElement(box.Box, { css: { width: 488 } }, /* @__PURE__ */ React.createElement(heading.Heading, { size: "h5" }, "Account Details"), /* @__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)), /* @__PURE__ */ React.createElement(flex.Flex, { flexDirection: "column", gap: "$8", css: { marginTop: "$16" } }, (accounts == null ? void 0 : accounts.hasAccounts) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Account"), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        value: accounts.value,
+        options: accounts.options,
+        placeholder: "",
+        onChange: (value) => accounts.onChangeHandler(value),
+        size: "lg"
+      }
+    )), (events == null ? void 0 : events.hasEvents) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Object"), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        options: events.options,
+        value: events.value,
+        placeholder: "",
+        onChange: (value) => events.onChangeHandler(value),
+        size: "lg"
+      }
+    )), (actions == null ? void 0 : actions.hasActions) && /* @__PURE__ */ React.createElement(flex.Flex, { gap: "$2", flexDirection: "column" }, /* @__PURE__ */ React.createElement(formLabel.FormLabel, { size: "xs", css: { fontWeight: "$5" } }, "Choose Action"), /* @__PURE__ */ React.createElement(
+      select.Select,
+      {
+        size: "lg",
+        options: actions.options,
+        value: actions.value,
+        placeholder: "",
+        onChange: (value) => actions.onChangeHandler(value)
+      }
+    ))), /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        rightIcon: /* @__PURE__ */ React.createElement(chevronRight.ChevronRightIcon, null),
+        css: { marginTop: "$16" },
+        onClick: () => navigateMappingPage()
+      },
+      "Continue, Mapping"
+    ))
+  );
+};
+const MappingHeader = ({
+  hasPreviousMapping,
+  isMappingPage,
+  fields,
+  navigateEventPage,
+  onSaveHandler,
+  previousMappingHandler,
+  editFieldId
+}) => {
+  const hasAllValues = (field) => {
+    return (field == null ? void 0 : field.surveySparrowField) !== null && (field == null ? void 0 : field.defaultValue) !== null && (field == null ? void 0 : field.integrationField) !== null && (field == null ? void 0 : field.integrationFieldType) !== null;
+  };
+  return /* @__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: hasPreviousMapping ? "visible" : "hidden" }
+      },
+      /* @__PURE__ */ React.createElement(iconButton.IconButton, { onClick: () => previousMappingHandler(), color: "default", icon: /* @__PURE__ */ React.createElement(arrowLeft.ArrowLeftIcon, null), size: "lg" }),
+      /* @__PURE__ */ React.createElement(heading.Heading, { size: "h6" }, "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 && navigateEventPage()
+        },
+        "Event Setup"
+      ),
+      /* @__PURE__ */ React.createElement(arrow.default, null),
+      /* @__PURE__ */ React.createElement(
+        button.Button,
+        {
+          css: { color: isMappingPage ? "$neutral900" : "$neutral800" },
+          color: "default",
+          variant: "ghost",
+          size: "md"
+        },
+        "Mapping"
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      button.Button,
+      {
+        size: "lg",
+        disabled: !fields.some(hasAllValues),
+        onClick: () => onSaveHandler(editFieldId),
+        css: { visibility: isMappingPage ? "visible" : "hidden" }
+      },
+      "Save Mapping"
+    )
+  );
+};
+
+exports.Mapping = Mapping;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/mapping/index.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  Flex,\n  FormLabel,\n  Heading,\n  IconButton,\n  Select,\n  Text,\n  ThemeProvider\n} from \"@sparrowengg/twigs-react\";\nimport {\n  ArrowLeftIcon,\n  ChevronRightIcon\n} from \"@sparrowengg/twigs-react-icons\";\nimport React, { useEffect, useState } from \"react\";\nimport Arrow from \"../commons/icons/arrow\";\nimport { Mapping as FieldMapping } from \"./components/mapping\";\nimport { surveySparrowURL } from \"../commons/constants\";\nimport { CustomListFieldType, FieldType, OldResponseFieldType } from \"./types\";\n\ntype FieldMappingPropsType = {\n  surveyDetails: {\n    surveyName: string;\n    surveyId: string | number;\n  };\n  integrationName: string;\n  fields: Array<FieldType>;\n  setFields: React.Dispatch<React.SetStateAction<Array<FieldType>>>;\n  integrationFields: any;\n  setIntegrationFields: React.Dispatch<React.SetStateAction<any>>;\n  apiURL: string;\n  token: string;\n  accounts: {\n    hasAccounts: boolean;\n    options: Array<any>;\n    value: { label: string; value: string } | null | boolean;\n    onChangeHandler: (value: any) => void;\n  };\n  events: {\n    hasEvents: boolean;\n    options: Array<any>;\n    value: { label: string; value: string } | null | boolean;\n    onChangeHandler: (value: any) => void;\n  };\n  actions: {\n    hasActions: boolean;\n    options: Array<any>;\n    value: { label: string; value: string } | null | boolean;\n    onChangeHandler: (value: any) => void;\n  };\n  isMappingPage: boolean;\n  navigateMappingPage: (value?: boolean) => void;\n  customList: CustomListFieldType;\n  oldResponse: OldResponseFieldType;\n  hasPreviousMapping: boolean;\n  onSaveHandler: () => void;\n  editField: any;\n  previousMappingHandler: (value?: boolean) => void;\n  onDeleteHandler?: (id: string | number) => void;\n};\n\nexport const Mapping = ({\n  surveyDetails,\n  integrationName,\n  fields,\n  setFields,\n  integrationFields,\n  setIntegrationFields,\n  apiURL = surveySparrowURL,\n  token,\n  accounts,\n  events,\n  actions,\n  isMappingPage,\n  navigateMappingPage,\n  customList,\n  oldResponse,\n  hasPreviousMapping,\n  onSaveHandler,\n  editField,\n  previousMappingHandler\n}: FieldMappingPropsType) => {\n\n  const [previousMapping, setPreviousMapping] = useState(hasPreviousMapping ?? false);\n\n  useEffect(() => {\n    if (!!editField?.id) {\n      navigateMappingPage(true);\n      setFields(editField.fieldValues);\n      setPreviousMapping(true);\n    }\n  }, []);\n\n  return (\n    <ThemeProvider\n      theme={{\n        fonts: {\n          body: \"DM Sans, Roboto Mono, sans-serif\",\n          heading: \"DM Sans, Roboto Mono,  sans-serif\"\n        }\n      }}\n    >\n      <Box css={{ height: \"100vh\", width: \"100vw\" }}>\n        <MappingHeader\n          hasPreviousMapping={previousMapping}\n          isMappingPage={isMappingPage}\n          fields={fields}\n          editFieldId={editField?.id}\n          onSaveHandler={onSaveHandler}\n          navigateEventPage={() => navigateMappingPage(false)}\n          previousMappingHandler={previousMappingHandler}\n        />\n        {!isMappingPage ? (\n          <EventSetup\n            surveyDetails={surveyDetails}\n            accounts={accounts}\n            events={events}\n            actions={actions}\n            navigateMappingPage={navigateMappingPage}\n          />\n        ) : (\n          <FieldMapping\n            fields={fields}\n            setFields={setFields}\n            surveyDetails={surveyDetails}\n            integrationFields={integrationFields}\n            setIntegrationFields={setIntegrationFields}\n            surveyId={surveyDetails.surveyId}\n            token={token}\n            apiURL={apiURL}\n            integrationName={integrationName}\n            customList={customList}\n            oldResponse={oldResponse}\n          />\n        )}\n      </Box>\n    </ThemeProvider>\n  );\n};\n\ntype EventSetupProps = {\n  surveyDetails: {\n    surveyName: string;\n    surveyId: number | string;\n  };\n  accounts: {\n    hasAccounts: boolean;\n    options: Array<any>;\n    value: { label: string; value: string } | null | boolean;\n    onChangeHandler: (value: any) => void;\n  };\n  events: {\n    hasEvents: boolean;\n    options: Array<any>;\n    value: { label: string; value: string } | null | boolean;\n    onChangeHandler: (value: any) => void;\n  };\n  actions: {\n    hasActions: boolean;\n    options: Array<any>;\n    value: { label: string; value: string } | null | boolean;\n    onChangeHandler: (value: any) => void;\n  };\n  navigateMappingPage: (value?: boolean) => void;\n};\n\nconst EventSetup = ({\n  surveyDetails,\n  accounts,\n  events,\n  actions,\n  navigateMappingPage\n}: EventSetupProps) => {\n  return (\n    <Flex\n      css={{ paddingTop: \"$40\" }}\n      alignItems=\"center\"\n      justifyContent=\"center\"\n    >\n      <Box css={{ width: 488 }}>\n        <Heading size=\"h5\">Account Details</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        <Flex flexDirection=\"column\" gap=\"$8\" css={{ marginTop: \"$16\" }}>\n          {accounts?.hasAccounts && (\n            <Flex gap=\"$2\" flexDirection=\"column\">\n              <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                Choose Account\n              </FormLabel>\n              <Select\n                value={accounts.value}\n                options={accounts.options}\n                placeholder=\"\"\n                onChange={(value) => accounts.onChangeHandler(value)}\n                size=\"lg\"\n              />\n            </Flex>\n          )}\n          {events?.hasEvents && (\n            <Flex gap=\"$2\" flexDirection=\"column\">\n              <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                Choose Object\n              </FormLabel>\n              <Select\n                options={events.options}\n                value={events.value}\n                placeholder=\"\"\n                onChange={(value) => events.onChangeHandler(value)}\n                size=\"lg\"\n              />\n            </Flex>\n          )}\n          {actions?.hasActions && (\n            <Flex gap=\"$2\" flexDirection=\"column\">\n              <FormLabel size=\"xs\" css={{ fontWeight: \"$5\" }}>\n                Choose Action\n              </FormLabel>\n              <Select\n                size=\"lg\"\n                options={actions.options}\n                value={actions.value}\n                placeholder=\"\"\n                onChange={(value) => actions.onChangeHandler(value)}\n              />\n            </Flex>\n          )}\n        </Flex>\n        <Button\n          size=\"lg\"\n          rightIcon={<ChevronRightIcon />}\n          css={{ marginTop: \"$16\" }}\n          onClick={() => navigateMappingPage()}\n        >\n          Continue, Mapping\n        </Button>\n      </Box>\n    </Flex>\n  );\n};\n\ntype MappingHeaderProps = {\n  hasPreviousMapping: boolean;\n  isMappingPage: boolean;\n  fields: Array<FieldType>;\n  navigateEventPage: () => void;\n  onSaveHandler: (editFieldId?: string | number) => void;\n  previousMappingHandler: (value?: boolean) => void;\n  editFieldId: string | number;\n};\n\nconst MappingHeader = ({\n  hasPreviousMapping,\n  isMappingPage,\n  fields,\n  navigateEventPage,\n  onSaveHandler,\n  previousMappingHandler,\n  editFieldId\n}: MappingHeaderProps) => {\n  \n  const hasAllValues = (field: FieldType) => {\n    return (\n      field?.surveySparrowField !== null &&\n      field?.defaultValue !== null &&\n      field?.integrationField !== null &&\n      field?.integrationFieldType !== null\n    );\n  };\n\n  return (\n    <Flex\n      alignItems=\"center\"\n      justifyContent=\"space-between\"\n      css={{\n        borderBottom: \"$borderWidths$xs solid $neutral200\",\n        padding: \"$8 $12\"\n      }}\n    >\n      <Flex\n        gap=\"$6\"\n        alignItems=\"center\"\n        css={{ visibility: hasPreviousMapping ? \"visible\" : \"hidden\" }}\n      >\n        <IconButton onClick={() => previousMappingHandler()} color=\"default\" icon={<ArrowLeftIcon />} size=\"lg\" />\n        <Heading size=\"h6\">New Mapping</Heading>\n      </Flex>\n      <Flex\n        alignItems=\"center\"\n        gap=\"$4\"\n        css={{\n          \"& button\": { background: \"transparent !important\", fontSize: \"$md\" }\n        }}\n      >\n        <Button\n          css={{ color: !isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n          onClick={() => isMappingPage && navigateEventPage()}\n        >\n          Event Setup\n        </Button>\n        <Arrow />\n        <Button\n          css={{ color: isMappingPage ? \"$neutral900\" : \"$neutral800\" }}\n          color=\"default\"\n          variant=\"ghost\"\n          size=\"md\"\n        >\n          Mapping\n        </Button>\n      </Flex>\n      <Button\n        size=\"lg\"\n        disabled={!fields.some(hasAllValues)}\n        onClick={() => onSaveHandler(editFieldId)}\n        css={{ visibility: isMappingPage ? \"visible\" : \"hidden\" }}\n      >\n        Save Mapping\n      </Button>\n    </Flex>\n  );\n};\n"],"names":["surveySparrowURL","useState","useEffect","ThemeProvider","Box","FieldMapping","Flex","Heading","Text","FormLabel","Select","Button","ChevronRightIcon","IconButton","ArrowLeftIcon","Arrow"],"mappings":"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"}