V.1! Clean code

README.md

@@ -1,29 +0,0 @@
-# Next.js + Tailwind CSS Example
-
-This example shows how to use [Tailwind CSS](https://tailwindcss.com/) (v2.1) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
-
-It uses the new [`Just-in-Time Mode`](https://tailwindcss.com/docs/just-in-time-mode) for Tailwind CSS.
-
-## Preview
-
-Preview the example live on [StackBlitz](http://stackblitz.com/):
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss)
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-tailwindcss with-tailwindcss-app
-# or
-yarn create next-app --example with-tailwindcss with-tailwindcss-app
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

components/Avatar.js

@@ -1,3 +1,9 @@
+/*
+As a user, you can upload an avatar in your dashboard. This component will handle 
+the upload.
+You can tweak the max size, line 47
+*/
+
 import { useEffect, useState } from "react";
 
 import { supabase } from "utils/supabaseClient";

components/CardsLanding.js

@@ -1,5 +1,4 @@
 import CardLanding from "components/UI/CardLanding";
-import Image from "next/image";
 import cardAuth from "public/cardAuth.svg";
 import cardFee from "public/cardFee.svg";
 import cardPage from "public/cardPage.svg";

components/Dashboard.js

@@ -2,21 +2,33 @@
 This is the Dashboard component. If a user is logged in, he/she can update his/her name and website.
 You can add as many elements as you want. Don't forget to update your getProfile() and updateProfile()
 function with your new elements.
+It also show you the current subscription plan
 */
 
+import { useEffect, useState } from "react";
+
 import Avatar from "./Avatar";
 import Image from "next/image";
+import PaymentModal from "./PaymentModal";
 import Plan from "public/plan.svg";
 import { PriceIds } from "utils/priceList";
 import { supabase } from "../utils/supabaseClient";
 import { toast } from "react-toastify";
-import { useState } from "react";
+import { useRouter } from "next/router";
 
 export default function Account(props) {
+  const router = useRouter();
   const [loading, setLoading] = useState(false);
   const [username, setUsername] = useState(props.profile.username);
   const [website, setWebsite] = useState(props.profile.website);
   const [avatar_url, setAvatarUrl] = useState(null);
+  const [payment, setPayment] = useState(false);
+
+  useEffect(() => {
+    if (router.query.session_id && router.query.session_id !== "canceled") {
+      setPayment(true);
+    }
+  }, []);
 
   async function updateProfile({ username, website, avatar_url }) {
     try {
@@ -106,11 +118,14 @@ export default function Account(props) {
 
       <div className='max-w-xl flex flex-row flex-wrap m-auto w-full p-5 bordered border-2 border-primary shadow-lg my-5'>
         <Image src={Plan} />
-        <div className="flex flex-col m-auto">
+        <div className='flex flex-col m-auto'>
           <h2>Your current plan</h2>
-          <p className="font-bold">{props.plan ? PriceIds[props.plan] : "Free tier"}</p>
+          <p className='font-bold'>
+            {props.plan ? PriceIds[props.plan] : "Free tier"}
+          </p>
         </div>
       </div>
+      <PaymentModal open={payment} setPayment={setPayment} />
     </div>
   );
 }

components/PaymentModal.js

@@ -1,29 +1,15 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment, useState } from "react";
 
-export default function MyModal() {
-  let [isOpen, setIsOpen] = useState(false);
+import { Fragment } from "react";
 
+const PaymentModal = (props) => {
   function closeModal() {
-    setIsOpen(false);
-  }
-
-  function openModal() {
-    setIsOpen(true);
+    props.setPayment(false);
   }
 
   return (
     <>
-      <div className=' inset-0 flex items-center justify-center'>
-        <button
-          type='button'
-          onClick={openModal}
-          className='px-4 py-2 text-sm font-medium text-white bg-black rounded-md bg-opacity-20 hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75'>
-          Open dialog
-        </button>
-      </div>
-
-      <Transition appear show={isOpen} as={Fragment}>
+      <Transition appear show={props.open} as={Fragment}>
         <Dialog
           as='div'
           className='fixed inset-0 z-10 overflow-y-auto'
@@ -62,8 +48,8 @@ export default function MyModal() {
                 </Dialog.Title>
                 <div className='mt-2'>
                   <p className='text-sm text-gray-500'>
-                    Your payment has been successfully submitted. We’ve sent
-                    your an email with all of the details of your order.
+                    Your payment has been successfully submitted. Thank you for
+                    your support!
                   </p>
                 </div>
 
@@ -82,4 +68,6 @@ export default function MyModal() {
       </Transition>
     </>
   );
-}
+};
+
+export default PaymentModal;

components/Pricing.js

@@ -45,11 +45,12 @@ const Pricing = () => {
   }, [user]);
 
   const flat = false; // Switch between subscription system or flat prices
+
   const pricing = {
     monthly: {
       personal: "$5/mo",
-      team: "15/mo",
-      pro: "35/mo",
+      team: "$15/mo",
+      pro: "$35/mo",
     },
     yearly: {
       personal: "$50/yr",
@@ -77,13 +78,9 @@ const Pricing = () => {
         tokenId: session.access_token,
       })
       .then((result) => {
-        stripe
-          .redirectToCheckout({
-            sessionId: result.data.sessionId,
-          })
-          .then((result) => {
-            console.log(result);
-          });
+        stripe.redirectToCheckout({
+          sessionId: result.data.sessionId,
+        });
       });
 
     // Redirect to Checkout.
@@ -125,7 +122,7 @@ const Pricing = () => {
           </div>
           <div>
             <p className={`${!enabled ? "text-gray-500" : null}`}>
-              Billed annually
+              Billed anually
             </p>
           </div>
         </div>

components/UI/CardLanding.js

@@ -1,3 +1,7 @@
+/* 
+This card is used on the landing page
+*/
+
 import Image from "next/image";
 
 const CardLanding = (props) => {

env.local.example

@@ -1,10 +1,17 @@
-NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
-NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-SUPABASE_ADMIN_KEY=YOUR_SUPABASE_ADMIN_KEY
+
 NEXT_PUBLIC_TITLE="SupaNexTail"
-SENDGRID_SECRET=YOUR_SENGRID_SECRET
+
+# SENDGRID
 SENDGRID_MAILTO=YOUR_RECIPIENT
 SENDGRID_MAILFROM=YOUR_VERIFIED_SENDER
+SENDGRID_SECRET=YOUR_SENGRID_SECRET
+
+# STRIPE
+STRIPE_WEBHOOK=YOUR_STRIPE_WEBHOOK
 STRIPE_SECRET=YOUR_SECRET_STRIPE_KEY
 NEXT_PUBLIC_STRIPE_PUBLIC_KEY=YOUR_PUBLIC_STRIPE_KEY
-STRIPE_WEBHOOK=YOUR_STRIPE_WEBHOOK
+
+#SUPABASE
+NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
+NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+SUPABASE_ADMIN_KEY=YOUR_SUPABASE_ADMIN_KEY

package-lock.json

@@ -114,30 +114,31 @@
       "integrity": "sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug=="
     },
     "node_modules/@headlessui/react": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.2.0.tgz",
-      "integrity": "sha512-19DkLz8gDgbi+WvkoTzi9vs0NK9TJf94vbYhMzB4LYJo03Kili0gmvXT9CiKZoxXZ7YAvy/b1U1oQKEnjWrqxw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.3.0.tgz",
+      "integrity": "sha512-2gqTO6BQ3Jr8vDX1B67n1gl6MGKTt6DBmR+H0qxwj0gTMnR2+Qpktj8alRWxsZBODyOiBb77QSQpE/6gG3MX4Q==",
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "react": ">=16"
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
       }
     },
     "node_modules/@next/env": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.0.tgz",
-      "integrity": "sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA=="
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.1.tgz",
+      "integrity": "sha512-yZfKh2U6R9tEYyNUrs2V3SBvCMufkJ07xMH5uWy8wqcl5gAXoEw6A/1LDqwX3j7pUutF9d1ZxpdGDA3Uag+aQQ=="
     },
     "node_modules/@next/polyfill-module": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.0.tgz",
-      "integrity": "sha512-gydtFzRqsT549U8+sY8382I/f4HFcelD8gdUGnAofQJa/jEU1jkxmjCHC8tmEiyeMLidl7iDZgchfSCpmMzzUg=="
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.1.tgz",
+      "integrity": "sha512-Cjs7rrKCg4CF4Jhri8PCKlBXhszTfOQNl9AjzdNy4K5jXFyxyoSzuX2rK4IuoyE+yGp5A3XJCBEmOQ4xbUp9Mg=="
     },
     "node_modules/@next/react-dev-overlay": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.0.0.tgz",
-      "integrity": "sha512-q+Wp+eStEMThe77zxdeJ/nbuODkHR6P+/dfUqYXZSqbLf6x5c5xwLBauwwVbkCYFZpAlDuL8Jk8QSAH1OsqC2w==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.0.1.tgz",
+      "integrity": "sha512-lvUjMVpLsgzADs9Q8wtC5LNqvfdN+M0BDMSrqr04EDWAyyX0vURHC9hkvLbyEYWyh+WW32pwjKBXdkMnJhoqMg==",
       "dependencies": {
         "@babel/code-frame": "7.12.11",
         "anser": "1.4.9",
@@ -221,9 +222,9 @@
       }
     },
     "node_modules/@next/react-refresh-utils": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.0.0.tgz",
-      "integrity": "sha512-hi5eY+KBn4QGtUv7VL2OptdM33fI2hxhd7+omOFmAK+S0hDWhg1uqHqqGJk0W1IfqlWEzzL10WvTJDPRAtDugQ==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.0.1.tgz",
+      "integrity": "sha512-K347DM6Z7gBSE+TfUaTTceWvbj0B6iNAsFZXbFZOlfg3uyz2sbKpzPYYFocCc27yjLaS8OfR8DEdS2mZXi8Saw==",
       "peerDependencies": {
         "react-refresh": "0.8.3",
         "webpack": "^4 || ^5"
@@ -454,10 +455,9 @@
       }
     },
     "node_modules/arg": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.0.tgz",
