Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Premium subscriptions seperate element #1336

Merged
merged 3 commits into from
Nov 29, 2024
Merged

Premium subscriptions seperate element #1336

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d2a078
add subscriptions as a seperate part of the premium page
matthias-luger Nov 28, 2024
e730806
Correct pricing and add discount text
Ekwav Nov 29, 2024
c4094c2
hotfix date select
Ekwav Nov 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/ArchivedAuctions.tsx/ArchivedAuctions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,10 +219,10 @@ const ArchivedAuctionsList = (props: Props) => {
<div className={styles.datepickerContainer}>
<label style={{ marginRight: 15 }}>From: </label>
<div style={{ paddingRight: 15 }}>
<DatePicker selected={from} onChange={date => handleDateChange(date, 'from')} className={'form-control'} />
<DatePicker selected={from} onChange={date => handleDateChange(date ?? new Date(), 'from')} className={'form-control'} />
</div>
<label style={{ marginRight: 15 }}>To: </label>
<DatePicker selected={to} onChange={date => handleDateChange(date, 'to')} className={'form-control'} />
<DatePicker selected={to} onChange={date => handleDateChange(date ?? new Date(), 'to')} className={'form-control'} />
</div>
<ItemFilter filters={filters} onFilterChange={filter => setSelectedFilter(filter)} />
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
Expand Down
8 changes: 4 additions & 4 deletions components/FlipTracking/FlipTracking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,8 +335,8 @@ export function FlipTracking(props: Props) {
<div style={{ paddingRight: 15 }}>
<DatePicker
onChange={e => {
setRangeStartDate(e)
loadFlipsForTimespan(e, rangeEndDate)
setRangeStartDate(e ?? new Date())
loadFlipsForTimespan(e ?? new Date(), rangeEndDate)
}}
className={'form-control'}
minDate={new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 2)}
Expand All @@ -348,8 +348,8 @@ export function FlipTracking(props: Props) {
<DatePicker
className={'form-control'}
onChange={e => {
setRangeEndDate(e)
loadFlipsForTimespan(rangeStartDate, e)
setRangeEndDate(e?? new Date())
loadFlipsForTimespan(rangeStartDate, e?? new Date())
}}
minDate={new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * 2)}
maxDate={new Date()}
Expand Down
52 changes: 0 additions & 52 deletions components/Premium/BuyPremium/BuyPremium.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,42 +56,14 @@ function BuyPremium(props: Props) {
})
}

function onSubscriptionBuy(googleToken: string) {
let productId = ''
if (purchasePremiumType.productId === 'premium') {
productId = 'l_premium'
}
if (purchasePremiumType.productId === 'premium_plus') {
productId = 'l_prem_plus'
}

api.purchasePremiumSubscription(productId, googleToken).then(data => {
window.open(data.directLink, '_self')
})
}

function onPremiumBuyCancel() {
setShowPrepaidConfirmationDialog(false)
}

function onSubscriptionBuyCancel() {
setShowSubscriptionConfirmationDialog(false)
}

function getPurchasePrice() {
return purchasePremiumOption.value * purchasePremiumOption.price
}

function getSubscriptionPrice() {
if (purchasePremiumType.productId === 'premium') {
return 8.69
}
if (purchasePremiumType.productId === 'premium_plus') {
return 29.69
}
return -1
}

function getDurationString(): string {
let durationString = purchasePremiumType.durationString
let duration = +purchasePremiumOption.value
Expand Down Expand Up @@ -181,20 +153,6 @@ function BuyPremium(props: Props) {
</div>
) : null}
<p style={{ marginTop: '20px' }}>This is a prepaid service. We won't automatically charge you after your premium time runs out!</p>
{(purchasePremiumType.productId === 'premium' || purchasePremiumType.productId === 'premium_plus') &&
(!props.premiumSubscriptions || props.premiumSubscriptions.length === 0) ? (
<p style={{ marginTop: '20px' }}>
If you want to it to automatically renew itself,{' '}
<span
onClick={() => {
setShowSubscriptionConfirmationDialog(true)
}}
style={{ color: '#007bff', cursor: 'pointer' }}
>
click here
</span>
</p>
) : null}
<hr />
<Button
style={{ marginTop: '10px' }}
Expand Down Expand Up @@ -239,16 +197,6 @@ function BuyPremium(props: Props) {
onConfirm={onPremiumBuy}
activePremiumProduct={props.activePremiumProduct}
/>
<BuyPremiumConfirmationDialog
type="subscription"
show={showSubscriptionConfirmationDialog}
purchasePremiumOption={purchasePremiumOption}
purchasePrice={<>{getSubscriptionPrice()} per month</>}
purchasePremiumType={purchasePremiumType}
onHide={onSubscriptionBuyCancel}
onConfirm={onSubscriptionBuy}
activePremiumProduct={props.activePremiumProduct}
/>
</>
)
}
Expand Down
8 changes: 8 additions & 0 deletions components/Premium/BuySubscription/BuySubscription.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.purchaseButtonContainer{
display: flex;
justify-content: center;
}

