add confirm to marketplace

src/views/catalog/views/page/layout/marketplace/marketplace-item/MarketplaceItemView.tsx

@@ -1,11 +1,6 @@
-import { BuyMarketplaceOfferMessageComposer, CancelMarketplaceOfferMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { GetRoomEngine, LocalizeText } from '../../../../../../../api';
-import { SendMessageHook } from '../../../../../../../hooks';
 import { NitroCardGridItemView } from '../../../../../../../layout';
-import { NotificationAlertType } from '../../../../../../notification-center/common/NotificationAlertType';
-import { NotificationUtilities } from '../../../../../../notification-center/common/NotificationUtilities';
-import { GetCurrencyAmount } from '../../../../../../purse/common/CurrencyHelper';
 import { MarketplaceOfferData } from '../common/MarketplaceOfferData';
 import { MarketPlaceOfferState } from '../common/MarketplaceOfferState';
 
@@ -16,11 +11,12 @@ export interface MarketplaceItemViewProps
 {
     offerData: MarketplaceOfferData;
     type?: number;
+    onClick(offerData: MarketplaceOfferData): void;
 }
 
 export const MarketplaceItemView: FC<MarketplaceItemViewProps> = props =>
 {
-    const { offerData = null, type = PUBLIC_OFFER } = props;
+    const { offerData = null, type = PUBLIC_OFFER, onClick = null } = props;
 
     const getImageUrlForOffer = useCallback( () =>
     {
@@ -76,22 +72,6 @@ export const MarketplaceItemView: FC<MarketplaceItemViewProps> = props =>
         return LocalizeText('catalog.marketplace.offer.time_left', ['time'], [text] );
     }, [offerData]);
 
-    const takeItemBack = useCallback(() =>
-    {
-        SendMessageHook(new CancelMarketplaceOfferMessageComposer(offerData.offerId));
-    }, [offerData.offerId]);
-
-    const buyOffer = useCallback(() =>
-    {
-        if(offerData.price > GetCurrencyAmount(-1))
-        {
-            NotificationUtilities.simpleAlert(LocalizeText('catalog.alert.notenough.credits.description'), NotificationAlertType.DEFAULT, null, null, LocalizeText('catalog.alert.notenough.title'));
-            return;
-        }
-        
-        SendMessageHook(new BuyMarketplaceOfferMessageComposer(offerData.offerId));
-    }, [offerData.offerId, offerData.price]);
-
     return (
     <NitroCardGridItemView className='w-100 marketplace-item align-items-center'>
         <img src={ getImageUrlForOffer() } className='mx-3' alt='' />
@@ -111,9 +91,9 @@ export const MarketplaceItemView: FC<MarketplaceItemViewProps> = props =>
             }
         </div>
         <div className='btn-group-vertical mx-1 gap-2'>
-            { (type === OWN_OFFER && offerData.status !== MarketPlaceOfferState.SOLD) && <button className='btn btn-secondary btn-sm' onClick={ takeItemBack }>{ LocalizeText('catalog.marketplace.offer.pick') }</button>}
+            { (type === OWN_OFFER && offerData.status !== MarketPlaceOfferState.SOLD) && <button className='btn btn-secondary btn-sm' onClick={ () => onClick(offerData) }>{ LocalizeText('catalog.marketplace.offer.pick') }</button>}
             { type === PUBLIC_OFFER && <>
-                <button className='btn btn-secondary btn-sm' onClick={ buyOffer } >{ LocalizeText('buy') }</button>
+                <button className='btn btn-secondary btn-sm' onClick={ () => onClick(offerData) } >{ LocalizeText('buy') }</button>
                 <button className='btn btn-secondary btn-sm' disabled={true}>{ LocalizeText('catalog.marketplace.view_more') }</button>
             </>}
         </div>

src/views/catalog/views/page/layout/marketplace/own-items/CatalogLayoutMarketplaceOwnItemsView.tsx

@@ -1,4 +1,4 @@
-import { GetMarketplaceOwnOffersMessageComposer, MarketplaceCancelOfferResultEvent, MarketplaceOwnOffersEvent, RedeemMarketplaceOfferCreditsMessageComposer } from '@nitrots/nitro-renderer';
+import { CancelMarketplaceOfferMessageComposer, GetMarketplaceOwnOffersMessageComposer, MarketplaceCancelOfferResultEvent, MarketplaceOwnOffersEvent, RedeemMarketplaceOfferCreditsMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../../../../api';
 import { BatchUpdates, CreateMessageHook, SendMessageHook, UseMountEffect } from '../../../../../../../hooks';
@@ -96,6 +96,11 @@ export const CatalogLayoutMarketplaceOwnItemsView: FC<CatalogLayoutMarketplaceOw
         SendMessageHook(new RedeemMarketplaceOfferCreditsMessageComposer());
     }, []);
 
+    const takeItemBack = useCallback( (offerData: MarketplaceOfferData) =>
+    {
+        SendMessageHook(new CancelMarketplaceOfferMessageComposer(offerData.offerId));
+    }, []);
+
     return (
     <>
         { (creditsWaiting <= 0) && <NitroLayoutBase className='text-black'>{LocalizeText('catalog.marketplace.redeem.no_sold_items')}</NitroLayoutBase>}
@@ -107,7 +112,7 @@ export const CatalogLayoutMarketplaceOwnItemsView: FC<CatalogLayoutMarketplaceOw
         <div className='text-black'>{LocalizeText('catalog.marketplace.items_found', ['count'], [offers.size.toString()])}</div>
         <NitroCardGridView columns={1} className='text-black'>
             { 
-                Array.from(offers.values()).map( (entry, index) => <MarketplaceItemView key={ index } offerData={ entry } type={ OWN_OFFER } />)
+                Array.from(offers.values()).map( (entry, index) => <MarketplaceItemView key={ index } offerData={ entry } type={ OWN_OFFER } onClick={takeItemBack} />)
             }
         </NitroCardGridView>
     </>

src/views/catalog/views/page/layout/marketplace/post-offer/MarketplacePostOfferView.tsx

@@ -5,6 +5,7 @@ import { CatalogPostMarketplaceOfferEvent } from '../../../../../../../events/ca
 import { SendMessageHook, useUiEvent } from '../../../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutFlex } from '../../../../../../../layout';
 import { FurnitureItem } from '../../../../../../inventory/common/FurnitureItem';
+import { NotificationUtilities } from '../../../../../../notification-center/common/NotificationUtilities';
 
 export const MarketplacePostOfferView : FC<{}> = props =>
 {
@@ -68,12 +69,15 @@ export const MarketplacePostOfferView : FC<{}> = props =>
 
     const postItem = useCallback( () =>
     {
-        if(isNaN(askingPrice) || askingPrice <= 0) return;
+        if(isNaN(askingPrice) || askingPrice <= 0 || !item) return;
 
+        NotificationUtilities.confirm(LocalizeText('inventory.marketplace.confirm_offer.info', ['furniname', 'price'], [getFurniTitle(), askingPrice.toString()]), () =>
+            {
                 SendMessageHook(new MakeOfferMessageComposer(askingPrice, item.isWallItem ? 2 : 1, item.id));
-        
                 setItem(null);
-    }, [askingPrice, item]);
+            },
+            () => { setItem(null)}, null, null, LocalizeText('inventory.marketplace.confirm_offer.title'));
+    }, [askingPrice, getFurniTitle, item]);
 
     return ( item && 
         <NitroCardView uniqueKey="catalog-mp-post-offer" className="nitro-marketplace-post-offer" simple={ true }>

src/views/catalog/views/page/layout/marketplace/public-items/CatalogLayoutMarketplacePublicItemsView.tsx

@@ -1,10 +1,11 @@
-import { GetMarketplaceOffersMessageComposer, MarketplaceBuyOfferResultEvent, MarketPlaceOffersEvent } from '@nitrots/nitro-renderer';
+import { BuyMarketplaceOfferMessageComposer, GetMarketplaceOffersMessageComposer, MarketplaceBuyOfferResultEvent, MarketPlaceOffersEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../../../api';
 import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../../../../hooks';
 import { NitroCardGridView } from '../../../../../../../layout';
 import { NotificationAlertType } from '../../../../../../notification-center/common/NotificationAlertType';
 import { NotificationUtilities } from '../../../../../../notification-center/common/NotificationUtilities';
+import { GetCurrencyAmount } from '../../../../../../purse/common/CurrencyHelper';
 import { CatalogLayoutProps } from '../../CatalogLayout.types';
 import { IMarketplaceSearchOptions } from '../common/IMarketplaceSearchOptions';
 import { MarketplaceOfferData } from '../common/MarketplaceOfferData';
@@ -47,6 +48,21 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
         return [];
     }, [searchType]);
 
+    const purchaseItem = useCallback((offerData: MarketplaceOfferData) =>
+    {
+        if(offerData.price > GetCurrencyAmount(-1))
+        {
+            NotificationUtilities.simpleAlert(LocalizeText('catalog.alert.notenough.credits.description'), NotificationAlertType.DEFAULT, null, null, LocalizeText('catalog.alert.notenough.title'));
+            return;
+        }
+        const offerId = offerData.offerId;
+        NotificationUtilities.confirm(LocalizeText('catalog.marketplace.confirm_header'), () =>
+            {
+                SendMessageHook(new BuyMarketplaceOfferMessageComposer(offerId));
+            },
+            null, null, null, LocalizeText('catalog.marketplace.confirm_title'));
+    },[]);
+
     const onMarketPlaceOffersEvent = useCallback( (event: MarketPlaceOffersEvent) =>
     {
         const parser = event.getParser();
@@ -109,8 +125,12 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
                     return newVal;
                 });
 
-                // for now just let user know
+                NotificationUtilities.confirm(LocalizeText('catalog.marketplace.confirm_higher_header') + 
-                NotificationUtilities.simpleAlert(LocalizeText('catalog.marketplace.confirm_higher_header'), NotificationAlertType.DEFAULT, null, null, LocalizeText('catalog.marketplace.confirm_higher_title'));
+                '\n' + LocalizeText('catalog.marketplace.confirm_price', ['price'], [parser.newPrice.toString()]), () =>
+                {
+                    SendMessageHook(new BuyMarketplaceOfferMessageComposer(parser.offerId));
+                },
+                null, null, null, LocalizeText('catalog.marketplace.confirm_higher_title'));
                 break;
             case 4:
                 NotificationUtilities.simpleAlert(LocalizeText('catalog.alert.notenough.credits.description'), NotificationAlertType.DEFAULT, null, null, LocalizeText('catalog.alert.notenough.title'));
@@ -139,7 +159,7 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
         <div className='text-black'>{LocalizeText('catalog.marketplace.items_found', ['count'], [offers.size.toString()])}</div>
         <NitroCardGridView columns={1} className='text-black'>
             { 
-                Array.from(offers.values()).map( (entry, index) => <MarketplaceItemView key={ index } offerData={ entry } type={ PUBLIC_OFFER } />)
+                Array.from(offers.values()).map( (entry, index) => <MarketplaceItemView key={ index } offerData={ entry } type={ PUBLIC_OFFER } onClick={purchaseItem} />)
             }
         </NitroCardGridView>
     </>);

