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

package/src/sales/manual-booking/summary/ManualBookingSummary.tsx

@@ -8,11 +8,6 @@ import {
 } from "@licklist/core/dist/Config";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
-import {
-  RELY_ON_PEOPLE_QUANTITY,
-  RelyOnPeopleType,
-} from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { getRelyOnPeopleMultiplier } from "@licklist/plugins/dist/utils/relyOnPeople";
 import { BlockLoader } from "../../../static/loader";
 
 export interface ManualBookingSummaryProps {
@@ -22,7 +17,6 @@ export interface ManualBookingSummaryProps {
   orderSumIncludingFee?: number | null;
   isFeeFetching: boolean;
   orderDate: string;
-  relyOnPeopleType?: RelyOnPeopleType | null;
 }
 
 export const ManualBookingSummary = ({
@@ -32,15 +26,14 @@ export const ManualBookingSummary = ({
   orderSumIncludingFee,
   isFeeFetching,
   orderDate,
-  relyOnPeopleType,
 }: ManualBookingSummaryProps) => {
   const { t } = useTranslation(["Design", "Sale"]);
   const { formatNumber } = useIntl();
-  const showRelyOnPeople =
-    relyOnPeopleType && relyOnPeopleType !== RELY_ON_PEOPLE_QUANTITY;
+
   const currentDate = DateTime.fromISO(orderDate);
   const date = currentDate.toFormat(DATE_TIME_MANUAL_BOOKING_FORMAT);
   const time = currentDate.toFormat(TIME_FORMAT);
+
   return (
     <div className="manual-booking-summary">
       <div className="receipt-title">{t("Sale:receipt")}</div>
@@ -50,23 +43,15 @@ export const ManualBookingSummary = ({
       {orders.length > 0 ? (
         <div className="summary-item-container">
           {orders.map((order: ManualBookingOrder) => {
-            const relyOnPeopleMultiplier = getRelyOnPeopleMultiplier({
-              relyOnPeopleType,
-              capacity: order?.capacity,
-            });
             return (
               <div
                 key={order.id}
                 className="d-flex justify-content-between border-summary-item"
               >
                 <div>{order.name}</div>
-                {showRelyOnPeople && relyOnPeopleMultiplier && (
-                  <div>
-                    {`x ${order.quantity * relyOnPeopleMultiplier} ${t(
-                      "people"
-                    )}`}
-                  </div>
-                )}
+                <div>
+                  {order.isRelyOnPeople ? `x ${order.quantity} People` : ""}
+                </div>
                 <div>
                   {formatNumber(order.quantity * order.price, {
                     style: "currency",

package/src/sales/source-of-sales/SourceOfSalesChart.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
@@ -35,8 +35,7 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
         name: AFFILIATES,
       },
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [data.length]
+    [data]
   );
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -87,34 +86,32 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
     <div className="source-of-sales">
       <div className="source-of-sales__header">{t("sourceOfSales")}</div>
       <div className="source-of-sales__pie-chart">
-        {!!data.length && (
-          <ResponsiveContainer debounce={100} width="100%" height="100%">
-            <PieChart>
-              <Legend
-                iconType="circle"
-                wrapperStyle={{ left: 170, top: 20 }}
-                layout="vertical"
-                verticalAlign="top"
-                content={legendRenderer}
-              />
-              <Pie
-                data={extendedData}
-                cx={80}
-                cy={defaultCYPosition}
-                innerRadius={40}
-                outerRadius={48}
-                dataKey="percentage"
-              >
-                {data.map(({ source }: PieChartData, index) => (
-                  <Cell
-                    className={`colors-${index % 4}`}
-                    key={`cell-${source}`}
-                  />
-                ))}
-              </Pie>
-            </PieChart>
-          </ResponsiveContainer>
-        )}
+        <ResponsiveContainer width="100%" height="100%">
+          <PieChart>
+            <Legend
+              iconType="circle"
+              wrapperStyle={{ left: 170, top: 20 }}
+              layout="vertical"
+              verticalAlign="top"
+              content={legendRenderer}
+            />
+            <Pie
+              data={extendedData}
+              cx={80}
+              cy={defaultCYPosition}
+              innerRadius={40}
+              outerRadius={48}
+              dataKey="percentage"
+            >
+              {data.map(({ source }: PieChartData, index) => (
+                <Cell
+                  className={`colors-${index % 4}`}
+                  key={`cell-${source}`}
+                />
+              ))}
+            </Pie>
+          </PieChart>
+        </ResponsiveContainer>
       </div>
     </div>
   );

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -7,9 +7,6 @@ import {
   SNIPPET_TYPE_VENUE_MAP,
 } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { DateTime } from "luxon";
-import { Calendar, defaultStartDay } from "../../../calendar";
-import { getMonthCalendarDates } from "../../../calendar/utils";
 import { IframeEventCard } from "../../../iframe/event/event-card";
 import { SettingButton } from "../settings";
 import {
@@ -27,6 +24,7 @@ import {
 } from "../../../iframe";
 import { NumberInput } from "../../../iframe/order-process/components/CategoryProduct/components/NumberInput";
 import { SnippetTemplateContext } from "../context/snippetTemplate";
+import { EventCalendar } from "../../../iframe/event/event-calendar";
 
 const DEFAULT_IMAGE =
   "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80";
@@ -54,10 +52,6 @@ export function Preview({
     onSettingClick();
   };
 
-  const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay);
-  const [selectedDate, setSelectedDate] = useState<DateTime | null>(null);
-  const calendarDates = getMonthCalendarDates(currentDate);
-
   return (
     <div className="w-100 h-100 snippet-template-preview">
       <Page
@@ -202,13 +196,7 @@ export function Preview({
                         className="mt-3 m-0"
                         containerClassName="mt-5 pt-5"
                       >
-                        <Calendar
-                          currentDate={currentDate}
-                          setCurrentDate={setCurrentDate}
-                          selectedDate={selectedDate}
-                          setSelectedDate={setSelectedDate}
-                          calendarDates={calendarDates}
-                        />
+                        <EventCalendar />
                       </SettingButton>
                     </div>
                     <div className="pt-4">

package/src/static/RestrictedAccess.tsx

@@ -4,7 +4,7 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
 import Icon from "./Icon";
 
-function RestrictedAccess() {
+function RestrictedAccess(): JSX.Element {
   const { t } = useTranslation("Design");
 
   return (

package/src/static/form-number-input/FormNumberInput.tsx

@@ -15,7 +15,6 @@ interface FormNumberInputProps {
   label: string;
   fieldName: string;
   step?: number;
-  onChange?: (value: number) => void;
   disabled?: boolean;
   rules?: Pick<
     RegisterOptions,
@@ -29,7 +28,6 @@ export const FormNumberInput = ({
   step = 1,
   rules,
   disabled,
-  onChange,
 }: FormNumberInputProps) => {
   const controlId = useId();
   const { t } = useTranslation("Validation");
@@ -78,12 +76,7 @@ export const FormNumberInput = ({
               disabled={disabled}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
               {...field}
-              onChange={(event) => {
-                if (onChange) {
-                  onChange(Number(event.target.value));
-                }
-                field.onChange(Number(event.target.value));
-              }}
+              onChange={(event) => field.onChange(Number(event.target.value))}
               onFocus={onFocus}
             />
           )}

package/src/styles/events/EventCard.scss

@@ -34,7 +34,7 @@ $event-card-views-gutter: sp(3) !default;
   transition: ease-in 0.25s;
   border-radius: $event-card-border-radius;
 
-  >*+* {
+  > * + * {
     margin-top: $event-card-contents-gutter;
   }
 
@@ -43,16 +43,9 @@ $event-card-views-gutter: sp(3) !default;
 
     .event-description {
       min-height: 8rem;
-      max-height: 21rem;
-      overflow: hidden;
-
-      &:last-child {
-        text-overflow: ellipsis;
-      }
 
       &.no-image {
         min-height: 13.75rem;
-        max-height: 22rem;
       }
     }
   }
@@ -82,7 +75,7 @@ $event-card-views-gutter: sp(3) !default;
   }
 
   &:hover {
-    box-shadow: 0px 0px 1rem 0px rgb(0 0 0 / 20%);
+    box-shadow: 0px 0px 1rem 0px rgb(0 0 0 / 20%);  
   }
 }
 
@@ -175,4 +168,4 @@ $event-card-views-gutter: sp(3) !default;
     color: #504f4f;
     width: 1.7rem;
   }
-}
+}

package/src/styles/form/CustomCheckbox.scss

@@ -1,7 +1,6 @@
 .custom-checkbox {
   margin-top: 1rem;
   display: flex;
-  z-index: 2;
   align-items: center;
 
   .custom-checkbox .custom-control-label::before {
@@ -22,8 +21,4 @@
     font-weight: 400;
     font-size: 0.875rem;
   }
-
-  .checkbox-input {
-    z-index: 2;
-  }
 }

package/src/styles/header/Header.scss

@@ -11,6 +11,10 @@
     }
   }
 
+  svg {
+    max-height: 1rem;
+  }
+
   .navbar-nav {
     line-height: 1;
     margin-top: 4px;

package/src/styles/{activity-card/GridActivitiesCard.scss → iframe-customers-journey/ActivitiesCard.scss}

@@ -11,7 +11,7 @@
   word-wrap: break-word;
   background-color: #fff;
   font-size: 0.8rem;
-  background-color: $snippet-product-set-background-color;
+  color: $snippet-elements-body-color;
 
   div {
     text-align: left;

package/{dist/styles/activity-card/ListActivitiesCard.scss → src/styles/iframe-customers-journey/ActivitiesSelectedCard.scss}

@@ -6,9 +6,8 @@
   align-items: center;
   cursor: pointer;
   height: 5rem;
-  padding: 0.375rem;
   border: 2px solid transparent;
-  border-radius: 0.5rem;
+  border: 2px solid transparent;
   background-color: $snippet-product-set-background-color;
   color: $snippet-product-set-font-color;
   transition: $color-transition;

package/src/styles/{date-time-button → iframe-customers-journey}/DateTimeButton.scss

@@ -86,12 +86,6 @@
     max-width: 5.3rem;
     min-height: 2.75rem;
   }
-
-  &.calendar-view {
-    min-width: auto;
-    max-width: none;
-    min-height: auto;
-  }
 }
 
 .time {
@@ -105,3 +99,15 @@
   font-weight: 300;
   color: $snippet-calendar-button-font-color;
 }
+
+.info {
+  display: flex;
+  justify-content: center;
+  font-weight: 300;
+  flex-direction: row;
+
+  .logo {
+    width: 0.5rem;
+    margin-right: 0.5rem;
+  }
+}

package/src/styles/iframe-customers-journey/_index.scss

@@ -0,0 +1,3 @@
+@import "./ActivitiesSelectedCard.scss";
+@import "./ActivitiesCard.scss";
+@import "./DateTimeButton.scss";

package/src/styles/iframe-events/Card.scss

@@ -142,7 +142,6 @@
     .card-body {
       padding: 0;
       margin: 0 0 auto;
-      margin-top: 1rem;
     }
   }
 

package/src/styles/notification/Notification.scss

@@ -15,10 +15,6 @@
       display: none !important;
     }
   }
-
-  &.is-invalid {
-    border-color: theme-color("danger");
-  }
 }
 
 .placeholder-row {

package/src/styles/packages.scss

@@ -13,6 +13,7 @@
 @import "./static";
 @import "./table";
 @import "./back-button";
+@import "./iframe-customers-journey";
 @import "./custom-fields";
 @import "./file-upload";
 @import "./iframe-events";
@@ -40,6 +41,3 @@
 @import "./striped-static-table/";
 @import "./image-radio-input/";
 @import "./radio-card/";
-@import "./activity-card/";
-@import "./date-time-button/";
-@import "./availability-indicator/";

package/src/styles/resources-blocking/_index.scss

@@ -7,11 +7,6 @@
     overflow: auto;
   }
 
-  .modal-form-content {
-    max-height: 21rem;
-    overflow-x: hidden;
-  }
-
   .reccurrence-interval-container {
     .form-group {
       margin-bottom: 0.5rem;

package/src/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 12.125rem;
+      height: 11.125rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);
@@ -62,14 +62,6 @@
             font-size: 0.6875rem;
           }
         }
-
-        .products {
-          display: inline-block;
-          width: 80%;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
       }
 
       &:hover {

package/src/styles/themes/bookedit/_index.scss

@@ -46,7 +46,6 @@
 .header {
   background-color: color("white");
   padding: 0 2.5rem;
-  z-index: 2;
   min-height: 4rem;
   border-bottom: 1px solid #f0f0f0;
 }

package/src/types/iframe.ts

@@ -15,7 +15,6 @@ export interface Product {
   isRequired?: boolean;
   isUnlimited?: boolean;
   images: CoreProduct["images"];
-  capacity?: number | null;
   uuid: string;
 }
 

package/src/typings.d.ts

@@ -28,14 +28,3 @@ declare module "*.json" {
 
 declare module "react-phone-number-input/input";
 declare module "react-phone-number-input/commonjs/Flag";
-
-// @TODO: this is a hofix for the following issue:
-// licklist_workspace_frontend/packages/design/src/product-set/hooks/useSortableTreeFunctions.ts(17,34):
-// semantic error TS2304: Cannot find name 'structuredClone'.
-interface WindowOrWorkerGlobalScope {
-  structuredClone(value: any, options?: StructuredSerializeOptions): any;
-}
-declare function structuredClone(
-  value: any,
-  options?: StructuredSerializeOptions
-): any;

package/src/virtualized/components/VirtualizedWindowScroller.tsx

@@ -39,8 +39,7 @@ const WrappedVirtualizedWindowScroller = ({
     if (!onDataUpdate) return;
 
     onDataUpdate();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [windowDimensions]);
+  }, [windowDimensions, scrollElement, gridRef, onDataUpdate]);
 
   return (
     <WindowScroller scrollElement={scrollElement}>

package/src/zone/form/components/AvailableTimesControl.tsx

@@ -9,6 +9,7 @@ import { Form } from "react-bootstrap";
 import { UseFormSetError, useForm } from "react-hook-form";
 import { useId } from "@react-aria/utils";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { calculateTimeWithOffset } from "@licklist/plugins/dist/utils/time";
 import { getCheckboxesByWorkHours } from "../utils/dates";
 
 export type AvailableTimesControlRef = {
@@ -61,18 +62,20 @@ export const AvailableTimesControl = forwardRef<
   });
 
   const onChange = (option: string) => {
-    const isAlreadyChecked = availableTimes.includes(option);
+    const timeWithOffset = calculateTimeWithOffset(option);
+
+    const isAlreadyChecked = availableTimes.includes(timeWithOffset);
 
     if (isAlreadyChecked) {
       setValue(
         "availableTimes",
-        availableTimes.filter((value) => value !== option)
+        availableTimes.filter((value) => value !== timeWithOffset)
       );
 
       return;
     }
 
-    setValue("availableTimes", [...availableTimes, option]);
+    setValue("availableTimes", [...availableTimes, timeWithOffset]);
   };
 
   useEffect(() => {
@@ -92,7 +95,9 @@ export const AvailableTimesControl = forwardRef<
               <Form.Check.Input
                 type="checkbox"
                 value={option}
-                checked={availableTimes.includes(option)}
+                checked={availableTimes.includes(
+                  calculateTimeWithOffset(option)
+                )}
                 onChange={() => onChange(option)}
                 disabled={isLoading}
               />

package/src/zone/form/components/ZoneControl.tsx

@@ -7,7 +7,6 @@ import { SortControl } from "./SortControl";
 import { ZoneRecurrencesControl } from "./ZoneRecurrencesControl";
 import { DescriptionControl } from "./DescriptionControl";
 import { ZoneImageControl } from "./ZoneImageControl";
-import { GameDurationControl } from "./GameDurationControl";
 
 export type ZoneControlProps = {
   isLoading: boolean;
@@ -28,7 +27,6 @@ export const ZoneControl = ({
           <Col md={6} sm={6}>
             <ZoneTypeControl isLoading={isLoading} />
             <SortControl isLoading={isLoading} />
-            <GameDurationControl isLoading={isLoading} />
           </Col>
           <Col md={6} sm={6}>
             <ZoneImageControl isLoading={isLoading} />

package/src/zone/form/components/ZoneRecurrencesControl.tsx

@@ -12,8 +12,11 @@ import {
 import { DndContext } from "@dnd-kit/core";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { DateTime } from "luxon";
-import { TIME_FORMAT } from "@licklist/core/dist/Config";
-
+import { TIME_FORMAT, TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
+import {
+  calculateTimeWithOffset,
+  DIRECTION_TO_LOCAL,
+} from "@licklist/plugins/dist/utils/time";
 import { CONFIRM_MODAL_ACTIONS } from "../../../modals/confirmation/ConfirmModal";
 import { Icon } from "../../../static";
 import {
@@ -64,6 +67,7 @@ export const ZoneRecurrencesControl = ({
   });
   const clearEditState = () => setEditState({ index: null, values: null });
   const [availableTimes, setAvailableTimes] = useState<string[]>([]);
+
   const popoverRef = useRef<HTMLDivElement>();
   const availableTimesFormRef = useRef<AvailableTimesControlRef>();
 
@@ -93,29 +97,30 @@ export const ZoneRecurrencesControl = ({
     if (!isAvailableTimesFormValid) {
       return;
     }
-    if (next?.startTime && next?.endTime) {
-      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
-        );
+    const startTime = DateTime.fromFormat(next.startTime, TIME_FULL_FORMAT);
+    const endTime = DateTime.fromFormat(next.endTime, TIME_FULL_FORMAT);
+    const { availableTimes } = availableTimesFormRef.current.getValues();
+    const validAvalilableTimes = availableTimes.every((time) => {
+      const currentAvailableTime = DateTime.fromFormat(
+        calculateTimeWithOffset(time, DIRECTION_TO_LOCAL),
+        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),
+        }),
       });
-      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;
-      }
+
+      return;
     }
     const values = {
       rrule: next.rrule,
@@ -143,9 +148,12 @@ export const ZoneRecurrencesControl = ({
   const handleOnEdit = (next: Partial<ZoneRecurrence>, index) => {
     clearEditState();
 
-    setEditState({ index, values: next });
-    setAvailableTimes(next.availableTimes || []);
-    setIsDatePopoverVisible(() => true);
+    // Hotfix for an issue with Popover close & open actions
+    setTimeout(() => {
+      setEditState({ index, values: next });
+      setAvailableTimes(next.availableTimes || []);
+      setIsDatePopoverVisible(() => true);
+    }, 100);
   };
 
   const handleOnAdd = () => {