feat: Contact us over email too

https://harperdb.atlassian.net/browse/STUDIO-573

Author: dawsontoth

src/components/ContactUs.test.tsx

@@ -0,0 +1,38 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { TestProvider } from '@/lib/test/TestProvider';
+import { cleanup, render, screen } from '@testing-library/react';
+import { act } from 'react';
+import { afterEach, describe, expect, it } from 'vitest';
+import { ContactUs } from './ContactUs';
+
+afterEach(() => cleanup);
+
+describe(ContactUs, () => {
+	it('should render a Discord link', async () => {
+		render(<TestProvider>
+			<ContactUs />
+		</TestProvider>);
+
+		await act(() => null);
+
+		const link = screen.getByText('Contact us');
+		expect(link).toBeTruthy();
+		const href = link.getAttribute('href');
+		expect(href).toEqual(expect.stringContaining('discord.com'));
+	});
+
+	it('should render an email link', async () => {
+		render(<TestProvider>
+			<ContactUs overEmail={true} />
+		</TestProvider>);
+
+		await act(() => null);
+
+		const link = screen.getByText('Contact us');
+		expect(link).toBeTruthy();
+		const href = link.getAttribute('href');
+		expect(href).toEqual(expect.stringContaining('mailto:'));
+	});
+});

src/components/ContactUs.tsx

@@ -1,5 +1,9 @@
-export function ContactUs() {
-	return (<a href="https://discord.com/channels/1415002037439041710/1415002038286286994" target="_blank" className="underline">
-		Contact us
-	</a>);
+export function ContactUs({ overEmail }: { readonly overEmail?: boolean }) {
+	return (
+		<a
+			href={overEmail ? 'mailto:[email protected]' : 'https://discord.com/channels/1415002037439041710/1415002038286286994'}
+			target="_blank"
+			className="underline">
+			Contact us
+		</a>);
 }

src/features/clusters/upsert/ClusterBilling.tsx

@@ -61,7 +61,7 @@ export function ClusterBilling({
 					this page.
 				</li>
 				<li>Your account representative can work with you to sort out more precise details, and to help
-					accomplish your objectives with this cluster. <ContactUs />, we are here to help.
+					accomplish your objectives with this cluster. <ContactUs overEmail={true} />, we are here to help.
 				</li>
 			</ul>
 
@@ -97,7 +97,7 @@ export function ClusterBilling({
 			</li>
 			<li>While refunds are not available, we’d be happy to assist you with troubleshooting.</li>
 			<li>We would love to work with you to sort out more precise details, and to help accomplish your objectives
-				with this cluster. <ContactUs />, we are here to help.
+				with this cluster. <ContactUs overEmail={true} />, we are here to help.
 			</li>
 		</ul>
 

src/features/organization/billing/invoices/Invoices.tsx

@@ -38,7 +38,7 @@ export function Invoices() {
 		return (
 			<span>
 				Your invoices will be shown here once one is available! Want to explore your solution with Harper
-				more? <ContactUs />, we would love to talk!
+				more? <ContactUs overEmail={true} />, we would love to talk!
 			</span>
 		);
 	}