@licklist/design 0.68.0-dev.1 → 0.68.0

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

@@ -8,7 +8,6 @@ import {
   useFormContext,
   useWatch,
 } from "react-hook-form";
-import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
 import { useSensor, MouseSensor } from "@dnd-kit/core";
 import {
@@ -26,11 +25,7 @@ import { ProductCategoryControl } from "../product-category";
 import { ProductCategory } from "../types";
 import { ProductsControl } from "./ProductsControl";
 import { ProductSetFormValues, WithIsLoading } from "./ProductSetForm";
-import {
-  SelectCategoryModal,
-  CATEGORY_TYPES_NAMES,
-  CategoryConfig,
-} from "./SelectCategoryModal";
+import { SelectCategoryModal } from "./SelectCategoryModal";
 import { ProductSetLoadingContext } from "./context";
 import { VenueMapSetModal } from "./VenueMapSetModal";
 import { moveArrayElements, sortArrayByIndex } from "../utils";
@@ -38,29 +33,6 @@ import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
-const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
-  [CATEGORY_TYPES_NAMES.tickets]: {
-    label: "tickets",
-    icon: <FaTicketAlt color="#0e8ce2" size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.bookings]: {
-    label: "bookings",
-    icon: <FaCalendar color="#0e8ce2" size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.menuItems]: {
-    label: "menuItems",
-    icon: <FaBars color="#0e8ce2" size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.game]: {
-    label: "game",
-    icon: <FaBowlingBall color="#0e8ce2" size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.fixedDuration]: {
-    label: "fixedDuration",
-    icon: <FaCalendar color="#0e8ce2" size={10} />,
-  },
-};
-
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number;
   isOverrides?: boolean;
@@ -256,8 +228,6 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId);
           };
 
