@licklist/design 0.44.485-dev.6 → 0.44.485-dev.61

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

@@ -86,6 +86,7 @@ export interface ProductControlValues
   isRequired: boolean;
   quantitySelector: number;
   hasSpecialNotes: boolean;
+  minSpend?: number | null;
   type?: ProductType;
   weight?: number;
   tierId?: number;
@@ -157,6 +158,7 @@ export function ProductControl<T extends FormValues>({
   const quantitySelectorId = useId();
   const hasSpecialNotesId = useId();
   const unlimitedQuantityId = useId();
+  const minSpendId = useId();
 
   const quantitySelectorList: SelectItem[] = [
     { id: 1, value: t("quantitySelector") },
@@ -189,7 +191,7 @@ export function ProductControl<T extends FormValues>({
 
   const onImageRemove = useCallback(
     (id, path) => {
-      handleImageRemove(id, path);
+      handleImageRemove(String(id), path);
     },
     [handleImageRemove]
   );
@@ -200,7 +202,13 @@ export function ProductControl<T extends FormValues>({
   }, [setLoading, isImageUploading]);
 
   useEffect(() => {
-    if (Array.isArray(images) && images?.length > 0) {
+    const formImages = getValues(`${fieldNamePrefix}.images` as Path<T>);
+
+    setInitialImages(formImages as Image[]);
+  }, [getValues, setInitialImages, fieldNamePrefix]);
+
+  useEffect(() => {
+    if (Array.isArray(images)) {
       setValue(
         `${fieldNamePrefix}.images` as Path<T>,
         images as UnpackNestedValue<PathValue<T, Path<T>>>
@@ -208,12 +216,6 @@ export function ProductControl<T extends FormValues>({
     }
   }, [images, fieldNamePrefix, setValue]);
 
-  useEffect(() => {
-    const formImages = getValues(`${fieldNamePrefix}.images` as Path<T>);
-
-    setInitialImages(formImages as Image[]);
-  }, [getValues, setInitialImages, fieldNamePrefix]);
-
   const quantitySelector = quantityValue ?? "1";
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string];
 
@@ -274,7 +276,7 @@ export function ProductControl<T extends FormValues>({
               />
               <ProductPriceControl<T>
                 isLoading={isLoading}
-                fieldNamePrefix={fieldNamePrefix}
+                fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
                 title={t("totalPrice")}
                 allowDeposits={allowDeposits}
               />
@@ -282,7 +284,7 @@ export function ProductControl<T extends FormValues>({
           ) : (
             <ProductPriceControl<T>
               isLoading={isLoading}
-              fieldNamePrefix={fieldNamePrefix}
+              fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
             />
           )}
 
@@ -553,10 +555,22 @@ export function ProductControl<T extends FormValues>({
                 name={`${fieldNamePrefix}.hasSpecialNotes` as Path<T>}
               />
             </Form.Group>
-
-            {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
-              <FixedDurationOptions fieldNamePrefix={fieldNamePrefix} />
-            )}
+            {[CATEGORY_TYPE_GAME, CATEGORY_TYPE_FIXED_DURATION].includes(
+              categoryType
+            ) && <FixedDurationOptions fieldNamePrefix={fieldNamePrefix} />}
+            <Form.Group
+              controlId={minSpendId}
+              className="advanced-switch-container"
+            >
+              <ProductPriceControl
+                title={t("minSpend")}
+                isRequired={false}
+                isMoreThanZero
+                allowDeposits={false}
+                isLoading={isLoading}
+                fieldNamePrefix={`${fieldNamePrefix}.minSpend` as Path<T>}
+              />
+            </Form.Group>
           </div>
         </Collapse>
 

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -1,9 +1,6 @@
 import React from "react";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import {
-  FieldNamePrefixPath,
-  FormValues,
-} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
 import { Form } from "react-bootstrap";
 import Col from "react-bootstrap/Col";
@@ -16,10 +13,13 @@ export interface ProductPriceControlValues extends FormValues {
   price: number;
 }
 
-export interface ProductPriceControlProps<T> extends FieldNamePrefixPath<T> {
+export interface ProductPriceControlProps<T> {
   isLoading: boolean;
   title?: string;
   allowDeposits?: boolean;
+  fieldNamePrefix: Path<T>;
+  isRequired?: boolean;
+  isMoreThanZero?: boolean;
 }
 
 export function ProductPriceControl<T extends FormValues>({
@@ -27,13 +27,15 @@ export function ProductPriceControl<T extends FormValues>({
   fieldNamePrefix,
   title,
   allowDeposits,
+  isRequired = true,
+  isMoreThanZero,
 }: ProductPriceControlProps<T>) {
   const {
     control,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
-
+  const productTitle = title ?? t("price");
   const priceId = useId();
 
   return (
@@ -43,7 +45,7 @@ export function ProductPriceControl<T extends FormValues>({
       className={!allowDeposits && "p-0"}
     >
       <Form.Group controlId={priceId}>
-        <Form.Label>{title ?? t("price")}</Form.Label>
+        <Form.Label>{productTitle}</Form.Label>
 
         <InputGroup hasValidation>
           <InputGroup.Prepend>
@@ -64,38 +66,58 @@ export function ProductPriceControl<T extends FormValues>({
                 name={name}
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
-                  `${fieldNamePrefix}.price` as Path<T>,
+                  `${fieldNamePrefix}` as Path<T>,
                   errors
                 )}
                 disabled={isLoading}
               />
             )}
             control={control}
-            name={`${fieldNamePrefix}.price` as Path<T>}
+            name={`${fieldNamePrefix}` as Path<T>}
             rules={{
-              required: t("Validation:fieldRequired", {
-                attribute: t("price"),
-              }) as string,
-              min: {
-                value: 0,
-                message: t("Validation:fieldMinNumber", {
-                  attribute: t("price"),
-                  min: 0,
-                }) as string,
-              },
+              required: isRequired
+                ? (t("Validation:fieldRequired", {
+                    attribute: productTitle,
+                  }) as string)
+                : false,
+              min: !isMoreThanZero
+                ? {
+                    value: 0,
+                    message: t("Validation:fieldMinNumber", {
+                      attribute: productTitle,
+                      min: 0,
+                    }) as string,
+                  }
+                : undefined,
               max: {
                 value: 999999.99,
                 message: t("Validation:fieldMaxNumber", {
-                  attribute: t("price"),
+                  attribute: productTitle,
                   max: 999999.99,
                 }) as string,
               },
+
+              validate: (value) => {
+                if (
+                  !isMoreThanZero ||
+                  (isMoreThanZero &&
+                    (value === undefined || value === null || value === "")) ||
+                  (isMoreThanZero && Number(value) > 0)
+                ) {
+                  return true;
+                }
+
+                return t("Validation:fieldGreaterMinNumber", {
+                  attribute: productTitle,
+                  min: 0,
+                }) as string;
+              },
             }}
           />
 
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
-              `${fieldNamePrefix}.price` as Path<T>,
+              `${fieldNamePrefix}` as Path<T>,
               errors
             )}
           </Form.Control.Feedback>

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

@@ -33,19 +33,49 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     onFocus,
   } = props;
   const {
-    trigger,
     control,
+    clearErrors,
+    setError,
+    watch,
+    trigger,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
-
   const totalQuantityId = useId();
 
+  const maxQuantityValue = watch(`${fieldNamePrefix}.maxQuantity` as Path<T>);
+  const totalQuantityValue = watch(
+    `${fieldNamePrefix}.totalQuantity` as Path<T>
+  );
+
   // trigger total quantity field's validation if disabled state was changed
   useEffect(() => {
     trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
   }, [disabled, fieldNamePrefix, trigger]);
 
+  useEffect(() => {
+    if (Number(totalQuantityValue) === 0) {
+      setError(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
+        type: HookFormService.manualErrorType,
+        message: t("Validation:fieldMinNumber", {
+          attribute: t("totalQuantity"),
+          min: 1,
+        }),
+      });
+    } else if (Number(maxQuantityValue) > Number(totalQuantityValue)) {
+      setError(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
+        type: HookFormService.manualErrorType,
+        message: t("Validation:fieldTotalNumber", {
+          attribute: t("totalQuantity"),
+          max: t("maxOrderQuantity"),
+        }),
+      });
+    } else {
+      clearErrors(`${fieldNamePrefix}.totalQuantity` as Path<T>);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [totalQuantityValue, maxQuantityValue, setError, clearErrors]);
+
   return (
     <>
       <Form.Group controlId={totalQuantityId}>
@@ -83,18 +113,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                     required: false,
                     min: 0,
                   }
-                : {
-                    required: t("Validation:fieldRequired", {
-                      attribute: t("totalQuantity"),
-                    }) as string,
-                    min: {
-                      value: 1,
-                      message: t("Validation:fieldMinNumber", {
-                        attribute: t("totalQuantity"),
-                        min: 1,
-                      }) as string,
-                    },
-                  }
+                : {}
             }
           />
 

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

@@ -1,3 +1,7 @@
+import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
+import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
+import { TemplateItem } from "../control/ProductSetControl";
+
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -14,3 +18,27 @@ export const moveArrayElements = <T>(
 export const sortArrayByIndex = <T>(array: T[]) => {
   return array.map((element: T, index) => ({ ...element, sort: index }));
 };
+
+export const getFilteredTemplates = (
+  templates?: EmailTemplate[] | SmsTemplate[],
+  formTemplates?: TemplateItem[]
+): TemplateItem[] | undefined => {
+  if (!templates) {
+    return undefined;
+  }
+
+  return templates
+    ?.filter(
+      (template) =>
+        template.notification.isActive &&
+        !formTemplates?.find(
+          (formTemplate) =>
+            formTemplate.value.notification.type === template.notification.type
+        )
+    )
+    ?.map((template) => ({
+      id: template?.id,
+      value: template,
+      label: template?.notification?.name,
+    }));
+};

package/src/provider/constants.ts

@@ -0,0 +1 @@
+export const MAX_DESCRIPTION_CHARACTERS_LENGTH = 25256;

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -1,11 +1,13 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useId } from "@react-aria/utils";
+import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
 import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { Typeahead, TypeaheadOptions } from "../../typeahead";
+import { MAX_DESCRIPTION_CHARACTERS_LENGTH } from "../constants";
 import {
   ProviderLinksInput,
   ProviderLinksInputProps,
@@ -33,10 +35,11 @@ export function ProviderDetailsInput({
 }: ProviderDetailsInputProps) {
   const {
     register,
+    watch,
     formState: { errors },
-    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
+  const notification = useNotification();
 
   const nameId = useId();
   const descriptionId = useId();
@@ -45,6 +48,18 @@ export function ProviderDetailsInput({
   const websiteId = useId();
   const companyId = useId();
 
+  const description = watch("description");
+
+  useEffect(() => {
+    if (MAX_DESCRIPTION_CHARACTERS_LENGTH > description.length) return;
+    notification.warning({
+      title: t("App:warning"),
+      message: t("Validation:descriptionTooManyCharactersMessage", {
+        max: MAX_DESCRIPTION_CHARACTERS_LENGTH,
+      }) as string,
+    });
+  }, [description.length]);
+
   return (
     <>
       <Form.Group controlId={nameId}>
@@ -149,7 +164,6 @@ export function ProviderDetailsInput({
           <Typeahead
             name="company"
             options={companiesOptions}
-            setValue={setValue}
             placeholder={t("App:select")}
             noOptionsMessage={t("App:noMatchesFound")}
           />

package/src/sales/booking/filter/BookingFilter.stories.tsx

@@ -10,6 +10,34 @@ export default {
   component: BookingFilter,
 } as Meta;
 
+const staffMembers = [
+  {
+    id: 10,
+    firstName: "Denys",
+    lastName: "Shmahailo",
+    email: "shmahailo1337@gmail.com",
+    images: null,
+    userRoles: [
+      {
+        id: 1,
+        key: "manager",
+        title: "Manager",
+        weight: 50,
+        type_id: 1,
+        type: "provider",
+        pivot: {
+          id: 17,
+          roleId: 1,
+          userId: 10,
+          typeableId: 1,
+          typeableType: "provider",
+          user: null,
+        },
+      },
+    ],
+  },
+];
+
 export const Default: Story<BookingFilterProps> = () => {
   const isFilterOpen = boolean("isFilterOpen", false);
   const autoFocusOnMount = boolean("autoFocusOnMount", true);
@@ -20,6 +48,7 @@ export const Default: Story<BookingFilterProps> = () => {
         <BookingFilter
           isFilterOpen={isFilterOpen}
           autoFocusOnMount={autoFocusOnMount}
+          staffMembers={staffMembers}
         />
       </BookingContextProvider>
     </MemoryRouter>

package/src/sales/booking/filter/BookingFilter.tsx

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from "react";
+import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { MainFilterSection } from "./components/MainFilterSection";
 import { AdditionalFilterSection } from "./components/AdditionalFIlterSection";
 import { SearchingForSection } from "./components/SearchingForSection";
@@ -11,12 +12,16 @@ export type BookingFilterProps = PropsWithChildren<{
   isFilterOpen?: boolean;
   autoFocusOnMount?: boolean;
   isFullscreenMode?: boolean;
+  staffMembers?: User[] | null;
+  isLoading: boolean;
 }>;
 
 export const BookingFilter = ({
   isFilterOpen = true,
   autoFocusOnMount = false,
   isFullscreenMode = false,
+  staffMembers,
+  isLoading,
   children,
   ...props
 }: BookingFilterProps) => {
@@ -24,15 +29,19 @@ export const BookingFilter = ({
     <div className="booking-filter">
       <MainFilterSection
         {...props}
+        isLoading={isLoading}
         isFilterOpen={isFilterOpen}
         autoFocusOnMount={autoFocusOnMount}
         isFullscreenMode={isFullscreenMode}
       />
       {isFilterOpen ? (
         <>
-          <AdditionalFilterSection />
+          <AdditionalFilterSection
+            isLoading={isLoading}
+            staffMembers={staffMembers}
+          />
           <div className="separator-horizontal" />
-          <SearchingForSection />
+          <SearchingForSection staffMembers={staffMembers} />
         </>
       ) : (
         children && (

package/src/sales/booking/filter/components/AdditionalFIlterSection.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Form, Button, Row, Col } from "react-bootstrap";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 import {
   ORDER_STATUS_PENDING,
   ORDER_STATUS_CANCELLED,
@@ -12,6 +12,8 @@ import {
   BookingContext,
   BookingFilters,
 } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { DateRangeInput } from "../../../../static/date-range-input/DateRangeInput";
+import { FilterSectionProps } from "./SearchingForSection";
 
 const ORDER_STATUSES_FOR_UPDATE = [
   ORDER_STATUS_PENDING,
@@ -28,14 +30,22 @@ export type AdditionalFilterSectionProps = {
   isFilterOpen?: boolean;
 };
 
-export const AdditionalFilterSection = () => {
+export const AdditionalFilterSection = ({
+  staffMembers,
+  isLoading,
+}: FilterSectionProps) => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);
 
-  const { handleSubmit, register, reset } = useForm<Partial<BookingFilters>>({
+  const { handleSubmit, register, setValue, reset, watch, control } = useForm<
+    Partial<BookingFilters>
+  >({
     defaultValues: filters,
   });
 
+  const startDate = watch("order_date_from");
+  const endDate = watch("order_date_to");
+
   const onFormSubmit = (values: Partial<BookingFilters>) => {
     setFilters(values);
   };
@@ -47,20 +57,49 @@ export const AdditionalFilterSection = () => {
   return (
     <div className="additional-filter-section">
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <Row>
+        <Row className="additional-filter-container">
           <Col md="3">
             <Form.Group>
-              <Form.Label>{t("staffMember")}</Form.Label>
-              <Form.Control {...register("staffMember")} as="select">
-                <option value="">{t("Design:choose")}</option>
-              </Form.Control>
+              <Form.Label>{t("createdBy")}</Form.Label>
+              <Controller
+                control={control}
+                name="created_by"
+                render={({ field }) => {
+                  const filedValue = String(field?.value);
+                  return (
+                    <Form.Control
+                      as="select"
+                      value={filedValue}
+                      disabled={isLoading}
+                      onChange={field?.onChange}
+                    >
+                      <option value="" selected={filedValue === ""}>
+                        {t("Design:choose")}
+                      </option>
+                      {staffMembers?.map((member) => (
+                        <option
+                          value={member?.id}
+                          key={member?.id}
+                          selected={filedValue === String(member?.id)}
+                        >
+                          {member?.firstName} {member?.lastName}
+                        </option>
+                      ))}
+                    </Form.Control>
+                  );
+                }}
+              />
             </Form.Group>
           </Col>
 
           <Col md="3">
             <Form.Group>
               <Form.Label>{t("bookingStatus")}</Form.Label>
-              <Form.Control {...register("status")} as="select">
+              <Form.Control
+                disabled={isLoading}
+                {...register("status")}
+                as="select"
+              >
                 <option value="">{t("Design:choose")}</option>
                 {Object.keys(ORDER_STATUSES_FOR_UPDATE).map((key: string) => (
                   <option
@@ -74,16 +113,29 @@ export const AdditionalFilterSection = () => {
             </Form.Group>
           </Col>
 
-          <Col md="3">
+          <Col className="date-container">
             <Form.Group>
               <Form.Label>{t("date")}</Form.Label>
-              <Form.Control {...register("date")} type="date" />
+              <DateRangeInput
+                disabled={isLoading}
+                placeholder={t("date")}
+                startDate={startDate}
+                endDate={endDate}
+                onDateChange={({ startDate, endDate }) => {
+                  setValue("order_date_from", startDate);
+                  setValue("order_date_to", endDate);
+                }}
+              />
             </Form.Group>
           </Col>
 
           <Col md="3" className="d-flex align-items-end">
             <Form.Group>
-              <Button type="submit" className="shadow-none">
+              <Button
+                disabled={isLoading}
+                type="submit"
+                className="shadow-none"
+              >
                 {t("apply")}
               </Button>
             </Form.Group>

package/src/sales/booking/filter/components/MainFilterSection.tsx

@@ -10,7 +10,7 @@ import { ReactComponent as RefreshIcon } from "../../../../assets/dashboard/refr
 import { ReactComponent as FullscreenIcon } from "../../../../assets/dashboard/fullscreen.svg";
 import { ReactComponent as MinimizeIcon } from "../../../../assets/dashboard/minimize.svg";
 
-export type MainFilterSectionProps = BookingFilterProps;
+export type MainFilterSectionProps = Omit<BookingFilterProps, "staffMembers">;
 
 const DEBOUNCE_QUERY_TIME = 300;
 
@@ -22,6 +22,7 @@ export const MainFilterSection = ({
   onFullscreenButtonClick,
   autoFocusOnMount,
   isFullscreenMode,
+  isLoading,
 }: MainFilterSectionProps) => {
   const { t } = useTranslation("Design");
   const { filters, onQueryChange } = useContext(BookingContext);
@@ -62,6 +63,7 @@ export const MainFilterSection = ({
               className="search-icon"
             />
             <Form.Control
+              disabled={isLoading}
               value={queryValue}
               onChange={onSearchQueryChange}
               onBlur={onSearchQueryBlur}
@@ -113,6 +115,7 @@ export const MainFilterSection = ({
 
         <Button
           variant="link"
+          disabled={isLoading}
           className={clsx(
             "shadow-none",
             !isFullscreenMode && "fullscreen-button",