public-offering
/
cal.pub0.org
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: show Alby connected status on setup page

feat/alby
Roland Bewick 2023-09-22 23:23:07 +07:00
parent 2bf6b44c06
commit 13597ada38
7 changed files with 96 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/web/pages/apps/[slug]/setup.tsx
View File

@ -1,9 +1,10 @@
import type { GetStaticPaths, InferGetStaticPropsType } from "next";
import type { InferGetStaticPropsType } from "next";
import { useSession } from "next-auth/react";
import { useRouter, useSearchParams } from "next/navigation";
import { AppSetupPage } from "@calcom/app-store/_pages/setup";
import { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
import { getServerSideProps } from "@calcom/app-store/_pages/setup/_getServerSideProps";
import type { getStaticProps } from "@calcom/app-store/_pages/setup/_getStaticProps";
import { HeadSeo } from "@calcom/ui";
import PageWrapper from "@components/PageWrapper";
@ -36,11 +37,4 @@ export default function SetupInformation(props: InferGetStaticPropsType<typeof g
SetupInformation.PageWrapper = PageWrapper;
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: [],
fallback: "blocking",
};
};
export { getStaticProps };
export { getServerSideProps };

22
packages/app-store/_pages/setup/_getServerSideProps.tsx Normal file
View File

@ -0,0 +1,22 @@
import type { GetServerSidePropsContext } from "next";
export const AppSetupPageMap = {
alby: import("../../alby/pages/setup/_getServerSideProps"),
make: import("../../make/pages/setup/_getServerSideProps"),
zapier: import("../../zapier/pages/setup/_getServerSideProps"),
};
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
const { slug } = ctx.params || {};
if (typeof slug !== "string") return { notFound: true } as const;
if (!(slug in AppSetupPageMap)) return { props: {} };
const page = await AppSetupPageMap[slug as keyof typeof AppSetupPageMap];
if (!page.getServerSideProps) return { props: {} };
const props = await page.getServerSideProps(ctx);
return props;
};

21
packages/app-store/_pages/setup/_getStaticProps.tsx
View File

@ -1,21 +0,0 @@
import type { GetStaticPropsContext } from "next";
export const AppSetupPageMap = {
zapier: import("../../zapier/pages/setup/_getStaticProps"),
make: import("../../make/pages/setup/_getStaticProps"),
};
export const getStaticProps = async (ctx: GetStaticPropsContext) => {
const { slug } = ctx.params || {};
if (typeof slug !== "string") return { notFound: true } as const;
if (!(slug in AppSetupPageMap)) return { props: {} };
const page = await AppSetupPageMap[slug as keyof typeof AppSetupPageMap];
if (!page.getStaticProps) return { props: {} };
const props = await page.getStaticProps(ctx);
return props;
};

34
packages/app-store/alby/pages/setup/_getServerSideProps.tsx Normal file
View File

@ -0,0 +1,34 @@
import type { GetServerSidePropsContext } from "next";
import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
import type { IAlbySetupProps } from "./index";
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
if (typeof ctx.params?.slug !== "string") return { notFound: true } as const;
const { req, res } = ctx;
const session = await getServerSession({ req, res });
if (!session?.user?.id) {
return res.status(401).json({ message: "You must be logged in to do this" });
}
const credentials = await prisma.credential.findFirst({
where: {
type: "alby_payment",
userId: session.user.id,
},
});
const props: IAlbySetupProps = {};
if (credentials?.key) {
const { account_lightning_address, account_email } = credentials.key;
props.email = account_email;
props.lightningAddress = account_lightning_address;
}
return {
props,
};
};

49
packages/app-store/alby/pages/setup/index.tsx
View File

