diff --git a/src/components/Dashboard/Opportunities/OpportunityCard.helpers.tsx b/src/components/Dashboard/Opportunities/OpportunityCard.helpers.tsx index 9423549d..c6e3d69e 100644 --- a/src/components/Dashboard/Opportunities/OpportunityCard.helpers.tsx +++ b/src/components/Dashboard/Opportunities/OpportunityCard.helpers.tsx @@ -1,4 +1,6 @@ import { ConfettiIcon, PersonSimpleWalkIcon, ShootingStarIcon, TranslateIcon } from "@phosphor-icons/react"; +import { utcHhmmToLocal } from "@/utils"; +import { format } from "date-fns"; import { ApiVolunteerOpportunityGetList, OpportunityStatusType, ProfileVolunteeringType } from "need4deed-sdk"; import { JSX } from "react"; @@ -9,6 +11,20 @@ export function formatAvailability(availability: ApiVolunteerOpportunityGetList[ return parts.join(", "); } +export function formatAccompanyingDate(details?: { + appointmentDate?: string; + appointmentTime?: string; +}): string | null { + if (!details?.appointmentDate) return null; + + const date = new Date(details.appointmentDate); + const formattedDate = isNaN(date.getTime()) ? details.appointmentDate : format(date, "dd.MM.yyyy"); + + const formattedTime = details.appointmentTime ? utcHhmmToLocal(details.appointmentTime) : null; + + return [formattedDate, formattedTime].filter(Boolean).join(" "); +} + export const statusColorMap: Record = { [OpportunityStatusType.NEW]: "var(--color-red-500)", [OpportunityStatusType.SEARCHING]: "var(--color-orange-500, var(--color-red-500))", diff --git a/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx b/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx index 64e9d9fd..e3155d1f 100644 --- a/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx +++ b/src/components/Dashboard/Profile/sections/AccompanyingDetails/AccompanyingDetailsDisplay.tsx @@ -1,5 +1,6 @@ import { EditableField } from "@/components/EditableField/EditableField"; import { EMPTY_PLACEHOLDER_VALUE } from "@/config/constants"; +import { utcHhmmToLocal } from "@/utils"; import { format } from "date-fns"; import { useTranslation } from "react-i18next"; import { AccompanyingDetailsFormData } from "./accompanyingDetailsSchema"; @@ -30,7 +31,7 @@ export const AccompanyingDetailsDisplay = ({ values, languageLabel }: Props) => - {values.appointmentTime || EMPTY_PLACEHOLDER_VALUE} + {values.appointmentTime ? utcHhmmToLocal(values.appointmentTime) : EMPTY_PLACEHOLDER_VALUE} { export const parseTime = (time: Date | string | undefined): string => { if (!time) return ""; if (typeof time === "string") return time; - return time.toTimeString().slice(0, 5); + return String(time.getHours()).padStart(2, "0") + ":" + String(time.getMinutes()).padStart(2, "0"); }; export const getInitialFormValues = ( diff --git a/src/utils/index.ts b/src/utils/index.ts index 82b7de1b..56bf8cd9 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -3,6 +3,18 @@ export * from "./helpers"; import { cloudfrontURL } from "@/config/constants"; import { DocumentStatusType } from "need4deed-sdk"; +/** + * Converts a UTC "HH:mm" string to the browser's local time "HH:mm" string. + * Returns the original value unchanged if it cannot be parsed. + */ +export function utcHhmmToLocal(hhmm: string): string { + const [h, m] = hhmm.split(":").map(Number); + if (isNaN(h) || isNaN(m)) return hhmm; + const d = new Date(); + d.setUTCHours(h, m, 0, 0); + return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0"); +} + export function getDateLocalTooUTC(dateStr: string | undefined) { if (!dateStr) return undefined;