89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import { ComponentProps, useCallback, useState } from 'react'
|
|
import useFetchMock from './hooks/use-fetch-mock'
|
|
import ContactUsModal from '../../modules/support/frontend/js/components/contact-us-modal'
|
|
import fixedHelpSuggestionSearch from '../../modules/support/test/frontend/util/fixed-help-suggestion-search'
|
|
import { ScopeDecorator } from './decorators/scope'
|
|
import OLButton from '@/features/ui/components/ol/ol-button'
|
|
|
|
type ContactUsModalProps = ComponentProps<typeof ContactUsModal>
|
|
|
|
function GenericContactUsModal(args: ContactUsModalProps) {
|
|
useFetchMock(fetchMock => {
|
|
fetchMock.post('/support', { status: 200 }, { delay: 1000 })
|
|
})
|
|
|
|
return (
|
|
<ContactUsModal
|
|
helpSuggestionSearch={fixedHelpSuggestionSearch}
|
|
{...args}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const Generic = (args: ContactUsModalProps) => (
|
|
<GenericContactUsModal {...args} />
|
|
)
|
|
|
|
const ContactUsModalWithRequestError = (args: ContactUsModalProps) => {
|
|
useFetchMock(fetchMock => {
|
|
fetchMock.post('/support', { status: 404 }, { delay: 250 })
|
|
})
|
|
|
|
return (
|
|
<ContactUsModal
|
|
helpSuggestionSearch={fixedHelpSuggestionSearch}
|
|
{...args}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const RequestError = (args: ContactUsModalProps) => (
|
|
<ContactUsModalWithRequestError {...args} />
|
|
)
|
|
|
|
const ContactUsModalWithAcknowledgement = (
|
|
args: Omit<ContactUsModalProps, 'show' | 'handleHide'>
|
|
) => {
|
|
useFetchMock(fetchMock => {
|
|
fetchMock.post('/support', { status: 200 }, { delay: 1000 })
|
|
})
|
|
|
|
const [show, setShow] = useState(false)
|
|
|
|
const hideModal = useCallback((event?: Event) => {
|
|
event?.preventDefault()
|
|
setShow(false)
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
<OLButton onClick={() => setShow(true)}>Contact Us</OLButton>
|
|
<ContactUsModal
|
|
show={show}
|
|
handleHide={hideModal}
|
|
helpSuggestionSearch={fixedHelpSuggestionSearch}
|
|
{...args}
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export const WithAcknowledgement = (args: ContactUsModalProps) => {
|
|
const { show, handleHide, ...rest } = args
|
|
return <ContactUsModalWithAcknowledgement {...rest} />
|
|
}
|
|
|
|
export default {
|
|
title: 'Shared / Modals / Contact Us',
|
|
component: ContactUsModal,
|
|
args: {
|
|
show: true,
|
|
handleHide: () => {},
|
|
autofillProjectUrl: true,
|
|
},
|
|
argTypes: {
|
|
handleHide: { action: 'close modal' },
|
|
},
|
|
decorators: [ScopeDecorator],
|
|
}
|