@licklist/design 0.44.542 → 0.44.544

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -4,10 +4,14 @@ import { useIntl } from "react-intl";
 import { useTranslation } from "react-i18next";
 import * as Config from "@licklist/core/dist/Config";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { convertEventStatisticToTableData, TRANSLATION_KEYS } from "../utils";
 import { StaticTableData } from "../../../table";
 
-export const useTableData = (eventStatistic: EventStatistic | null) => {
+export const useTableData = (
+  date: Event["startAt"] | null,
+  eventStatistic: EventStatistic | null
+) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
   const [tableRows, setTableRows] = useState<StaticTableData[]>([]);
@@ -28,14 +32,17 @@ export const useTableData = (eventStatistic: EventStatistic | null) => {
     return t(key);
   };
 
-  const transformStatisticToTableRows = (statistic: EventStatistic | null) => {
+  const transformStatisticToTableRows = (
+    date: Event["startAt"],
+    statistic: EventStatistic | null
+  ) => {
     if (!statistic) {
       return [];
     }
 
     const tableDataRows: StaticTableData[] = [];
 
-    convertEventStatisticToTableData(statistic).forEach(
+    convertEventStatisticToTableData(date, statistic).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
           String(total)
@@ -77,9 +84,9 @@ export const useTableData = (eventStatistic: EventStatistic | null) => {
   };
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(eventStatistic));
+    setTableRows(transformStatisticToTableRows(date, eventStatistic));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [eventStatistic]);
+  }, [date, eventStatistic]);
 
   return tableRows;
 };

package/src/events/event-statistic-modal/utils/index.ts

