feat: pro setting

README.md

@@ -103,46 +103,47 @@ The project includes several Make commands to manage Docker containers and devel
 
 ### Optional configuration
 
-PayButton Server is configured with a `paybutton-config.json` file in the root of the repository. An example file can be find at [config/example-config.json](https://github.com/PayButton/paybutton-server/blob/master/config/example-config.json). The values it takes are:
+PayButton Server is configured with a `paybutton-config.json` file in the root of the repository. An example file with the default values can be find at [config/example-config.json](https://github.com/PayButton/paybutton-server/blob/master/config/example-config.json). The values it takes are:
 
 ---
 
 #### **apiDomain**
 ```
 type: string
-default: "http://localhost:3000/api",
 ```
 > Base path for the API.
 
 
 #### apiBasePath
 ```
 type: string
-default: "/api/auth"
 ```
 > Base API endpoint for authentication.
 
 
+#### websiteBasePath
+```
+type: string
+```
+> Base API endpoint for authentication through SuperTokens.
+
 #### websiteDomain
 ```
 type: string
-default: "http://localhost:3000"
 ```
 > Base path for the website.
 
 
 #### wsBaseURL
 ```
 type: string
-default: "http://localhost:5000"
 ```
 > Base path for the websocket server.
 
 
 #### showTestNetworks
 ```
 type: boolean
-default: false,
 ```
 > If the connection of test networks for eCash and Bitcoin Cash should appear in the Networks tab.
 
@@ -161,14 +162,12 @@ type: {
 #### priceAPIURL
 ```
 type: string
-default: "https://coin.dance/api/"
 ```
 > API to get prices from. Only coin.dance currently supported.
 
 #### redisURL
 ```
 type: string
-default: "redis://paybutton-cache:6379"
 ```
 > URL for the Redis server.
 
@@ -179,10 +178,6 @@ type: {
     "ecash": "chronik",
     "bitcoincash": "chronik"
 }
-default: {
-    "ecash": "chronik",
-    "bitcoincash": "chronik"
-}
 ```
 > Which client to use to get the blockchain information for each network. Currently, only "chronik" is supported for eCash and Bitcoin Cash.
 
@@ -193,44 +188,86 @@ type: {
    "ecash": boolean
    "bitcoincash": boolean
 }
-
-default: {
- "bitcoincash": true
-}
 ```
 > What networks are currently under maintenance.
 
 
 #### triggerPOSTTimeout
 ```
 type: number
-default: 3000
 ```
 > How long a POST request triggered from a button payment will wait for an answer to be marked as successful.
 
 #### smtpHost
 ```
 type: string
-default: N/A
 ```
 > Host name for the server from which payment trigger emails will be sent. Not setting this up will result in email triggers not working.
 
 
 #### smtpPort
 ```
 type: number
-default: N/A
 ```
 > Port for the SMTP server from which payment trigger emails will be sent. Not setting this up will result in email triggers not working.
 
 
 #### sideshiftAffiliateId
 ```
 type: string
-default: N/A
 ```
 > Necessary only for paybutton client to interact with sideshift through the server.
 
+#### proSettings
+```
+type: object
+```
+> General configuration for PayButton Pro. Each parameter is described below.
+
+##### proSettings.enabled
+```
+type: boolean
+```
+> If the Pro feature should be enabled or hidden.
+
+##### proSettings.monthsCost
+```
+type: {
+[key: string]: number
+}
+```
+> The pricing model for PayButton Pro subscription — [value] USD for [key] months.
+
+##### proSettings.payoutAddress
+```
+type: string
+```
+> The payout address for PayButton Pro subscriptions.
+
+##### proSettings.standardDailyEmailLimit
+```
+type: number | "Inf"
+```
+> How many emails can a standard user send daily.
+
+##### proSettings.proDailyEmailLimit
+```
+type: number | "Inf"
+```
+> How many emails can a PayButton Pro user send daily.
+
+##### proSettings.standardAddressesPerButtonLimit
+```
+type: number | "Inf"
+```
+> How many addresses can a standard Pro user add for a single button.
+
+##### proSettings.proAddressesPerButtonLimit
+```
+type: number | "Inf"
+```
+> How many addresses can a PayButton Pro user add for a single button.
+
 ---
 
 - For production, set `ENVIRONMENT=production` in `.env.local.` This optimizes the build for performance and skips the setup of various dev tools (like LiveReload).

components/Account/ProDisplay.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react'
+import ProPurchase from './ProPurchase'
+import style from './account.module.css'
+import stylep from '../../pages/account/account.module.css'
+import config from 'config/index'
+
+const ProConfig = (): JSX.Element => {
+  const [text, setText] = useState('')
+  const [isPro, setIsPro] = useState<boolean | null>()
+
+  const showLimit = (configLimit: number | 'Inf'): string => {
+    return configLimit === 'Inf' ? 'Unlimited' : configLimit.toString()
+  }
+
+  useEffect(() => {
+    void (async () => {
+      const res = await fetch('/api/user/remainingProTime')
+      if (res.status === 200) {
+        const remainingMs: number | null = await res.json()
+        if (remainingMs === null) {
+          setIsPro(false)
+          setText('You are not PRO.')
+        } else if (remainingMs <= 0) {
+          setIsPro(false)
+          setText('Your PRO has expired.')
+        } else {
+          const futureDate = new Date(Date.now() + remainingMs)
+          setIsPro(true)
+          setText(`You are PRO until ${futureDate.toLocaleDateString()}.`)
+        }
+      } else {
+        setText('Failed to fetch PRO status')
+      }
+    })()
+  }, [])
+
+  return <>
+    <h3>PayButton Pro</h3>
+    <div className={style.pro_ctn}>
+      <div className={stylep.label}>
+        {text}
+      </div>
+      {isPro === false && <ProPurchase/>}
+      <div className={stylep.public_key_info_ctn}>
+        <table>
+          <thead>
+            <tr>
+              <th></th>
+              <th>Standard</th>
+              <th>Pro</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Outgoing Emails on Payment</td>
+              <td>{showLimit(config.proSettings.standardDailyEmailLimit)} / day</td>
+              <td>{showLimit(config.proSettings.proDailyEmailLimit)} / day</td>
+            </tr>
+            <tr>
+              <td>Addresses Per Button</td>
+              <td>{showLimit(config.proSettings.standardAddressesPerButtonLimit)}</td>
+              <td>{showLimit(config.proSettings.proAddressesPerButtonLimit)}</td>
+            </tr>
+            <tr>
+              <td>Outgoing Server-to-Server Messages On Payment</td>
+              <td>{showLimit(config.proSettings.standardDailyEmailLimit)} / day</td>
+              <td>{showLimit(config.proSettings.proDailyEmailLimit)} / day</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </>
+}
+
+export default ProConfig

components/Account/ProPurchase.tsx

@@ -0,0 +1,13 @@
+import Button from 'components/Button'
+import Link from 'next/link'
+import style from './account.module.css'
+
+const ProPurchase = (): JSX.Element => {
+  return <div className={style.upgrade_btn}>
+    <Link href='/pro'>
+      <Button>Upgrade to Pro</Button>
+    </Link>
+  </div>
+}
+
+export default ProPurchase

components/Account/account.module.css

@@ -44,3 +44,33 @@ body[data-theme='dark'] .changepw_ctn input {
   }
 }
 
+.pro_ctn {
+  width: 100%;
+  background-color: #fff;
+  max-width: 700px;
+  padding: 20px;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+}
+
+body[data-theme="dark"] .pro_ctn {
+  background-color: var(--secondary-bg-color);
+}
+
+body[data-theme="dark"] .pro_ctn input {
+  border-color: var(--gray)
+}
+
+.upgrade_btn {
+  margin-top: 2rem;
+  width: 100%
+}
+.upgrade_btn a {
+  width: 100%
+}
+.upgrade_btn a button {
+  width: 100%
+}

components/Button/index.tsx

@@ -19,7 +19,7 @@ interface ButtonProps {
   loading?: boolean
 }
 
-export default function TopBar ({
+export default function Button ({
   children,
   disabled,
   type = 'button',

components/Organization/ViewOrganization.tsx

@@ -22,7 +22,8 @@ const ViewOrganization = ({ user, orgMembers, setOrgMembers, organization }: IPr
   const [orgEdit, setOrgEdit] = useState('')
   const [loading, setLoading] = useState(false)
 
-  return (
+  return <>
+    <h3 className={style.config_title}>Organization</h3>
     <div className={style.org_ctn}>
       {org !== null && org.creatorId === user.userProfile.id
         ? (
@@ -129,7 +130,7 @@ const ViewOrganization = ({ user, orgMembers, setOrgMembers, organization }: IPr
             )}
       {error !== '' && <div className={style.error_message}>{error}</div>}
     </div>
-  )
+  </>
 }
 
 export default ViewOrganization

config/example-config.json

@@ -29,5 +29,19 @@
     "bitcoincash": true
   },
   "triggerPOSTTimeout": 3000,
-  "sideshiftAffiliateId": "JPk84U3xN"
+  "sideshiftAffiliateId": "JPk84U3xN",
+  "proSettings": {
+    "enabled": true,
+    "monthsCost": {
+      "1": 10,
+      "3": 20,
+      "6": 30,
+      "12": 50
+    },
+    "payoutAddress":  "ecash:qrf4zh4vgrdal8d8gu905d90w5u2y60djcd2d5h6un",
+    "standardDailyEmailLimit": 5,
+    "proDailyEmailLimit": 100,
+    "standardAddressesPerButtonLimit": 20,
+    "proAddressesPerButtonLimit": "Inf"
+  }
 }

config/index.ts

@@ -3,6 +3,18 @@ import localConfig from '../paybutton-config.json'
 
 export type BlockchainClientOptions = 'grpc' | 'chronik'
 
+interface ProSettings {
+  enabled: boolean
+  monthsCost: {
+    [key: string]: number
+  }
+  payoutAddress: string
+  standardDailyEmailLimit: number | 'Inf'
+  proDailyEmailLimit: number | 'Inf'
+  standardAddressesPerButtonLimit: number | 'Inf'
+  proAddressesPerButtonLimit: number | 'Inf'
+}
+
 interface Config {
   appName: string
   apiDomain: string
@@ -21,6 +33,7 @@ interface Config {
   sideshiftAffiliateId: string
   smtpHost: string
   smtpPort: number
+  proSettings: ProSettings
 }
 
 const readConfig = (): Config => {