Merge pull request #4 from fga-eps-mds/US5-Exibir-preços-e-detalhes-d…

…os-beneficios-para-os-usuarios-logados

Us5 exibir preços e detalhes dos beneficios para os usuarios logados

src/Pages/Protected/Benefit/BenefitsValue/index.css

@@ -0,0 +1,100 @@
+.benefits-container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 4rem 2rem;
+  font-family: "Noto Sans";
+  color: #332117;
+  height: 100%;
+}
+
+.benefits-header h1 {
+  font-size: 2.125rem;
+}
+
+.benefits-header p {
+  font-size: 1.5rem;
+  color: #341f14;
+  margin-bottom: 1.25rem;
+}
+
+.benefits-list {
+  width: 100%;
+}
+
+.box-benefits {
+  margin-top: 1.25rem;
+}
+
+.benefit-item {
+  display: flex;
+  align-items: center;
+  padding: 1rem 0;
+}
+
+.benefit-datails {
+  position: absolute;
+  justify-items: center;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.benefit-value {
+  position: absolute;
+  justify-items: center;
+  left: 85%;
+}
+
+.benefit-details-expanded {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  overflow-wrap: break-word;
+  gap: 7rem;
+  padding: 0.25rem 3rem;
+}
+
+.benefit-item > .MuiListItemText-primary {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.benefit-item .MuiListItemText-secondary {
+  font-weight: 300;
+  font-size: 0.875rem;
+  color: #8c7765;
+}
+
+@media (max-width: 890px) {
+  .benefits-container {
+    padding-top: 4rem;
+  }
+  .benefit-datails {
+    position: relative;
+    left: auto;
+    transform: none;
+  }
+  .benefit-item {
+    flex-direction: column;
+  }
+  .benefit-value {
+    display: flex;
+    text-align: center;
+    align-items: center;
+    padding: 0.25rem 2rem;
+    border-radius: 10px;
+    background: #eae3d7;
+  }
+  .benefit-details-expanded {
+    flex-direction: column-reverse;
+    overflow-wrap: anywhere;
+    gap: 1rem;
+  }
+  .benefit-details-expanded .MuiListItemText-primary {
+    font-size: 0.85rem;
+  }
+  .benefit-value {
+    position: relative;
+    left: auto;
+    transform: none;
+  }
+}

src/Pages/Protected/Benefit/BenefitsValue/index.jsx

@@ -0,0 +1,97 @@
+import { useState, useEffect } from "react";
+import { getBenefitsForm } from "../../../../Services/benefitsService";
+
+import { FaWhatsapp } from "react-icons/fa";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import Divider from "@mui/material/Divider";
+
+import "./index.css";
+
+export default function BenefitsValue() {
+  const [benefits, setBenefits] = useState([]);
+  const [expandedBenefit, setExpandedBenefit] = useState(null);
+
+  const handleExpand = (id) => {
+    // Alterna entre expandir e recolher o benefício clicado
+    setExpandedBenefit((prev) => (prev === id ? null : id));
+  };
+
+  useEffect(() => {
+    const getBenefits = async () => {
+      const response = await getBenefitsForm();
+      setBenefits(response);
+    };
+
+    getBenefits();
+  }, []);
+
+  return (
+    <section className="benefits-container">
+      <div className="benefits-list">
+        <div className="benefits-header">
+          <h1> Valores dos benefícios</h1>
+          <p>Benefícios disponíveis</p>
+        </div>
+        <div className="box-benefits">
+          <List>
+            {benefits?.map(
+              (benefit, index) => (
+                console.log(benefit),
+                (
+                  <div key={benefit._id}>
+                    <ListItem className="benefit-item">
+                      <ListItemText primary={benefit.nome} />
+                      <ListItemText
+                        className="benefit-datails"
+                        style={{
+                          textDecoration: "underline",
+                          cursor: "pointer",
+                        }}
+                        primary="Mais Detalhes"
+                        onClick={() => handleExpand(benefit._id)}
+                      />
+                      <div className="benefit-value">
+                        <ListItemText
+                          primary="Valor"
+                          secondary={
+                            index % 2
+                              ? "Incluso na filiação"
+                              : "Disconto de 15%"
+                          }
+                        />
+                      </div>
+                    </ListItem>
+
+                    {expandedBenefit === benefit._id && (
+                      <div className="benefit-details-expanded">
+                        <ListItemText primary={benefit.descricao} />
+                        <a
+                          href="https://api.whatsapp.com/send/?phone=556133211949"
+                          style={{
+                            fontSize: "2rem",
+                            textDecoration: "none",
+                            color: "#3D160D",
+                          }}
+                        >
+                          <FaWhatsapp />
+                        </a>
+                      </div>
+                    )}
+
+                    <Divider
+                      style={{
+                        padding: "1rem 0 0 0",
+                      }}
+                    />
+                  </div>
+                )
+              )
+            )}
+          </List>
+        </div>
+      </div>
+    </section>
+  );
+}

src/Routes/protectedRoutes.jsx

@@ -14,6 +14,7 @@ import RolesListPage from "../Pages/Protected/Roles/RolesListPage";
 import RolesUpdatePage from "../Pages/Protected/Roles/RolesUpdatePage";
 import MembershipRequest from "../Pages/Protected/MembershipRequests";
 import Benefits from "../Pages/Protected/Benefit/Benefits";
+import BenefitsValue from "../Pages/Protected/Benefit/BenefitsValue";
 import BenefitsList from "../Pages/Protected/Benefit/BenefitsList";
 import BenefitsCreate from "../Pages/Protected/Benefit/BenefitsCreate";
 import BenefitsUpdate from "../Pages/Protected/Benefit/BenefitsUpdate";
@@ -152,6 +153,16 @@ const ProtectedRoutes = () => {
           />
         }
       />
+      <Route
+        path="/beneficios/valor"
+        element={
+          <PermissionProtect
+            element={<BenefitsValue />}
+            moduleName="benefits"
+            actions={["read"]}
+          />
+        }
+      />
       <Route
         path="/beneficios/lista"
         element={