diff --git a/components/SubscribeButton/ChannelPicker/ChannelPicker.module.css b/components/SubscribeButton/ChannelPicker/ChannelPicker.module.css
new file mode 100644
index 000000000..e15d5df40
--- /dev/null
+++ b/components/SubscribeButton/ChannelPicker/ChannelPicker.module.css
@@ -0,0 +1,86 @@
+.channelPicker {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ margin-top: 5px;
+}
+
+.channel {
+ display: flex;
+ align-items: center;
+ gap: 11px;
+ border: 1px solid var(--bs-border-color, #444);
+ border-radius: 9px;
+ padding: 10px 12px;
+ margin: 0;
+ cursor: pointer;
+}
+
+.channelColumn {
+ flex-direction: column;
+ align-items: stretch;
+}
+
+.channelRow {
+ display: flex;
+ align-items: center;
+ gap: 11px;
+ margin: 0;
+ cursor: pointer;
+}
+
+.channelActive {
+ border-color: var(--bs-primary, #0d6efd);
+ background-color: rgba(13, 110, 253, 0.08);
+}
+
+.channel :global(.form-check) {
+ margin: 0;
+ min-height: auto;
+ flex: none;
+}
+
+.icon {
+ flex: none;
+ opacity: 0.85;
+}
+
+.spinner {
+ flex: none;
+ margin: 2px;
+}
+
+.text {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+}
+
+.title {
+ font-weight: 600;
+ line-height: 1.3;
+}
+
+.subtitle {
+ font-size: 0.8rem;
+ opacity: 0.7;
+}
+
+.error {
+ font-size: 0.8rem;
+ color: var(--bs-danger, #dc3545);
+ margin-top: 2px;
+}
+
+.disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.discordExpand {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ margin-top: 10px;
+ padding-left: 30px;
+}
diff --git a/components/SubscribeButton/ChannelPicker/ChannelPicker.tsx b/components/SubscribeButton/ChannelPicker/ChannelPicker.tsx
new file mode 100644
index 000000000..49a705ce8
--- /dev/null
+++ b/components/SubscribeButton/ChannelPicker/ChannelPicker.tsx
@@ -0,0 +1,208 @@
+'use client'
+import { useEffect, useRef, useState } from 'react'
+import { Form, Spinner } from 'react-bootstrap'
+import GamepadIcon from '@mui/icons-material/SportsEsports'
+import PhoneIcon from '@mui/icons-material/PhoneIphone'
+import DiscordIcon from '@mui/icons-material/Forum'
+import api from '../../../api/ApiHelper'
+import askForNotificationPermissons from '../../../utils/NotificationPermisson'
+import { getNotificationTypeAsString } from '../../../utils/NotificationUtils'
+import { ChannelSelection, fetchWebhookName, getExtraTargets, isValidDiscordWebhookUrl } from '../../../utils/NotificationChannelUtils'
+import { getLoadingElement } from '../../../utils/LoadingUtils'
+import styles from './ChannelPicker.module.css'
+
+interface Props {
+ targets: NotificationTarget[]
+ isLoading: boolean
+ selection: ChannelSelection
+ onChange(selection: ChannelSelection): void
+}
+
+const PUSH_SUPPORTED = typeof window !== 'undefined' && 'Notification' in window
+
+function ChannelPicker(props: Props) {
+ let [pushPending, setPushPending] = useState(false)
+ let [pushError, setPushError] = useState
(null)
+ // once the user edits the name themselves, stop auto-filling it from the fetched webhook name
+ let nameTouchedRef = useRef(false)
+ let selectionRef = useRef(props.selection)
+ selectionRef.current = props.selection
+
+ let { selection } = props
+
+ // when a valid webhook URL is entered, prefill the name field with the webhook's own name (Discord's
+ // API doesn't expose the channel name, only its id), unless the user has already typed their own label
+ useEffect(() => {
+ let url = selection.newDiscordUrl
+ if (url === null || !isValidDiscordWebhookUrl(url) || nameTouchedRef.current) {
+ return
+ }
+ let cancelled = false
+ fetchWebhookName(url).then(name => {
+ if (cancelled || !name || nameTouchedRef.current) {
+ return
+ }
+ let current = selectionRef.current
+ if (current.newDiscordUrl !== url) {
+ return // the url changed while fetching, don't clobber
+ }
+ props.onChange({ ...current, newDiscordName: name.slice(0, 32) })
+ })
+ return () => {
+ cancelled = true
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [selection.newDiscordUrl])
+
+ async function onToggleDevice(checked: boolean) {
+ setPushError(null)
+ if (!checked) {
+ props.onChange({ ...selection, push: false })
+ return
+ }
+ setPushPending(true)
+ try {
+ let token = await askForNotificationPermissons()
+ // the token is now stored locally, so the channel can be selected. Registering it with the
+ // backend also happens again at submit, so don't block the checkbox on that websocket call.
+ api.setToken(token).catch(e => console.error('registering fcm token failed', e))
+ props.onChange({ ...selection, push: true })
+ } catch (e) {
+ setPushError(e instanceof Error ? e.message : 'Could not enable push notifications.')
+ } finally {
+ setPushPending(false)
+ }
+ }
+
+ function onToggleDiscord(checked: boolean) {
+ nameTouchedRef.current = false
+ props.onChange({ ...selection, newDiscordUrl: checked ? '' : null, newDiscordName: '' })
+ }
+
+ function onToggleExisting(id: number, checked: boolean) {
+ let existingTargetIds = checked
+ ? [...selection.existingTargetIds, id]
+ : selection.existingTargetIds.filter(existingId => existingId !== id)
+ props.onChange({ ...selection, existingTargetIds })
+ }
+
+ if (props.isLoading) {
+ return getLoadingElement(Loading channels...
)
+ }
+
+ let discordChecked = selection.newDiscordUrl !== null
+ let discordInvalid = discordChecked && selection.newDiscordUrl !== '' && !isValidDiscordWebhookUrl(selection.newDiscordUrl || '')
+ let discordValid = discordChecked && isValidDiscordWebhookUrl(selection.newDiscordUrl || '')
+ let extraTargets = getExtraTargets(props.targets)
+
+ return (
+
+ {/* In-game chat */}
+
+
+ {/* This device (push) */}
+
+
+ {/* New Discord webhook */}
+
+
+ {discordChecked ? (
+
+
props.onChange({ ...selection, newDiscordUrl: e.target.value })}
+ />
+ {discordInvalid ? (
+
+ The URL has to start with "https://discord.com/api/..." or "https://discordapp.com/api/webhooks/...".
+
+ ) : (
+
+ Server Settings → Integrations → Webhooks → Copy URL ·{' '}
+
+ show me how
+
+
+ )}
+ {discordValid ? (
+ <>
+ {
+ nameTouchedRef.current = true
+ props.onChange({ ...selection, newDiscordName: e.target.value })
+ }}
+ />
+ Shown in your notifier list. Defaults to the webhook name.
+
+ ) : null}
+
+ ) : null}
+
+
+ {/* Other existing targets */}
+ {extraTargets.map(target => (
+
+ ))}
+
+
When
+ {props.type === 'item' ? (
+
setItemFilter({ ...filter })}
+ onIsPriceAboveChange={setIsPriceAbove}
+ onOnlyInstantBuyChange={setOnlyInstantBuy}
+ onPriceChange={onPriceChange}
+ prefill={props.prefill?.listener}
+ prefillPrice={getInitialPrice(props)}
+ onIsFilterValidChange={setIsItemFilterValid}
+ />
+ ) : null}
+ {props.type === 'bazaar' ? (
+
+ ) : null}
+ {props.type === 'player' ? (
+
+ ) : null}
+ {props.type === 'auction' ? : null}
+
+ Where
+
+
+
+ {itemFilter && Object.keys(itemFilter).length > MAX_FILTERS ? (
+ You currently can't use more than {MAX_FILTERS} filters for Notifiers
+ ) : null}
+ To use notifiers, please login with Google:
+ )}
+
+ {wasAlreadyLoggedIn && !isLoggedIn ? getLoadingElement() : ''}
+
+
+ )
+}
+
+export default NotifierDialog
diff --git a/components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.module.css b/components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.module.css
index 238ec7832..68fc2914c 100644
--- a/components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.module.css
+++ b/components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.module.css
@@ -2,3 +2,16 @@
display: inline;
margin-left: 5px;
}
+
+.priceDirection {
+ width: 100%;
+ margin-bottom: 12px;
+}
+
+.priceDirection :global(.btn) {
+ flex: 1;
+}
+
+.priceInput {
+ margin-bottom: 10px;
+}
diff --git a/components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.tsx b/components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.tsx
index 137e6b52b..99fbb8f52 100644
--- a/components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.tsx
+++ b/components/SubscribeButton/SubscribeBazaarItemContent/SubscribeBazaarItemContent.tsx
@@ -1,7 +1,9 @@
'use client'
-import { FormControl, InputGroup } from 'react-bootstrap'
+import { useState } from 'react'
+import { FormControl, InputGroup, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
import { Form } from 'react-bootstrap'
import { NotificationListener, SubscriptionType } from '../../../api/ApiTypes.d'
+import { formatThousandsSpaced, parseFormattedNumber } from '../../../utils/Formatter'
import styles from './SubscribeBazaarItemContent.module.css'
interface Props {
@@ -10,62 +12,62 @@ interface Props {
onUseSellPriceChange(value: boolean)
itemTag: string
prefill?: NotificationListener
+ priceValue?: string
}
function SubscribeBazaarItemContent(props: Props) {
+ let prefillIsAbove = props.prefill
+ ? (props.prefill.types as unknown as string[]).includes(SubscriptionType[SubscriptionType.PRICE_HIGHER_THAN])
+ : false
+ let prefillUseSell = props.prefill
+ ? (props.prefill.types as unknown as string[]).includes(SubscriptionType[SubscriptionType.USE_SELL_NOT_BUY])
+ : false
+ let [isAbove, setIsAbove] = useState(prefillIsAbove)
+ let [useSell, setUseSell] = useState(prefillUseSell)
+
return (
<>
-
- Item price
+ {
+ let above = val === 'above'
+ setIsAbove(above)
+ props.onIsPriceAboveChange(above)
+ }}
+ >
+
+ Price drops below
+
+
+ Price rises above
+
+
+
+ Price
props.onPriceChange(e.target.value)}
+ type="text"
+ inputMode="numeric"
+ value={formatThousandsSpaced(props.priceValue ?? '')}
+ onChange={e => props.onPriceChange(parseFormattedNumber(e.target.value))}
/>
+ coins
-
- Notify me...
-
- if the price is above the selected value
- props.onIsPriceAboveChange(true)}
- className={styles.checkBox}
- />
-
-
- if the price is below the selected value
- props.onIsPriceAboveChange(false)}
- className={styles.checkBox}
- />
-
-
- if the sell price should be used
- props.onUseSellPriceChange(e.target.checked)}
- className={styles.checkBox}
- />
-
+ {
+ setUseSell(e.target.checked)
+ props.onUseSellPriceChange(e.target.checked)
+ }}
+ />
)
diff --git a/components/SubscribeButton/SubscribeButton.module.css b/components/SubscribeButton/SubscribeButton.module.css
index d644606ab..a13d5104b 100644
--- a/components/SubscribeButton/SubscribeButton.module.css
+++ b/components/SubscribeButton/SubscribeButton.module.css
@@ -12,6 +12,7 @@
.notifyButton {
margin-top: 20px;
+ width: 100%;
}
.multiSearch :global(.rbt-token){
@@ -19,6 +20,16 @@
color: white;
}
-.notifyButton{
- margin-top: 20px;
+.sectionHeading {
+ font-size: 0.8rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ opacity: 0.7;
+ margin-top: 18px;
+ margin-bottom: 10px;
+}
+
+.sectionHeading:first-child {
+ margin-top: 0;
}
\ No newline at end of file
diff --git a/components/SubscribeButton/SubscribeButton.tsx b/components/SubscribeButton/SubscribeButton.tsx
index dfa3819c9..9f3974f15 100644
--- a/components/SubscribeButton/SubscribeButton.tsx
+++ b/components/SubscribeButton/SubscribeButton.tsx
@@ -1,272 +1,54 @@
'use client'
import { useState, type JSX } from 'react'
-import { Button, Modal } from 'react-bootstrap'
+import { Button } from 'react-bootstrap'
import { useMatomo } from '@jonkoops/matomo-tracker-react'
-import api from '../../api/ApiHelper'
-import { NotificationListener, SubscriptionType } from '../../api/ApiTypes.d'
-import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
-import { toast } from 'react-toastify'
import NotificationIcon from '@mui/icons-material/NotificationsOutlined'
-import styles from './SubscribeButton.module.css'
-import SubscribeItemContent from './SubscribeItemContent/SubscribeItemContent'
-import { getLoadingElement } from '../../utils/LoadingUtils'
-import SubscribePlayerContent from './SubscribePlayerContent/SubscribePlayerContent'
-import SubscribeAuctionContent from './SubscribeAuctionContent/SubscribeAuctionContent'
-import { useRouter } from 'next/navigation'
-import { useWasAlreadyLoggedIn } from '../../utils/Hooks'
import EditIcon from '@mui/icons-material/Edit'
-import { Typeahead } from 'react-bootstrap-typeahead'
-import SubscribeBazaarItemContent from './SubscribeBazaarItemContent/SubscribeBazaarItemContent'
-import CreateTargetDialog from './CreateTargetDialog/CreateTargetDialog'
+import styles from './SubscribeButton.module.css'
+import NotifierDialog from './NotifierDialog'
interface Props {
topic: string
type: 'player' | 'item' | 'auction' | 'bazaar'
buttonContent?: JSX.Element
isEditButton?: boolean
+ currentPrice?: number
+ currentSellPrice?: number
onAfterSubscribe?()
- prefill?: {
- listener: NotificationListener
- targetNames: string[]
- }
+ prefill?: SubscribePrefill
popupTitle?: string
popupButtonText?: string
successMessage?: string
}
-const MAX_FILTERS = 5
-
function SubscribeButton(props: Props) {
let { trackEvent } = useMatomo()
- let router = useRouter()
let [showDialog, setShowDialog] = useState(false)
- let [price, setPrice] = useState(props.prefill?.listener?.price?.toString() || '0')
- let [isPriceAbove, setIsPriceAbove] = useState(props.prefill?.listener?.types?.includes(SubscriptionType.PRICE_HIGHER_THAN) ?? false)
- let [onlyInstantBuy, setOnlyInstantBuy] = useState(props.prefill?.listener?.types?.includes(SubscriptionType.BIN) ?? false)
- let [gotOutbid, setGotOutbid] = useState(props.prefill?.listener?.types?.includes(SubscriptionType.OUTBID) ?? false)
- let [isSold, setIsSold] = useState(props.prefill?.listener?.types?.includes(SubscriptionType.SOLD) ?? false)
- let [isPlayerAuctionCreation, setIsPlayerAuctionCreation] = useState(
- props.prefill?.listener?.types?.includes(SubscriptionType.PLAYER_CREATES_AUCTION) ?? false
- )
- let [hasPlayerBoughtAnyAuction, setHasPlayerBoughtAnyAuction] = useState(
- props.prefill?.listener?.types?.includes(SubscriptionType.BOUGHT_ANY_AUCTION) ?? false
- )
- let [isUseBazaarSellNotBuy, setIsUseBazaarSellNotBuy] = useState(props.prefill?.listener?.types?.includes(SubscriptionType.USE_SELL_NOT_BUY) ?? false)
- let [isLoggedIn, setIsLoggedIn] = useState(false)
- let [itemFilter, setItemFilter] = useState(props.prefill?.listener?.filter || undefined)
- let [isItemFilterValid, setIsItemFilterValid] = useState(true)
- let wasAlreadyLoggedIn = useWasAlreadyLoggedIn()
- let [notificationTargets, setNotificationTargets] = useState([])
- let [selectedNotificationTargets, setSelectedNotificationTargets] = useState([])
- let [isLoadingNotificationTargets, setIsLoadingNotificationTargets] = useState(false)
- let [showCreateTargetDialog, setShowCreateTargetDialog] = useState(false)
-
- async function onSubscribe() {
- trackEvent({ action: 'subscribed', category: 'subscriptions' })
- setShowDialog(false)
- // Set price to 0 per default for item subscriptions
- // This happens if a user only selects a filter and leaves the price field empty
- if (props.type === 'item' && !price) {
- price = '0'
- }
- if (props.type === 'bazaar' && !price) {
- price = '0'
- }
- if (props.type === 'item' && !itemFilter) {
- itemFilter = {}
- }
-
- api.subscribe(props.topic, getSubscriptionTypes(), selectedNotificationTargets, price ? parseInt(price) : undefined, itemFilter)
- .then(() => {
- toast.success(props.successMessage || 'Notifier successfully created!', {
- onClick: () => {
- router.push('/subscriptions')
- }
- })
- if (props.onAfterSubscribe) {
- props.onAfterSubscribe()
- }
- })
- .catch(error => {
- toast.error(error.message, {
- onClick: () => {
- router.push('/subscriptions')
- }
- })
- })
- }
-
- function getSubscriptionTypes(): SubscriptionType[] {
- let types: SubscriptionType[] = []
- if (props.type === 'item') {
- if (isPriceAbove) {
- types.push(SubscriptionType.PRICE_HIGHER_THAN)
- }
- if (!isPriceAbove) {
- types.push(SubscriptionType.PRICE_LOWER_THAN)
- }
- if (onlyInstantBuy) {
- types.push(SubscriptionType.BIN)
- }
- }
- if (props.type === 'player') {
- if (gotOutbid) {
- types.push(SubscriptionType.OUTBID)
- }
- if (isSold) {
- types.push(SubscriptionType.SOLD)
- }
- if (isPlayerAuctionCreation) {
- types.push(SubscriptionType.PLAYER_CREATES_AUCTION)
- }
- if (hasPlayerBoughtAnyAuction) {
- types.push(SubscriptionType.BOUGHT_ANY_AUCTION)
- }
- }
- if (props.type === 'auction') {
- types.push(SubscriptionType.AUCTION)
- }
- if (props.type === 'bazaar') {
- if (isPriceAbove) {
- types.push(SubscriptionType.PRICE_HIGHER_THAN)
- }
- if (!isPriceAbove) {
- types.push(SubscriptionType.PRICE_LOWER_THAN)
- }
- if (isUseBazaarSellNotBuy) {
- types.push(SubscriptionType.USE_SELL_NOT_BUY)
- }
- }
- return types
- }
-
- function onLogin() {
- setIsLoggedIn(true)
- setIsLoadingNotificationTargets(true)
- api.getNotificationTargets().then(targets => {
- if (props.prefill?.targetNames) {
- setSelectedNotificationTargets(targets.filter(target => (target.name ? props.prefill?.targetNames.includes(target.name) : false)))
- }
- setNotificationTargets(targets)
- setIsLoadingNotificationTargets(false)
- })
- }
-
- function isNotifyDisabled() {
- if (itemFilter && Object.keys(itemFilter).length > MAX_FILTERS) {
- return true
- }
- if (props.type === 'item') {
- return itemFilter && Object.keys(itemFilter).length > 0 ? false : price === undefined || price === ''
- }
- if (props.type === 'player') {
- return !gotOutbid && !isSold && !isPlayerAuctionCreation
- }
- }
-
- function closeDialog() {
- trackEvent({ action: 'subscription dialog closed', category: 'subscriptions' })
- setShowDialog(false)
- }
function openDialog() {
trackEvent({ action: 'subscription dialog opened', category: 'subscriptions' })
setShowDialog(true)
}
- function openCreateTargetDialog() {
- setShowCreateTargetDialog(true)
- }
-
- function onTargetCreated(target: NotificationTarget) {
- setSelectedNotificationTargets([...selectedNotificationTargets, target])
- setNotificationTargets([...notificationTargets, target])
+ function closeDialog() {
+ trackEvent({ action: 'subscription dialog closed', category: 'subscriptions' })
+ setShowDialog(false)
}
- let dialog = (
-
-
- {props.popupTitle || 'Create a Notifier'}
-
-
- {isLoggedIn ? (
-
- {props.type === 'item' ? (
-
{
- setItemFilter({ ...filter })
- }}
- onIsPriceAboveChange={setIsPriceAbove}
- onOnlyInstantBuyChange={setOnlyInstantBuy}
- onPriceChange={setPrice}
- prefill={props.prefill?.listener}
- onIsFilterValidChange={setIsItemFilterValid}
- />
- ) : null}
- {props.type === 'bazaar' ? (
-
- ) : null}
- {props.type === 'player' ? (
-
- ) : null}
- {props.type === 'auction' ? : null}
-
-
- {
- setSelectedNotificationTargets(selected as NotificationTarget[])
- }}
- multiple={true}
- />
-
-
-
- {itemFilter && Object.keys(itemFilter).length > MAX_FILTERS ? (
- You currently can't use more than 5 filters for Notifiers
- ) : null}
- To use notifiers, please login with Google:
- )}
-
- {wasAlreadyLoggedIn && !isLoggedIn ? getLoadingElement() : ''}
-
-
- )
-
return (
- {dialog}
-
setShowCreateTargetDialog(false)}
- onTargetCreated={onTargetCreated}
+
{props.isEditButton ? (
diff --git a/components/SubscribeButton/SubscribeItemContent/SubscribeItemContent.module.css b/components/SubscribeButton/SubscribeItemContent/SubscribeItemContent.module.css
index 238ec7832..677a3fcc4 100644
--- a/components/SubscribeButton/SubscribeItemContent/SubscribeItemContent.module.css
+++ b/components/SubscribeButton/SubscribeItemContent/SubscribeItemContent.module.css
@@ -1,4 +1,28 @@
.checkBox {
- display: inline;
margin-left: 5px;
}
+
+.priceDirection {
+ width: 100%;
+ margin-bottom: 12px;
+}
+
+.priceDirection :global(.btn) {
+ flex: 1;
+}
+
+.priceInput {
+ margin-bottom: 10px;
+}
+
+.moreLink {
+ display: inline-block;
+ font-size: 0.9rem;
+}
+
+.moreOptions {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin-top: 4px;
+}
diff --git a/components/SubscribeButton/SubscribeItemContent/SubscribeItemContent.tsx b/components/SubscribeButton/SubscribeItemContent/SubscribeItemContent.tsx
index b2b0a40c4..aecbd2865 100644
--- a/components/SubscribeButton/SubscribeItemContent/SubscribeItemContent.tsx
+++ b/components/SubscribeButton/SubscribeItemContent/SubscribeItemContent.tsx
@@ -1,10 +1,11 @@
'use client'
import { useEffect, useState } from 'react'
-import { FormControl, InputGroup } from 'react-bootstrap'
+import { FormControl, InputGroup, ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
import { Form } from 'react-bootstrap'
import api from '../../../api/ApiHelper'
import { NotificationListener, SubscriptionType } from '../../../api/ApiTypes.d'
import ItemFilter from '../../ItemFilter/ItemFilter'
+import { formatThousandsSpaced, parseFormattedNumber } from '../../../utils/Formatter'
import styles from './SubscribeItemContent.module.css'
interface Props {
@@ -14,11 +15,20 @@ interface Props {
onFilterChange(filter: ItemFilter)
itemTag: string
prefill?: NotificationListener
+ prefillPrice?: string
onIsFilterValidChange?(newIsFilter: boolean)
}
function SubscribeItemContent(props: Props) {
let [filterOptions, setFilterOptions] = useState
()
+ let prefillIsAbove = props.prefill
+ ? (props.prefill.types as unknown as string[]).includes(SubscriptionType[SubscriptionType.PRICE_HIGHER_THAN])
+ : false
+ let prefillHasFilter = props.prefill?.filter && Object.keys(props.prefill.filter).length > 0
+ let prefillIsBin = props.prefill ? (props.prefill.types as unknown as string[]).includes(SubscriptionType[SubscriptionType.BIN]) : false
+ let [isAbove, setIsAbove] = useState(prefillIsAbove)
+ let [showMore, setShowMore] = useState(!!prefillHasFilter || prefillIsBin)
+ let [priceDisplay, setPriceDisplay] = useState(formatThousandsSpaced(props.prefill?.price?.toString() ?? props.prefillPrice ?? ''))
useEffect(() => {
api.getFilters(props.itemTag).then(options => {
@@ -30,67 +40,78 @@ function SubscribeItemContent(props: Props) {
return (
<>
-
- Item price
+ {
+ let above = val === 'above'
+ setIsAbove(above)
+ props.onIsPriceAboveChange(above)
+ }}
+ >
+
+ Price drops below
+
+
+ Price rises above
+
+
+
+ Price
props.onPriceChange(e.target.value)}
+ type="text"
+ inputMode="numeric"
+ value={priceDisplay}
+ onChange={e => {
+ let raw = parseFormattedNumber(e.target.value)
+ setPriceDisplay(formatThousandsSpaced(raw))
+ props.onPriceChange(raw)
+ }}
/>
+ coins
-
- Notify me...
-
- if the price is above the selected value
- props.onIsPriceAboveChange(true)}
- className={styles.checkBox}
- />
-
-
- if the price is below the selected value
- props.onIsPriceAboveChange(false)}
- className={styles.checkBox}
- />
-
-
- only for instant buy
- {
- props.onOnlyInstantBuyChange((e.target as HTMLInputElement).checked)
+ e.preventDefault()
+ setShowMore(true)
}}
- />
-
-
-
-
+ >
+ + More options (instant-buy only, item filter)
+
+ ) : (
+
+
+ {
+ props.onOnlyInstantBuyChange((e.target as HTMLInputElement).checked)
+ }}
+ />
+
+
+
+
+
+ )}
- Creating this will send a notification to the selected target whenever a new auction matching your whitelist from Auction flipper is created.
+ Get notified whenever a new auction matching your whitelist from the{' '}
+ Auction flipper is created.
-
-
- {
- setSelectedNotificationTargets(selected as NotificationTarget[])
- }}
- multiple={true}
- />
-
-
-
) : (
@@ -136,12 +146,8 @@ function WhitelistSubscribeButton(props: Props) {
🔒
Premium Feature
-
- Whitelist notifiers require at least Premium access.
-
-
- Click the notification icon to open this dialog again after purchasing premium.
-
+
Whitelist notifiers require at least Premium access.
+
Click the notification icon to open this dialog again after purchasing premium.
@@ -159,19 +165,9 @@ function WhitelistSubscribeButton(props: Props) {
)
- function onTargetCreated(target: NotificationTarget) {
- setSelectedNotificationTargets([...selectedNotificationTargets, target])
- setNotificationTargets([...notificationTargets, target])
- }
-
return (
{dialog}
-
setShowCreateTargetDialog(false)}
- onTargetCreated={onTargetCreated}
- />