@licklist/design 0.44.485 → 0.44.486-dev.10

package/src/notification/email-template/form/EmailTemplateForm.stories.tsx

@@ -185,6 +185,7 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "true",
+      descrption: "",
     },
     {
       id: 12,
@@ -192,6 +193,7 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "false",
+      descrption: "",
     },
     {
       selectedValue: "invoice",
@@ -201,6 +203,17 @@ Default.args = {
       type: "files_selector",
       defaultValue:
         '{"confirmation":"Confirmation / Function Sheet","invoice":"Invoice"}',
+      descrption: "",
+    },
+    {
+      id: 13,
+      name: "days_reminder",
+      notificationType: "confirmation",
+      type: "days_reminder",
+      defaultValue: "",
+      description: `N.B. Add positive integer for days before the event, or negative for days after the event. 
+        E.g. if you want this remainder to be send 2 days before the event, enter 2. 
+        If you want this to be send 3 days after the event enter -3.`,
     },
   ],
   defaultValues: {
@@ -219,6 +232,13 @@ Default.args = {
         attachableType: "mail",
       },
     ],
+    type: "confirmation",
+    notificationTypes: [
+      "confirmation",
+      "paymentLink",
+      "afterBooking",
+      "preliminaryMail",
+    ],
   },
 };
 
@@ -248,10 +268,24 @@ ServerErrors.args = {
     body: "",
     meta: JSON.stringify(DefaultEmailTemplate),
   },
+  type: "confirmation",
+  notificationTypes: [
+    "confirmation",
+    "paymentLink",
+    "afterBooking",
+    "preliminaryMail",
+  ],
 };
 
 Empty.args = {
   onSubmit: (data) => console.log(data),
   isLoading: true,
   placeholders: [],
+  type: "confirmation",
+  notificationTypes: [
+    "confirmation",
+    "paymentLink",
+    "afterBooking",
+    "preliminaryMail",
+  ],
 };

package/src/notification/email-template/form/EmailTemplateForm.tsx

@@ -13,12 +13,13 @@ import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
 import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
 import { AttachmentsWithHash } from "@licklist/plugins/dist/hooks/Media/useAttachments";
 import { UploadPermanentImage } from "@licklist/core/dist/DataMapper/Media/UploadPermanentImageDataMapper";
