Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor two modals #861

Merged
merged 10 commits into from
Oct 12, 2021
Merged

Refactor two modals #861

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2e63b24
refactor one modal into dialog. save profile
podviaznikov Oct 5, 2021
4b37893
updated second dialog to not use old component
podviaznikov Oct 5, 2021
6d7069c
Merge branch 'main' into feature/cal-392-refactor-modals
baileypumfleet Oct 7, 2021
389b4fd
Merge branch 'main' into feature/cal-392-refactor-modals
PeerRich Oct 10, 2021
54d4721
Merge branch 'main' into feature/cal-392-refactor-modals
PeerRich Oct 11, 2021
34257bf
Merge branch 'main' into feature/cal-392-refactor-modals
podviaznikov Oct 11, 2021
3e9c04b
refactor usage of dialog to the toast: user profile update
podviaznikov Oct 11, 2021
4641ae0
add icon to the dialogue
podviaznikov Oct 12, 2021
aec883a
update dialog
podviaznikov Oct 12, 2021
ab6d34a
Merge branch 'main' into feature/cal-392-refactor-modals
podviaznikov Oct 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
47 changes: 25 additions & 22 deletions pages/settings/profile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { InformationCircleIcon } from "@heroicons/react/outline";
import crypto from "crypto";
import { GetServerSidePropsContext } from "next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
Expand All @@ -14,12 +15,13 @@ import {
OptionType,
} from "@lib/core/i18n/i18n.utils";
import { isBrandingHidden } from "@lib/isBrandingHidden";
import showToast from "@lib/notification";
import prisma from "@lib/prisma";
import { trpc } from "@lib/trpc";
import { inferSSRProps } from "@lib/types/inferSSRProps";

import { DialogClose, Dialog, DialogContent } from "@components/Dialog";
import ImageUploader from "@components/ImageUploader";
import Modal from "@components/Modal";
import SettingsShell from "@components/SettingsShell";
import Shell from "@components/Shell";
import { Alert } from "@components/ui/Alert";
Expand Down Expand Up @@ -62,11 +64,18 @@ function HideBrandingInput(props: {
setModalOpen(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if it is possible to wrap the <input> with <DialogTrigger asChild> with e.stopPropagation(); like:

(e) => (!e.currentTarget.checked || props.user.plan !== "FREE") && e.stopPropagation()

In no way something that needs doing; but one can be curious.

}}
/>

<Modal
heading="This feature is only available in paid plan"
variant="warning"
description={
<Dialog open={modelOpen}>
<DialogContent>
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100 mb-4">
<InformationCircleIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />
</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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should probably be "Pro plan". Not technically related to this PR

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

agree

</h3>
</div>
</div>
<div className="flex flex-col space-y-3">
<p>
In order to remove the Cal branding from your booking pages, you need to upgrade to a paid
Expand All @@ -82,18 +91,22 @@ function HideBrandingInput(props: {
.
</p>
</div>
}
open={modelOpen}
handleClose={() => setModalOpen(false)}
/>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse gap-x-2">
<DialogClose asChild>
<Button className="btn-wide btn-primary text-center" onClick={() => setModalOpen(false)}>
<span className="m-auto">Dismiss</span>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this span needed?

</Button>
</DialogClose>
</div>
</DialogContent>
</Dialog>
</>
);
}

export default function Settings(props: Props) {
const mutation = trpc.useMutation("viewer.updateProfile");

const [successModalOpen, setSuccessModalOpen] = useState(false);
const usernameRef = useRef<HTMLInputElement>(null);
const nameRef = useRef<HTMLInputElement>(null);
const descriptionRef = useRef<HTMLTextAreaElement>();
Expand Down Expand Up @@ -123,10 +136,6 @@ export default function Settings(props: Props) {
setSelectedLanguage({ value: props.localeProp, label: props.localeLabels[props.localeProp] });
}, []);

const closeSuccessModal = () => {
setSuccessModalOpen(false);
};

const handleAvatarChange = (newAvatar) => {
avatarRef.current.value = newAvatar;
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
Expand Down Expand Up @@ -167,7 +176,7 @@ export default function Settings(props: Props) {
locale: enteredLanguage,
})
.then(() => {
setSuccessModalOpen(true);
showToast("Your user profile has been updated successfully", "success");
setHasErrors(false); // dismiss any open errors
})
.catch((err) => {
Expand Down Expand Up @@ -411,12 +420,6 @@ export default function Settings(props: Props) {
</div>
</div>
</form>
<Modal
heading="Profile updated successfully"
description="Your user profile has been updated successfully."
open={successModalOpen}
handleClose={closeSuccessModal}
/>
</SettingsShell>
</Shell>
);
Expand Down