@licklist/design 0.68.1 → 0.68.2-dev.1

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

@@ -1,60 +1,65 @@
-import { useEffect } from "react";
-import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { Button, Form, Col, Row } from "react-bootstrap";
-import { FormProvider, useForm } from "react-hook-form";
-import { TFunction, useTranslation } from "react-i18next";
-import { VenueMapSet } from "@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper";
-import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
-import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
-
-import { isEqual } from "lodash";
+import { useEffect, useState } from 'react'
+import { FormValues } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { Button, Form, Col, Row } from 'react-bootstrap'
+import { FormProvider, useForm } from 'react-hook-form'
+import { TFunction, useTranslation } from 'react-i18next'
+import { VenueMapSet } from '@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper'
+import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
+import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
+
+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 { 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,
   ProductSetControlShared,
   ProductSetControlValues,
-} from "../control";
-import { Step } from "../types";
-import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
-import { SelectItem } from "../../types/generic/SelectItem";
-import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
+} from '../control'
+import { Step } from '../types'
+import { ProductSetContextProvider, ProductSetLoadingContext } from './context'
+import { SelectItem } from '../../types/generic/SelectItem'
+import { checkAvailableTimesErrors, getFilteredTemplates } from '../utils'
+import { ErrorModal } from '../../iframe/order-process/components/ErrorModal'
 
 export interface WithIsLoading {
-  isLoading: boolean;
+  isLoading: boolean
+}
+export interface WithIdOptional {
+  id?: number
 }
+
 export interface WithId {
-  id: number;
+  id: number
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
-  steps: Step[];
-  isOverrides?: boolean;
+  steps: Step[]
+  isOverrides?: boolean
 }
 
 export interface ProductSetFormProps
   extends WithIsLoading,
     ProductSetControlShared {
-  companyName: string;
-  defaultValues?: ProductSetFormValues;
-  onSubmitAndRedirect: (values: ProductSetFormValues) => void;
-  onSubmitNoRedirect?: (values: ProductSetFormValues) => void;
-  productGroupList?: SelectItem[];
-  serverErrors?: ServerError;
-  providerHasMap?: boolean;
-  venueMapSets?: VenueMapSet[];
-  providerHasBookingManagement?: ProviderBookingManagementSetting["hasBookingManagement"];
-  zones?: Zone[] | null;
-  isCreateAction?: boolean;
-  isOverrides?: boolean;
-  workHours?: WorkHour[];
-  isCreateNewOverrides?: boolean;
-  timeZone: string;
+  companyName: string
+  defaultValues?: ProductSetFormValues
+  onSubmitAndRedirect: (values: ProductSetFormValues) => void
+  onSubmitNoRedirect?: (values: ProductSetFormValues) => void
+  productGroupList?: SelectItem[]
+  serverErrors?: ServerError
+  providerHasMap?: boolean
+  venueMapSets?: VenueMapSet[]
+  providerHasBookingManagement?: ProviderBookingManagementSetting['hasBookingManagement']
+  zones?: Zone[] | null
+  isCreateAction?: boolean
+  isOverrides?: boolean
+  workHours?: WorkHour[]
+  isCreateNewOverrides?: boolean
+  timeZone: string
 }
 
 export function ProductSetForm({
@@ -76,26 +81,28 @@ export function ProductSetForm({
   timeZone,
   ...shared
 }: ProductSetFormProps) {
-  const { t } = useTranslation("Design");
+  const { t } = useTranslation('Design')
   const {
     isShownDialog,
     onBeforeUnload,
     onPopState,
     onApproveDialog,
     onDeclineDialog,
-  } = useDialogContext();
+  } = useDialogContext()
+  const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
-    mode: "onChange",
-  });
+    mode: 'onChange',
+  })
 
-  const { setError, reset } = form;
+  const { setError, reset } = form
 
-  const formValues = form.watch();
+  const formValues = form.watch()
 
