Skip to content

Commit

Permalink
feat: added customClassnames for event-setup tab (calcom#17240)
Browse files Browse the repository at this point in the history 
* feat: added customClassnames for event-setup tab

* Update EventTypePlatformWrapper.tsx

* better classnames naming

* added classNames to common types

* updated classnames to use the common exported types

* udpate

* better classnames

* better classname names

* classnames -> classNames

* added default styling

* Update Locations.tsx

* Update event-types.tsx

* update

* locationSelectCustomClassNames -> LocationSelectCustomClassNames

* Update documentation.json

* fix: better classnames

* Update types.ts
  • Loading branch information
@SomayChauhan
SomayChauhan authored Nov 25, 2024
1 parent ad44ca9 commit e477e58
Show file tree
Hide file tree
Showing 5 changed files with 321 additions and 42 deletions.
78 changes: 66 additions & 12 deletions packages/features/eventtypes/components/Locations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,18 @@ import type { UseFormGetValues, UseFormSetValue, Control, FormState } from "reac
import type { EventLocationType } from "@calcom/app-store/locations";
import { getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
import { useIsPlatform } from "@calcom/atoms/monorepo";
import type { LocationFormValues, EventTypeSetupProps } from "@calcom/features/eventtypes/lib/types";
import type {
LocationFormValues,
EventTypeSetupProps,
CheckboxClassNames,
} from "@calcom/features/eventtypes/lib/types";
import CheckboxField from "@calcom/features/form/components/CheckboxField";
import type { SingleValueLocationOption } from "@calcom/features/form/components/LocationSelect";
import type {
LocationSelectCustomClassNames,
SingleValueLocationOption,
} from "@calcom/features/form/components/LocationSelect";
import LocationSelect from "@calcom/features/form/components/LocationSelect";
import { classNames } from "@calcom/lib";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Icon, Input, PhoneInput, Button, showToast } from "@calcom/ui";
Expand All @@ -22,6 +30,24 @@ export type TLocationOptions = Pick<EventTypeSetupProps, "locationOptions">["loc
export type TDestinationCalendar = { integration: string } | null;
export type TPrefillLocation = { credentialId?: number; type: string };

type LocationInputCustomClassNames = {
addressInput?: string;
phoneInput?: string;
};

export type LocationCustomClassNames = {
container?: string;
locationSelect?: LocationSelectCustomClassNames;
removeLocationButton?: string;
removeLocationIcon?: string;
addLocationButton?: string;
organizerContactInput?: {
errorMessage?: string;
locationInput?: LocationInputCustomClassNames;
publicDisplayCheckbox?: CheckboxClassNames;
};
};

type LocationsProps = {
team: { id: number } | null;
destinationCalendar: TDestinationCalendar;
Expand All @@ -36,6 +62,7 @@ type LocationsProps = {
eventType: TEventTypeLocation;
locationOptions: TLocationOptions;
prefillLocation?: SingleValueLocationOption;
customClassNames?: LocationCustomClassNames;
};

const getLocationFromType = (type: EventLocationType["type"], locationOptions: TLocationOptions) => {
Expand Down Expand Up @@ -84,6 +111,7 @@ const Locations: React.FC<LocationsProps> = ({
team,
eventType,
prefillLocation,
customClassNames,
...props
}) => {
const { t } = useLocale();
Expand Down Expand Up @@ -135,8 +163,9 @@ const Locations: React.FC<LocationsProps> = ({
eventLocationType: EventLocationType;
defaultValue?: string;
index: number;
customClassNames?: LocationInputCustomClassNames;
}) => {
const { eventLocationType, index, ...remainingProps } = props;
const { eventLocationType, index, customClassNames, ...remainingProps } = props;
if (eventLocationType?.organizerInputType === "text") {
const { defaultValue, ...rest } = remainingProps;

Expand All @@ -154,7 +183,7 @@ const Locations: React.FC<LocationsProps> = ({
onChange={onChange}
value={value}
{...(disableLocationProp ? { disabled: true } : {})}
className="my-0"
className={classNames("my-0", customClassNames?.addressInput)}
{...rest}
/>
);
Expand All @@ -175,6 +204,7 @@ const Locations: React.FC<LocationsProps> = ({
disabled={disableLocationProp}
placeholder={t(eventLocationType.organizerInputPlaceholder || "")}
name={`locations[${index}].${eventLocationType.defaultValueVariable}`}
className={customClassNames?.phoneInput}
value={value}
onChange={onChange}
{...rest}
Expand Down Expand Up @@ -213,8 +243,8 @@ const Locations: React.FC<LocationsProps> = ({
const isPlatorm = useIsPlatform();

return (
<div className="w-full">
<ul ref={animationRef} className="space-y-2">
<div className={classNames("w-full", customClassNames?.container)}>
<ul ref={animationRef} className={classNames("space-y-2")}>
{locationFields.map((field, index) => {
const eventLocationType = getEventLocationType(field.type);
const defaultLocation = field;
Expand All @@ -230,7 +260,11 @@ const Locations: React.FC<LocationsProps> = ({
isDisabled={disableLocationProp}
defaultValue={option}
isSearchable={false}
className="block min-w-0 flex-1 rounded-sm text-sm"
className={classNames(
"block min-w-0 flex-1 rounded-sm text-sm",
customClassNames?.locationSelect?.selectWrapper
)}
customClassNames={customClassNames?.locationSelect}
menuPlacement="auto"
onChange={(e: SingleValueLocationOption) => {
setShowEmptyLocationSelect(false);
Expand Down Expand Up @@ -275,12 +309,18 @@ const Locations: React.FC<LocationsProps> = ({
{!(disableLocationProp && isChildrenManagedEventType) && (
<button
data-testid={`delete-locations.${index}.type`}
className="min-h-9 block h-9 px-2"
className={classNames("min-h-9 block h-9 px-2", customClassNames?.removeLocationButton)}
type="button"
onClick={() => remove(index)}
aria-label={t("remove")}>
<div className="h-4 w-4">
<Icon name="x" className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
<Icon
name="x"
className={classNames(
"border-l-1 hover:text-emphasis text-subtle h-4 w-4",
customClassNames?.removeLocationIcon
)}
/>
</div>
</button>
)}
Expand All @@ -302,23 +342,32 @@ const Locations: React.FC<LocationsProps> = ({
}
eventLocationType={eventLocationType}
index={index}
customClassNames={customClassNames?.organizerContactInput?.locationInput}
/>
</div>
<ErrorMessage
errors={formState.errors?.locations?.[index]}
name={eventLocationType.defaultValueVariable}
className="text-error my-1 ml-6 text-sm"
className={classNames(
"text-error my-1 ml-6 text-sm",
customClassNames?.organizerContactInput?.errorMessage
)}
as="div"
id="location-error"
/>
</div>
<div className="ml-6">
<div
className={classNames(
"ml-6",
customClassNames?.organizerContactInput?.publicDisplayCheckbox?.container
)}>
<CheckboxField
name={`locations[${index}].displayLocationPublicly`}
data-testid="display-location"
disabled={disableLocationProp}
defaultChecked={defaultLocation?.displayLocationPublicly}
description={t("display_location_label")}
className={customClassNames?.organizerContactInput?.publicDisplayCheckbox?.checkbox}
onChange={(e) => {
const fieldValues = getValues("locations")[index];
updateLocationField(index, {
Expand All @@ -344,7 +393,11 @@ const Locations: React.FC<LocationsProps> = ({
isDisabled={disableLocationProp}
defaultValue={defaultValue}
isSearchable={false}
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
className={classNames(
"block w-full min-w-0 flex-1 rounded-sm text-sm",
customClassNames?.locationSelect?.selectWrapper
)}
customClassNames={customClassNames?.locationSelect}
menuPlacement="auto"
onChange={(e: SingleValueLocationOption) => {
setShowEmptyLocationSelect(false);
Expand Down Expand Up @@ -413,6 +466,7 @@ const Locations: React.FC<LocationsProps> = ({
StartIcon="plus"
color="minimal"
disabled={seatsEnabled}
className={classNames(customClassNames?.addLocationButton)}
tooltip={seatsEnabled ? t("seats_option_doesnt_support_multi_location") : undefined}
onClick={() => setShowEmptyLocationSelect(true)}>
{t("add_location")}
Expand Down
Loading

0 comments on commit e477e58

Please sign in to comment.