diff --git a/src/pages/settings/billing.jsx b/src/pages/settings/billing.jsx
index 1ecfede7..312fc60a 100644
--- a/src/pages/settings/billing.jsx
+++ b/src/pages/settings/billing.jsx
@@ -1,21 +1,21 @@
-import { loadStripe } from '@stripe/stripe-js';
-const STRIPE_KEY = process.env.NEXT_PUBLIC_APP_STRIPE_KEY;
-import Head from 'next/head';
-import { Footer } from '@/components/Footer';
-import { useState, useEffect } from 'react';
-
-import { StandardNav } from '@/components/StandardNav';
-import Sidebar from '@/components/settingComponents/sidebar';
-import UpgradeBox from '@/components/settingComponents/UpgradeBox';
-import FreeBox from '@/components/settingComponents/FreeBox';
-import Dropdown from '@/components/settingComponents/dropdown'; // Import the new Dropdown component
-
-export default function Billing() {
+import { loadStripe } from '@stripe/stripe-js'
+import Head from 'next/head'
+import { Footer } from '@/components/Footer'
+import { useState, useEffect } from 'react'
+
+import { StandardNav } from '@/components/StandardNav'
+import Sidebar from '@/components/settingComponents/sidebar'
+import UpgradeBox from '@/components/settingComponents/UpgradeBox'
+import FreeBox from '@/components/settingComponents/FreeBox'
+import Dropdown from '@/components/settingComponents/dropdown'
+const STRIPE_KEY = process.env.NEXT_PUBLIC_APP_STRIPE_KEY // Import the new Dropdown component
+
+export default function Billing () {
const redirectToCheckout = async (event) => {
try {
- const stripe = await loadStripe(STRIPE_KEY);
- const subscriptionType = document.getElementById('paymentType').value;
- // console.log(subscriptionType);
+ const stripe = await loadStripe(STRIPE_KEY)
+ const subscriptionType = document.getElementById('paymentType').value
+ // console.log(subscriptionType);
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/create-checkout-session`,
@@ -25,37 +25,37 @@ export default function Billing() {
subType: subscriptionType,
quantity: 1,
operation: 'subscription',
- data: {},
+ data: {}
}),
headers: {
- 'Content-Type': 'application/json',
+ 'Content-Type': 'application/json'
},
- credentials: 'include',
+ credentials: 'include'
}
- );
+ )
- const session = await response.json();
+ const session = await response.json()
if (session.error) {
- console.log('Creating the stripe session failed');
- return;
+ console.log('Creating the stripe session failed')
+ return
}
const result = await stripe.redirectToCheckout({
- sessionId: session.sessionIds,
- });
+ sessionId: session.sessionIds
+ })
if (result.error) {
// console.log(result.error.message);
}
} catch (error) {
- console.log(error);
+ console.log(error)
}
- };
+ }
const updateCardInfo = async () => {
try {
- const stripe = await loadStripe(STRIPE_KEY);
- const subscriptionType = document.getElementById('paymentType').value;
+ const stripe = await loadStripe(STRIPE_KEY)
+ const subscriptionType = document.getElementById('paymentType').value
const response = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/update-card`,
@@ -63,67 +63,67 @@ export default function Billing() {
method: 'POST',
credentials: 'include',
body: JSON.stringify({
- subType: subscriptionType,
+ subType: subscriptionType
}),
headers: {
- 'Content-Type': 'application/json',
- },
+ 'Content-Type': 'application/json'
+ }
}
- );
+ )
- const session = await response.json();
+ const session = await response.json()
await stripe.redirectToCheckout({
- sessionId: session.sessionId,
- });
+ sessionId: session.sessionId
+ })
} catch (error) {
- console.log(error);
+ console.log(error)
}
- };
+ }
const cancelSubscription = async () => {
try {
- const subscriptionType = document.getElementById('paymentType').value;
- const url = `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/cancel`;
+ const subscriptionType = document.getElementById('paymentType').value
+ const url = `${process.env.NEXT_PUBLIC_API_URL}/payments/stripe/cancel`
const response = await fetch(url, {
method: 'PUT',
credentials: 'include',
body: JSON.stringify({
- subType: subscriptionType,
+ subType: subscriptionType
}),
headers: {
- 'Content-Type': 'application/json',
- },
- });
- const data = await response.json();
- // console.log(data.message);
+ 'Content-Type': 'application/json'
+ }
+ })
+ const data = await response.json()
+ // console.log(data.message);
} catch (err) {
- console.log(err);
+ console.log(err)
}
- };
+ }
- const [isMobile, setIsMobile] = useState(false);
+ const [isMobile, setIsMobile] = useState(false)
useEffect(() => {
const handleResize = () => {
- setIsMobile(window.innerWidth <= 768);
- };
+ setIsMobile(window.innerWidth <= 768)
+ }
- handleResize(); // Check on initial render
- window.addEventListener('resize', handleResize);
+ handleResize() // Check on initial render
+ window.addEventListener('resize', handleResize)
return () => {
- window.removeEventListener('resize', handleResize);
- };
- }, []);
+ window.removeEventListener('resize', handleResize)
+ }
+ }, [])
return (
<>
User Settings