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

Badge display updates

Browse Source
This commit is contained in:
Bill 2021-07-25 04:44:40 -04:00
parent 0dfcb86bb4
commit d13c819be7
5 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/views/catalog/views/page/layout/badge-display/CatalogLayoutBadgeDisplayView.tsx
View File

@ -5,6 +5,7 @@ import { InventoryBadgesRequestEvent } from '../../../../../../events/inventory/
import { dispatchUiEvent, useUiEvent } from '../../../../../../hooks'; import { dispatchUiEvent, useUiEvent } from '../../../../../../hooks';
import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView'; import { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView'; import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView'; import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
import { GetOfferName } from '../../../../common/CatalogUtilities'; import { GetOfferName } from '../../../../common/CatalogUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext'; import { useCatalogContext } from '../../../../context/CatalogContext';
@ -18,8 +19,8 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
const { roomPreviewer = null, pageParser = null } = props; const { roomPreviewer = null, pageParser = null } = props;
const { catalogState = null, dispatchCatalogState = null } = useCatalogContext(); const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
const { activeOffer = null } = catalogState; const { activeOffer = null } = catalogState;
const [ currentBadge, setCurrentBadge ] = useState<string>(null);
const [ badges, setBadges ] = useState<string[]>([]); const [ badges, setBadges ] = useState<string[]>([]);
const [ currentBadge, setCurrentBadge ] = useState<string>(null);
const product = ((activeOffer && activeOffer.products[0]) || null); const product = ((activeOffer && activeOffer.products[0]) || null);
@ -63,7 +64,8 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
<div className="row h-100 nitro-catalog-layout-badge-display"> <div className="row h-100 nitro-catalog-layout-badge-display">
<div className="d-flex flex-column col-7 h-100"> <div className="d-flex flex-column col-7 h-100">
<CatalogPageOffersView offers={ pageParser.offers } /> <CatalogPageOffersView offers={ pageParser.offers } />
<div className="d-flex mt-2"> <div className="d-flex flex-column mt-2">
<div className="text-black fw-bold">{ LocalizeText('catalog_selectbadge') }</div>
<NitroCardGridView className="inventory-badge-grid"> <NitroCardGridView className="inventory-badge-grid">
{ badgeElements } { badgeElements }
</NitroCardGridView> </NitroCardGridView>
@ -73,7 +75,7 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
<div className="position-relative d-flex flex-column col"> <div className="position-relative d-flex flex-column col">
<CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } /> <CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div> <div className="fs-6 text-black mt-1 overflow-hidden">{ GetOfferName(activeOffer) }</div>
<CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ 'Bill 22-7-2021 ADM' } /> <CatalogPurchaseView offer={ activeOffer } pageId={ pageParser.pageId } extra={ currentBadge } disabled={ !currentBadge } />
</div> } </div> }
</div> </div>
); );

4
src/views/catalog/views/page/purchase/CatalogPurchaseView.tsx
View File

@ -7,7 +7,7 @@ import { CatalogPurchaseGiftButtonView } from './purchase-gift-button/CatalogPur
export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props => export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
{ {
const { offer = null, pageId = -1, extra = '' } = props; const { offer = null, pageId = -1, extra = '', disabled = false } = props;
const [ quantity, setQuantity ] = useState(1); const [ quantity, setQuantity ] = useState(1);
useEffect(() => useEffect(() =>
@ -70,7 +70,7 @@ export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
</div> </div>
</div> </div>
<div className="d-flex flex-column mt-1"> <div className="d-flex flex-column mt-1">
<CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } /> <CatalogPurchaseButtonView className="btn-sm w-100" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } disabled={ disabled } />
{ offer.giftable && <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } /> } { offer.giftable && <CatalogPurchaseGiftButtonView className="btn-sm w-100 mt-1" offer={ offer } pageId={ pageId } extra={ extraData } quantity={ quantity } /> }
</div> </div>
</div> </div>

1
src/views/catalog/views/page/purchase/CatalogPurchaseView.types.ts
View File

@ -5,4 +5,5 @@ export interface CatalogPurchaseViewProps
offer: CatalogPageOfferData; offer: CatalogPageOfferData;
pageId: number; pageId: number;
extra?: string; extra?: string;
disabled?: boolean;
} }

4
src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.tsx
View File

@ -10,7 +10,7 @@ import { CatalogPurchaseButtonViewProps, CatalogPurchaseState } from './CatalogP
export const CatalogPurchaseButtonView: FC<CatalogPurchaseButtonViewProps> = props => export const CatalogPurchaseButtonView: FC<CatalogPurchaseButtonViewProps> = props =>
{ {
const { className = '', offer = null, pageId = -1, extra = null, quantity = 1, isPurchaseAllowed = true, beforePurchase = null } = props; const { className = '', offer = null, pageId = -1, extra = null, quantity = 1, isPurchaseAllowed = true, disabled = false, beforePurchase = null } = props;
const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE); const [ purchaseState, setPurchaseState ] = useState(CatalogPurchaseState.NONE);
const [ pendingApproval, setPendingApproval ] = useState(false); const [ pendingApproval, setPendingApproval ] = useState(false);
@ -96,6 +96,6 @@ export const CatalogPurchaseButtonView: FC<CatalogPurchaseButtonViewProps> = pro
return <button type="button" className={ 'btn btn-danger ' + className } disabled>{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</button>; return <button type="button" className={ 'btn btn-danger ' + className } disabled>{ LocalizeText('generic.failed') + ' - ' + LocalizeText('catalog.alert.limited_edition_sold_out.title') }</button>;
case CatalogPurchaseState.NONE: case CatalogPurchaseState.NONE:
default: default:
return <button type="button" className={ 'btn btn-success ' + className } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('buy') }</button> return <button type="button" className={ 'btn btn-success ' + className } disabled={ disabled } onClick={ event => setPurchaseState(CatalogPurchaseState.CONFIRM) }>{ LocalizeText('buy') }</button>
} }
} }

1
src/views/catalog/views/page/purchase/purchase-button/CatalogPurchaseButtonView.types.ts
View File

@ -8,6 +8,7 @@ export interface CatalogPurchaseButtonViewProps
extra?: string; extra?: string;
quantity?: number; quantity?: number;
isPurchaseAllowed?: boolean; isPurchaseAllowed?: boolean;
disabled?: boolean;
beforePurchase?: () => void; beforePurchase?: () => void;
} }