groovinads-ui 1.2.45 → 1.2.46

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.45",
+	"version": "1.2.46",
 	"keywords": [
 		"css",
 		"sass",

package/src/components/Dropdowns/DropdownMultiSelect.jsx

@@ -32,6 +32,7 @@ const DropdownMultiSelect = ({
 	focus = false,
 	buttonVariant = 'input',
 	nowrap = false,
+	hasId = true,
 }) => {
 	const [query, setQuery] = useState('');
 	const [innerShow, setInnerShow] = useState(!!show);
@@ -186,7 +187,9 @@ const DropdownMultiSelect = ({
 										key={'Dropdown.Input.Checkbox' + index}
 									>
 										{highlightText(
-											object ? `#${value[idKey]} - ${value[nameKey]}` : value,
+											object
+												? `${hasId ? `#${value[idKey]} - ` : ''}${value[nameKey]}`
+												: value[nameKey] || value,
 											query,
 										)}
 									</Checkbox>
@@ -231,6 +234,7 @@ DropdownMultiSelect.propTypes = {
 		'outline',
 	]),
 	nowrap: PropTypes.bool,
+	hasId: PropTypes.bool,
 };
 
 export default DropdownMultiSelect;

package/src/components/Navigation/Dropdowns/DropdownClient.jsx

@@ -0,0 +1,172 @@
+import React, { useEffect, useState } from 'react';
+
+// SERVICES
+import { ComponentsService } from '../../../services';
+import { Dropdown } from 'react-bootstrap';
+
+// COMPONENTS
+import Input from '../../Inputs/Input';
+import Icon from '../../Labels/Icon';
+
+const DropdownClients = ({ profileSelectedClient }) => {
+	const [generalSkeleton, setGeneralSkeleton] = useState(false);
+
+	const [showDropdownSkeleton, setshowDropdownSkeleton] = useState(false);
+
+	const { id_client, client_name, email } = profileSelectedClient;
+	const initial_client = { id_client, client_name, email };
+
+	const [clientsList, setClientsList] = useState([]);
+	const [searchInput, setSearchInput] = useState('');
+	const [selectedClient, setSelectedClient] = useState(initial_client);
+
+	const [dropdownOpen, setDropdownOpen] = useState(false);
+
+	const clientInitials = selectedClient?.client_name?.slice(0, 2);
+	const toggleDropdown = () => setDropdownOpen((prev) => !prev);
+
+	const fetchClientsData = async () => {
+		try {
+			setshowDropdownSkeleton(true);
+			const clientsList = await ComponentsService.getClientsList();
+			console.log('clientsList', clientsList);
+
+			setClientsList(clientsList);
+			setshowDropdownSkeleton(false);
+		} catch (error) {
+			console.error('fetchClientsData error', error);
+		}
+	};
+
+	const filterClients = () => {
+		return clientsList.filter(
+			({ client_name, id_client, email }) =>
+				`${client_name} ${id_client}`
+					.toLowerCase()
+					.includes(searchInput.toLowerCase()) ||
+				email?.toLowerCase()?.includes(searchInput?.toLowerCase()),
+		);
+	};
+
+	const changeClient = async (client) => {
+		try {
+			setGeneralSkeleton(true);
+			setshowDropdownSkeleton(true);
+
+			await ComponentsService.clientsLogin(client.id_client);
+
+			setSelectedClient(client);
+
+			// Check if current url ends with '/', if not, add it and redirect to that url
+			// If it currently ends with '/', just reload that url
+			if (window.location.href.slice(-1) !== '/')
+				window.location.replace(window.location.href + '/');
+			else window.location.reload();
+		} catch (error) {
+			console.error(' error en ClientsDropdowns ', error);
+		}
+	};
+
+	useEffect(() => {
+		fetchClientsData();
+	}, []);
+
+	return (
+		<>
+			{showDropdownSkeleton || generalSkeleton ? (
+				<div className='bottom-list loading'>
+					<div className='dropdown-clients'>
+						<div className='client-logo load'></div>
+						<div className='dropdown-clients-wrapper load-paragraph w-75'>
+							<div className='load text small mb-0'></div>
+							<div className='load text small mb-0'></div>
+						</div>
+					</div>
+				</div>
+			) : (
+				<div className='bottom-list'>
+					<Dropdown
+						drop='up'
+						className='dropdown-clients'
+						show={clientsList.length <= 1 ? false : dropdownOpen}
+						onToggle={toggleDropdown}
+					>
+						<Dropdown.Toggle variant='client-selector' onClick={toggleDropdown}>
+							{/* Logo cliente. Si no tiene logo, usar el genérico generado. Ver JS en la parte inferior */}
+							{selectedClient ? (
+								<div className='client-logo'>
+									<p>{clientInitials}</p>
+								</div>
+							) : (
+								<img src='/react.svg' alt='' className='client-logo' />
+							)}
+
+							<div className='dropdown-clients-wrapper'>
+								<p className='dropdown-client-name'>
+									{selectedClient?.client_name || 'Client name'} [
+									{selectedClient?.id_client}]
+								</p>
+								<p className='dropdown-client-email'>
+									{selectedClient?.email || 'Client Email'}
+								</p>
+							</div>
+							{clientsList.length > 1 ? (
+								<Icon
+									style={'solid'}
+									iconName={'chevron-up'}
+									scale={1}
+									className={'icon caret'}
+								/>
+							) : (
+								<></>
+							)}
+						</Dropdown.Toggle>
+						<Dropdown.Menu>
+							<Dropdown.Item as={'div'} onClick={(e) => e.stopPropagation()}>
+								<Input
+									size={'xs'}
+									label={'Search client'}
+									icon={'magnifying-glass'}
+									className='w-100'
+									value={searchInput}
+									onChange={(e) => setSearchInput(e.target.value)}
+								/>
+							</Dropdown.Item>
+							<Dropdown.Item as={'ul'} className='client-list'>
+								{filterClients().length ? (
+									filterClients().map((client) => (
+										<li
+											className='client'
+											key={client.id_client}
+											onClick={() => changeClient(client)}
+										>
+											<p className='dropdown-client-name'>
+												{client.client_name} [{client.id_client}]
+											</p>
+											<p className='dropdown-client-email'>{client.email}</p>
+										</li>
+									))
+								) : (
+									<li>
+										<div className='empty-space'>
+											<img
+												src={'https://ui.groovinads.com/assets/not-found.svg'}
+												alt='Sad magnifier on abstract background'
+											/>
+											<div className='empty-space-text-wrapper'>
+												<h5 className='mb-1'>Client not found</h5>
+												<p>It looks like this client does not exist.</p>
+											</div>
+										</div>
+									</li>
+								)}
+							</Dropdown.Item>
+						</Dropdown.Menu>
+					</Dropdown>
+				</div>
+			)}
+		</>
+	);
+};
+
+export default DropdownClients;

package/src/components/Navigation/Dropdowns/index.js

@@ -1,4 +1,5 @@
 import DeckDropdown from './DeckDropdown';
 import UserDropdown from './UserDropdown';
+import DropdownClients from './DropdownClient';
 
-export { DeckDropdown, UserDropdown }
+export { DeckDropdown, UserDropdown, DropdownClients }

package/src/components/Navigation/Sidebar.jsx

@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 
 // COMPONENTES
 import { Icon } from '../Labels';
+import { DropdownClients } from './Dropdowns';
 
 const Sidebar = ({
 	api,
@@ -18,6 +19,9 @@ const Sidebar = ({
 	show,
 	setShow,
 	onNavigate,
+	selectedClient,
+	showClients = false,
+	setGroovinProfile
 }) => {
 	const isMobile = useMediaQuery({ query: '(max-width: 992px)' });
 
@@ -128,6 +132,15 @@ const Sidebar = ({
 						</div>
 					))}
 				</div>
+				{showClients ? (
+					<DropdownClients
+						profileSelectedClient={selectedClient}
+						showClients={showClients}
+						setGroovinProfile={setGroovinProfile}
+					/>
+				) : (
+					<></>
+				)}
 			</nav>
 		</Collapse>
 	);
@@ -140,6 +153,9 @@ Sidebar.propTypes = {
 	show: PropTypes.bool, // Add show prop for controlling visibility
 	setShow: PropTypes.func, // Add setShow prop for controlling visibility
 	onNavigate: PropTypes.func.isRequired, // Nueva prop para manejar la navegación
+	selectedClient: PropTypes.object,
+	showClients:PropTypes.oneOf([true, false, 'single']),
+	setGroovinProfile: PropTypes.func
 };
 
 export default Sidebar;

package/src/index.js

@@ -6,7 +6,6 @@ import DropdownComponent from './components/Dropdowns/DropdownComponent';
 import DropdownFilter from './components/Dropdowns/DropdownFilter';
 import DropdownMultiSelect from './components/Dropdowns/DropdownMultiSelect';
 import DropdownDatePicker from './components/Dropdowns/DropdownsDatePicker/DropdownDatePicker';
-
 // Inputs
 import Checkbox from './components/Inputs/Checkbox';
 import Input from './components/Inputs/Input';

package/src/services/components.services.js

@@ -11,6 +11,10 @@ export const favApplication = async (appToFav) => await POST({url: `${urlPath.fa
 
 export const unfavApplication = async (appToUnfav) => await DELETE({url: `${urlPath.favApps}/${appToUnfav}`});
 
+export const getClientsList = async () =>  await GET({ url: urlPath.clients });
+
+export const clientsLogin = async (clientId) => await POST({ url: urlPath.clientsLogin, data:{ id_client: clientId }});
+
 export const getSidebarInfo = async (api) => await GET({ url: basePath + api});
 
 export const getCustomReportsList = async () => await GET(`${urlPath.customReports}/?sort=id_report.desc&offset=0&limit=100`);

package/src/services/url.path.js

@@ -14,7 +14,8 @@ export default {
 	/* APPS FOR DROPDOWN */
 	applications: basePath + 'v2/applications',
 	favApps: basePath + 'v2/applications/favorite',
-
+	clients: basePath + 'v2/auth/clients',
+	clientsLogin: basePath + 'v2/auth/clients/login',
 
 	headers: {
 		headers: {

package/src/stories/DropdownMultiSelect.stories.jsx

@@ -1,45 +1,75 @@
-import React, { useState } from "react";
-import DropdownMultiSelect from "../components/Dropdowns/DropdownMultiSelect";
+import React, { useState } from 'react';
+import DropdownMultiSelect from '../components/Dropdowns/DropdownMultiSelect';
 
 export default {
-  title: "Dropdown/DropdownMultiSelect",
-  component: DropdownMultiSelect,
+    title: 'Dropdown/DropdownMultiSelect',
+  	component: DropdownMultiSelect,
 };
 
 const Template = (args) => {
 	const [show, setShow] = useState(false);
-	const handleToggle = () => setShow(prevShow => !prevShow);
+	const handleToggle = () => setShow((prevShow) => !prevShow);
 
+	/* ========== */
+	/* OPCION 1 - Opciones y valores seleccionados son array de objetos */
+	const filters = [
+		{ id: 1, name: 'Filter 1', showStatus: '1' },
+		{ id: 2, name: 'Filter 2', showStatus: '0' },
+		{ id: 3, name: 'Filter 3', showStatus: '1' },
+		{ id: 4, name: 'Filter 4', showStatus: '0' },
+		{ id: 5, name: 'Filter 5', showStatus: '0' },
+		{ id: 6, name: 'Filter 6', showStatus: '2' },
+	];
 	const [selectedValues, setSelectedValues] = useState([]);
-	const [filters, setFilters] = useState([
-		{ id: 1, name: "Filter 1", showStatus:'1'},
-		{ id: 2, name: "Filter 2", showStatus:'0'},
-		{ id: 3, name: "Filter 3", showStatus:'1'},
-		{ id: 4, name: "Filter 4", showStatus:'0'},
-		{ id: 5, name: "Filter 5", showStatus:'0'},
-		{ id: 6, name: "Filter 6", showStatus:'2'},
-	  ]);
+	/* ========== */
+
+	/* ========== */
+	/* OPCION 2 - Opciones y valores seleccionados son array de strings */
+	const stringFilters = [
+		'Filter 1',
+		'Filter 2',
+		'Filter 3',
+		'Filter 4',
+		'Filter 5',
+	];
+	const [selectedStringValues, setSelectedStringValues] = useState([]);
+	/* =========== */
 
 	return (
 		<>
-			{/* <button onClick={() => setShow(false)}>Close</button>
-			<button onClick={() => setShow(true)}>Open</button> */}
+			{/* OPCION 1 */}
 			<DropdownMultiSelect
-			 	{...args}
+				{...args}
+				values={filters}
 				valuesSelected={selectedValues}
 				setValuesSelected={setSelectedValues}
-				values={filters}
 				show={show}
 				onToggle={handleToggle}
 				object={true}
-				nameKey="name"
-				idKey={"id"}
-				inputLabel={'Filters'}
+				nameKey='name'
+				idKey={'id'}
+				inputLabel={'Filters (array de objetos)'}
+				focus={show}
+				hasId={true}
+			/>
+
+			{/* OPCION 2 */}
+			<DropdownMultiSelect
+				{...args}
+				values={stringFilters}
+				valuesSelected={selectedStringValues}
+				setValuesSelected={setSelectedStringValues}
+				show={show}
+				onToggle={handleToggle}
+				object={false}
+				nameKey='name'
+				idKey={'id'}
+				inputLabel={'Filters (array de strings)'}
 				focus={show}
-				
-            ></DropdownMultiSelect>
+				hasId={true}
+			/>
 		</>
-	)
+	);
 };
 
-export const Default = Template.bind({});
+export const Default = Template.bind({});

package/src/stories/Sidebar.stories.jsx

@@ -80,13 +80,54 @@ const Template = (args) => {
 			backData: true,
 		},
 	];
+
+	const selectedClients = {
+		email: 'lancome@groovinads.com',
+		id_client: 3661,
+		id_alias: null,
+		id_shop: null,
+		fgAdmin: 0,
+		fgMaster: 1,
+		fgClientsAdmin: 0,
+		country: 'MX',
+		time_zone: '(GMT-06:00)-GUADALAJARA, MEXICO CITY, MONTERREY ',
+		time_zone_db: '-6:00',
+		auth_data: {
+			login_level: 'USER',
+			login_id: 308,
+			email: 'tobias.matarasso@groovinads.com',
+			scopes: [
+				'master',
+				'lalala',
+				'NewName',
+				'user_admin',
+				'digital_signage_deals_manager',
+				'dashboard_screens',
+			],
+			google_name: 'Tobias Matarasso',
+			google_picture:
+				'https://lh3.googleusercontent.com/a/ACg8ocIYedPDyRN_HV8egw-h3YV_Lv2ZVQa9YSw_g7o7vXBqhMTqEI4=s96-c',
+			oauth_name: 'Google',
+			oauth_username: 'Tobias Matarasso',
+			oauth_picture:
+				'https://lh3.googleusercontent.com/a/ACg8ocIYedPDyRN_HV8egw-h3YV_Lv2ZVQa9YSw_g7o7vXBqhMTqEI4=s96-c',
+			id_api_key: 0,
+		},
+		client_name: 'Lancome',
+		php_session_id: 'u7o2br84i92jmfkdrqen10ngp1',
+		is_api2_login: true,
+	};
+	
 	return (
 		<div className='container-fluid'>
 			<Sidebar
 				{...args}
 				api={'v2/reports/'}
 				customLinks={customLinks}
-				defaultOpened={false}
+				defaultOpened={true}
+				selectedClient={selectedClients}
+				showClients={true}
+				onNavigate={(url) => console.log('Navigate to:', url)}
 			/>
 			<div className='main'>
 				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quasi