@licklist/design 0.58.3-dev.8 → 0.58.3

package/dist/styles/report/ReportRunnerModal.scss

@@ -1,101 +1,95 @@
 .report-runner-modal {
-  .modal-dialog {
-    @include media-breakpoint-up(sm) {
-      max-width: 45rem;
+    .modal-dialog {
+      @include media-breakpoint-up(sm) {
+        max-width: 45rem;
+      }
     }
-  }
-
-  .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;
+  
+    .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;
+        }
+  
+        button {
+          padding-top: 0.5rem;
+          padding-bottom: 0.5rem;
+          font-size: 0.875rem;
+          font-weight: 600;
+          color: #0e8ce2;
+        }
       }
-
-      button {
-        padding-top: 0.5rem;
-        padding-bottom: 0.5rem;
+  
+      .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;
+          }
+        }
+      }
+  
+      .edit-button {
+        padding: 0;
         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;
+        text-decoration: underline;
+  
+        &:focus {
+          box-shadow: none;
         }
       }
-    }
-
-    .edit-button {
-      padding: 0;
-      font-size: 0.875rem;
-      font-weight: 600;
-      color: #0e8ce2;
-      text-decoration: underline;
-
-      &:focus {
-        box-shadow: none;
+  
+      input {
+        border-radius: 0.5rem;
       }
-    }
-
-    input {
-      border-radius: 0.5rem;
-    }
-
-    form {
-      margin-top: 1.25rem;
-
-      .period-by {
-        display: flex;
-        gap: 2rem;
+  
+      form {
         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;
+        }
       }
-
-      .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;
       }
     }
-
-    .loader {
-      height: 10rem;
-    }
-  }
-}
+  }

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14rem;
+      height: 14.25rem;
       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-dev.8",
+  "version": "0.58.3",
   "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.22.1-dev.3 < 0.22.1",
+    "@licklist/core": "^0.20.0",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": ">=0.27.1-dev.0 < 0.27.1",
+    "@licklist/plugins": "^0.26.0",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",

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

@@ -2,6 +2,7 @@ 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,
-                productCategoryId: undefined,
-                zoneId,
-              })),
+          products: products?.map(({ zoneId, subProducts, ...product }) => ({
+            ...product,
+            subProducts: subProducts?.map(({ zoneId, ...subProducts }) => ({
+              ...subProducts,
               productCategoryId: undefined,
-              zoneId,
-            })) ?? [],
-        })) ?? [],
+              zoneId: zoneId as number,
+            })),
+            productCategoryId: undefined,
+            zoneId: zoneId as number,
+          })),
+        })
+      ),
       venueMapSetId: step?.venueMapSet ? step?.venueMapSet?.id : null,
-    })) ?? [],
+    })) ?? undefined,
   menuRecurrences: hasNoRecurrences ? [] : productSet?.menuRecurrences ?? [],
 });

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

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

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

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

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

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

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

@@ -45,6 +45,10 @@ 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,
@@ -53,7 +57,7 @@ export const ProductQuantityInput = ({
       price: product.price,
       productCategoryId: category.id,
       zoneId: category.zone?.id,
-      quantity,
+      quantity: productQuantity,
       capacity: product?.capacity,
     });
   };
