feat: Implement editable OOO events feature

apps/web/playwright/out-of-office.e2e.ts

@@ -17,15 +17,17 @@ test.describe("Out of office", () => {
  await user.apiLogin();
 
  await page.goto("/settings/my-account/out-of-office");
+ await page.waitForLoadState("networkidle");
 
  await page.getByTestId("add_entry_ooo").click();
+ await page.waitForLoadState("networkidle");
  await page.getByTestId("reason_select").click();
 
  await page.getByTestId("select-option-4").click();
 
  await page.getByTestId("notes_input").click();
  await page.getByTestId("notes_input").fill("Demo notes");
- await page.getByTestId("create-entry-ooo-redirect").click();
+ await page.getByTestId("create-or-edit-entry-ooo-redirect").click();
 
  await expect(page.locator(`data-testid=table-redirect-n-a`)).toBeVisible();
  });
@@ -62,8 +64,10 @@ test.describe("Out of office", () => {
  await user.apiLogin();
 
  await page.goto(`/settings/my-account/out-of-office`);
+ await page.waitForLoadState("networkidle");
 
  await page.getByTestId("add_entry_ooo").click();
+ await page.waitForLoadState("networkidle");
  await page.getByTestId("reason_select").click();
 
  await page.getByTestId("select-option-4").click();
@@ -79,12 +83,98 @@ test.describe("Out of office", () => {
  await page.locator("#react-select-3-input").press("Enter");
 
  // send request
- await page.getByTestId("create-entry-ooo-redirect").click();
+ await page.getByTestId("create-or-edit-entry-ooo-redirect").click();
 
  // expect table-redirect-toUserId to be visible
  await expect(page.locator(`data-testid=table-redirect-${userTo.username}`)).toBeVisible();
  });
 
+ test("User can edit out of office entry", async ({ page, users }) => {
+ const user = await users.create({ name: "userOne" });
+ const userTo = await users.create({ name: "userTwo" });
+ const userToSecond = await users.create({ name: "userThree" });
+
+ const team = await prisma.team.create({
+ data: {
+ name: "test-insights",
+ slug: `test-insights-${Date.now()}-${randomString(5)}}`,
+ },
+ });
+
+ // create memberships
+ await prisma.membership.createMany({
+ data: [
+ {
+ userId: user.id,
+ teamId: team.id,
+ accepted: true,
+ role: "ADMIN",
+ },
+ {
+ userId: userTo.id,
+ teamId: team.id,
+ accepted: true,
+ role: "ADMIN",
+ },
+ {
+ userId: userToSecond.id,
+ teamId: team.id,
+ accepted: true,
+ role: "ADMIN",
+ },
+ ],
+ });
+
+ // Skip creating the ooo entry through front-end as we can assume that it has already been tested above.
+ const uuid = uuidv4();
+ await prisma.outOfOfficeEntry.create({
+ data: {
+ start: dayjs().startOf("day").toDate(),
+ end: dayjs().startOf("day").add(1, "w").toDate(),
+ uuid,
+ user: { connect: { id: user.id } },
+ toUser: { connect: { id: userTo.id } },
+ createdAt: new Date(),
+ reason: {
+ connect: {
+ id: 1,
+ },
+ },
+ },
+ });
+
+ await user.apiLogin();
+
+ await page.goto(`/settings/my-account/out-of-office`);
+ await page.waitForLoadState("networkidle");
+
+ // expect table-redirect-toUserId to be visible
+ await expect(page.locator(`data-testid=table-redirect-${userTo.username}`)).toBeVisible();
+
+ // Open the edit modal and change redirect user and note.
+ await page.getByTestId(`ooo-edit-${userTo.username}`).click();
+
+ await page.getByTestId("notes_input").click();
+ await page.getByTestId("notes_input").fill("Changed notes");
+
+ await page.getByTestId("team_username_select").click();
+
+ await page.locator("#react-select-3-input").fill("userThree");
+ await page.locator("#react-select-3-input").press("Enter");
+
+ // send request
+ await page.getByTestId("create-or-edit-entry-ooo-redirect").click();
+
+ // expect entry with new username exist.
+ await expect(page.locator(`data-testid=table-redirect-${userToSecond.username}`)).toBeVisible();
+
+ // expect new note to be present.
+ await expect(page.locator(`data-testid=ooo-entry-note-${userToSecond.username}`)).toBeVisible();
+ await expect(page.locator(`data-testid=ooo-entry-note-${userToSecond.username}`)).toContainText(
+ "Changed notes"
+ );
+ });
+
  test("Profile redirection", async ({ page, users }) => {
  const user = await users.create({ name: "userOne" });
  const userTo = await users.create({ name: "userTwo" });
@@ -106,6 +196,7 @@ test.describe("Out of office", () => {
  });
 
  await page.goto(`/${user.username}`);
+ await page.waitForLoadState("networkidle");
 
  const eventTypeLink = page.locator('[data-testid="event-type-link"]').first();
  await eventTypeLink.click();

apps/web/public/static/locales/en/common.json

@@ -2348,7 +2348,13 @@
  "success_entry_created": "Successfully created a new entry",
  "booking_redirect_email_subject": "Booking redirect notification",
  "booking_redirect_email_title": "Booking Redirect Notification",
- "booking_redirect_email_description": "You have received a booking redirection from {{toName}} so their profile links will be redirect to yours for the time interval: ",
+ "booking_redirect_email_description": "You have received a booking redirection from {{eventOwner}} so their profile links will be redirect to yours for the time interval: \"{{dates}}\"",
+ "booking_redirect_updated_email_subject": "Booking redirect edit notification",
+ "booking_redirect_updated_email_title": "Booking Redirect Edit Notification",
+ "booking_redirect_updated_email_description": "Your booking redirection from {{eventOwner}} for interval \"{{oldDates}}\" have been udpated. New time interval for the redirection is: \"{{dates}}\"",
+ "booking_redirect_cancelled_email_subject": "Booking redirect cancel notification",
+ "booking_redirect_cancelled_email_title": "Booking Redirect Cancel Notification",
+ "booking_redirect_cancelled_email_description": "Your booking redirection from {{eventOwner}}, for time interval \"{{dates}}\" have been cancelled.",
  "success_accept_booking_redirect": "You have accepted this booking redirect request.",
  "success_reject_booking_redirect": "You have rejected this booking redirect request.",
  "copy_link_booking_redirect_request": "Copy link to share request",
@@ -2359,6 +2365,7 @@
  "redirect_team_disabled": "Provide a link to a team member when OOO (Team plan required)",
  "out_of_office_unavailable_list": "Out of office unavailability list",
  "success_deleted_entry_out_of_office": "Successfully deleted entry",
+ "success_edited_entry_out_of_office": "Successfully edited entry",
  "temporarily_out_of_office": "Temporarily Out-Of-Office?",
  "add_a_redirect": "Add a redirect",
  "create_entry": "Create entry",
@@ -2486,6 +2493,7 @@
  "ooo_create_entry_modal": "Go Out of Office",
  "ooo_select_reason": "Select reason",
  "create_an_out_of_office": "Go Out of Office",
+ "edit_an_out_of_office": "Edit Out of Office Entry",
  "submit_feedback": "Submit Feedback",
  "host_no_show": "Your host didn't show up",
  "no_show_description": "You can reschedule another meeting with them",

packages/emails/src/templates/BookingRedirectEmailNotification.tsx

@@ -6,19 +6,39 @@ export const BookingRedirectEmailNotification = (
 ) => {
  return (
  <BaseEmailHtml
- subject={props.language("booking_redirect_email_subject")}
- title={props.language("booking_redirect_email_title")}>
+ subject={props.language(
+ {
+ add: "booking_redirect_email_subject",
+ update: "booking_redirect_updated_email_subject",
+ cancel: "booking_redirect_cancelled_email_subject",
+ }[props.action]
+ )}
+ title={props.language(
+ {
+ add: "booking_redirect_email_title",
+ update: "booking_redirect_updated_email_title",
+ cancel: "booking_redirect_cancelled_email_title",
+ }[props.action]
+ )}>
  <p
  style={{
  color: "black",
  fontSize: "16px",
  lineHeight: "24px",
  fontWeight: "400",
  }}>
- {props.language("booking_redirect_email_description", {
- toName: props.toName,
- })}
- {props.dates}
+ {props.language(
+ {
+ add: "booking_redirect_email_description",
+ update: "booking_redirect_updated_email_description",
+ cancel: "booking_redirect_cancelled_email_description",
+ }[props.action],
+ {
+ eventOwner: props.eventOwner,
+ dates: props.dates,
+ oldDates: props.oldDates ?? "",
+ }
+ )}
  <br />
  <div
  style={{

packages/emails/templates/booking-redirect-notification.ts

@@ -8,9 +8,12 @@ import BaseEmail from "./_base-email";
 export interface IBookingRedirect {
  language: TFunction;
  fromEmail: string;
+ eventOwner: string;
  toEmail: string;
  toName: string;
+ oldDates?: string;
  dates: string;
+ action: "add" | "update" | "cancel";
 }
 
 export default class BookingRedirectNotification extends BaseEmail {
@@ -26,7 +29,13 @@ export default class BookingRedirectNotification extends BaseEmail {
  return {
  to: `${this.bookingRedirect.toName} <${this.bookingRedirect.toEmail}>`,
  from: `${EMAIL_FROM_NAME} <${this.getMailerOptions().from}>`,
- subject: this.bookingRedirect.language("booking_redirect_email_subject"),
+ subject: this.bookingRedirect.language(
+ {
+ add: "booking_redirect_email_subject",
+ update: "booking_redirect_updated_email_subject",
+ cancel: "booking_redirect_cancelled_email_subject",
+ }[this.bookingRedirect.action]
+ ),
  html: await renderEmail("BookingRedirectEmailNotification", {
  ...this.bookingRedirect,
  }),