-
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { NotificationPlaceholders } from "../../components/NotificationPlaceholders";
 import { EmailTemplateControl } from "../control/EmailTemplateControl";
 import { BlockLoader } from "../../../static";
 
 export interface EmailTemplateValues extends FormValues {
+  id?: number | string;
   name: string;
   subject: string;
   isActive: boolean;
@@ -29,6 +30,7 @@ export interface EmailTemplateValues extends FormValues {
   attachments?: Attachment[];
   templateOptionValues?: TemplateOptionValue[];
   imagesMetadata?: UploadPermanentImage[];
+  type?: NotificationType;
 }
 
 export interface EmailTemplateProps extends HasPermissionProp {
@@ -39,9 +41,12 @@ export interface EmailTemplateProps extends HasPermissionProp {
   placeholders?: NotificationPlaceholder[];
   options?: TemplateOption[];
   serverErrors?: ServerError;
+  notificationTypes?: NotificationType[];
+  getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
+  onTypeChange?: (type?: NotificationType | null) => void;
 }
 
-export function EmailTemplateForm({
+export const EmailTemplateForm = ({
   defaultValues,
   onSubmitSave,
   onSubmitSaveAndSend,
@@ -49,7 +54,10 @@ export function EmailTemplateForm({
   placeholders = [],
   options = [],
   serverErrors,
-}: EmailTemplateProps) {
+  notificationTypes = [],
+  getDefaultTemplateMetaByType,
+  onTypeChange,
+}: EmailTemplateProps) => {
   const { t } = useTranslation("Design");
   const [isLoading, setIsLoading] = useState(false);
   const emailEditorRef = useRef(null);
@@ -59,12 +67,20 @@ export function EmailTemplateForm({
     defaultValues,
   });
 
-  const { setError } = form;
+  const { setError, watch } = form;
+  const type = watch("type");
 
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);
 
+  useEffect(() => {
+    if (!onTypeChange) return;
+
+    onTypeChange(type);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [type]);
+
   return (
     <FormProvider {...form}>
       {isLoading && <BlockLoader />}
@@ -81,6 +97,8 @@ export function EmailTemplateForm({
           meta={defaultValues?.meta || null}
           defaultAttachments={defaultValues?.attachments || []}
           options={options}
+          notificationTypes={notificationTypes}
+          getDefaultTemplateMetaByType={getDefaultTemplateMetaByType}
         />
         <NotificationPlaceholders placeholders={placeholders} />
         {/* update email template */}
@@ -106,4 +124,4 @@ export function EmailTemplateForm({
       </Form>
     </FormProvider>
   );
-}
+};

package/src/notification/hooks/useTranslatedParameters.ts

@@ -0,0 +1,27 @@
+import { useTranslation } from "react-i18next";
+
+type UseTranslatedParametersProps = {
+  isDefault: boolean;
+  isActive: boolean;
+};
+
+export const useTranslatedParameters = ({
+  isActive,
+  isDefault,
+}: UseTranslatedParametersProps) => {
+  const { t } = useTranslation(["Design"]);
+
+  const translatedParameters = () => {
+    const texts: string[] = [];
+    if (isDefault) {
+      texts.push(t("Design:default"));
+    }
+    if (isActive) {
+      texts.push(t("Design:active"));
+    }
+
+    return texts.join(", ");
+  };
+
+  return translatedParameters();
+};

package/src/notification/sms-template/card/SmsTemplateCard.stories.tsx

@@ -14,7 +14,9 @@ export const Default: Story<SmsTemplateCardProps> = (args) => (
 
 Default.args = {
   href: "#",
-  name: "Default Sms Template",
+  name: "Default Sms Template with Long name",
   hasPermission: true,
   isDefault: true,
+  templateType: "confirmation",
+  isActive: true,
 };

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -1,16 +1,19 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
 import { useTranslation } from "react-i18next";
-
+import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
 import { Icon } from "../../../static";
+import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface SmsTemplateCardProps extends HasPermissionProp {
   name: string;
   href: string;
   onRemove: () => void;
   isDefault: boolean;
+  isActive: boolean;
+  type: NotificationType;
 }
 
 export function SmsTemplateCard({
@@ -19,9 +22,13 @@ export function SmsTemplateCard({
   onRemove,
   hasPermission = true,
   isDefault = false,
+  isActive = false,
+  type,
 }: SmsTemplateCardProps) {
   const { t } = useTranslation(["Design"]);
 
+  const texts = useTranslatedParameters({ isActive, isDefault });
+
   return (
     <div className="snippet-template-card">
       <div className="snippet-template-card-header">
@@ -50,7 +57,10 @@ export function SmsTemplateCard({
         )}
       </div>
       <div className="mt-2">
-        {Boolean(isDefault) && <p className="mb-1">{t("Design:default")}</p>}
+        {!!texts.length && <p className="mb-1">{texts}</p>}
+        <p className="mb-0">
+          {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
+        </p>
       </div>
     </div>
   );

package/src/notification/sms-template/control/SmsTemplateControl.tsx

@@ -4,12 +4,18 @@ import { Col, Row, Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { SmsTemplateValues } from "../form";
 
 const MAX_SMS_LENGTH = 300;
 
-export const SmsTemplateControl = () => {
+type SmsTemplateControlProps = {
+  notificationTypes: NotificationType[];
+};
+
+export const SmsTemplateControl = ({
+  notificationTypes = [],
+}: SmsTemplateControlProps) => {
   const { t } = useTranslation(["Design"]);
   const {
     register,
@@ -20,9 +26,39 @@ export const SmsTemplateControl = () => {
   } = useFormContext<SmsTemplateValues>();
 
   const smsBody = watch("body");
+  const id = watch("id");
 
   return (
     <>
+      <Row>
+        <Form.Group as={Col} controlId="type" xs sm={12} md={8} lg={10} xl={12}>
+          <Form.Label>{t("type")}</Form.Label>
+
+          <Form.Control
+            as="select"
+            {...register("type", {
+              required: t("Validation:fieldRequired", {
+                attribute: t("type"),
+              }) as string,
+            })}
+            name="type"
+            required
+            isInvalid={Boolean(errors.type)}
+            placeholder={t("Design:type")}
+            disabled={!!id}
+          >
+            <option value="">{t("Design:choose")}</option>
+            {notificationTypes.map((key) => (
+              <option key={key} value={key}>
+                {t(`Design:${key}`)}
+              </option>
+            ))}
+          </Form.Control>
+          <Form.Control.Feedback type="invalid">
+            {errors.type?.message}
+          </Form.Control.Feedback>
+        </Form.Group>
+      </Row>
       <Row>
         <Form.Group
           as={Col}
@@ -62,6 +98,8 @@ export const SmsTemplateControl = () => {
           <Form.Label>{t("Design:smsBody")}</Form.Label>
           <Form.Control
             isInvalid={Boolean(errors.body)}
+            as="textarea"
+            rows={3}
             {...register("body", {
               required: true,
               maxLength: MAX_SMS_LENGTH,

package/src/notification/sms-template/form/SmsTemplateForm.stories.tsx

@@ -38,12 +38,26 @@ Default.args = {
     isDefault: false,
     body: "Some random sms string",
   },
+  type: "confirmation",
+  notificationTypes: [
+    "confirmation",
+    "paymentLink",
+    "afterBooking",
+    "preliminaryMail",
+  ],
 };
 
 Empty.args = {
   onSubmit: (data) => console.log(data),
   isLoading: true,
   placeholders: [],
+  type: "confirmation",
+  notificationTypes: [
+    "confirmation",
+    "paymentLink",
+    "afterBooking",
+    "preliminaryMail",
+  ],
 };
 
 ServerErrors.args = {
@@ -54,4 +68,18 @@ ServerErrors.args = {
     body: ["Body field is required"],
     name: ["Name Field is required"],
   },
+  type: "confirmation",
+  notificationTypes: [
+    "confirmation",
+    "paymentLink",
+    "afterBooking",
+    "preliminaryMail",
+  ],
+  defaultValues: {
+    name: "",
+    isActive: false,
+    isDefault: false,
+    body: "Some random sms string",
+    id: 5,
+  },
 };

package/src/notification/sms-template/form/SmsTemplateForm.tsx

@@ -8,6 +8,7 @@ import { NotificationPlaceholder } from "@licklist/core/dist/DataMapper/Notifica
 import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
 import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
 
+import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { NotificationPlaceholders } from "../../components/NotificationPlaceholders";
 import { SmsTemplateControl } from "../control/SmsTemplateControl";
 
@@ -16,6 +17,8 @@ export interface SmsTemplateValues extends FormValues {
   isActive: boolean;
   isDefault: boolean;
   body: string;
+  type?: NotificationType;
+  id?: number | string;
 }
 
 export interface SmsTemplateProps extends HasPermissionProp {
@@ -24,6 +27,7 @@ export interface SmsTemplateProps extends HasPermissionProp {
   defaultValues?: SmsTemplateValues;
   placeholders?: NotificationPlaceholder[];
   serverErrors?: ServerError;
+  notificationTypes?: NotificationType[];
 }
 
 export function SmsTemplateForm({
@@ -32,6 +36,7 @@ export function SmsTemplateForm({
   hasPermission = true,
   placeholders = [],
   serverErrors,
+  notificationTypes = [],
 }: SmsTemplateProps) {
   const { t } = useTranslation("Design");
 
@@ -46,7 +51,7 @@ export function SmsTemplateForm({
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
-        <SmsTemplateControl />
+        <SmsTemplateControl notificationTypes={notificationTypes} />
         <NotificationPlaceholders placeholders={placeholders} />
 
         {hasPermission && (

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import type Popper from "@popperjs/core";
+import { Modifier } from "@popperjs/core";
 import { useId } from "@react-aria/utils";
 import { Form, OverlayTrigger, Popover } from "react-bootstrap";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -245,7 +245,7 @@ export const DateAndRecurrenceInput = ({
   );
 };
 
-const sameWidthPopperModifier: Popper.Modifier<
+export const sameWidthPopperModifier: Modifier<
   "sameWidth",
   Record<string, unknown>
 > = {

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