update locations component view
This commit is contained in:
parent
ddb46ff057
commit
dbd9b1b3ce
|
@ -1,4 +1,7 @@
|
||||||
import getLocationInfo from "event-type/lib/getLocationIndo";
|
import { ErrorMessage } from "@hookform/error-message";
|
||||||
|
import { LocationInput } from "event-type/components/location-input";
|
||||||
|
import getLocationFromType from "event-type/lib/getLocationFromType";
|
||||||
|
import getLocationInfo from "event-type/lib/getLocationInfo";
|
||||||
import type { EventTypeSetupProps } from "event-type/tabs/event-setup";
|
import type { EventTypeSetupProps } from "event-type/tabs/event-setup";
|
||||||
import type { FormValues } from "event-type/types";
|
import type { FormValues } from "event-type/types";
|
||||||
import type { DestinationCalendar, Location } from "event-type/types";
|
import type { DestinationCalendar, Location } from "event-type/types";
|
||||||
|
@ -8,9 +11,10 @@ import type { UseFormReturn } from "react-hook-form";
|
||||||
|
|
||||||
import { getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
|
import { getEventLocationType, MeetLocationType } from "@calcom/app-store/locations";
|
||||||
import { CAL_URL } from "@calcom/lib/constants";
|
import { CAL_URL } from "@calcom/lib/constants";
|
||||||
import { Button } from "@calcom/ui";
|
import { Button, showToast } from "@calcom/ui";
|
||||||
import { Plus, Check } from "@calcom/ui/components/icon";
|
import { Plus, Check, X, CornerDownRight } from "@calcom/ui/components/icon";
|
||||||
|
|
||||||
|
import CheckboxField from "../../../../../../apps/web/components/ui/form/CheckboxField";
|
||||||
import type { SingleValueLocationOption } from "../../../../../../apps/web/components/ui/form/LocationSelect";
|
import type { SingleValueLocationOption } from "../../../../../../apps/web/components/ui/form/LocationSelect";
|
||||||
import LocationSelect from "../../../../../../apps/web/components/ui/form/LocationSelect";
|
import LocationSelect from "../../../../../../apps/web/components/ui/form/LocationSelect";
|
||||||
|
|
||||||
|
@ -66,6 +70,112 @@ export function Locations({
|
||||||
return (
|
return (
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<ul className="space-y-2">
|
<ul className="space-y-2">
|
||||||
|
{locationFields.map((field, index) => {
|
||||||
|
const eventLocationType = getEventLocationType(field.type);
|
||||||
|
const defaultLocation = field;
|
||||||
|
|
||||||
|
const option = getLocationFromType(field.type, locationOptions);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li key={field.id}>
|
||||||
|
<div className="flex w-full items-center">
|
||||||
|
<LocationSelect
|
||||||
|
placeholder="Select..."
|
||||||
|
options={locationOptions}
|
||||||
|
isDisabled={shouldLockDisableProps("locations").disabled}
|
||||||
|
defaultValue={option}
|
||||||
|
isSearchable={false}
|
||||||
|
className="block min-w-0 flex-1 rounded-sm text-sm"
|
||||||
|
menuPlacement="auto"
|
||||||
|
onChange={(e: SingleValueLocationOption) => {
|
||||||
|
if (e?.value) {
|
||||||
|
const newLocationType = e.value;
|
||||||
|
const eventLocationType = getEventLocationType(newLocationType);
|
||||||
|
if (!eventLocationType) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const canAddLocation =
|
||||||
|
eventLocationType.organizerInputType ||
|
||||||
|
!validLocations.find((location: Location) => location.type === newLocationType);
|
||||||
|
if (canAddLocation) {
|
||||||
|
updateLocationField(index, {
|
||||||
|
type: newLocationType,
|
||||||
|
...(e.credentialId && {
|
||||||
|
credentialId: e.credentialId,
|
||||||
|
teamName: e.teamName,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
updateLocationField(index, {
|
||||||
|
type: field.type,
|
||||||
|
...(field.credentialId && {
|
||||||
|
credentialId: field.credentialId,
|
||||||
|
teamName: field.teamName,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
showToast("This Location already exists. Please select a new location", "warning");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
data-testid={`delete-locations.${index}.type`}
|
||||||
|
className="min-h-9 block h-9 px-2"
|
||||||
|
type="button"
|
||||||
|
onClick={() => remove(index)}
|
||||||
|
aria-label="Remove">
|
||||||
|
<div className="h-4 w-4">
|
||||||
|
<X className="border-l-1 hover:text-emphasis text-subtle h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{eventLocationType?.organizerInputType && (
|
||||||
|
<div className="mt-2 space-y-2">
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<div className="flex items-center justify-center">
|
||||||
|
<CornerDownRight className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<LocationInput
|
||||||
|
formMethods={formMethods}
|
||||||
|
defaultValue={
|
||||||
|
defaultLocation
|
||||||
|
? defaultLocation[eventLocationType.defaultValueVariable]
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
eventLocationType={eventLocationType}
|
||||||
|
index={index}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ErrorMessage
|
||||||
|
errors={formMethods.formState.errors.locations?.[index]}
|
||||||
|
name={eventLocationType.defaultValueVariable}
|
||||||
|
className="text-error my-1 ml-6 text-sm"
|
||||||
|
as="div"
|
||||||
|
id="location-error"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="ml-6">
|
||||||
|
<CheckboxField
|
||||||
|
name={`locations[${index}].displayLocationPublicly`}
|
||||||
|
data-testid="display-location"
|
||||||
|
defaultChecked={defaultLocation?.displayLocationPublicly}
|
||||||
|
description="Display on booking page"
|
||||||
|
onChange={(e) => {
|
||||||
|
const fieldValues = formMethods.getValues().locations[index];
|
||||||
|
updateLocationField(index, {
|
||||||
|
...fieldValues,
|
||||||
|
displayLocationPublicly: e.target.checked,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
informationIconText="Location will be visible before the booking is confirmed"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
})}
|
||||||
{(validLocations.length === 0 || showEmptyLocationSelect) && (
|
{(validLocations.length === 0 || showEmptyLocationSelect) && (
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
<LocationSelect
|
<LocationSelect
|
||||||
|
@ -79,12 +189,31 @@ export function Locations({
|
||||||
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
className="block w-full min-w-0 flex-1 rounded-sm text-sm"
|
||||||
menuPlacement="auto"
|
menuPlacement="auto"
|
||||||
onChange={(e: SingleValueLocationOption) => {
|
onChange={(e: SingleValueLocationOption) => {
|
||||||
|
// TODO: shift this method one level up and then pass as props
|
||||||
if (e?.value) {
|
if (e?.value) {
|
||||||
const newLocationType = e.value;
|
const newLocationType = e.value;
|
||||||
const eventLocationType = getEventLocationType(newLocationType);
|
const eventLocationType = getEventLocationType(newLocationType);
|
||||||
if (!eventLocationType) {
|
if (!eventLocationType) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const canAppendLocation =
|
||||||
|
eventLocationType.organizerInputType ||
|
||||||
|
!validLocations.find((location: Location) => location.type === newLocationType);
|
||||||
|
|
||||||
|
if (canAppendLocation) {
|
||||||
|
append({
|
||||||
|
type: newLocationType,
|
||||||
|
...(e.credentialId && {
|
||||||
|
credentialId: e.credentialId,
|
||||||
|
teamName: e.teamName,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
setSelectedNewOption(e);
|
||||||
|
} else {
|
||||||
|
showToast("This Location already exists. Please select a new location", "warning");
|
||||||
|
setSelectedNewOption(null);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user