moved availability outside of advanced settigns (#2188)

* moved availability outside of advanced settigns

* added icon for availability and divider

* nit

* fixed padding availability on mobile

* nit

* nit

apps/web/pages/availability/index.tsx

@@ -44,7 +44,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
           <ul className="divide-y divide-neutral-200" data-testid="schedules">
             {schedules.map((schedule) => (
               <li key={schedule.id}>
-                <div className="flex items-center justify-between py-5 hover:bg-neutral-50">
+                <div className="flex items-center justify-between py-5 hover:bg-neutral-50 ltr:pl-4 rtl:pr-4 sm:ltr:pl-0 sm:rtl:pr-0">
                   <div className="group flex w-full items-center justify-between hover:bg-neutral-50 sm:px-6">
                     <Link href={"/availability/" + schedule.id}>
                       <a className="flex-grow truncate text-sm" title={schedule.name}>

apps/web/pages/event-types/[type].tsx

@@ -22,7 +22,6 @@ import dayjs from "dayjs";
 import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import { GetServerSidePropsContext } from "next";
-import Link from "next/link";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -33,7 +32,6 @@ import { z } from "zod";
 
 import showToast from "@calcom/lib/notification";
 import { StripeData } from "@calcom/stripe/server";
-import { Alert } from "@calcom/ui/Alert";
 import Button from "@calcom/ui/Button";
 import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
 import Switch from "@calcom/ui/Switch";
@@ -876,6 +874,35 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                       </div>
                     </div>
                   </div>
+
+                  <hr className="border-neutral-200" />
+                  <div className="space-y-3">
+                    <div className="block sm:flex">
+                      <div className="min-w-48 mb-4 mt-2.5 sm:mb-0">
+                        <label
+                          htmlFor="availability"
+                          className="mt-0 flex text-sm font-medium text-neutral-700">
+                          <ClockIcon className="mt-0.5 h-4 w-4 text-neutral-500 ltr:mr-2 rtl:ml-2" />
+                          {t("availability")} <InfoBadge content={t("you_can_manage_your_schedules")} />
+                        </label>
+                      </div>
+                      <div className="w-full">
+                        <Controller
+                          name="schedule"
+                          control={formMethods.control}
+                          render={({ field }) => (
+                            <AvailabilitySelect
+                              {...field}
+                              onChange={(selected: { label: string; value: number }) =>
+                                field.onChange(selected.value)
+                              }
+                            />
+                          )}
+                        />
+                      </div>
+                    </div>
+                  </div>
+
                   {team && <hr className="border-neutral-200" />}
                   {team && (
                     <div className="space-y-3">
@@ -1369,39 +1396,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                             </div>
                           </div>
                         </div>
-                        <div className="block sm:flex">
-                          <div className="min-w-48 mb-4 sm:mb-0">
-                            <label
-                              htmlFor="availability"
-                              className="flex text-sm font-medium text-neutral-700">
-                              {t("availability")}
-                            </label>
-                          </div>
-                          <div className="w-full">
-                            <Controller
-                              name="schedule"
-                              control={formMethods.control}
-                              render={({ field }) => (
-                                <AvailabilitySelect
-                                  {...field}
-                                  onChange={(selected: { label: string; value: number }) =>
-                                    field.onChange(selected.value)
-                                  }
-                                />
-                              )}
-                            />
-
-                            <Link href="/availability">
-                              <a>
-                                <Alert
-                                  className="mt-1 text-xs"
-                                  severity="info"
-                                  message="You can manage your schedules on the Availability page."
-                                />
-                              </a>
-                            </Link>
-                          </div>
-                        </div>
 
                         {hasPaymentIntegration && (
                           <>

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

@@ -685,5 +685,6 @@
   "time_format": "Time format",
   "12_hour": "12 hour",
   "24_hour": "24 hour",
-  "duplicate": "Duplicate"
+  "duplicate": "Duplicate",
+  "you_can_manage_your_schedules": "You can manage your schedules on the Availability page."
 }