import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React, { useEffect } from 'react';
import styled from 'styled-components';
import { IconDistrictLogo } from '../Common';
import { useVerifyChangeEmail } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';
export var EmailChange = (_ref) => {
  var {
    labels
  } = _ref;
  var [mutate, {
    isError,
    isSuccess,
    isLoading
  }] = useVerifyChangeEmail();
  var router = useRouter();
  var {
    token
  } = router.query;
  useEffect(() => {
    mutate(token);
  }, [token]);
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(LogoContainer, null, /*#__PURE__*/React.createElement(IconDistrictLogo, null)), isLoading ? /*#__PURE__*/React.createElement(Title, null, labels.loading) : /*#__PURE__*/React.createElement(React.Fragment, null, isError ? /*#__PURE__*/React.createElement(Title, null, labels.error) : null, isSuccess ? /*#__PURE__*/React.createElement(Title, null, labels.success) : null)));
};
var Title = styled.p.attrs({
  className: 'mb-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Container = styled.form.attrs({
  className: 'container-fluid mt-5 mx-auto'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  max-width: 450px;\n  min-height: calc(100vh - 300px);\n"])));
var Center = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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 = styled.div.attrs({
  className: 'mb-2'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=emailChange.component.js.map