From ee7af51c4d65e77f13895d0115d8940990db22fe Mon Sep 17 00:00:00 2001 From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com> Date: Wed, 25 Oct 2023 12:42:53 +0200 Subject: [PATCH] feat: upgrade button in user settings (#1484) # Description Epic: #1429 User Story: #1431 - Add an upgrade button in user settings. - Remove hover links on sidebar buttons (otherwise the link could partially hide the button) ## Screenshots (if appropriate): image image --- .../components/BrainsList/BrainsList.tsx | 2 +- .../app/chat/components/ChatsList/index.tsx | 2 +- frontend/app/user/page.tsx | 27 +++++++++++---- .../SidebarFooter/SidebarFooter.tsx | 10 ++++-- .../components/BrainManagementButton.tsx | 14 ++++---- .../components/SidebarFooterButton.tsx | 34 +++++++++++++++++++ .../components/UpgradeToPlus.tsx | 22 ++++++------ .../SidebarFooter/components/UserButton.tsx | 15 ++++---- .../SidebarFooter/styles/SidebarLinkStyle.tsx | 2 -- frontend/lib/components/ui/Avatar.tsx | 6 ++-- 10 files changed, 89 insertions(+), 45 deletions(-) create mode 100644 frontend/lib/components/Sidebar/components/SidebarFooter/components/SidebarFooterButton.tsx delete mode 100644 frontend/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle.tsx diff --git a/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx b/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx index 629df1fb7..c699451b3 100644 --- a/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx +++ b/frontend/app/brains-management/[brainId]/components/BrainsList/BrainsList.tsx @@ -17,7 +17,7 @@ export const BrainsList = (): JSX.Element => { const { t } = useTranslation(["brain", "chat"]); return ( - +
+ {is_premium === true ? null : ( + {t("monetization:upgrade")}} + /> + )} diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx index 13b9ab881..aa2097995 100644 --- a/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx +++ b/frontend/lib/components/Sidebar/components/SidebarFooter/SidebarFooter.tsx @@ -12,12 +12,16 @@ type SidebarFooterProps = { export const SidebarFooter = ({ showButtons, }: SidebarFooterProps): JSX.Element => { + const buttons = { + myBrains: , + upgradeToPlus: , + user: , + }; + return (
- {showButtons.includes("myBrains") && } - {showButtons.includes("upgradeToPlus") && } - {showButtons.includes("user") && } + {showButtons.map((button) => buttons[button])}
); diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx index 590b3c417..de9ceccb2 100644 --- a/frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx +++ b/frontend/lib/components/Sidebar/components/SidebarFooter/components/BrainManagementButton.tsx @@ -1,22 +1,20 @@ -import Link from "next/link"; import { useTranslation } from "react-i18next"; import { FaBrain } from "react-icons/fa"; -import { sidebarLinkStyle } from "@/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle"; import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext"; +import { SidebarFooterButton } from "./SidebarFooterButton"; + export const BrainManagementButton = (): JSX.Element => { const { currentBrainId } = useBrainContext(); const { t } = useTranslation("brain"); return ( - } + label={t("myBrains")} data-testid="brain-management-button" - > - - {t("myBrains")} - + /> ); }; diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/components/SidebarFooterButton.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/components/SidebarFooterButton.tsx new file mode 100644 index 000000000..0a57721bd --- /dev/null +++ b/frontend/lib/components/Sidebar/components/SidebarFooter/components/SidebarFooterButton.tsx @@ -0,0 +1,34 @@ +import { useRouter } from "next/navigation"; + +type SidebarFooterButtonProps = { + icon: JSX.Element; + label: string | JSX.Element; + href?: string; + onClick?: () => void; +}; + +export const SidebarFooterButton = ({ + icon, + label, + href, + onClick, +}: SidebarFooterButtonProps): JSX.Element => { + const router = useRouter(); + + if (href !== undefined) { + onClick = () => { + void router.push(href); + }; + } + + return ( + + ); +}; diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx index 806a2ccb1..8b5c47c5d 100644 --- a/frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx +++ b/frontend/lib/components/Sidebar/components/SidebarFooter/components/UpgradeToPlus.tsx @@ -5,7 +5,7 @@ import { FiUser } from "react-icons/fi"; import { StripePricingModal } from "@/lib/components/Stripe"; import { useUserData } from "@/lib/hooks/useUserData"; -import { sidebarLinkStyle } from "../styles/SidebarLinkStyle"; +import { SidebarFooterButton } from "./SidebarFooterButton"; export const UpgradeToPlus = (): JSX.Element => { const { userData } = useUserData(); @@ -20,15 +20,17 @@ export const UpgradeToPlus = (): JSX.Element => { return ( - - - {t("upgrade")}{" "} - - {t("new")} - - - + } + label={ + <> + {t("upgrade")}{" "} + + {t("new")} + + + } + /> } /> ); diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx index 77bc2fe67..29df10a94 100644 --- a/frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx +++ b/frontend/lib/components/Sidebar/components/SidebarFooter/components/UserButton.tsx @@ -1,21 +1,18 @@ -import Link from "next/link"; - import { Avatar } from "@/lib/components/ui/Avatar"; import { useSupabase } from "@/lib/context/SupabaseProvider"; +import { SidebarFooterButton } from "./SidebarFooterButton"; import { useGravatar } from "../../../../../hooks/useGravatar"; -import { sidebarLinkStyle } from "../styles/SidebarLinkStyle"; export const UserButton = (): JSX.Element => { const { session } = useSupabase(); const { gravatarUrl } = useGravatar(); return ( - - - - {session?.user.email ?? ""} - - + } + label={session?.user.email ?? ""} + /> ); }; diff --git a/frontend/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle.tsx b/frontend/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle.tsx deleted file mode 100644 index a968954ed..000000000 --- a/frontend/lib/components/Sidebar/components/SidebarFooter/styles/SidebarLinkStyle.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export const sidebarLinkStyle = - "w-full rounded-lg px-5 py-2 text-base flex justify-start items-center gap-4 hover:bg-gray-200 dark:hover:bg-gray-800 focus:outline-none"; diff --git a/frontend/lib/components/ui/Avatar.tsx b/frontend/lib/components/ui/Avatar.tsx index b4cdc524f..e472aaa57 100644 --- a/frontend/lib/components/ui/Avatar.tsx +++ b/frontend/lib/components/ui/Avatar.tsx @@ -4,20 +4,18 @@ import { cn } from "@/lib/utils"; type AvatarProps = { url: string; - alt: string; imgClassName?: string; className?: string; }; export const Avatar = ({ url, - alt, imgClassName, className, }: AvatarProps): JSX.Element => { return ( -
+