mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Refactor two modals (#861)

Browse source 
* refactor one modal into dialog. save profile
This commit is contained in:
Anton Podviaznikov 2021-10-12 12:43:22 -07:00 committed by GitHub
parent 4b05c56a0d
commit 0871f5edf8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
pages/settings/profile.tsx
View file

@ -1,3 +1,4 @@
import { InformationCircleIcon } from "@heroicons/react/outline";
import crypto from "crypto"; import crypto from "crypto";
import { GetServerSidePropsContext } from "next"; import { GetServerSidePropsContext } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import { serverSideTranslations } from "next-i18next/serverSideTranslations";
@ -14,12 +15,13 @@ import {
OptionType, OptionType,
} from "@lib/core/i18n/i18n.utils"; } from "@lib/core/i18n/i18n.utils";
import { isBrandingHidden } from "@lib/isBrandingHidden"; import { isBrandingHidden } from "@lib/isBrandingHidden";
import showToast from "@lib/notification";
import prisma from "@lib/prisma"; import prisma from "@lib/prisma";
import { trpc } from "@lib/trpc"; import { trpc } from "@lib/trpc";
import { inferSSRProps } from "@lib/types/inferSSRProps"; import { inferSSRProps } from "@lib/types/inferSSRProps";
import { DialogClose, Dialog, DialogContent } from "@components/Dialog";
import ImageUploader from "@components/ImageUploader"; import ImageUploader from "@components/ImageUploader";
import Modal from "@components/Modal";
import SettingsShell from "@components/SettingsShell"; import SettingsShell from "@components/SettingsShell";
import Shell from "@components/Shell"; import Shell from "@components/Shell";
import { Alert } from "@components/ui/Alert"; import { Alert } from "@components/ui/Alert";
@ -62,11 +64,18 @@ function HideBrandingInput(props: {
setModalOpen(true); setModalOpen(true);
}} }}
/> />
<Dialog open={modelOpen}>
<Modal <DialogContent>
heading="This feature is only available in paid plan" <div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 mb-4">
variant="warning" <InformationCircleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />
description={ </div>
<div className="sm:flex sm:items-start mb-4">
<div className="mt-3 sm:mt-0 sm:text-left">
<h3 className="font-cal text-lg leading-6 font-bold text-gray-900" id="modal-title">
This feature is only available in paid plan
</h3>
</div>
</div>
<div className="flex flex-col space-y-3"> <div className="flex flex-col space-y-3">
<p> <p>
In order to remove the Cal branding from your booking pages, you need to upgrade to a paid In order to remove the Cal branding from your booking pages, you need to upgrade to a paid
@ -82,10 +91,15 @@ function HideBrandingInput(props: {
. .
</p> </p>
</div> </div>
} <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
open={modelOpen} <DialogClose asChild>
handleClose={() => setModalOpen(false)} <Button className="btn-wide btn-primary text-center" onClick={() => setModalOpen(false)}>
/> <span className="m-auto">Dismiss</span>
</Button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
</> </>
); );
} }
@ -93,7 +107,6 @@ function HideBrandingInput(props: {
export default function Settings(props: Props) { export default function Settings(props: Props) {
const mutation = trpc.useMutation("viewer.updateProfile"); const mutation = trpc.useMutation("viewer.updateProfile");
const [successModalOpen, setSuccessModalOpen] = useState(false);
const usernameRef = useRef<HTMLInputElement>(null); const usernameRef = useRef<HTMLInputElement>(null);
const nameRef = useRef<HTMLInputElement>(null); const nameRef = useRef<HTMLInputElement>(null);
const descriptionRef = useRef<HTMLTextAreaElement>(); const descriptionRef = useRef<HTMLTextAreaElement>();
@ -123,10 +136,6 @@ export default function Settings(props: Props) {
setSelectedLanguage({ value: props.localeProp, label: props.localeLabels[props.localeProp] }); setSelectedLanguage({ value: props.localeProp, label: props.localeLabels[props.localeProp] });
}, []); }, []);
const closeSuccessModal = () => {
setSuccessModalOpen(false);
};
const handleAvatarChange = (newAvatar) => { const handleAvatarChange = (newAvatar) => {
avatarRef.current.value = newAvatar; avatarRef.current.value = newAvatar;
const nativeInputValueSetter = Object.getOwnPropertyDescriptor( const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
@ -167,7 +176,7 @@ export default function Settings(props: Props) {
locale: enteredLanguage, locale: enteredLanguage,
}) })
.then(() => { .then(() => {
setSuccessModalOpen(true); showToast("Your user profile has been updated successfully", "success");
setHasErrors(false); // dismiss any open errors setHasErrors(false); // dismiss any open errors
}) })
.catch((err) => { .catch((err) => {
@ -411,12 +420,6 @@ export default function Settings(props: Props) {
</div> </div>
</div> </div>
</form> </form>
<Modal
heading="Profile updated successfully"
description="Your user profile has been updated successfully."
open={successModalOpen}
handleClose={closeSuccessModal}
/>
</SettingsShell> </SettingsShell>
</Shell> </Shell>
); );