@licklist/design 0.44.485-dev.67 → 0.44.485-dev.7

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

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

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

@@ -33,20 +33,18 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     onFocus,
   } = props;
   const {
-    control,
     trigger,
-    watch,
-    register,
+    control,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
-  const totalQuantityId = useId();
 
-  const maxQuantityValue = watch(`${fieldNamePrefix}.maxQuantity` as Path<T>);
+  const totalQuantityId = useId();
 
+  // trigger total quantity field's validation if disabled state was changed
   useEffect(() => {
     trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
-  }, [maxQuantityValue]);
+  }, [disabled, fieldNamePrefix, trigger]);
 
   return (
     <>
@@ -67,26 +65,6 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type="number"
                 min={0}
                 step={1}
-                {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
-                  validate: (value) => {
-                    const min = 1;
-                    const maxQuantity = Number(maxQuantityValue);
-                    const totalQuantity = Number(value);
-                    if (totalQuantity < min) {
-                      return t("Validation:fieldMinNumber", {
-                        attribute: t("totalQuantity"),
-                        min: 1,
-                      }) as string;
-                    }
-                    if (totalQuantity < maxQuantity) {
-                      return t("Validation:fieldTotalNumber", {
-                        attribute: t("totalQuantity"),
-                        max: t("maxOrderQuantity"),
-                      }) as string;
-                    }
-                    return true;
-                  },
-                })}
                 value={value as string}
                 onFocus={onFocus}
                 onChange={onChange}
@@ -105,7 +83,18 @@ 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,7 +1,3 @@
-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,
@@ -18,27 +14,3 @@ 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/provider-details-input/ProviderDetailsInput.tsx

