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

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import styled from 'styled-components';
import { useConfirmSubscription, useIsAuthenticated, useUIFunctions, useConfigState, useBoolean } from '@sentecacommerce-theme/lib';
import { Spinner } from '../Common';
export var ConfirmPage = (_ref) => {
  var {
    labels
  } = _ref;
  var {
    views
  } = useConfigState();
  var {
    isAuthenticated,
    isLoading: isAuthLoading
  } = useIsAuthenticated();
  var {
    enqueueView
  } = useUIFunctions();
  var [isSuccess, setIsSuccess] = useBoolean();
  React.useEffect(() => {
    if (isAuthLoading || isAuthenticated) return;

    if (!isAuthenticated) {
      enqueueView(views.auth);
    }
  }, [isAuthLoading, isAuthenticated]);
  var {
    isLoading,
    isError
  } = useConfirmSubscription({
    onSuccess: () => {
      setIsSuccess.on();
    }
  });
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, null, isLoading && /*#__PURE__*/React.createElement(Spinner, null), isError && /*#__PURE__*/React.createElement("h4", null, labels.somethingWentWrong), !isLoading && !isError && /*#__PURE__*/React.createElement("h4", null, labels.success)))));
};
var Container = styled.div.attrs({
  className: 'container mt-5 mb-5'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    min-height: 30rem;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var Row = styled.div.attrs({
  className: 'row d-flex flex-column'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n"])));
var Col = styled.div.attrs({
  className: 'col-12'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=confirmPage.component.js.map