From 7d7c61a1abcbde0461a1468a8d531090544a98a3 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Mon, 23 May 2022 09:11:04 +0100
Subject: [PATCH] Adding labels (#2783)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 apps/web/components/Shell.tsx                 |  1 +
 .../eventtype/RecurringEventController.tsx    |  9 +--
 apps/web/components/ui/form/CheckboxField.tsx | 66 ++++++++++++-------
 apps/web/pages/event-types/[type].tsx         | 38 ++++++-----
 4 files changed, 69 insertions(+), 45 deletions(-)

diff --git a/apps/web/components/Shell.tsx b/apps/web/components/Shell.tsx
index 7e2b634f97..beea8ff7d6 100644
--- a/apps/web/components/Shell.tsx
+++ b/apps/web/components/Shell.tsx
@@ -206,6 +206,7 @@ const Layout = ({
                       <Fragment key={item.name}>
                         <Link href={item.href}>
                           <a
+                            aria-label={item.name}
                             className={classNames(
                               item.current
                                 ? "bg-neutral-100 text-neutral-900"
diff --git a/apps/web/components/eventtype/RecurringEventController.tsx b/apps/web/components/eventtype/RecurringEventController.tsx
index 0e7f638ed9..bd81513ea7 100644
--- a/apps/web/components/eventtype/RecurringEventController.tsx
+++ b/apps/web/components/eventtype/RecurringEventController.tsx
@@ -44,9 +44,7 @@ export default function RecurringEventController({
   return (
     <div className="block items-start sm:flex">
       <div className="min-w-48 mb-4 sm:mb-0">
-        <label htmlFor="recurringEvent" className="flex text-sm font-medium text-neutral-700">
-          {t("recurring_event")}
-        </label>
+        <span className="flex text-sm font-medium text-neutral-700">{t("recurring_event")}</span>
       </div>
       <div className={!paymentEnabled ? "w-full" : ""}>
         {paymentEnabled ? (
@@ -79,10 +77,13 @@ export default function RecurringEventController({
                   className="text-primary-600  h-4 w-4 rounded border-gray-300"
                   defaultChecked={recurringEventDefined}
                   data-testid="recurring-event-check"
+                  id="recurringEvent"
                 />
               </div>
               <div className="text-sm ltr:ml-3 rtl:mr-3">
-                <p className="text-neutral-900">{t("recurring_event_description")}</p>
+                <label htmlFor="recurringEvent" className="text-neutral-900">
+                  {t("recurring_event_description")}
+                </label>
               </div>
             </div>
             <Collapsible
diff --git a/apps/web/components/ui/form/CheckboxField.tsx b/apps/web/components/ui/form/CheckboxField.tsx
index a16799575b..9b06d4a925 100644
--- a/apps/web/components/ui/form/CheckboxField.tsx
+++ b/apps/web/components/ui/form/CheckboxField.tsx
@@ -1,36 +1,56 @@
 import React, { forwardRef, InputHTMLAttributes } from "react";
 
+import InfoBadge from "@components/ui/InfoBadge";
+
 type Props = InputHTMLAttributes<HTMLInputElement> & {
-  label: React.ReactNode;
+  label?: React.ReactNode;
   description: string;
+  descriptionAsLabel?: boolean;
+  infomationIconText?: string;
 };
 
-const CheckboxField = forwardRef<HTMLInputElement, Props>(({ label, description, ...rest }, ref) => {
-  return (
-    <div className="block items-center sm:flex">
-      <div className="min-w-48 mb-4 sm:mb-0">
-        <label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
-          {label}
-        </label>
-      </div>
-      <div className="w-full">
-        <div className="relative flex items-start">
-          <div className="flex h-5 items-center">
-            <input
-              {...rest}
-              ref={ref}
-              type="checkbox"
-              className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
-            />
+const CheckboxField = forwardRef<HTMLInputElement, Props>(
+  ({ label, description, infomationIconText, descriptionAsLabel, ...rest }, ref) => {
+    return (
+      <div className="block items-center sm:flex">
+        {label && !descriptionAsLabel && (
+          <div className="min-w-48 mb-4 sm:mb-0">
+            <label htmlFor={rest.id} className="flex text-sm font-medium text-neutral-700">
+              {label}
+            </label>
           </div>
-          <div className="text-sm ltr:ml-3 rtl:mr-3">
-            <p className="text-neutral-900">{description}</p>
+        )}
+        {label && descriptionAsLabel && (
+          <div className="min-w-48 mb-4 sm:mb-0">
+            <span className="flex text-sm font-medium text-neutral-700">{label}</span>
+          </div>
+        )}
+        <div className="w-full">
+          <div className="relative flex items-start">
+            <div className="flex h-5 items-center">
+              <input
+                {...rest}
+                ref={ref}
+                type="checkbox"
+                className="text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-gray-300"
+              />
+            </div>
+            <div className="text-sm ltr:ml-3 rtl:mr-3">
+              {!label || descriptionAsLabel ? (
+                <label htmlFor={rest.id} className="text-neutral-700">
+                  {description}
+                </label>
+              ) : (
+                <p className="text-neutral-900">{description}</p>
+              )}
+            </div>
+            {infomationIconText && <InfoBadge content={infomationIconText}></InfoBadge>}
           </div>
         </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 CheckboxField.displayName = "CheckboxField";
 
diff --git a/apps/web/pages/event-types/[type].tsx b/apps/web/pages/event-types/[type].tsx
index cedef0f9aa..7762df9876 100644
--- a/apps/web/pages/event-types/[type].tsx
+++ b/apps/web/pages/event-types/[type].tsx
@@ -592,6 +592,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
     resolver: zodResolver(locationFormSchema),
   });
   const Locations = () => {
+    const { t } = useLocale();
     return (
       <div className="w-full">
         {formMethods.getValues("locations").length === 0 && (
@@ -628,31 +629,25 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                   {location.type === LocationType.InPerson && (
                     <div className="flex flex-grow items-center">
                       <LocationMarkerIcon className="h-6 w-6" />
-                      <input
-                        disabled
-                        className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2"
-                        value={location.address}
-                      />
+                      <span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
+                        {location.link}
+                      </span>
                     </div>
                   )}
                   {location.type === LocationType.Link && (
                     <div className="flex flex-grow items-center">
                       <GlobeAltIcon className="h-6 w-6" />
-                      <input
-                        disabled
-                        className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2"
-                        value={location.link}
-                      />
+                      <span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
+                        {location.link}
+                      </span>
                     </div>
                   )}
                   {location.type === LocationType.UserPhone && (
                     <div className="flex flex-grow items-center">
                       <PhoneIcon className="h-6 w-6" />
-                      <input
-                        disabled
-                        className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2"
-                        value={location.hostPhoneNumber}
-                      />
+                      <span className="w-full border-0 bg-transparent text-sm ltr:ml-2 rtl:mr-2">
+                        {location.hostPhoneNumber}
+                      </span>
                     </div>
                   )}
                   {location.type === LocationType.Phone && (
@@ -1386,6 +1381,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           render={() => (
                             <CheckboxField
                               id="hideCalendarNotes"
+                              descriptionAsLabel
                               name="hideCalendarNotes"
                               label={t("disable_notes")}
                               description={t("disable_notes_description")}
@@ -1404,6 +1400,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                           render={() => (
                             <CheckboxField
                               id="requiresConfirmation"
+                              descriptionAsLabel
                               name="requiresConfirmation"
                               label={t("opt_in_booking")}
                               description={t("opt_in_booking_description")}
@@ -1430,6 +1427,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                             <CheckboxField
                               id="disableGuests"
                               name="disableGuests"
+                              descriptionAsLabel
                               label={t("disable_guests")}
                               description={t("disable_guests_description")}
                               defaultChecked={eventType.disableGuests}
@@ -1449,6 +1447,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                               <CheckboxField
                                 id="hashedLinkCheck"
                                 name="hashedLinkCheck"
+                                descriptionAsLabel
                                 label={t("private_link")}
                                 description={t("private_link_description")}
                                 defaultChecked={eventType.hashedLink ? true : false}
@@ -1567,7 +1566,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                         </div>
                         <hr className="my-2 border-neutral-200" />
 
-                        <div className="block sm:flex">
+                        <fieldset className="block sm:flex">
                           <div className="min-w-48 mb-4 sm:mb-0">
                             <label
                               htmlFor="inviteesCanSchedule"
@@ -1625,7 +1624,10 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                                                 startDate={formMethods.getValues("periodDates").startDate}
                                                 endDate={formMethods.getValues("periodDates").endDate}
                                                 onDatesChange={({ startDate, endDate }) => {
-                                                  formMethods.setValue("periodDates", { startDate, endDate });
+                                                  formMethods.setValue("periodDates", {
+                                                    startDate,
+                                                    endDate,
+                                                  });
                                                 }}
                                               />
                                             )}
@@ -1641,7 +1643,7 @@ const EventTypePage = (props: inferSSRProps<typeof getServerSideProps>) => {
                               )}
                             />
                           </div>
-                        </div>
+                        </fieldset>
                         <hr className="border-neutral-200" />
                         <div className="block sm:flex">
                           <div className="min-w-48 mb-4 sm:mb-0">