Skip to content

Commit

Permalink
feat: show banner on admin form if webhook is enabled
Browse files Browse the repository at this point in the history
  • Loading branch information
@karrui
karrui committed Aug 16, 2022
1 parent ca45cc6 commit ea922f0
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 81 deletions.
26 changes: 26 additions & 0 deletions frontend/src/features/admin-form/AdminFormCreatePage.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {

import {
createFormBuilderMocks,
getAdminFormCollaborators,
getAdminFormSettings,
getAdminFormSubmissions,
MOCK_FORM_FIELDS_WITH_MYINFO,
MOCK_FORM_LOGICS,
Expand All @@ -33,6 +35,9 @@ const buildMswRoutes = (
delay?: number | 'infinite' | 'real',
) => {
return [
getAdminFormSettings(),
getAdminFormCollaborators(),
getAdminFormSubmissions(),
...createFormBuilderMocks(
{
...overrides,
Expand Down Expand Up @@ -124,3 +129,24 @@ AllFieldsFieldsHiddenByLogic.parameters = {
responseMode: FormResponseMode.Email,
}),
}

export const FormWithWebhook = Template.bind({})
FormWithWebhook.parameters = {
msw: [
getAdminFormSettings({
overrides: {
webhook: {
url: 'some-webhook-url',
isRetryEnabled: false,
},
},
}),
...buildMswRoutes(),
],
}

export const FormWithWebhookMobile = Template.bind({})
FormWithWebhookMobile.parameters = {
...FormWithWebhook.parameters,
...getMobileViewParameters(),
}
178 changes: 97 additions & 81 deletions ...src/features/admin-form/create/builder-and-design/BuilderAndDesignContent/FormBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@ import { useCallback, useMemo } from 'react'
import { Droppable } from 'react-beautiful-dnd'
import { Box, Flex, FlexProps, Skeleton, Stack } from '@chakra-ui/react'

import { Banner } from '~components/Banner'
import Button from '~components/Button'

import { useAdminFormSettings } from '~features/admin-form/settings/queries'
import { getVisibleFieldIds } from '~features/logic/utils'
import { useBgColor } from '~features/public-form/components/PublicFormWrapper'

Expand Down Expand Up @@ -33,6 +35,7 @@ export const FormBuilder = ({
...props
}: FormBuilderProps): JSX.Element => {
const { builderFields, isLoading } = useBuilderFields()
const { data: settings } = useAdminFormSettings()
const { formLogics } = useAdminFormLogic()
const { handleBuilderClick } = useCreatePageSidebar()
const setEditEndPage = useFieldBuilderStore(setToEditEndPageSelector)
Expand All @@ -53,95 +56,108 @@ export const FormBuilder = ({
const bg = useBgColor({ colorTheme: useDesignColorTheme() })

return (
<Flex
mb={0}
flex={1}
bg="neutral.200"
p={{ base: 0, md: '2rem' }}
justify="center"
overflow="auto"
{...props}
>
<Stack
direction="column"
w="100%"
h="fit-content"
spacing={{ base: 0, md: '1.5rem' }}
bg={bg}
<Box w="100%">
{settings?.webhook?.url ? (
<Banner showCloseButton={false}>
Webhooks are enabled on this form. Please ensure the webhook server is
able to handle any field changes.
</Banner>
) : null}
<Flex
mb={0}
flex={1}
bg="neutral.200"
p={{ base: 0, md: '2rem' }}
justify="center"
overflow="auto"
{...props}
>
<StartPageView />
<Flex
flexDir="column"
alignSelf="center"
<Stack
direction="column"
w="100%"
px={{ base: 0, md: '1.5rem', lg: '2.5rem' }}
h="fit-content"
spacing={{ base: 0, md: '1.5rem' }}
bg={bg}
>
<Box
bg="white"
w="100%"
maxW="57rem"
<StartPageView />
<Flex
flexDir="column"
alignSelf="center"
px={{ base: '1.5rem', md: '1.625rem' }}
py={{ base: '1.5rem', md: '2.5rem' }}
w="100%"
px={{ base: 0, md: '1.5rem', lg: '2.5rem' }}
>
{isLoading || !builderFields ? (
<FormBuilderFieldsSkeleton />
) : (
<Droppable droppableId={FIELD_LIST_DROP_ID}>
{(provided, snapshot) =>
builderFields?.length ? (
<Box
pos="relative"
ref={provided.innerRef}
{...provided.droppableProps}
>
<BuilderFields
fields={builderFields}
visibleFieldIds={visibleFieldIds}
isDraggingOver={snapshot.isDraggingOver}
/>
{provided.placeholder}
<BuilderAndDesignPlaceholder
placeholderProps={placeholderProps}
<Box
bg="white"
w="100%"
maxW="57rem"
alignSelf="center"
px={{ base: '1.5rem', md: '1.625rem' }}
py={{ base: '1.5rem', md: '2.5rem' }}
>
{isLoading || !builderFields ? (
<FormBuilderFieldsSkeleton />
) : (
<Droppable droppableId={FIELD_LIST_DROP_ID}>
{(provided, snapshot) =>
builderFields?.length ? (
<Box
pos="relative"
ref={provided.innerRef}
{...provided.droppableProps}
>
<BuilderFields
fields={builderFields}
visibleFieldIds={visibleFieldIds}
isDraggingOver={snapshot.isDraggingOver}
/>
{provided.placeholder}
<BuilderAndDesignPlaceholder
placeholderProps={placeholderProps}
isDraggingOver={snapshot.isDraggingOver}
/>
</Box>
) : (
<EmptyFormPlaceholder
ref={provided.innerRef}
{...provided.droppableProps}
isDraggingOver={snapshot.isDraggingOver}
onClick={handleBuilderClick}
/>
</Box>
) : (
<EmptyFormPlaceholder
ref={provided.innerRef}
{...provided.droppableProps}
isDraggingOver={snapshot.isDraggingOver}
onClick={handleBuilderClick}
/>
)
}
</Droppable>
)}
</Box>
</Flex>
<Flex
justify="center"
w="100%"
pt={{ base: '1rem', md: 0 }}
px={{ base: '1rem', md: '1.5rem', lg: '2.5rem' }}
>
<Skeleton isLoaded={!isLoading} mb="1.5rem" maxW="57rem" width="100%">
<Button
_hover={{ bg: 'primary.200' }}
py="1.5rem"
)
}
</Droppable>
)}
</Box>
</Flex>
<Flex
justify="center"
w="100%"
pt={{ base: '1rem', md: 0 }}
px={{ base: '1rem', md: '1.5rem', lg: '2.5rem' }}
>
<Skeleton
isLoaded={!isLoading}
mb="1.5rem"
maxW="57rem"
width="100%"
variant="outline"
borderColor="secondary.200"
colorScheme="secondary"
height="auto"
onClick={handleEditEndPageClick}
textStyle="subhead-2"
>
Customise Thank you page
</Button>
</Skeleton>
</Flex>
</Stack>
</Flex>
<Button
_hover={{ bg: 'primary.200' }}
py="1.5rem"
width="100%"
variant="outline"
borderColor="secondary.200"
colorScheme="secondary"
height="auto"
onClick={handleEditEndPageClick}
textStyle="subhead-2"
>
Customise Thank you page
</Button>
</Skeleton>
</Flex>
</Stack>
</Flex>
</Box>
)
}

0 comments on commit ea922f0

Please sign in to comment.