@ -11,13 +11,18 @@ import { Info } from "@calcom/ui/components/icon";
import { albyCredentialKeysSchema } from "../../lib/albyCredentialKeysSchema";
export default function AlbySetup() {
export interface IAlbySetupProps {
email?: string;
lightningAddress?: string;
}
export default function AlbySetup(props: IAlbySetupProps) {
const params = globalThis.window && new URLSearchParams(window.location.search);
if (params?.get("callback") === "true") {
return <AlbySetupCallback />;
}
return <AlbySetupPage />;
return <AlbySetupPage {...props} />;
}
function AlbySetupCallback() {
@ -56,7 +61,7 @@ function AlbySetupCallback() {
);
}
function AlbySetupPage() {
function AlbySetupPage(props: IAlbySetupProps) {
const router = useRouter();
const { t } = useLocale();
const integrations = trpc.viewer.integrations.useQuery({ variant: "payment", appId: "alby" });
@ -120,21 +125,31 @@ function AlbySetupPage() {
{showContent ? (
<div className="flex w-full items-center justify-center p-4">
<div className="bg-default border-subtle m-auto flex max-w-[43em] flex-col items-center justify-center gap-4 overflow-auto rounded border p-4 md:p-10">
<p className="text-default">
Create or connect to an existing Alby account to receive lightning payments for your paid
bookings.
</p>
{!props.lightningAddress ? (
<>
<p className="text-default">
Create or connect to an existing Alby account to receive lightning payments for your paid
bookings.
</p>
<button
className="font-body flex h-10 w-56 items-center justify-center gap-2 rounded-md font-bold text-black shadow transition-all hover:brightness-90 active:scale-95"
style={{
background: "linear-gradient(180deg, #FFDE6E 63.72%, #F8C455 95.24%)",
}}
type="button"
onClick={connectWithAlby}>
<img className="h-8 w-8" src="/api/app-store/alby/icon2.svg" alt="Alby Logo" />
<span className="mr-2">Connect with Alby</span>
</button>
</>
) : (
<>
<p>Alby Connected!</p>
<p>Email: {props.email}</p>
<p>Lightning Address: {props.lightningAddress}</p>
</>
)}
<button
className="font-body flex h-10 w-56 items-center justify-center gap-2 rounded-md font-bold text-black shadow transition-all hover:brightness-90 active:scale-95"
style={{
background: "linear-gradient(180deg, #FFDE6E 63.72%, #F8C455 95.24%)",
}}
type="button"
onClick={connectWithAlby}>
<img className="h-8 w-8" src="/api/app-store/alby/icon2.svg" alt="Alby Logo" />
<span className="mr-2">Connect with Alby</span>
</button>
{/* TODO: remove when invoices are generated using user identifier */}
<div className="mt-4 rounded bg-blue-50 p-3 text-sm text-blue-700">
<Info className="mb-0.5 inline-flex h-4 w-4" /> Your Alby lightning address will be used to

4
packages/app-store/make/pages/setup/_getStaticProps.tsx → packages/app-store/make/pages/setup/_getServerSideProps.tsx
View File

@ -1,4 +1,4 @@
import type { GetStaticPropsContext } from "next";
import type { GetServerSidePropsContext } from "next";
import getAppKeysFromSlug from "../../../_utils/getAppKeysFromSlug";
@ -6,7 +6,7 @@ export interface IMakeSetupProps {
inviteLink: string;
}
export const getStaticProps = async (ctx: GetStaticPropsContext) => {
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
if (typeof ctx.params?.slug !== "string") return { notFound: true } as const;
let inviteLink = "";
const appKeys = await getAppKeysFromSlug("make");

4
packages/app-store/zapier/pages/setup/_getStaticProps.tsx → packages/app-store/zapier/pages/setup/_getServerSideProps.tsx
View File

@ -1,4 +1,4 @@
import type { GetStaticPropsContext } from "next";
import type { GetServerSidePropsContext } from "next";
import getAppKeysFromSlug from "../../../_utils/getAppKeysFromSlug";
@ -6,7 +6,7 @@ export interface IZapierSetupProps {
inviteLink: string;
}
export const getStaticProps = async (ctx: GetStaticPropsContext) => {
export const getServerSideProps = async (ctx: GetServerSidePropsContext) => {
if (typeof ctx.params?.slug !== "string") return { notFound: true } as const;
let inviteLink = "";
const appKeys = await getAppKeysFromSlug("zapier");