Merge pull request #509 from linkwarden/dev

improved UX + improved performance

lib/api/checkSubscriptionByEmail.ts

@@ -32,12 +32,11 @@ export default async function checkSubscriptionByEmail(email: string) {
     customer.subscriptions?.data.some((subscription) => {
       subscription.current_period_end;
 
-      active =
-        subscription.items.data.some(
-          (e) =>
-            (e.price.id === MONTHLY_PRICE_ID && e.price.active === true) ||
-            (e.price.id === YEARLY_PRICE_ID && e.price.active === true)
-        ) || false;
+      active = subscription.items.data.some(
+        (e) =>
+          (e.price.id === MONTHLY_PRICE_ID && e.price.active === true) ||
+          (e.price.id === YEARLY_PRICE_ID && e.price.active === true)
+      );
       stripeSubscriptionId = subscription.id;
       currentPeriodStart = subscription.current_period_start * 1000;
       currentPeriodEnd = subscription.current_period_end * 1000;
@@ -45,7 +44,7 @@ export default async function checkSubscriptionByEmail(email: string) {
   });
 
   return {
-    active: active || false,
+    active,
     stripeSubscriptionId,
     currentPeriodStart,
     currentPeriodEnd,

lib/api/paymentCheckout.ts

@@ -16,11 +16,8 @@ export default async function paymentCheckout(
 
   const isExistingCustomer = listByEmail?.data[0]?.id || undefined;
 
-  console.log("isExistingCustomer", listByEmail?.data[0]);
-
   const NEXT_PUBLIC_TRIAL_PERIOD_DAYS =
-    Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS) || 14;
-
+    process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS;
   const session = await stripe.checkout.sessions.create({
     customer: isExistingCustomer ? isExistingCustomer : undefined,
     line_items: [
@@ -37,9 +34,9 @@ export default async function paymentCheckout(
       enabled: true,
     },
     subscription_data: {
-      trial_period_days: isExistingCustomer
-        ? undefined
-        : NEXT_PUBLIC_TRIAL_PERIOD_DAYS,
+      trial_period_days: NEXT_PUBLIC_TRIAL_PERIOD_DAYS
+        ? Number(NEXT_PUBLIC_TRIAL_PERIOD_DAYS)
+        : 14,
     },
   });
 

lib/api/verifySubscription.ts

@@ -17,7 +17,15 @@ export default async function verifySubscription(
 
   const currentDate = new Date();
 
-  if (!subscription?.active || currentDate > subscription.currentPeriodEnd) {
+  if (
+    subscription &&
+    currentDate > subscription.currentPeriodEnd &&
+    !subscription.active
+  ) {
+    return null;
+  }
+
+  if (!subscription || currentDate > subscription.currentPeriodEnd) {
     const {
       active,
       stripeSubscriptionId,
@@ -51,21 +59,15 @@ export default async function verifySubscription(
           },
         })
         .catch((err) => console.log(err));
-    } else if (!active) {
-      const subscription = await prisma.subscription.findFirst({
-        where: {
-          userId: user.id,
-        },
-      });
+    }
 
-      if (subscription)
-        await prisma.subscription.delete({
-          where: {
-            userId: user.id,
-          },
-        });
-
-      return null;
+    if (!active) {
+      if (user.username)
+        // await prisma.user.update({
+        //   where: { id: user.id },
+        //   data: { username: null },
+        // });
+        return null;
     }
   }
 

lib/api/verifyUser.ts

@@ -52,7 +52,7 @@ export default async function verifyUser({
   }
 
   if (STRIPE_SECRET_KEY) {
-    const subscribedUser = await verifySubscription(user);
+    const subscribedUser = verifySubscription(user);
 
     if (!subscribedUser) {
       res.status(401).json({

package.json

@@ -10,10 +10,10 @@
     "seed": "node ./prisma/seed.js"
   },
   "scripts": {
-    "dev": "concurrently -k -P \"next dev {@}\" \"yarn worker:dev\" --",
+    "dev": "concurrently -k \"next dev\" \"yarn worker:dev\"",
     "worker:dev": "nodemon --skip-project scripts/worker.ts",
     "worker:prod": "ts-node --transpile-only --skip-project scripts/worker.ts",
-    "start": "concurrently -k -P \"next start {@}\" \"yarn worker:prod\" --",
+    "start": "concurrently \"next start\" \"yarn worker:prod\"",
     "build": "next build",
     "lint": "next lint",
     "format": "prettier --write \"**/*.{ts,tsx,js,json,md}\""

pages/subscribe.tsx

@@ -5,7 +5,6 @@ import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
 import { Plan } from "@/types/global";
 import AccentSubmitButton from "@/components/AccentSubmitButton";
-import useAccountStore from "@/store/account";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -13,8 +12,6 @@ export default function Subscribe() {
 
   const [plan, setPlan] = useState<Plan>(1);
 
-  const { account } = useAccountStore();
-
   const router = useRouter();
 
   async function submit() {
@@ -30,13 +27,9 @@ export default function Subscribe() {
 
   return (
     <CenteredForm
-      text={
-        account.username
-          ? ""
-          : `Start with a ${
-              process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
-            }-day free trial, cancel anytime!`
-      }
+      text={`Start with a ${
+        process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
+      }-day free trial, cancel anytime!`}
     >
       <div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
         <p className="sm:text-3xl text-2xl text-center font-extralight">
@@ -44,6 +37,7 @@ export default function Subscribe() {
         </p>
 
         <div className="divider my-0"></div>
+
         <div>
           <p>
             You will be redirected to Stripe, feel free to reach out to us at{" "}
@@ -53,6 +47,7 @@ export default function Subscribe() {
             in case of any issue.
           </p>
         </div>
+
         <div className="flex gap-3 border border-solid border-neutral-content w-4/5 mx-auto p-1 rounded-xl relative">
           <button
             onClick={() => setPlan(Plan.monthly)}
@@ -79,6 +74,7 @@ export default function Subscribe() {
             25% Off
           </div>
         </div>
+
         <div className="flex flex-col gap-2 justify-center items-center">
           <p className="text-3xl">
             ${plan === Plan.monthly ? "4" : "3"}
@@ -93,20 +89,13 @@ export default function Subscribe() {
             </legend>
 
             <p className="text-sm">
-              {account.username
-                ? ""
-                : `${process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then `}
-              ${plan === Plan.monthly ? "4 per month" : "36 annually"}
+              {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then $
+              {plan === Plan.monthly ? "4 per month" : "36 annually"}
             </p>
             <p className="text-sm">+ VAT if applicable</p>
           </fieldset>
-
-          <p className="text-sm mb-5">
-            {account.username
-              ? "Please note that since your trial has been previously ended, your subscription will start immediately. You can cancel anytime."
-              : ""}
-          </p>
         </div>
+
         <AccentSubmitButton
           type="button"
           label="Complete Subscription!"
@@ -114,6 +103,7 @@ export default function Subscribe() {
           onClick={submit}
           loading={submitLoader}
         />
+
         <div
           onClick={() => signOut()}
           className="w-fit mx-auto cursor-pointer text-neutral font-semibold "