feat: Made booker layout settings more user friendly by JeroenReumkens · Pull Request #9397 · calcom/cal.diy

JeroenReumkens · 2023-06-07T16:40:02Z

What does this PR do?

Makes booker layout settings a bit more user friendly. These things have changed:

When you disable a layout as one of the enabled options, the button to mark it as default layout disables too.
If it was chosen as a default before you disabled that layout, it takes the next enabled layout and makes that default now.
If you only enable one layout, the settings for the default layout aren't shown at all

Fixes CAL-1889 CAL-1893 CAL-1894 CAL-1895

CleanShot.2023-06-07.at.18.34.22.mp4

Type of change

New feature (non-breaking change which adds functionality)

How should this be tested?

Enable and disable layouts, and ensure that the behaviour is clear.
Test that the enabled layouts are also still shown correctly on the booker page
Test with a user that doesn't have any settings set yet, and note that by default it now only shows the month view.

vercel · 2023-06-07T16:40:06Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 7, 2023 6:19pm
web	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 7, 2023 6:19pm

2 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
api	⬜️ Ignored (Inspect)			Jun 7, 2023 6:19pm
ui	⬜️ Ignored (Inspect)	Visit Preview		Jun 7, 2023 6:19pm

linear · 2023-06-07T16:40:07Z

CAL-1893 By default if no settings are set, we only want to see monthly view. This way not everyone gets the new layout without changing something themselves.

CAL-1894 Disabled buttons for default layouts if that layout is not enabled

CAL-1889 Layout toggle improvements

By default if no settings are set, we only want to see monthly view. This way not everyone gets the new layout without changing something themselves.
Disabled buttons for default layouts if that layout is not enabled
Hide default layout selection completely when you only enable one layout.

CAL-1895 Hide default layout selection completely when you only enable one layout.

