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
This commit is contained in:
Peer Richelsen
GitHub
parent
1b813b0ee3
commit
77879bc193
4 changed files with 768 additions and 76 deletions
|
|
@ -44,7 +44,7 @@ export function AvailabilityList({ schedules }: inferQueryOutput<"viewer.availab
|
||||||
<ul className="divide-y divide-neutral-200" data-testid="schedules">
|
<ul className="divide-y divide-neutral-200" data-testid="schedules">
|
||||||
{schedules.map((schedule) => (
|
{schedules.map((schedule) => (
|
||||||
<li key={schedule.id}>
|
<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">
|
<div className="group flex w-full items-center justify-between hover:bg-neutral-50 sm:px-6">
|
||||||
<Link href={"/availability/" + schedule.id}>
|
<Link href={"/availability/" + schedule.id}>
|
||||||
<a className="flex-grow truncate text-sm" title={schedule.name}>
|
<a className="flex-grow truncate text-sm" title={schedule.name}>
|
||||||
|
|
|
||||||
|
|
@ -22,7 +22,6 @@ import dayjs from "dayjs";
|
||||||
import timezone from "dayjs/plugin/timezone";
|
import timezone from "dayjs/plugin/timezone";
|
||||||
import utc from "dayjs/plugin/utc";
|
import utc from "dayjs/plugin/utc";
|
||||||
import { GetServerSidePropsContext } from "next";
|
import { GetServerSidePropsContext } from "next";
|
||||||
import Link from "next/link";
|
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import React, { useEffect, useState } from "react";
|
import React, { useEffect, useState } from "react";
|
||||||
import { Controller, useForm } from "react-hook-form";
|
import { Controller, useForm } from "react-hook-form";
|
||||||
|
|
@ -33,7 +32,6 @@ import { z } from "zod";
|
||||||
|
|
||||||
import showToast from "@calcom/lib/notification";
|
import showToast from "@calcom/lib/notification";
|
||||||
import { StripeData } from "@calcom/stripe/server";
|
import { StripeData } from "@calcom/stripe/server";
|
||||||
import { Alert } from "@calcom/ui/Alert";
|
|
||||||
import Button from "@calcom/ui/Button";
|
import Button from "@calcom/ui/Button";
|
||||||
import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
|
import { Dialog, DialogContent, DialogTrigger } from "@calcom/ui/Dialog";
|
||||||
import Switch from "@calcom/ui/Switch";
|
import Switch from "@calcom/ui/Switch";
|
||||||
|
|
@ -876,6 +874,35 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 && <hr className="border-neutral-200" />}
|
||||||
{team && (
|
{team && (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
|
|
@ -1369,39 +1396,6 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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 && (
|
{hasPaymentIntegration && (
|
||||||
<>
|
<>
|
||||||
|
|
|
||||||
|
|
@ -685,5 +685,6 @@
|
||||||
"time_format": "Time format",
|
"time_format": "Time format",
|
||||||
"12_hour": "12 hour",
|
"12_hour": "12 hour",
|
||||||
"24_hour": "24 hour",
|
"24_hour": "24 hour",
|
||||||
"duplicate": "Duplicate"
|
"duplicate": "Duplicate",
|
||||||
|
"you_can_manage_your_schedules": "You can manage your schedules on the Availability page."
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue