@licklist/design 0.62.3 → 0.63.0-dev.1

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

@@ -22,14 +22,10 @@ import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemp
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { ruleForUrlWithProtocol } from "@licklist/plugins/dist/validation/Rules/urlRule";
 import { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
+import { ProductSetRecurrence } from "@licklist/core/dist/DataMapper/Product/ProductSetRecurrenceDataMapper";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
-import {
-  DateAndRecurrenceInput,
-  // TODO: Show Date Component, when reccurent date bugs are fixed
-  // DateAndRecurrenceInput,
-  DateAndRecurrenceInputValues,
-} from "./DateAndRecurrenceInput";
+import { DateAndRecurrenceInput } from "./DateAndRecurrenceInput";
 import TutorialGifCard from "./TutorialGifCard";
 import { Step } from "../types";
 import { StepsControl } from "../form/StepsControl";
@@ -53,7 +49,7 @@ export interface TemplateItem {
   label: string;
 }
 
-export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
+export interface ProductSetControlValues {
   name: string;
   type: ProductSetType;
   termsAndConditions: string;
@@ -65,6 +61,7 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   steps: Step[];
   emailTemplates?: TemplateItem[];
   smsTemplates?: TemplateItem[];
+  menuRecurrences?: Partial<ProductSetRecurrence>[];
 }
 
 export interface ProductSetControlShared {
@@ -85,7 +82,7 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
-  workHours?: WorkHour[];
+  workHours: WorkHour[] | undefined;
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
 }
@@ -123,7 +120,7 @@ export function ProductSetControl({
 
   const showSmsTemplateSelector = showSmsTemplate && !isOverrides;
   const showEmailTemplateSelector = showEmailTemplate && !isOverrides;
-
+  const showDateSelector = !isEventEditProductSet && isOverrides;
   return (
     <Row
       className={`product-set-form ${
@@ -165,7 +162,7 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
-        {isOverrides ? (
+        {showDateSelector ? (
           <DateInput
             workHours={workHours}
             isLoading={isLoading}
@@ -188,7 +185,11 @@ export function ProductSetControl({
 
         <TutorialGifCard isOverrides={isOverrides} />
 
-        <StepsControl isLoading={isLoading} isOverrides={isOverrides} />
+        <StepsControl
+          isLoading={isLoading}
+          isEventEditProductSet={isEventEditProductSet}
+          isOverrides={isOverrides}
+        />
       </Col>
       <Col md={6} sm={12}>
         <div className="second-column">

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

@@ -0,0 +1,25 @@
+import { TIME_FORMAT } from "@licklist/core/dist/Config";
+import { dateTimesSortFn } from "@licklist/plugins/dist/utils/dateTime";
+import { extractObjectWithLowestKey } from "@licklist/plugins/dist/utils/extractObjectWithLowestKey";
+import { DateTime } from "luxon";
+import { Product, Step } from "../types";
+
+const getProductsFromSteps = (steps: Step[]): Product[] =>
+  steps.reduce(
+    (acc, step) =>
+      acc.concat(
+        step.productCategories.reduce(
+          (acc, productCategory) => acc.concat(productCategory.products),
+          []
+        )
+      ),
+    []
+  );
+
+export const getProductWithSmallestDuration = (steps: Step[]): Product =>
+  extractObjectWithLowestKey(getProductsFromSteps(steps), "duration");
+
+export const getLatestAvailableDateTime = (array: string[]): DateTime =>
+  array
+    .map((time) => DateTime.fromFormat(time, TIME_FORMAT))
+    .sort(dateTimesSortFn("desc"))[0];

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

@@ -36,6 +36,7 @@ import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number;
   isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
 }
 
 const getCategoryDefaultValue = (
@@ -67,6 +68,7 @@ export function ProductCategoriesControl({
   isLoading,
   stepIndex,
   isOverrides,
+  isEventEditProductSet,
 }: ProductCategoriesControlProps) {
   const { t } = useTranslation("Design");
   const {
@@ -214,6 +216,10 @@ export function ProductCategoriesControl({
             ? String(productCategory.id)
             : productCategory.uniqueId;
 
+          const isOverridesCategory = productCategory.products.some((product) =>
+            isEventEditProductSet ? !!product.id : !!product.originalProductId
+          );
+
           const onSetIsExpanded = () => {
             setIsExpanded(productCategoryId);
           };
@@ -269,7 +275,7 @@ export function ProductCategoriesControl({
                       categoryName={value}
                       stepIndex={stepIndex}
                       productCategoryIndex={index}
-                      isOverride={isOverrides}
+                      isOverride={isOverrides && isOverridesCategory}
                     />
                   }
                   isOverride={isOverrides}
@@ -296,6 +302,7 @@ export function ProductCategoriesControl({
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                     isOverrides={isOverrides}
+                    isEventEditProductSet={isEventEditProductSet}
                   />
                 </SortableTree.Item>
               )}
@@ -305,9 +312,7 @@ export function ProductCategoriesControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addCategory")}
-        isOverride={isOverrides}
         onClick={() => {
-           if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />
@@ -316,7 +321,6 @@ export function ProductCategoriesControl({
         isVisible={isSelectCategoryVisible}
         onHide={() => setIsSelectCategoryVisible(false)}
         onCategorySelect={(categoryType) => {
-          if (isOverrides) return;
           append(getCategoryDefaultValue(categoryType, fields.length));
           setShowCategoryModal(true);
           if (

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

@@ -63,9 +63,9 @@ Default.args = {
       sort: 100,
       type: "standard",
       updatedAt: "2023-05-08T15:55:28.000+03:00",
+      defaultDuration: 30,
       zoneRecurrences: [
         {
-          availableTimes: ["10:05", "10:25", "10:45"],
           endDate: "2022-02-22",
           endTime: "22:00:00",
           id: 1,
@@ -90,7 +90,6 @@ Default.args = {
       updatedAt: "2023-05-08T15:55:28.000+03:00",
       zoneRecurrences: [
         {
-          availableTimes: ["10:05", "10:25", "10:45"],
           endDate: "2022-02-22",
           endTime: "22:00:00",
           id: 1,

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

@@ -26,12 +26,16 @@ import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
 export interface WithIsLoading {
   isLoading: boolean;
 }
+export interface WithIdOptional {
+  id?: number;
+}
+
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;

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

@@ -35,6 +35,7 @@ interface ProductsControlProps extends WithIsLoading {
   categoryType: CategoryType;
   zones?: Zone[];
   isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -57,6 +58,7 @@ const getDefaultProductValue = (sort: number): Product => ({
   quantitySelector: 1,
   hasSpecialNotes: false,
   weight: 0,
+  originalProductId: null,
   type: DEFAULT_PRODUCT_TYPE,
   tierId: Number(uniqueId()),
   zoneId: null,
@@ -79,6 +81,7 @@ export function ProductsControl({
   categoryType,
   zones,
   isOverrides,
+  isEventEditProductSet,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -203,90 +206,97 @@ export function ProductsControl({
         onDragEnd={handleDragEnd}
         sensors={[mouseSensor]}
       >
-        {fields.map((product, index) => (
-          <Controller
-            key={product._id}
-            control={control}
-            name={`${productControlFieldName}.${index}.name` as const}
-            rules={{
-              required: t("Validation:fieldRequired", {
-                attribute: t("name"),
-              }) as string,
-            }}
-            render={({ field: { value, onChange } }) => (
-              <SortableTree.Item
-                key={`product-${product._id}`}
-                id={String(product._id)}
-                isExpanded={isFirstProductAdded}
-                isInvalid={!!categoryProductErrors}
-                title={value}
-                isOverride={isOverrides}
-                badge={<Badge className="product-badge">{t("product")}</Badge>}
-                isIconInHeader={false}
-                cancelChanges={() => cancelChanges(index)}
-                edit={() => edit(index)}
-                isProduct
-                secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
-                subTitle={
-                  <div className="product-set-badges-container">
-                    <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
-                    <span>
-                      {`£${prices[index]} ${t("each")} - ${t("qty")}:${
-                        !isUnlimitedQuantities[index]
-                          ? ` ${quantities[index]}`
-                          : t(" unlimited")
-                      } ${
-                        !isUnlimitedQuantities[index]
-                          ? ` - ${t("possibleRevenue")} £${
-                              prices[index] * quantities[index]
-                            }`
-                          : ""
-                      } `}
-                    </span>
-                  </div>
-                }
-                modalLabel={t("addNewProduct")}
-                modalClass={ProductSetModalClasses.product}
-                isNewAdded={showProductModal}
-                body={
-                  <ProductControl<ProductSetFormValues>
+        {fields.map((product, index) => {
+          const isOverridesProductSet = isEventEditProductSet
+            ? !!product.id
+            : isOverrides && !!product.originalProductId;
+
+          return (
+            <Controller
+              key={product._id}
+              control={control}
+              name={`${productControlFieldName}.${index}.name` as const}
+              rules={{
+                required: t("Validation:fieldRequired", {
+                  attribute: t("name"),
+                }) as string,
+              }}
+              render={({ field: { value, onChange } }) => (
+                <SortableTree.Item
+                  key={`product-${product._id}`}
+                  id={String(product._id)}
+                  isExpanded={isFirstProductAdded}
+                  isInvalid={!!categoryProductErrors}
+                  title={value}
+                  isOverride={isOverrides}
+                  badge={
+                    <Badge className="product-badge">{t("product")}</Badge>
+                  }
+                  isIconInHeader={false}
+                  cancelChanges={() => cancelChanges(index)}
+                  edit={() => edit(index)}
+                  secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
+                  subTitle={
+                    <div className="product-set-badges-container">
+                      <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                      <span>
+                        {`£${prices[index]} ${t("each")} - ${t("qty")}:${
+                          !isUnlimitedQuantities[index]
+                            ? ` ${quantities[index]}`
+                            : t(" unlimited")
+                        } ${
+                          !isUnlimitedQuantities[index]
+                            ? ` - ${t("possibleRevenue")} £${
+                                prices[index] * quantities[index]
+                              }`
+                            : ""
+                        } `}
+                      </span>
+                    </div>
+                  }
+                  modalLabel={t("addNewProduct")}
+                  modalClass={ProductSetModalClasses.product}
+                  isNewAdded={showProductModal}
+                  body={
+                    <ProductControl<ProductSetFormValues>
+                      isLoading={isLoading}
+                      quantityType={quantityType}
+                      allowDeposits={allowDeposits}
+                      hasBookingManagement={false}
+                      fieldNamePrefix={
+                        `${productControlFieldName}.${index}` as const
+                      }
+                      productName={value}
+                      onProductNameChange={onChange}
+                      hasTicket={hasTicket}
+                      categoryType={categoryType}
+                      zoneDuration={catergoryZone?.defaultDuration}
+                      isOverrides={isOverridesProductSet}
+                    />
+                  }
+                  onDelete={() => onProductRemove(index)}
+                  validate={() =>
+                    trigger(`${productControlFieldName}.${index}`)
+                  }
+                  saveValidField={saveValidField}
+                  // preItem={<Popover className="d-none d-sm-block" />}
+                >
+                  <SubProductsControl
                     isLoading={isLoading}
                     quantityType={quantityType}
-                    allowDeposits={allowDeposits}
-                    hasBookingManagement={false}
-                    fieldNamePrefix={
-                      `${productControlFieldName}.${index}` as const
-                    }
-                    productName={value}
-                    onProductNameChange={onChange}
-                    hasTicket={hasTicket}
-                    categoryType={categoryType}
-                    zoneDuration={catergoryZone?.defaultDuration}
-                    isOverrides={isOverrides}
+                    stepIndex={stepIndex}
+                    productCategoryIndex={productCategoryIndex}
+                    productIndex={index}
                   />
-                }
-                onDelete={() => onProductRemove(index)}
-                validate={() => trigger(`${productControlFieldName}.${index}`)}
-                saveValidField={saveValidField}
-                // preItem={<Popover className="d-none d-sm-block" />}
-              >
-                <SubProductsControl
-                  isLoading={isLoading}
-                  quantityType={quantityType}
-                  stepIndex={stepIndex}
-                  productCategoryIndex={productCategoryIndex}
-                  productIndex={index}
-                />
-              </SortableTree.Item>
-            )}
-          />
-        ))}
+                </SortableTree.Item>
+              )}
+            />
+          );
+        })}
       </SortableTree>
       <CreateProductSetItem
         title={t("addProduct")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           append(getDefaultProductValue(fields.length));
           setShowProductModal(true);
 

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

@@ -19,9 +19,14 @@ import { ProductSetFormValues } from "./ProductSetForm";
 interface StepsControlProps {
   isLoading: boolean;
   isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
 }
 
-export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
+export function StepsControl({
+  isLoading,
+  isOverrides,
+  isEventEditProductSet,
+}: StepsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
   const [showStepModal, setShowStepModal] = useState(false);
@@ -68,8 +73,8 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
     <>
       {fields.map((step, index) => {
         const stepFieldName = `steps.${index}` as const;
-
         const stepData = getValues(stepFieldName);
+        const isOverrideStep = !!step.id;
 
         return (
           <Controller
@@ -92,9 +97,9 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => !isOverrides && edit(index)}
+                edit={() => edit(index)}
                 cancelChanges={() => cancelChanges(index)}
-                isOverride={isOverrides}
+                isOverride={isOverrideStep}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -110,6 +115,7 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                     stepIndex={index}
                     stepName={value}
                     onStepNameChange={onChange}
+                    isOverrides={isOverrideStep}
                   />
                 }
                 onDelete={() => remove(index)}
@@ -140,6 +146,7 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
                   isLoading={isLoading}
                   stepIndex={index}
                   isOverrides={isOverrides}
+                  isEventEditProductSet={isEventEditProductSet}
                 />
               </SortableTree.Item>
             )}
@@ -149,9 +156,7 @@ export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
 
       <CreateProductSetItem
         title={t("addStep")}
-        isOverride={isOverrides}
         onClick={() => {
-          if (isOverrides) return;
           append(getDefaultStepsValues());
           setShowStepModal(true);
           if (errors.steps?.type === HookFormService.manualErrorType) {

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -24,8 +24,10 @@ export const useSortableTreeFunctions = ({
   const cancelChanges = (index: number) => {
     if (isOverrides) return;
     if (!previousValue) {
+      // eslint-disable-next-line consistent-return
       return remove(index);
     }
+    // eslint-disable-next-line consistent-return
     return setValue(`${fieldName}.${index}` as const, previousValue);
   };
 

package/src/product-set/product/ProductControl.tsx

@@ -7,14 +7,17 @@ import {
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  ProductType,
+  PRODUCT_DEfAULT_COLORS,
+} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
 } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
-import clsx from "clsx";
 import React, {
   ChangeEvent,
   useCallback,
@@ -36,7 +39,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
-import { PRODUCT_DEfAULT_COLORS } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -86,6 +89,7 @@ export interface ProductControlValues
   totalQuantity: number;
   isAvailable: boolean;
   isSoldOut: boolean;
+  originalProductId: number | null;
   isUnlimited: boolean;
   isRequired: boolean;
   quantitySelector: number;
@@ -146,7 +150,7 @@ export function ProductControl<T extends FormValues>({
     clearErrors,
   } = useFormContext<T>();
 
-  const { setLoading } = useContext(ProductSetLoadingContext);
+  const { setLoading, productGroupList } = useContext(ProductSetLoadingContext);
   const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
@@ -156,11 +160,10 @@ export function ProductControl<T extends FormValues>({
   );
   const capacity = watch(`${fieldNamePrefix}.capacity` as Path<T>);
   const disabledDuration = capacity === "0" || !capacity;
-
   const advancedId = useId();
   const nameId = useId();
-  // @TODO: no need for v1 release
-  // const productGroupId = useId();
+
+  const productGroupId = useId();
   const descriptionId = useId();
   const termsAndConditionsId = useId();
   const isAvailableId = useId();
@@ -400,6 +403,35 @@ export function ProductControl<T extends FormValues>({
             isRequired={false}
             defaultColors={PRODUCT_DEfAULT_COLORS}
           />
+
+          <Form.Group controlId={productGroupId}>
+            <Form.Label>{t("productGroup")}</Form.Label>
+            <Form.Control
+              as="select"
+              {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
+              isInvalid={HookFormService.isInvalid<T>(
+                `${fieldNamePrefix}.productGroupId` as Path<T>,
+                errors
+              )}
+              disabled={isLoading || isOverrides}
+              defaultValue=""
+            >
+              <option value="">{t("Design:selectProductGroup")}</option>
+              {productGroupList.map((productGroup) => {
+                return (
+                  <option value={productGroup.id} key={productGroup.id}>
+                    {productGroup.value}
+                  </option>
+                );
+              })}
+            </Form.Control>
+            <Form.Control.Feedback type="invalid">
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.productGroupId` as Path<T>,
+                errors
+              )}
+            </Form.Control.Feedback>
+          </Form.Group>
         </Col>
       </Row>
 
@@ -672,38 +704,6 @@ export function ProductControl<T extends FormValues>({
         </Collapse>
 
         <Row>
-          {/* @TODO: no need for v1 release
-            <Col xs={12} sm={6}>
-              <Form.Group controlId={productGroupId}>
-                <Form.Label>{t("productGroup")}</Form.Label>
-                <Form.Control
-                  as="select"
-                  {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
-                  isInvalid={HookFormService.isInvalid<T>(
-                    `${fieldNamePrefix}.productGroupId` as Path<T>,
-                    errors
-                  )}
-                  disabled={isLoading}
-                  defaultValue=""
-                >
-                  <option value="">{t("Design:selectProductGroup")}</option>
-                  {productGroupList.map((productGroup) => {
-                    return (
-                      <option value={productGroup.id} key={productGroup.id}>
-                        {productGroup.value}
-                      </option>
-                    );
-                  })}
-                </Form.Control>
-                <Form.Control.Feedback type="invalid">
-                  {HookFormService.getErrors<T>(
-                    `${fieldNamePrefix}.productGroupId` as Path<T>,
-                    errors
-                  )}
-                </Form.Control.Feedback>
-              </Form.Group>
-            </Col> */}
-
           <Col xs={12}>
             {hasBookingManagement && (
               <ProductBookingManagementControl<T>

package/src/product-set/product/fixed-duration-fields/FixedDurationOptions.tsx

@@ -5,8 +5,6 @@ import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/
 import { useWatch } from "react-hook-form";
 import { FormNumberInput } from "../../../static";
 
-
-
 interface FixedDurationOptionsProps<T> extends FieldNamePrefixPath<T> {
   isOverrides?: boolean;
 }

package/src/product-set/step/StepControl.tsx

@@ -26,6 +26,7 @@ export interface StepControlProps extends IsDeletableEvent {
   stepIndex: number;
   stepName: string;
   onStepNameChange: (args: any) => void;
+  isOverrides?: boolean;
 }
 
 export function StepControl({
@@ -33,6 +34,7 @@ export function StepControl({
   stepIndex,
   stepName,
   onStepNameChange,
+  isOverrides = false,
 }: StepControlProps) {
   const { providerHasMap } = useContext(ProductSetLoadingContext);
   const {
@@ -42,7 +44,6 @@ export function StepControl({
     watch,
   } = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
-
   const fieldName = `steps.${stepIndex}.name` as const;
   const productCategoriesFieldName =
     `steps.${stepIndex}.productCategories` as const;
@@ -71,7 +72,7 @@ export function StepControl({
                     fieldName,
                     errors
                   )}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               control={control}
@@ -114,7 +115,7 @@ export function StepControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading}
+                          disabled={isLoading || isOverrides}
                         />
                       )}
                       control={control}