Merge pull request #1833 from wondrous-dev/add-tooltips

feat: add tool tips for max approvals and max submissions
wondrous-dev · Jul 1, 2023 · 0d27fba · 0d27fba
2 parents 03c471d + 86c2409
commit 0d27fba
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 32 deletions.
diff --git a/wondrous-bot-admin/src/components/CreateTemplate/MaxInput.tsx b/wondrous-bot-admin/src/components/CreateTemplate/MaxInput.tsx
@@ -1,25 +1,23 @@
-import { Box } from '@mui/material';
-import { CustomTextField } from 'components/AddFormEntity/components/styles';
-import Switch from 'components/Shared/Switch';
-
+import { Box } from "@mui/material";
+import { CustomTextField } from "components/AddFormEntity/components/styles";
+import Switch from "components/Shared/Switch";
+import Tooltip from "@mui/material/Tooltip";
+import InformationTooltip from "components/Icons/information.svg";
+import { StyledInformationTooltip } from "components/Shared/Tooltip";
 const MaxInput = (props) => {
   const { keyValue, stateKey, setQuestSettings } = props;
   return (
-    <Box
-      display='flex'
-      gap={keyValue ? '10px' : '0px'}
-      alignItems='center'
-    >
+    <Box display="flex" gap={keyValue ? "10px" : "0px"} alignItems="center">
       <Box
         sx={{
-          width: keyValue ? '100%' : '0px',
-          visibility: keyValue ? 'visible' : 'hidden',
-          transition: 'width 0.3s ease-in-out, visibility 0.3s ease-in-out',
+          width: keyValue ? "100%" : "0px",
+          visibility: keyValue ? "visible" : "hidden",
+          transition: "width 0.3s ease-in-out, visibility 0.3s ease-in-out",
         }}
       >
         <CustomTextField
-        autoFocus
-          type='number'
+          autoFocus
+          type="number"
           value={keyValue}
           onChange={(e) => {
             setQuestSettings((prev) => ({
@@ -30,8 +28,32 @@ const MaxInput = (props) => {
         />
       </Box>
       <Switch {...props} />
+      {stateKey === "maxSubmission" && (
+        <StyledInformationTooltip
+          placement="right"
+          title="The maximum number of approved submissions each user can submit for this quest"
+        >
+          <img
+            src={InformationTooltip}
+            alt="information"
+            style={{ width: "16px", height: "16px", marginLeft: "8px" }}
+          />
+        </StyledInformationTooltip>
+      )}
+      {stateKey === "maxApproval" && (
+        <StyledInformationTooltip
+          placement="right"
+          title="The total number of approved submissions allowed for this quest"
+        >
+          <img
+            src={InformationTooltip}
+            alt="information"
+            style={{ width: "16px", height: "16px", marginLeft: "8px" }}
+          />
+        </StyledInformationTooltip>
+      )}
     </Box>
   );
 };
 
-export default MaxInput
+export default MaxInput;
diff --git a/wondrous-bot-admin/src/components/Icons/information.svg b/wondrous-bot-admin/src/components/Icons/information.svg
diff --git a/wondrous-bot-admin/src/components/Shared/Tooltip/index.tsx b/wondrous-bot-admin/src/components/Shared/Tooltip/index.tsx
@@ -0,0 +1,26 @@
+import { Tooltip } from "@mui/material";
+
+export const StyledInformationTooltip = ({ children, ...props }) => {
+  return (
+    <Tooltip
+      arrow
+      title={props?.title}
+      {...props}
+      componentsProps={{
+        tooltip: {
+          sx: {
+            bgcolor: "#2a8d5c",
+            fontFamily: "Poppins",
+            fontWeight: 500,
+            fontSize: "13px",
+            "& .MuiTooltip-arrow": {
+              color: "#2a8d5c",
+            },
+          },
+        },
+      }}
+    >
+      {children}
+    </Tooltip>
+  );
+};
diff --git a/wondrous-bot-admin/src/components/ViewQuestResults/ViewCampaignOverview.tsx b/wondrous-bot-admin/src/components/ViewQuestResults/ViewCampaignOverview.tsx
@@ -1,32 +1,65 @@
-import { Grid } from '@mui/material';
-import { Label } from 'components/CreateTemplate/styles';
-import { StyledViewQuestResults } from './styles';
+import { Grid, Tooltip } from "@mui/material";
+import { Label } from "components/CreateTemplate/styles";
+import InformationTooltip from "components/Icons/information.svg";
+import { StyledViewQuestResults } from "./styles";
+import { StyledInformationTooltip } from "components/Shared/Tooltip";
 
-const getBooleanText = (value) => (value ? 'Yes' : 'No');
+const getBooleanText = (value) => (value ? "Yes" : "No");
 
 const ViewCampaignOverview = ({ questSettings }) => {
   return (
     <>
       {questSettings?.map((quest, idx) => {
+        console.log("quest, qe", quest);
         return (
           <Grid
-            display='flex'
-            justifyContent='flex-start'
-            alignItems='center'
-            width='100%'
-            key={idx + 'quest'}
-            gap='10%'
+            display="flex"
+            justifyContent="flex-start"
+            alignItems="center"
+            width="100%"
+            key={idx + "quest"}
+            gap="10%"
           >
             <Label>{quest.label}</Label>
-            {quest.type !== 'rewards' ? (
-              <StyledViewQuestResults>
-                {quest.type === 'boolean' ? getBooleanText(quest.value) : null}
-                {quest.type === 'text' ? quest.value : null}
-              </StyledViewQuestResults>
+            {quest.type !== "rewards" ? (
+              <>
+                <StyledViewQuestResults
+                  style={{
+                    position: "relative",
+                  }}
+                >
+                  {quest.type === "boolean" ? getBooleanText(quest.value) : null}
+                  {quest.type === "text" ? quest.value : null}
+                  {quest.label === "Max Submissions" && (
+                    <StyledInformationTooltip
+                      placement="right"
+                      title="The maximum number of approved submissions each user can submit for this quest"
+                    >
+                      <img
+                        src={InformationTooltip}
+                        alt="information"
+                        style={{ width: "16px", height: "16px", marginLeft: "8px", position: "absolute", right: -26 }}
+                      />
+                    </StyledInformationTooltip>
+                  )}
+                  {quest.label === "Max Approvals" && (
+                    <StyledInformationTooltip
+                      placement="right"
+                      title="The total number of approved submissions allowed for this quest"
+                    >
+                      <img
+                        src={InformationTooltip}
+                        alt="information"
+                        style={{ width: "16px", height: "16px", marginLeft: "8px", position: "absolute", right: -26 }}
+                      />
+                    </StyledInformationTooltip>
+                  )}
+                </StyledViewQuestResults>
+              </>
             ) : null}
-            {quest.type === 'rewards'
+            {quest.type === "rewards"
               ? quest.value.map((reward, key) => (
-                  <StyledViewQuestResults $isReward key={reward.type + 'reward'}>
+                  <StyledViewQuestResults $isReward key={reward.type + "reward"}>
                     {reward.value} {reward.type}
                   </StyledViewQuestResults>
                 ))