@licklist/design 0.67.2 → 0.67.3-dev.0

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

@@ -8,6 +8,7 @@ import {
   useFormContext,
   useWatch,
 } from "react-hook-form";
+import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from "react-icons/fa";
 import { useTranslation } from "react-i18next";
 import { useSensor, MouseSensor } from "@dnd-kit/core";
 import {
@@ -25,7 +26,11 @@ import { ProductCategoryControl } from "../product-category";
 import { ProductCategory } from "../types";
 import { ProductsControl } from "./ProductsControl";
 import { ProductSetFormValues, WithIsLoading } from "./ProductSetForm";
-import { SelectCategoryModal } from "./SelectCategoryModal";
+import {
+  SelectCategoryModal,
+  CATEGORY_TYPES_NAMES,
+  CategoryConfig,
+} from "./SelectCategoryModal";
 import { ProductSetLoadingContext } from "./context";
 import { VenueMapSetModal } from "./VenueMapSetModal";
 import { moveArrayElements, sortArrayByIndex } from "../utils";
@@ -33,6 +38,29 @@ import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
+const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
+  [CATEGORY_TYPES_NAMES.tickets]: {
+    label: "tickets",
+    icon: <FaTicketAlt color="#0e8ce2" size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.bookings]: {
+    label: "bookings",
+    icon: <FaCalendar color="#0e8ce2" size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.menuItems]: {
+    label: "menuItems",
+    icon: <FaBars color="#0e8ce2" size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.game]: {
+    label: "game",
+    icon: <FaBowlingBall color="#0e8ce2" size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.fixedDuration]: {
+    label: "fixedDuration",
+    icon: <FaCalendar color="#0e8ce2" size={10} />,
+  },
+};
+
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number;
   isOverrides?: boolean;
@@ -228,6 +256,8 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId);
           };
 
