nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-18 18:02:36 +01:00
Code Issues Packages Projects Releases Wiki Activity

Catalog updates

Browse Source
This commit is contained in:
Bill 2022-01-11 23:04:12 -05:00
parent 8abd271800
commit 5d4ab54c8c
4 changed files with 31 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,6 +36,14 @@
}
}
.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;

0
src/components/catalog/common/views/page/layout/color-grouping/CatalogLayoutColorGroupingView.tsx → src/components/catalog/views/page/layout/color-grouping/CatalogLayoutColorGroupingView.tsx
View File

23
src/components/catalog/common/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx → src/components/catalog/views/page/layout/vip-gifts/CatalogLayoutVipGiftsView.tsx
View File

@ -1,21 +1,16 @@
import { SelectClubGiftComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../api';
import { Grid } from '../../../../../../common/Grid';
import { Text } from '../../../../../../common/Text';
import { SendMessageHook } from '../../../../../../hooks';
import { NitroCardGridView } from '../../../../../../layout';
import { NitroLayoutBase } from '../../../../../../layout/base';
import { NotificationUtilities } from '../../../../../notification-center/common/NotificationUtilities';
import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext';
import { CatalogActions } from '../../../../reducers/CatalogReducer';
import { CatalogLayoutProps } from '../CatalogLayout.types';
import { VipGiftItem } from './gift-item/VipGiftItemView';
import { VipGiftItem } from './VipGiftItemView';
export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps
{
}
export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = props =>
export const CatalogLayoutVipGiftsView: FC<CatalogLayoutProps> = props =>
{
const { catalogState, dispatchCatalogState } = useCatalogContext();
@ -64,10 +59,10 @@ export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = pro
return (
<>
<NitroLayoutBase className='text-black'>{giftsAvailable()}</NitroLayoutBase>
<NitroCardGridView columns={1} className='text-black'>
{ catalogState.clubGifts && catalogState.clubGifts.offers.map( (offer, index) => <VipGiftItem key={index} offer={offer} isAvailable={ catalogState.clubGifts.getOfferExtraData(offer.offerId).isSelectable && catalogState.clubGifts.giftsAvailable > 0} onSelect={selectGift}/>)}
</NitroCardGridView>
<Text truncate shrink fontWeight="bold">{ giftsAvailable() }</Text>
<Grid columnCount={ 1 } className="nitro-catalog-layout-vip-gifts-grid" overflow="auto">
{ (catalogState.clubGifts.offers.length > 0) && catalogState.clubGifts.offers.map(offer => <VipGiftItem key={ offer.offerId } offer={ offer } isAvailable={ (catalogState.clubGifts.getOfferExtraData(offer.offerId).isSelectable && (catalogState.clubGifts.giftsAvailable > 0)) } onSelect={ selectGift }/>) }
</Grid>
</>
)
}

28
src/components/catalog/common/views/page/layout/vip-gifts/gift-item/VipGiftItemView.tsx → src/components/catalog/views/page/layout/vip-gifts/VipGiftItemView.tsx
View File

@ -1,8 +1,11 @@
import { CatalogPageMessageOfferData } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../../api';
import { NitroCardGridItemView } from '../../../../../../../layout';
import { ProductImageUtility } from '../../../../../../notification-center/common/ProductImageUtility';
import { LocalizeText } from '../../../../../../api';
import { Button } from '../../../../../../common/Button';
import { LayoutGridItem } from '../../../../../../common/layout/LayoutGridItem';
import { LayoutImage } from '../../../../../../common/layout/LayoutImage';
import { Text } from '../../../../../../common/Text';
import { ProductImageUtility } from '../../../../../../views/notification-center/common/ProductImageUtility';
export interface VipGiftItemViewProps
{
@ -47,15 +50,12 @@ export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
}, [offer]);
return (
<NitroCardGridItemView className='w-100 vip-gift-item align-items-center'>
<img src={ getImageUrlForOffer() } className='mx-3' alt='' />
<div className='h-100 flex-grow-1 justify-content-center '>
<div className='fw-bold'>{getItemTitle()}</div>
<div className='fst-italic fs-6'>{getItemDesc()}</div>
</div>
<div className='btn-group-vertical mx-1 gap-2'>
<button className='btn btn-secondary btn-sm' disabled={!isAvailable} onClick={() => onSelect(offer.localizationId)}>{ LocalizeText('catalog.club_gift.select') }</button>
</div>
</NitroCardGridItemView>
)
<LayoutGridItem center={ false } column={ false } alignItems="center" className="p-1">
<LayoutImage imageUrl={ getImageUrlForOffer() } fit={ false } style={ { width: 50, height: 50 } } />
<Text grow fontWeight="bold">{ getItemTitle() }</Text>
<Button variant="secondary" size="sm" onClick={ () => onSelect(offer.localizationId) }>
{ LocalizeText('catalog.club_gift.select') }
</Button>
</LayoutGridItem>
);
}