feat: rich editor component

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

@@ -0,0 +1,63 @@
+// @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/SendMailNotificationForm.tsx

@@ -1,8 +1,15 @@
 // @ts-nocheck
 import { Form, useFormikContext } from 'formik';
-import { FFormGroup, FInputGroup, FMultiSelect } from '@/components';
+import {
+  FFormGroup,
+  FInputGroup,
+  FMultiSelect,
+  FRichEditor,
+  FSwitch,
+  Hint,
+} from '@/components';
 import styled from 'styled-components';
-import { Button, Classes, Intent } from '@blueprintjs/core';
+import { Button, Classes, Intent, Position } from '@blueprintjs/core';
 import { saveInvoke } from '@/utils';
 
 interface SendMailNotificationFormProps {
@@ -24,25 +31,47 @@ export function SendMailNotificationForm({
         <HeaderBox>
           <FFormGroup
             label={'From'}
+            labelInfo={
+              <Hint
+                content={'asdasd asdasd asdsad'}
+                position={Position.BOTTOM_LEFT}
+              />
+            }
             name={'from'}
             inline={true}
             fastField={true}
           >
             <FMultiSelect
-              items={[]}
+              items={[
+                {
+                  text: 'a.bouhuolia@gmail.com',
+                  value: 'a.bouhuolia@gmail.com',
+                },
+              ]}
               name={'from'}
               placeholder=""
               popoverProps={{ minimal: true, fill: true }}
+              tagInputProps={{
+                tagProps: { round: true, minimal: true, large: true },
+              }}
               fill={true}
             />
           </FFormGroup>
 
           <FFormGroup label={'To'} name={'to'} inline={true} fastField={true}>
             <FMultiSelect
-              items={[]}
+              items={[
+                {
+                  text: 'a.bouhuolia@gmail.com',
+                  value: 'a.bouhuolia@gmail.com',
+                },
+              ]}
               name={'to'}
               placeholder=""
               popoverProps={{ minimal: true, fill: true }}
+              tagInputProps={{
+                tagProps: { round: true, minimal: true, large: true },
+              }}
               fill={true}
             />
           </FFormGroup>
@@ -56,6 +85,12 @@ export function SendMailNotificationForm({
             <FInputGroup name={'subject'} fill={true} />
           </FFormGroup>
         </HeaderBox>
+
+        <MailMessageEditor name={'message'} />
+
+        <AttachFormGroup name={'attach_invoice'} inline>
+          <FSwitch name={'attach_invoice'} label={'Attach Invoice'} />
+        </AttachFormGroup>
       </div>
 
       <div className={Classes.DIALOG_FOOTER}>
@@ -82,16 +117,33 @@ export function SendMailNotificationForm({
   );
 }
 
+const AttachFormGroup = styled(FFormGroup)`
+  background: #f8f9fb;
+  margin-top: 0.6rem;
+  padding: 4px 14px;
+  border-radius: 5px;
+  border: 1px solid #dcdcdd;
+`;
+
+const MailMessageEditor = styled(FRichEditor)`
+  padding: 15px;
+  border: 1px solid #dedfe9;
+  border-top: 0;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+`;
+
 const HeaderBox = styled('div')`
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
   border: 1px solid #dddfe9;
-  padding: 15px;
+  border-bottom: 2px solid #eaeaef;
+  padding: 6px 15px;
 
   .bp4-form-group {
     margin: 0;
-    padding-top: 12px;
-    padding-bottom: 12px;
+    padding-top: 8px;
+    padding-bottom: 8px;
 
     &:not(:last-of-type) {
       border-bottom: 1px solid #dddfe9;
@@ -114,5 +166,19 @@ const HeaderBox = styled('div')`
   }
 
   .bp4-input {
+    border-color: transparent;
+    padding: 0;
+
+    &:focus,
+    &.bp4-active {
+      box-shadow: 0 0 0 0;
+    }
+  }
+
+  .bp4-input-ghost {
+    margin-top: 5px;
+  }
+  .bp4-tag-input-values {
+    margin: 0;
   }
 `;