Skip to content

Commit 556d189

Browse files
vegito22vegito22
authored
Update the manage subscription modal and update http processor logic to avoid specifying location for params (#129)
1 parent dc87dd3 commit 556d189

File tree

4 files changed

+197
-144
lines changed

4 files changed

+197
-144
lines changed

‎llmstack/client/src/components/Subscription.jsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { useState } from "react";
2+
3+
import { Button, Paper, Typography, Stack } from "@mui/material";
4+
5+
import { organizationState, profileFlagsState } from "../data/atoms";
6+
import { useRecoilValue } from "recoil";
7+
import SubscriptionUpdateModal from "./SubscriptionUpdateModal";
8+
9+
function Subscription(props) {
10+
const [subscriptionUpdateModalOpen, setSubscriptionUpdateModalOpen] =
11+
useState(false);
12+
const profileFlags = useRecoilValue(profileFlagsState);
13+
const organization = useRecoilValue(organizationState);
14+
15+
return (
16+
<Stack>
17+
<Stack>
18+
<Typography variant="h6" className="section-header">
19+
Subscription
20+
</Typography>
21+
;
22+
<Stack>
23+
<Paper>
24+
<Stack>
25+
<p
26+
style={{
27+
display: profileFlags.IS_ORGANIZATION_MEMBER
28+
? "none"
29+
: "block",
30+
}}
31+
>
32+
Logged in as&nbsp;<strong>{props.user_email}</strong>. You are
33+
currently subscribed to&nbsp;
34+
<strong>
35+
{profileFlags.IS_PRO_SUBSCRIBER
36+
? "Pro"
37+
: profileFlags.IS_BASIC_SUBSCRIBER
38+
? "Basic"
39+
: "Free"}
40+
</strong>
41+
&nbsp;tier. Click on the Manage Subscription button below to
42+
change your plan.&nbsp;
43+
<br />
44+
<br />
45+
<i>
46+
Note: You will be redirected to Stripe payment portal to
47+
complete the upgrade payment process.
48+
</i>
49+
</p>
50+
<p
51+
style={{
52+
display: profileFlags.IS_ORGANIZATION_MEMBER
53+
? "block"
54+
: "none",
55+
}}
56+
>
57+
Logged in as <strong>{props.user_email}</strong>. Your account
58+
is managed by your organization,&nbsp;
59+
<strong>{organization?.name}</strong>. Please contact your admin
60+
to manage your subscription.
61+
</p>
62+
</Stack>
63+
</Paper>
64+
</Stack>
65+
{subscriptionUpdateModalOpen && (
66+
<SubscriptionUpdateModal
67+
open={subscriptionUpdateModalOpen}
68+
handleCloseCb={() => {
69+
setSubscriptionUpdateModalOpen(false);
70+
}}
71+
/>
72+
)}
73+
</Stack>
74+
{!profileFlags.IS_ORGANIZATION_MEMBER && (
75+
<Button
76+
variant="contained"
77+
style={{
78+
marginTop: "8px",
79+
marginRight: "10px",
80+
display: profileFlags.IS_ORGANIZATION_MEMBER ? "none" : "inherit",
81+
alignSelf: "end",
82+
}}
83+
onClick={() => {
84+
setSubscriptionUpdateModalOpen(true);
85+
}}
86+
disabled={profileFlags.IS_PRO_SUBSCRIBER}
87+
>
88+
Manage Subscription
89+
</Button>
90+
)}
91+
</Stack>
92+
);
93+
}
94+
95+
export default Subscription;

‎llmstack/client/src/components/SubscriptionUpdateModal.jsx‎

Lines changed: 66 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
11
import { useEffect, useState } from "react";
22

33
import {
4-
TextField,
54
Button,
6-
FormGroup,
7-
InputLabel,
8-
Paper,
95
Stack,
106
Dialog,
117
DialogTitle,
128
DialogContent,
139
DialogActions,
14-
MenuItem,
15-
Select,
10+
FormControl,
11+
RadioGroup,
12+
Card,
13+
CardContent,
14+
CardHeader,
15+
Radio,
16+
Typography,
17+
Divider,
1618
} from "@mui/material";
19+
1720
import { axios } from "../data/axios";
1821
import { LoadingButton } from "@mui/lab";
1922
import { enqueueSnackbar } from "notistack";
2023

21-
const SubscriptionUpdateModal = ({ open, handleCloseCb, userEmail }) => {
24+
const SubscriptionUpdateModal = ({ open, handleCloseCb }) => {
2225
const [subscriptionPrices, setSubscriptionPrices] = useState([]);
2326
const [subscription, setSubscription] = useState("");
2427
const [updateButtonLoading, setUpdateButtonLoading] = useState(false);
@@ -40,45 +43,65 @@ const SubscriptionUpdateModal = ({ open, handleCloseCb, userEmail }) => {
4043

4144
return (
4245
<Dialog open={open} onClose={handleCloseCb} fullWidth>
43-
<DialogTitle>{"Manage Subscription"}</DialogTitle>
46+
<DialogTitle>{"Upgrade Subscription"}</DialogTitle>
4447
<DialogContent>
45-
<FormGroup>
46-
<Stack spacing={2} sx={{ textAlign: "left", margin: "10px" }}>
47-
<Paper sx={{ marginBottom: "30px" }}>
48-
<TextField
49-
label="Email"
50-
value={userEmail}
51-
fullWidth
52-
variant="outlined"
53-
/>
54-
</Paper>
55-
<Paper sx={{ marginBottom: "30px" }}>
56-
<InputLabel id="subscription-id">Subscription</InputLabel>
57-
<Select
58-
labelId="subscription-id"
59-
value={subscription}
60-
label="Subscription"
61-
fullWidth
62-
variant="outlined"
63-
onChange={(e) => {
64-
setSubscription(e.target.value);
65-
}}
48+
<Typography variant="body1">
49+
Choose a subscription plan to upgrade to. To compare the features of
50+
each plan, please visit our{" "}
51+
<a href="https://www.trypromptly.com/#pricing" target="_blank">
52+
pricing page
53+
</a>
54+
.
55+
</Typography>
56+
<br />
57+
<FormControl>
58+
<RadioGroup
59+
overlay
60+
name="subscriptions"
61+
defaultValue=""
62+
row
63+
sx={{ gap: 4 }}
64+
>
65+
{subscriptionPrices.map((subscriptionPrice) => (
66+
<Card
67+
component="label"
68+
key={subscriptionPrice.id}
69+
sx={{ width: "150px", height: "150px" }}
6670
>
67-
{subscriptionPrices.map((subscriptionPrice) => (
68-
<MenuItem
69-
key={subscriptionPrice.id}
70-
value={subscriptionPrice.id}
71-
>
72-
{subscriptionPrice.name}
73-
</MenuItem>
74-
))}
75-
</Select>
76-
</Paper>
77-
</Stack>
78-
</FormGroup>
71+
<CardHeader
72+
title={subscriptionPrice.product_name}
73+
subheader={<Divider />}
74+
sx={{ padding: 0 }}
75+
/>
76+
<CardContent>
77+
<Stack>
78+
<Typography variant="h5">
79+
${subscriptionPrice.unit_amount} /{" "}
80+
{subscriptionPrice.recurring_interval}
81+
</Typography>
82+
<Radio
83+
variant="soft"
84+
value={subscriptionPrice.id}
85+
onChange={(e) => {
86+
setSubscription(e.target.value);
87+
}}
88+
sx={{
89+
mb: 4,
90+
}}
91+
/>
92+
</Stack>
93+
</CardContent>
94+
</Card>
95+
))}
96+
</RadioGroup>
97+
</FormControl>
7998
</DialogContent>
8099
<DialogActions>
81-
<Button disabled={cancelButtonDisabled} onClick={handleCloseCb}>
100+
<Button
101+
disabled={cancelButtonDisabled}
102+
onClick={handleCloseCb}
103+
sx={{ textTransform: "none" }}
104+
>
82105
Cancel
83106
</Button>
84107
<LoadingButton
@@ -107,7 +130,7 @@ const SubscriptionUpdateModal = ({ open, handleCloseCb, userEmail }) => {
107130
}}
108131
variant="contained"
109132
>
110-
Update
133+
Checkout
111134
</LoadingButton>
112135
</DialogActions>
113136
</Dialog>

‎llmstack/client/src/pages/setting.jsx‎

Lines changed: 15 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import ContentCopy from "@mui/icons-material/ContentCopy";
1919
import { useEffect, useState } from "react";
2020
import { enqueueSnackbar } from "notistack";
2121
import Connections from "../components/Connections";
22-
import SubscriptionUpdateModal from "../components/SubscriptionUpdateModal";
22+
import Subscription from "../components/Subscription";
2323
import { fetchData, patchData } from "./dataUtil";
2424
import { organizationState, profileFlagsState } from "../data/atoms";
2525
import { useRecoilValue } from "recoil";
@@ -142,8 +142,6 @@ const SettingPage = () => {
142142
logo: "",
143143
});
144144
const [loading, setLoading] = useState(true);
145-
const [subscriptionUpdateModalOpen, setSubscriptionUpdateModalOpen] =
146-
useState(false);
147145
const [updateKeys, setUpdateKeys] = useState(new Set());
148146
const profileFlags = useRecoilValue(profileFlagsState);
149147
const organization = useRecoilValue(organizationState);
@@ -336,98 +334,27 @@ const SettingPage = () => {
336334
</Box>
337335
</Stack>
338336
</Paper>
339-
{process.env.REACT_APP_ENABLE_SUBSCRIPTION_MANAGEMENT ===
340-
"true" && (
341-
<Stack>
342-
<strong>Subscription</strong>
343-
<p
344-
style={{
345-
display: profileFlags.IS_ORGANIZATION_MEMBER
346-
? "none"
347-
: "block",
348-
}}
349-
>
350-
Logged in as&nbsp;<strong>{formData.user_email}</strong>.
351-
You are currently subscribed to&nbsp;
352-
<strong>
353-
{profileFlags.IS_PRO_SUBSCRIBER
354-
? "Pro"
355-
: profileFlags.IS_BASIC_SUBSCRIBER
356-
? "Basic"
357-
: "Free"}
358-
</strong>
359-
&nbsp;tier. Click on the Manage Subscription button below to
360-
change your plan.&nbsp;
361-
<br />
362-
<br />
363-
<i>
364-
Note: You will be needed to login with a link that is sent
365-
to your email.
366-
</i>
367-
</p>
368-
<p
369-
style={{
370-
display: profileFlags.IS_ORGANIZATION_MEMBER
371-
? "block"
372-
: "none",
373-
}}
374-
>
375-
Logged in as <strong>{formData.user_email}</strong>. Your
376-
account is managed by your organization,&nbsp;
377-
<strong>{organization?.name}</strong>. Please contact your
378-
admin to manage your subscription.
379-
</p>
380-
</Stack>
381-
)}
382-
{process.env.REACT_APP_ENABLE_SUBSCRIPTION_MANAGEMENT ===
383-
"true" && <Divider />}
384-
<Stack
385-
spacing={2}
386-
direction={"row"}
387-
flexDirection={"row-reverse"}
337+
<Button
338+
variant="contained"
339+
sx={{ alignSelf: "end", width: "fit-content" }}
340+
onClick={() => {
341+
handleUpdate(updateKeys);
342+
}}
388343
>
389-
<Button
390-
variant="contained"
391-
onClick={() => {
392-
handleUpdate(updateKeys);
393-
}}
394-
>
395-
Update
396-
</Button>
397-
{process.env.REACT_APP_ENABLE_SUBSCRIPTION_MANAGEMENT ===
398-
"true" && (
399-
<Button
400-
variant="outlined"
401-
style={{
402-
marginRight: "10px",
403-
display: profileFlags.IS_ORGANIZATION_MEMBER
404-
? "none"
405-
: "inherit",
406-
}}
407-
onClick={() => {
408-
setSubscriptionUpdateModalOpen(true);
409-
}}
410-
>
411-
Manage Subscription
412-
</Button>
413-
)}
414-
</Stack>
344+
Update
345+
</Button>
415346
</Stack>
416347
</Grid>
348+
417349
<Grid item xs={12} md={6}>
418-
<Connections />
350+
<Stack>
351+
<Connections />
352+
{process.env.REACT_APP_ENABLE_SUBSCRIPTION_MANAGEMENT ===
353+
"true" && <Subscription user_email={formData.user_email} />}
354+
</Stack>
419355
</Grid>
420356
</Grid>
421357
)}
422-
{subscriptionUpdateModalOpen && (
423-
<SubscriptionUpdateModal
424-
open={subscriptionUpdateModalOpen}
425-
handleCloseCb={() => {
426-
setSubscriptionUpdateModalOpen(false);
427-
}}
428-
userEmail={formData.user_email}
429-
/>
430-
)}
431358
</div>
432359
);
433360
};

0 commit comments

Comments
 (0)