JeroenReumkens · 2023-06-07T16:40:51Z

      form={formMethods}
      handleSubmit={(values) => {
-        const layoutError = validateBookerLayouts(values.defaultBookerLayouts || null);
+        const layoutError = validateBookerLayouts(values?.metadata?.defaultBookerLayouts || null);


This is an unrelated issue. I noticed that I didn't change the fieldname after I moved the layout settings to metadata, so client side validation wasn't working. It is now.

JeroenReumkens · 2023-06-07T16:41:12Z

-    defaultLayout: BookerLayouts.MONTH_VIEW,
-    enabledLayouts: bookerLayoutOptions,
-  };
+  const bookerLayouts = event.data?.profile?.bookerLayouts || defaultBookerLayoutSettings;


Instead of repeating the default settings I've moved it into a reusable variable.

JeroenReumkens · 2023-06-07T16:41:41Z

  // Converts the settings array into a boolean object, which can be used as form values.
  const toggleValues: BookerLayoutState = bookerLayoutOptions.reduce((layouts, layout) => {
    layouts[layout] = !shownSettings?.enabledLayouts
-      ? true


Before if no settings were set, all layouts would be enabled. Now we only enable the layouts that are enabled in the default settings (so only month view as of now).

JeroenReumkens · 2023-06-07T16:42:16Z

+        enabledLayouts: newEnabledLayouts,
+        // If default layout is toggled off, we set the default layout to the first enabled layout
+        // if there's none enabled, we set it to month view.
+        defaultLayout: isDefaultLayoutToggledOff


Added behaviour that if you disable the layout that's currently marked as the default, that we switch to the next best candidate. Otherwise you would have a layout marked as default that's actually a disabled radio button.

JeroenReumkens · 2023-06-07T16:42:35Z

          {bookerLayoutOptions.map((layout) => (
            <RadioGroup.Item
-              className="aria-checked:bg-emphasis hover:bg-subtle focus:bg-subtle w-full rounded-[4px] p-1 text-sm transition-colors"
+              className="aria-checked:bg-emphasis hover:[&:not(:disabled)]:bg-subtle focus:[&:not(:disabled)]:bg-subtle w-full rounded-[4px] p-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"


Style changes to not show hover effects for disabled buttons.

JeroenReumkens · 2023-06-07T16:42:59Z

  let isPremiumUsername = false;
+
+  const layoutError = validateBookerLayouts(input?.metadata?.defaultBookerLayouts || null);
+  if (layoutError) {


There was now backend validation yet for the booker layouts in the update profile handler. There is now.

JeroenReumkens · 2023-06-07T16:43:44Z

            <RadioGroup.Item
-              className="aria-checked:bg-emphasis hover:bg-subtle focus:bg-subtle w-full rounded-[4px] p-1 text-sm transition-colors"
+              className="aria-checked:bg-emphasis hover:[&:not(:disabled)]:bg-subtle focus:[&:not(:disabled)]:bg-subtle w-full rounded-[4px] p-1 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+              disabled={toggleValues[layout] === false}


This part disables this layout for being a default layout, if the layout itself is not enabled.

github-actions · 2023-06-07T16:48:29Z

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

deploysentinel · 2023-06-07T16:49:57Z

Current Playwright Test Results Summary

✅ 107 Passing - ⚠️ 4 Flaky

Run may still be in progress, this comment will be updated as current testing workflow or job completes...

(Last updated on 06/07/2023 06:15:37pm UTC)

Run Details

Running Workflow PR Update on Github Actions

Commit: d5922a1

Started: 06/07/2023 06:13:28pm UTC

⚠️ Flakes

📄 apps/web/playwright/auth/delete-account.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Can delete user account Retry 1 • Initial Attempt	0.80% (3) 3 / 376 runs failed over last 7 days	3.72% (14) 14 / 376 runs flaked over last 7 days

📄 apps/web/playwright/login.2fa.e2e.ts • 2 Flakes

Top 1 Common Error Messages

`null`	2 Test Cases Affected

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
2FA Tests should allow a user to enable 2FA and login using 2FA Retry 1 • Initial Attempt	0.54% (2) 2 / 372 runs failed over last 7 days	18.28% (68) 68 / 372 runs flaked over last 7 days
2FA Tests should allow a user to disable 2FA Retry 1 • Initial Attempt	0.54% (2) 2 / 370 runs failed over last 7 days	19.73% (73) 73 / 370 runs flaked over last 7 days

📄 packages/embeds/embed-core/playwright/tests/action-based.e2e.ts • 1 Flake

Test Case Results

Test Case	Last 7 days Failures	Last 7 days Flakes
Popup Tests should be able to reschedule Retry 1 • Initial Attempt	6.61% (15) 15 / 227 runs failed over last 7 days	93.39% (212) 212 / 227 runs flaked over last 7 days

View Detailed Build Results

PeerRich · 2023-06-07T19:57:57Z

Finally an important change: After discussing with @Jaibles we concluded that it might not be the best experience if ALL users suddenly have all layouts enabled on their booking pages after release. So instead of enabling all layouts by default when you have no setting, we actually only show the month view like in the old booker, until you manually override settings either in the event settings or in your user settings.

this has been undone right?

ideally everyone has all 3 layouts and its opt-out to remove them

ciaranha · 2023-06-07T20:00:28Z

Finally an important change: After discussing with @Jaibles we concluded that it might not be the best experience if ALL users suddenly have all layouts enabled on their booking pages after release. So instead of enabling all layouts by default when you have no setting, we actually only show the month view like in the old booker, until you manually override settings either in the event settings or in your user settings.

this has been undone right?

ideally everyone has all 3 layouts and its opt-out to remove them

as far as I know, yes.

JeroenReumkens · 2023-06-07T20:09:56Z

Finally an important change: After discussing with @Jaibles we concluded that it might not be the best experience if ALL users suddenly have all layouts enabled on their booking pages after release. So instead of enabling all layouts by default when you have no setting, we actually only show the month view like in the old booker, until you manually override settings either in the event settings or in your user settings.

this has been undone right?

ideally everyone has all 3 layouts and its opt-out to remove them

Correct. This isn't in there anymore. Let me update the description.

Udit-takkar · 2023-06-08T09:21:28Z

+
+  const layoutError = validateBookerLayouts(input?.metadata?.defaultBookerLayouts || null);
+  if (layoutError) {
+    const t = await getTranslation("en", "common");


why not const t = await getTranslation(ctx.user.locale ?? "en", "common");
?

Udit-takkar

@JeroenReumkens LGTM great work. Left just one comment

ciaranha · 2023-06-08T10:48:51Z

@Udit-takkar is this good to merge or does your comment need addressing? If so can we jump in for @JeroenReumkens to address?

Udit-takkar · 2023-06-08T11:19:32Z

@Jaibles It is good to merge. he can address the comment later

* Made booker layout settings more user friendly * Fixed tyeps and default values in appearance form for booker layout * Enable all layouts by default

Made booker layout settings more user friendly

13c5cd9

JeroenReumkens commented Jun 7, 2023

View reviewed changes

vercel Bot deployed to Preview – ui June 7, 2023 16:44 View deployment

vercel Bot deployed to Preview – cal June 7, 2023 16:46 View deployment

JeroenReumkens changed the title ~~Made booker layout settings more user friendly~~ feat: Made booker layout settings more user friendly Jun 7, 2023

JeroenReumkens added 2 commits June 7, 2023 19:19

Fixed tyeps and default values in appearance form for booker layout

5e4fec7

Enable all layouts by default

d5922a1

vercel Bot deployed to Preview – cal June 7, 2023 18:08 View deployment

vercel Bot deployed to Preview – web June 7, 2023 18:12 View deployment

Udit-takkar reviewed Jun 8, 2023

View reviewed changes

Udit-takkar approved these changes Jun 8, 2023

View reviewed changes

PeerRich added this pull request to the merge queue Jun 8, 2023

Merged via the queue into main with commit 93fc036 Jun 8, 2023

PeerRich deleted the feat/smarter-booker-layout-settings branch June 8, 2023 12:44

Conversation

JeroenReumkens commented Jun 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

How should this be tested?

Uh oh!

vercel Bot commented Jun 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

linear Bot commented Jun 7, 2023

Uh oh!

JeroenReumkens Jun 7, 2023

Choose a reason for hiding this comment

Uh oh!

JeroenReumkens Jun 7, 2023

Choose a reason for hiding this comment

Uh oh!

JeroenReumkens Jun 7, 2023

Choose a reason for hiding this comment

Uh oh!

JeroenReumkens Jun 7, 2023

Choose a reason for hiding this comment

Uh oh!

JeroenReumkens Jun 7, 2023

Choose a reason for hiding this comment

Uh oh!

JeroenReumkens Jun 7, 2023

Choose a reason for hiding this comment

Uh oh!

JeroenReumkens Jun 7, 2023

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jun 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Next.js Bundle Analysis for @calcom/web

Uh oh!

deploysentinel Bot commented Jun 7, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Playwright Test Results Summary

⚠️ Flakes

Test Case Results

Top 1 Common Error Messages

Test Case Results

Test Case Results

Uh oh!

PeerRich commented Jun 7, 2023

Uh oh!

ciaranha commented Jun 7, 2023

Uh oh!

JeroenReumkens commented Jun 7, 2023

Uh oh!

Udit-takkar Jun 8, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Udit-takkar left a comment

Choose a reason for hiding this comment

Uh oh!

ciaranha commented Jun 8, 2023

Uh oh!

Udit-takkar commented Jun 8, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

JeroenReumkens commented Jun 7, 2023 •

edited

Loading

vercel Bot commented Jun 7, 2023 •

edited

Loading

github-actions Bot commented Jun 7, 2023 •

edited

Loading

deploysentinel Bot commented Jun 7, 2023 •

edited

Loading

Udit-takkar Jun 8, 2023 •

edited

Loading