nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 11:23:05 +02:00
Code Issues Packages Projects Releases Wiki Activity

More catalog changes

Browse Source
This commit is contained in:
Bill 2022-02-02 15:54:40 -05:00
parent 55cb571290
commit 63583035be
47 changed files with 187 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/catalog/context/CatalogContext.tsx → src/components/catalog/CatalogContext.tsx
View File

@ -1,12 +1,12 @@
import { FrontPageItem, RoomPreviewer } from '@nitrots/nitro-renderer';
import { createContext, Dispatch, FC, ProviderProps, SetStateAction, useContext } from 'react';
import { ICatalogNode } from '../common/ICatalogNode';
import { ICatalogOptions } from '../common/ICatalogOptions';
import { ICatalogPage } from '../common/ICatalogPage';
import { IPageLocalization } from '../common/IPageLocalization';
import { IPurchasableOffer } from '../common/IPurchasableOffer';
import { IPurchaseOptions } from '../common/IPurchaseOptions';
import { SearchResult } from '../common/SearchResult';
import { ICatalogNode } from './common/ICatalogNode';
import { ICatalogOptions } from './common/ICatalogOptions';
import { ICatalogPage } from './common/ICatalogPage';
import { IPageLocalization } from './common/IPageLocalization';
import { IPurchasableOffer } from './common/IPurchasableOffer';
import { IPurchaseOptions } from './common/IPurchaseOptions';
import { SearchResult } from './common/SearchResult';
interface ICatalogContext
{

2
src/components/catalog/CatalogMessageHandler.tsx
View File

@ -11,6 +11,7 @@ import { dispatchUiEvent } from '../../hooks/events/ui/ui-event';
import { CreateMessageHook } from '../../hooks/messages/message-event';
import { NotificationAlertType } from '../../views/notification-center/common/NotificationAlertType';
import { NotificationUtilities } from '../../views/notification-center/common/NotificationUtilities';
import { useCatalogContext } from './CatalogContext';
import { CatalogNode } from './common/CatalogNode';
import { CatalogPetPalette } from './common/CatalogPetPalette';
import { CatalogType } from './common/CatalogType';
@ -23,7 +24,6 @@ import { PageLocalization } from './common/PageLocalization';
import { Product } from './common/Product';
import { ProductTypeEnum } from './common/ProductTypeEnum';
import { SubscriptionInfo } from './common/SubscriptionInfo';
import { useCatalogContext } from './context/CatalogContext';
export const CatalogMessageHandler: FC<{}> = props =>
{

81
src/components/catalog/CatalogView.scss
View File

@ -12,6 +12,29 @@
}
}
.catalog-icon-image {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
}
.nitro-catalog-gift {
width: 325px;
.gift-preview {
width: 80px;
height: 80px;
overflow: hidden;
}
.gift-color {
width: 15px;
height: 15px;
border-radius: $border-radius;
}
}
.nitro-catalog-navigation-grid-container {
border-radius: 0.25rem;
border-color: #B6BEC5 !important;
@ -34,4 +57,60 @@
}
}
@import './views/CatalogViews';
.nitro-catalog-layout-info-loyalty {
.info-loyalty-content {
background-repeat: no-repeat;
background-position: top right;
background-image: url('../../../../../assets/images/catalog/diamond_info_illustration.gif');
padding-right:123px;
}
.info-image {
width: 123px;
height:350px;
background-image: url('../../../../../assets/images/catalog/diamond_info_illustration.gif');
}
}
.nitro-catalog-layout-vip-buy-grid {
.layout-grid-item {
height: 50px !important;
max-height: 50px !important;
.icon-hc-banner {
width: 68px;
height: 40px;
background: url("../../../../../assets/images/catalog/hc_big.png") center no-repeat;
}
}
}
.nitro-catalog-layout-marketplace-grid {
.layout-grid-item {
height: 75px !important;
max-height: 75px !important;
}
}
.nitro-catalog-layout-vip-gifts-grid {
.layout-grid-item {
height: 55px !important;
max-height: 55px !important;
}
}
.nitro-catalog-layout-marketplace-post-offer {
width: $marketplace-post-offer-width;
height: $marketplace-post-offer-height;
}
.nitro-catalog-layout-bundle-grid {
.layout-grid-item {
background-color: transparent;
}
}

11
src/components/catalog/CatalogView.tsx
View File

