@licklist/design 0.68.0-dev.0 → 0.68.0

package/dist/typeahead/Typeahead.js

@@ -31,7 +31,7 @@ function _object_spread(target) {
     return target;
 }
 function Typeahead(param) {
-    var options = param.options, placeholder = param.placeholder, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, isMultipleChoise = param.isMultipleChoise, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, value = param.value, onChangeValue = param.onChangeValue, containerStyles = param.containerStyles, _param_isCouponForm = param.isCouponForm, isCouponForm = _param_isCouponForm === void 0 ? false : _param_isCouponForm, _param_noOptionsMessage = param.noOptionsMessage, noOptionsMessage = _param_noOptionsMessage === void 0 ? "" : _param_noOptionsMessage, isInvalid = param.isInvalid;
+    var options = param.options, placeholder = param.placeholder, _param_isRequired = param.isRequired, isRequired = _param_isRequired === void 0 ? false : _param_isRequired, isMultipleChoise = param.isMultipleChoise, _param_name = param.name, name = _param_name === void 0 ? "" : _param_name, _param_isCouponForm = param.isCouponForm, isCouponForm = _param_isCouponForm === void 0 ? false : _param_isCouponForm, _param_noOptionsMessage = param.noOptionsMessage, noOptionsMessage = _param_noOptionsMessage === void 0 ? "" : _param_noOptionsMessage, isInvalid = param.isInvalid;
     var control = useFormContext().control;
     var getStyle = function() {
         var couponFormStyle = isCouponForm ? {
@@ -53,21 +53,14 @@ function Typeahead(param) {
                 var field = param.field;
                 return /*#__PURE__*/ jsx(Select, {
                     placeholder: placeholder,
-                    value: value !== null && value !== void 0 ? value : field.value,
+                    value: field.value,
                     isMulti: isMultipleChoise,
                     styles: {
-                        container: function(base) {
-                            return _object_spread({}, base, containerStyles);
-                        },
                         control: function(base) {
                             return _object_spread({}, base, getStyle());
                         }
                     },
                     onChange: function(value) {
-                        if (onChangeValue) {
-                            onChangeValue(value);
-                            return;
-                        }
                         field.onChange(value);
                     },
                     options: options,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.68.0-dev.0",
+  "version": "0.68.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.29.1-dev.3",
+    "@licklist/core": "0.30.0",
     "@licklist/eslint-config": "0.5.5",
-    "@licklist/plugins": "0.32.0-dev.3",
+    "@licklist/plugins": "0.33.0",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.29.1-dev.3",
+    "@licklist/core": "0.30.0",
     "@licklist/eslint-config": "0.5.5",
-    "@licklist/plugins": "0.32.0-dev.3",
+    "@licklist/plugins": "0.33.0",
     "@mdx-js/react": "1.6.22",
     "@popperjs/core": "2.11.8",
     "@react-aria/utils": "3.9.0",
@@ -195,10 +195,8 @@
       "yarn tsc"
     ]
   },
-  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  },
-  "stableVersion": "0.66.7-dev.5"
+  }
 }

package/src/auth/ChangePassword/ChangePassword.stories.tsx

@@ -15,7 +15,7 @@ export const ChangePassword: Story<{}> = (args) => (
 );
 
 export const ChangePasswordForm: Story<ChangePasswordFormComponentProps> = (
-  args
+  args,
 ) => (
   <>
     <Router>

package/src/auth/Login/LoginComponent.tsx

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: "Error",
-      message: error?.response?.data?.message || error.message,
+      message: error.message,
     });
   };
 

package/src/auth/ResetPassword/ResetPassword.stories.tsx

