fixed /booking skeleton (#2722)

* fixed /booking skeleton

* nit

apps/web/components/App.tsx

@@ -84,7 +84,7 @@ export default function App({
   }, []);
   return (
     <>
-      <Shell large>
+      <Shell large isPublic>
         <div className="-mx-4 md:-mx-8">
           <div className="bg-gray-50 px-4">
             <Link href="/apps">

apps/web/components/booking/SkeletonLoader.tsx

@@ -2,8 +2,6 @@ import React from "react";
 
 import { SkeletonText } from "@calcom/ui";
 
-import BookingsShell from "@components/BookingsShell";
-
 function SkeletonLoader() {
   return (
     <ul className="mt-6 animate-pulse divide-y divide-neutral-200 border border-gray-200 bg-white sm:mx-0 sm:overflow-hidden">
@@ -22,10 +20,9 @@ function SkeletonItem() {
       <div className="flex-grow truncate text-sm">
         <div className="flex">
           <div className="flex flex-col space-y-2">
-            <SkeletonText width="32" height="5" />
+            <SkeletonText width="16" height="5" />
-            <SkeletonText width="16" height="4" />
+            <SkeletonText width="32" height="4" />
           </div>
-          <SkeletonText width="24" height="5" className="ml-4" />
         </div>
       </div>
       <div className="mt-4 hidden flex-shrink-0 sm:mt-0 sm:ml-5 lg:flex">

apps/web/components/booking/pages/BookingPage.tsx

@@ -24,18 +24,11 @@ import { Frequency as RRuleFrequency } from "rrule";
 import { v4 as uuidv4 } from "uuid";
 import { z } from "zod";
 
-import {
+import { useEmbedNonStylesConfig, useIsBackgroundTransparent, useIsEmbed } from "@calcom/embed-core";
-  useIsEmbed,
-  useEmbedStyles,
-  useIsBackgroundTransparent,
-  useEmbedType,
-  useEmbedNonStylesConfig,
-} from "@calcom/embed-core";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import { createPaymentLink } from "@calcom/stripe/client";
-import { RecurringEvent } from "@calcom/types/Calendar";
 import { Button } from "@calcom/ui/Button";
 import { Tooltip } from "@calcom/ui/Tooltip";
 import { EmailInput, Form } from "@calcom/ui/form/fields";
@@ -50,7 +43,6 @@ import createRecurringBooking from "@lib/mutations/bookings/create-recurring-boo
 import { parseDate, parseRecurringDates } from "@lib/parseDate";
 import slugify from "@lib/slugify";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
-import { BookingCreateBody } from "@lib/types/booking";
 
 import CustomBranding from "@components/CustomBranding";
 import AvatarGroup from "@components/ui/AvatarGroup";

apps/web/components/team/MemberListItem.tsx

@@ -4,6 +4,7 @@ import { MembershipRole } from "@prisma/client";
 import Link from "next/link";
 import { useState } from "react";
 
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import showToast from "@calcom/lib/notification";
 import Button from "@calcom/ui/Button";
@@ -17,7 +18,6 @@ import Dropdown, {
 import { Tooltip } from "@calcom/ui/Tooltip";
 import TeamAvailabilityModal from "@ee/components/team/availability/TeamAvailabilityModal";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import useCurrentUserId from "@lib/hooks/useCurrentUserId";
 import { inferQueryOutput, trpc } from "@lib/trpc";
 
@@ -74,7 +74,7 @@ export default function MemberListItem(props: Props) {
         <div className="flex w-full flex-col justify-between sm:flex-row">
           <div className="flex">
             <Avatar
-              imageSrc={getPlaceholderAvatar(props.member?.avatar, name)}
+              imageSrc={WEBSITE_URL + "/" + props.member.username + "/avatar.png"}
               alt={name || ""}
               className="h-9 w-9 rounded-full"
             />

apps/web/components/team/screens/Team.tsx

@@ -5,9 +5,9 @@ import Link from "next/link";
 import { TeamPageProps } from "pages/team/[slug]";
 import React from "react";
 
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
 import { useLocale } from "@lib/hooks/useLocale";
 
 import Avatar from "@components/ui/Avatar";
@@ -52,7 +52,7 @@ const Team = ({ team }: TeamPageProps) => {
           <div>
             <Avatar
               alt={member.name || ""}
-              imageSrc={getPlaceholderAvatar(member.avatar, member.username)}
+              imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
               className="-mt-4 h-12 w-12"
             />
             <section className="mt-2 w-full space-y-1">

apps/web/ee/components/apiKeys/ApiKeyListContainer.tsx

@@ -24,7 +24,7 @@ export default function ApiKeyListContainer() {
       query={query}
       success={({ data }) => (
         <>
-          <div className=" flex flex-col justify-between truncate pl-2 pr-1 sm:flex-row">
+          <div className="flex flex-col justify-between truncate pl-2 pr-1 sm:flex-row">
             <div className="mt-9">
               <h2 className="font-cal text-lg font-medium leading-6 text-gray-900">{t("api_keys")}</h2>
               <p className="mt-1 mb-5 text-sm text-gray-500">{t("api_keys_subtitle")}</p>

apps/web/ee/components/team/availability/TeamAvailabilityModal.tsx

@@ -3,7 +3,8 @@ import utc from "dayjs/plugin/utc";
 import React, { useState, useEffect } from "react";
 import TimezoneSelect, { ITimezone } from "react-timezone-select";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
+import { WEBSITE_URL } from "@calcom/lib/constants";
+
 import { trpc, inferQueryOutput } from "@lib/trpc";
 
 import Avatar from "@components/ui/Avatar";
@@ -36,7 +37,7 @@ export default function TeamAvailabilityModal(props: Props) {
       <div className="min-w-64 w-64 space-y-5 p-5 pr-0">
         <div className="flex">
           <Avatar
-            imageSrc={getPlaceholderAvatar(props.member?.avatar, props.member?.name as string)}
+            imageSrc={WEBSITE_URL + "/" + props.member?.username + "/avatar.png"}
             alt={props.member?.name || ""}
             className="h-14 w-14 rounded-full"
           />

apps/web/ee/components/team/availability/TeamAvailabilityScreen.tsx

@@ -4,7 +4,8 @@ import TimezoneSelect, { ITimezone } from "react-timezone-select";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
 
-import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
+import { WEBSITE_URL } from "@calcom/lib/constants";
+
 import { trpc, inferQueryOutput } from "@lib/trpc";
 
 import Avatar from "@components/ui/Avatar";
@@ -45,7 +46,7 @@ export default function TeamAvailabilityScreen(props: Props) {
           HeaderComponent={
             <div className="mb-6 flex items-center">
               <Avatar
-                imageSrc={getPlaceholderAvatar(member?.avatar, member?.name as string)}
+                imageSrc={WEBSITE_URL + "/" + member.username + "/avatar.png"}
                 alt={member?.name || ""}
                 className="min-w-10 min-h-10 mt-1 h-10 w-10 rounded-full"
               />

apps/web/lib/queries/teams/index.ts

@@ -11,7 +11,6 @@ export type TeamWithMembers = AsyncReturnType<typeof getTeamWithMembers>;
 export async function getTeamWithMembers(id?: number, slug?: string) {
   const userSelect = Prisma.validator<Prisma.UserSelect>()({
     username: true,
-    avatar: true,
     email: true,
     name: true,
     id: true,

apps/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calcom/web",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "private": true,
   "scripts": {
     "analyze": "ANALYZE=true next build",

apps/web/pages/bookings/[status].tsx

@@ -60,10 +60,7 @@ export default function Bookings() {
   };
 
   return (
-    <Shell
+    <Shell heading={t("bookings")} subtitle={t("bookings_description")} customLoader={<SkeletonLoader />}>
-      heading={t("bookings")}
-      subtitle={t("bookings_description")}
-      customLoader={<SkeletonLoader></SkeletonLoader>}>
       <WipeMyCalActionButton trpc={trpc} bookingStatus={status} bookingsEmpty={isEmpty} />
       <BookingsShell>
         <div className="-mx-4 flex flex-col sm:mx-auto">

apps/web/pages/success.tsx

@@ -13,7 +13,7 @@ import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useRef, useState } from "react";
-import rrule from "rrule";
+import RRule from "rrule";
 
 import { SpaceBookingSuccessPage } from "@calcom/app-store/spacebooking/components";
 import {
@@ -379,7 +379,7 @@ export default function Success(props: SuccessProps) {
                                 : "") +
                               (props.eventType.recurringEvent
                                 ? "&recur=" +
-                                  encodeURIComponent(new rrule(props.eventType.recurringEvent).toString())
+                                  encodeURIComponent(new RRule(props.eventType.recurringEvent).toString())
                                 : "")
                             }>
                             <a className="mx-2 h-10 w-10 rounded-sm border border-neutral-200 px-3 py-2 dark:border-neutral-700 dark:text-white">

apps/web/pages/team/[slug].tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import React, { useEffect } from "react";
 
 import { useIsEmbed } from "@calcom/embed-core";
+import { WEBSITE_URL } from "@calcom/lib/constants";
 import Button from "@calcom/ui/Button";
 
 import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar";
@@ -13,7 +14,6 @@ import { useExposePlanGlobally } from "@lib/hooks/useExposePlanGlobally";
 import { useLocale } from "@lib/hooks/useLocale";
 import useTheme from "@lib/hooks/useTheme";
 import { useToggleQuery } from "@lib/hooks/useToggleQuery";
-import { defaultAvatarSrc } from "@lib/profile";
 import { getTeamWithMembers } from "@lib/queries/teams";
 import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry";
 import { inferSSRProps } from "@lib/types/inferSSRProps";
@@ -68,7 +68,7 @@ function TeamPage({ team }: TeamPageProps) {
                   size={10}
                   items={type.users.map((user) => ({
                     alt: user.name || "",
-                    image: user.avatar || "",
+                    image: WEBSITE_URL + "/" + user.username + "/avatar.png" || "",
                   }))}
                 />
               </div>
@@ -147,7 +147,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     ...type,
     users: type.users.map((user) => ({
       ...user,
-      avatar: user.avatar || defaultAvatarSrc({ email: user.email || "" }),
+      avatar: WEBSITE_URL + "/" + user.username + "/avatar.png",
     })),
   }));
 

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

@@ -820,5 +820,6 @@
   "zapier_setup_instructions": "<0>Log into your Zapier account and create a new Zap.</0><1>Select Cal.com as your Trigger app. Also choose a Trigger event.</1><2>Choose your account and then enter your Unique API Key.</2><3>Test your Trigger.</3><4>You're set!</4>",
   "install_zapier_app": "Please first install the Zapier App in the app store.",
   "go_to_app_store": "Go to App Store",
-  "calendar_error": "Something went wrong, try reconnecting your calendar with all necessary permissions"
+  "calendar_error": "Something went wrong, try reconnecting your calendar with all necessary permissions",
+  "calendar_no_busy_slots": "There are no busy slots"
 }

package.json

@@ -28,7 +28,7 @@
     "heroku-postbuild": "turbo run @calcom/web#build",
     "lint": "turbo run lint",
     "lint:report": "turbo run lint:report",
-    "postinstall": "turbo run postinstall",
+    "postinstall": "turbo run post-install",
     "pre-commit": "lint-staged",
     "env-check:common": "dotenv-checker --schema .env.example --env .env",
     "env-check:app-store": "dotenv-checker --schema .env.appStore.example --env .env.appStore",

packages/app-store/spacebooking/index.ts

@@ -1,3 +1,4 @@
 export * as api from "./api";
+export * as components from "./components";
 export * as lib from "./lib";
 export { metadata } from "./_metadata";

packages/prisma/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "build": "yarn generate-schemas",
+    "build": "yarn prisma migrate deploy && yarn seed-app-store",
     "clean": "rm -rf .turbo && rm -rf node_modules",
     "db-deploy": "yarn prisma migrate deploy",
     "db-migrate": "yarn prisma migrate dev",
@@ -13,10 +13,9 @@
     "db-setup": "run-s db-up db-deploy db-seed",
     "db-studio": "yarn prisma studio",
     "db-up": "docker-compose up -d",
-    "deploy": "yarn prisma migrate deploy && yarn seed-app-store",
     "dx": "yarn db-setup",
     "generate-schemas": "prisma generate && prisma format",
-    "postinstall": "yarn generate-schemas",
+    "post-install": "yarn generate-schemas",
     "seed-app-store": "ts-node --transpile-only ./seed-app-store.ts"
   },
   "devDependencies": {

turbo.json

@@ -3,10 +3,6 @@
   "baseBranch": "origin/main",
   "globalDependencies": [".env", "packages/prisma/.env"],
   "pipeline": {
-    "@calcom/prisma#build": {
-      "dependsOn": ["$DATABASE_URL"],
-      "outputs": ["zod/**"]
-    },
     "@calcom/prisma#db-deploy": {
       "cache": false,
       "dependsOn": ["$DATABASE_URL"]
@@ -103,7 +99,7 @@
     "db-seed": {},
     "deploy": {
       "cache": false,
-      "dependsOn": ["@calcom/web#build", "@calcom/embed-core#build"],
+      "dependsOn": ["@calcom/web#build"],
       "outputs": []
     },
     "clean": {
@@ -123,7 +119,7 @@
       "cache": false,
       "outputs": ["lint-results"]
     },
-    "postinstall": {},
+    "post-install": {},
     "start": {},
     "embed-tests": {
       "cache": false