backpack-ui/dist/components/multiStep/multiStepLogin.js

Lonely Planet's Components

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

var _multiStep = require("./multiStep");

var _multiStep2 = _interopRequireDefault(_multiStep);

var _button = require("../button");

var _button2 = _interopRequireDefault(_button);

var _modalContentMagicLinkForm = require("../modalContent/modalContentMagicLinkForm");

var _modalContentMagicLinkForm2 = _interopRequireDefault(_modalContentMagicLinkForm);

var _modalContentLegacyLoginForm = require("../modalContent/modalContentLegacyLoginForm");

var _modalContentLegacyLoginForm2 = _interopRequireDefault(_modalContentLegacyLoginForm);

var _auth = require("../auth");

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

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

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

var styles = {
  disclaimerAboveButton: {
    maxWidth: "100%",
    width: "100%"
  },
  disclaimerBelowButton: {
    maxWidth: "350px",
    textAlign: "center"
  },
  legacyText: {
    color: _colors2.default.textPrimary,
    fontWeight: _typography.fontWeightMedium
  },
  legacyButton: {
    backgroundColor: _colors2.default.bgPrimary,
    color: _colors2.default.linkPrimary,
    fontWeight: _typography.fontWeightMedium
  }
};

var MultiStepLogin = function MultiStepLogin(_ref) {
  var currentStep = _ref.currentStep,
      setStep = _ref.setStep,
      authActions = _ref.authActions,
      showLogo = _ref.showLogo,
      doneAction = _ref.doneAction,
      qaHook = _ref.qaHook;

  var SocialDisclaimer = _react2.default.createElement(
    _auth.AuthDisclaimer,
    { style: styles.disclaimerBelowButton },
    authActions.password && _react2.default.createElement(
      "p",
      null,
      _react2.default.createElement(
        "span",
        { style: styles.legacyText },
        "Or sign in with a legacy "
      ),
      _react2.default.createElement(
        "button",
        {
          "data-testid": qaHook ? "legacy-username-password-btn" : null,
          style: styles.legacyButton,
          onClick: function onClick(event) {
            setStep(3);
            event.preventDefault();
          }
        },
        "username and password"
      ),
      "."
    ),
    "Lonely Planet uses cookies to improve your experience, see our ",
    _react2.default.createElement(
      "a",
      { href: "https://www.lonelyplanet.com/legal/cookies/", "data-testid": qaHook ? "cookie-policy-link" : null },
      "Cookie Policy"
    ),
    ". Having trouble signing in? See ",
    _react2.default.createElement(
      "a",
      { href: "https://support.lonelyplanet.com/hc/en-us/sections/115003521167-Lonely-Planet-Profiles", "data-testid": qaHook ? "account-help-link" : null, target: "_blank", rel: "noopener noreferrer" },
      "Account help"
    ),
    "."
  );

  var EmailDisclaimer = _react2.default.createElement(
    _auth.AuthDisclaimer,
    { style: styles.disclaimerAboveButton },
    "By clicking next below and creating an account, you agree to our ",
    _react2.default.createElement(
      "a",
      { href: "https://www.lonelyplanet.com/legal/website-terms/", "data-testid": qaHook ? "tos-link" : null },
      "terms of service"
    ),
    " and that you're happy for Lonely Planet to use your information as set out in our ",
    _react2.default.createElement(
      "a",
      { href: "https://www.lonelyplanet.com/legal/privacy-policy/", "data-testid": qaHook ? "privacy-policy-link" : null },
      "privacy policy"
    ),
    " (including our ",
    _react2.default.createElement(
      "a",
      { href: "https://www.lonelyplanet.com/legal/cookies/" },
      "cookie use"
    ),
    ")."
  );

  var LegacyDisclaimer = _react2.default.createElement(
    _auth.AuthDisclaimer,
    { style: styles.disclaimerBelowButton },
    _react2.default.createElement(
      "a",
      { href: "https://auth.lonelyplanet.com/users/password/new/", "data-testid": qaHook ? "forgot-password-link" : null },
      "Forgot your password?"
    ),
    " Please contact ",
    _react2.default.createElement(
      "a",
      { href: "mailto:community@lonelyplanet.com" },
      "community@lonelyplanet.com"
    ),
    " for additional assistance if you do not receive an email from us soon. Be sure to check your spam or junk folder, just in case."
  );

  return _react2.default.createElement(
    _multiStep2.default,
    { currentStep: currentStep },
    _react2.default.createElement(
      _auth.AuthContainer,
      { key: "home", hasLogo: showLogo, className: "js-gtm-auth-container" },
      _react2.default.createElement(
        _auth.AuthMessage,
        null,
        "Organize your research & unlock tools like bookmarking."
      ),
      _react2.default.createElement(_auth.AuthSocialButtons, {
        actions: authActions,
        className: "js-gtm-auth-social-buttons"
      }),
      authActions.passwordless && _react2.default.createElement(_auth.AuthEmailLink, {
        onClick: function onClick() {
          setStep(2);
        }
      }),
      SocialDisclaimer
    ),
    _react2.default.createElement(
      _auth.AuthContainer,
      { key: "passwordless", hasLogo: showLogo },
      _react2.default.createElement(
        _auth.AuthMessage,
        { style: { marginTop: "56px" } },
        "Enter your email address to sign in or create an account."
      ),
      _react2.default.createElement(_modalContentMagicLinkForm2.default, {
        disclaimer: EmailDisclaimer,
        onSubmit: function onSubmit(email) {
          authActions.passwordless(email);
          setStep(4);
        }
      })
    ),
    _react2.default.createElement(
      _auth.AuthContainer,
      { key: "legacy", hasLogo: showLogo },
      _react2.default.createElement(
        _auth.AuthMessage,
        { style: { marginTop: "80px" } },
        "Enter your email address or username and password to sign in."
      ),
      _react2.default.createElement(_modalContentLegacyLoginForm2.default, {
        authLink: authActions.password
      }),
      LegacyDisclaimer
    ),
    _react2.default.createElement(
      _auth.AuthContainer,
      { key: "success", hasLogo: showLogo },
      _react2.default.createElement(
        _auth.AuthMessage,
        {
          title: "Check your email",
          style: { marginTop: "80px" }
        },
        "We sent you a secure link to sign in with. Please check your email inbox."
      ),
      _react2.default.createElement(
        _button2.default,
        {
          size: "small",
          onClick: doneAction,
          rounded: true,
          "data-testid": qaHook ? "ok-btn" : null
        },
        "Ok"
      )
    )
  );
};

MultiStepLogin.propTypes = {
  currentStep: _propTypes2.default.number,
  setStep: _propTypes2.default.func,
  authActions: _propTypes2.default.shape({
    facebook: _propTypes2.default.func,
    twitter: _propTypes2.default.func,
    google: _propTypes2.default.func,
    passwordless: _propTypes2.default.func,
    password: _propTypes2.default.string
  }),
  showLogo: _propTypes2.default.bool,
  doneAction: _propTypes2.default.func,
  qaHook: _propTypes2.default.bool
};

MultiStepLogin.defaultProps = {
  qaHook: false
};

exports.default = MultiStepLogin;