-  const submitHandler = (onSubmit: (values: ProductSetFormValues) => void) => {
-    return (values: ProductSetFormValues) => {
+  const submitHandler =
+    (onSubmit: (values: ProductSetFormValues) => void) =>
+    (values: ProductSetFormValues) => {
       if (
         checkAvailableTimesErrors({
           values,
@@ -103,42 +110,44 @@ export function ProductSetForm({
           t: t as TFunction<string>,
         })
       ) {
-        return;
+        return
       }
-      onSubmit(values);
-    };
-  };
+      onSubmit(values)
+    }
 
   useEffect(() => {
     if (!defaultValues || isEqual(defaultValues, formValues)) {
-      return;
+      return
     }
-    reset(defaultValues);
+    reset(defaultValues)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValues]);
+  }, [defaultValues])
 
   useEffect(() => {
     if (!serverErrors) {
-      return;
+      return
     }
-    FormErrorService.handleServerErrors(serverErrors, setError);
-  }, [serverErrors, setError]);
+    if (Array.isArray(serverErrors) && serverErrors[0]) {
+      setErrorMessage(serverErrors[0])
+    }
+    FormErrorService.handleServerErrors(serverErrors, setError)
+  }, [serverErrors, setError])
 
   useEffect(() => {
     window.history.pushState(
       null,
-      "",
-      window.location.pathname + window.location.search
-    );
-    window.addEventListener("beforeunload", onBeforeUnload);
-    window.addEventListener("popstate", onPopState);
+      '',
+      window.location.pathname + window.location.search,
+    )
+    window.addEventListener('beforeunload', onBeforeUnload)
+    window.addEventListener('popstate', onPopState)
 
     return () => {
-      window.removeEventListener("beforeunload", onBeforeUnload);
-      window.removeEventListener("popstate", onPopState);
-    };
+      window.removeEventListener('beforeunload', onBeforeUnload)
+      window.removeEventListener('popstate', onPopState)
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [])
 
   return (
     <ProductSetContextProvider
@@ -150,76 +159,80 @@ export function ProductSetForm({
     >
       <Dialog
         isActive={isShownDialog}
-        title={t("Design:leavePage")}
-        content={t("Design:changesNotBeSaved")}
+        title={t('Design:leavePage')}
+        content={t('Design:changesNotBeSaved')}
         onApprove={onApproveDialog}
         onDecline={onDeclineDialog}
       />
 
+      <ErrorModal
+        message={errorMessage}
+        isOpen={!!errorMessage}
+        onClose={() => setErrorMessage('')}
+      />
+
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>
-            {({ isLoading: contextIsLoading }) => {
-              return (
-                <>
-                  <ProductSetControl
-                    {...shared}
-                    smsTemplates={getFilteredTemplates(
-                      shared?.smsTemplates,
-                      formValues?.smsTemplates,
-                    )}
-                    emailTemplates={getFilteredTemplates(
-                      shared?.emailTemplates,
-                      formValues?.emailTemplates,
-                    )}
-                    showEmailTemplate={!!shared?.emailTemplates}
-                    showSmsTemplate={!!shared?.smsTemplates}
-                    isLoading={isLoading}
-                    isCreateAction={isCreateAction}
-                    companyName={companyName}
-                    workHours={workHours}
-                    providerHasBookingManagement={providerHasBookingManagement}
-                    isOverrides={isOverrides}
-                    isCreateNewOverrides={isCreateNewOverrides}
-                    timeZone={timeZone}
-                  />
-                  <Row>
-                    <Col md={6} sm={12} />
-                    <Col
-                      className="product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100"
-                      md={6}
-                      sm={12}
-                    >
-                      {onSubmitNoRedirect && (
-                        <Button
-                          className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
-                          onClick={form.handleSubmit(
-                            submitHandler(onSubmitNoRedirect),
-                          )}
-                          disabled={
-                            isLoading || contextIsLoading || !formValues.name
-                          }
-                        >
-                          {t("save")}
-                        </Button>
-                      )}
+            {({ isLoading: contextIsLoading }) => (
+              <>
+                <ProductSetControl
+                  {...shared}
+                  smsTemplates={getFilteredTemplates(
+                    shared?.smsTemplates,
+                    formValues?.smsTemplates,
+                  )}
+                  emailTemplates={getFilteredTemplates(
+                    shared?.emailTemplates,
+                    formValues?.emailTemplates,
+                  )}
+                  showEmailTemplate={!!shared?.emailTemplates}
+                  showSmsTemplate={!!shared?.smsTemplates}
+                  isLoading={isLoading}
+                  isCreateAction={isCreateAction}
+                  companyName={companyName}
+                  workHours={workHours}
+                  providerHasBookingManagement={providerHasBookingManagement}
+                  isOverrides={isOverrides}
+                  isCreateNewOverrides={isCreateNewOverrides}
+                  timeZone={timeZone}
+                />
+                <Row>
+                  <Col md={6} sm={12} />
+                  <Col
+                    className="product-set-save-btn-wrapper p-0 pl-4 d-flex mw-100"
+                    md={6}
+                    sm={12}
+                  >
+                    {onSubmitNoRedirect && (
                       <Button
                         className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
-                        type="submit"
+                        onClick={form.handleSubmit(
+                          submitHandler(onSubmitNoRedirect),
+                        )}
                         disabled={
                           isLoading || contextIsLoading || !formValues.name
                         }
                       >
-                        {t("saveAndClose")}
+                        {t('save')}
                       </Button>
-                    </Col>
-                  </Row>
-                </>
-              );
-            }}
+                    )}
+                    <Button
+                      className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
+                      type="submit"
+                      disabled={
+                        isLoading || contextIsLoading || !formValues.name
+                      }
+                    >
+                      {t('saveAndClose')}
+                    </Button>
+                  </Col>
+                </Row>
+              </>
+            )}
           </ProductSetLoadingContext.Consumer>
         </Form>
       </FormProvider>
     </ProductSetContextProvider>
-  );
+  )
 }

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

