feat: hide the update button in case of no permission (#17883)

* feat: hide button if not owner of org

* fix

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

@@ -46,7 +46,6 @@
   "event_request_reassigned": "Your scheduled event was reassigned",
   "event_reassigned_subtitle": "You will no longer have the event on your calendar and your round robin likelihood will not be negatively impacted",
   "organizer": "Organizer",
-  "owner_permission_needed": "You need to be an owner of the organization.",
   "reassigned_to": "Reassigned to",
   "need_to_reschedule_or_cancel": "Need to reschedule or cancel?",
   "you_can_view_booking_details_with_this_url": "You can view the booking details from this url {{url}} and add the event to your calendar",

packages/features/ee/organizations/pages/settings/general.tsx

@@ -7,6 +7,7 @@ import { Controller, useForm } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
+import { classNames } from "@calcom/lib";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { nameOfDay } from "@calcom/lib/weekday";
 import { MembershipRole } from "@calcom/prisma/enums";
@@ -27,7 +28,7 @@ import {
 import { LockEventTypeSwitch } from "../components/LockEventTypeSwitch";
 import { NoSlotsNotificationSwitch } from "../components/NoSlotsNotificationSwitch";
 
-const SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
+const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
       <div className="mb-8 mt-6 space-y-6">
@@ -70,7 +71,7 @@ const OrgGeneralView = () => {
     [error]
   );
 
-  if (isPending) return <SkeletonLoader title={t("general")} description={t("general_description")} />;
+  if (isPending) return <SkeletonLoader />;
   if (!currentOrg) {
     return null;
   }
@@ -149,7 +150,11 @@ const GeneralView = ({ currentOrg, isAdminOrOwner, localeProp }: GeneralViewProp
           weekStart: values.weekStart.value,
         });
       }}>
-      <div className="border-subtle border-x border-y-0 px-4 py-8 sm:px-6">
+      <div
+        className={classNames(
+          "border-subtle border-x border-y-0 px-4 py-8 sm:px-6",
+          !isAdminOrOwner && "rounded-b-lg border-y"
+        )}>
         <Controller
           name="timeZone"
           control={formMethods.control}
@@ -209,15 +214,13 @@ const GeneralView = ({ currentOrg, isAdminOrOwner, localeProp }: GeneralViewProp
         />
       </div>
 
-      <SectionBottomActions align="end">
-        <Button
-          disabled={isDisabled}
-          color="primary"
-          type="submit"
-          tooltip={!isAdminOrOwner ? t("owner_permission_needed") : undefined}>
-          {t("update")}
-        </Button>
-      </SectionBottomActions>
+      {isAdminOrOwner && (
+        <SectionBottomActions align="end">
+          <Button disabled={isDisabled} color="primary" type="submit">
+            {t("update")}
+          </Button>
+        </SectionBottomActions>
+      )}
     </Form>
   );
 };