@licklist/design 0.44.485-dev.49 → 0.44.485-dev.5

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -2,19 +2,16 @@ 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 { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
+
 import { ConfirmModal, ConfirmModalType } from "../../../modals";
 import { Icon } from "../../../static";
-import { useTranslatedParameters } from "../../hooks/useTranslatedParameters";
 
 export interface EmailTemplateCardProps extends HasPermissionProp {
   name: string;
   subject: string;
   href: string;
   isDefault: boolean;
-  isActive: boolean;
   onRemove: () => void;
-  type: NotificationType;
 }
 
 export function EmailTemplateCard({
@@ -23,14 +20,10 @@ export function EmailTemplateCard({
   subject,
   onRemove,
   isDefault = false,
-  isActive = false,
   hasPermission = true,
-  type,
 }: EmailTemplateCardProps) {
   const { t } = useTranslation(["Design"]);
 
-  const texts = useTranslatedParameters({ isDefault, isActive });
-
   return (
     <>
       <div className="snippet-template-card">
@@ -60,13 +53,8 @@ export function EmailTemplateCard({
           )}
         </div>
         <div className={`mt-${isDefault ? "3" : "4"}`}>
-          {!!texts.length && <p className="mb-1">{texts}</p>}
-          <div className="d-flex flex-column">
-            <span className="snippet-template-card-subject">{subject}</span>
-            <p className="mb-0">
-              {t(`Design:type`)}:&nbsp;{t(`Design:${type}`)}
-            </p>
-          </div>
+          {Boolean(isDefault) && <p className="mb-1">{t("Design:default")}</p>}
+          <span>{subject}</span>
         </div>
       </div>
     </>

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/display-name */
 import React, { useState, useEffect } from "react";
 import { Col, Row, Form } from "react-bootstrap";
 import { useFormContext } from "react-hook-form";
@@ -15,7 +16,6 @@ import {
   PERMANENT_IMAGE_TYPE_TEMP,
 } from "@licklist/core/dist/DataMapper/Media/UploadPermanentImageDataMapper";
 
-import { NotificationType } from "@licklist/core/dist/DataMapper/Notification/NotificationTypeDataMapper";
 import { FileUpload } from "../../../file-upload";
 import { EmailTemplateValues } from "../form";
 
@@ -26,8 +26,6 @@ export interface EmailTemplateControlProps {
   setIsLoading: (isLoading: boolean) => void;
   meta: string;
   defaultAttachments?: Attachment[];
-  notificationTypes?: NotificationType[];
-  getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string;
 }
 
 export const EmailTemplateControl = React.forwardRef(
@@ -37,8 +35,6 @@ export const EmailTemplateControl = React.forwardRef(
       meta,
       options = [],
       defaultAttachments = [],
-      notificationTypes = [],
-      getDefaultTemplateMetaByType,
     }: EmailTemplateControlProps,
     ref: any
   ) => {
@@ -52,8 +48,6 @@ export const EmailTemplateControl = React.forwardRef(
       setValue,
       formState: { errors },
       getValues,
-      watch,
-      reset,
     } = useFormContext<EmailTemplateValues>();
     const [isIncludePDF, setIsIncludePDF] = useState(false);
 
@@ -70,29 +64,12 @@ export const EmailTemplateControl = React.forwardRef(
       handlePermanentImageUploading,
     } = usePermanentImage();
 
-    const type = watch("type");
-    const id = watch("id");
-
-    useEffect(() => {
-      if (id || !getDefaultTemplateMetaByType || !type) return;
-
-      const formValues = getValues();
-
-      const nextMeta = getDefaultTemplateMetaByType(type);
-
-      reset({ ...formValues, meta: nextMeta });
-
-      ref.current?.loadDesign(JSON.parse(nextMeta));
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [type]);
-
     useEffect(() => {
       setValue("attachmentMetadata", attachments);
     }, [attachments, setValue]);
 
     useEffect(() => {
       if (!permanentImages.length) return;
-
       setValue("imagesMetadata", permanentImages);
     }, [permanentImages, setValue]);
 
@@ -108,15 +85,13 @@ export const EmailTemplateControl = React.forwardRef(
     }, [defaultAttachments]);
 
     useEffect(() => {
-      if (!options?.length) return;
-
+      if (!options.length) return;
       const fileSelectorOptions = options.find(
         (option) => option.type === OPTION_TYPE.files_selector
       );
-
-      if (!fileSelectorOptions?.selectedValue) return;
-
-      setIsIncludePDF(true);
+      if (fileSelectorOptions.selectedValue) {
+        setIsIncludePDF(true);
+      }
     }, [options]);
 
     const handleDeleteEmailImage = (content) => {
@@ -200,42 +175,6 @@ export const EmailTemplateControl = React.forwardRef(
 
     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}
@@ -340,7 +279,7 @@ export const EmailTemplateControl = React.forwardRef(
             isLoading={isAttachmentLoading}
           />
         </Row>
-        {options?.length > 0 && (
+        {options.length > 0 && (
           <Row>
             <Form.Group as={Col}>
               {options.map((option) => {
@@ -408,27 +347,6 @@ export const EmailTemplateControl = React.forwardRef(
                     </>
                   );
                 }
-
-                if (option.type === OPTION_TYPE.days_reminder) {
-                  return (
-                    <>
-                      <Form.Label className="mt-4">
-                        {t(`Design:${option.name}`)}
-                      </Form.Label>
-                      <Form.Control
-                        {...register(
-                          `templateOptionValues.${option?.id}.value` as any
-                        )}
-                        type="number"
-                        placeholder={t(`Design:${option.name}`)}
-                        id={option.name + option.id}
-                        defaultValue={option.selectedValue || ""}
-                      />
-                      <Form.Text>{option.description}</Form.Text>
-                    </>
-                  );
-                }
-
                 return null;
               })}
             </Form.Group>
@@ -438,5 +356,3 @@ export const EmailTemplateControl = React.forwardRef(
     );
   }
 );
-
-EmailTemplateControl.displayName = "EmailTemplateControl";

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

@@ -185,7 +185,6 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "true",
-      descrption: "",
     },
     {
       id: 12,
@@ -193,7 +192,6 @@ Default.args = {
       notificationType: "confirmation",
       type: "checkbox",
       defaultValue: "false",
-      descrption: "",
     },
     {
       selectedValue: "invoice",
@@ -203,17 +201,6 @@ 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: {
@@ -232,13 +219,6 @@ Default.args = {
         attachableType: "mail",
       },
     ],
-    type: "confirmation",
-    notificationTypes: [
-      "confirmation",
-      "paymentLink",
-      "afterBooking",
-      "preliminaryMail",
-    ],
   },
 };
 
@@ -268,24 +248,10 @@ 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,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,
@@ -26,39 +20,9 @@ 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}
@@ -98,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,18 +54,4 @@ 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,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,8 +16,6 @@ export interface SmsTemplateValues extends FormValues {
   isActive: boolean;
   isDefault: boolean;
   body: string;
-  type?: NotificationType;
-  id?: number | string;
 }
 
 export interface SmsTemplateProps extends HasPermissionProp {
@@ -27,7 +24,6 @@ export interface SmsTemplateProps extends HasPermissionProp {
   defaultValues?: SmsTemplateValues;
   placeholders?: NotificationPlaceholder[];
   serverErrors?: ServerError;
-  notificationTypes?: NotificationType[];
 }
 
 export function SmsTemplateForm({
@@ -36,7 +32,6 @@ export function SmsTemplateForm({
   hasPermission = true,
   placeholders = [],
   serverErrors,
-  notificationTypes = [],
 }: SmsTemplateProps) {
   const { t } = useTranslation("Design");
 
@@ -51,7 +46,7 @@ export function SmsTemplateForm({
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
-        <SmsTemplateControl notificationTypes={notificationTypes} />
+        <SmsTemplateControl />
         <NotificationPlaceholders placeholders={placeholders} />
 
         {hasPermission && (