@licklist/design 0.44.486-dev.83 → 0.44.486

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

@@ -7,21 +7,14 @@ import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
   OPERATIONAL_COST_TYPES,
-  RELY_ON_PEOPLE_QUANTITY,
-  RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY,
-  RELY_ON_PEOPLE_PRODUCT_QUANTITY,
   OperationalCostType,
   ProductSetType,
-  RELY_ON_PEOPLE_TYPES,
-  RelyOnPeopleType,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { useId } from "@react-aria/utils";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
 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 { WorkHour } from "@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper";
 import { WarningMessage } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
 import {
@@ -33,37 +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;
 
-const RELY_ON_PEOPLE_TYPE_TITLES = {
-  [RELY_ON_PEOPLE_PRODUCT_CAPACITY_QUANTITY]: "peopleProductCapacityQuantity",
-  [RELY_ON_PEOPLE_PRODUCT_QUANTITY]: "peopleProductQuantity",
-  [RELY_ON_PEOPLE_QUANTITY]: "peopleQuantity",
-};
-
-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[];
-  relyOnPeopleType?: RelyOnPeopleType | null;
   fieldSetId?: number;
   steps?: Step[];
-  emailTemplates?: TemplateItem[];
-  smsTemplates?: TemplateItem[];
+  emailTemplateId?: number;
+  smsTemplateId?: number;
 }
 
 export interface ProductSetControlShared {
@@ -73,19 +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;
-  workHours?: WorkHour[];
-  providerHasBookingManagement?: boolean;
 }
 
 export function ProductSetControl({
@@ -97,10 +68,6 @@ export function ProductSetControl({
   smsTemplates = [],
   isEventEditProductSet,
   isCreateAction,
-  showEmailTemplate,
-  showSmsTemplate,
-  workHours,
-  providerHasBookingManagement = false,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -113,10 +80,11 @@ export function ProductSetControl({
   } = useFormContext<ProductSetControlValues>();
 
   const steps = watch("steps");
+  const smsTemplateId = watch("smsTemplateId");
+  const emailTemplateId = watch("emailTemplateId");
 
   const nameId = useId();
   const termsAndConditionsId = useId();
-  const relyOnPeopleTypeId = useId();
 
   return (
     <Row
@@ -162,9 +130,6 @@ export function ProductSetControl({
         {isCreateAction && (
           <DateAndRecurrenceInput
             isEventEditProductSet={isEventEditProductSet}
-            workHours={workHours}
-            isLoading={isLoading}
-            providerHasBookingManagement={providerHasBookingManagement}
           />
         )}
 
@@ -196,6 +161,15 @@ export function ProductSetControl({
                 </Form.Group>
               )}
             /> */}
+          {/* <Form.Check
+              {...register("isDefault")}
+              id="isDefaultId"
+              name="isDefault"
+              label={t("Design:setAsDraft")}
+              custom
+              className="is-default-checkbox"
+              disabled={isLoading}
+            /> */}
 
           <Form.Group>
             <Form.Label className="mb-0">
@@ -212,7 +186,6 @@ export function ProductSetControl({
               {...register("operationalCost", { required: true })}
               as="select"
               defaultValue={OPERATIONAL_COST_PROVIDER}
-              isInvalid={HookFormService.isInvalid("operationalCost", errors)}
             >
               {Object.keys(OPERATIONAL_COST_TYPES).map((operationalCost) => (
                 <option
@@ -230,36 +203,6 @@ export function ProductSetControl({
                 </option>
               ))}
             </Form.Control>
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors("operationalCost", errors)}
-            </Form.Control.Feedback>
-          </Form.Group>
-
-          <Form.Group controlId={relyOnPeopleTypeId}>
-            <Form.Label>{t("peopleQuantityType")}</Form.Label>
-            <Form.Control
-              {...register("relyOnPeopleType")}
-              as="select"
-              defaultValue={null}
-              isInvalid={HookFormService.isInvalid("relyOnPeopleType", errors)}
-            >
-              <option value="">{t("notRequired")} </option>
-              {Object.keys(RELY_ON_PEOPLE_TYPES).map((relyOnPeopleType) => (
-                <option
-                  value={RELY_ON_PEOPLE_TYPES[relyOnPeopleType]}
-                  key={RELY_ON_PEOPLE_TYPES[relyOnPeopleType]}
-                >
-                  {t(
-                    RELY_ON_PEOPLE_TYPE_TITLES[
-                      RELY_ON_PEOPLE_TYPES[relyOnPeopleType]
-                    ]
-                  )}
-                </option>
-              ))}
-            </Form.Control>
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors("relyOnPeopleType", errors)}
-            </Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group controlId={termsAndConditionsId}>
@@ -269,30 +212,27 @@ export function ProductSetControl({
               as="textarea"
               rows={2}
               disabled={isLoading}
-              isInvalid={HookFormService.isInvalid(
-                "termsAndConditions",
-                errors
-              )}
             />
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors("termsAndConditions", errors)}
-            </Form.Control.Feedback>
           </Form.Group>
 
           <Form.Group>
             <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", {
@@ -306,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", {
@@ -330,58 +274,34 @@ 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"
-                      isInvalid={HookFormService.isInvalid(
-                        "fieldSetId",
-                        errors
-                      )}
-                    >
-                      <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>
                         );
                       })}
                     </Form.Control>
-                    <Form.Control.Feedback type="invalid">
-                      {HookFormService.getErrors("fieldSetId", errors)}
-                    </Form.Control.Feedback>
                   </>
                 );
               }}
             />
           </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/control/ProductSetRecurrenceControl.tsx

@@ -11,13 +11,11 @@ import { Icon } from "../../static";
 export interface ProductSetRecurrenceControlProps {
   menuRecurrence?: { _id: string } & Partial<ProductSetRecurrence>;
   onEdit?: (onEdit: Partial<ProductSetRecurrence>) => void;
-  errorMessage?: string;
 }
 
 export const ProductSetRecurrenceControl = ({
   menuRecurrence,
   onEdit,
-  errorMessage,
 }: ProductSetRecurrenceControlProps) => {
   const { formatDate } = useIntl();
   const { t } = useTranslation("Design");
@@ -32,7 +30,7 @@ export const ProductSetRecurrenceControl = ({
 
   return (
     <div
-      className="sortable-tree-root flex-column"
+      className="sortable-tree-root"
       style={{
         transform: CSS.Translate.toString(transform),
         transition,
@@ -58,14 +56,10 @@ export const ProductSetRecurrenceControl = ({
             {formatDate(menuRecurrence.startDate, {
               dateStyle: "medium",
             })}{" "}
-            {menuRecurrence.endDate && (
-              <>
-                {"- "}
-                {formatDate(menuRecurrence.endDate, {
-                  dateStyle: "medium",
-                })}
-              </>
-            )}
+            -{" "}
+            {formatDate(menuRecurrence.endDate, {
+              dateStyle: "medium",
+            })}
           </span>
 
           <div
@@ -86,9 +80,6 @@ export const ProductSetRecurrenceControl = ({
           {getHumanReadableDate(menuRecurrence)}
         </span>
       </div>
-      <div className={`manual-form-error ${!errorMessage && "d-none"}`}>
-        {errorMessage}
-      </div>
     </div>
   );
 };

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";
 
@@ -48,6 +47,7 @@ const getCategoryDefaultValue = (
   maxSubItems: null,
   quantityType: QUANTITY_TYPE_STANDARD,
   type: categoryType,
+  isRelyOnPeople: categoryType === CATEGORY_TYPE_TICKETS,
   isTimeRelated: false,
   collectUserInfo: false,
   hasTicket: categoryType === CATEGORY_TYPE_TICKETS,
@@ -71,7 +71,6 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
-    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -100,12 +99,7 @@ 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,
@@ -171,21 +165,17 @@ export function ProductCategoriesControl({
         return sum + Number(product.price) * Number(product.totalQuantity);
       }, 0);
       const quantity = productCategory.products?.reduce((sum, product) => {
-        const productQuantity = !product.isUnlimited
-          ? Number(product.totalQuantity)
-          : 0;
-        return sum + productQuantity;
+        return sum + Number(product.totalQuantity);
       }, 0);
 
-      setProductCategoryState((prevState) => ({
-        ...prevState,
+      setProductCategoryState({
         // New added categories will have uniqueId
         // but existing have already assigned Id.
         [productCategory?.id || productCategory.uniqueId]: {
           price,
           quantity,
         },
-      }));
+      });
     });
   }, [productCategories]);
 
@@ -231,8 +221,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 +260,6 @@ export function ProductCategoriesControl({
                   validate={() =>
                     trigger(`steps.${stepIndex}.productCategories.${index}`)
                   }
-                  saveValidField={saveValidField}
                   // preItem={<Popover className="d-none d-sm-block" />}
                   sortableItems={
                     productCategory.products
@@ -287,7 +274,6 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
-                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                   />

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

@@ -3,15 +3,9 @@
 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,
-  RELY_ON_PEOPLE_PRODUCT_QUANTITY,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
 import { ProductSetForm, ProductSetFormProps } from "./ProductSetForm";
@@ -23,17 +17,13 @@ export default {
 export const Default: Story<ProductSetFormProps> = (args) => {
   const providerHasMap = boolean("providerHasMap", true);
 
-  return (
-    <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
-  );
+  return <ProductSetForm {...args} providerHasMap={providerHasMap} />;
 };
 
 export const Empty: Story<ProductSetFormProps> = (args) => {
   const providerHasMap = boolean("providerHasMap", true);
 
-  return (
-    <ProductSetForm {...args} providerHasMap={providerHasMap} isCreateAction />
-  );
+  return <ProductSetForm {...args} providerHasMap={providerHasMap} />;
 };
 
 export const Valid: Story<ProductSetFormProps> = (args) => {
@@ -79,7 +69,6 @@ Default.args = {
     {
       createdAt: "2023-05-08T15:55:28.000+03:00",
       deletedAt: null,
-      defaultDuration: 30,
       description: "Zone description 2",
       id: 2,
       image: null,
@@ -107,8 +96,8 @@ Default.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
-    relyOnPeopleType: RELY_ON_PEOPLE_PRODUCT_QUANTITY,
     steps: [
       {
         id: 1,
@@ -120,6 +109,7 @@ Default.args = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -188,6 +178,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -206,6 +197,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -291,6 +283,7 @@ Default.args = {
             minSubItems: 0,
             maxSubItems: null,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -364,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,
       },
     },
     {
@@ -380,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,
       },
     },
   ],
@@ -851,6 +810,7 @@ Empty.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_PROVIDER,
     steps: [],
   },
@@ -863,6 +823,7 @@ ServerErrors.args = {
     name: "",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_PROVIDER,
     steps: [],
   },
@@ -876,6 +837,7 @@ Valid.args = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
     menuRecurrences: [
       {
@@ -896,6 +858,7 @@ Valid.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -1110,6 +1073,7 @@ Valid.args = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,