@licklist/design 0.58.5 → 0.58.6-dev.1

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -49,6 +49,7 @@ export interface ProductCategoryControlProps extends IsDeletableEvent {
   onCategoryNameChange: (args: any) => void;
   stepIndex: number;
   productCategoryIndex: number;
+  isOverride?: boolean;
 }
 
 const categoriesWithTickets = [
@@ -63,6 +64,7 @@ export function ProductCategoryControl({
   onCategoryNameChange,
   productCategoryIndex,
   stepIndex,
+  isOverride = false,
 }: ProductCategoryControlProps) {
   const {
     control,
@@ -157,7 +159,7 @@ export function ProductCategoryControl({
               errors
             )}
             placeholder={t("name")}
-            disabled={isLoading}
+            disabled={isLoading || isOverride}
           />
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<ProductSetFormValues>(
@@ -183,7 +185,7 @@ export function ProductCategoryControl({
                   }))}
                   value={field.value}
                   onChange={field.onChange}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverride}
                 />
               </Form.Group>
             )}
@@ -227,7 +229,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                       name={name}
                     />
                   )}
@@ -299,7 +301,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                     />
                   )}
                   control={control}
@@ -337,6 +339,7 @@ export function ProductCategoryControl({
                   render={({ field }) => (
                     <Form.Control
                       as="select"
+                      disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.zoneId`,
                         errors
@@ -384,6 +387,7 @@ export function ProductCategoryControl({
             <Form.Check.Input
               checked={expanded}
               onChange={handleExpand}
+              disabled={isOverride}
               type="checkbox"
             />
             <Form.Check.Label>{t("showAdvancedOptions")}</Form.Check.Label>
@@ -452,7 +456,7 @@ export function ProductCategoryControl({
                         name={name}
                         value={Boolean(value)}
                         onChange={onChange}
-                        disabled={isLoading}
+                        disabled={isLoading || isOverride}
                       />
                     )}
                     control={control}
@@ -476,7 +480,7 @@ export function ProductCategoryControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading}
+                          disabled={isLoading || isOverride}
                         />
                       )}
                       control={control}
@@ -499,7 +503,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={Boolean(value)}
                       onChange={onChange}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                     />
                   )}
                   control={control}
@@ -527,7 +531,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                       name={name}
                     />
                   )}

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

@@ -0,0 +1,93 @@
+import React, { PropsWithChildren } from "react";
+import { Frequency } from "rrule";
+import { useTranslation } from "react-i18next";
+import Button from "react-bootstrap/Button";
+import { DateTime } from "luxon";
+import { TIME_FULL_FORMAT } from "@licklist/core/dist/Config/Date";
+import { FormProvider, useForm } from "react-hook-form";
+import { Form } from "react-bootstrap";
+import { ConfirmModal } from "../modals";
+import { DeleteFieldButton } from "../product-set/elements";
+import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
+import RecurrenceAndFrequencyInput from "./RecurrenceAndFrequencyInput";
+
+export interface RecurringDatePickerInputProps {
+  disabled?: boolean;
+  defaultValues?: Partial<RecurringDatePickerInputValues>;
+  onChange: (state: RecurringDatePickerInputValues) => void;
+  onDelete: () => void;
+  initialFrequency?: Frequency;
+  setInitialStartDateAfterSelect?: boolean;
+  minDate?: string;
+}
+
+export interface DatePickerInputValues {
+  startDate: string;
+  startTime: string;
+  endTime: string;
+}
+
+export function DatePickerInput({
+  disabled = false,
+  onChange,
+  onDelete,
+  defaultValues,
+  children,
+  minDate,
+}: PropsWithChildren<RecurringDatePickerInputProps>) {
+  const { t } = useTranslation(["Design"]);
+
+  const form = useForm<DatePickerInputValues>({
+    defaultValues: {
+      startDate: defaultValues?.startDate ?? "",
+      startTime: defaultValues?.startTime ?? "",
+      endTime: defaultValues?.endTime ?? "",
+    },
+    mode: "onChange",
+  });
+
+  const { handleSubmit } = form;
+
+  const onSubmit = (nextState: RecurringDatePickerInputValues) => {
+    const endTimeNextState = nextState?.endTime
+      ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
+      : "";
+
+    onChange({
+      ...nextState,
+      endTime: endTimeNextState,
+    });
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        noValidate
+        onSubmit={(event) => {
+          // prevents parent form submitting
+          event.preventDefault();
+          event.stopPropagation();
+          return handleSubmit(onSubmit)(event);
+        }}
+      >
+        <RecurrenceAndFrequencyInput disabled={disabled} minDate={minDate} />
+
+        {children}
+
+        <div className="d-inline-flex align-items-center w-100">
+          <Button type="submit">{t("Design:apply")}</Button>
+
+          {defaultValues && (
+            <div className="d-flex justify-content-end delete-btn">
+              <ConfirmModal>
+                {(confirm) => (
+                  <DeleteFieldButton onDelete={() => confirm(onDelete)} />
+                )}
+              </ConfirmModal>
+            </div>
+          )}
+        </div>
+      </Form>
+    </FormProvider>
+  );
+}

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

@@ -0,0 +1,136 @@
+import React, { useEffect } from "react";
+import { DateTime } from "luxon";
+import { Col, Form, Row } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import { RegisterOptions, useFormContext } from "react-hook-form";
+import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
+
+interface RecurrenceIntervalAndFrequencyInputProps {
+  disabled?: boolean;
+  minDate?: string;
+  startDateLabel?: string;
+  startTimeLabel?: string;
+  endDateLabel?: string;
+  endTimeLabel?: string;
+  startTimeRules?: Pick<
+    RegisterOptions,
+    "max" | "min" | "validate" | "required" | "pattern"
+  >;
+  endTimeRules?: Pick<
+    RegisterOptions,
+    "max" | "min" | "validate" | "required" | "pattern"
+  >;
+}
+
+function RecurrenceAndFrequencyInput({
+  disabled = false,
+  minDate,
+  startDateLabel,
+  startTimeLabel,
+  endTimeLabel,
+  startTimeRules,
+  endTimeRules,
+}: RecurrenceIntervalAndFrequencyInputProps) {
+  const { t } = useTranslation(["Design", "Notification", "App"]);
+
+  const {
+    getValues,
+    formState: { errors },
+    register,
+    trigger,
+  } = useFormContext<RecurringDatePickerInputValues>();
+
+  const startDate = getValues("startDate");
+  const startTime = getValues("startTime");
+  const endTime = getValues("endTime");
+
+  useEffect(() => {
+    if (!startTime || !endTime) {
+      return;
+    }
+    trigger("endTime");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startTime]);
+
+  return (
+    <>
+      <Row>
+        <Col xs={12} sm={6}>
+          <Form.Group>
+            <Form.Label>{startDateLabel ?? t("Design:fromDate")}</Form.Label>
+            <Form.Control
+              type="date"
+              {...register("startDate", { required: true })}
+              defaultValue={startDate}
+              className={startDate && "date-input-with-value"}
+              disabled={disabled}
+              min={minDate}
+              isInvalid={Boolean(errors.startDate)}
+            />
+            <Form.Control.Feedback type="invalid">
+              {errors.startDate?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Col>
+      </Row>
+
+      <Row>
+        <Col xs={12} sm={6}>
+          <Form.Group>
+            <Form.Label>
+              {startTimeLabel ?? t("Design:availableFrom")}
+            </Form.Label>
+            <Form.Control
+              type="time"
+              {...register("startTime", { required: false, ...startTimeRules })}
+              placeholder="hh:mm"
+              defaultValue={startTime}
+              disabled={disabled}
+              isInvalid={Boolean(errors.startTime)}
+            />
+            <Form.Control.Feedback type="invalid">
+              {errors.startTime?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Col>
+
+        <Col xs={12} sm={6}>
+          <Form.Group>
+            <Form.Label>{endTimeLabel ?? t("Design:availableTo")}</Form.Label>
+            <Form.Control
+              type="time"
+              {...register("endTime", {
+                required: false,
+                validate: (time) => {
+                  if (!startTime || !time) {
+                    return true;
+                  }
+                  const currentStartTime = DateTime.fromISO(startTime);
+                  const currentEndTime = DateTime.fromISO(time);
+
+                  return currentEndTime?.diff(currentStartTime, ["minutes"])
+                    ?.minutes >= 0
+                    ? true
+                    : `${t(`Validation:fieldLaterDate`, {
+                        attribute: t("Design:endTimeSmall"),
+                        min: t("Design:startTimeSmall"),
+                      })}`;
+                },
+                ...endTimeRules,
+              })}
+              placeholder="hh:mm"
+              defaultValue={endTime}
+              disabled={disabled}
+              isInvalid={Boolean(errors.endTime)}
+            />
+            <Form.Control.Feedback type="invalid">
+              {errors.endTime?.message}
+            </Form.Control.Feedback>
+          </Form.Group>
+        </Col>
+      </Row>
+    </>
+  );
+}
+
+export default RecurrenceAndFrequencyInput;

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

@@ -336,7 +336,10 @@ const useFormattedDuration = ({
   }, [start, end, byWeekDay, formatList, formatNumber]);
 };
 
-const getDateTimeObject = (date: string, time: string): DateTime | string => {
+export const getDateTimeObject = (
+  date: string,
+  time: string
+): DateTime | string => {
   const dateTime = DateTime.fromFormat(`${date} ${time}`, DATE_TIME_FORMAT);
 
   if (dateTime.isValid) {

package/src/sales/booking/results/BookingResults.stories.tsx

@@ -3,11 +3,12 @@ import { Meta } from "@storybook/react";
 import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { User } from "@licklist/core/dist/DataMapper/User/UserDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import {
+  Order,
   ORDER_SOURCE_IFRAME,
   ORDER_SOURCE_MANUAL,
-} from "@licklist/core/src/DataMapper/Order/OrderDataMapper";
+} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+
 import { BookingResults } from "./BookingResults";
 
 export default {

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

@@ -12,7 +12,6 @@ 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 = {
@@ -22,8 +21,6 @@ export type ResultCardProps = {
   onCardClick?: (id: number) => void;
 };
 
-// @TODO integrate when API will be available
-// activity and staff keys
 export const ResultCard = ({
   order,
   className,
@@ -41,10 +38,10 @@ export const ResultCard = ({
     startDate,
     products,
     source,
-    totalAmount,
     event,
     menu,
     remainingToPay,
+    paidAmount,
   } = order;
 
   const productList = products.map((product) => product.name)?.join(", ") || "";
@@ -108,7 +105,7 @@ export const ResultCard = ({
           )}
           <p>
             {t("paidAmount")}:{" "}
-            {formatNumber(totalAmount, {
+            {formatNumber(paidAmount, {
               style: "currency",
               currency: Config.Currency.GBP,
             })}

package/src/sortable-list/SortableList.tsx

@@ -33,6 +33,7 @@ type SortableListProps<T> = {
   renderItemContent: (args: RenderItemContentArgs<T>) => ReactNode;
   setItems?: Dispatch<SetStateAction<SortableItem<T>[]>>;
   isExpandNewItem?: boolean;
+  isOverrides?: boolean;
 };
 
 export const SORTABLE_ID_KEY = "_sortableId";
@@ -44,6 +45,7 @@ export function SortableList<T>({
   renderItemContent,
   setItems,
   isExpandNewItem = false,
+  isOverrides = false,
 }: SortableListProps<T>) {
   const [sortedItems, setSortedItems] = useState(items);
 
@@ -97,6 +99,7 @@ export function SortableList<T>({
   );
 
   function handleDragEnd(event) {
+    if (isOverrides) return;
     const { active, over } = event;
 
     if (active.id !== over.id) {

package/src/sortable-tree/SortableTreeItem.tsx

@@ -52,6 +52,8 @@ export interface SortableTreeItemProps {
     className: string;
   };
   setIsExpanded?: () => void;
+  isOverride?: boolean;
+  isProduct?: boolean;
 }
 
 export function SortableTreeItem({
@@ -78,6 +80,8 @@ export function SortableTreeItem({
   edit,
   secondaryBadge,
   setIsExpanded,
+  isOverride,
+  isProduct = false,
 }: SortableTreeItemProps) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [isModalVisible, setIsModalVisible] = useState(isNewAdded);
@@ -98,6 +102,7 @@ export function SortableTreeItem({
     transform: dragTransform,
   } = useDraggable({
     id,
+    disabled: isOverride,
   });
 
   const onHandleExpand = useCallback(
@@ -145,6 +150,7 @@ export function SortableTreeItem({
   };
 
   const onEdit = (e) => {
+    if (isOverride && !isProduct) return;
     e.stopPropagation();
     if (edit && !isModalVisible) edit();
     setIsModalVisible(true);

package/src/static/manual-date-picker/ManualDatePicker.tsx

@@ -61,9 +61,9 @@ export const ManualDatePicker = ({
             disabled={isDisabled}
           >
             <option value="">{t("Design:monthShort")}</option>
-            {MONTHS_ARRAY.map((key) => (
-              <option key={key} value={key}>
-                {key}
+            {MONTHS_ARRAY.map((object) => (
+              <option key={object.key} value={object.value}>
+                {object.key}
               </option>
             ))}
           </Form.Control>

package/src/static/manual-date-picker/constants/index.ts

@@ -1,5 +1,9 @@
-import { generateDatesArray, generateYearsArray } from "../utils";
+import {
+  generateDatesArray,
+  generateMonthsOptionsArray,
+  generateYearsArray,
+} from "../utils";
 
 export const DAYS_ARRAY = generateDatesArray(1, 31, 1);
-export const MONTHS_ARRAY = generateDatesArray(1, 12, 1);
+export const MONTHS_ARRAY = generateMonthsOptionsArray();
 export const YEARS_ARRAY = generateYearsArray();

package/src/static/manual-date-picker/utils/index.ts

@@ -4,6 +4,17 @@ export const generateDatesArray = (start: number, end: number, step: number) =>
     (_, index) => 1 + index * step
   );
 
+export const generateMonthsOptionsArray = () =>
+  Array.from({ length: 12 }, (_, index) => {
+    const value = index + 1;
+    let key = String(value);
+    if (value < 10) {
+      key = `0${key}`;
+    }
+
+    return { key, value };
+  });
+
 export const generateYearsArray = () => {
   const currentYear = new Date().getFullYear();
   const ageBackYear = currentYear - 100;

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/availability-indicator/AvailabilityIndicator.scss

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

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

@@ -1,4 +1,5 @@
 @import "../snippet-templates/snippetVariables";
+@import "../themes//bookedit/variables";
 
 .iframe-event-card {
   position: relative;
@@ -18,12 +19,27 @@
     background-size: cover;
     background-position: center;
     cursor: pointer;
-    border: 1px solid transparent;
     border-radius: 0.5rem;
   }
 
   .card-body {
-    padding: 0.5rem 0 0.875rem;
+    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;
   }
 
   &__title {
@@ -33,7 +49,7 @@
     line-height: 1.25rem;
     cursor: pointer;
     margin-bottom: 0.5rem;
-    font-size: 1.125rem;
+    font-size: 0.95rem;
   }
 
   &__label {
@@ -82,7 +98,8 @@
         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 {
@@ -95,14 +112,14 @@
     &:focus,
     &.focus {
       &:not(:disabled) {
-        opacity: .7;
+        opacity: 0.7;
       }
     }
 
     &:active,
     &.active {
       &:not(:disabled) {
-        opacity: .8;
+        opacity: 0.8;
       }
     }
   }
@@ -123,7 +140,7 @@
   }
 
   .card-text {
-    font-size: 0.875rem;
+    font-size: 0.82rem;
   }
 
   &.event-info {
@@ -202,7 +219,6 @@
 
   @media (max-width: 576px) {
     &.list-view {
-
       .card-image {
         margin-right: 0.5rem;
       }

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

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

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

@@ -58,8 +58,6 @@
 
 .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/src/styles/iframe-page/Page.scss

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