@licklist/design 0.58.9 → 0.58.10

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

@@ -0,0 +1,137 @@
+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:date")}</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/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(
@@ -120,6 +125,8 @@ export function SortableTreeItem({
     [position, setIsExpanded]
   );
 
+  const isVisibleDeleteButton = Boolean(onDelete) && !isOverride;
+
   const onButtonMouseDown = useCallback((event) => {
     setPosition({ pageX: event.pageX, pageY: event.pageY });
   }, []);
@@ -145,6 +152,7 @@ export function SortableTreeItem({
   };
 
   const onEdit = (e) => {
+    if (isOverride && !isProduct) return;
     e.stopPropagation();
     if (edit && !isModalVisible) edit();
     setIsModalVisible(true);
@@ -340,8 +348,8 @@ export function SortableTreeItem({
                     >
                       {t("saveAndAdd")}
                     </Button>
-                    <div className="d-flex justify-content-end mt-4 delete-btn">
-                      {Boolean(onDelete) && (
+                    {isVisibleDeleteButton && (
+                      <div className="d-flex justify-content-end mt-4 delete-btn">
                         <ConfirmModal>
                           {(confirm) => (
                             <DeleteFieldButton
@@ -349,8 +357,8 @@ export function SortableTreeItem({
                             />
                           )}
                         </ConfirmModal>
-                      )}
-                    </div>
+                      </div>
+                    )}
                   </div>
                 </Modal.Body>
               </Modal>
@@ -366,7 +374,7 @@ export function SortableTreeItem({
                   items={sortableItems}
                   strategy={verticalListSortingStrategy}
                 >
-                  <Collapse in={expanded}>
+                  <Collapse  in={expanded}>
                     <div className="ml-0">{children}</div>
                   </Collapse>
                 </SortableContext>

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

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