feat(webapp): the mail notifications dialogs

packages/webapp/src/containers/SendMailNotification/MailNotificationForm.tsx

@@ -16,6 +16,14 @@ interface MailNotificationFormProps {
   toAddresses: SelectOptionProps[];
 }
 
+const commonAddressSelect = {
+  placeholder: '',
+  labelAccessor: '',
+  valueAccessor: 'mail',
+  tagAccessor: (item) => `<${item.label}> (${item.mail})`,
+  textAccessor: (item) => `<${item.label}> (${item.mail})`,
+};
+
 export function MailNotificationForm({
   fromAddresses,
   toAddresses,
@@ -38,12 +46,12 @@ export function MailNotificationForm({
           <FMultiSelect
             items={fromAddresses}
             name={'from'}
-            placeholder=""
             popoverProps={{ minimal: true, fill: true }}
             tagInputProps={{
               tagProps: { round: true, minimal: true, large: true },
             }}
             fill={true}
+            {...commonAddressSelect}
           />
         </FFormGroup>
 
@@ -57,6 +65,7 @@ export function MailNotificationForm({
               tagProps: { round: true, minimal: true, large: true },
             }}
             fill={true}
+            {...commonAddressSelect}
           />
         </FFormGroup>
 

packages/webapp/src/containers/SendMailNotification/RichEditor.tsx

@@ -1,63 +0,0 @@
-// @ts-nocheck
-import './styles.scss';
-import { Color } from '@tiptap/extension-color';
-import ListItem from '@tiptap/extension-list-item';
-import TextStyle from '@tiptap/extension-text-style';
-import { EditorProvider } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import { Box } from '@/components';
-import styled from 'styled-components';
-import { useUncontrolled } from '@/hooks/useUncontrolled';
-
-const extensions = [
-  Color.configure({ types: [TextStyle.name, ListItem.name] }),
-  TextStyle.configure({ types: [ListItem.name] }),
-  StarterKit.configure({
-    bulletList: {
-      keepMarks: true,
-      keepAttributes: false,
-    },
-    orderedList: {
-      keepMarks: true,
-      keepAttributes: false,
-    },
-  }),
-];
-
-export interface RichEditorProps {
-  value?: string;
-  initialValue?: string;
-  onChange?: (value: string) => void;
-  className?: string;
-}
-export const RichEditor = ({
-  value,
-  initialValue,
-  onChange,
-  className,
-}: RichEditorProps) => {
-  const [content, handleChange] = useUncontrolled({
-    value,
-    initialValue,
-    finalValue: '',
-    onChange,
-  });
-
-  return (
-    <Root>
-      <EditorProvider
-        extensions={extensions}
-        content={content}
-        onBlur={handleChange}
-      />
-    </Root>
-  );
-};
-
-const Root = styled(Box)`
-  padding: 15px;
-  border: 1px solid #dedfe9;
-  border-top: 0;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-`;

packages/webapp/src/containers/SendMailNotification/index.ts

@@ -1 +1 @@
-export * from './SendMailNotificationForm';
+export * from './MailNotificationForm';

packages/webapp/src/containers/SendMailNotification/utils.ts

@@ -0,0 +1,44 @@
+import { castArray, first } from 'lodash';
+import { transformToForm } from '@/utils';
+
+export const initialMailNotificationValues = {
+  from: [],
+  to: [],
+  subject: '',
+  body: '',
+};
+
+export interface MailNotificationFormValues {
+  from: string[];
+  to: string[];
+  subject: string;
+  body: string;
+}
+
+export const transformMailFormToRequest = (
+  values: MailNotificationFormValues,
+) => {
+  return {
+    ...values,
+    from: first(values.from),
+    to: values.to?.join(', '),
+  };
+};
+
+/**
+ * Transformes the mail options response values to form initial values.
+ * @param {any} mailOptions
+ * @param {MailNotificationFormValues} initialValues
+ * @returns {MailNotificationFormValues}
+ */
+export const transformMailFormToInitialValues = (
+  mailOptions: any,
+  initialValues: MailNotificationFormValues,
+): MailNotificationFormValues => {
+  return {
+    ...initialValues,
+    ...transformToForm(mailOptions, initialValues),
+    from: mailOptions.from ? castArray(mailOptions.from) : [],
+    to: mailOptions.to ? castArray(mailOptions.to) : [],
+  };
+};