@licklist/design 0.44.486-dev.68 → 0.44.486-dev.7

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

@@ -11,7 +11,6 @@ import {
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
-  RELY_ON_PEOPLE_PRODUCT_QUANTITY,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
 import { ProductSetForm, ProductSetFormProps } from "./ProductSetForm";
@@ -23,17 +22,13 @@ export default {
 export const Default: Story<ProductSetFormProps> = (args) => {
   const providerHasMap = boolean("providerHasMap", true);
 
-  return (
-    <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
-  );
+  return <ProductSetForm {...args} providerHasMap={providerHasMap} />;
 };
 
 export const Empty: Story<ProductSetFormProps> = (args) => {
   const providerHasMap = boolean("providerHasMap", true);
 
-  return (
-    <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
-  );
+  return <ProductSetForm {...args} providerHasMap={providerHasMap} />;
 };
 
 export const Valid: Story<ProductSetFormProps> = (args) => {
@@ -79,7 +74,6 @@ Default.args = {
     {
       createdAt: "2023-05-08T15:55:28.000+03:00",
       deletedAt: null,
-      defaultDuration: 30,
       description: "Zone description 2",
       id: 2,
       image: null,
@@ -107,8 +101,8 @@ Default.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
-    relyOnPeopleType: RELY_ON_PEOPLE_PRODUCT_QUANTITY,
     steps: [
       {
         id: 1,
@@ -120,6 +114,7 @@ Default.args = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -188,6 +183,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -206,6 +202,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -291,6 +288,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: null,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -851,6 +849,7 @@ Empty.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_PROVIDER,
     steps: [],
   },
@@ -863,6 +862,7 @@ ServerErrors.args = {
     name: "",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_PROVIDER,
     steps: [],
   },
@@ -876,6 +876,7 @@ Valid.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
     menuRecurrences: [
       {
@@ -896,6 +897,7 @@ Valid.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -1110,6 +1112,7 @@ Valid.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,

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

@@ -11,7 +11,6 @@ import { isEqual } from "lodash";
 // eslint-disable-next-line max-len
 import { ProviderBookingManagementSetting } from "@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper";
 import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
-import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { Dialog, useDialogContext } from "../../modals/dialog";
 import {
   ProductSetControl,
@@ -21,7 +20,7 @@ import {
 import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
-import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
+import { getFilteredTemplates } from "../utils";
 
 export interface WithIsLoading {
   isLoading: boolean;
@@ -50,7 +49,6 @@ export interface ProductSetFormProps
   providerHasBookingManagement?: ProviderBookingManagementSetting["hasBookingManagement"];
   zones?: Zone[] | null;
   isCreateAction?: boolean;
-  workHours?: WorkHour[];
 }
 
 export function ProductSetForm({
@@ -66,7 +64,6 @@ export function ProductSetForm({
   providerHasBookingManagement,
   zones,
   isCreateAction,
-  workHours,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -86,15 +83,6 @@ export function ProductSetForm({
   const { setError, reset } = form;
   const formValues = form.watch();
 
-  const submitHandler = (onSubmit: (values: ProductSetFormValues) => void) => {
-    return (values: ProductSetFormValues) => {
-      if (checkAvailableTimesErrors({ values, setError, t })) {
-        return;
-      }
-      onSubmit(values);
-    };
-  };
-
   useEffect(() => {
     if (!defaultValues || isEqual(defaultValues, formValues)) {
       return;
@@ -139,7 +127,7 @@ export function ProductSetForm({
       />
 
       <FormProvider {...form}>
-        <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
+        <Form onSubmit={form.handleSubmit(onSubmitAndRedirect)}>
           <ProductSetLoadingContext.Consumer>
             {({ isLoading: contextIsLoading }) => {
               return (
@@ -159,8 +147,6 @@ export function ProductSetForm({
                     isLoading={isLoading}
                     isCreateAction={isCreateAction}
                     companyName={companyName}
-                    workHours={workHours}
-                    providerHasBookingManagement={providerHasBookingManagement}
                   />
                   <Row>
                     <Col md={6} sm={12} />
@@ -172,9 +158,7 @@ export function ProductSetForm({
                       {onSubmitNoRedirect && (
                         <Button
                           className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
-                          onClick={form.handleSubmit(
-                            submitHandler(onSubmitNoRedirect)
-                          )}
+                          onClick={form.handleSubmit(onSubmitNoRedirect)}
                           disabled={
                             isLoading || contextIsLoading || !formValues.name
                           }

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

@@ -14,7 +14,6 @@ import { generateUuid } from "@licklist/core/dist/Services";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
 import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { ProductControl, ProductControlProps, ProductSetFormValues } from "..";
 import { SortableTree } from "../../sortable-tree";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -33,7 +32,6 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
-  zones?: Zone[];
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -76,7 +74,6 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
-  zones,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -92,12 +89,6 @@ export function ProductsControl({
     getValues,
   } = form;
 
-  const zoneId = watch(
-    `steps.${stepIndex}.productCategories.${productCategoryIndex}.zoneId`
-  );
-
-  const catergoryZone = zones?.find((zone) => zone.id === Number(zoneId));
-
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
@@ -254,7 +245,6 @@ export function ProductsControl({
                     onProductNameChange={onChange}
                     hasTicket={hasTicket}
                     categoryType={categoryType}
-                    zoneDuration={catergoryZone?.defaultDuration}
                   />
                 }
                 onDelete={() => onProductRemove(index)}

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

@@ -113,7 +113,6 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
-  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -127,7 +126,6 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
-  zoneDuration,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -192,16 +190,6 @@ export function ProductControl<T extends FormValues>({
     [handleImageUploading]
   );
 
-  const onChangeGameCapacity = (value: number) => {
-    if (!zoneDuration) {
-      return;
-    }
-    setValue(
-      `${fieldNamePrefix}.duration` as Path<T>,
-      (value * zoneDuration) as UnpackNestedValue<PathValue<T, Path<T>>>
-    );
-  };
-
   const onImageRemove = useCallback(
     (id, path) => {
       handleImageRemove(String(id), path);
@@ -384,14 +372,6 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
-              rules={{
-                min: {
-                  value: 1,
-                  message: t("Validation:fieldRequired", {
-                    attribute: t("capacity"),
-                  }) as string,
-                },
-              }}
             />
           </Col>
         </Row>
@@ -403,11 +383,7 @@ export function ProductControl<T extends FormValues>({
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
-              onChange={onChangeGameCapacity}
               rules={{
-                required: t("Validation:fieldRequired", {
-                  attribute: t("capacity"),
-                }) as string,
                 min: {
                   value: 1,
                   message: t("Validation:fieldRequired", {
@@ -422,13 +398,10 @@ export function ProductControl<T extends FormValues>({
               fieldName={`${fieldNamePrefix}.duration`}
               label={t("durationMinutes")}
               rules={{
-                required: t("Validation:fieldRequired", {
-                  attribute: t("capacity"),
-                }) as string,
                 min: {
                   value: 1,
                   message: t("Validation:fieldRequired", {
-                    attribute: t("capacity"),
+                    attribute: t("duration"),
                   }) as string,
                 },
               }}

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -66,7 +66,7 @@ export const ProductDurationControl = <T,>({
         },
         min: {
           value: 1,
-          message: t("Validation:fieldMinNumber", {
+          message: t("Validation:fieldMin", {
             attribute: t("duration"),
           }),
         },

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();
@@ -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,15 +1,6 @@
 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[],
@@ -51,32 +42,3 @@ export const getFilteredTemplates = (
       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

@@ -4,6 +4,7 @@ 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 {
@@ -69,7 +70,8 @@ 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>
 
@@ -93,7 +95,8 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.description)}
         />
         <Form.Control.Feedback type="invalid">
-          {errors.description?.message}
+          {HookFormService.hasError(errors.description, "validate") &&
+            errors.description?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -117,7 +120,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 +141,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 +163,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 */}

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,
 };