backpack-ui/dist/components/modalContent/modalContentSocialAuth.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require("babel-runtime/helpers/extends");

var _extends3 = _interopRequireDefault(_extends2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _logo = require("../logo");

var _logo2 = _interopRequireDefault(_logo);

var _socialLoginButton = require("../socialLoginButton");

var _socialLoginButton2 = _interopRequireDefault(_socialLoginButton);

var _moreLink = require("../moreLink");

var _moreLink2 = _interopRequireDefault(_moreLink);

var _disclaimerText = require("../disclaimerText");

var _disclaimerText2 = _interopRequireDefault(_disclaimerText);

var _typography = require("../../utils/typography");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

  message: (0, _extends3.default)({}, {
    maxWidth: "295px",
    width: "100%",
    marginBottom: "40px",
    textAlign: "center"
  }, (0, _typography.textHeading7)()),

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

  button: {
    marginBottom: "16px"
  },

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

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

var socialNavigate = function socialNavigate(path) {
  window.location = "https://auth.lonelyplanet.com/users/auth/" + path;
};

var ModalContentSocialAuth = function ModalContentSocialAuth(_ref) {
  var message = _ref.message,
      style = _ref.style,
      qaHook = _ref.qaHook;
  return _react2.default.createElement(
    "div",
    { style: [styles.container, style], className: "ModalContentSocialAuth" },
    _react2.default.createElement(_logo2.default, { style: styles.logo }),
    _react2.default.createElement(
      "div",
      { style: styles.content },
      _react2.default.createElement(
        "p",
        { style: styles.message },
        message
      ),
      _react2.default.createElement(
        _socialLoginButton2.default,
        {
          style: styles.button,
          iconName: "FacebookBlockColor",
          onClick: function onClick() {
            return socialNavigate("facebook");
          },
          qaHook: qaHook
        },
        "Continue with Facebook"
      ),
      _react2.default.createElement(
        _socialLoginButton2.default,
        {
          style: styles.button,
          iconName: "TwitterColor",
          onClick: function onClick() {
            return socialNavigate("twitter");
          },
          qaHook: qaHook
        },
        "Continue with Twitter"
      ),
      _react2.default.createElement(
        _socialLoginButton2.default,
        {
          style: styles.button,
          iconName: "GoogleColor",
          onClick: function onClick() {
            return socialNavigate("google_oauth2");
          },
          qaHook: qaHook
        },
        "Continue with Google"
      ),
      _react2.default.createElement(
        _moreLink2.default,
        {
          caps: true,
          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"
      )
    ),
    _react2.default.createElement(
      _disclaimerText2.default,
      null,
      disclaimer
    )
  );
};

ModalContentSocialAuth.propTypes = {
  message: _propTypes2.default.string.isRequired,
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

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

exports.default = (0, _radium2.default)(ModalContentSocialAuth);