Merge branch 'next' of https://github.com/codeinwp/optimole-wp into f…

…ix/issue-941

� Conflicts:
�	inc/admin.php

.github/ISSUE_TEMPLATE/Feature_request.yml

@@ -18,4 +18,17 @@ body:
     label: What is your proposed solution?
     description: Can you please specify the desired feature or improvement and how it resolves the problem mentioned?
   validations:
-    required: false
+    required: false
+- type: dropdown
+  id: doc-needed
+  attributes:
+      label: Will this feature require documentation? (Optional)
+      description: |
+        Does this feature require the creation or update of documentation? If you're unsure, feel free to skip this.
+      multiple: false
+      options:
+          - 'I dont know.'
+          - 'No.'
+          - 'Yes, it requires documentation.'
+  validations:
+      required: false

.github/labeler.yml

@@ -2,4 +2,7 @@ regression:
   - '(Yes, this is a regression)'
 
 customer report: 
-  - '(helpscout)'
+  - '(helpscout|wordpress.org/support)'
+
+doc-needed: 
+  - '(Yes, it requires documentation.)'

assets/src/parts/Main.js → assets/src/dashboard/parts/Main.js

@@ -3,7 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 
-import { useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies.
@@ -14,9 +14,24 @@ import ConnectLayout from './connect';
 import ConnectingLayout from './connecting';
 import ConnectedLayout from './connected';
 import Footer from './Footer';
+import { highlightSidebarLink } from '../utils/helpers';
 
 const Main = () => {
-	const [ tab, setTab ] = useState( 'dashboard' );
+	const allowedTabs = [ 'dashboard', 'settings', 'help' ];
+	const hash = window.location.hash.replace( '#', '' );
+	let defaultTab = allowedTabs.includes( hash ) ? hash : 'dashboard';
+
+	const [ tab, setTab ] = useState( defaultTab );
+
+	const switchToSettings = ( e ) => {
+		e.preventDefault();
+		setTab( 'settings' );
+	};
+
+	const switchToDashboard = ( e ) => {
+		e.preventDefault();
+		setTab( 'dashboard' );
+	};
 
 	const {
 		showDisconnect,
@@ -39,6 +54,41 @@ const Main = () => {
 		};
 	});
 
+
+	useEffect( () => {
+		if ( ! isConnected ) {
+			return;
+		}
+		window.location.hash = `#${ tab }`;
+		highlightSidebarLink();
+	}, [ tab ]);
+
+	useEffect( () => {
+
+		if ( ! isConnected ) {
+			return;
+		}
+
+		const dashLink = document.querySelector( 'a[href*="page=optimole"]' );
+		const settingsLink = document.querySelector( 'a[href*="page=optimole#settings"]' );
+
+		if ( ! dashLink || ! settingsLink ) {
+			return;
+		}
+
+		dashLink.addEventListener( 'click', switchToDashboard );
+		settingsLink.addEventListener( 'click', switchToSettings );
+
+		return () => {
+			if ( ! dashLink || ! settingsLink ) {
+				return;
+			}
+			dashLink.removeEventListener( 'click', switchToDashboard );
+			settingsLink.removeEventListener( 'click', switchToSettings );
+		};
+	}, []);
+
+
 	return (
 		<>
 			<Header

assets/src/dashboard/parts/connected/CSAT.js

@@ -0,0 +1,144 @@
+/**
+ * External dependencies.
+ */
+import { info } from '@wordpress/icons';
+
+/**
+ * WordPress dependencies.
+ */
+import {
+	Button,
+	Icon,
+	TextareaControl,
+	Tooltip
+} from '@wordpress/components';
+
+import { useSelect } from '@wordpress/data';
+
+import {
+	useEffect,
+	useState
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import CSAT from './csat/index';
+import useSettings from '../../utils/use-settings';
+
+const CSATList = () => {
+	const [ isVisible, setIsVisible ] = useState( false );
+	const [ getOption, updateOption, status ] = useSettings();
+
+	const settings = ( 'loaded' === status && undefined !== getOption( 'optml_csat' ) ) && JSON.parse( getOption( 'optml_csat' ) );
+
+	const {
+		hasImages,
+		isFirstSite
+	} = useSelect( select => {
+		const { getUserData } = select( 'optimole' );
+
+		return {
+			hasImages: 0 < getUserData()?.images_number,
+			isFirstSite: 1 === getUserData()?.whitelist?.length
+		};
+	});
+
+	const visits = localStorage.getItem( 'optimole_settings_visits' );
+
+	useEffect( () => {
+		setIsVisible( hasImages && isFirstSite && 3 <= parseInt( visits ) && false !== settings && true !== settings?.firstImpressions );
+	}, [ visits, settings ]);
+
+	return (
+		<>
+			<CSAT
+				id="first-impressions"
+				show={ isVisible }
+				onDismiss={ () => updateOption( 'optml_csat', JSON.stringify({ ...settings, firstImpressions: true }) ) }
+				strings={ {
+					title: optimoleDashboardApp.strings.csat.title,
+					close: optimoleDashboardApp.strings.csat.close
+				} }
+				pages={ [
+					{
+						showHeader: true,
+						content: ( props ) => (
+							<div className="flex flex-col gap-5 px-8 pb-8">
+								<div className="font-bold text-lg">
+									{ optimoleDashboardApp.strings.csat.heading_one }
+								</div>
+
+								<div className="flex gap-5">
+									{ [ 1, 2, 3, 4, 5 ].map( value => (
+										<Button
+											key={ value }
+											onClick={ () => props.changeData({ score: value }, true ) }
+											className="optml__button basis-full justify-center rounded font-bold min-h-40"
+										>
+											{ value }
+										</Button>
+									) ) }
+								</div>
+
+								<div className="flex justify-between">
+									<span className="text-purple-gray text-sm">{ optimoleDashboardApp.strings.csat.low }</span>
+									<span className="text-purple-gray text-sm">{ optimoleDashboardApp.strings.csat.high }</span>
+								</div>
+							</div>
+						)
+					},
+					{
+						showHeader: true,
+						content: ( props ) => (
+							<div className="flex flex-col gap-5 px-8 pb-8">
+								<div className="font-bold text-lg">
+									{ optimoleDashboardApp.strings.csat.heading_two }
+								</div>
+
+								<TextareaControl
+									label={ optimoleDashboardApp.strings.csat.heading_two }
+									hideLabelFromVision={ true }
+									value={ props.data?.feedback }
+									placeholder={ optimoleDashboardApp.strings.csat.feedback_placeholder }
+									onChange={ feedback => props.changeData({ feedback }) }
+								/>
+
+								<div className="flex justify-between">
+									<Tooltip
+										text={ optimoleDashboardApp.strings.csat.privacy_tooltip }
+									>
+										<div className="flex items-center cursor-pointer text-info">
+											<Icon icon={ info } className="mr-2 fill-info" />
+
+											{ optimoleDashboardApp.strings.csat.privacy }
+										</div>
+									</Tooltip>
+
+									<div className="flex gap-2">
+										<Button
+											onClick={ () => props.onSubmit() }
+											className="optml__button basis-full justify-center rounded font-bold min-h-40"
+										>
+											{ optimoleDashboardApp.strings.csat.skip }
+										</Button>
+
+										<Button
+											variant="primary"
+											onClick={ () => props.onSubmit() }
+											className="optml__button basis-full justify-center rounded font-bold min-h-40"
+										>
+											{ optimoleDashboardApp.strings.csat.submit }
+										</Button>
+									</div>
+								</div>
+							</div>
+						)
+					}
+				] }
+			/>
+		</>
+	);
+};
+
+export default CSATList;