diff --git a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal.tsx b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal.tsx
deleted file mode 100644
index ea5dbbd9e..000000000
--- a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { Button, Grid, Stack, Typography } from "@mui/material";
-import Modal from "components/Shared/Modal";
-import { COMPONENT_CATEGORIES, COMPONENT_OPTIONS } from "../constants";
-
-const OptionsColumn = ({ colOptions, options, onClick, onClose }) => {
- return (
-
- {colOptions.map((category) => (
-
-
- {category}
-
-
- {options[category].map((option) => (
-
- ))}
-
-
- ))}
-
- );
-};
-
-const ComponentOptionsModal = ({ open, onClose, onClick }) => {
- const groupedOptionsByCategory = COMPONENT_OPTIONS.reduce((acc, option) => {
- if (!acc[option.category]) {
- acc[option.category] = [];
- }
- acc[option.category].push(option);
- return acc;
- }, {});
-
- const leftColOptions = [COMPONENT_CATEGORIES.ACTION, COMPONENT_CATEGORIES.TWITTER];
- const rightColOptions = [COMPONENT_CATEGORIES.DISCORD, COMPONENT_CATEGORIES.YOUTUBE, COMPONENT_CATEGORIES.CRYPTO];
-
- return (
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-export default ComponentOptionsModal;
diff --git a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx
new file mode 100644
index 000000000..4cc8aa319
--- /dev/null
+++ b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx
@@ -0,0 +1,116 @@
+import { Button, Grid, Stack, Typography, useTheme } from "@mui/material";
+import { COMPONENT_CATEGORIES } from "components/AddFormEntity/constants";
+import SafeImage from "components/SafeImage";
+import Modal from "components/Shared/Modal";
+import { Container, OptionsColumnContainer } from "./styles";
+
+const chooseIcon = (icon, category) => {
+ if (!icon) {
+ // in case icon is not provided, particularly for custom integrations, return a default icon
+ return ;
+ }
+ if (category === COMPONENT_CATEGORIES.CUSTOM) {
+ return (
+
+ );
+ }
+ return ;
+};
+
+const OptionsColumn = ({ colOptions, options, onClick, onClose, showBorder }) => {
+ return (
+
+ {colOptions.map((category) => (
+
+
+ {category}
+
+
+ {options[category].map((option) => (
+
+ ))}
+
+
+ ))}
+
+ );
+};
+
+const ComponentOptionsModal = ({ open, onClose, onClick, options }) => {
+ const groupedOptionsByCategory = options.reduce((acc, option) => {
+ if (!acc[option.category]) {
+ acc[option.category] = [];
+ }
+ acc[option.category].push(option);
+ return acc;
+ }, {});
+
+ const leftColOptions = [COMPONENT_CATEGORIES.ACTION, COMPONENT_CATEGORIES.TWITTER];
+ const midColOptions = [COMPONENT_CATEGORIES.DISCORD, COMPONENT_CATEGORIES.YOUTUBE, COMPONENT_CATEGORIES.CRYPTO];
+ const rightColOptions = [COMPONENT_CATEGORIES.CUSTOM];
+
+ const hasCustomComponent = options.some((option) => option.category === COMPONENT_CATEGORIES.CUSTOM);
+
+ return (
+
+
+
+
+ {hasCustomComponent && (
+
+ )}
+
+
+ );
+};
+
+export default ComponentOptionsModal;
diff --git a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/styles.tsx b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/styles.tsx
new file mode 100644
index 000000000..4b138ed56
--- /dev/null
+++ b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal/styles.tsx
@@ -0,0 +1,29 @@
+import { Box, Grid } from "@mui/material";
+import { styled } from "@mui/system";
+
+export const Container = styled(Box)`
+ && {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ ${({ theme }) => theme.breakpoints.up("md")} {
+ gap: 0;
+ flex-direction: row;
+ justify-content: center;
+ }
+ }
+`;
+
+export const OptionsColumnContainer = styled(Box)<{ $showBorder?: boolean }>`
+ && {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ ${({ theme }) => theme.breakpoints.up("md")} {
+ border-left: ${({ $showBorder }) => ($showBorder ? "1px solid #EEEEEE" : "none")};
+ padding: 24px;
+ }
+ }
+`;
diff --git a/wondrous-bot-admin/src/components/AddFormEntity/constants.ts b/wondrous-bot-admin/src/components/AddFormEntity/constants.ts
index c1a65a753..681268cc3 100644
--- a/wondrous-bot-admin/src/components/AddFormEntity/constants.ts
+++ b/wondrous-bot-admin/src/components/AddFormEntity/constants.ts
@@ -27,6 +27,7 @@ export const COMPONENT_CATEGORIES = {
DISCORD: "discord",
YOUTUBE: "youtube",
CRYPTO: "crypto",
+ CUSTOM: "custom",
};
export const COMPONENT_OPTIONS: {
diff --git a/wondrous-bot-admin/src/components/AddFormEntity/index.tsx b/wondrous-bot-admin/src/components/AddFormEntity/index.tsx
index 64983588c..981dc0fc0 100644
--- a/wondrous-bot-admin/src/components/AddFormEntity/index.tsx
+++ b/wondrous-bot-admin/src/components/AddFormEntity/index.tsx
@@ -18,9 +18,9 @@ import { CONFIG_COMPONENTS } from "utils/configComponents";
import { useSubscriptionPaywall } from "utils/hooks";
import EcosystemFeature from "components/PremiumFeatureDialog/ecosystem";
import GlobalContext from "utils/context/GlobalContext";
-import { COMPONENT_OPTIONS, getMultipleChoiceDefaultValue } from "./constants";
+import { COMPONENT_CATEGORIES, COMPONENT_OPTIONS, getMultipleChoiceDefaultValue } from "./constants";
import EditSvg from "components/Icons/edit.svg";
-import ComponentOptionsModal from "./components/ComponentOptionsModal";
+import ComponentOptionsModal from "./components/ComponentOptionsModal/ComponentOptionsModal";
const AddFormEntity = ({ steps, setSteps, handleRemove, refs, setRemovedMediaSlugs }) => {
const { errors, setErrors } = useContext(CreateQuestContext);
@@ -50,16 +50,10 @@ const AddFormEntity = ({ steps, setSteps, handleRemove, refs, setRemovedMediaSlu
if (activeOrg?.id in CUSTOM_INTEGRATIONS) {
const customIntegrations = CUSTOM_INTEGRATIONS[activeOrg?.id];
customIntegrations?.integrations.forEach((integration) => {
- defaultOptions.push(integration);
+ defaultOptions.push({ ...integration, icon: activeOrg?.profilePicture, category: COMPONENT_CATEGORIES.CUSTOM });
});
}
- return [
- ...defaultOptions,
- {
- label: "+ Add custom on chain action",
- value: TYPES.CUSTOM_ONCHAIN_ACTION,
- },
- ];
+ return [...defaultOptions];
}, [activeOrg?.id]);
const handleDragEnd = (result) => {
@@ -198,6 +192,7 @@ const AddFormEntity = ({ steps, setSteps, handleRemove, refs, setRemovedMediaSlu
open={openComponentOptionsModal.open}
onClose={handleToggleComponentOptionsModal}
onClick={(value) => handleChangeType(value, openComponentOptionsModal.order, openComponentOptionsModal.idx)}
+ options={componentOptions}
/>
step.type === TYPES.REFERRAL);
+ const componentOptions = useMemo(() => {
+ let defaultOptions = [...COMPONENT_OPTIONS];
+ if (activeOrg?.id in CUSTOM_INTEGRATIONS) {
+ const customIntegrations = CUSTOM_INTEGRATIONS[activeOrg?.id];
+ customIntegrations?.integrations.forEach((integration) => {
+ defaultOptions.push({ ...integration, icon: activeOrg?.profilePicture, category: COMPONENT_CATEGORIES.CUSTOM });
+ });
+ }
+ return [...defaultOptions];
+ }, [activeOrg?.id]);
+
return (
<>
setOpenComponentOptionsModal(false)}
onClick={(value) => handleAdd(value)}
+ options={componentOptions}
/>