@@ -1,13 +1,11 @@
-import React, { useEffect } from "react";
+import React 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,
@@ -35,12 +33,10 @@ export function ProviderDetailsInput({
 }: ProviderDetailsInputProps) {
   const {
     register,
-    watch,
-    trigger,
     formState: { errors },
+    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
-  const notification = useNotification();
 
   const nameId = useId();
   const descriptionId = useId();
@@ -49,19 +45,6 @@ export function ProviderDetailsInput({
   const websiteId = useId();
   const companyId = useId();
 
-  const description = watch("description");
-
-  useEffect(() => {
-    if (MAX_DESCRIPTION_CHARACTERS_LENGTH > description.length) return;
-    trigger("description");
-    notification.danger({
-      title: t("App:warning"),
-      message: t("Validation:descriptionTooManyCharactersMessage", {
-        max: MAX_DESCRIPTION_CHARACTERS_LENGTH,
-      }) as string,
-    });
-  }, [description.length]);
-
   return (
     <>
       <Form.Group controlId={nameId}>
@@ -85,26 +68,11 @@ export function ProviderDetailsInput({
       <Form.Group controlId={descriptionId}>
         <Form.Label>{t("Design:description")}</Form.Label>
         <Form.Control
-          {...register("description", {
-            validate: (value) => {
-              const descriptionLength = value.length;
-              if (descriptionLength > MAX_DESCRIPTION_CHARACTERS_LENGTH) {
-                return t("Validation:descriptionTooManyCharactersMessage", {
-                  max: MAX_DESCRIPTION_CHARACTERS_LENGTH,
-                }) as string;
-              }
-              return true;
-            },
-          })}
+          {...register("description")}
           as="textarea"
           name="description"
           rows={6}
-          isInvalid={Boolean(errors.description)}
         />
-        <Form.Control.Feedback type="invalid">
-          {HookFormService.hasError(errors.description, "validate") &&
-            errors.description?.message}
-        </Form.Control.Feedback>
       </Form.Group>
 
       <Form.Group controlId={emailId}>
@@ -181,6 +149,7 @@ 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,34 +10,6 @@ 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);
@@ -48,7 +20,6 @@ export const Default: Story<BookingFilterProps> = () => {
         <BookingFilter
           isFilterOpen={isFilterOpen}
           autoFocusOnMount={autoFocusOnMount}
-          staffMembers={staffMembers}
         />
       </BookingContextProvider>
     </MemoryRouter>

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

@@ -1,5 +1,4 @@
 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";
@@ -12,16 +11,12 @@ 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) => {
@@ -29,19 +24,15 @@ export const BookingFilter = ({
     <div className="booking-filter">
       <MainFilterSection
         {...props}
-        isLoading={isLoading}
         isFilterOpen={isFilterOpen}
         autoFocusOnMount={autoFocusOnMount}
         isFullscreenMode={isFullscreenMode}
       />
       {isFilterOpen ? (
         <>
-          <AdditionalFilterSection
-            isLoading={isLoading}
-            staffMembers={staffMembers}
-          />
+          <AdditionalFilterSection />
           <div className="separator-horizontal" />
-          <SearchingForSection staffMembers={staffMembers} />
+          <SearchingForSection />
         </>
       ) : (
         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 { Controller, useForm } from "react-hook-form";
+import { useForm } from "react-hook-form";
 import {
   ORDER_STATUS_PENDING,
   ORDER_STATUS_CANCELLED,
@@ -12,8 +12,6 @@ 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,
@@ -30,22 +28,14 @@ export type AdditionalFilterSectionProps = {
   isFilterOpen?: boolean;
 };
 
-export const AdditionalFilterSection = ({
-  staffMembers,
-  isLoading,
-}: FilterSectionProps) => {
+export const AdditionalFilterSection = () => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);
 
-  const { handleSubmit, register, setValue, reset, watch, control } = useForm<
-    Partial<BookingFilters>
-  >({
+  const { handleSubmit, register, reset } = useForm<Partial<BookingFilters>>({
     defaultValues: filters,
   });
 
-  const startDate = watch("order_date_from");
-  const endDate = watch("order_date_to");
-
   const onFormSubmit = (values: Partial<BookingFilters>) => {
     setFilters(values);
   };
@@ -57,49 +47,20 @@ export const AdditionalFilterSection = ({
   return (
     <div className="additional-filter-section">
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <Row className="additional-filter-container">
+        <Row>
           <Col md="3">
             <Form.Group>
-              <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.Label>{t("staffMember")}</Form.Label>
+              <Form.Control {...register("staffMember")} as="select">
+                <option value="">{t("Design:choose")}</option>
+              </Form.Control>
             </Form.Group>
           </Col>
 
           <Col md="3">
             <Form.Group>
               <Form.Label>{t("bookingStatus")}</Form.Label>
-              <Form.Control
-                disabled={isLoading}
-                {...register("status")}
-                as="select"
-              >
+              <Form.Control {...register("status")} as="select">
                 <option value="">{t("Design:choose")}</option>
                 {Object.keys(ORDER_STATUSES_FOR_UPDATE).map((key: string) => (
                   <option
@@ -113,29 +74,16 @@ export const AdditionalFilterSection = ({
             </Form.Group>
           </Col>
 
-          <Col className="date-container">
+          <Col md="3">
             <Form.Group>
               <Form.Label>{t("date")}</Form.Label>
-              <DateRangeInput
-                disabled={isLoading}
-                placeholder={t("date")}
-                startDate={startDate}
-                endDate={endDate}
-                onDateChange={({ startDate, endDate }) => {
-                  setValue("order_date_from", startDate);
-                  setValue("order_date_to", endDate);
-                }}
-              />
+              <Form.Control {...register("date")} type="date" />
             </Form.Group>
           </Col>
 
           <Col md="3" className="d-flex align-items-end">
             <Form.Group>
-              <Button
-                disabled={isLoading}
-                type="submit"
-                className="shadow-none"
-              >
+              <Button 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 = Omit<BookingFilterProps, "staffMembers">;
+export type MainFilterSectionProps = BookingFilterProps;
 
 const DEBOUNCE_QUERY_TIME = 300;
 
@@ -22,7 +22,6 @@ export const MainFilterSection = ({
   onFullscreenButtonClick,
   autoFocusOnMount,
   isFullscreenMode,
-  isLoading,
 }: MainFilterSectionProps) => {
   const { t } = useTranslation("Design");
   const { filters, onQueryChange } = useContext(BookingContext);
@@ -63,7 +62,6 @@ export const MainFilterSection = ({
               className="search-icon"
             />
             <Form.Control
-              disabled={isLoading}
               value={queryValue}
               onChange={onSearchQueryChange}
               onBlur={onSearchQueryBlur}
@@ -115,7 +113,6 @@ export const MainFilterSection = ({
 
         <Button
           variant="link"
-          disabled={isLoading}
           className={clsx(
             "shadow-none",
             !isFullscreenMode && "fullscreen-button",

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

@@ -5,47 +5,17 @@ import {
   BookingContext,
   BookingFilters,
 } from "@licklist/plugins/dist/context/booking/BookingContext";
-import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { ResultTagButton } from "./ResultTagButton";
 
-const SEARCHING_FOR_FILTER_KEYS = [
-  "q",
-  "status",
-  "order_date_from",
-  "created_by",
-];
+const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
 
-export interface FilterSectionProps {
-  staffMembers?: User[] | null;
-  isLoading: boolean;
-}
-
-export const SearchingForSection = ({ staffMembers }: { staffMembers }) => {
+export const SearchingForSection = () => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);
 
   const filteredFilters = useMemo(() => {
-    const selectedMember = staffMembers?.find(
-      (staffMember) => Number(filters?.created_by) === staffMember?.id
-    );
     return SEARCHING_FOR_FILTER_KEYS.reduce(
       (prevValues: Partial<BookingFilters>, currentKey: string) => {
-        if (currentKey === "created_by" && filters[currentKey]) {
-          return {
-            ...prevValues,
-            [currentKey]: `${selectedMember?.firstName || ""} ${
-              selectedMember?.lastName || ""
-            }`,
-          };
-        }
-        if (currentKey === "order_date_from" && filters[currentKey]) {
-          return {
-            ...prevValues,
-            [currentKey]: `${filters.order_date_from || ""} - ${
-              filters?.order_date_to || ""
-            }`,
-          };
-        }
         if (filters[currentKey]) {
           return { ...prevValues, [currentKey]: filters[currentKey] };
         }
@@ -54,17 +24,13 @@ export const SearchingForSection = ({ staffMembers }: { staffMembers }) => {
       },
       {}
     );
-  }, [filters, staffMembers]);
+  }, [filters]);
 
   const resetAllFilters = () => {
     setFilters({ isFilterOpen: true });
   };
 
   const onResetSelectedFilter = (key: string) => {
-    if (key === "order_date_from") {
-      setFilters({ ...filters, order_date_from: "", order_date_to: "" });
-      return;
-    }
     setFilters({ ...filters, [key]: "" });
   };
 

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

@@ -3,7 +3,7 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
+import { formatDateStringToOrdinalFormatWithPrefix } from "@licklist/core/dist/Services/Date";
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -55,7 +55,7 @@ export const ResultCard = ({
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringForEvent(startDate)}
+            {t("date")}: {formatDateStringToOrdinalFormatWithPrefix(startDate)}
           </p>
           <p>
             {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}

package/src/sales/booking/tabs/BookingTabs.tsx

@@ -21,7 +21,6 @@ export type BookingTabsProps = HasPermissionProp &
     onAddButtonClick?: () => void;
     viewType: BOOKING_TYPE;
     onSetType: (value: BOOKING_TYPE) => void;
-    hasBookingManagment: boolean;
   }>;
 
 export const BookingTabs = ({
@@ -29,7 +28,6 @@ export const BookingTabs = ({
   onReportsClick,
   onAddButtonClick,
   hasPermission = false,
-  hasBookingManagment,
   viewType,
   onSetType,
 }: BookingTabsProps) => {
@@ -52,10 +50,11 @@ export const BookingTabs = ({
                 onSetType(tabType);
               }}
             >
-              {tabType === BOOKING_CALENDAR_TYPE && hasBookingManagment && (
+              {tabType === BOOKING_LIST_TYPE ? (
+                <BookingList />
+              ) : (
                 <BookingCalendar />
               )}
-              {tabType === BOOKING_LIST_TYPE && <BookingList />}
             </Button>
           );
         })}