@licklist/design 0.53.0-dev.4 → 0.53.0

package/dist/styles/sales/SourceOfSales.scss

@@ -13,9 +13,6 @@
 
   &__pie-chart {
     height: 100%;
-    @include media-breakpoint-down(sm) {
-      height: 12rem;
-    }
   }
 
   .colors-0 {

package/dist/styles/snippet-templates/SnippetTemplate.scss

@@ -59,8 +59,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 {
@@ -73,14 +72,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: 0.7;
+          opacity: .7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: 0.8;
+          opacity: .8;
         }
       }
     }
@@ -91,7 +90,7 @@
   }
 
   &__label {
-    font-size: 0.8rem;
+    font-size: .8rem;
     margin-top: 1rem;
     margin-bottom: 0.2rem;
   }
@@ -104,8 +103,8 @@
     position: absolute;
     top: 0;
     right: 0;
-    margin-right: 0.5rem;
-    margin-top: 0.5rem;
+    margin-right: .5rem;
+    margin-top: .5rem;
   }
 
   .form-label {
@@ -182,8 +181,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 {
@@ -196,14 +194,14 @@
       &:focus,
       &.focus {
         &:not(:disabled) {
-          opacity: 0.7;
+          opacity:  .7;
         }
       }
 
       &:active,
       &.active {
         &:not(:disabled) {
-          opacity: 0.8;
+          opacity: .8;
         }
       }
     }
@@ -338,8 +336,7 @@
       }
     }
 
-    .bottom-wrapper,
-    .snippet-template__form {
+    .bottom-wrapper, .snippet-template__form {
       .btn {
         border-radius: 0.25rem;
         width: 100%;
@@ -384,10 +381,6 @@
   }
 }
 
-.disabled-number-input-button {
-  background-color: $snippet-calendar-disabled-button-font-color !important;
-  border-color: $snippet-calendar-disabled-button-font-color !important;
-}
 .color-picker {
   &__color {
     position: absolute;
@@ -449,6 +442,7 @@
       }
     }
   }
+    
 }
 
 @include media-breakpoint-down(xs) {

package/dist/styles/snippet-templates/SnippetTemplateCard.scss

@@ -28,13 +28,12 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
   border: 1px solid #ccc;
   border-radius: $border-radius;
   height: 10rem;
-  min-width: 15rem;
+  width: 15rem;
   padding: 1rem;
 
   @include media-breakpoint-down(sm) {
     height: 100%;
     max-height: 10rem;
-    width: 100%;
   }
 
   p {
@@ -110,4 +109,4 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
   &:hover {
     border: 2px solid $blue;
   }
-}
+}

package/dist/styles/static/Tabs.scss

@@ -11,12 +11,6 @@ $tab-nav-link-active-border-bottom: 1px solid $tab-nav-link-active-color !defaul
   margin-left: -1.25rem;
   border-bottom: 1px solid $nav-tabs-border-color;
 
