fix(@cal.com/web): update debounce logic to work correctly and not show non-premium usernames as premium

[theonly1me]

fix(@cal.com/web): update debounce logic to work correctly and not show non-premium usernames as premium

• removes redundant useMemo hook from UsernameTextfield.tsx & PremiumTextField.tsx
• cancles the debounceAPICall on every unmount of UsernameTextfield.tsx & PremiumTextfield.tsx via useEffect cleanup function

Fixes #15628

What does this PR do?

• Fixes #15628
• Fixes CAL-XXXX (Linear issue number - should be visible at the bottom of the GitHub issue description)

Video

In the video below you can see the debounce logic now works as expected and API requests to POST /api/username only happen when user is done typing. Towards the end of the video, I also show a comparison with cal.com/getting-started production site.

https://github.com/calcom/cal.com/assets/19223383/41e10ad4-3caa-4aff-9da9-4aeca96cb506

Mandatory Tasks (DO NOT REMOVE)

• [x] I have self-reviewed the code (A decent size PR without self-review might be rejected).
• [ ] I have added a Docs issue here 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.

How should this be tested?

• Are there environment variables that should be set? No
• What are the minimal test data to have? Just the basic seed data
• What is expected (happy path) to have (input and output)? When you enter liukang or some non-premium username in localhost:3000/getting-started it shouldn't show an incorrect Premium state
• Any other important info that could help to test that PR - I've added the details in the Issue description of #15628

[vercel[bot]]

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

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[graphite-app[bot]]

Graphite Automations

"Add community label" took an action on this PR • (06/30/24)

1 label was added to this PR based on Keith Williams's automation.