-      "integrity": "sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ==",
-      "dev": true
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
+      "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg=="
     },
     "node_modules/asn1.js": {
       "version": "5.4.1",
@@ -735,9 +735,9 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
     },
     "node_modules/bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
       "engines": {
         "node": ">= 0.8"
       }
@@ -773,9 +773,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001239",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz",
-      "integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==",
+      "version": "1.0.30001240",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001240.tgz",
+      "integrity": "sha512-nb8mDzfMdxBDN7ZKx8chWafAdBp5DAAlpWvNyUGe5tcDWd838zpzDN3Rah9cjCqhfOKkrvx40G2SDtP0qiWX/w==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/browserslist"
@@ -1127,9 +1127,9 @@
       "dev": true
     },
     "node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
+      "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=",
       "engines": {
         "node": ">= 0.6"
       }
@@ -1161,9 +1161,9 @@
       }
     },
     "node_modules/didyoumean": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz",
-      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
     "node_modules/diffie-hellman": {
@@ -1199,9 +1199,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.752",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
-      "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A=="
+      "version": "1.3.759",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.759.tgz",
+      "integrity": "sha512-nM76xH0t2FBH5iMEZDVc3S/qbdKjGH7TThezxC8k1Q7w7WHvIAyJh8lAe2UamGfdRqBTjHfPDn82LJ0ksCiB9g=="
     },
     "node_modules/elliptic": {
       "version": "6.5.4",
@@ -1683,20 +1683,24 @@
       }
     },
     "node_modules/http-errors": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-      "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
