@licklist/design 0.58.9 → 0.58.11-dev.0

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

@@ -26,6 +26,7 @@ export interface ProductCategoryControlValues extends FormValues {
   name: string;
   minSubItems: number | null;
   maxSubItems: number | null;
+  overallQuantity?: number | null;
   quantityType: QuantityType;
   type: CategoryType;
   isTimeRelated: boolean;
@@ -49,6 +50,7 @@ export interface ProductCategoryControlProps extends IsDeletableEvent {
   onCategoryNameChange: (args: any) => void;
   stepIndex: number;
   productCategoryIndex: number;
+  isOverride?: boolean;
 }
 
 const categoriesWithTickets = [
@@ -63,6 +65,7 @@ export function ProductCategoryControl({
   onCategoryNameChange,
   productCategoryIndex,
   stepIndex,
+  isOverride = false,
 }: ProductCategoryControlProps) {
   const {
     control,
@@ -100,6 +103,7 @@ export function ProductCategoryControl({
   const collectUserInfoId = useId();
   const hasTicketId = useId();
   const zoneId = useId();
+  const overallCapacityId = useId();
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
@@ -125,7 +129,7 @@ export function ProductCategoryControl({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxSubItems, fieldNamePrefix]);
 
-  const shouldShowZoneSelect =
+  const isZoneCategory =
     category.type === CATEGORY_TYPE_FIXED_DURATION ||
     category.type === CATEGORY_TYPE_GAME;
 
@@ -157,7 +161,7 @@ export function ProductCategoryControl({
               errors
             )}
             placeholder={t("name")}
-            disabled={isLoading}
+            disabled={isLoading || isOverride}
           />
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<ProductSetFormValues>(
@@ -183,7 +187,7 @@ export function ProductCategoryControl({
                   }))}
                   value={field.value}
                   onChange={field.onChange}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverride}
                 />
               </Form.Group>
             )}
@@ -227,7 +231,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                       name={name}
                     />
                   )}
@@ -299,7 +303,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                     />
                   )}
                   control={control}
