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

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

@@ -34,6 +34,7 @@ interface ProductsControlProps extends WithIsLoading {
   hasTicket?: boolean;
   categoryType: CategoryType;
   zones?: Zone[];
+  isOverrides?: boolean;
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -77,6 +78,7 @@ export function ProductsControl({
   hasTicket,
   categoryType,
   zones,
+  isOverrides,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -112,6 +114,7 @@ export function ProductsControl({
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: productControlFieldName,
     remove,
+    isOverrides,
   });
 
   const allowDeposits = watch(
@@ -159,6 +162,7 @@ export function ProductsControl({
   });
 
   const handleDragEnd = (_event) => {
+    if (isOverrides) return;
     const { active, over } = _event;
 
     if (!active || !over || !active?.id || !over?.id) return;
@@ -176,6 +180,7 @@ export function ProductsControl({
   };
 
   const onProductRemove = (index: number) => {
+    if (isOverrides) return;
     const currentProduct = getValues(
       `${productControlFieldName}.${index}` as const
     );
@@ -215,10 +220,12 @@ export function ProductsControl({
                 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">
@@ -255,6 +262,7 @@ export function ProductsControl({
                     hasTicket={hasTicket}
                     categoryType={categoryType}
                     zoneDuration={catergoryZone?.defaultDuration}
+                    isOverrides={isOverrides}
                   />
                 }
                 onDelete={() => onProductRemove(index)}
@@ -276,7 +284,9 @@ export function ProductsControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addProduct")}
+        isOverride={isOverrides}
         onClick={() => {
+          if (isOverrides) return;
           append(getDefaultProductValue(fields.length));
           setShowProductModal(true);
 

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

@@ -18,9 +18,10 @@ import { ProductSetFormValues } from "./ProductSetForm";
 
 interface StepsControlProps {
   isLoading: boolean;
+  isOverrides?: boolean;
 }
 
-export function StepsControl({ isLoading }: StepsControlProps) {
+export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
   const [showStepModal, setShowStepModal] = useState(false);
@@ -42,6 +43,7 @@ export function StepsControl({ isLoading }: StepsControlProps) {
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: "steps",
     remove,
+    isOverrides,
   });
 
   useEffect(() => {
@@ -90,8 +92,9 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => edit(index)}
+                edit={() => !isOverrides && edit(index)}
                 cancelChanges={() => cancelChanges(index)}
+                isOverride={isOverrides}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -136,6 +139,7 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                 <ProductCategoriesControl
                   isLoading={isLoading}
                   stepIndex={index}
+                  isOverrides={isOverrides}
                 />
               </SortableTree.Item>
             )}
@@ -145,7 +149,9 @@ export function StepsControl({ isLoading }: 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/form/SubProductsControl.tsx

@@ -15,6 +15,7 @@ interface SubProductsControlProps {
   productCategoryIndex: number;
   productIndex: number;
   isLoading: boolean;
+  isOverrides?: boolean;
 }
 
 export function SubProductsControl({
@@ -23,6 +24,7 @@ export function SubProductsControl({
   stepIndex,
   productCategoryIndex,
   productIndex,
+  isOverrides,
 }: SubProductsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { fields, append } = useFieldArray({
@@ -49,6 +51,7 @@ export function SubProductsControl({
             key={`sub-product-${subProduct.id}-${index}`}
             id={subProduct.id}
             title={subProduct.name}
+            isOverride={isOverrides}
             body={
               <ProductControl<ProductSetFormValues>
                 isLoading={isLoading}

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

@@ -4,21 +4,25 @@ import { useFormContext } from "react-hook-form";
 interface useSortableTreeFunctionsProps {
   fieldName: string;
   remove: (index?: number | number[]) => void;
+  isOverrides?: boolean;
 }
 export const useSortableTreeFunctions = ({
   fieldName,
   remove,
+  isOverrides,
 }: useSortableTreeFunctionsProps) => {
   const { getValues, setValue } = useFormContext();
   const [previousValue, setEditValue] = useState(null);
 
   const edit = (index: number) => {
+    if (isOverrides) return;
     const currentCategoryProduct = getValues(`${fieldName}.${index}` as const);
     const cloneCategoryProduct = structuredClone(currentCategoryProduct);
     setEditValue(cloneCategoryProduct);
   };
 
   const cancelChanges = (index: number) => {
+    if (isOverrides) return;
     if (!previousValue) {
       return remove(index);
     }

package/src/product-set/item/CreateProductSetItem.tsx

@@ -6,18 +6,21 @@ interface CreateProductSetItemProps {
   onClick: () => void;
   title: string;
   className?: string;
+  isOverride?: boolean;
 }
 
 export function CreateProductSetItem({
   onClick,
   title,
   className,
+  isOverride,
 }: CreateProductSetItemProps) {
   return (
     <button
       className={clsx(
         "product-set-item-wrapper w-100",
         `product-set-item-wrapper-${title.toLowerCase().split(" ")[1]}`,
+        isOverride && "bg-light",
         className
       )}
       onClick={onClick}

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

@@ -113,6 +113,7 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
+  isOverrides?: boolean;
   zoneDuration?: number;
 }
 
@@ -128,6 +129,7 @@ export function ProductControl<T extends FormValues>({
   hasTicket,
   categoryType,
   zoneDuration,
+  isOverrides = false,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -260,7 +262,7 @@ export function ProductControl<T extends FormValues>({
                 `${fieldNamePrefix}.name` as Path<T>,
                 errors
               )}
-              disabled={isLoading}
+              disabled={isLoading || isOverrides}
               placeholder={t("name")}
             />
             <Form.Control.Feedback type="invalid">
@@ -280,7 +282,7 @@ export function ProductControl<T extends FormValues>({
                   viewMode={false}
                   onUpdate={onChange}
                   content={value as string}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               rules={{
@@ -326,6 +328,7 @@ export function ProductControl<T extends FormValues>({
             <ProductQuantityControl<T>
               isLoading={isLoading}
               fieldNamePrefix={fieldNamePrefix}
+              isOverrides={isOverrides}
               onFocus={onFocus}
             />
 
@@ -370,7 +373,7 @@ export function ProductControl<T extends FormValues>({
                 `${fieldNamePrefix}.quantitySelector` as Path<T>,
                 errors
               )}
-              disabled={isLoading || hasTicket}
+              disabled={isLoading || hasTicket || isOverrides}
             >
               {quantitySelectorList.map((selector) => (
                 <option value={selector.id} key={selector.id}>
@@ -392,13 +395,14 @@ export function ProductControl<T extends FormValues>({
         <Row className="align-items-start duration-capacity-container">
           <ProductDurationControl
             fieldNamePrefix={fieldNamePrefix}
-            disabled={disabledDuration}
+            disabled={disabledDuration || isOverrides}
           />
 
           <Col lg={4} md={4}>
             <FormNumberInput
               fieldName={`${fieldNamePrefix}.capacity`}
               label={t("capacity")}
+              disabled={isOverrides}
               rules={{
                 min: {
                   value: 0,
@@ -426,6 +430,7 @@ export function ProductControl<T extends FormValues>({
                 fieldName={`${fieldNamePrefix}.capacity`}
                 label={t("capacity")}
                 onChange={onChangeGameCapacity}
+                disabled={isOverrides}
                 rules={{
                   min: {
                     value: 0,
@@ -441,7 +446,7 @@ export function ProductControl<T extends FormValues>({
               <FormNumberInput
                 fieldName={`${fieldNamePrefix}.duration`}
                 label={t("durationMinutes")}
-                disabled={disabledDuration}
+                disabled={disabledDuration || isOverrides}
                 rules={{
                   min: {
                     value: 0,
@@ -487,7 +492,7 @@ export function ProductControl<T extends FormValues>({
                     `${fieldNamePrefix}.termsAndConditions` as Path<T>,
                     errors
                   )}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                   name={name}
                 />
               )}
@@ -513,6 +518,7 @@ export function ProductControl<T extends FormValues>({
             onFileRemove={onImageRemove}
             defaultFiles={images}
             isLoading={isImageUploading}
+            disabled={isOverrides}
             withIcon
             title={t("addImage")}
           />
@@ -533,7 +539,7 @@ export function ProductControl<T extends FormValues>({
                   name={name}
                   value={Boolean(value)}
                   onChange={onChange}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               );
             }}
@@ -568,7 +574,7 @@ export function ProductControl<T extends FormValues>({
             custom
             type="checkbox"
             name={advancedId}
-            disabled={isLoading}
+            disabled={isLoading || isOverrides}
           >
             <Form.Check.Input
               checked={expanded}
@@ -595,7 +601,7 @@ export function ProductControl<T extends FormValues>({
                     name={name}
                     value={Boolean(value)}
                     onChange={onChange}
-                    disabled={isLoading}
+                    disabled={isLoading || isOverrides}
                   />
                 )}
                 control={control}
@@ -615,7 +621,7 @@ export function ProductControl<T extends FormValues>({
                     name={name}
                     value={Boolean(value)}
                     onChange={onChange}
-                    disabled={isLoading}
+                    disabled={isLoading || isOverrides}
                   />
                 )}
                 control={control}
@@ -624,7 +630,12 @@ export function ProductControl<T extends FormValues>({
             </Form.Group>
             {[CATEGORY_TYPE_GAME, CATEGORY_TYPE_FIXED_DURATION].includes(
               categoryType
-            ) && <FixedDurationOptions fieldNamePrefix={fieldNamePrefix} />}
+            ) && (
+              <FixedDurationOptions
+                fieldNamePrefix={fieldNamePrefix}
+                isOverrides={isOverrides}
+              />
+            )}
             <Form.Group
               controlId={minSpendId}
               className="advanced-switch-container"
@@ -634,7 +645,7 @@ export function ProductControl<T extends FormValues>({
                 isRequired={false}
                 isMoreThanZero
                 allowDeposits={false}
-                isLoading={isLoading}
+                isLoading={isLoading || isOverrides}
                 fieldNamePrefix={`${fieldNamePrefix}.minSpend` as Path<T>}
               />
             </Form.Group>

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

@@ -5,10 +5,15 @@ import { FieldNamePrefixPath } from "@licklist/plugins/dist/types/services/Form/
 import { useWatch } from "react-hook-form";
 import { FormNumberInput } from "../../../static";
 
-type FixedDurationOptionsProps<T> = FieldNamePrefixPath<T>;
+
+
+interface FixedDurationOptionsProps<T> extends FieldNamePrefixPath<T> {
+  isOverrides?: boolean;
+}
 
 export const FixedDurationOptions = <T,>({
   fieldNamePrefix,
+  isOverrides,
 }: FixedDurationOptionsProps<T>) => {
   const { t } = useTranslation("Design");
 
@@ -21,6 +26,7 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.subSlots`}
             label={t("subSlotsInMin")}
+            disabled={isOverrides}
           />
         </Col>
 
@@ -28,7 +34,7 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.pause`}
             label={t("pauseInMin")}
-            disabled={!subSlotsFieldValue}
+            disabled={!subSlotsFieldValue || isOverrides}
           />
         </Col>
       </Row>
@@ -38,6 +44,7 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.offset`}
             label={t("offsetInMin")}
+            disabled={isOverrides}
           />
         </Col>
 
@@ -45,6 +52,7 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.serviceTime`}
             label={t("serviceTimeInMin")}
+            disabled={isOverrides}
           />
         </Col>
       </Row>

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -22,12 +22,13 @@ export interface ProductQuantityControlValues extends FormValues {
 export interface ProductQuantityControlProps<T> extends FieldNamePrefixPath<T> {
   isLoading: boolean;
   onFocus?: (e: React.SyntheticEvent) => void;
+  isOverrides?: boolean;
 }
 
 export function ProductQuantityControl<T extends FormValues>(
   props: ProductQuantityControlProps<T>
 ) {
-  const { isLoading = false, fieldNamePrefix, onFocus } = props;
+  const { isLoading = false, fieldNamePrefix, onFocus, isOverrides } = props;
   const {
     control,
     formState: { errors },
@@ -90,7 +91,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   isInvalid={
                     Number(minQuantityValue) > Number(maxQuantityValue)
                   }
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               control={control}
@@ -148,7 +149,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   isInvalid={
                     Number(minQuantityValue) > Number(maxQuantityValue)
                   }
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               control={control}

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -49,6 +49,7 @@ export interface ProductCategoryControlProps extends IsDeletableEvent {
   onCategoryNameChange: (args: any) => void;
   stepIndex: number;
   productCategoryIndex: number;
+  isOverride?: boolean;
 }
 
 const categoriesWithTickets = [
@@ -63,6 +64,7 @@ export function ProductCategoryControl({
   onCategoryNameChange,
   productCategoryIndex,
   stepIndex,
+  isOverride = false,
 }: ProductCategoryControlProps) {
   const {
     control,
@@ -157,7 +159,7 @@ export function ProductCategoryControl({
               errors
             )}
             placeholder={t("name")}
-            disabled={isLoading}
+            disabled={isLoading || isOverride}
           />
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<ProductSetFormValues>(
@@ -183,7 +185,7 @@ export function ProductCategoryControl({
                   }))}
                   value={field.value}
                   onChange={field.onChange}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverride}
                 />
               </Form.Group>
             )}
@@ -227,7 +229,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                       name={name}
                     />
                   )}
@@ -299,7 +301,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                     />
                   )}
                   control={control}
@@ -337,6 +339,7 @@ export function ProductCategoryControl({
                   render={({ field }) => (
                     <Form.Control
                       as="select"
+                      disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.zoneId`,
                         errors
@@ -384,6 +387,7 @@ export function ProductCategoryControl({
             <Form.Check.Input
               checked={expanded}
               onChange={handleExpand}
+              disabled={isOverride}
               type="checkbox"
             />
             <Form.Check.Label>{t("showAdvancedOptions")}</Form.Check.Label>
@@ -452,7 +456,7 @@ export function ProductCategoryControl({
                         name={name}
                         value={Boolean(value)}
                         onChange={onChange}
-                        disabled={isLoading}
+                        disabled={isLoading || isOverride}
                       />
                     )}
                     control={control}
@@ -476,7 +480,7 @@ export function ProductCategoryControl({
                           name={name}
                           value={Boolean(value)}
                           onChange={onChange}
-                          disabled={isLoading}
+                          disabled={isLoading || isOverride}
                         />
                       )}
                       control={control}
@@ -499,7 +503,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={Boolean(value)}
                       onChange={onChange}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                     />
                   )}
                   control={control}
@@ -527,7 +531,7 @@ export function ProductCategoryControl({
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors
                       )}
-                      disabled={isLoading}
+                      disabled={isLoading || isOverride}
                       name={name}
                     />
                   )}

package/src/recurring-date-picker-input/DatePickerInput.tsx

@@ -0,0 +1,93 @@
+import React, { PropsWithChildren } from "react";
+import { Frequency } from "rrule";
+import { useTranslation } from "react-i18next";
+import Button from "react-bootstrap/Button";
+import { DateTime } from "luxon";
+import { TIME_FULL_FORMAT } from "@licklist/core/dist/Config/Date";
+import { FormProvider, useForm } from "react-hook-form";
+import { Form } from "react-bootstrap";
+import { ConfirmModal } from "../modals";
+import { DeleteFieldButton } from "../product-set/elements";
+import { RecurringDatePickerInputValues } from "./RecurringDatePickerInput";
+import RecurrenceAndFrequencyInput from "./RecurrenceAndFrequencyInput";
+
+export interface RecurringDatePickerInputProps {
+  disabled?: boolean;
+  defaultValues?: Partial<RecurringDatePickerInputValues>;
+  onChange: (state: RecurringDatePickerInputValues) => void;
+  onDelete: () => void;
+  initialFrequency?: Frequency;
+  setInitialStartDateAfterSelect?: boolean;
+  minDate?: string;
+}
+
+export interface DatePickerInputValues {
+  startDate: string;
+  startTime: string;
+  endTime: string;
+}
+
+export function DatePickerInput({
+  disabled = false,
+  onChange,
+  onDelete,
+  defaultValues,
+  children,
+  minDate,
+}: PropsWithChildren<RecurringDatePickerInputProps>) {
+  const { t } = useTranslation(["Design"]);
+
+  const form = useForm<DatePickerInputValues>({
+    defaultValues: {
+      startDate: defaultValues?.startDate ?? "",
+      startTime: defaultValues?.startTime ?? "",
+      endTime: defaultValues?.endTime ?? "",
+    },
+    mode: "onChange",
+  });
+
+  const { handleSubmit } = form;
+
+  const onSubmit = (nextState: RecurringDatePickerInputValues) => {
+    const endTimeNextState = nextState?.endTime
+      ? DateTime.fromISO(nextState?.endTime).toFormat(TIME_FULL_FORMAT)
+      : "";
+
+    onChange({
+      ...nextState,
+      endTime: endTimeNextState,
+    });
+  };
+
+  return (
+    <FormProvider {...form}>
+      <Form
+        noValidate
+        onSubmit={(event) => {
+          // prevents parent form submitting
+          event.preventDefault();
+          event.stopPropagation();
+          return handleSubmit(onSubmit)(event);
+        }}
+      >
+        <RecurrenceAndFrequencyInput disabled={disabled} minDate={minDate} />
+
+        {children}
+
+        <div className="d-inline-flex align-items-center w-100">
+          <Button type="submit">{t("Design:apply")}</Button>
+
+          {defaultValues && (
+            <div className="d-flex justify-content-end delete-btn">
+              <ConfirmModal>
+                {(confirm) => (
+                  <DeleteFieldButton onDelete={() => confirm(onDelete)} />
+                )}
+              </ConfirmModal>
+            </div>
+          )}
+        </div>
+      </Form>
+    </FormProvider>
+  );
+}