<commit_before>import React, { useState } from 'react'
import styled from 'styled-components'

import Box, { BoxProps } from 'v2/components/UI/Box'
import Text from 'v2/components/UI/Text'
import GenericButton from 'v2/components/UI/GenericButton'
import Icons from 'v2/components/UI/Icons'
import constants from 'v2/styles/constants'

const Outer = styled(Box)`
  display: flex;
  justify-content: center;
  align-items: center;
`

const Container = styled(Box).attrs({
  px: 6,
  py: 6,
  borderRadius: '0.5em',
})`
  background-color: ${p => p.theme.colors.gray.input};
  flex-shrink: 0;
  text-align: left;
  flex-basis: 0;
`

const ButtonContainer = styled(Box).attrs({
  mt: 7,
})`
  flex-basis: 400px;
  width: 636px;

  ${constants.media.small`
    width: 100%;
  `}
`

const HeaderContainer = styled(Box).attrs({
  mb: 5,
})`
  display: flex;
  justify-content: flex-start;
  align-items: center;
`

const Button = styled(GenericButton).attrs({
  mb: 4,
})`
  flex-shrink: 0;
  flex-basis: auto;
  white-space: nowrap;
`

interface CancelPremiumProps {
  onCancel: () => void
}

export const CancelPremium: React.FC<CancelPremiumProps & BoxProps> = ({
  onCancel,
  ...rest
}) => {
  const [mode, setMode] = useState<'resting' | 'active' | 'cancelling'>(
    'resting'
  )

  const activateConfirmation = e => {
    e.preventDefault()
    setMode('active')
  }

  const cancelCancellation = e => {
    e.preventDefault()
    setMode('resting')
  }

  return (
    <Box {...rest}>
      {mode === 'resting' && (
        <Text f={2} underlineLinks>
          <a onClick={activateConfirmation} role="button" tabIndex={0}>
            Cancel premium
          </a>
        </Text>
      )}

      {mode !== 'resting' && (
        <Outer>
          <Container>
            <HeaderContainer>
              <Icons name="Info" size="0.75rem" color="gray.regular" mr={4} />
              <Text f={2} mb={4} fontWeight="bold">
                Are you sure?
              </Text>
            </HeaderContainer>
            <Text f={2} mb={4} boldLinks>
              If you&apos;re cancelling your Premium membership, you&apos;ll
              lose access to all of your premium features and won&apos;t be able
              to add any more blocks. <strong>Note:</strong> If you&apos;re
              cancelling for financial reasons, please{' '}
              <a href="mailto:<EMAIL>?subject=Premium account financial assistance">
                contact us
              </a>{' '}
              and we&apos;ll work with you.
            </Text>
            <ButtonContainer>
              <Button
                f={2}
                onClick={onCancel}
                disabled={mode === 'cancelling'}
                mr={4}
              >
                {
                  {
                    active: 'Yes, please cancel my Premium membership',
                    cancelling: 'Cancelling...',
                    error: 'Error',
                    refreshing: 'Wait',
                  }[mode]
                }
              </Button>{' '}
              {mode !== 'cancelling' && (
                <Button
                  f={2}
                  borderColor="state.premium"
                  color="state.premium"
                  onClick={cancelCancellation}
                >
                  Nevermind, I'll keep my Premium membership!
                </Button>
              )}
            </ButtonContainer>
          </Container>
        </Outer>
      )}
    </Box>
  )
}

export default CancelPremium<commit_msg>Fix one more apostrophe<commit_after>import React, { useState } from 'react'
import styled from 'styled-components'

import Box, { BoxProps } from 'v2/components/UI/Box'
import Text from 'v2/components/UI/Text'
import GenericButton from 'v2/components/UI/GenericButton'
import Icons from 'v2/components/UI/Icons'
import constants from 'v2/styles/constants'

const Outer = styled(Box)`
  display: flex;
  justify-content: center;
  align-items: center;
`

const Container = styled(Box).attrs({
  px: 6,
  py: 6,
  borderRadius: '0.5em',
})`
  background-color: ${p => p.theme.colors.gray.input};
  flex-shrink: 0;
  text-align: left;
  flex-basis: 0;
`

const ButtonContainer = styled(Box).attrs({
  mt: 7,
})`
  flex-basis: 400px;
  width: 636px;

  ${constants.media.small`
    width: 100%;
  `}
`

const HeaderContainer = styled(Box).attrs({
  mb: 5,
})`
  display: flex;
  justify-content: flex-start;
  align-items: center;
`

const Button = styled(GenericButton).attrs({
  mb: 4,
})`
  flex-shrink: 0;
  flex-basis: auto;
  white-space: nowrap;
`

interface CancelPremiumProps {
  onCancel: () => void
}

export const CancelPremium: React.FC<CancelPremiumProps & BoxProps> = ({
  onCancel,
  ...rest
}) => {
  const [mode, setMode] = useState<'resting' | 'active' | 'cancelling'>(
    'resting'
  )

  const activateConfirmation = e => {
    e.preventDefault()
    setMode('active')
  }

  const cancelCancellation = e => {
    e.preventDefault()
    setMode('resting')
  }

  return (
    <Box {...rest}>
      {mode === 'resting' && (
        <Text f={2} underlineLinks>
          <a onClick={activateConfirmation} role="button" tabIndex={0}>
            Cancel premium
          </a>
        </Text>
      )}

      {mode !== 'resting' && (
        <Outer>
          <Container>
            <HeaderContainer>
              <Icons name="Info" size="0.75rem" color="gray.regular" mr={4} />
              <Text f={2} mb={4} fontWeight="bold">
                Are you sure?
              </Text>
            </HeaderContainer>
            <Text f={2} mb={4} boldLinks>
              If you&apos;re cancelling your Premium membership, you&apos;ll
              lose access to all of your premium features and won&apos;t be able
              to add any more blocks. <strong>Note:</strong> If you&apos;re
              cancelling for financial reasons, please{' '}
              <a href="mailto:<EMAIL>?subject=Premium account financial assistance">
                contact us
              </a>{' '}
              and we&apos;ll work with you.
            </Text>
            <ButtonContainer>
              <Button
                f={2}
                onClick={onCancel}
                disabled={mode === 'cancelling'}
                mr={4}
              >
                {
                  {
                    active: 'Yes, please cancel my Premium membership',
                    cancelling: 'Cancelling...',
                    error: 'Error',
                    refreshing: 'Wait',
                  }[mode]
                }
              </Button>{' '}
              {mode !== 'cancelling' && (
                <Button
                  f={2}
                  borderColor="state.premium"
                  color="state.premium"
                  onClick={cancelCancellation}
                >
                  Nevermind, I&apos;ll keep my Premium membership!
                </Button>
              )}
            </ButtonContainer>
          </Container>
        </Outer>
      )}
    </Box>
  )
}

export default CancelPremium
{'fraction_non_alphanumeric': 0.13341804320203304, 'fraction_numerical': 0.010447550472963434, 'mean_word_length': 1.7845911949685536, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 73, 'https://': 0, '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': '13616', 'n_tokens_mistral': 2214, 'n_tokens_neox': 2118, 'n_words': 496}