backpack-ui/src/components/modalContent/modalContentSocialAuth.jsx

Lonely Planet's Components

import React from "react";
import PropTypes from "prop-types";
import radium from "radium";
import Logo from "../logo";
import SocialLoginButton from "../socialLoginButton";
import MoreLink from "../moreLink";
import DisclaimerText from "../disclaimerText";
import { textHeading7 } from "../../utils/typography";
import propTypes from "../../utils/propTypes";

const styles = {
  container: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  },

  logo: {
    marginBottom: "16px",
    width: "160px",
  },

  message: Object.assign({}, {
    maxWidth: "295px",
    width: "100%",
    marginBottom: "40px",
    textAlign: "center",
  }, textHeading7()),

  content: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: "24px",
  },

  button: {
    marginBottom: "16px",
  },

  moreLink: {
    letterSpacing: 0,
    padding: "16px",
  },
};

const disclaimer = `If you sign up with Twitter, Facebook or Google, we’ll automatically import your
  profile information. We’ll never post without your permission. Alternatively sign in with a
  username and password. To sign into
  Lonely Planet you must have cookies enabled and agree to the
  <a href="https://www.lonelyplanet.com/legal/website-terms/">Terms of Service</a> and read the
  <a href="https://www.lonelyplanet.com/legal/privacy-policy/">Privacy Policy</a> and
  <a href="https://www.lonelyplanet.com/legal/cookies/">Cookie Policy</a>. For additional account
  enquiries see
  <a href="https://support.lonelyplanet.com/hc/en-us/sections/115003521167-Lonely-Planet-Profiles" target="_blank" rel="noopener noreferrer">Account help</a>.`;

const socialNavigate = (path) => {
  window.location = `https://auth.lonelyplanet.com/users/auth/${path}`;
};

const ModalContentSocialAuth = ({ message, style, qaHook }) => (
  <div style={[styles.container, style]} className="ModalContentSocialAuth">
    <Logo style={styles.logo} />

    <div style={styles.content}>
      <p style={styles.message}>
        {message}
      </p>

      <SocialLoginButton
        style={styles.button}
        iconName="FacebookBlockColor"
        onClick={() => socialNavigate("facebook")}
        qaHook={qaHook}
      >
        Continue with Facebook
      </SocialLoginButton>

      <SocialLoginButton
        style={styles.button}
        iconName="TwitterColor"
        onClick={() => socialNavigate("twitter")}
        qaHook={qaHook}
      >
        Continue with Twitter
      </SocialLoginButton>

      <SocialLoginButton
        style={styles.button}
        iconName="GoogleColor"
        onClick={() => socialNavigate("google_oauth2")}
        qaHook={qaHook}
      >
        Continue with Google
      </SocialLoginButton>

      <MoreLink
        caps
        size="small"
        style={styles.moreLink}
        qaHook={qaHook ? "sign-in-link" : null}
        href="https://auth.lonelyplanet.com/users/sign_in"
      >
        Sign in or sign up with email
      </MoreLink>
    </div>

    <DisclaimerText>
      {disclaimer}
    </DisclaimerText>
  </div>
);

ModalContentSocialAuth.propTypes = {
  message: PropTypes.string.isRequired,
  style: propTypes.style,
  qaHook: PropTypes.bool,
};

ModalContentSocialAuth.defaultProps = {
  message: "Sign Up / Sign In",
  qaHook: false,
};

export default radium(ModalContentSocialAuth);