@licklist/design 0.44.486-dev.59 → 0.44.486-dev.6

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

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

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

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

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

@@ -26,6 +26,7 @@ const categoryMock: Partial<ProductCategoryControlValues> = {
   minSubItems: 0,
   maxSubItems: 0,
   quantityType: QUANTITY_TYPE_STANDARD,
+  isRelyOnPeople: false,
   isTimeRelated: false,
   hasTicket: false,
   allowDeposits: false,

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

@@ -28,6 +28,7 @@ export interface ProductCategoryControlValues extends FormValues {
   maxSubItems: number | null;
   quantityType: QuantityType;
   type: CategoryType;
+  isRelyOnPeople: boolean;
   isTimeRelated: boolean;
   collectUserInfo: boolean;
   hasTicket: boolean;
@@ -96,6 +97,7 @@ export function ProductCategoryControl({
   const minSubItemsId = useId();
   const maxSubItemsId = useId();
   const quantityType = useId();
+  const isRelyOnPeopleId = useId();
   const isTimeRelatedId = useId();
   const collectUserInfoId = useId();
   const hasTicketId = useId();
@@ -330,7 +332,7 @@ export function ProductCategoryControl({
           <Row>
             <Col>
               <Form.Group controlId={zoneId}>
-                <Form.Label>{t("Design:zone")}</Form.Label>
+                <Form.Label>Zone</Form.Label>
                 <Controller
                   control={control}
                   name={`${fieldNamePrefix}.zoneId`}
@@ -358,6 +360,12 @@ export function ProductCategoryControl({
                         attribute: t("zone"),
                       }),
                     },
+                    validate: (value) => {
+                      if (value) return true;
+                      return t("Validation:fieldRequired", {
+                        attribute: t("zone"),
+                      }) as string;
+                    },
                   }}
                 />
                 <Form.Control.Feedback type="invalid">
@@ -462,6 +470,27 @@ export function ProductCategoryControl({
               </Form.Group>
             )}
 
+            <Form.Group
+              controlId={isRelyOnPeopleId}
+              className="advanced-switch-container"
+            >
+              <Form.Label>{t("isRelyOnPeople")}</Form.Label>
+
+              <div>
+                <Controller
+                  render={({ field: { name, value, onChange } }) => (
+                    <BooleanSwitch
+                      name={name}
+                      value={Boolean(value)}
+                      onChange={onChange}
+                      disabled={isLoading || category.hasTicket}
+                    />
+                  )}
+                  control={control}
+                  name={`${fieldNamePrefix}.isRelyOnPeople` as const}
+                />
+              </div>
+            </Form.Group>
             {!category.hasTicket && (
               <Form.Group
                 controlId={isTimeRelatedId}

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import { useFormContext } from "react-hook-form";
 import en from "react-phone-number-input/locale/en.json";
 import { LocationInputValues } from ".";
@@ -13,7 +13,7 @@ export function LocationInputDescription() {
     "postcode",
     "country",
   ] as const;
-  const fields = fieldNames.reduce<ReactElement[]>((acc, field) => {
+  const fields = fieldNames.reduce<JSX.Element[]>((acc, field) => {
     const value = values?.[field];
     if (!value) return acc;
 

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -1,19 +1,17 @@
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import { useId } from "@react-aria/utils";
 import { DateTime, DurationUnit } from "luxon";
 import { Col, Form, InputGroup, Row } from "react-bootstrap";
 import RRule from "rrule";
-import { DATE_FORMAT } from "@licklist/core/dist/Config";
-import { useTranslation } from "react-i18next";
+
 import { SupportedFrequency } from "./utils";
 import HTMLInputDateElement from "../types/static/HTMLInputDateElement";
 
 interface Props {
   disabled?: boolean;
-  date: string; // yyyy-mm-ddThh:mm
-  minDate?: string; // should be in yyyy-mm-dd format
+  date: string;
   frequency: SupportedFrequency;
-  until?: string; // yyyy-mm-dd
+  until?: string;
   count?: number;
   onChange: (values: { until?: string; count?: number }) => void;
 }
@@ -25,31 +23,16 @@ function RecurrenceEndInput({
   until,
   count,
   onChange,
-  minDate,
 }: Props) {
-  const { t } = useTranslation("Design");
   // unique ids for radios
   const neverId = useId();
   const onId = useId();
   const afterId = useId();
   const dateInput = useRef<HTMLInputDateElement | null>(null);
 
-  useEffect(() => {
-    const untilDatetime = DateTime.fromFormat(
-      until ?? getUntil({ date, frequency }),
-      DATE_FORMAT
-    );
-
-    const minDatetime = DateTime.fromFormat(minDate, DATE_FORMAT);
-
-    if (minDatetime > untilDatetime) {
-      onChange({ until: minDate });
-    }
-  }, [minDate, onChange, until, date, frequency]);
-
   return (
     <Form.Group>
-      <Form.Label>{t("ends")}</Form.Label>
+      <Form.Label>Ends</Form.Label>
 
       <Form.Check type="radio" id={neverId} custom className="mt-3">
         <Form.Check.Input
@@ -58,7 +41,7 @@ function RecurrenceEndInput({
           onChange={() => onChange({ count: 500 })}
           disabled={disabled}
         />
-        <Form.Check.Label>{t("never")}</Form.Check.Label>
+        <Form.Check.Label>Never</Form.Check.Label>
       </Form.Check>
 
       <Form.Check type="radio" id={onId} custom className="mt-3">
@@ -72,12 +55,11 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>{t("on")}</Form.Check.Label>
+            <Form.Check.Label>On</Form.Check.Label>
           </Col>
           <Col>
             <Form.Control
               type="date"
-              min={minDate}
               disabled={disabled || !until}
               aria-label="Date on which the recurrence ends"
               value={until ?? getUntil({ date, frequency })}
@@ -101,7 +83,7 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>{t("after")}</Form.Check.Label>
+            <Form.Check.Label>After</Form.Check.Label>
           </Col>
           <Col>
             <InputGroup>
@@ -117,7 +99,7 @@ function RecurrenceEndInput({
                 }
               />
               <InputGroup.Append>
-                <InputGroup.Text>{t("occurences")}</InputGroup.Text>
+                <InputGroup.Text>occurrences</InputGroup.Text>
               </InputGroup.Append>
             </InputGroup>
           </Col>
@@ -127,7 +109,7 @@ function RecurrenceEndInput({
   );
 }
 
-export const defaultOccurrences = {
+const defaultOccurrences = {
   [RRule.DAILY]: 30,
   [RRule.WEEKLY]: 13,
   [RRule.MONTHLY]: 12,

package/src/recurrence-input/RecurrenceInput.tsx

@@ -3,7 +3,7 @@
 import { DateTime } from "luxon";
 import React, { useEffect, useReducer } from "react";
 import RRule, { Frequency, Weekday } from "rrule";
-import RecurrenceEndInput, { defaultOccurrences } from "./RecurrenceEndInput";
+import RecurrenceEndInput from "./RecurrenceEndInput";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceMonthlyRepeatByInput from "./RecurrenceMonthlyRepeatByInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
@@ -16,7 +16,6 @@ import {
 export interface RecurrenceInputProps {
   disabled?: boolean;
   date: string;
-  minDate?: string;
   value?: string;
   onChange: (value: string) => void;
   initialFrequency?: Frequency;
@@ -25,7 +24,6 @@ export interface RecurrenceInputProps {
 export function RecurrenceInput({
   disabled = false,
   date,
-  minDate,
   value,
   onChange,
   initialFrequency = Frequency.WEEKLY,
@@ -84,7 +82,6 @@ export function RecurrenceInput({
       )}
       <RecurrenceEndInput
         date={date}
-        minDate={minDate}
         frequency={state.freq}
         until={state.until && DateTime.fromJSDate(state.until).toISODate()}
         count={state.count}
@@ -133,12 +130,5 @@ const getInitialState = ({
     byweekday = options.byweekday[0];
   }
 
-  return {
-    ...options,
-    count:
-      options?.count || options.until
-        ? options.count
-        : defaultOccurrences[options.freq],
-    byweekday,
-  };
+  return { ...options, byweekday };
 };

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

@@ -2,8 +2,8 @@ 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 { DATE_FORMAT } from "@licklist/core/dist/Config";
+import { useFormContext } from "react-hook-form";
+import { DATE_FORMAT, TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
@@ -13,14 +13,6 @@ interface RecurrenceIntervalAndFrequencyInputProps {
   startTimeLabel?: string;
   endDateLabel?: string;
   endTimeLabel?: string;
-  startTimeRules?: Pick<
-    RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
-  endTimeRules?: Pick<
-    RegisterOptions,
-    "max" | "min" | "validate" | "required" | "pattern"
-  >;
 }
 
 function RecurrenceIntervalAndFrequencyInput({
@@ -30,8 +22,6 @@ function RecurrenceIntervalAndFrequencyInput({
   startTimeLabel,
   endDateLabel,
   endTimeLabel,
-  startTimeRules,
-  endTimeRules,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
@@ -40,6 +30,7 @@ function RecurrenceIntervalAndFrequencyInput({
     formState: { errors },
     register,
     trigger,
+    setValue,
   } = useFormContext<RecurringDatePickerInputValues>();
 
   const startDate = getValues("startDate");
@@ -56,9 +47,6 @@ function RecurrenceIntervalAndFrequencyInput({
   }, [startDate]);
 
   useEffect(() => {
-    if (!startTime || !endTime) {
-      return;
-    }
     trigger("endTime");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startTime]);
@@ -130,15 +118,15 @@ function RecurrenceIntervalAndFrequencyInput({
             </Form.Label>
             <Form.Control
               type="time"
-              {...register("startTime", { required: false, ...startTimeRules })}
+              {...register("startTime", { required: false })}
+              onChange={({ target: { value } }) => {
+                setValue("startTime", `${value}:00`);
+              }}
               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>
 
@@ -153,19 +141,28 @@ function RecurrenceIntervalAndFrequencyInput({
                   if (!startTime || !time) {
                     return true;
                   }
-                  const currentStartTime = DateTime.fromISO(startTime);
-                  const currentEndTime = DateTime.fromISO(time);
+                  const currentStartTime = DateTime.fromFormat(
+                    startTime,
+                    TIME_FULL_FORMAT
+                  );
+
+                  const currentEndTime = DateTime.fromFormat(
+                    time,
+                    TIME_FULL_FORMAT
+                  );
 
-                  return currentEndTime?.diff(currentStartTime, ["minutes"])
-                    ?.minutes >= 0
+                  return currentEndTime?.diff(currentStartTime, ["seconds"])
+                    ?.seconds > 0
                     ? true
                     : `${t(`Validation:fieldLaterDate`, {
                         attribute: t("Design:endTimeSmall"),
                         min: t("Design:startTimeSmall"),
                       })}`;
                 },
-                ...endTimeRules,
               })}
+              onChange={({ target: { value } }) => {
+                setValue("endTime", `${value}:59`, { shouldValidate: true });
+              }}
               placeholder="hh:mm"
               defaultValue={endTime}
               disabled={disabled}

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

@@ -7,7 +7,6 @@ import { useIntl } from "react-intl";
 import {
   DATE_TIME_FORMAT,
   DATE_TIME_FULL_FORMAT,
-  TIME_FULL_FORMAT,
 } from "@licklist/core/dist/Config/Date";
 import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
 import { FormProvider, useForm } from "react-hook-form";
@@ -39,7 +38,6 @@ export interface RecurringDatePickerInputValues {
   byweekday?: Weekday[];
   until?: Date;
   count?: number;
-  withOutEndDate?: boolean;
 }
 
 export function RecurringDatePickerInput({
@@ -103,11 +101,6 @@ export function RecurringDatePickerInput({
         })
       : nextState.byweekday;
 
-    const endTimeNextState = nextState?.endTime
-      ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
-      : "";
-    const endDateNextState = nextState?.endDate ?? "";
-
     const rrule = RRule.optionsToString({
       // @TODO: investigate if we need these fields
       // dtstart: getDateTimeObject(startDate, startTime).toJSDate(),
@@ -122,8 +115,6 @@ export function RecurringDatePickerInput({
 
     onChange({
       ...nextState,
-      endDate: endDateNextState,
-      endTime: endTimeNextState,
       rrule,
     });
   };

package/src/report/form/ReportForm.tsx

@@ -15,7 +15,7 @@ export function ReportForm({
   onSubmit,
   onHide,
   hasPermission,
-}: ReportFormProps) {
+}: ReportFormProps): JSX.Element {
   const { t } = useTranslation(["App"]);
   const fromDateInput = useRef<HTMLInputDateElement | null>(null);
   const toDateInput = useRef<HTMLInputDateElement | null>(null);

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -42,6 +42,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 1,
         name: "testEvent1",
@@ -81,6 +82,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 2,
         name: "testEvent2",
@@ -133,6 +135,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -163,6 +166,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -194,6 +198,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -221,6 +226,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -247,6 +253,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",

package/src/sales/booking/results/components/ResultCard.tsx

@@ -3,7 +3,6 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
 import Icon from "../../../../static/Icon";
 
@@ -21,9 +20,7 @@ export const ResultCard = ({
   onCardClick,
 }: ResultCardProps) => {
   const { t } = useTranslation("Design");
-  const { id, people, user, status, startDate, products } = order;
-
-  const productList = products.map((product) => product.name)?.join(", ") || "";
+  const { id, people, user, status, startDate } = order;
 
   const onClick = () => {
     if (!onCardClick) return;
@@ -58,13 +55,10 @@ export const ResultCard = ({
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringForEvent(startDate, false)}
+            {t("date")}: {formatDateStringForEvent(startDate)}
           </p>
           <p>
-            {t("time")}: {DateTime.fromISO(startDate).toFormat(TIME_FORMAT)}
-          </p>
-          <p className="products" title={productList}>
-            {t("products")}: {productList}
+            {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}
           </p>
         </div>
       </div>

package/src/sales/coupon/control/CouponFormControl.tsx

@@ -14,7 +14,6 @@ import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import couponCodeRules from "@licklist/plugins/dist/validation/Rules/couponCodeRules";
 /* TODO: Show Recurrent date, when reccurent date bugs are fixed */
 // import { Frequency } from "rrule";
 // import { RecurrenceInput } from "../../../recurrence-input";
@@ -133,10 +132,6 @@ export const CouponFormControl = ({
                   required: t("Validation:fieldRequired", {
                     attribute: t("Design:code"),
                   }) as string,
-                  pattern: {
-                    message: `${t("Validation:fieldCouponCode")}`,
-                    value: couponCodeRules,
-                  },
                 })}
                 disabled={isLoading}
               />

package/src/sales/guest-profile/previous-bookings/PreviousBookings.stories.tsx

@@ -58,6 +58,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 1,
       event: {
@@ -95,6 +96,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 2,
       event: {
@@ -145,6 +147,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {
@@ -174,6 +177,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {
@@ -203,6 +207,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {
@@ -232,6 +237,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {
@@ -260,6 +266,7 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
+      tickets: [],
       orderableType: "event",
       orderableId: 3,
       event: {