From 12c33ea88e32b6617ad3f436229d508600a7b4d4 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Thu, 21 Jul 2022 14:25:10 +0100
Subject: [PATCH] Hide button if readonly (#3471)

Co-authored-by: Alex van Andel <me@alexvanandel.com>
---
 apps/web/pages/event-types/[type].tsx | 42 +++++++++++++++++----------
 apps/web/pages/event-types/index.tsx  | 33 ++++++++++++---------
 2 files changed, 47 insertions(+), 28 deletions(-)

diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index 353d04c1fb..c960e094b3 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -77,6 +77,7 @@ import * as RadioArea from "@components/ui/form/radio-area";
 import WebhookListContainer from "@components/webhook/WebhookListContainer";
 
 import { getTranslation } from "@server/lib/i18n";
+import { TRPCClientError } from "@trpc/client";
 
 interface Token {
   name?: string;
@@ -302,6 +303,8 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
       if (err instanceof HttpError) {
         const message = `${err.statusCode}: ${err.message}`;
         showToast(message, "error");
+      } else if (err instanceof TRPCClientError) {
+        showToast(err.message, "error");
       }
     },
   });
@@ -351,7 +354,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
 
   async function deleteEventTypeHandler(event: React.MouseEvent<HTMLElement, MouseEvent>) {
     event.preventDefault();
-
     const payload = { id: eventType.id };
     deleteMutation.mutate(payload);
   }
@@ -1978,20 +1980,24 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-200 hover:text-gray-900"
                   eventTypeId={eventType.id}
                 />
-                <Dialog>
-                  <DialogTrigger className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-red-500 hover:bg-gray-200">
-                    <TrashIcon className="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2" />
-                    {t("delete")}
-                  </DialogTrigger>
-                  <ConfirmationDialogContent
-                    isLoading={deleteMutation.isLoading}
-                    variety="danger"
-                    title={t("delete_event_type")}
-                    confirmBtnText={t("confirm_delete_event_type")}
-                    onConfirm={deleteEventTypeHandler}>
-                    {t("delete_event_type_description")}
-                  </ConfirmationDialogContent>
-                </Dialog>
+                {/* This will only show if the user is not a member (ADMIN,OWNER) and if there is no current membership 
+                      - meaning you are within an eventtype that does not belong to a team */}
+                {(props.currentUserMembership?.role !== "MEMBER" || !props.currentUserMembership) && (
+                  <Dialog>
+                    <DialogTrigger className="text-md flex items-center rounded-sm px-2 py-1 text-sm font-medium text-red-500 hover:bg-gray-200">
+                      <TrashIcon className="h-4 w-4 text-red-500 ltr:mr-2 rtl:ml-2" />
+                      {t("delete")}
+                    </DialogTrigger>
+                    <ConfirmationDialogContent
+                      isLoading={deleteMutation.isLoading}
+                      variety="danger"
+                      title={t("delete_event_type")}
+                      confirmBtnText={t("confirm_delete_event_type")}
+                      onConfirm={deleteEventTypeHandler}>
+                      {t("delete_event_type_description")}
+                    </ConfirmationDialogContent>
+                  </Dialog>
+                )}
               </div>
             </div>
           </div>
@@ -2281,6 +2287,11 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       })
     : [];
 
+  // Find the current users memebership so we can check role to enable/disable deletion.
+  // Sets to null if no membership is found - this must mean we are in a none team event type
+  const currentUserMembership =
+    eventTypeObject.team?.members.find((el) => el.user.id === session.user.id) ?? null;
+
   return {
     props: {
       session,
@@ -2292,6 +2303,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       hasPaymentIntegration,
       hasGiphyIntegration,
       currency,
+      currentUserMembership,
     },
   };
 };
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index b9bc4dcacb..2e28209fab 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -49,6 +49,8 @@ import Avatar from "@components/ui/Avatar";
 import AvatarGroup from "@components/ui/AvatarGroup";
 import Badge from "@components/ui/Badge";
 
+import { TRPCClientError } from "@trpc/react";
+
 type EventTypeGroups = inferQueryOutput<"viewer.eventTypes">["eventTypeGroups"];
 type EventTypeGroupProfile = EventTypeGroups[number]["profile"];
 interface EventTypeListHeadingProps {
@@ -193,6 +195,8 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
         const message = `${err.statusCode}: ${err.message}`;
         showToast(message, "error");
         setDeleteDialogOpen(false);
+      } else if (err instanceof TRPCClientError) {
+        showToast(err.message, "error");
       }
     },
   });
@@ -332,19 +336,22 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           />
                         </DropdownMenuItem>
                         <DropdownMenuSeparator className="h-px bg-gray-200" />
-                        <DropdownMenuItem>
-                          <Button
-                            onClick={() => {
-                              setDeleteDialogOpen(true);
-                              setDeleteDialogTypeId(type.id);
-                            }}
-                            color="warn"
-                            size="sm"
-                            StartIcon={TrashIcon}
-                            className="w-full rounded-none">
-                            {t("delete") as string}
-                          </Button>
-                        </DropdownMenuItem>
+                        {/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
+                        {(group.metadata?.readOnly === false || group.metadata.readOnly === null) && (
+                          <DropdownMenuItem>
+                            <Button
+                              onClick={() => {
+                                setDeleteDialogOpen(true);
+                                setDeleteDialogTypeId(type.id);
+                              }}
+                              color="warn"
+                              size="sm"
+                              StartIcon={TrashIcon}
+                              className="w-full rounded-none">
+                              {t("delete") as string}
+                            </Button>
+                          </DropdownMenuItem>
+                        )}
                       </DropdownMenuContent>
                     </Dropdown>
                   </div>