nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

More widget updates

Browse Source
This commit is contained in:
Bill 2022-02-25 22:38:49 -05:00
parent d40cb08973
commit 34bfd96c4f
16 changed files with 176 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/views/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -2,15 +2,57 @@
pointer-events: none;
}
@import './custom-stack-height/FurnitureCustomStackHeightView';
.nitro-widget-custom-stack-height {
width: $nitro-widget-custom-stack-height-width;
height: $nitro-widget-custom-stack-height-height;
}
.nitro-room-widget-dimmer {
width: 275px;
.dimmer-banner {
width: 56px;
height: 79px;
background: url('../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png') center no-repeat;
}
.color-swatch {
height: 30px;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .2);
&.active {
box-shadow: none;
}
}
}
.nitro-widget-exchange-credit {
width: $nitro-widget-exchange-credit-width;
height: $nitro-widget-exchange-credit-height;
.exchange-image {
background-image: url('../../../../assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
width: 103px;
height: 103px;
}
}
.nitro-external-image-widget {
.picture-preview {
width: 320px;
height: 320px;
}
}
.nitro-gift-opening {
}
@import './dimmer/FurnitureDimmerView';
@import './exchange-credit/FurnitureExchangeCreditView';
@import './external-image/FurnitureExternalImageView';
@import './friend-furni/FurnitureFriendFurniView';
@import './manipulation-menu/FurnitureManipulationMenuView';
@import './mannequin/FurnitureMannequinView';
@import './stickie/FurnitureStickieView';
@import './high-score/FurnitureHighScoreView';
@import './gift-opening/FurnitureGiftOpeningView';
@import './youtube-tv/FurnitureYoutubeDisplayView';

2
src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx
View File

@ -89,7 +89,7 @@ export const FurnitureBackgroundColorView: FC<{}> = props =>
return (
<NitroCardView>
<NitroCardHeaderView headerText={ LocalizeText('widget.backgroundcolor.title') } onCloseClick={ close } />
<NitroCardContentView overflow="hidden">
<NitroCardContentView overflow="hidden" justifyContent="between">
<Column overflow="auto" gap={ 1 }>
<Column>
<Text bold>{ LocalizeText('widget.backgroundcolor.hue') }</Text>

2
src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx
View File

@ -9,8 +9,8 @@ import { FurnitureTrophyData } from '../trophy/FurnitureTrophyData';
export const FurnitureBadgeDisplayView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
const [ trophyData, setTrophyData ] = useState<FurnitureTrophyData>(null);
const { widgetHandler = null } = useRoomContext();
const onNitroEvent = useCallback((event: NitroEvent) =>
{

8
src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx → src/views/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx
View File

@ -1,8 +1,8 @@
import { FC } from 'react';
import { LocalizeText } from '../../../../../../api';
import { Button, Column, Flex, Text } from '../../../../../../common';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
import { useRoomContext } from '../../../../context/RoomContext';
import { LocalizeText } from '../../../../../api';
import { Button, Column, Flex, Text } from '../../../../../common';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext';
interface EffectBoxConfirmViewProps
{

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

@ -9,9 +9,9 @@ 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/EffectBoxConfirmView';
import { MonsterPlantSeedConfirmView } from './views/MonsterPlantSeedConfirmView';
import { PurchasableClothingConfirmView } from './views/PurchasableClothingConfirmView';
import { EffectBoxConfirmView } from './EffectBoxConfirmView';
import { MonsterPlantSeedConfirmView } from './MonsterPlantSeedConfirmView';
import { PurchasableClothingConfirmView } from './PurchasableClothingConfirmView';
const MONSTERPLANT_SEED_CONFIRMATION: string = 'MONSTERPLANT_SEED_CONFIRMATION';
const PURCHASABLE_CLOTHING_CONFIRMATION: string = 'PURCHASABLE_CLOTHING_CONFIRMATION';

10
src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx → src/views/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx
View File

@ -1,10 +1,10 @@
import { IFurnitureData, RoomObjectCategory } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../../api';
import { Base, Button, Column, Flex, Text } from '../../../../../../common';
import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
import { useRoomContext } from '../../../../context/RoomContext';
import { GetFurnitureDataForRoomObject, LocalizeText, RoomWidgetUseProductMessage } from '../../../../../api';
import { Base, Button, Column, Flex, Text } from '../../../../../common';
import { FurniCategory } from '../../../../../components/inventory/common/FurniCategory';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext';
interface MonsterPlantSeedConfirmViewProps
{

14
src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx → src/views/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx
View File

@ -1,12 +1,12 @@
import { RedeemItemClothingComposer, RoomObjectCategory, UserFigureComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../../api';
import { Base, Button, Column, Flex, Text } from '../../../../../../common';
import { FigureData } from '../../../../../../components/avatar-editor/common/FigureData';
import { FurniCategory } from '../../../../../../components/inventory/common/FurniCategory';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
import { AvatarImageView } from '../../../../../shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../../context/RoomContext';
import { GetAvatarRenderManager, GetConnection, GetFurnitureDataForRoomObject, GetSessionDataManager, LocalizeText } from '../../../../../api';
import { Base, Button, Column, Flex, Text } from '../../../../../common';
import { FigureData } from '../../../../../components/avatar-editor/common/FigureData';
import { FurniCategory } from '../../../../../components/inventory/common/FurniCategory';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { AvatarImageView } from '../../../../shared/avatar-image/AvatarImageView';
import { useRoomContext } from '../../../context/RoomContext';
interface PurchasableClothingConfirmViewProps
{

4
src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss
View File

@ -1,4 +0,0 @@
.nitro-widget-custom-stack-height {
width: $nitro-widget-custom-stack-height-width;
height: $nitro-widget-custom-stack-height-height;
}

58
src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx
View File

@ -2,10 +2,10 @@ import { FurnitureStackHeightComposer, FurnitureStackHeightEvent } from '@nitrot
import { FC, useCallback, useEffect, useState } from 'react';
import ReactSlider from 'react-slider';
import { LocalizeText, RoomWidgetUpdateCustomStackHeightEvent } from '../../../../../api';
import { Button, Column, Flex, Text } from '../../../../../common';
import { BatchUpdates, CreateMessageHook, SendMessageHook } from '../../../../../hooks';
import { CreateEventDispatcherHook } from '../../../../../hooks/events';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
import { NitroLayoutBase } from '../../../../../layout/base';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext';
const MAX_HEIGHT: number = 40;
@ -17,14 +17,14 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
const [ pendingHeight, setPendingHeight ] = useState(-1);
const { eventDispatcher = null } = useRoomContext();
const close = useCallback(() =>
const close = () =>
{
BatchUpdates(() =>
{
setObjectId(-1);
setHeight(0);
});
}, []);
}
const updateHeight = useCallback((height: number, fromServer: boolean = false) =>
{
@ -83,35 +83,29 @@ export const FurnitureCustomStackHeightView: FC<{}> = props =>
if(objectId === -1) return null;
return (
<NitroCardView className="nitro-widget-custom-stack-height" simple={ true }>
<NitroCardView className="nitro-widget-custom-stack-height" simple>
<NitroCardHeaderView headerText={ LocalizeText('widget.custom.stack.height.title') } onCloseClick={ close } />
<NitroCardContentView>
<NitroLayoutGrid>
<NitroLayoutGridColumn className="justify-content-between" size={ 12 }>
<NitroLayoutBase className="text-black" overflow="auto">
{ LocalizeText('widget.custom.stack.height.text') }
</NitroLayoutBase>
<NitroLayoutFlexColumn gap={ 2 }>
<NitroLayoutFlex gap={ 2 }>
<ReactSlider
className="nitro-slider"
min={ 0 }
max={ MAX_HEIGHT }
step={ 0.01 }
value={ height }
onChange={ event => updateHeight(event) }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
<input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } />
</NitroLayoutFlex>
<NitroLayoutButton variant="primary" onClick={ event => sendUpdate(-100) }>
{ LocalizeText('furniture.above.stack') }
</NitroLayoutButton>
<NitroLayoutButton variant="primary" onClick={ event => sendUpdate(0) }>
{ LocalizeText('furniture.floor.level') }
</NitroLayoutButton>
</NitroLayoutFlexColumn>
</NitroLayoutGridColumn>
</NitroLayoutGrid>
<NitroCardContentView justifyContent="between">
<Text>{ LocalizeText('widget.custom.stack.height.text') }</Text>
<Flex gap={ 2 }>
<ReactSlider
className="nitro-slider"
min={ 0 }
max={ MAX_HEIGHT }
step={ 0.01 }
value={ height }
onChange={ event => updateHeight(event) }
renderThumb={ (props, state) => <div { ...props }>{ state.valueNow }</div> } />
<input type="number" min={ 0 } max={ MAX_HEIGHT } value={ height } onChange={ event => updateHeight(parseFloat(event.target.value)) } />
</Flex>
<Column gap={ 1 }>
<Button onClick={ event => sendUpdate(-100) }>
{ LocalizeText('furniture.above.stack') }
</Button>
<Button onClick={ event => sendUpdate(0) }>
{ LocalizeText('furniture.floor.level') }
</Button>
</Column>
</NitroCardContentView>
</NitroCardView>
);

19
src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss
View File

@ -1,19 +0,0 @@
.nitro-room-widget-dimmer {
width: 275px;
.dimmer-banner {
width: 56px;
height: 79px;
background: url('../../../../../assets/images/room-widgets/dimmer-widget/dimmer_banner.png') center no-repeat;
}
.color-swatch {
height: 30px;
border: 2px solid $white;
box-shadow: inset 3px 3px rgba(0, 0, 0, .2);
&.active {
box-shadow: none;
}
}
}

10
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss
View File

@ -1,10 +0,0 @@
.nitro-widget-exchange-credit {
width: $nitro-widget-exchange-credit-width;
height: $nitro-widget-exchange-credit-height;
.exchange-image {
background-image: url('../../../../../assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
width: 103px;
height: 103px;
}
}

33
src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx
View File

@ -1,10 +1,6 @@
import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomWidgetCreditFurniRedeemMessage, RoomWidgetUpdateCreditFurniEvent } from '../../../../../api';
import { Base } from '../../../../../common/Base';
import { Button } from '../../../../../common/Button';
import { Column } from '../../../../../common/Column';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { Base, Button, Column, Flex, Text } from '../../../../../common';
import { BatchUpdates } from '../../../../../hooks';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
@ -18,39 +14,42 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
const onRoomWidgetUpdateCreditFurniEvent = useCallback((event: RoomWidgetUpdateCreditFurniEvent) =>
{
setObjectId(event.objectId);
setValue(event.value);
BatchUpdates(() =>
{
setObjectId(event.objectId);
setValue(event.value);
});
}, []);
CreateEventDispatcherHook(RoomWidgetUpdateCreditFurniEvent.CREDIT_FURNI_UPDATE, eventDispatcher, onRoomWidgetUpdateCreditFurniEvent);
const close = useCallback(() =>
const close = () =>
{
BatchUpdates(() =>
{
setObjectId(-1);
setValue(0);
});
}, []);
}
const redeem = useCallback(() =>
const redeem = () =>
{
widgetHandler.processWidgetMessage(new RoomWidgetCreditFurniRedeemMessage(RoomWidgetCreditFurniRedeemMessage.REDEEM, objectId));
close();
}, [ widgetHandler, objectId, close ]);
}
if(objectId === -1) return null;
return (
<NitroCardView className="nitro-widget-exchange-credit" simple={ true }>
<NitroCardView className="nitro-widget-exchange-credit" simple>
<NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
<NitroCardContentView>
<Grid>
<Column center overflow="hidden" size={ 4 }>
<NitroCardContentView center>
<Flex overflow="hidden" gap={ 2 }>
<Column center>
<Base className="exchange-image" />
</Column>
<Column justifyContent="between" overflow="hidden" size={ 8 }>
<Column grow justifyContent="between" overflow="hidden">
<Column gap={ 1 } overflow="auto">
<Text fontWeight="bold">{ LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) }</Text>
<Text>{ LocalizeText('creditfurni.prompt') }</Text>
@ -59,7 +58,7 @@ export const FurnitureExchangeCreditView: FC<{}> = props =>
{ LocalizeText('catalog.redeem.dialog.button.exchange') }
</Button>
</Column>
</Grid>
</Flex>
</NitroCardContentView>
</NitroCardView>
);

7
src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss
View File

@ -1,7 +0,0 @@
.nitro-external-image-widget {
.picture-preview {
width: 320px;
height: 320px;
}
}

34
src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx
View File

@ -1,6 +1,7 @@
import { FC, useCallback, useState } from 'react';
import { IPhotoData, LocalizeText, RoomWidgetUpdateExternalImageEvent } from '../../../../../api';
import { CreateEventDispatcherHook } from '../../../../../hooks';
import { Flex, Text } from '../../../../../common';
import { BatchUpdates, CreateEventDispatcherHook } from '../../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext';
@ -10,19 +11,23 @@ export const FurnitureExternalImageView: FC<{}> = props =>
const [ photoData, setPhotoData ] = useState<IPhotoData>(null);
const { eventDispatcher = null } = useRoomContext();
const close = useCallback(() =>
const close = () =>
{
setObjectId(-1);
setPhotoData(null)
}, []);
}
const onRoomWidgetUpdateExternalImageEvent = useCallback((event: RoomWidgetUpdateExternalImageEvent) =>
{
switch(event.type)
{
case RoomWidgetUpdateExternalImageEvent.UPDATE_EXTERNAL_IMAGE: {
setObjectId(event.objectId);
setPhotoData(event.photoData);
BatchUpdates(() =>
{
setObjectId(event.objectId);
setPhotoData(event.photoData);
});
}
}
}, []);
@ -35,17 +40,16 @@ export const FurnitureExternalImageView: FC<{}> = props =>
<NitroCardView className="nitro-external-image-widget">
<NitroCardHeaderView headerText={ '' } onCloseClick={ close } />
<NitroCardContentView>
<div className="d-flex justify-content-center align-items-center picture-preview border mb-2" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
<Flex center className="picture-preview border border-black" style={ photoData.w ? { backgroundImage: 'url(' + photoData.w + ')' } : {} }>
{ !photoData.w &&
<div className="text-black fw-bold">
{ LocalizeText('camera.loading') }
</div> }
</div>
<span className="text-center text-black">{ photoData.m && <div>{ photoData.m }</div> }</span>
<div className="d-flex align-items-center justify-content-between">
<span className="text-black">{ (photoData.n || '') }</span>
<span className="text-black">{ new Date(photoData.t * 1000).toLocaleDateString() }</span>
</div>
<Text bold>{ LocalizeText('camera.loading') }</Text> }
</Flex>
{ photoData.m && photoData.m.length &&
<Text center>{ photoData.m }</Text> }
<Flex alignItems="center" justifyContent="between">
<Text>{ (photoData.n || '') }</Text>
<Text>{ new Date(photoData.t * 1000).toLocaleDateString() }</Text>
</Flex>
</NitroCardContentView>
</NitroCardView>
);

3
src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss
View File

@ -1,3 +0,0 @@
.nitro-gift-opening {
min-width: 340px;
}

91
src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx
View File

@ -1,11 +1,11 @@
import { RoomObjectCategory, RoomObjectOperationType } from '@nitrots/nitro-renderer';
import { FC, useCallback, useMemo, useState } from 'react';
import { FC, useCallback, useEffect, useMemo, useState } from 'react';
import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, LocalizeText, RoomWidgetPresentOpenMessage, RoomWidgetUpdatePresentDataEvent, RoomWidgetUpdateRoomObjectEvent } from '../../../../../api';
import { Button, Column, Flex, Text } from '../../../../../common';
import { ProductTypeEnum } from '../../../../../components/catalog/common/ProductTypeEnum';
import { BatchUpdates } from '../../../../../hooks';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutButton, NitroLayoutFlex, NitroLayoutFlexColumn, NitroLayoutGiftCardView, NitroLayoutGrid, NitroLayoutGridColumn } from '../../../../../layout';
import { NitroLayoutBase } from '../../../../../layout/base';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext';
const FLOOR: string = 'floor';
@ -33,6 +33,11 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
const [ openRequested, setOpenRequested ] = useState(false);
const { roomSession = null, eventDispatcher = null, widgetHandler = null } = useRoomContext();
useEffect(() =>
{
console.log(imageUrl);
}, [ imageUrl ]);
const clearGift = useCallback(() =>
{
if(!openRequested) setObjectId(-1);
@ -48,6 +53,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
const onRoomWidgetUpdatePresentDataEvent = useCallback((event: RoomWidgetUpdatePresentDataEvent) =>
{
console.log(event.imageUrl, event.type);
switch(event.type)
{
case RoomWidgetUpdatePresentDataEvent.PACKAGEINFO: {
@ -111,6 +117,7 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
setPlacedItemId(event.placedItemId);
setPlacedItemType(event.placedItemType);
setPlacedInRoom(event.placedInRoom);
setImageUrl(event.imageUrl);
});
return;
}
@ -215,47 +222,43 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
return (
<NitroCardView className="nitro-gift-opening" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText(senderName ? 'widget.furni.present.window.title_from' : 'widget.furni.present.window.title', [ 'name' ], [ senderName ]) } onCloseClick={ close } />
<NitroCardContentView>
<NitroLayoutGrid>
{ (placedItemId === -1) &&
<NitroLayoutGridColumn size={ 12 }>
<NitroLayoutFlex className="justify-content-center align-items-center" overflow="auto">
<NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
</NitroLayoutFlex>
<NitroLayoutFlex gap={ 2 }>
{ senderName &&
<NitroLayoutButton className="text-nowrap w-100" variant="primary" onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
{ LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
</NitroLayoutButton> }
<NitroLayoutButton className="text-nowrap w-100" variant="success" onClick={ event => handleAction(ACTION_OPEN) }>
{ LocalizeText('widget.furni.present.open_gift') }
</NitroLayoutButton>
</NitroLayoutFlex>
</NitroLayoutGridColumn> }
{ (placedItemId > -1) &&
<NitroLayoutGridColumn size={ 12 }>
<NitroLayoutFlex className="justify-content-center align-items-center" overflow="auto" gap={ 2 }>
<img src={ imageUrl } alt="" />
<NitroLayoutBase className="text-black">
{ LocalizeText(productName, [ 'product' ], [ text ]) }
</NitroLayoutBase>
</NitroLayoutFlex>
<NitroLayoutFlexColumn gap={ 2 }>
<NitroLayoutFlex gap={ 2 }>
<NitroLayoutButton className="w-100" variant="primary" onClick={ event => handleAction(ACTION_INVENTORY) }>
{ LocalizeText('widget.furni.present.put_in_inventory') }
</NitroLayoutButton>
<NitroLayoutButton className="w-100" variant="success" onClick={ event => handleAction(ACTION_PLACE) }>
{ LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }
</NitroLayoutButton>
</NitroLayoutFlex>
{ (senderName && senderName.length) &&
<NitroLayoutButton className="w-100" variant="primary" onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
{ LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
</NitroLayoutButton> }
</NitroLayoutFlexColumn>
</NitroLayoutGridColumn> }
</NitroLayoutGrid>
<NitroCardContentView center>
{ (placedItemId === -1) &&
<Column overflow="hidden">
<Flex center overflow="auto">
<NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
</Flex>
<Flex gap={ 1 }>
{ senderName &&
<Button fullWidth onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
{ LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
</Button> }
<Button fullWidth variant="success" onClick={ event => handleAction(ACTION_OPEN) }>
{ LocalizeText('widget.furni.present.open_gift') }
</Button>
</Flex>
</Column> }
{ (placedItemId > -1) &&
<Column overflow="hidden">
<Flex center overflow="auto" gap={ 2 }>
<img src={ imageUrl } className="no-select" alt="" />
<Text wrap>{ LocalizeText(productName, [ 'product' ], [ text ]) }</Text>
</Flex>
<Column grow gap={ 1 }>
<Flex gap={ 1 }>
<Button fullWidth onClick={ event => handleAction(ACTION_INVENTORY) }>
{ LocalizeText('widget.furni.present.put_in_inventory') }
</Button>
<Button fullWidth variant="success" onClick={ event => handleAction(ACTION_PLACE) }>
{ LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }
</Button>
</Flex>
{ (senderName && senderName.length) &&
<Button fullWidth onClick={ event => handleAction(ACTION_GIVE_GIFT) }>
{ LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) }
</Button> }
</Column>
</Column> }
</NitroCardContentView>
</NitroCardView>
);