Merge branch 'staging' into feat/cmty-user-activity-pg

wondrous-bot-admin/package.json

@@ -21,6 +21,7 @@
     "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.12.1",
     "@mui/styled-engine-sc": "^5.11.11",
+    "@react-oauth/google": "^0.12.1",
     "@reactour/tour": "^3.4.0",
     "@vercel/node": "^2.14.2",
     "@web3-react/coinbase-wallet": "^8.2.0",

wondrous-bot-admin/src/App.tsx

@@ -58,6 +58,9 @@ import { createWeb3Modal, defaultConfig } from "@web3modal/ethers5/react";
 import { SUPPORTED_CHAINS_META } from "utils/web3Constants";
 import RewardfulTag from "components/AddFormEntity/components/RewardfulTag";
 import CmtyUserActivityPage from "pages/activity";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import PlanSelectComponent from "components/Onboarding/PlanSelect";
+import OnboardingFinalizeComponent from "components/Onboarding/FinalizeComponent";
 
 const projectId = import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID;
 
@@ -248,6 +251,14 @@ const router = createBrowserRouter([
         path: "/activity",
         element: <CmtyUserActivityPage />,
       },
+      {
+        path: "/onboarding/plan-select",
+        element: <PlanSelectComponent />,
+      },
+      {
+        path: "/onboarding/finalize",
+        element: <OnboardingFinalizeComponent />,
+      },
     ],
   },
 ]);
@@ -302,21 +313,20 @@ function App() {
     []
   );
 
-  function getLibrary(provider): Web3Provider {
-    const library = new Web3Provider(provider);
-    return library;
-  }
-
   const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
-  console.log(theme, 'theme')
+
+  const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+
   return (
     <StyledComponentProvider theme={theme}>
       <ThemeProvider theme={theme}>
         <ApolloProvider client={client}>
           <SnackbarAlertProvider>
             <WonderWeb3Provider>
               <PaywallContextProvider>
-                <RouterProvider router={router} />
+                <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
+                  <RouterProvider router={router} />
+                </GoogleOAuthProvider>
               </PaywallContextProvider>
             </WonderWeb3Provider>
             <RewardfulTag />

wondrous-bot-admin/src/components/AddFormEntity/components/GitcoinPassportComponent.tsx

@@ -0,0 +1,67 @@
+import { Grid, Typography } from "@mui/material";
+import { IndexContainer, Label } from "./styles";
+import TextField from "../../Shared/TextField";
+import { TYPES } from "utils/constants";
+
+const TextInputStyle = {
+  width: "50%",
+};
+
+const GitcoinPassportScore = ({ handleOnChange, value, errors }) => (
+  <>
+    <Label>Question/Prompt</Label>
+    <TextField
+      placeholder="Enter prompt here"
+      value={value?.prompt || ""}
+      onChange={(value) => handleOnChange("prompt", value)}
+      multiline={false}
+      error={errors?.prompt}
+    />
+    <Label>Verify that a user's Gitcoin Passport Score is above this threshold</Label>
+    <TextField
+      placeholder="Please enter the minimum score threshold"
+      value={value?.gitcoinPassportMinimumScoreThreshold}
+      error={errors?.gitcoinPassportMinimumScoreThreshold}
+      onChange={(value) => handleOnChange("gitcoinPassportMinimumScoreThreshold", value)}
+      multiline={false}
+      style={TextInputStyle}
+      type="number"
+    />
+  </>
+);
+
+const GitcoinPassportComponent = ({ onChange, value, stepType, error }) => {
+  const handleOnChange = (key, val) => {
+    onChange({
+      ...value,
+      [key]: val,
+    });
+  };
+
+  return (
+    <Grid
+      gap="8px"
+      display="flex"
+      alignItems="center"
+      style={{
+        width: "100%",
+      }}
+      direction="column"
+    >
+      <Grid
+        item
+        gap="14px"
+        display="flex"
+        flexDirection="column"
+        xs={12}
+        style={{
+          width: "100%",
+        }}
+      >
+        <GitcoinPassportScore handleOnChange={handleOnChange} value={value} errors={error?.additionalData} />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default GitcoinPassportComponent;

wondrous-bot-admin/src/components/AddFormEntity/components/LinkClickComponent.tsx

@@ -3,13 +3,20 @@ import { IndexContainer, Label } from "./styles";
 import TextField from "../../Shared/TextField";
 import { TYPES } from "utils/constants";
 
-
 const YoutubeLikeText = ({ handleOnChange, value, error }) => (
   <>
-    <Label>Click this link</Label>
+    <Label>Question/Prompt</Label>
+    <TextField
+      placeholder="Enter prompt here (Eg. Go to this link to check out our mission + vision)"
+      value={value?.prompt || ""}
+      onChange={(value) => handleOnChange("prompt", value)}
+      multiline={false}
+      error={error?.prompt}
+    />
+    <Label>Link to visit</Label>
     <TextField
       placeholder="Please enter the url"
-      value={value.linkClickUrl || ""} 
+      value={value.linkClickUrl || ""}
       onChange={(value) => handleOnChange("linkClickUrl", value)}
       multiline={false}
       error={error}

wondrous-bot-admin/src/components/AddFormEntity/components/OptionRewards.tsx

@@ -2,7 +2,14 @@ import AddIcon from "@mui/icons-material/Add";
 import { Box, Grid } from "@mui/material";
 import { PoapImage } from "components/CreateTemplate/styles";
 import DeleteIcon from "components/Icons/Delete";
-import { DiscordRoleIcon, NFTIcon, PoapIcon, StoreItemRewardIcon, TokensIcon } from "components/Icons/Rewards";
+import {
+  DiscordRoleIcon,
+  GatewayPDAIcon,
+  NFTIcon,
+  PoapIcon,
+  StoreItemRewardIcon,
+  TokensIcon,
+} from "components/Icons/Rewards";
 import { PAYMENT_OPTIONS } from "components/Rewards/constants";
 import { ButtonIconWrapper } from "components/Shared/styles";
 import { TextLabel } from "components/ViewQuest/styles";
@@ -56,6 +63,7 @@ const ICONS_MAP = {
   [PAYMENT_OPTIONS.TOKEN]: TokensIcon,
   [PAYMENT_OPTIONS.COMMUNITY_BADGE]: NFTIcon,
   [PAYMENT_OPTIONS.CMTY_STORE_ITEM]: StoreItemRewardIcon,
+  [PAYMENT_OPTIONS.PDA]: GatewayPDAIcon,
 };
 
 const RewardContent = ({ reward }) => {
@@ -69,6 +77,7 @@ const RewardContent = ({ reward }) => {
     [PAYMENT_OPTIONS.POAP]: `POAP: ${reward?.poapRewardData?.name}`,
     [PAYMENT_OPTIONS.COMMUNITY_BADGE]: `NFT: ${reward?.amount} ${reward?.paymentMethod?.name}`,
     [PAYMENT_OPTIONS.CMTY_STORE_ITEM]: `Store Item: ${reward?.storeItem?.name}`,
+    [PAYMENT_OPTIONS.PDA]: `Citizen PDA`,
   };
 
   return (