From 03a9996c846802b2bfe591eb50302c08835149d2 Mon Sep 17 00:00:00 2001 From: sean-brydon <55134778+sean-brydon@users.noreply.github.com> Date: Fri, 2 Sep 2022 12:10:55 +0100 Subject: [PATCH] Tidy up on event-types + NITS (#4119) * Apply correct padding to switch * Make gray badges less eye catching * Update description text color * Tidy up setup tab * Use V2 dialog on edit location * use V2 select * Menu Item component + fix menuitem * Fix dropdown alignment --- .../eventtype/EventTypeDescription.tsx | 2 +- .../v2/eventtype/EditLocationDialog.tsx | 237 +++++++++--------- .../components/v2/eventtype/EventSetupTab.tsx | 55 +--- apps/web/pages/v2/event-types/index.tsx | 22 +- packages/ui/v2/core/Badge.tsx | 2 +- packages/ui/v2/core/Dropdown.tsx | 49 +++- 6 files changed, 175 insertions(+), 192 deletions(-) diff --git a/apps/web/components/eventtype/EventTypeDescription.tsx b/apps/web/components/eventtype/EventTypeDescription.tsx index 0d1def66cc..eaf8f689a0 100644 --- a/apps/web/components/eventtype/EventTypeDescription.tsx +++ b/apps/web/components/eventtype/EventTypeDescription.tsx @@ -30,7 +30,7 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript return ( <> -
+
{eventType.description && (

{eventType.description.substring(0, 100)} diff --git a/apps/web/components/v2/eventtype/EditLocationDialog.tsx b/apps/web/components/v2/eventtype/EditLocationDialog.tsx index 72c7a58a11..cc763ed04e 100644 --- a/apps/web/components/v2/eventtype/EditLocationDialog.tsx +++ b/apps/web/components/v2/eventtype/EditLocationDialog.tsx @@ -15,16 +15,16 @@ import { } from "@calcom/app-store/locations"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; -import { Dialog, DialogContent } from "@calcom/ui/Dialog"; import { Icon } from "@calcom/ui/Icon"; import PhoneInput from "@calcom/ui/form/PhoneInputLazy"; -import { Button } from "@calcom/ui/v2"; +import { Dialog, DialogContent } from "@calcom/ui/v2"; +import { Button, Label } from "@calcom/ui/v2"; import { Form } from "@calcom/ui/v2"; +import { Select } from "@calcom/ui/v2/"; import { QueryCell } from "@lib/QueryCell"; import CheckboxField from "@components/ui/form/CheckboxField"; -import Select from "@components/ui/form/Select"; type BookingItem = inferQueryOutput<"viewer.bookings">["bookings"][number]; @@ -161,17 +161,15 @@ export const EditLocationDialog = (props: ISetLocationDialog) => { return (
- -
+
+ { return ( - -
-
-
- -
-
- - {!booking && ( -

{t("this_input_will_shown_booking_this_event")}

- )} -
-
-
- {booking && ( - <> -

{t("current_location")}:

-

- {getHumanReadableLocationValue(booking.location, t)} -

- - )} -
{ - const { locationType: newLocation, displayLocationPublicly } = values; + + {booking && ( + <> +

{t("current_location")}:

+

+ {getHumanReadableLocationValue(booking.location, t)} +

+ + )} + { + const { locationType: newLocation, displayLocationPublicly } = values; - let details = {}; - if (newLocation === LocationType.InPerson) { - details = { - address: values.locationAddress, - }; - } - const eventLocationType = getEventLocationType(newLocation); + let details = {}; + if (newLocation === LocationType.InPerson) { + details = { + address: values.locationAddress, + }; + } + const eventLocationType = getEventLocationType(newLocation); - // TODO: There can be a property that tells if it is to be saved in `link` - if ( - newLocation === LocationType.Link || - (!eventLocationType?.default && eventLocationType?.linkType === "static") - ) { - details = { link: values.locationLink }; - } + // TODO: There can be a property that tells if it is to be saved in `link` + if ( + newLocation === LocationType.Link || + (!eventLocationType?.default && eventLocationType?.linkType === "static") + ) { + details = { link: values.locationLink }; + } - if (newLocation === LocationType.UserPhone) { - details = { hostPhoneNumber: values.locationPhoneNumber }; - } + if (newLocation === LocationType.UserPhone) { + details = { hostPhoneNumber: values.locationPhoneNumber }; + } - if (eventLocationType?.organizerInputType) { - details = { - ...details, - displayLocationPublicly, - }; - } + if (eventLocationType?.organizerInputType) { + details = { + ...details, + displayLocationPublicly, + }; + } - saveLocation(newLocation, details); - setShowLocationModal(false); - setSelectedLocation?.(undefined); - locationFormMethods.unregister([ - "locationType", - "locationLink", - "locationAddress", - "locationPhoneNumber", - ]); - }}> - { - if (!locationOptions.length) return null; - return ( - ( - location.value !== "phone") + : locationOptions + } + isSearchable={false} + className="my-4 block w-full min-w-0 flex-1 rounded-md border border-gray-300 text-sm" + onChange={(val) => { + if (val) { + locationFormMethods.setValue("locationType", val.value); + locationFormMethods.unregister([ + "locationLink", + "locationAddress", + "locationPhoneNumber", + ]); + locationFormMethods.clearErrors([ + "locationLink", + "locationPhoneNumber", + "locationAddress", + ]); + setSelectedLocation?.(val); } - isSearchable={false} - className="my-4 block w-full min-w-0 flex-1 rounded-md border border-gray-300 text-sm" - onChange={(val) => { - if (val) { - locationFormMethods.setValue("locationType", val.value); - locationFormMethods.unregister([ - "locationLink", - "locationAddress", - "locationPhoneNumber", - ]); - locationFormMethods.clearErrors([ - "locationLink", - "locationPhoneNumber", - "locationAddress", - ]); - setSelectedLocation?.(val); - } - }} - /> - )} - /> - ); + }} + /> + )} + /> + ); + }} + /> + {selectedLocation && LocationOptions} +
+ - -
- -
+ type="button" + color="secondary"> + {t("cancel")} + + +
+ ); diff --git a/apps/web/components/v2/eventtype/EventSetupTab.tsx b/apps/web/components/v2/eventtype/EventSetupTab.tsx index b8665e0cd5..92d17dcbf3 100644 --- a/apps/web/components/v2/eventtype/EventSetupTab.tsx +++ b/apps/web/components/v2/eventtype/EventSetupTab.tsx @@ -4,21 +4,17 @@ import { SchedulingType } from "@prisma/client"; import { isValidPhoneNumber } from "libphonenumber-js"; import { EventTypeSetupInfered, FormValues } from "pages/v2/event-types/[type]"; import { useEffect, useRef, useState } from "react"; -import { Controller, useForm, useFormContext, useWatch } from "react-hook-form"; +import { Controller, useForm, useFormContext } from "react-hook-form"; import { z } from "zod"; import { getEventLocationType, EventLocationType } from "@calcom/app-store/locations"; import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { trpc } from "@calcom/trpc/react"; import { Icon } from "@calcom/ui/Icon"; -import { Select, Label, TextField, Portal, Switch } from "@calcom/ui/v2"; -import * as RadioArea from "@calcom/ui/v2/core/form/radio-area"; +import { Select, Label, TextField } from "@calcom/ui/v2"; -import { asStringOrUndefined } from "@lib/asStringOrNull"; import { slugify } from "@lib/slugify"; -import CheckedSelect from "@components/ui/form/CheckedSelect"; import { EditLocationDialog } from "@components/v2/eventtype/EditLocationDialog"; type OptionTypeBase = { @@ -32,8 +28,7 @@ export const EventSetupTab = ( ) => { const { t } = useLocale(); const formMethods = useFormContext(); - const { eventType, locationOptions, team, teamMembers } = props; - const utils = trpc.useContext(); + const { eventType, locationOptions, team } = props; const [showLocationModal, setShowLocationModal] = useState(false); const [selectedLocation, setSelectedLocation] = useState(undefined); @@ -42,17 +37,6 @@ export const EventSetupTab = ( setShowLocationModal(true); }; - const setHiddenMutation = trpc.useMutation("viewer.eventTypes.update", { - onError: async (err) => { - console.error(err.message); - await utils.cancelQuery(["viewer.eventTypes"]); - await utils.invalidateQueries(["viewer.eventTypes"]); - }, - onSettled: async () => { - await utils.invalidateQueries(["viewer.eventTypes"]); - }, - }); - const removeLocation = (selectedLocation: typeof eventType.locations[number]) => { formMethods.setValue( "locations", @@ -79,37 +63,6 @@ export const EventSetupTab = ( setShowLocationModal(false); }; - const schedulingTypeOptions: { - value: SchedulingType; - label: string; - description: string; - }[] = [ - { - value: SchedulingType.COLLECTIVE, - label: t("collective"), - description: t("collective_description"), - }, - { - value: SchedulingType.ROUND_ROBIN, - label: t("round_robin"), - description: t("round_robin_description"), - }, - ]; - - const mapUserToValue = ({ - id, - name, - username, - }: { - id: number | null; - name: string | null; - username: string | null; - }) => ({ - value: `${id || ""}`, - label: `${name || ""}`, - avatar: `${WEBAPP_URL}/${username}/avatar.png`, - }); - const locationFormSchema = z.object({ locationType: z.string(), locationAddress: z.string().optional(), @@ -182,7 +135,7 @@ export const EventSetupTab = ( return null; } return ( -
  • +
  • -
    +
    - + - + - + )} diff --git a/packages/ui/v2/core/Badge.tsx b/packages/ui/v2/core/Badge.tsx index 662dc62e63..d64eaf53ad 100644 --- a/packages/ui/v2/core/Badge.tsx +++ b/packages/ui/v2/core/Badge.tsx @@ -8,7 +8,7 @@ export const badgeClassNameByVariant = { orange: "bg-orange-100 text-orange-800", success: "bg-green-100 text-green-800", green: "bg-green-100 text-green-800", - gray: "bg-gray-200 text-gray-800 dark:bg-transparent dark:text-darkgray-800", + gray: "bg-gray-100 text-gray-800 dark:bg-transparent dark:text-darkgray-800", blue: "bg-blue-100 text-blue-800", red: "bg-red-100 text-red-800", error: "bg-red-100 text-red-800", diff --git a/packages/ui/v2/core/Dropdown.tsx b/packages/ui/v2/core/Dropdown.tsx index c29314572f..44d01990d6 100644 --- a/packages/ui/v2/core/Dropdown.tsx +++ b/packages/ui/v2/core/Dropdown.tsx @@ -1,6 +1,10 @@ import { CheckCircleIcon } from "@heroicons/react/outline"; import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"; +import Link from "next/link"; import { ComponentProps, forwardRef } from "react"; +import { Icon } from "react-feather"; + +import { classNames } from "@calcom/lib"; export const Dropdown = DropdownMenuPrimitive.Root; @@ -24,10 +28,11 @@ export const DropdownMenuTriggerItem = DropdownMenuPrimitive.TriggerItem; type DropdownMenuContentProps = ComponentProps; export const DropdownMenuContent = forwardRef( - ({ children, ...props }, forwardedRef) => { + ({ children, align = "end", ...props }, forwardedRef) => { return ( @@ -89,6 +94,48 @@ export const DropdownMenuRadioItem = forwardRef & ComponentProps<"a">; +export function ButtonOrLink({ href, ...props }: ButtonOrLinkProps) { + const isLink = typeof href !== "undefined"; + const ButtonOrLink = isLink ? "a" : "button"; + + const content = ; + + if (isLink) { + return {content}; + } + + return content; +} + +export const DropdownItem = (props: DropdownItemProps) => { + const { StartIcon, EndIcon } = props; + + return ( + + <> + {StartIcon && } +
    {props.children}
    + {EndIcon && } + +     + ); +}; + export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator; export default Dropdown;