E 1678 feature support v1 contactform

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>
   );
 }

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;
 }

package.json

@@ -17,6 +17,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",

shared/features/feedback-drawer/feedback-drawer.hooks.ts

@@ -0,0 +1,5 @@
+import { useState } from "react";
+
+export function useFeedbackDrawerState() {
+  return useState<boolean>(false);
+}

shared/features/feedback-drawer/feedback-drawer.tsx

@@ -0,0 +1,36 @@
+import { FilloutStandardEmbed } from "@fillout/react";
+
+import { Drawer } from "@/design-system/molecules/drawer";
+
+import { useFeedbackDrawerState } from "@/shared/features/feedback-drawer/feedback-drawer.hooks";
+import { useAuthUser } from "@/shared/hooks/auth/use-auth-user";
+
+export function FeedbackDrawer({ state }: { state: ReturnType<typeof useFeedbackDrawerState> }) {
+  const [isOpen, setIsOpen] = state;
+
+  const { user } = useAuthUser();
+
+  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>
+  );
+}

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 (
     <>

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} />
     </>
   );
 }

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;