feat: migrate to free trial accounts

babel.config.js

@@ -8,7 +8,7 @@ module.exports = {
         },
       },
     ],
-    "@babel/preset-react",
+    ["@babel/preset-react", { runtime: "automatic" }],
     "@babel/preset-typescript",
   ],
   plugins: [["@babel/plugin-proposal-class-properties"]],

package.json

@@ -32,15 +32,11 @@
     "@codemirror/lang-json": "^6.0.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@mui/material": "^5.10.3",
     "@sentry/react": "^7.12.1",
     "@sentry/tracing": "^7.12.1",
-    "@stripe/react-stripe-js": "^1.10.0",
-    "@stripe/stripe-js": "^1.35.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/mini-css-extract-plugin": "^2.5.1",
     "@types/react-router-dom": "5.3.3",
     "@types/react-transition-group": "^4.4.5",
     "@uiw/react-codemirror": "^4.10.4",
@@ -58,7 +54,8 @@
     "react-transition-group": "^4.4.5",
     "remove": "^0.1.5",
     "tailwindcss": "2.2.19",
-    "tldts": "5.7.66"
+    "tldts": "5.7.66",
+    "uninstall": "^0.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.17.2",
@@ -69,8 +66,10 @@
     "@babel/preset-env": "7.16.11",
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.130",
+    "@mui/material": "^5.13.1",
     "@react-mock/xhr": "0.2.0",
-    "@types/dotenv": "^8.2.0",
     "@types/jest": "^29.0.0",
     "@types/node-emoji": "^1.8.1",
     "@types/react-dom": "17.0.11",

src/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 // @ts-ignore
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";

src/pages/Root.tsx

@@ -1,27 +1,30 @@
 import React from "react";
 import { Route, Routes, BrowserRouter } from "react-router-dom";
-import { StyledEngineProvider } from "@mui/material/styles";
+import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import AuthContext from "./auth/Auth.context";
 import routes from "./routes";
+import theme from "./mui-theme";
 
 interface Props {
   Router: typeof BrowserRouter;
 }
 
 const Root: React.FC<Props> = ({ Router }): React.ReactElement => (
   <StyledEngineProvider injectFirst>
-    <Router>
-      <AuthContext>
-        <Routes>
-          {routes.map(route => (
-            <Route
-              {...route}
-              key={Array.isArray(route.path) ? route.path[0] : route.path}
-            />
-          ))}
-        </Routes>
-      </AuthContext>
-    </Router>
+    <ThemeProvider theme={theme}>
+      <Router>
+        <AuthContext>
+          <Routes>
+            {routes.map(route => (
+              <Route
+                {...route}
+                key={Array.isArray(route.path) ? route.path[0] : route.path}
+              />
+            ))}
+          </Routes>
+        </AuthContext>
+      </Router>
+    </ThemeProvider>
   </StyledEngineProvider>
 );
 

src/pages/apps/[id]/environments/[env-id]/deployments/Deployments.spec.tsx

@@ -1,5 +1,4 @@
 import type { Scope } from "nock";
-import React from "react";
 import {
   fireEvent,
   render,

src/pages/apps/_components/__snapshots__/WelcomeModal.spec.tsx.snap

@@ -19,7 +19,7 @@ exports[`~/pages/apps/_components/WelcomeModal when is open matches the snapshot
     >
       <div
         aria-hidden="true"
-        class="MuiBackdrop-root css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
+        class="MuiBackdrop-root MuiModal-backdrop css-i9fmh8-MuiBackdrop-root-MuiModal-backdrop"
         style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
       />
       <div

src/pages/mui-theme.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { createTheme } from "@mui/material/styles";
+import {
+  Link as RouterLink,
+  LinkProps as RouterLinkProps,
+} from "react-router-dom";
+import { LinkProps } from "@mui/material/Link";
+
+const LinkBehavior = React.forwardRef<
+  HTMLAnchorElement,
+  Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
+>((props, ref) => {
+  const { href, ...other } = props;
+  // Map href (MUI) -> to (react-router)
+  return <RouterLink ref={ref} to={href} {...other} />;
+});
+
+export default createTheme({
+  components: {
+    MuiLink: {
+      defaultProps: {
+        component: LinkBehavior,
+      } as LinkProps,
+    },
+  },
+  palette: {
+    mode: "dark",
+    primary: {
+      main: "#0F092B",
+      light: "#e7e5ee",
+      contrastText: "#e7e5ee",
+    },
+    secondary: {
+      main: "#78193B",
+      light: "#e7e5ee",
+      dark: "#f6005c",
+      contrastText: "#e7e5ee",
+    },
+    text: {
+      primary: "#a4a4a4",
+    },
+    background: {
+      default: "#0F092B",
+      paper: "#262558",
+    },
+    info: {
+      main: "#f9f9f9",
+      contrastText: "#B7AE22",
+    },
+  },
+  breakpoints: {
+    values: {
+      xs: 320,
+      sm: 384,
+      md: 576,
+      lg: 1024,
+      xl: 1368,
+    },
+  },
+});

src/pages/user/account/Account.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from "react";
 import { AuthContext } from "~/pages/auth/Auth.context";
 import SubscriptionDetails from "./_components/SubscriptionDetails";
-import PaymentDetails from "./_components/PaymentDetails";
 import UserProfile from "./_components/UserProfile";
 
 const Account: React.FC = () => {
@@ -11,7 +10,6 @@ const Account: React.FC = () => {
     <div className="w-full">
       <UserProfile user={user!} accounts={accounts!} />
       <SubscriptionDetails />
-      <PaymentDetails />
     </div>
   );
 };

src/pages/user/account/Payment.tsx

@@ -0,0 +1,40 @@
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import { useSearchParams } from "react-router-dom";
+
+export default function Payment() {
+  const [query] = useSearchParams({});
+
+  return (
+    <Box
+      sx={{ m: "auto", bgcolor: "rgba(0,0,0,0.1)", textAlign: "center" }}
+      maxWidth="md"
+    >
+      {query.get("success") && (
+        <>
+          <Typography
+            variant="h1"
+            sx={{ fontSize: 32, mb: 2, fontWeight: 400, color: "white" }}
+          >
+            Thank you for your purchase!
+          </Typography>
+          <Typography
+            variant="h2"
+            sx={{ fontSize: 20, fontWeight: 400, color: "white" }}
+          >
+            Your tier has been updated.{" "}
+            <Link
+              color="secondary.dark"
+              href="/"
+              sx={{ textDecoration: "none", ":hover": { opacity: 0.8 } }}
+            >
+              Click here
+            </Link>{" "}
+            to go back to your apps.
+          </Typography>
+        </>
+      )}
+    </Box>
+  );
+}

src/pages/user/account/_components/ConnectedAccounts.spec.tsx

@@ -1,5 +1,4 @@
 import { RenderResult, waitFor } from "@testing-library/react";
-import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
 import ConnectedAccounts from "./ConnectedAccounts";