src/views/mod-tools/ModToolsMessageHandler.tsx

@@ -1,13 +1,14 @@
 import { CfhSanctionMessageEvent, CfhTopicsInitEvent, IssueDeletedMessageEvent, IssueInfoMessageEvent, IssuePickFailedMessageEvent, ModeratorActionResultMessageEvent, ModeratorInitMessageEvent, ModeratorToolPreferencesEvent, RoomEngineEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback } from 'react';
 import { MODTOOLS_NEW_TICKET, PlaySound } from '../../api/utils/PlaySound';
-import { NotificationAlertEvent } from '../../events';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { ModToolsOpenRoomChatlogEvent } from '../../events/mod-tools/ModToolsOpenRoomChatlogEvent';
 import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
 import { ModToolsOpenUserChatlogEvent } from '../../events/mod-tools/ModToolsOpenUserChatlogEvent';
 import { ModToolsOpenUserInfoEvent } from '../../events/mod-tools/ModToolsOpenUserInfoEvent';
-import { CreateMessageHook, dispatchUiEvent, useRoomEngineEvent, useUiEvent } from '../../hooks';
+import { CreateMessageHook, useRoomEngineEvent, useUiEvent } from '../../hooks';
+import { NotificationAlertType } from '../notification-center/common/NotificationAlertType';
+import { NotificationUtilities } from '../notification-center/common/NotificationUtilities';
 import { SetCfhCategories } from './common/GetCFHCategories';
 import { useModToolsContext } from './context/ModToolsContext';
 import { ModToolsActions } from './reducers/ModToolsReducer';