.purchaseButton{
width: 80%;
}
126 changes: 126 additions & 0 deletions components/Premium/BuySubscription/BuySubscription.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import { useState } from 'react'
import BuyPremiumConfirmationDialog from '../BuyPremiumConfirmationDialog/BuyPremiumConfirmationDialog'
import { PREMIUM_TYPES } from '../../../utils/PremiumTypeUtils'
import api from '../../../api/ApiHelper'
import { Button, Card, Col, Row } from 'react-bootstrap'
import styles from './BuySubscription.module.css'
import NumberElement from '../../Number/Number'

interface Props {
activePremiumProduct: PremiumProduct
}

function BuySubscription(props: Props) {
const [selectedPremiumType, setSelectedPremiumType] = useState<PremiumType>()

function getSubscriptionPrice() {
if (!selectedPremiumType) {
return -1
}
if (selectedPremiumType.productId === 'premium') {
return 8.69
}
if (selectedPremiumType.productId === 'premium_plus') {
return 29.69
}
return -1
}

function onSubscriptionBuyCancel() {
setSelectedPremiumType(undefined)
}

function onSubscriptionBuy(googleToken: string) {
if (!selectedPremiumType) {
return
}
let productId = ''
if (selectedPremiumType.productId === 'premium') {
productId = 'l_premium'
}
if (selectedPremiumType.productId === 'premium_plus') {
productId = 'l_prem_plus'
}

api.purchasePremiumSubscription(productId, googleToken).then(data => {
window.open(data.directLink, '_self')
})
}

return (
<>
<Row>
<Col>
<Card>
<Card.Header>
<Card.Title><b>Premium+</b></Card.Title>
</Card.Header>
<Card.Body>
<ul>
<li>top flip receive time</li>
<li>all tools for analysis</li>
<li>full auction archive</li>
</ul>
<p>Use <code>NICEDISCOUNT</code> for 31% discount for 1 month<br />
Use <code>BLACKFRIDAY</code> for 10% discount for 12 months<br />
</p>
<div className={styles.purchaseButtonContainer}>
<Button
variant="success"
className={styles.purchaseButton}
onClick={() => {
setSelectedPremiumType(PREMIUM_TYPES.find(type => type.productId === 'premium_plus'))
}}
>
<NumberElement number={29.69} /> Euro (+VAT) / 4 weeks
</Button>
</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card>
<Card.Header>
<Card.Title>Premium</Card.Title>
</Card.Header>
<Card.Body>
<ul>
<li>up to 1s slower than prem+</li>
<li>a lot of tools</li>
<li>extended history & filter access</li>
</ul>
<p>Use <code>NICEDISCOUNT</code> for 31% discount for 1 month<br />
Use <code>BLACKFRIDAY</code> for 10% discount for 12 months<br />
</p>
<div className={styles.purchaseButtonContainer}>
<Button
variant="success"
className={styles.purchaseButton}
onClick={() => {
setSelectedPremiumType(PREMIUM_TYPES.find(type => type.productId === 'premium'))
}}
>
<NumberElement number={8.69} /> Euro (+VAT) / 4 weeks
</Button>
</div>
</Card.Body>
</Card>
</Col>
</Row>
{selectedPremiumType && (
<BuyPremiumConfirmationDialog
type="subscription"
show={selectedPremiumType !== undefined}
purchasePremiumOption={PREMIUM_TYPES.find(type => type.productId === 'premium')?.options[0]!}
purchasePrice={<>{getSubscriptionPrice()} per month</>}
purchasePremiumType={selectedPremiumType!}
onHide={onSubscriptionBuyCancel}
onConfirm={onSubscriptionBuy}
activePremiumProduct={props.activePremiumProduct}
/>
)}
</>
)
}

export default BuySubscription
10 changes: 10 additions & 0 deletions components/Premium/Premium.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { CANCELLATION_RIGHT_CONFIRMED } from '../../utils/SettingsUtils'
import { getHighestPriorityPremiumProduct } from '../../utils/PremiumTypeUtils'
import PremiumStatus from './PremiumStatus/PremiumStatus'
import { toast } from 'react-toastify'
import BuySubscription from './BuySubscription/BuySubscription'

function Premium() {
let [isLoggedIn, setIsLoggedIn] = useState(false)
Expand Down Expand Up @@ -110,6 +111,15 @@ function Premium() {
</div>
{isLoggedIn ? (
<div style={{ marginBottom: '20px' }}>
<hr />
<h2>Subscriptions</h2>
<BuySubscription activePremiumProduct={activePremiumProduct!} />
</div>
) : null}
{isLoggedIn ? (
<div style={{ marginBottom: '20px' }}>
<hr />
<h2>Prepaid</h2>
<BuyPremium
activePremiumProduct={activePremiumProduct!}
premiumSubscriptions={premiumSubscriptions}
Expand Down