@licklist/design 0.66.10-dev.0 → 0.66.10-dev.3

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -0,0 +1,168 @@
+import { useContext } from "react";
+import { Col, Form } from "react-bootstrap";
+import { Controller, Path, useFormContext } from "react-hook-form";
+import { HookFormService } from "@licklist/plugins";
+import { useId } from "@react-aria/utils";
+import { useTranslation } from "react-i18next";
+import { PRODUCT_DEfAULT_COLORS } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { ProductPriceControl } from "../price/ProductPriceControl";
+import { PropertyControl } from "../../../snippet";
+
+import { BooleanSwitch } from "../../../static";
+import { ProductSetLoadingContext } from "../../form/context";
+
+interface AdvancedOptionsProps<T> extends FieldNamePrefixPath<T> {
+  isOverrides: boolean;
+  isLoading: boolean;
+}
+
+export const AdvancedOptions = <T extends FormValues>({
+  fieldNamePrefix,
+  isOverrides,
+  isLoading,
+}: AdvancedOptionsProps<T>) => {
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext<T>();
+
+  const { productGroupList } = useContext(ProductSetLoadingContext);
+
+  const isRequiredId = useId();
+  const productGroupId = useId();
+  const termsAndConditionsId = useId();
+  const hasSpecialNotesId = useId();
+  const minSpendId = useId();
+
+  return (
+    <>
+      <Form.Group
+        controlId={isRequiredId}
+        className="advanced-switch-container"
+      >
+        <Form.Label>{t("isRequired")}</Form.Label>
+
+        <Controller
+          render={({ field: { value, onChange, name } }) => (
+            <BooleanSwitch
+              name={name}
+              value={Boolean(value)}
+              onChange={onChange}
+              disabled={isLoading || isOverrides}
+            />
+          )}
+          control={control}
+          name={`${fieldNamePrefix}.isRequired` as Path<T>}
+        />
+      </Form.Group>
+
+      <Form.Group
+        controlId={hasSpecialNotesId}
+        className="advanced-switch-container"
+      >
+        <Form.Label>{t("hasSpecialNotes")}</Form.Label>
+
+        <Controller
+          render={({ field: { value, onChange, name } }) => (
+            <BooleanSwitch
+              name={name}
+              value={Boolean(value)}
+              onChange={onChange}
+              disabled={isLoading || isOverrides}
+            />
+          )}
+          control={control}
+          name={`${fieldNamePrefix}.hasSpecialNotes` as Path<T>}
+        />
+      </Form.Group>
+
+      <PropertyControl<T>
+        item={`${fieldNamePrefix}.color` as Path<T>}
+        label={t("ProductSet:selectColor")}
+        isDisabled={isOverrides}
+        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 lg={8} md={8} className="pl-0">
+        <Form.Group controlId={termsAndConditionsId}>
+          <Form.Label>{t("productTermsConditions")}</Form.Label>
+
+          <Controller
+            render={({ field: { value, onChange, name, ref } }) => (
+              <Form.Control
+                ref={ref}
+                as="textarea"
+                rows={3}
+                value={value as string}
+                onChange={onChange}
+                isInvalid={HookFormService.isInvalid<T>(
+                  `${fieldNamePrefix}.termsAndConditions` as Path<T>,
+                  errors,
+                )}
+                disabled={isLoading || isOverrides}
+                name={name}
+              />
+            )}
+            control={control}
+            name={`${fieldNamePrefix}.termsAndConditions` as Path<T>}
+          />
+
+          <Form.Control.Feedback type="invalid">
+            {HookFormService.getErrors<T>(
+              `${fieldNamePrefix}.termsAndConditions` as Path<T>,
+              errors,
+            )}
+          </Form.Control.Feedback>
+        </Form.Group>
+      </Col>
+
+      <Form.Group controlId={minSpendId} className="advanced-switch-container">
+        <ProductPriceControl
+          title={t("minSpend")}
+          isRequired={false}
+          isMoreThanZero
+          allowDeposits={false}
+          isLoading={isLoading || isOverrides}
+          fieldNamePrefix={`${fieldNamePrefix}.minSpend` as Path<T>}
+        />
+      </Form.Group>
+    </>
+  );
+};

