src/components/MarkTypeStrategy/DateTime/Input.tsx

@@ -0,0 +1,25 @@
+import { MarkInputProps } from '../MarkStrategy'
+import styles from '../../MarkFormField/style.module.scss'
+import { useEffect, useRef } from 'react'
+
+export const MarkInputDateTime = ({ handler, placeholder }: MarkInputProps) => {
+  const ref = useRef<HTMLInputElement>(null)
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.value = new Date().toISOString().slice(0, 16)
+      if (ref.current.valueAsDate) {
+        handler(ref.current.valueAsDate.toUTCString())
+      }
+    }
+  }, [handler])
+  return (
+    <input
+      type="datetime-local"
+      ref={ref}
+      className={styles.input}
+      placeholder={placeholder}
+      readOnly={true}
+      disabled={true}
+    />
+  )
+}

src/components/MarkTypeStrategy/DateTime/index.tsx

@@ -0,0 +1,7 @@
+import { MarkStrategy } from '../MarkStrategy'
+import { MarkInputDateTime } from './Input'
+
+export const DateTimeStrategy: MarkStrategy = {
+  input: MarkInputDateTime,
+  render: ({ value }) => <>{value}</>
+}

src/components/MarkTypeStrategy/JobTitle/Input.tsx

@@ -0,0 +1,20 @@
+import { useDidMount } from '../../../hooks'
+import { useLocalStorage } from '../../../hooks/useLocalStorage'
+import { MarkInputProps } from '../MarkStrategy'
+import { MarkInputText } from '../Text/Input'
+
+export const MarkInputJobTitle = (props: MarkInputProps) => {
+  const [jobTitle, setjobTitle] = useLocalStorage('mark-jobtitle', '')
+  useDidMount(() => {
+    props.handler(jobTitle)
+  })
+  return MarkInputText({
+    ...props,
+    placeholder: 'Job Title',
+    value: jobTitle,
+    handler: (value) => {
+      setjobTitle(value)
+      props.handler(value)
+    }
+  })
+}

src/components/MarkTypeStrategy/JobTitle/index.tsx

@@ -0,0 +1,7 @@
+import { MarkStrategy } from '../MarkStrategy'
+import { MarkInputJobTitle } from './Input'
+
+export const JobTitleStrategy: MarkStrategy = {
+  input: MarkInputJobTitle,
+  render: ({ value }) => <>{value}</>
+}

src/components/MarkTypeStrategy/MarkStrategy.tsx

@@ -3,6 +3,8 @@ import { CurrentUserMark, Mark } from '../../types/mark'
 import { TextStrategy } from './Text'
 import { SignatureStrategy } from './Signature'
 import { FullNameStrategy } from './FullName'
+import { JobTitleStrategy } from './JobTitle'
+import { DateTimeStrategy } from './DateTime'
 
 export interface MarkInputProps {
   value: string
@@ -30,5 +32,7 @@ export type MarkStrategies = {
 export const MARK_TYPE_CONFIG: MarkStrategies = {
   [MarkType.TEXT]: TextStrategy,
   [MarkType.SIGNATURE]: SignatureStrategy,
-  [MarkType.FULLNAME]: FullNameStrategy
+  [MarkType.FULLNAME]: FullNameStrategy,
+  [MarkType.JOBTITLE]: JobTitleStrategy,
+  [MarkType.DATETIME]: DateTimeStrategy
 }

src/utils/mark.ts

@@ -176,14 +176,12 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
   {
     identifier: MarkType.JOBTITLE,
     icon: faBriefcase,
-    label: 'Job Title',
+    label: 'Job Title'
-    isComingSoon: true
   },
   {
     identifier: MarkType.DATETIME,
     icon: faClock,
-    label: 'Date Time',
+    label: 'Date Time'
-    isComingSoon: true
   },
   {
     identifier: MarkType.NUMBER,