@@ -326,49 +330,110 @@ export function ProductCategoryControl({
           </Col>
         </Row>
 
-        {shouldShowZoneSelect && (
-          <Row>
-            <Col>
-              <Form.Group controlId={zoneId}>
-                <Form.Label>{t("Design:zone")}</Form.Label>
-                <Controller
-                  control={control}
-                  name={`${fieldNamePrefix}.zoneId`}
-                  render={({ field }) => (
-                    <Form.Control
-                      as="select"
-                      isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                        `${fieldNamePrefix}.zoneId`,
+        {isZoneCategory && (
+          <>
+            <Row>
+              <Col md={6} sm={6} xs={6}>
+                <Form.Group controlId={overallCapacityId}>
+                  <Form.Label>{t("Design:overallQuantity")}</Form.Label>
+                  <InputGroup hasValidation>
+                    <InputGroup.Prepend
+                      className="arrow-up-btn"
+                      onClick={() => {
+                        const currentOverallCapacity = Number(
+                          getValues(`${fieldNamePrefix}.overallQuantity`) || 0
+                        );
+                        setValue(
+                          `${fieldNamePrefix}.overallQuantity`,
+                          currentOverallCapacity + 1,
+                          { shouldValidate: true }
+                        );
+                      }}
+                    >
+                      <InputGroup.Text className="py-0 px-3">
+                        <IncrementIcon />
+                      </InputGroup.Text>
+                    </InputGroup.Prepend>
+                    <Controller
+                      control={control}
+                      name={`${fieldNamePrefix}.overallQuantity`}
+                      render={({ field }) => (
+                        <Form.Control
+                          min={0}
+                          step={1}
+                          type="number"
+                          disabled={isOverride}
+                          isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
+                            `${fieldNamePrefix}.overallQuantity`,
+                            errors
+                          )}
+                          {...field}
+                        />
+                      )}
+                      rules={{
+                        min: {
+                          value: 0,
+                          message: t("Validation:fieldMinNumber", {
+                            attribute: t("overallQuantity"),
+                            min: 0,
+                          }) as string,
+                        },
+                      }}
+                    />
+                    <Form.Control.Feedback type="invalid">
+                      {HookFormService.getErrors<ProductSetFormValues>(
+                        `${fieldNamePrefix}.overallQuantity`,
                         errors
                       )}
-                      {...field}
-                    >
-                      <option value={null}>{t("Design:choose")}</option>
-                      {zones.map((zone) => (
-                        <option key={zone.id} value={zone.id}>
-                          {zone.name}
-                        </option>
-                      ))}
-                    </Form.Control>
-                  )}
-                  rules={{
-                    required: {
-                      value: providerHasBookingManagement,
-                      message: t("Validation:fieldRequired", {
-                        attribute: t("zone"),
-                      }),
-                    },
-                  }}
-                />
-                <Form.Control.Feedback type="invalid">
-                  {HookFormService.getErrors<ProductSetFormValues>(
-                    `${fieldNamePrefix}.zoneId`,
-                    errors
-                  )}
-                </Form.Control.Feedback>
-              </Form.Group>
-            </Col>
-          </Row>
+                    </Form.Control.Feedback>
+                  </InputGroup>
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <Form.Group controlId={zoneId}>
+                  <Form.Label>{t("Design:zone")}</Form.Label>
+                  <Controller
+                    control={control}
+                    name={`${fieldNamePrefix}.zoneId`}
+                    render={({ field }) => (
+                      <Form.Control
+                        as="select"
+                        disabled={isOverride}
+                        isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
+                          `${fieldNamePrefix}.zoneId`,
+                          errors
+                        )}
+                        {...field}
+                      >
+                        <option value={null}>{t("Design:choose")}</option>
+                        {zones.map((zone) => (
+                          <option key={zone.id} value={zone.id}>
+                            {zone.name}
+                          </option>
+                        ))}
+                      </Form.Control>
+                    )}
+                    rules={{
+                      required: {
+                        value: providerHasBookingManagement,
+                        message: t("Validation:fieldRequired", {
+                          attribute: t("zone"),
+                        }),
+                      },
+                    }}
+                  />
+                  <Form.Control.Feedback type="invalid">
+                    {HookFormService.getErrors<ProductSetFormValues>(
+                      `${fieldNamePrefix}.zoneId`,
+                      errors
+                    )}
+                  </Form.Control.Feedback>
+                </Form.Group>
+              </Col>
+            </Row>
+          </>
         )}
       </Col>
 
@@ -384,6 +449,7 @@ export function ProductCategoryControl({
             <Form.Check.Input
               checked={expanded}
               onChange={handleExpand}
+              disabled={isOverride}
               type="checkbox"
             />
             <Form.Check.Label>{t("showAdvancedOptions")}</Form.Check.Label>
@@ -452,7 +518,7 @@ export function ProductCategoryControl({
                         name={name}
                         value={Boolean(value)}
                         onChange={onChange}
-                        disabled={isLoading}
+                        disabled={isLoading || isOverride}
                       />
                     )}
                     control={control}
@@ -476,7 +542,7 @@ export function ProductCategoryControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading}
+                          disabled={isLoading || isOverride}
                         />
                       )}
                       control={control}
@@ -499,7 +565,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={Boolean(value)}
                       onChange={onChange}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                     />
                   )}
                   control={control}
@@ -527,7 +593,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                       name={name}
                     />
                   )}

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

@@ -1,9 +1,7 @@
-import { DateTime } from "luxon";
 import React from "react";
 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";
 
@@ -25,22 +23,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/DatePickerInput.tsx

