fix(billing): Added a way to manage subscription from setup screen

If you had a subscription but somehow had no links setup, then there was
no way to manage the subscription or cancel it. You would have to setup
a link then cancel/manage the subscription.

Now there is a way to manage the subscription directly from the setup
page if necessary.

Resolves #1715

interface/src/components/setup/SetupBillingButton.tsx

@@ -0,0 +1,49 @@
+import React, { useCallback, useState } from 'react';
+import { CreditCard } from '@mui/icons-material';
+import axios from 'axios';
+import { useSnackbar } from 'notistack';
+
+import { MBaseButton } from '@monetr/interface/components/MButton';
+import { useAuthenticationSink } from '@monetr/interface/hooks/useAuthentication';
+
+
+/**
+ * The SetupBillingButton should only be used on the setup page, it is intended to be a way to manage your billing
+ * settings if you do not have an active link for some reason.
+ */
+export default function SetupBillingButton(): JSX.Element {
+  const { result: { hasSubscription } } = useAuthenticationSink();
+  const { enqueueSnackbar } = useSnackbar();
+  const [loading, setLoading] = useState(false);
+
+  const handleManageSubscription = useCallback(() => {
+    setLoading(true);
+    // If the customer has a subscription then we want to just manage it. This will allow a customer to fix a
+    // subscription for a card that has failed payment or something similar.
+    axios.get('/api/billing/portal')
+      .then(result => window.location.assign(result.data.url))
+      .catch(error => {
+        setLoading(false);
+        enqueueSnackbar(error?.response?.data?.error || 'Failed to prepare Stripe billing session.', {
+          variant: 'error',
+          disableWindowBlurListener: true,
+        });
+      });
+  }, [enqueueSnackbar]);
+
+  if (!hasSubscription) {
+    return null;
+  }
+
+  return (
+    <MBaseButton
+      className='max-w-xs'
+      color='secondary'
+      disabled={ loading }
+      onClick={ handleManageSubscription }
+    >
+      <CreditCard className='mr-2' />
+      Manage Your Subscription
+    </MBaseButton>
+  );
+}

interface/src/pages/setup.tsx

@@ -9,6 +9,7 @@ import { MBaseButton } from '@monetr/interface/components/MButton';
 import MLogo from '@monetr/interface/components/MLogo';
 import MSpan from '@monetr/interface/components/MSpan';
 import LogoutFooter from '@monetr/interface/components/setup/LogoutFooter';
+import SetupBillingButton from '@monetr/interface/components/setup/SetupBillingButton';
 import { ReactElement } from '@monetr/interface/components/types';
 import { useAppConfiguration } from '@monetr/interface/hooks/useAppConfiguration';
 import mergeTailwind from '@monetr/interface/util/mergeTailwind';
@@ -122,6 +123,7 @@ function Greeting(props: GreetingProps): JSX.Element {
       >
         Continue
       </MBaseButton>
+      <SetupBillingButton />
       <Footer />
     </div>
   );