@licklist/design 0.58.3 → 0.58.4-dev.1

package/dist/styles/report/ReportRunnerModal.scss

@@ -1,95 +1,101 @@
 .report-runner-modal {
-    .modal-dialog {
-      @include media-breakpoint-up(sm) {
-        max-width: 45rem;
-      }
-    }
-  
-    .modal-content {
+  .modal-dialog {
+    @include media-breakpoint-up(sm) {
       max-width: 45rem;
-      margin: 0 auto;
-      padding: 1.25rem 1.5rem;
-  
-      header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 1rem;
-        border-bottom: 2px solid #dcdcdc;
-  
-        h5 {
-          margin-bottom: 0;
-          font-size: 1.125rem;
-          font-weight: 500;
-        }
-  
-        button {
-          padding-top: 0.5rem;
-          padding-bottom: 0.5rem;
-          font-size: 0.875rem;
-          font-weight: 600;
-          color: #0e8ce2;
-        }
-      }
-  
-      .data-fields {
-        display: flex;
-        flex-wrap: wrap;
-  
-        span {
-          position: relative;
-          font-size: 0.875rem;
-          font-weight: 500;
-  
-          &:after {
-            content: "|";
-            margin: 0 0.25rem;
-            color: #dcdcdc;
-          }
-  
-          &:last-child:after {
-            display: none;
-          }
-        }
+    }
+  }
+
+  .modal-content {
+    max-width: 45rem;
+    margin: 0 auto;
+    padding: 1.25rem 1.5rem;
+
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1rem;
+      border-bottom: 2px solid #dcdcdc;
+
+      h5 {
+        margin-bottom: 0;
+        font-size: 1.125rem;
+        font-weight: 500;
       }
-  
-      .edit-button {
-        padding: 0;
+
+      button {
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
         font-size: 0.875rem;
         font-weight: 600;
         color: #0e8ce2;
-        text-decoration: underline;
-  
-        &:focus {
-          box-shadow: none;
+      }
+    }
+
+    .data-fields {
+      display: flex;
+      flex-wrap: wrap;
+
+      span {
+        position: relative;
+        font-size: 0.875rem;
+        font-weight: 500;
+
+        &:after {
+          content: "|";
+          margin: 0 0.25rem;
+          color: #dcdcdc;
+        }
+
+        &:last-child:after {
+          display: none;
         }
       }
-  
-      input {
-        border-radius: 0.5rem;
+    }
+
+    .edit-button {
+      padding: 0;
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: #0e8ce2;
+      text-decoration: underline;
+
+      &:focus {
+        box-shadow: none;
       }
-  
-      form {
+    }
+
+    input {
+      border-radius: 0.5rem;
+    }
+
+    form {
+      margin-top: 1.25rem;
+
+      .period-by {
+        display: flex;
+        gap: 2rem;
         margin-top: 1.25rem;
-  
-        .controls {
-          display: flex;
-          gap: 2rem;
-          align-items: flex-start;
-          flex-wrap: wrap;
-        }
-  
-        .form-group {
-          flex: 1;
-        }
-  
-        button[type="submit"] {
-          white-space: nowrap;
-        }
       }
-  
-      .loader {
-        height: 10rem;
+
+      .controls {
+        display: flex;
+        gap: 2rem;
+        align-items: flex-start;
+        flex-wrap: wrap;
+      }
+
+      .form-group {
+        flex: 1;
+      }
+
+      button[type="submit"] {
+        white-space: nowrap;
       }
     }
-  }
+
+    .loader {
+      height: 10rem;
+    }
+  }
+}

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.58.3",
+  "version": "0.58.4-dev.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -53,9 +53,9 @@
     "@fortawesome/free-brands-svg-icons": "5.15.2",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.9",
-    "@licklist/core": "^0.20.0",
+    "@licklist/core": ">=0.22.1-dev.3 < 0.22.1",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": "^0.26.0",
+    "@licklist/plugins": ">=0.27.1-dev.0 < 0.27.1",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",

package/src/calendar/Calendar.stories.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { DateTime } from "luxon";
 import { Meta, Story } from "@storybook/react";
 import { Calendar, CalendarProps } from "./Calendar";
+import { getMonthCalendarDates } from "./utils/index";
 
 export default {
   title: "Iframe/Event/Calendar",
@@ -24,10 +25,16 @@ const now = DateTime.now().set({
 });
 
 Default.args = {
-  disabledDates: [now.minus({ day: 2 }), now, now.plus({ day: 2 })],
   isLoading: false,
   fromPrice: "from £10",
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: [],
+  calendarDates: getMonthCalendarDates(now),
+  currentDate: now,
+  getDateTimeButtonProps: () => ({
+    resources: [],
+    showResources: false,
+    shouldCalculateResources: false,
+    isDisabled: false,
+  }),
 };

package/src/events/edit-event-modal/component/SelectEventProductSet/component/EditEventProductSet.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo } from "react";
 import { Button, Form } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
 import { isEqual } from "lodash";
-
 import { useParams } from "react-router-dom";
 import { useEventEditProductSetContext } from "@licklist/plugins/dist/context/event/EventEditProductSetContext";
 import { useTranslation } from "react-i18next";

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -29,22 +29,22 @@ export const getDefaultValues = (
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({
       ...step,
-      productCategories: productCategories?.map(
-        ({ products, ...productCategory }) => ({
+      productCategories:
+        productCategories?.map(({ products, ...productCategory }) => ({
           ...productCategory,
-          products: products?.map(({ zoneId, subProducts, ...product }) => ({
-            ...product,
-            subProducts: subProducts?.map(({ zoneId, ...subProducts }) => ({
-              ...subProducts,
+          products:
+            products?.map(({ zoneId, subProducts, ...product }) => ({
+              ...product,
+              subProducts: subProducts?.map(({ zoneId, ...subProducts }) => ({
+                ...subProducts,
+                productCategoryId: undefined,
+                zoneId,
+              })),
               productCategoryId: undefined,
-              zoneId: zoneId as number,
-            })),
-            productCategoryId: undefined,
-            zoneId: zoneId as number,
-          })),
-        })
-      ),
+              zoneId,
+            })) ?? [],
+        })) ?? [],
       venueMapSetId: step?.venueMapSet ? step?.venueMapSet?.id : null,
-    })) ?? undefined,
+    })) ?? [],
   menuRecurrences: hasNoRecurrences ? [] : productSet?.menuRecurrences ?? [],
 });

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -16,6 +16,7 @@ export function Default() {
   return (
     <div>
       <IframeEventCard
+        showMoreInfo
         imageSrc={
           showImage
             ? // eslint-disable-next-line max-len

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -29,6 +29,7 @@ interface IframeEventCardProps {
   titleId?: string;
   descriptionId?: string;
   imageClassName?: string;
+  showMoreInfo?: boolean;
 }
 
 export function IframeEventCard({
@@ -46,6 +47,7 @@ export function IframeEventCard({
   titleId,
   descriptionId,
   imageClassName,
+  showMoreInfo,
 }: IframeEventCardProps) {
   const { formatNumber } = useIntl();
   const { t } = useTranslation("Design");
@@ -70,6 +72,7 @@ export function IframeEventCard({
       )}
       onClick={goToDetails ? onClick : undefined}
     >
+      {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
       {imageSrc && (
         <Card.Img
           className={imageClassName ?? "card-image"}
@@ -91,12 +94,8 @@ export function IframeEventCard({
               <div className="icon-wrapper">
                 <CalendarSvg />
               </div>
-              <p className="iframe-event-card__bold m-0 list-view-hided">
-                {date}
-              </p>
-              <p className="iframe-event-card__bold m-0 grid-view-hided">
-                {shortDate}
-              </p>
+              <p className="m-0 list-view-hided">{date}</p>
+              <p className="m-0 grid-view-hided">{shortDate}</p>
             </div>
           </Card.Text>
 
@@ -106,7 +105,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <ClockSvg />
                 </div>
-                <p className="iframe-event-card__bold m-0">{type}</p>
+                <p className="m-0">{type}</p>
               </div>
             </Card.Text>
           )}
@@ -117,7 +116,7 @@ export function IframeEventCard({
                 <div className="icon-wrapper">
                   <TicketSvg />
                 </div>
-                <p className="iframe-event-card__bold m-0">
+                <p className="m-0">
                   {t("from")}{" "}
                   {formatNumber(cost, { style: "currency", currency: "GBP" })}
                 </p>

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

@@ -32,24 +32,44 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     ref
   ) => {
     const minusButtonGreyedOut = !value;
-    const plusButtonGreyedOut = max !== undefined && value === max;
+    const plusButtonGreyedOut = max > 0 && value === max;
+
+    const handleChangeValue = (val: number) => {
+      if (max > 0 && val > max) {
+        onChange(max);
+        return;
+      }
+
+      if (min > 0 && val && val < min) {
+        onChange(min);
+        return;
+      }
+      onChange(val);
+    };
 
     const handleArrowUpClick = () => {
-      if (max !== undefined && (value || 0) < max) {
-        onArrowUp(value + 1);
+      if (max > 0 && value === max) {
+        return;
       }
-      if (max === undefined) {
-        onArrowUp(value + 1);
+
+      if (min > 0 && (value || 0) < min) {
+        onArrowUp(min);
+        return;
       }
+
+      onArrowUp((value || 0) + 1);
     };
 
     const handleArrowDownClick = () => {
-      if (min !== undefined && value > min) {
-        onArrowDown(value - 1);
+      if (!value) {
+        return;
       }
-      if (min === undefined) {
-        onArrowUp(value - 1);
+      if (min > 0 && (value || 0) === min) {
+        onArrowDown(0);
+        return;
       }
+
+      onArrowUp(value - 1);
     };
 
     const inputWrapperClasses = clsx("payment-number-input", className);
@@ -68,7 +88,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         </button>
         <FormControl
           type="number"
-          onChange={(e) => onChange(Number(e.target.value))}
+          onChange={(e) => handleChangeValue(Number(e.target.value))}
           value={value}
           min={min}
           max={max}

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

@@ -45,10 +45,6 @@ export const ProductQuantityInput = ({
   const { t } = useTranslation("Design");
 
   const onChange = (quantity: number | null) => {
-    let productQuantity = quantity;
-    if (product?.maxAmount && quantity > product?.maxAmount) {
-      productQuantity = product?.maxAmount;
-    }
     _onChange({
       id: product.id,
       name: product.name,
@@ -57,7 +53,7 @@ export const ProductQuantityInput = ({
       price: product.price,
       productCategoryId: category.id,
       zoneId: category.zone?.id,
-      quantity: productQuantity,
+      quantity,
       capacity: product?.capacity,
     });
   };
@@ -92,19 +88,19 @@ export const ProductQuantityInput = ({
     <NumberInput
       ref={refCallback}
       onChange={(val) => {
-        onChange(val || null);
+        onChange(val);
         clearErrors(`${product.id}` as const);
       }}
-      onArrowDown={() => {
-        onChange(productInfo?.quantity - 1 || 0);
+      onArrowDown={(val) => {
+        onChange(val || 0);
         clearErrors(`${product.id}` as const);
       }}
-      onArrowUp={() => {
-        onChange((productInfo?.quantity ?? 0) + 1);
+      onArrowUp={(val) => {
+        onChange(val || 0);
         clearErrors(`${product.id}` as const);
       }}
-      min={0}
-      max={product?.maxAmount ? Number(product?.maxAmount) : undefined}
+      min={product?.minAmount ? Number(product.minAmount) : 0}
+      max={product?.maxAmount ? Number(product.maxAmount) : undefined}
       placeholder="0"
       disabled={product.isSoldOut}
       value={productInfo?.quantity}

package/src/iframe/order-process/components/utils/useCategoryVerification.ts

@@ -1,8 +1,8 @@
-import { ProductCategory } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
 import { Currency } from "@licklist/core/dist/Config";
 import { useIntl } from "react-intl";
 import { useTranslation } from "react-i18next";
 import { OrderItems } from "@licklist/plugins/dist/types/context/Iframe/orderItems";
+import { ProductCategory } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 
 interface CategoryError {
   message: string;
@@ -15,14 +15,16 @@ export const useCategoryVerification = () => {
   const { formatNumber } = useIntl();
 
   return (
-    values: OrderItems,
+    orderItems: OrderItems,
     productCategories?: ProductCategory[],
     isLastPage?: boolean
   ): CategoryError | void => {
     let errorMessage: { id?: number; message: string } | void;
-    const productArray = Object.values(values).filter(
+
+    const productArray = Object.values(orderItems).filter(
       (product) => product?.quantity > 0
     );
+
     const sumOfMinSpends = productCategories.reduce((acc, productCategory) => {
       const { products } = productCategory;
       const selectedProducts = products.filter((product) =>

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -28,7 +28,9 @@ export const LeftBlock = ({
         {pageTitle && (
           <>
             {typeof pageTitle === "string" ? (
-              <div className="title">{pageTitle}</div>
+              <div className="title" id="navigation-title">
+                {pageTitle}
+              </div>
             ) : (
               pageTitle
             )}

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -63,7 +63,12 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail);
 
   const totalDiscount = calculateTotalDiscount(order.payments);
-  const totalWithDiscount = total - Number(totalDiscount);
+
+  const totalWithDiscount = order.orderPayments.reduce(
+    (acc, payment) => acc + payment.amount + payment.discountAmount,
+    0
+  );
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/product-set/card/ProductSetCard.tsx

@@ -18,6 +18,7 @@ export interface ProductSetCardProps extends HasPermissionProp {
   onCopy: () => void;
   onRemove: () => void;
   className?: string;
+  override?: number;
 }
 
 export function ProductSetCard({
@@ -28,6 +29,7 @@ export function ProductSetCard({
   onRemove,
   className = "",
   hasPermission = true,
+  override = 0,
 }: ProductSetCardProps) {
   const { t } = useTranslation("Design");
   const popoverId = useId();
@@ -44,7 +46,14 @@ export function ProductSetCard({
     >
       <div className={productSetCardClasses}>
         <div className="product-set-card-link">
-          {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
+          <div className="d-flex flex-column">
+            <div>
+              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
+            </div>
+            <div className="h6 bold ml-1">
+              {!!override && t("overridesAmount", { amount: override })}
+            </div>
+          </div>
         </div>
         <div className="d-flex">
           <div className="product-set-card-menu-eye-container">