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

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

@@ -48,7 +48,6 @@ const getCategoryDefaultValue = (
   maxSubItems: null,
   quantityType: QUANTITY_TYPE_STANDARD,
   type: categoryType,
-  isRelyOnPeople: categoryType === CATEGORY_TYPE_TICKETS,
   isTimeRelated: false,
   collectUserInfo: false,
   hasTicket: categoryType === CATEGORY_TYPE_TICKETS,
@@ -72,6 +71,7 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
+    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -287,6 +287,7 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
+                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                   />

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

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

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

@@ -11,6 +11,7 @@ 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,
@@ -20,7 +21,7 @@ import {
 import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
-import { getFilteredTemplates } from "../utils";
+import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 
 export interface WithIsLoading {
   isLoading: boolean;
@@ -49,6 +50,7 @@ export interface ProductSetFormProps
   providerHasBookingManagement?: ProviderBookingManagementSetting["hasBookingManagement"];
   zones?: Zone[] | null;
   isCreateAction?: boolean;
+  workHours?: WorkHour[];
 }
 
 export function ProductSetForm({
@@ -64,6 +66,7 @@ export function ProductSetForm({
   providerHasBookingManagement,
   zones,
   isCreateAction,
+  workHours,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -83,6 +86,15 @@ 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;
@@ -127,7 +139,7 @@ export function ProductSetForm({
       />
 
       <FormProvider {...form}>
-        <Form onSubmit={form.handleSubmit(onSubmitAndRedirect)}>
+        <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>
             {({ isLoading: contextIsLoading }) => {
               return (
@@ -147,6 +159,8 @@ export function ProductSetForm({
                     isLoading={isLoading}
                     isCreateAction={isCreateAction}
                     companyName={companyName}
+                    workHours={workHours}
+                    providerHasBookingManagement={providerHasBookingManagement}
                   />
                   <Row>
                     <Col md={6} sm={12} />
@@ -158,7 +172,9 @@ export function ProductSetForm({
                       {onSubmitNoRedirect && (
                         <Button
                           className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
-                          onClick={form.handleSubmit(onSubmitNoRedirect)}
+                          onClick={form.handleSubmit(
+                            submitHandler(onSubmitNoRedirect)
+                          )}
                           disabled={
                             isLoading || contextIsLoading || !formValues.name
                           }

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

@@ -14,6 +14,7 @@ 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";
@@ -32,6 +33,7 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
+  zones?: Zone[];
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -74,6 +76,7 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
+  zones,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -89,6 +92,12 @@ 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;
 
@@ -245,6 +254,7 @@ export function ProductsControl({
                     onProductNameChange={onChange}
                     hasTicket={hasTicket}
                     categoryType={categoryType}
+                    zoneDuration={catergoryZone?.defaultDuration}
                   />
                 }
                 onDelete={() => onProductRemove(index)}

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

@@ -113,6 +113,7 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
+  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -126,6 +127,7 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
+  zoneDuration,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -190,6 +192,16 @@ 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);
@@ -372,6 +384,14 @@ 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>
@@ -383,7 +403,11 @@ 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", {
@@ -398,10 +422,13 @@ 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("duration"),
+                    attribute: t("capacity"),
                   }) as string,
                 },
               }}

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

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

package/src/product-set/product-category/ProductCategory.stories.tsx

@@ -26,7 +26,6 @@ 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,7 +28,6 @@ export interface ProductCategoryControlValues extends FormValues {
   maxSubItems: number | null;
   quantityType: QuantityType;
   type: CategoryType;
-  isRelyOnPeople: boolean;
   isTimeRelated: boolean;
   collectUserInfo: boolean;
   hasTicket: boolean;
@@ -97,7 +96,6 @@ export function ProductCategoryControl({
   const minSubItemsId = useId();
   const maxSubItemsId = useId();
   const quantityType = useId();
-  const isRelyOnPeopleId = useId();
   const isTimeRelatedId = useId();
   const collectUserInfoId = useId();
   const hasTicketId = useId();
@@ -332,7 +330,7 @@ export function ProductCategoryControl({
           <Row>
             <Col>
               <Form.Group controlId={zoneId}>
-                <Form.Label>Zone</Form.Label>
+                <Form.Label>{t("Design:zone")}</Form.Label>
                 <Controller
                   control={control}
                   name={`${fieldNamePrefix}.zoneId`}
@@ -360,12 +358,6 @@ 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">
@@ -470,27 +462,6 @@ 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,6 +1,15 @@
 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[],
@@ -42,3 +51,32 @@ 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,6 +5,7 @@ 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 {
@@ -13,32 +14,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" />
-      <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>
+      <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={countryId}>
         <Form.Label>{t("locationCountry")}</Form.Label>
         <CountryCodeSelect

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } 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<JSX.Element[]>((acc, field) => {
+  const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
     const value = values?.[field];
     if (!value) return acc;
 

package/src/provider/location-input/components/FormGroupControll.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Form } from "react-bootstrap";
+import { useFormContext } from "react-hook-form";
+
+export const FormGroupControll = ({ name, label, error }) => {
+  const { register } = useFormContext();
+  return (
+    <Form.Group>
+      <Form.Label>{label}</Form.Label>
+      <Form.Control {...register(name)} isInvalid={!!error} />
+      <Form.Control.Feedback type="invalid">
+        {error?.message}
+      </Form.Control.Feedback>
+    </Form.Group>
+  );
+};

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

@@ -0,0 +1 @@
+export * from "./FormGroupControll";

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,7 +4,6 @@ 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 {
@@ -70,8 +69,7 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.name)}
         />
         <Form.Control.Feedback type="invalid">
-          {HookFormService.hasError(errors.name, "required") &&
-            errors.name?.message}
+          {errors.name?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -95,8 +93,7 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.description)}
         />
         <Form.Control.Feedback type="invalid">
-          {HookFormService.hasError(errors.description, "validate") &&
-            errors.description?.message}
+          {errors.description?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -120,10 +117,7 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.email)}
         />
         <Form.Control.Feedback type="invalid">
-          {HookFormService.hasError(errors.email, "required") &&
-            errors.email?.message}
-          {HookFormService.hasError(errors.email, "pattern") &&
-            errors.email?.message}
+          {errors.email?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -141,8 +135,7 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.phone)}
         />
         <Form.Control.Feedback type="invalid">
-          {HookFormService.hasError(errors.phone, "required") &&
-            errors.phone?.message}
+          {errors.phone?.message}
         </Form.Control.Feedback>
       </Form.Group>
 
@@ -163,8 +156,7 @@ export function ProviderDetailsInput({
           isInvalid={Boolean(errors.website)}
         />
         <Form.Control.Feedback type="invalid">
-          {HookFormService.hasError(errors.website, "pattern") &&
-            errors.website?.message}
+          {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,6 +11,29 @@ 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",
@@ -58,4 +81,5 @@ WithDefaultValues.args = {
   defaultValues,
   categories,
   linkTypes,
+  errorResponse,
 };