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

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

@@ -10,6 +10,7 @@ import {
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 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 { CollapsibleInputGroup } from "../../collapsible-input-group";
 import {
   CategoriesInput,
@@ -47,6 +48,8 @@ export interface VenueFormProps extends HasPermissionProp {
   companiesOptions?: TypeaheadOptions[];
   onSubmit: (values: VenueFormValues) => void;
   intent?: "create" | "update";
+  isLoading?: boolean;
+  errorResponse?: unknown;
 }
 
 const providerImageTypes = {
@@ -62,6 +65,8 @@ export function VenueForm({
   onSubmit,
   intent = "update",
   hasPermission = true,
+  isLoading,
+  errorResponse,
 }: VenueFormProps) {
   const form = useForm<VenueFormValues>({ defaultValues, mode: "onChange" });
   const {
@@ -69,6 +74,7 @@ export function VenueForm({
     handleSubmit,
     formState: { isSubmitting, errors },
     getValues,
+    setError,
   } = form;
   const { t } = useTranslation("Design");
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
@@ -92,6 +98,27 @@ export function VenueForm({
     }
   }, [images, setValue]);
 
+  useEffect(() => {
+    if (!errorResponse) {
+      return;
+    }
+    const errorEntriesArray = parseServerErrorForFormValidation({
+      values: getValues(),
+      error: errorResponse,
+    });
+    if (!errorEntriesArray.length) {
+      return;
+    }
+    errorEntriesArray.forEach((errorEntriesArray) => {
+      const [key, value] = errorEntriesArray;
+      setError(key as keyof VenueFormValues, {
+        message: value,
+        type: "validate",
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errorResponse]);
+
   return (
     <FormProvider {...form}>
       <Form
@@ -108,7 +135,13 @@ export function VenueForm({
             eventKey="location"
             label={t("location")}
             description={<LocationInputDescription />}
-            error={errors?.location?.country?.message}
+            error={
+              errors?.location?.message ||
+              (errors?.location &&
+                t("Validation:isNotValidField", {
+                  attribute: "The location data",
+                }))
+            }
           >
             <LocationInput />
           </CollapsibleInputGroup>
@@ -116,7 +149,13 @@ export function VenueForm({
             eventKey="workingHours"
             label={t("workingHours")}
             description={<WorkingHoursInputDescription />}
-            error={errors.workingHours?.message}
+            error={
+              errors?.workingHours?.message ||
+              (errors?.workingHours &&
+                t("Validation:isNotValidField", {
+                  attribute: "The Working hours data",
+                }))
+            }
           >
             <WorkingHoursInput />
           </CollapsibleInputGroup>
@@ -124,6 +163,13 @@ export function VenueForm({
             <CollapsibleInputGroup
               eventKey="categories"
               label={t("categories")}
+              error={
+                errors?.categories?.message ||
+                (errors?.categories &&
+                  t("Validation:isNotValidField", {
+                    attribute: "The Categories data",
+                  }))
+              }
               description={
                 <CategoriesInputDescription categories={categories} />
               }
@@ -161,10 +207,15 @@ export function VenueForm({
         {hasPermission && (
           <Button
             type="submit"
-            disabled={isSubmitting || isImagesLoading || isCoverImagesLoading}
+            disabled={
+              isLoading ||
+              isSubmitting ||
+              isImagesLoading ||
+              isCoverImagesLoading
+            }
             className="d-flex align-items-center align-self-end"
           >
-            {isSubmitting && (
+            {(isSubmitting || isLoading) && (
               <Spinner
                 animation="border"
                 size="sm"

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -1,17 +1,19 @@
-import React, { useRef } from "react";
+import React, { useEffect, 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;
+  date: string; // yyyy-mm-ddThh:mm
+  minDate?: string; // should be in yyyy-mm-dd format
   frequency: SupportedFrequency;
-  until?: string;
+  until?: string; // yyyy-mm-dd
   count?: number;
   onChange: (values: { until?: string; count?: number }) => void;
 }
@@ -23,16 +25,31 @@ 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>Ends</Form.Label>
+      <Form.Label>{t("ends")}</Form.Label>
 
       <Form.Check type="radio" id={neverId} custom className="mt-3">
         <Form.Check.Input
@@ -41,7 +58,7 @@ function RecurrenceEndInput({
           onChange={() => onChange({ count: 500 })}
           disabled={disabled}
         />
-        <Form.Check.Label>Never</Form.Check.Label>
+        <Form.Check.Label>{t("never")}</Form.Check.Label>
       </Form.Check>
 
       <Form.Check type="radio" id={onId} custom className="mt-3">
@@ -55,11 +72,12 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>On</Form.Check.Label>
+            <Form.Check.Label>{t("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 })}
@@ -83,7 +101,7 @@ function RecurrenceEndInput({
               }
               disabled={disabled}
             />
-            <Form.Check.Label>After</Form.Check.Label>
+            <Form.Check.Label>{t("after")}</Form.Check.Label>
           </Col>
           <Col>
             <InputGroup>
@@ -99,7 +117,7 @@ function RecurrenceEndInput({
                 }
               />
               <InputGroup.Append>
-                <InputGroup.Text>occurrences</InputGroup.Text>
+                <InputGroup.Text>{t("occurences")}</InputGroup.Text>
               </InputGroup.Append>
             </InputGroup>
           </Col>
@@ -109,7 +127,7 @@ function RecurrenceEndInput({
   );
 }
 
-const defaultOccurrences = {
+export 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 from "./RecurrenceEndInput";
+import RecurrenceEndInput, { defaultOccurrences } from "./RecurrenceEndInput";
 import RecurrenceIntervalAndFrequencyInput from "./RecurrenceIntervalAndFrequencyInput";
 import RecurrenceMonthlyRepeatByInput from "./RecurrenceMonthlyRepeatByInput";
 import RecurrenceWeekdaysInput from "./RecurrenceWeekdaysInput";
@@ -16,6 +16,7 @@ import {
 export interface RecurrenceInputProps {
   disabled?: boolean;
   date: string;
+  minDate?: string;
   value?: string;
   onChange: (value: string) => void;
   initialFrequency?: Frequency;
@@ -24,6 +25,7 @@ export interface RecurrenceInputProps {
 export function RecurrenceInput({
   disabled = false,
   date,
+  minDate,
   value,
   onChange,
   initialFrequency = Frequency.WEEKLY,
@@ -82,6 +84,7 @@ export function RecurrenceInput({
       )}
       <RecurrenceEndInput
         date={date}
+        minDate={minDate}
         frequency={state.freq}
         until={state.until && DateTime.fromJSDate(state.until).toISODate()}
         count={state.count}
@@ -130,5 +133,12 @@ const getInitialState = ({
     byweekday = options.byweekday[0];
   }
 
-  return { ...options, byweekday };
+  return {
+    ...options,
+    count:
+      options?.count || options.until
+        ? options.count
+        : defaultOccurrences[options.freq],
+    byweekday,
+  };
 };

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

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { useFormContext } from "react-hook-form";
+import { RegisterOptions, useFormContext } from "react-hook-form";
 import { DATE_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
@@ -13,6 +13,14 @@ 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({
@@ -22,6 +30,8 @@ function RecurrenceIntervalAndFrequencyInput({
   startTimeLabel,
   endDateLabel,
   endTimeLabel,
+  startTimeRules,
+  endTimeRules,
 }: RecurrenceIntervalAndFrequencyInputProps) {
   const { t } = useTranslation(["Design", "Notification", "App"]);
 
@@ -30,7 +40,6 @@ function RecurrenceIntervalAndFrequencyInput({
     formState: { errors },
     register,
     trigger,
-    setValue,
   } = useFormContext<RecurringDatePickerInputValues>();
 
   const startDate = getValues("startDate");
@@ -47,6 +56,9 @@ function RecurrenceIntervalAndFrequencyInput({
   }, [startDate]);
 
   useEffect(() => {
+    if (!startTime || !endTime) {
+      return;
+    }
     trigger("endTime");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [startTime]);
@@ -118,15 +130,15 @@ function RecurrenceIntervalAndFrequencyInput({
             </Form.Label>
             <Form.Control
               type="time"
-              {...register("startTime", { required: false })}
-              onChange={({ target: { value } }) => {
-                setValue("startTime", `${value}:00`);
-              }}
+              {...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>
 
@@ -144,18 +156,16 @@ function RecurrenceIntervalAndFrequencyInput({
                   const currentStartTime = DateTime.fromISO(startTime);
                   const currentEndTime = DateTime.fromISO(time);
 
-                  return currentEndTime?.diff(currentStartTime, ["seconds"])
-                    ?.seconds > 0
+                  return currentEndTime?.diff(currentStartTime, ["minutes"])
+                    ?.minutes >= 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,6 +7,7 @@ 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";
@@ -38,6 +39,7 @@ export interface RecurringDatePickerInputValues {
   byweekday?: Weekday[];
   until?: Date;
   count?: number;
+  withOutEndDate?: boolean;
 }
 
 export function RecurringDatePickerInput({
@@ -101,6 +103,11 @@ 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(),
@@ -115,6 +122,8 @@ 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): JSX.Element {
+}: ReportFormProps) {
   const { t } = useTranslation(["App"]);
   const fromDateInput = useRef<HTMLInputDateElement | null>(null);
   const toDateInput = useRef<HTMLInputDateElement | null>(null);

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

@@ -4,6 +4,10 @@ import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import {
+  ORDER_SOURCE_IFRAME,
+  ORDER_SOURCE_MANUAL,
+} from "@licklist/core/src/DataMapper/Order/OrderDataMapper";
 import { BookingResults } from "./BookingResults";
 
 export default {
@@ -21,6 +25,7 @@ Default.args = {
     {
       id: 1,
       people: 2,
+      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 1,
@@ -42,7 +47,6 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      tickets: [],
       event: {
         id: 1,
         name: "testEvent1",
@@ -61,6 +65,7 @@ Default.args = {
     {
       id: 2,
       people: 10,
+      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 2,
@@ -82,7 +87,6 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      tickets: [],
       event: {
         id: 2,
         name: "testEvent2",
@@ -102,6 +106,8 @@ Default.args = {
     {
       id: 3,
       people: 10,
+      source: ORDER_SOURCE_MANUAL,
+
       products: [
         {
           id: 3,
@@ -135,7 +141,6 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -154,6 +159,7 @@ Default.args = {
     {
       id: 4,
       people: 10,
+      source: ORDER_SOURCE_MANUAL,
       products: [
         {
           id: 3,
@@ -166,7 +172,6 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -186,6 +191,7 @@ Default.args = {
     {
       id: 5,
       people: 10,
+      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -198,7 +204,6 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -214,6 +219,7 @@ Default.args = {
     {
       id: 6,
       people: 10,
+      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -226,7 +232,6 @@ Default.args = {
       createdAt: "2022-05-20 18:28:56",
       updatedAt: "2022-05-20 18:28:56",
       status: "cart",
-      tickets: [],
       event: {
         id: 3,
         name: "testEvent3",
@@ -241,6 +246,7 @@ Default.args = {
     {
       id: 7,
       people: 10,
+      source: ORDER_SOURCE_IFRAME,
       products: [
         {
           id: 3,
@@ -253,7 +259,6 @@ 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

@@ -2,8 +2,12 @@ import React from "react";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { DateTime } from "luxon";
+import { useIntl } from "react-intl";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import * as Config from "@licklist/core/dist/Config";
 import { formatDateStringForEvent } from "@licklist/plugins/dist/utils/formatDate";
+import { getOrderSourceTitle } from "@licklist/plugins/dist/utils/sourceTitle";
 import Icon from "../../../../static/Icon";
 
 export type ResultCardProps = {
@@ -20,7 +24,11 @@ export const ResultCard = ({
   onCardClick,
 }: ResultCardProps) => {
   const { t } = useTranslation("Design");
-  const { id, people, user, status, startDate } = order;
+  const { formatNumber } = useIntl();
+  const { id, people, user, status, startDate, products, source, totalAmount } =
+    order;
+
+  const productList = products.map((product) => product.name)?.join(", ") || "";
 
   const onClick = () => {
     if (!onCardClick) return;
@@ -55,10 +63,23 @@ export const ResultCard = ({
             {t("status")}: {t(status)}
           </p>
           <p>
-            {t("date")}: {formatDateStringForEvent(startDate)}
+            {t("date")}: {formatDateStringForEvent(startDate, false)}
+          </p>
+          <p>
+            {t("time")}: {DateTime.fromISO(startDate).toFormat(TIME_FORMAT)}
+          </p>
+          <p className="products" title={productList}>
+            {t("products")}: {productList}
+          </p>
+          <p>
+            {t("totalAmount")}:{" "}
+            {formatNumber(totalAmount, {
+              style: "currency",
+              currency: Config.Currency.GBP,
+            })}
           </p>
           <p>
-            {t("time")}: {DateTime.fromISO(startDate).toFormat("hh:MM")}
+            {t("source")}: {t(getOrderSourceTitle(source))}
           </p>
         </div>
       </div>

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

@@ -14,6 +14,7 @@ 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";
@@ -132,6 +133,10 @@ 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/filters/SaleFilters.tsx

@@ -13,6 +13,7 @@ export interface Filters {
   orderable_date_from: string;
   orderable_date_to: string;
   is_in_cart: boolean;
+  isFilterOpen?: boolean;
 }
 
 export interface SaleFiltersProps {

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

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