@licklist/design 0.68.1 → 0.68.2-dev.2

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

@@ -1,49 +1,49 @@
-import { useEffect, useState } from "react";
-import { Form } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { useFormContext, Controller } from "react-hook-form";
-import EventService from "@licklist/core/dist/Services/Event/EventService";
+import { useEffect, useState } from 'react'
+import { Form } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { useFormContext, Controller } from 'react-hook-form'
+import EventService from '@licklist/core/dist/Services/Event/EventService'
 
-import { Switch, NumberInput } from "../../../../static";
+import { Switch, NumberInput } from '../../../../static'
 
-const SALE_DEADLINE_BEFORE_TYPE = "before";
-const SALE_DEADLINE_AFTER_TYPE = "after";
+const SALE_DEADLINE_BEFORE_TYPE = 'before'
+const SALE_DEADLINE_AFTER_TYPE = 'after'
 
 const SALE_DEADLINES_EVENT_START_TYPES = [
   { type: SALE_DEADLINE_BEFORE_TYPE },
   { type: SALE_DEADLINE_AFTER_TYPE },
-];
+]
 
 type DeadlineType =
   | typeof SALE_DEADLINE_BEFORE_TYPE
-  | typeof SALE_DEADLINE_AFTER_TYPE;
+  | typeof SALE_DEADLINE_AFTER_TYPE
 
 type SaleDeadlineType = {
-  saleDeadline: null | number;
-};
+  saleDeadline: null | number
+}
 
 export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
-  const { t } = useTranslation(["Design"]);
+  const { t } = useTranslation(['Design'])
   const {
     control,
     watch,
     formState: { errors },
-  } = useFormContext<SaleDeadlineType>();
+  } = useFormContext<SaleDeadlineType>()
   const [deadlineType, setDeadlineType] = useState<DeadlineType>(
     SALE_DEADLINE_BEFORE_TYPE,
-  );
-  const saleDeadline = watch("saleDeadline");
+  )
+  const saleDeadline = watch('saleDeadline')
 
   useEffect(() => {
     if (saleDeadline > 0) {
-      setDeadlineType(SALE_DEADLINE_AFTER_TYPE);
+      setDeadlineType(SALE_DEADLINE_AFTER_TYPE)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [saleDeadline]);
+  }, [saleDeadline])
 
   return (
     <Form.Group className="sales-deadline">
-      <Form.Label>{t("Design:salesDeadline")}</Form.Label>
+      <Form.Label>{t('Design:salesDeadline')}</Form.Label>
       <Form.Control.Feedback type="invalid">
         {errors.saleDeadline?.message}
       </Form.Control.Feedback>
@@ -55,29 +55,29 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
           fieldState: { invalid, error },
         }) => {
           const changeValueByType = (type: string) => {
-            setDeadlineType(type as DeadlineType);
+            setDeadlineType(type as DeadlineType)
 
             if (saleDeadline === null || saleDeadline === undefined) {
-              onChange(0);
-              return;
+              onChange(0)
+              return
             }
 
-            const multiplier = type === SALE_DEADLINE_BEFORE_TYPE ? -1 : 1;
+            const multiplier = type === SALE_DEADLINE_BEFORE_TYPE ? -1 : 1
 
-            onChange(multiplier * Math.abs(saleDeadline));
-          };
+            onChange(multiplier * Math.abs(saleDeadline))
+          }
 
           const { days, hours, minutes } =
-            EventService.saleDeadlineToTime(value);
+            EventService.saleDeadlineToTime(value)
 
           const setSaleDeadlineValue = (nextValue: number) => {
             if (deadlineType === SALE_DEADLINE_BEFORE_TYPE) {
-              onChange(nextValue * -1);
-              return;
+              onChange(nextValue * -1)
+              return
             }
 
-            onChange(nextValue);
-          };
+            onChange(nextValue)
+          }
 
           const changeDays = (nextDaysValue: number) => {
             setSaleDeadlineValue(
@@ -86,8 +86,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                 hours,
                 minutes,
               ),
-            );
-          };
+            )
+          }
 
           const changeHours = (nextHoursValue: number) => {
             setSaleDeadlineValue(
@@ -96,8 +96,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                 nextHoursValue,
                 minutes,
               ),
-            );
-          };
+            )
+          }
 
           const changeMinutes = (nextMinutesValue: number) => {
             setSaleDeadlineValue(
@@ -106,8 +106,8 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                 hours,
                 nextMinutesValue,
               ),
-            );
-          };
+            )
+          }
 
           return (
             <>
@@ -125,7 +125,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
               </Form.Group>
               <div className="d-flex">
                 <Form.Group className="d-flex flex-column col-4 pl-0">
-                  <Form.Label>{t("Design:saleDays")}</Form.Label>
+                  <Form.Label>{t('Design:saleDays')}</Form.Label>
                   <NumberInput
                     value={days}
                     min={0}
@@ -136,7 +136,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                   />
                 </Form.Group>
                 <Form.Group className="d-flex flex-column col-4 pl-0">
-                  <Form.Label>{t("Design:saleHours")}</Form.Label>
+                  <Form.Label>{t('Design:saleHours')}</Form.Label>
                   <NumberInput
                     value={hours}
                     min={0}
@@ -148,7 +148,7 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                   />
                 </Form.Group>
                 <Form.Group className="d-flex flex-column col-4 pl-0">
-                  <Form.Label>{t("Design:saleMinutes")}</Form.Label>
+                  <Form.Label>{t('Design:saleMinutes')}</Form.Label>
                   <NumberInput
                     value={minutes}
                     min={0}
@@ -168,10 +168,10 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
                 </div>
               )}
             </>
