@licklist/design 0.67.3-dev.0 → 0.67.3-dev.2

package/dist/zone/form/components/ZoneRecurrencesControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ZoneRecurrencesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneRecurrencesControl.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAMlG,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAWtF,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;CAC7C;AAED,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;CACnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAEhC,0BAA0B,4CAmM5B,CAAC"}
+{"version":3,"file":"ZoneRecurrencesControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/ZoneRecurrencesControl.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,kEAAkE,CAAC;AAMlG,OAAO,EAAE,QAAQ,EAAE,MAAM,4DAA4D,CAAC;AAWtF,MAAM,WAAW,4BAA4B;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,EAAE,CAAC;CAC7C;AAED,KAAK,0BAA0B,GAAG;IAChC,SAAS,EAAE,QAAQ,EAAE,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,sBAAsB,6BAGhC,0BAA0B,4CAoM5B,CAAC"}

package/dist/zone/form/components/ZoneRecurrencesControl.js

@@ -212,7 +212,7 @@ function _ts_generator(thisArg, body) {
     }
 }
 var ZoneRecurrencesControl = function(param) {
-    var workHours = param.workHours;
+    var workHours = param.workHours, timeZone = param.timeZone;
     var _errors_zoneRecurrences;
     var _useFormContext = useFormContext(), control = _useFormContext.control, register = _useFormContext.register, errors = _useFormContext.formState.errors, getValues = _useFormContext.getValues, setValue = _useFormContext.setValue, clearErrors = _useFormContext.clearErrors;
     var _useFieldArray = useFieldArray({
@@ -350,7 +350,8 @@ var ZoneRecurrencesControl = function(param) {
                             onChange: handleRecurringDateChange,
                             onDelete: handleDelete,
                             setInitialStartDateAfterSelect: true,
-                            workHours: workHours
+                            workHours: workHours,
+                            timeZone: timeZone
                         })
                     })
                 }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.67.3-dev.0",
+  "version": "0.67.3-dev.2",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.29.1-dev.2",
+    "@licklist/core": "0.29.1-dev.3",
     "@licklist/eslint-config": "0.5.5",
     "@licklist/plugins": "0.32.0-dev.3",
     "lodash": "4.17.21",
@@ -61,7 +61,7 @@
     "@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.2",
+    "@licklist/core": "0.29.1-dev.3",
     "@licklist/eslint-config": "0.5.5",
     "@licklist/plugins": "0.32.0-dev.3",
     "@mdx-js/react": "1.6.22",
@@ -201,4 +201,4 @@
     "yarn": "4.4.0"
   },
   "stableVersion": "0.66.7-dev.5"
-}
+}

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