@@ -1,16 +1,16 @@
-import { useRef, useState } from "react";
-import { useClickAway } from "react-use";
-import { Tabs } from "../../static";
-import { ProductSetPopover } from "../popover";
+import { useRef, useState } from 'react'
+import { useClickAway } from 'react-use'
+import { Tabs } from '../../static'
+import { ProductSetPopover } from '../popover'
 
 interface ProductSetFormPopoverProps {
-  className?: string;
+  className?: string
 }
 
-function ProductSetFormPopover({ className = "" }: ProductSetFormPopoverProps) {
-  const [isVisible, setIsVisible] = useState(false);
-  const popoverRef = useRef<HTMLDivElement>();
-  useClickAway(popoverRef, () => setIsVisible(false));
+function ProductSetFormPopover({ className = '' }: ProductSetFormPopoverProps) {
+  const [isVisible, setIsVisible] = useState(false)
+  const popoverRef = useRef<HTMLDivElement>()
+  useClickAway(popoverRef, () => setIsVisible(false))
 
   return (
     <ProductSetPopover
@@ -31,7 +31,7 @@ function ProductSetFormPopover({ className = "" }: ProductSetFormPopoverProps) {
         </Tabs.Tab>
       </Tabs>
     </ProductSetPopover>
-  );
+  )
 }
 
-export default ProductSetFormPopover;
+export default ProductSetFormPopover

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

@@ -0,0 +1,27 @@
+import { Form } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+export const ProductSetNameControl = ({
+  value,
+  onChange,
+  error,
+}: {
+  value: string
+  onChange: (value: string) => void
+  error?: string
+}) => {
+  const { t } = useTranslation(['Design'])
+  return (
+    <Form.Group>
+      <Form.Label>{t('Design:ProductSetName')}*</Form.Label>
+      <Form.Control
+        value={value}
+        maxLength={255}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t('Design:placeholderProductSetName')}
+        isInvalid={Boolean(error)}
+      />
+      <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
+    </Form.Group>
+  )
+}

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

@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React, { useContext, useState } from "react";
-
+import { useContext, useState } from 'react'
 import {
   ArrayPath,
   Controller,
@@ -9,25 +6,25 @@ import {
   useFieldArray,
   useFormContext,
   useWatch,
-} from "react-hook-form";
-import { Badge } from "react-bootstrap";
-import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { HookFormService } from "@licklist/plugins";
-import { useTranslation } from "react-i18next";
+} from 'react-hook-form'
+import { Badge } from 'react-bootstrap'
+import { CategoryType } from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper'
+import { HookFormService } from '@licklist/plugins'
+import { useTranslation } from 'react-i18next'
 import {
   FieldNamePrefixPath,
   FormValues,
-} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
-import { ProductSetLoadingContext } from "./context";
-import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
-import { ProductZoneControl, ProductZoneControlValues } from "../product-zone";
-import { CreateProductSetItem } from "../item/CreateProductSetItem";
-import { SortableTree } from "../../sortable-tree";
-import { ProductSetModalClasses } from "../../sortable-tree/SortableTreeItem";
+} from '@licklist/plugins/dist/types/services/Form/hook-form-service'
+import { ProductSetLoadingContext } from './context'
+import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
+import { ProductZoneControl, ProductZoneControlValues } from '../product-zone'
+import { CreateProductSetItem } from '../item/CreateProductSetItem'
+import { SortableTree } from '../../sortable-tree'
+import { ProductSetModalClasses } from '../../sortable-tree/SortableTreeItem'
 
 interface ProductZonesControlProps<T> extends FieldNamePrefixPath<T> {
-  isOverrides: boolean;
-  categoryType?: CategoryType;
+  isOverrides: boolean
+  categoryType?: CategoryType
 }
 
 const getDefaultProductZone = (): ProductZoneControlValues => ({
@@ -39,73 +36,73 @@ const getDefaultProductZone = (): ProductZoneControlValues => ({
   offset: null,
   pause: null,
   serviceTime: null,
-});
+})
 
 export const ProductZonesControl = <T extends FormValues>({
   isOverrides,
   fieldNamePrefix,
   categoryType,
 }: ProductZonesControlProps<T>) => {
-  const [showProductZoneModal, setShowProductZoneModal] = useState(false);
-  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+  const [showProductZoneModal, setShowProductZoneModal] = useState(false)
+  const { t } = useTranslation(['Design', 'Validation', 'ProductSet'])
 
   const {
     control,
     formState: { errors },
     trigger,
     clearErrors,
-  } = useFormContext<T>();
+  } = useFormContext<T>()
 
   const productZonesFieldName =
