groovinads-ui 1.2.60 → 1.2.62

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "groovinads-ui",
 	"description": "Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.",
-	"version": "1.2.60",
+	"version": "1.2.62",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Inputs/InputEmail.jsx

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+// COMPONENTS GROOVINADS
+import Input from './Input';
+import { Button } from '../Button';
+
+import { ComponentsService } from '../../services';
+import { Icon, Spinner } from '../Labels';
+
+const InputEmail = ({
+	showModal = true,
+	titleList = 'Added emails',
+	label = 'Email addresses',
+	textButton = 'Add',
+	textError = 'You must enter a valid email address',
+	apiGetEmail,
+	apiPostEmail,
+	apiDeleteEmail,
+}) => {
+	// STATE
+	const [notifications, setNotifications] = useState([]);
+	const [newEmail, setNewEmail] = useState('');
+
+	const [selectedButton, setSelectedButton] = useState([]);
+
+	const [emailInvalid, setEmailInvalid] = useState(false);
+
+	// VARIABLES
+	const validEmailPattern = /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
+
+	// GET, Returns a list of emails
+	const fetchNotifications = async () => {
+		const resp = await ComponentsService.getInfo(apiGetEmail);
+		setNotifications(resp || []);
+	};
+
+	// POST, Receives a list of emails
+	const handleAddEmail = async () => {
+		const emails = newEmail
+			.split(/[;, ]+/)
+			.map((email) => email.trim())
+			.filter((email) => email.length > 0);
+
+		// Filter invalid emails
+		const invalidEmails = emails.filter(
+			(email) => !validEmailPattern.test(email),
+		);
+		const validEmails = emails.filter((email) => validEmailPattern.test(email));
+
+		if (invalidEmails.length) {
+			setNewEmail(invalidEmails.join(' ')); // if there are multiple invalid emails, they are joined in the array and separated by a space
+			setEmailInvalid(true);
+			setTimeout(() => {
+				setEmailInvalid(false);
+			}, 3000);
+		}
+
+		// update total list of emails validated
+		if (validEmails.length) {
+			const resp = await ComponentsService.postInfo(apiPostEmail, [
+				...notifications,
+				...validEmails,
+			]);
+			setNotifications(resp);
+		}
+		setNewEmail(invalidEmails.join(' '));
+	};
+
+	const handleInputChange = (e) => {
+		const value = e.target.value.replace(/\. +/g, ' '); // removes the dot and space, replacing it with ' '
+		setNewEmail(value);
+
+		if (!value.trim() || validEmailPattern.test(value)) {
+			setEmailInvalid(false);
+		}
+	};
+
+	// DELETE, Receives a list of emails
+	const handleDeleteEmail = async (emailToDelete) => {
+		setSelectedButton([...selectedButton, emailToDelete]);
+		const resp = await ComponentsService.deleteEmails(
+			apiDeleteEmail,
+			emailToDelete,
+		);
+		setTimeout(() => {
+			setSelectedButton(
+				selectedButton.filter((email) => email !== emailToDelete),
+			);
+			setNotifications(resp);
+		}, 1000);
+	};
+
+	useEffect(() => {
+		if (showModal) fetchNotifications();
+	}, [showModal]);
+	return (
+		<>
+			{/* SECTIONS ADD EMAILS */}
+			<div className={'mb-3'}>
+				<div
+					className={`mb-3 input-group w-100 mb-4 ${
+						emailInvalid ? 'not-validated' : ''
+					}`}
+					data-error={textError}
+				>
+					<Input
+						label={label}
+						value={newEmail}
+						onChange={(e) => {
+							handleInputChange(e);
+						}}
+					/>
+					{/* ADD BUTTON */}
+					<Button
+						onClick={handleAddEmail}
+						className={`${newEmail.trim() ? '' : 'disabled'}`}
+					>
+						{textButton}
+					</Button>
+				</div>
+			</div>
+			{/* SECTIONS LIST ADDED EMAILS */}
+			{notifications.length ? (
+				<div className='shared-users-list'>
+					<h3>{titleList}</h3>
+					{notifications.map((email, index) => (
+						<div key={`email${index}`} className='shared-user-item'>
+							<div className='shared-user'>
+								<Icon iconName='user-circle' scale={2} />
+								<span>{email}</span>
+							</div>
+							{selectedButton.some(
+								(selectedEmail) => selectedEmail === email,
+							) ? (
+								<div className='spinner-wrapper'>
+									<Spinner scale={1} />
+								</div>
+							) : (
+								<Button
+									variant='terciary'
+									style='danger'
+									icon='trash-can'
+									onClick={() => handleDeleteEmail(email)}
+								/>
+							)}
+						</div>
+					))}
+				</div>
+			) : null}
+		</>
+	);
+};
+
+InputEmail.propTypes = {
+	showModal: PropTypes.bool,
+	apiGetEmail: PropTypes.string.isRequired,
+	apiPostEmail: PropTypes.string.isRequired,
+	apiDeleteEmail: PropTypes.string.isRequired,
+	titleList: PropTypes.string.isRequired,
+	label: PropTypes.string,
+	textButton: PropTypes.string,
+	textError: PropTypes.string,
+};
+
+export default InputEmail;

