Gift Opening UI

This commit is contained in:
MyNameIsBatman 2021-09-12 03:58:32 -03:00
parent eb158e5166
commit c6b6694477
5 changed files with 81 additions and 8 deletions

View File

@ -8,7 +8,7 @@ export const NitroLayoutGiftCardView: FC<NitroLayoutGiftCardViewProps> = props =
const { figure = null, userName = null, message = null, editable = false, onChange = null } = props;
return (
<div className="nitro-gift-card d-flex">
<div className="nitro-gift-card d-flex text-black">
<div className="d-flex align-items-center justify-content-center gift-face flex-shrink-0">
{ !userName && <div className="gift-incognito"></div> }
{ figure && <div className="gift-avatar">

View File

@ -150,7 +150,7 @@ export const CatalogPageGiftView: FC<{}> = props =>
});
return;
case 'buy':
SendMessageHook(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, selectedColorId, selectedBoxIndex, selectedRibbonIndex, !showMyFace));
SendMessageHook(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, selectedColorId, selectedBoxIndex, selectedRibbonIndex, showMyFace));
return;
}
}, [ extraData, maxBoxIndex, maxRibbonIndex, message, offerId, pageId, receiverName, selectedBoxIndex, selectedColorId, selectedRibbonIndex, showMyFace ]);

View File

@ -6,3 +6,4 @@
@import './mannequin/FurnitureMannequinView';
@import './stickie/FurnitureStickieView';
@import './high-score/FurnitureHighScoreView';
@import './gift-opening/FurnitureGiftOpeningView';

View File

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

View File

@ -1,9 +1,14 @@
import { FC, useCallback, useState } from 'react';
import { LocalizeText, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdatePresentDataEvent } from '../../../../../api';
import { FC, useCallback, useMemo, useState } from 'react';
import { CreateLinkEvent, GetSessionDataManager, LocalizeText, RoomWidgetPresentOpenMessage, RoomWidgetRoomObjectUpdateEvent, RoomWidgetUpdatePresentDataEvent } from '../../../../../api';
import { CreateEventDispatcherHook } from '../../../../../hooks/events/event-dispatcher.base';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../../layout';
import { ProductTypeEnum } from '../../../../catalog/common/ProductTypeEnum';
import { useRoomContext } from '../../../context/RoomContext';
const FLOOR: string = 'floor';
const WALLPAPER: string = 'wallpaper';
const LANDSCAPE: string = 'landscape';
export const FurnitureGiftOpeningView: FC<{}> = props =>
{
const { eventDispatcher = null, widgetHandler = null } = useRoomContext();
@ -124,13 +129,77 @@ export const FurnitureGiftOpeningView: FC<{}> = props =>
setObjectId(-1);
}, []);
const isSpaces = useMemo(() =>
{
if(itemType !== ProductTypeEnum.WALL) return false;
const furniData = GetSessionDataManager().getWallItemData(classId);
if(!furniData) return false;
const className = furniData.className;
return (className === FLOOR || className === LANDSCAPE || className === WALLPAPER);
}, [ classId, itemType ]);
const productName = useMemo(() =>
{
if(objectId === -1) return '';
if(isSpaces)
return 'widget.furni.present.spaces.message_opened';
return 'widget.furni.present.message_opened';
}, [ objectId, isSpaces ]);
const handleAction = useCallback((action: string) =>
{
switch(action)
{
case 'give_gift':
CreateLinkEvent('catalog/open');
return;
case 'open':
setOpenRequested(true);
widgetHandler.processWidgetMessage(new RoomWidgetPresentOpenMessage(RoomWidgetPresentOpenMessage.OPEN_PRESENT, objectId));
return;
case 'room':
return;
case 'inventory':
return;
}
}, [ widgetHandler, objectId ]);
if(objectId === -1) return null;
return (
<NitroCardView className="nitro-exchange-credit" simple={ true }>
<NitroCardHeaderView headerText={ LocalizeText('catalog.redeem.dialog.title') } onCloseClick={ close } />
<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>
plz
{ placedItemId === -1 && <>
<NitroLayoutGiftCardView userName={ senderName } figure={ senderFigure } message={ text } />
<div className="d-flex gap-2 mt-2">
{ senderName && <button className="btn btn-primary w-100 text-nowrap" onClick={ () => handleAction('give_gift') }>{ LocalizeText('widget.furni.present.give_gift', ['name'], [senderName]) }</button> }
<button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('open') }>{ LocalizeText('widget.furni.present.open_gift') }</button>
</div>
</> }
{ placedItemId !== -1 && <>
<div className="d-flex gap-2 align-items-center">
<div>
<img src={ imageUrl } alt="" />
</div>
<div className="bg-muted rounded p-2 text-center text-black">
{ LocalizeText(productName, ['product'], [text]) }
</div>
</div>
<div className="d-flex gap-2 mt-3">
<button className="btn btn-primary w-100 text-nowrap" onClick={ () => handleAction('inventory') }>{ LocalizeText('widget.furni.present.put_in_inventory') }</button>
<button className="btn btn-success w-100 text-nowrap" onClick={ () => handleAction('room') }>{ LocalizeText(placedItemType === FLOOR ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') }</button>
</div>
{ senderName && <>
<button className="btn btn-primary w-100 text-nowrap mt-2" onClick={ () => handleAction('give_gift') }>{ LocalizeText('widget.furni.present.give_gift', ['name'], [senderName]) }</button>
</> }
</> }
</NitroCardContentView>
</NitroCardView>
);