+      "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
       "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
+        "depd": "1.1.1",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.0.3",
+        "statuses": ">= 1.3.1 < 2"
       },
       "engines": {
         "node": ">= 0.6"
       }
     },
+    "node_modules/http-errors/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
     "node_modules/https-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
@@ -2244,73 +2248,6 @@
         "node": ">= 8.0.0"
       }
     },
-    "node_modules/micro/node_modules/arg": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
-      "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg=="
-    },
-    "node_modules/micro/node_modules/bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/micro/node_modules/depd": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
-      "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/micro/node_modules/http-errors": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
-      "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
-      "dependencies": {
-        "depd": "1.1.1",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.0.3",
-        "statuses": ">= 1.3.1 < 2"
-      },
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/micro/node_modules/iconv-lite": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/micro/node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-    },
-    "node_modules/micro/node_modules/raw-body": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz",
-      "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=",
-      "dependencies": {
-        "bytes": "3.0.0",
-        "http-errors": "1.6.2",
-        "iconv-lite": "0.4.19",
-        "unpipe": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/micro/node_modules/setprototypeof": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
-      "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ="
-    },
     "node_modules/micromatch": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@@ -2405,16 +2342,16 @@
       }
     },
     "node_modules/next": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/next/-/next-11.0.0.tgz",
