@licklist/design 0.58.4-dev.1 → 0.58.4

package/dist/static/manual-date-picker/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/constants/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,UAA+B,CAAC;AACvD,eAAO,MAAM,YAAY;;;GAA+B,CAAC;AACzD,eAAO,MAAM,WAAW,UAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/constants/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,UAA+B,CAAC;AACvD,eAAO,MAAM,YAAY,UAA+B,CAAC;AACzD,eAAO,MAAM,WAAW,UAAuB,CAAC"}

package/dist/static/manual-date-picker/constants/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../utils/index.js"),r=e.generateDatesArray(1,31,1),t=e.generateMonthsOptionsArray(),s=e.generateYearsArray();exports.DAYS_ARRAY=r,exports.MONTHS_ARRAY=t,exports.YEARS_ARRAY=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../utils/index.js"),r=e.generateDatesArray(1,31,1),t=e.generateDatesArray(1,12,1),s=e.generateYearsArray();exports.DAYS_ARRAY=r,exports.MONTHS_ARRAY=t,exports.YEARS_ARRAY=s;

package/dist/static/manual-date-picker/utils/index.d.ts

@@ -1,8 +1,4 @@
 export declare const generateDatesArray: (start: number, end: number, step: number) => number[];
-export declare const generateMonthsOptionsArray: () => {
-    key: string;
-    value: number;
-}[];
 export declare const generateYearsArray: () => number[];
 export declare const dateToSqlDate: (day: number, month: number, year: number) => string;
 //# sourceMappingURL=index.d.ts.map

package/dist/static/manual-date-picker/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,UAAW,MAAM,OAAO,MAAM,QAAQ,MAAM,aAIxE,CAAC;AAEJ,eAAO,MAAM,0BAA0B;;;GASnC,CAAC;AAEL,eAAO,MAAM,kBAAkB,gBAQ9B,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,SAAS,MAAM,QAAQ,MAAM,WAUrE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/static/manual-date-picker/utils/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,UAAW,MAAM,OAAO,MAAM,QAAQ,MAAM,aAIxE,CAAC;AAEJ,eAAO,MAAM,kBAAkB,gBAQ9B,CAAC;AAEF,eAAO,MAAM,aAAa,QAAS,MAAM,SAAS,MAAM,QAAQ,MAAM,WAUrE,CAAC"}

package/dist/static/manual-date-picker/utils/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.dateToSqlDate=function(r,t,e){var n=function(r){return r<10?"0".concat(r):r};return"".concat(e,"-").concat(n(t),"-").concat(n(r))},exports.generateDatesArray=function(r,t,e){return Array.from({length:(t-r)/e+1},(function(r,t){return 1+t*e}))},exports.generateMonthsOptionsArray=function(){return Array.from({length:12},(function(r,t){var e=t+1,n=String(e);return e<10&&(n="0".concat(n)),{key:n,value:e}}))},exports.generateYearsArray=function(){var r=(new Date).getFullYear()-100;return Array.from({length:100},(function(t,e){return r+e+1})).sort((function(r,t){return t-r}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.dateToSqlDate=function(r,t,e){var n=function(r){return r<10?"0".concat(r):r};return"".concat(e,"-").concat(n(t),"-").concat(n(r))},exports.generateDatesArray=function(r,t,e){return Array.from({length:(t-r)/e+1},(function(r,t){return 1+t*e}))},exports.generateYearsArray=function(){var r=(new Date).getFullYear()-100;return Array.from({length:100},(function(t,e){return r+e+1})).sort((function(r,t){return t-r}))};

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

@@ -4,14 +4,4 @@
   align-items: center;
   gap: 0.5rem;
   font-weight: 300;
-
-  @include media-breakpoint-down(sm) {
-    div {
-      display: none;
-    }
-
-    svg {
-      scale: 2;
-    }
-  }
 }

package/dist/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;
       }

package/dist/styles/iframe-events/PoweredBy.scss

@@ -3,7 +3,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 0.75rem 0 2rem;
+    padding: 0 0.75rem;
     height: 2rem;
     width: 100%;
     font-size: 0.75rem;
@@ -27,4 +27,4 @@
       color: $blue;
     }
   }
-}
+}

package/dist/styles/iframe-order-process/IframeOrderProcess.scss

