diff --git a/src/views/room/widgets/furniture/FurnitureWidgets.scss b/src/views/room/widgets/furniture/FurnitureWidgets.scss index 55ebd35f..390c4e14 100644 --- a/src/views/room/widgets/furniture/FurnitureWidgets.scss +++ b/src/views/room/widgets/furniture/FurnitureWidgets.scss @@ -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'; diff --git a/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx b/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx index 576ac22b..d76b971a 100644 --- a/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx +++ b/src/views/room/widgets/furniture/background-color/FurnitureBackgroundColorView.tsx @@ -89,7 +89,7 @@ export const FurnitureBackgroundColorView: FC<{}> = props => return ( - + { LocalizeText('widget.backgroundcolor.hue') } diff --git a/src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx b/src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx index 9615bce6..f2398acd 100644 --- a/src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx +++ b/src/views/room/widgets/furniture/badge-display/FurnitureBadgeDisplayView.tsx @@ -9,8 +9,8 @@ import { FurnitureTrophyData } from '../trophy/FurnitureTrophyData'; export const FurnitureBadgeDisplayView: FC<{}> = props => { - const { eventDispatcher = null, widgetHandler = null } = useRoomContext(); const [ trophyData, setTrophyData ] = useState(null); + const { widgetHandler = null } = useRoomContext(); const onNitroEvent = useCallback((event: NitroEvent) => { diff --git a/src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx similarity index 85% rename from src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx rename to src/views/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx index 0732c592..ed12a5e4 100644 --- a/src/views/room/widgets/furniture/context-menu/views/EffectBoxConfirmView.tsx +++ b/src/views/room/widgets/furniture/context-menu/EffectBoxConfirmView.tsx @@ -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 { diff --git a/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx b/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx index c8b836fd..e018d0ce 100644 --- a/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx +++ b/src/views/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx @@ -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'; diff --git a/src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx similarity index 92% rename from src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx rename to src/views/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx index f6bc99eb..0744f514 100644 --- a/src/views/room/widgets/furniture/context-menu/views/MonsterPlantSeedConfirmView.tsx +++ b/src/views/room/widgets/furniture/context-menu/MonsterPlantSeedConfirmView.tsx @@ -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 { diff --git a/src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx b/src/views/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx similarity index 90% rename from src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx rename to src/views/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx index fb673709..aa122d03 100644 --- a/src/views/room/widgets/furniture/context-menu/views/PurchasableClothingConfirmView.tsx +++ b/src/views/room/widgets/furniture/context-menu/PurchasableClothingConfirmView.tsx @@ -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 { diff --git a/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss b/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss deleted file mode 100644 index 755c73d1..00000000 --- a/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.scss +++ /dev/null @@ -1,4 +0,0 @@ -.nitro-widget-custom-stack-height { - width: $nitro-widget-custom-stack-height-width; - height: $nitro-widget-custom-stack-height-height; -} diff --git a/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx b/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx index 0b7c7ee1..0b864967 100644 --- a/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx +++ b/src/views/room/widgets/furniture/custom-stack-height/FurnitureCustomStackHeightView.tsx @@ -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 ( - + - - - - - { LocalizeText('widget.custom.stack.height.text') } - - - - updateHeight(event) } - renderThumb={ (props, state) =>
{ state.valueNow }
} /> - updateHeight(parseFloat(event.target.value)) } /> - - sendUpdate(-100) }> - { LocalizeText('furniture.above.stack') } - - sendUpdate(0) }> - { LocalizeText('furniture.floor.level') } - - - - + + { LocalizeText('widget.custom.stack.height.text') } + + updateHeight(event) } + renderThumb={ (props, state) =>
{ state.valueNow }
} /> + updateHeight(parseFloat(event.target.value)) } /> + + + + + ); diff --git a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss b/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss deleted file mode 100644 index a83b0fe6..00000000 --- a/src/views/room/widgets/furniture/dimmer/FurnitureDimmerView.scss +++ /dev/null @@ -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; - } - } -} diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss deleted file mode 100644 index 4c286c5e..00000000 --- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.scss +++ /dev/null @@ -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; - } -} diff --git a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx index 81d7ed79..1c9295d9 100644 --- a/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx +++ b/src/views/room/widgets/furniture/exchange-credit/FurnitureExchangeCreditView.tsx @@ -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 ( - + - - - + + + - + { LocalizeText('creditfurni.description', [ 'credits' ], [ value.toString() ]) } { LocalizeText('creditfurni.prompt') } @@ -59,7 +58,7 @@ export const FurnitureExchangeCreditView: FC<{}> = props => { LocalizeText('catalog.redeem.dialog.button.exchange') } - + ); diff --git a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss deleted file mode 100644 index 4e39e9d0..00000000 --- a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.scss +++ /dev/null @@ -1,7 +0,0 @@ -.nitro-external-image-widget { - - .picture-preview { - width: 320px; - height: 320px; - } -} diff --git a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx index 0729d563..7b6f576b 100644 --- a/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx +++ b/src/views/room/widgets/furniture/external-image/FurnitureExternalImageView.tsx @@ -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(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 => -
+ { !photoData.w && -
- { LocalizeText('camera.loading') } -
} -
- { photoData.m &&
{ photoData.m }
} -
- { (photoData.n || '') } - { new Date(photoData.t * 1000).toLocaleDateString() } -
+ { LocalizeText('camera.loading') } } + + { photoData.m && photoData.m.length && + { photoData.m } } + + { (photoData.n || '') } + { new Date(photoData.t * 1000).toLocaleDateString() } + ); diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss deleted file mode 100644 index 9719609c..00000000 --- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.scss +++ /dev/null @@ -1,3 +0,0 @@ -.nitro-gift-opening { - min-width: 340px; -} diff --git a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx index 3ded35e9..c76b9112 100644 --- a/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx +++ b/src/views/room/widgets/furniture/gift-opening/FurnitureGiftOpeningView.tsx @@ -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 ( - - - { (placedItemId === -1) && - - - - - - { senderName && - handleAction(ACTION_GIVE_GIFT) }> - { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) } - } - handleAction(ACTION_OPEN) }> - { LocalizeText('widget.furni.present.open_gift') } - - - } - { (placedItemId > -1) && - - - - - { LocalizeText(productName, [ 'product' ], [ text ]) } - - - - - handleAction(ACTION_INVENTORY) }> - { LocalizeText('widget.furni.present.put_in_inventory') } - - handleAction(ACTION_PLACE) }> - { LocalizeText(placedInRoom ? 'widget.furni.present.keep_in_room' : 'widget.furni.present.place_in_room') } - - - { (senderName && senderName.length) && - handleAction(ACTION_GIVE_GIFT) }> - { LocalizeText('widget.furni.present.give_gift', [ 'name' ], [ senderName ]) } - } - - } - + + { (placedItemId === -1) && + + + + + + { senderName && + } + + + } + { (placedItemId > -1) && + + + + { LocalizeText(productName, [ 'product' ], [ text ]) } + + + + + + + { (senderName && senderName.length) && + } + + } );