feat: Added feature of embeding availability to emails by Pradumn27 · Pull Request #10183 · calcom/cal.com

Pradumn27 · 2023-07-16T19:13:09Z

What does this PR do?

This PR adds the feature of embedding availability times to email. Have added this as another embed option where users can select their desired date and times to share and can just copy that to their email.

Technical Details:
Have added a global state of selectedDatesAndTimes this keeps track of all the selected days and the times associated with them for every eventType, have used this type for checking in the selection of multiple dates and times.

For the email preview, I had to use tables and inline styles as they worked best for our purpose of copying the content inside the divs.

Remaining Debt:
Need the illustration for this email embed from the design team.

Fixes #6533
/claim #6533

Screen.Recording.2023-07-16.at.7.09.59.PM.mov

Type of change

New feature (non-breaking change which adds functionality)

How should this be tested?

Go to your events types page
Select the embed option from the dropdown of any event or click on embed inside any particular event
Click on email embed
Add dates and times and copy
paste in your email

Mandatory Tasks

Make sure you have self-reviewed the code. A decent size PR without self-review might be rejected.

vercel · 2023-07-16T19:13:14Z

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

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 24, 2023 10:03am

vercel · 2023-07-16T19:13:15Z

@Pradumn27 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2023-07-16T19:13:22Z

Thank you for following the naming conventions! 🙏

github-actions · 2023-07-16T19:28:12Z

📦 Next.js Bundle Analysis for @calcom/web

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

Five Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (`350 KB`)
`/apps/[slug]/[...pages]`	`611.7 KB`	765.77 KB	218.79% (🔴 +52.50%)
`/availability/[schedule]`	`351.36 KB`	505.43 KB	144.41% (🟡 +2.86%)
`/booking/[uid]`	`322.4 KB`	476.47 KB	136.13% (🟢 -0.16%)
`/event-types`	`591.98 KB`	746.05 KB	213.16% (🔴 +44.91%)
`/event-types/[type]`	`475.94 KB`	630.01 KB	180.00% (🔴 +54.13%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/- <0.01%" it means that there was a change in bundle size, but it is a trivial enough amount that it can be ignored.

Pradumn27 · 2023-07-17T19:04:35Z

apps/web/components/Embed.tsx

+        illustration: (
+          <svg
+            width="100%"
+            height="100%"
+            className="rounded-md"
+            viewBox="0 0 308 265"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M0 1.99999C0 0.895423 0.895431 0 2 0H306C307.105 0 308 0.895431 308 2V263C308 264.105 307.105 265 306 265H2C0.895431 265 0 264.105 0 263V1.99999Z"
+              fill="white"
+            />
+            <rect x="24" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+            <rect x="24" y="50.5" width="120" height="76" rx="6" fill="#F3F4F6" />
+            <rect x="24" y="138.5" width="120" height="76" rx="6" fill="#F3F4F6" />
+            <rect x="156" y="50.5" width="128" height="164" rx="6" fill="#F3F4F6" />
+            <rect x="24" y="226.5" width="260" height="38.5" rx="6" fill="#F3F4F6" />
+            <rect x="226" y="223.5" width="66" height="26" rx="6" fill="#292929" />
+            <rect x="242" y="235.5" width="34" height="2" rx="1" fill="white" />
+          </svg>
+        ),
+      },


This illustration is needed from design team

Pradumn27 · 2023-07-17T19:06:16Z

apps/web/components/Embed.tsx

