@licklist/design 0.58.6-dev.8 → 0.58.6

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

@@ -7,12 +7,8 @@ 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,
@@ -39,7 +35,6 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -64,7 +59,6 @@ import {
   ProductQuantityControl,
   ProductQuantityRechargingControl,
 } from "./quantity";
-import { PropertyControl } from "../../snippet";
 import { TipTapEditor } from "../../tiptap-editor";
 import { IsDeletableEvent } from "../types";
 import { FixedDurationOptions } from "./fixed-duration-fields";
@@ -104,7 +98,6 @@ export interface ProductControlValues
   offset: number;
   serviceTime: number;
   sort: number | null;
-  color?: string;
 }
 
 export interface ProductControlProps<T>
@@ -120,7 +113,6 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
-  isOverrides?: boolean;
   zoneDuration?: number;
 }
 
@@ -136,7 +128,6 @@ export function ProductControl<T extends FormValues>({
   hasTicket,
   categoryType,
   zoneDuration,
-  isOverrides = false,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -150,7 +141,7 @@ export function ProductControl<T extends FormValues>({
   } = useFormContext<T>();
 
   const { setLoading } = useContext(ProductSetLoadingContext);
-  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+  const { t } = useTranslation(["Design", "Validation"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
@@ -269,7 +260,7 @@ export function ProductControl<T extends FormValues>({
                 `${fieldNamePrefix}.name` as Path<T>,
                 errors
               )}
-              disabled={isLoading || isOverrides}
+              disabled={isLoading}
               placeholder={t("name")}
             />
             <Form.Control.Feedback type="invalid">
@@ -289,7 +280,7 @@ export function ProductControl<T extends FormValues>({
                   viewMode={false}
                   onUpdate={onChange}
                   content={value as string}
-                  disabled={isLoading || isOverrides}
+                  disabled={isLoading}
                 />
               )}
               rules={{
@@ -335,7 +326,6 @@ export function ProductControl<T extends FormValues>({
             <ProductQuantityControl<T>
               isLoading={isLoading}
               fieldNamePrefix={fieldNamePrefix}
-              isOverrides={isOverrides}
               onFocus={onFocus}
             />
 
@@ -380,7 +370,7 @@ export function ProductControl<T extends FormValues>({
                 `${fieldNamePrefix}.quantitySelector` as Path<T>,
                 errors
               )}
-              disabled={isLoading || hasTicket || isOverrides}
+              disabled={isLoading || hasTicket}
             >
               {quantitySelectorList.map((selector) => (
                 <option value={selector.id} key={selector.id}>
@@ -395,14 +385,6 @@ export function ProductControl<T extends FormValues>({
               )}
             </Form.Control.Feedback>
           </Form.Group>
-
-          <PropertyControl<T>
-            item={`${fieldNamePrefix}.color` as Path<T>}
-            label={t("ProductSet:selectColor")}
-            isDisabled={isOverrides}
-            isRequired={false}
-            defaultColors={PRODUCT_DEfAULT_COLORS}
-          />
         </Col>
       </Row>
 
@@ -410,14 +392,13 @@ export function ProductControl<T extends FormValues>({
         <Row className="align-items-start duration-capacity-container">
           <ProductDurationControl
             fieldNamePrefix={fieldNamePrefix}
-            disabled={disabledDuration || isOverrides}
+            disabled={disabledDuration}
           />
 
           <Col lg={4} md={4}>
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
-              disabled={isOverrides}
               rules={{
                 min: {
                   value: 0,
@@ -445,7 +426,6 @@ export function ProductControl<T extends FormValues>({
                 fieldName={`${fieldNamePrefix}.capacity`}
                 label={t("capacity")}
                 onChange={onChangeGameCapacity}
-                disabled={isOverrides}
                 rules={{
                   min: {
                     value: 0,
@@ -461,7 +441,7 @@ export function ProductControl<T extends FormValues>({
               <FormNumberInput
                 fieldName={`${fieldNamePrefix}.duration`}
                 label={t("durationMinutes")}
-                disabled={disabledDuration || isOverrides}
+                disabled={disabledDuration}
                 rules={{
                   min: {
                     value: 0,
@@ -507,7 +487,7 @@ export function ProductControl<T extends FormValues>({
                     `${fieldNamePrefix}.termsAndConditions` as Path<T>,
                     errors
                   )}
-                  disabled={isLoading || isOverrides}
+                  disabled={isLoading}
                   name={name}
                 />
               )}
@@ -524,14 +504,7 @@ export function ProductControl<T extends FormValues>({
           </Form.Group>
         </Col>
 
-        <Col
-          lg={4}
-          md={4}
-          className={clsx(
-            "licklist-file-upload-wrapper",
-            isOverrides && "opacity-50"
-          )}
-        >
+        <Col lg={4} md={4} className="licklist-file-upload-wrapper">
           <FileUpload
             onFilesChange={onFilesChange}
             allowedExtensions={["jpeg", "jpg", "png"]}
@@ -540,7 +513,6 @@ export function ProductControl<T extends FormValues>({
             onFileRemove={onImageRemove}
             defaultFiles={images}
             isLoading={isImageUploading}
-            disabled={isOverrides}
             withIcon
             title={t("addImage")}
           />
@@ -561,7 +533,7 @@ export function ProductControl<T extends FormValues>({
                   name={name}
                   value={Boolean(value)}
                   onChange={onChange}
-                  disabled={isLoading || isOverrides}
+                  disabled={isLoading}
                 />
               );
             }}
@@ -596,7 +568,7 @@ export function ProductControl<T extends FormValues>({
             custom
             type="checkbox"
             name={advancedId}
-            disabled={isLoading || isOverrides}
+            disabled={isLoading}
           >
             <Form.Check.Input
               checked={expanded}
@@ -623,7 +595,7 @@ export function ProductControl<T extends FormValues>({
                     name={name}
                     value={Boolean(value)}
                     onChange={onChange}
-                    disabled={isLoading || isOverrides}
+                    disabled={isLoading}
                   />
                 )}
                 control={control}
@@ -643,7 +615,7 @@ export function ProductControl<T extends FormValues>({
                     name={name}
                     value={Boolean(value)}
                     onChange={onChange}
-                    disabled={isLoading || isOverrides}
+                    disabled={isLoading}
                   />
                 )}
                 control={control}
@@ -652,12 +624,7 @@ export function ProductControl<T extends FormValues>({
             </Form.Group>
             {[CATEGORY_TYPE_GAME, CATEGORY_TYPE_FIXED_DURATION].includes(
               categoryType
-            ) && (
-              <FixedDurationOptions
-                fieldNamePrefix={fieldNamePrefix}
-                isOverrides={isOverrides}
-              />
-            )}
+            ) && <FixedDurationOptions fieldNamePrefix={fieldNamePrefix} />}
             <Form.Group
               controlId={minSpendId}
               className="advanced-switch-container"
@@ -667,7 +634,7 @@ export function ProductControl<T extends FormValues>({
                 isRequired={false}
                 isMoreThanZero
                 allowDeposits={false}
-                isLoading={isLoading || isOverrides}
+                isLoading={isLoading}
                 fieldNamePrefix={`${fieldNamePrefix}.minSpend` as Path<T>}
               />
             </Form.Group>

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

@@ -5,13 +5,10 @@ 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;
-}
+type FixedDurationOptionsProps<T> = FieldNamePrefixPath<T>;
 
 export const FixedDurationOptions = <T,>({
   fieldNamePrefix,
-  isOverrides,
 }: FixedDurationOptionsProps<T>) => {
   const { t } = useTranslation("Design");
 
@@ -24,7 +21,6 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.subSlots`}
             label={t("subSlotsInMin")}
-            disabled={isOverrides}
           />
         </Col>
 
@@ -32,7 +28,7 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.pause`}
             label={t("pauseInMin")}
-            disabled={!subSlotsFieldValue || isOverrides}
+            disabled={!subSlotsFieldValue}
           />
         </Col>
       </Row>
@@ -42,7 +38,6 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.offset`}
             label={t("offsetInMin")}
-            disabled={isOverrides}
           />
         </Col>
 
@@ -50,7 +45,6 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.serviceTime`}
             label={t("serviceTimeInMin")}
-            disabled={isOverrides}
           />
         </Col>
       </Row>

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -22,13 +22,12 @@ export interface ProductQuantityControlValues extends FormValues {
 export interface ProductQuantityControlProps<T> extends FieldNamePrefixPath<T> {
   isLoading: boolean;
   onFocus?: (e: React.SyntheticEvent) => void;
-  isOverrides?: boolean;
 }
 
 export function ProductQuantityControl<T extends FormValues>(
   props: ProductQuantityControlProps<T>
 ) {
-  const { isLoading = false, fieldNamePrefix, onFocus, isOverrides } = props;
+  const { isLoading = false, fieldNamePrefix, onFocus } = props;
   const {
     control,
     formState: { errors },
@@ -91,7 +90,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   isInvalid={
                     Number(minQuantityValue) > Number(maxQuantityValue)
                   }
-                  disabled={isLoading || isOverrides}
+                  disabled={isLoading}
                 />
               )}
               control={control}
@@ -149,7 +148,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   isInvalid={
                     Number(minQuantityValue) > Number(maxQuantityValue)
                   }
-                  disabled={isLoading || isOverrides}
+                  disabled={isLoading}
                 />
               )}
               control={control}

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -49,7 +49,6 @@ export interface ProductCategoryControlProps extends IsDeletableEvent {
   onCategoryNameChange: (args: any) => void;
   stepIndex: number;
   productCategoryIndex: number;
-  isOverride?: boolean;
 }
 
 const categoriesWithTickets = [
@@ -64,7 +63,6 @@ export function ProductCategoryControl({
   onCategoryNameChange,
   productCategoryIndex,
   stepIndex,
-  isOverride = false,
 }: ProductCategoryControlProps) {
   const {
     control,
@@ -159,7 +157,7 @@ export function ProductCategoryControl({
               errors
             )}
             placeholder={t("name")}
-            disabled={isLoading || isOverride}
+            disabled={isLoading}
           />
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<ProductSetFormValues>(
@@ -185,7 +183,7 @@ export function ProductCategoryControl({
                   }))}
                   value={field.value}
                   onChange={field.onChange}
-                  disabled={isLoading || isOverride}
+                  disabled={isLoading}
                 />
               </Form.Group>
             )}
@@ -229,7 +227,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors
                       )}
-                      disabled={isLoading || isOverride}
+                      disabled={isLoading}
                       name={name}
                     />
                   )}
@@ -301,7 +299,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors
                       )}
-                      disabled={isLoading || isOverride}
+                      disabled={isLoading}
                     />
                   )}
                   control={control}
@@ -339,7 +337,6 @@ export function ProductCategoryControl({
                   render={({ field }) => (
                     <Form.Control
                       as="select"
-                      disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.zoneId`,
                         errors
@@ -387,7 +384,6 @@ export function ProductCategoryControl({
             <Form.Check.Input
               checked={expanded}
               onChange={handleExpand}
-              disabled={isOverride}
               type="checkbox"
             />
             <Form.Check.Label>{t("showAdvancedOptions")}</Form.Check.Label>
@@ -456,7 +452,7 @@ export function ProductCategoryControl({
                         name={name}
                         value={Boolean(value)}
                         onChange={onChange}
-                        disabled={isLoading || isOverride}
+                        disabled={isLoading}
                       />
                     )}
                     control={control}
@@ -480,7 +476,7 @@ export function ProductCategoryControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading || isOverride}
+                          disabled={isLoading}
                         />
                       )}
                       control={control}
@@ -503,7 +499,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={Boolean(value)}
                       onChange={onChange}
-                      disabled={isLoading || isOverride}
+                      disabled={isLoading}
                     />
                   )}
                   control={control}
@@ -531,7 +527,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors
                       )}
-                      disabled={isLoading || isOverride}
+                      disabled={isLoading}
                       name={name}
                     />
                   )}

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

@@ -1,7 +1,9 @@
+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";
 
@@ -23,10 +25,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.tsx

@@ -336,10 +336,7 @@ const useFormattedDuration = ({
   }, [start, end, byWeekDay, formatList, formatNumber]);
 };
 
-export const getDateTimeObject = (
-  date: string,
-  time: string
-): DateTime | string => {
+const getDateTimeObject = (date: string, time: string): DateTime | string => {
   const dateTime = DateTime.fromFormat(`${date} ${time}`, DATE_TIME_FORMAT);
 
   if (dateTime.isValid) {

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -3,12 +3,11 @@ import { Meta } from "@storybook/react";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import {
-  Order,
   ORDER_SOURCE_IFRAME,
   ORDER_SOURCE_MANUAL,
-} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-
+} from "@licklist/core/src/DataMapper/Order/OrderDataMapper";
 import { BookingResults } from "./BookingResults";
 
 export default {

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

@@ -12,6 +12,7 @@ import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
+
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -21,6 +22,8 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
+// @TODO integrate when API will be available
+// activity and staff keys
 export const ResultCard = ({
   order,
   className,
@@ -38,10 +41,10 @@ export const ResultCard = ({
     startDate,
     products,
     source,
+    totalAmount,
     event,
     menu,
     remainingToPay,
-    paidAmount,
   } = order;
 
   const productList = products.map((product) => product.name)?.join(", ") || "";
@@ -105,7 +108,7 @@ export const ResultCard = ({
           )}
           <p>
             {t("paidAmount")}:{" "}
-            {formatNumber(paidAmount, {
+            {formatNumber(totalAmount, {
               style: "currency",
               currency: Config.Currency.GBP,
             })}

package/src/snippet/snippet-template/control/PropertyControl.tsx

@@ -24,16 +24,12 @@ export interface PropertyControlProps<T> {
   item: Path<T>;
   label: string;
   isDisabled?: boolean;
-  defaultColors?: Array<string>;
-  isRequired?: boolean;
 }
 
 export function PropertyControl<T>({
   item,
   label,
   isDisabled = false,
-  defaultColors,
-  isRequired = true,
 }: PropertyControlProps<T>) {
   const { t } = useTranslation(["Validation"]);
 
@@ -66,7 +62,7 @@ export function PropertyControl<T>({
         <Form.Control
           {...register(item, {
             required: {
-              value: isRequired,
+              value: true,
               message: t("Validation:fieldRequired", {
                 attribute: label,
               }),
@@ -99,7 +95,7 @@ export function PropertyControl<T>({
               setValue(item, color.hex);
               toggleIsActive();
             }}
-            colors={defaultColors || DEFAULT_COLORS}
+            colors={DEFAULT_COLORS}
           />
         </div>
       )}

package/src/sortable-list/SortableList.tsx

@@ -33,7 +33,6 @@ type SortableListProps<T> = {
   renderItemContent: (args: RenderItemContentArgs<T>) => ReactNode;
   setItems?: Dispatch<SetStateAction<SortableItem<T>[]>>;
   isExpandNewItem?: boolean;
-  isOverrides?: boolean;
 };
 
 export const SORTABLE_ID_KEY = "_sortableId";
@@ -45,7 +44,6 @@ export function SortableList<T>({
   renderItemContent,
   setItems,
   isExpandNewItem = false,
-  isOverrides = false,
 }: SortableListProps<T>) {
   const [sortedItems, setSortedItems] = useState(items);
 
@@ -99,7 +97,6 @@ export function SortableList<T>({
   );
 
   function handleDragEnd(event) {
-    if (isOverrides) return;
     const { active, over } = event;
 
     if (active.id !== over.id) {

package/src/sortable-tree/SortableTreeItem.tsx

@@ -52,8 +52,6 @@ export interface SortableTreeItemProps {
     className: string;
   };
   setIsExpanded?: () => void;
-  isOverride?: boolean;
-  isProduct?: boolean;
 }
 
 export function SortableTreeItem({
@@ -80,8 +78,6 @@ export function SortableTreeItem({
   edit,
   secondaryBadge,
   setIsExpanded,
-  isOverride,
-  isProduct = false,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -102,7 +98,6 @@ export function SortableTreeItem({
     transform: dragTransform,
   } = useDraggable({
     id,
-    disabled: isOverride,
   });
 
   const onHandleExpand = useCallback(
@@ -150,7 +145,6 @@ export function SortableTreeItem({
   };
 
   const onEdit = (e) => {
-    if (isOverride && !isProduct) return;
     e.stopPropagation();
     if (edit && !isModalVisible) edit();
     setIsModalVisible(true);

package/src/static/manual-date-picker/ManualDatePicker.tsx

@@ -61,9 +61,9 @@ export const ManualDatePicker = ({
             disabled={isDisabled}
           >
             <option value="">{t("Design:monthShort")}</option>
-            {MONTHS_ARRAY.map((object) => (
-              <option key={object.key} value={object.value}>
-                {object.key}
+            {MONTHS_ARRAY.map((key) => (
+              <option key={key} value={key}>
+                {key}
               </option>
             ))}
           </Form.Control>

package/src/static/manual-date-picker/constants/index.ts

@@ -1,9 +1,5 @@
-import {
-  generateDatesArray,
-  generateMonthsOptionsArray,
-  generateYearsArray,
-} from "../utils";
+import { generateDatesArray, generateYearsArray } from "../utils";
 
 export const DAYS_ARRAY = generateDatesArray(1, 31, 1);
-export const MONTHS_ARRAY = generateMonthsOptionsArray();
+export const MONTHS_ARRAY = generateDatesArray(1, 12, 1);
 export const YEARS_ARRAY = generateYearsArray();

package/src/static/manual-date-picker/utils/index.ts

@@ -4,17 +4,6 @@ export const generateDatesArray = (start: number, end: number, step: number) =>
     (_, index) => 1 + index * step
   );
 
-export const generateMonthsOptionsArray = () =>
-  Array.from({ length: 12 }, (_, index) => {
-    const value = index + 1;
-    let key = String(value);
-    if (value < 10) {
-      key = `0${key}`;
-    }
-
-    return { key, value };
-  });
-
 export const generateYearsArray = () => {
   const currentYear = new Date().getFullYear();
   const ageBackYear = currentYear - 100;

package/src/static/switch/BooleanSwitch.tsx

@@ -23,7 +23,7 @@ export function BooleanSwitch({
   const { t } = useTranslation("Design");
 
   const options: SelectItem[] = [
-    { id: 1, value: firstValueTitle ?? t("yes") },
+    { id: 1, value: firstValueTitle ??  t("yes") },
     { id: 0, value: secondValueTitle ?? t("no") },
   ];