53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import type { FunctionComponent } from "react";
|
|
import { useRef } from "react";
|
|
|
|
import Modal, { ModalTitle } from "app/core/components/modal";
|
|
import type { Plan } from "./plans";
|
|
|
|
type Props = {
|
|
isOpen: boolean;
|
|
nextPlan: Plan | null;
|
|
confirm: (nextPlan: Plan) => void;
|
|
closeModal: () => void;
|
|
};
|
|
|
|
const SwitchPlanModal: FunctionComponent<Props> = ({ isOpen, nextPlan, confirm, closeModal }) => {
|
|
const confirmButtonRef = useRef<HTMLButtonElement>(null);
|
|
|
|
return (
|
|
<Modal initialFocus={confirmButtonRef} isOpen={isOpen} 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>Are you sure you want to switch to {nextPlan?.title}?</ModalTitle>
|
|
<div className="mt-2 text-gray-500">
|
|
<p>
|
|
You're about to switch to the <strong>{nextPlan?.title}</strong> plan. You will be
|
|
billed immediately a prorated amount and the next billing date will be recalculated from
|
|
today.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 md:mt-4 md:flex md:flex-row-reverse">
|
|
<button
|
|
ref={confirmButtonRef}
|
|
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 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={() => confirm(nextPlan!)}
|
|
>
|
|
Yes, I'm sure
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="md:mr-2 mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white 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"
|
|
onClick={closeModal}
|
|
>
|
|
Nope, cancel it
|
|
</button>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default SwitchPlanModal;
|