Add effect box widget

src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx

@@ -9,12 +9,14 @@ import { useRoomContext } from '../../../context/RoomContext';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
 import { ContextMenuHeaderView } from '../../context-menu/views/header/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/views/list-item/ContextMenuListItemView';
+import { EffectBoxConfirmView } from './views/effect-box/EffectBoxConfirmView';
 import { MonsterPlantSeedConfirmView } from './views/monsterplant-seed/MonsterPlantSeedConfirmView';
 import { PurchasableClothingConfirmView } from './views/purchaseable-clothing/PurchasableClothingConfirmView';
 
 const MONSTERPLANT_SEED_CONFIRMATION: string = 'MONSTERPLANT_SEED_CONFIRMATION';
 const PURCHASABLE_CLOTHING_CONFIRMATION: string = 'PURCHASABLE_CLOTHING_CONFIRMATION';
 const GROUP_FURNITURE: string = 'GROUP_FURNITURE';
+const EFFECTBOX_OPEN: string = 'EFFECTBOX_OPEN';
 
 export const FurnitureContextMenuView: FC<{}> = props =>
 {
@@ -50,12 +52,24 @@ export const FurnitureContextMenuView: FC<{}> = props =>
         switch(event.type)
         {
             case RoomEngineTriggerWidgetEvent.REQUEST_MONSTERPLANT_SEED_PLANT_CONFIRMATION_DIALOG:
+                if(!IsOwnerOfFurniture(object)) return;
+
                 setConfirmingObjectId(object.id);
                 setConfirmMode(MONSTERPLANT_SEED_CONFIRMATION);
 
+                close();
+                return;
+            case RoomEngineTriggerWidgetEvent.REQUEST_EFFECTBOX_OPEN_DIALOG:
+                if(!IsOwnerOfFurniture(object)) return;
+                
+                setConfirmingObjectId(object.id);
+                setConfirmMode(EFFECTBOX_OPEN);
+
                 close();
                 return;
             case RoomEngineTriggerWidgetEvent.REQUEST_PURCHASABLE_CLOTHING_CONFIRMATION_DIALOG:
+                if(!IsOwnerOfFurniture(object)) return;
+
                 setConfirmingObjectId(object.id);
                 setConfirmMode(PURCHASABLE_CLOTHING_CONFIRMATION);
 
@@ -93,6 +107,7 @@ export const FurnitureContextMenuView: FC<{}> = props =>
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.CLOSE_FURNI_CONTEXT_MENU, onRoomEngineTriggerWidgetEvent);
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_MONSTERPLANT_SEED_PLANT_CONFIRMATION_DIALOG, onRoomEngineTriggerWidgetEvent);
     useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_PURCHASABLE_CLOTHING_CONFIRMATION_DIALOG, onRoomEngineTriggerWidgetEvent);
+    useRoomEngineEvent(RoomEngineTriggerWidgetEvent.REQUEST_EFFECTBOX_OPEN_DIALOG, onRoomEngineTriggerWidgetEvent);
 
     const onGroupFurniContextMenuInfoMessageEvent = useCallback((event: GroupFurniContextMenuInfoMessageEvent) =>
     {
@@ -143,6 +158,7 @@ export const FurnitureContextMenuView: FC<{}> = props =>
         <>
             { (confirmMode === MONSTERPLANT_SEED_CONFIRMATION) && <MonsterPlantSeedConfirmView objectId={ confirmingObjectId } close={ closeConfirm } /> }
             { (confirmMode === PURCHASABLE_CLOTHING_CONFIRMATION) && <PurchasableClothingConfirmView objectId={ confirmingObjectId } close={ closeConfirm } /> }
+            { (confirmMode === EFFECTBOX_OPEN) && <EffectBoxConfirmView objectId={ confirmingObjectId } close={ closeConfirm } /> }
             { (objectId >= 0) && mode &&
                 <ContextMenuView objectId={ objectId } category={ RoomObjectCategory.FLOOR } close={ close } fades={ true }>
                     { (mode === ContextMenuEnum.FRIEND_FURNITURE) &&

src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.tsx

@@ -0,0 +1,37 @@
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../../../api';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../../layout';
+import { useRoomContext } from '../../../../../context/RoomContext';
+import { EffectBoxConfirmViewProps } from './EffectBoxConfirmView.types';
+
+export const EffectBoxConfirmView: FC<EffectBoxConfirmViewProps> = props =>
+{
+    const { objectId = -1, close = null } = props;
+    const { roomSession = null, widgetHandler = null } = useRoomContext();
+
+    const useProduct = useCallback(() =>
+    {
+        roomSession.useMultistateItem(objectId);
+
+        close();
+    }, [ roomSession, objectId, close ]);
+    
+    return (
+        <NitroCardView className="nitro-use-product-confirmation">
+            <NitroCardHeaderView headerText={ LocalizeText('effectbox.header.title') } onCloseClick={ close } />
+            <NitroCardContentView className="d-flex">
+                <div className="row">
+                    <div className="col d-flex flex-column justify-content-between">
+                        <div className="d-flex flex-column">
+                            <div className="text-black">{ LocalizeText('effectbox.header.description') }</div>
+                        </div>
+                        <div className="d-flex justify-content-between align-items-end w-100 h-100">
+                            <button type="button" className="btn btn-danger" onClick={ close }>{ LocalizeText('generic.cancel') }</button>
+                            <button type="button" className="btn btn-primary" onClick={ useProduct }>{ LocalizeText('generic.ok') }</button>
+                        </div>
+                    </div>
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/room/widgets/furniture/context-menu/views/effect-box/EffectBoxConfirmView.types.ts

@@ -0,0 +1,5 @@
+export interface EffectBoxConfirmViewProps
+{
+    objectId: number;
+    close: () => void;
+}