@@ -39,7 +40,6 @@ export const ModToolsMessageHandler: FC<{}> = props =>
             }
         });
           
-        console.log(parser);   
     }, [dispatchModToolsState]);
 
     const onIssueInfoMessageEvent = useCallback((event: IssueInfoMessageEvent) =>
@@ -68,7 +68,6 @@ export const ModToolsMessageHandler: FC<{}> = props =>
             }
         });
 
-        console.log(parser);
     }, [dispatchModToolsState, tickets]);
 
     const onModeratorToolPreferencesEvent = useCallback((event: ModeratorToolPreferencesEvent) =>
@@ -77,7 +76,6 @@ export const ModToolsMessageHandler: FC<{}> = props =>
 
         if(!parser) return;
 
-        console.log(parser);
     }, []);
 
     const onIssuePickFailedMessageEvent = useCallback((event: IssuePickFailedMessageEvent) =>
@@ -86,8 +84,7 @@ export const ModToolsMessageHandler: FC<{}> = props =>
 
         if(!parser) return;
 
-        // todo: let user know it failed
+        NotificationUtilities.simpleAlert('Failed to pick issue', NotificationAlertType.DEFAULT, null, null, 'Error')
-        dispatchUiEvent(new NotificationAlertEvent(['Failed to pick issue'], null, null, null, 'Error', null));
     }, []);
 
     const onIssueDeletedMessageEvent = useCallback((event: IssueDeletedMessageEvent) =>
@@ -119,11 +116,11 @@ export const ModToolsMessageHandler: FC<{}> = props =>
 
         if(parser.success)
         {
-            dispatchUiEvent(new NotificationAlertEvent(['Moderation action was successfull'], null, null, null, 'Success', null));
+            NotificationUtilities.simpleAlert('Moderation action was successfull', NotificationAlertType.MODERATION, null, null, 'Success');
         }
         else 
         {
-            dispatchUiEvent(new NotificationAlertEvent(['There was a problem applying that moderation action'], null, null, null, 'Error', null));
+            NotificationUtilities.simpleAlert('There was a problem applying tht moderation action', NotificationAlertType.MODERATION, null, null, 'Error');
         }
     }, []);
 
