@licklist/design 0.44.505 → 0.44.507

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/ProductSetControl.tsx

@@ -27,12 +27,19 @@ 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;
@@ -43,8 +50,8 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   productGroups?: SelectItem[];
   fieldSetId?: number;
   steps?: Step[];
-  emailTemplateId?: number;
-  smsTemplateId?: number;
+  emailTemplates?: TemplateItem[];
+  smsTemplates?: TemplateItem[];
 }
 
 export interface ProductSetControlShared {
@@ -54,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({
@@ -70,6 +83,8 @@ export function ProductSetControl({
   smsTemplates = [],
   isEventEditProductSet,
   isCreateAction,
+  showEmailTemplate,
+  showSmsTemplate,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -82,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();
@@ -221,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", {
@@ -248,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", {

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/utils/index.ts

@@ -1,3 +1,7 @@
+import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
+import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
+import { TemplateItem } from "../control/ProductSetControl";
+
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
@@ -14,3 +18,27 @@ export const moveArrayElements = <T>(
 export const sortArrayByIndex = <T>(array: T[]) => {
   return array.map((element: T, index) => ({ ...element, sort: index }));
 };
+
+export const getFilteredTemplates = (
+  templates?: EmailTemplate[] | SmsTemplate[],
+  formTemplates?: TemplateItem[]
+): TemplateItem[] | undefined => {
+  if (!templates) {
+    return undefined;
+  }
+
+  return templates
+    ?.filter(
+      (template) =>
+        template.notification.isActive &&
+        !formTemplates?.find(
+          (formTemplate) =>
+            formTemplate.value.notification.type === template.notification.type
+        )
+    )
+    ?.map((template) => ({
+      id: template?.id,
+      value: template,
+      label: template?.notification?.name,
+    }));
+};

package/src/provider/provider-details-input/ProviderDetailsInput.tsx

@@ -34,7 +34,6 @@ export function ProviderDetailsInput({
   const {
     register,
     formState: { errors },
-    setValue,
   } = useFormContext<ProviderDetailsInputValues>();
   const { t } = useTranslation(["App", "Design", "Validation"]);
 
@@ -149,7 +148,6 @@ export function ProviderDetailsInput({
           <Typeahead
             name="company"
             options={companiesOptions}
-            setValue={setValue}
             placeholder={t("App:select")}
             noOptionsMessage={t("App:noMatchesFound")}
           />

package/src/sales/manual-booking/select-menu/SelectMenu.tsx

@@ -39,7 +39,9 @@ export const SelectMenu = ({
       ) : (
         <>
           {!isLoading && (
-            <Form.Label className="bold-text">{t("Design:productSets")}</Form.Label>
+            <Form.Label className="bold-text">
+              {t("Design:productSets")}
+            </Form.Label>
           )}
 
           <div className="menu-list-manual-booking">

package/src/styles/snippet-templates/SnippetTemplateCard.scss

@@ -45,6 +45,22 @@ $snippet-template-card-button-transition: $product-set-card-transition !default;
     display: flex;
     justify-content: space-between;
     align-items: center;
+
+    a {
+      white-space: nowrap;
+      display: inline-block;
+      text-overflow: ellipsis;
+      width: 85%;
+      overflow: hidden;
+    }
+  }
+
+  .snippet-template-card-subject {
+    white-space: nowrap;
+    display: inline-block;
+    text-overflow: ellipsis;
+    width: 100%;
+    overflow: hidden;
   }
 
   .snippet-template-card-button {

package/src/typeahead/Typeahead.stories.tsx

@@ -1,20 +1,23 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
+import { FormProvider, useForm } from "react-hook-form";
 import { Typeahead } from "./Typeahead";
 
-storiesOf("Typeahead", module)
-  .add("Typeahead", () => (
-    <>
+storiesOf("Typeahead", module).add("Typeahead", () => {
+  const form = useForm();
+  return (
+    <FormProvider {...form}>
       <Typeahead
         name="user"
+        isMultipleChoise
         options={[
           { id: 1, value: "user1", label: "User1" },
           { id: 2, value: "user2", label: "User2" },
           { id: 3, value: "user3", label: "User3" },
         ]}
-        setValue={() => {}}
         placeholder="Select"
         noOptionsMessage="No Options Found"
       />
-    </>
-  ));
+    </FormProvider>
+  );
+});

package/src/typeahead/Typeahead.tsx

@@ -1,47 +1,54 @@
 import React from "react";
 import Select from "react-select";
-import { useForm, Controller } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
 
 export type TypeaheadOptions = {
-  id: number;
-  value: string;
+  id: number | string;
+  value: any;
   label: string;
 };
 
 export interface TypeaheadProps {
   options: TypeaheadOptions[];
-  setValue: (value: string | any) => void;
   placeholder: string;
   isRequired?: boolean;
   name: string;
+  isMultipleChoise?: boolean;
   noOptionsMessage: string;
+  isInvalid?: boolean;
 }
 
 function Typeahead({
   options,
-  setValue,
   placeholder,
   isRequired = false,
+  isMultipleChoise,
   name = "",
   noOptionsMessage = "",
-}) {
-  const { control } = useForm({
-    mode: "onChange",
-  });
-  const prefix = "id";
+  isInvalid,
+}: TypeaheadProps) {
+  const { control } = useFormContext();
+
+  const getErrorStyle = () => (isInvalid ? { borderColor: "red" } : {});
 
   return (
     <>
       <Controller
-        name={`${name}.${prefix as string}` as const}
+        name={name}
         control={control}
         rules={{ required: isRequired }}
         render={({ field }) => (
           <Select
             placeholder={placeholder}
             value={field.value}
+            isMulti={isMultipleChoise}
+            styles={{
+              control: (base) => ({
+                ...base,
+                ...getErrorStyle(),
+              }),
+            }}
             onChange={(value) => {
-              setValue(`${name}.${prefix}`, value.id);
               field.onChange(value);
             }}
             options={options}