Merge pull request #1302 from Coflnet/add-linkvertise

add linkvertise page

api/ApiHelper.tsx

@@ -2539,6 +2539,35 @@ export function initAPI(returnSSRResponse: boolean = false): API {
         })
     }
 
+    let getLinkvertiseLink = (): Promise<string> => {
+        return new Promise((resolve, reject) => {
+            let googleId = sessionStorage.getItem('googleId')
+            if (!googleId) {
+                toast.error('You need to be logged in to do linkvertise tasks.')
+                reject()
+                return
+            }
+
+            httpApi.sendApiRequest({
+                type: RequestType.GET_LINKVERTISE_LINK,
+                customRequestURL: `${getApiEndpoint()}/linkvertise`,
+                requestMethod: 'GET',
+                data: '',
+                requestHeader: {
+                    GoogleToken: googleId,
+                    'Content-Type': 'application/json'
+                },
+                resolve: link => {
+                    resolve(link)
+                },
+                reject: (error: any) => {
+                    apiErrorHandler(RequestType.GET_LINKVERTISE_LINK, error)
+                    reject(error)
+                }
+            })
+        })
+    }
+
     return {
         search,
         trackSearch,
@@ -2630,7 +2659,8 @@ export function initAPI(returnSSRResponse: boolean = false): API {
         getPublishedConfigs,
         updateConfig,
         requestArchivedAuctions,
-        exportArchivedAuctionsData
+        exportArchivedAuctionsData,
+        getLinkvertiseLink
     }
 }
 

api/ApiTypes.d.tsx

@@ -92,7 +92,8 @@ export enum RequestType {
     GET_PUBLISHED_CONFIGS = 'publishedConfigs',
     UPDATE_CONFIG = 'updateConfig',
     ARCHIVED_AUCTIONS = 'archivedAuctions',
-    EXPORT_ARCHIVED_AUCTIONS = 'exportArchivedAuctions'
+    EXPORT_ARCHIVED_AUCTIONS = 'exportArchivedAuctions',
+    GET_LINKVERTISE_LINK = 'getLinkvertiseLink'
 }
 
 export enum SubscriptionType {

app/linkvertise/fail/page.tsx

@@ -0,0 +1,23 @@
+import { Container } from 'react-bootstrap'
+import NavBar from '../../../components/NavBar/NavBar'
+import Link from 'next/link'
+import { getHeadMetadata } from '../../../utils/SSRUtils'
+
+export default async function Page() {
+    return (
+        <>
+            <Container>
+                <h2>
+                    <NavBar />
+                    Linkvertise task failed
+                </h2>
+                <hr />
+                <p>
+                    Unfortunately something went wrong. You can try again <Link href="/linkvertise">here</Link>.
+                </p>
+            </Container>
+        </>
+    )
+}
+
+export const metadata = getHeadMetadata('Linkvertise', 'Linkvertise task failed')

app/linkvertise/page.tsx

@@ -0,0 +1,22 @@
+import { Container } from 'react-bootstrap'
+import { initAPI } from '../../api/ApiHelper'
+import LowSupply from '../../components/LowSupply/LowSupply'
+import NavBar from '../../components/NavBar/NavBar'
+import { getHeadMetadata } from '../../utils/SSRUtils'
+import Linkvertise from '../../components/Linkvertise/Linkvertise'
+
+export default async function Page() {
+    return (
+        <>
+            <Container>
+                <h2>
+                    <NavBar />
+                    Linkvertise
+                </h2>
+                <Linkvertise />
+            </Container>
+        </>
+    )
+}
+
+export const metadata = getHeadMetadata('Linkvertise', 'Linkvertise task successful')

app/linkvertise/success/page.tsx

@@ -0,0 +1,24 @@
+import { Container } from 'react-bootstrap'
+import NavBar from '../../../components/NavBar/NavBar'
+import { getHeadMetadata } from '../../../utils/SSRUtils'
+import Link from 'next/link'
+
+export default async function Page() {
+    return (
+        <>
+            <Container>
+                <h2>
+                    <NavBar />
+                    Linkvertise task successful
+                </h2>
+                <hr />
+                <p>You successfully completed the Linkvertise task. You received the reward and can close this page now :).</p>
+                <p>
+                    If you want access for longer consider supporting us directly by <Link href="/premium">buying a premium tier</Link>
+                </p>
+            </Container>
+        </>
+    )
+}
+
+export const metadata = getHeadMetadata('Linkvertise', 'Linkvertise task successful')

