@licklist/design 0.44.486-dev.83 → 0.44.486

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/ProductCategory.stories.tsx

@@ -26,6 +26,7 @@ const categoryMock: Partial<ProductCategoryControlValues> = {
   minSubItems: 0,
   maxSubItems: 0,
   quantityType: QUANTITY_TYPE_STANDARD,
+  isRelyOnPeople: false,
   isTimeRelated: false,
   hasTicket: false,
   allowDeposits: false,

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -28,6 +28,7 @@ export interface ProductCategoryControlValues extends FormValues {
   maxSubItems: number | null;
   quantityType: QuantityType;
   type: CategoryType;
+  isRelyOnPeople: boolean;
   isTimeRelated: boolean;
   collectUserInfo: boolean;
   hasTicket: boolean;
@@ -96,6 +97,7 @@ export function ProductCategoryControl({
   const minSubItemsId = useId();
   const maxSubItemsId = useId();
   const quantityType = useId();
+  const isRelyOnPeopleId = useId();
   const isTimeRelatedId = useId();
   const collectUserInfoId = useId();
   const hasTicketId = useId();
@@ -103,7 +105,7 @@ export function ProductCategoryControl({
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
-  const { providerHasBookingManagement, zones = [] } = useContext(
+  const { providerHasBookingManagement, zones } = useContext(
     ProductSetLoadingContext
   );
 
@@ -330,7 +332,7 @@ export function ProductCategoryControl({
           <Row>
             <Col>
               <Form.Group controlId={zoneId}>
-                <Form.Label>{t("Design:zone")}</Form.Label>
+                <Form.Label>Zone</Form.Label>
                 <Controller
                   control={control}
                   name={`${fieldNamePrefix}.zoneId`}
@@ -358,6 +360,12 @@ export function ProductCategoryControl({
                         attribute: t("zone"),
                       }),
                     },
+                    validate: (value) => {
+                      if (value) return true;
+                      return t("Validation:fieldRequired", {
+                        attribute: t("zone"),
+                      }) as string;
+                    },
                   }}
                 />
                 <Form.Control.Feedback type="invalid">
@@ -462,6 +470,27 @@ export function ProductCategoryControl({
               </Form.Group>
             )}
 
+            <Form.Group
+              controlId={isRelyOnPeopleId}
+              className="advanced-switch-container"
+            >
+              <Form.Label>{t("isRelyOnPeople")}</Form.Label>
+
+              <div>
+                <Controller
+                  render={({ field: { name, value, onChange } }) => (
+                    <BooleanSwitch
+                      name={name}
+                      value={Boolean(value)}
+                      onChange={onChange}
+                      disabled={isLoading || category.hasTicket}
+                    />
+                  )}
+                  control={control}
+                  name={`${fieldNamePrefix}.isRelyOnPeople` as const}
+                />
+              </div>
+            </Form.Group>
             {!category.hasTicket && (
               <Form.Group
                 controlId={isTimeRelatedId}

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

@@ -1,16 +1,3 @@
-import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
-import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
-import { TFunction } from "i18next";
-import { UseFormSetError } from "react-hook-form";
-import { TemplateItem } from "../control/ProductSetControl";
-import { ProductSetFormValues } from "../form/ProductSetForm";
-
-interface CheckAvailableTimesErrors {
-  values: ProductSetFormValues;
-  setError: UseFormSetError<ProductSetFormValues>;
-  t: TFunction;
-}
-
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -27,56 +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,
-    }));
-};
-
-export const checkAvailableTimesErrors = ({
-  values,
-  setError,
-  t,
-}: CheckAvailableTimesErrors) => {
-  let hasError = false;
-
-  const hasCategoryWithZone = values?.steps?.some(
-    (step) => !!step?.productCategories.some((category) => !!category?.zoneId)
-  );
-  if (!hasCategoryWithZone) {
-    return hasError;
-  }
-
-  values?.menuRecurrences?.forEach((recurrence, index: number) => {
-    if (!recurrence?.availableTimes?.length) {
-      hasError = true;
-      setError(`menuRecurrences.${index}.availableTimes` as const, {
-        type: "validate",
-        message: t("Validation:fieldMinNumber", {
-          attribute: t("startTimes"),
-          min: 1,
-        }),
-      });
-    }
-  });
-  return hasError;
-};

package/src/provider/location-input/LocationInput.tsx

@@ -5,7 +5,6 @@ import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import CountryCodeSelect from "../../static/CountryCodeSelect";
 import { LocationInputValues } from ".";
-import { FormGroupControll } from "./components";
 
 export function LocationInput() {
   const {
@@ -14,32 +13,32 @@ export function LocationInput() {
   } = useFormContext<LocationInputValues>();
   const { t } = useTranslation("Design");
 
+  const addressId = useId();
+  const cityId = useId();
+  const stateId = useId();
+  const postcodeId = useId();
   const countryId = useId();
 
   return (
     <>
       <input {...register("location.latitude")} type="hidden" />
       <input {...register("location.longitude")} type="hidden" />
-      <FormGroupControll
-        error={errors?.location?.street}
-        name="location.street"
-        label={t("locationStreet")}
-      />
-      <FormGroupControll
-        error={errors?.location?.city}
-        name="location.city"
-        label={t("locationCity")}
-      />
-      <FormGroupControll
-        error={errors?.location?.state}
-        name="location.state"
-        label={t("locationState")}
-      />
-      <FormGroupControll
-        error={errors?.location?.postcode}
-        name="location.postcode"
-        label={t("locationPostcode")}
-      />
+      <Form.Group controlId={addressId}>
+        <Form.Label>{t("locationStreet")}</Form.Label>
+        <Form.Control {...register("location.street")} />
+      </Form.Group>
+      <Form.Group controlId={cityId}>
+        <Form.Label>{t("locationCity")}</Form.Label>
+        <Form.Control {...register("location.city")} />
+      </Form.Group>
+      <Form.Group controlId={stateId}>
+        <Form.Label>{t("locationState")}</Form.Label>
+        <Form.Control {...register("location.state")} />
+      </Form.Group>
+      <Form.Group controlId={postcodeId}>
+        <Form.Label>{t("locationPostcode")}</Form.Label>
+        <Form.Control {...register("location.postcode")} />
+      </Form.Group>
       <Form.Group controlId={countryId}>
         <Form.Label>{t("locationCountry")}</Form.Label>
         <CountryCodeSelect

package/src/provider/location-input/LocationInputDescription.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
 import { LocationInputValues } from ".";
@@ -13,7 +13,7 @@ export function LocationInputDescription() {
     "postcode",
     "country",
   ] as const;
-  const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
+  const fields = fieldNames.reduce<JSX.Element[]>((acc, field) => {
     const value = values?.[field];
     if (!value) return acc;
 

package/src/provider/location-input/index.ts

@@ -1,6 +1,6 @@
 export * from "./LocationInput";
 export * from "./LocationInputDescription";
-export * from "./components";
+
 export type LocationInputValues = {
   location: {
     street: string;

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

@@ -1,11 +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 { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { Typeahead, TypeaheadOptions } from "../../typeahead";
-import { MAX_DESCRIPTION_CHARACTERS_LENGTH } from "../constants";
 import {
   ProviderLinksInput,
   ProviderLinksInputProps,
@@ -33,9 +33,8 @@ export function ProviderDetailsInput({
 }: ProviderDetailsInputProps) {
   const {
     register,
-    watch,
-    trigger,
     formState: { errors },
+    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
 
@@ -46,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}>
@@ -69,32 +60,19 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.name)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.name?.message}
+          {HookFormService.hasError(errors.name, "required") &&
+            errors.name?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
       <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">
-          {errors.description?.message}
-        </Form.Control.Feedback>
       </Form.Group>
 
       <Form.Group controlId={emailId}>
@@ -117,7 +95,10 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.email)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.email?.message}
+          {HookFormService.hasError(errors.email, "required") &&
+            errors.email?.message}
+          {HookFormService.hasError(errors.email, "pattern") &&
+            errors.email?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -135,7 +116,8 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.phone)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.phone?.message}
+          {HookFormService.hasError(errors.phone, "required") &&
+            errors.phone?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -156,7 +138,8 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.website)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.website?.message}
+          {HookFormService.hasError(errors.website, "pattern") &&
+            errors.website?.message}
         </Form.Control.Feedback>
       </Form.Group>
       {/* If admin has only 1 company - he dont need to set up it */}
@@ -166,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";

package/src/provider/venue-form/VenueForm.stories.tsx

@@ -11,29 +11,6 @@ const categories = Array.from({ length: 6 }, (_, i) => ({
   }),
 }));
 
-const errorResponse = {
-  name: ["The name field is required."],
-  email: ["The email field is required."],
-  phone: ["The phone field is required."],
-  website: ["The website must be a string."],
-  description: ["The description must be a string."],
-  "location.street": ["The location.street must be a string."],
-  "location.city": ["The location.city must be a string."],
-  "location.state": ["The location.state must be a string."],
-  "location.country": [
-    "The location.country must be a string.",
-    "Invalid ISO3166-A2 country code.",
-  ],
-  "categories.0": [
-    "The categories.0 must be an integer.",
-    "The categories.0 must be between 0 and 20 digits.",
-  ],
-  "categories.1": [
-    "The categories.1 must be an integer.",
-    "The categories.1 must be between 0 and 20 digits.",
-  ],
-};
-
 const defaultValues: VenueFormValues = {
   name: "Sample provider",
   description: "Description",
@@ -81,5 +58,4 @@ WithDefaultValues.args = {
   defaultValues,
   categories,
   linkTypes,
-  errorResponse,
 };