@licklist/design 0.44.485-dev.100 → 0.44.485-dev.12

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

@@ -64,7 +64,6 @@ 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
@@ -87,7 +86,6 @@ export interface ProductControlValues
   isRequired: boolean;
   quantitySelector: number;
   hasSpecialNotes: boolean;
-  minSpend?: number | null;
   type?: ProductType;
   weight?: number;
   tierId?: number;
@@ -139,7 +137,7 @@ export function ProductControl<T extends FormValues>({
   const { setLoading, providerHasBookingManagement } = useContext(
     ProductSetLoadingContext
   );
-  const { t } = useTranslation(["Design", "Validation"]);
+  const { t } = useTranslation("Design");
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
@@ -159,7 +157,6 @@ 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") },
@@ -192,7 +189,7 @@ export function ProductControl<T extends FormValues>({
 
   const onImageRemove = useCallback(
     (id, path) => {
-      handleImageRemove(String(id), path);
+      handleImageRemove(id, path);
     },
     [handleImageRemove]
   );
@@ -203,13 +200,7 @@ export function ProductControl<T extends FormValues>({
   }, [setLoading, isImageUploading]);
 
   useEffect(() => {
-    const formImages = getValues(`${fieldNamePrefix}.images` as Path<T>);
-
-    setInitialImages(formImages as Image[]);
-  }, [getValues, setInitialImages, fieldNamePrefix]);
-
-  useEffect(() => {
-    if (Array.isArray(images)) {
+    if (Array.isArray(images) && images?.length > 0) {
       setValue(
         `${fieldNamePrefix}.images` as Path<T>,
         images as UnpackNestedValue<PathValue<T, Path<T>>>
@@ -217,8 +208,15 @@ 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>
@@ -256,24 +254,17 @@ 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>
@@ -283,7 +274,7 @@ export function ProductControl<T extends FormValues>({
               />
               <ProductPriceControl<T>
                 isLoading={isLoading}
-                fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
+                fieldNamePrefix={fieldNamePrefix}
                 title={t("totalPrice")}
                 allowDeposits={allowDeposits}
               />
@@ -291,7 +282,7 @@ export function ProductControl<T extends FormValues>({
           ) : (
             <ProductPriceControl<T>
               isLoading={isLoading}
-              fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
+              fieldNamePrefix={fieldNamePrefix}
             />
           )}
 
@@ -562,22 +553,10 @@ export function ProductControl<T extends FormValues>({
                 name={`${fieldNamePrefix}.hasSpecialNotes` as Path<T>}
               />
             </Form.Group>
-            {[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>
+
+            {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
+              <FixedDurationOptions fieldNamePrefix={fieldNamePrefix} />
+            )}
           </div>
         </Collapse>
 

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,22 +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 unlimited = watch(`${fieldNamePrefix}.isUnlimited` as Path<T>);
+  const totalQuantityId = useId();
 
+  // trigger total quantity field's validation if disabled state was changed
   useEffect(() => {
     trigger(`${fieldNamePrefix}.totalQuantity` as Path<T>);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [maxQuantityValue, unlimited]);
+  }, [disabled, fieldNamePrefix, trigger]);
 
   return (
     <>
@@ -69,27 +65,6 @@ 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}
@@ -108,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/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
   );
 

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,4 +1,4 @@
-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";
@@ -6,7 +6,6 @@ import { useId } from "@react-aria/utils";
 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,
@@ -34,9 +33,8 @@ export function ProviderDetailsInput({
 }: ProviderDetailsInputProps) {
   const {
     register,
-    watch,
-    trigger,
     formState: { errors },
+    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
 
@@ -47,14 +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");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [description.length]);
-
   return (
     <>
       <Form.Group controlId={nameId}>
@@ -78,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}>
@@ -174,6 +149,7 @@ export function ProviderDetailsInput({
           <Typeahead
             name="company"
             options={companiesOptions}
+            setValue={setValue}
             placeholder={t("App:select")}
             noOptionsMessage={t("App:noMatchesFound")}
           />

package/src/provider/resources-blocking-modal/ResourcesBlockingModal.stories.tsx

@@ -0,0 +1,51 @@
+import { Meta, Story } from "@storybook/react";
+import React from "react";
+import {
+  ResourcesBlockingModal,
+  ResourcesBlockingModalProps,
+} from "./ResourcesBlockingModal";
+
+export default {
+  title: "Provider/ResourcesBlockingModal",
+  component: ResourcesBlockingModal,
+} as Meta;
+
+export const Default: Story<ResourcesBlockingModalProps> = (props) => {
+  return <ResourcesBlockingModal {...props} />;
+};
+
+Default.args = {
+  show: true,
+  zones: [
+    {
+      id: 1,
+      name: "Zone 1",
+      providerId: 1,
+      type: "standard",
+      sort: null,
+      description: "description",
+      createdAt: "2021-09-01T12:00:00.000Z",
+      updatedAt: null,
+      deletedAt: null,
+      zoneRecurrences: null,
+      image: null,
+    },
+    {
+      id: 2,
+      name: "Zone 2",
+      providerId: 1,
+      type: "standard",
+      sort: null,
+      description: "description",
+      createdAt: "2021-09-01T12:00:00.000Z",
+      updatedAt: null,
+      deletedAt: null,
+      zoneRecurrences: null,
+      image: null,
+    },
+  ],
+  lanes: [
+    { zoneId: 1, lanes: ["Lane 1", "Lane 2", "Lane 3", "Lane 4"] },
+    { zoneId: 2, lanes: ["Lane 5", "Lane 6", "Lane 7", "Lane 8"] },
+  ],
+};

package/src/provider/resources-blocking-modal/ResourcesBlockingModal.tsx

@@ -0,0 +1,134 @@
+import { Button, Form, Modal } from "react-bootstrap";
+import React from "react";
+import { useId } from "@react-aria/utils";
+import { useTranslation } from "react-i18next";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
+import Image from "../../static/Image";
+import src from "../../assets/dashboard/blockingClock.png";
+
+const WEEKDAYS = [
+  "mondayShort",
+  "tuesdayShort",
+  "wednesdayShort",
+  "thursdayShort",
+  "fridayShort",
+  "saturdayShort",
+  "sundayShort",
+];
+
+export type ResourcesBlockingModalProps = {
+  show: boolean;
+  zones: Zone[];
+  lanes: { zoneId: Zone["id"]; lanes: string[] }[];
+};
+
+export const ResourcesBlockingModal = ({
+  show,
+  zones,
+  lanes,
+}: ResourcesBlockingModalProps) => {
+  const { t } = useTranslation("Design");
+  const allId = useId();
+  const resourcesId = useId();
+
+  return (
+    <Modal centered show={show} className="resources-blocking-modal">
+      <header>
+        <span>{t("resourcesBlocking")}</span>
+        <Image src={src} />
+      </header>
+
+      <Modal.Body>
+        <div className="checkbox-with-description">
+          <span>{t("dayOfTheWeek")}</span>
+          <Form.Group className="custom-checkbox">
+            <Form.Check custom type="checkbox" id={allId}>
+              <Form.Check.Input type="checkbox" />
+              <Form.Check.Label>{t("all")}</Form.Check.Label>
+            </Form.Check>
+          </Form.Group>
+        </div>
+
+        <Form.Group className="custom-checkbox days-list">
+          {WEEKDAYS.map((weekday) => (
+            <Checkbox key={weekday} label={t(weekday)} />
+          ))}
+        </Form.Group>
+
+        <div className="date-time-inputs">
+          <Input label={t("from")} placeholder="DD.MM.YYYY" />
+          <Input label={t("until")} placeholder="DD.MM.YYYY" />
+
+          <Input label={t("startTime")} placeholder="00:00" />
+          <Input label={t("endTime")} placeholder="00:00" />
+        </div>
+
+        <Form.Group className="text-input">
+          <Form.Label>{t("textLabel")}</Form.Label>
+          <Form.Control />
+        </Form.Group>
+
+        <div className="checkbox-with-description">
+          <span>{t("resources")}</span>
+          <Form.Group className="custom-checkbox">
+            <Form.Check custom type="checkbox" id={resourcesId}>
+              <Form.Check.Input type="checkbox" />
+              <Form.Check.Label>{t("all")}</Form.Check.Label>
+            </Form.Check>
+          </Form.Group>
+        </div>
+
+        {zones.map((zone) => (
+          <Form.Group key={zone.id} className="zone-wrapper custom-checkbox">
+            <div className="zone-name">{zone.name}</div>
+
+            {lanes
+              .find((lane) => lane.zoneId === zone.id)
+              .lanes.map((lane) => (
+                <Checkbox key={lane} label={lane} className="lane" />
+              ))}
+          </Form.Group>
+        ))}
+
+        <footer>
+          <Button>Save</Button>
+          <Button variant="secondary">Close</Button>
+          <Button variant="danger">Delete</Button>
+        </footer>
+      </Modal.Body>
+    </Modal>
+  );
+};
+
+const Checkbox = ({
+  label,
+  className = "",
+}: {
+  label: string;
+  className?: string;
+}) => {
+  const id = useId();
+
+  return (
+    <Form.Check custom type="checkbox" className={className} id={id}>
+      <Form.Check.Input type="checkbox" />
+      <Form.Check.Label>{label}</Form.Check.Label>
+    </Form.Check>
+  );
+};
+
+const Input = ({
+  label,
+  placeholder,
+}: {
+  label: string;
+  placeholder: string;
+}) => {
+  return (
+    <Form.Group className="text-input">
+      <Form.Label>{label}</Form.Label>
+
+      <Form.Control placeholder={placeholder} />
+    </Form.Group>
+  );
+};

package/src/provider/resources-blocking-modal/index.ts

@@ -0,0 +1 @@
+export { ResourcesBlockingModal } from "./ResourcesBlockingModal";