@licklist/design 0.44.485 → 0.44.486-dev.10

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

@@ -3,6 +3,11 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
+import {
+  CONFIRMATION_TYPE,
+  PAYMENT_LINK_TYPE,
+} from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
@@ -357,12 +362,14 @@ Default.args = {
       body: "",
       meta: "",
       notification: {
-        isActive: false,
+        id: 1,
+        isActive: true,
         isDefault: false,
         name: "Template name 1",
         companyId: 1,
         providerId: 1,
         fieldSetId: 1,
+        type: CONFIRMATION_TYPE,
       },
     },
     {
@@ -371,12 +378,44 @@ Default.args = {
       body: "",
       meta: "",
       notification: {
-        isActive: false,
+        id: 2,
+        isActive: true,
+        isDefault: false,
+        name: "Tempalte name 2",
+        companyId: 1,
+        providerId: 1,
+        fieldSetId: 1,
+        type: CONFIRMATION_TYPE,
+      },
+    },
+  ],
+  smsTemplates: [
+    {
+      id: "1",
+      body: "",
+      notification: {
+        id: 3,
+        isActive: true,
+        isDefault: false,
+        name: "Tempalte name 1",
+        companyId: 1,
+        providerId: 1,
+        fieldSetId: 1,
+        type: PAYMENT_LINK_TYPE,
+      },
+    },
+    {
+      id: "2",
+      body: "",
+      notification: {
+        id: 4,
+        isActive: true,
         isDefault: false,
         name: "Tempalte name 2",
         companyId: 1,
         providerId: 1,
         fieldSetId: 1,
+        type: PAYMENT_LINK_TYPE,
       },
     },
   ],

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

