remixed v0
This commit is contained in:
m5r
57
app/features/settings/components/phone/help-modal.tsx
Normal file
57
app/features/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 "~/features/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;
|
||||
94
app/features/settings/components/phone/phone-number-form.tsx
Normal file
94
app/features/settings/components/phone/phone-number-form.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
import { useActionData, useCatch, useTransition } from "@remix-run/react";
|
||||
|
||||
import Button from "../button";
|
||||
import SettingsSection from "../settings-section";
|
||||
import Alert from "~/features/core/components/alert";
|
||||
|
||||
export default function PhoneNumberForm() {
|
||||
const transition = useTransition();
|
||||
const actionData = useActionData();
|
||||
|
||||
const isSubmitting = transition.state === "submitting";
|
||||
const isSuccess = actionData?.submitted === true;
|
||||
const error = actionData?.error;
|
||||
const isError = !!error;
|
||||
|
||||
const hasFilledTwilioCredentials = false; // Boolean(currentOrganization?.twilioAccountSid && currentOrganization?.twilioAuthToken)
|
||||
const availablePhoneNumbers: any[] = [];
|
||||
|
||||
const onSubmit = async () => {
|
||||
// await setPhoneNumberMutation({ phoneNumberSid }); // TODO
|
||||
};
|
||||
|
||||
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>
|
||||
}
|
||||
>
|
||||
{isError ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Oops, there was an issue" message={error} variant="error" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{isSuccess ? (
|
||||
<div className="mb-8">
|
||||
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
|
||||
Phone number
|
||||
</label>
|
||||
<select
|
||||
id="phoneNumberSid"
|
||||
name="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"
|
||||
>
|
||||
<option value="none" />
|
||||
{availablePhoneNumbers?.map(({ sid, phoneNumber }) => (
|
||||
<option value={sid} key={sid}>
|
||||
{phoneNumber}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SettingsSection>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export function CatchBoundary() {
|
||||
const caught = useCatch();
|
||||
|
||||
return (
|
||||
<Alert
|
||||
variant="error"
|
||||
title="Authorization error"
|
||||
message={
|
||||
<>
|
||||
<p>
|
||||
We failed to fetch your Twilio phone numbers. Make sure both your SID and your auth token are
|
||||
valid and that your Twilio account isn't suspended.
|
||||
{caught.data ? <a href={caught.data.moreInfo}>Related Twilio docs</a> : null}
|
||||
</p>
|
||||
<button className="inline-flex pt-2 text-left" onClick={window.location.reload}>
|
||||
<span className="transition-colors duration-150 border-b border-red-200 hover:border-red-500">
|
||||
Try again
|
||||
</span>
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
66
app/features/settings/components/phone/twilio-api-form.tsx
Normal file
66
app/features/settings/components/phone/twilio-api-form.tsx
Normal file
@ -0,0 +1,66 @@
|
||||
import { useState } from "react";
|
||||
import { useTransition } from "@remix-run/react";
|
||||
import { IoHelpCircle } from "react-icons/io5";
|
||||
|
||||
import HelpModal from "./help-modal";
|
||||
import Button from "../button";
|
||||
import SettingsSection from "../settings-section";
|
||||
|
||||
export default function TwilioApiForm() {
|
||||
const transition = useTransition();
|
||||
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
|
||||
const isSubmitting = transition.state === "submitting";
|
||||
|
||||
const onSubmit = async () => {
|
||||
// await setTwilioApiFieldsMutation({ twilioAccountSid, twilioAuthToken }); // TODO
|
||||
};
|
||||
|
||||
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
|
||||
id="twilioAccountSid"
|
||||
name="twilioAccountSid"
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<label htmlFor="twilioAuthToken" className="block text-sm font-medium text-gray-700">
|
||||
Twilio Auth Token
|
||||
</label>
|
||||
<input
|
||||
id="twilioAuthToken"
|
||||
name="twilioAuthToken"
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</SettingsSection>
|
||||
</form>
|
||||
|
||||
<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user