Vip buy updates

This commit is contained in:
Bill 2021-07-25 04:44:56 -04:00
parent d13c819be7
commit de4e767ce5
2 changed files with 26 additions and 9 deletions

View File

@ -3,8 +3,8 @@
.vip-buy-grid { .vip-buy-grid {
.grid-item-container { .grid-item-container {
height: 70px !important; height: 80px !important;
max-height: 70px !important; max-height: 80px !important;
} }
} }
} }

View File

@ -99,27 +99,44 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutVipBuyViewProps> = props =
return ( return (
<NitroCardGridItemView key={ index } className="justify-content-between p-1"> <NitroCardGridItemView key={ index } className="justify-content-between p-1">
{ (pendingOffer === offer) && { (pendingOffer === offer) &&
<div className="d-flex flex-column justify-content-center align-items-center w-100"> <>
<div className="text-black text-small">{ getPurchaseHeader() }</div> <div className="d-flex flex-column text-black text-small m-1">
<div className="text-black text-small">{ getPurchaseValidUntil() }</div> <div className="d-flex align-items-center">
<i className="icon icon-catalogue-hc_small me-1"></i>
{ getPurchaseHeader() }
</div>
<div className="text-black text-small">{ getPurchaseValidUntil() }</div>
<div className="d-flex">
{ (offer.priceCredits > 0) &&
<div className="d-flex align-items-center justify-content-end">
<span className="text-black">{ offer.priceCredits }</span>
<CurrencyIcon type={ -1 } />
</div> }
{ (offer.priceActivityPoints > 0) &&
<div className="d-flex align-items-center justify-content-end">
<span className="text-black">{ offer.priceActivityPoints }</span>
<CurrencyIcon type={ offer.priceActivityPointsType } />
</div> }
</div>
</div>
<Button variant="primary" size="sm" onClick={ purchaseSubscription }>{ LocalizeText('buy') }</Button> <Button variant="primary" size="sm" onClick={ purchaseSubscription }>{ LocalizeText('buy') }</Button>
</div> } </> }
{ (pendingOffer !== offer) && { (pendingOffer !== offer) &&
<> <>
<div className="d-flex flex-column text-black text-small m-1"> <div className="d-flex flex-column text-black text-small m-1">
<div> <div className="d-flex align-items-center">
<i className="icon icon-catalogue-hc_small me-1"></i> <i className="icon icon-catalogue-hc_small me-1"></i>
{ getOfferText(offer) } { getOfferText(offer) }
</div> </div>
<div className="d-flex"> <div className="d-flex">
{ (offer.priceCredits > 0) && { (offer.priceCredits > 0) &&
<div className="d-flex align-items-center justify-content-end"> <div className="d-flex align-items-center justify-content-end">
<span className="text-black ms-1">{ offer.priceCredits }</span> <span className="text-black">{ offer.priceCredits }</span>
<CurrencyIcon type={ -1 } /> <CurrencyIcon type={ -1 } />
</div> } </div> }
{ (offer.priceActivityPoints > 0) && { (offer.priceActivityPoints > 0) &&
<div className="d-flex align-items-center justify-content-end"> <div className="d-flex align-items-center justify-content-end">
<span className="text-black ms-1">{ offer.priceActivityPoints }</span> <span className="text-black">{ offer.priceActivityPoints }</span>
<CurrencyIcon type={ offer.priceActivityPointsType } /> <CurrencyIcon type={ offer.priceActivityPointsType } />
</div> } </div> }
</div> </div>