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

fix: layout of dialog (edit location) on bookings page #20268

Merged
merged 8 commits into from
Mar 26, 2025
+65 −65
Merged

fix: layout of dialog (edit location) on bookings page #20268

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
25ef872
refactor: streamline DialogFooter structure in EditLocationDialog com…
krakenftw Mar 20, 2025
02c153c
Merge branch 'main' into fix-booking-location-edit-dialog
krakenftw Mar 21, 2025
1a73ef4
refactor: enhance form handling and structure in EditLocationDialog c…
krakenftw Mar 21, 2025
dac8157
refactor: update icon styling and layout in EditLocationDialog component
krakenftw Mar 21, 2025
46aa990
Merge branch 'main' into fix-booking-location-edit-dialog
krakenftw Mar 24, 2025
6c931a4
Merge branch 'main' into fix-booking-location-edit-dialog
TusharBhatt1 Mar 24, 2025
15672b4
Merge branch 'main' into fix-booking-location-edit-dialog
krakenftw Mar 25, 2025
f1377bb
revert: size to h,w
krakenftw Mar 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 65 additions & 65 deletions apps/web/components/dialog/EditLocationDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,55 +223,55 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
return (
<Dialog open={isOpenDialog} onOpenChange={(open) => setShowLocationModal(open)}>
<DialogContent>
<div className="flex flex-row space-x-3">
<div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<Icon name="map-pin" className="text-emphasis h-6 w-6" />
</div>
<div className="w-full">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
{t("edit_location")}
</h3>
</div>
<div className="mt-3 text-center sm:mt-0 sm:text-left" />
<Form
form={locationFormMethods}
handleSubmit={async (values) => {
const { locationType: newLocationType } = values;
let newLocation;
// For the locations that require organizer to type-in some values, we need the value
if (eventLocationType?.organizerInputType) {
newLocation = values[eventLocationType.variable];
} else {
// locationType itself can be used here e.g. For zoom we use the type itself which is "integrations:zoom". For Organizer's Default Conferencing App, it is OrganizerDefaultConferencingAppType constant
newLocation = newLocationType;
}

<p className="text-emphasis mb-2 ml-1 mt-6 text-sm font-bold">{t("current_location")}:</p>
<p className="text-emphasis mb-2 ml-1 break-all text-sm">
{getHumanReadableLocationValue(booking.location, t)}
</p>
<Form
form={locationFormMethods}
handleSubmit={async (values) => {
const { locationType: newLocationType } = values;
let newLocation;
// For the locations that require organizer to type-in some values, we need the value
if (eventLocationType?.organizerInputType) {
newLocation = values[eventLocationType.variable];
} else {
// locationType itself can be used here e.g. For zoom we use the type itself which is "integrations:zoom". For Organizer's Default Conferencing App, it is OrganizerDefaultConferencingAppType constant
newLocation = newLocationType;
}
setIsLocationUpdating(true);
try {
await saveLocation({
newLocation,
credentialId: values.credentialId ?? null,
});
setIsLocationUpdating(false);
setShowLocationModal(false);
setSelectedLocation?.(undefined);
locationFormMethods.unregister([
"locationType",
"locationLink",
"locationAddress",
"locationPhoneNumber",
]);
} catch (error) {
// Let the user retry
setIsLocationUpdating(false);
}
}}>
<div className="flex flex-row space-x-3">
<div className="bg-subtle mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
<Icon name="map-pin" className="text-emphasis h-6 w-6" />
</div>
<div className="w-full">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<h3 className="text-emphasis text-lg font-medium leading-6" id="modal-title">
{t("edit_location")}
</h3>
</div>
<div className="mt-3 text-center sm:mt-0 sm:text-left" />

setIsLocationUpdating(true);
try {
await saveLocation({
newLocation,
credentialId: values.credentialId ?? null,
});
setIsLocationUpdating(false);
setShowLocationModal(false);
setSelectedLocation?.(undefined);
locationFormMethods.unregister([
"locationType",
"locationLink",
"locationAddress",
"locationPhoneNumber",
]);
} catch (error) {
// Let the user retry
setIsLocationUpdating(false);
}
}}>
<p className="text-emphasis mb-2 ml-1 mt-6 text-sm font-bold">{t("current_location")}:</p>
<p className="text-emphasis mb-2 ml-1 break-all text-sm">
{getHumanReadableLocationValue(booking.location, t)}
</p>
<QueryCell
query={locationsQuery}
success={({ data }) => {
Expand Down Expand Up @@ -328,25 +328,25 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
}}
/>
{selectedLocation && SelectedLocationInput}
<DialogFooter showDivider className="mt-8">
<Button
onClick={() => {
setShowLocationModal(false);
setSelectedLocation?.(undefined);
setEditingLocationType?.("");
locationFormMethods.unregister(["locationType", "locationLink"]);
}}
type="button"
color="secondary">
{t("cancel")}
</Button>
<Button data-testid="update-location" type="submit" disabled={isLocationUpdating}>
{t("update")}
</Button>
</DialogFooter>
</Form>
</div>
</div>
</div>
<DialogFooter showDivider className="mt-8">
<Button
onClick={() => {
setShowLocationModal(false);
setSelectedLocation?.(undefined);
setEditingLocationType?.("");
locationFormMethods.unregister(["locationType", "locationLink"]);
}}
type="button"
color="secondary">
{t("cancel")}
</Button>
<Button data-testid="update-location" type="submit" disabled={isLocationUpdating}>
{t("update")}
</Button>
</DialogFooter>
</Form>
</DialogContent>
</Dialog>
);
Expand Down
Loading