set your twilio things from settings
This commit is contained in:
m5r
57
app/settings/components/phone/help-modal.tsx
Normal file
57
app/settings/components/phone/help-modal.tsx
Normal file
@ -0,0 +1,57 @@
|
||||
import type { FunctionComponent } from "react";
|
||||
import { useRef } from "react";
|
||||
|
||||
import Modal, { ModalTitle } from "app/core/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-6 space-y-3 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>
|
||||
<p>
|
||||
Don't miss out on free $10 Twilio credit by using{" "}
|
||||
<a className="underline" href="https://www.twilio.com/referral/gNvX8p">
|
||||
our referral link
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
|
||||
<button
|
||||
ref={modalCloseButtonRef}
|
||||
type="button"
|
||||
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-primary-500 text-base font-medium text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 md:mt-0 md:w-auto"
|
||||
onClick={closeModal}
|
||||
>
|
||||
Noted, thanks the help!
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpModal;
|
||||
76
app/settings/components/phone/phone-number-form.tsx
Normal file
76
app/settings/components/phone/phone-number-form.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import { useEffect } from "react";
|
||||
import { useMutation, useQuery } from "blitz";
|
||||
import { useForm } from "react-hook-form";
|
||||
|
||||
import setPhoneNumber from "../../mutations/set-phone-number";
|
||||
import getAvailablePhoneNumbers from "../../queries/get-available-phone-numbers";
|
||||
import useCurrentUser from "app/core/hooks/use-current-user";
|
||||
import useUserPhoneNumber from "app/core/hooks/use-current-phone-number";
|
||||
import Button from "../button";
|
||||
import SettingsSection from "../settings-section";
|
||||
|
||||
type Form = {
|
||||
phoneNumberSid: string;
|
||||
};
|
||||
|
||||
export default function PhoneNumberForm() {
|
||||
const { hasFilledTwilioCredentials } = useCurrentUser();
|
||||
const currentPhoneNumber = useUserPhoneNumber();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<Form>();
|
||||
const [setPhoneNumberMutation] = useMutation(setPhoneNumber);
|
||||
const [availablePhoneNumbers] = useQuery(getAvailablePhoneNumbers, {}, { enabled: hasFilledTwilioCredentials });
|
||||
|
||||
useEffect(() => {
|
||||
if (currentPhoneNumber) {
|
||||
setValue("phoneNumberSid", currentPhoneNumber.id);
|
||||
}
|
||||
}, [currentPhoneNumber]);
|
||||
|
||||
const onSubmit = handleSubmit(async ({ phoneNumberSid }) => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
await setPhoneNumberMutation({ phoneNumberSid });
|
||||
});
|
||||
|
||||
if (!hasFilledTwilioCredentials) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<form onSubmit={onSubmit} className="flex flex-col gap-6">
|
||||
<SettingsSection
|
||||
className="relative"
|
||||
footer={
|
||||
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
|
||||
<Button variant="default" type="submit" isDisabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
|
||||
Phone number
|
||||
</label>
|
||||
<select
|
||||
id="phoneNumberSid"
|
||||
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
|
||||
{...register("phoneNumberSid")}
|
||||
>
|
||||
<option value="none" />
|
||||
{availablePhoneNumbers?.map(({ sid, phoneNumber }) => (
|
||||
<option value={sid} key={sid}>
|
||||
{phoneNumber}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SettingsSection>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
90
app/settings/components/phone/twilio-api-form.tsx
Normal file
90
app/settings/components/phone/twilio-api-form.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useMutation } from "blitz";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { IoHelpCircle } from "react-icons/io5";
|
||||
|
||||
import setTwilioApiFields from "../../mutations/set-twilio-api-fields";
|
||||
import useCurrentUser from "app/core/hooks/use-current-user";
|
||||
import HelpModal from "./help-modal";
|
||||
import Button from "../button";
|
||||
import SettingsSection from "../settings-section";
|
||||
|
||||
type Form = {
|
||||
twilioAccountSid: string;
|
||||
twilioAuthToken: string;
|
||||
};
|
||||
|
||||
export default function TwilioApiForm() {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<Form>();
|
||||
const { organization, refetch } = useCurrentUser();
|
||||
const [setTwilioApiFieldsMutation] = useMutation(setTwilioApiFields);
|
||||
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setValue("twilioAuthToken", organization?.twilioAuthToken ?? "");
|
||||
setValue("twilioAccountSid", organization?.twilioAccountSid ?? "");
|
||||
}, [setValue, organization?.twilioAuthToken, organization?.twilioAccountSid]);
|
||||
|
||||
const onSubmit = handleSubmit(async ({ twilioAccountSid, twilioAuthToken }) => {
|
||||
if (isSubmitting) {
|
||||
return;
|
||||
}
|
||||
|
||||
await setTwilioApiFieldsMutation({ twilioAccountSid, twilioAuthToken });
|
||||
await refetch();
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<form onSubmit={onSubmit} className="flex flex-col gap-6">
|
||||
<SettingsSection
|
||||
className="relative"
|
||||
footer={
|
||||
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
|
||||
<Button variant="default" type="submit" isDisabled={isSubmitting}>
|
||||
{isSubmitting ? "Saving..." : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-2 right-2">
|
||||
<IoHelpCircle className="w-6 h-6 text-primary-700" />
|
||||
</button>
|
||||
<article>
|
||||
Shellphone needs some informations about your Twilio account to securely use your phone numbers.
|
||||
</article>
|
||||
|
||||
<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: false })}
|
||||
/>
|
||||
</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: false })}
|
||||
/>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</form>
|
||||
|
||||
<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user