diff --git a/packages/web/components/templates/OnboardingLayout.tsx b/packages/web/components/templates/OnboardingLayout.tsx
index 7f69aeecd..cdbb205d3 100644
--- a/packages/web/components/templates/OnboardingLayout.tsx
+++ b/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}`}
/>
+
{
+ 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 (
-
-
- Email me instructions
-
-
+
+ Email me instructions
+
diff --git a/packages/web/lib/networking/queries/sendInstallInstructions.tsx b/packages/web/lib/networking/queries/sendInstallInstructions.tsx
new file mode 100644
index 000000000..c85f95f4c
--- /dev/null
+++ b/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 {
+ 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
+ }
+}