dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix: Checkout

Browse Source 
Fix: Formatting
This commit is contained in:
Chris-1010
2025-01-23 14:50:38 +00:00
parent 33111ea077
commit 667088ec9e
9 changed files with 56 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/components/Checkout/CheckoutForm.tsx
View File

@@ -76,11 +76,10 @@ const CheckoutForm: React.FC<CheckoutFormProps> = ({ onClose }) => {
>
✕
</button>
<div className="bg-white p-6 rounded-lg w-full max-w-2xl relative h-full rounded-[2rem]">
<div className="bg-white p-6 rounded-lg w-full max-w-2xl relative h-full rounded-[2rem]" style={{ width: "clamp(300px, 60vw, 800px)" }}>
<div
id="checkout"
className="h-full overflow-auto min-w-[30vw]"
style={{ width: "clamp(300px, 60vw, 800px)" }}
>
<EmbeddedCheckoutProvider stripe={stripePromise} options={options}>
<EmbeddedCheckout />

2
frontend/src/components/Layout/Button.tsx
View File

@@ -11,7 +11,7 @@ const Button: React.FC<ButtonProps> = ({
}) => {
return (
<div>
<button onClick={onClick}>
<button className="underline bg-blue-600/30 p-4 rounded-[5rem] transition-all hover:text-[3.2rem]" onClick={onClick}>
{title}
</button>
</div>

1
frontend/src/pages/HomePage.tsx
View File

@@ -3,7 +3,6 @@ import Navbar from "../components/Layout/Navbar";
import ListRow from "../components/Layout/ListRow";
// import { data, Link } from "react-router-dom";
const handleStreamClick = (streamId: string) => {
// Handle navigation to stream page
console.log(`Navigating to stream ${streamId}`);

52
frontend/src/pages/VideoPage.tsx
View File

@@ -1,36 +1,38 @@
import React, { useState, useEffect } from 'react';
import Button from '../components/Layout/Button';
import CheckoutForm, { Return } from '../components/Checkout/CheckoutForm';
import React, { useState, useEffect } from "react";
import Button from "../components/Layout/Button";
import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
const VideoPage: React.FC = () => {
const [showCheckout, setShowCheckout] = useState(false);
const showReturn = window.location.search.includes('session_id');
useEffect(() => {
if (showCheckout) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
// Cleanup function to ensure overflow is restored when component unmounts
return () => {
document.body.style.overflow = "unset";
};
}, [showCheckout]);
return (
<div>
<h1>Hello!</h1>
const [showCheckout, setShowCheckout] = useState(false);
const showReturn = window.location.search.includes("session_id");
<Button
useEffect(() => {
if (showCheckout) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "unset";
}
// Cleanup function to ensure overflow is restored when component unmounts
return () => {
document.body.style.overflow = "unset";
};
}, [showCheckout]);
return (
<div className="text-5xl text-red-600 flex flex-col justify-evenly align-center h-screen text-center">
<h1>
Hello! Welcome to the soon-to-be-awesome Video Page where you'll watch
the best streams ever!
</h1>
<Button
title="Payment Screen Test"
onClick={() => setShowCheckout(true)}
/>
{showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} />}
{showReturn && <Return />}
</div>
);
</div>
);
};
export default VideoPage;
export default VideoPage;