signup funnel

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

@@ -57,6 +57,9 @@ import ViewReferralPage from "pages/referrals/ViewReferral";
 import { createWeb3Modal, defaultConfig } from "@web3modal/ethers5/react";
 import { SUPPORTED_CHAINS_META } from "utils/web3Constants";
 import RewardfulTag from "components/AddFormEntity/components/RewardfulTag";
+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;
 
@@ -243,11 +246,22 @@ const router = createBrowserRouter([
         path: "/referrals/:id",
         element: <ViewReferralPage />,
       },
+      {
+        path: "/onboarding/plan-select",
+        element: <PlanSelectComponent />,
+      },
+      {
+        path: "/onboarding/finalize",
+        element: <OnboardingFinalizeComponent />,
+      },
     ],
   },
 ]);
 
 const getDesignTokens = (mode) => ({
+  typography: {
+    fontFamily: "Poppins",
+  },
   palette: {
     mode,
     ...(mode === "light"
@@ -293,20 +307,20 @@ function App() {
     []
   );
 
-  function getLibrary(provider): Web3Provider {
-    const library = new Web3Provider(provider);
-    return library;
-  }
-
   const theme = useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
+
+  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/Layout/index.tsx

@@ -68,6 +68,7 @@ const Layout = () => {
   const subscription = orgSubscriptionData?.getOrgSubscription;
   const isPageWithoutHeader = matchRoute(location.pathname, PAGES_WITHOUT_HEADER);
 
+  const isExcludedPath = matchRoute(location.pathname, EXCLUDED_PATHS);
   const handleActiveOrg = (org) => {
     localStorage.setItem(LOCAL_STORAGE_ORG_ID_KEY, org?.id);
     setActiveOrg(org);
@@ -98,15 +99,15 @@ const Layout = () => {
   );
 
   useEffect(() => {
-    if (!isPageWithoutHeader) {
+    if (!isExcludedPath) {
       getLoggedInUserFullAccessOrgs({
         variables: {
           excludeSharedOrgs: true,
           cmtyEnabled: true,
         },
       });
     }
-  }, [isPageWithoutHeader]);
+  }, [isExcludedPath]);
 
   if (loading) {
     return <PageSpinner />;

wondrous-bot-admin/src/components/Login/index.tsx

@@ -16,6 +16,7 @@ import AuthLayout from "components/Shared/AuthLayout";
 import { LinkWithQuery } from "components/Shared/LinkWithQuery";
 import WalletConnect from "components/Icons/Login/walletconnect.svg";
 import useWeb3Auth from "services/web3/useWeb3Auth";
+import GoogleOAuthButton from "components/OAuth/GoogleOAuth";
 
 function Login() {
   // since we can't disconnect a user's wallet this is used in order to check if the user actually clicked the login button
@@ -96,6 +97,7 @@ function Login() {
         {notSupportedChain && (
           <ErrorTypography>Unsupported network, change to mainnet or a supported network</ErrorTypography>
         )}
+        <GoogleOAuthButton />
         <FormControl
           fullWidth
           sx={{

wondrous-bot-admin/src/components/OAuth/GoogleOAuth/icon.tsx

@@ -0,0 +1,22 @@
+const GoogleIcon = (props) => (
+  <svg width={25} height={24} viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M21.9005 10.0415H21.095V10H12.095V14H17.7465C16.922 16.3285 14.7065 18 12.095 18C8.78147 18 6.09497 15.3135 6.09497 12C6.09497 8.6865 8.78147 6 12.095 6C13.6245 6 15.016 6.577 16.0755 7.5195L18.904 4.691C17.118 3.0265 14.729 2 12.095 2C6.57247 2 2.09497 6.4775 2.09497 12C2.09497 17.5225 6.57247 22 12.095 22C17.6175 22 22.095 17.5225 22.095 12C22.095 11.3295 22.026 10.675 21.9005 10.0415Z"
+      fill="#FFC107"
+    />
+    <path
+      d="M3.24799 7.3455L6.53349 9.755C7.42249 7.554 9.57549 6 12.095 6C13.6245 6 15.016 6.577 16.0755 7.5195L18.904 4.691C17.118 3.0265 14.729 2 12.095 2C8.25399 2 4.92299 4.1685 3.24799 7.3455Z"
+      fill="#FF3D00"
+    />
+    <path
+      d="M12.0949 22.0003C14.6779 22.0003 17.0249 21.0118 18.7994 19.4043L15.7044 16.7853C14.7004 17.5458 13.4524 18.0003 12.0949 18.0003C9.49394 18.0003 7.28544 16.3418 6.45344 14.0273L3.19244 16.5398C4.84744 19.7783 8.20844 22.0003 12.0949 22.0003Z"
+      fill="#4CAF50"
+    />
+    <path
+      d="M21.9005 10.0415H21.095V10H12.095V14H17.7465C17.3505 15.1185 16.631 16.083 15.703 16.7855L15.7045 16.7845L18.7995 19.4035C18.5805 19.6025 22.095 17 22.095 12C22.095 11.3295 22.026 10.675 21.9005 10.0415Z"
+      fill="#1976D2"
+    />
+  </svg>
+);
+
+export default GoogleIcon;