Smart Capture Form fields preference added

.changeset/forty-dingos-move.md

@@ -0,0 +1,6 @@
+---
+'mexit': patch
+'mexit-webapp': patch
+---
+
+Smart Capture Preference

apps/extension/src/Components/Form/index.tsx

@@ -1,27 +1,36 @@
 import React, { useEffect, useRef, useState } from 'react'
 
 import { SubmitHandler, useForm } from 'react-hook-form'
+import { useTheme } from 'styled-components'
 
+import { MexIcon } from '@workduck-io/mex-components'
 import { tinykeys } from '@workduck-io/tinykeys'
 
 import { mog, NodeEditorContent } from '@mexit/core'
+import { FlexBetween } from '@mexit/shared'
 
 import { useSaveChanges } from '../../Hooks/useSaveChanges'
 import { useSputlitStore } from '../../Stores/useSputlitStore'
+import { useUserPreferenceStore } from '../../Stores/userPreferenceStore'
 import { FormBuilder } from '../../Types/Form'
 import { formToBlocks } from '../../Utils/getProfileData'
+import { Title } from '../Action/styled'
 import { Dialog } from '../Floating/Dialog'
 import NoteSelector from '../Floating/NoteSelector'
+import { Controls } from '../Screenshot/Screenshot.style'
 import Field from './Field'
-import { StyledForm, StyledRowItem } from './styled'
+import { ExcludeFormFieldsContainer, StyledForm, StyledRowItem, UserPreferedFieldsContainer } from './styled'
 
 interface FormProps {
   config: FormBuilder
+  page: string
 }
 
-const Form: React.FC<FormProps> = ({ config }) => {
+const Form: React.FC<FormProps> = ({ page, config }) => {
   const { register, handleSubmit } = useForm()
   const [data, setData] = useState<any>()
+  const exludedFields = useUserPreferenceStore((s) => s.smartCaptureExcludedFields?.[page])
+
   const [isSaving, setIsSaving] = useState(false)
   const noteSelectorRef = useRef()
   const savingNoteRef = useRef()
@@ -45,11 +54,13 @@ const Form: React.FC<FormProps> = ({ config }) => {
   }
 
   const onNodeSelect = async (nodeId: string) => {
-    const formData = config.map((item) => ({ ...item, value: data?.[item.label] }))
+    const formData = config
+      .filter((i) => !exludedFields?.find((f) => f == i.id))
+      .map((item) => ({ ...item, value: data?.[item.label] }))
+
     const convertToTable = useSputlitStore.getState().smartCaptureSaveType === 'tabular'
 
     const blocks = formToBlocks(formData, convertToTable) as NodeEditorContent
-    // mog('Block are ready to save', { blocks })
 
     try {
       if (blocks) {
@@ -83,16 +94,72 @@ const Form: React.FC<FormProps> = ({ config }) => {
       <div style={{ zIndex: 30 }} id="smart-capture-saving" ref={savingNoteRef} />
       <div style={{ zIndex: 20 }} id="smart-capture" ref={noteSelectorRef} />
       <StyledForm id="wd-mex-smart-capture-form" onSubmit={handleSubmit(onSubmit)}>
-        {config.map((item) => {
+        <UserPreferedFields
+          page={page}
+          fields={config.filter((i) => !exludedFields?.find((f) => f == i.id))}
+          register={register}
+        />
+        <ExludedFormFields
+          page={page}
+          fields={config.filter((i) => exludedFields?.find((f) => f === i.id))}
+          register={register}
+        />
+      </StyledForm>
+    </>
+  )
+}
+
+const ExludedFormFields = ({ page, register, fields }) => {
+  const removeFromExcludedFields = useUserPreferenceStore((s) => s.removeExcludedSmartCaptureField)
+  const theme = useTheme()
+
+  const onRemoveField = (id: string) => {
+    removeFromExcludedFields(page, id)
+  }
+
+  if (fields?.length > 0)
+    return (
+      <ExcludeFormFieldsContainer>
+        <Controls>
+          <MexIcon icon="ph:textbox-fill" height={20} width={20} color={theme.colors.primary} />
+          <Title>Additional Fields</Title>
+        </Controls>
+        {fields.map((field) => {
           return (
             <StyledRowItem>
-              <label>{item.label}</label>
-              <Field item={item} register={register} />
+              <FlexBetween>
+                <label>{field.label}</label>
+                <MexIcon icon="akar-icons:plus" onClick={() => onRemoveField(field.id)} />
+              </FlexBetween>
+              <Field item={field} register={register} />
             </StyledRowItem>
           )
         })}
-      </StyledForm>
-    </>
+      </ExcludeFormFieldsContainer>
+    )
+}
+
+const UserPreferedFields = ({ page, fields, register }) => {
+  const excludeFieldFromForm = useUserPreferenceStore((s) => s.excludeSmartCaptureField)
+
+  const onAddField = (id: string) => {
+    excludeFieldFromForm(page, id)
+  }
+
+  return (
+    <UserPreferedFieldsContainer>
+      {fields.map((field) => {
+        return (
+          <StyledRowItem>
+            <FlexBetween>
+              <label>{field.label}</label>
+              <MexIcon icon="clarity:window-close-line" onClick={() => onAddField(field.id)} />
+            </FlexBetween>
+            <Field item={field} register={register} />
+          </StyledRowItem>
+        )
+      })}
+    </UserPreferedFieldsContainer>
   )
 }
 

apps/extension/src/Components/Form/styled.tsx

@@ -2,6 +2,8 @@ import styled from 'styled-components'
 
 import { TextAreaBlock } from '@mexit/shared'
 
+import { Controls } from '../Screenshot/Screenshot.style'
+
 export const StyledForm = styled.form`
   display: flex;
   flex-direction: column;
@@ -21,3 +23,15 @@ export const StyledRowItem = styled.div`
 export const StyledTextAreaBlock = styled(TextAreaBlock)`
   margin-top: ${({ theme }) => theme.spacing.tiny} !important;
 `
+
+export const UserPreferedFieldsContainer = styled.section`
+  margin-bottom: ${({ theme }) => theme.spacing.medium};
+`
+
+export const ExcludeFormFieldsContainer = styled.section`
+  border-top: 2px solid ${({ theme }) => theme.colors.gray[8]};
+
+  ${Controls} {
+    margin: ${({ theme }) => theme.spacing.medium} 0;
+  }
+`

apps/extension/src/Components/Renderers/SmartCapture/index.tsx

@@ -20,7 +20,7 @@ const SmartCapture = () => {
   return (
     <SmartCaptureContainer>
       <SourceHeader title={`${data.page} Profile`} source={data.source} />
-      <Form config={data.data} />
+      <Form page={data.page} config={data.data} />
     </SmartCaptureContainer>
   )
 }