add help modal during onboarding

This commit is contained in:
m5r 2021-08-04 02:46:47 +08:00
parent e98697293a
commit d93f6fd5d5
3 changed files with 103 additions and 40 deletions

View File

@ -1,10 +1,10 @@
import { useAuthenticatedSession, useQuery } from "blitz"; import { useSession, useQuery } from "blitz";
import getCurrentCustomer from "../../customers/queries/get-current-customer"; import getCurrentCustomer from "../../customers/queries/get-current-customer";
export default function useCurrentCustomer() { export default function useCurrentCustomer() {
const session = useAuthenticatedSession(); const session = useSession();
const [customer] = useQuery(getCurrentCustomer, null); const [customer] = useQuery(getCurrentCustomer, null, { enabled: Boolean(session.userId) });
return { return {
customer, customer,
hasFilledTwilioCredentials: Boolean(customer && customer.accountSid && customer.authToken), hasFilledTwilioCredentials: Boolean(customer && customer.accountSid && customer.authToken),

View File

@ -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;

View File

@ -1,13 +1,16 @@
import type { FunctionComponent } from "react"; import type { FunctionComponent } from "react";
import { Suspense, useEffect } from "react"; import { Suspense, useEffect, useState } from "react";
import type { BlitzPage, GetServerSideProps } from "blitz"; import type { BlitzPage, GetServerSideProps } from "blitz";
import { getSession, Routes, useMutation, useRouter } from "blitz"; import { getSession, Routes, useMutation, useRouter } from "blitz";
import clsx from "clsx"; import clsx from "clsx";
import { useForm } from "react-hook-form"; 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 db from "db";
import setTwilioApiFields from "../../mutations/set-twilio-api-fields"; import setTwilioApiFields from "../../mutations/set-twilio-api-fields";
import OnboardingLayout from "../../components/onboarding-layout"; import OnboardingLayout from "../../components/onboarding-layout";
import HelpModal from "../../components/help-modal";
import useCurrentCustomer from "../../../core/hooks/use-current-customer"; import useCurrentCustomer from "../../../core/hooks/use-current-customer";
type Form = { type Form = {
@ -25,6 +28,7 @@ const StepTwo: BlitzPage = () => {
const router = useRouter(); const router = useRouter();
const { customer } = useCurrentCustomer(); const { customer } = useCurrentCustomer();
const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields); const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields);
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
useEffect(() => { useEffect(() => {
setValue("twilioAuthToken", customer?.authToken ?? ""); setValue("twilioAuthToken", customer?.authToken ?? "");
@ -45,7 +49,11 @@ const StepTwo: BlitzPage = () => {
}); });
return ( return (
<div className="flex flex-col space-y-4 items-center"> <>
<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 onSubmit={onSubmit} className="flex flex-col gap-6"> <form onSubmit={onSubmit} className="flex flex-col gap-6">
<div className="w-full"> <div className="w-full">
<label htmlFor="twilioAccountSid" className="block text-sm font-medium text-gray-700"> <label htmlFor="twilioAccountSid" className="block text-sm font-medium text-gray-700">
@ -82,6 +90,9 @@ const StepTwo: BlitzPage = () => {
</button> </button>
</form> </form>
</div> </div>
<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
</>
); );
}; };