Update settings page to support updating subscription (#123)

Author: vegito22

llmstack/client/src/components/SubscriptionUpdateModal.jsx

@@ -0,0 +1,117 @@
+import { useEffect, useState } from "react";
+
+import {
+  TextField,
+  Button,
+  FormGroup,
+  InputLabel,
+  Paper,
+  Stack,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  MenuItem,
+  Select,
+} from "@mui/material";
+import { axios } from "../data/axios";
+import { LoadingButton } from "@mui/lab";
+import { enqueueSnackbar } from "notistack";
+
+const SubscriptionUpdateModal = ({ open, handleCloseCb, userEmail }) => {
+  const [subscriptionPrices, setSubscriptionPrices] = useState([]);
+  const [subscription, setSubscription] = useState("");
+  const [updateButtonLoading, setUpdateButtonLoading] = useState(false);
+  const [updateButtonDisabled, setUpdateButtonDisabled] = useState(false);
+  const [cancelButtonDisabled, setCancelButtonDisabled] = useState(false);
+
+  useEffect(() => {
+    axios()
+      .get("/api/subscriptions/prices")
+      .then((res) => {
+        setSubscriptionPrices(res.data.prices || []);
+      })
+      .catch((err) => {
+        enqueueSnackbar("Error loading subscription prices", {
+          variant: "error",
+        });
+      });
+  }, []);
+
+  return (
+    <Dialog open={open} onClose={handleCloseCb} fullWidth>
+      <DialogTitle>{"Manage Subscription"}</DialogTitle>
+      <DialogContent>
+        <FormGroup>
+          <Stack spacing={2} sx={{ textAlign: "left", margin: "10px" }}>
+            <Paper sx={{ marginBottom: "30px" }}>
+              <TextField
+                label="Email"
+                value={userEmail}
+                fullWidth
+                variant="outlined"
+              />
+            </Paper>
+            <Paper sx={{ marginBottom: "30px" }}>
+              <InputLabel id="subscription-id">Subscription</InputLabel>
+              <Select
+                labelId="subscription-id"
+                value={subscription}
+                label="Subscription"
+                fullWidth
+                variant="outlined"
+                onChange={(e) => {
+                  setSubscription(e.target.value);
+                }}
+              >
+                {subscriptionPrices.map((subscriptionPrice) => (
+                  <MenuItem
+                    key={subscriptionPrice.id}
+                    value={subscriptionPrice.id}
+                  >
+                    {subscriptionPrice.name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </Paper>
+          </Stack>
+        </FormGroup>
+      </DialogContent>
+      <DialogActions>
+        <Button disabled={cancelButtonDisabled} onClick={handleCloseCb}>
+          Cancel
+        </Button>
+        <LoadingButton
+          disabled={updateButtonDisabled || !subscription}
+          loading={updateButtonLoading}
+          onClick={() => {
+            setCancelButtonDisabled(true);
+            setUpdateButtonDisabled(true);
+            setUpdateButtonLoading(true);
+            axios()
+              .post("/api/subscriptions/checkout", {
+                price_id: subscription,
+              })
+              .then((res) => {
+                enqueueSnackbar("Loading Checkout Page", {
+                  variant: "success",
+                });
+                window.location.href = res.data.checkout_session_url;
+              })
+              .catch((err) => {})
+              .finally(() => {
+                setCancelButtonDisabled(false);
+                setUpdateButtonDisabled(false);
+                setUpdateButtonLoading(false);
+              });
+          }}
+          variant="contained"
+        >
+          Update
+        </LoadingButton>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default SubscriptionUpdateModal;

llmstack/client/src/pages/setting.jsx

@@ -12,12 +12,14 @@ import {
   Paper,
   Stack,
 } from "@mui/material";
+
 import { styled } from "@mui/material/styles";
 import FileUpload from "@mui/icons-material/FileUpload";
 import ContentCopy from "@mui/icons-material/ContentCopy";
 import { useEffect, useState } from "react";
 import { enqueueSnackbar } from "notistack";
 import Connections from "../components/Connections";
+import SubscriptionUpdateModal from "../components/SubscriptionUpdateModal";
 import { fetchData, patchData } from "./dataUtil";
 import { organizationState, profileFlagsState } from "../data/atoms";
 import { useRecoilValue } from "recoil";
@@ -140,6 +142,8 @@ const SettingPage = () => {
     logo: "",
   });
   const [loading, setLoading] = useState(true);
+  const [subscriptionUpdateModalOpen, setSubscriptionUpdateModalOpen] =
+    useState(false);
   const [updateKeys, setUpdateKeys] = useState(new Set());
   const profileFlags = useRecoilValue(profileFlagsState);
   const organization = useRecoilValue(organizationState);
@@ -169,6 +173,13 @@ const SettingPage = () => {
         setLoading(false);
       },
     );
+
+    const searchParams = new URLSearchParams(window.location.search);
+    if (searchParams.get("showNotification")) {
+      enqueueSnackbar(searchParams.get("notificationMessage") || "", {
+        variant: searchParams.get("notificationType") || "info",
+      });
+    }
   }, []);
 
   const handleUpdate = (update_keys) => {
@@ -386,19 +397,16 @@ const SettingPage = () => {
                 {process.env.REACT_APP_ENABLE_SUBSCRIPTION_MANAGEMENT ===
                   "true" && (
                   <Button
-                    href={`${
-                      process.env.REACT_APP_SUBSCRIPTION_MANAGEMENT_URL
-                    }?prefilled_email=${encodeURIComponent(
-                      formData.user_email,
-                    )}`}
-                    target="_blank"
                     variant="outlined"
                     style={{
                       marginRight: "10px",
                       display: profileFlags.IS_ORGANIZATION_MEMBER
                         ? "none"
                         : "inherit",
                     }}
+                    onClick={() => {
+                      setSubscriptionUpdateModalOpen(true);
+                    }}
                   >
                     Manage Subscription
                   </Button>
@@ -411,6 +419,15 @@ const SettingPage = () => {
           </Grid>
         </Grid>
       )}
+      {subscriptionUpdateModalOpen && (
+        <SubscriptionUpdateModal
+          open={subscriptionUpdateModalOpen}
+          handleCloseCb={() => {
+            setSubscriptionUpdateModalOpen(false);
+          }}
+          userEmail={formData.user_email}
+        />
+      )}
     </div>
   );
 };