-    `${fieldNamePrefix}.productZones` as ArrayPath<T>;
+    `${fieldNamePrefix}.productZones` as ArrayPath<T>
 
   const { fields, append, remove } = useFieldArray({
     name: productZonesFieldName,
     control,
-    keyName: "_id",
+    keyName: '_id',
     rules: {
-      required: t("Validation:fieldMinNumber", {
-        attribute: t("zones"),
+      required: t('Validation:fieldMinNumber', {
+        attribute: t('zones'),
         min: 1,
       }) as string,
       minLength: 1,
     },
-  });
+  })
 
-  const { zones = [] } = useContext(ProductSetLoadingContext);
+  const { zones = [] } = useContext(ProductSetLoadingContext)
 
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: productZonesFieldName,
     remove,
     isOverrides,
-  });
+  })
 
   const productZonesError = HookFormService.getErrors<T>(
     `${productZonesFieldName}.root` as Path<T>,
-    errors
-  );
+    errors,
+  )
 
   const zoneCapacity = useWatch({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productZonesFieldName}.${index}.capacity` as const
+        (_, index) => `${productZonesFieldName}.${index}.capacity` as const,
       ),
     ],
-  });
+  })
 
   const zoneDuration = useWatch({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productZonesFieldName}.${index}.duration` as const
+        (_, index) => `${productZonesFieldName}.${index}.duration` as const,
       ),
     ],
-  });
+  })
 
   const onZoneSettingRemove = (index: number) => {
-    remove(index);
-  };
+    remove(index)
+  }
 
   return (
     <>
@@ -115,8 +112,8 @@ export const ProductZonesControl = <T extends FormValues>({
           control={control}
           name={`${productZonesFieldName}.${index}.zoneId` as const}
           rules={{
-            required: t("Validation:fieldRequired", {
-              attribute: t("zone"),
+            required: t('Validation:fieldRequired', {
+              attribute: t('zone'),
             }) as string,
           }}
           render={({ field: { value } }) => (
@@ -125,7 +122,7 @@ export const ProductZonesControl = <T extends FormValues>({
               id={String(productZones._id)}
               title={zones.find((zone) => zone.id === Number(value))?.name}
               badge={
-                <Badge className="product-zone-badge">{t("productZone")}</Badge>
+                <Badge className="product-zone-badge">{t('productZone')}</Badge>
               }
               isIconInHeader={false}
               cancelChanges={() => cancelChanges(index)}
@@ -135,12 +132,12 @@ export const ProductZonesControl = <T extends FormValues>({
                   <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
                   <span>
                     {zoneCapacity[index] &&
-                      `${t("Cap")}: ${zoneCapacity[index]}; `}
-                    {`${t("Dur")}: ${zoneDuration[index]}`}
+                      `${t('Cap')}: ${zoneCapacity[index]}; `}
+                    {`${t('Dur')}: ${zoneDuration[index]}`}
                   </span>
                 </div>
               }
-              modalLabel={t("addAZone")}
+              modalLabel={t('addAZone')}
               modalClass={ProductSetModalClasses.productZones}
               isNewAdded={showProductZoneModal}
               shouldExpand={false}
@@ -162,20 +159,20 @@ export const ProductZonesControl = <T extends FormValues>({
         />
       ))}
       <CreateProductSetItem
-        title={t("addZone")}
+        title={t('addZone')}
         onClick={() => {
           // @TODO after updating react hook form fix issue with this type
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-expect-error
-          append(getDefaultProductZone());
-          setShowProductZoneModal(true);
+          append(getDefaultProductZone())
+          setShowProductZoneModal(true)
 
           if (productZonesError) {
-            clearErrors(productZonesFieldName);
+            clearErrors(productZonesFieldName)
           }
         }}
       />
       <div className="manual-form-error">{productZonesError}</div>
     </>
-  );
-};
+  )
+}