nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2025-02-20 18:52:35 +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 { .nitro-catalog-layout-marketplace-post-offer {
width: $marketplace-post-offer-width; width: $marketplace-post-offer-width;
height: $marketplace-post-offer-height; 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 { SelectClubGiftComposer } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react'; import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../api'; import { LocalizeText } from '../../../../../../api';
import { Grid } from '../../../../../../common/Grid';
import { Text } from '../../../../../../common/Text';
import { SendMessageHook } from '../../../../../../hooks'; import { SendMessageHook } from '../../../../../../hooks';
import { NitroCardGridView } from '../../../../../../layout'; import { NotificationUtilities } from '../../../../../../views/notification-center/common/NotificationUtilities';
import { NitroLayoutBase } from '../../../../../../layout/base';
import { NotificationUtilities } from '../../../../../notification-center/common/NotificationUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext'; import { useCatalogContext } from '../../../../context/CatalogContext';
import { CatalogActions } from '../../../../reducers/CatalogReducer'; import { CatalogActions } from '../../../../reducers/CatalogReducer';
import { CatalogLayoutProps } from '../CatalogLayout.types'; import { CatalogLayoutProps } from '../CatalogLayout.types';
import { VipGiftItem } from './gift-item/VipGiftItemView'; import { VipGiftItem } from './VipGiftItemView';
export interface CatalogLayoutVipGiftsViewProps extends CatalogLayoutProps export const CatalogLayoutVipGiftsView: FC<CatalogLayoutProps> = props =>
{
}
export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = props =>
{ {
const { catalogState, dispatchCatalogState } = useCatalogContext(); const { catalogState, dispatchCatalogState } = useCatalogContext();
@ -64,10 +59,10 @@ export const CatalogLayoutVipGiftsView: FC<CatalogLayoutVipGiftsViewProps> = pro
return ( return (
<> <>
<NitroLayoutBase className='text-black'>{giftsAvailable()}</NitroLayoutBase> <Text truncate shrink fontWeight="bold">{ giftsAvailable() }</Text>
<NitroCardGridView columns={1} className='text-black'> <Grid columnCount={ 1 } className="nitro-catalog-layout-vip-gifts-grid" overflow="auto">
{ 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}/>)} { (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 }/>) }
</NitroCardGridView> </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 { CatalogPageMessageOfferData } from '@nitrots/nitro-renderer';
import { FC, useCallback } from 'react'; import { FC, useCallback } from 'react';
import { LocalizeText } from '../../../../../../../api'; import { LocalizeText } from '../../../../../../api';
import { NitroCardGridItemView } from '../../../../../../../layout'; import { Button } from '../../../../../../common/Button';
import { ProductImageUtility } from '../../../../../../notification-center/common/ProductImageUtility'; 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 export interface VipGiftItemViewProps
{ {
@ -47,15 +50,12 @@ export const VipGiftItem : FC<VipGiftItemViewProps> = props =>
}, [offer]); }, [offer]);
return ( return (
<NitroCardGridItemView className='w-100 vip-gift-item align-items-center'> <LayoutGridItem center={ false } column={ false } alignItems="center" className="p-1">
<img src={ getImageUrlForOffer() } className='mx-3' alt='' /> <LayoutImage imageUrl={ getImageUrlForOffer() } fit={ false } style={ { width: 50, height: 50 } } />
<div className='h-100 flex-grow-1 justify-content-center '> <Text grow fontWeight="bold">{ getItemTitle() }</Text>
<div className='fw-bold'>{getItemTitle()}</div> <Button variant="secondary" size="sm" onClick={ () => onSelect(offer.localizationId) }>
<div className='fst-italic fs-6'>{getItemDesc()}</div> { LocalizeText('catalog.club_gift.select') }
</div> </Button>
<div className='btn-group-vertical mx-1 gap-2'> </LayoutGridItem>
<button className='btn btn-secondary btn-sm' disabled={!isAvailable} onClick={() => onSelect(offer.localizationId)}>{ LocalizeText('catalog.club_gift.select') }</button> );
</div>
</NitroCardGridItemView>
)
} }