Add custom

wondrous-dev · Apr 4, 2024 · 77de5d3 · 77de5d3
1 parent f22eed1
commit 77de5d3
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 94 deletions.
diff --git a/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal.tsx b/wondrous-bot-admin/src/components/AddFormEntity/components/ComponentOptionsModal.tsx
diff --git a/...n/src/components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal.tsx b/...n/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 <img src={"/wonder.svg"} alt={icon} style={{ width: "25px", height: "25px", borderRadius: "6px" }} />;
+  }
+  if (category === COMPONENT_CATEGORIES.CUSTOM) {
+    return (
+      <SafeImage
+        src={icon}
+        alt="icon"
+        style={{ width: "25px", height: "25px", borderRadius: "6px", objectFit: "cover" }}
+      />
+    );
+  }
+  return <img src={icon} alt={icon} />;
+};
+
+const OptionsColumn = ({ colOptions, options, onClick, onClose, showBorder }) => {
+  return (
+    <OptionsColumnContainer $showBorder={showBorder}>
+      {colOptions.map((category) => (
+        <Stack spacing={2} key={category}>
+          <Typography
+            fontWeight={600}
+            color="#737373"
+            textTransform="capitalize"
+            sx={{
+              paddingLeft: "8px",
+            }}
+          >
+            {category}
+          </Typography>
+          <Stack alignItems="start">
+            {options[category].map((option) => (
+              <Button
+                disableRipple
+                onClick={() => {
+                  onClick(option.value);
+                  onClose();
+                }}
+                sx={{
+                  textTransform: "capitalize",
+                  gap: 1,
+                  borderRadius: "6px",
+                  "&:hover": {
+                    backgroundColor: "#EDEDED",
+                  },
+                  alignItems: "flex-start",
+                }}
+              >
+                {chooseIcon(option.icon, category)}
+                <Typography key={option.value} color="#262627" textAlign="left">
+                  {option.label}
+                </Typography>
+              </Button>
+            ))}
+          </Stack>
+        </Stack>
+      ))}
+    </OptionsColumnContainer>
+  );
+};
+
+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 (
+    <Modal open={open} onClose={onClose} maxWidth={hasCustomComponent ? 1200 : 800}>
+      <Container>
+        <OptionsColumn
+          colOptions={leftColOptions}
+          options={groupedOptionsByCategory}
+          onClose={onClose}
+          onClick={onClick}
+          showBorder={false}
+        />
+        <OptionsColumn
+          colOptions={midColOptions}
+          options={groupedOptionsByCategory}
+          onClose={onClose}
+          onClick={onClick}
+          showBorder
+        />
+        {hasCustomComponent && (
+          <OptionsColumn
+            colOptions={rightColOptions}
+            options={groupedOptionsByCategory}
+            onClose={onClose}
+            onClick={onClick}
+            showBorder
+          />
+        )}
+      </Container>
+    </Modal>
+  );
+};
+
+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
@@ -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
@@ -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
@@ -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}
       />
       <Grid
         display="flex"

diff --git a/wondrous-bot-admin/src/components/CreateTemplate/index.tsx b/wondrous-bot-admin/src/components/CreateTemplate/index.tsx
@@ -6,7 +6,7 @@ import { CampaignOverviewHeader, CampaignOverview } from "./CampaignOverview";
 import PanelComponent from "./PanelComponent";
 import { Panel } from "./styles";
 import AddFormEntity from "components/AddFormEntity";
-import { BG_TYPES, QUEST_STATUSES, TYPES } from "utils/constants";
+import { BG_TYPES, CUSTOM_INTEGRATIONS, QUEST_STATUSES, TYPES } from "utils/constants";
 import PageWrapper from "components/Shared/PageWrapper";
 import Modal from "components/Shared/Modal";
 import { useMutation } from "@apollo/client";
@@ -24,7 +24,8 @@ import QuestRewardComponent from "components/Rewards/QuestRewardComponent";
 import { constructRequestBody, handleSaveError, processSave } from "./helpers";
 import { useTour } from "@reactour/tour";
 import useDynamicSteps from "components/TutorialComponent/Tutorials/CreateQuestTutorial/useDynamicSteps";
-import ComponentOptionsModal from "components/AddFormEntity/components/ComponentOptionsModal";
+import { COMPONENT_CATEGORIES, COMPONENT_OPTIONS } from "components/AddFormEntity/constants";
+import ComponentOptionsModal from "components/AddFormEntity/components/ComponentOptionsModal/ComponentOptionsModal";
 
 const CreateTemplate = ({
   setRefValue,
@@ -187,12 +188,24 @@ const CreateTemplate = ({
 
   const hasReferralStep = steps?.some((step) => 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 (
     <>
       <ComponentOptionsModal
         open={openComponentOptionsModal}
         onClose={() => setOpenComponentOptionsModal(false)}
         onClick={(value) => handleAdd(value)}
+        options={componentOptions}
       />
       <Modal
         open={isSaving}

diff --git a/wondrous-bot-admin/src/utils/constants.tsx b/wondrous-bot-admin/src/utils/constants.tsx
@@ -131,7 +131,7 @@ export const PAGES_WITHOUT_HEADER = [
   "/activity",
   "/onboarding/plan-select",
   "/onboarding/finalize",
-  "/oauth/google/callback"
+  "/oauth/google/callback",
 ];
 
 export const BG_TYPES = {
@@ -359,7 +359,7 @@ export const EXCLUDED_PATHS = [
   "/referral",
   "/referral-campaign",
   "/activity",
-  "/oauth/google/callback"
+  "/oauth/google/callback",
 ];
 
 export const TUTORIALS = {
@@ -446,6 +446,24 @@ export const POKT_ORG_ID = import.meta.env.VITE_PRODUCTION ? "110964182503916540
 
 const FHENIX_ORG_ID = import.meta.env.VITE_PRODUCTION ? "110521236745880560" : "89444950095167649";
 export const CUSTOM_INTEGRATIONS = {
+  // test org
+  "118799079400538113": {
+    name: "Test",
+    integrations: [
+      {
+        label: "LI.FI Bridging across any EVM chain",
+        value: TYPES.LIFI_VALUE_BRIDGED,
+      },
+      {
+        label: "Migrate Origin members from Carma",
+        value: TYPES.MIGRATE_ORIGIN_USERS,
+      },
+      {
+        label: "Verify MarketsFlare trial",
+        value: TYPES.VERIFY_MARKETSFLARE_TRIAL,
+      },
+    ],
+  },
   // LIFI
   "58318954576216128": {
     name: "Lifi",
@@ -554,4 +572,4 @@ export const LOCKED_PATHS = ["/store", "/store/items/create", "/store/items/:id"
 
 export const LOCAL_STORAGE_ORG_ID_KEY = "default-org-id";
 
-export const ALLOWLIST_ADMIN_IDS = ["46108748309069853", "54694658413953389"];
+export const ALLOWLIST_ADMIN_IDS = ["46108748309069853", "54694658413953389"];