@credithub/harlan-components 1.46.6 → 1.47.1

package/dist/components/common/modalMaintenance.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const Modal: React.FC<{
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    message: string;
+    incidentUrl?: string;
+}>;
+export default Modal;

package/dist/components/common/modalMaintenance.js

@@ -0,0 +1,81 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Wrench } from 'phosphor-react';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+var Overlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 1000;\n"])));
+var ModalContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  border-radius: 12px;\n  max-width: 500px;\n  width: 90%;\n  padding: 32px;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);\n  animation: fadeIn 0.3s ease-out;\n  position: relative;\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(-20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n"], ["\n  background: ", ";\n  border-radius: 12px;\n  max-width: 500px;\n  width: 90%;\n  padding: 32px;\n  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);\n  animation: fadeIn 0.3s ease-out;\n  position: relative;\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n      transform: translateY(-20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.white;
+});
+var IconContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 16px;\n\n  svg {\n    color: ", ";\n    width: 48px;\n    height: 48px;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-bottom: 16px;\n\n  svg {\n    color: ", ";\n    width: 48px;\n    height: 48px;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.azulCredithub;
+});
+var Title = styled.h2(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  text-align: center;\n  margin-bottom: 8px;\n"], ["\n  ", ";\n  color: ", ";\n  text-align: center;\n  margin-bottom: 8px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.typography.headline20;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.azulCredithub;
+});
+var CloseButton = styled.button(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  all: unset;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 1.5rem;\n  font-weight: bold;\n  cursor: pointer;\n  color: ", ";\n  border-radius: 50%;\n  transition:\n    background 0.3s ease,\n    color 0.3s ease;\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"], ["\n  all: unset;\n  position: absolute;\n  top: 12px;\n  right: 12px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 1.5rem;\n  font-weight: bold;\n  cursor: pointer;\n  color: ", ";\n  border-radius: 50%;\n  transition:\n    background 0.3s ease,\n    color 0.3s ease;\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.cinzaEscuro;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.cinzaBase;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.azulCredithub;
+});
+var Message = styled.p(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  color: ", ";\n  line-height: 1.6;\n  text-align: center;\n  margin-top: 16px;\n  margin-bottom: 24px;\n"], ["\n  ", ";\n  color: ", ";\n  line-height: 1.6;\n  text-align: center;\n  margin-top: 16px;\n  margin-bottom: 24px;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.typography.body16;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.cinzaEscuro;
+});
+var IncidentButton = styled.a(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0 auto;\n  padding: 10px 20px;\n  background: ", ";\n  color: ", ";\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition:\n    background 0.2s ease,\n    color 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0 auto;\n  padding: 10px 20px;\n  background: ", ";\n  color: ", ";\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  text-decoration: none;\n  cursor: pointer;\n  transition:\n    background 0.2s ease,\n    color 0.2s ease;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.colors.cinzaBase;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.cinzaEscuro;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.cinzaClaro;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.colors.azulCredithub;
+});
+var Modal = function (_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, title = _a.title, message = _a.message, incidentUrl = _a.incidentUrl;
+    useEffect(function () {
+        if (!isOpen)
+            return;
+        var handleKeyDown = function (event) {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    return (React.createElement(Overlay, { onClick: onClose },
+        React.createElement(ModalContainer, { onClick: function (e) { return e.stopPropagation(); } },
+            React.createElement(CloseButton, { onClick: onClose }, "\u00D7"),
+            React.createElement(IconContainer, null,
+                React.createElement(Wrench, { weight: "bold" })),
+            React.createElement(Title, null, title),
+            React.createElement(Message, null, message),
+            incidentUrl && (React.createElement(IncidentButton, { href: incidentUrl, target: "_blank", rel: "noopener noreferrer" }, "Ver Atualiza\u00E7\u00F5es do Incidente")))));
+};
+export default Modal;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/dossie/summary/cardsAndProducts.d.ts

@@ -8,10 +8,12 @@ declare const useCardsAndProducts: ({ finderResponse, rfbResponse }: {
     }[];
     products: {
         title: string;
-        onClick: () => Promise<void>;
         price: number;
+        onClick: () => void;
         hide: boolean;
         isLoading: boolean;
     }[];
+    isModalOpen: boolean;
+    closeModal: () => void;
 };
 export default useCardsAndProducts;

package/dist/components/dossie/summary/cardsAndProducts.js

@@ -53,8 +53,11 @@ import { getAtividadesEconomicasSecundarias, getField, getFieldRfb, getProductsP
 var useCardsAndProducts = function (_a) {
     var _b, _c, _d, _e, _f, _g;
     var finderResponse = _a.finderResponse, rfbResponse = _a.rfbResponse;
-    var _h = useConsultasComplementares(), consultasComplementares = _h.consultasComplementares, setConsultasComplementares = _h.setConsultasComplementares, hasCredits = _h.hasCredits;
-    var _j = useState({}), loadingButtons = _j[0], setLoadingButtons = _j[1];
+    var _h = useState(false), isModalOpen = _h[0], setModalOpen = _h[1];
+    var _j = useConsultasComplementares(), consultasComplementares = _j.consultasComplementares, setConsultasComplementares = _j.setConsultasComplementares, hasCredits = _j.hasCredits;
+    var _k = useState({}), loadingButtons = _k[0], setLoadingButtons = _k[1];
+    var handleModalClick = function () { return setModalOpen(true); };
+    var closeModal = function () { return setModalOpen(false); };
     var isPF = !!getField('cpf', finderResponse);
     var productsPrices = getProductsPrices(isPF);
     var handleOnClick = function (key) {
@@ -99,7 +102,7 @@ var useCardsAndProducts = function (_a) {
             });
         }); };
     };
-    var _k = {
+    var _l = {
         cards: [
             {
                 title: getField('sexo', finderResponse, function (value) {
@@ -276,7 +279,7 @@ var useCardsAndProducts = function (_a) {
             {
                 title: 'Consultar Pefin/Refin Serasa',
                 price: productsPrices === null || productsPrices === void 0 ? void 0 : productsPrices.refinSerasa,
-                onClick: handleOnClick('refinSerasa'),
+                onClick: handleModalClick,
                 hide: (_f = consultasComplementares === null || consultasComplementares === void 0 ? void 0 : consultasComplementares.refinSerasa) === null || _f === void 0 ? void 0 : _f.consultaRealizada,
                 isLoading: loadingButtons['refinSerasa']
             },
@@ -288,7 +291,7 @@ var useCardsAndProducts = function (_a) {
                 isLoading: loadingButtons['imoveis']
             }
         ]
-    }, cards = _k.cards, products = _k.products;
-    return { cards: cards, products: products };
+    }, cards = _l.cards, products = _l.products;
+    return { cards: cards, products: products, isModalOpen: isModalOpen, closeModal: closeModal };
 };
 export default useCardsAndProducts;

package/dist/components/dossie/summary/summary.js

@@ -1,7 +1,8 @@
-import AddItemField from '../../../components/common/addItem';
-import React from 'react';
 import ButtonAtualizarDadosRfb from '../../../assets/btn/buttonAtualizarDadosRfb';
+import AddItemField from '../../../components/common/addItem';
+import Modal from '../../../components/common/modalMaintenance';
 import { formatMoney } from '../../../utils/number';
+import React from 'react';
 import useCardsAndProducts from './cardsAndProducts';
 import { ButtonsSummary, ButtonsWrapper, ContainerSummary, ContentSummary, FieldSummary, Spinner, SummaryButton } from './styles';
 export var Summary = function (_a) {
@@ -9,7 +10,7 @@ export var Summary = function (_a) {
     var _b = useCardsAndProducts({
         finderResponse: finderResponse,
         rfbResponse: rfbResponse
-    }), cards = _b.cards, products = _b.products;
+    }), cards = _b.cards, products = _b.products, isModalOpen = _b.isModalOpen, closeModal = _b.closeModal;
     return (React.createElement(React.Fragment, null,
         React.createElement(ContainerSummary, { className: "credithub-container-summary" },
             React.createElement(ContentSummary, { className: "credithub-content-summary" }, cards.map(function (card, index) { return (React.createElement(FieldSummary, { key: index, fullRow: card.header === 'Nome' || card.header === 'Nome Da Mãe' },
@@ -17,6 +18,7 @@ export var Summary = function (_a) {
             React.createElement(ButtonsWrapper, null,
                 React.createElement(ButtonAtualizarDadosRfb, null),
                 products.map(function (product, index) { return (React.createElement(ButtonsSummary, { key: index, style: { display: (product === null || product === void 0 ? void 0 : product.hide) ? 'none' : '', width: '100%' } },
-                    React.createElement(SummaryButton, { onClick: function () { return (product === null || product === void 0 ? void 0 : product.onClick) && (product === null || product === void 0 ? void 0 : product.onClick()); }, disabled: product.isLoading, smallContent: product.price ? formatMoney(product.price) : undefined }, product.isLoading ? React.createElement(Spinner, null) : product.title))); })))));
+                    React.createElement(SummaryButton, { onClick: function () { return (product === null || product === void 0 ? void 0 : product.onClick) && (product === null || product === void 0 ? void 0 : product.onClick()); }, disabled: product.isLoading, smallContent: product.price ? formatMoney(product.price) : undefined }, product.isLoading ? React.createElement(Spinner, null) : product.title))); })),
+            React.createElement(Modal, { isOpen: isModalOpen, onClose: closeModal, title: "\uD83D\uDEA7 Consulta temporariamente indispon\u00EDvel", message: "A consulta Pefin/Refin Serasa est\u00E1 fora do ar devido a mudan\u00E7as na fonte. Nossa equipe j\u00E1 est\u00E1 trabalhando para resolver, mas ainda n\u00E3o h\u00E1 previs\u00E3o de normaliza\u00E7\u00E3o.", incidentUrl: "https://credithub.statuspage.io/incidents/hnvx1dxby7rk" }))));
 };
 export default Summary;