components/CraftsList/CraftsList.tsx

@@ -12,6 +12,7 @@ import Tooltip from '../Tooltip/Tooltip'
 import { CraftDetails } from './CraftDetails/CraftDetails'
 import styles from './CraftsList.module.css'
 import { parseProfitableCrafts } from '../../utils/Parser/APIResponseParser'
+import Link from 'next/link'
 
 interface Props {
     crafts?: any[]
@@ -181,9 +182,7 @@ export function CraftsList(props: Props) {
                     <p style={{ position: 'absolute', top: '25%', left: '25%', width: '50%', fontSize: 'large', fontWeight: 'bold', textAlign: 'center' }}>
                         The top 3 crafts can only be seen with starter premium or better
                     </p>
-                ) : (
-                    ''
-                )}
+                ) : null}
                 {showTechSavvyMessage && blur ? (
                     <p
                         style={{
@@ -364,6 +363,9 @@ export function CraftsList(props: Props) {
                 ) : null}
             </div>
             <hr />
+            <p>
+                <Link href="/linkvertise">Look at some advertising</Link> to get Starter Premium for free and see the top crafts
+            </p>
             <p>Click on a craft for further details</p>
             <div className={styles.craftsList}>
                 <ListGroup className={styles.list}>{list}</ListGroup>

components/KatFlips/KatFlips.tsx

@@ -146,9 +146,7 @@ export function KatFlips(props: Props) {
                     <p style={{ position: 'absolute', top: '25%', left: '25%', width: '50%', fontSize: 'large', fontWeight: 'bold', textAlign: 'center' }}>
                         The top 3 flips can only be seen with starter premium or better
                     </p>
-                ) : (
-                    ''
-                )}
+                ) : null}
                 {showTechSavvyMessage && blur ? (
                     <p
                         style={{
@@ -295,6 +293,9 @@ export function KatFlips(props: Props) {
                 <Form.Control className={styles.filterInput} placeholder="Minimum Profit" onChange={onMinimumProfitChange} />
             </div>
             <hr />
+            <p>
+                Click <Link href="/linkvertise">here</Link> to get Starter Premium for free to see the top kat flips
+            </p>
             <p>Click on a craft for further details</p>
             <div className={styles.craftsList}>
                 <ListGroup className={styles.list}>{list}</ListGroup>

components/Linkvertise/Linkvertise.tsx

@@ -0,0 +1,114 @@
+'use client'
+import { useState } from 'react'
+import api from '../../api/ApiHelper'
+import { getLoadingElement } from '../../utils/LoadingUtils'
+import { useWasAlreadyLoggedIn } from '../../utils/Hooks'
+import GoogleSignIn from '../GoogleSignIn/GoogleSignIn'
+import { useRouter } from 'next/navigation'
+import { AUTO_REDIRECT_FROM_LINKVERTISE_EXPLANATION, getSetting, setSetting } from '../../utils/SettingsUtils'
+import { Container, Card, Form, Button } from 'react-bootstrap'
+
+export default function LowSupply() {
+    let [isLoggedIn, setIsLoggedIn] = useState(false)
+    let wasAlreadyLoggedIn = useWasAlreadyLoggedIn()
+    let [isRedirecting, setIsRedirecting] = useState(false)
+    let [autoredirect, setAutoRedirect] = useState(!!getSetting(AUTO_REDIRECT_FROM_LINKVERTISE_EXPLANATION))
+    let router = useRouter()
+
+    function onLogin() {
+        let googleId = sessionStorage.getItem('googleId')
+        if (googleId) {
+            setIsLoggedIn(true)
+
+            if (autoredirect) {
+                loadRedirectLink()
+            }
+        }
+    }
+
+    function loadRedirectLink() {
+        setIsRedirecting(true)
+        api.getLinkvertiseLink()
+            .then(link => {
+                router.push(link)
+            })
+            .finally(() => {
+                setIsRedirecting(false)
+            })
+    }
+
+    function onLoginFail() {
+        setIsLoggedIn(false)
+    }
+
+    return (
+        <>
+            <Container className="mt-4">
+                <Card className="mb-4">
+                    <Card.Header>
+                        <Card.Title>What is Linkvertise?</Card.Title>
+                    </Card.Header>
+                    <Card.Body>
+                        <Card.Text>
+                            Linkvertise is a service we use to offer our users a way to access the Starter Premium plan for free by completing simple tasks
+                            (mostly visiting websites of their partners). Instead of paying with money, you can unlock premium content by following a few steps
+                            on the Linkvertise platform. This is a great way for you to enjoy additional features without any direct cost while supporting our
+                            website.
+                        </Card.Text>
+                    </Card.Body>
+                </Card>
+                <Card className="mb-4">
+                    <Card.Header>
+                        <Card.Title>How Does It Work?</Card.Title>
+                    </Card.Header>
+                    <Card.Body>
+                        <Card.Text>
+                            <ol>
+                                <li>
+                                    <strong>Click Button below to get redirected to Linkvertise</strong>
+                                </li>
+                                <li>
+                                    <strong>Click on the orange "Get Website"</strong>
+                                </li>
+                                <li>
+                                    <strong>Choose one of the presented tasks and complete it (by visiting hat website)</strong>
+                                </li>
+                                <li>
+                                    <strong>
+                                        After you have completed the task, you get the option to be redirected back to our website and receive 1 hour of
+                                        Starter Premium
+                                    </strong>
+                                </li>
+                            </ol>
+                        </Card.Text>
+                    </Card.Body>
+                </Card>
+                <p>Thank you for your support and enjoy your premium experience!</p>
+            </Container>
+            <hr />
+            {!isLoggedIn && !wasAlreadyLoggedIn && <p>To use Linkvertise, please login with Google: </p>}
+            <GoogleSignIn onAfterLogin={onLogin} onLoginFail={onLoginFail} />
+            {isLoggedIn && (
+                <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
+                    <Button onClick={loadRedirectLink}>Get redirected to Linkvertise</Button>
+                    <Form.Group>
+                        <Form.Label htmlFor="autoRedirect" style={{ marginRight: 5 }}>
+                            Next time automatically redirect to Linkvertise
+                        </Form.Label>
+                        <Form.Check
+                            id="autoRedirect"
+                            inline
+                            onChange={e => {
+                                setSetting(AUTO_REDIRECT_FROM_LINKVERTISE_EXPLANATION, !autoredirect)
+                                setAutoRedirect(!autoredirect)
+                            }}
+                            checked={autoredirect}
+                            type="checkbox"
+                        />
+                    </Form.Group>
+                </div>
+            )}
+            {isRedirecting && getLoadingElement(<span>Redirecting...</span>)}
+        </>
+    )
+}

global.d.ts

@@ -268,6 +268,7 @@ interface API {
     updateConfig(configName: string, updateNotes: string = ''): Promise<void>
     requestArchivedAuctions(itemTag: string, itemFilter?: ItemFilter): Promise<ArchivedAuctionResponse>
     exportArchivedAuctionsData(itemTag: string, itemFilter: ItemFilter, discordWebhookUrl: string, flags: string[]): Promise<void>
+    getLinkvertiseLink(): Promise<string>
 }
 
 interface CacheUtils {

utils/ListUtils.tsx

@@ -21,7 +21,8 @@ export function getMoreAuctionsElement(
     if (!isLoggedIn || !premiumType) {
         return (
             <div style={{ marginBottom: '15px', textAlign: 'center' }}>
-                You can see more auctions with <Link href={'/premium'}>Premium</Link>
+                You can see more auctions with one of our <Link href={'/premium'}>Premium options</Link>. You can even click{' '}
+                <Link href="/linkvertise">here</Link> to get Starter Premium for free.
                 <GoogleSignIn onAfterLogin={onAfterLogin} />
             </div>
         )

utils/SettingsUtils.tsx

@@ -517,3 +517,4 @@ export const GOOGLE_NAME = 'googleName'
 export const USER_COUNTRY_CODE = 'userCountryCode'
 export const ITEM_FILTER_USE_COUNT = 'itemFilterUseCount'
 export const ITEM_FILER_SHOW_ADVANCED = 'itemFilterShowAdvanced'
+export const AUTO_REDIRECT_FROM_LINKVERTISE_EXPLANATION = 'autoRedirectFromLinkvertiseExplanation'