-      "integrity": "sha512-1OA0ccCTwVtdLats/1v7ReiBVx+Akya0UVhHo9IBr8ZkpDI3/SGNcaruJBp5agy8ROF97VDKkZamoUXxRB9NUA==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-11.0.1.tgz",
+      "integrity": "sha512-yR7be7asNbvpVNpi6xxEg28wZ7Gqmj1nOt0sABH9qORmF3+pms2KZ7Cng33oK5nqPIzEEFJD0pp2PCe3/ueMIg==",
       "dependencies": {
         "@babel/runtime": "7.12.5",
         "@hapi/accept": "5.0.2",
-        "@next/env": "11.0.0",
-        "@next/polyfill-module": "11.0.0",
-        "@next/react-dev-overlay": "11.0.0",
-        "@next/react-refresh-utils": "11.0.0",
+        "@next/env": "11.0.1",
+        "@next/polyfill-module": "11.0.1",
+        "@next/react-dev-overlay": "11.0.1",
+        "@next/react-refresh-utils": "11.0.1",
         "assert": "2.0.0",
         "ast-types": "0.13.2",
         "browserify-zlib": "0.2.0",
@@ -2500,6 +2437,48 @@
       "resolved": "https://registry.npmjs.org/next-tick/-/next-tick-1.0.0.tgz",
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
     },
+    "node_modules/next/node_modules/bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/next/node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/next/node_modules/http-errors": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
+      "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+      "dependencies": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/next/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.2.13",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz",
@@ -2517,6 +2496,25 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
+    "node_modules/next/node_modules/raw-body": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz",
+      "integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==",
+      "dependencies": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.3",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/next/node_modules/setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
     "node_modules/next/node_modules/source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -3248,13 +3246,13 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz",
-      "integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz",
+      "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=",
       "dependencies": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.3",
-        "iconv-lite": "0.4.24",
+        "bytes": "3.0.0",
+        "http-errors": "1.6.2",
+        "iconv-lite": "0.4.19",
         "unpipe": "1.0.0"
       },
       "engines": {
@@ -3262,12 +3260,9 @@
       }
     },
     "node_modules/raw-body/node_modules/iconv-lite": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3"
-      },
+      "version": "0.4.19",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
+      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3512,9 +3507,9 @@
       "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "node_modules/setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
