@licklist/design 0.58.9 → 0.58.11-dev.0

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

@@ -9,10 +9,14 @@ import { Icon, Image } from "../../static";
 
 export interface TutorialGifCardProps {
   tutorialAsset?: string;
+  isOverrides?: boolean;
 }
 
 // @TODO: Tutorial GIF asset should be passed as context, which is better
-const TutorialGifCard = ({ tutorialAsset }: TutorialGifCardProps) => {
+const TutorialGifCard = ({
+  tutorialAsset,
+  isOverrides,
+}: TutorialGifCardProps) => {
   const { pathname } = useLocation();
   const [isVisible, setIsVisible] = useState(pathname?.includes("/create"));
   const { t } = useTranslation(["Design"]);
@@ -46,8 +50,12 @@ const TutorialGifCard = ({ tutorialAsset }: TutorialGifCardProps) => {
           </button>
         </Card.Header>
         <Card.Body className="tutorial-card-body">
-          <p>{t("buildProductSet")}</p>
-          <span>{t("buildProductSetDesc")}</span>
+          <p>
+            {t(isOverrides ? "buildOverrideProductSet" : "buildProductSet")}
+          </p>
+          <span>
+            {t(isOverrides ? "buildOverrideRules" : "buildProductSetDesc")}
+          </span>
           {tutorialAsset && <Image src={tutorialAsset} alt="Tutorial Gif" />}
         </Card.Body>
       </Card>

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

@@ -35,6 +35,7 @@ import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number;
+  isOverrides?: boolean;
 }
 
 const getCategoryDefaultValue = (
@@ -65,6 +66,7 @@ const getCategoryDefaultValue = (
 export function ProductCategoriesControl({
   isLoading,
   stepIndex,
+  isOverrides,
 }: ProductCategoriesControlProps) {
   const { t } = useTranslation("Design");
   const {
@@ -105,6 +107,7 @@ export function ProductCategoriesControl({
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: productCategoriesFieldName,
     remove,
+    isOverrides,
   });
 
   const productCategories: ProductCategory[] = useWatch({
@@ -129,7 +132,7 @@ export function ProductCategoriesControl({
   });
 
   const handleDragEnd = (event) => {
-    // @TODO uncomment when will be fix for change sort index
+    if (isOverrides) return;
     const { active, over } = event;
 
     if (!active || !over || !active?.id || !over?.id) return;
@@ -266,8 +269,10 @@ export function ProductCategoriesControl({
                       categoryName={value}
                       stepIndex={stepIndex}
                       productCategoryIndex={index}
+                      isOverride={isOverrides}
                     />
                   }
+                  isOverride={isOverrides}
                   onDelete={() => remove(index)}
                   validate={() =>
                     trigger(`steps.${stepIndex}.productCategories.${index}`)
@@ -290,6 +295,7 @@ export function ProductCategoriesControl({
                     zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
+                    isOverrides={isOverrides}
                   />
                 </SortableTree.Item>
               )}
@@ -299,7 +305,9 @@ export function ProductCategoriesControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addCategory")}
+        isOverride={isOverrides}
         onClick={() => {
+          if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />
@@ -308,6 +316,7 @@ export function ProductCategoriesControl({
         isVisible={isSelectCategoryVisible}
         onHide={() => setIsSelectCategoryVisible(false)}
         onCategorySelect={(categoryType) => {
+          if (isOverrides) return;
           append(getCategoryDefaultValue(categoryType, fields.length));
           setShowCategoryModal(true);
           if (
@@ -321,7 +330,9 @@ export function ProductCategoriesControl({
         <>
           <CreateProductSetItem
             title={t("editMap")}
+            isOverride={isOverrides}
             onClick={() => {
+              if (isOverrides) return;
               setIsVenueMapSetModalVisible(true);
             }}
             className={clsx(

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

@@ -26,14 +26,19 @@ 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;
 }
 
 export interface ProductSetFormProps
@@ -50,6 +55,7 @@ export interface ProductSetFormProps
   providerHasBookingManagement?: ProviderBookingManagementSetting["hasBookingManagement"];
   zones?: Zone[] | null;
   isCreateAction?: boolean;
+  isOverrides?: boolean;
   workHours?: WorkHour[];
 }
 
@@ -67,6 +73,7 @@ export function ProductSetForm({
   zones,
   isCreateAction,
   workHours,
+  isOverrides,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -84,6 +91,7 @@ export function ProductSetForm({
   });
 
   const { setError, reset } = form;
+
   const formValues = form.watch();
 
   const submitHandler = (onSubmit: (values: ProductSetFormValues) => void) => {
@@ -161,6 +169,7 @@ export function ProductSetForm({
                     companyName={companyName}
                     workHours={workHours}
                     providerHasBookingManagement={providerHasBookingManagement}
+                    isOverrides={isOverrides}
                   />
                   <Row>
                     <Col md={6} sm={12} />

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,24 +4,30 @@ 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) {
+      // 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/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

@@ -7,8 +7,12 @@ 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,
@@ -35,6 +39,7 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
+
 import {
   Image,
   IMAGE_TYPE_IMAGE,
@@ -59,6 +64,7 @@ import {
   ProductQuantityControl,
   ProductQuantityRechargingControl,
 } from "./quantity";
+import { PropertyControl } from "../../snippet";
 import { TipTapEditor } from "../../tiptap-editor";
 import { IsDeletableEvent } from "../types";
 import { FixedDurationOptions } from "./fixed-duration-fields";
@@ -98,6 +104,7 @@ export interface ProductControlValues
   offset: number;
   serviceTime: number;
   sort: number | null;
+  color?: string;
 }
 
 export interface ProductControlProps<T>
@@ -113,6 +120,7 @@ export interface ProductControlProps<T>
   productName: string;
   hasTicket?: boolean;
   categoryType?: CategoryType;
+  isOverrides?: boolean;
   zoneDuration?: number;
 }
 
@@ -128,6 +136,7 @@ export function ProductControl<T extends FormValues>({
   hasTicket,
   categoryType,
   zoneDuration,
+  isOverrides = false,
 }: ProductControlProps<T>) {
   const {
     register,
@@ -141,7 +150,7 @@ export function ProductControl<T extends FormValues>({
   } = useFormContext<T>();
 
   const { setLoading } = useContext(ProductSetLoadingContext);
-  const { t } = useTranslation(["Design", "Validation"]);
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
@@ -260,7 +269,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 +289,7 @@ export function ProductControl<T extends FormValues>({
                   viewMode={false}
                   onUpdate={onChange}
                   content={value as string}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               )}
               rules={{
@@ -326,6 +335,7 @@ export function ProductControl<T extends FormValues>({
             <ProductQuantityControl<T>
               isLoading={isLoading}
               fieldNamePrefix={fieldNamePrefix}
+              isOverrides={isOverrides}
               onFocus={onFocus}
             />
 
@@ -370,7 +380,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}>
@@ -385,6 +395,14 @@ export function ProductControl<T extends FormValues>({
               )}
             </Form.Control.Feedback>
           </Form.Group>
+
+          <PropertyControl<T>
+            item={`${fieldNamePrefix}.color` as Path<T>}
+            label={t("ProductSet:selectColor")}
+            isDisabled={isOverrides}
+            isRequired={false}
+            defaultColors={PRODUCT_DEfAULT_COLORS}
+          />
         </Col>
       </Row>
 
@@ -392,13 +410,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 +445,7 @@ export function ProductControl<T extends FormValues>({
                 fieldName={`${fieldNamePrefix}.capacity`}
                 label={t("capacity")}
                 onChange={onChangeGameCapacity}
+                disabled={isOverrides}
                 rules={{
                   min: {
                     value: 0,
@@ -441,7 +461,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 +507,7 @@ export function ProductControl<T extends FormValues>({
                     `${fieldNamePrefix}.termsAndConditions` as Path<T>,
                     errors
                   )}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                   name={name}
                 />
               )}
@@ -504,7 +524,14 @@ export function ProductControl<T extends FormValues>({
           </Form.Group>
         </Col>
 
-        <Col lg={4} md={4} className="licklist-file-upload-wrapper">
+        <Col
+          lg={4}
+          md={4}
+          className={clsx(
+            "licklist-file-upload-wrapper",
+            isOverrides && "opacity-50"
+          )}
+        >
           <FileUpload
             onFilesChange={onFilesChange}
             allowedExtensions={["jpeg", "jpg", "png"]}
@@ -513,6 +540,7 @@ export function ProductControl<T extends FormValues>({
             onFileRemove={onImageRemove}
             defaultFiles={images}
             isLoading={isImageUploading}
+            disabled={isOverrides}
             withIcon
             title={t("addImage")}
           />
@@ -533,7 +561,7 @@ export function ProductControl<T extends FormValues>({
                   name={name}
                   value={Boolean(value)}
                   onChange={onChange}
-                  disabled={isLoading}
+                  disabled={isLoading || isOverrides}
                 />
               );
             }}
@@ -568,7 +596,7 @@ export function ProductControl<T extends FormValues>({
             custom
             type="checkbox"
             name={advancedId}
-            disabled={isLoading}
+            disabled={isLoading || isOverrides}
           >
             <Form.Check.Input
               checked={expanded}
@@ -595,7 +623,7 @@ export function ProductControl<T extends FormValues>({
                     name={name}
                     value={Boolean(value)}
                     onChange={onChange}
-                    disabled={isLoading}
+                    disabled={isLoading || isOverrides}
                   />
                 )}
                 control={control}
@@ -615,7 +643,7 @@ export function ProductControl<T extends FormValues>({
                     name={name}
                     value={Boolean(value)}
                     onChange={onChange}
-                    disabled={isLoading}
+                    disabled={isLoading || isOverrides}
                   />
                 )}
                 control={control}
@@ -624,7 +652,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 +667,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/constants.ts

@@ -1 +1,2 @@
 export const MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH = 1000;
+export const MAX_QUANTITY_RECURRENCE_DATE_IN_OVERRIDE = 1;

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

@@ -5,10 +5,13 @@ 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 +24,7 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.subSlots`}
             label={t("subSlotsInMin")}
+            disabled={isOverrides}
           />
         </Col>
 
@@ -28,7 +32,7 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.pause`}
             label={t("pauseInMin")}
-            disabled={!subSlotsFieldValue}
+            disabled={!subSlotsFieldValue || isOverrides}
           />
         </Col>
       </Row>
@@ -38,6 +42,7 @@ export const FixedDurationOptions = <T,>({
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.offset`}
             label={t("offsetInMin")}
+            disabled={isOverrides}
           />
         </Col>
 
@@ -45,6 +50,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}