@@ -64,6 +64,7 @@ export interface EditEventFormProps extends HasPermissionProp {
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
   isExternalPaymentLinkEnabled?: boolean;
+  timeZone: string;
 }
 
 const eventImageTypes = {
@@ -83,6 +84,7 @@ export const EditEventForm = ({
   createProductSet,
   setEditProductSetId,
   isExternalPaymentLinkEnabled,
+  timeZone,
 }: EditEventFormProps) => {
   const { t } = useTranslation(["Design", "Validation"]);
 
@@ -122,7 +124,6 @@ export const EditEventForm = ({
   const visible = watch("visible");
   const editedProductSet = watch("editedProductSet");
   const productSetId = watch("productSetId");
-  const occurrenceStartAtDate = watch("start");
 
   const {
     images,
@@ -404,7 +405,7 @@ export const EditEventForm = ({
             setEditProductSetId={setEditProductSetId}
             setShowEditProductSet={setShowEditProductSet}
             showEditProductSet={showEditProductSet}
-            occurrenceStartAtDate={occurrenceStartAtDate}
+            timeZone={timeZone}
           />
 
           {hasPermission && !showEditProductSet && (

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

@@ -5,9 +5,11 @@ 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[];
@@ -15,7 +17,7 @@ interface SelectEventProductSetProps extends HasPermissionProp {
   setShowEditProductSet: (value: boolean) => void;
   createProductSet: (props: EditEventFormValues) => void;
   setEditProductSetId: (value: string) => void;
-  occurrenceStartAtDate: string;
+  timeZone: string;
 }
 
 export const SelectEventProductSet = ({
@@ -24,7 +26,7 @@ export const SelectEventProductSet = ({
   setEditProductSetId,
   showEditProductSet,
   setShowEditProductSet,
-  occurrenceStartAtDate,
+  timeZone,
 }: SelectEventProductSetProps) => {
   const { t } = useTranslation(["Design"]);
   const form = useFormContext<EditEventFormValues>();
@@ -42,6 +44,21 @@ 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));
@@ -95,6 +112,7 @@ 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);
   };
 
@@ -110,49 +128,29 @@ export const SelectEventProductSet = ({
           <Controller
             control={control}
             name="productSetId"
-            render={({ field }) => {
-              const fieldValue = String(field.value);
+            render={() => {
               return (
                 <>
                   <div className="d-flex align-items-center flex-row w-100">
                     <ConfirmModal>
                       {(confirm) => {
                         return (
-                          <Form.Control
-                            as="select"
-                            onChange={(e) =>
+                          <Typeahead
+                            name="productSetId"
+                            value={selectedProductSetTypeheadValue}
+                            containerStyles={{ width: "100%" }}
+                            onChangeValue={(typeheadValue) => {
                               onChangeProductSet(
-                                Number(e.target.value),
+                                Number(typeheadValue.id),
                                 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>
                               );
-                            })}
-                          </Form.Control>
+                            }}
+                            options={typeheadValues}
+                            placeholder={t("Design:choose")}
+                            noOptionsMessage={t(
+                              "Design:noAvailableProductSets",
+                            )}
+                          />
                         );
                       }}
                     </ConfirmModal>
@@ -211,10 +209,10 @@ export const SelectEventProductSet = ({
       {showEditProductSet && productSetId && (
         <EditEventProductSet
           onSubmit={onSubmit}
-          occurrenceStartAtDate={occurrenceStartAtDate}
           defaultValues={
             productSetId === editedProductSet?.id && editedProductSet
           }
+          timeZone={timeZone}
         />
       )}
     </>

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

@@ -22,13 +22,13 @@ export interface EventDates {
 interface EditEventProductSetProps {
   onSubmit: (value: EditEventFormValues["editedProductSet"]) => void;
   defaultValues?: EditEventFormValues["editedProductSet"];
-  occurrenceStartAtDate: string;
+  timeZone: string;
 }
 
 export const EditEventProductSet = ({
   onSubmit,
   defaultValues,
-  occurrenceStartAtDate,
+  timeZone,
 }: EditEventProductSetProps) => {
   const { companyId } = useParams<{
     companyId: string;
@@ -127,8 +127,8 @@ export const EditEventProductSet = ({
             fee={feeInPercent}
             isEventEditProductSet
             isOverrides
-            occurrenceStartAtDate={occurrenceStartAtDate}
             workHours={undefined}
+            timeZone={timeZone}
           />
           <Button
             disabled={isLoading}

package/src/modals/confirmation/ConfirmModal.tsx

@@ -20,6 +20,9 @@ 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;
@@ -37,7 +40,9 @@ export function ConfirmModal({
   type = "default",
   children,
   onClose,
+  confirmationHandler,
   title,
+  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -52,10 +57,16 @@ export function ConfirmModal({
     setIsOpen(() => true);
   };
 
-  const handleConfirmation = (e) => {
+  const handleConfirmation = async (e) => {
     e.stopPropagation();
-    if (!actionRef.current) return;
-
+    if (!actionRef.current && !confirmationHandler) return;
+    if (confirmationHandler) {
+      const res = await confirmationHandler();
+      if (res) {
+        setIsOpen(() => false);
+      }
+      return;
+    }
     actionRef.current();
     setIsOpen(() => false);
   };
@@ -88,6 +99,7 @@ export function ConfirmModal({
           <Button
             variant="danger"
             className="btn-sm rounded"
+            disabled={disabledButtons}
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
@@ -105,12 +117,14 @@ 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}
                 >
@@ -121,6 +135,7 @@ export function ConfirmModal({
               <>
                 <Button
                   variant="danger"
+                  disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
@@ -128,6 +143,7 @@ export function ConfirmModal({
                 </Button>
                 <Button
                   variant="success"
+                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >

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

@@ -9,15 +9,20 @@ 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;
-  onCopy: () => void;
+  duplicateProductSetName: string;
+  onChangeDuplicateProductSetName: (value: string) => void;
+  onCopy: () => Promise<boolean | undefined>;
   onRemove: () => void;
+  isLoading?: boolean;
   className?: string;
   override?: number;
+  duplicateProductSetError?: string;
 }
 
 export function ProductSetCard({
@@ -26,6 +31,10 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
+  onChangeDuplicateProductSetName,
+  duplicateProductSetName,
+  duplicateProductSetError,
+  isLoading,
   className = "",
   hasPermission = true,
   override = 0,
@@ -35,19 +44,23 @@ 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={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      onClick={onCardClick}
     >
       <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">
@@ -79,14 +92,33 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item action as="div">
+                      <ListGroup.Item
+                        action
+                        as="div"
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onCopy) && (
-                          <ConfirmModal>
+                          <ConfirmModal
+                            // confirm function  memoize the callback function and it leads to bugs
+                            confirmationHandler={onCopy}
+                            disabledButtons={isLoading}
+                            content={
+                              <ProductSetNameControl
+                                value={duplicateProductSetName}
+                                onChange={onChangeDuplicateProductSetName}
+                                error={duplicateProductSetError}
+                              />
+                            }
+                          >
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false);
-                                  confirm(onCopy);
+                                  onChangeDuplicateProductSetName(name);
+                                  // confirm function  memoize the callback function and it leads to bugs
+                                  confirm(() => {});
                                 }}
                                 name={t("duplicate")}
                                 className="product-set-card-menu-item-text"
@@ -95,7 +127,14 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item action className="text-danger" as="div">
+                      <ListGroup.Item
+                        action
+                        className="text-danger"
+                        as="div"
+                        role="button"
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

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

@@ -37,6 +37,7 @@ interface DateAndRecurrenceInputProps {
   workHours: WorkHour[] | undefined;
   providerHasBookingManagement: boolean;
   isLoading?: boolean;
+  timeZone: string;
 }
 
 export const DateAndRecurrenceInput = ({
@@ -44,6 +45,7 @@ export const DateAndRecurrenceInput = ({
   providerHasBookingManagement,
   workHours,
   isLoading,
+  timeZone,
 }: DateAndRecurrenceInputProps) => {
   const {
     control,
@@ -227,6 +229,7 @@ export const DateAndRecurrenceInput = ({
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
                 workHours={workHours}
+                timeZone={timeZone}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

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

@@ -1,9 +1,7 @@
-import { useEffect } from "react";
 import { Col, Form, Row } from "react-bootstrap";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
-import { DateTime } from "luxon";
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
@@ -16,7 +14,6 @@ import {
   RELY_ON_PEOPLE_TYPES,
   RelyOnPeopleType,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { DATE_MONTH_LOCALE_FORMAT } from "@licklist/core/dist/Config";
 import { useId } from "@react-aria/utils";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
 import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
@@ -91,7 +88,6 @@ export interface ProductSetControlProps {
   workHours: WorkHour[] | undefined;
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
-  occurrenceStartAtDate?: string;
   isCreateNewOverrides?: boolean;
 }
 
@@ -109,7 +105,6 @@ export function ProductSetControl({
   workHours,
   providerHasBookingManagement = false,
   isOverrides = false,
-  occurrenceStartAtDate,
   isCreateNewOverrides = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
@@ -119,12 +114,10 @@ export function ProductSetControl({
     formState: { errors },
     watch,
     setError,
-    setValue,
     clearErrors,
   } = useFormContext<ProductSetControlValues>();
 
   const steps = watch("steps");
-  const productSetName = watch("name");
 
   const nameId = useId();
   const termsAndConditionsId = useId();
@@ -138,13 +131,6 @@ export function ProductSetControl({
     productCategories?.some((category) => checkIfZoneCategory(category?.type)),
   );
 
-  useEffect(() => {
-    if (!occurrenceStartAtDate) return;
-    const eventStartDate = DateTime.fromISO(occurrenceStartAtDate);
-    const eventStart = eventStartDate.toFormat(DATE_MONTH_LOCALE_FORMAT);
-    setValue("name", `${productSetName} (${eventStart})`);
-  }, [setValue, occurrenceStartAtDate]);
-
   return (
     <Row
       className={`product-set-form ${
@@ -200,6 +186,7 @@ export function ProductSetControl({
                 workHours={isZoneAdded ? workHours : undefined}
                 isLoading={isLoading}
                 providerHasBookingManagement={providerHasBookingManagement}
+                timeZone={timeZone}
               />
             )}
           </>

package/src/product-set/form/ProductSetForm.tsx

@@ -59,6 +59,7 @@ export interface ProductSetFormProps
   isOverrides?: boolean;
   workHours?: WorkHour[];
   isCreateNewOverrides?: boolean;
+  timeZone: string;
 }
 
 export function ProductSetForm({
@@ -77,6 +78,7 @@ export function ProductSetForm({
   workHours,
   isOverrides,
   isCreateNewOverrides,
+  timeZone,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -194,6 +196,7 @@ export function ProductSetForm({
                     providerHasBookingManagement={providerHasBookingManagement}
                     isOverrides={isOverrides}
                     isCreateNewOverrides={isCreateNewOverrides}
+                    timeZone={timeZone}
                   />
                   <Row>
                     <Col md={6} sm={12} />

package/src/product-set/form/ProductSetNameControl.tsx

@@ -0,0 +1,27 @@
+import { Form } from "react-bootstrap";
+import { useTranslation } from "react-i18next";
+
+export const ProductSetNameControl = ({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+}) => {
+  const { t } = useTranslation(["Design"]);
+  return (
+    <Form.Group>
+      <Form.Label>{t("Design:ProductSetName")}*</Form.Label>
+      <Form.Control
+        value={value}
+        maxLength={255}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t("Design:placeholderProductSetName")}
+        isInvalid={Boolean(error)}
+      />
+      <Form.Control.Feedback type="invalid">{error}</Form.Control.Feedback>
+    </Form.Group>
+  );
+};

package/src/product-set/form/index.ts

@@ -1 +1,2 @@
 export * from "./ProductSetForm";
+export * from "./ProductSetNameControl";

package/src/product-set/utils/index.ts

@@ -3,6 +3,7 @@ import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemp
 import { TFunction } from "react-i18next";
 import { UseFormSetError } from "react-hook-form";
 import { checkIfZoneCategory } from "@licklist/plugins";
+import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { TemplateItem } from "../control/ProductSetControl";
 import { ProductSetFormValues } from "../form/ProductSetForm";
 
@@ -12,6 +13,11 @@ interface CheckAvailableTimesErrors {
   t: TFunction;
 }
 
+export interface MenuTypeheadItem {
+  id: number;
+  label: string;
+  value: number;
+}
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -84,3 +90,8 @@ export const checkAvailableTimesErrors = ({
   });
   return hasError;
 };
+
+export const getTypeHeadItemsFromMenus = (
+  menus?: (ProductSet | ProductSetFormValues)[],
+): MenuTypeheadItem[] =>
+  menus?.map((menu) => ({ id: menu.id, value: menu.id, label: menu.name }));