feat: add links to and from alby setup

apps/web/components/apps/AppPage.tsx

@@ -89,6 +89,8 @@ export const AppPage = ({
 
   const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
   const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
+  // FIXME: remove hardcoding
+  const showSetupIntegration = slug === "alby";
   const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
     { appType: type },
     {
@@ -213,14 +215,21 @@ export const AppPage = ({
               )}
             </div>
           ) : showDisconnectIntegration ? (
-            <DisconnectIntegration
-              buttonProps={{ color: "secondary" }}
-              label={t("disconnect")}
-              credentialId={existingCredentials[0]}
-              onSuccess={() => {
-                appDbQuery.refetch();
-              }}
-            />
+            <div className="flex gap-2">
+              {showSetupIntegration && (
+                <Link href={`/apps/${slug}/setup`}>
+                  <Button color="secondary">Setup</Button>
+                </Link>
+              )}
+              <DisconnectIntegration
+                buttonProps={{ color: "secondary" }}
+                label={t("disconnect")}
+                credentialId={existingCredentials[0]}
+                onSuccess={() => {
+                  appDbQuery.refetch();
+                }}
+              />
+            </div>
           ) : (
             <InstallAppButton
               type={type}

packages/app-store/alby/pages/setup/index.tsx

@@ -6,7 +6,7 @@ import { Toaster } from "react-hot-toast";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc";
-import { Button, showToast } from "@calcom/ui";
+import { Badge, Button, showToast } from "@calcom/ui";
 import { Info } from "@calcom/ui/components/icon";
 
 import { albyCredentialKeysSchema } from "../../lib/albyCredentialKeysSchema";
@@ -144,9 +144,10 @@ function AlbySetupPage(props: IAlbySetupProps) {
               </>
             ) : (
               <>
+                <img className="h-16 w-16" src="/api/app-store/alby/icon2.svg" alt="Alby Logo" />
                 <p>Alby Connected!</p>
-                <p>Email: {props.email}</p>
-                <p>Lightning Address: {props.lightningAddress}</p>
+                <Badge>Email: {props.email}</Badge>
+                <Badge>Lightning Address: {props.lightningAddress}</Badge>
               </>
             )}
 
@@ -156,6 +157,9 @@ function AlbySetupPage(props: IAlbySetupProps) {
               generate invoices. If you update your lightning address, please disconnect and setup the Alby
               app again.
             </div>
+            <Link href="/apps/alby">
+              <Button color="secondary">Go to App Store Listing</Button>
+            </Link>
           </div>
         </div>
       ) : (