+      "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ="
     },
     "node_modules/sha.js": {
       "version": "2.4.11",
@@ -3676,9 +3671,9 @@
       }
     },
     "node_modules/stripe": {
-      "version": "8.156.0",
-      "resolved": "https://registry.npmjs.org/stripe/-/stripe-8.156.0.tgz",
-      "integrity": "sha512-q+bixlhaxnSI/Htk/iB1i5LhuZ557hL0pFgECBxQNhso1elxIsOsPOIXEuo3tSLJEb8CJSB7t/+Fyq6KP69tAQ==",
+      "version": "8.157.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-8.157.0.tgz",
+      "integrity": "sha512-9GNtWEAeTO4D1V6yZl9hyyi0Zgz20uAtw8nwWrip3V0tEaJcKDL6IAqKssy5hqcDrkHNN3Wxa767D8Mcg7B/Yg==",
       "dependencies": {
         "@types/node": ">=8.1.0",
         "qs": "^6.6.0"
@@ -3738,16 +3733,16 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.2.tgz",
-      "integrity": "sha512-OzFWhlnfrO3JXZKHQiqZcb0Wwl3oJSmQ7PvT2jdIgCjV5iUoAyql9bb9ZLCSBI5TYXmawujXAoNxXVfP5Auy/Q==",
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.4.tgz",
+      "integrity": "sha512-OdBCPgazNNsknSP+JfrPzkay9aqKjhKtFhbhgxHgvEFdHy/GuRPo2SCJ4w1SFTN8H6FPI4m6qD/Jj20NWY1GkA==",
       "dev": true,
       "dependencies": {
         "@fullhuman/postcss-purgecss": "^4.0.3",
         "arg": "^5.0.0",
         "bytes": "^3.0.0",
         "chalk": "^4.1.1",
-        "chokidar": "^3.5.1",
+        "chokidar": "^3.5.2",
         "color": "^3.1.3",
         "cosmiconfig": "^7.0.0",
         "detective": "^5.2.0",
@@ -3765,7 +3760,7 @@
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
         "postcss-js": "^3.0.3",
-        "postcss-load-config": "^3.0.1",
+        "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.5",
         "postcss-selector-parser": "^6.0.6",
         "postcss-value-parser": "^4.1.0",
@@ -3802,6 +3797,12 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/tailwindcss/node_modules/arg": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.0.tgz",
+      "integrity": "sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ==",
+      "dev": true
+    },
     "node_modules/tailwindcss/node_modules/chalk": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
@@ -3818,6 +3819,39 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/tailwindcss/node_modules/chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/tailwindcss/node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3857,6 +3891,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/tailwindcss/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/tailwindcss/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -4278,25 +4324,25 @@
       "integrity": "sha512-sqKVVVOe5ivCaXDWivIJYVSaEgdQK9ul7a4Kity5Iw7u9+wBAPbX1RMSnLLmp7O4Vzj0WOWwMAJsTL00xwaNug=="
     },
     "@headlessui/react": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.2.0.tgz",
-      "integrity": "sha512-19DkLz8gDgbi+WvkoTzi9vs0NK9TJf94vbYhMzB4LYJo03Kili0gmvXT9CiKZoxXZ7YAvy/b1U1oQKEnjWrqxw==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.3.0.tgz",
+      "integrity": "sha512-2gqTO6BQ3Jr8vDX1B67n1gl6MGKTt6DBmR+H0qxwj0gTMnR2+Qpktj8alRWxsZBODyOiBb77QSQpE/6gG3MX4Q==",
       "requires": {}
     },
     "@next/env": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.0.tgz",
-      "integrity": "sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA=="
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.1.tgz",
+      "integrity": "sha512-yZfKh2U6R9tEYyNUrs2V3SBvCMufkJ07xMH5uWy8wqcl5gAXoEw6A/1LDqwX3j7pUutF9d1ZxpdGDA3Uag+aQQ=="
     },
     "@next/polyfill-module": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.0.tgz",
-      "integrity": "sha512-gydtFzRqsT549U8+sY8382I/f4HFcelD8gdUGnAofQJa/jEU1jkxmjCHC8tmEiyeMLidl7iDZgchfSCpmMzzUg=="
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@next/polyfill-module/-/polyfill-module-11.0.1.tgz",
+      "integrity": "sha512-Cjs7rrKCg4CF4Jhri8PCKlBXhszTfOQNl9AjzdNy4K5jXFyxyoSzuX2rK4IuoyE+yGp5A3XJCBEmOQ4xbUp9Mg=="
     },
     "@next/react-dev-overlay": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.0.0.tgz",
-      "integrity": "sha512-q+Wp+eStEMThe77zxdeJ/nbuODkHR6P+/dfUqYXZSqbLf6x5c5xwLBauwwVbkCYFZpAlDuL8Jk8QSAH1OsqC2w==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@next/react-dev-overlay/-/react-dev-overlay-11.0.1.tgz",
+      "integrity": "sha512-lvUjMVpLsgzADs9Q8wtC5LNqvfdN+M0BDMSrqr04EDWAyyX0vURHC9hkvLbyEYWyh+WW32pwjKBXdkMnJhoqMg==",
       "requires": {
         "@babel/code-frame": "7.12.11",
         "anser": "1.4.9",
@@ -4357,9 +4403,9 @@
       }
     },
     "@next/react-refresh-utils": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.0.0.tgz",
