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

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

@@ -8,6 +8,11 @@ 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 {
@@ -17,6 +22,7 @@ export interface ManualBookingSummaryProps {
   orderSumIncludingFee?: number | null;
   isFeeFetching: boolean;
   orderDate: string;
+  relyOnPeopleType?: RelyOnPeopleType | null;
 }
 
 export const ManualBookingSummary = ({
@@ -26,14 +32,15 @@ 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>
@@ -43,15 +50,23 @@ 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>
-                <div>
-                  {order.isRelyOnPeople ? `x ${order.quantity} People` : ""}
-                </div>
+                {showRelyOnPeople && relyOnPeopleMultiplier && (
+                  <div>
+                    {`x ${order.quantity * relyOnPeopleMultiplier} ${t(
+                      "people"
+                    )}`}
+                  </div>
+                )}
                 <div>
                   {formatNumber(order.quantity * order.price, {
                     style: "currency",

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import React, { useState, useMemo, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
@@ -35,7 +35,8 @@ function SourceOfSalesChart({ data }: SourceOfSalesProps) {
         name: AFFILIATES,
       },
     ],
-    [data]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [data.length]
   );
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -86,32 +87,34 @@ 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">
-        <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>
+        {!!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>
+        )}
       </div>
     </div>
   );

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

@@ -7,6 +7,9 @@ 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 {
@@ -24,7 +27,6 @@ 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";
@@ -52,6 +54,10 @@ 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
@@ -196,7 +202,13 @@ export function Preview({
                         className="mt-3 m-0"
                         containerClassName="mt-5 pt-5"
                       >
-                        <EventCalendar />
+                        <Calendar
+                          currentDate={currentDate}
+                          setCurrentDate={setCurrentDate}
+                          selectedDate={selectedDate}
+                          setSelectedDate={setSelectedDate}
+                          calendarDates={calendarDates}
+                        />
                       </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(): JSX.Element {
+function RestrictedAccess() {
   const { t } = useTranslation("Design");
 
   return (

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

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

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

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

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

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

package/src/styles/activity-card/_index.scss

@@ -0,0 +1,2 @@
+@import "./GridActivitiesCard.scss";
+@import "./ListActivitiesCard.scss";

package/src/styles/availability-indicator/AvailabilityIndicator.scss

@@ -0,0 +1,7 @@
+.availability-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 300;
+}

package/src/styles/availability-indicator/_index.scss

@@ -0,0 +1 @@
+@import "./AvailabilityIndicator.scss";

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

@@ -86,6 +86,12 @@
     max-width: 5.3rem;
     min-height: 2.75rem;
   }
+
+  &.calendar-view {
+    min-width: auto;
+    max-width: none;
+    min-height: auto;
+  }
 }
 
 .time {
@@ -99,15 +105,3 @@
   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/date-time-button/_index.scss

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

package/src/styles/events/EventCard.scss

@@ -34,20 +34,27 @@ $event-card-views-gutter: sp(3) !default;
   transition: ease-in 0.25s;
   border-radius: $event-card-border-radius;
 
-  > * + * {
+  >*+* {
     margin-top: $event-card-contents-gutter;
   }
 
   .card-body {
-    padding: 0;
+    padding: 0 0 3rem 0;
 
     .event-description {
       min-height: 8rem;
+      max-height: 21rem;
+      overflow: hidden;
+
+      &:last-child {
+        text-overflow: ellipsis;
+      }
 
       &.no-image {
         min-height: 13.75rem;
+        max-height: 22rem;
       }
-    }
+  }
   }
 
   .card-title {
@@ -75,7 +82,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%);
   }
 }
 
@@ -168,4 +175,4 @@ $event-card-views-gutter: sp(3) !default;
     color: #504f4f;
     width: 1.7rem;
   }
-}
+}

package/src/styles/form/CustomCheckbox.scss

@@ -1,6 +1,7 @@
 .custom-checkbox {
   margin-top: 1rem;
   display: flex;
+  z-index: 2;
   align-items: center;
 
   .custom-checkbox .custom-control-label::before {
@@ -20,5 +21,10 @@
     padding-left: 0.5rem;
     font-weight: 400;
     font-size: 0.875rem;
+    min-height: 3rem;
+  }
+
+  .checkbox-input {
+    z-index: 2;
   }
 }

package/src/styles/header/Header.scss

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

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

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

package/src/styles/notification/Notification.scss

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

package/src/styles/packages.scss

@@ -13,7 +13,6 @@
 @import "./static";
 @import "./table";
 @import "./back-button";
-@import "./iframe-customers-journey";
 @import "./custom-fields";
 @import "./file-upload";
 @import "./iframe-events";
@@ -41,3 +40,6 @@
 @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,6 +7,11 @@
     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,14 +5,14 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 11.125rem;
+      height: 13.825rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);
       transition: ease-in 0.25s;
       border-radius: 0.25rem;
       box-shadow: 0px 0px 0.125rem 0px rgb(0 0 0 / 20%);
-      
+
       .card-content {
         width: 100%;
         height: 100%;
@@ -28,7 +28,7 @@
           position: absolute;
           left: 0.5rem;
           top: 0.125rem;
-          font-weight: 600;   
+          font-weight: 600;
         }
 
         .order-people {
@@ -43,7 +43,7 @@
           height: 1.75rem;
           font-size: 0.625rem;
           line-height: 0.625rem;
-          color: #6D6D6D;
+          color: #6d6d6d;
           font-weight: 600;
 
           svg {
@@ -62,11 +62,19 @@
             font-size: 0.6875rem;
           }
         }
+
+        .products {
+          display: block;
+          width: 80%;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
 
       &:hover {
         box-shadow: 0px 0px 0.5rem 0px rgb(0 0 0 / 20%);
-        cursor: pointer; 
+        cursor: pointer;
       }
     }
 
@@ -85,4 +93,4 @@
       }
     }
   }
-}
+}

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

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

package/src/styles/zones/ZoneForm.scss

@@ -3,5 +3,8 @@
   flex-wrap: wrap;
   gap: 1.5rem;
   height: 8rem;
+  padding-left: 1.5rem;
+  justify-content: start;
+  width: 95%;
   overflow: scroll;
 }

package/src/types/iframe.ts

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

package/src/typings.d.ts

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

package/src/zone/form/ZoneForm.tsx

@@ -25,7 +25,6 @@ export const ZoneForm = ({
   onSubmit,
   serverErrors,
   isLoading = false,
-  workHours = [],
 }: ZoneFormProps) => {
   const { t } = useTranslation("Design");
   const form = useForm<ZoneFormValues>({
@@ -55,7 +54,7 @@ export const ZoneForm = ({
   return (
     <FormProvider {...form}>
       <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <ZoneControl isLoading={isLoading} workHours={workHours} />
+        <ZoneControl isLoading={isLoading} />
         <Row>
           <Col md={6} sm={12} />
           <Col