Skip to content

Commit

Permalink
fix: email displayed as organizer eventtype settings (calcom#14102)
Browse files Browse the repository at this point in the history 
* fix: email displayed as organizer eventtype settings

* fix: quotation in i18n file

* fix: unwanted changes

* fix: dropdown not visible

---------

Co-authored-by: v0ltZzie <[email protected]>
Co-authored-by: supalarry <[email protected]>
Co-authored-by: v0ltZzie <[email protected]>
  • Loading branch information
@Amit91848 @v0ltZzie @supalarry
4 people authored Mar 20, 2024
1 parent 9abf004 commit 5aa9225
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 90 deletions.
165 changes: 79 additions & 86 deletions apps/web/components/eventtype/EventAdvancedTab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { InfoIcon } from "lucide-react";
import dynamic from "next/dynamic";
import Link from "next/link";
import type { EventTypeSetupProps } from "pages/event-types/[type]";
import { useEffect, useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
Expand All @@ -20,6 +19,7 @@ import { FormBuilder } from "@calcom/features/form-builder/FormBuilder";
import type { EditableSchema } from "@calcom/features/form-builder/schema";
import { BookerLayoutSelector } from "@calcom/features/settings/BookerLayoutSelector";
import { classNames } from "@calcom/lib";
import cx from "@calcom/lib/classNames";
import { APP_NAME, IS_VISUAL_REGRESSION_TESTING, WEBSITE_URL } from "@calcom/lib/constants";
import { generateHashedLink } from "@calcom/lib/generateHashedLink";
import { useLocale } from "@calcom/lib/hooks/useLocale";
Expand Down Expand Up @@ -148,96 +148,89 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
* This will fallback to each user selected destination calendar.
*/}
<div className="border-subtle space-y-6 rounded-lg border p-6">
{displayDestinationCalendarSelector && (
<div className="flex flex-col">
<div className="flex justify-between">
<div>
<Label className="text-emphasis mb-0 font-medium">{t("add_to_calendar")}</Label>
</div>
<Link
href="/apps/categories/calendar"
target="_blank"
className="hover:text-emphasis text-default text-sm">
{t("add_another_calendar")}
</Link>
<div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
{displayDestinationCalendarSelector && (
<div className="flex w-full flex-col">
<Label className="text-emphasis mb-0 font-medium">{t("add_to_calendar")}</Label>
<Controller
name="destinationCalendar"
render={({ field: { onChange, value } }) => (
<DestinationCalendarSelector
value={value ? value.externalId : undefined}
onChange={onChange}
hidePlaceholder
hideAdvancedText
/>
)}
/>
<p className="text-subtle text-sm">{t("select_which_cal")}</p>
</div>
<Controller
name="destinationCalendar"
render={({ field: { onChange, value } }) => (
<DestinationCalendarSelector
value={value ? value.externalId : undefined}
onChange={onChange}
hidePlaceholder
hideAdvancedText
/>
)}
/>
<p className="text-subtle text-sm">{t("select_which_cal")}</p>
</div>
)}
<div className="w-full">
<TextField
label={t("event_name_in_calendar")}
type="text"
{...shouldLockDisableProps("eventName")}
placeholder={eventNamePlaceholder}
{...formMethods.register("eventName")}
addOnSuffix={
<Button
color="minimal"
size="sm"
{...(shouldLockDisableProps("eventName").disabled ? { disabled: true } : {})}
aria-label="edit custom name"
className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
onClick={() => setShowEventNameTip((old) => !old)}>
<Edit className="h-4 w-4" />
</Button>
}
/>
</div>
{displayDestinationCalendarSelector && (
<div className="w-full">
<Switch
tooltip={t("reconnect_calendar_to_use")}
label={
<>
{t("display_add_to_calendar_organizer")}
<InfoIcon className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md" />
</>
}
checked={useEventTypeDestinationCalendarEmail}
onCheckedChange={(val) => {
setUseEventTypeDestinationCalendarEmail(val);
formMethods.setValue("useEventTypeDestinationCalendarEmail", val, { shouldDirty: true });
if (val) {
showToast(t("reconnect_calendar_to_use"), "warning");
}
}}
/>
</div>
)}
{!useEventTypeDestinationCalendarEmail && verifiedSecondaryEmails.length > 1 && !team && (
)}
<div className="w-full">
<SelectField
label={t("send_event_details_to")}
placeholder={
selectedSecondaryEmailId === -1 && (
<span className="text-default min-w-0 overflow-hidden truncate whitespace-nowrap">
<Badge variant="blue">{t("default")}</Badge> {user?.email || ""}
</span>
)
}
onChange={(option) =>
formMethods.setValue("secondaryEmailId", option?.value, { shouldDirty: true })
<TextField
label={t("event_name_in_calendar")}
type="text"
{...shouldLockDisableProps("eventName")}
placeholder={eventNamePlaceholder}
{...formMethods.register("eventName")}
addOnSuffix={
<Button
color="minimal"
size="sm"
aria-label="edit custom name"
className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
onClick={() => setShowEventNameTip((old) => !old)}>
<Edit className="h-4 w-4" />
</Button>
}
value={verifiedSecondaryEmails.find(
(secondaryEmail) =>
selectedSecondaryEmailId !== -1 && secondaryEmail.value === selectedSecondaryEmailId
)}
options={verifiedSecondaryEmails}
/>
</div>
)}
</div>
<div className="space-y-2">
{displayDestinationCalendarSelector && (
<div className="w-full">
<Switch
tooltip={t("if_enabled_email_address_as_organizer")}
label={
<>
{t("display_add_to_calendar_organizer")}
<InfoIcon className="text-default hover:text-attention hover:bg-attention ms-1 inline h-4 w-4 rounded-md" />
</>
}
checked={useEventTypeDestinationCalendarEmail}
onCheckedChange={(val) => {
setUseEventTypeDestinationCalendarEmail(val);
formMethods.setValue("useEventTypeDestinationCalendarEmail", val, { shouldDirty: true });
if (val) {
showToast(t("reconnect_calendar_to_use"), "warning");
}
}}
/>
</div>
)}
{!useEventTypeDestinationCalendarEmail && verifiedSecondaryEmails.length > 0 && !team && (
<div className={cx("flex w-full flex-col", displayDestinationCalendarSelector && "pl-11")}>
<SelectField
placeholder={
selectedSecondaryEmailId === -1 && (
<span className="text-default min-w-0 overflow-hidden truncate whitespace-nowrap">
<Badge variant="blue">{t("default")}</Badge> {user?.email || ""}
</span>
)
}
onChange={(option) =>
formMethods.setValue("secondaryEmailId", option?.value, { shouldDirty: true })
}
value={verifiedSecondaryEmails.find(
(secondaryEmail) =>
selectedSecondaryEmailId !== -1 && secondaryEmail.value === selectedSecondaryEmailId
)}
options={verifiedSecondaryEmails}
/>
<p className="text-subtle mt-2 text-sm">{t("display_email_as_organizer")}</p>
</div>
)}
</div>
</div>
<BookerLayoutSelector fallbackToUserSettings isDark={selectedThemeIsDark} isOuterBorder={true} />
<div className="border-subtle space-y-6 rounded-lg border p-6">
Expand Down
8 changes: 5 additions & 3 deletions apps/web/public/static/locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -804,14 +804,16 @@
"add_attendees": "Add attendees",
"show_advanced_settings": "Show advanced settings",
"event_name": "Event Name",
"event_name_in_calendar": "Event name in calendar",
"event_name_in_calendar": "With event name",
"event_name_tooltip": "The name that will appear in calendars",
"meeting_with_user": "{Event type title} between {Organiser} & {Scheduler}",
"additional_inputs": "Additional Inputs",
"additional_input_description": "Require scheduler to input additional inputs prior the booking is confirmed",
"label": "Label",
"placeholder": "Placeholder",
"display_add_to_calendar_organizer": "Display 'Add to calendar' email as the organizer",
"display_add_to_calendar_organizer":"Use \"Add to calendar\" email as the organizer",
"display_email_as_organizer": "We'll display this email address as the organizer, and send confirmation emails here.",
"if_enabled_email_address_as_organizer": "If enabled, we'll display the email address from your \"Add to calendar\" as organizer and send confirmation emails there",
"reconnect_calendar_to_use": "Please note that you may need to disconnect and then reconnect your 'Add to Calendar' account to use this feature.",
"type": "Type",
"edit": "Edit",
Expand Down Expand Up @@ -1316,7 +1318,7 @@
"event_setup_multiple_duration_default_error": "Event Setup: Please select a valid default duration.",
"event_setup_booking_limits_error": "Booking limits must be in ascending order. [day, week, month, year]",
"event_setup_duration_limits_error": "Duration limits must be in ascending order. [day, week, month, year]",
"select_which_cal": "Select which calendar to add bookings to",
"select_which_cal": "The calendar to add bookings to",
"custom_event_name": "Custom event name",
"custom_event_name_description": "Create customised event names to display on calendar event",
"2fa_required": "Two factor authentication required",
Expand Down
4 changes: 3 additions & 1 deletion packages/features/calendars/DestinationCalendarSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,9 @@ const DestinationCalendarSelector = ({
const queryDestinationCalendar = query.data.destinationCalendar;

return (
<div className="relative" title={`${t("create_events_on")}: ${selectedOption?.label || ""}`}>
<div
className="relative table w-full table-fixed"
title={`${t("create_events_on")}: ${selectedOption?.label || ""}`}>
<Select
name="primarySelectedCalendar"
placeholder={
Expand Down

0 comments on commit 5aa9225

Please sign in to comment.