-      "integrity": "sha512-hi5eY+KBn4QGtUv7VL2OptdM33fI2hxhd7+omOFmAK+S0hDWhg1uqHqqGJk0W1IfqlWEzzL10WvTJDPRAtDugQ==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/@next/react-refresh-utils/-/react-refresh-utils-11.0.1.tgz",
+      "integrity": "sha512-K347DM6Z7gBSE+TfUaTTceWvbj0B6iNAsFZXbFZOlfg3uyz2sbKpzPYYFocCc27yjLaS8OfR8DEdS2mZXi8Saw==",
       "requires": {}
     },
     "@nodelib/fs.scandir": {
@@ -4542,10 +4588,9 @@
       }
     },
     "arg": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.0.tgz",
-      "integrity": "sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ==",
-      "dev": true
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
+      "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg=="
     },
     "asn1.js": {
       "version": "5.4.1",
@@ -4769,9 +4814,9 @@
       "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
     },
     "bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
     },
     "call-bind": {
       "version": "1.0.2",
@@ -4795,9 +4840,9 @@
       "dev": true
     },
     "caniuse-lite": {
-      "version": "1.0.30001239",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz",
-      "integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ=="
+      "version": "1.0.30001240",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001240.tgz",
+      "integrity": "sha512-nb8mDzfMdxBDN7ZKx8chWafAdBp5DAAlpWvNyUGe5tcDWd838zpzDN3Rah9cjCqhfOKkrvx40G2SDtP0qiWX/w=="
     },
     "chalk": {
       "version": "2.4.2",
@@ -5102,9 +5147,9 @@
       "dev": true
     },
     "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
+      "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k="
     },
     "des.js": {
       "version": "1.0.1",
@@ -5127,9 +5172,9 @@
       }
     },
     "didyoumean": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.1.tgz",
-      "integrity": "sha1-6S7f2tplN9SE1zwBcv0eugxJdv8=",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
     "diffie-hellman": {
@@ -5161,9 +5206,9 @@
       "integrity": "sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ=="
     },
     "electron-to-chromium": {
-      "version": "1.3.752",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
-      "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A=="
+      "version": "1.3.759",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.759.tgz",
+      "integrity": "sha512-nM76xH0t2FBH5iMEZDVc3S/qbdKjGH7TThezxC8k1Q7w7WHvIAyJh8lAe2UamGfdRqBTjHfPDn82LJ0ksCiB9g=="
     },
     "elliptic": {
       "version": "6.5.4",
@@ -5537,15 +5582,21 @@
       "dev": true
     },
     "http-errors": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-      "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
+      "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
       "requires": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
+        "depd": "1.1.1",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.0.3",
+        "statuses": ">= 1.3.1 < 2"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        }
       }
     },
     "https-browserify": {
@@ -5922,60 +5973,6 @@
         "content-type": "1.0.4",
         "is-stream": "1.1.0",
         "raw-body": "2.3.2"
-      },
-      "dependencies": {
-        "arg": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.0.tgz",
-          "integrity": "sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg=="
-        },
-        "bytes": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
-        },
-        "depd": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
-          "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k="
-        },
-        "http-errors": {
-          "version": "1.6.2",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz",
-          "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=",
-          "requires": {
-            "depd": "1.1.1",
-            "inherits": "2.0.3",
-            "setprototypeof": "1.0.3",
-            "statuses": ">= 1.3.1 < 2"
-          }
-        },
-        "iconv-lite": {
-          "version": "0.4.19",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-          "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
-        },
-        "raw-body": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz",
-          "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=",
-          "requires": {
-            "bytes": "3.0.0",
-            "http-errors": "1.6.2",
-            "iconv-lite": "0.4.19",
-            "unpipe": "1.0.0"
-          }
-        },
-        "setprototypeof": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
-          "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ="
-        }
       }
     },
     "micromatch": {
@@ -6053,16 +6050,16 @@
       }
     },
     "next": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/next/-/next-11.0.0.tgz",
