Skip to content

Commit 58861a0

Browse files
samejrsamejr
authored
Added the new Help & Feedback popover to the account side menu (#1482)
1 parent 1b3a2f2 commit 58861a0

File tree

3 files changed

+189
-217
lines changed

3 files changed

+189
-217
lines changed

‎apps/webapp/app/components/navigation/AccountSideMenu.tsx

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { ShieldCheckIcon } from "@heroicons/react/20/solid";
22
import { ArrowLeftIcon } from "@heroicons/react/24/solid";
3-
import { DiscordIcon } from "@trigger.dev/companyicons";
43
import { User } from "@trigger.dev/database";
54
import { useFeatures } from "~/hooks/useFeatures";
65
import { cn } from "~/utils/cn";
76
import { accountPath, personalAccessTokensPath, rootPath } from "~/utils/pathBuilder";
8-
import { Feedback } from "../Feedback";
9-
import { Button, LinkButton } from "../primitives/Buttons";
7+
import { LinkButton } from "../primitives/Buttons";
108
import { SideMenuHeader } from "./SideMenuHeader";
119
import { SideMenuItem } from "./SideMenuItem";
10+
import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
1211

1312
export function AccountSideMenu({ user }: { user: User }) {
1413
const { v3Enabled } = useFeatures();
@@ -20,7 +19,7 @@ export function AccountSideMenu({ user }: { user: User }) {
2019
)}
2120
>
2221
<div className="flex h-full flex-col">
23-
<div className={cn("flex items-center justify-between border-b p-px transition")}>
22+
<div className={cn("flex h-10 items-center justify-between border-b p-1 transition")}>
2423
<LinkButton
2524
variant="minimal/medium"
2625
LeadingIcon={ArrowLeftIcon}
@@ -57,42 +56,7 @@ export function AccountSideMenu({ user }: { user: User }) {
5756
)}
5857
</div>
5958
<div className="flex flex-col gap-1 border-t border-grid-bright p-1">
60-
<SideMenuItem
61-
name="Join our Discord"
62-
icon={DiscordIcon}
63-
to="https://trigger.dev/discord"
64-
data-action="join our discord"
65-
target="_blank"
66-
/>
67-
68-
<SideMenuItem
69-
name="Documentation"
70-
icon="docs"
71-
to="https://trigger.dev/docs"
72-
data-action="documentation"
73-
target="_blank"
74-
/>
75-
<SideMenuItem
76-
name="Changelog"
77-
icon="star"
78-
to="https://trigger.dev/changelog"
79-
data-action="changelog"
80-
target="_blank"
81-
/>
82-
83-
<Feedback
84-
button={
85-
<Button
86-
variant="small-menu-item"
87-
LeadingIcon="log"
88-
data-action="help & feedback"
89-
fullWidth
90-
textAlignLeft
91-
>
92-
Help & Feedback
93-
</Button>
94-
}
95-
/>
59+
<HelpAndFeedback />
9660
</div>
9761
</div>
9862
</div>

‎apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

