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 {icon}; + } + if (category === COMPONENT_CATEGORIES.CUSTOM) { + return ( + + ); + } + return {icon}; +}; + +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} />