@@ -4,6 +4,7 @@ import React, {
44 FC ,
55 ReactNode ,
66 useCallback ,
7+ useEffect ,
78 useMemo ,
89 useRef ,
910 useState ,
@@ -74,9 +75,11 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
7475 locked,
7576 current,
7677 activateExitButton,
78+ setHide,
7779 } = useLaunchStore (
7880 useShallow ( ( state ) => ( {
7981 hide : state . hide ,
82+ setHide : state . setHide ,
8083 date : state . date ,
8184 setDate : state . setDate ,
8285 current : state . current ,
@@ -92,6 +95,12 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
9295 } ) )
9396 ) ;
9497
98+ useEffect ( ( ) => {
99+ if ( hide ) {
100+ setHide ( false ) ;
101+ }
102+ } , [ hide ] ) ;
103+
95104 const currentIntegrationText = useMemo ( ( ) => {
96105 if ( current === 'global' ) {
97106 return '' ;
@@ -100,20 +109,22 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
100109 const currentIntegration = integrations . find ( ( p ) => p . id === current ) ! ;
101110
102111 return (
103- < div className = "flex items-center gap-[10px]" >
104- < div className = "relative" >
105- < img
106- src = { `/icons/platforms/${ currentIntegration . identifier } .png` }
107- className = "w-[20px] h-[20px] rounded-[4px]"
108- alt = { currentIntegration . identifier }
109- />
110- < SettingsIcon
111- size = { 15 }
112- className = "text-white absolute -end-[5px] -bottom-[5px]"
113- />
114- </ div >
115- < div > { currentIntegration . name } { t ( 'channel_settings' , 'Settings' ) } </ div >
112+ < div className = "flex items-center gap-[10px]" >
113+ < div className = "relative" >
114+ < img
115+ src = { `/icons/platforms/${ currentIntegration . identifier } .png` }
116+ className = "w-[20px] h-[20px] rounded-[4px]"
117+ alt = { currentIntegration . identifier }
118+ />
119+ < SettingsIcon
120+ size = { 15 }
121+ className = "text-white absolute -end-[5px] -bottom-[5px]"
122+ />
116123 </ div >
124+ < div >
125+ { currentIntegration . name } { t ( 'channel_settings' , 'Settings' ) }
126+ </ div >
127+ </ div >
117128 ) ;
118129 } , [ current ] ) ;
119130
@@ -158,7 +169,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
158169 setLoading ( true ) ;
159170 if (
160171 ! ( await deleteDialog (
161- t ( 'are_you_sure_you_want_to_delete_post' , 'Are you sure you want to delete this post?' ) ,
172+ t (
173+ 'are_you_sure_you_want_to_delete_post' ,
174+ 'Are you sure you want to delete this post?'
175+ ) ,
162176 t ( 'yes_delete_it' , 'Yes, delete it!' )
163177 ) )
164178 ) {
@@ -191,9 +205,14 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
191205
192206 for ( const item of notEnoughChars ) {
193207 toaster . show (
194- '' +
195- item . integration . name +
196- ' ' + t ( 'post_needs_content_or_image' , 'Your post should have at least one character or one image.' ) ,
208+ `${ capitalize ( item . integration . identifier . split ( '-' ) [ 0 ] ) } (${
209+ item . integration . name
210+ } ):` +
211+ ' ' +
212+ t (
213+ 'post_needs_content_or_image' ,
214+ 'Your post should have at least one character or one image.'
215+ ) ,
197216 'warning'
198217 ) ;
199218 setLoading ( false ) ;
@@ -203,7 +222,12 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
203222
204223 for ( const item of checkAllValid ) {
205224 if ( item . valid === false ) {
206- toaster . show ( t ( 'please_fix_your_settings' , 'Please fix your settings' ) , 'warning' ) ;
225+ toaster . show (
226+ `${ capitalize ( item . integration . identifier . split ( '-' ) [ 0 ] ) } (${
227+ item . integration . name
228+ } ): ${ t ( 'please_fix_your_settings' , 'Please fix your settings' ) } `,
229+ 'warning'
230+ ) ;
207231 item . fix ( ) ;
208232 setLoading ( false ) ;
209233 setShowSettings ( true ) ;
@@ -240,7 +264,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
240264
241265 for ( const item of sliceNeeded ) {
242266 toaster . show (
243- `${ item ?. integration ?. name } (${ item ?. integration ?. identifier } ) ${ t ( 'post_is_too_long' , 'post is too long, please fix it' ) } ` ,
267+ `${ item ?. integration ?. name } (${ item ?. integration ?. identifier } ) ${ t (
268+ 'post_is_too_long' ,
269+ 'post is too long, please fix it'
270+ ) } `,
244271 'warning'
245272 ) ;
246273 item . preview ( ) ;
@@ -265,7 +292,10 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
265292 const shortLink = ! shortLinkUrl . ask
266293 ? false
267294 : await deleteDialog (
268- t ( 'shortlink_urls_question' , 'Do you want to shortlink the URLs? it will let you get statistics over clicks' ) ,
295+ t (
296+ 'shortlink_urls_question' ,
297+ 'Do you want to shortlink the URLs? it will let you get statistics over clicks'
298+ ) ,
269299 t ( 'yes_shortlink_it' , 'Yes, shortlink it!' )
270300 ) ;
271301
@@ -486,9 +516,16 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
486516 selectedIntegrations . length === 0 || loading || locked
487517 }
488518 onClick = { schedule ( 'draft' ) }
489- className = "cursor-pointer disabled:cursor-not-allowed px-[20px] h-[44px] bg-btnSimple justify-center items-center flex rounded-[8px] text-[15px] font-[600]"
519+ className = "relative cursor-pointer disabled:cursor-not-allowed px-[20px] h-[44px] bg-btnSimple justify-center items-center flex rounded-[8px] text-[15px] font-[600]"
490520 >
491- { t ( 'save_as_draft' , 'Save as Draft' ) }
521+ { loading && (
522+ < div className = "absolute left-[50%] top-[50%] -translate-y-[50%] -translate-x-[50%]" >
523+ < div className = "animate-spin h-[20px] w-[20px] border-4 border-textColor border-t-transparent rounded-full" />
524+ </ div >
525+ ) }
526+ < div className = { clsx ( loading && 'invisible' ) } >
527+ { t ( 'save_as_draft' , 'Save as Draft' ) }
528+ </ div >
492529 </ button >
493530 ) }
494531 { addEditSets && (
@@ -509,9 +546,19 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
509546 selectedIntegrations . length === 0 || loading || locked
510547 }
511548 onClick = { schedule ( 'schedule' ) }
512- className = "text-white min-w-[180px] btnSub disabled:cursor-not-allowed disabled:opacity-80 outline-none gap-[8px] flex justify-center items-center h-[44px] rounded-[8px] bg-[#612BD3] ps-[20px] pe-[16px]"
549+ className = "text-white relative min-w-[180px] btnSub disabled:cursor-not-allowed disabled:opacity-80 outline-none gap-[8px] flex justify-center items-center h-[44px] rounded-[8px] bg-[#612BD3] ps-[20px] pe-[16px]"
513550 >
514- < div className = "text-[15px] font-[600]" >
551+ { loading && (
552+ < div className = "absolute left-[50%] top-[50%] -translate-y-[50%] -translate-x-[50%]" >
553+ < div className = "animate-spin h-[20px] w-[20px] border-4 border-white border-t-transparent rounded-full" />
554+ </ div >
555+ ) }
556+ < div
557+ className = { clsx (
558+ 'text-[15px] font-[600]' ,
559+ loading && 'invisible'
560+ ) }
561+ >
515562 { selectedIntegrations . length === 0
516563 ? t ( 'check_circles_above' , 'Check the circles above' )
517564 : dummy
@@ -563,7 +610,10 @@ After using the addPostFor{num} it will create a new addPostContentFor{num+ 1} f
563610` }
564611 labels = { {
565612 title : t ( 'your_assistant' , 'Your Assistant' ) ,
566- initial : t ( 'assistant_initial_message' , 'Hi! I can help you to refine your social media posts.' ) ,
613+ initial : t (
614+ 'assistant_initial_message' ,
615+ 'Hi! I can help you to refine your social media posts.'
616+ ) ,
567617 } }
568618 />
569619 </ div >
0 commit comments