From 63ef4d6ea2c85b516aed69fb6334f1b8695291a6 Mon Sep 17 00:00:00 2001
From: haydencleary <5160414+haydencleary@users.noreply.github.com>
Date: Thu, 8 Aug 2024 17:04:05 +0200
Subject: [PATCH 1/4] feat(feedback): basic drawer

---
 app/feedback/page.tsx                         | 18 ++++++++++
 package-lock.json                             |  7 ++++
 package.json                                  |  1 +
 .../feedback-drawer/feedback-drawer.hooks.ts  |  5 +++
 .../feedback-drawer/feedback-drawer.tsx       | 35 +++++++++++++++++++
 5 files changed, 66 insertions(+)
 create mode 100644 app/feedback/page.tsx
 create mode 100644 shared/features/feedback-drawer/feedback-drawer.hooks.ts
 create mode 100644 shared/features/feedback-drawer/feedback-drawer.tsx

diff --git a/app/feedback/page.tsx b/app/feedback/page.tsx
new file mode 100644
index 00000000..d08b2280
--- /dev/null
+++ b/app/feedback/page.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Button } from "@/design-system/atoms/button/variants/button-default";
+
+import { FeedbackDrawer } from "@/shared/features/feedback-drawer/feedback-drawer";
+import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
+
+export default function FeedbackPage() {
+  const feedbackDrawerState = useFeedbackDrawerState();
+  const [, setIsOpen] = feedbackDrawerState;
+
+  return (
+    <div>
+      <Button onClick={() => setIsOpen(true)}>Open feedback drawer</Button>
+      <FeedbackDrawer state={feedbackDrawerState} />
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index e391c49e..7e41c5a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@auth0/auth0-react": "^2.2.4",
+        "@fillout/react": "^1.1.2",
         "@nextui-org/react": "^2.4.6",
         "@tanstack/react-query": "^5.51.21",
         "clsx": "^2.1.1",
@@ -4247,6 +4248,12 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fillout/react": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@fillout/react/-/react-1.1.2.tgz",
+      "integrity": "sha512-XyzLY74Zhxxwym3A9770Tb3NINwaaWyWwvaw1lMJ5sA/P6hgsdzvefUOqohzR3+KVyspvBOR4BoR0nBMPFd/Vw==",
+      "license": "MIT"
+    },
     "node_modules/@formatjs/ecma402-abstract": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.0.0.tgz",
diff --git a/package.json b/package.json
index d5d7fba5..12cfe998 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@auth0/auth0-react": "^2.2.4",
+    "@fillout/react": "^1.1.2",
     "@nextui-org/react": "^2.4.6",
     "@tanstack/react-query": "^5.51.21",
     "clsx": "^2.1.1",
diff --git a/shared/features/feedback-drawer/feedback-drawer.hooks.ts b/shared/features/feedback-drawer/feedback-drawer.hooks.ts
new file mode 100644
index 00000000..748ce50e
--- /dev/null
+++ b/shared/features/feedback-drawer/feedback-drawer.hooks.ts
@@ -0,0 +1,5 @@
+import { useState } from "react";
+
+export function useFeedbackDrawerState() {
+  return useState<boolean>(false);
+}
diff --git a/shared/features/feedback-drawer/feedback-drawer.tsx b/shared/features/feedback-drawer/feedback-drawer.tsx
new file mode 100644
index 00000000..88cdb217
--- /dev/null
+++ b/shared/features/feedback-drawer/feedback-drawer.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { FilloutStandardEmbed } from "@fillout/react";
+
+import { Drawer } from "@/design-system/molecules/drawer";
+
+import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
+
+export function FeedbackDrawer({ state }: { state: ReturnType<typeof useFeedbackDrawerState> }) {
+  const [isOpen, setIsOpen] = state;
+
+  return (
+    <Drawer
+      isOpen={isOpen}
+      onOpenChange={setIsOpen}
+      hideHeader
+      classNames={{
+        body: "p-0 h-full",
+      }}
+    >
+      <FilloutStandardEmbed
+        filloutId="uUS6ESXXcjus"
+        inheritParameters
+        // parameters={{
+        //   user_id: user?.id,
+        //   first_name: user?.firstName || undefined,
+        //   last_name: user?.lastName || undefined,
+        //   email: user?.email || undefined,
+        //   github_id: `${user?.githubUserId}` || undefined,
+        //   github_login: user?.login || undefined,
+        // }}
+      />
+    </Drawer>
+  );
+}

From 02ddb04fd7c7b23d4b7a3fc81f431ad9d5649e0f Mon Sep 17 00:00:00 2001
From: haydencleary <5160414+haydencleary@users.noreply.github.com>
Date: Thu, 8 Aug 2024 17:09:37 +0200
Subject: [PATCH 2/4] feat(feedback): get current user

---
 .../feedback-drawer/feedback-drawer.tsx       | 21 ++++++++++---------
 shared/hooks/user/use-current-user.ts         |  7 +++++++
 2 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 shared/hooks/user/use-current-user.ts

diff --git a/shared/features/feedback-drawer/feedback-drawer.tsx b/shared/features/feedback-drawer/feedback-drawer.tsx
index 88cdb217..f33c26b7 100644
--- a/shared/features/feedback-drawer/feedback-drawer.tsx
+++ b/shared/features/feedback-drawer/feedback-drawer.tsx
@@ -1,14 +1,15 @@
-"use client";
-
 import { FilloutStandardEmbed } from "@fillout/react";
 
 import { Drawer } from "@/design-system/molecules/drawer";
 
 import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
+import { useCurrentUser } from "@/shared/hooks/user/use-current-user";
 
 export function FeedbackDrawer({ state }: { state: ReturnType<typeof useFeedbackDrawerState> }) {
   const [isOpen, setIsOpen] = state;
 
+  const { user } = useCurrentUser();
+
   return (
     <Drawer
       isOpen={isOpen}
@@ -21,14 +22,14 @@ export function FeedbackDrawer({ state }: { state: ReturnType<typeof useFeedback
       <FilloutStandardEmbed
         filloutId="uUS6ESXXcjus"
         inheritParameters
-        // parameters={{
-        //   user_id: user?.id,
-        //   first_name: user?.firstName || undefined,
-        //   last_name: user?.lastName || undefined,
-        //   email: user?.email || undefined,
-        //   github_id: `${user?.githubUserId}` || undefined,
-        //   github_login: user?.login || undefined,
-        // }}
+        parameters={{
+          user_id: user?.id,
+          first_name: user?.firstName || undefined,
+          last_name: user?.lastName || undefined,
+          email: user?.email || undefined,
+          github_id: `${user?.githubUserId}` || undefined,
+          github_login: user?.login || undefined,
+        }}
       />
     </Drawer>
   );
diff --git a/shared/hooks/user/use-current-user.ts b/shared/hooks/user/use-current-user.ts
new file mode 100644
index 00000000..8faeaae9
--- /dev/null
+++ b/shared/hooks/user/use-current-user.ts
@@ -0,0 +1,7 @@
+import { UserReactQueryAdapter } from "@/core/application/react-query-adapter/user";
+
+export function useCurrentUser() {
+  const { data: user, ...restQuery } = UserReactQueryAdapter.client.useGetMe({});
+
+  return { user, ...restQuery };
+}

From 9e1468dac235662dc0b37fc75f7618197c8d349a Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Fri, 9 Aug 2024 10:28:53 +0200
Subject: [PATCH 3/4] Update feedback to add it in menu

---
 app/feedback/page.tsx                         | 18 -----
 .../adapters/default/default.adapter.tsx      | 79 ++++++++++++-------
 .../molecules/item-nav/item-nav.types.ts      |  1 +
 .../feedback-drawer/feedback-drawer.tsx       |  4 +-
 .../menu/secondary-menu/secondary-menu.tsx    | 17 ++--
 shared/hooks/user/use-current-user.ts         |  7 --
 6 files changed, 65 insertions(+), 61 deletions(-)
 delete mode 100644 app/feedback/page.tsx
 delete mode 100644 shared/hooks/user/use-current-user.ts

diff --git a/app/feedback/page.tsx b/app/feedback/page.tsx
deleted file mode 100644
index d08b2280..00000000
--- a/app/feedback/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client";
-
-import { Button } from "@/design-system/atoms/button/variants/button-default";
-
-import { FeedbackDrawer } from "@/shared/features/feedback-drawer/feedback-drawer";
-import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
-
-export default function FeedbackPage() {
-  const feedbackDrawerState = useFeedbackDrawerState();
-  const [, setIsOpen] = feedbackDrawerState;
-
-  return (
-    <div>
-      <Button onClick={() => setIsOpen(true)}>Open feedback drawer</Button>
-      <FeedbackDrawer state={feedbackDrawerState} />
-    </div>
-  );
-}
diff --git a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
index 2a886bd3..ab2cf7be 100644
--- a/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
+++ b/design-system/molecules/item-nav/adapters/default/default.adapter.tsx
@@ -6,42 +6,63 @@ import { ItemNavPort } from "@/design-system/molecules/item-nav/item-nav.types";
 import { BaseLink } from "@/shared/components/base-link/base-link";
 import { cn } from "@/shared/helpers/cn";
 
-export function ItemNavDefaultAdapter({ classNames, children, translate, ...props }: ItemNavPort) {
-  const { isDisabled, isFolded, icon, labelProps = {}, ...linkProps } = props;
+function Content({
+  classNames,
+  children,
+  translate,
+  icon,
+  labelProps = {},
+  isExternal,
+  isDisabled,
+  isFolded,
+}: ItemNavPort & { isExternal: boolean }) {
   const slots = ItemNavDefaultVariants({
     isDisabled,
   });
 
-  const showChildren = !!children || !!translate;
+  return (
+    <div className={"flex w-full items-center justify-start gap-2 overflow-hidden"}>
+      <Icon size={18} {...icon} />
+      <div className="flex flex-1 justify-start">
+        <Typo
+          size={"m"}
+          as={"span"}
+          {...labelProps}
+          translate={translate}
+          classNames={{ base: cn(slots.label(), classNames?.label) }}
+        >
+          {children}
+        </Typo>
+        {isExternal ? (
+          <Icon
+            name="ri-external-link-line"
+            classNames={{
+              base: cn("invisible ml-1 text-inherit group-hover/link:visible", { "!invisible": isFolded }),
+            }}
+          />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function ItemNavDefaultAdapter({ ...props }: ItemNavPort) {
+  const { isDisabled, classNames, onClick, ...linkProps } = props;
+  const slots = ItemNavDefaultVariants({
+    isDisabled,
+  });
+
+  if (onClick) {
+    return (
+      <button className={cn(slots.base(), classNames?.base)} onClick={onClick} disabled={isDisabled}>
+        <Content {...props} isExternal={false} />
+      </button>
+    );
+  }
 
   return (
     <BaseLink className={cn(slots.base(), classNames?.base)} {...linkProps}>
-      {({ isExternal }) => (
-        <div className={"flex w-full items-center justify-start gap-2 overflow-hidden"}>
-          <Icon size={18} {...icon} />
-          <div className="flex-1">
-            {showChildren && (
-              <Typo
-                size={"m"}
-                as={"span"}
-                {...labelProps}
-                translate={translate}
-                classNames={{ base: cn(slots.label(), classNames?.label) }}
-              >
-                {children}
-              </Typo>
-            )}
-            {isExternal ? (
-              <Icon
-                name="ri-external-link-line"
-                classNames={{
-                  base: cn("invisible ml-1 text-inherit group-hover/link:visible", { "!invisible": isFolded }),
-                }}
-              />
-            ) : null}
-          </div>
-        </div>
-      )}
+      {({ isExternal }) => <Content {...props} isExternal={isExternal} />}
     </BaseLink>
   );
 }
diff --git a/design-system/molecules/item-nav/item-nav.types.ts b/design-system/molecules/item-nav/item-nav.types.ts
index 2928df9f..0e4c379a 100644
--- a/design-system/molecules/item-nav/item-nav.types.ts
+++ b/design-system/molecules/item-nav/item-nav.types.ts
@@ -20,4 +20,5 @@ export interface ItemNavPort extends _BaseLinkProps, PropsWithChildren {
   translate?: TranslateProps;
   isDisabled?: boolean;
   isFolded?: boolean;
+  onClick?: () => void;
 }
diff --git a/shared/features/feedback-drawer/feedback-drawer.tsx b/shared/features/feedback-drawer/feedback-drawer.tsx
index f33c26b7..0cfa8e1c 100644
--- a/shared/features/feedback-drawer/feedback-drawer.tsx
+++ b/shared/features/feedback-drawer/feedback-drawer.tsx
@@ -3,12 +3,12 @@ import { FilloutStandardEmbed } from "@fillout/react";
 import { Drawer } from "@/design-system/molecules/drawer";
 
 import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
-import { useCurrentUser } from "@/shared/hooks/user/use-current-user";
+import { useAuthUser } from "@/shared/hooks/auth/use-auth-user";
 
 export function FeedbackDrawer({ state }: { state: ReturnType<typeof useFeedbackDrawerState> }) {
   const [isOpen, setIsOpen] = state;
 
-  const { user } = useCurrentUser();
+  const { user } = useAuthUser();
 
   return (
     <Drawer
diff --git a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
index a776abf0..daf53c68 100644
--- a/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
+++ b/shared/features/navigation/menu/secondary-menu/secondary-menu.tsx
@@ -1,23 +1,30 @@
-import { SecondaryMenuProps } from "shared/features/navigation/menu/secondary-menu/secondary-menu.types";
-
 import { ItemNav } from "@/design-system/molecules/item-nav";
 
+import { FeedbackDrawer } from "@/shared/features/feedback-drawer/feedback-drawer";
+import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
+
+import { SecondaryMenuProps } from "./secondary-menu.types";
+
 export function SecondaryMenu({ isFolded }: SecondaryMenuProps) {
+  const feedbackDrawerState = useFeedbackDrawerState();
+  const [, setIsOpen] = feedbackDrawerState;
   return (
     <>
       <ItemNav
         isFolded={isFolded}
-        icon={{ name: "ri-settings-line" }}
+        icon={{ name: "ri-chat-4-line" }}
         href={"/test"}
         translate={{ token: "primaryNavigation:secondaryMenu.support" }}
+        onClick={() => setIsOpen(true)}
       />
       <ItemNav
         isFolded={isFolded}
-        icon={{ name: "ri-chat-4-line" }}
-        href={"/test2"}
+        icon={{ name: "ri-settings-line" }}
+        href={"/test"}
         translate={{ token: "primaryNavigation:secondaryMenu.settings" }}
         isDisabled={true}
       />
+      <FeedbackDrawer state={feedbackDrawerState} />
     </>
   );
 }
diff --git a/shared/hooks/user/use-current-user.ts b/shared/hooks/user/use-current-user.ts
deleted file mode 100644
index 8faeaae9..00000000
--- a/shared/hooks/user/use-current-user.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { UserReactQueryAdapter } from "@/core/application/react-query-adapter/user";
-
-export function useCurrentUser() {
-  const { data: user, ...restQuery } = UserReactQueryAdapter.client.useGetMe({});
-
-  return { user, ...restQuery };
-}

From ca934a4897e49339ad6bafb911a97a87d11e2a8e Mon Sep 17 00:00:00 2001
From: Alexis Benoliel <alexbenoliel@gmail.com>
Date: Fri, 9 Aug 2024 10:29:41 +0200
Subject: [PATCH 4/4] Fix imports

---
 shared/features/navigation/menu/primary-menu/primary-menu.tsx | 4 ++--
 shared/features/navigation/menu/user-menu/user-menu.tsx       | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/shared/features/navigation/menu/primary-menu/primary-menu.tsx b/shared/features/navigation/menu/primary-menu/primary-menu.tsx
index 12a152d2..b856eb88 100644
--- a/shared/features/navigation/menu/primary-menu/primary-menu.tsx
+++ b/shared/features/navigation/menu/primary-menu/primary-menu.tsx
@@ -1,7 +1,7 @@
-import { PrimaryMenuProps } from "shared/features/navigation/menu/primary-menu/primary-menu.types";
-
 import { ItemNav } from "@/design-system/molecules/item-nav";
 
+import { PrimaryMenuProps } from "./primary-menu.types";
+
 export function PrimaryMenu({ isFolded }: PrimaryMenuProps) {
   return (
     <>
diff --git a/shared/features/navigation/menu/user-menu/user-menu.tsx b/shared/features/navigation/menu/user-menu/user-menu.tsx
index a23df563..51fe9644 100644
--- a/shared/features/navigation/menu/user-menu/user-menu.tsx
+++ b/shared/features/navigation/menu/user-menu/user-menu.tsx
@@ -1,5 +1,3 @@
-import { UserMenuProps } from "shared/features/navigation/menu/user-menu/user-menu.types";
-
 import { useClientBootstrapContext } from "@/core/bootstrap/client-bootstrap-context";
 
 import { Avatar } from "@/design-system/atoms/avatar";
@@ -10,6 +8,8 @@ import { Typo } from "@/design-system/atoms/typo";
 import { cn } from "@/shared/helpers/cn";
 import { useAuthUser } from "@/shared/hooks/auth/use-auth-user";
 
+import { UserMenuProps } from "./user-menu.types";
+
 export function UserMenu({ isFolded }: UserMenuProps) {
   const { user, isLoading } = useAuthUser();
   const login = user?.login;