@licklist/design 0.44.485-dev.38 → 0.44.485-dev.4

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

@@ -13,13 +13,12 @@ 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;
@@ -30,7 +29,6 @@ export interface EmailTemplateValues extends FormValues {
   attachments?: Attachment[];
   templateOptionValues?: TemplateOptionValue[];
   imagesMetadata?: UploadPermanentImage[];
-  type?: NotificationType;
 }
 
 export interface EmailTemplateProps extends HasPermissionProp {
@@ -41,12 +39,9 @@ export interface EmailTemplateProps extends HasPermissionProp {
   placeholders?: NotificationPlaceholder[];
   options?: TemplateOption[];
   serverErrors?: ServerError;
-  notificationTypes?: NotificationType[];
-  getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
-  onTypeChange?: (type?: NotificationType | null) => void;
 }
 
-export const EmailTemplateForm = ({
+export function EmailTemplateForm({
   defaultValues,
   onSubmitSave,
   onSubmitSaveAndSend,
@@ -54,10 +49,7 @@ export const EmailTemplateForm = ({
   placeholders = [],
   options = [],
   serverErrors,
-  notificationTypes = [],
-  getDefaultTemplateMetaByType,
-  onTypeChange,
-}: EmailTemplateProps) => {
+}: EmailTemplateProps) {
   const { t } = useTranslation("Design");
   const [isLoading, setIsLoading] = useState(false);
   const emailEditorRef = useRef(null);
@@ -67,20 +59,12 @@ export const EmailTemplateForm = ({
     defaultValues,
   });
 
-  const { setError, watch } = form;
-  const type = watch("type");
+  const { setError } = form;
 
   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 />}
@@ -97,8 +81,6 @@ export const EmailTemplateForm = ({
           meta={defaultValues?.meta || null}
           defaultAttachments={defaultValues?.attachments || []}
           options={options}
-          notificationTypes={notificationTypes}
-          getDefaultTemplateMetaByType={getDefaultTemplateMetaByType}
         />
         <NotificationPlaceholders placeholders={placeholders} />
         {/* update email template */}
@@ -124,4 +106,4 @@ export const EmailTemplateForm = ({
       </Form>
     </FormProvider>
   );
-};
+}

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

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

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

@@ -1,19 +1,16 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { useTranslation } from "react-i18next";
 import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+import { useTranslation } from "react-i18next";
+
 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({
@@ -22,13 +19,9 @@ 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">
@@ -57,10 +50,7 @@ export function SmsTemplateCard({
         )}
       </div>
       <div className="mt-2">
-        {!!texts.length && <p className="mb-1">{texts}</p>}
-        <p className="mb-0">
-          {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
-        </p>
+        {Boolean(isDefault) && <p className="mb-1">{t("Design:default")}</p>}
       </div>
     </div>
   );

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

@@ -4,18 +4,12 @@ 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;
 
-type SmsTemplateControlProps = {
-  notificationTypes: NotificationType[];
-};
-
-export const SmsTemplateControl = ({
-  notificationTypes = [],
-}: SmsTemplateControlProps) => {
+export const SmsTemplateControl = () => {
   const { t } = useTranslation(["Design"]);
   const {
     register,
@@ -29,34 +23,6 @@ export const SmsTemplateControl = ({
 
   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")}
-          >
-            <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}
@@ -96,8 +62,6 @@ 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,26 +38,12 @@ 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 = {
@@ -68,11 +54,4 @@ ServerErrors.args = {
     body: ["Body field is required"],
     name: ["Name Field is required"],
   },
-  type: "confirmation",
-  notificationTypes: [
-    "confirmation",
-    "paymentLink",
-    "afterBooking",
-    "preliminaryMail",
-  ],
 };

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

@@ -8,7 +8,6 @@ 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";
 
@@ -17,7 +16,6 @@ export interface SmsTemplateValues extends FormValues {
   isActive: boolean;
   isDefault: boolean;
   body: string;
-  type?: NotificationType;
 }
 
 export interface SmsTemplateProps extends HasPermissionProp {
@@ -26,7 +24,6 @@ export interface SmsTemplateProps extends HasPermissionProp {
   defaultValues?: SmsTemplateValues;
   placeholders?: NotificationPlaceholder[];
   serverErrors?: ServerError;
-  notificationTypes?: NotificationType[];
 }
 
 export function SmsTemplateForm({
@@ -35,7 +32,6 @@ export function SmsTemplateForm({
   hasPermission = true,
   placeholders = [],
   serverErrors,
-  notificationTypes = [],
 }: SmsTemplateProps) {
   const { t } = useTranslation("Design");
 
@@ -50,7 +46,7 @@ export function SmsTemplateForm({
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
-        <SmsTemplateControl notificationTypes={notificationTypes} />
+        <SmsTemplateControl />
         <NotificationPlaceholders placeholders={placeholders} />
 
         {hasPermission && (

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", {
@@ -309,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/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

@@ -85,14 +85,11 @@ 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,
@@ -159,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
@@ -238,7 +219,7 @@ export function ProductsControl({
                     categoryType={categoryType}
                   />
                 }
-                onDelete={() => onProductRemove(index)}
+                onDelete={() => remove(index)}
                 validate={() => trigger(`${productControlFieldName}.${index}`)}
                 // preItem={<Popover className="d-none d-sm-block" />}
               >

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

@@ -28,7 +28,6 @@ export function StepsControl({ isLoading }: StepsControlProps) {
     formState: { errors, isSubmitting },
     clearErrors,
     getValues,
-    setFocus,
   } = form;
 
   const { fields, append, remove } = useFieldArray({
@@ -58,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", {
@@ -107,21 +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);
-                }}
               >
                 <ProductCategoriesControl
                   isLoading={isLoading}