-          );
+          )
         }}
       />
       <Form.Row />
     </Form.Group>
-  );
-};
+  )
+}

package/src/events/edit-event-modal/component/SaleDeadline/index.ts

@@ -1 +1 @@
-export { SaleDeadline } from "./SaleDeadline";
+export { SaleDeadline } from './SaleDeadline'

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

@@ -1,21 +1,23 @@
-import { useCallback } from "react";
-import { useTranslation } from "react-i18next";
-import { Button, Form } from "react-bootstrap";
-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 { ConfirmModal } from "../../../../modals/confirmation/ConfirmModal";
-import { EditEventFormValues } from "../EditEventForm/EditEventForm";
-import { EditEventProductSet } from "./component/EditEventProductSet";
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Button, Form } from 'react-bootstrap'
+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[];
-  showEditProductSet: boolean;
-  setShowEditProductSet: (value: boolean) => void;
-  createProductSet: (props: EditEventFormValues) => void;
-  setEditProductSetId: (value: string) => void;
-  timeZone: string;
+  productSets?: ProductSet[]
+  showEditProductSet: boolean
+  setShowEditProductSet: (value: boolean) => void
+  createProductSet: (props: EditEventFormValues) => void
+  setEditProductSetId: (value: string) => void
+  timeZone: string
 }
 
 export const SelectEventProductSet = ({
@@ -26,8 +28,8 @@ export const SelectEventProductSet = ({
   setShowEditProductSet,
   timeZone,
 }: SelectEventProductSetProps) => {
-  const { t } = useTranslation(["Design"]);
-  const form = useFormContext<EditEventFormValues>();
+  const { t } = useTranslation(['Design'])
+  const form = useFormContext<EditEventFormValues>()
 
   const {
     control,
@@ -36,38 +38,53 @@ export const SelectEventProductSet = ({
     formState: { errors },
     getValues,
     setValue,
-  } = form;
+  } = form
 
-  const productSetsId = useId();
-  const productSetId = watch("productSetId");
-  const editedProductSet = watch("editedProductSet");
+  const productSetsId = useId()
+  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));
-      setShowEditProductSet(true);
+      setEditProductSetId(String(productSetId))
+      setShowEditProductSet(true)
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [productSetId],
-  );
+  )
 
   const revertEditProductSet = () => {
-    setShowEditProductSet(false);
+    setShowEditProductSet(false)
     if (!editedProductSet) {
-      return;
+      return
     }
 
-    setValue("editedProductSet", undefined);
-  };
+    setValue('editedProductSet', undefined)
+  }
 
   const handleCreateProductSet = async () => {
-    const isValid = await trigger();
+    const isValid = await trigger()
     if (!isValid) {
-      return;
+      return
     }
-    const eventFromValues = getValues();
-    await createProductSet(eventFromValues);
-  };
+    const eventFromValues = getValues()
+    await createProductSet(eventFromValues)
+  }
 
   const onChangeProductSet = (
     value: number,
@@ -75,28 +92,29 @@ export const SelectEventProductSet = ({
   ) => {
     if (editedProductSet) {
       confirm(() => {
-        setValue("productSetId", value);
-        setValue("editedProductSet", undefined);
-      });
-      return;
+        setValue('productSetId', value)
+        setValue('editedProductSet', undefined)
+      })
+      return
     }
     if (showEditProductSet) {
-      setShowEditProductSet(false);
+      setShowEditProductSet(false)
     }
-    setValue("productSetId", value);
-  };
+    setValue('productSetId', value)
+  }
 
