From 6848d16da4ab5fc9050ed0e8fe7dde4fe0ae9388 Mon Sep 17 00:00:00 2001
From: vincanger <70215737+vincanger@users.noreply.github.com>
Date: Mon, 15 Apr 2024 17:30:20 +0200
Subject: [PATCH] move customer portal url to .env.client

---
 app/.env.client.example            |  7 ++++--
 app/src/client/app/AccountPage.tsx | 10 ++++++--
 app/src/client/app/PricingPage.tsx | 23 +++++++++++++++----
 app/src/shared/constants.ts        | 37 ------------------------------
 app/tsconfig.json                  |  1 +
 5 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/app/.env.client.example b/app/.env.client.example
index 95b14ca..87702c9 100644
--- a/app/.env.client.example
+++ b/app/.env.client.example
@@ -1,2 +1,5 @@
-# learn more about client side env vars https://wasp-lang.dev/docs/project/env-vars
-REACT_APP_SOME_VAR_NAME=foo
\ No newline at end of file
+# All client-side env vars must start with REACT_APP_ https://wasp-lang.dev/docs/project/env-vars
+
+# Find your test url at https://dashboard.stripe.com/test/settings/billing/portal
+# Remember to replace the test url with the live url before deploying to production
+REACT_APP_STRIPE_CUSTOMER_PORTAL=
\ No newline at end of file
diff --git a/app/src/client/app/AccountPage.tsx b/app/src/client/app/AccountPage.tsx
index 8db115b..3cfd18e 100644
--- a/app/src/client/app/AccountPage.tsx
+++ b/app/src/client/app/AccountPage.tsx
@@ -1,8 +1,8 @@
 import { Link } from 'wasp/client/router';
 import { type User } from 'wasp/entities';
 import { logout } from 'wasp/client/auth';
-import { STRIPE_CUSTOMER_PORTAL_LINK } from '../../shared/constants';
 import { TierIds } from '../../shared/constants';
+import { z } from 'zod';
 
 export default function AccountPage({ user }: { user: User }) {
   return (
@@ -82,7 +82,13 @@ function BuyMoreButton() {
 
 function CustomerPortalButton() {
   const handleClick = () => {
-    window.open(STRIPE_CUSTOMER_PORTAL_LINK, '_blank');
+    try {
+      const schema = z.string().url();
+      const customerPortalUrl = schema.parse(import.meta.env.REACT_APP_STRIPE_CUSTOMER_PORTAL);
+      window.open(customerPortalUrl, '_blank');
+    } catch (err) {
+      console.error(err)
+    }
   };
 
   return (
diff --git a/app/src/client/app/PricingPage.tsx b/app/src/client/app/PricingPage.tsx
index bcf651f..a48ae85 100644
--- a/app/src/client/app/PricingPage.tsx
+++ b/app/src/client/app/PricingPage.tsx
@@ -1,10 +1,11 @@
 import { useAuth } from 'wasp/client/auth';
 import { stripePayment } from 'wasp/client/operations';
-import { TierIds, STRIPE_CUSTOMER_PORTAL_LINK } from '../../shared/constants';
+import { TierIds } from '../../shared/constants';
 import { AiFillCheckCircle } from 'react-icons/ai';
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { cn } from '../../shared/utils';
+import { z } from 'zod';
 
 export const tiers = [
   {
@@ -57,6 +58,20 @@ const PricingPage = () => {
     }
   }
 
+  const handleCustomerPortalClick = () => {
+    if (!user) {
+      history.push('/login');
+      return;
+    }
+    try {
+      const schema = z.string().url();
+      const customerPortalUrl = schema.parse(import.meta.env.REACT_APP_STRIPE_CUSTOMER_PORTAL);
+      window.open(customerPortalUrl, '_blank');
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   return (
     <div className='py-10 lg:mt-10'>
       <div className='mx-auto max-w-7xl px-6 lg:px-8'>
@@ -115,8 +130,8 @@ const PricingPage = () => {
                 </ul>
               </div>
               {!!user && user.hasPaid ? (
-                <a
-                  href={STRIPE_CUSTOMER_PORTAL_LINK}
+                <button
+                  onClick={handleCustomerPortalClick}
                   aria-describedby='manage-subscription'
                   className={cn(
                     'mt-8 block rounded-md py-2 px-3 text-center text-sm font-semibold leading-6 focus-visible:outline focus-visible:outline-2 focus-visible:outline-yellow-400',
@@ -127,7 +142,7 @@ const PricingPage = () => {
                   )}
                 >
                   Manage Subscription
-                </a>
+                </button>
               ) : (
                 <button
                   onClick={() => handleBuyNowClick(tier.id)}
diff --git a/app/src/shared/constants.ts b/app/src/shared/constants.ts
index 2e6c2f8..0330f2c 100644
--- a/app/src/shared/constants.ts
+++ b/app/src/shared/constants.ts
@@ -1,5 +1,3 @@
-import { z } from 'zod';
-
 export enum TierIds {
   HOBBY = 'hobby-tier',
   PRO = 'pro-tier',
@@ -8,38 +6,3 @@ export enum TierIds {
 
 export const DOCS_URL = 'https://docs.opensaas.sh';
 export const BLOG_URL = 'https://docs.opensaas.sh/blog';
-
-const isDevEnv = process.env.NODE_ENV !== 'production';
-const customerPortalTestUrl = '<your-url-here>'; // TODO: find your test url at https://dashboard.stripe.com/test/settings/billing/portal
-const customerPortalProdUrl = '<your-url-here>'; // TODO: add before deploying to production
-
-export const STRIPE_CUSTOMER_PORTAL_LINK = isDevEnv ? customerPortalTestUrl : customerPortalProdUrl;
-
-checkStripePortalLinksExist({ customerPortalTestUrl, customerPortalProdUrl });
-
-type StripePortalUrls = {
-  customerPortalTestUrl: string | undefined;
-  customerPortalProdUrl: string | undefined;
-};
-
-function checkStripePortalLinksExist(links: StripePortalUrls) {
-  const schema = z.string().url();
-  const testResult = schema.safeParse(links.customerPortalTestUrl);
-  const prodResult = schema.safeParse(links.customerPortalProdUrl);
-  let consoleMsg = {
-    color: '\x1b[33m%s\x1b[0m',
-    msg: '',
-  };
-
-  if (testResult.success && prodResult.success) {
-    consoleMsg.color = '\x1b[32m%s\x1b[0m';
-    consoleMsg.msg = '✅ Both STRIPE_CUSTOMER_PORTAL_LINK links defined';
-  } else if (!testResult.success && !prodResult.success) {
-    consoleMsg.msg = '⛔️ STRIPE_CUSTOMER_PORTAL_LINK is not defined';
-  } else if (!testResult.success) {
-    consoleMsg.msg = '⛔️ STRIPE_CUSTOMER_PORTAL_LINK is not defined for test env';
-  } else {
-    consoleMsg.msg = '⛔️ STRIPE_CUSTOMER_PORTAL_LINK is not defined for prod env';
-  }
-  console.log(consoleMsg.color, consoleMsg.msg);
-}
diff --git a/app/tsconfig.json b/app/tsconfig.json
index ed998c5..40166f2 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -6,6 +6,7 @@
 {
   "compilerOptions": {
     "target": "esnext",
+    "module": "ES2022",
     // We're bundling all code in the end so this is the most appropriate option,
     // it's also important for autocomplete to work properly.
     "moduleResolution": "bundler",