feat: add upgrade access button to user settings page (#1398)

Co-authored-by: ( Nechiforel David-Samuel ) NsdHSO <37635083+NsdHSO@users.noreply.github.com>
open-sauced · Jul 24, 2023 · 671ebf4 · 671ebf4
1 parent ad23f14
commit 671ebf4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/components/organisms/Reports/reports.tsx b/components/organisms/Reports/reports.tsx
@@ -6,15 +6,16 @@ import GitHubIcon from "img/icons/github-icon.svg";
 import Button from "components/atoms/Button/button";
 import Icon from "components/atoms/Icon/icon";
 import Title from "components/atoms/Typography/title";
+import Text from "components/atoms/Typography/text";
 import ReportsHistory from "components/molecules/ReportsHistory/reports-history";
 import SelectReportsFilter from "components/molecules/SelectReportsFilter/select-reports-filter";
+import StripeCheckoutButton from "components/organisms/StripeCheckoutButton/stripe-checkout-button";
 
 import { Report } from "interfaces/report-type";
 
 import useFilterOptions from "lib/hooks/useFilterOptions";
 import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
 import getCurrentDate from "lib/utils/get-current-date";
-import StripeCheckoutButton from "../StripeCheckoutButton/stripe-checkout-button";
 
 const USERDEVICESTORAGENAME = "reportState";
 
@@ -78,7 +79,12 @@ const Reports = ({ hasReports, repositories }: ReportsProps): JSX.Element => {
               )}
             </>
           ) : (
-            <StripeCheckoutButton />
+            <>
+              <Text>Upgrade to a subscription to gain access to generate custom reports!</Text>
+              <p className="flex justify-center py-4 px-2">
+                <StripeCheckoutButton variant="primary" className="w-52 h-[38px] flex justify-center" />
+              </p>
+            </>
           )
         ) : (
           <div className="flex justify-center py-4">

diff --git a/components/organisms/StripeCheckoutButton/stripe-checkout-button.tsx b/components/organisms/StripeCheckoutButton/stripe-checkout-button.tsx
@@ -1,11 +1,13 @@
-import Text from "components/atoms/Typography/text";
-import Button from "components/atoms/Button/button";
-import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
+import Button, { ButtonsProps } from "components/atoms/Button/button";
 
+import useSupabaseAuth from "lib/hooks/useSupabaseAuth";
 import { getStripe } from "lib/utils/stripe-client";
 
-const StripeCheckoutButton = () => {
+interface StripeCheckoutButtonProps extends ButtonsProps {}
+
+const StripeCheckoutButton = ({ children, ...props }: StripeCheckoutButtonProps) => {
   const { sessionToken } = useSupabaseAuth();
+
   const handleFormSubmit = async (event: any) => {
     event.preventDefault();
 
@@ -32,17 +34,9 @@ const StripeCheckoutButton = () => {
   };
 
   return (
-    <div>
-      <Text className="">Upgrade to a subscription to gain access to generate custom reports!</Text>
-
-      <p className="flex justify-center py-4 px-2">
-        <form onSubmit={handleFormSubmit}>
-          <Button variant="primary" className="w-52 h-[38px] flex justify-center">
-            Upgrade Access
-          </Button>
-        </form>
-      </p>
-    </div>
+    <form onSubmit={handleFormSubmit}>
+      <Button {...props}>{children || "Upgrade Access"}</Button>
+    </form>
   );
 };
 

diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -7,11 +7,14 @@ import Button from "components/atoms/Button/button";
 import Checkbox from "components/atoms/Checkbox/checkbox";
 import TextInput from "components/atoms/TextInput/text-input";
 import Title from "components/atoms/Typography/title";
+import Text from "components/atoms/Typography/text";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "components/atoms/Select/select";
 import LanguagePill from "components/atoms/LanguagePill/LanguagePill";
+import StripeCheckoutButton from "components/organisms/StripeCheckoutButton/stripe-checkout-button";
 
 import { updateUser, UpdateUserPayload } from "lib/hooks/update-user";
 
+import useSession from "lib/hooks/useSession";
 import { authSession } from "lib/hooks/authSession";
 import { validateEmail } from "lib/utils/validate-email";
 import { timezones } from "lib/utils/timezones";
@@ -34,6 +37,8 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
     revalidateOnFocus: false,
   });
 
+  const { hasReports } = useSession();
+
   const { toast } = useToast();
 
   const [updating, setUpdating] = useState({
@@ -371,6 +376,17 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               Update Preferences
             </Button>
           </div>
+          {!hasReports && (
+            <div className="flex flex-col gap-6 order-first md:order-last">
+              <div className="flex flex-col gap-3">
+                <label className="text-2xl font-normal text-light-slate-11">Upgrade Access</label>
+                <div className="w-full sm:max-w-80">
+                  <Text>Upgrade to a subscription to gain access to generate custom reports!</Text>
+                </div>
+              </div>
+              <StripeCheckoutButton variant="primary" />
+            </div>
+          )}
         </div>
       </div>
     </div>