Lines changed: 182 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,182 @@
1+
import {
2+
ArrowUpRightIcon,
3+
CalendarDaysIcon,
4+
ChatBubbleLeftEllipsisIcon,
5+
EnvelopeIcon,
6+
LightBulbIcon,
7+
SignalIcon,
8+
} from "@heroicons/react/20/solid";
9+
import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
10+
import { Fragment, useState } from "react";
11+
import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
12+
import { Feedback } from "../Feedback";
13+
import { StepContentContainer } from "../StepContentContainer";
14+
import { Button } from "../primitives/Buttons";
15+
import { ClipboardField } from "../primitives/ClipboardField";
16+
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "../primitives/Dialog";
17+
import { Icon } from "../primitives/Icon";
18+
import { Paragraph } from "../primitives/Paragraph";
19+
import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/Popover";
20+
import { StepNumber } from "../primitives/StepNumber";
21+
import { MenuCount, SideMenuItem } from "./SideMenuItem";
22+
23+
export function HelpAndFeedback() {
24+
const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
25+
const currentPlan = useCurrentPlan();
26+
27+
return (
28+
<Popover onOpenChange={(open) => setHelpMenuOpen(open)}>
29+
<PopoverSideMenuTrigger isOpen={isHelpMenuOpen} shortcut={{ key: "h" }}>
30+
<div className="flex items-center gap-1.5">
31+
<ChatBubbleLeftEllipsisIcon className="size-4 text-success" />
32+
Help & Feedback
33+
</div>
34+
</PopoverSideMenuTrigger>
35+
<PopoverContent
36+
className="min-w-[14rem] divide-y divide-grid-bright overflow-y-auto p-0 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600"
37+
align="start"
38+
>
39+
<Fragment>
40+
<div className="flex flex-col gap-1 p-1">
41+
<SideMenuItem
42+
name="Documentation"
43+
icon="docs"
44+
trailingIcon={ArrowUpRightIcon}
45+
trailingIconClassName="text-text-dimmed"
46+
inactiveIconColor="text-green-500"
47+
activeIconColor="text-green-500"
48+
to="https://trigger.dev/docs"
49+
data-action="documentation"
50+
target="_blank"
51+
/>
52+
</div>
53+
<div className="flex flex-col gap-1 p-1">
54+
<SideMenuItem
55+
name="Status"
56+
icon={SignalIcon}
57+
trailingIcon={ArrowUpRightIcon}
58+
trailingIconClassName="text-text-dimmed"
59+
inactiveIconColor="text-green-500"
60+
activeIconColor="text-green-500"
61+
to="https://status.trigger.dev/"
62+
data-action="status"
63+
target="_blank"
64+
/>
65+
<SideMenuItem
66+
name="Suggest a feature"
67+
icon={LightBulbIcon}
68+
trailingIcon={ArrowUpRightIcon}
69+
trailingIconClassName="text-text-dimmed"
70+
inactiveIconColor="text-sun-500"
71+
activeIconColor="text-sun-500"
72+
to="https://feedback.trigger.dev/"
73+
data-action="suggest-a-feature"
74+
target="_blank"
75+
/>
76+
<SideMenuItem
77+
name="Changelog"
78+
icon="star"
79+
trailingIcon={ArrowUpRightIcon}
80+
trailingIconClassName="text-text-dimmed"
81+
inactiveIconColor="text-sun-500"
82+
activeIconColor="text-sun-500"
83+
to="https://trigger.dev/changelog"
84+
data-action="changelog"
85+
target="_blank"
86+
/>
87+
</div>
88+
<div className="flex flex-col gap-1 p-1">
89+
<Paragraph className="pb-1 pl-1.5 pt-1.5 text-xs">Need help?</Paragraph>
90+
{currentPlan?.v3Subscription?.plan?.limits.support === "slack" && (
91+
<div>
92+
<Dialog>
93+
<DialogTrigger asChild>
94+
<Button
95+
variant="small-menu-item"
96+
LeadingIcon={SlackIcon}
97+
data-action="join-our-slack"
98+
fullWidth
99+
textAlignLeft
100+
>
101+
<div className="flex w-full items-center justify-between">
102+
<span className="text-text-bright">Join our Slack…</span>
103+
<MenuCount count="PRO" />
104+
</div>
105+
</Button>
106+
</DialogTrigger>
107+
<DialogContent>
108+
<DialogHeader>Join our Slack</DialogHeader>
109+
<div className="mt-2 flex flex-col gap-4">
110+
<div className="flex items-center gap-4">
111+
<Icon icon={SlackIcon} className="h-10 w-10 min-w-[2.5rem]" />
112+
<Paragraph variant="base/bright">
113+
As a subscriber, you have access to a dedicated Slack channel for 1-to-1
114+
support with the Trigger.dev team.
115+
</Paragraph>
116+
</div>
117+
<hr className="border-charcoal-800" />
118+
<div>
119+
<StepNumber stepNumber="1" title="Email us" />
120+
<StepContentContainer>
121+
<Paragraph>
122+
Send us an email to this address from your Trigger.dev account email
123+
address:
124+
<ClipboardField
125+
variant="secondary/medium"
126+
value="[email protected]"
127+
className="my-2"
128+
/>
129+
</Paragraph>
130+
</StepContentContainer>
131+
<StepNumber stepNumber="2" title="Look out for an invite from Slack" />
132+
<StepContentContainer>
133+
<Paragraph>
134+
As soon as we can, we'll setup a Slack Connect channel and say hello!
135+
</Paragraph>
136+
</StepContentContainer>
137+
</div>
138+
</div>
139+
</DialogContent>
140+
</Dialog>
141+
</div>
142+
)}
143+
<SideMenuItem
144+
name="Ask in our Discord"
145+
icon={DiscordIcon}
146+
trailingIcon={ArrowUpRightIcon}
147+
trailingIconClassName="text-text-dimmed"
148+
to="https://trigger.dev/discord"
149+
data-action="join our discord"
150+
target="_blank"
151+
/>
152+
<SideMenuItem
153+
name="Book a 15 min call"
154+
icon={CalendarDaysIcon}
155+
trailingIcon={ArrowUpRightIcon}
156+
trailingIconClassName="text-text-dimmed"
157+
inactiveIconColor="text-rose-500"
158+
activeIconColor="text-rose-500"
159+
to="https://cal.com/team/triggerdotdev/founders-call"
160+
data-action="book-a-call"
161+
target="_blank"
162+
/>
163+
<Feedback
164+
button={
165+
<Button
166+
variant="small-menu-item"
167+
LeadingIcon={EnvelopeIcon}
168+
leadingIconClassName="text-blue-500"
169+
data-action="contact-us"
170+
fullWidth
171+
textAlignLeft
172+
>
173+
Contact us…
174+
</Button>
175+
}
176+
/>
177+
</div>
178+
</Fragment>
179+
</PopoverContent>
180+
</Popover>
181+
);
182+
}

0 commit comments

Comments
 (0)