"Add consumer team as reviewer" took an action on this PR • (06/30/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add foundation team as reviewer" took an action on this PR • (07/01/24)

1 reviewer was added to this PR based on Keith Williams's automation.

[theonly1me]

@Amit91848 I've updated the code to use the pre-existing useDebounce hook. The debounce logic will also work as expected on both the UsernameTextfield and PremiumTextfield components, video references below.

Can you take another look at the PR?

Video demonstrations:

UsernameTextfield

https://github.com/calcom/cal.com/assets/19223383/24dd8175-64d5-46d3-b6fa-e509e935353b

PremiumTextfield

https://github.com/calcom/cal.com/assets/19223383/4400ede2-2d5b-4c34-81b5-f3f0ece1546a

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

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

Seventy-eight 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	286.64 KB	514.33 KB	146.95% (🟡 +0.70%)
/apps/[slug]	304.22 KB	531.92 KB	151.98% (🟡 +0.70%)
/apps/[slug]/[...pages]	595.02 KB	822.72 KB	235.06% (🟡 +0.68%)
/apps/categories	262.99 KB	490.69 KB	140.20% (🟡 +0.70%)
/apps/categories/[category]	268.74 KB	496.44 KB	141.84% (🟡 +0.70%)
/apps/installed/[category]	285.09 KB	512.79 KB	146.51% (🟡 +0.14%)
/auth/saml-idp	12.22 KB	239.92 KB	68.55% (🟢 -20.80%)
/availability/[schedule]	417.04 KB	644.74 KB	184.21% (🟡 +0.21%)
/bookings/[status]	332.67 KB	560.37 KB	160.11% (🟡 +0.70%)
/enterprise	263.04 KB	490.74 KB	140.21% (🟡 +0.70%)
/event-types	568.05 KB	795.75 KB	227.36% (🟡 +0.77%)
/event-types/[type]	443.71 KB	671.41 KB	191.83% (🟡 +0.63%)
/insights	481.4 KB	709.1 KB	202.60% (🟡 +0.25%)
/more	262.55 KB	490.25 KB	140.07% (🟡 +0.70%)
/settings/admin	268.94 KB	496.64 KB	141.90% (🟡 +0.70%)
/settings/admin/apps	282.18 KB	509.88 KB	145.68% (🟡 +0.67%)
/settings/admin/apps/[category]	282.17 KB	509.86 KB	145.68% (🟡 +0.67%)
/settings/admin/flags	272.66 KB	500.36 KB	142.96% (🟡 +0.67%)
/settings/admin/impersonation	269.33 KB	497.03 KB	142.01% (🟡 +0.70%)
/settings/admin/lockedSMS	290.37 KB	518.07 KB	148.02% (🟡 +0.71%)
/settings/admin/lockedSMS/UsersTable	79.98 KB	307.68 KB	87.91% (🟢 -0.14%)
/settings/admin/lockedSMS/lockedSMSView	119.46 KB	347.16 KB	99.19% (🟢 -0.17%)
/settings/admin/oAuth	280.91 KB	508.61 KB	145.32% (🟡 +0.66%)
/settings/admin/oAuth/oAuthView	95.5 KB	323.2 KB	92.34% (🟢 -0.17%)
/settings/admin/orgMigrations/_OrgMigrationLayout	257.73 KB	485.42 KB	138.69% (🟡 +0.66%)
/settings/admin/orgMigrations/moveTeamToOrg	307.61 KB	535.3 KB	152.94% (🟡 +0.72%)
/settings/admin/orgMigrations/moveUserToOrg	327.38 KB	555.08 KB	158.59% (🟡 +0.73%)
/settings/admin/orgMigrations/removeTeamFromOrg	307.37 KB	535.07 KB	152.88% (🟡 +0.71%)
/settings/admin/orgMigrations/removeUserFromOrg	307.38 KB	535.08 KB	152.88% (🟡 +0.71%)
/settings/admin/organizations	270.83 KB	498.53 KB	142.44% (🟡 +0.70%)
/settings/admin/organizations/[id]/edit	269.49 KB	497.19 KB	142.05% (🟡 +0.70%)
/settings/admin/users	271.6 KB	499.29 KB	142.66% (🟡 +0.70%)
/settings/admin/users/[id]/edit	400.63 KB	628.33 KB	179.52% (🟡 +0.69%)
/settings/admin/users/add	400.29 KB	627.99 KB	179.43% (🟡 +0.68%)
/settings/billing	269.15 KB	496.84 KB	141.96% (🟡 +0.69%)
/settings/developer/api-keys	273.43 KB	501.13 KB	143.18% (🟡 +0.67%)
/settings/developer/webhooks	273.6 KB	501.3 KB	143.23% (🟡 +0.67%)
/settings/developer/webhooks/[id]	274.55 KB	502.25 KB	143.50% (🟡 +0.68%)
/settings/developer/webhooks/new	274.58 KB	502.28 KB	143.51% (🟡 +0.67%)
/settings/my-account/appearance	321.05 KB	548.75 KB	156.79% (🟡 +0.39%)
/settings/my-account/calendars	281.06 KB	508.76 KB	145.36% (🟡 +0.80%)
/settings/my-account/general	384.55 KB	612.25 KB	174.93% (🟡 +0.68%)
/settings/my-account/out-of-office	274.07 KB	501.77 KB	143.36% (🟡 +0.67%)
/settings/my-account/profile	416.53 KB	644.22 KB	184.06% (🟡 +0.55%)
/settings/organizations/[id]/about	159.67 KB	387.37 KB	110.68% (🟡 +0.47%)
/settings/organizations/[id]/add-teams	159.66 KB	387.36 KB	110.67% (🟡 +0.48%)
/settings/organizations/admin-api	269.1 KB	496.8 KB	141.94% (🟡 +0.70%)
/settings/organizations/appearance	292.76 KB	520.46 KB	148.70% (🟡 +0.67%)
/settings/organizations/billing	269.18 KB	496.88 KB	141.97% (🟡 +0.70%)
/settings/organizations/dsync	301.81 KB	529.5 KB	151.29% (🟡 +0.70%)
/settings/organizations/general	357.39 KB	585.09 KB	167.17% (🟡 +0.67%)
/settings/organizations/members	406.9 KB	634.59 KB	181.31% (🟡 +0.21%)
/settings/organizations/new	159.67 KB	387.37 KB	110.68% (🟡 +0.47%)
/settings/organizations/privacy	274.59 KB	502.29 KB	143.51% (🟡 +0.67%)
/settings/organizations/profile	409.25 KB	636.95 KB	181.99% (🟡 +0.60%)
/settings/organizations/sso	279.77 KB	507.47 KB	144.99% (🟡 +0.70%)
/settings/organizations/teams/other	270.01 KB	497.71 KB	142.20% (🟡 +0.70%)
/settings/organizations/teams/other/[id]/appearance	281.64 KB	509.34 KB	145.52% (🟡 +0.68%)
/settings/organizations/teams/other/[id]/members	276.5 KB	504.2 KB	144.06% (🟡 +0.67%)
/settings/organizations/teams/other/[id]/profile	480.16 KB	707.86 KB	202.25% (🟡 +0.66%)
/settings/platform	267.65 KB	495.35 KB	141.53% (🟡 +0.70%)
/settings/platform/new	120.72 KB	348.41 KB	99.55% (🟡 +0.52%)
/settings/platform/oauth-clients/[clientId]/edit	265.96 KB	493.66 KB	141.05% (🟡 +0.70%)
/settings/platform/oauth-clients/create	265.1 KB	492.8 KB	140.80% (🟡 +0.70%)
/settings/security/impersonation	274.25 KB	501.95 KB	143.41% (🟡 +0.67%)
/settings/security/password	312.4 KB	540.1 KB	154.31% (🟡 +0.69%)
/settings/security/sso	279.22 KB	506.92 KB	144.83% (🟡 +0.70%)
/settings/security/two-factor-auth	277.73 KB	505.43 KB	144.41% (🟡 +0.67%)
/settings/teams	268.68 KB	496.38 KB	141.82% (🟡 +0.70%)
/settings/teams/[id]/appearance	281.62 KB	509.32 KB	145.52% (🟡 +0.67%)
/settings/teams/[id]/billing	269.18 KB	496.88 KB	141.97% (🟡 +0.70%)
/settings/teams/[id]/members	386.62 KB	614.32 KB	175.52% (🟡 +0.68%)
/settings/teams/[id]/profile	480.99 KB	708.69 KB	202.48% (🟡 +0.68%)
/teams	262.78 KB	490.48 KB	140.14% (🟡 +0.70%)
/upgrade	262.9 KB	490.6 KB	140.17% (🟡 +0.70%)
/video/[uid]	291.22 KB	518.92 KB	148.26% (🟢 -0.16%)
/workflows	294.65 KB	522.35 KB	149.24% (🟡 +0.71%)
/workflows/[workflow]	420.57 KB	648.27 KB	185.22% (🟡 +0.26%)

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 "+/-