Merge pull request #1845 from holium/RE-233

hosting.holium.com: Contact Support sidebar link

hosting-holium-com/src/pages/account/custom-domain.tsx

@@ -8,6 +8,8 @@ import {
   useUser,
 } from '@holium/shared';
 
+import { getSupportEmail } from 'util/constants';
+
 import { Page } from '../../components/Page';
 import { thirdEarthApi } from '../../util/thirdEarthApi';
 import { accountPageUrl, useNavigation } from '../../util/useNavigation';
@@ -61,7 +63,11 @@ const CustomDomainPresenter = () => {
   };
 
   const onClickSidebarSection = (section: string) => {
-    goToPage(accountPageUrl[section]);
+    if (section === 'Contact Support') {
+      window.open(getSupportEmail(ship?.patp), '_blank');
+    } else {
+      goToPage(accountPageUrl[section]);
+    }
   };
 
   const onClickUploadId = () => {

hosting-holium-com/src/pages/account/download-realm.tsx

@@ -6,7 +6,7 @@ import {
 } from '@holium/shared';
 
 import { Page } from '../../components/Page';
-import { downloadLinks } from '../../util/constants';
+import { downloadLinks, getSupportEmail } from '../../util/constants';
 import { thirdEarthApi } from '../../util/thirdEarthApi';
 import { accountPageUrl, useNavigation } from '../../util/useNavigation';
 
@@ -15,12 +15,16 @@ const DownloadRealmPresenter = () => {
   const { ships, selectedShipId, setSelectedShipId } = useUser();
 
   const onClickSidebarSection = (section: string) => {
-    if (section === 'Get Hosting') {
+    if (section === 'Contact Support') {
+      const ship = ships.find((ship) => ship.id === selectedShipId);
+      window.open(getSupportEmail(ship?.patp ?? ''), '_blank');
+    } else if (section === 'Get Hosting') {
       goToPage(accountPageUrl[section], {
         back_url: '/account/download-realm',
       });
+    } else {
+      goToPage(accountPageUrl[section]);
     }
-    goToPage(accountPageUrl[section]);
   };
 
   const onClickUploadId = () => {

hosting-holium-com/src/pages/account/get-realm.tsx

@@ -7,7 +7,7 @@ import {
 import { thirdEarthApi } from 'util/thirdEarthApi';
 
 import { Page } from '../../components/Page';
-import { constants } from '../../util/constants';
+import { constants, getSupportEmail } from '../../util/constants';
 import { accountPageUrl, useNavigation } from '../../util/useNavigation';
 
 export const joinWaitlist = async (email: string) => {
@@ -48,7 +48,9 @@ const GetRealmPresenter = () => {
   };
 
   const onClickSidebarSection = (section: string) => {
-    if (section === 'Get Hosting') {
+    if (section === 'Contact Support') {
+      window.open(getSupportEmail(), '_blank');
+    } else if (section === 'Get Hosting') {
       onClickPurchaseId();
     } else {
       goToPage(accountPageUrl[section]);

hosting-holium-com/src/pages/account/index.tsx

@@ -15,6 +15,8 @@ import {
   VerifyEmailModal,
 } from '@holium/shared';
 
+import { getSupportEmail } from 'util/constants';
+
 import { Page } from '../../components/Page';
 import { thirdEarthApi } from '../../util/thirdEarthApi';
 import { accountPageUrl, useNavigation } from '../../util/useNavigation';
@@ -49,7 +51,11 @@ const HostingPresenter = () => {
   }, [selectedShip]);
 
   const onClickSidebarSection = (section: string) => {
-    goToPage(accountPageUrl[section]);
+    if (section === 'Contact Support') {
+      window.open(getSupportEmail(selectedShip.patp), '_blank');
+    } else {
+      goToPage(accountPageUrl[section]);
+    }
   };
 
   const onSubmitNewEmail = async (email: string) => {

hosting-holium-com/src/pages/account/storage.tsx

@@ -7,6 +7,8 @@ import {
   useUser,
 } from '@holium/shared';
 
+import { getSupportEmail } from 'util/constants';
+
 import { Page } from '../../components/Page';
 import { thirdEarthApi } from '../../util/thirdEarthApi';
 import { accountPageUrl, useNavigation } from '../../util/useNavigation';
@@ -24,7 +26,12 @@ const S3StoragePresenter = () => {
   const [minioUsage, setMinioUsage] = useState<number>(0);
 
   const onClickSidebarSection = (section: string) => {
-    goToPage(accountPageUrl[section]);
+    if (section === 'Contact Support') {
+      const ship = ships.find((ship) => ship.id === selectedShipId);
+      window.open(getSupportEmail(ship?.patp), '_blank');
+    } else {
+      goToPage(accountPageUrl[section]);
+    }
   };
 
   const onClickUploadId = () => {

hosting-holium-com/src/util/constants.ts

@@ -17,3 +17,8 @@ export const downloadLinks = {
   windows: 'https://download.holium.com/latest/windows',
   linux: 'https://download.holium.com/latest/linux',
 };
+
+export const getSupportEmail = (patp?: string) =>
+  `mailto:support@holium.com?subject=Hosting Support${
+    patp ? ` for ${patp}` : ''
+  }&body=A picture is worth a thousand words. Please attach any screenshots that may help us understand your issue.`;

shared/src/onboarding/components/AccountDialog.tsx

@@ -30,6 +30,7 @@ export enum SidebarSection {
   DownloadRealm = 'Download Realm',
   GetHosting = 'Get Hosting',
   GetRealm = 'Get Realm',
+  ContactSupport = 'Contact Support',
 }
 
 type Props = {
@@ -77,22 +78,32 @@ export const AccountDialog = ({
           SidebarSection.Hosting,
           SidebarSection.CustomDomain,
           SidebarSection.DownloadRealm,
+          SidebarSection.ContactSupport,
         ];
       } else {
-        sidebarItems = [SidebarSection.Hosting];
+        sidebarItems = [SidebarSection.Hosting, SidebarSection.ContactSupport];
       }
     } else {
       sidebarItems = [
         SidebarSection.Hosting,
         SidebarSection.Storage,
         SidebarSection.CustomDomain,
         SidebarSection.DownloadRealm,
+        SidebarSection.ContactSupport,
       ];
     }
   } else if (hasCSEK.isOn) {
-    sidebarItems = [SidebarSection.DownloadRealm, SidebarSection.GetHosting];
+    sidebarItems = [
+      SidebarSection.DownloadRealm,
+      SidebarSection.GetHosting,
+      SidebarSection.ContactSupport,
+    ];
   } else {
-    sidebarItems = [SidebarSection.GetRealm, SidebarSection.GetHosting];
+    sidebarItems = [
+      SidebarSection.GetRealm,
+      SidebarSection.GetHosting,
+      SidebarSection.ContactSupport,
+    ];
   }
 
   useEffect(() => {