@@ -88,19 +92,19 @@ export const ProductQuantityInput = ({
     <NumberInput
       ref={refCallback}
       onChange={(val) => {
-        onChange(val);
+        onChange(val || null);
         clearErrors(`${product.id}` as const);
       }}
-      onArrowDown={(val) => {
-        onChange(val || 0);
+      onArrowDown={() => {
+        onChange(productInfo?.quantity - 1 || 0);
         clearErrors(`${product.id}` as const);
       }}
-      onArrowUp={(val) => {
-        onChange(val || 0);
+      onArrowUp={() => {
+        onChange((productInfo?.quantity ?? 0) + 1);
         clearErrors(`${product.id}` as const);
       }}
-      min={product?.minAmount ? Number(product.minAmount) : 0}
-      max={product?.maxAmount ? Number(product.maxAmount) : undefined}
+      min={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,16 +15,14 @@ export const useCategoryVerification = () => {
   const { formatNumber } = useIntl();
 
   return (
-    orderItems: OrderItems,
+    values: OrderItems,
     productCategories?: ProductCategory[],
     isLastPage?: boolean
   ): CategoryError | void => {
     let errorMessage: { id?: number; message: string } | void;
-
-    const productArray = Object.values(orderItems).filter(
+    const productArray = Object.values(values).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,9 +28,7 @@ export const LeftBlock = ({
         {pageTitle && (
           <>
             {typeof pageTitle === "string" ? (
-              <div className="title" id="navigation-title">
-                {pageTitle}
-              </div>
+              <div className="title">{pageTitle}</div>
             ) : (
               pageTitle
             )}

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

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

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

@@ -61,7 +61,7 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   productGroups?: SelectItem[];
   relyOnPeopleType?: RelyOnPeopleType | null;
   fieldSetId?: number;
-  steps: Step[];
+  steps?: Step[];
   emailTemplates?: TemplateItem[];
   smsTemplates?: TemplateItem[];
 }

package/src/product-set/form/ProductSetForm.tsx

@@ -26,18 +26,14 @@ import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 export interface WithIsLoading {
   isLoading: boolean;
 }
-export interface WithIdOptional {
-  id?: number;
-}
-
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
-  steps: Step[];
+  steps?: Step[];
 }
 
 export interface ProductSetFormProps

package/src/report/ReportRunnerModal/ReportRunnerModal.tsx

@@ -1,12 +1,4 @@
-import {
-  GenerateReportBody,
-  PERIOD_BY_BOOKING_DATE,
-  PERIOD_BY_CREATION_DATE,
-  PERIOD_BY_TYPES,
-  Report,
-  ReportPeriodBy,
-  ReportType,
-} from "@licklist/core/dist/DataMapper/Report";
+import { Report, ReportType } from "@licklist/core/dist/DataMapper/Report";
 import { capitalize } from "lodash";
 import React from "react";
 import { Button, Form, Modal } from "react-bootstrap";
@@ -36,11 +28,9 @@ type ReportRunnerModalProps = {
   reports?: Report[] | null;
 };
 
-type FormValues = Pick<GenerateReportBody, "dateFrom" | "dateTo" | "periodBy">;
-
-const labelByPeriodType: Record<ReportPeriodBy, string> = {
-  [PERIOD_BY_CREATION_DATE]: "Design:reportPeriodByCreationDate",
-  [PERIOD_BY_BOOKING_DATE]: "Design:reportPeriodByBookingDate",
+type FormValues = {
+  dateFrom: string;
+  dateTo: string;
 };
 
 export const ReportRunnerModal = ({
@@ -136,27 +126,6 @@ export const ReportRunnerModal = ({
           </Button>
 
           <form noValidate>
-            <div className="period-by">
-              {PERIOD_BY_TYPES.map((type) => (
-                <div key={type}>
-                  <Form.Group>
-                    <Form.Check
-                      inline
-                      isInvalid={!!errors.periodBy}
-                      label={t(labelByPeriodType[type])}
-                      type="radio"
-                      id={type}
-                      value={type}
-                      {...register("periodBy")}
-                    />
-                    <Form.Control.Feedback type="invalid">
-                      {errors.periodBy?.message}
-                    </Form.Control.Feedback>
-                  </Form.Group>
-                </div>
-              ))}
-            </div>
-
             <div className="controls">
               <Form.Group controlId="from-input">
                 <Form.Label>{t("Design:from")}</Form.Label>

package/src/sales/booking/results/components/ResultCard.tsx

@@ -12,6 +12,7 @@ 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 = {
@@ -21,6 +22,8 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
+// @TODO integrate when API will be available
+// activity and staff keys
 export const ResultCard = ({
   order,
   className,

package/src/static/switch/BooleanSwitch.tsx

@@ -23,7 +23,7 @@ export function BooleanSwitch({
   const { t } = useTranslation("Design");
 
   const options: SelectItem[] = [
-    { id: 1, value: firstValueTitle ?? t("yes") },
+    { id: 1, value: firstValueTitle ??  t("yes") },
     { id: 0, value: secondValueTitle ?? t("no") },
   ];
 

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

@@ -1,5 +1,4 @@
 @import "../snippet-templates/snippetVariables";
-@import "../themes//bookedit/variables";
 
 .iframe-event-card {
   position: relative;
@@ -19,27 +18,12 @@
     background-size: cover;
     background-position: center;
     cursor: pointer;
+    border: 1px solid transparent;
     border-radius: 0.5rem;
   }
 
   .card-body {
-    padding: 0.5rem 0 0.875rem 0;
-
-    @include media-breakpoint-down(sm) {
-      padding: 1rem 0;
-    }
-  }
-
-  &__info-icon {
-    position: absolute;
-    right: 1rem;
-    top: 1rem;
-    background-color: "#ffffff";
-    border-radius: 1.5rem;
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
-    font-weight: $white;
-    border: 1px solid $black;
+    padding: 0.5rem 0 0.875rem;
   }
 
   &__title {
@@ -49,7 +33,7 @@
     line-height: 1.25rem;
     cursor: pointer;
     margin-bottom: 0.5rem;
-    font-size: 0.95rem;
+    font-size: 1.125rem;
   }
 
   &__label {
@@ -98,8 +82,7 @@
         color: $snippet-elements-button-color;
         border: none;
         background-color: $snippet-elements-button-background-color;
-        box-shadow: 0 0 0 $input-btn-focus-width
-          $snippet-elements-button-background-color;
+        box-shadow: 0 0 0 $input-btn-focus-width $snippet-elements-button-background-color;
       }
 
       &:disabled {
@@ -112,14 +95,14 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: 0.7;
+        opacity: .7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: 0.8;
+        opacity: .8;
       }
     }
   }
@@ -140,7 +123,7 @@
   }
 
   .card-text {
-    font-size: 0.82rem;
+    font-size: 0.875rem;
   }
 
   &.event-info {
@@ -219,6 +202,7 @@
 
   @media (max-width: 576px) {
     &.list-view {
+
       .card-image {
         margin-right: 0.5rem;
       }