(BSR)[PRO] refactor: move Callout to ui kit and move implementations …

…where they are used
pass-culture · Nov 25, 2024 · 3968c10 · 3968c10
1 parent 595cc0e
commit 3968c10
Show file tree

Hide file tree

Showing 58 changed files with 94 additions and 102 deletions.
diff --git a/pro/src/components/AddressManual/AddressManual.tsx b/pro/src/components/AddressManual/AddressManual.tsx
@@ -2,11 +2,11 @@ import { useField, useFormikContext } from 'formik'
 import React from 'react'
 
 import { getCoordsType, parseDms } from 'commons/utils/coords'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 
 import styles from './AddressManual.module.scss'

diff --git a/pro/src/components/BannerPublicApi/BannerPublicApi.tsx b/pro/src/components/BannerPublicApi/BannerPublicApi.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import logoPassCultureIcon from 'icons/logo-pass-culture.svg'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import styles from './BannerPublicApi.module.scss'

diff --git a/pro/src/components/BannerRGS/BannerRGS.tsx b/pro/src/components/BannerRGS/BannerRGS.tsx
@@ -1,6 +1,4 @@
-import React from 'react'
-
-import { Callout } from 'components/Callout/Callout'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 interface Props {
   closable?: boolean

diff --git a/pro/src/components/FormLayout/FormLayoutDescription.tsx b/pro/src/components/FormLayout/FormLayoutDescription.tsx
@@ -1,7 +1,7 @@
 import cn from 'classnames'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Link } from 'ui-kit/LinkNodes/LinkNodes'
 
 import style from './FormLayout.module.scss'

diff --git a/pro/src/components/IndividualOffer/DetailsSummary/DetailsSummary.tsx b/pro/src/components/IndividualOffer/DetailsSummary/DetailsSummary.tsx
@@ -8,8 +8,6 @@ import { OFFER_WIZARD_MODE } from 'commons/core/Offers/constants'
 import { getIndividualOfferUrl } from 'commons/core/Offers/utils/getIndividualOfferUrl'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useOfferWizardMode } from 'commons/hooks/useOfferWizardMode'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { OFFER_WIZARD_STEP_IDS } from 'components/IndividualOfferNavigation/constants'
 import { OfferAppPreview } from 'components/OfferAppPreview/OfferAppPreview'
 import { SummaryAside } from 'components/SummaryLayout/SummaryAside'
@@ -23,6 +21,8 @@ import { SummarySection } from 'components/SummaryLayout/SummarySection'
 import { SummarySubSection } from 'components/SummaryLayout/SummarySubSection'
 import phoneStrokeIcon from 'icons/stroke-phone.svg'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { DisplayOfferInAppLink } from '../SummaryScreen/DisplayOfferInAppLink/DisplayOfferInAppLink'