@@ -0,0 +1,93 @@
+import React, { PropsWithChildren } from "react";
+import { Frequency } from "rrule";
+import { useTranslation } from "react-i18next";
+import Button from "react-bootstrap/Button";
+import { DateTime } from "luxon";
+import { TIME_FULL_FORMAT } from "@licklist/core/dist/Config/Date";
+import { FormProvider, useForm } from "react-hook-form";
+import { Form } from "react-bootstrap";
+import { ConfirmModal } from "../modals";
+import { DeleteFieldButton } from "../product-set/elements";
+import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
+import RecurrenceAndFrequencyInput from "./RecurrenceAndFrequencyInput";
+
+export interface RecurringDatePickerInputProps {
+  disabled?: boolean;
+  defaultValues?: Partial<RecurringDatePickerInputValues>;
+  onChange: (state: RecurringDatePickerInputValues) => void;
+  onDelete: () => void;
+  initialFrequency?: Frequency;
+  setInitialStartDateAfterSelect?: boolean;
+  minDate?: string;
+}
+
+export interface DatePickerInputValues {
+  startDate: string;
+  startTime: string;
+  endTime: string;
+}
+
+export function DatePickerInput({
+  disabled = false,
+  onChange,
+  onDelete,
+  defaultValues,
+  children,
+  minDate,
+}: PropsWithChildren<RecurringDatePickerInputProps>) {
+  const { t } = useTranslation(["Design"]);
+
+  const form = useForm<DatePickerInputValues>({
+    defaultValues: {
+      startDate: defaultValues?.startDate ?? "",
+      startTime: defaultValues?.startTime ?? "",
+      endTime: defaultValues?.endTime ?? "",
+    },
+    mode: "onChange",
+  });
+
+  const { handleSubmit } = form;
+
+  const onSubmit = (nextState: RecurringDatePickerInputValues) => {
+    const endTimeNextState = nextState?.endTime
+      ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
+      : "";
+
+    onChange({
+      ...nextState,
+      endTime: endTimeNextState,
+    });
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        noValidate
+        onSubmit={(event) => {
+          // prevents parent form submitting
+          event.preventDefault();
+          event.stopPropagation();
+          return handleSubmit(onSubmit)(event);
+        }}
+      >
+        <RecurrenceAndFrequencyInput disabled={disabled} minDate={minDate} />
+
+        {children}
+
+        <div className="d-inline-flex align-items-center w-100">
+          <Button type="submit">{t("Design:apply")}</Button>
+
+          {defaultValues && (
+            <div className="d-flex justify-content-end delete-btn">
+              <ConfirmModal>
+                {(confirm) => (
+                  <DeleteFieldButton onDelete={() => confirm(onDelete)} />
+                )}
+              </ConfirmModal>
+            </div>
+          )}
+        </div>
+      </Form>
+    </FormProvider>
+  );
+}

package/src/recurring-date-picker-input/RecurrenceAndFrequencyInput.tsx

