From 8b4ebf2ea824f2e0b845a475452958caa8a8744e Mon Sep 17 00:00:00 2001
From: "Jose A. Canto" <jose.a.c.lopez@gmail.com>
Date: Tue, 13 Aug 2024 07:50:57 +0200
Subject: [PATCH] create ProfileItemInfo component for CustomerProfile and
 UserProfile; #156

---
 .../src/components/ProfileItemInfo/index.css  | 18 +++++++
 .../src/components/ProfileItemInfo/index.jsx  | 10 ++++
 .../src/components/view/CustomerProfile.css   | 16 +-----
 .../src/components/view/CustomerProfile.jsx   | 45 +++--------------
 .../src/components/view/UserProfile.css       | 15 ------
 .../src/components/view/UserProfile.jsx       | 49 ++++---------------
 6 files changed, 48 insertions(+), 105 deletions(-)
 create mode 100644 staff/jose-canto/project/FactuClient/src/components/ProfileItemInfo/index.css
 create mode 100644 staff/jose-canto/project/FactuClient/src/components/ProfileItemInfo/index.jsx

diff --git a/staff/jose-canto/project/FactuClient/src/components/ProfileItemInfo/index.css b/staff/jose-canto/project/FactuClient/src/components/ProfileItemInfo/index.css
new file mode 100644
index 000000000..784aac0b8
--- /dev/null
+++ b/staff/jose-canto/project/FactuClient/src/components/ProfileItemInfo/index.css
@@ -0,0 +1,18 @@
+@tailwind components;
+
+@layer components {
+  .Profile {
+    @apply relative bottom-3 flex w-[95%] flex-col items-center gap-2;
+  }
+
+  .ProfileInfo {
+    @apply inline w-full;
+  }
+  .SpanText {
+    @apply w-auto text-[1.1rem] font-bold text-orange-800 underline;
+  }
+
+  .ProfileInfo {
+    @apply w-full text-xl font-bold;
+  }
+}
diff --git a/staff/jose-canto/project/FactuClient/src/components/ProfileItemInfo/index.jsx b/staff/jose-canto/project/FactuClient/src/components/ProfileItemInfo/index.jsx
new file mode 100644
index 000000000..c43b58e78
--- /dev/null
+++ b/staff/jose-canto/project/FactuClient/src/components/ProfileItemInfo/index.jsx
@@ -0,0 +1,10 @@
+import "./index.css"
+
+export default function ProfileInfoItem({ label, value }) {
+  return (
+    <div className="ProfileInfo">
+      <p className="SpanText">{label}</p>
+      {value && <p className="ProfileInfo">{value}</p>}
+    </div>
+  )
+}
diff --git a/staff/jose-canto/project/FactuClient/src/components/view/CustomerProfile.css b/staff/jose-canto/project/FactuClient/src/components/view/CustomerProfile.css
index d738f0353..49341259d 100644
--- a/staff/jose-canto/project/FactuClient/src/components/view/CustomerProfile.css
+++ b/staff/jose-canto/project/FactuClient/src/components/view/CustomerProfile.css
@@ -1,19 +1,7 @@
 @tailwind components;
 
 @layer components {
-  .CustomerProfile {
-    @apply text-xl font-extrabold;
-  }
-
-  .CustomerInfo {
-    @apply flex w-[90%] flex-col gap-4 rounded-2xl bg-[#0000002a] p-3 shadow-custom-shadow;
-  }
-
-  .CustomerInfo > p {
-    @apply inline;
-  }
-
-  .SpanColor {
-    @apply text-orange-800;
+  .CustomerProfile p {
+    @apply text-xl font-bold;
   }
 }
diff --git a/staff/jose-canto/project/FactuClient/src/components/view/CustomerProfile.jsx b/staff/jose-canto/project/FactuClient/src/components/view/CustomerProfile.jsx
index f2198a3a3..0b198be4d 100644
--- a/staff/jose-canto/project/FactuClient/src/components/view/CustomerProfile.jsx
+++ b/staff/jose-canto/project/FactuClient/src/components/view/CustomerProfile.jsx
@@ -6,6 +6,7 @@ import { RiFileUserLine } from "react-icons/ri"
 import Header from "../Header"
 import Footer from "../core/Footer"
 import Main from "../core/Main"
+import ProfileInfoItem from "../ProfileItemInfo"
 
 import logic from "../../logic"
 
@@ -32,43 +33,13 @@ export default function CustomerProfile() {
     <>
       {customer?.companyName && <Header iconUser={<RiFileUserLine />}>{customer.companyName}</Header>}
       <Main className="CustomerProfile">
-        <div className="CustomerInfo">
-          {customer?.username && (
-            <p>
-              <span className="SpanColor">Nombre de Usuario</span>
-              <br /> {customer.username}
-            </p>
-          )}
-          {customer?.companyName && (
-            <p>
-              <span className="SpanColor">Nombre Empresa</span>
-              <br /> {customer.companyName}
-            </p>
-          )}
-          {customer?.email && (
-            <p>
-              <span className="SpanColor">Email</span>
-              <br /> {customer.email}
-            </p>
-          )}
-          {customer?.taxId && (
-            <p>
-              <span className="SpanColor">CIF/NIF</span>
-              <br /> {customer.taxId}
-            </p>
-          )}
-          {customer?.phone && (
-            <p>
-              <span className="SpanColor">Nº Teléfono</span>
-              <br /> {customer.phone}
-            </p>
-          )}
-          {customer?.address && (
-            <p>
-              <span className="SpanColor"> Dirección</span>
-              <br /> {customer.address}
-            </p>
-          )}
+        <div className="ProfileInfoContainer">
+          <ProfileInfoItem label="Nombre de usuario" value={customer?.username} />
+          <ProfileInfoItem label="Empresa" value={customer?.companyName} />
+          <ProfileInfoItem label="Email" value={customer?.email} />
+          <ProfileInfoItem label="CIF/NIF" value={customer?.taxId} />
+          <ProfileInfoItem label="Nº Móvil" value={customer?.phone} />
+          <ProfileInfoItem label="Dirección	" value={customer?.address} />
         </div>
       </Main>
 
diff --git a/staff/jose-canto/project/FactuClient/src/components/view/UserProfile.css b/staff/jose-canto/project/FactuClient/src/components/view/UserProfile.css
index 229428c29..3226b91dd 100644
--- a/staff/jose-canto/project/FactuClient/src/components/view/UserProfile.css
+++ b/staff/jose-canto/project/FactuClient/src/components/view/UserProfile.css
@@ -5,21 +5,6 @@
     @apply w-20 rounded-2xl;
   }
 
-  .Profile {
-    @apply relative bottom-3 flex w-[95%] flex-col items-center gap-2;
-  }
-
-  .ProfileInfo {
-    @apply inline w-full;
-  }
-  .SpanText {
-    @apply w-auto text-sm font-bold text-orange-800;
-  }
-
-  .ProfileInfo {
-    @apply w-full text-xl font-bold;
-  }
-
   .HeaderProfile .IconLeftHeader {
     @apply -top-7;
   }
diff --git a/staff/jose-canto/project/FactuClient/src/components/view/UserProfile.jsx b/staff/jose-canto/project/FactuClient/src/components/view/UserProfile.jsx
index 772b956be..64a561086 100644
--- a/staff/jose-canto/project/FactuClient/src/components/view/UserProfile.jsx
+++ b/staff/jose-canto/project/FactuClient/src/components/view/UserProfile.jsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react"
 import Header from "../Header"
 import Main from "../core/Main"
 import Footer from "../core/Footer"
+import ProfileInfoItem from "../ProfileItemInfo"
 
 import { LiaUserEditSolid } from "react-icons/lia"
 
@@ -50,45 +51,15 @@ export default function UserProfile() {
       </Header>
 
       <Main className="MainProfile">
-        <div className="Profile">
-          <div className="ProfileInfo">
-            <p className="SpanText">Nombre de Usuario</p>
-            {user?.username && <p className="ProfileInfo">{user.username}</p>}
-          </div>
-
-          <div className="ProfileInfo">
-            <p className="SpanText">Email</p>
-            {user?.email && <p className="ProfileInfo">{user.email}</p>}
-          </div>
-
-          <div className="ProfileInfo">
-            <p className="SpanText">Nombre y Apellidos</p>
-            {user?.fullName && <p className="ProfileInfo">{user.fullName}</p>}
-          </div>
-
-          <div className="ProfileInfo">
-            <p className="SpanText">Nombre de Empresa</p>
-            {user?.companyName && <p className="ProfileInfo">{user.companyName}</p>}
-          </div>
-
-          <div className="ProfileInfo">
-            <p className="SpanText">Dirección</p>
-            {user?.address && <p className="ProfileInfo">{user.address}</p>}
-          </div>
-
-          <div className="ProfileInfo">
-            <p className="SpanText">CIF/NIF</p>
-            {user?.taxId && <p className="ProfileInfo">{user.taxId}</p>}
-          </div>
-
-          <div className="ProfileInfo">
-            <p className="SpanText">Nº Móvil</p>
-            {user?.phone && <p className="ProfileInfo">{user.phone}</p>}
-          </div>
-
-          <div className="ProfileInfo">
-            <p className="SpanText">IBAN</p> {user?.bankAccount && <p className="ProfileInfo">{user.bankAccount}</p>}
-          </div>
+        <div className="ProfileInfoContainer">
+          <ProfileInfoItem label="Nombre de usuario" value={user?.username} />
+          <ProfileInfoItem label="Nombre y Apellidos" value={user?.fullName} />
+          <ProfileInfoItem label="Empresa" value={user?.companyName} />
+          <ProfileInfoItem label="Dirección" value={user?.address} />
+          <ProfileInfoItem label="CIF/NIF" value={user?.taxId} />
+          <ProfileInfoItem label="Nº Móvil" value={user?.phone} />
+          <ProfileInfoItem label="Email" value={user?.email} />
+          <ProfileInfoItem label="IBAN" value={user?.bankAccount} />
         </div>
       </Main>
       <Footer>FactuClient</Footer>