@@ -20,6 +20,7 @@ import {
 import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
+import { getFilteredTemplates } from "../utils";
 
 export interface WithIsLoading {
   isLoading: boolean;
@@ -133,6 +134,16 @@ export function ProductSetForm({
                 <>
                   <ProductSetControl
                     {...shared}
+                    smsTemplates={getFilteredTemplates(
+                      shared?.smsTemplates,
+                      formValues?.smsTemplates
+                    )}
+                    emailTemplates={getFilteredTemplates(
+                      shared?.emailTemplates,
+                      formValues?.emailTemplates
+                    )}
+                    showEmailTemplate={!!shared?.emailTemplates}
+                    showSmsTemplate={!!shared?.smsTemplates}
                     isLoading={isLoading}
                     isCreateAction={isCreateAction}
                     companyName={companyName}

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

@@ -21,6 +21,7 @@ import { Product } from "../types";
 import { WithIsLoading } from "./ProductSetForm";
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
+import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 import { SubProductsControl } from "./SubProductsControl";
 import { ProductSetModalClasses } from "../../sortable-tree/SortableTreeItem";
 import { getBadgeConfig } from "./ProductCategoriesControl";
@@ -85,16 +86,25 @@ export function ProductsControl({
     trigger,
     setValue,
     watch,
+    getValues,
   } = form;
 
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
+  const productPointsKey = `steps.${stepIndex}.pointProducts` as const;
+
   const { fields, append, remove, move } = useFieldArray({
     name: productControlFieldName,
     control,
     keyName: "_id",
   });
+
+  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
+    fieldName: productControlFieldName,
+    remove,
+  });
+
   const allowDeposits = watch(
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.allowDeposits`
   );
@@ -156,6 +166,22 @@ export function ProductsControl({
     });
   };
 
+  const onProductRemove = (index: number) => {
+    const currentProduct = getValues(
+      `${productControlFieldName}.${index}` as const
+    );
+
+    const currentPointProducts = getValues(productPointsKey);
+
+    setValue(
+      productPointsKey,
+      currentPointProducts?.filter(
+        (product) => product.productUuid !== currentProduct.uuid
+      ) || []
+    );
+    remove(index);
+  };
+
   return (
     <>
       <SortableTree
@@ -182,6 +208,8 @@ export function ProductsControl({
                 title={value}
                 badge={<Badge className="product-badge">{t("product")}</Badge>}
                 isIconInHeader={false}
+                cancelChanges={() => cancelChanges(index)}
+                edit={() => edit(index)}
                 secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
                 subTitle={
                   <div className="product-set-badges-container">
@@ -219,8 +247,9 @@ export function ProductsControl({
                     categoryType={categoryType}
                   />
                 }
-                onDelete={() => remove(index)}
+                onDelete={() => onProductRemove(index)}
                 validate={() => trigger(`${productControlFieldName}.${index}`)}
+                saveValidField={saveValidField}
                 // preItem={<Popover className="d-none d-sm-block" />}
               >
                 <SubProductsControl

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import Badge from "react-bootstrap/Badge";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
+import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 import { SortableTree } from "../../sortable-tree";
 import { ProductSetModalClasses } from "../../sortable-tree/SortableTreeItem";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -11,6 +12,7 @@ import { StepControl } from "../step/StepControl";
 import { Step } from "../types";
 import { ProductCategoriesControl } from "./ProductCategoriesControl";
 import { ProductSetFormValues } from "./ProductSetForm";
+
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
@@ -28,6 +30,7 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     formState: { errors, isSubmitting },
     clearErrors,
     getValues,
+    setFocus,
   } = form;
 
   const { fields, append, remove } = useFieldArray({
@@ -36,6 +39,11 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     keyName: "_id",
   });
 
+  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
+    fieldName: "steps",
+    remove,
+  });
+
   useEffect(() => {
     if (!isSubmitting) {
       return;
@@ -57,12 +65,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", {
@@ -74,12 +84,14 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                 id={step._id}
                 title={value}
                 badge={<Badge className="step-badge">{t("step")}</Badge>}
-                isExpanded={isFirstStepAdded}
+                isExpanded={isFirstStepAdded || !!errors.steps?.[index]}
                 isInvalid={!!errors.steps?.[index]}
                 isIconInHeader={false}
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
+                edit={() => edit(index)}
+                cancelChanges={() => cancelChanges(index)}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -104,6 +116,22 @@ 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);
+                }}
+                saveValidField={saveValidField}
               >
                 <ProductCategoriesControl
                   isLoading={isLoading}

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+
+interface useSortableTreeFunctionsProps {
+  fieldName: string;
+  remove: (index?: number | number[]) => void;
+}
+export const useSortableTreeFunctions = ({
+  fieldName,
+  remove,
+}: useSortableTreeFunctionsProps) => {
+  const { getValues, setValue } = useFormContext();
+  const [previousValue, setEditValue] = useState(null);
+
+  const edit = (index: number) => {
+    const currentCategoryProduct = getValues(`${fieldName}.${index}` as const);
+    const cloneCategoryProduct = structuredClone(currentCategoryProduct);
+    setEditValue(cloneCategoryProduct);
+  };
+
+  const cancelChanges = (index: number) => {
+    if (!previousValue) {
+      return remove(index);
+    }
+    return setValue(`${fieldName}.${index}` as const, previousValue);
+  };
+
+  const saveValidField = () => {
+    setEditValue(null);
+  };
+
+  return {
+    edit,
+    cancelChanges,
+    saveValidField,
+  };
+};

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

@@ -64,6 +64,7 @@ import { IsDeletableEvent } from "../types";
 import { FixedDurationOptions } from "./fixed-duration-fields";
 import { ProductDurationControl } from "./duration";
 import { ProductPriceControl } from "./price";
+import { MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH } from "./constants";
 
 // TO DO refactor this file
 // and add correct types
@@ -86,6 +87,7 @@ export interface ProductControlValues
   isRequired: boolean;
   quantitySelector: number;
   hasSpecialNotes: boolean;
+  minSpend?: number | null;
   type?: ProductType;
   weight?: number;
   tierId?: number;
@@ -137,7 +139,7 @@ export function ProductControl<T extends FormValues>({
   const { setLoading, providerHasBookingManagement } = useContext(
     ProductSetLoadingContext
   );
-  const { t } = useTranslation("Design");
+  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
@@ -157,6 +159,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 +192,7 @@ export function ProductControl<T extends FormValues>({
 
   const onImageRemove = useCallback(
     (id, path) => {
-      handleImageRemove(id, path);
+      handleImageRemove(String(id), path);
     },
     [handleImageRemove]
   );
@@ -200,7 +203,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,15 +217,8 @@ 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];
-
   return (
     <>
       <Row>
@@ -254,17 +256,24 @@ export function ProductControl<T extends FormValues>({
                   disabled={isLoading}
                 />
               )}
+              rules={{
+                maxLength: {
+                  value: MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH,
+                  message: t("Validation:descriptionTooManyCharactersMessage", {
+                    max: MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH,
+                  }) as string,
+                },
+              }}
               control={control}
               name={`${fieldNamePrefix}.description` as Path<T>}
             />
-
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors<T>(
-                `${fieldNamePrefix}.description` as Path<T>,
-                errors
-              )}
-            </Form.Control.Feedback>
           </Form.Group>
+          <div className="invalid-feedback field-values-error d-block">
+            {HookFormService.getErrors<T>(
+              `${fieldNamePrefix}.description` as Path<T>,
+              errors
+            )}
+          </div>
 
           {allowDeposits ? (
             <Row>
@@ -274,7 +283,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 +291,7 @@ export function ProductControl<T extends FormValues>({
           ) : (
             <ProductPriceControl<T>
               isLoading={isLoading}
-              fieldNamePrefix={fieldNamePrefix}
+              fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
             />
           )}
 
@@ -553,10 +562,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/constants.ts

@@ -0,0 +1 @@
+export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;

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,18 +33,22 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
     onFocus,
   } = props;
   const {
-    trigger,
     control,
+    trigger,
+    watch,
+    register,
     formState: { errors },
   } = useFormContext<T>();
   const { t } = useTranslation("Design");
-
   const totalQuantityId = useId();
 
-  // trigger total quantity field's validation if disabled state was changed
+  const maxQuantityValue = watch(`${fieldNamePrefix}.maxQuantity` as Path<T>);
+  const unlimited = watch(`${fieldNamePrefix}.isUnlimited` as Path<T>);
+
   useEffect(() => {
     trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
-  }, [disabled, fieldNamePrefix, trigger]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maxQuantityValue, unlimited]);
 
   return (
     <>
@@ -65,6 +69,27 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type="number"
                 min={0}
                 step={1}
+                {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
+                  validate: (value) => {
+                    if (unlimited) return true;
+                    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}
@@ -83,18 +108,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/product-category/ProductCategoryControl.tsx

@@ -105,7 +105,7 @@ export function ProductCategoryControl({
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
-  const { providerHasBookingManagement, zones } = useContext(
+  const { providerHasBookingManagement, zones = [] } = useContext(
     ProductSetLoadingContext
   );