+          const categoryType = CATEGORIES_TYPE[productCategory.type];
+
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -272,6 +302,12 @@ export function ProductCategoriesControl({
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
+                  itemButton={
+                    <div className="btn-outline-primary item-icon sm border border-primary rounded-sm">
+                      {categoryType.icon}
+                      <span className="ml-2">{t(categoryType.label)}</span>
+                    </div>
+                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}

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

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+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";
@@ -22,16 +22,21 @@ 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;
 }
+export interface WithIdOptional {
+  id?: number;
+}
+
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;
@@ -82,6 +87,7 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext();
+  const [errorMessage, setErrorMessage] = useState("");
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -119,11 +125,18 @@ export function ProductSetForm({
     if (!serverErrors) {
       return;
     }
+    if (Array.isArray(serverErrors) && serverErrors[0]) {
+      setErrorMessage(serverErrors[0]);
+    }
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);
 
   useEffect(() => {
-    window.history.pushState(null, "", window.location.pathname);
+    window.history.pushState(
+      null,
+      "",
+      window.location.pathname + window.location.search,
+    );
     window.addEventListener("beforeunload", onBeforeUnload);
     window.addEventListener("popstate", onPopState);
 
@@ -150,6 +163,12 @@ export function ProductSetForm({
         onDecline={onDeclineDialog}
       />
 
+      <ErrorModal
+        message={errorMessage}
+        isOpen={!!errorMessage}
+        onClose={() => setErrorMessage("")}
+      />
+
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>

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,
@@ -82,14 +79,14 @@ export const ProductZonesControl = <T extends FormValues>({
 
   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,
       ),
     ],
   });
@@ -98,7 +95,7 @@ export const ProductZonesControl = <T extends FormValues>({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productZonesFieldName}.${index}.duration` as const
+        (_, index) => `${productZonesFieldName}.${index}.duration` as const,
       ),
     ],
   });

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

@@ -29,7 +29,7 @@ Default.args = {
 };
 
 export const WithBookingManagement: Story<SelectCategoryModalProps> = (
-  args,
+  args
 ) => (
   <ProductSetLoadingContext.Provider value={contextValue}>
     <SelectCategoryModal {...args} />

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

@@ -25,7 +25,7 @@ import {
 } from "react-icons/fa";
 import { ProductSetLoadingContext } from "./context";
 
-const CATEGORY_TYPES_NAMES = {
+export const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,7 +33,7 @@ const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const;
 
-type CategoryConfig = { label: string; icon: ReactElement };
+export type CategoryConfig = { label: string; icon: ReactElement };
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {

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

@@ -71,9 +71,6 @@ export function SubProductsControl({
                     images: subProducts[index]?.images as Image[],
                   };
                   // @ts-expect-error TS2345
-                  // @TODO fix prod type error
-                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                  // @ts-ignore
                   append(subProductCopy);
                 }}
               />

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

@@ -47,9 +47,6 @@ export const VenueMapsControl = ({
                               url={image.url}
                               name={name}
                               points={points}
-                              // @TODO fix prod type error
-                              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                              // @ts-ignore
                               products={products}
                               pointProducts={pointProducts}
                               onPointProductsChange={onPointProductsChange}

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { Col, Form } from "react-bootstrap";
 import { Controller, Path, useFormContext } from "react-hook-form";
 import { HookFormService } from "@licklist/plugins";
@@ -98,7 +98,7 @@ export const AdvancedOptions = <T extends FormValues>({
           {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
           isInvalid={HookFormService.isInvalid<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
-            errors
+            errors,
           )}
           disabled={isLoading || isOverrides}
           defaultValue=""
@@ -115,7 +115,7 @@ export const AdvancedOptions = <T extends FormValues>({
         <Form.Control.Feedback type="invalid">
           {HookFormService.getErrors<T>(
             `${fieldNamePrefix}.productGroupId` as Path<T>,
-            errors
+            errors,
           )}
         </Form.Control.Feedback>
       </Form.Group>
@@ -134,7 +134,7 @@ export const AdvancedOptions = <T extends FormValues>({
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
                   `${fieldNamePrefix}.termsAndConditions` as Path<T>,
-                  errors
+                  errors,
                 )}
                 disabled={isLoading || isOverrides}
                 name={name}
@@ -147,7 +147,7 @@ export const AdvancedOptions = <T extends FormValues>({
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.termsAndConditions` as Path<T>,
-              errors
+              errors,
             )}
           </Form.Control.Feedback>
         </Form.Group>

package/src/product-set/product/booking-management/ProductBookingManagement.stories.tsx

@@ -12,7 +12,7 @@ export default {
 } as Meta;
 
 export const Default: Story<ProductBookingManagementControlProps<{}>> = (
-  args,
+  args
 ) => {
   const form = useForm<ProductBookingManagementControlValues>({
     mode: "onChange",

package/src/product-set/product/quantity/ProductQuantity.stories.tsx

@@ -42,7 +42,7 @@ export const Default: Story<ProductQuantityControlProps<{}>> = (args) => {
 };
 
 export const ConstantForm: Story<ProductQuantityConstantControlProps<{}>> = (
-  args,
+  args
 ) => {
   const form = useForm<ProductQuantityConstantControlValues>({
     mode: "onChange",

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import { Col, Form, Row } from "react-bootstrap";
 import {
   ArrayPath,
@@ -63,7 +63,7 @@ export const ProductZoneControl = <T extends FormValues>({
   const disabledDuration = capacity === "0" || !capacity;
 
   const { providerHasBookingManagement, zones = [] } = useContext(
-    ProductSetLoadingContext
+    ProductSetLoadingContext,
   );
 
   const currentZoneData = zones.find((zone) => zone.id === Number(zoneId));
@@ -75,10 +75,10 @@ export const ProductZoneControl = <T extends FormValues>({
           !productZones.find(
             (productZone) =>
               Number(productZone.zoneId) === zone.id &&
-              productZone.zoneId !== zoneId
-          )
+              productZone.zoneId !== zoneId,
+          ),
       ),
-    [zones, productZones, zoneId]
+    [zones, productZones, zoneId],
   );
 
   useEffect(() => {
@@ -89,7 +89,7 @@ export const ProductZoneControl = <T extends FormValues>({
     setValue(
       `${fieldNamePrefix}.duration` as Path<T>,
       /* @ts-expect-error 6385 */
-      0 as UnpackNestedValue<PathValue<T, Path<T>>>
+      0 as UnpackNestedValue<PathValue<T, Path<T>>>,
     );
     clearErrors(`${fieldNamePrefix}.duration` as Path<T>);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -104,7 +104,7 @@ export const ProductZoneControl = <T extends FormValues>({
       /* @ts-expect-error 6385 */
       (value * currentZoneData?.defaultDuration) as UnpackNestedValue<
         PathValue<T, Path<T>>
-      >
+      >,
     );
   };
   return (
@@ -123,7 +123,7 @@ export const ProductZoneControl = <T extends FormValues>({
                     disabled={isOverrides}
                     isInvalid={HookFormService.isInvalid(
                       `${fieldNamePrefix}.zoneId`,
-                      errors
+                      errors,
                     )}
                     {...field}
                   >
@@ -147,7 +147,7 @@ export const ProductZoneControl = <T extends FormValues>({
               <Form.Control.Feedback type="invalid">
                 {HookFormService.getErrors(
                   `${fieldNamePrefix}.zoneId` as Path<T>,
-                  errors
+                  errors,
                 )}
               </Form.Control.Feedback>
             </Form.Group>

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

@@ -2,17 +2,21 @@ import { useId } from "@react-aria/utils";
 import { Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { TimeZonePath, useTimeZoneApi } from "@licklist/plugins";
+import { BlockLoader } from "src/static";
 import CountryCodeSelect from "../../static/CountryCodeSelect";
 import { LocationInputValues } from ".";
 import { FormGroupControll } from "./components";
 
-export function LocationInput() {
+export function LocationInput({ path }: { path: TimeZonePath }) {
   const {
     register,
     formState: { errors },
   } = useFormContext<LocationInputValues>();
   const { t } = useTranslation("Design");
 
+  const { data, isLoading } = useTimeZoneApi(path).useAll();
+
   const countryId = useId();
 
   return (
@@ -39,6 +43,7 @@ export function LocationInput() {
         name="location.postcode"
         label={t("locationPostcode")}
       />
+
       <Form.Group controlId={countryId}>
         <Form.Label>{t("locationCountry")}</Form.Label>
         <CountryCodeSelect
@@ -47,6 +52,36 @@ export function LocationInput() {
           error={errors?.location?.country?.message}
         />
       </Form.Group>
+
+      {isLoading ? (
+        <BlockLoader />
+      ) : (
+        <Form.Group controlId="timeZoneId">
+          <Form.Label>{t("locationTimeZone")}</Form.Label>
+          <Form.Control
+            {...register("timeZoneId", {
+              required: t("Validation:fieldRequired", {
+                attribute: t("locationTimeZone"),
+              }) as string,
+            })}
+            as="select"
+            custom
+            isInvalid={Boolean(errors?.timeZoneId?.message)}
+          >
+            <option key="" value="" disabled>
+              {t("chooseTimeZone")}
+            </option>
+            {data.map((zone) => (
+              <option key={zone.id} value={zone.id.toString()}>
+                {zone.name}
+              </option>
+            ))}
+          </Form.Control>
+          <Form.Control.Feedback type="invalid">
+            {errors?.timeZoneId?.message}
+          </Form.Control.Feedback>
+        </Form.Group>
+      )}
     </>
   );
 }

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

@@ -1,20 +1,19 @@
 import { ReactElement } from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
+import { TimeZonePath, useTimeZoneApi } from "@licklist/plugins";
 import { LocationInputValues } from ".";
 
-export function LocationInputDescription() {
+const fieldNames = ["street", "city", "state", "postcode", "country"] as const;
+
+export function LocationInputDescription({ path }: { path: TimeZonePath }) {
   const { watch } = useFormContext<LocationInputValues>();
-  const values = watch("location");
-  const fieldNames = [
-    "street",
-    "city",
-    "state",
-    "postcode",
-    "country",
-  ] as const;
+  const location = watch("location");
+
+  const { data } = useTimeZoneApi(path).useAll();
+
   const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
-    const value = values?.[field];
+    const value = location?.[field];
     if (!value) return acc;
 
     return [
@@ -22,5 +21,18 @@ export function LocationInputDescription() {
       <div key={field}>{field === "country" ? en[value] : value}</div>,
     ];
   }, []);
-  return <div>{fields}</div>;
+
+  const timeZoneId = watch("timeZoneId");
+  const timeZoneName = data?.find(
+    (timeZone) => timeZone.id === +timeZoneId,
+  )?.name;
+
+  return (
+    <div>
+      <>
+        {fields}
+        {timeZoneName && <div key="timeZone">{timeZoneName}</div>}
+      </>
+    </div>
+  );
 }

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

@@ -11,4 +11,5 @@ export type LocationInputValues = {
     latitude: string;
     longitude: string;
   };
+  timeZoneId: string;
 };

package/src/provider/provider-form/ProviderForm.tsx

@@ -10,6 +10,7 @@ import {
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import { useMultipleImages } from "@licklist/plugins/dist/hooks/Media/useMultipleImages";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import { TimeZonePath } from "@licklist/plugins";
 import { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -41,6 +42,7 @@ export interface ProviderFormProps extends HasPermissionProp {
   companiesOptions?: TypeaheadOptions[];
   onSubmit: (values: ProviderFormValues) => void;
   intent?: "create" | "update";
+  path: TimeZonePath;
 }
 
 const providerImageTypes = {
@@ -56,14 +58,17 @@ export function ProviderForm({
   onSubmit,
   intent = "update",
   hasPermission = true,
+  path,
 }: ProviderFormProps) {
   const form = useForm<ProviderFormValues>({ defaultValues });
+
   const {
     setValue,
     handleSubmit,
     formState: { isSubmitting, errors },
     getValues,
   } = form;
+
   const { t } = useTranslation("Design");
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
 
@@ -101,10 +106,10 @@ export function ProviderForm({
           <CollapsibleInputGroup
             eventKey="location"
             label={t("location")}
-            description={<LocationInputDescription />}
+            description={<LocationInputDescription path={path} />}
             error={errors?.location?.country?.message}
           >
-            <LocationInput />
+            <LocationInput path={path} />
           </CollapsibleInputGroup>
           {categories && categories.length > 0 && (
             <CollapsibleInputGroup

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

@@ -11,6 +11,7 @@ import {
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useMultipleImages } from "@licklist/plugins/dist/hooks/Media/useMultipleImages";
 import { parseServerErrorForFormValidation } from "@licklist/plugins/dist/utils/parseError";
+import { TimeZonePath } from "@licklist/plugins";
 import { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -50,6 +51,7 @@ export interface VenueFormProps extends HasPermissionProp {
   intent?: "create" | "update";
   isLoading?: boolean;
   errorResponse?: unknown;
+  path: TimeZonePath;
 }
 
 const providerImageTypes = {
@@ -67,6 +69,7 @@ export function VenueForm({
   hasPermission = true,
   isLoading,
   errorResponse,
+  path,
 }: VenueFormProps) {
   const form = useForm<VenueFormValues>({ defaultValues, mode: "onChange" });
   const {
@@ -134,7 +137,7 @@ export function VenueForm({
           <CollapsibleInputGroup
             eventKey="location"
             label={t("location")}
-            description={<LocationInputDescription />}
+            description={<LocationInputDescription path={path} />}
             error={
               errors?.location?.message ||
               (errors?.location &&
@@ -143,7 +146,7 @@ export function VenueForm({
                 }))
             }
           >
-            <LocationInput />
+            <LocationInput path={path} />
           </CollapsibleInputGroup>
           <CollapsibleInputGroup
             eventKey="workingHours"

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -1,8 +1,6 @@
-import { DateTime } from "luxon";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -24,22 +22,10 @@ export function WorkingHoursInputDescription() {
             <Row key={i}>
               <Col xs="auto">{weekdays[i]}:</Col>
               <Col>
-                {weekday?.end
-                  ? weekday.start
-                    ? t("timeInterval", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT,
-                        ),
-                        end: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT,
-                        ),
-                      })
-                    : t("timeFrom", {
-                        start: DateTime.fromISO(weekday.start).toFormat(
-                          TIME_FORMAT,
-                        ),
-                      })
-                  : null}
+                {t("timeInterval", {
+                  start: weekday.start,
+                  end: weekday.end,
+                })}
               </Col>
             </Row>
           );

package/src/recurring-date-picker-input/RecurringDatePickerInput.stories.tsx

@@ -12,9 +12,7 @@ export default {
   component: RecurringDatePickerInput,
 } as Meta;
 
-type DefaultRecurringDatePickerInputProps = RecurringDatePickerInputProps;
-
-export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Default: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -23,7 +21,7 @@ export const Default: Story<DefaultRecurringDatePickerInputProps> = (args) => {
     </Card>
   );
 };
-export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
+export const Valid: Story<RecurringDatePickerInputProps> = (args) => {
   return (
     <Card style={{ maxWidth: "max-content" }}>
       <Card.Body>
@@ -34,6 +32,15 @@ export const Valid: Story<DefaultRecurringDatePickerInputProps> = (args) => {
 };
 Default.args = {
   onChange: (data) => console.log("onSubmit", data),
+  workHours: [
+    { start: "20:00", end: "04:00", day: 0, description: "" },
+    { start: "20:00", end: "04:00", day: 1, description: "" },
+    { start: "20:00", end: "04:00", day: 2, description: "" },
+    { start: "20:00", end: "12:00", day: 3, description: "" },
+    { start: "20:00", end: "23:00", day: 4, description: "" },
+    { start: "08:00", end: "12:00", day: 5, description: "" },
+    { start: "10:00", end: "16:00", day: 6, description: "" },
+  ],
 };
 Valid.args = {
   onChange: (data) => console.log("onSubmit", data),