text: import React from 'react';
  import { useSelector, useDispatch } from 'react-redux';
  import { selectZipUp } from 'redux/selectors/userSelectors';
  import styled from '@emotion/styled';
  import { css } from '@emotion/core';
  import colors from 'design/colors';
  import { BP } from 'design/breakpoints';
  import { Heading, Text, fontSize } from 'design/typography';
  import { openModal, MODAL_TYPES } from 'redux/actions/modalActions';
  import config from 'config';
  import { useTranslation } from 'react-i18next';
  
  const SavingsBanner = (props, context) => {
    const { t } = useTranslation();
    const zipUp = useSelector(selectZipUp);
    const savingsSignedUp = (zipUp.status && zipUp.status.isSubscribed) || false;
    const bannerRate = config.global.zipUp.bannerRate;
    const language = window.localStorage.getItem('language');
    const interest = language === 'en-GB' ? config.global.zipUp.interest : '';
    const learnMoreLink = config.global.zipUp.learnMoreLink || '';
  
    const dispatch = useDispatch();
  
    const onOpenModal = () => {
      dispatch(openModal(MODAL_TYPES.ZIPUP_PLAN));
    };
  
    return (
      <>
        {savingsSignedUp ? (
          <RatesBannerSt>
            <div>
              <Text>{t('Congrats, your assets are in ZipUp!')}</Text>
              <Heading as={'h4'} padding={'0 0 10px'}>
                {t('ZipUp more. Earn daily. Use any time.')}
              </Heading>
            </div>
            <LinkContainerSt>
              <LearnLinkSt href={learnMoreLink} target="_blank">
                {t('Learn more')}
              </LearnLinkSt>
            </LinkContainerSt>
          </RatesBannerSt>
        ) : (
          <SignUpBannerSt>
            <HeadingSt as="h3">
              {t('ZipUp and earn up to {bannerRate} {interest} paid daily.', {
                bannerRate,
                interest
              })}{' '}
            </HeadingSt>
            <LinkContainerSt>
              <LearnLinkSt href={learnMoreLink} target="_blank">
                {t('Learn more')}
              </LearnLinkSt>
              <SignUpLinkSt target="_blank" onClick={onOpenModal}>
                {t('Sign up')}
              </SignUpLinkSt>{' '}
            </LinkContainerSt>
          </SignUpBannerSt>
        )}
      </>
    );
  };
  
  export default SavingsBanner;
  
  const Banner = styled.div`
    padding: 10px 20px;
    text-align: center;
    background: ${colors.bg_highlight};
    width: 100%;
    margin: 20px 0;
    border-radius: 5px;
  `;
  
  const SignUpBannerSt = styled(Banner)`
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    text-align: center;
    background: ${colors.bg_highlight};
    width: 100%;
    margin: 20px 0;
    border-radius: 5px;
    @media (max-width: ${BP.tablet}) {
      justify-content: center;
      flex-direction: column;
      border-radius: 0px;
    }
  `;
  
  const HeadingSt = styled(Heading)`
    padding: 12px 10px 12px 0;
    @media (max-width: ${BP.mobile}) {
      padding: 4px 20px 8px;
      font-size: ${fontSize.paragraph};
    }
  `;
  
  const RatesBannerSt = styled.div`
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    /* text-align: center; */
    background: ${colors.bg_highlight};
    width: 100%;
    margin: 20px 0;
    border-radius: 5px;
    @media (max-width: ${BP.tablet}) {
      border-radius: 0px;
      flex-direction: column;
      text-align: center;
    }
  `;
  
  const LinkStyle = css`
    display: inline-block;
    min-width: 140px;
    max-width: 300px;
    height: 28px;
    border: 1px solid ${colors.text_body};
    color: ${colors.text_body};
    border-radius: 15px;
    padding: 5px 20px;
    text-align: center;
    font-size: ${fontSize.h5};
    margin: 8px 3px;
  `;
  
  const LearnLinkSt = styled.a`
    ${LinkStyle};
  `;
  
  const SignUpLinkSt = styled.button`
    ${LinkStyle}
    background: ${colors.bg_transparent_light};
  `;
  
  const LinkContainerSt = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    @media (max-width: ${BP.tablet}) {
      flex-direction: row;
      margin: 0 auto;
    }
  `;
  