@licklist/design 0.66.12 → 0.67.0

package/src/snippet/snippet-template/context/snippetTemplate.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useRef, useState, useMemo } from "react";
+import { createContext, useRef, useState, useMemo } from "react";
 import {
   SnippetTemplate,
   DEFAULT_SNIPPET_TEMPLATE_COLORS,
@@ -32,7 +32,7 @@ export function SnippetTemplateContextProvider({
 }: SnippetTemplateLoadingContextProviderProps) {
   const actionsRef = useRef(null);
   const [template, setTemplate] = useState<SnippetTemplateValuesWithName>(
-    safeMergeDefaultSettings(defaultValues)
+    safeMergeDefaultSettings(defaultValues),
   );
 
   actionsRef.current = {
@@ -46,7 +46,7 @@ export function SnippetTemplateContextProvider({
   const dropdownBackgroundIcon = useMemo(() => {
     const color = encodeURIComponent(
       template?.elementsButtonBackgroundColor ||
-        DEFAULT_SNIPPET_TEMPLATE_COLORS.elementsButtonBackgroundColor
+        DEFAULT_SNIPPET_TEMPLATE_COLORS.elementsButtonBackgroundColor,
     );
 
     // eslint-disable-next-line max-len

package/src/snippet/snippet-template/context/snippetTemplateLoading.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from "react";
+import { createContext, useState } from "react";
 
 export interface SnippetTemplateLoadingContextValues {
   isLoading: boolean;

package/src/snippet/snippet-template/context/snippetTemplateView.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useRef, useState } from "react";
+import { createContext, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 export const snippetTemplateViews = {
@@ -64,13 +64,13 @@ export function SnippetTemplateViewContextProvider({ children }) {
       pageHeaderStepsActiveStepBorderColor: t("activeStepBorderColor"),
       pageHeaderStepsActiveStepBodyColor: t("headerActiveStepBodyColor"),
       pageHeaderStepsInactiveStepBackgroundColor: t(
-        "inactiveStepBackgroundColor"
+        "inactiveStepBackgroundColor",
       ),
       pageHeaderStepsInactiveStepBorderColor: t("inactiveStepBorderColor"),
       pageHeaderStepsInactiveStepBodyColor: t("headerInactiveStepBodyColor"),
 
       pageHeaderStepsCloseButtonBackgroundColor: t(
-        "headerButtonsBackgroundColor"
+        "headerButtonsBackgroundColor",
       ),
 
       // @TODO return back this color as pageHeaderStepsCloseButtonBodyColor
@@ -81,7 +81,7 @@ export function SnippetTemplateViewContextProvider({ children }) {
     pageBodyLeftBlock: {
       pageBodyLeftBlockBackgroundColor: t("backgroundColor"),
       pageBodyLeftBlockBackButtonBackgroundColor: t(
-        "backButtonBackgroundColor"
+        "backButtonBackgroundColor",
       ),
       pageBodyLeftBlockBackButtonBorderColor: t("backButtonBorderColor"),
       pageBodyLeftBlockBackButtonBodyColor: t("backButtonColor"),
@@ -103,7 +103,7 @@ export function SnippetTemplateViewContextProvider({ children }) {
       elementsNumberInputBodyColor: t("numberInputBodyColor"),
       elementsNumberInputButtonBorderColor: t("numberInputButtonBorderColor"),
       elementsNumberInputButtonBackgroundColor: t(
-        "numberInputButtonBackgroundColor"
+        "numberInputButtonBackgroundColor",
       ),
 
       elementsButtonColor: t("buttonColor"),
@@ -123,12 +123,12 @@ export function SnippetTemplateViewContextProvider({ children }) {
       calendarButtonFontColor: t("calendarButtonFontColor"),
       calendarDisabledButtonBorderColor: t("calendarDisabledButtonBorderColor"),
       calendarDisabledButtonBackgroundColor: t(
-        "calendarDisabledButtonBackgroundColor"
+        "calendarDisabledButtonBackgroundColor",
       ),
       calendarDisabledButtonFontColor: t("calendarDisabledButtonFontColor"),
       calendarActiveButtonBorderColor: t("calendarActiveButtonBorderColor"),
       calendarActiveButtonBackgroundColor: t(
-        "calendarActiveButtonBackgroundColor"
+        "calendarActiveButtonBackgroundColor",
       ),
       calendarActiveButtonFontColor: t("calendarActiveButtonFontColor"),
     },

package/src/snippet/snippet-template/control/Control.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 
 import { PropertyControl, PropertyControlProps } from "./PropertyControl";
 import { FormProvider, useForm } from "react-hook-form";

package/src/snippet/snippet-template/control/PropertyControl.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { TwitterPicker } from "react-color";
 import { Form } from "react-bootstrap";
 import { useFormContext, Path } from "react-hook-form";
@@ -51,7 +51,7 @@ export function PropertyControl<T>({
 
   const isFieldValid = useCallback(
     (field: string) => HookFormService.isFieldValid(formState, errors, field),
-    [formState, errors]
+    [formState, errors],
   );
 
   const toggleIsActive = () => {

package/src/snippet/snippet-template/form/SnippetTemplateForm.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { boolean } from "@storybook/addon-knobs";
 import {
   SnippetTemplateForm,

package/src/snippet/snippet-template/form/SnippetTemplateForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect } from "react";
+import { useCallback, useContext, useEffect } from "react";
 import { Form } from "react-bootstrap";
 import { useForm, FormProvider } from "react-hook-form";
 import Button from "react-bootstrap/Button";
@@ -71,9 +71,9 @@ export function SnippetTemplateForm({
       HookFormService.isFieldValid(
         form.formState,
         form.formState.errors,
-        field
+        field,
       ),
-    [form.formState]
+    [form.formState],
   );
 
   return (

package/src/snippet/snippet-template/preview/Preview.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { Preview, PreviewProps } from "./Preview";
 import { SnippetTemplateContextProvider } from "../context/snippetTemplate";
 import { SnippetTemplateLoadingContextProvider } from "../context/snippetTemplateLoading";

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { MemoryRouter } from "react-router-dom";
 import { Button } from "react-bootstrap";
@@ -8,7 +8,7 @@ import {
 } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { DateTime } from "luxon";
-import { Calendar, defaultStartDay } from "../../../calendar";
+import { Calendar, CalendarProps, defaultStartDay } from "../../../calendar";
 import { getMonthCalendarDates } from "../../../calendar/utils";
 import { IframeEventCard } from "../../../iframe/event/event-card";
 import { SettingButton } from "../settings";
@@ -208,9 +208,13 @@ export function Preview({
                           selectedDate={selectedDate}
                           setSelectedDate={setSelectedDate}
                           calendarDates={calendarDates}
-                          getDateTimeButtonProps={() => ({
-                            isDisabled: false,
-                          })}
+                          getDateTimeButtonProps={() =>
+                            ({
+                              isDisabled: false,
+                            }) as ReturnType<
+                              CalendarProps["getDateTimeButtonProps"]
+                            >
+                          }
                         />
                       </SettingButton>
                     </div>
@@ -303,7 +307,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: "Cofee",
                                   description: "",
                                   price: 15,
@@ -312,8 +315,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: "sale" as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -332,7 +333,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: "Cofee 2",
                                   description: "",
                                   price: 15,
@@ -341,8 +341,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: "sale" as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,

package/src/snippet/snippet-template/settings/SettingButton.tsx

@@ -1,7 +1,6 @@
-import React from "react";
 import Button from "react-bootstrap/Button";
 import clsx from "clsx";
-import Icon from "../../../static/Icon";
+import { FaCog } from "react-icons/fa";
 import { snippetTemplateViews } from "../context/snippetTemplateView";
 
 export interface SettingButtonProps extends React.PropsWithChildren<unknown> {
@@ -28,7 +27,7 @@ export const SettingButton = ({
         className={clsx("snippet-template__setting d-inline", className)}
         onClick={() => onClick(view as keyof typeof snippetTemplateViews)}
       >
-        <Icon type="cog" style={{ width: 16 }} />
+        <FaCog size={16} />
       </Button>
     </div>
   );

package/src/snippet/snippet-template/settings/Settings.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 
 import { SettingButton, SettingButtonProps } from "./SettingButton";
 

package/src/snippet/snippet-template/utils/index.ts

@@ -4,7 +4,7 @@ import {
 } from "@licklist/core/dist/DataMapper/Provider/SnippetTemplateDataMapper";
 
 export const safeMergeDefaultSettings = (
-  settings: Partial<SnippetTemplate> = {}
+  settings: Partial<SnippetTemplate> = {},
 ) => {
   const { id, providerId, isDefault, name, type, ...settingsProps } = settings;
 
@@ -27,6 +27,6 @@ export const safeMergeDefaultSettings = (
           (DEFAULT_SNIPPET_TEMPLATE_COLORS[currentKey] ?? "#000"),
       };
     },
-    { id, providerId, isDefault, name, type } as SnippetTemplate
+    { id, providerId, isDefault, name, type } as SnippetTemplate,
   );
 };

package/src/sortable-fields/SortableFieldItem.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo } from "react";
 import type { CSSProperties, PropsWithChildren } from "react";
 import type {
   DraggableSyntheticListeners,
@@ -29,7 +29,7 @@ export function SortableFieldItem({ children, id }: PropsWithChildren<Props>) {
       listeners,
       ref: setDraggableNodeRef,
     }),
-    [listeners, setDraggableNodeRef]
+    [listeners, setDraggableNodeRef],
   );
   const style: CSSProperties = {
     opacity: isDragging ? 0.4 : undefined,

package/src/sortable-fields/SortableFieldList.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import type { ReactNode } from "react";
 import {
   DndContext,
@@ -34,7 +33,7 @@ export function SortableFieldList<T extends BaseItem>({
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
-    })
+    }),
   );
 
   return (

package/src/sortable-list/CreateSortableListItem.tsx

@@ -1,5 +1,4 @@
-import React from "react";
-import { Icon } from "../static";
+import { FaPlus } from "react-icons/fa";
 
 interface CreateSortableListItemProps {
   onClick: () => void;
@@ -17,12 +16,7 @@ export function CreateSortableListItem({
       type="button"
     >
       <span>{title}</span>
-      <Icon
-        type="plus"
-        height="2rem"
-        width="2rem"
-        className="rounded sortable-list-item-icon p-2"
-      />
+      <FaPlus size={32} className="rounded sortable-list-item-icon p-2" />
     </button>
   );
 }

package/src/sortable-list/SortableList.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta } from "@storybook/react";
-import React from "react";
 import { SortableList } from "./SortableList";
 
 export default {

package/src/sortable-list/SortableList.tsx

@@ -6,7 +6,7 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { isEqual } from "lodash";
-import React, {
+import {
   Dispatch,
   ReactNode,
   SetStateAction,

package/src/sortable-tree/SortableTree.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, Story } from "@storybook/react";
 import { uniqueId } from "lodash";
-import React from "react";
 import { SortableTree, SortableTreeProps } from "./SortableTree";
 
 export default {

package/src/sortable-tree/SortableTree.tsx

@@ -4,7 +4,7 @@ import {
   SortableContextProps,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { SortableTreeItem } from "./SortableTreeItem";
 
 export interface SortableTreeProps {

package/src/sortable-tree/SortableTreeItem.stories.tsx

@@ -4,7 +4,6 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import { Form } from "react-bootstrap";
 import { SortableTreeItem, SortableTreeItemProps } from "./SortableTreeItem";
 

package/src/sortable-tree/SortableTreeItem.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from "react";
+import { ReactNode, useCallback, useEffect, useState } from "react";
 import { DndContext, useDraggable } from "@dnd-kit/core";
 import {
   SortableContext,
@@ -9,9 +9,8 @@ import { CSS } from "@dnd-kit/utilities";
 import { Button, Collapse, Modal } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-
+import { FaEllipsisH, FaGripVertical, FaMinus } from "react-icons/fa";
 import { ConfirmModal } from "../modals";
-import Icon from "../static/Icon";
 import { DeleteFieldButton } from "../product-set/elements/DeleteFieldButton";
 
 const DRAG_RADIUS_LIMIT = 5;
@@ -20,10 +19,11 @@ export const ProductSetModalClasses = {
   step: "edit-product-step",
   category: "edit-product-category",
   product: "edit-product",
+  productZones: "edit-product-zone",
 } as const;
 
 export type ProductSetModalClassesType =
-  typeof ProductSetModalClasses[keyof typeof ProductSetModalClasses];
+  (typeof ProductSetModalClasses)[keyof typeof ProductSetModalClasses];
 
 export interface SortableTreeItemProps {
   id: string;
@@ -36,6 +36,7 @@ export interface SortableTreeItemProps {
   postItem?: ReactNode;
   sortableItems?: string[];
   isExpanded?: boolean;
+  shouldExpand?: boolean;
   isInvalid?: boolean;
   isIconInHeader?: boolean;
   treeLineIconColor?: string;
@@ -66,6 +67,7 @@ export function SortableTreeItem({
   postItem,
   sortableItems,
   isExpanded = false,
+  shouldExpand = true,
   isInvalid = false,
   isIconInHeader = true,
   treeLineIconColor = "",
@@ -100,11 +102,14 @@ export function SortableTreeItem({
     transform: dragTransform,
   } = useDraggable({
     id,
-    disabled: isOverride,
+    disabled: isOverride || !shouldExpand,
   });
 
   const onHandleExpand = useCallback(
     (event) => {
+      if (!shouldExpand) {
+        return;
+      }
       const deltaX = event.pageX - position.pageX;
       const deltaY = event.pageY - position.pageY;
       const euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -120,14 +125,20 @@ export function SortableTreeItem({
 
       setExpanded((expanded) => !expanded);
     },
-    [position, setIsExpanded]
+    [position, shouldExpand, setIsExpanded],
   );
 
   const isVisibleDeleteButton = Boolean(onDelete) && !isOverride;
 
-  const onButtonMouseDown = useCallback((event) => {
-    setPosition({ pageX: event.pageX, pageY: event.pageY });
-  }, []);
+  const onButtonMouseDown = useCallback(
+    (event) => {
+      if (!shouldExpand) {
+        return;
+      }
+      setPosition({ pageX: event.pageX, pageY: event.pageY });
+    },
+    [shouldExpand],
+  );
 
   const onHide = async () => {
     if (!validate) setIsModalVisible(false);
@@ -197,47 +208,49 @@ export function SortableTreeItem({
             : null
         }
       >
-        <div className="sortable-tree-line">
-          <Button
-            variant="link"
-            size="sm"
-            onMouseDown={onButtonMouseDown}
-            onMouseUp={onHandleExpand}
-          >
-            {expanded ? (
-              <Icon type="minus" width=".7rem" />
-            ) : (
-              <div className="expand-icon-container">
-                <div />
-                <div />
-                <div />
-              </div>
-            )}
-          </Button>
-
-          {expanded && (
-            <svg
-              className="sortable-tree-line-icon"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              width="100%"
-              height="100%"
-              viewBox="0 0 100 100"
-              preserveAspectRatio="none"
+        {shouldExpand && (
+          <div className="sortable-tree-line">
+            <Button
+              variant="link"
+              size="sm"
+              onMouseDown={onButtonMouseDown}
+              onMouseUp={onHandleExpand}
             >
-              <g>
-                <path
-                  className={clsx(
-                    "sortable-tree-line-icon-path",
-                    treeLineIconColor && "sortable-tree-line-product-element"
-                  )}
-                  style={{ stroke: treeLineIconColor }}
-                  d="M 50 0 V 100"
-                />
-              </g>
-            </svg>
-          )}
-        </div>
+              {expanded ? (
+                <FaMinus size={10} />
+              ) : (
+                <div className="expand-icon-container">
+                  <div />
+                  <div />
+                  <div />
+                </div>
+              )}
+            </Button>
+
+            {expanded && (
+              <svg
+                className="sortable-tree-line-icon"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                width="100%"
+                height="100%"
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
+              >
+                <g>
+                  <path
+                    className={clsx(
+                      "sortable-tree-line-icon-path",
+                      treeLineIconColor && "sortable-tree-line-product-element",
+                    )}
+                    style={{ stroke: treeLineIconColor }}
+                    d="M 50 0 V 100"
+                  />
+                </g>
+              </svg>
+            )}
+          </div>
+        )}
 
         <div className="sortable-tree-item-wrapper">
           <div
@@ -251,7 +264,7 @@ export function SortableTreeItem({
                   {...attributes}
                   {...listeners}
                 >
-                  <Icon type="grip-vertical" />
+                  <FaGripVertical />
                 </Button>
               )}
               <Button
@@ -267,13 +280,13 @@ export function SortableTreeItem({
                   className={clsx(
                     modalLabel
                       ? "sortable-tree-product-set-title-container"
-                      : "sortable-tree-title-container"
+                      : "sortable-tree-title-container",
                   )}
                 >
                   <span
                     className={clsx(
                       "sortable-tree-item-title",
-                      modalLabel && "sortable-tree-product-set-element-title"
+                      modalLabel && "sortable-tree-product-set-element-title",
                     )}
                   >
                     {title}
@@ -291,7 +304,7 @@ export function SortableTreeItem({
                   onClick={(e) => onEdit(e)}
                   onKeyDown={(e) => e.stopPropagation()}
                 >
-                  <Icon type="ellipsis-h" color="#0E8CE2" height="1rem" />
+                  <FaEllipsisH color="#0E8CE2" size={16} />
                 </div>
               </Button>
             </div>
@@ -309,7 +322,7 @@ export function SortableTreeItem({
                 // unique class
                 className={clsx(
                   "m-0 edit-product-set-element-modal edit-right-form-modal h-100",
-                  modalClass
+                  modalClass,
                 )}
                 dialogClassName="edit-event-dialog edit-step-dialog"
                 onHide={onHide}

package/src/sortable-tree/index.ts

@@ -1,2 +1,2 @@
 export * from "./SortableTree";
-export { SortableTreeItemProps } from "./SortableTreeItem";
+export type { SortableTreeItemProps } from "./SortableTreeItem";

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { SortingSelect, SortingSelectProps } from "./SortingSelect";
 

package/src/sorting-select/SortingSelect.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import useQuery from "@licklist/plugins/dist/hooks/Query/useQuery";
 import { Form, FormGroupProps } from "react-bootstrap";
 import { useTranslation } from "react-i18next";

package/src/static/CountryCodeSelect.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Form from "react-bootstrap/Form";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";

package/src/static/CountrySelect.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, useState, useEffect } from "react";
+import { ChangeEvent, useState, useEffect } from "react";
 import Form from "react-bootstrap/Form";
 import {
   getCountries,

package/src/static/CurrencyNumberInput.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactNode } from "react";
+import { forwardRef, ReactNode } from "react";
 import { Form, FormControlProps } from "react-bootstrap";
 
 export interface CurrencyNumberInputProps extends FormControlProps {
@@ -32,7 +32,7 @@ export const CurrencyNumberInput = forwardRef<
       error,
       ...props
     },
-    ref
+    ref,
   ) => (
     <Form.Group className="currency-number-input">
       <Form.Label className={labelClassName}>{label}</Form.Label>
@@ -51,7 +51,7 @@ export const CurrencyNumberInput = forwardRef<
         <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
       </div>
     </Form.Group>
-  )
+  ),
 );
 
 CurrencyNumberInput.displayName = "CurrencyNumberInput";

package/src/static/FormCard.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import Card from "react-bootstrap/Card";
 
 export interface Props {

package/src/static/Image.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable import/no-named-default */
-import React from "react";
 import { default as BootstrapImage, ImageProps } from "react-bootstrap/Image";
 
 export interface Props extends ImageProps {

package/src/static/RestrictedAccess.tsx

@@ -1,8 +1,7 @@
-import React from "react";
 import { Button } from "react-bootstrap";
 import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { useTranslation } from "react-i18next";
-import Icon from "./Icon";
+import { FaArrowLeft } from "react-icons/fa";
 
 function RestrictedAccess() {
   const { t } = useTranslation("Design");
@@ -14,7 +13,7 @@ function RestrictedAccess() {
         variant="link"
         onClick={() => RouteService.goBack()}
       >
-        <Icon type="arrow-left" width="25" />
+        <FaArrowLeft size={25} />
       </Button>
       <div className="container d-flex justify-content-center pt-5">
         <div className="text-center">