@licklist/design 0.44.486-dev.1 → 0.44.486-dev.11

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

@@ -59,7 +59,7 @@ export const DateTimeButton = <T extends DateTime | string>({
         />
       )}
 
-      {price && <div className="price">{price}</div>}
+      {price && !isDisabled && <div className="price">{price}</div>}
 
       {/* TODO uncomment when adding availability */}
       {/* {info && (

package/src/iframe/event/event-calendar/EventCalendar.stories.tsx

@@ -1,37 +1,36 @@
 import React from "react";
 import { DateTime } from "luxon";
 import { Meta, Story } from "@storybook/react";
-import { boolean } from "@storybook/addon-knobs";
-import { EventCalendarProvider } from "@licklist/plugins/dist/context/event/EventCalendarContext";
-import { EventCalendar } from "./EventCalendar";
+import {
+  EventCalendarProvider,
+  getMonthCalendarDates,
+} from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { EventCalendar, EventCalendarProps } from "./EventCalendar";
 
 export default {
   title: "Iframe/Event/Calendar",
   component: EventCalendar,
 } as Meta;
 
-export const Default: Story<any> = (args) => {
-  const now = DateTime.now().set({
-    hour: 0,
-    second: 0,
-    millisecond: 0,
-    minute: 0,
-  });
-  const disabledDates = [now.minus({ day: 2 }), now, now.plus({ day: 2 })];
-
-  const isLoading = boolean("isLoading", false);
-
+export const Default: Story<EventCalendarProps> = (args) => {
   return (
-    <EventCalendarProvider>
+    <EventCalendarProvider getCalendarDates={getMonthCalendarDates}>
       <div style={{ backgroundColor: "white" }}>
-        <EventCalendar
-          {...args}
-          disabledDates={disabledDates}
-          isLoading={isLoading}
-        />
+        <EventCalendar {...args} />
       </div>
     </EventCalendarProvider>
   );
 };
 
-Default.args = {};
+const now = DateTime.now().set({
+  hour: 0,
+  second: 0,
+  millisecond: 0,
+  minute: 0,
+});
+
+Default.args = {
+  disabledDates: [now.minus({ day: 2 }), now, now.plus({ day: 2 })],
+  isLoading: false,
+  fromPrice: "from £10",
+};

package/src/iframe/event/event-calendar/EventCalendar.tsx

@@ -1,19 +1,26 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
 import { CalendarBaseProps } from "./types";
 
-export type EventCalendarProps = CalendarBaseProps;
+export type EventCalendarProps = CalendarBaseProps & {
+  fromPrice?: string | ReactElement | null;
+};
 
 export const EventCalendar = ({
   disabledDates = [],
   isLoading = false,
+  fromPrice,
 }: EventCalendarProps) => {
   return (
     <div className="calendar-wrapper">
       <div className="calendar">
         <CalendarButtons disabledDates={disabledDates} isLoading={isLoading} />
-        <CalendarDates disabledDates={disabledDates} isLoading={isLoading} />
+        <CalendarDates
+          disabledDates={disabledDates}
+          isLoading={isLoading}
+          fromPrice={fromPrice}
+        />
       </div>
     </div>
   );

package/src/iframe/event/event-calendar/components/CalendarDate/CalendarDate.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { Button } from "react-bootstrap";
 import { DateTime } from "luxon";
 import clsx from "clsx";
@@ -9,6 +9,7 @@ export type CalendarDateProps = {
   selectedDate?: DateTime;
   setSelectedDate: (date: DateTime) => void;
   isDisabled?: boolean;
+  fromPrice?: string | ReactElement | null;
 };
 
 export const CalendarDate = ({
@@ -17,6 +18,7 @@ export const CalendarDate = ({
   selectedDate,
   setSelectedDate,
   isDisabled = false,
+  fromPrice,
 }: CalendarDateProps) => {
   const onClick = () => {
     if (isDisabled) return;
@@ -37,7 +39,13 @@ export const CalendarDate = ({
       )}
       onClick={onClick}
     >
-      {currentDate.day}
+      <div>{currentDate.day}</div>
+
+      {typeof fromPrice === "string" ? (
+        <div>{fromPrice}</div>
+      ) : (
+        <>{fromPrice}</>
+      )}
     </Button>
   );
 };

package/src/iframe/event/event-calendar/components/CalendarDates/CalendarDates.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from "react";
+import React, { ReactElement, useContext, useMemo } from "react";
 import { DateTime } from "luxon";
 import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
 import { CalendarWeekdays } from "../CalendarWeekdays";
@@ -6,11 +6,14 @@ import { CalendarDate } from "../CalendarDate";
 import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
 
-export type CalendarDatesProps = CalendarBaseProps;
+export type CalendarDatesProps = CalendarBaseProps & {
+  fromPrice?: string | ReactElement | null;
+};
 
 export const CalendarDates = ({
   disabledDates = [],
   isLoading = false,
+  fromPrice,
 }: CalendarDatesProps) => {
   const { calendarDates, initialDate, selectedDate, setSelectedDate } =
     useContext(EventCalendarContext);
@@ -52,6 +55,7 @@ export const CalendarDates = ({
               selectedDate={selectedDate}
               setSelectedDate={setSelectedDate}
               isDisabled={isDisabled}
+              fromPrice={fromPrice}
             />
           );
         })}

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

@@ -11,6 +11,7 @@ import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
 
 export const BookingSummary = ({
   date,
+  time,
   menuSteps,
   formValues,
   isNotShownPeopleAmount,
@@ -47,6 +48,7 @@ export const BookingSummary = ({
         <div className="event-info">
           <p className="m-0 title event-name">{eventName}</p>
           <p className="m-0">{date}</p>
+          {time && <p className="m-0">{time}</p>}
         </div>
         <hr />
 

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

@@ -6,6 +6,7 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
+  time?: string;
   menuSteps?: MenuStep[];
   formValues?: {
     [key: string]: Order;

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

@@ -20,8 +20,8 @@ import { Step } from "@licklist/core/dist/DataMapper/Product/StepDataMapper";
 import { useTranslation } from "react-i18next";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { MenuStep } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { Category } from "./components/Category";
-import { MenuStep } from "../../../../types";
 import { STEP_FORM_ID } from "../../constants";
 import { ErrorModal } from "../ErrorModal/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
@@ -117,7 +117,7 @@ export const CalendarStepsForm = forwardRef<
         );
         return;
       }
-      const categoryError = verifyCategoryItems(values, step);
+      const categoryError = verifyCategoryItems(values, step.productCategories);
 
       if (categoryError) {
         setStepFormError(categoryError.message);

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

@@ -1,5 +1,6 @@
+import { ProductCategory } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
 import { useTranslation } from "react-i18next";
-import { MenuStep, Order } from "src/types";
+import { Order } from "src/types";
 
 interface CategoryError {
   message: string;
@@ -12,41 +13,39 @@ export const useCategoryVerification = () => {
 
   return (
     values: Record<Order["id"], Order>,
-    step: MenuStep
+    productCategories?: ProductCategory[]
   ): CategoryError | void => {
-    let errorMessage;
+    let errorMessage: { id: number; message: string } | void;
 
     const productArray = Object.values(values).filter(
       (product) => product?.quantity > 0
     );
 
-    step?.productCategories.forEach(
-      ({ minSubItems, maxSubItems, id, name }) => {
-        if (!minSubItems && !maxSubItems) return;
-
-        const categoryProductsQuantity = productArray.filter(
-          (product) => product?.productsCategoryId === id
-        ).length;
-
-        if (minSubItems && categoryProductsQuantity < minSubItems) {
-          const message = t("Validation:fieldMinNumber", {
-            min: minSubItems,
-            attribute: `number of products in the ${name} category`,
-          });
-          errorMessage = { id, message };
-
-          return;
-        }
-
-        if (maxSubItems && categoryProductsQuantity > maxSubItems) {
-          const message = t("Validation:fieldMaxNumber", {
-            max: maxSubItems,
-            attribute: `number of products in the ${name} category`,
-          });
-          errorMessage = { id, message };
-        }
+    productCategories.forEach(({ minSubItems, maxSubItems, id, name }) => {
+      if (!minSubItems && !maxSubItems) return;
+
+      const categoryProductsQuantity = productArray.filter(
+        (product) => product?.productsCategoryId === id
+      ).length;
+
+      if (minSubItems && categoryProductsQuantity < minSubItems) {
+        const message = t("Validation:fieldMinNumber", {
+          min: minSubItems,
+          attribute: `number of products in the ${name} category`,
+        });
+        errorMessage = { id, message };
+
+        return;
       }
-    );
+
+      if (maxSubItems && categoryProductsQuantity > maxSubItems) {
+        const message = t("Validation:fieldMaxNumber", {
+          max: maxSubItems,
+          attribute: `number of products in the ${name} category`,
+        });
+        errorMessage = { id, message };
+      }
+    });
 
     return errorMessage;
   };

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -9,15 +9,9 @@ import {
   PAYMENT_TYPE_NET_PROFIT,
 } from "@licklist/core/dist/DataMapper/Order/PaymentDataMapper";
 import { StaticTableData } from "../../../../table";
-import {
-  getProductQuantityAndPrice,
-  calculateTotalDiscount,
-  calculateTotalPrice,
-  getPaymentValueByType,
-  getExternalPaymentDetail,
-  getTotalSumByCategory,
-} from "../utils";
+import { getProductQuantityAndPrice, getTotalSumByCategory } from "../utils";
 import { OrderItemsTableProps, SummaryItem } from "../types";
+import { getOrderSummaryItems } from "../utils/paymentSummary";
 
 const CURRENCY_DEFAULT = "GBP";
 export const PAYMENT_TYPE_TRANSLATE_KEYS = {
@@ -114,9 +108,7 @@ export const useTableData = ({
     );
   };
 
-  const renderSummaryItems = (
-    summaryItems: { translateKey: string; price: number }[]
-  ) => {
+  const renderSummaryItems = (summaryItems: SummaryItem[]) => {
     return summaryItems.map(({ translateKey, price }) => {
       return {
         key: uniqueId(`summary-info-${translateKey}`),
@@ -127,93 +119,6 @@ export const useTableData = ({
     });
   };
 
-  const paymentNotProcessedSummary = () => {
-    const externalPaymentDetail = paymentDetail
-      ? getExternalPaymentDetail(paymentDetail)
-      : undefined;
-
-    const total = calculateTotalPrice(order, externalPaymentDetail);
-
-    const summaryItems: SummaryItem[] = [
-      {
-        translateKey: "amountTotal",
-        price: total,
-      },
-    ];
-
-    if (externalDiscount) {
-      summaryItems.push({
-        price: externalDiscount,
-        translateKey: "amountWithDiscount",
-      });
-    }
-
-    if (externalPaymentDetail) {
-      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
-    }
-
-    return summaryItems;
-  };
-
-  const processedPaymentSummary = () => {
-    const externalPaymentDetail =
-      paymentDetail && !order.payments.length
-        ? getExternalPaymentDetail(paymentDetail)
-        : Object.keys(PAYMENT_TYPE_TRANSLATE_KEYS).map((key) => {
-            return {
-              translateKey: PAYMENT_TYPE_TRANSLATE_KEYS[key],
-              price: getPaymentValueByType(order.payments, key),
-            };
-          });
-
-    const total = calculateTotalPrice(order, externalPaymentDetail);
-
-    const totalDiscount = calculateTotalDiscount(order.payments);
-    const totalWithDiscount = total - Number(totalDiscount);
-    let summaryItems: SummaryItem[] = [
-      {
-        translateKey: "amountTotal",
-        price: total,
-      },
-    ];
-
-    if (totalDiscount) {
-      summaryItems.push({
-        translateKey: "amountWithDiscount",
-        price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
-      });
-    }
-
-    if (paymentDetail && !order.payments.length) {
-      return [...summaryItems, ...externalPaymentDetail];
-    }
-
-    summaryItems.push({
-      translateKey: "totalPaid",
-      price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
-    });
-    if (totalWithDiscount <= 0) {
-      return summaryItems;
-    }
-    summaryItems = [...summaryItems, ...externalPaymentDetail];
-
-    if (totalWithDiscount > order.totalAmount) {
-      summaryItems.push({
-        translateKey: "remainingToPay",
-        price: totalWithDiscount - order.totalAmount,
-      });
-    }
-    return summaryItems;
-  };
-
-  const getOrderSummaryItems = () => {
-    if (!isPaymentProcessed) {
-      return paymentNotProcessedSummary();
-    }
-
-    return processedPaymentSummary();
-  };
-
   const data = useMemo(
     () => {
       if (!order) {
@@ -222,7 +127,14 @@ export const useTableData = ({
 
       return [
         ...renderProductsContent(),
-        ...renderSummaryItems(getOrderSummaryItems()),
+        ...renderSummaryItems(
+          getOrderSummaryItems({
+            order,
+            paymentDetail,
+            isPaymentProcessed,
+            externalDiscount,
+          })
+        ),
       ];
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/iframe/payment/order-items-table/types/index.ts

@@ -1,7 +1,24 @@
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
 
-export type SummaryItem = { translateKey: string; price: number };
+export const AMOUNT_TOTAL = "amountTotal";
+export const AMOUNT_WITH_DISCOUNT = "amountWithDiscount";
+export const TOTAL_PAID = "totalPaid";
+export const REMAINING_TO_PAY = "remainingToPay";
+
+export const SUMMARY_TRANSLATE_KEYS = [
+  AMOUNT_TOTAL,
+  AMOUNT_WITH_DISCOUNT,
+  TOTAL_PAID,
+  REMAINING_TO_PAY,
+];
+
+export type SUMMARY_TRANSLATE_KEY = typeof SUMMARY_TRANSLATE_KEYS[number];
+
+export type SummaryItem = {
+  translateKey: SUMMARY_TRANSLATE_KEY;
+  price: number;
+};
 
 export type OrderItemsTableProps = {
   order?: Order;

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

@@ -0,0 +1,118 @@
+import { PAYMENT_TYPE_TRANSLATE_KEYS } from "../hooks/useTableData";
+import {
+  AMOUNT_TOTAL,
+  AMOUNT_WITH_DISCOUNT,
+  OrderItemsTableProps,
+  REMAINING_TO_PAY,
+  SummaryItem,
+  TOTAL_PAID,
+} from "../types";
+import {
+  calculateTotalDiscount,
+  calculateTotalPrice,
+  getExternalPaymentDetail,
+  getPaymentValueByType,
+} from "./index";
+
+const paymentNotProcessedSummary = ({
+  order,
+  externalDiscount,
+  paymentDetail,
+}: OrderItemsTableProps) => {
+  const externalPaymentDetail = paymentDetail
+    ? getExternalPaymentDetail(paymentDetail)
+    : undefined;
+
+  const total = calculateTotalPrice(order, externalPaymentDetail);
+
+  const summaryItems: SummaryItem[] = [
+    {
+      translateKey: AMOUNT_TOTAL,
+      price: total,
+    },
+  ];
+
+  if (externalDiscount) {
+    summaryItems.push({
+      price: externalDiscount,
+      translateKey: AMOUNT_WITH_DISCOUNT,
+    });
+  }
+
+  if (externalPaymentDetail) {
+    return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+  }
+
+  return summaryItems;
+};
+
+const processedPaymentSummary = ({
+  order,
+  paymentDetail,
+}: OrderItemsTableProps) => {
+  const externalPaymentDetail =
+    paymentDetail && !order.payments.length
+      ? getExternalPaymentDetail(paymentDetail)
+      : Object.keys(PAYMENT_TYPE_TRANSLATE_KEYS).map((key) => {
+          return {
+            translateKey: PAYMENT_TYPE_TRANSLATE_KEYS[key],
+            price: getPaymentValueByType(order.payments, key),
+          };
+        });
+
+  const total = calculateTotalPrice(order, externalPaymentDetail);
+
+  const totalDiscount = calculateTotalDiscount(order.payments);
+  const totalWithDiscount = total - Number(totalDiscount);
+  let summaryItems: SummaryItem[] = [
+    {
+      translateKey: AMOUNT_TOTAL,
+      price: total,
+    },
+  ];
+
+  if (totalDiscount) {
+    summaryItems.push({
+      translateKey: AMOUNT_WITH_DISCOUNT,
+      price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+    });
+  }
+
+  if (paymentDetail && !order.payments.length) {
+    return [...summaryItems, ...externalPaymentDetail];
+  }
+
+  summaryItems.push({
+    translateKey: TOTAL_PAID,
+    price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+  });
+  if (totalWithDiscount <= 0) {
+    return summaryItems;
+  }
+  summaryItems = [...summaryItems, ...externalPaymentDetail];
+
+  if (totalWithDiscount > order.totalAmount) {
+    summaryItems.push({
+      translateKey: REMAINING_TO_PAY,
+      price: totalWithDiscount - order.totalAmount,
+    });
+  }
+  return summaryItems;
+};
+
+export const getOrderSummaryItems = ({
+  order,
+  externalDiscount,
+  paymentDetail,
+  isPaymentProcessed,
+}: OrderItemsTableProps): SummaryItem[] => {
+  if (!isPaymentProcessed) {
+    return paymentNotProcessedSummary({
+      order,
+      externalDiscount,
+      paymentDetail,
+    });
+  }
+
+  return processedPaymentSummary({ order, paymentDetail });
+};

package/src/provider/working-hours-input/WorkingHoursInputDescription.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { Col, Row } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { useIntl } from "react-intl";
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
 import { WorkingHoursInputValues } from ".";
 import { useWeekdays } from "./utils";
 
@@ -12,7 +12,9 @@ export function WorkingHoursInputDescription() {
   const values = watch("workingHours");
   const weekdays = useWeekdays("short");
   const { t } = useTranslation("Design");
-  const { formatTime } = useIntl();
+
+  if (!values) return null;
+
   return (
     <>
       {Array.from({ length: weekdays.length }, (_, i) => i)
@@ -26,16 +28,16 @@ export function WorkingHoursInputDescription() {
                 {weekday?.end
                   ? weekday.start
                     ? t("timeInterval", {
-                        start: formatTime(
-                          DateTime.fromISO(weekday.start).toJSDate()
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
                         ),
-                        end: formatTime(
-                          DateTime.fromISO(weekday.end).toJSDate()
+                        end: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
                         ),
                       })
                     : t("timeFrom", {
-                        start: formatTime(
-                          DateTime.fromISO(weekday.start).toJSDate()
+                        start: DateTime.fromISO(weekday.start).toFormat(
+                          TIME_FORMAT
                         ),
                       })
                   : null}

package/src/recurring-date-picker-input/RecurrenceIntervalAndFrequencyInput.tsx

@@ -3,7 +3,7 @@ import { DateTime } from "luxon";
 import { Col, Form, Row } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useFormContext } from "react-hook-form";
-import { DATE_FORMAT, TIME_FORMAT } from "@licklist/core/dist/Config";
+import { DATE_FORMAT } from "@licklist/core/dist/Config";
 import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
 
 interface RecurrenceIntervalAndFrequencyInputProps {
@@ -30,6 +30,7 @@ function RecurrenceIntervalAndFrequencyInput({
     formState: { errors },
     register,
     trigger,
+    setValue,
   } = useFormContext<RecurringDatePickerInputValues>();
 
   const startDate = getValues("startDate");
@@ -109,7 +110,7 @@ function RecurrenceIntervalAndFrequencyInput({
         </Col>
       </Row>
 
-      <Row className="align-items-center">
+      <Row>
         <Col xs={12} sm={6}>
           <Form.Group>
             <Form.Label>
@@ -118,6 +119,9 @@ function RecurrenceIntervalAndFrequencyInput({
             <Form.Control
               type="time"
               {...register("startTime", { required: false })}
+              onChange={({ target: { value } }) => {
+                setValue("startTime", `${value}:00`);
+              }}
               placeholder="hh:mm"
               defaultValue={startTime}
               disabled={disabled}
@@ -137,14 +141,11 @@ function RecurrenceIntervalAndFrequencyInput({
                   if (!startTime || !time) {
                     return true;
                   }
-                  const currentStartTime = DateTime.fromFormat(
-                    startTime,
-                    TIME_FORMAT
-                  );
-                  const currentEndTime = DateTime.fromFormat(time, TIME_FORMAT);
+                  const currentStartTime = DateTime.fromISO(startTime);
+                  const currentEndTime = DateTime.fromISO(time);
 
-                  return currentEndTime.diff(currentStartTime, ["minutes"])
-                    .minutes > 0
+                  return currentEndTime?.diff(currentStartTime, ["seconds"])
+                    ?.seconds > 0
                     ? true
                     : `${t(`Validation:fieldLaterDate`, {
                         attribute: t("Design:endTimeSmall"),
@@ -152,6 +153,9 @@ function RecurrenceIntervalAndFrequencyInput({
                       })}`;
                 },
               })}
+              onChange={({ target: { value } }) => {
+                setValue("endTime", `${value}:59`, { shouldValidate: true });
+              }}
               placeholder="hh:mm"
               defaultValue={endTime}
               disabled={disabled}