translate

Author: marcoacierno

frontend/src/components/cfp-form/availability-section.tsx

@@ -20,6 +20,7 @@ import { FormattedMessage } from "react-intl";
 import type { CfpFormQuery } from "~/types";
 
 const CHOICES = ["available", "preferred", "unavailable"];
+const RANGES = ["am", "pm"];
 
 type Props = {
   conferenceData: CfpFormQuery;
@@ -39,15 +40,6 @@ export const AvailabilitySection = ({
   const parsedStart = parseISO(start);
   const parsedEnd = parseISO(end);
   const daysBetween = eachDayOfInterval({ start: parsedStart, end: parsedEnd });
-  const hoursBetween = eachMinuteOfInterval(
-    {
-      start: setHours(parsedStart, 9),
-      end: setHours(parsedStart, 17),
-    },
-    {
-      step: 30,
-    },
-  );
 
   return (
     <MultiplePartsCard>
@@ -64,7 +56,7 @@ export const AvailabilitySection = ({
         <div
           className="grid gap-2 lg:gap-4 select-none"
           style={{
-            gridTemplateColumns: `70px repeat(${daysBetween.length}, 1fr)`,
+            gridTemplateColumns: `150px repeat(${daysBetween.length}, 1fr)`,
           }}
         >
           <div />
@@ -80,34 +72,39 @@ export const AvailabilitySection = ({
             </Text>
           ))}
 
-          {hoursBetween.map((hour) => (
-            <Fragment key={hour.toISOString()}>
+          {RANGES.map((hour) => (
+            <Fragment key={hour}>
               <div>
-                <Text weight="strong" size={"label3"}>
-                  {format(hour, "HH:mm")}
+                <Text weight="strong" size={"label3"} as="p">
+                  {hour === "am" ? (
+                    <FormattedMessage id="cfp.availability.table.morning" />
+                  ) : (
+                    <FormattedMessage id="cfp.availability.table.afternoon" />
+                  )}
+                </Text>
+                <Spacer size="thin" />
+                <Text weight="strong" size={"label3"} as="p">
+                  {hour === "am" ? (
+                    <FormattedMessage id="cfp.availability.table.morning.range" />
+                  ) : (
+                    <FormattedMessage id="cfp.availability.table.afternoon.range" />
+                  )}
                 </Text>
               </div>
               {daysBetween.map((day) => {
-                const mergedDate = setHours(
-                  setMinutes(day, hour.getMinutes()),
-                  hour.getHours(),
-                );
-
+                const availabilityDate = `${format(day, "yyyy-MM-dd")}-${hour}`;
                 const currentChoice =
-                  selectedAvailabilities?.[mergedDate.getTime()] || "available";
+                  selectedAvailabilities?.[availabilityDate] || "available";
 
                 return (
                   <div
-                    className={clsx("w-full cursor-pointer text-center p-1", {
-                      "bg-grey-50 hover:bg-grey-100": true,
-                    })}
+                    className="w-full cursor-pointer text-center p-1 bg-grey-50 hover:bg-grey-100"
                     onClick={(_) => {
-                      const options = ["available", "preferred", "unavailable"];
                       const nextChoice =
-                        options[
-                          (options.indexOf(currentChoice) + 1) % options.length
+                        CHOICES[
+                          (CHOICES.indexOf(currentChoice) + 1) % CHOICES.length
                         ];
-                      onChangeAvailability(mergedDate, nextChoice);
+                      onChangeAvailability(availabilityDate, nextChoice);
                     }}
                   >
                     {currentChoice === "available" && <>&nbsp;</>}
@@ -118,21 +115,10 @@ export const AvailabilitySection = ({
               })}
             </Fragment>
           ))}
-
-          <div />
-          {daysBetween.map((day) => (
-            <div className="flex items-center justify-center gap-1">
-              <Text key={day.toISOString()} size={"label3"}>
-                (Prefer all)
-              </Text>
-              /
-              <Text key={day.toISOString()} size={"label3"}>
-                (Unavailable all)
-              </Text>
-            </div>
-          ))}
         </div>
 
+        <Spacer size="small" />
+
         <Text size={3}>
           <FormattedMessage
             id="cfp.availability.explanation"

frontend/src/components/cfp-form/index.tsx

@@ -308,7 +308,7 @@ export const CfpForm = ({
   const onChangeAvailability = (date, choice) => {
     formState.setField("selectedAvailabilities", {
       ...formState.values.selectedAvailabilities,
-      [date.getTime()]: choice,
+      [date]: choice,
     });
   };
 

frontend/src/locale/index.ts

@@ -469,10 +469,12 @@ Failing to notify us may impact your eligibility for financial aid at future eve
     "cfp.availability.title": "Availability",
     "cfp.availability.description":
       "Help our program committee by letting us know your availability during the conference. If your proposal gets accepted, we will try and use this information to schedule your proposal at a time that suits you. All times are in the conference timezone.",
-    "cfp.availability.explanation": `
-✔️ Preferred ❌ Unavailable
-If left empty, we will assume you are available. Please consider your presentation length when marking availability. {duration}
-    `,
+    "cfp.availability.explanation": `✔️ Preferred ❌ Unavailable
+Click the box to change. If left empty, we will assume you are available. Please consider your presentation length when marking availability. {duration}`,
+    "cfp.availability.table.morning": "Morning",
+    "cfp.availability.table.morning.range": "(11.00am - 1.00pm)",
+    "cfp.availability.table.afternoon": "Afternoon",
+    "cfp.availability.table.afternoon.range": "(3.00pm - 6.00pm)",
     "header.dashboard": "Dashboard",
     "header.login": "Login",
     "header.tickets": "Tickets",
@@ -2153,6 +2155,16 @@ Mettiamoci in contatto per trovare la soluzione migliore per le esigenze della t
     "orderQuestions.attendeeFamilyName": "Cognome partecipante",
     "orderQuestions.attendeeFamilyName.placeholder":
       "Il tuo cognome, e.g. Lovelace",
+
+    "cfp.availability.title": "Disponibilità",
+    "cfp.availability.description":
+      "Aiuta il nostro comitato di programma facendoci sapere la tua disponibilità durante la conferenza. Se la tua proposta verrà accettata, useremo queste informazioni per programmare il tuo intervento in un momento che ti sia comodo. Tutti gli orari sono nel fuso orario della conferenza.",
+    "cfp.availability.explanation": `✔️ Preferito ❌ Non disponibile
+  Clicca sulla casella per cambiare. Se lasciato vuoto, presumeremo che tu sia disponibile. Considera la durata della tua presentazione quando indichi la disponibilità. {duration}`,
+    "cfp.availability.table.morning": "Mattina",
+    "cfp.availability.table.morning.range": "(11:00 - 13:00)",
+    "cfp.availability.table.afternoon": "Pomeriggio",
+    "cfp.availability.table.afternoon.range": "(15:00 - 18:00)",
   },
 };