Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: mfb v1.1 accept-deny re-prompt #7959

Draft
wants to merge 3 commits into
base: develop
Choose a base branch
from
+187 −71
Draft

feat: mfb v1.1 accept-deny re-prompt #7959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13d2bd3
feat: implement search functionality
kevin9foong Nov 29, 2024
94b1c79
feat: add mfb button beside search bar
kevin9foong Nov 29, 2024
6187c37
fix: disable support for mfb for mobile
kevin9foong Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 63 additions & 3 deletions ...form/create/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/FieldListDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,24 @@
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { BiSearch, BiSolidMagicWand } from 'react-icons/bi'
import {
Box,
Button,
Divider,
Flex,
Icon,
Input,
InputGroup,
InputLeftElement,
TabList,
TabPanel,
TabPanels,
Tabs,
Text,
Tooltip,
} from '@chakra-ui/react'

import { useIsMobile } from '~hooks/useIsMobile'
import { Tab } from '~components/Tabs'

import { useCreatePageSidebar } from '~features/admin-form/create/common/CreatePageSidebarContext'
Expand All @@ -24,10 +33,52 @@ import {
PaymentsInputPanel,
} from './field-panels'

const MagicFormBuilderButton = ({ ...styleProps }) => {
const isMobile = useIsMobile()
return !isMobile ? (
<Tooltip openDelay={800} hasArrow label="Create fields with AI">
<Button
padding="0"
backgroundColor="primary.200"
_hover={{
backgroundColor: 'primary.300',
}}
borderWidth={0}
{...styleProps}
>
<Icon as={BiSolidMagicWand} color="primary.500" fontSize="1.5rem" />
</Button>
</Tooltip>
) : null
}

const FieldSearchBar = ({
searchValue,
onChange,
}: {
searchValue: string
onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}) => (
<>
<InputGroup>
<InputLeftElement>
<Icon as={BiSearch} color="secondary.500" fontSize="1.25rem" />
</InputLeftElement>
<Input
value={searchValue}
onChange={onChange}
placeholder="Search fields"
/>
<MagicFormBuilderButton ml="0.5rem" />
</InputGroup>
</>
)

