From f221d95d4d19023938a954c3fa4e11dafdb4c444 Mon Sep 17 00:00:00 2001
From: Nieky Allen <nieky.allen@gmail.com>
Date: Tue, 1 Aug 2023 00:50:04 -0500
Subject: [PATCH] update stripe utils, impl confirmation page, update premium
 section

---
 web/api/stripe.ts          | 12 ++++++-----
 web/pages/confirmation.tsx | 44 ++++++++++++++++++++++++++++++++++++++
 web/pages/index.tsx        | 32 ++++++++++++++++++++++-----
 3 files changed, 78 insertions(+), 10 deletions(-)
 create mode 100644 web/pages/confirmation.tsx

diff --git a/web/api/stripe.ts b/web/api/stripe.ts
index 12081d4..5ea247c 100644
--- a/web/api/stripe.ts
+++ b/web/api/stripe.ts
@@ -18,11 +18,13 @@ export function buildEvent(request: NextApiRequest) {
 }
 
 export async function getEmailForCheckout(id: string) {
-    const session = await client.checkout.sessions.retrieve(id, {
-        expand: ['line_items'],
-    });
-
-    // session.line_items!.data[0]
+    const session = await client.checkout.sessions.retrieve(id);
 
     return session.customer_email!;
 }
+
+export async function validateCheckoutSession(id: string) {
+    const session = await client.checkout.sessions.retrieve(id);
+
+    return session.payment_status === 'paid';
+}
diff --git a/web/pages/confirmation.tsx b/web/pages/confirmation.tsx
new file mode 100644
index 0000000..1076860
--- /dev/null
+++ b/web/pages/confirmation.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Center, Container, Title, useMantineTheme } from '@mantine/core';
+import { GetServerSideProps } from 'next/types';
+import { validateCheckoutSession } from 'api/stripe';
+
+const PremiumConfirmation = (props: { success: boolean }) => {
+    const theme = useMantineTheme();
+    return (
+        <Container style={{ maxWidth: '700px' }}>
+            <Center
+                style={{
+                    minHeight: '230px',
+                    paddingTop: theme.spacing.xl,
+                    paddingBottom: theme.spacing.md,
+                }}
+            >
+                <Title size={'h2'}>
+                    Premium{' '}
+                    {props.success ? 'Activated' : 'Subscription Failed'}!
+                </Title>
+            </Center>
+        </Container>
+    );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({
+    query,
+    res,
+}) => {
+    res.setHeader('Cache-Control', 'private, maxage=600');
+
+    let success = false;
+    const checkoutSessionId = query.id;
+
+    if (checkoutSessionId && typeof checkoutSessionId === 'string') {
+        const sessionPaid = await validateCheckoutSession(checkoutSessionId);
+
+        if (sessionPaid) success = true;
+    }
+
+    return { props: { success } };
+};
+
+export default PremiumConfirmation;
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index 69c1afd..a43011b 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -92,15 +92,37 @@ const Home = () => {
             <Faq />
             <Center
                 style={{
-                    minHeight: '230px',
+                    minHeight: '200px',
                     paddingTop: theme.spacing.xl,
                     paddingBottom: theme.spacing.md,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-evenly',
+                    alignItems: 'center',
                 }}
             >
-                <Button
-                    onClick={() => (window.location.href = paymentLink)}
-                    type={'button'}
-                >Get Premium</Button>
+                <Title size={'h4'}>
+                    Get unlimited daily drops and upcoming features by support
+                    deadrop!
+                </Title>
+                <Center
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    <Button
+                        onClick={() => (window.location.href = paymentLink)}
+                        type={'button'}
+                    >
+                        Get Premium
+                    </Button>
+                    <Text size={'xs'}>
+                        All licenses are attached to your email.
+                    </Text>
+                </Center>
             </Center>
         </>
     );