@licklist/design 0.67.2-dev.5 → 0.67.2

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

@@ -1,4 +1,7 @@
-import { useContext, useState } from "react";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React, { useContext, useState } from "react";
+
 import {
   ArrayPath,
   Controller,
@@ -79,14 +82,14 @@ export const ProductZonesControl = <T extends FormValues>({
 
   const productZonesError = HookFormService.getErrors<T>(
     `${productZonesFieldName}.root` as Path<T>,
-    errors,
+    errors
   );
 
   const zoneCapacity = useWatch({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productZonesFieldName}.${index}.capacity` as const,
+        (_, index) => `${productZonesFieldName}.${index}.capacity` as const
       ),
     ],
   });
@@ -95,7 +98,7 @@ export const ProductZonesControl = <T extends FormValues>({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productZonesFieldName}.${index}.duration` as const,
+        (_, index) => `${productZonesFieldName}.${index}.duration` as const
       ),
     ],
   });

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

@@ -29,7 +29,7 @@ Default.args = {
 };
 
 export const WithBookingManagement: Story<SelectCategoryModalProps> = (
-  args
+  args,
 ) => (
   <ProductSetLoadingContext.Provider value={contextValue}>
     <SelectCategoryModal {...args} />

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

@@ -25,7 +25,7 @@ import {
 } from "react-icons/fa";
 import { ProductSetLoadingContext } from "./context";
 
-export const CATEGORY_TYPES_NAMES = {
+const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,7 +33,7 @@ export const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const;
 
-export type CategoryConfig = { label: string; icon: ReactElement };
+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,6 +71,9 @@ 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,6 +47,9 @@ 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/product/advanced-options/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import React, { 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 { useContext, useEffect, useMemo } from "react";
+import React, { 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,21 +2,17 @@ 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 { BlockLoader } from "src/static";
 import CountryCodeSelect from "../../static/CountryCodeSelect";
 import { LocationInputValues } from ".";
 import { FormGroupControll } from "./components";
 
-export function LocationInput({ path }: { path: TimeZonePath }) {
+export function LocationInput() {
   const {
     register,
     formState: { errors },
   } = useFormContext<LocationInputValues>();
   const { t } = useTranslation("Design");
 
-  const { data, isLoading } = useTimeZoneApi(path).useAll();
-
   const countryId = useId();
 
   return (
@@ -43,7 +39,6 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
         name="location.postcode"
         label={t("locationPostcode")}
       />
-
       <Form.Group controlId={countryId}>
         <Form.Label>{t("locationCountry")}</Form.Label>
         <CountryCodeSelect
@@ -52,36 +47,6 @@ export function LocationInput({ path }: { path: TimeZonePath }) {
           error={errors?.location?.country?.message}
         />
       </Form.Group>
-
-      {isLoading ? (
-        <BlockLoader />
-      ) : (
-        <Form.Group controlId="timeZoneId">
-          <Form.Label>{t("locationTimeZone")}</Form.Label>
-          <Form.Control
-            {...register("timeZoneId", {
-              required: t("Validation:fieldRequired", {
-                attribute: t("locationTimeZone"),
-              }) as string,
-            })}
-            as="select"
-            custom
-            isInvalid={Boolean(errors?.timeZoneId?.message)}
-          >
-            <option key="" value="" disabled>
-              {t("chooseTimeZone")}
-            </option>
-            {data.map((zone) => (
-              <option key={zone.id} value={zone.id.toString()}>
-                {zone.name}
-              </option>
-            ))}
-          </Form.Control>
-          <Form.Control.Feedback type="invalid">
-            {errors?.timeZoneId?.message}
-          </Form.Control.Feedback>
-        </Form.Group>
-      )}
     </>
   );
 }

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

@@ -11,5 +11,4 @@ export type LocationInputValues = {
     latitude: string;
     longitude: string;
   };
-  timeZoneId: string;
 };

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

@@ -10,7 +10,6 @@ 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 { TimeZonePath } from "@licklist/plugins";
 import { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -42,7 +41,6 @@ export interface ProviderFormProps extends HasPermissionProp {
   companiesOptions?: TypeaheadOptions[];
   onSubmit: (values: ProviderFormValues) => void;
   intent?: "create" | "update";
-  path: TimeZonePath;
 }
 
 const providerImageTypes = {
@@ -58,17 +56,14 @@ export function ProviderForm({
   onSubmit,
   intent = "update",
   hasPermission = true,
-  path,
 }: ProviderFormProps) {
   const form = useForm<ProviderFormValues>({ defaultValues });
-
   const {
     setValue,
     handleSubmit,
     formState: { isSubmitting, errors },
     getValues,
   } = form;
-
   const { t } = useTranslation("Design");
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
 
@@ -109,7 +104,7 @@ export function ProviderForm({
             description={<LocationInputDescription />}
             error={errors?.location?.country?.message}
           >
-            <LocationInput path={path} />
+            <LocationInput />
           </CollapsibleInputGroup>
           {categories && categories.length > 0 && (
             <CollapsibleInputGroup

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

@@ -11,7 +11,6 @@ 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,
@@ -51,7 +50,6 @@ export interface VenueFormProps extends HasPermissionProp {
   intent?: "create" | "update";
   isLoading?: boolean;
   errorResponse?: unknown;
-  path: TimeZonePath;
 }
 
 const providerImageTypes = {
@@ -69,7 +67,6 @@ export function VenueForm({
   hasPermission = true,
   isLoading,
   errorResponse,
-  path,
 }: VenueFormProps) {
   const form = useForm<VenueFormValues>({ defaultValues, mode: "onChange" });
   const {
@@ -146,7 +143,7 @@ export function VenueForm({
                 }))
             }
           >
-            <LocationInput path={path} />
+            <LocationInput />
           </CollapsibleInputGroup>
           <CollapsibleInputGroup
             eventKey="workingHours"

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

@@ -1,6 +1,8 @@
+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";
 
@@ -22,10 +24,22 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {t("timeInterval", {
-                  start: weekday.start,
-                  end: weekday.end,
-                })}
+                {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}
               </Col>
             </Row>
           );

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

@@ -12,7 +12,9 @@ export default {
   component: RecurringDatePickerInput,
 } as Meta;
 
-export const Default: Story<RecurringDatePickerInputProps> = (args) => {
+type DefaultRecurringDatePickerInputProps = RecurringDatePickerInputProps;
+
+export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -21,7 +23,7 @@ export const Default: Story<RecurringDatePickerInputProps> = (args) => {
     </Card>
   );
 };
-export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
+export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -32,15 +34,6 @@ export const Valid: Story<RecurringDatePickerInputProps> = (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,14 +12,9 @@ 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,
-  useWorkHoursValidation,
-} from "./utils";
+import { parseAndValidateRRule, SupportedFrequency } from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -31,7 +26,6 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
-  workHours: WorkHour[] | undefined;
 }
 
 export interface RecurringDatePickerInputValues {
@@ -57,7 +51,6 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
-  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -91,8 +84,6 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
-  const validator = useWorkHoursValidation(byWeekDay, workHours);
-
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -197,8 +188,6 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
-          startTimeRules={validator}
-          endTimeRules={validator}
         />
 
         {children}

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

@@ -1,9 +1,4 @@
-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 { DateTime } from "luxon";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -16,7 +11,6 @@ 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
@@ -115,87 +109,3 @@ 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,6 +20,8 @@ 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,7 +19,6 @@ 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 { ProvidableType } from "@licklist/core/dist/DataMapper/Provider/ProvidableDataMapper";
+import { ProviderType } 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?: ProvidableType;
+    providerType?: ProviderType;
   };
 }
 

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

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

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

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