@@ -144,7 +141,6 @@ export const ModToolsMessageHandler: FC<{}> = props =>
 
         SetCfhCategories(categories);
         
-        console.log(parser);
     }, [dispatchModToolsState]);
 
     const onCfhSanctionMessageEvent = useCallback((event: CfhSanctionMessageEvent) =>
@@ -153,7 +149,7 @@ export const ModToolsMessageHandler: FC<{}> = props =>
 
         if(!parser) return;
         
-        console.log(parser);
+        // todo: update sanction data
     }, []);
 
     CreateMessageHook(ModeratorInitMessageEvent, onModeratorInitMessageEvent);

src/views/mod-tools/views/user/user-mod-action/ModToolsUserModActionView.tsx

@@ -1,9 +1,10 @@
 import { CallForHelpTopicData, DefaultSanctionMessageComposer, ModAlertMessageComposer, ModBanMessageComposer, ModKickMessageComposer, ModMessageMessageComposer, ModMuteMessageComposer, ModTradingLockMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useMemo, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
-import { NotificationAlertEvent } from '../../../../../events';
+import { SendMessageHook } from '../../../../../hooks';
-import { dispatchUiEvent, SendMessageHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { NotificationAlertType } from '../../../../notification-center/common/NotificationAlertType';
+import { NotificationUtilities } from '../../../../notification-center/common/NotificationUtilities';
 import { useModToolsContext } from '../../../context/ModToolsContext';
 import { ModActionDefinition } from '../../../utils/ModActionDefinition';
 import { ModToolsUserModActionViewProps } from './ModToolsUserModActionView.types';
@@ -59,13 +60,13 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
     {
         if( (selectedTopic === -1) || (selectedAction === -1) )
         {
-            dispatchUiEvent(new NotificationAlertEvent(['You must select a CFH topic and Sanction'], null, null, null, 'Error', null));
+            NotificationUtilities.simpleAlert('You must select a CFH topic and Sanction', NotificationAlertType.DEFAULT, null, null, 'Error');
             return;
         }
 
         if(!settings || !settings.cfhPermission) 
         {
-            dispatchUiEvent(new NotificationAlertEvent(['You do not have permission to do this'], null, null, null, 'Error', null));
+            NotificationUtilities.simpleAlert('You do not have permission to do this', NotificationAlertType.DEFAULT, null, null, 'Error');
             return;
         }
 
@@ -74,13 +75,13 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
 
         if(!category)
         {
-            dispatchUiEvent(new NotificationAlertEvent(['You must select a CFH topic'], null, null, null, 'Error', null));
+            NotificationUtilities.simpleAlert('You must select a CFH topic', NotificationAlertType.DEFAULT, null, null, 'Error');
             return;
         }
 
         if(!sanction)
         {
-            dispatchUiEvent(new NotificationAlertEvent(['You must select a sanction'], null, null, null, 'Error', null));
+            NotificationUtilities.simpleAlert('You must select a sanction', NotificationAlertType.DEFAULT, null, null, 'Error');
             return;
         }
 
@@ -92,13 +93,13 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
             
                     if(!settings.alertPermission)
                     {
-                        dispatchUiEvent(new NotificationAlertEvent(['You have insufficient permissions.'], null, null, null, 'Error', null));
+                        NotificationUtilities.simpleAlert('You have insufficient permissions', NotificationAlertType.DEFAULT, null, null, 'Error');
                         return;
                     }
 
                     if(message.trim().length === 0)
                     {
-                        dispatchUiEvent(new NotificationAlertEvent(['Please write a message to user.'], null, null, null, 'Error', null));
+                        NotificationUtilities.simpleAlert('Please write a message to user', NotificationAlertType.DEFAULT, null, null, 'Error');
                         return;
                     }
 
@@ -113,7 +114,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                 
                     if(!settings.banPermission)
                     {
-                        dispatchUiEvent(new NotificationAlertEvent(['You have insufficient permissions.'], null, null, null, 'Error', null));
+                        NotificationUtilities.simpleAlert('You have insufficient permissions', NotificationAlertType.DEFAULT, null, null, 'Error');
                         return;
                     }
 
@@ -125,7 +126,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                 
                     if(!settings.kickPermission)
                     {
-                        dispatchUiEvent(new NotificationAlertEvent(['You have insufficient permissions.'], null, null, null, 'Error', null));
+                        NotificationUtilities.simpleAlert('You have insufficient permissions', NotificationAlertType.DEFAULT, null, null, 'Error');
                         return;
                     }
 
@@ -144,7 +145,7 @@ export const ModToolsUserModActionView: FC<ModToolsUserModActionViewProps> = pro
                 
                     if(message.trim().length === 0)
                     {
-                        dispatchUiEvent(new NotificationAlertEvent(['Please write a message to user.'], null, null, null, 'Error', null));
+                        NotificationUtilities.simpleAlert('Please write a message to user', NotificationAlertType.DEFAULT, null, null, 'Error');
                         return;
                     }