diff --git a/src/components/puck/HoursCard.tsx b/src/components/puck/HoursCard.tsx index f804110..03f6562 100644 --- a/src/components/puck/HoursCard.tsx +++ b/src/components/puck/HoursCard.tsx @@ -4,9 +4,16 @@ import { DayOfWeekNames, HoursTable, HoursType } from "@yext/pages-components"; import { Section, sectionVariants } from "./atoms/section.js"; import "@yext/pages-components/style.css"; import { VariantProps } from "class-variance-authority"; -import { EntityField, useDocument } from "../../index.js"; +import { + EntityField, + resolveYextEntityField, + useDocument, + YextEntityField, + YextEntityFieldSelector, +} from "../../index.js"; export type HoursCardProps = { + hours: YextEntityField; startOfWeek: keyof DayOfWeekNames | "today"; collapseDays: boolean; showAdditionalHoursText: boolean; @@ -14,36 +21,13 @@ export type HoursCardProps = { padding: VariantProps["padding"]; }; -type Interval = { - start: any; - end: any; -}; - -type HolidayHours = { - date: string; - openIntervals?: Interval[]; - isClosed?: boolean; - isRegularHours?: boolean; -}; - -type DayHour = { - openIntervals?: Interval[]; - isClosed?: boolean; -}; - -type Hours = { - monday?: DayHour; - tuesday?: DayHour; - wednesday?: DayHour; - thursday?: DayHour; - friday?: DayHour; - saturday?: DayHour; - sunday?: DayHour; - holidayHours?: HolidayHours[]; - reopenDate?: string; -}; - const hoursCardFields: Fields = { + hours: YextEntityFieldSelector({ + label: "Hours", + filter: { + types: ["type.hours"], + }, + }), startOfWeek: { label: "Start of the week", type: "radio", @@ -95,14 +79,17 @@ const hoursCardFields: Fields = { }; const HoursCard = ({ + hours: hoursField, startOfWeek, collapseDays, showAdditionalHoursText, alignment, padding, }: HoursCardProps) => { - const { hours, additionalHoursText } = useDocument() as { - hours: Hours; + const document = useDocument(); + const hours = resolveYextEntityField(document, hoursField); + + const { additionalHoursText } = document as { additionalHoursText: string; }; @@ -115,7 +102,7 @@ const HoursCard = ({ {hours && ( @@ -134,6 +121,10 @@ const HoursCard = ({ export const HoursCardComponent: ComponentConfig = { fields: hoursCardFields, defaultProps: { + hours: { + field: "hours", + constantValue: {}, + }, startOfWeek: "today", collapseDays: false, showAdditionalHoursText: true, diff --git a/src/components/puck/HoursStatus.tsx b/src/components/puck/HoursStatus.tsx index 0589054..4c6622d 100644 --- a/src/components/puck/HoursStatus.tsx +++ b/src/components/puck/HoursStatus.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { ComponentConfig, Fields } from "@measured/puck"; -import { HoursStatus } from "@yext/pages-components"; +import { HoursStatus, HoursType } from "@yext/pages-components"; import { yextCn, useDocument, @@ -11,7 +11,7 @@ import { } from "../../index.js"; export interface HoursStatusProps { - hours: YextEntityField; + hours: YextEntityField; className?: string; showCurrentStatus?: boolean; timeFormat?: "12h" | "24h"; @@ -97,7 +97,7 @@ export const HoursStatusComponent: ComponentConfig = { defaultProps: { hours: { field: "hours", - constantValue: "", + constantValue: {}, }, className: "", showCurrentStatus: true,