From 3a7426dec685440125f9e84055ed10dc95b26cc2 Mon Sep 17 00:00:00 2001
From: "deepsource-autofix[bot]"
 <62050782+deepsource-autofix[bot]@users.noreply.github.com>
Date: Fri, 26 Jul 2024 03:25:09 +0000
Subject: [PATCH] style: format code with StandardJS

This commit fixes the style issues introduced in 56d8278 according to the output
from StandardJS.

Details: None
---
 src/pages/settings/billing.jsx | 127 ++++++++++++++++-----------------
 1 file changed, 63 insertions(+), 64 deletions(-)

diff --git a/src/pages/settings/billing.jsx b/src/pages/settings/billing.jsx
index 62b109e6..346589bd 100644
--- a/src/pages/settings/billing.jsx
+++ b/src/pages/settings/billing.jsx
@@ -1,24 +1,23 @@
-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
-import { motion } from 'framer-motion';
-import { Context } from '@/context';
-import { useContext } from 'react';
-
-export default function Billing() {
+import { loadStripe } from '@stripe/stripe-js'
+import Head from 'next/head'
+import { Footer } from '@/components/Footer'
+import { useState, useEffect, useContext } 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
+import { motion } from 'framer-motion'
+import { Context } from '@/context'
+const STRIPE_KEY = process.env.NEXT_PUBLIC_APP_STRIPE_KEY
+
+export default function Billing () {
   const updateCardInfo = async () => {
     try {
-      let test = "https://billing.stripe.com/p/login/test_dR6dQZdpX3Fh4ne4gg";
-      let prod = 'https://billing.stripe.com/p/login/28o4i86t419hh1K3cc';
-      window.location.href =test;
+      const test = 'https://billing.stripe.com/p/login/test_dR6dQZdpX3Fh4ne4gg'
+      const prod = 'https://billing.stripe.com/p/login/28o4i86t419hh1K3cc'
+      window.location.href = test
       /*
       const stripe = await loadStripe(STRIPE_KEY);
       const response = await fetch(
@@ -41,54 +40,54 @@ export default function Billing() {
       });
       */
     } catch (error) {
-      console.log(error);
+      console.log(error)
     }
-  };
-  const { role } = useContext(Context);
+  }
+  const { role } = useContext(Context)
 
   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();
+          '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 (
     <>
       <Head>
         <title>User Settings</title>
         <meta
-          name="description"
-          content="Cybersecurity made easy for everyone"
+          name='description'
+          content='Cybersecurity made easy for everyone'
         />
         <style>
           @import
@@ -98,36 +97,36 @@ export default function Billing() {
 
       <StandardNav />
 
-      <div className="mx-auto max-w-6xl md:flex">
-        {isMobile ? <Dropdown tab="../settings/billing" /> : <Sidebar />}
+      <div className='mx-auto max-w-6xl md:flex'>
+        {isMobile ? <Dropdown tab='../settings/billing' /> : <Sidebar />}
 
-        <div className="max-w-3xl flex-1 px-4 xl:overflow-y-auto">
-          <div className="mx-auto   mr-auto  px-4 py-10 sm:px-6 lg:px-5 lg:py-12">
-            <h1 className="mb-3 text-3xl font-bold tracking-tight text-white">
+        <div className='max-w-3xl flex-1 px-4 xl:overflow-y-auto'>
+          <div className='mx-auto   mr-auto  px-4 py-10 sm:px-6 lg:px-5 lg:py-12'>
+            <h1 className='mb-3 text-3xl font-bold tracking-tight text-white'>
               Billing
             </h1>
             {role != 'USER' && (
-            <motion.div
-              className="flex rounded-lg bg-gradient-to-br from-blue-600 to-purple-400 to-70%"
-              whileHover={{ scale: 1.02 }}
-            >
-              <img
-                className="mb-0 mt-auto w-1/6"
-                src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/FancyKana.png`}
-              />
-              
-                <div className="ml-0  mt-2 grid w-full grid-cols-1 place-items-center px-4 ">
-                  <div className="flex w-full  text-lg text-white max-md:my-2 max-md:text-xs">
+              <motion.div
+                className='flex rounded-lg bg-gradient-to-br from-blue-600 to-purple-400 to-70%'
+                whileHover={{ scale: 1.02 }}
+              >
+                <img
+                  className='mb-0 mt-auto w-1/6'
+                  src={`${process.env.NEXT_PUBLIC_FRONTEND_URL}/FancyKana.png`}
+                />
+
+                <div className='ml-0  mt-2 grid w-full grid-cols-1 place-items-center px-4 '>
+                  <div className='flex w-full  text-lg text-white max-md:my-2 max-md:text-xs'>
                     <div>
-                      <p className="font-semibold">
+                      <p className='font-semibold'>
                         You have an active subscription.
                       </p>
                     </div>
 
-                    <div className="ml-auto px-4 ">
+                    <div className='ml-auto px-4 '>
                       <motion.button
                         onClick={updateCardInfo}
-                        className="rounded-lg bg-white px-2 py-1 text-sm text-purple-600"
+                        className='rounded-lg bg-white px-2 py-1 text-sm text-purple-600'
                         whileHover={{ scale: 1.05 }}
                         whileTap={{ scale: 0.95 }}
                       >
@@ -136,10 +135,10 @@ export default function Billing() {
                     </div>
                   </div>
                 </div>
-            </motion.div>
-             )}
+              </motion.div>
+            )}
 
-            <div className="mt-4 grid w-full grid-cols-2 gap-x-4 max-sm:grid-cols-1">
+            <div className='mt-4 grid w-full grid-cols-2 gap-x-4 max-sm:grid-cols-1'>
               <FreeBox />
               <UpgradeBox />
             </div>
@@ -149,5 +148,5 @@ export default function Billing() {
 
       <Footer />
     </>
-  );
+  )
 }