add help modal during onboarding
This commit is contained in:
m5r
parent
e98697293a
commit
d93f6fd5d5
@ -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),
|
||||
|
||||
52
app/onboarding/components/help-modal.tsx
Normal file
52
app/onboarding/components/help-modal.tsx
Normal 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;
|
||||
@ -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} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user