From 2c9fdb7fad932d155a51d19e1f792e1e32aee241 Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 5 Jul 2024 00:30:22 +0800
Subject: [PATCH 1/3] feat: initial make a wish UI

---
 frontend/src/layouts/AppLayout/AppLayout.tsx | 83 ++++++++------------
 1 file changed, 34 insertions(+), 49 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index acf899a7ee..8bd51417d1 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -8,10 +8,9 @@
 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";
+import { faGithub, faRocketchat, faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
@@ -48,8 +47,12 @@ import {
   MenuItem,
   Modal,
   ModalContent,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   Select,
   SelectItem,
+  TextArea,
   UpgradePlanModal
 } from "@app/components/v2";
 import { UpgradeOverlay } from "@app/components/v2/UpgradeOverlay";
@@ -69,9 +72,7 @@ import {
   useGetAccessRequestsCount,
   useGetOrgTrialUrl,
   useGetSecretApprovalRequestCount,
-  useGetUserAction,
   useLogoutUser,
-  useRegisterUserAction,
   useSelectOrganization
 } from "@app/hooks/api";
 import { Workspace } from "@app/hooks/api/types";
@@ -145,7 +146,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 +179,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 {
@@ -769,45 +764,35 @@ export const AppLayout = ({ children }: LayoutProps) => {
                 <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>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <div className="mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
+                      <FontAwesomeIcon icon={faRocketchat} className="mr-3" />
+                      Make a wish
+                    </div>
+                  </PopoverTrigger>
+                  <PopoverContent
+                    hideCloseBtn
+                    className="ml-2 w-auto border border-mineshaft-600 bg-mineshaft-800 p-3 drop-shadow-2xl"
+                    sticky="always"
+                  >
+                    <FormControl className="mb-0">
+                      <TextArea
+                        className="border border-mineshaft-600 text-sm"
+                        placeholder="Wish for anything! Help us improve the platform"
+                        reSize="none"
+                        rows={8}
+                        cols={30}
+                      />
+                    </FormControl>
+                    <div className="mt-2 flex justify-between">
+                      <Button className="ml-2 w-min">Send</Button>
+                      <Button className="mr-2 w-min" colorSchema="secondary">
+                        Cancel
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
                 {router.asPath.includes("org") && (
                   <div
                     onKeyDown={() => null}

From da0d8fdbfcccccc0a39ba1f46ec787d193e51a3f Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 5 Jul 2024 15:19:43 +0800
Subject: [PATCH 2/3] feat: finished up wish integration

---
 .env.example                                  |   3 +
 backend/package-lock.json                     |  29 +++++
 backend/package.json                          |   1 +
 backend/src/@types/fastify.d.ts               |   2 +
 backend/src/lib/config/env.ts                 |   4 +-
 backend/src/server/config/rateLimiter.ts      |   6 +
 backend/src/server/routes/index.ts            |   8 +-
 backend/src/server/routes/v1/index.ts         |   2 +
 .../routes/v1/user-engagement-router.ts       |  27 +++++
 .../user-engagement-service.ts                |  89 ++++++++++++++
 .../src/hooks/api/userEngagement/index.ts     |   1 +
 .../hooks/api/userEngagement/mutations.tsx    |  14 +++
 .../src/hooks/api/userEngagement/types.ts     |   3 +
 frontend/src/layouts/AppLayout/AppLayout.tsx  |  38 +-----
 .../components/WishForm/WishForm.tsx          | 112 ++++++++++++++++++
 15 files changed, 303 insertions(+), 36 deletions(-)
 create mode 100644 backend/src/server/routes/v1/user-engagement-router.ts
 create mode 100644 backend/src/services/user-engagement/user-engagement-service.ts
 create mode 100644 frontend/src/hooks/api/userEngagement/index.ts
 create mode 100644 frontend/src/hooks/api/userEngagement/mutations.tsx
 create mode 100644 frontend/src/hooks/api/userEngagement/types.ts
 create mode 100644 frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx

diff --git a/.env.example b/.env.example
index 67110d69af..a6f134ace8 100644
--- a/.env.example
+++ b/.env.example
@@ -67,3 +67,6 @@ CLIENT_SECRET_GITLAB_LOGIN=
 CAPTCHA_SECRET=
 
 NEXT_PUBLIC_CAPTCHA_SITE_KEY=
+
+PLAIN_API_KEY=
+PLAIN_WISH_LABEL_IDS=
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 20a5f7c21c..22484e79a0 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -30,6 +30,7 @@
         "@peculiar/x509": "^1.10.0",
         "@serdnam/pino-cloudwatch-transport": "^1.0.4",
         "@sindresorhus/slugify": "^2.2.1",
+        "@team-plain/typescript-sdk": "^4.6.1",
         "@ucast/mongo2js": "^1.3.4",
         "ajv": "^8.12.0",
         "argon2": "^0.31.2",
@@ -3913,6 +3914,14 @@
         "yaml": "^2.2.2"
       }
     },
+    "node_modules/@graphql-typed-document-node/core": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.2.0.tgz",
+      "integrity": "sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==",
+      "peerDependencies": {
+        "graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/@hapi/bourne": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/@hapi/bourne/-/bourne-2.1.0.tgz",
@@ -6198,6 +6207,18 @@
       "optional": true,
       "peer": true
     },
+    "node_modules/@team-plain/typescript-sdk": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@team-plain/typescript-sdk/-/typescript-sdk-4.6.1.tgz",
+      "integrity": "sha512-Uy9QJXu9U7bJb6WXL9sArGk7FXPpzdqBd6q8tAF1vexTm8fbTJRqcikTKxGtZmNADt+C2SapH3cApM4oHpO4lQ==",
+      "dependencies": {
+        "@graphql-typed-document-node/core": "^3.2.0",
+        "ajv": "^8.12.0",
+        "ajv-formats": "^2.1.1",
+        "graphql": "^16.6.0",
+        "zod": "3.22.4"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
@@ -10314,6 +10335,14 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/graphql": {
+      "version": "16.9.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.9.0.tgz",
+      "integrity": "sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==",
+      "engines": {
+        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+      }
+    },
     "node_modules/gtoken": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-7.1.0.tgz",
diff --git a/backend/package.json b/backend/package.json
index b278be571c..f2c554a19c 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -91,6 +91,7 @@
     "@peculiar/x509": "^1.10.0",
     "@serdnam/pino-cloudwatch-transport": "^1.0.4",
     "@sindresorhus/slugify": "^2.2.1",
+    "@team-plain/typescript-sdk": "^4.6.1",
     "@ucast/mongo2js": "^1.3.4",
     "ajv": "^8.12.0",
     "argon2": "^0.31.2",
diff --git a/backend/src/@types/fastify.d.ts b/backend/src/@types/fastify.d.ts
index c7e58fb099..166c5a3f99 100644
--- a/backend/src/@types/fastify.d.ts
+++ b/backend/src/@types/fastify.d.ts
@@ -65,6 +65,7 @@ import { TSuperAdminServiceFactory } from "@app/services/super-admin/super-admin
 import { TTelemetryServiceFactory } from "@app/services/telemetry/telemetry-service";
 import { TUserDALFactory } from "@app/services/user/user-dal";
 import { TUserServiceFactory } from "@app/services/user/user-service";
+import { TUserEngagementServiceFactory } from "@app/services/user-engagement/user-engagement-service";
 import { TWebhookServiceFactory } from "@app/services/webhook/webhook-service";
 
 declare module "fastify" {
@@ -157,6 +158,7 @@ declare module "fastify" {
       identityProjectAdditionalPrivilege: TIdentityProjectAdditionalPrivilegeServiceFactory;
       secretSharing: TSecretSharingServiceFactory;
       rateLimit: TRateLimitServiceFactory;
+      userEngagement: TUserEngagementServiceFactory;
     };
     // this is exclusive use for middlewares in which we need to inject data
     // everywhere else access using service layer
diff --git a/backend/src/lib/config/env.ts b/backend/src/lib/config/env.ts
index 1fe17dc4b7..e57d0ce50e 100644
--- a/backend/src/lib/config/env.ts
+++ b/backend/src/lib/config/env.ts
@@ -135,7 +135,9 @@ const envSchema = z
       .optional(),
     INFISICAL_CLOUD: zodStrBool.default("false"),
     MAINTENANCE_MODE: zodStrBool.default("false"),
-    CAPTCHA_SECRET: zpStr(z.string().optional())
+    CAPTCHA_SECRET: zpStr(z.string().optional()),
+    PLAIN_API_KEY: zpStr(z.string().optional()),
+    PLAIN_WISH_LABEL_IDS: zpStr(z.string().optional())
   })
   .transform((data) => ({
     ...data,
diff --git a/backend/src/server/config/rateLimiter.ts b/backend/src/server/config/rateLimiter.ts
index ad54a151a9..79b709ee60 100644
--- a/backend/src/server/config/rateLimiter.ts
+++ b/backend/src/server/config/rateLimiter.ts
@@ -82,3 +82,9 @@ export const publicSecretShareCreationLimit: RateLimitOptions = {
   max: 5,
   keyGenerator: (req) => req.realIp
 };
+
+export const userEngagementLimit: RateLimitOptions = {
+  timeWindow: 60 * 1000,
+  max: 5,
+  keyGenerator: (req) => req.realIp
+};
diff --git a/backend/src/server/routes/index.ts b/backend/src/server/routes/index.ts
index 54c5e51d66..e872c7363f 100644
--- a/backend/src/server/routes/index.ts
+++ b/backend/src/server/routes/index.ts
@@ -164,6 +164,7 @@ import { telemetryServiceFactory } from "@app/services/telemetry/telemetry-servi
 import { userDALFactory } from "@app/services/user/user-dal";
 import { userServiceFactory } from "@app/services/user/user-service";
 import { userAliasDALFactory } from "@app/services/user-alias/user-alias-dal";
+import { userEngagementServiceFactory } from "@app/services/user-engagement/user-engagement-service";
 import { webhookDALFactory } from "@app/services/webhook/webhook-dal";
 import { webhookServiceFactory } from "@app/services/webhook/webhook-service";
 
@@ -924,6 +925,10 @@ export const registerRoutes = async (
     oidcConfigDAL
   });
 
+  const userEngagementService = userEngagementServiceFactory({
+    userDAL
+  });
+
   await superAdminService.initServerCfg();
   //
   // setup the communication with license key server
@@ -995,7 +1000,8 @@ export const registerRoutes = async (
     telemetry: telemetryService,
     projectUserAdditionalPrivilege: projectUserAdditionalPrivilegeService,
     identityProjectAdditionalPrivilege: identityProjectAdditionalPrivilegeService,
-    secretSharing: secretSharingService
+    secretSharing: secretSharingService,
+    userEngagement: userEngagementService
   });
 
   const cronJobs: CronJob[] = [];
diff --git a/backend/src/server/routes/v1/index.ts b/backend/src/server/routes/v1/index.ts
index c2969b382e..d5c5acbcf8 100644
--- a/backend/src/server/routes/v1/index.ts
+++ b/backend/src/server/routes/v1/index.ts
@@ -25,6 +25,7 @@ import { registerSecretSharingRouter } from "./secret-sharing-router";
 import { registerSecretTagRouter } from "./secret-tag-router";
 import { registerSsoRouter } from "./sso-router";
 import { registerUserActionRouter } from "./user-action-router";
+import { registerUserEngagementRouter } from "./user-engagement-router";
 import { registerUserRouter } from "./user-router";
 import { registerWebhookRouter } from "./webhook-router";
 
@@ -77,4 +78,5 @@ export const registerV1Routes = async (server: FastifyZodProvider) => {
   await server.register(registerWebhookRouter, { prefix: "/webhooks" });
   await server.register(registerIdentityRouter, { prefix: "/identities" });
   await server.register(registerSecretSharingRouter, { prefix: "/secret-sharing" });
+  await server.register(registerUserEngagementRouter, { prefix: "/user-engagement" });
 };
diff --git a/backend/src/server/routes/v1/user-engagement-router.ts b/backend/src/server/routes/v1/user-engagement-router.ts
new file mode 100644
index 0000000000..e3ce6532e1
--- /dev/null
+++ b/backend/src/server/routes/v1/user-engagement-router.ts
@@ -0,0 +1,27 @@
+import { z } from "zod";
+
+import { userEngagementLimit } from "@app/server/config/rateLimiter";
+import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
+import { AuthMode } from "@app/services/auth/auth-type";
+
+export const registerUserEngagementRouter = async (server: FastifyZodProvider) => {
+  server.route({
+    method: "POST",
+    url: "/me/wish",
+    config: {
+      rateLimit: userEngagementLimit
+    },
+    schema: {
+      body: z.object({
+        text: z.string().min(1)
+      }),
+      response: {
+        200: z.object({})
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      return server.services.userEngagement.createUserWish(req.permission.id, req.body.text);
+    }
+  });
+};
diff --git a/backend/src/services/user-engagement/user-engagement-service.ts b/backend/src/services/user-engagement/user-engagement-service.ts
new file mode 100644
index 0000000000..5d7b549299
--- /dev/null
+++ b/backend/src/services/user-engagement/user-engagement-service.ts
@@ -0,0 +1,89 @@
+import { PlainClient } from "@team-plain/typescript-sdk";
+
+import { getConfig } from "@app/lib/config/env";
+import { InternalServerError } from "@app/lib/errors";
+
+import { TUserDALFactory } from "../user/user-dal";
+
+type TUserEngagementServiceFactoryDep = {
+  userDAL: Pick<TUserDALFactory, "findById">;
+};
+
+export type TUserEngagementServiceFactory = ReturnType<typeof userEngagementServiceFactory>;
+
+export const userEngagementServiceFactory = ({ userDAL }: TUserEngagementServiceFactoryDep) => {
+  const createUserWish = async (userId: string, text: string) => {
+    const user = await userDAL.findById(userId);
+    const appCfg = getConfig();
+
+    if (!appCfg.PLAIN_API_KEY) {
+      throw new InternalServerError({
+        message: "Plain is not configured."
+      });
+    }
+
+    const client = new PlainClient({
+      apiKey: appCfg.PLAIN_API_KEY
+    });
+
+    const customerUpsertRes = await client.upsertCustomer({
+      identifier: {
+        emailAddress: user.email
+      },
+      onCreate: {
+        fullName: `${user.firstName} ${user.lastName}`,
+        shortName: user.firstName,
+        email: {
+          email: user.email as string,
+          isVerified: user.isEmailVerified as boolean
+        },
+
+        externalId: user.id
+      },
+
+      onUpdate: {
+        fullName: {
+          value: `${user.firstName} ${user.lastName}`
+        },
+        shortName: {
+          value: user.firstName
+        },
+        email: {
+          email: user.email as string,
+          isVerified: user.isEmailVerified as boolean
+        },
+        externalId: {
+          value: user.id
+        }
+      }
+    });
+
+    if (customerUpsertRes.error) {
+      throw new InternalServerError({ message: customerUpsertRes.error.message });
+    }
+
+    const createThreadRes = await client.createThread({
+      title: "Wish",
+      customerIdentifier: {
+        externalId: customerUpsertRes.data.customer.externalId
+      },
+      components: [
+        {
+          componentText: {
+            text
+          }
+        }
+      ],
+      labelTypeIds: appCfg.PLAIN_WISH_LABEL_IDS?.split(",")
+    });
+
+    if (createThreadRes.error) {
+      throw new InternalServerError({
+        message: createThreadRes.error.message
+      });
+    }
+  };
+  return {
+    createUserWish
+  };
+};
diff --git a/frontend/src/hooks/api/userEngagement/index.ts b/frontend/src/hooks/api/userEngagement/index.ts
new file mode 100644
index 0000000000..5a4c29fa88
--- /dev/null
+++ b/frontend/src/hooks/api/userEngagement/index.ts
@@ -0,0 +1 @@
+export { useCreateUserWish } from "./mutations";
diff --git a/frontend/src/hooks/api/userEngagement/mutations.tsx b/frontend/src/hooks/api/userEngagement/mutations.tsx
new file mode 100644
index 0000000000..d876e65c8a
--- /dev/null
+++ b/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;
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/userEngagement/types.ts b/frontend/src/hooks/api/userEngagement/types.ts
new file mode 100644
index 0000000000..ad94d03d2e
--- /dev/null
+++ b/frontend/src/hooks/api/userEngagement/types.ts
@@ -0,0 +1,3 @@
+export type TCreateUserWishDto = {
+  text: string;
+};
diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index 8bd51417d1..a643e6d099 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -10,7 +10,7 @@ import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { faGithub, faRocketchat, faSlack } from "@fortawesome/free-brands-svg-icons";
+import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import {
   faAngleDown,
@@ -47,12 +47,8 @@ import {
   MenuItem,
   Modal,
   ModalContent,
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
   Select,
   SelectItem,
-  TextArea,
   UpgradePlanModal
 } from "@app/components/v2";
 import { UpgradeOverlay } from "@app/components/v2/UpgradeOverlay";
@@ -81,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;
 }
@@ -764,35 +762,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                 <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`}/> */}
-                <Popover>
-                  <PopoverTrigger asChild>
-                    <div className="mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
-                      <FontAwesomeIcon icon={faRocketchat} className="mr-3" />
-                      Make a wish
-                    </div>
-                  </PopoverTrigger>
-                  <PopoverContent
-                    hideCloseBtn
-                    className="ml-2 w-auto border border-mineshaft-600 bg-mineshaft-800 p-3 drop-shadow-2xl"
-                    sticky="always"
-                  >
-                    <FormControl className="mb-0">
-                      <TextArea
-                        className="border border-mineshaft-600 text-sm"
-                        placeholder="Wish for anything! Help us improve the platform"
-                        reSize="none"
-                        rows={8}
-                        cols={30}
-                      />
-                    </FormControl>
-                    <div className="mt-2 flex justify-between">
-                      <Button className="ml-2 w-min">Send</Button>
-                      <Button className="mr-2 w-min" colorSchema="secondary">
-                        Cancel
-                      </Button>
-                    </div>
-                  </PopoverContent>
-                </Popover>
+                <WishForm />
                 {router.asPath.includes("org") && (
                   <div
                     onKeyDown={() => null}
diff --git a/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx b/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx
new file mode 100644
index 0000000000..e09a63a5b8
--- /dev/null
+++ b/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx
@@ -0,0 +1,112 @@
+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
+        className="ml-2 mb-2 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>
+              <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>
+  );
+};

From 1a6a5280a01acee034f88c53636be0a9d9de730e Mon Sep 17 00:00:00 2001
From: Sheen Capadngan <sheensantoscapadngan@gmail.com>
Date: Fri, 5 Jul 2024 19:42:38 +0800
Subject: [PATCH 3/3] misc: display wish feature only on cloud

---
 frontend/src/layouts/AppLayout/AppLayout.tsx               | 7 ++-----
 .../src/layouts/AppLayout/components/WishForm/WishForm.tsx | 6 ++++--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/layouts/AppLayout/AppLayout.tsx b/frontend/src/layouts/AppLayout/AppLayout.tsx
index a643e6d099..dc0ef370e0 100644
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -758,11 +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`}/> */}
-                <WishForm />
+                {(window.location.origin.includes("https://app.infisical.com") ||
+                  window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
                 {router.asPath.includes("org") && (
                   <div
                     onKeyDown={() => null}
diff --git a/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx b/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx
index e09a63a5b8..641230bf2a 100644
--- a/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx
+++ b/frontend/src/layouts/AppLayout/components/WishForm/WishForm.tsx
@@ -71,7 +71,9 @@ export const WishForm = () => {
       </PopoverTrigger>
       <PopoverContent
         hideCloseBtn
-        className="ml-2 mb-2 w-auto border border-mineshaft-600 bg-mineshaft-900 p-4 drop-shadow-2xl"
+        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)}>
@@ -91,7 +93,7 @@ export const WishForm = () => {
             />
           </FormControl>
           <div className="mt-2 flex justify-between border-t border-mineshaft-500 pt-4">
-            <PopoverPrimitive.Close>
+            <PopoverPrimitive.Close asChild>
               <Button className="mr-2 w-min" colorSchema="secondary">
                 Cancel
               </Button>