package/src/product-set/product/advanced-options/index.ts

@@ -0,0 +1 @@
+export * from "./AdvancedOptions";

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

@@ -18,7 +18,7 @@ export const FixedDurationOptions = <T,>({
 
   return (
     <>
-      <Row>
+      <Row className="mt-4">
         <Col lg={4} md={4} sm={6}>
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.subSlots`}

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

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Form, Col, Collapse, InputGroup, Row } from "react-bootstrap";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -13,12 +13,10 @@ import {
   CATEGORY_TYPE_TICKETS,
   CATEGORY_TYPE_FIXED_DURATION,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { Switch, BooleanSwitch } from "../../static";
 import { ProductSetFormValues } from "../form/ProductSetForm";
 import { IsDeletableEvent, ProductCategory } from "../types";
 import { ReactComponent as IncrementIcon } from "../../assets/dashboard/increment.svg";
-import { ProductSetLoadingContext } from "../form/context";
 
 export interface ProductCategoryControlValues extends FormValues {
   id: number;
@@ -39,7 +37,6 @@ export interface ProductCategoryControlValues extends FormValues {
   weight?: number;
   isReusable?: boolean;
   termsAndConditions?: string;
-  zoneId?: Zone["id"];
   sort: number | null;
 }
 
@@ -102,14 +99,10 @@ export function ProductCategoryControl({
   const isTimeRelatedId = useId();
   const collectUserInfoId = useId();
   const hasTicketId = useId();
-  const zoneId = useId();
   const overallQuantityId = useId();
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
-  const { providerHasBookingManagement, zones = [] } = useContext(
-    ProductSetLoadingContext,
-  );
 
   // @TODO not for first release
   // const hasBookingManagementId = useId();
@@ -129,10 +122,6 @@ export function ProductCategoryControl({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxSubItems, fieldNamePrefix]);
 
-  const isZoneCategory =
-    category.type === CATEGORY_TYPE_FIXED_DURATION ||
-    category.type === CATEGORY_TYPE_GAME;
-
   return (
     <>
       <Col md={12} xl className="p-0">
@@ -387,54 +376,6 @@ export function ProductCategoryControl({
             </Form.Group>
           </Col>
         </Row>
-
-        {isZoneCategory && (
-          <>
-            <Row>
-              <Col>
-                <Form.Group controlId={zoneId}>
-                  <Form.Label>{t("Design:zone")}</Form.Label>
-                  <Controller
-                    control={control}
-                    name={`${fieldNamePrefix}.zoneId`}
-                    render={({ field }) => (
-                      <Form.Control
-                        as="select"
-                        disabled={isOverride}
-                        isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                          `${fieldNamePrefix}.zoneId`,
-                          errors,
-                        )}
-                        {...field}
-                      >
-                        <option value={null}>{t("Design:choose")}</option>
-                        {zones.map((zone) => (
-                          <option key={zone.id} value={zone.id}>
-                            {zone.name}
-                          </option>
-                        ))}
-                      </Form.Control>
-                    )}
-                    rules={{
-                      required: {
-                        value: providerHasBookingManagement,
-                        message: t("Validation:fieldRequired", {
-                          attribute: t("zone"),
-                        }),
-                      },
-                    }}
-                  />
-                  <Form.Control.Feedback type="invalid">
-                    {HookFormService.getErrors<ProductSetFormValues>(
-                      `${fieldNamePrefix}.zoneId`,
-                      errors,
-                    )}
-                  </Form.Control.Feedback>
-                </Form.Group>
-              </Col>
-            </Row>
-          </>
-        )}
       </Col>
 
       <Col md={12} xl className="p-0">

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -0,0 +1,247 @@
+import { useContext, useEffect, useMemo } from "react";
+import { Col, Form, Row } from "react-bootstrap";
+import {
+  ArrayPath,
+  Controller,
+  Path,
+  PathValue,
+  UnpackNestedValue,
+  useFormContext,
+  useWatch,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  CategoryType,
+  CATEGORY_TYPE_FIXED_DURATION,
+  CATEGORY_TYPE_GAME,
+} from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { HookFormService } from "@licklist/plugins";
+import { ProductZone } from "@licklist/core/dist/DataMapper/Product/ProductZoneDataMapper";
+import { ProductDurationControl } from "../product/duration/ProductDurationControl";
+import { FormNumberInput } from "../../static/form-number-input";
+import { FixedDurationOptions } from "../product/fixed-duration-fields";
+import { ProductSetLoadingContext } from "../form/context";
+
+export interface ProductZoneControlValues extends FormValues, ProductZone {
+  id: number | null;
+}
+
+interface ProductZoneProps<T> extends FieldNamePrefixPath<T> {
+  isOverrides: boolean;
+  categoryType?: CategoryType;
+  productZonesFieldName: ArrayPath<T>;
+}
+
+export const ProductZoneControl = <T extends FormValues>({
+  isOverrides,
+  categoryType,
+  fieldNamePrefix,
+  productZonesFieldName,
+}: ProductZoneProps<T>) => {
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+  const {
+    trigger,
+    control,
+    setValue,
+    clearErrors,
+    formState: { errors },
+  } = useFormContext();
+
+  const productZones = useWatch({
+    control,
+    name: productZonesFieldName,
+  }) as ProductZoneControlValues[];
+
+  const { capacity, zoneId } = useWatch({
+    control,
+    name: `${fieldNamePrefix}`,
+  });
+  const disabledDuration = capacity === "0" || !capacity;
+
+  const { providerHasBookingManagement, zones = [] } = useContext(
+    ProductSetLoadingContext,
+  );
+
+  const currentZoneData = zones.find((zone) => zone.id === Number(zoneId));
+
+  const availableZones = useMemo(
+    () =>
+      zones.filter(
+        (zone) =>
+          !productZones.find(
+            (productZone) =>
+              Number(productZone.zoneId) === zone.id &&
+              productZone.zoneId !== zoneId,
+          ),
+      ),
+    [zones, productZones, zoneId],
+  );
+
+  useEffect(() => {
+    if (!disabledDuration) {
+      trigger(`${fieldNamePrefix}.duration` as Path<T>);
+      return;
+    }
+    setValue(
+      `${fieldNamePrefix}.duration` as Path<T>,
+      /* @ts-expect-error 6385 */
+      0 as UnpackNestedValue<PathValue<T, Path<T>>>,
+    );
+    clearErrors(`${fieldNamePrefix}.duration` as Path<T>);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [disabledDuration]);
+
+  const onChangeGameCapacity = (value: number) => {
+    if (!currentZoneData?.defaultDuration) {
+      return;
+    }
+    setValue(
+      `${fieldNamePrefix}.duration` as Path<T>,
+      /* @ts-expect-error 6385 */
+      (value * currentZoneData?.defaultDuration) as UnpackNestedValue<
+        PathValue<T, Path<T>>
+      >,
+    );
+  };
+  return (
+    <>
+      <>
+        <Row>
+          <Col>
+            <Form.Group>
+              <Form.Label>{t("Design:zone")}</Form.Label>
+              <Controller
+                control={control}
+                name={`${fieldNamePrefix}.zoneId`}
+                render={({ field }) => (
+                  <Form.Control
+                    as="select"
+                    disabled={isOverrides}
+                    isInvalid={HookFormService.isInvalid(
+                      `${fieldNamePrefix}.zoneId`,
+                      errors,
+                    )}
+                    {...field}
+                  >
+                    <option value={null}>{t("Design:choose")}</option>
+                    {availableZones.map((zone) => (
+                      <option key={zone.id} value={zone.id}>
+                        {zone.name}
+                      </option>
+                    ))}
+                  </Form.Control>
+                )}
+                rules={{
+                  required: {
+                    value: providerHasBookingManagement,
+                    message: t("Validation:fieldRequired", {
+                      attribute: t("zone"),
+                    }),
+                  },
+                }}
+              />
+              <Form.Control.Feedback type="invalid">
+                {HookFormService.getErrors(
+                  `${fieldNamePrefix}.zoneId` as Path<T>,
+                  errors,
+                )}
+              </Form.Control.Feedback>
+            </Form.Group>
+          </Col>
+        </Row>
+      </>
+      {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
+        <Row className="align-items-start duration-capacity-container">
+          <ProductDurationControl
+            fieldNamePrefix={fieldNamePrefix}
+            disabled={disabledDuration || isOverrides}
+          />
+
+          <Col lg={4} md={4}>
+            <FormNumberInput
+              fieldName={`${fieldNamePrefix}.capacity`}
+              label={t("capacity")}
+              disabled={isOverrides}
+              rules={{
+                min: {
+                  value: 0,
+                  message: t("Validation:fieldMinNumber", {
+                    attribute: t("capacity"),
+                    min: 0,
+                  }) as string,
+                },
+              }}
+            />
+          </Col>
+          {disabledDuration && (
+            <div className="duration-hint duration-capacity-container">
+              {t("Design:forDurationEditing")}
+            </div>
+          )}
+        </Row>
+      )}
+
+      {categoryType === CATEGORY_TYPE_GAME && (
+        <>
+          <Row className="align-items-start duration-capacity-container">
+            <Col lg={4} md={4}>
+              <FormNumberInput
+                fieldName={`${fieldNamePrefix}.capacity`}
+                label={t("capacity")}
+                onChange={onChangeGameCapacity}
+                disabled={isOverrides}
+                rules={{
+                  min: {
+                    value: 0,
+                    message: t("Validation:fieldMinNumber", {
+                      attribute: t("capacity"),
+                      min: 1,
+                    }) as string,
+                  },
+                }}
+              />
+            </Col>
+            <Col lg={4} md={4}>
+              <FormNumberInput
+                fieldName={`${fieldNamePrefix}.duration`}
+                label={t("durationMinutes")}
+                disabled={disabledDuration || isOverrides}
+                rules={{
+                  min: {
+                    value: 0,
+                    message: t("Validation:fieldMinNumber", {
+                      attribute: t("duration"),
+                      min: 0,
+                    }) as string,
+                  },
+                  validate: (val) => {
+                    if (!disabledDuration && (!val || val < 1)) {
+                      return t("Validation:fieldRequired", {
+                        attribute: t("duration"),
+                      }) as string;
+                    }
+                    return true;
+                  },
+                }}
+              />
+            </Col>
+          </Row>
+          {disabledDuration && (
+            <div className="duration-hint pl-0">
+              {t("Design:forDurationEditing")}
+            </div>
+          )}
+        </>
+      )}
+
+      <FixedDurationOptions
+        fieldNamePrefix={fieldNamePrefix}
+        isOverrides={isOverrides}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1 @@
+export * from "./ProductZoneControl";

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

@@ -2,6 +2,7 @@ import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/Email
 import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
 import { TFunction } from "react-i18next";
 import { UseFormSetError } from "react-hook-form";
+import { checkIfZoneCategory } from "@licklist/plugins";
 import { TemplateItem } from "../control/ProductSetControl";
 import { ProductSetFormValues } from "../form/ProductSetForm";
 
@@ -60,7 +61,10 @@ export const checkAvailableTimesErrors = ({
   let hasError = false;
 
   const hasCategoryWithZone = values?.steps?.some(
-    (step) => !!step?.productCategories.some((category) => !!category?.zoneId),
+    (step) =>
+      !!step?.productCategories.some((category) =>
+        checkIfZoneCategory(category.type),
+      ),
   );
   if (!hasCategoryWithZone) {
     return hasError;