-  const showOverrideProductSet = !showEditProductSet && productSetId;
+  const showOverrideProductSet = !showEditProductSet && productSetId
 
   const isOverrideProductSet = productSets.find(
     (productSet) => productSet.id === productSetId,
-  )?.isOverride;
+  )?.isOverride
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const onSubmit = (value: EditEventFormValues["editedProductSet"]) => {
-    setShowEditProductSet(false);
-    setValue("editedProductSet", value);
-  };
+  const onSubmit = (value: EditEventFormValues['editedProductSet']) => {
+    setShowEditProductSet(false)
+    setValue('productSetId', value.id)
+    setValue('editedProductSet', value)
+  }
 
   return (
     <>
@@ -105,106 +123,77 @@ export const SelectEventProductSet = ({
           controlId={productSetsId}
           className="d-flex flex-column  w-100 choose-product-set-container "
         >
-          <Form.Label>{t("Design:selectProductSet")}</Form.Label>
+          <Form.Label>{t('Design:selectProductSet')}</Form.Label>
 
           <Controller
             control={control}
             name="productSetId"
-            render={({ field }) => {
-              const fieldValue = String(field.value);
-              return (
-                <>
-                  <div className="d-flex align-items-center flex-row w-100">
-                    <ConfirmModal>
-                      {(confirm) => {
-                        return (
-                          <Form.Control
-                            as="select"
-                            onChange={(e) =>
-                              onChangeProductSet(
-                                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>
-                              );
-                            })}
-                          </Form.Control>
-                        );
-                      }}
-                    </ConfirmModal>
-
-                    <div className="buttons-container">
-                      {!showEditProductSet && !editedProductSet && (
-                        <Button
-                          variant=""
-                          className="btn product-set-button mr-4"
-                          onClick={handleCreateProductSet}
-                        >
-                          {t("addNewProductSet")}
-                        </Button>
-                      )}
-                      {showOverrideProductSet && (
-                        <Button
-                          variant=""
-                          className="btn product-set-button "
-                          onClick={onEditProductSet}
-                        >
-                          {isOverrideProductSet
-                            ? t("editOverrides")
-                            : t("editProductSet")}
-                        </Button>
-                      )}
-                      {showEditProductSet && (
-                        <Button
-                          variant=""
-                          className="btn product-set-button"
-                          onClick={revertEditProductSet}
-                        >
-                          {t("cancelAndRevert")}
-                        </Button>
-                      )}
-                      {!showEditProductSet && editedProductSet && (
-                        <Button
-                          variant=""
-                          className="btn product-set-button ml-4 text-danger"
-                          onClick={revertEditProductSet}
-                        >
-                          {t("undoChanges")}
-                        </Button>
-                      )}
-                    </div>
+            render={() => (
+              <>
+                <div className="d-flex align-items-center flex-row w-100">
+                  <ConfirmModal>
+                    {(confirm) => (
+                      <Typeahead
+                        name="productSetId"
+                        value={selectedProductSetTypeheadValue}
+                        containerStyles={{ width: '100%' }}
+                        onChangeValue={(typeheadValue) => {
+                          onChangeProductSet(Number(typeheadValue.id), confirm)
+                        }}
+                        options={typeheadValues}
+                        placeholder={t('Design:choose')}
+                        noOptionsMessage={t('Design:noAvailableProductSets')}
+                      />
+                    )}
+                  </ConfirmModal>
+
+                  <div className="buttons-container">
+                    {!showEditProductSet && !editedProductSet && (
+                      <Button
+                        variant=""
+                        className="btn product-set-button mr-4"
+                        onClick={handleCreateProductSet}
+                      >
+                        {t('addNewProductSet')}
+                      </Button>
+                    )}
+                    {showOverrideProductSet && (
+                      <Button
+                        variant=""
+                        className="btn product-set-button "
+                        onClick={onEditProductSet}
+                      >
+                        {isOverrideProductSet
+                          ? t('editOverrides')
+                          : t('editProductSet')}
+                      </Button>
+                    )}
+                    {showEditProductSet && (
+                      <Button
+                        variant=""
+                        className="btn product-set-button"
+                        onClick={revertEditProductSet}
+                      >
+                        {t('cancelAndRevert')}
+                      </Button>
+                    )}
+                    {!showEditProductSet && editedProductSet && (
+                      <Button
+                        variant=""
+                        className="btn product-set-button ml-4 text-danger"
+                        onClick={revertEditProductSet}
+                      >
+                        {t('undoChanges')}
+                      </Button>
+                    )}
                   </div>
+                </div>
 
-                  <Form.Control.Feedback type="invalid">
-                    {errors?.productSetId?.message}
-                  </Form.Control.Feedback>
-                </>
-              );
-            }}
+                <Form.Control.Feedback type="invalid">
+                  {errors?.productSetId?.message}
+                </Form.Control.Feedback>
+              </>
+            )}
           />
         </Form.Group>
       </div>
@@ -218,5 +207,5 @@ export const SelectEventProductSet = ({
         />
       )}
     </>
-  );
-};
+  )
+}