diff --git a/frontend/src/components/cfp-form/availability-section.tsx b/frontend/src/components/cfp-form/availability-section.tsx index c79dfebd13..46d164516a 100644 --- a/frontend/src/components/cfp-form/availability-section.tsx +++ b/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 ( @@ -64,7 +56,7 @@ export const AvailabilitySection = ({
@@ -80,34 +72,39 @@ export const AvailabilitySection = ({ ))} - {hoursBetween.map((hour) => ( - + {RANGES.map((hour) => ( +
- - {format(hour, "HH:mm")} + + {hour === "am" ? ( + + ) : ( + + )} + + + + {hour === "am" ? ( + + ) : ( + + )}
{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 (
{ - 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" && <> } @@ -118,21 +115,10 @@ export const AvailabilitySection = ({ })} ))} - -
- {daysBetween.map((day) => ( -
- - (Prefer all) - - / - - (Unavailable all) - -
- ))}
+ + { formState.setField("selectedAvailabilities", { ...formState.values.selectedAvailabilities, - [date.getTime()]: choice, + [date]: choice, }); }; diff --git a/frontend/src/locale/index.ts b/frontend/src/locale/index.ts index 8ccd117a0f..3433f94d03 100644 --- a/frontend/src/locale/index.ts +++ b/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)", }, };