<commit_before>import React, { useState, useEffect } from 'react'
import {
  Section,
  SectionHeader,
  SectionPrimaryButton,
  SectionSecondaryButton,
  SectionTable
} from './styled'
import styled from '../../lib/styled'
import { usePreferences } from '../../lib/preferences'
import { getSubscription, Subscription } from '../../lib/accounts'
import LoginButton from '../atoms/LoginButton'

const BillingContent = styled.div`
  .billing-lead {
    margin-bottom: 24px;

    p,
    button {
      display: inline-block;
    }
    button {
      margin-left: 24px;
    }
  }

  .billing-plan {
    vertical-align: top;
    text-align: center;
  }

  .billing-name {
    margin-bottom: 8px;
  }

  .billing-price {
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 400;
  }

  .billing-extra {
    margin-top: 24px;
    max-width: 600px;
    font-style: italic;
    line-height: 1.8;
  }
`

const BillingTab = () => {
  const { preferences } = usePreferences()
  const user = preferences['general.accounts'][0]
  const [subscription, setSubscription] = useState<Subscription | undefined>(
    undefined
  )

  useEffect(() => {
    if (user != null) {
      getSubscription(user).then(subscription => {
        setSubscription(subscription)
      })
    }
  }, [user])

  const loggedIn = user != null
  const hasSubscription = subscription != null

  return (
    <Section>
      <SectionHeader>Billing</SectionHeader>
      <BillingContent>
        {!loggedIn && (
          <div className='billing-lead'>
            <p>Please sign in to upgrade your plan.</p>
          </div>
        )}
        <SectionTable>
          <thead>
            <th></th>
            <th className='billing-plan'>
              <span className='billing-name'>Basic</span>
              <span className='billing-price'>$0</span>
              {!hasSubscription && (
                <SectionSecondaryButton disabled>
                  Current
                </SectionSecondaryButton>
              )}
            </th>
            <th className='billing-plan'>
              <span className='billing-name'>Premium</span>
              <span className='billing-price'>$3/Month (USD) *</span>
              {!loggedIn && (
                <LoginButton ButtonComponent={SectionPrimaryButton}>
                  Sign In
                </LoginButton>
              )}
              {loggedIn && (
                <a href='/subscription'>
                  <SectionPrimaryButton>
                    {hasSubscription ? 'Manage' : 'Upgrade'}
                  </SectionPrimaryButton>
                </a>
              )}
            </th>
          </thead>
          <tbody>
            <tr>
              <th>Web App</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Desktop App (Mac/Windows/Linux)</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Mobile App (Will be launched at Jan, 2020)</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Syncing Multiple Devices</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Local Storage</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Cloud Storage</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Cloud Storage Size</th>
              <td>100MB</td>
              <td>2GB</td>
            </tr>
          </tbody>
        </SectionTable>
        {loggedIn && (
          <div className='billing-extra'>
            <p>
              * If you need more cloud storage, you can add it at any time by
              paying $5 (USD) for every 5GB. Click the "Add Extra Storage"
              button below.
            </p>
            <a href='/subscription'>
              <SectionPrimaryButton>Add Extra Storage</SectionPrimaryButton>
            </a>
          </div>
        )}
      </BillingContent>
    </Section>
  )
}

export default BillingTab
<commit_msg>fixed external links in billing<commit_after>import React, { useState, useEffect } from 'react'
import {
  Section,
  SectionHeader,
  SectionPrimaryButton,
  SectionSecondaryButton,
  SectionTable
} from './styled'
import styled from '../../lib/styled'
import { usePreferences } from '../../lib/preferences'
import { getSubscription, Subscription } from '../../lib/accounts'
import LoginButton from '../atoms/LoginButton'
import { openNew } from '../../lib/utils/platform'

const BillingContent = styled.div`
  .billing-lead {
    margin-bottom: 24px;

    p,
    button {
      display: inline-block;
    }
    button {
      margin-left: 24px;
    }
  }

  .billing-plan {
    vertical-align: top;
    text-align: center;
  }

  .billing-name {
    margin-bottom: 8px;
  }

  .billing-price {
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: 400;
  }

  .billing-extra {
    margin-top: 24px;
    max-width: 600px;
    font-style: italic;
    line-height: 1.8;
  }
`

const BillingTab = () => {
  const { preferences } = usePreferences()
  const user = preferences['general.accounts'][0]
  const [subscription, setSubscription] = useState<Subscription | undefined>(
    undefined
  )

  useEffect(() => {
    if (user != null) {
      getSubscription(user).then(subscription => {
        setSubscription(subscription)
      })
    }
  }, [user])

  const loggedIn = user != null
  const hasSubscription = subscription != null

  return (
    <Section>
      <SectionHeader>Billing</SectionHeader>
      <BillingContent>
        {!loggedIn && (
          <div className='billing-lead'>
            <p>Please sign in to upgrade your plan.</p>
          </div>
        )}
        <SectionTable>
          <thead>
            <th></th>
            <th className='billing-plan'>
              <span className='billing-name'>Basic</span>
              <span className='billing-price'>$0</span>
              {!hasSubscription && (
                <SectionSecondaryButton disabled>
                  Current
                </SectionSecondaryButton>
              )}
            </th>
            <th className='billing-plan'>
              <span className='billing-name'>Premium</span>
              <span className='billing-price'>$3/Month (USD) *</span>
              {!loggedIn && (
                <LoginButton ButtonComponent={SectionPrimaryButton}>
                  Sign In
                </LoginButton>
              )}
              {loggedIn && (
                <SectionPrimaryButton onClick={() => openNew('https://note.boostio.co/subscription')}>
                  {hasSubscription ? 'Manage' : 'Upgrade'}
                </SectionPrimaryButton>
              )}
            </th>
          </thead>
          <tbody>
            <tr>
              <th>Web App</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Desktop App (Mac/Windows/Linux)</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Mobile App (Will be launched at Jan, 2020)</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Syncing Multiple Devices</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Local Storage</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Cloud Storage</th>
              <td>〇</td>
              <td>〇</td>
            </tr>
            <tr>
              <th>Cloud Storage Size</th>
              <td>100MB</td>
              <td>2GB</td>
            </tr>
          </tbody>
        </SectionTable>
        {loggedIn && (
          <div className='billing-extra'>
            <p>
              * If you need more cloud storage, you can add it at any time by
              paying $5 (USD) for every 5GB. Click the "Add Extra Storage"
              button below.
            </p>
            <SectionPrimaryButton onClick={() => openNew('https://note.boostio.co/subscription')}>Add Extra Storage</SectionPrimaryButton>
          </div>
        )}
      </BillingContent>
    </Section>
  )
}

export default BillingTab

{'fraction_non_alphanumeric': 0.1355000597442944, 'fraction_numerical': 0.007647269685745011, 'mean_word_length': 1.4480842351564784, 'pattern_counts': {'":': 0, '<': 205, '<?xml version=': 0, '>': 213, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3825017', 'n_tokens_mistral': 2548, 'n_tokens_neox': 2443, 'n_words': 506}