From 93c4211da48a2e8a5e5d7d9bfedcb4ad538eb105 Mon Sep 17 00:00:00 2001
From: "GitStart-Cal.com" <121884634+gitstart-calcom@users.noreply.github.com>
Date: Tue, 30 May 2023 09:43:24 -0600
Subject: [PATCH] change request (#9075)

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Bailey Pumfleet <bailey@pumfleet.co.uk>
---
 .../eventtype/EventTypeSingleLayout.tsx       | 50 ++++++++++++-------
 apps/web/pages/event-types/index.tsx          | 25 +++++++++-
 2 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 72a1778f4f..c19f168a05 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -238,20 +238,34 @@ function EventTypeSingleLayout({
         <div className="flex items-center justify-end">
           {!eventType.metadata.managedEventConfig && (
             <>
-              <div className="sm:hover:bg-muted hidden items-center rounded-md px-2 lg:flex">
-                <Skeleton
-                  as={Label}
-                  htmlFor="hiddenSwitch"
-                  className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
-                  {t("hide_from_profile")}
-                </Skeleton>
-                <Switch
-                  id="hiddenSwitch"
-                  checked={formMethods.watch("hidden")}
-                  onCheckedChange={(e) => {
-                    formMethods.setValue("hidden", e);
-                  }}
-                />
+              <div
+                className={classNames(
+                  "sm:hover:bg-muted hidden cursor-pointer items-center rounded-md",
+                  formMethods.watch("hidden") ? "px-2" : "",
+                  "lg:flex"
+                )}>
+                {formMethods.watch("hidden") && (
+                  <Skeleton
+                    as={Label}
+                    htmlFor="hiddenSwitch"
+                    className="mt-2 hidden cursor-pointer self-center whitespace-nowrap pr-2 sm:inline">
+                    {t("hidden")}
+                  </Skeleton>
+                )}
+                <Tooltip
+                  content={
+                    formMethods.watch("hidden") ? t("show_eventtype_on_profile") : t("hide_from_profile")
+                  }>
+                  <div className="self-center rounded-md p-2">
+                    <Switch
+                      id="hiddenSwitch"
+                      checked={!formMethods.watch("hidden")}
+                      onCheckedChange={(e) => {
+                        formMethods.setValue("hidden", !e);
+                      }}
+                    />
+                  </div>
+                </Tooltip>
               </div>
               <VerticalDivider className="hidden lg:block" />
             </>
@@ -344,18 +358,18 @@ function EventTypeSingleLayout({
                 </DropdownItem>
               </DropdownMenuItem>
               <DropdownMenuSeparator />
-              <div className="sm:hover:bg-subtle flex h-9 flex-row items-center justify-between py-2 px-4">
+              <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between py-2 px-4">
                 <Skeleton
                   as={Label}
                   htmlFor="hiddenSwitch"
                   className="mt-2 inline cursor-pointer self-center pr-2 ">
-                  {t("hide_from_profile")}
+                  {formMethods.watch("hidden") ? t("show_eventtype_on_profile") : t("hide_from_profile")}
                 </Skeleton>
                 <Switch
                   id="hiddenSwitch"
-                  checked={formMethods.watch("hidden")}
+                  checked={!formMethods.watch("hidden")}
                   onCheckedChange={(e) => {
-                    formMethods.setValue("hidden", e);
+                    formMethods.setValue("hidden", !e);
                   }}
                 />
               </div>
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index d292055181..453bb5f4f8 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -42,6 +42,8 @@ import {
   CreateButton,
   HorizontalTabs,
   HeadSeo,
+  Skeleton,
+  Label,
 } from "@calcom/ui";
 import {
   ArrowDown,
@@ -416,7 +418,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         {!isManagedEventType && (
                           <>
                             {type.hidden && <Badge variant="gray">{t("hidden")}</Badge>}
-                            <Tooltip content={t("show_eventtype_on_profile")}>
+                            <Tooltip
+                              content={type.hidden ? t("show_eventtype_on_profile") : t("hide_from_profile")}>
                               <div className="self-center rounded-md p-2">
                                 <Switch
                                   name="Hidden"
@@ -607,7 +610,6 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                         {(group.metadata?.readOnly === false || group.metadata.readOnly === null) &&
                           !isChildrenManagedEventType && (
                             <>
-                              <DropdownMenuSeparator />
                               <DropdownMenuItem className="outline-none">
                                 <DropdownItem
                                   color="destructive"
@@ -623,6 +625,25 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                               </DropdownMenuItem>
                             </>
                           )}
+                        <DropdownMenuSeparator />
+                        {!isManagedEventType && (
+                          <div className="hover:bg-subtle flex h-9 cursor-pointer flex-row items-center justify-between py-2 px-4">
+                            <Skeleton
+                              as={Label}
+                              htmlFor="hiddenSwitch"
+                              className="mt-2 inline cursor-pointer self-center pr-2 ">
+                              {type.hidden ? t("show_eventtype_on_profile") : t("hide_from_profile")}
+                            </Skeleton>
+                            <Switch
+                              id="hiddenSwitch"
+                              name="Hidden"
+                              checked={!type.hidden}
+                              onCheckedChange={() => {
+                                setHiddenMutation.mutate({ id: type.id, hidden: !type.hidden });
+                              }}
+                            />
+                          </div>
+                        )}
                       </DropdownMenuContent>
                     </DropdownMenuPortal>
                   </Dropdown>