Skip to content

style: format code with StandardJS #152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

style: format code with StandardJS #152

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 63 additions & 64 deletions src/pages/settings/billing.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -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
Expand All @@ -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 }}
>
Expand All @@ -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>
Expand All @@ -149,5 +148,5 @@ export default function Billing() {

<Footer />
</>
);
)
}