@krowdy/kds-auth/LoginSinglePage/GoogleButton.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _react = _interopRequireDefault(require("react"));

var _google = require("@react-oauth/google");

var _kdsCore = require("@krowdy/kds-core");

var _constants = require("./constants");

var _utils = require("../utils");

var _ref = /*#__PURE__*/_react["default"].createElement(_kdsCore.Typography, {
  variant: "body2"
}, "Ingresa con Google");

var GoogleButton = function GoogleButton() {
  var classes = useStyles();

  var _useAuth = (0, _utils.useAuth)(),
      _useAuth$googleCreden = _useAuth.googleCredentials,
      googleCredentials = _useAuth$googleCreden === void 0 ? {} : _useAuth$googleCreden,
      validateSocialNetwork = _useAuth.validateSocialNetwork,
      setLoadingSignIn = _useAuth.setLoadingSignIn,
      loadingSignIn = _useAuth.loadingSignIn;

  var login = (0, _google.useGoogleLogin)({
    onError: function onError(error) {
      console.log('error', error);
      setLoadingSignIn(false);
    },
    onNonOAuthError: function onNonOAuthError() {
      setLoadingSignIn(false);
    },
    onSuccess: function onSuccess(response) {
      return _regenerator["default"].async(function onSuccess$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              if (response.access_token) {
                _context.next = 2;
                break;
              }

              return _context.abrupt("return");

            case 2:
              validateSocialNetwork('google', {
                method: _constants.METHODS_SESSION['google'],
                tokenId: "".concat(response.token_type, " ").concat(response.access_token)
              });

            case 3:
            case "end":
              return _context.stop();
          }
        }
      }, null, null, null, Promise);
    }
  });
  if (!googleCredentials.clientId) return null;
  return /*#__PURE__*/_react["default"].createElement(_kdsCore.Button, {
    className: classes.googleButton,
    disabled: loadingSignIn,
    onClick: function onClick() {
      setLoadingSignIn(true);
      login();
    }
  }, loadingSignIn ? /*#__PURE__*/_react["default"].createElement(_kdsCore.CircularProgress, {
    className: classes.whiteColor,
    size: 20
  }) : /*#__PURE__*/_react["default"].createElement("img", {
    alt: "googleSocial",
    className: classes.iconGoogle,
    src: _constants.IMAGES_SOCIAL['google']
  }), _ref);
};

var useStyles = (0, _kdsCore.makeStyles)(function (_ref2) {
  var spacing = _ref2.spacing,
      palette = _ref2.palette;
  return {
    googleButton: {
      '&:hover': {
        background: '#4285F4'
      },
      alignItems: 'center',
      background: '#4285F4',
      borderRadius: spacing(.5),
      // color de boton de google
      color: palette.common.white,
      display: 'flex',
      flex: 1,
      height: 40,
      justifyContent: 'center',
      width: '100%'
    },
    iconGoogle: {
      marginRight: spacing(2),
      marginTop: spacing(-.5)
    },
    whiteColor: {
      color: palette.common.white,
      marginRight: spacing(2)
    }
  };
}, {
  name: 'GoogleButton'
});

var GoogleButtonWithProvider = function GoogleButtonWithProvider(props) {
  var _useAuth2 = (0, _utils.useAuth)(),
      _useAuth2$googleCrede = _useAuth2.googleCredentials,
      googleCredentials = _useAuth2$googleCrede === void 0 ? {} : _useAuth2$googleCrede;

  if (!googleCredentials.clientId) return null;
  return /*#__PURE__*/_react["default"].createElement(_google.GoogleOAuthProvider, {
    clientId: googleCredentials.clientId
  }, /*#__PURE__*/_react["default"].createElement(GoogleButton, props));
};

var _default = _react["default"].memo(GoogleButtonWithProvider);

exports["default"] = _default;