@ -9,6 +9,7 @@ import { BatchUpdates } from '../../hooks';
import { useUiEvent } from '../../hooks/events/ui/ui-event';
import { SendMessageHook } from '../../hooks/messages/message-event';
import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../layout';
import { CatalogContextProvider } from './CatalogContext';
import { CatalogMessageHandler } from './CatalogMessageHandler';
import { CatalogPage } from './common/CatalogPage';
import { CatalogType } from './common/CatalogType';
@ -20,7 +21,6 @@ import { IPurchasableOffer } from './common/IPurchasableOffer';
import { IPurchaseOptions } from './common/IPurchaseOptions';
import { RequestedPage } from './common/RequestedPage';
import { SearchResult } from './common/SearchResult';
import { CatalogContextProvider } from './context/CatalogContext';
import { CatalogGiftView } from './views/gift/CatalogGiftView';
import { CatalogNavigationView } from './views/navigation/CatalogNavigationView';
import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
@ -43,6 +43,7 @@ export const CatalogView: FC<{}> = props =>
const [ searchResult, setSearchResult ] = useState<SearchResult>(null);
const [ frontPageItems, setFrontPageItems ] = useState<FrontPageItem[]>([]);
const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
const [ navigationHidden, setNavigationHidden ] = useState(false);
const [ purchaseOptions, setPurchaseOptions ] = useState<IPurchaseOptions>({});
const [ catalogOptions, setCatalogOptions ] = useState<ICatalogOptions>({});
@ -129,6 +130,7 @@ export const CatalogView: FC<{}> = props =>
{
setCurrentPage(catalogPage);
setPreviousPageId(prevValue => ((pageId !== -1) ? pageId : prevValue));
setNavigationHidden(false);
if((offerId > -1) && catalogPage.offers.length)
{
@ -428,12 +430,13 @@ export const CatalogView: FC<{}> = props =>
</NitroCardTabsView>
<NitroCardContentView>
<Grid>
{ !navigationHidden &&
<Column size={ 3 } overflow="hidden">
{ activeNodes && (activeNodes.length > 0) &&
<CatalogNavigationView node={ activeNodes[0] } /> }
</Column>
<Column size={ 9 } overflow="hidden">
{ GetCatalogLayout(currentPage) }
</Column> }
<Column size={ !navigationHidden ? 9 : 12 } overflow="hidden">
{ GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
</Column>
</Grid>
</NitroCardContentView>

9
src/components/catalog/views/CatalogViews.scss
View File

@ -1,9 +0,0 @@
.catalog-icon-image {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
}
@import './gift/CatalogGiftView';
@import './page/CatalogPageView';

15
src/components/catalog/views/gift/CatalogGiftView.scss
View File

@ -1,15 +0,0 @@
.nitro-catalog-gift {
width: 325px;
.gift-preview {
width: 80px;
height: 80px;
overflow: hidden;
}
.gift-color {
width: 15px;
height: 15px;
border-radius: $border-radius;
}
}

2
src/components/catalog/views/gift/CatalogGiftView.tsx
View File

@ -15,7 +15,7 @@ import { BatchUpdates, SendMessageHook, useUiEvent } from '../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView, NitroLayoutGiftCardView } from '../../../../layout';
import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
import { FurniImageView } from '../../../../views/shared/furni-image/FurniImageView';
import { useCatalogContext } from '../../context/CatalogContext';
import { useCatalogContext } from '../../CatalogContext';
export const CatalogGiftView: FC<{}> = props =>
{

2
src/components/catalog/views/navigation/CatalogNavigationItemView.tsx
View File

@ -2,8 +2,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC } from 'react';
import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
import { Text } from '../../../../common/Text';
import { useCatalogContext } from '../../CatalogContext';
import { ICatalogNode } from '../../common/ICatalogNode';
import { useCatalogContext } from '../../context/CatalogContext';
import { CatalogIconView } from '../catalog-icon/CatalogIconView';
import { CatalogNavigationSetView } from './CatalogNavigationSetView';

4
src/components/catalog/views/navigation/CatalogNavigationView.tsx
View File

@ -1,9 +1,9 @@
import { FC } from 'react';
import { Column } from '../../../../common/Column';
import { Grid } from '../../../../common/Grid';
import { useCatalogContext } from '../../CatalogContext';
import { ICatalogNode } from '../../common/ICatalogNode';
import { useCatalogContext } from '../../context/CatalogContext';
import { CatalogSearchView } from '../search/CatalogSearchView';
import { CatalogSearchView } from '../page/common/CatalogSearchView';
import { CatalogNavigationItemView } from './CatalogNavigationItemView';
import { CatalogNavigationSetView } from './CatalogNavigationSetView';

24
src/components/catalog/views/page-details/CatalogPageDetailsView.tsx
View File

@ -1,24 +0,0 @@
import { FC } from 'react';
import { NitroLayoutFlexColumn } from '../../../../layout';
import { ICatalogPage } from '../../common/ICatalogPage';
export interface CatalogPageDetailsViewProps
{
page: ICatalogPage;
}
export const CatalogPageDetailsView: FC<CatalogPageDetailsViewProps> = props =>
{
const { page = null } = props;
if(!page) return null;
const imageUrl = page.localization.getImage(1);
return (
<NitroLayoutFlexColumn className="justify-content-center align-items-center h-100" overflow="hidden" gap={ 2 }>
{ imageUrl && <img className="" alt="" src={ imageUrl } /> }
<div className="d-flex flex-column fs-6 text-center text-black lh-sm overflow-auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
</NitroLayoutFlexColumn>
);
}

2
src/components/catalog/views/page/CatalogPageView.scss
View File

@ -1,2 +0,0 @@
@import './layout/CatalogLayout';
@import './purchase/CatalogPurchaseView';

0
src/components/catalog/views/page/offers/CatalogGridOfferView.tsx → src/components/catalog/views/page/common/CatalogGridOfferView.tsx
View File

0
src/components/catalog/views/page/redeem-voucher/CatalogRedeemVoucherView.tsx → src/components/catalog/views/page/common/CatalogRedeemVoucherView.tsx
View File

28
src/components/catalog/views/search/CatalogSearchView.tsx → src/components/catalog/views/page/common/CatalogSearchView.tsx
View File

@ -1,20 +1,20 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { IFurnitureData } from '@nitrots/nitro-renderer';
import { FC, useCallback, useEffect, useState } from 'react';
import { GetSessionDataManager, LocalizeText } from '../../../../api';
import { Button } from '../../../../common/Button';
import { Flex } from '../../../../common/Flex';
import { BatchUpdates } from '../../../../hooks';
import { CatalogPage } from '../../common/CatalogPage';
import { CatalogType } from '../../common/CatalogType';
import { FilterCatalogNode, GetOfferNodes } from '../../common/CatalogUtilities';
import { FurnitureOffer } from '../../common/FurnitureOffer';
import { ICatalogNode } from '../../common/ICatalogNode';
import { ICatalogPage } from '../../common/ICatalogPage';
import { IPurchasableOffer } from '../../common/IPurchasableOffer';
import { PageLocalization } from '../../common/PageLocalization';
import { SearchResult } from '../../common/SearchResult';
import { useCatalogContext } from '../../context/CatalogContext';
import { GetSessionDataManager, LocalizeText } from '../../../../../api';
import { Button } from '../../../../../common/Button';
import { Flex } from '../../../../../common/Flex';
import { BatchUpdates } from '../../../../../hooks';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogPage } from '../../../common/CatalogPage';
import { CatalogType } from '../../../common/CatalogType';
import { FilterCatalogNode, GetOfferNodes } from '../../../common/CatalogUtilities';
import { FurnitureOffer } from '../../../common/FurnitureOffer';
import { ICatalogNode } from '../../../common/ICatalogNode';
import { ICatalogPage } from '../../../common/ICatalogPage';
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
import { PageLocalization } from '../../../common/PageLocalization';
import { SearchResult } from '../../../common/SearchResult';
export const CatalogSearchView: FC<{}> = props =>
{

57
src/components/catalog/views/page/layout/CatalogLayout.scss
View File

@ -1,57 +0,0 @@
.nitro-catalog-layout-info-loyalty {
.info-loyalty-content {
background-repeat: no-repeat;
background-position: top right;
background-image: url('../../../../../assets/images/catalog/diamond_info_illustration.gif');
padding-right:123px;
}
.info-image {
width: 123px;
height:350px;
background-image: url('../../../../../assets/images/catalog/diamond_info_illustration.gif');
}
}
.nitro-catalog-layout-vip-buy-grid {
.layout-grid-item {
height: 50px !important;
max-height: 50px !important;
.icon-hc-banner {
width: 68px;
height: 40px;
background: url("../../../../../assets/images/catalog/hc_big.png") center no-repeat;
}
}
}
.nitro-catalog-layout-marketplace-grid {
.layout-grid-item {
height: 75px !important;
max-height: 75px !important;
}
}
.nitro-catalog-layout-vip-gifts-grid {
.layout-grid-item {
height: 55px !important;
max-height: 55px !important;
}
}
.nitro-catalog-layout-marketplace-post-offer {
width: $marketplace-post-offer-width;
height: $marketplace-post-offer-height;
}
.nitro-catalog-layout-bundle-grid {
.layout-grid-item {
background-color: transparent;
}
}

1
src/components/catalog/views/page/layout/CatalogLayout.types.ts
View File

@ -3,4 +3,5 @@ import { ICatalogPage } from '../../../common/ICatalogPage';
export interface CatalogLayoutProps
{
page: ICatalogPage;
hideNavigation: () => void;
}

2
src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
View File

@ -5,7 +5,7 @@ import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogBadgeSelectorWidgetView } from '../widgets/CatalogBadgeSelectorWidgetView';
import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';

2
src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
View File

@ -4,7 +4,7 @@ import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView';

2
src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
View File

@ -4,7 +4,7 @@ import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogGuildBadgeWidgetView } from '../widgets/CatalogGuildBadgeWidgetView';
import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';

33
src/components/catalog/views/page/layout/CatalogLayoutGuildForumView.tsx
View File

@ -2,10 +2,15 @@ import { CatalogGroupsComposer } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { Base } from '../../../../../common/Base';
import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { SendMessageHook } from '../../../../../hooks/messages';
import { useCatalogContext } from '../../../context/CatalogContext';
import { CatalogProductPreviewView } from '../offers/CatalogPageOfferPreviewView';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogFirstProductSelectorWidgetView } from '../widgets/CatalogFirstProductSelectorWidgetView';
import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
import { CatalogLayoutProps } from './CatalogLayout.types';
export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
@ -18,21 +23,31 @@ export const CatalogLayouGuildForumView: FC<CatalogLayoutProps> = props =>
useEffect(() =>
{
SendMessageHook(new CatalogGroupsComposer());
if(page.offers.length) setCurrentOffer(page.offers[0]);
}, [ page, setCurrentOffer ]);
}, [ page ]);
return (
<>
<CatalogFirstProductSelectorWidgetView />
<Grid>
<Column className="bg-muted rounded p-2 text-black" size={ 7 } overflow="hidden">
<Base className="overflow-auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
</Column>
<Column size={ 5 } overflow="hidden">
<Column size={ 5 } overflow="hidden" gap={ 1 }>
{ !!currentOffer &&
<CatalogProductPreviewView offer={ currentOffer } roomPreviewer={ null } extra={ groups[selectedGroupIndex] ? groups[selectedGroupIndex].groupId.toString() : '' } disabled={ !(!!groups[selectedGroupIndex]) }>
{/* <CatalogSelectGroupView selectedGroupIndex={ selectedGroupIndex } setSelectedGroupIndex={ setSelectedGroupIndex } /> */}
</CatalogProductPreviewView> }
<>
<Column grow gap={ 1 }>
<Text truncate>{ currentOffer.localizationName }</Text>
<Base grow>
<CatalogGuildSelectorWidgetView />
</Base>
<Flex justifyContent="end">
<CatalogTotalPriceWidget alignItems="end" />
</Flex>
<CatalogPurchaseWidgetView noGiftOption={ true } />
</Column>
</> }
</Column>
</Grid>
</>
);
}

