Merge pull request #149 from iamibrahimriaz/feedback-improvement

Feedback Improvement

src/js/components/AllTemplates/index.js

@@ -100,15 +100,17 @@ export default function AllTemplates( props ) {
 	const filterPluginTemplates = () => {
 		// Filter templates based on filterValue
 		const newFilteredTemplates = allTemplates.filter( ( template ) => {
-
 			return filterValue.some( ( filter ) => {
-				if ( filter.type === 'plugins' ) {
+				if ( filter.key === 'all' ) {
+					let templateType = template.type === 'pack' ? 'packs' : template.type === 'section' ? 'blocks' : template.type === 'page' ? 'pages' : '';
+					return templateType === filter.type;
+				} else if ( filter.type === 'plugins' ) {
 					// Check if any required plugin matches the selected plugin
 					return template.required_plugins.some(
 						( requiredPlugin ) => requiredPlugin?.slug === filter.key
 					);
 				} else {
-					// Check if the template includes the selected category
+					// Check if the template includes the selected category\
 					return template.categories.includes( filter.key );
 				}
 			} );

src/js/components/Bookmark/index.js

@@ -88,27 +88,52 @@ const Bookmark = ( props ) => {
 	return (
 		<>
 			{ type === 'single' ? (
-				<a
-					href="#"
-					className={ `templatiq__details__header__action__link add-to-favorite templatiq-btn templatiq-btn-white ${
-						addedToFavorite ? 'active' : ''
-					} ${isFavProcessing ? 'disabled' : ''} `}
-					onClick={ ( e ) =>
-						handleFavorite( e, number_of_bookmarks )
-					}
-				>
-					<ReactSVG
-						src={ addedToFavorite ? heartSolidIcon : heartIcon }
-						width={ 16 }
-						height={ 16 }
-					/>
-					{
-						isFavProcessing && (
-							<span className="image-loader"></span>
-						)
-					}
-
-				</a>
+				! isLoggedIn ? (
+					<>
+						{ authModalOpen ? (
+							<AuthModal
+								slug={ slug }
+								modalEnable={ true }
+								onClose={ handleAuthModalClose }
+							/>
+						) : (
+							''
+						) }
+						<a
+							href="#"
+							className="templatiq__details__header__action__link add-to-favorite templatiq-btn templatiq-btn-white"
+							onClick={ addAuthModal }
+						>
+							<ReactSVG
+								src={ heartIcon }
+								width={ 14 }
+								height={ 14 }
+							/>
+						</a>
+					</>
+				) : (
+					<a
+						href="#"
+						className={ `templatiq__details__header__action__link add-to-favorite templatiq-btn templatiq-btn-white ${
+							addedToFavorite ? 'active' : ''
+						} ${isFavProcessing ? 'disabled' : ''} `}
+						onClick={ ( e ) =>
+							handleFavorite( e, number_of_bookmarks )
+						}
+					>
+						<ReactSVG
+							src={ addedToFavorite ? heartSolidIcon : heartIcon }
+							width={ 16 }
+							height={ 16 }
+						/>
+						{
+							isFavProcessing && (
+								<span className="image-loader"></span>
+							)
+						}
+
+					</a> 
+				)
 			) : ! isLoggedIn ? (
 				<>
 					{ authModalOpen ? (

src/js/components/Popup/InsertTemplateModal.js

@@ -5,6 +5,7 @@ import ReactSVG from 'react-inlinesvg';
 import { InsertTemplateModalStyle } from './style';
 
 import closeIcon from '@icon/close.svg';
+import crownIcon from '@icon/crown.svg';
 import requiredIcon from '@icon/required.svg';
 import updateRequiredIcon from '@icon/update-required.svg';
 
@@ -343,7 +344,11 @@ const InsertTemplateModal = ( { item, onClose, required_plugins, not_installable
 																	{
 																		plugin.is_pro && 
 																		<span className="templatiq__modal__plugin__type">
-																			{__( "(Pro)", 'templatiq' )}
+																			<ReactSVG
+																				src={ crownIcon }
+																				width={ 12 }
+																				height={ 12 }
+																			/>
 																		</span>
 																	}
 																	{
@@ -397,7 +402,11 @@ const InsertTemplateModal = ( { item, onClose, required_plugins, not_installable
 																	</label>
 
 																	<span className="templatiq__modal__plugin__type">
-																		{__( "(Pro)", 'templatiq' )}
+																		<ReactSVG
+																			src={ crownIcon }
+																			width={ 12 }
+																			height={ 12 }
+																		/>
 																	</span>
 																</div>
 															);

src/js/components/SingleTemplate/index.js

@@ -2,6 +2,7 @@ import Bookmark from '@components/Bookmark';
 import ContentLoading from '@components/ContentLoading';
 import InsertTemplate from '@components/InsertTemplate';
 import handleMaximumCount from '@helper/handleMaximumCount';
+import sanitizeHtmlEntities from '@helper/sanitizeHtmlEntities';
 import store from '@store/index';
 import { select } from '@wordpress/data';
 import { useEffect, useRef, useState } from '@wordpress/element';
@@ -140,7 +141,7 @@ const SingleTemplate = ( item ) => {
 			<div className="templatiq__template__single__content">
 				<h3 className="templatiq__template__single__title">
 					<Link to={ `/template/${ slug }` }>
-						{ title ? title : __( 'dDoctors', 'templatiq' ) }
+						{ title ? sanitizeHtmlEntities(title) : __( 'dDoctors', 'templatiq' ) }
 					</Link>
 				</h3>
 				{ categories.length > 0 &&
@@ -151,7 +152,7 @@ const SingleTemplate = ( item ) => {
 								href="#"
 								className="templatiq__template__single__cat__link"
 							>
-								{ category }
+								{ sanitizeHtmlEntities(category) }
 							</a>
 						) ).slice( 0, 2 ) }
 						{ categories.length > 2 && (
@@ -173,7 +174,7 @@ const SingleTemplate = ( item ) => {
 													href="#"
 													className="templatiq__template__single__cat__link"
 												>
-													{ category }
+													{ sanitizeHtmlEntities(category) }
 												</a>
 											)
 										).slice( 2 ) }

src/js/helper/sanitizeHtmlEntities.js

@@ -0,0 +1,6 @@
+// Sanitize HTML Entities
+export default function sanitizeHtmlEntities(text) {
+	return text && text
+		.replace(/–/g, '–')
+		.replace(/&/g, '&');
+}

src/js/layout/Header/index.js

@@ -267,6 +267,23 @@ const Header = ( props ) => {
 										</a>
 										{ isAuthorInfoVisible && (
 											<div className="templatiq__header__author__info">
+												{
+													! editorEnabled &&
+													<div className="templatiq__header__author__info__item">
+														<NavLink
+															activeclassname="active"
+															to="/dashboard/purchase"
+															className="templatiq__header__author__info__link"
+														>
+															<ReactSVG
+																src={ cartIcon }
+																width={ 14 }
+																height={ 14 }
+															/>
+															{__( 'My Purchases', 'templatiq' )}
+														</NavLink>
+													</div>
+												}
 												<div className="templatiq__header__author__info__item">
 													<NavLink
 														activeclassname="active"
@@ -297,20 +314,6 @@ const Header = ( props ) => {
 																{__( 'My Downloads', 'templatiq' )}
 															</NavLink>
 														</div>
-														<div className="templatiq__header__author__info__item">
-															<NavLink
-																activeclassname="active"
-																to="/dashboard/purchase"
-																className="templatiq__header__author__info__link"
-															>
-																<ReactSVG
-																	src={ cartIcon }
-																	width={ 14 }
-																	height={ 14 }
-																/>
-																{__( 'My Purchase', 'templatiq' )}
-															</NavLink>
-														</div>
 														<div className="templatiq__header__author__info__item">
 															<a
 																href={ templatiq_obj.cloud_account }

src/js/layout/Sidebar/AdminSidebar.js

@@ -16,6 +16,14 @@ const AdminSidebar = () => {
 					className="templatiq__sidebar__nav templatiq__sidebar__nav--admin"
 					activeclassname="active"
 				>
+					<NavLink
+						to="/dashboard/purchase"
+						className="templatiq__sidebar__nav__link"
+						activeclassname="active"
+					>
+						<ReactSVG src={ cartIcon } width={ 16 } height={ 16 } />
+						{__( 'My Purchases', 'templatiq' )}
+					</NavLink>
 					<NavLink
 						to="/dashboard/favorites"
 						className="templatiq__sidebar__nav__link"
@@ -39,14 +47,6 @@ const AdminSidebar = () => {
 						/>
 						{__( 'My Downloads', 'templatiq' )}
 					</NavLink>
-					<NavLink
-						to="/dashboard/purchase"
-						className="templatiq__sidebar__nav__link"
-						activeclassname="active"
-					>
-						<ReactSVG src={ cartIcon } width={ 16 } height={ 16 } />
-						{__( 'My Purchase', 'templatiq' )}
-					</NavLink>
 					<a
 						href={ templatiq_obj.cloud_account }
 						target='_blank'

src/js/layout/Sidebar/index.js

@@ -1,3 +1,4 @@
+import sanitizeHtmlEntities from '@helper/sanitizeHtmlEntities';
 import { dispatch, select, subscribe } from '@wordpress/data';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -78,20 +79,52 @@ const Sidebar = (props) => {
 			}).length;
 		};
 
-		// getCategoryItems & getPluginItems functions
-		const getCategoryItems = (groupKey, groupValue) => 
-			Object.keys(groupValue || {}).map(key => ({
+		// Function to calculate total count for "all" items in each group
+		const countTotalTemplatesByGroup = (groupKey, groupValue, type) => {
+			const allTemplates = document.body.classList.contains('elementor-editor-active')
+				? data.templates.filter((template) => template.type !== 'pack')
+				: data.templates;
+
+			return allTemplates.filter(template => {
+				if (type === 'plugins') {
+					return template.required_plugins.some(p => groupValue[p.slug]);
+				}
+				return template.categories.some(category => groupValue[category]);
+			}).length;
+		};
+
+		// Get category items with an "all" option
+		const getCategoryItems = (groupKey, groupValue) => {
+			const allCount = countTotalTemplatesByGroup(groupKey, groupValue, groupKey);
+
+			const items = Object.keys(groupValue || {}).map(key => ({
 				key,
-				title: groupValue[key], 
-				count: countTemplatesByItem(key, groupKey)
+				title: groupValue[key],
+				count: countTemplatesByItem(key, groupKey),
 			})).filter(item => item.count > 0);
-
-		const getPluginItems = (groupValue) => 
-			Object.keys(groupValue || {}).map(key => ({
+
+			// Add "all" option at the start of the group if there are items
+			if (items.length > 0) {
+				items.unshift({
+					key: 'all',
+					title: 'All',
+					count: allCount,
+				});
+			}
+
+			return items;
+		};
+
+		// Get plugin items with an "all" option
+		const getPluginItems = (groupValue) => {			
+			const items = Object.keys(groupValue || {}).map(key => ({
 				key,
-				title: groupValue[key].name, 
-				count: countTemplatesByItem(key, 'plugins')
+				title: groupValue[key].name,
+				count: countTemplatesByItem(key, 'plugins'),
 			})).filter(item => item.count > 0);
+
+			return items;
+		};
 
 		const newGroupedCategories = {};
 
@@ -201,31 +234,34 @@ const Sidebar = (props) => {
 												className="templatiq__sidebar__accordion__single"
 											>
 												<h3 className="templatiq__sidebar__accordion__heading">
-													{group.charAt(0).toUpperCase() + group.slice(1)}
+													{
+														group === 'packs' ? __('Full Site', 'templatiq') :
+														group.charAt(0).toUpperCase() + group.slice(1)
+													}
 												</h3>
 
 												<div className="templatiq__sidebar__accordion__item">
 												{filterGroups[group]
 													.slice(0, (expandedGroups[group] ? filterGroups[group].length : 5))
 													.map((item, itemIndex) => (
 													<div
-														key={item.key || itemIndex}
+														key={group + '-' + item.key || itemIndex}
 														className="templatiq__sidebar__filter__single templatiq__checkbox"
 													>
 														<input
 															type="checkbox"
-															id={item.key || itemIndex}
+															id={group + '-' + item.key || itemIndex}
 															className="templatiq__sidebar__filter__single__checkbox templatiq__checkbox__input"
 															onChange={() => handleFilter(item.key, group)}
 															checked={selectedFilters.some(
 																(filter) => filter.key === item.key && filter.type === group
 															)}
 														/>
 														<label
-															htmlFor={item.key || itemIndex}
+															htmlFor={group + '-' + item.key || itemIndex}
 															className="templatiq__sidebar__filter__single__label templatiq__checkbox__label"
 														>
-															{item.title}
+															{sanitizeHtmlEntities(item.title)} {item.key === "all" && group !== "packs" ? group.charAt(0).toUpperCase() + group.slice(1) : ''}
 														</label>
 														<span className="templatiq__sidebar__filter__single__count templatiq__checkbox__count">
 															{item.count}

src/js/modules/TemplateDetails/TemplateDetailsContent.js

@@ -1,3 +1,4 @@
+import sanitizeHtmlEntities from '@helper/sanitizeHtmlEntities';
 import checkIcon from '@icon/check-alt.svg';
 import { __ } from '@wordpress/i18n';
 import ReactSVG from 'react-inlinesvg';
@@ -20,7 +21,7 @@ const TemplateDetailsContent = ( props ) => {
 				</h3>
 				<div 
 					className="templatiq__details__content__single__description"
-					dangerouslySetInnerHTML={{ __html: description }}
+					dangerouslySetInnerHTML={{ __html: sanitizeHtmlEntities(description) }}
 				/>
 			</div>
 

src/js/modules/TemplateDetails/TemplateDetailsHeader.js

@@ -1,3 +1,4 @@
+import sanitizeHtmlEntities from '@helper/sanitizeHtmlEntities';
 import { useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import ReactSVG from 'react-inlinesvg';
@@ -63,7 +64,7 @@ const TemplateDetailsHeader = ( props ) => {
 	return (
 		<TemplateDetailsHeaderStyle className="templatiq__details__header">
 			<div className="templatiq__details__header__info">
-				<h2 className="templatiq__details__header__title">{ title }</h2>
+				<h2 className="templatiq__details__header__title">{ sanitizeHtmlEntities(title) }</h2>
 				<div className="templatiq__details__header__meta">
 					{ number_of_downloads ? (
 						<span className="templatiq__details__header__meta__item">