Merge branch 'develop' into feature/2591/popup-with-my-offers

src/components/complete-profile/CompleteProfileBlock.tsx

@@ -24,6 +24,9 @@ import { styles } from '~/components/complete-profile/CompleteProfileBlock.style
 import useAxios from '~/hooks/use-axios'
 import { OfferService } from '~/services/offer-service'
 import { defaultResponse } from '~/pages/my-offers/MyOffers.constants'
+import { useDrawer } from '~/hooks/use-drawer'
+import AppDrawer from '~/components/app-drawer/AppDrawer'
+import CreateOffer from '~/containers/offer-page/create-offer/CreateOffer'
 
 interface CompleteProfileBlockProps {
   profileItems: ProfileItemType[]
@@ -42,6 +45,9 @@ const CompleteProfileBlock: FC<CompleteProfileBlockProps> = ({
   const homePage = useMatch(guestRoutes[userRole as UserRole].path)
   const [isOpen, setIsOpen] = useState(false)
 
+  const { openDrawer, closeDrawer, isOpen: isDrawerOpen } = useDrawer()
+  const [isOfferCreated, setIsOfferCreated] = useState(false)
+
   useEffect(() => {
     if (openAccordion) {
       setIsOpen(true)
@@ -56,11 +62,17 @@ const CompleteProfileBlock: FC<CompleteProfileBlockProps> = ({
     [userId]
   )
 
-  const { response } = useAxios({
+  const { response, fetchData } = useAxios({
     service: getMyOffers,
     defaultResponse
   })
 
+  useEffect(() => {
+    if (isOfferCreated) {
+      void fetchData()
+    }
+  }, [isOfferCreated, fetchData])
+
   const checkIfHasNonEmptyFields = (
     obj: Record<string, string | undefined>
   ): boolean => {
@@ -99,13 +111,14 @@ const CompleteProfileBlock: FC<CompleteProfileBlockProps> = ({
     () =>
       profileItems.map((item) => (
         <ProfileItem
+          handleOpenDrawer={openDrawer}
           isFilled={checkProfileData.includes(item)}
           item={item}
           key={item.id}
           userRole={userRole}
         />
       )),
-    [profileItems, checkProfileData, userRole]
+    [profileItems, checkProfileData, userRole, openDrawer]
   )
 
   const handleToggleMenu = () => {
@@ -151,6 +164,12 @@ const CompleteProfileBlock: FC<CompleteProfileBlockProps> = ({
       </AccordionSummary>
       <AccordionDetails sx={styles.profileItems}>
         {profileList}
+        <AppDrawer onClose={closeDrawer} open={isDrawerOpen}>
+          <CreateOffer
+            closeDrawer={closeDrawer}
+            updateOffer={setIsOfferCreated}
+          />
+        </AppDrawer>
       </AccordionDetails>
     </Accordion>
   )

src/components/offer-banner/OfferBanner.styles.ts

@@ -37,7 +37,6 @@ export const styles = {
     gap: '16px'
   },
   button: {
-    whiteSpace: 'nowrap',
     p: '15px 30px',
     width: 'auto',
     lineHeight: '19px'

src/components/profile-item/ProfileItem.tsx

@@ -8,29 +8,25 @@ import { styles } from '~/components/profile-item/ProfileItem.styles'
 import useBreakpoints from '~/hooks/use-breakpoints'
 import { ProfileItemType } from '~/components/profile-item/complete-profile.constants'
 import { UserRoleEnum } from '~/types'
-import CreateOffer from '~/containers/offer-page/create-offer/CreateOffer'
-import { useDrawer } from '~/hooks/use-drawer'
-import AppDrawer from '~/components/app-drawer/AppDrawer'
 
 interface ProfileItemProps {
   item: ProfileItemType
   isFilled?: boolean
   userRole: UserRoleEnum | ''
+  handleOpenDrawer?: () => void
 }
 
 const ProfileItem = ({
   item,
   userRole,
-  isFilled = false
+  isFilled = false,
+  handleOpenDrawer
 }: ProfileItemProps) => {
   const { t } = useTranslation()
   const { isMobile } = useBreakpoints()
   const { id, icon } = item
   const navigate = useNavigate()
 
-  const { openDrawer, closeDrawer, isOpen } = useDrawer()
-  const handleOpenDrawer = () => openDrawer()
-
   const isClickable = !isFilled && item.id !== 'schedule'
   const isOffer = item.id === 'offer'
 
@@ -39,7 +35,7 @@ const ProfileItem = ({
       navigate(`${item.path}#${item.id}`)
     }
     if (isOffer) {
-      handleOpenDrawer()
+      handleOpenDrawer!()
     }
   }
 
@@ -64,11 +60,6 @@ const ProfileItem = ({
             </Typography>
           </Box>
         </Box>
-        {isOffer && (
-          <AppDrawer onClose={closeDrawer} open={isOpen}>
-            <CreateOffer closeDrawer={closeDrawer} />
-          </AppDrawer>
-        )}
       </Box>
       {isFilled && (
         <CheckIcon

src/containers/chat/chat-text-area/ChatTextArea.styles.ts

@@ -24,7 +24,7 @@ export const styles = {
     flex: 1,
     backgroundColor: 'basic.white',
     borderRadius: '6px',
-    p: { xs: '16px 10px', sm: '16px 32px' }
+    p: { xs: '7px 10px', sm: '7px 32px' }
   },
   textArea: {
     userSelect: 'none',
@@ -33,15 +33,22 @@ export const styles = {
       '&::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb': {
         visibility: 'hidden'
       }
-    }
+    },
+    position: 'relative',
+    bottom: '-12px'
   },
   textAreaLabel: (value: string) => ({
     shrink: false,
     style: {
       visibility: value ? VisibilityEnum.Hidden : VisibilityEnum.Visible,
       color: palette.primary[300],
-      top: '-6px'
+      top: '-12px'
     }
   }),
-  icon: { width: '32px', height: '32px', color: 'primary.800' }
+  icon: { width: '32px', height: '32px', color: 'primary.800' },
+  emojiIcon: (dialogWindow: boolean) => ({
+    p: '0px',
+    m: '0px',
+    pr: dialogWindow ? '15px' : '0px'
+  })
 }

src/containers/chat/chat-text-area/ChatTextArea.tsx

@@ -34,6 +34,7 @@ interface ChatTextAreaProps extends Omit<TextFieldProps, 'onChange' | 'sx'> {
   }
   emojiPickerProps?: { perLine: number }
   adornmentPosition?: AdornmentPosition
+  dialogWindow?: boolean
 }
 
 const ChatTextArea: FC<ChatTextAreaProps> = ({
@@ -45,6 +46,7 @@ const ChatTextArea: FC<ChatTextAreaProps> = ({
   sx = {},
   emojiPickerProps,
   adornmentPosition = AdornmentPosition.End,
+  dialogWindow = false,
   ...props
 }) => {
   const { isMobile } = useBreakpoints()
@@ -80,7 +82,7 @@ const ChatTextArea: FC<ChatTextAreaProps> = ({
   const onClosePicker = () => setIsEmojiPickerOpen(false)
 
   const adornment = (
-    <IconButton onClick={onTogglePicker}>
+    <IconButton onClick={onTogglePicker} sx={styles.emojiIcon(dialogWindow)}>
       <MoodIcon />
     </IconButton>
   )

src/containers/offer-page/chat-dialog-window/ChatDialogWindow.tsx

@@ -255,6 +255,7 @@ const ChatDialogWindow: FC<ChatDialogWindow> = ({ chatInfo }) => {
   ) : (
     <ChatTextArea
       adornmentPosition={AdornmentPosition.Start}
+      dialogWindow
       emojiPickerProps={{ perLine: 6 }}
       label={
         isMessageSending

src/containers/offer-page/create-offer/CreateOffer.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback } from 'react'
+import { FC, useCallback, Dispatch, SetStateAction } from 'react'
 
 import { OfferService } from '~/services/offer-service'
 import CreateOrEditOffer from '~/containers/offer-page/create-or-edit-offer/CreateOrEditOffer'
@@ -8,16 +8,23 @@ import { CreateOrUpdateOfferData } from '~/types'
 
 interface CreateOfferProps {
   closeDrawer: () => void
+  updateOffer?: Dispatch<SetStateAction<boolean>>
 }
 
-const CreateOffer: FC<CreateOfferProps> = ({ closeDrawer }) => {
+const CreateOffer: FC<CreateOfferProps> = ({ closeDrawer, updateOffer }) => {
   const postOffer = useCallback(
     (data: CreateOrUpdateOfferData) =>
       OfferService.createOffer({ ...data, FAQ: findFullObjects(data.FAQ) }),
     []
   )
 
-  return <CreateOrEditOffer closeDrawer={closeDrawer} service={postOffer} />
+  return (
+    <CreateOrEditOffer
+      closeDrawer={closeDrawer}
+      service={postOffer}
+      updateOffer={updateOffer}
+    />
+  )
 }
 
 export default CreateOffer

src/containers/offer-page/create-or-edit-offer/CreateOrEditOffer.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from 'react'
+import { FC, useEffect, Dispatch, SetStateAction } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate, useLocation } from 'react-router-dom'
 import LeakAddSharpIcon from '@mui/icons-material/LeakAddSharp'
@@ -38,15 +38,17 @@ import { openAlert } from '~/redux/features/snackbarSlice'
 import { getErrorKey } from '~/utils/get-error-key'
 
 interface CreateOrUpdateOfferProps {
-  existingOffer: Offer | null
+  existingOffer?: Offer | null
   closeDrawer: () => void
   service: ServiceFunction<Offer | null, CreateOrUpdateOfferData>
+  updateOffer?: Dispatch<SetStateAction<boolean>>
 }
 
 const CreateOrEditOffer: FC<CreateOrUpdateOfferProps> = ({
   existingOffer = null,
   closeDrawer,
-  service
+  service,
+  updateOffer
 }) => {
   const { userRole } = useAppSelector((state) => state.appMain)
   const { setNeedConfirmation } = useConfirm()
@@ -91,6 +93,7 @@ const CreateOrEditOffer: FC<CreateOrUpdateOfferProps> = ({
 
     if (hash == '#offer') {
       navigate(`${authRoutes.myProfile.path}#complete`)
+      updateOffer!(true)
     } else {
       navigate(
         createUrlPath(

src/pages/chat/Chat.styles.ts

@@ -35,7 +35,7 @@ export const styles = {
     flexDirection: 'column',
     boxSizing: 'border-box',
     backgroundColor: 'primary.50',
-    p: '8px 8px 16px',
+    p: '8px 8px',
     '& .simplebar-content': { margin: messagesLength ? 'auto 0 0' : 'auto' },
     '& .simplebar-content-wrapper': {
       display: 'flex',

tests/unit/containers/my-courses/courses-filters-drawer/CoursesFiltersDrawer.spec.jsx

@@ -54,6 +54,10 @@ const setup = async (filters) => {
   })
 }
 
+beforeEach(() => {
+  vi.clearAllMocks()
+})
+
 describe('CoursesFiltersDrawer', () => {
   describe('with default filters', () => {
     beforeEach(async () => {