vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 2.0k Packages Projects Releases Wiki Activity

Empty Screen Improvements to Public event type list (#5178)

Browse Source 
* Empty Page

* Declare const and reuse it

Co-authored-by: alannnc <alannnc@gmail.com>
This commit is contained in:
sean-brydon
2022-10-24 22:20:41 +00:00
committed by GitHub
co-authored by alannnc
parent 0ea58103c8
commit 6232a111ef
3 changed files with 55 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/pages/[user].tsx
+8 -12
View File
@@ -13,6 +13,7 @@ import {
useEmbedStyles,
useIsEmbed,
} from "@calcom/embed-core/embed-iframe";
import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
import CustomBranding from "@calcom/lib/CustomBranding";
import defaultEvents, {
getDynamicEventDescription,
@@ -103,7 +104,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
telemetry.event(telemetryEventTypes.embedView, collectPageParameters("/[user]"));
}
}, [telemetry, router.asPath]);
const isEventListEmpty = eventTypes.length === 0;
return (
<>
<HeadSeo
@@ -148,7 +149,11 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
</div>
)}
<div
className="rounded-md border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600"
className={classNames(
"rounded-md ",
!isEventListEmpty &&
"border border-neutral-200 dark:border-neutral-700 dark:hover:border-neutral-600"
)}
data-testid="event-types">
{user.away ? (
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
@@ -195,16 +200,7 @@ export default function User(props: inferSSRProps<typeof getServerSideProps> & E
))
)}
</div>
{eventTypes.length === 0 && (
<div className="overflow-hidden rounded-sm border dark:border-gray-900">
<div className="p-8 text-center text-gray-400 dark:text-white">
<h2 className="font-cal mb-2 text-3xl text-gray-600 dark:text-white">
{t("uh_oh") as string}
</h2>
<p className="mx-auto max-w-md">{t("no_event_types_have_been_setup") as string}</p>
</div>
</div>
)}
{isEventListEmpty && <EmptyPage name={user.name ?? "User"} />}
</main>
<Toaster position="bottom-right" />
</div>
apps/web/public/static/locales/en/common.json
+3 -1
View File
@@ -1326,5 +1326,7 @@
"saml_sp_acs_url_copied": "ACS URL copied!",
"saml_sp_entity_id_copied": "SP Entity ID copied!",
"saml_btn_configure": "Configure",
"add_calendar": "Add Calendar"
"add_calendar": "Add Calendar",
"no_event_types": "No event types setup",
"no_event_types_description": "{{name}} has not setup any event types for you to book."
}
packages/features/eventtypes/components/EmptyPage.tsx
+44
View File
@@ -0,0 +1,44 @@
import { useLocale } from "@calcom/lib/hooks/useLocale";
const SkeletonEventType = () => {
return (
<div className="dark:bg-darkgray-100 h-24 w-full bg-white">
<div className="p-5">
<div className="flex space-x-2">
<div className="dark:bg-darkgray-400 h-2 w-1/6 rounded-md bg-neutral-200" />
<div className="dark:bg-darkgray-400 h-2 w-1/6 rounded-md bg-neutral-200" />
</div>
<div className="flex space-x-2 py-2">
<div className="dark:bg-darkgray-400 h-2 w-1/12 rounded-md bg-neutral-200" />
<div className="dark:bg-darkgray-400 h-2 w-1/6 rounded-md bg-neutral-200" />
<div className="dark:bg-darkgray-400 h-2 w-1/12 rounded-md bg-neutral-200" />
</div>
<div className="flex space-x-2 py-1">
<div className="dark:bg-darkgray-200 h-6 w-1/6 rounded-md bg-neutral-300" />
<div className="dark:bg-darkgray-200 h-6 w-1/6 rounded-md bg-neutral-300" />
</div>
</div>
</div>
);
};
function EmptyPage({ name }: { name: string }) {
const { t } = useLocale();
return (
<div className="relative text-center">
<div className="dark:divide-darkgray-100 flex flex-col divide-y-2 blur-[3px]">
<SkeletonEventType />
<SkeletonEventType />
<SkeletonEventType />
</div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<h3 className="text-lg font-semibold text-gray-600 dark:text-white">{t("no_event_types")} </h3>
<h4 className="text-sm leading-normal text-gray-600 dark:text-white">
{t("no_event_types_description", { name })}
</h4>
</div>
</div>
);
}
export default EmptyPage;