@licklist/design 0.67.1 → 0.67.2-dev.2

package/src/product-set/form/SelectCategoryModal.tsx

@@ -25,7 +25,7 @@ import {
 } from "react-icons/fa";
 import { ProductSetLoadingContext } from "./context";
 
-const CATEGORY_TYPES_NAMES = {
+export const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,7 +33,7 @@ const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const;
 
-type CategoryConfig = { label: string; icon: ReactElement };
+export type CategoryConfig = { label: string; icon: ReactElement };
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {

package/src/product-set/form/SubProductsControl.tsx

@@ -71,9 +71,6 @@ export function SubProductsControl({
                     images: subProducts[index]?.images as Image[],
                   };
                   // @ts-expect-error TS2345
-                  // @TODO fix prod type error
-                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  // @ts-ignore
                   append(subProductCopy);
                 }}
               />

package/src/product-set/form/VenueMapsControl.tsx

@@ -47,9 +47,6 @@ export const VenueMapsControl = ({
                               url={image.url}
                               name={name}
                               points={points}
-                              // @TODO fix prod type error
-                              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                              // @ts-ignore
                               products={products}
                               pointProducts={pointProducts}
                               onPointProductsChange={onPointProductsChange}

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -9,11 +9,13 @@ interface useSortableTreeFunctionsProps {
 export const useSortableTreeFunctions = ({
   fieldName,
   remove,
+  isOverrides,
 }: useSortableTreeFunctionsProps) => {
   const { getValues, setValue } = useFormContext();
   const [previousValue, setEditValue] = useState(null);
 
   const edit = (index: number) => {
+    if (isOverrides) return;
     const currentCategoryProduct = getValues(`${fieldName}.${index}` as const);
     const cloneCategoryProduct = structuredClone(currentCategoryProduct);
     setEditValue(cloneCategoryProduct);

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { Col, Form } from "react-bootstrap";
 import { Controller, Path, useFormContext } from "react-hook-form";
 import { HookFormService } from "@licklist/plugins";
@@ -98,7 +98,7 @@ export const AdvancedOptions = <T extends FormValues>({
           {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
           isInvalid={HookFormService.isInvalid<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
-            errors
+            errors,
           )}
           disabled={isLoading || isOverrides}
           defaultValue=""
@@ -115,7 +115,7 @@ export const AdvancedOptions = <T extends FormValues>({
         <Form.Control.Feedback type="invalid">
           {HookFormService.getErrors<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
-            errors
+            errors,
           )}
         </Form.Control.Feedback>
       </Form.Group>
@@ -134,7 +134,7 @@ export const AdvancedOptions = <T extends FormValues>({
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
                   `${fieldNamePrefix}.termsAndConditions` as Path<T>,
-                  errors
+                  errors,
                 )}
                 disabled={isLoading || isOverrides}
                 name={name}
@@ -147,7 +147,7 @@ export const AdvancedOptions = <T extends FormValues>({
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.termsAndConditions` as Path<T>,
-              errors
+              errors,
             )}
           </Form.Control.Feedback>
         </Form.Group>

package/src/product-set/product/booking-management/ProductBookingManagement.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as Meta;
 
 export const Default: Story<ProductBookingManagementControlProps<{}>> = (
-  args,
+  args
 ) => {
   const form = useForm<ProductBookingManagementControlValues>({
     mode: "onChange",

package/src/product-set/product/quantity/ProductQuantity.stories.tsx

@@ -42,7 +42,7 @@ export const Default: Story<ProductQuantityControlProps<{}>> = (args) => {
 };
 
 export const ConstantForm: Story<ProductQuantityConstantControlProps<{}>> = (
-  args,
+  args
 ) => {
   const form = useForm<ProductQuantityConstantControlValues>({
     mode: "onChange",

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { Col, Form, Row } from "react-bootstrap";
 import {
   ArrayPath,
@@ -63,7 +63,7 @@ export const ProductZoneControl = <T extends FormValues>({
   const disabledDuration = capacity === "0" || !capacity;
 
   const { providerHasBookingManagement, zones = [] } = useContext(
-    ProductSetLoadingContext
+    ProductSetLoadingContext,
   );
 
   const currentZoneData = zones.find((zone) => zone.id === Number(zoneId));
@@ -75,10 +75,10 @@ export const ProductZoneControl = <T extends FormValues>({
           !productZones.find(
             (productZone) =>
               Number(productZone.zoneId) === zone.id &&
-              productZone.zoneId !== zoneId
-          )
+              productZone.zoneId !== zoneId,
+          ),
       ),
-    [zones, productZones, zoneId]
+    [zones, productZones, zoneId],
   );
 
   useEffect(() => {
@@ -89,7 +89,7 @@ export const ProductZoneControl = <T extends FormValues>({
     setValue(
       `${fieldNamePrefix}.duration` as Path<T>,
       /* @ts-expect-error 6385 */
-      0 as UnpackNestedValue<PathValue<T, Path<T>>>
+      0 as UnpackNestedValue<PathValue<T, Path<T>>>,
     );
     clearErrors(`${fieldNamePrefix}.duration` as Path<T>);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -104,7 +104,7 @@ export const ProductZoneControl = <T extends FormValues>({
       /* @ts-expect-error 6385 */
       (value * currentZoneData?.defaultDuration) as UnpackNestedValue<
         PathValue<T, Path<T>>
-      >
+      >,
     );
   };
   return (
@@ -123,7 +123,7 @@ export const ProductZoneControl = <T extends FormValues>({
                     disabled={isOverrides}
                     isInvalid={HookFormService.isInvalid(
                       `${fieldNamePrefix}.zoneId`,
-                      errors
+                      errors,
                     )}
                     {...field}
                   >
@@ -147,7 +147,7 @@ export const ProductZoneControl = <T extends FormValues>({
               <Form.Control.Feedback type="invalid">
                 {HookFormService.getErrors(
                   `${fieldNamePrefix}.zoneId` as Path<T>,
-                  errors
+                  errors,
                 )}
               </Form.Control.Feedback>
             </Form.Group>

package/src/provider/location-input/LocationInput.tsx

@@ -2,18 +2,22 @@ import { useId } from "@react-aria/utils";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { TimeZonePath, useTimeZoneApi } from "@licklist/plugins";
 import CountryCodeSelect from "../../static/CountryCodeSelect";
 import { LocationInputValues } from ".";
 import { FormGroupControll } from "./components";
 
-export function LocationInput() {
+export function LocationInput({ path }: { path: TimeZonePath }) {
   const {
     register,
     formState: { errors },
   } = useFormContext<LocationInputValues>();
   const { t } = useTranslation("Design");
 
+  const { data, isLoading } = useTimeZoneApi(path).useAll();
+
   const countryId = useId();
+  const timeZoneId = useId();
 
   return (
     <>
@@ -39,6 +43,7 @@ export function LocationInput() {
         name="location.postcode"
         label={t("locationPostcode")}
       />
+
       <Form.Group controlId={countryId}>
         <Form.Label>{t("locationCountry")}</Form.Label>
         <CountryCodeSelect
@@ -47,6 +52,40 @@ export function LocationInput() {
           error={errors?.location?.country?.message}
         />
       </Form.Group>
+
+      <Form.Group controlId={timeZoneId}>
+        <Form.Label>{t("locationTimeZone")}</Form.Label>
+        <Form.Control
+          {...register("location.timeZone", {
+            required: t("Validation:fieldRequired", {
+              attribute: t("locationTimeZone"),
+            }) as string,
+          })}
+          as="select"
+          custom
+          isInvalid={Boolean(errors?.location?.timeZone?.message)}
+        >
+          {isLoading ? (
+            <option key="" value="" disabled>
+              {t("loading")}
+            </option>
+          ) : (
+            <>
+              <option key="" value="" disabled>
+                {t("chooseTimeZone")}
+              </option>
+              {data.map((zone) => (
+                <option key={zone.id} value={zone.id}>
+                  {zone.name}
+                </option>
+              ))}
+            </>
+          )}
+        </Form.Control>
+        <Form.Control.Feedback type="invalid">
+          {errors?.location?.timeZone?.message}
+        </Form.Control.Feedback>
+      </Form.Group>
     </>
   );
 }

package/src/provider/location-input/index.ts

@@ -10,5 +10,6 @@ export type LocationInputValues = {
     country: string;
     latitude: string;
     longitude: string;
+    timeZone: string;
   };
 };

package/src/provider/provider-form/ProviderForm.tsx

@@ -10,6 +10,9 @@ import {
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import { useMultipleImages } from "@licklist/plugins/dist/hooks/Media/useMultipleImages";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import { ENDPOINTS } from "@licklist/core/dist/Config";
+import { TimeZonePath, useTimeZoneApi } from "@licklist/plugins";
+import { DateTime } from "luxon";
 import { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -41,6 +44,7 @@ export interface ProviderFormProps extends HasPermissionProp {
   companiesOptions?: TypeaheadOptions[];
   onSubmit: (values: ProviderFormValues) => void;
   intent?: "create" | "update";
+  path: TimeZonePath;
 }
 
 const providerImageTypes = {
@@ -56,14 +60,34 @@ export function ProviderForm({
   onSubmit,
   intent = "update",
   hasPermission = true,
+  path,
 }: ProviderFormProps) {
-  const form = useForm<ProviderFormValues>({ defaultValues });
+  const { data } = useTimeZoneApi(ENDPOINTS.TIME_ZONE_ADMIN).useAll();
+
+  const defaultTimeZone = data
+    ?.find((zone) => zone.name === DateTime.now().zoneName)
+    ?.id?.toString();
+
+  const form = useForm<ProviderFormValues>({
+    defaultValues: defaultValues ?? {
+      location: { timeZone: defaultTimeZone },
+    },
+  });
+
   const {
     setValue,
     handleSubmit,
     formState: { isSubmitting, errors },
     getValues,
   } = form;
+
+  useEffect(() => {
+    if (!defaultValues.location.timeZone) {
+      setValue("location.timeZone", defaultTimeZone);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultTimeZone]);
+
   const { t } = useTranslation("Design");
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
 
@@ -104,7 +128,7 @@ export function ProviderForm({
             description={<LocationInputDescription />}
             error={errors?.location?.country?.message}
           >
-            <LocationInput />
+            <LocationInput path={path} />
           </CollapsibleInputGroup>
           {categories && categories.length > 0 && (
             <CollapsibleInputGroup

package/src/provider/venue-form/VenueForm.tsx

@@ -11,6 +11,7 @@ import {
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useMultipleImages } from "@licklist/plugins/dist/hooks/Media/useMultipleImages";
 import { parseServerErrorForFormValidation } from "@licklist/plugins/dist/utils/parseError";
+import { TimeZonePath } from "@licklist/plugins";
 import { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -50,6 +51,7 @@ export interface VenueFormProps extends HasPermissionProp {
   intent?: "create" | "update";
   isLoading?: boolean;
   errorResponse?: unknown;
+  path: TimeZonePath;
 }
 
 const providerImageTypes = {
@@ -67,6 +69,7 @@ export function VenueForm({
   hasPermission = true,
   isLoading,
   errorResponse,
+  path,
 }: VenueFormProps) {
   const form = useForm<VenueFormValues>({ defaultValues, mode: "onChange" });
   const {
@@ -143,7 +146,7 @@ export function VenueForm({
                 }))
             }
           >
-            <LocationInput />
+            <LocationInput path={path} />
           </CollapsibleInputGroup>
           <CollapsibleInputGroup
             eventKey="workingHours"

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -1,8 +1,6 @@
-import { DateTime } from "luxon";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -24,22 +22,10 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {weekday?.end
-                  ? weekday.start
-                    ? t("timeInterval", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT,
-                        ),
-                        end: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT,
-                        ),
-                      })
-                    : t("timeFrom", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT,
-                        ),
-                      })
-                  : null}
+                {t("timeInterval", {
+                  start: weekday.start,
+                  end: weekday.end,
+                })}
               </Col>
             </Row>
           );

package/src/recurring-date-picker-input/RecurringDatePickerInput.stories.tsx

@@ -12,9 +12,7 @@ export default {
   component: RecurringDatePickerInput,
 } as Meta;
 
-type DefaultRecurringDatePickerInputProps = RecurringDatePickerInputProps;
-
-export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Default: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -23,7 +21,7 @@ export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
     </Card>
   );
 };
-export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -34,6 +32,15 @@ export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
 };
 Default.args = {
   onChange: (data) => console.log("onSubmit", data),
+  workHours: [
+    { start: "20:00", end: "04:00", day: 0, description: "" },
+    { start: "20:00", end: "04:00", day: 1, description: "" },
+    { start: "20:00", end: "04:00", day: 2, description: "" },
+    { start: "20:00", end: "12:00", day: 3, description: "" },
+    { start: "20:00", end: "23:00", day: 4, description: "" },
+    { start: "08:00", end: "12:00", day: 5, description: "" },
+    { start: "10:00", end: "16:00", day: 6, description: "" },
+  ],
 };
 Valid.args = {
   onChange: (data) => console.log("onSubmit", data),

package/src/recurring-date-picker-input/RecurringDatePickerInput.tsx

@@ -12,9 +12,14 @@ import {
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
 import { Form } from "react-bootstrap";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
-import { parseAndValidateRRule, SupportedFrequency } from "./utils";
+import {
+  parseAndValidateRRule,
+  SupportedFrequency,
+  useWorkHoursValidation,
+} from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -26,6 +31,7 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
+  workHours: WorkHour[] | undefined;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -51,6 +57,7 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
+  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -84,6 +91,8 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
+  const validator = useWorkHoursValidation(byWeekDay, workHours);
+
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -188,6 +197,8 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
+          startTimeRules={validator}
+          endTimeRules={validator}
         />
 
         {children}

package/src/recurring-date-picker-input/utils.ts

@@ -1,4 +1,9 @@
-import { DateTime } from "luxon";
+import { TIME_FORMAT, TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { fromFormat } from "@licklist/plugins/dist/utils/dateTime";
+import { DateTime, Interval } from "luxon";
+import { Validate } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -11,6 +16,7 @@ export const getWeekdayForFrequency = ({
   const parsedDate = DateTime.fromISO(date);
   return new Weekday(
     parsedDate.weekday - 1,
+    // eslint-disable-next-line no-nested-ternary
     frequency !== Frequency.MONTHLY
       ? undefined
       : parsedDate.day + 7 > parsedDate.daysInMonth
@@ -109,3 +115,87 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
+
+export const useWorkHoursValidation = (
+  byWeekDay: Weekday[] = [],
+  workHours: WorkHour[] | undefined,
+): {
+  /* @ts-expect-error 2314 */
+  validate?: Validate<string>;
+} => {
+  const { t } = useTranslation("Validation");
+  if (!workHours) return {};
+
+  const fromTimeFormat = fromFormat(TIME_FORMAT);
+  const fromTimeFullFormat = fromFormat(TIME_FULL_FORMAT);
+
+  // map every day to array of intervals describing workhours for that day
+  let intervalsByDay = workHours.map((workhour, index, self) => {
+    const res: Interval[] = [];
+
+    const startTime = fromTimeFormat(workhour.start);
+    const endTime = fromTimeFormat(workhour.end);
+
+    if (endTime > startTime) {
+      res.push(Interval.fromDateTimes(startTime, endTime));
+    } else {
+      // if end is before start, then it means that end is on the next day
+      // so count only to the end of current day
+      res.push(Interval.fromDateTimes(startTime, startTime.endOf("day")));
+    }
+
+    const prevIndex = index === 0 ? self.length - 1 : index - 1;
+
+    const prevStartTime = fromTimeFormat(self[prevIndex].start);
+    const prevEndTime = fromTimeFormat(self[prevIndex].end);
+
+    // if prevStartTime > prevEndTime then it means that prevEndTime is on the current day
+    // so we need to add interval from start of current day to prevEndTime
+    if (prevStartTime > prevEndTime) {
+      res.push(Interval.fromDateTimes(prevEndTime.startOf("day"), prevEndTime));
+    }
+
+    return res;
+  });
+
+  // if length === 0 or length === 7 then all workhours are selected, no need to filter
+  if (![0, 7].includes(byWeekDay.length)) {
+    intervalsByDay = intervalsByDay.filter((_, index) =>
+      byWeekDay.find(({ weekday }) => weekday === index),
+    );
+  }
+
+  return {
+    validate: (_time: string) => {
+      // workaround for issue with form values
+      // default values and entered values have different formats
+      const time = fromTimeFormat(_time).isValid
+        ? fromTimeFormat(_time)
+        : fromTimeFullFormat(_time);
+
+      const notFittingIntervalsByDay = intervalsByDay.reduce<Interval[][]>(
+        (acc, intervalsByDay) => {
+          if (!intervalsByDay.some((interval) => interval.contains(time))) {
+            acc.push(intervalsByDay);
+          }
+          return acc;
+        },
+        [],
+      );
+
+      const notFittingIntervals = notFittingIntervalsByDay
+        .flat()
+        .filter((interval) => !interval.contains(time));
+
+      const attribute = notFittingIntervals
+        .map((interval) => interval.toFormat("HH:mm"))
+        .join(", ");
+
+      if (notFittingIntervalsByDay.length !== 0) {
+        return t("outsideWorkingHours", { attribute }) as string;
+      }
+
+      return true;
+    },
+  };
+};

package/src/sales/booking/results/components/ResultCard.tsx

@@ -20,8 +20,6 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,

package/src/setting/admin/AdminSetting.stories.tsx

@@ -19,6 +19,7 @@ export const SettingFormComponent: Story<AdminSettingFormProps> = (args) => (
   </Container>
 );
 
+
 export const PaymentFeeFormComponent: Story<PaymentFeeFormProps> = (args) => {
   const form = useForm<PaymentFeeFormFieldValues>({
     defaultValues: args.defaultValues,

package/src/setting/admin/AdminSettingForm.tsx

@@ -10,7 +10,7 @@ import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { Link } from "react-router-dom";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { ProviderType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
 import { FaCommentAlt } from "react-icons/fa";
 import { PaymentFeeForm, PaymentFeeFormFieldValues } from "./PaymentFeeForm";
 import { Currency } from "../../types/currency";
@@ -32,7 +32,7 @@ export interface AdminSettingFormProps extends HasPermissionProp {
   providerMetadata: {
     country?: string;
     providableId?: number;
-    providerType?: ProviderType;
+    providerType?: ProvidableType;
   };
 }
 

package/src/setting/system/SystemSetting.stories.tsx

@@ -23,4 +23,4 @@ export function Default() {
       />
     </Container>
   );
-}
+}

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -307,6 +307,7 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
+                                  zoneId: null,
                                   name: "Cofee",
                                   description: "",
                                   price: 15,
@@ -315,6 +316,8 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: "sale" as const,
+                                  capacity: 0,
+                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -333,6 +336,7 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
+                                  zoneId: null,
                                   name: "Cofee 2",
                                   description: "",
                                   price: 15,
@@ -341,6 +345,8 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: "sale" as const,
+                                  capacity: 0,
+                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,