@licklist/design 0.44.485-dev.5 → 0.44.485-dev.50

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

@@ -28,6 +28,7 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     formState: { errors, isSubmitting },
     clearErrors,
     getValues,
+    setFocus,
   } = form;
 
   const { fields, append, remove } = useFieldArray({
@@ -57,12 +58,14 @@ export function StepsControl({ isLoading }: StepsControlProps) {
   return (
     <>
       {fields.map((step, index) => {
-        const stepData: any = getValues(`steps.${index}` as const);
+        const stepFieldName = `steps.${index}` as const;
+
+        const stepData = getValues(stepFieldName);
 
         return (
           <Controller
             key={`step-${step._id}`}
-            name={`steps.${index}.name` as const}
+            name={`${stepFieldName}.name` as const}
             control={control}
             rules={{
               required: t("Validation:fieldRequired", {
@@ -104,6 +107,21 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                     ? step.productCategories.map(({ id }) => String(id))
                     : []
                 }
+                validate={() => {
+                  // @TODO investigate why form return true in case
+                  // when required field not filled. Looks like
+                  // we cann't use default hookForm trigger function
+                  // because we have venueMap outside this form.
+                  // So before closing we need to check directly by
+                  // error on name field. Instead of run trugger.
+                  const error = errors.steps?.[index]?.name;
+
+                  if (error) {
+                    setFocus(`${stepFieldName}.name` as const);
+                  }
+
+                  return Promise.resolve(!error);
+                }}
               >
                 <ProductCategoriesControl
                   isLoading={isLoading}

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>}
             />
           )}
 
@@ -557,6 +559,19 @@ export function ProductControl<T extends FormValues>({
             {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
               <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/provider-details-input/ProviderDetailsInput.tsx

@@ -34,7 +34,6 @@ export function ProviderDetailsInput({
   const {
     register,
     formState: { errors },
-    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
 
@@ -149,7 +148,6 @@ export function ProviderDetailsInput({
           <Typeahead
             name="company"
             options={companiesOptions}
-            setValue={setValue}
             placeholder={t("App:select")}
             noOptionsMessage={t("App:noMatchesFound")}
           />

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

@@ -12,6 +12,7 @@ import {
   BookingContext,
   BookingFilters,
 } from "@licklist/plugins/dist/context/booking/BookingContext";
+import { DateRangeInput } from "../../../../static/date-range-input/DateRangeInput";
 
 const ORDER_STATUSES_FOR_UPDATE = [
   ORDER_STATUS_PENDING,
@@ -32,10 +33,15 @@ export const AdditionalFilterSection = () => {
   const { t } = useTranslation("Design");
   const { filters, setFilters } = useContext(BookingContext);
 
-  const { handleSubmit, register, reset } = useForm<Partial<BookingFilters>>({
+  const { handleSubmit, register, setValue, reset, watch } = useForm<
+    Partial<BookingFilters>
+  >({
     defaultValues: filters,
   });
 
+  const startDate = watch("order_date_from");
+  const endDate = watch("order_date_to");
+
   const onFormSubmit = (values: Partial<BookingFilters>) => {
     setFilters(values);
   };
@@ -77,7 +83,15 @@ export const AdditionalFilterSection = () => {
           <Col md="3">
             <Form.Group>
               <Form.Label>{t("date")}</Form.Label>
-              <Form.Control {...register("date")} type="date" />
+              <DateRangeInput
+                placeholder={t("date")}
+                startDate={startDate}
+                endDate={endDate}
+                onDateChange={({ startDate, endDate }) => {
+                  setValue("order_date_from", startDate);
+                  setValue("order_date_to", endDate);
+                }}
+              />
             </Form.Group>
           </Col>
 

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

@@ -7,7 +7,12 @@ import {
 } from "@licklist/plugins/dist/context/booking/BookingContext";
 import { ResultTagButton } from "./ResultTagButton";
 
-const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
+const SEARCHING_FOR_FILTER_KEYS = [
+  "q",
+  "status",
+  "order_date_from",
+  "staffMember",
+];
 
 export const SearchingForSection = () => {
   const { t } = useTranslation("Design");
@@ -16,6 +21,14 @@ export const SearchingForSection = () => {
   const filteredFilters = useMemo(() => {
     return SEARCHING_FOR_FILTER_KEYS.reduce(
       (prevValues: Partial<BookingFilters>, currentKey: string) => {
+        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] };
         }
@@ -31,6 +44,10 @@ export const SearchingForSection = () => {
   };
 
   const onResetSelectedFilter = (key: string) => {
+    if (key === "order_date_from") {
+      setFilters({ ...filters, order_date_from: "", order_date_to: "" });
+      return;
+    }
     setFilters({ ...filters, [key]: "" });
   };
 

package/src/sales/filters/SaleFilter.stories.tsx

@@ -13,7 +13,7 @@ export const Default: Story<SaleFiltersProps> = () => {
     name: "",
     email: "",
     date: "",
-    is_pending: false,
+    is_in_cart: false,
   });
 
   return <SaleFilters values={values} onChange={setValues} />;

package/src/sales/filters/SaleFilters.tsx

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import { TextField } from "../../static/TextField";
 import { DateRangeInput } from "../../static/date-range-input";
 
-interface Filters {
+export interface Filters {
   id: string;
   name: string;
   email: string;
@@ -12,7 +12,7 @@ interface Filters {
   order_date_to: string;
   orderable_date_from: string;
   orderable_date_to: string;
-  is_pending: boolean;
+  is_in_cart: boolean;
 }
 
 export interface SaleFiltersProps {

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -39,7 +39,9 @@ export const SelectMenu = ({
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className="bold-text">{t("App:menus")}</Form.Label>
+            <Form.Label className="bold-text">
+              {t("Design:productSets")}
+            </Form.Label>
           )}
 
           <div className="menu-list-manual-booking">

package/src/setting/dashboard/snippets/control/SnippetControl.tsx

@@ -34,11 +34,11 @@ export function SnippetControl({
     setValue,
   } = useFormContext<SnippetFormValues>();
   const type = watch("type");
-  const isEvent = type === "event";
+  const isEvent = type === "event_list";
 
   const { displayCost, displayDescription, displayType } =
-    watch("snippetSetting");
-  const templateId = watch("templateId") || "";
+    watch("widgetSetting");
+  const templateId = watch("designId") || "";
 
   useEffect(() => {
     if (isEvent) {
@@ -56,7 +56,7 @@ export function SnippetControl({
 
     if (selectedTemplate) return;
 
-    setValue("templateId" as const, "");
+    setValue("designId", "");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [templateId, type, templates]);
 
@@ -80,7 +80,7 @@ export function SnippetControl({
                 attribute: t("name"),
               }) as string,
             })}
-            placeholder={t("Design:snippetName")}
+            placeholder={t("Design:widgetName")}
             isInvalid={Boolean(errors.name)}
           />
           <Form.Control.Feedback type="invalid">
@@ -125,7 +125,7 @@ export function SnippetControl({
           >
             <Form.Label className="mb-3">{t("Options")}</Form.Label>
             <Form.Check
-              {...register("snippetSetting.displayDescription")}
+              {...register("widgetSetting.displayDescription")}
               id={displayDescriptionId}
               isInvalid={!isValid}
               name="snippetSetting.displayDescription"
@@ -135,7 +135,7 @@ export function SnippetControl({
               disabled={isLoading}
             />
             <Form.Check
-              {...register("snippetSetting.displayCost")}
+              {...register("widgetSetting.displayCost")}
               id={displayCostId}
               isInvalid={!isValid}
               name="snippetSetting.displayCost"
@@ -145,7 +145,7 @@ export function SnippetControl({
               disabled={isLoading}
             />
             <Form.Check
-              {...register("snippetSetting.displayType")}
+              {...register("widgetSetting.displayType")}
               id={displayTypeId}
               isInvalid={!isValid}
               name="snippetSetting.displayType"
@@ -188,7 +188,7 @@ export function SnippetControl({
         <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
           <Controller
             control={control}
-            name="templateId"
+            name="designId"
             rules={{ required: true }}
             render={({
               field: { value, onChange },
@@ -197,9 +197,7 @@ export function SnippetControl({
               const fieldSetValue = value ? String(value) : "";
               return (
                 <>
-                  <Form.Label className="mt-5">
-                    {t("snippetTemplate")}
-                  </Form.Label>
+                  <Form.Label className="mt-5">{t("widgetDesign")}</Form.Label>
                   <Form.Control
                     as="select"
                     disabled={isLoading}
@@ -223,7 +221,7 @@ export function SnippetControl({
                   <Form.Control.Feedback type="invalid">
                     {HookFormService.hasError(error, "required") &&
                       t("Validation:fieldRequired", {
-                        attribute: t("Design:snippetTemplate"),
+                        attribute: t("Design:widgetDesign"),
                       })}
                   </Form.Control.Feedback>
                 </>

package/src/setting/dashboard/snippets/form/SnippetForm.tsx

@@ -17,8 +17,8 @@ import { SnippetContextProvider, SnippetLoadingContext } from "./context";
 export interface SnippetFormValues extends FormValues {
   name: string;
   type: SnippetType;
-  templateId: string;
-  snippetSetting?: {
+  designId: string;
+  widgetSetting?: {
     displayDescription: boolean;
     displayCost: boolean;
     displayType: boolean;

package/src/setting/dashboard/snippets/modal/SnippetViewTypeModal.tsx

@@ -58,7 +58,7 @@ export const SnippetViewTypeModal = ({
       contentClassName="rounded"
     >
       <ModalHeader className="align-items-center border-0">
-        <ModalTitle as="h5">{t("Design:selectSnippetViewType")}</ModalTitle>
+        <ModalTitle as="h5">{t("Design:selectWidgetViewType")}</ModalTitle>
 
         <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
           <Icon type="times" height="1.2rem" />

package/src/snippet/snippet-template/SnippetTemplate.tsx

@@ -44,7 +44,7 @@ export function SnippetTemplate({
         <SnippetTemplateViewContextProvider>
           <div
             ref={containerRef}
-            className="d-flex flex-column-reverse flex-sm-row"
+            className="d-flex flex-column-reverse flex-sm-row overflow-auto"
           >
             <div className="d-flex flex-grow-1">
               <Preview

package/src/snippet/snippet-template/form/SnippetTemplateForm.tsx

@@ -6,8 +6,8 @@ import { useTranslation } from "react-i18next";
 import { isEqual } from "lodash";
 import {
   SnippetTemplateValues,
-  SNIPPET_TEMPLATE_TYPE_EVENT,
-  SNIPPET_TEMPLATE_TYPE_CALENDAR,
+  SNIPPET_TEMPLATE_TYPE_EVENT_LIST,
+  SNIPPET_TEMPLATE_TYPE_VENUE_MAP,
 } from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import Row from "react-bootstrap/Row";
@@ -80,7 +80,7 @@ export function SnippetTemplateForm({
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <h2 className="mb-2 pb-1 border-bottom border-secondary">
-          {t("templateSettings")}
+          {t("designSettings")}
         </h2>
 
         <Row>
@@ -113,21 +113,21 @@ export function SnippetTemplateForm({
         {providerHasMap && (
           <Row>
             <Form.Group as={Col} xs sm={12} md={8} lg={10} xl={12}>
-              <Form.Label>{t("snippetType")}</Form.Label>
+              <Form.Label>{t("widgetType")}</Form.Label>
               <Form.Control
                 as="select"
                 {...register("type", {
                   required: t("Validation:fieldRequired", {
-                    attribute: t("snippetType"),
+                    attribute: t("widgetType"),
                   }) as string,
                 })}
-                placeholder={t("snippetType")}
+                placeholder={t("widgetType")}
               >
-                <option value={SNIPPET_TEMPLATE_TYPE_EVENT}>
-                  {t("snippetTypeEventList")}
+                <option value={SNIPPET_TEMPLATE_TYPE_EVENT_LIST}>
+                  {t("widgetTypeEventList")}
                 </option>
-                <option value={SNIPPET_TEMPLATE_TYPE_CALENDAR}>
-                  {t("snippetTypeVenueMaps")}
+                <option value={SNIPPET_TEMPLATE_TYPE_VENUE_MAP}>
+                  {t("widgetTypeVenueMaps")}
                 </option>
               </Form.Control>
             </Form.Group>