package/src/components/Inputs/index.js

@@ -4,5 +4,6 @@ import Radio from './Radio';
 import Switch from './Switch';
 import Textarea from './Textarea';
 import InputChip from './InputChip';
+import InputEmail from './InputEmail';
 
-export { Checkbox, Input, Radio, Switch, Textarea, InputChip };
+export { Checkbox, Input, Radio, Switch, Textarea, InputChip, InputEmail };

package/src/components/Navigation/Sidebar.jsx

@@ -41,7 +41,7 @@ const Sidebar = ({
 	};
 
 	const fetchData = async () => {
-		const resp = await ComponentsService.getSidebarInfo(api);
+		const resp = await ComponentsService.getInfo(api);
 		setSidebarLinks(resp);
 	};
 

package/src/components/index.js

@@ -5,7 +5,7 @@ import Button from "./Button/Button";
 import { DropdownComponent, DropdownMultiSelect, DropdownDatePicker, DropdownFilter, DropdownSimpleDatePicker } from './Dropdowns';
 
 // Inputs
-import { Checkbox, Input, Radio, Switch, Textarea } from './Inputs';
+import { Checkbox, Input, Radio, Switch, Textarea, InputEmail } from './Inputs';
 
 // Labels
 import { Alert, Icon, LoginSource, PillComponent, Spinner, StatusIcon } from './Labels';
@@ -31,6 +31,7 @@ export {
     Radio,
     Switch,
     Textarea,
+    InputEmail,
     // Labels
     Alert,
     Icon,

package/src/services/components.services.js

@@ -1,21 +1,29 @@
 import urlPath, { basePath } from './url.path';
 import { POST, GET, DELETE } from './helpers';
 
-export const authStatus = async () => await GET({ url: urlPath.authStatus });
+// GETS
+export const getInfo = async (apiGetInfo) => await GET({ url: `${basePath}${apiGetInfo}`}); // (Sidebar and InputEmail) 
 
-export const authLogout = async () => await POST({ url: urlPath.authLogout });
+export const authStatus = async () => await GET({ url: urlPath.authStatus });
 
 export const applications = async () => await GET({ url: urlPath.applications });
 
-export const favApplication = async (appToFav) => await POST({url: `${urlPath.favApps}/${appToFav}`, data: appToFav})
+export const getClientsList = async () =>  await GET({ url: urlPath.clients });
 
-export const unfavApplication = async (appToUnfav) => await DELETE({url: `${urlPath.favApps}/${appToUnfav}`});
+export const getCustomReportsList = async () => await GET(`${urlPath.customReports}/?sort=id_report.desc&offset=0&limit=100`);
 
-export const getClientsList = async () =>  await GET({ url: urlPath.clients });
+// POSTS
+export const postInfo = async (apiPostInfo, data) => await POST({ url: `${basePath}${apiPostInfo}`, data }); // update emails RETAIL MEDIA (notifications)
+
+export const authLogout = async () => await POST({ url: urlPath.authLogout });
+
+export const favApplication = async (appToFav) => await POST({url: `${urlPath.favApps}/${appToFav}`, data: appToFav})
 
 export const clientsLogin = async (clientId) => await POST({ url: urlPath.clientsLogin, data:{ id_client: clientId }});
 
-export const getSidebarInfo = async (api) => await GET({ url: basePath + api});
+// DELETES
+export const unfavApplication = async (appToUnfav) => await DELETE({url: `${urlPath.favApps}/${appToUnfav}`});
+
+export const deleteEmails = async (apiDeleteEmail, email) => await DELETE({ url: `${basePath}${apiDeleteEmail}/${email}` }); // delete emails RETAIL MEDIA (notifications)
 
-export const getCustomReportsList = async () => await GET(`${urlPath.customReports}/?sort=id_report.desc&offset=0&limit=100`);
 

package/src/services/helpers.js

@@ -27,6 +27,6 @@ export const PUT = async ({ url, data }) => {
 export const DELETE = async ({ url }) => {
 	return await axios
 		.delete(url, urlPath.headers)
-		.then((data) => data)
+		.then(({data}) => data)
 		.catch((response) => Promise.reject(response || 'error en la url'));
 };

package/src/stories/InputEmail.stories.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+// COMPONENTS
+import { InputEmail } from '../components';
+
+export default {
+	title: 'Inputs/InputEmail',
+	component: InputEmail,
+};
+
+const Template = (args) => {
+	// const [showModal, setShowModal] = useState(false);
+	return (
+		<>
+			{/* <Button onClick={() => setShowModal(!showModal)}>Cambiar show</Button> */}
+			<InputEmail
+				{...args}
+				apiGetEmail={'v2/retail-media/retailers/settings/notifications'}
+				apiPostEmail={'v2/retail-media/retailers/settings/notifications'}
+				apiDeleteEmail={'v2/retail-media/retailers/settings/notifications'}
+				// showModal={showModal}
+			/>
+		</>
+	);
+};
+
+export const Default = Template.bind({});