feat: add subscription management section to user settings (#1587)

open-sauced · Aug 23, 2023 · 3ceb2c8 · 3ceb2c8
1 parent 69ec31e
commit 3ceb2c8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/.env b/.env
@@ -4,5 +4,6 @@ NEXT_PUBLIC_API_URL=https://beta.api.opensauced.pizza/v1
 NEXT_PUBLIC_POSTHOG_ID=phc_Y0xz6nK55MEwWjobJsI2P8rsiomZJ6eZLoXehmMy9tt
 NEXT_PUBLIC_CLOUD_NAME=dgxgziswe
 NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=test
+NEXT_PUBLIC_STRIPE_SUB_CANCEL_URL=https://billing.stripe.com/p/login/test_bIY8xy3iy6fpeHu3cc
 NEXT_PUBLIC_OPENGRAPH_URL=https://beta.opengraph.opensauced.pizza/v1
 SENTRY_DSN=https://3f5bb9023ff0407299dd22a6454558f9@o4504872488927232.ingest.sentry.io/4505082236960768
diff --git a/components/atoms/Button/button.tsx b/components/atoms/Button/button.tsx
@@ -5,6 +5,8 @@ export interface ButtonsProps extends React.ButtonHTMLAttributes<HTMLButtonEleme
   variant: "primary" | "default" | "dark" | "outline" | "link" | "text";
   loading?: boolean;
   href?: string;
+  rel?: string;
+  target?: string;
   showLoadingText?: boolean;
 }
 

diff --git a/components/organisms/UserSettingsPage/user-settings-page.tsx b/components/organisms/UserSettingsPage/user-settings-page.tsx
@@ -248,7 +248,7 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               name="linkedin_url"
             />
             <TextInput
-              className="bg-light-slate-4 text-light-slate-11 font-medium"
+              className="font-medium bg-light-slate-4 text-light-slate-11"
               placeholder="https://discordapp.com/users/832877193112762362"
               label="Discord URL"
               onChange={handleValidateDiscordUrl}
@@ -373,8 +373,8 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               Update Preferences
             </Button>
           </div>
-          {!hasReports && (
-            <div className="flex flex-col gap-6 order-first md:order-last">
+          {!hasReports ? (
+            <div className="flex flex-col order-first gap-6 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">
@@ -383,6 +383,28 @@ const UserSettingsPage = ({ user }: userSettingsPageProps) => {
               </div>
               <StripeCheckoutButton variant="primary" />
             </div>
+          ) : (
+            <div>
+              <div className="flex flex-col order-first gap-6 md:order-last">
+                <div className="flex flex-col gap-3">
+                  <label className="text-2xl font-normal text-light-slate-11">Manage Subscriptions</label>
+                  <div className="w-full md:w-96">
+                    <Text>
+                      You are currently subscribed to the Pro plan and currently have access to all premium features.
+                    </Text>
+                  </div>
+                </div>
+                <Button
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  href={process.env.NEXT_PUBLIC_STRIPE_SUB_CANCEL_URL}
+                  className="w-max"
+                  variant="primary"
+                >
+                  Cancel Subscription
+                </Button>
+              </div>
+            </div>
           )}
         </div>
       </div>