quivr/frontend/app/user/components/StripePricingOrManageButton.tsx
Matthieu Jacq d311a53b6f
feat: manage plan (#1488)
# Description

- add crown on premium user
- link to manage plan in page `/user`

## ⚠️ Before merging

Setup env variable:
```env
NEXT_PUBLIC_STRIPE_MANAGE_PLAN_URL=<ignore-me-or-change-me>
```

## Screenshots (if appropriate):

<img width="290" alt="image"
src="https://github.com/StanGirard/quivr/assets/67386567/a87b0f7e-b07c-4f4e-b9d2-515ac25ebf05">

<img width="318" alt="image"
src="https://github.com/StanGirard/quivr/assets/67386567/6a4f4f72-8c75-45da-9468-cae1a8d28935">
2023-10-25 16:11:17 +02:00

30 lines
925 B
TypeScript

import { useFeatureIsOn } from "@growthbook/growthbook-react";
import { useTranslation } from "react-i18next";
import { StripePricingModal } from "@/lib/components/Stripe";
import Button from "@/lib/components/ui/Button";
import { useUserData } from "@/lib/hooks/useUserData";
const MANAGE_PLAN_URL = process.env.NEXT_PUBLIC_STRIPE_MANAGE_PLAN_URL;
export const StripePricingOrManageButton = (): JSX.Element => {
const { t } = useTranslation("monetization");
const { userData } = useUserData();
const monetizationIsOn = useFeatureIsOn("monetization");
if (!monetizationIsOn) {
return <></>;
}
const is_premium = userData?.is_premium ?? false;
if (is_premium) {
return (
<a href={MANAGE_PLAN_URL} target="_blank" rel="noopener">
<Button className="w-full">{t("manage_plan")}</Button>
</a>
);
}
return <StripePricingModal Trigger={<Button>{t("upgrade")}</Button>} />;
};