@@ -1,4 +1,6 @@
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { DateTime } from "luxon";
+import { DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
 
 export const TRANSLATION_KEYS = {
   shortQuantity: "shortQuantity",
@@ -7,6 +9,7 @@ export const TRANSLATION_KEYS = {
 };
 
 export const convertEventStatisticToTableData = (
+  date: string,
   eventStatistic: EventStatistic
 ) => {
   let totalAmount = 0;
@@ -25,49 +28,51 @@ export const convertEventStatisticToTableData = (
     total: string | number;
   }[] = [];
 
-  Object.values(eventStatistic?.productCategorySummary)?.forEach(
-    (categories) => {
-      categories?.forEach(
-        ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
-          let quantity = 0;
+  const summaryFormattedDate = DateTime.fromISO(date)
+    .toUTC()
+    .toFormat(DATE_TIME_FULL_FORMAT);
 
-          totalAmount += totalPerCategory || 0;
+  Object.values(
+    eventStatistic?.productCategorySummary[summaryFormattedDate] ?? {}
+  )?.forEach(
+    ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
+      let quantity = 0;
 
-          tableDataArray.push({
-            name: categoryName,
-            key: `${eventId}.${categoryName}`,
-            isBold: true,
-            isHeader: true,
-            quantity: TRANSLATION_KEYS.shortQuantity,
-            total: TRANSLATION_KEYS.total,
-          });
+      totalAmount += totalPerCategory || 0;
 
-          productsSummary?.forEach(
-            ({ productsSold, name, totalQuantity, total }) => {
-              quantity += productsSold;
+      tableDataArray.push({
+        name: categoryName,
+        key: `${eventId}.${categoryName}`,
+        isBold: true,
+        isHeader: true,
+        quantity: TRANSLATION_KEYS.shortQuantity,
+        total: TRANSLATION_KEYS.total,
+      });
 
-              tableDataArray.push({
-                name,
-                key: `${eventId}.${categoryName}.${name}`,
-                quantity: totalQuantity
-                  ? `${productsSold} / ${totalQuantity}`
-                  : String(productsSold),
-                total: String(total),
-              });
-            }
-          );
+      productsSummary?.forEach(
+        ({ productsSold, name, totalQuantity, total }) => {
+          quantity += productsSold;
 
           tableDataArray.push({
-            name: TRANSLATION_KEYS.totalPerCategory,
-            key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
-            quantity,
-            total: totalPerCategory,
-            isBold: true,
+            name,
+            key: `${eventId}.${categoryName}.${name}`,
+            quantity: totalQuantity
+              ? `${productsSold} / ${totalQuantity}`
+              : String(productsSold),
+            total: String(total),
           });
-
-          totalQuantity += quantity;
         }
       );
+
+      tableDataArray.push({
+        name: TRANSLATION_KEYS.totalPerCategory,
+        key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
+        quantity,
+        total: totalPerCategory,
+        isBold: true,
+      });
+
+      totalQuantity += quantity;
     }
   );
 

package/src/iframe/activity-card/ActivityCard.stories.tsx

@@ -1,75 +1,51 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import { ActivityCard, ActivityCardProps, LAYOUT_LIST } from "./ActivityCard";
+import {
+  ActivityCard,
+  ActivityCardProps,
+  LAYOUT_GRID,
+  LAYOUT_LIST,
+} from "./ActivityCard";
 
 export default {
   title: "Iframe/ActivityCard",
   component: ActivityCard,
 } as Meta;
 
-export const Default: Story<ActivityCardProps> = (props) => {
-  return <ActivityCard {...props} />;
-};
+export const GridView: Story<ActivityCardProps> = (props) => {
+  const [isSelected, setIsSelected] = React.useState(false);
 
-Default.args = {
-  title: "Clay Pigeons & Axe Thowing",
-  duration: "60 mins",
-  price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: false,
+  return (
+    <ActivityCard
+      {...props}
+      isSelected={isSelected}
+      onSelect={() => setIsSelected(true)}
+    />
+  );
 };
 
-export const Selected: Story<ActivityCardProps> = (props) => {
-  return <ActivityCard {...props} />;
-};
-
-Selected.args = {
+GridView.args = {
+  layout: LAYOUT_GRID,
   title: "Clay Pigeons & Axe Thowing",
   duration: "60 mins",
   price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: true,
 };
 
 export const ListView: Story<ActivityCardProps> = (props) => {
-  return <ActivityCard {...props} />;
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  return (
+    <ActivityCard
+      {...props}
+      isSelected={isSelected}
+      onSelect={() => setIsSelected(true)}
+    />
+  );
 };
 
-Default.args = {
+ListView.args = {
   layout: LAYOUT_LIST,
   title: "Clay Pigeons & Axe Thowing",
   duration: "60 mins",
   price: "from £20",
-  image: {
-    hash: "0b37b130e22aa2d3",
-    id: 195,
-    imageType: "cover",
-    imageableId: 25,
-    imageableType: "zone",
-    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-    // eslint-disable-next-line max-len
-    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
-  },
-  onSelect: () => null,
-  isSelected: false,
 };

package/src/iframe/activity-card/ActivityCard.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from "react";
 import clsx from "clsx";
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 
 export const LAYOUT_GRID = "grid";
 export const LAYOUT_LIST = "list";
@@ -11,7 +10,6 @@ export type ActivityCardProps = {
   title: ReactNode;
   duration: ReactNode;
   price: ReactNode;
-  image?: Image | null;
   onSelect: () => void;
   isSelected: boolean;
   layout?: Layout;
@@ -21,7 +19,7 @@ export const ActivityCard = ({
   title,
   duration,
   price,
-  image,
+  // image,
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
@@ -33,10 +31,7 @@ export const ActivityCard = ({
         className={clsx("activity-card", isSelected && "active")}
         onClick={onSelect}
       >
-        {image && (
-          <img className="activity-card-image" alt="" src={image.url} />
-        )}
-        <div className={clsx("d-flex", "flex-column", !image && "no-image")}>
+        <div className={clsx("d-flex", "flex-column")}>
           <div className="activity-card-title">{title}</div>
 
           {duration && <div>{duration}</div>}
@@ -64,12 +59,6 @@ export const ActivityCard = ({
 
           {price && <div>{price}</div>}
         </div>
-
-        {image && (
-          <div className="image-container">
-            <img className="image" src={image.url} alt="" />
-          </div>
-        )}
       </div>
       <hr className="list-activity-card-hr" />
     </div>

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { NumberInput } from "../NumberInput";
 import { Product, ProductCategory } from "../../../../../../types";
 
@@ -11,6 +12,7 @@ interface FormOrderItem {
   name: string;
   price: number;
   productsCategoryId: number;
+  zoneId?: Zone["id"];
   deposit?: number | null;
   quantity: number;
   capacity?: number | null;
@@ -30,7 +32,7 @@ interface ProductQuantityInputProps {
 export const ProductQuantityInput = ({
   product,
   category,
-  onChange,
+  onChange: _onChange,
   clearErrors,
   refCallback,
   productInfo,
@@ -39,14 +41,15 @@ export const ProductQuantityInput = ({
 }: ProductQuantityInputProps) => {
   const { t } = useTranslation("Design");
 
-  const onClick = () => {
-    onChange({
+  const onChange = (quantity: number | null) => {
+    _onChange({
       id: product.id,
       name: product.name,
       deposit,
       price: product.price,
       productsCategoryId: category.id,
-      quantity: productInfo?.quantity ? 0 : 1,
+      zoneId: category.zone?.id,
+      quantity,
       capacity: product?.capacity,
     });
   };
@@ -58,6 +61,7 @@ export const ProductQuantityInput = ({
       </div>
     );
   }
+
   if (product?.maxAmount === 1) {
     return (
       <Button
@@ -69,49 +73,26 @@ export const ProductQuantityInput = ({
           }`,
           invalid && "error"
         )}
-        onClick={onClick}
+        onClick={() => onChange(productInfo?.quantity ? 0 : 1)}
       >
         {t(`Design:${productInfo?.quantity ? "unselect" : "select"}`)}
       </Button>
     );
   }
+
   return (
     <NumberInput
       ref={refCallback}
       onChange={(val) => {
-        onChange({
-          id: product.id,
-          name: product.name,
-          deposit,
-          price: product.price,
-          productsCategoryId: category.id,
-          quantity: val || null,
-          capacity: product?.capacity,
-        });
+        onChange(val || null);
         clearErrors(`${product.id}` as const);
       }}
       onArrowDown={() => {
-        onChange({
-          id: product.id,
-          name: product.name,
-          deposit,
-          price: product.price,
-          productsCategoryId: category.id,
-          quantity: productInfo?.quantity - 1 || 0,
-          capacity: product?.capacity,
-        });
+        onChange(productInfo?.quantity - 1 || 0);
         clearErrors(`${product.id}` as const);
       }}
       onArrowUp={() => {
-        onChange({
-          id: product.id,
-          name: product.name,
-          deposit,
-          price: product.price,
-          productsCategoryId: category.id,
-          quantity: (productInfo?.quantity ?? 0) + 1,
-          capacity: product?.capacity,
-        });
+        onChange((productInfo?.quantity ?? 0) + 1);
         clearErrors(`${product.id}` as const);
       }}
       min={0}

package/src/product-set/control/DateAndRecurrenceInput.tsx

@@ -5,8 +5,11 @@ import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useClickAway } from "react-use";
+import { DateTime } from "luxon";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
 import { DndContext } from "@dnd-kit/core";
+import { TIME_FORMAT } from "@licklist/core/dist/Config/Date";
 import {
   SortableContext,
   verticalListSortingStrategy,
@@ -20,6 +23,11 @@ import {
   RecurringDatePickerInputValues,
 } from "../../recurring-date-picker-input/RecurringDatePickerInput";
 import { ProductSetRecurrenceControl } from "./ProductSetRecurrenceControl";
+import {
+  AvailableTimesControl,
+  AvailableTimesControlRef,
+} from "../../zone/form/components/AvailableTimesControl";
+
 // eslint-disable-next-line max-len
 
 export interface DateAndRecurrenceInputValues {
@@ -28,10 +36,16 @@ export interface DateAndRecurrenceInputValues {
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
+  workHours?: WorkHour[];
+  providerHasBookingManagement: boolean;
+  isLoading?: boolean;
 }
 
 export const DateAndRecurrenceInput = ({
   isEventEditProductSet,
+  providerHasBookingManagement,
+  workHours,
+  isLoading,
 }: DateAndRecurrenceInputProps) => {
   const {
     control,
@@ -42,6 +56,9 @@ export const DateAndRecurrenceInput = ({
     clearErrors,
   } = useFormContext<DateAndRecurrenceInputValues>();
 
+  const [availableTimes, setAvailableTimes] = useState<string[]>([]);
+  const availableTimesFormRef = useRef<AvailableTimesControlRef>();
+
   const { fields, append, update, move } = useFieldArray({
     name: "menuRecurrences",
     control,
@@ -78,13 +95,44 @@ export const DateAndRecurrenceInput = ({
   const { t } = useTranslation("Design");
 
   // in this method we should fulfill the form with a proper data
-  const handleRecurringDateChange = (next: RecurringDatePickerInputValues) => {
+  const handleRecurringDateChange = async (
+    next: RecurringDatePickerInputValues
+  ) => {
+    const isAvailableTimesFormValid =
+      await availableTimesFormRef.current?.trigger();
+
+    if (next?.startTime && next?.endTime && isAvailableTimesFormValid) {
+      const startTime = DateTime.fromISO(next.startTime);
+      const endTime = DateTime.fromISO(next.endTime);
+      const { availableTimes } = availableTimesFormRef.current.getValues();
+      const validAvalilableTimes = availableTimes.every((time) => {
+        const currentAvailableTime = DateTime.fromFormat(time, TIME_FORMAT);
+
+        return (
+          currentAvailableTime.diff(startTime, "minutes").minutes >= 0 &&
+          currentAvailableTime.diff(endTime, "minutes").minutes <= 0
+        );
+      });
+      if (!validAvalilableTimes) {
+        availableTimesFormRef.current.setError("availableTimes", {
+          message: t("Validation:fieldTimeBetween", {
+            attribute: t("Design:startTimesSmall"),
+            min: startTime.toFormat(TIME_FORMAT),
+            max: endTime.toFormat(TIME_FORMAT),
+          }),
+        });
+
+        return;
+      }
+    }
+
     const values = {
       rrule: next.rrule,
       startDate: next.startDate,
       endDate: next.endDate,
       startTime: next.startTime,
       endTime: next.endTime,
+      ...availableTimesFormRef?.current?.getValues(),
     } as Partial<ProductSetRecurrence>;
 
     if (editState.values?.id) {
@@ -107,6 +155,7 @@ export const DateAndRecurrenceInput = ({
     // Hotfix for an issue with Popover close & open actions
     setTimeout(() => {
       setEditState({ index, values: next });
+      setAvailableTimes(next.availableTimes || []);
       setIsDatePopoverVisible(() => true);
     }, 100);
   };
@@ -176,7 +225,25 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
-              />
+              >
+                {providerHasBookingManagement && (
+                  <AvailableTimesControl
+                    workHours={workHours}
+                    isLoading={isLoading}
+                    defaultValues={availableTimes}
+                    ref={availableTimesFormRef}
+                    errorMessage={
+                      errors?.menuRecurrences?.[`${editState?.index}`]
+                        ?.availableTimes?.message
+                    }
+                    clearErrorMessage={() =>
+                      clearErrors(
+                        `menuRecurrences.${editState?.index}.availableTimes`
+                      )
+                    }
+                  />
+                )}
+              </RecurringDatePickerInput>
             </Popover.Content>
           </Popover>
         }
@@ -201,6 +268,10 @@ export const DateAndRecurrenceInput = ({
                   key={menuRecurrence._id}
                   menuRecurrence={menuRecurrence}
                   onEdit={() => handleOnEdit(menuRecurrence, index)}
+                  errorMessage={
+                    errors?.menuRecurrences?.[`${index}`]?.availableTimes
+                      ?.message
+                  }
                 />
               ))}
             </SortableContext>

package/src/product-set/control/ProductSetControl.stories.tsx

@@ -67,7 +67,6 @@ Empty.args = {
     type: "sale",
     termsAndConditions: "",
     operationalCost: OPERATIONAL_COST_CUSTOMER,
-    isDefault: false,
     menuRecurrence: {
       id: 38,
       menuId: 257,
@@ -87,7 +86,6 @@ Default.args = {
     type: "sale",
     termsAndConditions: "",
     operationalCost: OPERATIONAL_COST_CUSTOMER,
-    isDefault: true,
     menuRecurrence: {
       id: 38,
       menuId: 257,

package/src/product-set/control/ProductSetControl.tsx

@@ -21,6 +21,7 @@ import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/Email
 import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { ruleForUrlWithProtocol } from "@licklist/plugins/dist/validation/Rules/urlRule";
+import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
 import {
@@ -56,7 +57,6 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   type: ProductSetType;
   termsAndConditions: string;
   thankYouPageUrl: string;
-  isDefault: boolean;
   operationalCost: OperationalCostType;
   productGroups?: SelectItem[];
   relyOnPeopleType?: RelyOnPeopleType | null;
@@ -84,6 +84,8 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
+  workHours?: WorkHour[];
+  providerHasBookingManagement?: boolean;
 }
 
 export function ProductSetControl({
@@ -97,6 +99,8 @@ export function ProductSetControl({
   isCreateAction,
   showEmailTemplate,
   showSmsTemplate,
+  workHours,
+  providerHasBookingManagement = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -158,6 +162,9 @@ export function ProductSetControl({
         {isCreateAction && (
           <DateAndRecurrenceInput
             isEventEditProductSet={isEventEditProductSet}
+            workHours={workHours}
+            isLoading={isLoading}
+            providerHasBookingManagement={providerHasBookingManagement}
           />
         )}
 
@@ -189,15 +196,6 @@ export function ProductSetControl({
                 </Form.Group>
               )}
             /> */}
-          {/* <Form.Check
-              {...register("isDefault")}
-              id="isDefaultId"
-              name="isDefault"
-              label={t("Design:setAsDraft")}
-              custom
-              className="is-default-checkbox"
-              disabled={isLoading}
-            /> */}
 
           <Form.Group>
             <Form.Label className="mb-0">

package/src/product-set/control/ProductSetRecurrenceControl.tsx

@@ -11,11 +11,13 @@ import { Icon } from "../../static";
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
   onEdit?: (onEdit: Partial<ProductSetRecurrence>) => void;
+  errorMessage?: string;
 }
 
 export const ProductSetRecurrenceControl = ({
   menuRecurrence,
   onEdit,
+  errorMessage,
 }: ProductSetRecurrenceControlProps) => {
   const { formatDate } = useIntl();
   const { t } = useTranslation("Design");
@@ -30,7 +32,7 @@ export const ProductSetRecurrenceControl = ({
 
   return (
     <div
-      className="sortable-tree-root"
+      className="sortable-tree-root flex-column"
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -84,6 +86,9 @@ export const ProductSetRecurrenceControl = ({
           {getHumanReadableDate(menuRecurrence)}
         </span>
       </div>
+      <div className={`manual-form-error ${!errorMessage && "d-none"}`}>
+        {errorMessage}
+      </div>
     </div>
   );
 };