feat: Added Date in question on Booking page
What does this PR do?
Added a new input type "Date" for booking questions.
- Fixes #23952
- Fixes CAL-6434
Visual Demo (For contributors especially)
For screenshot of the booking page: comment
Mandatory Tasks (DO NOT REMOVE)
- [x] I have self-reviewed the code (A decent size PR without self-review might be rejected).
- [ ] I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox.
- [ ] I confirm automated tests are in place that prove my fix is effective or that my feature works.
@saurabhraghuvanshii is attempting to deploy a commit to the cal Team on Vercel.
A member of the Team first needs to authorize it.
Walkthrough
Adds a new "date" booking-question type across the codebase. Introduces a DateWidget (uses DatePicker) and registers it for query-builder/form-builder usage; extends form builder propsTypes, Components map, FormBuilderField rendering, fieldTypes config, and schema validation (preprocess + superRefine enforcing YYYY‑MM‑DD and required handling). Extends platform enums, Prisma/Zod fieldType enum, and event-type input/output models to include date. Updates API transformers to produce date outputs. Adds backend and Playwright e2e tests for creation, update, validation, prefill, and UI interactions with date fields.
Possibly related PRs
- calcom/cal.com#22770 — Changes DatePicker props and setSelectedDate signatures; relevant because this PR adds and uses a DateWidget that imports/uses DatePicker.
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | ⚠️ Warning | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (4 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title Check | ✅ Passed | The pull request title clearly describes the primary change—adding a Date input type to booking questions on the Booking page—and is concise and directly relevant to the changeset without using generic or misleading wording. |
| Linked Issues Check | ✅ Passed | The changes fulfill the objectives from linked issues #23952 and CAL-6434 by introducing a new “Date” input type for booking questions, integrating it with the project’s date picker component across form-builder, API, and data models, and including UI and E2E tests to verify behavior. |
| Out of Scope Changes Check | ✅ Passed | All modifications align with the linked issues’ goal of adding a Date input type for booking questions, and no unrelated changes outside the scope of introducing and testing the date field have been detected. |
| Description Check | ✅ Passed | The PR description accurately states that a new Date input type for booking questions is being added, references the fixed issues, and includes visual demos; it is clearly related to the changeset. |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
📜 Recent review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📥 Commits
Reviewing files that changed from the base of the PR and between 46e552a55c4567e6626972ab878140c24736ddea and d6ea6c8171e3aec1f4f118b14f1775b4cb71780a.
📒 Files selected for processing (2)
apps/api/v2/src/ee/event-types/event-types_2024_06_14/controllers/event-types.controller.e2e-spec.ts(5 hunks)apps/api/v2/src/ee/event-types/event-types_2024_06_14/transformers/internal-to-api/booking-fields.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/api/v2/src/ee/event-types/event-types_2024_06_14/transformers/internal-to-api/booking-fields.ts
- apps/api/v2/src/ee/event-types/event-types_2024_06_14/controllers/event-types.controller.e2e-spec.ts
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Install dependencies / Yarn install & cache
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
@Udit-takkar done
@saurabhraghuvanshii Thank you for this PR. Can you please provide a Loom Video of the solution as well as add a test confirming your changes work? We can't merge the PR unless there's a test confirming your solution works as expected. 🙏
@alishaz-polymath in description video is added
@alishaz-polymath in description video is added
I don't see the video link in the description, only two screenshots. Am I missing something? 🤔
@alishaz-polymath in description video is added
I don't see the video link in the description, only two screenshots. Am I missing something? 🤔
Sorry, i thought I added a video, i update soon.
@alishaz-polymath in description video is added
I don't see the video link in the description, only two screenshots. Am I missing something? 🤔
Sorry, i thought I added a video, i update soon.
Thank you. A loom in the description and an E2E test for the new field should suffice 🙌
done ....
@saurabhraghuvanshii Also these tests are failing
3 failed [@***com/web] › apps/web/playwright/manage-booking-questions.e2e.ts:36:9 › Manage Booking Questions › For User EventType › Do a booking with a Address type question and verify a few thing in b/w [@***com/web] › apps/web/playwright/manage-booking-questions.e2e.ts:103:9 › Manage Booking Questions › For User EventType › Do a booking with a Date type question and verify a few thing in b/w [@***com/web] › apps/web/playwright/manage-booking-questions.e2e.ts:400:9 › Manage Booking Questions › For Team EventType › Do a booking with a user added question and verify a few thing in b/w
@Udit-takkar done update both files
@saurabhraghuvanshii Tests are still failing, can you please fix those first.
You can check these here https://github.com/calcom/cal.com/actions/runs/18271666284/job/52015669338?pr=23957
@alishaz-polymath @Udit-takkar now tests are passed, can you check.
Hey @Udit-takkar I think now this Pr is completed.
@alishaz-polymath @Udit-takkar tests are passing in local but failing on Pr workflows
Consider splitting slow test files to speed up parallel execution
1 passed (3.3m)
To open last HTML report run:
yarn playwright show-report test-results/reports/playwright-html-report
saurabh:~/Oss/cal.com$```
@alishaz-polymath @Udit-takkar Now all tests are passing, checked multiple times.
@alishaz-polymath @Udit-takkar Hey, just a reminder it’s been a while, could you please take a look at this PR?
@saurabhraghuvanshii works fine for me. I'll ask for one more review
Hi @Udit-takkar @saurabhraghuvanshii - It looks like this component does not take into account the selected timezone of the booker; so it can show incorrect dates when the system time is different from the selected timezone, albeit rare.
Could we fix this?
thanks @emrysal I'll look into this
@saurabhraghuvanshii This test is erroring out with timeout
Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
Test timeout of 120000ms exceeded.
Error: page.waitForResponse: Test timeout of 120000ms exceeded.
=========================== logs ===========================
waiting for response "/api/trpc/eventTypes/heavy/update?batch=1"
============================================================
at apps/web/playwright/lib/testUtils.ts:499
497 | { action = () => page.locator('[type="submit"]').click(), expectedStatusCode = 200 } = {}
498 | ) {
> 499 | const submitPromise = page.waitForResponse(url);
| ^
500 | await action();
501 | const response = await submitPromise;
502 | expect(response.status()).toBe(expectedStatusCode);
at submitAndWaitForResponse (/home/runner/actions-runner/_work/***.com/***.com/apps/web/playwright/lib/testUtils.ts:499:30)
at saveEventType (/home/runner/actions-runner/_work/***.com/***.com/apps/web/playwright/manage-booking-questions-date.e2e.ts:418:35)
at addQuestionAndSave (/home/runner/actions-runner/_work/***.com/***.com/apps/web/playwright/manage-booking-questions-date.e2e.ts:325:11)
at /home/runner/actions-runner/_work/***.com/***.com/apps/web/playwright/manage-booking-questions-date.e2e.ts:47:17
at /home/runner/actions-runner/_work/***.com/***.com/apps/web/playwright/manage-booking-questions-date.e2e.ts:46:13
attachment #1: trace (application/zip) ─────────────────────────────────────────────────────────
test-results/results/manage-booking-questions-d-ce41c--verify-a-few-things-in-b-w--***com-web-retry2/trace.zip
Usage:
yarn playwright show-trace test-results/results/manage-booking-questions-d-ce41c--verify-a-few-things-in-b-w--***com-web-retry2/trace.zip
────────────────────────────────────────────────────────────────────────────────────────────────
Slow test file: [@***com/web] › apps/web/playwright/lo***e.e2e.ts (59.3s)
Consider splitting slow test files to speed up parallel execution
1 failed
[@***com/web] › apps/web/playwright/manage-booking-questions-date.e2e.ts:27:13 › Manage Booking Questions - Date Type › For User EventType › Do a booking with a Date type question and verify a few things in b/w
@alishaz-polymath All tests have passed. Can you review once?
@supalarry Can you review this as well please 🙏