@@ -14,7 +14,7 @@ export const ResetPassword: Story<{}> = (args) => (
   <ResetPasswordComponent {...args} />
 );
 export const ResetPasswordForm: Story<ResetPasswordFormComponentProps> = (
-  args
+  args,
 ) => (
   <>
     <Router>

package/src/calendar/components/CalendarButtons/CalendarButtons.tsx

@@ -2,7 +2,7 @@ import { useCallback, useMemo } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { range } from "lodash";
-import { DateTime } from "luxon";
+import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
 import { CalendarProps } from "../../Calendar";
 
@@ -26,21 +26,15 @@ export const CalendarButtons = ({
 }: CalendarButtonsProps) => {
   const { t } = useTranslation("Design");
 
-  const onSelectMonth = useCallback(
-    (value: string) => {
-      const selectedMonth = Number(value);
-      const nextDateTime = currentDate.set({ month: selectedMonth });
-
-      if (nextDateTime <= initialDate) {
-        setCurrentDate(initialDate);
-        return;
-      }
+  const onSelectNextMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-      setCurrentDate(nextDateTime);
-    },
+  const onSelectPreviousMonth = useCallback(() => {
+    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [setCurrentDate, currentDate],
-  );
+  }, []);
 
   const yearOptions = useMemo(() => {
     return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
@@ -48,18 +42,10 @@ export const CalendarButtons = ({
     });
   }, [initialDate]);
 
-  const monthOptions = useMemo(() => {
-    const initialMonth =
-      currentDate.year > initialDate.year ? 1 : initialDate.month;
-    return range(initialMonth, 13).map((monthNumber) => {
-      return {
-        label: DateTime.fromObject({ month: monthNumber }).toLocaleString({
-          month: "long",
-        }),
-        value: monthNumber,
-      };
-    });
-  }, [initialDate, currentDate]);
+  const canMoveBack = useMemo(
+    () => currentDate > initialDate,
+    [currentDate, initialDate],
+  );
 
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value);
@@ -121,11 +107,22 @@ export const CalendarButtons = ({
       <hr />
       <div className="calendar-buttons">
         <div className="buttons-wrapper">
-          <CalendarSelect
-            options={monthOptions}
-            onChange={onSelectMonth}
-            value={currentDate.month}
-          />
+          <Button
+            className="calendar-button left-button"
+            onClick={onSelectPreviousMonth}
+            disabled={!canMoveBack}
+            variant="link"
+          >
+            <SelectArrow />
+          </Button>
+          <div className="month-title">{currentDate.toFormat("MMMM")}</div>
+          <Button
+            className="calendar-button"
+            onClick={onSelectNextMonth}
+            variant="link"
+          >
+            <SelectArrow />
+          </Button>
         </div>
         <CalendarSelect
           options={yearOptions}

package/src/events/edit-event-modal/component/SelectEventProductSet/SelectEventProductSet.tsx

@@ -5,11 +5,9 @@ import { useId } from "@react-aria/utils";
 import { Controller, useFormContext } from "react-hook-form";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { getTypeHeadItemsFromMenus } from "../../../../product-set/utils";
 import { ConfirmModal } from "../../../../modals/confirmation/ConfirmModal";
 import { EditEventFormValues } from "../EditEventForm/EditEventForm";
 import { EditEventProductSet } from "./component/EditEventProductSet";
-import { Typeahead } from "../../../../typeahead";
 
 interface SelectEventProductSetProps extends HasPermissionProp {
   productSets?: ProductSet[];
@@ -44,21 +42,6 @@ export const SelectEventProductSet = ({
   const productSetId = watch("productSetId");
   const editedProductSet = watch("editedProductSet");
 
-  const typeheadValues = getTypeHeadItemsFromMenus(
-    editedProductSet
-      ? productSets.map((productSet) => {
-          if (productSet.id === editedProductSet.id) {
-            return editedProductSet;
-          }
-
-          return productSet;
-        })
-      : productSets,
-  );
-  const selectedProductSetTypeheadValue = productSetId
-    ? typeheadValues?.find((typeheadValue) => typeheadValue.id === productSetId)
-    : undefined;
-
   const onEditProductSet = useCallback(
     () => {
       setEditProductSetId(String(productSetId));
@@ -112,7 +95,6 @@ export const SelectEventProductSet = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onSubmit = (value: EditEventFormValues["editedProductSet"]) => {
     setShowEditProductSet(false);
-    setValue("productSetId", value.id);
     setValue("editedProductSet", value);
   };
 
@@ -128,29 +110,49 @@ export const SelectEventProductSet = ({
           <Controller
             control={control}
             name="productSetId"
-            render={() => {
+            render={({ field }) => {
+              const fieldValue = String(field.value);
               return (
                 <>
                   <div className="d-flex align-items-center flex-row w-100">
                     <ConfirmModal>
                       {(confirm) => {
                         return (
-                          <Typeahead
-                            name="productSetId"
-                            value={selectedProductSetTypeheadValue}
-                            containerStyles={{ width: "100%" }}
-                            onChangeValue={(typeheadValue) => {
+                          <Form.Control
+                            as="select"
+                            onChange={(e) =>
                               onChangeProductSet(
-                                Number(typeheadValue.id),
+                                Number(e.target.value),
                                 confirm,
+                              )
+                            }
+                            isInvalid={Boolean(errors.productSetId)}
+                            value={fieldValue}
+                          >
+                            <option value="" hidden>
+                              {t("Design:chooseProductSet")}
+                            </option>
+                            {productSets?.map((productSet) => {
+                              const isCurrentEditedProductSet =
+                                editedProductSet &&
+                                editedProductSet?.id === productSet?.id;
+                              return (
+                                <option
+                                  key={productSet.id}
+                                  value={productSet.id}
+                                >
+                                  {isCurrentEditedProductSet ||
+                                  productSet.isOverride
+                                    ? `[${t("edited")}] ${
+                                        isCurrentEditedProductSet
+                                          ? editedProductSet?.name
+                                          : productSet.name
+                                      }`
+                                    : productSet.name}
+                                </option>
                               );
-                            }}
-                            options={typeheadValues}
-                            placeholder={t("Design:choose")}
-                            noOptionsMessage={t(
-                              "Design:noAvailableProductSets",
-                            )}
-                          />
+                            })}
+                          </Form.Control>
                         );
                       }}
                     </ConfirmModal>

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -37,6 +37,7 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
+                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

package/src/header/elements/Elements.stories.tsx

@@ -22,7 +22,7 @@ CompanySelector.args = {
 };
 
 export const CompanySelectorWithOneItem: Story<CompanySelectorProps> = (
-  args
+  args,
 ) => {
   return <CompanySelectorComponent {...args} />;
 };

package/src/help/popover/Popover.stories.tsx

@@ -17,7 +17,7 @@ export const HelpPopoverPrimaryVariant: Story<HelpPopoverProps> = (args) => (
   <HelpPopover {...args} />
 );
 export const HelpPopoverOutlinedInfoVariant: Story<HelpPopoverProps> = (
-  args
+  args,
 ) => <HelpPopover {...args} />;
 
 DefaultHelpPopover.args = {

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -260,9 +260,9 @@ export function Default() {
                 (point) =>
                   Boolean(
                     MENU_STEPS[0].pointProducts.find(
-                      (pointProduct) => pointProduct.pointId === point.id
-                    )
-                  )
+                      (pointProduct) => pointProduct.pointId === point.id,
+                    ),
+                  ),
               )}
               pointProducts={MENU_STEPS[0].pointProducts}
               usedInIframe={usedInIframe}

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -51,7 +51,6 @@ export const ProductQuantityInput = ({
       hasDeposit: category.allowDeposits && product?.deposit < product.price,
       price: product.price,
       productCategoryId: category.id,
-      zoneId: category.zone?.id,
       quantity,
       capacity: product?.capacity,
     });

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

@@ -63,7 +63,6 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail);
 
   const totalDiscount = calculateTotalDiscount(order.payments);
-
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[];
@@ -24,5 +24,4 @@ const DropDown = forwardRef((props: Props, ref: any) => {
 });
 
 DropDown.displayName = "DropDown";
-
 export default DropDown;

package/src/modals/confirmation/ConfirmModal.tsx

@@ -20,9 +20,6 @@ export type ConfirmModalTypes =
 export interface ConfirmModalProps {
   type?: ConfirmModalTypes;
   children?: (confirm: (action: ConfirmAction) => void) => ReactNode;
-  // confirm function  memoize the callback function. It's an alternative function
-  confirmationHandler?: () => Promise<boolean | undefined>;
-  disabledButtons?: boolean;
   title?: string;
   content?: string | ReactNode;
   onClose?: () => void;
@@ -40,9 +37,7 @@ export function ConfirmModal({
   type = "default",
   children,
   onClose,
-  confirmationHandler,
   title,
-  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -57,16 +52,10 @@ export function ConfirmModal({
     setIsOpen(() => true);
   };
 
-  const handleConfirmation = async (e) => {
+  const handleConfirmation = (e) => {
     e.stopPropagation();
-    if (!actionRef.current && !confirmationHandler) return;
-    if (confirmationHandler) {
-      const res = await confirmationHandler();
-      if (res) {
-        setIsOpen(() => false);
-      }
-      return;
-    }
+    if (!actionRef.current) return;
+
     actionRef.current();
     setIsOpen(() => false);
   };
@@ -99,7 +88,6 @@ export function ConfirmModal({
           <Button
             variant="danger"
             className="btn-sm rounded"
-            disabled={disabledButtons}
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
@@ -117,14 +105,12 @@ export function ConfirmModal({
                   variant="outline"
                   className="cancel-button"
                   onClick={handleClose}
-                  disabled={disabledButtons}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t("cancel")}
                 </Button>
                 <Button
                   variant="danger"
-                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >
@@ -135,7 +121,6 @@ export function ConfirmModal({
               <>
                 <Button
                   variant="danger"
-                  disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
@@ -143,7 +128,6 @@ export function ConfirmModal({
                 </Button>
                 <Button
                   variant="success"
-                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >

package/src/product-set/card/ProductSetCard.stories.tsx

@@ -9,8 +9,7 @@ export default {
 
 export const Default: Story<ProductSetCardProps> = (args) => (
   <ProductSetCard {...args} />
-)
-
+);
 
 Default.args = {
   href: "#",
@@ -18,4 +17,3 @@ Default.args = {
   rrule: "FREQ=WEEKLY;BYDAY=WE",
   hasPermission: true,
 };
-

package/src/product-set/card/ProductSetCard.tsx

@@ -9,20 +9,15 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
 import { MenuButton } from "../../table/MenuButton";
-import { ProductSetNameControl } from "../form/ProductSetNameControl";
 
 export interface ProductSetCardProps extends HasPermissionProp {
   name: string;
   rrule?: string;
   href: string;
-  duplicateProductSetName: string;
-  onChangeDuplicateProductSetName: (value: string) => void;
-  onCopy: () => Promise<boolean | undefined>;
+  onCopy: () => void;
   onRemove: () => void;
-  isLoading?: boolean;
   className?: string;
   override?: number;
-  duplicateProductSetError?: string;
 }
 
 export function ProductSetCard({
@@ -31,10 +26,6 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
-  onChangeDuplicateProductSetName,
-  duplicateProductSetName,
-  duplicateProductSetError,
-  isLoading,
   className = "",
   hasPermission = true,
   override = 0,
@@ -44,23 +35,19 @@ export function ProductSetCard({
   const productSetCardClasses = `product-set-card ${className}`;
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false);
 
-  const onCardClick = () => {
-    RouteService.redirectTo(href);
-  };
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       role="button"
       tabIndex={0}
       className="border-0 product-set-card-wrapper w-100 pb-0"
-      onClick={onCardClick}
+      onClick={() => RouteService.redirectTo(href)}
+      onKeyUp={() => RouteService.redirectTo(href)}
     >
       <div className={productSetCardClasses}>
         <div className="product-set-card-link">
           <div className="d-flex flex-column">
             <div>
-              {name}
-              {rrule && `(${RRule.fromString(rrule).toText()})`}
+              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
             </div>
             {!!override && (
               <div className="h6 bold ml-1">
@@ -92,33 +79,14 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item
-                        action
-                        as="div"
-                        role="button"
-                        tabIndex={0}
-                        onClick={(e) => e.stopPropagation()}
-                      >
+                      <ListGroup.Item action as="div">
                         {Boolean(onCopy) && (
-                          <ConfirmModal
-                            // confirm function  memoize the callback function and it leads to bugs
-                            confirmationHandler={onCopy}
-                            disabledButtons={isLoading}
-                            content={
-                              <ProductSetNameControl
-                                value={duplicateProductSetName}
-                                onChange={onChangeDuplicateProductSetName}
-                                error={duplicateProductSetError}
-                              />
-                            }
-                          >
+                          <ConfirmModal>
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false);
-                                  onChangeDuplicateProductSetName(name);
-                                  // confirm function  memoize the callback function and it leads to bugs
-                                  confirm(() => {});
+                                  confirm(onCopy);
                                 }}
                                 name={t("duplicate")}
                                 className="product-set-card-menu-item-text"
@@ -127,14 +95,7 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item
-                        action
-                        className="text-danger"
-                        as="div"
-                        role="button"
-                        tabIndex={0}
-                        onClick={(e) => e.stopPropagation()}
-                      >
+                      <ListGroup.Item action className="text-danger" as="div">
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

package/src/product-set/control/DateInput.tsx

@@ -247,8 +247,7 @@ export const DateInput = ({
               menuRecurrence={menuRecurrence}
               onEdit={() => handleOnEdit(menuRecurrence, index)}
               errorMessage={
-                errors?.menuRecurrences?.[`${index}`]?.availableTimes
-                  ?.message || errors?.menuRecurrences?.[`${index}`]?.message
+                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.message
               }
             />
           ))}

package/src/product-set/control/ProductSetRecurrenceControl.stories.tsx

@@ -23,7 +23,7 @@ interface ProductSetRecurrences {
 
 export const Default: Story<ProductSetRecurrences> = (args) => {
   const [items, setItems] = useState(
-    args.menuRecurrences?.sort((a, b) => a.sort - b.sort) ?? []
+    args.menuRecurrences?.sort((a, b) => a.sort - b.sort) ?? [],
   );
 
   const onDragEnd = ({ over, active }) => {
@@ -31,7 +31,7 @@ export const Default: Story<ProductSetRecurrences> = (args) => {
 
     setItems((items) => {
       const prevIndex = items.findIndex(
-        (item) => String(item.id) === active.id
+        (item) => String(item.id) === active.id,
       );
       const nextIndex = items.findIndex((item) => String(item.id) === over.id);