diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx index 4e9184789..4feda0610 100644 --- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx +++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx @@ -54,33 +54,55 @@ const getPlan = (subscription: SubscriptionPlan) => { return "Free"; }; +const getFormattedSupportEmailLink = (variables: { org_id: string; domain: string }) => { + const email = "support@infisical.com"; + + const body = `Hello Infisical Support Team, + +Issue Details: +[What you did] +[What you expected to happen] +[What actually happened] +[Any error request IDs] +[Any supporting screenshots or video recording of the issue/request at hand] + +Account Info: +- Organization ID: ${variables.org_id} +- Domain: ${variables.domain} + +Thank you, +[Your Name]`; + + return `mailto:${email}?body=${encodeURIComponent(body)}`; +}; + export const INFISICAL_SUPPORT_OPTIONS = [ [ , "Support Forum", - "https://infisical.com/slack" + () => "https://infisical.com/slack" ], [ , "Read Docs", - "https://infisical.com/docs/documentation/getting-started/introduction" + () => "https://infisical.com/docs/documentation/getting-started/introduction" ], [ , "GitHub Issues", - "https://github.com/Infisical/infisical/issues" + () => "https://github.com/Infisical/infisical/issues" ], [ , "Email Support", - "mailto:support@infisical.com" + getFormattedSupportEmailLink ], [ , "Instance Admins", - "server-admins" + () => "server-admins" ] -]; +] as const; export const Navbar = () => { const { user } = useUser(); @@ -258,7 +280,15 @@ export const Navbar = () => { - {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => { + {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, getUrl]) => { + const url = + text === "Email Support" + ? getUrl({ + org_id: currentOrg.id, + domain: window.location.origin + }) + : getUrl(); + if (url === "server-admins" && isInfisicalCloud()) { return null; } diff --git a/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx b/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx index c2835996a..182e1ebc1 100644 --- a/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx +++ b/frontend/src/layouts/PersonalSettingsLayout/PersonalSettingsLayout.tsx @@ -1,19 +1,11 @@ import { useTranslation } from "react-i18next"; -import { faArrowLeft, faInfo, faMobile, faQuestion } from "@fortawesome/free-solid-svg-icons"; +import { faArrowLeft, faMobile } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Link, Outlet } from "@tanstack/react-router"; import { WishForm } from "@app/components/features/WishForm"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger -} from "@app/components/v2"; -import { envConfig } from "@app/config/env"; import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner"; -import { INFISICAL_SUPPORT_OPTIONS } from "../OrganizationLayout/components/NavBar/Navbar"; export const PersonalSettingsLayout = () => { const { t } = useTranslation(); @@ -36,37 +28,6 @@ export const PersonalSettingsLayout = () => {
{(window.location.origin.includes("https://app.infisical.com") || window.location.origin.includes("https://gamma.infisical.com")) && } - - -
- - Help & Support -
-
- - {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => ( - - -
- {icon} -
{text}
-
-
-
- ))} - {envConfig.PLATFORM_VERSION && ( -
- - Version: {envConfig.PLATFORM_VERSION} -
- )} -
-
)