@@ -58,6 +58,8 @@
 
 .payment-booking-summary {
   transition: $color-transition;
+  background-color: transparent;
+  border: 1px solid transparent;
   border-radius: $iframe-border-radius;
   font-weight: 400;
   font-size: 0.875rem;

package/dist/styles/iframe-page/Page.scss

@@ -21,7 +21,6 @@
 
   @include media-breakpoint-down(sm) {
     height: 100svh;
-    min-width: auto;
   }
 
   .header-block {

package/dist/styles/iframe-page/PageBody.scss

@@ -12,6 +12,9 @@
   .left-block {
     flex: 1;
     align-items: stretch;
+    border-radius: 0.5rem;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     padding: 1rem;
     background-color: $snippet-page-body-left-block-background-color;
     border: 0;
@@ -30,6 +33,7 @@
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+
       .title {
         color: $snippet-elements-body-color;
         margin: 0;
@@ -60,7 +64,7 @@
       overflow-x: hidden;
       scrollbar-width: thin;
       .iframe-event-card {
-        border-bottom: 1px solid $separator-color;
+        border-bottom: 2px solid $separator-color;
       }
 
       @include media-breakpoint-down(sm) {
@@ -77,6 +81,8 @@
   }
 
   .right-block {
+    margin-left: 1rem;
+    border-radius: 0.5rem;
     height: calc(100% - 1rem);
     max-width: 17.5rem;
     min-width: 17.5rem;
@@ -109,7 +115,7 @@
       }
 
       .collapse {
-        max-height: calc(100vh - 15rem);
+        max-height: calc(100vh - 19rem);
         transition: none 0s ease 0s;
 
         &.show {
@@ -119,7 +125,7 @@
         }
 
         @include media-breakpoint-down(sm) {
-          max-height: 100%;
+          max-height: 7.5rem;
         }
       }
       .collapse-with-people-input {
@@ -145,14 +151,8 @@
     }
 
     .iframe-event-card {
-      border: none;
-
-      .card-image {
-        border-radius: 0;
-      }
-      .card-body {
-        padding-left: 1rem;
-      }
+      background-color: transparent;
+      border-color: transparent;
     }
 
     .price {
@@ -262,24 +262,3 @@
     }
   }
 }
-
-.event-list-page-body {
-  overflow: auto;
-  .left-block {
-    .navigation {
-      font-size: 1.125rem;
-      font-weight: 500;
-      padding-bottom: 2.625rem;
-      display: flex;
-      align-items: flex-start;
-      justify-content: space-between;
-      margin-top: 0.125rem;
-
-      .title {
-        position: absolute;
-        color: $snippet-elements-body-color;
-        margin: 0;
-      }
-    }
-  }
-}

package/dist/styles/iframe-page/PageHeader.scss

@@ -20,57 +20,55 @@ $base-height: 2.5rem;
       transition: $color-transition;
       border: 0;
     }
-  }
-}
-
-.iframe-page {
-  .button-wrapper {
-    background-color: $snippet-page-header-steps-close-button-background-color;
-    height: $base-height;
-    width: $base-height;
-    border-radius: $base-height;
-    transition: $color-transition;
 
-    .close-button {
-      font-size: 1.25rem;
-      width: $base-height;
+    .button-wrapper {
+      background-color: $snippet-page-header-steps-close-button-background-color;
       height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: $snippet-page-header-steps-close-button-border-color;
+      width: $base-height;
+      border-radius: $base-height;
       transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+      .close-button {
+        font-size: 1.25rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
+
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.close-button {
-      margin-left: 1rem;
-    }
+      &.close-button {
+        margin-left: 1rem;
+      }
 
-    .back-button {
-      font-size: 2rem;
-      width: $base-height;
-      height: $base-height;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: lighter;
-      color: $snippet-page-header-steps-close-button-border-color;
-      transition: $color-transition;
+      .back-button {
+        font-size: 2rem;
+        width: $base-height;
+        height: $base-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        color: $snippet-page-header-steps-close-button-border-color;
+        transition: $color-transition;
 
-      &:hover {
-        cursor: pointer;
+        &:hover {
+          cursor: pointer;
+        }
       }
-    }
 
-    &.back-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin-right: 1rem;
+      &.back-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 1rem;
+      }
     }
   }
 }

package/dist/styles/product-set/EditVenueMapSetModal.scss

@@ -91,7 +91,7 @@
   }
 
   @include media-breakpoint-down(sm) {
-    top: 100%;
+    top: 50%;
   
     .step-save-btn {
       width: 100%;

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.4-dev.1",
+  "version": "0.58.4",
   "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.23.1",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": ">=0.27.1-dev.0 < 0.27.1",
+    "@licklist/plugins": "^0.27.2",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",

package/src/calendar/Calendar.stories.tsx

@@ -2,7 +2,6 @@ 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",
@@ -25,16 +24,10 @@ 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: getMonthCalendarDates(now),
-  currentDate: now,
-  getDateTimeButtonProps: () => ({
-    resources: [],
-    showResources: false,
-    shouldCalculateResources: false,
-    isDisabled: false,
-  }),
+  calendarDates: [],
 };

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

@@ -32,44 +32,24 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     ref
   ) => {
     const minusButtonGreyedOut = !value;
-    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 plusButtonGreyedOut = max !== undefined && value === max;
 
     const handleArrowUpClick = () => {
-      if (max > 0 && value === max) {
-        return;
+      if (max !== undefined && (value || 0) < max) {
+        onArrowUp(value + 1);
       }
-
-      if (min > 0 && (value || 0) < min) {
-        onArrowUp(min);
-        return;
+      if (max === undefined) {
+        onArrowUp(value + 1);
       }
-
-      onArrowUp((value || 0) + 1);
     };
 
     const handleArrowDownClick = () => {
-      if (!value) {
-        return;
+      if (min !== undefined && value > min) {
+        onArrowDown(value - 1);
       }
-      if (min > 0 && (value || 0) === min) {
-        onArrowDown(0);
-        return;
+      if (min === undefined) {
+        onArrowUp(value - 1);
       }
-
-      onArrowUp(value - 1);
     };
 
     const inputWrapperClasses = clsx("payment-number-input", className);
@@ -88,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/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/card/ProductSetCard.tsx

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