@@ -0,0 +1,136 @@
+import React, { useEffect } from "react";
+import { DateTime } from "luxon";
+import { Col, Form, Row } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { RegisterOptions, useFormContext } from "react-hook-form";
+import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
+
+interface RecurrenceIntervalAndFrequencyInputProps {
+  disabled?: boolean;
+  minDate?: string;
+  startDateLabel?: string;
+  startTimeLabel?: string;
+  endDateLabel?: string;
+  endTimeLabel?: string;
+  startTimeRules?: Pick<
+    RegisterOptions,
+    "max" | "min" | "validate" | "required" | "pattern"
+  >;
+  endTimeRules?: Pick<
+    RegisterOptions,
+    "max" | "min" | "validate" | "required" | "pattern"
+  >;
+}
+
+function RecurrenceAndFrequencyInput({
+  disabled = false,
+  minDate,
+  startDateLabel,
+  startTimeLabel,
+  endTimeLabel,
+  startTimeRules,
+  endTimeRules,
+}: RecurrenceIntervalAndFrequencyInputProps) {
+  const { t } = useTranslation(["Design", "Notification", "App"]);
+
+  const {
+    getValues,
+    formState: { errors },
+    register,
+    trigger,
+  } = useFormContext<RecurringDatePickerInputValues>();
+
+  const startDate = getValues("startDate");
+  const startTime = getValues("startTime");
+  const endTime = getValues("endTime");
+
+  useEffect(() => {
+    if (!startTime || !endTime) {
+      return;
+    }
+    trigger("endTime");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startTime]);
+
+  return (
+    <>
+      <Row>
+        <Col xs={12} sm={6}>
+          <Form.Group>
+            <Form.Label>{startDateLabel ?? t("Design:date")}</Form.Label>
+            <Form.Control
+              type="date"
+              {...register("startDate", { required: true })}
+              defaultValue={startDate}
+              className={startDate && "date-input-with-value"}
+              disabled={disabled}
+              min={minDate}
+              isInvalid={Boolean(errors.startDate)}
+            />
+            <Form.Control.Feedback type="invalid">
+              {errors.startDate?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={12} sm={6}>
+          <Form.Group>
+            <Form.Label>
+              {startTimeLabel ?? t("Design:availableFrom")}
+            </Form.Label>
+            <Form.Control
+              type="time"
+              {...register("startTime", { required: false, ...startTimeRules })}
+              placeholder="hh:mm"
+              defaultValue={startTime}
+              disabled={disabled}
+              isInvalid={Boolean(errors.startTime)}
+            />
+            <Form.Control.Feedback type="invalid">
+              {errors.startTime?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Col>
+
+        <Col xs={12} sm={6}>
+          <Form.Group>
+            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
+            <Form.Control
+              type="time"
+              {...register("endTime", {
+                required: false,
+                validate: (time) => {
+                  if (!startTime || !time) {
+                    return true;
+                  }
+                  const currentStartTime = DateTime.fromISO(startTime);
+                  const currentEndTime = DateTime.fromISO(time);
+
+                  return currentEndTime?.diff(currentStartTime, ["minutes"])
+                    ?.minutes >= 0
+                    ? true
+                    : `${t(`Validation:fieldLaterDate`, {
+                        attribute: t("Design:endTimeSmall"),
+                        min: t("Design:startTimeSmall"),
+                      })}`;
+                },
+                ...endTimeRules,
+              })}
+              placeholder="hh:mm"
+              defaultValue={endTime}
+              disabled={disabled}
+              isInvalid={Boolean(errors.endTime)}
+            />
+            <Form.Control.Feedback type="invalid">
+              {errors.endTime?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default RecurrenceAndFrequencyInput;

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

@@ -12,9 +12,14 @@ import {
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
 import { Form } from "react-bootstrap";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
-import { parseAndValidateRRule, SupportedFrequency } from "./utils";
+import {
+  parseAndValidateRRule,
+  SupportedFrequency,
+  useWorkHoursValidationRules,
+} from "./utils";
 import { ConfirmModal } from "../modals";
 import { DeleteFieldButton } from "../product-set/elements";
 
@@ -26,6 +31,7 @@ export interface RecurringDatePickerInputProps {
   initialFrequency?: Frequency;
   setInitialStartDateAfterSelect?: boolean;
   minDate?: string;
+  workHours?: WorkHour[];
 }
 
 export interface RecurringDatePickerInputValues {
@@ -51,6 +57,7 @@ export function RecurringDatePickerInput({
   setInitialStartDateAfterSelect = false,
   children,
   minDate,
+  workHours,
 }: PropsWithChildren<RecurringDatePickerInputProps>) {
   const { t } = useTranslation(["Design"]);
 
@@ -84,6 +91,8 @@ export function RecurringDatePickerInput({
     byWeekDay,
   });
 
+  const validationRules = useWorkHoursValidationRules(byWeekDay, workHours);
+
   const onSubmit = (nextState: RecurringDatePickerInputValues) => {
     const end = getDateTimeObject(endDate, endTime || "23:59:59");
 
@@ -188,6 +197,7 @@ export function RecurringDatePickerInput({
         <RecurrenceIntervalAndFrequencyInput
           disabled={disabled}
           minDate={minDate}
+          {...validationRules}
         />
 
         {children}
@@ -336,7 +346,10 @@ const useFormattedDuration = ({
   }, [start, end, byWeekDay, formatList, formatNumber]);
 };
 
-const getDateTimeObject = (date: string, time: string): DateTime | string => {
+export const getDateTimeObject = (
+  date: string,
+  time: string
+): DateTime | string => {
   const dateTime = DateTime.fromFormat(`${date} ${time}`, DATE_TIME_FORMAT);
 
   if (dateTime.isValid) {

package/src/recurring-date-picker-input/utils.ts

@@ -1,4 +1,8 @@
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { dateTimesSortFn } from "@licklist/plugins/dist/utils/dateTime";
 import { DateTime } from "luxon";
+import { useTranslation } from "react-i18next";
 import RRule, { Frequency, Weekday } from "rrule";
 
 export const getWeekdayForFrequency = ({
@@ -11,6 +15,7 @@ export const getWeekdayForFrequency = ({
   const parsedDate = DateTime.fromISO(date);
   return new Weekday(
     parsedDate.weekday - 1,
+    // eslint-disable-next-line no-nested-ternary
     frequency !== Frequency.MONTHLY
       ? undefined
       : parsedDate.day + 7 > parsedDate.daysInMonth
@@ -109,3 +114,73 @@ export const parseAndValidateRRule = ({
     until: options.until,
   } as ParsedRRuleOptions;
 };
+
+export const useWorkHoursValidationRules = (
+  byWeekDay: Weekday[] = [],
+  workHours: WorkHour[]
+) => {
+  const { t } = useTranslation("Validation");
+  // workhours of selected days, all if no days selected
+  const selectedWorkHours = byWeekDay.length
+    ? byWeekDay.map(({ weekday }) =>
+        workHours.find(({ day }) => day === weekday)
+      )
+    : workHours;
+
+  /**
+   * start time
+   */
+  const startTimes = selectedWorkHours
+    .map((workhour) => DateTime.fromFormat(workhour.start, TIME_FORMAT))
+    .sort(dateTimesSortFn("desc"));
+
+  const latestStartTime = startTimes[0];
+
+  const startTimeRules = {
+    validate: (date: string) => {
+      const selectedDate = DateTime.fromFormat(date, TIME_FORMAT);
+      if (selectedDate >= latestStartTime) return true;
+
+      return t("fieldTimeBefore", {
+        attribute: t("Design:startTimeSmall"),
+        time: latestStartTime.toFormat(TIME_FORMAT),
+      });
+    },
+  };
+
+  /**
+   * end time
+   */
+  const endTimes = selectedWorkHours
+    .map<string>(({ start, end }) => {
+      const startDateTime = DateTime.fromFormat(start, TIME_FORMAT);
+      const endDateTime = DateTime.fromFormat(end, TIME_FORMAT);
+
+      if (startDateTime <= endDateTime) return end;
+
+      // if end is before start, then it means that end is on the next day
+      // so count only to the end of current day
+      return "23:59";
+    })
+    .map((workhour) => DateTime.fromFormat(workhour, TIME_FORMAT))
+    .sort(dateTimesSortFn("asc"));
+
+  const earliestEndTime = endTimes[0];
+
+  const endTimeRules = {
+    validate: (date: string) => {
+      const selectedDate = DateTime.fromFormat(date, TIME_FORMAT);
+      if (selectedDate <= earliestEndTime) return true;
+
+      return t("fieldTimeAfter", {
+        attribute: t("Design:endTimeSmall"),
+        time: earliestEndTime.toFormat(TIME_FORMAT),
+      });
+    },
+  };
+
+  return {
+    startTimeRules,
+    endTimeRules,
+  };
+};