Merge pull request #2074 from Infisical/feat/make-a-wish-feature

feat: make a wish feature

frontend/src/hooks/api/userEngagement/index.ts

@@ -0,0 +1 @@
+export { useCreateUserWish } from "./mutations";

frontend/src/hooks/api/userEngagement/mutations.tsx

@@ -0,0 +1,14 @@
+import { useMutation } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+
+import { TCreateUserWishDto } from "./types";
+
+export const useCreateUserWish = () => {
+  return useMutation<{}, {}, TCreateUserWishDto>({
+    mutationFn: async (dto) => {
+      const { data } = await apiRequest.post("/api/v1/user-engagement/me/wish", dto);
+      return data;
+    }
+  });
+};

frontend/src/hooks/api/userEngagement/types.ts

@@ -0,0 +1,3 @@
+export type TCreateUserWishDto = {
+  text: string;
+};

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -8,7 +8,6 @@
 import { useEffect, useMemo } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
@@ -69,9 +68,7 @@ import {
   useGetAccessRequestsCount,
   useGetOrgTrialUrl,
   useGetSecretApprovalRequestCount,
-  useGetUserAction,
   useLogoutUser,
-  useRegisterUserAction,
   useSelectOrganization
 } from "@app/hooks/api";
 import { Workspace } from "@app/hooks/api/types";
@@ -80,6 +77,8 @@ import { useGetUserProjectFavorites } from "@app/hooks/api/users/queries";
 import { navigateUserToOrg } from "@app/views/Login/Login.utils";
 import { CreateOrgModal } from "@app/views/Org/components";
 
+import { WishForm } from "./components/WishForm/WishForm";
+
 interface LayoutProps {
   children: React.ReactNode;
 }
@@ -145,7 +144,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
   const { subscription } = useSubscription();
   const workspaceId = currentWorkspace?.id || "";
   const projectSlug = currentWorkspace?.slug || "";
-  const { data: updateClosed } = useGetUserAction("december_update_closed");
 
   const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });
   const { data: accessApprovalRequestCount } = useGetAccessRequestsCount({ projectSlug });
@@ -179,13 +177,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
 
   const { t } = useTranslation();
 
-  const registerUserAction = useRegisterUserAction();
   const { mutateAsync: selectOrganization } = useSelectOrganization();
 
-  const closeUpdate = async () => {
-    await registerUserAction.mutateAsync("december_update_closed");
-  };
-
   const logout = useLogoutUser();
   const logOutUser = async () => {
     try {
@@ -765,49 +758,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
                     : "mb-4"
                 } flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400`}
               >
-                {/* <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[9.9rem] ${router.asPath.includes("org") ? "bottom-[8.4rem]" : "bottom-[5.4rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-30`}/>
-                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[10.7rem] ${router.asPath.includes("org") ? "bottom-[8.15rem]" : "bottom-[5.15rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-50`}/>
-                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[11.5rem] ${router.asPath.includes("org") ? "bottom-[7.9rem]" : "bottom-[4.9rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-70`}/>
-                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[12.3rem] ${router.asPath.includes("org") ? "bottom-[7.65rem]" : "bottom-[4.65rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-90`}/> */}
-                <div
-                  className={`${
-                    !updateClosed ? "block" : "hidden"
-                  } relative z-10 mb-6 flex h-64 w-52 flex-col items-center justify-start rounded-md border border-mineshaft-600 bg-mineshaft-900 px-3`}
-                >
-                  <div className="text-md mt-2 w-full font-semibold text-mineshaft-100">
-                    Infisical December update
-                  </div>
-                  <div className="mt-1 mb-1 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300">
-                    Infisical Agent, new SDKs, Machine Identities, and more!
-                  </div>
-                  <div className="mt-2 h-[6.77rem] w-full rounded-md border border-mineshaft-700">
-                    <Image
-                      src="/images/infisical-update-december-2023.png"
-                      height={319}
-                      width={539}
-                      alt="kubernetes image"
-                      className="rounded-sm"
-                    />
-                  </div>
-                  <div className="mt-3 flex w-full items-center justify-between px-0.5">
-                    <button
-                      type="button"
-                      onClick={() => closeUpdate()}
-                      className="text-mineshaft-400 duration-200 hover:text-mineshaft-100"
-                    >
-                      Close
-                    </button>
-                    <a
-                      href="https://infisical.com/blog/infisical-update-december-2023"
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-sm font-normal leading-[1.2rem] text-mineshaft-400 duration-200 hover:text-mineshaft-100"
-                    >
-                      Learn More{" "}
-                      <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="pl-0.5 text-xs" />
-                    </a>
-                  </div>
-                </div>
+                {(window.location.origin.includes("https://app.infisical.com") ||
+                  window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
                 {router.asPath.includes("org") && (
                   <div
                     onKeyDown={() => null}

frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx

@@ -0,0 +1,114 @@
+import { useForm } from "react-hook-form";
+import { faRocketchat } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+  Button,
+  FormControl,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  TextArea
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+import { useCreateUserWish } from "@app/hooks/api/userEngagement";
+
+const formSchema = z.object({
+  text: z.string().trim().min(1)
+});
+
+type TFormData = z.infer<typeof formSchema>;
+
+export const WishForm = () => {
+  const {
+    handleSubmit,
+    register,
+    reset,
+    formState: { isSubmitting, errors }
+  } = useForm<TFormData>({
+    resolver: zodResolver(formSchema)
+  });
+  const { mutateAsync } = useCreateUserWish();
+  const [isOpen, setIsOpen] = useToggle(false);
+
+  const createWish = async (data: TFormData) => {
+    try {
+      await mutateAsync({
+        text: data.text
+      });
+
+      createNotification({
+        text: "Your wish has been sent to the Infisical team!",
+        type: "success"
+      });
+
+      setIsOpen.off();
+    } catch (err) {
+      createNotification({
+        text: "An error occured while sending your wish to the Infisical team.",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Popover
+      onOpenChange={() => {
+        setIsOpen.toggle();
+        reset();
+      }}
+      open={isOpen}
+    >
+      <PopoverTrigger asChild>
+        <div className="text-md mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
+          <FontAwesomeIcon icon={faRocketchat} className="mr-2" />
+          Make a wish
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        hideCloseBtn
+        align="start"
+        alignOffset={25}
+        className="mb-1 w-auto border border-mineshaft-600 bg-mineshaft-900 p-4 drop-shadow-2xl"
+        sticky="always"
+      >
+        <form onSubmit={handleSubmit(createWish)}>
+          <FormControl
+            className="mb-0"
+            isError={Boolean(errors?.text)}
+            errorText={errors?.text?.message}
+          >
+            <TextArea
+              className="border border-mineshaft-600 text-sm focus:ring-0"
+              variant="plain"
+              placeholder="Wish for anything! Help us improve the platform"
+              reSize="none"
+              rows={6}
+              cols={40}
+              {...register("text")}
+            />
+          </FormControl>
+          <div className="mt-2 flex justify-between border-t border-mineshaft-500 pt-4">
+            <PopoverPrimitive.Close asChild>
+              <Button className="mr-2 w-min" colorSchema="secondary">
+                Cancel
+              </Button>
+            </PopoverPrimitive.Close>
+            <Button
+              className="w-min"
+              type="submit"
+              isLoading={isSubmitting}
+              disabled={isSubmitting}
+            >
+              Send
+            </Button>
+          </div>
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};