@licklist/design 0.44.485 → 0.44.486-dev.1

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

@@ -15,6 +15,7 @@ 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 {
@@ -26,23 +27,31 @@ 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[];
-  emailTemplateId?: number;
-  smsTemplateId?: number;
+  emailTemplates?: TemplateItem[];
+  smsTemplates?: TemplateItem[];
 }
 
 export interface ProductSetControlShared {
@@ -52,11 +61,17 @@ export interface ProductSetControlShared {
   smsTemplates?: SmsTemplate[];
 }
 
-export interface ProductSetControlProps extends ProductSetControlShared {
+export interface ProductSetControlProps {
   companyName: string;
   isLoading: boolean;
   isEventEditProductSet?: boolean;
   isCreateAction?: boolean;
+  emailTemplates?: TemplateItem[];
+  smsTemplates?: TemplateItem[];
+  fee?: string;
+  fieldSets?: FieldSet[];
+  showEmailTemplate?: boolean;
+  showSmsTemplate?: boolean;
 }
 
 export function ProductSetControl({
@@ -68,6 +83,8 @@ export function ProductSetControl({
   smsTemplates = [],
   isEventEditProductSet,
   isCreateAction,
+  showEmailTemplate,
+  showSmsTemplate,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -80,8 +97,6 @@ export function ProductSetControl({
   } = useFormContext<ProductSetControlValues>();
 
   const steps = watch("steps");
-  const smsTemplateId = watch("smsTemplateId");
-  const emailTemplateId = watch("emailTemplateId");
 
   const nameId = useId();
   const termsAndConditionsId = useId();
@@ -219,20 +234,16 @@ export function ProductSetControl({
             <Form.Label className="mt-4">
               {t("Design:emailTemplate")}
             </Form.Label>
-            {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>
+            {showEmailTemplate ? (
+              <Typeahead
+                name="emailTemplates"
+                options={emailTemplates}
+                isMultipleChoise
+                placeholder={t("Design:choose")}
+                noOptionsMessage={t("Design:noActiveTemplates", {
+                  notification: t("Design:email"),
+                })}
+              />
             ) : (
               <WarningMessage
                 message={t("Design:noActiveTemplates", {
@@ -246,20 +257,16 @@ export function ProductSetControl({
             >
               {t("Design:smsTemplate")}
             </Form.Label>
-            {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>
+            {showSmsTemplate ? (
+              <Typeahead
+                name="smsTemplates"
+                options={smsTemplates}
+                isMultipleChoise
+                placeholder={t("Design:choose")}
+                noOptionsMessage={t("Design:noActiveTemplates", {
+                  notification: t("Design:sms"),
+                })}
+              />
             ) : (
               <WarningMessage
                 message={t("Design:noActiveTemplates", {
@@ -274,24 +281,20 @@ export function ProductSetControl({
               control={control}
               name="fieldSetId"
               render={({ field }) => {
-                const fieldSetValue = String(field.value);
+                const fieldValue = Number(field.value);
 
                 return (
                   <>
                     <Form.Label>{t("Design:customFields")}</Form.Label>
-                    <Form.Control onChange={field.onChange} as="select">
-                      <option value="" selected={fieldSetValue === ""}>
-                        {t("Design:choose")}
-                      </option>
+                    <Form.Control
+                      onChange={field.onChange}
+                      value={fieldValue}
+                      as="select"
+                    >
+                      <option value="">{t("Design:choose")}</option>
                       {fieldSets?.map((fieldSet) => {
-                        const fieldSetOptionValue = String(fieldSet.id);
-
                         return (
-                          <option
-                            value={fieldSet.id}
-                            key={fieldSet.id}
-                            selected={fieldSetValue === fieldSetOptionValue}
-                          >
+                          <option value={fieldSet.id} key={fieldSet.id}>
                             {fieldSet.name}
                           </option>
                         );
@@ -302,6 +305,27 @@ 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,6 +29,7 @@ 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";
 
@@ -99,7 +100,12 @@ export function ProductCategoriesControl({
   });
   const [productCategoryState, setProductCategoryState] = useState<
     Record<number, { price: number; quantity: number }>
-  >([]);
+  >({});
+
+  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
+    fieldName: productCategoriesFieldName,
+    remove,
+  });
 
   const productCategories: ProductCategory[] = useWatch({
     control,
@@ -165,17 +171,21 @@ export function ProductCategoriesControl({
         return sum + Number(product.price) * Number(product.totalQuantity);
       }, 0);
       const quantity = productCategory.products?.reduce((sum, product) => {
-        return sum + Number(product.totalQuantity);
+        const productQuantity = !product.isUnlimited
+          ? Number(product.totalQuantity)
+          : 0;
+        return sum + productQuantity;
       }, 0);
 
-      setProductCategoryState({
+      setProductCategoryState((prevState) => ({
+        ...prevState,
         // New added categories will have uniqueId
         // but existing have already assigned Id.
         [productCategory?.id || productCategory.uniqueId]: {
           price,
           quantity,
         },
-      });
+      }));
     });
   }, [productCategories]);
 
@@ -221,6 +231,8 @@ export function ProductCategoriesControl({
                   title={value}
                   isExpanded={expandedProductCategories[productCategoryId]}
                   setIsExpanded={onSetIsExpanded}
+                  edit={() => edit(index)}
+                  cancelChanges={() => cancelChanges(index)}
                   isInvalid={!!productCategoriesErrors}
                   badge={
                     <Badge className="category-badge">
@@ -260,6 +272,7 @@ 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,6 +3,11 @@
 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,
@@ -357,12 +362,14 @@ Default.args = {
       body: "",
       meta: "",
       notification: {
-        isActive: false,
+        id: 1,
+        isActive: true,
         isDefault: false,
         name: "Template name 1",
         companyId: 1,
         providerId: 1,
         fieldSetId: 1,
+        type: CONFIRMATION_TYPE,
       },
     },
     {
@@ -371,12 +378,44 @@ Default.args = {
       body: "",
       meta: "",
       notification: {
-        isActive: false,
+        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,
         isDefault: false,
         name: "Tempalte name 2",
         companyId: 1,
         providerId: 1,
         fieldSetId: 1,
+        type: PAYMENT_LINK_TYPE,
       },
     },
   ],

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

@@ -20,6 +20,7 @@ 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;
@@ -133,6 +134,16 @@ 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,6 +21,7 @@ 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";
@@ -85,16 +86,25 @@ 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`
   );
@@ -156,6 +166,22 @@ 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
@@ -182,6 +208,8 @@ 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">
@@ -219,8 +247,9 @@ export function ProductsControl({
                     categoryType={categoryType}
                   />
                 }
-                onDelete={() => remove(index)}
+                onDelete={() => onProductRemove(index)}
                 validate={() => trigger(`${productControlFieldName}.${index}`)}
+                saveValidField={saveValidField}
                 // preItem={<Popover className="d-none d-sm-block" />}
               >
                 <SubProductsControl

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

@@ -4,6 +4,7 @@ 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";
@@ -11,6 +12,7 @@ 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";
 
@@ -28,6 +30,7 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     formState: { errors, isSubmitting },
     clearErrors,
     getValues,
+    setFocus,
   } = form;
 
   const { fields, append, remove } = useFieldArray({
@@ -36,6 +39,11 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     keyName: "_id",
   });
 
+  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
+    fieldName: "steps",
+    remove,
+  });
+
   useEffect(() => {
     if (!isSubmitting) {
       return;
@@ -57,12 +65,14 @@ export function StepsControl({ isLoading }: StepsControlProps) {
   return (
     <>
       {fields.map((step, index) => {
-        const stepData: any = getValues(`steps.${index}` as const);
+        const stepFieldName = `steps.${index}` as const;
+
+        const stepData = getValues(stepFieldName);
 
         return (
           <Controller
             key={`step-${step._id}`}
-            name={`steps.${index}.name` as const}
+            name={`${stepFieldName}.name` as const}
             control={control}
             rules={{
               required: t("Validation:fieldRequired", {
@@ -74,12 +84,14 @@ export function StepsControl({ isLoading }: StepsControlProps) {
                 id={step._id}
                 title={value}
                 badge={<Badge className="step-badge">{t("step")}</Badge>}
-                isExpanded={isFirstStepAdded}
+                isExpanded={isFirstStepAdded || !!errors.steps?.[index]}
                 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" />
@@ -104,6 +116,22 @@ 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/hooks/useSortableTreeFunctions.ts

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