@licklist/design 0.62.3 → 0.63.0-dev.0

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -5,6 +5,7 @@ import { useId } from "@react-aria/utils";
 import { Controller, useFormContext } from "react-hook-form";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { ConfirmModal } from "../../../../modals/confirmation/ConfirmModal";
 import { EditEventFormValues } from "../EditEventForm/EditEventForm";
 import { EditEventProductSet } from "./component/EditEventProductSet";
@@ -15,6 +16,7 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setShowEditProductSet: (value: boolean) => void;
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
+  workHours: WorkHour[] | undefined;
 }
 
 export const SelectEventProductSet = ({
@@ -23,6 +25,7 @@ export const SelectEventProductSet = ({
   setEditProductSetId,
   showEditProductSet,
   setShowEditProductSet,
+  workHours,
 }: SelectEventProductSetProps) => {
   const { t } = useTranslation(["Design"]);
   const form = useFormContext<EditEventFormValues>();
@@ -199,14 +202,13 @@ export const SelectEventProductSet = ({
         </Form.Group>
       </div>
       {showEditProductSet && productSetId && (
-        <>
-          <EditEventProductSet
-            onSubmit={onSubmit}
-            defaultValues={
-              productSetId === editedProductSet?.id && editedProductSet
-            }
-          />
-        </>
+        <EditEventProductSet
+          onSubmit={onSubmit}
+          defaultValues={
+            productSetId === editedProductSet?.id && editedProductSet
+          }
+          workHours={workHours}
+        />
       )}
     </>
   );

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -5,6 +5,7 @@ import { isEqual } from "lodash";
 import { useParams } from "react-router-dom";
 import { useEventEditProductSetContext } from "@licklist/plugins/dist/context/event/EventEditProductSetContext";
 import { useTranslation } from "react-i18next";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { BlockLoader } from "../../../../../static/loader/BlockLoader";
 import { ProductSetControl } from "../../../../../product-set";
 import { ProductSetContextProvider } from "../../../../../product-set/form/context";
@@ -22,11 +23,13 @@ export interface EventDates {
 interface EditEventProductSetProps {
   onSubmit: (value: EditEventFormValues["editedProductSet"]) => void;
   defaultValues?: EditEventFormValues["editedProductSet"];
+  workHours: WorkHour[] | undefined;
 }
 
 export const EditEventProductSet = ({
   onSubmit,
   defaultValues,
+  workHours,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
     companyId: string;
@@ -124,6 +127,7 @@ export const EditEventProductSet = ({
             companyName={selectedCompany?.title}
             fee={feeInPercent}
             isEventEditProductSet
+            workHours={workHours}
           />
           <Button
             disabled={isLoading}

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -63,7 +63,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail);
 
   const totalDiscount = calculateTotalDiscount(order.payments);
-  const totalWithDiscount = total - Number(totalDiscount);
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,
@@ -74,7 +74,7 @@ const processedPaymentSummary = ({
   if (totalDiscount) {
     summaryItems.push({
       translateKey: AMOUNT_WITH_DISCOUNT,
-      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+      price: order.totalToPayAmount,
     });
   }
 
@@ -84,17 +84,17 @@ const processedPaymentSummary = ({
 
   summaryItems.push({
     translateKey: TOTAL_PAID,
-    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+    price: order.paidAmount,
   });
-  if (totalWithDiscount <= 0) {
+  if (order.totalToPayAmount <= 0) {
     return summaryItems;
   }
   summaryItems = [...summaryItems, ...externalPaymentDetail];
 
-  if (totalWithDiscount > order.totalAmount) {
+  if (order.remainingToPay) {
     summaryItems.push({
       translateKey: REMAINING_TO_PAY,
-      price: totalWithDiscount - order.totalAmount,
+      price: order.remainingToPay,
     });
   }
   return summaryItems;

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -123,18 +123,26 @@ export const RyftPaymentForm = ({
   };
 
   useEffect(
-    () =>
+    () => {
+      if (
+        !formRef.current?.childNodes?.length ||
+        formRef.current?.childNodes?.length < 3 ||
+        !accountId.data?.account_id
+      ) {
+        return;
+      }
       injectComponentsInRyftForm({
         t,
         additionalPaymentMethodsEnabled:
           providerPaymentSettings?.additionalPaymentMethodsEnabled,
-      }),
+      });
+    },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [formRef.current?.childNodes?.length]
   );
 
   useEffect(() => {
-    if (!accountId.data || accountId.isError) return;
+    if (!accountId.data?.account_id || accountId.isError) return;
 
     initRyft(
       () => {
@@ -148,7 +156,7 @@ export const RyftPaymentForm = ({
     );
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [accountId.data]);
+  }, [accountId.data?.account_id]);
 
   if (accountId.isLoading || accountId.isFetching || isCreateLoading)
     return (

package/src/iframe/ryft/utils/ryft-form.ts

@@ -8,13 +8,12 @@ export const injectComponentsInRyftForm = ({
   additionalPaymentMethodsEnabled?: boolean;
 }) => {
   const cardContainer = document.getElementById("ryft-pay-iframe");
-  const oldCardDividerContainer = document.getElementById(
-    "card-title-container"
-  );
 
-  if (!cardContainer || oldCardDividerContainer) {
+  if (!cardContainer) {
     return;
   }
+  // Removing of the old title container
+  document.getElementById("card-title-container")?.remove();
 
   const cardTitle = document.createElement("div");
   const cardText = document.createElement("div");
@@ -32,6 +31,10 @@ export const injectComponentsInRyftForm = ({
     return;
   }
 
+  // Removing of the old mobile  title container  and divider container
+  document.getElementById("mobile-pay-title")?.remove();
+  document.getElementById("mobile-pay-divider-container")?.remove();
+
   // Adding title and divider for apple and google pay button
   const mobilePayTitle = document.createElement("div");
   const dividerText = document.createElement("div");
@@ -39,6 +42,7 @@ export const injectComponentsInRyftForm = ({
   const container = document.createElement("div");
   mobilePayTitle.className = "mobile-pay-title";
   mobilePayTitle.innerText = t("Design:expressCheckoutWith");
+  mobilePayTitle.id = "mobile-pay-title";
   dividerText.id = "mobile-pay-divider-text";
   dividerText.innerText = "or";
   divider.id = "mobile-pay-divider";

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
-import { useFieldArray, useFormContext } from "react-hook-form";
+import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useClickAway } from "react-use";
 import { DateTime } from "luxon";
@@ -14,7 +14,6 @@ import {
   SortableContext,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CONFIRM_MODAL_ACTIONS } from "../../modals/confirmation/ConfirmModal";
 import { Icon } from "../../static";
@@ -27,16 +26,15 @@ import {
   AvailableTimesControl,
   AvailableTimesControlRef,
 } from "../../zone/form/components/AvailableTimesControl";
-
-// eslint-disable-next-line max-len
-
-export interface DateAndRecurrenceInputValues {
-  menuRecurrences?: Partial<ProductSetRecurrence>[];
-}
+import { ProductSetControlValues } from "..";
+import {
+  getProductWithSmallestDuration,
+  getLatestAvailableDateTime,
+} from "./utils";
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
   providerHasBookingManagement: boolean;
   isLoading?: boolean;
 }
@@ -54,7 +52,9 @@ export const DateAndRecurrenceInput = ({
     getValues,
     setValue,
     clearErrors,
-  } = useFormContext<DateAndRecurrenceInputValues>();
+  } = useFormContext<ProductSetControlValues>();
+
+  const steps = useWatch({ control, name: "steps" });
 
   const [availableTimes, setAvailableTimes] = useState<string[]>([]);
   const availableTimesFormRef = useRef<AvailableTimesControlRef>();
@@ -90,7 +90,7 @@ export const DateAndRecurrenceInput = ({
     clearEditState();
   });
 
-  const popoverId = useId()!;
+  const popoverId = useId();
 
   const { t } = useTranslation("Design");
 
@@ -101,11 +101,13 @@ export const DateAndRecurrenceInput = ({
     const isAvailableTimesFormValid =
       await availableTimesFormRef.current?.trigger();
 
+    const { availableTimes } = availableTimesFormRef.current.getValues();
+
     if (next?.startTime && next?.endTime && isAvailableTimesFormValid) {
       const startTime = DateTime.fromISO(next.startTime);
       const endTime = DateTime.fromISO(next.endTime);
-      const { availableTimes } = availableTimesFormRef.current.getValues();
-      const validAvalilableTimes = availableTimes.every((time) => {
+
+      const areAvailableTimesValid = availableTimes.every((time) => {
         const currentAvailableTime = DateTime.fromFormat(time, TIME_FORMAT);
 
         return (
@@ -113,7 +115,8 @@ export const DateAndRecurrenceInput = ({
           currentAvailableTime.diff(endTime, "minutes").minutes <= 0
         );
       });
-      if (!validAvalilableTimes) {
+
+      if (!areAvailableTimesValid) {
         availableTimesFormRef.current.setError("availableTimes", {
           message: t("Validation:fieldTimeBetween", {
             attribute: t("Design:startTimesSmall"),
@@ -126,6 +129,36 @@ export const DateAndRecurrenceInput = ({
       }
     }
 
+    // this check is required to prevent user from adding available time
+    // less than the lowest duration product, e.g. if lowest duration product
+    // is 1 hour and user tries to add time 15 minutes before end time,
+    // such time can never be booked
+    const lowestDurationProduct = getProductWithSmallestDuration(steps);
+
+    if (lowestDurationProduct) {
+      const endTime = next?.endTime
+        ? DateTime.fromFormat(next?.endTime, TIME_FORMAT)
+        : // this is to allow user to add 23:00 if end is at 23:59
+          DateTime.fromFormat("23:59", TIME_FORMAT).plus({ minutes: 1 });
+
+      const latestAvailableTime = getLatestAvailableDateTime(availableTimes);
+
+      const latestAllowedTime = endTime.minus({
+        minutes: lowestDurationProduct.duration,
+      });
+
+      if (latestAvailableTime > latestAllowedTime) {
+        availableTimesFormRef.current.setError("availableTimes", {
+          message: t("Validation:fieldTimeBefore", {
+            attribute: t("Design:timeLowercase"),
+            time: latestAllowedTime.toFormat(TIME_FORMAT),
+          }),
+        });
+
+        return;
+      }
+    }
+
     const availableTime =
       availableTimesFormRef?.current?.getValues()?.availableTimes || null;
 
@@ -228,6 +261,7 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
+                workHours={workHours}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

package/src/product-set/control/DateInput.tsx

@@ -5,9 +5,8 @@ import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useClickAway } from "react-use";
-import { TIMEZONE } from "@licklist/core/dist/Config/Date";
+import { UTC_TIMEZONE, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
-import { TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import { DateTime } from "luxon";
 import RRule, { Frequency } from "rrule";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
@@ -27,7 +26,6 @@ import {
 import { ProductSetRecurrenceOverridesControl } from "./ProductSetRecurrenceOverridesControl";
 import { MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE } from "../product/constants";
 
-
 export interface DateAndRecurrenceInputValues {
   menuRecurrences?: Partial<ProductSetRecurrence>[];
 }
@@ -138,7 +136,7 @@ export const DateInput = ({
       until: (start as DateTime).toJSDate(),
       byweekday: [],
       freq: Frequency.DAILY,
-      tzid: TIMEZONE,
+      tzid: UTC_TIMEZONE,
       interval: 1,
     }).replace("RRULE:", "");
 

package/src/product-set/control/ProductSetControl.stories.tsx

@@ -2,12 +2,12 @@ import { Meta, Story } from "@storybook/react";
 import React from "react";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";
+import { OPERATIONAL_COST_CUSTOMER } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import {
   ProductSetControl,
   ProductSetControlProps,
   ProductSetControlValues,
 } from "./ProductSetControl";
-import { OPERATIONAL_COST_CUSTOMER } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 
 export default {
   title: "Product Set/Control",

package/src/product-set/control/ProductSetControl.tsx

@@ -22,14 +22,10 @@ import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemp
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { ruleForUrlWithProtocol } from "@licklist/plugins/dist/validation/Rules/urlRule";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
-import {
-  DateAndRecurrenceInput,
-  // TODO: Show Date Component, when reccurent date bugs are fixed
-  // DateAndRecurrenceInput,
-  DateAndRecurrenceInputValues,
-} from "./DateAndRecurrenceInput";
+import { DateAndRecurrenceInput } from "./DateAndRecurrenceInput";
 import TutorialGifCard from "./TutorialGifCard";
 import { Step } from "../types";
 import { StepsControl } from "../form/StepsControl";
@@ -53,7 +49,7 @@ export interface TemplateItem {
   label: string;
 }
 
-export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
+export interface ProductSetControlValues {
   name: string;
   type: ProductSetType;
   termsAndConditions: string;
@@ -65,6 +61,7 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   steps: Step[];
   emailTemplates?: TemplateItem[];
   smsTemplates?: TemplateItem[];
+  menuRecurrences?: Partial<ProductSetRecurrence>[];
 }
 
 export interface ProductSetControlShared {
@@ -85,7 +82,7 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
 }

package/src/product-set/control/utils.ts

@@ -0,0 +1,25 @@
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { dateTimesSortFn } from "@licklist/plugins/dist/utils/dateTime";
+import { extractObjectWithLowestKey } from "@licklist/plugins/dist/utils/extractObjectWithLowestKey";
+import { DateTime } from "luxon";
+import { Product, Step } from "../types";
+
+const getProductsFromSteps = (steps: Step[]): Product[] =>
+  steps.reduce(
+    (acc, step) =>
+      acc.concat(
+        step.productCategories.reduce(
+          (acc, productCategory) => acc.concat(productCategory.products),
+          []
+        )
+      ),
+    []
+  );
+
+export const getProductWithSmallestDuration = (steps: Step[]): Product =>
+  extractObjectWithLowestKey(getProductsFromSteps(steps), "duration");
+
+export const getLatestAvailableDateTime = (array: string[]): DateTime =>
+  array
+    .map((time) => DateTime.fromFormat(time, TIME_FORMAT))
+    .sort(dateTimesSortFn("desc"))[0];

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

@@ -307,7 +307,7 @@ export function ProductCategoriesControl({
         title={t("addCategory")}
         isOverride={isOverrides}
         onClick={() => {
-           if (isOverrides) return;
+          if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />

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

@@ -63,9 +63,9 @@ Default.args = {
       sort: 100,
       type: "standard",
       updatedAt: "2023-05-08T15:55:28.000+03:00",
+      defaultDuration: 30,
       zoneRecurrences: [
         {
-          availableTimes: ["10:05", "10:25", "10:45"],
           endDate: "2022-02-22",
           endTime: "22:00:00",
           id: 1,
@@ -90,7 +90,6 @@ Default.args = {
       updatedAt: "2023-05-08T15:55:28.000+03:00",
       zoneRecurrences: [
         {
-          availableTimes: ["10:05", "10:25", "10:45"],
           endDate: "2022-02-22",
           endTime: "22:00:00",
           id: 1,

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

@@ -26,12 +26,16 @@ import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 export interface WithIsLoading {
   isLoading: boolean;
 }
+export interface WithIdOptional {
+  id?: number;
+}
+
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;

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

@@ -24,8 +24,10 @@ export const useSortableTreeFunctions = ({
   const cancelChanges = (index: number) => {
     if (isOverrides) return;
     if (!previousValue) {
+      // eslint-disable-next-line consistent-return
       return remove(index);
     }
+    // eslint-disable-next-line consistent-return
     return setValue(`${fieldName}.${index}` as const, previousValue);
   };
 

package/src/product-set/product/ProductControl.tsx

@@ -7,14 +7,17 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  ProductType,
+  PRODUCT_DEfAULT_COLORS,
+} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
 } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
-import clsx from "clsx";
 import React, {
   ChangeEvent,
   useCallback,
@@ -36,7 +39,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
-import { PRODUCT_DEfAULT_COLORS } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -146,7 +149,7 @@ export function ProductControl<T extends FormValues>({
     clearErrors,
   } = useFormContext<T>();
 
-  const { setLoading } = useContext(ProductSetLoadingContext);
+  const { setLoading, productGroupList } = useContext(ProductSetLoadingContext);
   const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
@@ -159,8 +162,8 @@ export function ProductControl<T extends FormValues>({
 
   const advancedId = useId();
   const nameId = useId();
-  // @TODO: no need for v1 release
-  // const productGroupId = useId();
+
+  const productGroupId = useId();
   const descriptionId = useId();
   const termsAndConditionsId = useId();
   const isAvailableId = useId();
@@ -400,6 +403,35 @@ export function ProductControl<T extends FormValues>({
             isRequired={false}
             defaultColors={PRODUCT_DEfAULT_COLORS}
           />
+
+          <Form.Group controlId={productGroupId}>
+            <Form.Label>{t("productGroup")}</Form.Label>
+            <Form.Control
+              as="select"
+              {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
+              isInvalid={HookFormService.isInvalid<T>(
+                `${fieldNamePrefix}.productGroupId` as Path<T>,
+                errors
+              )}
+              disabled={isLoading}
+              defaultValue=""
+            >
+              <option value="">{t("Design:selectProductGroup")}</option>
+              {productGroupList.map((productGroup) => {
+                return (
+                  <option value={productGroup.id} key={productGroup.id}>
+                    {productGroup.value}
+                  </option>
+                );
+              })}
+            </Form.Control>
+            <Form.Control.Feedback type="invalid">
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.productGroupId` as Path<T>,
+                errors
+              )}
+            </Form.Control.Feedback>
+          </Form.Group>
         </Col>
       </Row>
 
@@ -672,38 +704,6 @@ export function ProductControl<T extends FormValues>({
         </Collapse>
 
         <Row>
-          {/* @TODO: no need for v1 release
-            <Col xs={12} sm={6}>
-              <Form.Group controlId={productGroupId}>
-                <Form.Label>{t("productGroup")}</Form.Label>
-                <Form.Control
-                  as="select"
-                  {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
-                  isInvalid={HookFormService.isInvalid<T>(
-                    `${fieldNamePrefix}.productGroupId` as Path<T>,
-                    errors
-                  )}
-                  disabled={isLoading}
-                  defaultValue=""
-                >
-                  <option value="">{t("Design:selectProductGroup")}</option>
-                  {productGroupList.map((productGroup) => {
-                    return (
-                      <option value={productGroup.id} key={productGroup.id}>
-                        {productGroup.value}
-                      </option>
-                    );
-                  })}
-                </Form.Control>
-                <Form.Control.Feedback type="invalid">
-                  {HookFormService.getErrors<T>(
-                    `${fieldNamePrefix}.productGroupId` as Path<T>,
-                    errors
-                  )}
-                </Form.Control.Feedback>
-              </Form.Group>
-            </Col> */}
-
           <Col xs={12}>
             {hasBookingManagement && (
               <ProductBookingManagementControl<T>

package/src/product-set/product/fixed-duration-fields/FixedDurationOptions.tsx

@@ -5,8 +5,6 @@ import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/
 import { useWatch } from "react-hook-form";
 import { FormNumberInput } from "../../../static";
 
-
-
 interface FixedDurationOptionsProps<T> extends FieldNamePrefixPath<T> {
   isOverrides?: boolean;
 }

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

@@ -1,9 +1,7 @@
-import { DateTime } from "luxon";
 import React from "react";
 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";
 
@@ -25,22 +23,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/RecurrenceAndFrequencyInput.tsx

@@ -72,7 +72,6 @@ function RecurrenceAndFrequencyInput({
             </Form.Control.Feedback>
           </Form.Group>
         </Col>
-
       </Row>
 
       <Row>