-      "integrity": "sha512-1OA0ccCTwVtdLats/1v7ReiBVx+Akya0UVhHo9IBr8ZkpDI3/SGNcaruJBp5agy8ROF97VDKkZamoUXxRB9NUA==",
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-11.0.1.tgz",
+      "integrity": "sha512-yR7be7asNbvpVNpi6xxEg28wZ7Gqmj1nOt0sABH9qORmF3+pms2KZ7Cng33oK5nqPIzEEFJD0pp2PCe3/ueMIg==",
       "requires": {
         "@babel/runtime": "7.12.5",
         "@hapi/accept": "5.0.2",
-        "@next/env": "11.0.0",
-        "@next/polyfill-module": "11.0.0",
-        "@next/react-dev-overlay": "11.0.0",
-        "@next/react-refresh-utils": "11.0.0",
+        "@next/env": "11.0.1",
+        "@next/polyfill-module": "11.0.1",
+        "@next/react-dev-overlay": "11.0.1",
+        "@next/react-refresh-utils": "11.0.1",
         "assert": "2.0.0",
         "ast-types": "0.13.2",
         "browserify-zlib": "0.2.0",
@@ -6109,6 +6106,36 @@
         "watchpack": "2.1.1"
       },
       "dependencies": {
+        "bytes": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+          "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+        },
+        "depd": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+          "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+        },
+        "http-errors": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
+          "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.4",
+            "setprototypeof": "1.1.1",
+            "statuses": ">= 1.5.0 < 2",
+            "toidentifier": "1.0.0"
+          }
+        },
+        "iconv-lite": {
+          "version": "0.4.24",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3"
+          }
+        },
         "postcss": {
           "version": "8.2.13",
           "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.2.13.tgz",
@@ -6119,6 +6146,22 @@
             "source-map": "^0.6.1"
           }
         },
+        "raw-body": {
+          "version": "2.4.1",
+          "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz",
+          "integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==",
+          "requires": {
+            "bytes": "3.1.0",
+            "http-errors": "1.7.3",
+            "iconv-lite": "0.4.24",
+            "unpipe": "1.0.0"
+          }
+        },
+        "setprototypeof": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+          "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -6694,23 +6737,20 @@
       }
     },
     "raw-body": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.1.tgz",
-      "integrity": "sha512-9WmIKF6mkvA0SLmA2Knm9+qj89e+j1zqgyn8aXGd7+nAduPoqgI9lO57SAZNn/Byzo5P7JhXTyg9PzaJbH73bA==",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz",
+      "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=",
       "requires": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.3",
-        "iconv-lite": "0.4.24",
+        "bytes": "3.0.0",
+        "http-errors": "1.6.2",
+        "iconv-lite": "0.4.19",
         "unpipe": "1.0.0"
       },
       "dependencies": {
         "iconv-lite": {
-          "version": "0.4.24",
-          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
-          "requires": {
-            "safer-buffer": ">= 2.1.2 < 3"
-          }
+          "version": "0.4.19",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
+          "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
         }
       }
     },
@@ -6885,9 +6925,9 @@
       "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
+      "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ="
     },
     "sha.js": {
       "version": "2.4.11",
@@ -7024,9 +7064,9 @@
       }
     },
     "stripe": {
-      "version": "8.156.0",
-      "resolved": "https://registry.npmjs.org/stripe/-/stripe-8.156.0.tgz",
-      "integrity": "sha512-q+bixlhaxnSI/Htk/iB1i5LhuZ557hL0pFgECBxQNhso1elxIsOsPOIXEuo3tSLJEb8CJSB7t/+Fyq6KP69tAQ==",
+      "version": "8.157.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-8.157.0.tgz",
+      "integrity": "sha512-9GNtWEAeTO4D1V6yZl9hyyi0Zgz20uAtw8nwWrip3V0tEaJcKDL6IAqKssy5hqcDrkHNN3Wxa767D8Mcg7B/Yg==",
       "requires": {
         "@types/node": ">=8.1.0",
         "qs": "^6.6.0"
@@ -7074,16 +7114,16 @@
       }
     },
     "tailwindcss": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.2.tgz",