diff --git a/...rc/components/IndividualOffer/IndivualOfferLayout/OfferStatusBanner/OfferStatusBanner.tsx b/...rc/components/IndividualOffer/IndivualOfferLayout/OfferStatusBanner/OfferStatusBanner.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 import { OfferStatus } from 'apiClient/v1'
 import { CGU_URL } from 'commons/utils/config'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import styles from './OfferStatusBanner.module.scss'
 interface OfferStatusBannerProps {

diff --git a/pro/src/components/IndividualOffer/SummaryScreen/SummaryScreen.tsx b/pro/src/components/IndividualOffer/SummaryScreen/SummaryScreen.tsx
@@ -12,7 +12,6 @@ import { getIndividualOfferUrl } from 'commons/core/Offers/utils/getIndividualOf
 import { useNotification } from 'commons/hooks/useNotification'
 import { useOfferWizardMode } from 'commons/hooks/useOfferWizardMode'
 import { getOfferConditionalFields } from 'commons/utils/getOfferConditionalFields'
-import { Callout } from 'components/Callout/Callout'
 import { OFFER_WIZARD_STEP_IDS } from 'components/IndividualOfferNavigation/constants'
 import { OfferAppPreview } from 'components/OfferAppPreview/OfferAppPreview'
 import { SummaryAside } from 'components/SummaryLayout/SummaryAside'
@@ -22,6 +21,7 @@ import phoneStrokeIcon from 'icons/stroke-phone.svg'
 import { ActionBar } from 'pages/IndividualOffer/components/ActionBar/ActionBar'
 import { RedirectToBankAccountDialog } from 'pages/Offers/components/IndividualOffersScreen/RedirectToBankAccountDialog'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { serializeDateTimeToUTCFromLocalDepartment } from '../StocksEventEdition/serializers'

diff --git a/.../components/IndividualOffer/SynchronisedProviderInfos/SynchronizedProviderInformation.tsx b/.../components/IndividualOffer/SynchronisedProviderInfos/SynchronizedProviderInformation.tsx
@@ -1,6 +1,6 @@
 import { getProviderInfo } from 'commons/core/Providers/utils/getProviderInfo'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import styles from './SynchronizedProviderInformation.module.scss'
 

diff --git a/...dualOffer/UsefulInformationScreen/UsefulInformationForm/components/OfferRefundWarning.tsx b/...dualOffer/UsefulInformationScreen/UsefulInformationForm/components/OfferRefundWarning.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 export const OfferRefundWarning = () => {
   return (

diff --git a/...dualOffer/UsefulInformationScreen/UsefulInformationForm/components/WithdrawalReminder.tsx b/...dualOffer/UsefulInformationScreen/UsefulInformationForm/components/WithdrawalReminder.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CGU_URL } from 'commons/utils/config'
-import { Callout } from 'components/Callout/Callout'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 export const WithdrawalReminder = () => {
   return (

diff --git a/pro/src/components/SignupJourneyForm/Offerer/BannerInvisibleSiren/BannerInvisibleSiren.tsx b/pro/src/components/SignupJourneyForm/Offerer/BannerInvisibleSiren/BannerInvisibleSiren.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import styles from './BannerInvisibleSiren.module.scss'
 

diff --git a/pro/src/components/SignupJourneyForm/Offerer/Offerer.tsx b/pro/src/components/SignupJourneyForm/Offerer/Offerer.tsx
@@ -16,12 +16,12 @@ import {
   GetSiretDataResponse,
 } from 'commons/core/Venue/getSiretData'
 import { useNotification } from 'commons/hooks/useNotification'
-import { Callout } from 'components/Callout/Callout'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { OnboardingFormNavigationAction } from 'components/SignupJourneyFormLayout/constants'
 import { SIGNUP_JOURNEY_STEP_IDS } from 'components/SignupJourneyStepper/constants'
 import { MAYBE_APP_USER_APE_CODE } from 'pages/Signup/SignupContainer/constants'
 import { MaybeAppUserDialog } from 'pages/Signup/SignupContainer/MaybeAppUserDialog/MaybeAppUserDialog'
+import { Callout } from 'ui-kit/Callout/Callout'
 
 import { ActionBar } from '../ActionBar/ActionBar'
 

diff --git a/pro/src/components/SignupJourneyForm/Validation/Validation.tsx b/pro/src/components/SignupJourneyForm/Validation/Validation.tsx
@@ -19,13 +19,13 @@ import { useInitReCaptcha } from 'commons/hooks/useInitReCaptcha'
 import { useNotification } from 'commons/hooks/useNotification'
 import { updateSelectedOffererId, updateUser } from 'commons/store/user/reducer'
 import { getReCaptchaToken } from 'commons/utils/recaptcha'
-import { Callout } from 'components/Callout/Callout'
 import { DEFAULT_OFFERER_FORM_VALUES } from 'components/SignupJourneyForm/Offerer/constants'
 import { OnboardingFormNavigationAction } from 'components/SignupJourneyFormLayout/constants'
 import { SIGNUP_JOURNEY_STEP_IDS } from 'components/SignupJourneyStepper/constants'
 import fullEditIcon from 'icons/full-edit.svg'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant, IconPositionEnum } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 
 import { ActionBar } from '../ActionBar/ActionBar'

diff --git a/...me/app/components/OfferInfos/AdageOffer/AdageOfferPartnerPanel/AdageOfferPartnerPanel.tsx b/...me/app/components/OfferInfos/AdageOffer/AdageOfferPartnerPanel/AdageOfferPartnerPanel.tsx
@@ -3,13 +3,13 @@ import {
   CollectiveOfferTemplateResponseModel,
 } from 'apiClient/adage'
 import { getHumanizeRelativeDistance } from 'commons/utils/getDistance'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import fullLinkIcon from 'icons/full-link.svg'
 import fullMailIcon from 'icons/full-mail.svg'
 import strokeInstitutionIcon from 'icons/stroke-institution.svg'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { ContactButton } from '../../../OffersInstantSearch/OffersSearch/Offers/ContactButton/ContactButton'

diff --git a/pro/src/pages/AdageIframe/app/components/OffersForInstitution/OffersForMyInstitution.tsx b/pro/src/pages/AdageIframe/app/components/OffersForInstitution/OffersForMyInstitution.tsx
@@ -2,10 +2,10 @@ import useSWR from 'swr'
 
 import { apiAdage } from 'apiClient/api'
 import { GET_COLLECTIVE_OFFERS_FOR_INSTITUTION_QUERY_KEY } from 'commons/config/swrQueryKeys'
-import { Callout } from 'components/Callout/Callout'
 import strokeMyInstitution from 'icons/stroke-my-institution.svg'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import { AdageOfferListCard } from '../OffersInstantSearch/OffersSearch/Offers/AdageOfferListCard/AdageOfferListCard'

diff --git a/...rsInstantSearch/OffersSearch/Offers/ContactButton/RequestFormDialog/RequestFormDialog.tsx b/...rsInstantSearch/OffersSearch/Offers/ContactButton/RequestFormDialog/RequestFormDialog.tsx
@@ -4,12 +4,12 @@ import { AdageFrontRoles } from 'apiClient/adage'
 import { apiAdage } from 'apiClient/api'
 import { useNotification } from 'commons/hooks/useNotification'
 import { isDateValid } from 'commons/utils/date'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { Dialog } from 'components/Dialog/Dialog/Dialog'
 import { MandatoryInfo } from 'components/FormLayout/FormLayoutMandatoryInfo'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import { createCollectiveRequestPayload } from './createCollectiveRequestPayload'
 import { DefaultFormContact } from './DefaultFormContact'

diff --git a/.../CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.tsx b/.../CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormDates/FormDates.tsx
@@ -4,9 +4,9 @@ import { ChangeEvent } from 'react'
 import { OfferEducationalFormValues } from 'commons/core/OfferEducational/types'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { isDateValid } from 'commons/utils/date'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { DatePicker } from 'ui-kit/form/DatePicker/DatePicker'
 import { RadioGroup } from 'ui-kit/form/RadioGroup/RadioGroup'
 import { TimePicker } from 'ui-kit/form/TimePicker/TimePicker'

diff --git a/.../CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormVenue/FormVenue.tsx b/.../CollectiveOffer/components/OfferEducational/OfferEducationalForm/FormVenue/FormVenue.tsx
@@ -14,9 +14,9 @@ import {
 import { applyVenueDefaultsToFormValues } from 'commons/core/OfferEducational/utils/applyVenueDefaultsToFormValues'
 import { SelectOption } from 'commons/custom_types/form'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Select } from 'ui-kit/form/Select/Select'
 
 import { STRUCTURE_LABEL, VENUE_LABEL } from '../../constants/labels'

diff --git a/...r/CollectiveOfferConfirmation/CollectiveOfferConfirmation/CollectiveOfferConfirmation.tsx b/...r/CollectiveOfferConfirmation/CollectiveOfferConfirmation/CollectiveOfferConfirmation.tsx
@@ -2,11 +2,11 @@ import cn from 'classnames'
 import React from 'react'
 
 import { CollectiveOfferStatus } from 'apiClient/v1'
-import { Callout } from 'components/Callout/Callout'
 import fullValidateIcon from 'icons/full-validate.svg'
 import fullWaitIcon from 'icons/full-wait.svg'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { SvgIcon } from 'ui-kit/SvgIcon/SvgIcon'
 
 import styles from './CollectiveOfferConfirmation.module.scss'

diff --git a/...tiveOffer/CollectiveOfferStock/components/OfferEducationalStock/OfferEducationalStock.tsx b/...tiveOffer/CollectiveOfferStock/components/OfferEducationalStock/OfferEducationalStock.tsx
@@ -21,15 +21,15 @@ import { NBSP } from 'commons/core/shared/constants'
 import { isDateValid } from 'commons/utils/date'
 import { ActionsBarSticky } from 'components/ActionsBarSticky/ActionsBarSticky'
 import { BannerPublicApi } from 'components/BannerPublicApi/BannerPublicApi'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { OfferEducationalActions } from 'components/OfferEducationalActions/OfferEducationalActions'
 import { RouteLeavingGuardCollectiveOfferCreation } from 'components/RouteLeavingGuardCollectiveOfferCreation/RouteLeavingGuardCollectiveOfferCreation'
 import { ScrollToFirstErrorAfterSubmit } from 'components/ScrollToFirstErrorAfterSubmit/ScrollToFirstErrorAfterSubmit'
 import { Button } from 'ui-kit/Button/Button'
 import { ButtonLink } from 'ui-kit/Button/ButtonLink'
 import { ButtonVariant } from 'ui-kit/Button/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { DatePicker } from 'ui-kit/form/DatePicker/DatePicker'
 import { TextArea } from 'ui-kit/form/TextArea/TextArea'
 

diff --git a/pro/src/pages/Desk/Desk.tsx b/pro/src/pages/Desk/Desk.tsx
@@ -5,8 +5,8 @@ import { apiContremarque } from 'apiClient/api'
 import { isErrorAPIError } from 'apiClient/helpers'
 import { GetBookingResponse } from 'apiClient/v2'
 import { Layout } from 'app/App/layout/Layout'
-import { Callout } from 'components/Callout/Callout'
 import { Button } from 'ui-kit/Button/Button'
+import { Callout } from 'ui-kit/Callout/Callout'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'
 
 import { BookingDetails } from './BookingDetails'

diff --git a/pro/src/pages/Homepage/Homepage.tsx b/pro/src/pages/Homepage/Homepage.tsx
@@ -13,13 +13,13 @@ import {
 import { hasStatusCode } from 'commons/core/OfferEducational/utils/hasStatusCode'
 import { selectCurrentOffererId } from 'commons/store/user/selectors'
 import { sortByLabel } from 'commons/utils/strings'
-import { AddBankAccountCallout } from 'components/Callout/AddBankAccountCallout'
-import { BankAccountHasPendingCorrectionCallout } from 'components/Callout/BankAccountHasPendingCorrectionCallout'
-import { LinkVenueCallout } from 'components/Callout/LinkVenueCallout'
 import { Newsletter } from 'components/Newsletter/Newsletter'
+import { AddBankAccountCallout } from 'pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout'
 import { HTTP_STATUS } from 'repository/pcapi/pcapiClient'
 import { Spinner } from 'ui-kit/Spinner/Spinner'
 
+import { BankAccountHasPendingCorrectionCallout } from './components/BankAccountHasPendingCorrectionCallout/BankAccountHasPendingCorrectionCallout'
+import { LinkVenueCallout } from './components/LinkVenueCallout/LinkVenueCallout'
 import { OffererBanners } from './components/Offerers/components/OffererBanners/OffererBanners'
 import {
   getPhysicalVenuesFromOfferer,

diff --git a/.../__specs__/AddBankAccountCallout.spec.tsx → ...untCallout/AddBankAccountCallout.spec.tsx b/.../__specs__/AddBankAccountCallout.spec.tsx → ...untCallout/AddBankAccountCallout.spec.tsx
@@ -6,7 +6,7 @@ import * as useAnalytics from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { defaultGetOffererResponseModel } from 'commons/utils/factories/individualApiFactories'
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
-import { AddBankAccountCallout } from 'components/Callout/AddBankAccountCallout'
+import { AddBankAccountCallout } from 'pages/Homepage/components/AddBankAccountCallout/AddBankAccountCallout'
 
 const mockLogEvent = vi.fn()
 

diff --git a/...ponents/Callout/AddBankAccountCallout.tsx → ...kAccountCallout/AddBankAccountCallout.tsx b/...ponents/Callout/AddBankAccountCallout.tsx → ...kAccountCallout/AddBankAccountCallout.tsx
@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom'
 import { GetOffererResponseModel } from 'apiClient/v1'
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 interface AddBankAccountCalloutProps {
   offerer?: GetOffererResponseModel | null

diff --git a/...countHasPendingCorrectionCallout.spec.tsx → ...countHasPendingCorrectionCallout.spec.tsx b/...countHasPendingCorrectionCallout.spec.tsx → ...countHasPendingCorrectionCallout.spec.tsx
@@ -1,15 +1,15 @@
 import { screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import React from 'react'
 
 import * as useAnalytics from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { defaultGetOffererResponseModel } from 'commons/utils/factories/individualApiFactories'
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
+
 import {
-  BankAccountHasPendingCorrectionCallout,
   BankAccountHasPendingCorrectionCalloutProps,
-} from 'components/Callout/BankAccountHasPendingCorrectionCallout'
+  BankAccountHasPendingCorrectionCallout,
+} from './BankAccountHasPendingCorrectionCallout'
 
 const mockLogEvent = vi.fn()
 

diff --git a/...ankAccountHasPendingCorrectionCallout.tsx → ...ankAccountHasPendingCorrectionCallout.tsx b/...ankAccountHasPendingCorrectionCallout.tsx → ...ankAccountHasPendingCorrectionCallout.tsx
@@ -3,8 +3,8 @@ import { useLocation } from 'react-router-dom'
 import { GetOffererResponseModel } from 'apiClient/v1'
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 export interface BankAccountHasPendingCorrectionCalloutProps {
   offerer?: GetOffererResponseModel | null

diff --git a/...llout/__specs__/LinkVenueCallout.spec.tsx → ...inkVenueCallout/LinkVenueCallout.spec.tsx b/...llout/__specs__/LinkVenueCallout.spec.tsx → ...inkVenueCallout/LinkVenueCallout.spec.tsx
@@ -1,15 +1,12 @@
 import { screen } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import React from 'react'
 
 import * as useAnalytics from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { defaultGetOffererResponseModel } from 'commons/utils/factories/individualApiFactories'
 import { renderWithProviders } from 'commons/utils/renderWithProviders'
-import {
-  LinkVenueCallout,
-  LinkVenueCalloutProps,
-} from 'components/Callout/LinkVenueCallout'
+
+import { LinkVenueCalloutProps, LinkVenueCallout } from './LinkVenueCallout'
 
 const mockLogEvent = vi.fn()
 

diff --git a/...c/components/Callout/LinkVenueCallout.tsx → ...nts/LinkVenueCallout/LinkVenueCallout.tsx b/...c/components/Callout/LinkVenueCallout.tsx → ...nts/LinkVenueCallout/LinkVenueCallout.tsx
@@ -4,8 +4,8 @@ import { GetOffererResponseModel } from 'apiClient/v1'
 import { useAnalytics } from 'app/App/analytics/firebase'
 import { BankAccountEvents } from 'commons/core/FirebaseEvents/constants'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 export interface LinkVenueCalloutProps {
   offerer?: GetOffererResponseModel | null

diff --git a/pro/src/pages/Homepage/components/Offerers/components/OffererBanners/OffererBanners.tsx b/pro/src/pages/Homepage/components/Offerers/components/OffererBanners/OffererBanners.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 import { GetOffererResponseModel } from 'apiClient/v1'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 
 import { hasOffererAtLeastOnePhysicalVenue } from '../VenueList/venueUtils'
 

diff --git a/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsForm.tsx b/pro/src/pages/IndividualOffer/IndividualOfferDetails/components/DetailsForm/DetailsForm.tsx
@@ -16,8 +16,6 @@ import { IndividualOfferImage } from 'commons/core/Offers/types'
 import { useActiveFeature } from 'commons/hooks/useActiveFeature'
 import { useSuggestedSubcategoriesAbTest } from 'commons/hooks/useSuggestedSubcategoriesAbTest'
 import { selectCurrentOffererId } from 'commons/store/user/selectors'
-import { Callout } from 'components/Callout/Callout'
-import { CalloutVariant } from 'components/Callout/types'
 import { FormLayout } from 'components/FormLayout/FormLayout'
 import { OnImageUploadArgs } from 'components/ImageUploader/ButtonImageEdit/ModalImageEdit/ModalImageEdit'
 import fullMoreIcon from 'icons/full-more.svg'
@@ -27,6 +25,8 @@ import {
   buildVenueOptions,
   isSubCategoryCD,
 } from 'pages/IndividualOffer/IndividualOfferDetails/commons/utils'
+import { Callout } from 'ui-kit/Callout/Callout'
+import { CalloutVariant } from 'ui-kit/Callout/types'
 import { Select } from 'ui-kit/form/Select/Select'
 import { TextArea } from 'ui-kit/form/TextArea/TextArea'
 import { TextInput } from 'ui-kit/form/TextInput/TextInput'