Connected sendInstallInstructions API

packages/web/components/templates/OnboardingLayout.tsx

@@ -5,6 +5,7 @@ import { OmnivoreNameLogo } from '../elements/images/OmnivoreNameLogo'
 import { StyledText } from '../elements/StyledText'
 import { Button } from '../elements/Button'
 import { useRouter } from 'next/router'
+import { Toaster } from 'react-hot-toast'
 
 const TOTAL_ONBOARDING_PAGES = 6
 
@@ -65,6 +66,7 @@ export const OnboardingLayout = ({
         path={`/onboarding/0${pageNumber}`}
         title={`Onboarding - ${pageNumber}`}
       />
+      <Toaster />
       <Box
         css={{
           display: 'grid',

packages/web/components/templates/onboarding/OnboardingInstallInstructions.tsx

@@ -1,16 +1,27 @@
 import React from 'react'
-import Link from 'next/link'
 import { OnboardingLayout } from '../OnboardingLayout'
 import MobileInstallHelp from '../../elements/MobileInstallHelp'
 import ExtensionsInstallHelp from '../../elements/ExtensionsInstallHelp'
-import { StyledAnchor } from '../../elements/StyledText'
 import { Box } from '../../elements/LayoutPrimitives'
+import { sendInstallInstructions } from '../../../lib/networking/queries/sendInstallInstructions'
+import { Button } from '../../elements/Button'
+import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
 
 type OnboardingInstallInstructionsProps = {
   pageNumber: number
 }
 
 export const OnboardingInstallInstructions = (props: OnboardingInstallInstructionsProps) => {
+  const onEmailInstructionsClick = async () => {
+    const res = await sendInstallInstructions()
+    if (res !== undefined) {
+      showSuccessToast('Instructions Email Sent', { position: 'bottom-right' })
+    }
+    else {
+      showErrorToast('Failed to send', { position: 'bottom-right' })
+    }
+  }
+
   return (
     <OnboardingLayout
       pageNumber={props.pageNumber}
@@ -68,19 +79,19 @@ export const OnboardingInstallInstructions = (props: OnboardingInstallInstructio
             },
           }}
         >
-          <Link passHref href="#">
-            <StyledAnchor
-              css={{
-                fontWeight: '400',
-                fontSize: '14px',
-                lineHeight: '17.5px',
-                color: 'rgba(10, 8, 6, 0.8)',
-                textDecoration: 'underline',
-              }}
-            >
-              Email me instructions
-            </StyledAnchor>
-          </Link>
+          <Box
+            onClick={onEmailInstructionsClick}
+            css={{
+              fontWeight: '400',
+              fontSize: '14px',
+              lineHeight: '17.5px',
+              color: 'rgba(10, 8, 6, 0.8)',
+              textDecoration: 'underline',
+              cursor: 'pointer',
+            }}
+          >
+            Email me instructions
+          </Box>
         </Box>
       </Box>
     </OnboardingLayout>

packages/web/lib/networking/queries/sendInstallInstructions.tsx

@@ -0,0 +1,33 @@
+import { gql } from 'graphql-request'
+import { gqlFetcher } from '../networkHelpers'
+
+type QueryResult = {
+  sent: boolean
+  errorCodes?: unknown[]
+}
+
+export async function sendInstallInstructions(): Promise<any | undefined> {
+  const query = gql`
+    query SendInstallInstructions {
+      sendInstallInstructions {
+        ... on SendInstallInstructionsSuccess {
+          sent
+        }
+      }
+
+      sendInstallInstructions {
+        ... on SendInstallInstructionsError {
+          errorCodes
+        }
+      }
+    }
+  `
+
+  try {
+    const data = (await gqlFetcher(query)) as QueryResult
+    return data.errorCodes ? undefined : data.sent
+  } catch (error) {
+    console.log('sendInstallInstructions error', error)
+    return undefined
+  }
+}