nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-26 15:40:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Catalog updates

Browse Source
This commit is contained in:
Bill 2022-08-18 00:01:13 -04:00
parent dd728d2401
commit 46ff82940e
3 changed files with 43 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,8 +89,7 @@
.icon-hc-banner { .icon-hc-banner {
width: 68px; width: 68px;
height: 40px; height: 40px;
background: url("../../assets/images/catalog/hc_big.png") center background: url("../../assets/images/catalog/hc_big.png") center no-repeat;
no-repeat;
} }
} }
} }
@ -122,10 +121,4 @@
.nitro-catalog-header { .nitro-catalog-header {
width: 290px; width: 290px;
height: 60px; height: 60px;
align-self: center;
display: flex;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
} }

33
src/components/catalog/views/catalog-header/CatalogHeaderView.tsx
View File

@ -1,33 +1,26 @@
import { FC, useEffect, useMemo, useRef } from 'react'; import { FC, useEffect, useState } from 'react';
import { GetConfiguration } from '../../../../api'; import { GetConfiguration } from '../../../../api';
import { Base } from '../../../../common'; import { Flex } from '../../../../common';
export interface CatalogHeaderViewProps export interface CatalogHeaderViewProps
{ {
image?: string; imageUrl?: string;
} }
export const CatalogHeaderView: FC<CatalogHeaderViewProps> = props => export const CatalogHeaderView: FC<CatalogHeaderViewProps> = props =>
{ {
let { image = null } = props; const { imageUrl = null } = props;
const [ displayImageUrl, setDisplayImageUrl ] = useState('');
const imageEl = useRef<HTMLImageElement>(); useEffect(() =>
const fallback = useMemo(()=>
{ {
return ((GetConfiguration<string>('catalog.asset.image.url')).replace('%name%', 'catalog_header_roombuilder')); setDisplayImageUrl(imageUrl ?? GetConfiguration<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder'));
},[]) }, [ imageUrl ]);
useEffect(()=> return <Flex center shrink className="nitro-catalog-header">
{ <img src={ displayImageUrl } onError={ ({ currentTarget }) =>
if(image == null && imageEl !== null) imageEl.current.src = fallback;
},[ image, imageEl,fallback ])
return <Base className="nitro-catalog-header">
<img ref={ imageEl } src={ image } onError={ ({ currentTarget }) =>
{ {
currentTarget.src = fallback; currentTarget.src = GetConfiguration<string>('catalog.asset.image.url').replace('%name%', 'catalog_header_roombuilder');
} } } />
} /> </Flex>;
</Base>;
} }

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

@ -1,6 +1,6 @@
import { FC } from 'react'; import { FC } from 'react';
import { GetConfiguration, ProductTypeEnum } from '../../../../../api'; import { GetConfiguration, ProductTypeEnum } from '../../../../../api';
import { Column, Flex, Grid, Text } from '../../../../../common'; import { Column, Flex, Grid, LayoutImage, Text } from '../../../../../common';
import { useCatalog } from '../../../../../hooks'; import { useCatalog } from '../../../../../hooks';
import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView'; import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView'; import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
@ -15,43 +15,45 @@ import { CatalogLayoutProps } from './CatalogLayout.types';
export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props => export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
{ {
const { page = null } = props; const { page = null } = props;
const { currentOffer = null,currentPage } = useCatalog(); const { currentOffer = null, currentPage = null } = useCatalog();
return ( return (
<> <>
<Grid> <Grid>
<Column size={ 7 } overflow="hidden"> <Column size={ 7 } overflow="hidden">
{ GetConfiguration('catalog.headers') && <CatalogHeaderView image={ currentPage.localization.getImage(0) }/> } { GetConfiguration('catalog.headers') &&
<CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) }/> }
<CatalogItemGridWidgetView /> <CatalogItemGridWidgetView />
</Column> </Column>
<Column center={ !currentOffer } size={ 5 } overflow="hidden"> <Column center={ !currentOffer } size={ 5 } overflow="hidden">
{ !currentOffer && { !currentOffer &&
<> <>
{ !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> } { !!page.localization.getImage(1) &&
<Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } /> <LayoutImage imageUrl={ page.localization.getImage(1) } /> }
</> } <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
</> }
{ currentOffer && { currentOffer &&
<> <>
<Flex center overflow="hidden" style={ { height: 140 } }> <Flex center overflow="hidden" style={ { height: 140 } }>
{ (currentOffer.product.productType !== ProductTypeEnum.BADGE) && { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
<> <>
<CatalogViewProductWidgetView /> <CatalogViewProductWidgetView />
<CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" /> <CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" />
<CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" /> <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
</> } </> }
{ (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> } { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
</Flex>
<Column grow gap={ 1 }>
<Text grow truncate>{ currentOffer.localizationName }</Text>
<Flex justifyContent="between">
<Column gap={ 1 }>
<CatalogSpinnerWidgetView />
</Column>
<CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
</Flex> </Flex>
<CatalogPurchaseWidgetView /> <Column grow gap={ 1 }>
</Column> <Text grow truncate>{ currentOffer.localizationName }</Text>
</> } <Flex justifyContent="between">
<Column gap={ 1 }>
<CatalogSpinnerWidgetView />
</Column>
<CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
</Flex>
<CatalogPurchaseWidgetView />
</Column>
</> }
</Column> </Column>
</Grid> </Grid>
</> </>