+          style={{
+            paddingBottom: "3px",
+            fontSize: "13px",
+            color: "black",
+            lineHeight: "1.4",
+            minWidth: "30vw",
+            maxHeight: "60vh",
+            overflowY: "auto",
+            backgroundColor: "white",


Have used inline styles here as when copying the data from this div we want the style to stay intact and in copying the content the styles need to be part of the html element rather than being computed

Pradumn27 · 2023-07-17T19:08:06Z

apps/web/components/Embed.tsx

-      className="rounded-lg p-0.5 sm:max-w-[80rem]"
-      enableOverflow
-      type="creation">
+    <DialogContent ref={dialogContentRef} className="rounded-lg p-0.5 sm:max-w-[80rem]" type="creation">


Have removed overflow from the entire Dialog as it was leading for the entire dialog to be scrolled rather than just the child divs with overflow

Pradumn27 · 2023-07-17T19:09:24Z

apps/web/components/Embed.tsx

+  useInitializeBookerStore({
+    username,
+    eventSlug: eventType?.slug ?? "",
+    eventId: eventType?.id,
+    layout: BookerLayouts.MONTH_VIEW,
+  });


Need to initialise the booker store here to access the required state variables from the store in the child components

ciaranha · 2023-07-20T09:55:32Z

@PeerRich this work for the svg embed graphic? (right)

emrysal · 2023-07-20T11:58:58Z

Two observations; Feel free to disregard both as @Jaibles will cover these anyway, just some feedback as early is better than later.

I noticed there's no vertical spacing between times like there is horizontal spacing; there needs to be some (probably 1/2th the horizontal)
It makes sense to order the dates in the email by date, not by the order they were selected in the date picker for the embed.

ciaranha · 2023-07-21T07:59:38Z

Agree with both comments by @emrysal. Vertical margin can just match the horizontal one.

Can we also make the color in the time selection pills #111827 instead of blue
The text alignment looks off vertical center in those pills also, it's sitting closer to the bottom. Please move up to vertical center

Great work and a really cool feature 👏

Pradumn27 · 2023-07-21T08:44:22Z

Thanks for the reviews @emrysal @Jaibles , will make the changes accordingly. @Jaibles can you share the figma file for the illustration will add that too then.

…al.com into feat/embed-in-emails

Pradumn27 · 2023-07-22T11:22:34Z

Have done the UI changes and also added ordering based on dates. @Jaibles @emrysal

ciaranha · 2023-07-22T14:56:41Z

Looks much better thank you @Pradumn27 🙏

hariombalhara

LGTM !! Amazing work @Pradumn27 🙏

hariombalhara · 2023-07-24T09:32:13Z

Followup:

Email Embed Illustration from @Jaibles that's already shared.
Loader on Email Embed(to prevent an empty screen) as it needs to fetch 1-2 queries

Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

Pradumn27 added 10 commits July 13, 2023 21:12

feat: initialized feature

32bc38b

feat: updates

f4cf850

chore: merge

c857446

chore: merge

14b4f83

chore: updates

2b00653

chore: updates

ceda1c1

chore: updates

b1a47c7

chore: updated and refactored code

411885a

chore: added types

fbd55aa

chore: updates

809f293

algora-pbc bot mentioned this pull request Jul 16, 2023

[CAL-915] embed times in mail #6533

Closed

vercel bot deployed to Preview – ui July 16, 2023 19:16 View deployment

chore: updated localhost to CAL_URL

963114d

vercel bot deployed to Preview – ui July 16, 2023 19:24 View deployment

PeerRich changed the title ~~Feat: Added feature of embeding availability to emails~~ feat: Added feature of embeding availability to emails Jul 16, 2023

sean-brydon requested a review from hariombalhara July 17, 2023 12:14

Pradumn27 commented Jul 17, 2023

View reviewed changes

Pradumn27 and others added 3 commits July 22, 2023 16:33

fix: UI

39be35c

Merge branch 'feat/embed-in-emails' of https://github.com/Pradumn27/c…

f34f04c

…al.com into feat/embed-in-emails

Merge branch 'main' into feat/embed-in-emails

5027345

vercel bot deployed to Preview – ui July 22, 2023 11:11 View deployment

Pradumn27 added 2 commits July 22, 2023 16:51

fix: UI

f71ebb5

Merge branch 'feat/embed-in-emails' of https://github.com/Pradumn27/c…

5ad2976

…al.com into feat/embed-in-emails

vercel bot deployed to Preview – ui July 22, 2023 11:25 View deployment

hariombalhara added 2 commits July 24, 2023 12:33

Make them same height all embeds

4f7c43b

Merge remote-tracking branch 'origin/main' into feat/embed-in-emails

c1dc6b5

hariombalhara previously approved these changes Jul 24, 2023

View reviewed changes

Remove any tyoe

0b9430f

hariombalhara dismissed their stale review via 0b9430f July 24, 2023 08:58

hariombalhara previously approved these changes Jul 24, 2023

View reviewed changes

vercel bot deployed to Preview – ui July 24, 2023 09:02 View deployment

Type fixes

d844b4f

hariombalhara dismissed their stale review via d844b4f July 24, 2023 09:28

vercel bot deployed to Preview – ui July 24, 2023 09:32 View deployment

hariombalhara approved these changes Jul 24, 2023

View reviewed changes

hariombalhara enabled auto-merge (squash) July 24, 2023 09:39

Merge branch 'main' into feat/embed-in-emails

d87abee

vercel bot deployed to Preview – ui July 24, 2023 10:03 View deployment

hariombalhara merged commit 8de75ae into calcom:main Jul 24, 2023

fritterhoff pushed a commit to hm-edu/cal.com that referenced this pull request Jul 25, 2023

feat: Added feature of embeding availability to emails (calcom#10183)

bae32a2

Co-authored-by: Peer Richelsen <peeroke@gmail.com> Co-authored-by: Hariom Balhara <hariombalhara@gmail.com>

Conversation

Pradumn27 commented Jul 16, 2023

What does this PR do?

Type of change

How should this be tested?

Mandatory Tasks

Uh oh!

vercel bot commented Jul 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Jul 16, 2023

Uh oh!

github-actions bot commented Jul 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jul 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 Next.js Bundle Analysis for @calcom/web

Five Pages Changed Size

Uh oh!

Pradumn27 Jul 17, 2023

Choose a reason for hiding this comment

Uh oh!

Pradumn27 Jul 17, 2023

Choose a reason for hiding this comment

Uh oh!

Pradumn27 Jul 17, 2023

Choose a reason for hiding this comment

Uh oh!

Pradumn27 Jul 17, 2023

Choose a reason for hiding this comment

Uh oh!

ciaranha commented Jul 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emrysal commented Jul 20, 2023

Uh oh!

ciaranha commented Jul 21, 2023

Uh oh!

Pradumn27 commented Jul 21, 2023

Uh oh!

Pradumn27 commented Jul 22, 2023

Uh oh!

ciaranha commented Jul 22, 2023

Uh oh!

hariombalhara left a comment

Choose a reason for hiding this comment

Uh oh!

hariombalhara commented Jul 24, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

vercel bot commented Jul 16, 2023 •

edited

Loading

github-actions bot commented Jul 16, 2023 •

edited

Loading

github-actions bot commented Jul 16, 2023 •

edited

Loading

ciaranha commented Jul 20, 2023 •

edited

Loading

hariombalhara commented Jul 24, 2023 •

edited

Loading