-  @include media-breakpoint-down(sm) {
-    display: flex;
-    flex-direction: column;
-    white-space: nowrap;
-  }
-
   .nav-link {
     color: $tab-nav-link-color;
     background-color: transparent;

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

@@ -98,8 +98,7 @@
       color: gray("600");
 
       &.sortable {
-        &::before,
-        &::after {
+        &::before, &::after {
           opacity: 1;
         }
 
@@ -133,20 +132,20 @@
     width: 2.5rem;
     height: 2.5rem;
     background-color: transparent;
-
+  
     svg {
       margin-bottom: 2.5px;
     }
 
     &:hover {
       cursor: pointer;
-      border-radius: 0.5rem;
+      border-radius: .5rem;
       background-color: lighten($primary, 40);
     }
   }
 
   .page-item {
-    margin-left: 0.4rem;
+    margin-left: .4rem;
     min-width: 15px;
     width: 2.5rem;
     height: 2.5rem;
@@ -154,7 +153,7 @@
     .page-link {
       border: 0;
       padding: 0;
-      border-radius: 0.5rem;
+      border-radius: .5rem;
       height: 100%;
       display: flex;
       align-items: center;
@@ -163,13 +162,13 @@
       color: $black;
       font-weight: 600;
       font-size: 0.875rem;
-
+      
       &:hover {
-        border-radius: 0.5rem;
+        border-radius: .5rem;
         background-color: lighten($primary, 40);
       }
     }
-
+    
     &.active {
       .page-link {
         border: 2px solid $primary;

package/dist/styles/themes/bookedit/_variables.scss

@@ -197,7 +197,6 @@ $grid-breakpoints: (
   md: 768px,
   lg: 992px,
   xl: 1200px,
-  xxl: 1500px,
 ) !default;
 
 @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
@@ -212,7 +211,6 @@ $container-max-widths: (
   md: 720px,
   lg: 960px,
   xl: 1140px,
-  xxl: 1500px,
 ) !default;
 
 @include _assert-ascending($container-max-widths, "$container-max-widths");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.53.0-dev.4",
+  "version": "0.53.0",
   "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.15.41-dev.0 < 0.15.41",
+    "@licklist/core": "^0.17.0",
     "@licklist/eslint-config": "0.3.4",
-    "@licklist/plugins": ">=0.24.0-dev.0 < 0.24.0",
+    "@licklist/plugins": "^0.25.0",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",

package/src/auth/Login/LoginComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState } from "react";
 import Row from "react-bootstrap/Row";
 import Col from "react-bootstrap/Col";
 import { Trans, useTranslation } from "react-i18next";
@@ -90,14 +90,6 @@ const LoginComponent = ({
     RouteService.redirectTo("/");
   };
 
-  useEffect(() => {
-    if (!user.profile || !auth.secrets) {
-      return;
-    }
-
-    RouteService.redirectTo("/");
-  }, [user.profile, auth.secrets]);
-
   return (
     <Router>
       <Row className="justify-content-center">

package/src/calendar/Calendar.tsx

@@ -1,9 +1,12 @@
 import React, { Dispatch, ReactElement, SetStateAction } from "react";
 import { DateTime } from "luxon";
-import { DateTimeButtonProps } from "src/date-time-button";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
 
+// same as apps/iframe/src/types/availability.ts
+export type AvailableTimes = Record<string, string[]>;
+
 export const defaultStartDay = DateTime.now().set({
   millisecond: 0,
   second: 0,
@@ -15,28 +18,32 @@ export type CalendarProps = {
   currentDate: DateTime;
   setCurrentDate: Dispatch<SetStateAction<DateTime>>;
   calendarDates: DateTime[];
+  disabledDates?: DateTime[];
   selectedDate: DateTime | null;
   setSelectedDate: Dispatch<SetStateAction<DateTime | null>>;
   fromPrice?: string | ReactElement | null;
   isLoading?: boolean;
   initialDate?: DateTime;
-  getDateTimeButtonProps: (
-    date: DateTime
-  ) => Pick<
-    DateTimeButtonProps,
-    "resources" | "showResources" | "shouldCalculateResources" | "isDisabled"
-  >;
+  getAvailability?: (date: DateTime) => ZoneResourcesAvailability | null;
+  includeAvailability?: boolean;
+  availableTimes?: AvailableTimes;
+  shouldCalculateResources?: boolean;
 };
 
 export const Calendar = ({
+  disabledDates = [],
   initialDate = defaultStartDay,
   ...props
 }: CalendarProps) => {
   return (
     <div className="calendar-wrapper">
       <div className="calendar">
-        <CalendarButtons initialDate={initialDate} {...props} />
-        <CalendarDates {...props} />
+        <CalendarButtons
+          disabledDates={disabledDates}
+          initialDate={initialDate}
+          {...props}
+        />
+        <CalendarDates disabledDates={disabledDates} {...props} />
       </div>
     </div>
   );

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -4,25 +4,26 @@ import { useTranslation } from "react-i18next";
 import { range } from "lodash";
 import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
+import { isDateDisabled } from "../../utils";
 import { CalendarProps } from "../../Calendar";
 
 type CalendarButtonsProps = Pick<
   CalendarProps,
   | "isLoading"
+  | "disabledDates"
   | "initialDate"
   | "currentDate"
   | "setCurrentDate"
   | "setSelectedDate"
-  | "getDateTimeButtonProps"
 >;
 
 export const CalendarButtons = ({
+  disabledDates = [],
   isLoading = false,
   initialDate,
   currentDate,
   setCurrentDate,
   setSelectedDate,
-  getDateTimeButtonProps,
 }: CalendarButtonsProps) => {
   const { t } = useTranslation("Design");
 
@@ -65,9 +66,7 @@ export const CalendarButtons = ({
   const onTodayClick = () => {
     setCurrentDate(initialDate);
 
-    const { isDisabled } = getDateTimeButtonProps(initialDate);
-
-    if (isDisabled) return;
+    if (isDateDisabled(initialDate, disabledDates)) return;
 
     setSelectedDate(initialDate);
   };
@@ -76,9 +75,7 @@ export const CalendarButtons = ({
     const nextDate = initialDate.set({ day: initialDate.day + 1 });
     setCurrentDate(nextDate);
 
-    const { isDisabled } = getDateTimeButtonProps(initialDate);
-
-    if (isDisabled) return;
+    if (isDateDisabled(nextDate, disabledDates)) return;
 
     setSelectedDate(nextDate);
   };

package/src/calendar/components/CalendarDates/CalendarDates.tsx

@@ -2,25 +2,25 @@ import React, { useMemo } from "react";
 import { DateTime } from "luxon";
 import { DateTimeButton, Variant } from "../../../date-time-button";
 import { CalendarWeekdays } from "../CalendarWeekdays";
+import { isDateDisabled } from "../../utils";
 import { CalendarProps } from "../../Calendar";
 
-export type CalendarDatesProps = Pick<
+export type CalendarDatesProps = Omit<
   CalendarProps,
-  | "isLoading"
-  | "calendarDates"
-  | "selectedDate"
-  | "setSelectedDate"
-  | "fromPrice"
-  | "getDateTimeButtonProps"
+  "currentDate" | "setCurrentDate" | "initialDate"
 >;
 
 export const CalendarDates = ({
+  disabledDates = [],
   isLoading = false,
   calendarDates,
   selectedDate,
   setSelectedDate,
   fromPrice,
-  getDateTimeButtonProps,
+  getAvailability,
+  includeAvailability,
+  shouldCalculateResources,
+  availableTimes,
 }: CalendarDatesProps) => {
   const fillCalendarDates = useMemo(() => {
     let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
@@ -46,9 +46,8 @@ export const CalendarDates = ({
         {fillCalendarDates.map((date: DateTime | null) => {
           if (date === null) return <div />;
 
-          const props = getDateTimeButtonProps(date);
-
-          const isDisabled = isLoading || props.isDisabled;
+          const isDisabled =
+            isLoading || isDateDisabled(date, disabledDates, availableTimes);
 
           return (
             <DateTimeButton
@@ -60,8 +59,10 @@ export const CalendarDates = ({
               date={date}
               onSelect={() => setSelectedDate(date)}
               price={fromPrice}
+              resources={getAvailability?.(date)}
+              showResources={includeAvailability}
               variant={Variant.month}
-              {...props}
+              shouldCalculateResources={shouldCalculateResources}
             />
           );
         })}

package/src/calendar/utils/index.ts

@@ -1,4 +1,23 @@
 import { DateTime, Interval } from "luxon";
+import isEqual from "lodash/isEqual";
+import { DATE_FORMAT } from "@licklist/core/dist/Config";
+import { AvailableTimes } from "../Calendar";
+
+export const isDateDisabled = (
+  date: DateTime,
+  disabledDates: DateTime[] = [],
+  availableTimes?: AvailableTimes
+): boolean => {
+  const disabledByDates = !!disabledDates.find((disabledDate) =>
+    isEqual(disabledDate.toObject(), date.toObject())
+  );
+
+  const noAvailableTimes = availableTimes
+    ? !availableTimes?.[date.toFormat(DATE_FORMAT)]
+    : false;
+
+  return disabledByDates || noAvailableTimes;
+};
 
 export const getMonthCalendarDates = (initialDate: DateTime): DateTime[] => {
   const startOfMonth = initialDate.startOf("month");

package/src/date-time-button/DateTimeButton.tsx

@@ -14,12 +14,12 @@ export enum Variant {
 
 export type DateTimeButtonProps = {
   date: DateTime;
-  isSelected: boolean;
-  isDisabled: boolean;
+  isSelected?: boolean;
+  isDisabled?: boolean;
   isSoldOut?: boolean;
   onSelect: (date: DateTime) => void;
   price?: string | number | ReactElement | null;
-  resources?: ZoneResourcesAvailability | null;
+  resources: ZoneResourcesAvailability | null | undefined;
   showResources?: boolean;
   shouldCalculateResources?: boolean;
   variant: Variant;

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useRef, useEffect } from "react";
-import { DateTime } from "luxon";
+import React, { useMemo, useState, useRef, useEffect } from "react";
+import { DateTime, Interval } from "luxon";
 import { Col, Form } from "react-bootstrap";
-import { Controller, useFormContext, useWatch } from "react-hook-form";
+import { Controller, RegisterOptions, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { useIntl } from "react-intl";
 
 import { useId } from "@react-aria/utils";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
@@ -10,7 +11,6 @@ import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
 import { RecurrenceInput } from "../../recurrence-input";
 import { WarningMessage } from "../../static";
 import { ProductSetFormValues } from "../../product-set/form";
-import { useFormattedDuration, useValidationOptions } from "./hooks";
 
 interface IntervalInputProps {
   editedProductSet?: ProductSetFormValues;
@@ -35,6 +35,7 @@ export function IntervalInput({
   const {
     register,
     formState: { errors },
+    watch,
     control,
     trigger,
     setValue,
@@ -43,9 +44,9 @@ export function IntervalInput({
   const formattedDuration = useFormattedDuration();
   const validationOptions = useValidationOptions();
 
-  const rrule = useWatch({ control, name: "rrule" });
-  const start = useWatch({ control, name: "start" });
-  const end = useWatch({ control, name: "end" });
+  const rrule = watch("rrule");
+  const start = watch("start");
+  const end = watch("end");
   const [recurrent, setRecurrent] = useState(Boolean(rrule));
   const [isOverriden, setIsOverriden] = useState(false);
   const recurrentId = useId();
@@ -122,7 +123,6 @@ export function IntervalInput({
               onChangeEndDate(nextEndtDate)
             }
             min={start}
-            required
             isInvalid={Boolean(errors.end)}
             onClick={() => endDateInput?.current?.showPicker()}
             ref={endDateInput}
@@ -180,3 +180,75 @@ export function IntervalInput({
     </>
   );
 }
+
+const useFormattedDuration = () => {
+  const { watch } = useFormContext<IntervalInputValues>();
+  const start = watch("start");
+  const end = watch("end");
+  const { formatList, formatNumber } = useIntl();
+
+  return useMemo(() => {
+    const interval = Interval.fromDateTimes(
+      DateTime.fromISO(start),
+      DateTime.fromISO(end)
+    ).toDuration(["days", "hours", "minutes"]);
+
+    if (!interval.isValid) return undefined;
+
+    const formatUnit = (value: number, unit: string) =>
+      formatNumber(value, { style: "unit", unit, unitDisplay: "long" });
+
+    const units = (
+      [
+        [interval.days, "day"],
+        [interval.hours, "hour"],
+        [interval.minutes, "minute"],
+      ] as Parameters<typeof formatUnit>[]
+    ).filter(([value]) => value);
+
+    return formatList(
+      units.map((args) => formatUnit(...args)),
+      { style: "long", type: "unit" }
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [start, end]);
+};
+
+const useValidationOptions = () => {
+  const { watch } = useFormContext();
+  const { t } = useTranslation(["Design", "Validation"]);
+  const start = watch("start");
+  const end = watch("end");
+
+  return {
+    start: useMemo<RegisterOptions>(
+      () => ({
+        required: t("Validation:fieldRequired", {
+          attribute: t("start"),
+        }) as string,
+        // TODO: uncomment when event splitting is implemented
+        // and extract into plugins
+        validate: (value) =>
+          DateTime.fromISO(value).diffNow().toMillis() > 0 ||
+          (t("Validation:fieldValidEventStart") as string),
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      []
+    ),
+
+    end: useMemo<RegisterOptions>(
+      () => ({
+        // TODO: uncomment when event splitting is implemented
+        // and extract into plugins
+        validate: (value) =>
+          // endAt not required
+          value
+            ? DateTime.fromISO(value).diff(DateTime.fromISO(start)).toMillis() >
+                0 || (t("Validation:fieldValidEventEnd") as string)
+            : true,
+      }),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [start, end]
+    ),
+  };
+};

package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx

@@ -20,7 +20,6 @@ export const BookingSummary = ({
   productsWithErrors = [],
   isLoading,
   hasPeopleInput,
-  isPaymentLink,
   peopleAmount,
 }: Omit<BookingSummaryProps, "totallWithDiscount">) => {
   const { t } = useTranslation("Design");
@@ -50,7 +49,6 @@ export const BookingSummary = ({
               <div className="products-by-menu-step">
                 {menuSteps.map((menuStep) => (
                   <ProductsByMenuStep
-                    isPaymentLink={isPaymentLink}
                     key={menuStep.id}
                     orderItems={formValues}
                     step={menuStep}

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -8,27 +8,21 @@ type ProductSummaryProps = {
   name?: string;
   productQuantityError?: string;
   orderProduct: OrderItem;
-  isPaymentLink?: boolean;
 };
 
 export const ProductSummary = ({
   name,
   productQuantityError,
   orderProduct,
-  isPaymentLink,
 }: ProductSummaryProps) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
 
-  const priceForOneProduct =
-    !isPaymentLink && orderProduct?.hasDeposit
-      ? orderProduct?.deposit
-      : orderProduct?.price;
-
-  const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
-    style: "currency",
-    currency: Config.Currency.GBP,
-  });
+  const price = formatNumber(
+    (orderProduct?.deposit || orderProduct?.price || 0) *
+      orderProduct?.quantity,
+    { style: "currency", currency: Config.Currency.GBP }
+  );
 
   return (
     <div className="product">
@@ -38,7 +32,7 @@ export const ProductSummary = ({
           {t("shortQuantity")}:&nbsp;{orderProduct?.quantity}
         </p>
 
-        <p className="price">{fullPrice}</p>
+        <p className="price">{price}</p>
       </div>
 
       {productQuantityError && (

package/src/iframe/order-process/components/BookingSummary/components/ProductsByMenuStep/ProductsByMenuStep.tsx

@@ -29,14 +29,12 @@ export type ProductsByMenuStepsProps = {
   orderItems: OrderItems;
   step: MenuStep;
   productsWithErrors?: QuantityCheckProductInfo[];
-  isPaymentLink?: boolean;
 };
 
 export const ProductsByMenuStep = ({
   orderItems,
   step,
   productsWithErrors = [],
-  isPaymentLink,
 }: ProductsByMenuStepsProps) => {
   const { productCategories } = step;
 
@@ -64,7 +62,6 @@ export const ProductsByMenuStep = ({
 
               return (
                 <ProductSummary
-                  isPaymentLink={isPaymentLink}
                   key={orderItem.id}
                   name={orderItem.name}
                   productQuantityError={productQuantityError}

package/src/iframe/order-process/components/BookingSummary/types/index.ts

@@ -19,5 +19,4 @@ export type BookingSummaryProps = {
   productsWithErrors?: QuantityCheckProductInfo[];
   isLoading?: boolean;
   peopleAmount: number;
-  isPaymentLink?: boolean;
 };