-      "integrity": "sha512-OzFWhlnfrO3JXZKHQiqZcb0Wwl3oJSmQ7PvT2jdIgCjV5iUoAyql9bb9ZLCSBI5TYXmawujXAoNxXVfP5Auy/Q==",
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.4.tgz",
+      "integrity": "sha512-OdBCPgazNNsknSP+JfrPzkay9aqKjhKtFhbhgxHgvEFdHy/GuRPo2SCJ4w1SFTN8H6FPI4m6qD/Jj20NWY1GkA==",
       "dev": true,
       "requires": {
         "@fullhuman/postcss-purgecss": "^4.0.3",
         "arg": "^5.0.0",
         "bytes": "^3.0.0",
         "chalk": "^4.1.1",
-        "chokidar": "^3.5.1",
+        "chokidar": "^3.5.2",
         "color": "^3.1.3",
         "cosmiconfig": "^7.0.0",
         "detective": "^5.2.0",
@@ -7101,7 +7141,7 @@
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
         "postcss-js": "^3.0.3",
-        "postcss-load-config": "^3.0.1",
+        "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.5",
         "postcss-selector-parser": "^6.0.6",
         "postcss-value-parser": "^4.1.0",
@@ -7121,6 +7161,12 @@
             "color-convert": "^2.0.1"
           }
         },
+        "arg": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.0.tgz",
+          "integrity": "sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ==",
+          "dev": true
+        },
         "chalk": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz",
@@ -7131,6 +7177,33 @@
             "supports-color": "^7.1.0"
           }
         },
+        "chokidar": {
+          "version": "3.5.2",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+          "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+          "dev": true,
+          "requires": {
+            "anymatch": "~3.1.2",
+            "braces": "~3.0.2",
+            "fsevents": "~2.3.2",
+            "glob-parent": "~5.1.2",
+            "is-binary-path": "~2.1.0",
+            "is-glob": "~4.0.1",
+            "normalize-path": "~3.0.0",
+            "readdirp": "~3.6.0"
+          },
+          "dependencies": {
+            "glob-parent": {
+              "version": "5.1.2",
+              "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+              "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+              "dev": true,
+              "requires": {
+                "is-glob": "^4.0.1"
+              }
+            }
+          }
+        },
         "color-convert": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -7161,6 +7234,15 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "readdirp": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+          "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+          "dev": true,
+          "requires": {
+            "picomatch": "^2.2.1"
+          }
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "supanextail",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -32,4 +32,4 @@
     "postcss": "^8.1.10",
     "tailwindcss": "^2.2.2"
   }
-}
+}

pages/api/stripe/customer-portal.js

@@ -25,7 +25,7 @@ export default async function handler(req, res) {
   await cors(req, res);
   await limiter(req, res);
   if (req.method === "POST") {
-    const returnUrl = `${req.headers.origin}/dashboard`;
+    const returnUrl = `${req.headers.origin}/dashboard`; // Stripe will return to the dashboard, you can change it
 
     const portalsession = await stripe.billingPortal.sessions.create({
       customer: req.body.customerId,

pages/api/stripe/stripe-webhook.js

@@ -1,3 +1,8 @@
+/*
+SupaNexTail use only 2 webhooks. Stripe have a lot more, 
+you can check it here https://stripe.com/docs/webhooks
+*/
+
 import Cors from "cors";
 import { buffer } from "micro";
 import { createClient } from "@supabase/supabase-js";
@@ -73,7 +78,7 @@ export default async function handler(req, res) {
           .from("subscriptions")
           .select("*")
           .eq("id", dataObject.client_reference_id);
-          console.log(dataObject)
+        console.log(dataObject);
 
         if (subscriptions.length == 0) {
           const { data, error } = await supabase
@@ -90,7 +95,7 @@ export default async function handler(req, res) {
                 customer_id: dataObject.customer,
                 paid_user: true,
                 plan: dataObject.metadata.priceId,
-                subscription: dataObject.subscription
+                subscription: dataObject.subscription,
               },
             ])
             .then()
@@ -102,7 +107,7 @@ export default async function handler(req, res) {
               customer_id: dataObject.customer,
               paid_user: true,
               plan: dataObject.metadata.priceId,
-              subscription: dataObject.subscription
+              subscription: dataObject.subscription,
             })
             .eq("id", dataObject.client_reference_id)
             .then()

pages/pricing.js

@@ -8,7 +8,7 @@ const PricingPage = () => {
   return (
     <>
       <NextSeo
-        title={`Welcome to ${process.env.NEXT_PUBLIC_TITLE} 👋`}
+        title={`${process.env.NEXT_PUBLIC_TITLE} | Pricing`}
         description={`SupaNexTail is a boilerplate for your website, based on Next.js, Supabase, and TailwindCSS`}
       />
       <Layout>