@licklist/design 0.59.0-dev.9 → 0.59.0

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

@@ -19,7 +19,6 @@ import { scrollToError } from "@licklist/plugins/dist/utils/ScrollUtils";
 import { getFirstErrorKey } from "@licklist/plugins/dist/utils/FormValues";
 
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { CategoryGroup } from "../../../../types/categories";
 import { SaleDeadline } from "../SaleDeadline/SaleDeadline";
 import {
@@ -65,7 +64,6 @@ export interface EditEventFormProps extends HasPermissionProp {
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
   isExternalPaymentLinkEnabled?: boolean;
-  workHours: WorkHour[] | undefined;
 }
 
 const eventImageTypes = {
@@ -85,7 +83,6 @@ export const EditEventForm = ({
   createProductSet,
   setEditProductSetId,
   isExternalPaymentLinkEnabled,
-  workHours,
 }: EditEventFormProps) => {
   const { t } = useTranslation(["Design", "Validation"]);
 
@@ -406,7 +403,6 @@ export const EditEventForm = ({
             setEditProductSetId={setEditProductSetId}
             setShowEditProductSet={setShowEditProductSet}
             showEditProductSet={showEditProductSet}
-            workHours={workHours}
           />
 
           {hasPermission && !showEditProductSet && (

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

@@ -5,7 +5,6 @@ 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";
@@ -16,7 +15,6 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setShowEditProductSet: (value: boolean) => void;
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
-  workHours: WorkHour[] | undefined;
 }
 
 export const SelectEventProductSet = ({
@@ -25,7 +23,6 @@ export const SelectEventProductSet = ({
   setEditProductSetId,
   showEditProductSet,
   setShowEditProductSet,
-  workHours,
 }: SelectEventProductSetProps) => {
   const { t } = useTranslation(["Design"]);
   const form = useFormContext<EditEventFormValues>();
@@ -202,13 +199,14 @@ export const SelectEventProductSet = ({
         </Form.Group>
       </div>
       {showEditProductSet && productSetId && (
-        <EditEventProductSet
-          onSubmit={onSubmit}
-          defaultValues={
-            productSetId === editedProductSet?.id && editedProductSet
-          }
-          workHours={workHours}
-        />
+        <>
+          <EditEventProductSet
+            onSubmit={onSubmit}
+            defaultValues={
+              productSetId === editedProductSet?.id && editedProductSet
+            }
+          />
+        </>
       )}
     </>
   );

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

@@ -5,7 +5,6 @@ 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";
@@ -23,13 +22,11 @@ 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;
@@ -127,7 +124,6 @@ export const EditEventProductSet = ({
             companyName={selectedCompany?.title}
             fee={feeInPercent}
             isEventEditProductSet
-            workHours={workHours}
           />
           <Button
             disabled={isLoading}

package/src/iframe/activity-card/ActivityCard.tsx

@@ -13,14 +13,12 @@ export type ActivityCardProps = {
   onSelect: () => void;
   isSelected: boolean;
   layout?: Layout;
-  availableTimes?: string | null;
 };
 
 export const ActivityCard = ({
   title,
   duration,
   price,
-  availableTimes,
   // image,
   onSelect,
   isSelected,
@@ -35,6 +33,7 @@ export const ActivityCard = ({
       >
         <div className={clsx("d-flex", "flex-column")}>
           <div className="activity-card-title">{title}</div>
+
           {duration && <div>{duration}</div>}
 
           {price && <div>{price}</div>}
@@ -51,8 +50,7 @@ export const ActivityCard = ({
         })}
       >
         <div className="description">
-          <div className="title mb-2">{title}</div>
-          {availableTimes && <div>{availableTimes}</div>}
+          <div className="title">{title}</div>
           {duration && (
             <div>
               <p>{duration}</p>

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -16,7 +16,6 @@ export function Default() {
   return (
     <div>
       <IframeEventCard
-        showMoreInfo
         imageSrc={
           showImage
             ? // eslint-disable-next-line max-len

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -29,7 +29,6 @@ interface IframeEventCardProps {
   titleId?: string;
   descriptionId?: string;
   imageClassName?: string;
-  showMoreInfo?: boolean;
 }
 
 export function IframeEventCard({
@@ -47,7 +46,6 @@ export function IframeEventCard({
   titleId,
   descriptionId,
   imageClassName,
-  showMoreInfo,
 }: IframeEventCardProps) {
   const { formatNumber } = useIntl();
   const { t } = useTranslation("Design");
@@ -72,7 +70,6 @@ export function IframeEventCard({
       )}
       onClick={goToDetails ? onClick : undefined}
     >
-      {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
       {imageSrc && (
         <Card.Img
           className={imageClassName ?? "card-image"}
@@ -94,8 +91,12 @@ export function IframeEventCard({
               <div className="icon-wrapper">
                 <CalendarSvg />
               </div>
-              <p className="m-0 list-view-hided">{date}</p>
-              <p className="m-0 grid-view-hided">{shortDate}</p>
+              <p className="iframe-event-card__bold m-0 list-view-hided">
+                {date}
+              </p>
+              <p className="iframe-event-card__bold m-0 grid-view-hided">
+                {shortDate}
+              </p>
             </div>
           </Card.Text>
 
@@ -105,7 +106,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <ClockSvg />
                 </div>
-                <p className="m-0">{type}</p>
+                <p className="iframe-event-card__bold m-0">{type}</p>
               </div>
             </Card.Text>
           )}
@@ -116,7 +117,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <TicketSvg />
                 </div>
-                <p className="m-0">
+                <p className="iframe-event-card__bold m-0">
                   {t("from")}{" "}
                   {formatNumber(cost, { style: "currency", currency: "GBP" })}
                 </p>

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -90,7 +90,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           type="number"
           onChange={(e) => handleChangeValue(Number(e.target.value))}
           value={value}
-          min={0}
+          min={min}
           max={max}
           defaultValue={defaultValue}
           placeholder={placeholder}

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -28,9 +28,7 @@ export const LeftBlock = ({
         {pageTitle && (
           <>
             {typeof pageTitle === "string" ? (
-              <div className="title" id="navigation-title">
-                {pageTitle}
-              </div>
+              <div className="title">{pageTitle}</div>
             ) : (
               pageTitle
             )}

package/src/iframe/page/components/PageBody/constants.ts

@@ -25,6 +25,6 @@ export const COLLAPSE_MARGIN = 36;
 
 export const PAGE_LEFT_BLOCK_CONTAINER_ID = "page-left-block-container";
 export const PAGE_CALENDAR_SELECT_WRAPPER = "calendar-select-wrapper";
-export const PAGE_BODY_WITH_SCROLL = "page-body-with-scroll";
+export const PAYMENT_LINK_PAGE_BODY = "payment_link_page_body";
 
 export const PAGE_LEFT_BLOCK_MAP_DEFAULT_SIZE = 300;

package/src/iframe/page/components/PageBody/hooks/useResizePageBody.ts

@@ -16,7 +16,7 @@ import {
   PAGE_LEFT_BLOCK_CONTAINER_ID,
   PAGE_LEFT_BLOCK_MAP_DEFAULT_SIZE,
   PAGE_CALENDAR_SELECT_WRAPPER,
-  PAGE_BODY_WITH_SCROLL,
+  PAYMENT_LINK_PAGE_BODY,
 } from "../constants";
 import { ChangeRightBlockHeightEvent } from "../types";
 
@@ -52,10 +52,10 @@ export const useResizePageBody = () => {
       ? calenderWrapper.clientHeight
       : 0;
 
-    const paymentLinkPageBody = document.getElementById(PAGE_BODY_WITH_SCROLL);
+    const paymentLinkPageBody = document.getElementById(PAYMENT_LINK_PAGE_BODY);
     if (paymentLinkPageBody) {
       paymentLinkPageBody.scroll({
-        top: -height,
+        top: -rightBlockHeight,
         behavior: "smooth",
       });
     }

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: order.totalToPayAmount,
+      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
     });
   }
 
@@ -84,17 +84,17 @@ const processedPaymentSummary = ({
 
   summaryItems.push({
     translateKey: TOTAL_PAID,
-    price: order.paidAmount,
+    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
   });
-  if (order.totalToPayAmount <= 0) {
+  if (totalWithDiscount <= 0) {
     return summaryItems;
   }
   summaryItems = [...summaryItems, ...externalPaymentDetail];
 
-  if (order.remainingToPay) {
+  if (totalWithDiscount > order.totalAmount) {
     summaryItems.push({
       translateKey: REMAINING_TO_PAY,
-      price: order.remainingToPay,
+      price: totalWithDiscount - order.totalAmount,
     });
   }
   return summaryItems;

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -16,7 +16,7 @@ import { PaymentTimer } from "./PaymentTimer";
 import { Page, PageBody } from "../../page";
 import { BookingSummary } from "../../order-process";
 import { cartSumByOrderProducts } from "../../order-process/components/BookingSummary/utils";
-import { PAGE_BODY_WITH_SCROLL } from "../../page/components/PageBody/constants";
+import { PAYMENT_LINK_PAGE_BODY } from "../../page/components/PageBody/constants";
 
 export interface PaymentMetadata {
   total: number;
@@ -126,7 +126,7 @@ export const PaymentPage = ({
         onCloseButtonClick={isIframePayment ? onGoBack : undefined}
       /> */}
       <PageBody
-        id={PAGE_BODY_WITH_SCROLL}
+        id={PAYMENT_LINK_PAGE_BODY}
         leftBlock={
           <PageBody.LeftBlock>
             <div className="d-flex align-items-center mb-5">

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -12,8 +12,6 @@ import {
   RYFT_STATUS_PENDING_ACTION,
   AttemptPaymentResponse,
 } from "@licklist/plugins/dist/hooks/Ryft/useRyftPayment";
-import { ProviderPaymentSettings } from "@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper";
-
 import { BlockLoader, ButtonLoader } from "../../static";
 import { injectComponentsInRyftForm } from "./utils/ryft-form";
 
@@ -42,13 +40,11 @@ export interface RyftPaymentFormProps {
   ) => Promise<void>;
   onSubmit: () => Promise<AttemptPaymentResponse>;
   resetReferrer?: () => void;
-  providerPaymentSettings?: ProviderPaymentSettings;
 }
 
 export const RyftPaymentForm = ({
   accountId,
   isCreateLoading,
-  providerPaymentSettings,
   initRyft,
   resetReferrer,
   onSubmit,
@@ -123,26 +119,13 @@ export const RyftPaymentForm = ({
   };
 
   useEffect(
-    () => {
-      if (
-        !formRef.current?.childNodes?.length ||
-        formRef.current?.childNodes?.length < 3 ||
-        !accountId.data?.account_id
-      ) {
-        return;
-      }
-      injectComponentsInRyftForm({
-        t,
-        additionalPaymentMethodsEnabled:
-          providerPaymentSettings?.additionalPaymentMethodsEnabled,
-      });
-    },
+    () => injectComponentsInRyftForm({ t }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [formRef.current?.childNodes?.length]
   );
 
   useEffect(() => {
-    if (!accountId.data?.account_id || accountId.isError) return;
+    if (!accountId.data || accountId.isError) return;
 
     initRyft(
       () => {
@@ -156,7 +139,7 @@ export const RyftPaymentForm = ({
     );
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [accountId.data?.account_id]);
+  }, [accountId.data]);
 
   if (accountId.isLoading || accountId.isFetching || isCreateLoading)
     return (

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

@@ -2,18 +2,17 @@ import { TFunction } from "react-i18next";
 
 export const injectComponentsInRyftForm = ({
   t,
-  additionalPaymentMethodsEnabled,
 }: {
   t: TFunction<string[]>;
-  additionalPaymentMethodsEnabled?: boolean;
 }) => {
   const cardContainer = document.getElementById("ryft-pay-iframe");
+  const oldCardDividerContainer = document.getElementById(
+    "card-title-container"
+  );
 
-  if (!cardContainer) {
+  if (!cardContainer || oldCardDividerContainer) {
     return;
   }
-  // Removing of the old title container
-  document.getElementById("card-title-container")?.remove();
 
   const cardTitle = document.createElement("div");
   const cardText = document.createElement("div");
@@ -27,14 +26,10 @@ export const injectComponentsInRyftForm = ({
 
   const payGrid = document.getElementById("ryft-pay-grid");
 
-  if (!payGrid || !additionalPaymentMethodsEnabled) {
+  if (!payGrid) {
     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");
@@ -42,7 +37,6 @@ 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

@@ -36,7 +36,7 @@ export interface DateAndRecurrenceInputValues {
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
   providerHasBookingManagement: boolean;
   isLoading?: boolean;
 }
@@ -90,7 +90,7 @@ export const DateAndRecurrenceInput = ({
     clearEditState();
   });
 
-  const popoverId = useId();
+  const popoverId = useId()!;
 
   const { t } = useTranslation("Design");
 
@@ -228,7 +228,6 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
-                workHours={workHours}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

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

@@ -5,8 +5,9 @@ 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, TIME_FORMAT } from "@licklist/core/dist/Config/Date";
+import { TIMEZONE } 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";
@@ -26,6 +27,7 @@ import {
 import { ProductSetRecurrenceOverridesControl } from "./ProductSetRecurrenceOverridesControl";
 import { MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE } from "../product/constants";
 
+
 export interface DateAndRecurrenceInputValues {
   menuRecurrences?: Partial<ProductSetRecurrence>[];
 }
@@ -57,7 +59,7 @@ export const DateInput = ({
     control,
     keyName: "_id",
   });
-  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
+
   const [isDatePopoverVisible, setIsDatePopoverVisible] = useState(false);
   const availableTimesFormRef = useRef<AvailableTimesControlRef>();
   const [editState, setEditState] = useState<{
@@ -92,7 +94,6 @@ export const DateInput = ({
     // Hotfix for an issue with Popover close & open actions
     setTimeout(() => {
       setEditState({ index, values: next });
-      setAvailableTimes(next.availableTimes || []);
       setIsDatePopoverVisible(() => true);
     }, 100);
   };
@@ -220,7 +221,7 @@ export const DateInput = ({
                     workHours={workHours}
                     isLoading={isLoading}
                     ref={availableTimesFormRef}
-                    defaultValues={availableTimes}
+                    defaultValues={[]}
                     errorMessage={
                       errors?.menuRecurrences?.[`${editState?.index}`]
                         ?.availableTimes?.message

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

@@ -85,7 +85,7 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
 }

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.tsx

@@ -26,16 +26,12 @@ 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,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;

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

@@ -24,10 +24,8 @@ 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,17 +7,14 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import {
-  ProductType,
-  PRODUCT_DEfAULT_COLORS,
-} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { ProductType } 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,
@@ -39,7 +36,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,
@@ -149,7 +146,7 @@ export function ProductControl<T extends FormValues>({
     clearErrors,
   } = useFormContext<T>();
 
-  const { setLoading, productGroupList } = useContext(ProductSetLoadingContext);
+  const { setLoading } = useContext(ProductSetLoadingContext);
   const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
@@ -162,8 +159,8 @@ export function ProductControl<T extends FormValues>({
 
   const advancedId = useId();
   const nameId = useId();
-
-  const productGroupId = useId();
+  // @TODO: no need for v1 release
+  // const productGroupId = useId();
   const descriptionId = useId();
   const termsAndConditionsId = useId();
   const isAvailableId = useId();
@@ -403,35 +400,6 @@ 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>
 
@@ -704,6 +672,38 @@ 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>