From d93f6fd5d52c474aa4e26d69954657e00348d78b Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Wed, 4 Aug 2021 02:46:47 +0800
Subject: [PATCH] add help modal during onboarding

---
 app/core/hooks/use-current-customer.ts    |  6 +-
 app/onboarding/components/help-modal.tsx  | 52 ++++++++++++++
 app/onboarding/pages/welcome/step-two.tsx | 85 +++++++++++++----------
 3 files changed, 103 insertions(+), 40 deletions(-)
 create mode 100644 app/onboarding/components/help-modal.tsx

diff --git a/app/core/hooks/use-current-customer.ts b/app/core/hooks/use-current-customer.ts
index e4d9f6a..3f00caa 100644
--- a/app/core/hooks/use-current-customer.ts
+++ b/app/core/hooks/use-current-customer.ts
@@ -1,10 +1,10 @@
-import { useAuthenticatedSession, useQuery } from "blitz";
+import { useSession, useQuery } from "blitz";
 
 import getCurrentCustomer from "../../customers/queries/get-current-customer";
 
 export default function useCurrentCustomer() {
-	const session = useAuthenticatedSession();
-	const [customer] = useQuery(getCurrentCustomer, null);
+	const session = useSession();
+	const [customer] = useQuery(getCurrentCustomer, null, { enabled: Boolean(session.userId) });
 	return {
 		customer,
 		hasFilledTwilioCredentials: Boolean(customer && customer.accountSid && customer.authToken),
diff --git a/app/onboarding/components/help-modal.tsx b/app/onboarding/components/help-modal.tsx
new file mode 100644
index 0000000..5448e1b
--- /dev/null
+++ b/app/onboarding/components/help-modal.tsx
@@ -0,0 +1,52 @@
+import type { FunctionComponent } from "react";
+import { useRef } from "react";
+
+import Modal, { ModalTitle } from "../../settings/components/modal";
+
+type Props = {
+	isHelpModalOpen: boolean;
+	closeModal: () => void;
+};
+
+const HelpModal: FunctionComponent<Props> = ({ isHelpModalOpen, closeModal }) => {
+	const modalCloseButtonRef = useRef<HTMLButtonElement>(null);
+	return (
+		<Modal initialFocus={modalCloseButtonRef} isOpen={isHelpModalOpen} onClose={closeModal}>
+			<div className="md:flex md:items-start">
+				<div className="mt-3 text-center md:mt-0 md:ml-4 md:text-left">
+					<ModalTitle>Need help finding your Twilio credentials?</ModalTitle>
+					<div className="mt-2 text-sm text-gray-500">
+						<p>
+							You can check out our{" "}
+							<a className="underline" href="https://docs.shellphone.app/guide/getting-started">
+								getting started
+							</a>{" "}
+							guide to set up your account with your Twilio credentials.
+						</p>
+						<p>
+							If you feel stuck, pick a date & time on{" "}
+							<a className="underline" href="https://calendly.com/shellphone-onboarding">
+								our calendly
+							</a>{" "}
+							and we will help you get started!
+						</p>
+					</div>
+				</div>
+			</div>
+			<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
+				<button
+					ref={modalCloseButtonRef}
+					type="button"
+					className={
+						"transition-colors duration-150 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto md:text-sm"
+					}
+					onClick={closeModal}
+				>
+					I got it, thanks!
+				</button>
+			</div>
+		</Modal>
+	);
+};
+
+export default HelpModal;
diff --git a/app/onboarding/pages/welcome/step-two.tsx b/app/onboarding/pages/welcome/step-two.tsx
index ad0680a..11bd72c 100644
--- a/app/onboarding/pages/welcome/step-two.tsx
+++ b/app/onboarding/pages/welcome/step-two.tsx
@@ -1,13 +1,16 @@
 import type { FunctionComponent } from "react";
-import { Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState } from "react";
 import type { BlitzPage, GetServerSideProps } from "blitz";
 import { getSession, Routes, useMutation, useRouter } from "blitz";
 import clsx from "clsx";
 import { useForm } from "react-hook-form";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faQuestionCircle } from "@fortawesome/pro-solid-svg-icons";
 
 import db from "db";
 import setTwilioApiFields from "../../mutations/set-twilio-api-fields";
 import OnboardingLayout from "../../components/onboarding-layout";
+import HelpModal from "../../components/help-modal";
 import useCurrentCustomer from "../../../core/hooks/use-current-customer";
 
 type Form = {
@@ -25,6 +28,7 @@ const StepTwo: BlitzPage = () => {
 	const router = useRouter();
 	const { customer } = useCurrentCustomer();
 	const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields);
+	const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
 
 	useEffect(() => {
 		setValue("twilioAuthToken", customer?.authToken ?? "");
@@ -45,43 +49,50 @@ const StepTwo: BlitzPage = () => {
 	});
 
 	return (
-		<div className="flex flex-col space-y-4 items-center">
-			<form onSubmit={onSubmit} className="flex flex-col gap-6">
-				<div className="w-full">
-					<label htmlFor="twilioAccountSid" className="block text-sm font-medium text-gray-700">
-						Twilio Account SID
-					</label>
-					<input
-						type="text"
-						id="twilioAccountSid"
-						className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
-						{...register("twilioAccountSid", { required: true })}
-					/>
-				</div>
-				<div className="w-full">
-					<label htmlFor="twilioAuthToken" className="block text-sm font-medium text-gray-700">
-						Twilio Auth Token
-					</label>
-					<input
-						type="text"
-						id="twilioAuthToken"
-						className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
-						{...register("twilioAuthToken", { required: true })}
-					/>
-				</div>
-
-				<button
-					type="submit"
-					className={clsx(
-						"max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
-						!isSubmitting && "bg-primary-600 hover:bg-primary-700",
-						isSubmitting && "bg-primary-400 cursor-not-allowed",
-					)}
-				>
-					Save
+		<>
+			<div className="flex flex-col space-y-4 items-center relative">
+				<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-0 right-0">
+					<FontAwesomeIcon size="lg" className="w-6 h-6 text-primary-700" icon={faQuestionCircle} />
 				</button>
-			</form>
-		</div>
+				<form onSubmit={onSubmit} className="flex flex-col gap-6">
+					<div className="w-full">
+						<label htmlFor="twilioAccountSid" className="block text-sm font-medium text-gray-700">
+							Twilio Account SID
+						</label>
+						<input
+							type="text"
+							id="twilioAccountSid"
+							className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+							{...register("twilioAccountSid", { required: true })}
+						/>
+					</div>
+					<div className="w-full">
+						<label htmlFor="twilioAuthToken" className="block text-sm font-medium text-gray-700">
+							Twilio Auth Token
+						</label>
+						<input
+							type="text"
+							id="twilioAuthToken"
+							className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
+							{...register("twilioAuthToken", { required: true })}
+						/>
+					</div>
+
+					<button
+						type="submit"
+						className={clsx(
+							"max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm",
+							!isSubmitting && "bg-primary-600 hover:bg-primary-700",
+							isSubmitting && "bg-primary-400 cursor-not-allowed",
+						)}
+					>
+						Save
+					</button>
+				</form>
+			</div>
+
+			<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
+		</>
 	);
 };