"use strict";

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

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.EmailChange = void 0;

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Common = require("../Common");

var _lib = require("@sentecacommerce-theme/lib");

var _router = require("next/router");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var EmailChange = function EmailChange(_ref) {
  var labels = _ref.labels;

  var _useVerifyChangeEmail = (0, _lib.useVerifyChangeEmail)(),
      mutate = _useVerifyChangeEmail[0],
      _useVerifyChangeEmail2 = _useVerifyChangeEmail[1],
      isError = _useVerifyChangeEmail2.isError,
      isSuccess = _useVerifyChangeEmail2.isSuccess,
      isLoading = _useVerifyChangeEmail2.isLoading;

  var router = (0, _router.useRouter)();
  var _ref2 = router.query,
      token = _ref2.token;
  (0, _react.useEffect)(function () {
    mutate(token);
  }, [token]);
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Center, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.IconDistrictLogo, null)), isLoading ? /*#__PURE__*/_react["default"].createElement(Title, null, labels.loading) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isError ? /*#__PURE__*/_react["default"].createElement(Title, null, labels.error) : null, isSuccess ? /*#__PURE__*/_react["default"].createElement(Title, null, labels.success) : null)));
};

exports.EmailChange = EmailChange;

var Title = _styledComponents["default"].p.attrs({
  className: 'mb-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].form.attrs({
  className: 'container-fluid mt-5 mx-auto'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 450px;\n  min-height: calc(100vh - 300px);\n"])));

var Center = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  & svg {\n    height: 2.4rem;\n  }\n"])));

var LogoContainer = _styledComponents["default"].div.attrs({
  className: 'mb-2'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=emailChange.component.js.map