-          const categoryType = CATEGORIES_TYPE[productCategory.type];
-
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -302,12 +272,6 @@ export function ProductCategoriesControl({
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
-                  itemButton={
-                    <div className="btn-outline-primary item-icon sm border border-primary rounded-sm">
-                      {categoryType.icon}
-                      <span className="ml-2">{t(categoryType.label)}</span>
-                    </div>
-                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Button, Form, Col, Row } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
@@ -22,21 +22,16 @@ import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
-import { ErrorModal } from "../../iframe/order-process/components/ErrorModal";
 
 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;
@@ -89,7 +84,6 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext();
-  const [errorMessage, setErrorMessage] = useState("");
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -127,9 +121,6 @@ export function ProductSetForm({
     if (!serverErrors) {
       return;
     }
-    if (Array.isArray(serverErrors) && serverErrors[0]) {
-      setErrorMessage(serverErrors[0]);
-    }
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);
 
@@ -137,7 +128,7 @@ export function ProductSetForm({
     window.history.pushState(
       null,
       "",
-      window.location.pathname + window.location.search,
+      window.location.pathname + window.location.search
     );
     window.addEventListener("beforeunload", onBeforeUnload);
     window.addEventListener("popstate", onPopState);
@@ -165,12 +156,6 @@ export function ProductSetForm({
         onDecline={onDeclineDialog}
       />
 
-      <ErrorModal
-        message={errorMessage}
-        isOpen={!!errorMessage}
-        onClose={() => setErrorMessage("")}
-      />
-
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>

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/form/index.ts

@@ -1,2 +1 @@
 export * from "./ProductSetForm";
-export * from "./ProductSetNameControl";

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

@@ -5,7 +5,10 @@ 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 {
@@ -34,6 +37,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,

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/product-set/utils/index.ts

@@ -3,7 +3,6 @@ import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemp
 import { TFunction } from "react-i18next";
 import { UseFormSetError } from "react-hook-form";
 import { checkIfZoneCategory } from "@licklist/plugins";
-import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { TemplateItem } from "../control/ProductSetControl";
 import { ProductSetFormValues } from "../form/ProductSetForm";
 
@@ -13,11 +12,6 @@ interface CheckAvailableTimesErrors {
   t: TFunction;
 }
 
-export interface MenuTypeheadItem {
-  id: number;
-  label: string;
-  value: number;
-}
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -90,8 +84,3 @@ export const checkAvailableTimesErrors = ({
   });
   return hasError;
 };
-
-export const getTypeHeadItemsFromMenus = (
-  menus?: (ProductSet | ProductSetFormValues)[],
-): MenuTypeheadItem[] =>
-  menus?.map((menu) => ({ id: menu.id, value: menu.id, label: menu.name }));

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

@@ -19,8 +19,8 @@ export function WorkingHoursInputDescription() {
           <Col xs="auto">{weekdays[i]}:</Col>
           <Col>
             {t("timeInterval", {
-              start: values?.[i]?.start ?? "00:00",
-              end: values?.[i]?.end ?? "23:59",
+              start: values?.[i].start ?? "00:00",
+              end: values?.[i].end ?? "23:59",
             })}
           </Col>
         </Row>

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/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,

package/src/sortable-tree/SortableTreeItem.tsx

@@ -33,7 +33,6 @@ export interface SortableTreeItemProps {
   body: ReactNode;
   children?: ReactNode;
   preItem?: ReactNode;
-  itemButton?: ReactNode;
   postItem?: ReactNode;
   sortableItems?: string[];
   isExpanded?: boolean;
@@ -83,7 +82,6 @@ export function SortableTreeItem({
   secondaryBadge,
   setIsExpanded,
   isOverride,
-  itemButton,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -289,13 +287,9 @@ export function SortableTreeItem({
                     className={clsx(
                       "sortable-tree-item-title",
                       modalLabel && "sortable-tree-product-set-element-title",
-                      "d-flex justify-content-between",
                     )}
                   >
                     {title}
-                    <div className="sortable-tree-item-subtitle">
-                      {itemButton}
-                    </div>
                   </span>
                   {!expanded && (
                     <span className="sortable-tree-item-subtitle">

package/src/styles/auth/AccessDenied.scss

@@ -8,4 +8,4 @@
   h6 {
     color: $gray-600;
   }
-}
+}

package/src/styles/back-button/BackButton.scss

@@ -1,33 +1,32 @@
 $base-height: 2.5rem;
 
 .button-wrapper {
-    background-color: $snippet-page-header-steps-close-button-background-color;
-    height: $base-height;
+  background-color: $snippet-page-header-steps-close-button-background-color;
+  height: $base-height;
+  width: $base-height;
+  border-radius: $base-height;
+  transition: $color-transition;
+
+  .back-button {
+    font-size: 2rem;
     width: $base-height;
-    border-radius: $base-height;
+    height: $base-height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: lighter;
+    color: $snippet-page-header-steps-close-button-border-color;
     transition: $color-transition;
 
-
-    .back-button {
-      font-size: 2rem;
-      width: $base-height;
-      height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: lighter;
-      color: $snippet-page-header-steps-close-button-border-color;
-      transition: $color-transition;
-
-      &:hover {
-        cursor: pointer;
-      }
+    &:hover {
+      cursor: pointer;
     }
+  }
 
-    &.back-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1rem;
-    }
-  }
+  &.back-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+  }
+}

package/src/styles/back-button/_index.scss

@@ -1 +1 @@
-@import "./BackButton.scss";
+@import "./BackButton.scss";

package/src/styles/company-user-form/UserForm.scss

@@ -33,11 +33,15 @@
         }
 
         &.active {
-          color: #0E8CE2;
-          background: linear-gradient(149.72deg, #D9EFFF 50.04%, #E9F4FE 107.75%);
+          color: #0e8ce2;
+          background: linear-gradient(
+            149.72deg,
+            #d9efff 50.04%,
+            #e9f4fe 107.75%
+          );
 
           svg path {
-            stroke: #0E8CE2;
+            stroke: #0e8ce2;
           }
         }
       }
@@ -62,4 +66,3 @@
     }
   }
 }
-

package/src/styles/company-user-form/_index.scss

@@ -1 +1 @@
-@import "./UserForm.scss";
+@import "./UserForm.scss";

package/src/styles/custom-fields/CreateSortableListItem.scss

@@ -1,4 +1,3 @@
- 
 $sortable-list-item-hover-bg-color: #d9efff !default;
 
 .sortable-list-item-wrapper {
@@ -26,4 +25,4 @@ $sortable-list-item-hover-bg-color: #d9efff !default;
   &:hover {
     background-color: $sortable-list-item-hover-bg-color;
   }
-}
+}

package/src/styles/custom-fields/_index.scss

@@ -1,3 +1,3 @@
 @import "./FieldItem.scss";
 @import "./SelectFieldModal.scss";
-@import "./CreateSortableListItem.scss";
+@import "./CreateSortableListItem.scss";

package/src/styles/customers/Filter.scss

@@ -4,13 +4,13 @@
       font-size: 0.8rem;
     }
   }
-  
+
   @include media-breakpoint-up(md) {
     label {
       font-size: 0.9rem;
     }
   }
-  
+
   @include media-breakpoint-up(lg) {
     label {
       font-size: 1rem;
@@ -28,7 +28,7 @@
       flex: 0 0 33.33%;
       max-width: 33.33%;
     }
-  
+
     @include media-breakpoint-down(xs) {
       flex-direction: column;
 
@@ -43,11 +43,11 @@
         &:first-child {
           padding-left: 0;
         }
-  
+
         &:last-child {
           padding-right: 0;
         }
       }
     }
-  } 
+  }
 }