@licklist/design 0.44.485-dev.89 → 0.44.485-dev.9

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

@@ -15,7 +15,6 @@ import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMappe
 import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
 import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { ruleForUrlWithProtocol } from "@licklist/plugins/dist/validation/Rules/urlRule";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
 import {
@@ -27,31 +26,23 @@ import {
 import TutorialGifCard from "./TutorialGifCard";
 import { Step } from "../types";
 import { StepsControl } from "../form/StepsControl";
-import { Typeahead } from "../../typeahead";
 
 const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_PROVIDER]: "operationalCostProvider",
   [OPERATIONAL_COST_CUSTOMER]: "operationalCostCustomer",
 } as const;
 
-export interface TemplateItem {
-  id: string;
-  value: EmailTemplate | SmsTemplate;
-  label: string;
-}
-
 export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   name: string;
   type: ProductSetType;
   termsAndConditions: string;
-  thankYouPageUrl: string;
   isDefault: boolean;
   operationalCost: OperationalCostType;
   productGroups?: SelectItem[];
   fieldSetId?: number;
   steps?: Step[];
-  emailTemplates?: TemplateItem[];
-  smsTemplates?: TemplateItem[];
+  emailTemplateId?: number;
+  smsTemplateId?: number;
 }
 
 export interface ProductSetControlShared {
@@ -61,17 +52,11 @@ export interface ProductSetControlShared {
   smsTemplates?: SmsTemplate[];
 }
 
-export interface ProductSetControlProps {
+export interface ProductSetControlProps extends ProductSetControlShared {
   companyName: string;
   isLoading: boolean;
   isEventEditProductSet?: boolean;
   isCreateAction?: boolean;
-  emailTemplates?: TemplateItem[];
-  smsTemplates?: TemplateItem[];
-  fee?: string;
-  fieldSets?: FieldSet[];
-  showEmailTemplate?: boolean;
-  showSmsTemplate?: boolean;
 }
 
 export function ProductSetControl({
@@ -83,8 +68,6 @@ export function ProductSetControl({
   smsTemplates = [],
   isEventEditProductSet,
   isCreateAction,
-  showEmailTemplate,
-  showSmsTemplate,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -97,6 +80,8 @@ export function ProductSetControl({
   } = useFormContext<ProductSetControlValues>();
 
   const steps = watch("steps");
+  const smsTemplateId = watch("smsTemplateId");
+  const emailTemplateId = watch("emailTemplateId");
 
   const nameId = useId();
   const termsAndConditionsId = useId();
@@ -234,16 +219,20 @@ export function ProductSetControl({
             <Form.Label className="mt-4">
               {t("Design:emailTemplate")}
             </Form.Label>
-            {showEmailTemplate ? (
-              <Typeahead
-                name="emailTemplates"
-                options={emailTemplates}
-                isMultipleChoise
-                placeholder={t("Design:choose")}
-                noOptionsMessage={t("Design:noActiveTemplates", {
-                  notification: t("Design:email"),
-                })}
-              />
+            {emailTemplates.length > 0 ? (
+              <Form.Control {...register("emailTemplateId")} as="select">
+                <option value="" selected={String(emailTemplateId) === ""}>
+                  {t("Design:choose")}
+                </option>
+                {emailTemplates.map((emailTemplate) => (
+                  <option
+                    value={Number(emailTemplate.notification.id)}
+                    key={emailTemplate.id}
+                  >
+                    {emailTemplate.notification.name}
+                  </option>
+                ))}
+              </Form.Control>
             ) : (
               <WarningMessage
                 message={t("Design:noActiveTemplates", {
@@ -257,16 +246,20 @@ export function ProductSetControl({
             >
               {t("Design:smsTemplate")}
             </Form.Label>
-            {showSmsTemplate ? (
-              <Typeahead
-                name="smsTemplates"
-                options={smsTemplates}
-                isMultipleChoise
-                placeholder={t("Design:choose")}
-                noOptionsMessage={t("Design:noActiveTemplates", {
-                  notification: t("Design:sms"),
-                })}
-              />
+            {smsTemplates.length > 0 ? (
+              <Form.Control {...register("smsTemplateId")} as="select">
+                <option value="" selected={String(smsTemplateId) === ""}>
+                  {t("Design:choose")}
+                </option>
+                {smsTemplates.map((smsTemplate) => (
+                  <option
+                    value={Number(smsTemplate.notification.id)}
+                    key={smsTemplate.id}
+                  >
+                    {smsTemplate.notification.name}
+                  </option>
+                ))}
+              </Form.Control>
             ) : (
               <WarningMessage
                 message={t("Design:noActiveTemplates", {
@@ -281,20 +274,24 @@ export function ProductSetControl({
               control={control}
               name="fieldSetId"
               render={({ field }) => {
-                const fieldValue = Number(field.value);
+                const fieldSetValue = String(field.value);
 
                 return (
                   <>
                     <Form.Label>{t("Design:customFields")}</Form.Label>
-                    <Form.Control
-                      onChange={field.onChange}
-                      value={fieldValue}
-                      as="select"
-                    >
-                      <option value="">{t("Design:choose")}</option>
+                    <Form.Control onChange={field.onChange} as="select">
+                      <option value="" selected={fieldSetValue === ""}>
+                        {t("Design:choose")}
+                      </option>
                       {fieldSets?.map((fieldSet) => {
+                        const fieldSetOptionValue = String(fieldSet.id);
+
                         return (
-                          <option value={fieldSet.id} key={fieldSet.id}>
+                          <option
+                            value={fieldSet.id}
+                            key={fieldSet.id}
+                            selected={fieldSetValue === fieldSetOptionValue}
+                          >
                             {fieldSet.name}
                           </option>
                         );
@@ -305,27 +302,6 @@ export function ProductSetControl({
               }}
             />
           </Form.Group>
-
-          <Form.Group controlId="thankYouPageUrlId">
-            <Form.Label>{t("thankYouPageUrl")}</Form.Label>
-
-            <Form.Control
-              {...register("thankYouPageUrl", {
-                validate: (url) => {
-                  if (!url) return true;
-                  if (ruleForUrlWithProtocol.test(url as string)) return true;
-                  return t("Validation:fieldValidWebURL", {
-                    attribute: t("thankYouPageUrl"),
-                  }) as string;
-                },
-              })}
-              isInvalid={HookFormService.isInvalid("thankYouPageUrl", errors)}
-            />
-
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors("thankYouPageUrl", errors)}
-            </Form.Control.Feedback>
-          </Form.Group>
         </div>
       </Col>
     </Row>

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

@@ -29,7 +29,6 @@ import { SelectCategoryModal } from "./SelectCategoryModal";
 import { ProductSetLoadingContext } from "./context";
 import { VenueMapSetModal } from "./VenueMapSetModal";
 import { moveArrayElements, sortArrayByIndex } from "../utils";
-import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
@@ -102,11 +101,6 @@ export function ProductCategoriesControl({
     Record<number, { price: number; quantity: number }>
   >({});
 
-  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
-    fieldName: productCategoriesFieldName,
-    remove,
-  });
-
   const productCategories: ProductCategory[] = useWatch({
     control,
     name: productCategoriesFieldName,
@@ -231,8 +225,6 @@ export function ProductCategoriesControl({
                   title={value}
                   isExpanded={expandedProductCategories[productCategoryId]}
                   setIsExpanded={onSetIsExpanded}
-                  edit={() => edit(index)}
-                  cancelChanges={() => cancelChanges(index)}
                   isInvalid={!!productCategoriesErrors}
                   badge={
                     <Badge className="category-badge">
@@ -272,7 +264,6 @@ export function ProductCategoriesControl({
                   validate={() =>
                     trigger(`steps.${stepIndex}.productCategories.${index}`)
                   }
-                  saveValidField={saveValidField}
                   // preItem={<Popover className="d-none d-sm-block" />}
                   sortableItems={
                     productCategory.products

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

@@ -3,11 +3,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
-import {
-  CONFIRMATION_TYPE,
-  PAYMENT_LINK_TYPE,
-} from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
-
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
@@ -362,14 +357,12 @@ Default.args = {
       body: "",
       meta: "",
       notification: {
-        id: 1,
-        isActive: true,
+        isActive: false,
         isDefault: false,
         name: "Template name 1",
         companyId: 1,
         providerId: 1,
         fieldSetId: 1,
-        type: CONFIRMATION_TYPE,
       },
     },
     {
@@ -378,44 +371,12 @@ Default.args = {
       body: "",
       meta: "",
       notification: {
-        id: 2,
-        isActive: true,
-        isDefault: false,
-        name: "Tempalte name 2",
-        companyId: 1,
-        providerId: 1,
-        fieldSetId: 1,
-        type: CONFIRMATION_TYPE,
-      },
-    },
-  ],
-  smsTemplates: [
-    {
-      id: "1",
-      body: "",
-      notification: {
-        id: 3,
-        isActive: true,
-        isDefault: false,
-        name: "Tempalte name 1",
-        companyId: 1,
-        providerId: 1,
-        fieldSetId: 1,
-        type: PAYMENT_LINK_TYPE,
-      },
-    },
-    {
-      id: "2",
-      body: "",
-      notification: {
-        id: 4,
-        isActive: true,
+        isActive: false,
         isDefault: false,
         name: "Tempalte name 2",
         companyId: 1,
         providerId: 1,
         fieldSetId: 1,
-        type: PAYMENT_LINK_TYPE,
       },
     },
   ],

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

@@ -20,7 +20,6 @@ import {
 import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
-import { getFilteredTemplates } from "../utils";
 
 export interface WithIsLoading {
   isLoading: boolean;
@@ -134,16 +133,6 @@ export function ProductSetForm({
                 <>
                   <ProductSetControl
                     {...shared}
-                    smsTemplates={getFilteredTemplates(
-                      shared?.smsTemplates,
-                      formValues?.smsTemplates
-                    )}
-                    emailTemplates={getFilteredTemplates(
-                      shared?.emailTemplates,
-                      formValues?.emailTemplates
-                    )}
-                    showEmailTemplate={!!shared?.emailTemplates}
-                    showSmsTemplate={!!shared?.smsTemplates}
                     isLoading={isLoading}
                     isCreateAction={isCreateAction}
                     companyName={companyName}

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

@@ -21,7 +21,6 @@ import { Product } from "../types";
 import { WithIsLoading } from "./ProductSetForm";
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
-import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 import { SubProductsControl } from "./SubProductsControl";
 import { ProductSetModalClasses } from "../../sortable-tree/SortableTreeItem";
 import { getBadgeConfig } from "./ProductCategoriesControl";
@@ -86,25 +85,16 @@ export function ProductsControl({
     trigger,
     setValue,
     watch,
-    getValues,
   } = form;
 
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
-  const productPointsKey = `steps.${stepIndex}.pointProducts` as const;
-
   const { fields, append, remove, move } = useFieldArray({
     name: productControlFieldName,
     control,
     keyName: "_id",
   });
-
-  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
-    fieldName: productControlFieldName,
-    remove,
-  });
-
   const allowDeposits = watch(
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.allowDeposits`
   );
@@ -166,22 +156,6 @@ export function ProductsControl({
     });
   };
 
-  const onProductRemove = (index: number) => {
-    const currentProduct = getValues(
-      `${productControlFieldName}.${index}` as const
-    );
-
-    const currentPointProducts = getValues(productPointsKey);
-
-    setValue(
-      productPointsKey,
-      currentPointProducts?.filter(
-        (product) => product.productUuid !== currentProduct.uuid
-      ) || []
-    );
-    remove(index);
-  };
-
   return (
     <>
       <SortableTree
@@ -208,8 +182,6 @@ export function ProductsControl({
                 title={value}
                 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">
@@ -247,9 +219,8 @@ export function ProductsControl({
                     categoryType={categoryType}
                   />
                 }
-                onDelete={() => onProductRemove(index)}
+                onDelete={() => remove(index)}
                 validate={() => trigger(`${productControlFieldName}.${index}`)}
-                saveValidField={saveValidField}
                 // preItem={<Popover className="d-none d-sm-block" />}
               >
                 <SubProductsControl

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

@@ -4,7 +4,6 @@ import { useTranslation } from "react-i18next";
 import Badge from "react-bootstrap/Badge";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
-import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 import { SortableTree } from "../../sortable-tree";
 import { ProductSetModalClasses } from "../../sortable-tree/SortableTreeItem";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -12,7 +11,6 @@ import { StepControl } from "../step/StepControl";
 import { Step } from "../types";
 import { ProductCategoriesControl } from "./ProductCategoriesControl";
 import { ProductSetFormValues } from "./ProductSetForm";
-
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
@@ -30,7 +28,6 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     formState: { errors, isSubmitting },
     clearErrors,
     getValues,
-    setFocus,
   } = form;
 
   const { fields, append, remove } = useFieldArray({
@@ -39,11 +36,6 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     keyName: "_id",
   });
 
-  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
-    fieldName: "steps",
-    remove,
-  });
-
   useEffect(() => {
     if (!isSubmitting) {
       return;
@@ -65,14 +57,12 @@ export function StepsControl({ isLoading }: StepsControlProps) {
   return (
     <>
       {fields.map((step, index) => {
-        const stepFieldName = `steps.${index}` as const;
-
-        const stepData = getValues(stepFieldName);
+        const stepData: any = getValues(`steps.${index}` as const);
 
         return (
           <Controller
             key={`step-${step._id}`}
-            name={`${stepFieldName}.name` as const}
+            name={`steps.${index}.name` as const}
             control={control}
             rules={{
               required: t("Validation:fieldRequired", {
@@ -84,14 +74,12 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                 id={step._id}
                 title={value}
                 badge={<Badge className="step-badge">{t("step")}</Badge>}
-                isExpanded={isFirstStepAdded || !!errors.steps?.[index]}
+                isExpanded={isFirstStepAdded}
                 isInvalid={!!errors.steps?.[index]}
                 isIconInHeader={false}
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => edit(index)}
-                cancelChanges={() => cancelChanges(index)}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -116,22 +104,6 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                     ? step.productCategories.map(({ id }) => String(id))
                     : []
                 }
-                validate={() => {
-                  // @TODO investigate why form return true in case
-                  // when required field not filled. Looks like
-                  // we cann't use default hookForm trigger function
-                  // because we have venueMap outside this form.
-                  // So before closing we need to check directly by
-                  // error on name field. Instead of run trugger.
-                  const error = errors.steps?.[index]?.name;
-
-                  if (error) {
-                    setFocus(`${stepFieldName}.name` as const);
-                  }
-
-                  return Promise.resolve(!error);
-                }}
-                saveValidField={saveValidField}
               >
                 <ProductCategoriesControl
                   isLoading={isLoading}

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

@@ -64,7 +64,6 @@ import { IsDeletableEvent } from "../types";
 import { FixedDurationOptions } from "./fixed-duration-fields";
 import { ProductDurationControl } from "./duration";
 import { ProductPriceControl } from "./price";
-import { MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH } from "./constants";
 
 // TO DO refactor this file
 // and add correct types
@@ -87,7 +86,6 @@ export interface ProductControlValues
   isRequired: boolean;
   quantitySelector: number;
   hasSpecialNotes: boolean;
-  minSpend?: number | null;
   type?: ProductType;
   weight?: number;
   tierId?: number;
@@ -139,7 +137,7 @@ export function ProductControl<T extends FormValues>({
   const { setLoading, providerHasBookingManagement } = useContext(
     ProductSetLoadingContext
   );
-  const { t } = useTranslation(["Design", "Validation"]);
+  const { t } = useTranslation("Design");
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
@@ -159,7 +157,6 @@ export function ProductControl<T extends FormValues>({
   const quantitySelectorId = useId();
   const hasSpecialNotesId = useId();
   const unlimitedQuantityId = useId();
-  const minSpendId = useId();
 
   const quantitySelectorList: SelectItem[] = [
     { id: 1, value: t("quantitySelector") },
@@ -192,7 +189,7 @@ export function ProductControl<T extends FormValues>({
 
   const onImageRemove = useCallback(
     (id, path) => {
-      handleImageRemove(String(id), path);
+      handleImageRemove(id, path);
     },
     [handleImageRemove]
   );
@@ -203,13 +200,7 @@ export function ProductControl<T extends FormValues>({
   }, [setLoading, isImageUploading]);
 
   useEffect(() => {
-    const formImages = getValues(`${fieldNamePrefix}.images` as Path<T>);
-
-    setInitialImages(formImages as Image[]);
-  }, [getValues, setInitialImages, fieldNamePrefix]);
-
-  useEffect(() => {
-    if (Array.isArray(images)) {
+    if (Array.isArray(images) && images?.length > 0) {
       setValue(
         `${fieldNamePrefix}.images` as Path<T>,
         images as UnpackNestedValue<PathValue<T, Path<T>>>
@@ -217,8 +208,15 @@ export function ProductControl<T extends FormValues>({
     }
   }, [images, fieldNamePrefix, setValue]);
 
+  useEffect(() => {
+    const formImages = getValues(`${fieldNamePrefix}.images` as Path<T>);
+
+    setInitialImages(formImages as Image[]);
+  }, [getValues, setInitialImages, fieldNamePrefix]);
+
   const quantitySelector = quantityValue ?? "1";
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string];
+
   return (
     <>
       <Row>
@@ -256,24 +254,17 @@ export function ProductControl<T extends FormValues>({
                   disabled={isLoading}
                 />
               )}
-              rules={{
-                maxLength: {
-                  value: MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH,
-                  message: t("Validation:descriptionTooManyCharactersMessage", {
-                    max: MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH,
-                  }) as string,
-                },
-              }}
               control={control}
               name={`${fieldNamePrefix}.description` as Path<T>}
             />
+
+            <Form.Control.Feedback type="invalid">
+              {HookFormService.getErrors<T>(
+                `${fieldNamePrefix}.description` as Path<T>,
+                errors
+              )}
+            </Form.Control.Feedback>
           </Form.Group>
-          <div className="invalid-feedback field-values-error d-block">
-            {HookFormService.getErrors<T>(
-              `${fieldNamePrefix}.description` as Path<T>,
-              errors
-            )}
-          </div>
 
           {allowDeposits ? (
             <Row>
@@ -283,7 +274,7 @@ export function ProductControl<T extends FormValues>({
               />
               <ProductPriceControl<T>
                 isLoading={isLoading}
-                fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
+                fieldNamePrefix={fieldNamePrefix}
                 title={t("totalPrice")}
                 allowDeposits={allowDeposits}
               />
@@ -291,7 +282,7 @@ export function ProductControl<T extends FormValues>({
           ) : (
             <ProductPriceControl<T>
               isLoading={isLoading}
-              fieldNamePrefix={`${fieldNamePrefix}.price` as Path<T>}
+              fieldNamePrefix={fieldNamePrefix}
             />
           )}
 
@@ -562,22 +553,10 @@ export function ProductControl<T extends FormValues>({
                 name={`${fieldNamePrefix}.hasSpecialNotes` as Path<T>}
               />
             </Form.Group>
-            {[CATEGORY_TYPE_GAME, CATEGORY_TYPE_FIXED_DURATION].includes(
-              categoryType
-            ) && <FixedDurationOptions fieldNamePrefix={fieldNamePrefix} />}
-            <Form.Group
-              controlId={minSpendId}
-              className="advanced-switch-container"
-            >
-              <ProductPriceControl
-                title={t("minSpend")}
-                isRequired={false}
-                isMoreThanZero
-                allowDeposits={false}
-                isLoading={isLoading}
-                fieldNamePrefix={`${fieldNamePrefix}.minSpend` as Path<T>}
-              />
-            </Form.Group>
+
+            {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
+              <FixedDurationOptions fieldNamePrefix={fieldNamePrefix} />
+            )}
           </div>
         </Collapse>