@licklist/design 0.44.526 → 0.44.528

package/src/sortable-fields/SortableFieldList.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import type { ReactNode } from "react";
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+} from "@dnd-kit/sortable";
+
+import { DragHandle, SortableFieldItem } from "./SortableFieldItem";
+
+interface BaseItem {
+  id: UniqueIdentifier;
+}
+
+export interface SortableFieldListProps<T extends BaseItem> {
+  items: T[];
+  onChange(activeIndex: number, overIndex: number): void;
+  renderItem(item: T, index: number): ReactNode;
+}
+
+export function SortableFieldList<T extends BaseItem>({
+  items,
+  onChange,
+  renderItem,
+}: SortableFieldListProps<T>) {
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  return (
+    <DndContext
+      sensors={sensors}
+      onDragEnd={({ active, over }) => {
+        if (over && active.id !== over?.id) {
+          const activeIndex = items.findIndex(({ id }) => id === active.id);
+          const overIndex = items.findIndex(({ id }) => id === over.id);
+
+          onChange(activeIndex, overIndex);
+        }
+      }}
+    >
+      <SortableContext items={items}>
+        {items.map((item, index) => (
+          <div key={item.id}>{renderItem(item, index)}</div>
+        ))}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+SortableFieldList.Item = SortableFieldItem;
+SortableFieldList.DragHandle = DragHandle;

package/src/sortable-fields/index.ts

@@ -0,0 +1 @@
+export { SortableFieldList } from "./SortableFieldList";

package/src/sortable-tree/SortableTreeItem.tsx

@@ -130,7 +130,7 @@ export function SortableTreeItem({
     const success = await validate?.();
 
     if (success) {
-      saveValidField?.();
+      if (saveValidField) saveValidField();
       setIsModalVisible(false);
     }
   };

package/src/sorting-select/SortingSelect.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { SortingSelect, SortingSelectProps } from "./SortingSelect";
+
+export default {
+  title: "SortingSelect",
+} as Meta;
+
+export const Default: Story<SortingSelectProps> = (props) => {
+  return <SortingSelect {...props} />;
+};
+
+Default.args = {
+  onSortingChange: () => null,
+};

package/src/sorting-select/SortingSelect.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useState } from "react";
+import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
+import { Form, FormGroupProps } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+import {
+  SORT_DIRECTION_ASC,
+  SORT_DIRECTION_NEWEST,
+  SORT_DIRECTION_DESC,
+  SORT_KEY_NAME,
+  SORT_KEY_CREATED_AT,
+} from "@licklist/core/dist/Config";
+
+export type SortingSelectProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  formGroupProps?: FormGroupProps & Record<string, any>;
+  defaultSortKey?: string;
+  defaultSortDirection?: string;
+  onSortingChange?: (url: URLSearchParams) => void;
+};
+
+export const SortingSelect = ({
+  formGroupProps,
+  defaultSortKey = SORT_KEY_NAME,
+  defaultSortDirection = SORT_DIRECTION_ASC,
+  onSortingChange,
+}: SortingSelectProps) => {
+  const { t } = useTranslation("Design");
+  const [controlValue, setControlValue] = useState(SORT_DIRECTION_ASC);
+  const searchParams = useQuery();
+
+  const { sortKey = defaultSortKey, sortDirection = defaultSortDirection } =
+    Object.fromEntries(searchParams);
+
+  const onSortingValueChange = ({ target: { value } }) => {
+    setControlValue(value);
+
+    const nextSortDirection =
+      value === SORT_DIRECTION_NEWEST ? SORT_DIRECTION_DESC : value;
+
+    const nextSortKey =
+      value === SORT_DIRECTION_NEWEST ? SORT_KEY_CREATED_AT : sortKey;
+
+    const nextSearchParams = new URLSearchParams(searchParams);
+
+    nextSearchParams.set("sortDirection", nextSortDirection);
+    nextSearchParams.set("sortKey", nextSortKey);
+
+    onSortingChange(nextSearchParams);
+  };
+
+  useEffect(() => {
+    if (sortKey === SORT_KEY_CREATED_AT) {
+      setControlValue(SORT_DIRECTION_NEWEST);
+      return;
+    }
+
+    setControlValue(sortDirection);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortKey, sortDirection]);
+
+  return (
+    <Form.Group className="d-flex align-items-center p-0" {...formGroupProps}>
+      <Form.Label className="text-nowrap mr-4 mb-0">
+        {t("App:sortBy")}:
+      </Form.Label>
+      <Form.Control
+        as="select"
+        data-testid="sorting-select"
+        onChange={onSortingValueChange}
+        custom
+        value={controlValue}
+      >
+        <option value={SORT_DIRECTION_ASC}>A-Z</option>
+        <option value={SORT_DIRECTION_DESC}>Z-A</option>
+        <option value={SORT_DIRECTION_NEWEST}>{t("newestOnTop")}</option>
+      </Form.Control>
+    </Form.Group>
+  );
+};

package/src/sorting-select/index.ts

@@ -0,0 +1 @@
+export * from "./SortingSelect";

package/src/static/CountryCodeSelect.tsx

@@ -52,9 +52,9 @@ function CountryCodeSelect({
           {t("chooseCountry")}
         </option>
         {sortedCountries.map((key: keyof typeof en) => (
-            <option key={key as string} value={key as string}>
-              {en[key]}
-            </option>
+          <option key={key as string} value={key as string}>
+            {en[key]}
+          </option>
         ))}
       </Form.Control>
       <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>

package/src/static/RestrictedAccess.tsx

@@ -4,7 +4,7 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
 import Icon from "./Icon";
 
-function RestrictedAccess(): JSX.Element {
+function RestrictedAccess() {
   const { t } = useTranslation("Design");
 
   return (

package/src/static/date-range-input/DateRangeInput.tsx

@@ -3,7 +3,7 @@ import { Button, Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { DateRange, Range } from "react-date-range";
 import { useClickAway } from "react-use";
 import { useTranslation } from "react-i18next";
-import type Popper from "@popperjs/core";
+import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Icon } from "..";
 import {
@@ -15,11 +15,12 @@ import {
 import "react-date-range/dist/styles.css";
 import "react-date-range/dist/theme/default.css";
 
-export type DateRangeInputProps = {
+type DateRangeInputProps = {
   placeholder: string;
   startDate?: string;
   endDate?: string;
   months?: number;
+  disabled?: boolean;
   onDateChange?: (dates: { startDate?: string; endDate?: string }) => void;
 };
 
@@ -29,6 +30,7 @@ export const DateRangeInput = ({
   endDate,
   onDateChange,
   months = 2,
+  disabled,
 }: DateRangeInputProps) => {
   const { t } = useTranslation("Design");
 
@@ -123,6 +125,7 @@ export const DateRangeInput = ({
           <Form.Control
             type="input"
             placeholder={placeholder}
+            disabled={disabled}
             readOnly
             className="date-range-input"
             value={stringDatesToInputValue({ startDate, endDate })}
@@ -138,7 +141,7 @@ export const DateRangeInput = ({
   );
 };
 
-export const sameWidthPopperModifier: Popper.Modifier<
+const sameWidthPopperModifier: Modifier<
   "sameWidth",
   Record<string, unknown>
 > = {

package/src/static/form-number-input/FormNumberInput.tsx

@@ -15,6 +15,7 @@ interface FormNumberInputProps {
   label: string;
   fieldName: string;
   step?: number;
+  onChange?: (value: number) => void;
   disabled?: boolean;
   rules?: Pick<
     RegisterOptions,
@@ -28,6 +29,7 @@ export const FormNumberInput = ({
   step = 1,
   rules,
   disabled,
+  onChange,
 }: FormNumberInputProps) => {
   const controlId = useId();
   const { t } = useTranslation("Validation");
@@ -76,7 +78,12 @@ export const FormNumberInput = ({
               disabled={disabled}
               isInvalid={HookFormService.isInvalid(fieldName, errors)}
               {...field}
-              onChange={(event) => field.onChange(Number(event.target.value))}
+              onChange={(event) => {
+                if (onChange) {
+                  onChange(Number(event.target.value));
+                }
+                field.onChange(Number(event.target.value));
+              }}
               onFocus={onFocus}
             />
           )}

package/src/styles/activity-card/GridActivitiesCard.scss

@@ -0,0 +1,37 @@
+@import "../snippet-templates/snippetVariables";
+
+.activity-card {
+  border: 2px solid transparent;
+  transition: $color-transition;
+  color: $snippet-elements-body-color;
+  border-radius: 0.5rem;
+  padding: 0.375rem;
+  min-height: 12.5rem;
+  width: 11.5rem;
+  word-wrap: break-word;
+  background-color: #fff;
+  font-size: 0.8rem;
+  background-color: $snippet-product-set-background-color;
+
+  div {
+    text-align: left;
+  }
+
+  &.active {
+    border: 2px solid #0e8be1;
+  }
+
+  &-image {
+    width: 100%;
+    height: 6.3rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.3rem;
+  }
+
+  &-title {
+    font-weight: 600;
+    line-height: 1.25rem;
+    cursor: pointer;
+    font-size: 0.875rem;
+  }
+}

package/src/styles/activity-card/ListActivitiesCard.scss

@@ -0,0 +1,58 @@
+@import "../snippet-templates/snippetVariables";
+
+.list-activity-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  height: 5rem;
+  padding: 0.375rem;
+  border: 2px solid transparent;
+  border-radius: 0.5rem;
+  background-color: $snippet-product-set-background-color;
+  color: $snippet-product-set-font-color;
+  transition: $color-transition;
+
+  &.active {
+    border: 2px solid #0e8be1;
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  .description {
+    width: 70%;
+    font-size: 0.81rem;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .title {
+    font-weight: 600;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+  }
+
+  .image-container {
+    display: flex;
+    justify-content: start;
+    height: 100%;
+
+    .image {
+      display: flex;
+      align-items: start;
+      width: 7rem;
+      height: 4rem;
+      margin-left: 3rem;
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      border-radius: 0.5rem;
+    }
+  }
+}
+
+.list-activity-card-hr {
+  margin-top: 0;
+}

package/src/styles/activity-card/_index.scss

@@ -0,0 +1,2 @@
+@import "./GridActivitiesCard.scss";
+@import "./ListActivitiesCard.scss";

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

@@ -0,0 +1,7 @@
+.availability-indicator {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 300;
+}

package/src/styles/availability-indicator/_index.scss

@@ -0,0 +1 @@
+@import "./AvailabilityIndicator.scss";

package/src/styles/back-button/BackButton.scss

@@ -0,0 +1,33 @@
+$base-height: 2.5rem;
+
+.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;
+
+
+    .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;
+      }
+    }
+
+    &.back-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 1rem;
+    }
+  }

package/src/styles/back-button/_index.scss

@@ -0,0 +1 @@
+@import "./BackButton.scss";

package/src/styles/date-time-button/DateTimeButton.scss

@@ -0,0 +1,107 @@
+.date-time-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.82rem;
+  background-color: $snippet-calendar-button-background-color;
+  border-radius: 0.4rem;
+  text-align: center;
+  border: 2px solid $snippet-calendar-button-border-color;
+  color: $snippet-calendar-button-font-color;
+  transition: $color-transition;
+  min-width: 6rem;
+  min-height: 3rem;
+  max-width: max-content;
+  padding: 0.5rem;
+
+  .weekday-info {
+    div:first-child {
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+
+    div:last-child {
+      color: $snippet-calendar-active-button-background-color;
+    }
+  }
+
+  .descriptions {
+    font-size: 0.7rem;
+  }
+
+  &.today:first-of-type {
+    min-width: 7.5rem;
+  }
+
+  &.disabled {
+    border: 2px solid $snippet-calendar-disabled-button-border-color;
+    background-color: $snippet-calendar-disabled-button-background-color;
+    color: $snippet-calendar-disabled-button-font-color;
+
+    .weekday-info {
+      div:last-child {
+        color: $snippet-calendar-disabled-button-font-color;
+      }
+    }
+
+    .price {
+      color: $snippet-calendar-disabled-button-font-color;
+    }
+  }
+
+  &.selected {
+    border: 2px solid $snippet-calendar-active-button-border-color;
+    background-color: $snippet-calendar-active-button-background-color;
+    color: $snippet-calendar-active-button-font-color;
+    transition: $color-transition;
+
+    .weekday-info {
+      div:last-child {
+        color: $snippet-calendar-active-button-font-color;
+      }
+    }
+
+    .price {
+      color: $snippet-calendar-active-button-font-color;
+      background-color: $snippet-calendar-active-button-background-color;
+      font-weight: 600;
+      transition: $color-transition;
+    }
+
+    .time {
+      font-weight: 600;
+    }
+  }
+
+  &.time-button {
+    min-width: 4.75rem;
+    max-width: 4.75rem;
+    min-height: 2.75rem;
+  }
+
+  &.only-time-container {
+    min-width: 5.3rem;
+    max-width: 5.3rem;
+    min-height: 2.75rem;
+  }
+
+  &.calendar-view {
+    min-width: auto;
+    max-width: none;
+    min-height: auto;
+  }
+}
+
+.time {
+  font-size: 0.875rem;
+  font-weight: 300;
+}
+
+.price {
+  font-size: 0.7rem;
+  line-height: 1.03rem;
+  font-weight: 300;
+  color: $snippet-calendar-button-font-color;
+}

package/src/styles/date-time-button/_index.scss

@@ -0,0 +1 @@
+@import "./DateTimeButton.scss";

package/src/styles/form/CustomCheckbox.scss

@@ -1,6 +1,7 @@
 .custom-checkbox {
   margin-top: 1rem;
   display: flex;
+  z-index: 2;
   align-items: center;
 
   .custom-checkbox .custom-control-label::before {
@@ -21,4 +22,8 @@
     font-weight: 400;
     font-size: 0.875rem;
   }
+
+  .checkbox-input {
+    z-index: 2;
+  }
 }

package/src/styles/header/Header.scss

@@ -11,10 +11,6 @@
     }
   }
 
-  svg {
-    max-height: 1rem;
-  }
-
   .navbar-nav {
     line-height: 1;
     margin-top: 4px;

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

@@ -1,4 +1,3 @@
-
 .calendar-wrapper {
   display: flex;
 
@@ -21,7 +20,7 @@
           background-color: transparent;
         }
 
-        &:focus{
+        &:focus {
           box-shadow: none;
         }
       }
@@ -73,10 +72,9 @@
       }
     }
 
-    
-
     .calendar-dates-wrapper {
-      .calendar-weekdays, .calendar-dates {
+      .calendar-weekdays,
+      .calendar-dates {
         display: grid;
         grid-template-columns: repeat(7, auto);
         grid-gap: 0.5rem 1rem;
@@ -98,17 +96,17 @@
         margin-top: 0.75rem;
 
         .calendar-date {
-          height: 2rem;
           display: flex;
+          flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 0;
+          padding: 0.25rem;
           border-radius: 0.25rem;
           background-color: $snippet-calendar-button-background-color;
           color: $snippet-calendar-button-font-color;
           font-size: 0.875rem;
           line-height: 1.3125rem;
-          border: 1px solid $snippet-calendar-button-border-color;;
+          border: 1px solid $snippet-calendar-button-border-color;
 
           &.selected-date {
             background-color: $snippet-calendar-active-button-background-color;
@@ -138,7 +136,7 @@
           &:hover {
             border-color: $snippet-calendar-active-button-border-color;
           }
-            
+
           &:focus {
             box-shadow: none;
           }
@@ -167,11 +165,11 @@
         justify-content: center;
         width: 3.75rem;
         height: 2.5rem;
-        background-color: #F2F2F2;
+        background-color: #f2f2f2;
         color: $black;
         font-size: 0.75rem;
         border-radius: 0.25rem;
-  
+
         &.selected-time {
           background-color: $blue;
           color: $white;
@@ -189,14 +187,16 @@
     flex-direction: column;
     align-items: center;
 
-    .calendar, .start-time-wrapper {
+    .calendar,
+    .start-time-wrapper {
       min-width: 20.75rem;
 
       .calendar-dates-wrapper {
-        .calendar-weekdays, .calendar-dates {
+        .calendar-weekdays,
+        .calendar-dates {
           grid-gap: 0.5rem;
         }
-  
+
         .calendar-dates {
           .calendar-date {
             width: 2.5rem;

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

@@ -142,6 +142,7 @@
     .card-body {
       padding: 0;
       margin: 0 0 auto;
+      margin-top: 1rem;
     }
   }