export const FieldListDrawer = (): JSX.Element => {
const { t } = useTranslation()
const { fieldListTabIndex, setFieldListTabIndex } = useCreatePageSidebar()
const { isLoading } = useCreateTabForm()
const [searchValue, setSearchValue] = useState('')

const tabsDataList = [
{
Expand All @@ -51,7 +102,12 @@ export const FieldListDrawer = (): JSX.Element => {
isDisabled: isLoading,
key: FieldListTabIndex.Payments,
},
].filter((tab) => !tab.isHidden)
].filter((tab) => !tab.isHidden) as {
header: string
component: (props: { searchValue?: string }) => JSX.Element
isDisabled: boolean
key: FieldListTabIndex
}[]

return (
<Tabs
Expand All @@ -70,7 +126,11 @@ export const FieldListDrawer = (): JSX.Element => {
</Text>
<CreatePageDrawerCloseButton />
</Flex>
<TabList mx="-0.25rem" w="100%">
<FieldSearchBar
searchValue={searchValue}
onChange={(val) => setSearchValue(val.target.value)}
/>
<TabList mt="0.5rem" mx="-0.25rem" w="100%">
{tabsDataList.map((tab) => (
<Tab key={tab.key} isDisabled={tab.isDisabled}>
{tab.header}
Expand All @@ -82,7 +142,7 @@ export const FieldListDrawer = (): JSX.Element => {
<TabPanels pb="1rem" flex={1} overflowY="auto">
{tabsDataList.map((tab) => (
<TabPanel key={tab.key}>
<tab.component />
<tab.component searchValue={searchValue} />
</TabPanel>
))}
</TabPanels>
Expand Down
36 changes: 23 additions & 13 deletions ...uilder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/BasicFieldPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,46 @@
import { useMemo } from 'react'
import { Box } from '@chakra-ui/react'
import { Droppable } from '@hello-pangea/dnd'

import {
BASIC_FIELDS_ORDERED,
CREATE_FIELD_DROP_ID,
} from '~features/admin-form/create/builder-and-design/constants'
import { BASICFIELD_TO_DRAWER_META } from '~features/admin-form/create/constants'

import { useCreateTabForm } from '../../../../builder-and-design/useCreateTabForm'
import { DraggableBasicFieldListOption } from '../FieldListOption'

import { FieldSection } from './FieldSection'

export const BasicFieldPanel = () => {
export const BasicFieldPanel = ({ searchValue }: { searchValue: string }) => {
const { isLoading } = useCreateTabForm()

const filteredCreateBasicFields = useMemo(() => {
return BASIC_FIELDS_ORDERED.filter((fieldType) => {
const meta = BASICFIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])

return (
<Droppable isDropDisabled droppableId={CREATE_FIELD_DROP_ID}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
<FieldSection>
{BASIC_FIELDS_ORDERED.map((fieldType, index) => {
const shouldDisableField = isLoading

return (
<DraggableBasicFieldListOption
index={index}
isDisabled={shouldDisableField}
key={index}
fieldType={fieldType}
/>
)
})}
<FieldSection label="Basic">
{filteredCreateBasicFields.map((fieldType, index) => {
const shouldDisableField = isLoading
return (
<DraggableBasicFieldListOption
index={index}
isDisabled={shouldDisableField}
key={index}
fieldType={fieldType}
/>
)
})}
</FieldSection>
<Box display="none">{provided.placeholder}</Box>
</FieldSection>
</Box>
Expand Down
156 changes: 101 additions & 55 deletions ...te/builder-and-design/BuilderAndDesignDrawer/FieldListDrawer/field-panels/MyInfoPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
CREATE_MYINFO_PERSONAL_DROP_ID,
CREATE_MYINFO_PERSONAL_FIELDS_ORDERED,
} from '~features/admin-form/create/builder-and-design/constants'
import { MYINFO_FIELD_TO_DRAWER_META } from '~features/admin-form/create/constants'
import { isMyInfo } from '~features/myinfo/utils'
import { useUser } from '~features/user/queries'

Expand Down Expand Up @@ -70,7 +71,7 @@ const SGID_SUPPORTED_V2 = [
MyInfoAttribute.DivorceDate,
]

export const MyInfoFieldPanel = () => {
export const MyInfoFieldPanel = ({ searchValue }: { searchValue: string }) => {
const { data: form, isLoading } = useCreateTabForm()

const { user } = useUser()
Expand Down Expand Up @@ -125,75 +126,118 @@ export const MyInfoFieldPanel = () => {
[form, isDisabled, sgIDUnSupported],
)

const filteredCreateMyInfoPersonalFields = useMemo(() => {
return CREATE_MYINFO_PERSONAL_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])

const filteredCreateMyInfoContactFields = useMemo(() => {
return CREATE_MYINFO_CONTACT_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])

const filteredCreateMyInfoParticularsFields = useMemo(() => {
return CREATE_MYINFO_PARTICULARS_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])

const filteredCreateMyInfoMarriageFields = useMemo(() => {
return CREATE_MYINFO_MARRIAGE_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])

const filteredCreateMyInfoChildrenFields = useMemo(() => {
return CREATE_MYINFO_CHILDREN_FIELDS_ORDERED.filter((fieldType) => {
const meta = MYINFO_FIELD_TO_DRAWER_META[fieldType]
return meta.label.toLowerCase().includes(searchValue.toLowerCase())
})
}, [searchValue])

return (
<>
<MyInfoMessage />
<Droppable isDropDisabled droppableId={CREATE_MYINFO_PERSONAL_DROP_ID}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
<FieldSection label="Personal">
{CREATE_MYINFO_PERSONAL_FIELDS_ORDERED.map((fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
))}
</FieldSection>
{filteredCreateMyInfoPersonalFields.length > 0 && (
<FieldSection label="Personal">
{filteredCreateMyInfoPersonalFields.map((fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
))}
</FieldSection>
)}
<Box display="none">{provided.placeholder}</Box>
</Box>
)}
</Droppable>
<Droppable isDropDisabled droppableId={CREATE_MYINFO_CONTACT_DROP_ID}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
<FieldSection label="Contact">
{CREATE_MYINFO_CONTACT_FIELDS_ORDERED.map((fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
))}
</FieldSection>
{filteredCreateMyInfoContactFields.length > 0 && (
<FieldSection label="Contact">
{filteredCreateMyInfoContactFields.map((fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
))}
</FieldSection>
)}
<Box display="none">{provided.placeholder}</Box>
</Box>
)}
</Droppable>
<Droppable isDropDisabled droppableId={CREATE_MYINFO_PARTICULARS_DROP_ID}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
<FieldSection label="Particulars">
{CREATE_MYINFO_PARTICULARS_FIELDS_ORDERED.map(
(fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
),
)}
</FieldSection>
{filteredCreateMyInfoParticularsFields.length > 0 && (
<FieldSection label="Particulars">
{filteredCreateMyInfoParticularsFields.map(
(fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
),
)}
</FieldSection>
)}
<Box display="none">{provided.placeholder}</Box>
</Box>
)}
</Droppable>
<Droppable isDropDisabled droppableId={CREATE_MYINFO_MARRIAGE_DROP_ID}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
<FieldSection label="Family (Marriage)">
{CREATE_MYINFO_MARRIAGE_FIELDS_ORDERED.map((fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
))}
</FieldSection>
{filteredCreateMyInfoMarriageFields.length > 0 && (
<FieldSection label="Family (Marriage)">
{filteredCreateMyInfoMarriageFields.map((fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
))}
</FieldSection>
)}
<Box display="none">{provided.placeholder}</Box>
</Box>
)}
Expand All @@ -203,18 +247,20 @@ export const MyInfoFieldPanel = () => {
<Droppable isDropDisabled droppableId={CREATE_MYINFO_CHILDREN_DROP_ID}>
{(provided) => (
<Box ref={provided.innerRef} {...provided.droppableProps}>
<FieldSection label="Family (Children)">
{CREATE_MYINFO_CHILDREN_FIELDS_ORDERED.map(
(fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
),
)}
</FieldSection>
{filteredCreateMyInfoChildrenFields.length > 0 && (
<FieldSection label="Family (Children)">
{filteredCreateMyInfoChildrenFields.map(
(fieldType, index) => (
<DraggableMyInfoFieldListOption
index={index}
isDisabled={isDisabledCheck(fieldType)}
key={index}
fieldType={fieldType}
/>
),
)}
</FieldSection>
)}
<Box display="none">{provided.placeholder}</Box>
</Box>
)}
Expand Down
Loading