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 { NitroCardGridItemView } from '../../../../../../layout/card/grid/item/NitroCardGridItemView';
import { NitroCardGridView } from '../../../../../../layout/card/grid/NitroCardGridView';
import { LocalizeText } from '../../../../../../utils/LocalizeText';
import { BadgeImageView } from '../../../../../shared/badge-image/BadgeImageView';
import { GetOfferName } from '../../../../common/CatalogUtilities';
import { useCatalogContext } from '../../../../context/CatalogContext';
@ -18,8 +19,8 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
const { roomPreviewer = null, pageParser = null } = props;
const { catalogState = null, dispatchCatalogState = null } = useCatalogContext();
const { activeOffer = null } = catalogState;
const [ currentBadge, setCurrentBadge ] = useState<string>(null);
const [ badges, setBadges ] = useState<string[]>([]);
const [ currentBadge, setCurrentBadge ] = useState<string>(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="d-flex flex-column col-7 h-100">
<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">
{ badgeElements }
</NitroCardGridView>
@ -73,7 +75,7 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutBadgeDisplayViewProp
<div className="position-relative d-flex flex-column col">
<CatalogRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
<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>
);

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 =>
{
const { offer = null, pageId = -1, extra = '' } = props;
const { offer = null, pageId = -1, extra = '', disabled = false } = props;
const [ quantity, setQuantity ] = useState(1);
useEffect(() =>
@ -70,7 +70,7 @@ export const CatalogPurchaseView: FC<CatalogPurchaseViewProps> = props =>
</div>
</div>
<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 } /> }
</div>
</div>

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

@ -5,4 +5,5 @@ export interface CatalogPurchaseViewProps
offer: CatalogPageOfferData;
pageId: number;
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 =>
{
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 [ 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>;
case CatalogPurchaseState.NONE:
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;
quantity?: number;
isPurchaseAllowed?: boolean;
disabled?: boolean;
beforePurchase?: () => void;
}