2
src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx
View File

@ -5,7 +5,7 @@ import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
import { CatalogSpacesWidgetView } from '../widgets/CatalogSpacesWidgetView';
import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';

2
src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
View File

@ -3,7 +3,7 @@ import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Grid } from '../../../../../common/Grid';
import { Text } from '../../../../../common/Text';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';

2
src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
View File

@ -15,8 +15,8 @@ import { LoadingSpinnerView } from '../../../../../layout/loading-spinner/Loadin
import { GetCurrencyAmount } from '../../../../../views/purse/common/CurrencyHelper';
import { GLOBAL_PURSE } from '../../../../../views/purse/PurseView';
import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogPurchaseState } from '../../../common/CatalogPurchaseState';
import { useCatalogContext } from '../../../context/CatalogContext';
import { CatalogLayoutProps } from './CatalogLayout.types';
export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>

8
src/components/catalog/views/page/layout/GetCatalogLayout.tsx
View File

@ -19,11 +19,11 @@ import { CatalogLayoutMarketplacePublicItemsView } from './marketplace/CatalogLa
import { CatalogLayoutPetView } from './pets/CatalogLayoutPetView';
import { CatalogLayoutVipGiftsView } from './vip-gifts/CatalogLayoutVipGiftsView';
export const GetCatalogLayout = (page: ICatalogPage) =>
export const GetCatalogLayout = (page: ICatalogPage, hideNavigation: () => void) =>
{
if(!page) return null;
const layoutProps: CatalogLayoutProps = { page };
const layoutProps: CatalogLayoutProps = { page, hideNavigation };
switch(page.layoutCode)
{
@ -58,11 +58,11 @@ export const GetCatalogLayout = (page: ICatalogPage) =>
case 'spaces_new':
return <CatalogLayoutSpacesView { ...layoutProps } />;
case 'trophies':
return <CatalogLayoutTrophiesView page={ page } />;
return <CatalogLayoutTrophiesView { ...layoutProps } />;
case 'info_loyalty':
return <CatalogLayoutInfoLoyaltyView { ...layoutProps } />;
case 'badge_display':
return <CatalogLayoutBadgeDisplayView page={ page } />;
return <CatalogLayoutBadgeDisplayView { ...layoutProps } />;
//case 'default_3x3_color_grouping':
//return <CatalogLayoutColorGroupingView { ...layoutProps } />;
case 'bots':

13
src/components/catalog/views/page/layout/frontpage4/CatalogLayoutFrontpage4View.tsx
View File

@ -1,16 +1,16 @@
import { FrontPageItem } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { FC, useCallback, useEffect } from 'react';
import { CreateLinkEvent } from '../../../../../../api';
import { Column } from '../../../../../../common/Column';
import { Grid } from '../../../../../../common/Grid';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { CatalogRedeemVoucherView } from '../../redeem-voucher/CatalogRedeemVoucherView';
import { useCatalogContext } from '../../../../CatalogContext';
import { CatalogRedeemVoucherView } from '../../common/CatalogRedeemVoucherView';
import { CatalogLayoutProps } from '../CatalogLayout.types';
import { CatalogLayoutFrontPageItemView } from './CatalogLayoutFrontPageItemView';
export const CatalogLayoutFrontpage4View: FC<CatalogLayoutProps> = props =>
{
const { page = null } = props;
const { page = null, hideNavigation = null } = props;
const { frontPageItems = [] } = useCatalogContext();
const selectItem = useCallback((item: FrontPageItem) =>
@ -26,6 +26,11 @@ export const CatalogLayoutFrontpage4View: FC<CatalogLayoutProps> = props =>
}
}, []);
useEffect(() =>
{
hideNavigation();
}, [ page, hideNavigation ]);
return (
<Grid>
<Column size={ 4 }>

2
src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
View File

@ -12,7 +12,7 @@ import { BatchUpdates, SendMessageHook, useUiEvent } from '../../../../../../hoo
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../../layout';
import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
import { FurnitureItem } from '../../../../../inventory/common/FurnitureItem';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { useCatalogContext } from '../../../../CatalogContext';
export const MarketplacePostOfferView : FC<{}> = props =>
{

2
src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
View File

@ -14,8 +14,8 @@ import { CatalogWidgetEvent } from '../../../../../../events/catalog/CatalogWidg
import { BatchUpdates, useUiEvent } from '../../../../../../hooks';
import { SendMessageHook } from '../../../../../../hooks/messages/message-event';
import { PetImageView } from '../../../../../../views/shared/pet-image/PetImageView';
import { useCatalogContext } from '../../../../CatalogContext';
import { GetPetAvailableColors, GetPetIndexFromLocalization } from '../../../../common/CatalogUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { CatalogAddOnBadgeWidgetView } from '../../widgets/CatalogAddOnBadgeWidgetView';
import { CatalogPurchaseWidgetView } from '../../widgets/CatalogPurchaseWidgetView';
import { CatalogTotalPriceWidget } from '../../widgets/CatalogTotalPriceWidget';

2
src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
View File

@ -5,7 +5,7 @@ import { Grid } from '../../../../../../common/Grid';
import { Text } from '../../../../../../common/Text';
import { SendMessageHook } from '../../../../../../hooks';
import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { useCatalogContext } from '../../../../CatalogContext';
import { CatalogLayoutProps } from '../CatalogLayout.types';
import { VipGiftItem } from './VipGiftItemView';

49
src/components/catalog/views/page/offers/CatalogPageOfferPreviewView.tsx
View File

@ -1,49 +0,0 @@
import { RoomPreviewer } from '@nitrots/nitro-renderer';
import { FC } from 'react';
import { Base } from '../../../../../common/Base';
import { Column } from '../../../../../common/Column';
import { Text } from '../../../../../common/Text';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { LimitedEditionCompletePlateView } from '../../../../../views/shared/limited-edition/LimitedEditionCompletePlateView';
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
import { CatalogPurchaseView } from '../purchase/CatalogPurchaseView';
export interface CatalogProductPreviewViewProps
{
offer: IPurchasableOffer;
roomPreviewer: RoomPreviewer;
badgeCode?: string;
extra?: string;
disabled?: boolean;
}
export const CatalogProductPreviewView: FC<CatalogProductPreviewViewProps> = props =>
{
const { offer = null, roomPreviewer = null, badgeCode = null, extra = null, disabled = false, children = null } = props;
const product = ((offer && offer.product) || null);
return (
<>
<Column overflow="hidden" position="relative" gap={ 0 }>
{ product.isUniqueLimitedItem &&
<Base fullWidth position="absolute" className="top-1">
<LimitedEditionCompletePlateView className="mx-auto" uniqueLimitedItemsLeft={ product.uniqueLimitedItemsLeft } uniqueLimitedSeriesSize={ product.uniqueLimitedItemSeriesSize } />
</Base> }
{ badgeCode && (badgeCode.length > 0) &&
<Base position="absolute" className="top-1 end-1">
<BadgeImageView badgeCode={ badgeCode } isGroup={ true } />
</Base> }
{ offer.badgeCode && (offer.badgeCode.length > 0) &&
<Base position="absolute" className="top-1 end-1">
<BadgeImageView badgeCode={ offer.badgeCode } />
</Base> }
</Column>
<Column grow>
<Text grow truncate>{ offer.localizationName }</Text>
{ children }
<CatalogPurchaseView offer={ offer } pageId={ ((offer.page && offer.page.pageId) || -1) } extra={ extra } disabled={ disabled } />
</Column>
</>
);
}

27
src/components/catalog/views/page/product/CatalogProductView.tsx
View File

@ -1,27 +0,0 @@
import { FC } from 'react';
import { LayoutGridItem, LayoutGridItemProps } from '../../../../../common/layout/LayoutGridItem';
import { AvatarImageView } from '../../../../../views/shared/avatar-image/AvatarImageView';
import { IProduct } from '../../../common/IProduct';
import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
export interface CatalogProductViewProps extends LayoutGridItemProps
{
product: IProduct;
}
export const CatalogProductView: FC<CatalogProductViewProps> = props =>
{
const { product = null, children = null, ...rest } = props;
if(!product) return null;
const iconUrl = product.getIconUrl(null);
return (
<LayoutGridItem itemImage={ iconUrl } itemCount={ product.productCount } itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) } itemUniqueNumber={ product.uniqueLimitedItemSeriesSize } { ...rest }>
{ (product.productType === ProductTypeEnum.ROBOT) &&
<AvatarImageView figure={ product.extraParam } direction={ 3 } headOnly={ true } /> }
{ children }
</LayoutGridItem>
);
}

6
src/components/catalog/views/page/purchase/CatalogPurchaseView.scss
View File

@ -1,6 +0,0 @@
.quantity-input {
min-height: 20px;
max-height: 20px;
width: 29px;
padding: 3px 5px;
}

85
src/components/catalog/views/page/purchase/CatalogPurchaseView.tsx
View File

@ -1,85 +0,0 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { FC, useEffect, useState } from 'react';
import { LocalizeText } from '../../../../../api';
import { Column } from '../../../../../common/Column';
import { Flex } from '../../../../../common/Flex';
import { Text } from '../../../../../common/Text';
import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
import { Offer } from '../../../common/Offer';
export interface CatalogPurchaseViewProps
{
offer: IPurchasableOffer;
pageId: number;
extra?: string;
disabled?: boolean;
}
export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
{
const { offer = null, pageId = -1, extra = '', disabled = false } = props;
const [ quantity, setQuantity ] = useState(1);
const increaseQuantity = () =>
{
let newQuantity = quantity + 1;
if(newQuantity > 99) newQuantity = 99
setQuantity(newQuantity);
}
const decreaseQuantity = () =>
{
let newQuantity = quantity - 1;
if(newQuantity <= 0) newQuantity = 1;
setQuantity(newQuantity);
}
const updateQuantity = (amount: number) =>
{
if(isNaN(amount) || (amount <= 0)) amount = 1;
if(amount > 99) amount = 99;
setQuantity(amount);
}
useEffect(() =>
{
setQuantity(1);
}, [ offer ]);
const extraData = ((extra && extra.length) ? extra : (offer.product.extraParam || null));
return (
<Column fullWidth grow justifyContent="end">
<Flex alignItems="end">
<div className="flex-grow-1 align-items-end">
<Text>{ LocalizeText('catalog.bundlewidget.price') }</Text>
{ offer.bundlePurchaseAllowed &&
<Flex alignItems="center" gap={ 1 }>
<FontAwesomeIcon icon="caret-left" className="text-black cursor-pointer" onClick={ decreaseQuantity } />
<input type="number" className="form-control form-control-sm quantity-input" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber)} />
<FontAwesomeIcon icon="caret-right" className="text-black cursor-pointer" onClick={ increaseQuantity } />
</Flex> }
</div>
<Column gap={ 1 }>
{ ((offer.priceType === Offer.PRICE_TYPE_CREDITS_ACTIVITYPOINTS) || (offer.priceType === Offer.PRICE_TYPE_CREDITS)) &&
<Flex alignItems="center" justifyContent="end" gap={ 1 }>
<Text>{ offer.priceInCredits * quantity }</Text>
<CurrencyIcon type={ -1 } />
</Flex> }
{ ((offer.priceType === Offer.PRICE_TYPE_CREDITS_ACTIVITYPOINTS) || (offer.priceType === Offer.PRICE_TYPE_ACTIVITYPOINTS)) &&
<Flex alignItems="center" justifyContent="end" gap={ 1 }>
<Text>{ offer.priceInActivityPoints * quantity }</Text>
<CurrencyIcon type={ offer.activityPointType } />
</Flex> }
</Column>
</Flex>
</Column>
);
}

2
src/components/catalog/views/page/widgets/CatalogAddOnBadgeWidgetView.tsx
View File

@ -1,7 +1,7 @@
import { FC } from 'react';
import { BaseProps } from '../../../../../common/Base';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
interface CatalogAddOnBadgeWidgetViewProps extends BaseProps<HTMLDivElement>
{

2
src/components/catalog/views/page/widgets/CatalogBadgeSelectorWidgetView.tsx
View File

@ -6,7 +6,7 @@ import { InventoryBadgesUpdatedEvent } from '../../../../../events';
import { InventoryBadgesRequestEvent } from '../../../../../events/inventory/InventoryBadgesRequestEvent';
import { dispatchUiEvent, useUiEvent } from '../../../../../hooks';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
const EXCLUDED_BADGE_CODES: string[] = [];

2
src/components/catalog/views/page/widgets/CatalogBundleGridWidgetView.tsx
View File

@ -1,7 +1,7 @@
import { FC } from 'react';
import { Grid, GridProps } from '../../../../../common/Grid';
import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
interface CatalogBundleGridWidgetViewProps extends GridProps
{

2
src/components/catalog/views/page/widgets/CatalogFirstProductSelectorWidgetView.tsx
View File

@ -1,5 +1,5 @@
import { FC, useEffect } from 'react';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
export const CatalogFirstProductSelectorWidgetView: FC<{}> = props =>
{

2
src/components/catalog/views/page/widgets/CatalogGuildBadgeWidgetView.tsx
View File

@ -2,7 +2,7 @@ import { StringDataType } from '@nitrots/nitro-renderer';
import { FC, useMemo } from 'react';
import { BaseProps } from '../../../../../common/Base';
import { BadgeImageView } from '../../../../../views/shared/badge-image/BadgeImageView';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
interface CatalogGuildBadgeWidgetViewProps extends BaseProps<HTMLDivElement>
{

2
src/components/catalog/views/page/widgets/CatalogGuildSelectorWidgetView.tsx
View File

@ -5,7 +5,7 @@ import { Base } from '../../../../../common/Base';
import { Button } from '../../../../../common/Button';
import { Flex } from '../../../../../common/Flex';
import { SendMessageHook } from '../../../../../hooks';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
export const CatalogGuildSelectorWidgetView: FC<{}> = props =>
{

4
src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
View File

@ -2,10 +2,10 @@ import { FC } from 'react';
import { Grid, GridProps } from '../../../../../common/Grid';
import { CatalogSetExtraPurchaseParameterEvent } from '../../../../../events';
import { dispatchUiEvent } from '../../../../../hooks';
import { useCatalogContext } from '../../../CatalogContext';
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
import { useCatalogContext } from '../../../context/CatalogContext';
import { CatalogGridOfferView } from '../offers/CatalogGridOfferView';
import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
interface CatalogItemGridWidgetViewProps extends GridProps
{

2
src/components/catalog/views/page/widgets/CatalogLimitedItemWidgetView.tsx
View File

@ -1,8 +1,8 @@
import { FC } from 'react';
import { Base, BaseProps } from '../../../../../common/Base';
import { LimitedEditionCompletePlateView } from '../../../../../views/shared/limited-edition/LimitedEditionCompletePlateView';
import { useCatalogContext } from '../../../CatalogContext';
import { Offer } from '../../../common/Offer';
import { useCatalogContext } from '../../../context/CatalogContext';
export const CatalogLimitedItemWidgetView: FC<BaseProps<HTMLDivElement>> = props =>
{

2
src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
View File

@ -3,8 +3,8 @@ import { FC } from 'react';
import { Flex } from '../../../../../common/Flex';
import { Text } from '../../../../../common/Text';
import { CurrencyIcon } from '../../../../../views/shared/currency-icon/CurrencyIcon';
import { useCatalogContext } from '../../../CatalogContext';
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
import { useCatalogContext } from '../../../context/CatalogContext';
interface CatalogPriceDisplayWidgetViewProps
{

2
src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
View File

@ -8,9 +8,9 @@ import { CatalogWidgetEvent } from '../../../../../events/catalog/CatalogWidgetE
import { SendMessageHook, useUiEvent } from '../../../../../hooks';
import { LoadingSpinnerView } from '../../../../../layout';
import { GetCurrencyAmount } from '../../../../../views/purse/common/CurrencyHelper';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogPurchaseState } from '../../../common/CatalogPurchaseState';
import { Offer } from '../../../common/Offer';
import { useCatalogContext } from '../../../context/CatalogContext';
interface CatalogPurchaseWidgetViewProps
{

2
src/components/catalog/views/page/widgets/CatalogSimplePriceWidgetView.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { Flex, FlexProps } from '../../../../../common/Flex';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogPriceDisplayWidgetView } from './CatalogPriceDisplayWidgetView';
interface CatalogSimplePriceWidgetViewProps extends FlexProps

4
src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx
View File

@ -4,11 +4,11 @@ import { Button } from '../../../../../common/Button';
import { ButtonGroup } from '../../../../../common/ButtonGroup';
import { Grid, GridProps } from '../../../../../common/Grid';
import { BatchUpdates } from '../../../../../hooks';
import { useCatalogContext } from '../../../CatalogContext';
import { IPurchasableOffer } from '../../../common/IPurchasableOffer';
import { Offer } from '../../../common/Offer';
import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
import { useCatalogContext } from '../../../context/CatalogContext';
import { CatalogGridOfferView } from '../offers/CatalogGridOfferView';
import { CatalogGridOfferView } from '../common/CatalogGridOfferView';
interface CatalogSpacesWidgetViewProps extends GridProps
{

2
src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
View File

@ -3,7 +3,7 @@ import { FC } from 'react';
import { LocalizeText } from '../../../../../api';
import { Flex } from '../../../../../common/Flex';
import { Text } from '../../../../../common/Text';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
const MIN_VALUE: number = 1;
const MAX_VALUE: number = 100;

2
src/components/catalog/views/page/widgets/CatalogTotalPriceWidget.tsx
View File

@ -1,6 +1,6 @@
import { FC } from 'react';
import { Column, ColumnProps } from '../../../../../common/Column';
import { useCatalogContext } from '../../../context/CatalogContext';
import { useCatalogContext } from '../../../CatalogContext';
import { CatalogPriceDisplayWidgetView } from './CatalogPriceDisplayWidgetView';
interface CatalogSimplePriceWidgetViewProps extends ColumnProps

2
src/components/catalog/views/page/widgets/CatalogViewProductWidgetView.tsx
View File

@ -5,10 +5,10 @@ import { Column } from '../../../../../common/Column';
import { Grid } from '../../../../../common/Grid';
import { LayoutGridItem } from '../../../../../common/layout/LayoutGridItem';
import { RoomPreviewerView } from '../../../../../views/shared/room-previewer/RoomPreviewerView';
import { useCatalogContext } from '../../../CatalogContext';
import { FurniCategory } from '../../../common/FurniCategory';
import { Offer } from '../../../common/Offer';
import { ProductTypeEnum } from '../../../common/ProductTypeEnum';
import { useCatalogContext } from '../../../context/CatalogContext';
export const CatalogViewProductWidgetView: FC<{}> = props =>
{