Feature/tour (#103)

* - Added tour
- Added action and batch number in log
- Fixed Ads spacing
- Improved the Sidebar text

* Formated

apps/acf-extension/src/content_scripts/actions.ts

@@ -41,7 +41,7 @@ const Actions = (() => {
     let i = 0;
     while (i < actions.length) {
       const action = actions[i];
-      console.group(`${LOGGER_LETTER} #${action.name || i + 1}`);
+      console.group(`${LOGGER_LETTER} #${i + 1} [${action.name || 'no-name'}]`);
       if (!action.elementFinder) {
         throw new ConfigError('Element Finder is blank', 'Configuration Action');
       }

apps/acf-extension/src/content_scripts/batch.ts

@@ -22,7 +22,7 @@ const BatchProcessor = (() => {
     if (batch.repeat) {
       if (batch.repeat > 0) {
         for (let i = 0; i < batch.repeat; i += 1) {
-          console.group(`${LOGGER_LETTER} #${i + 2}`);
+          console.group(`${LOGGER_LETTER} #${i + 2} [repeat]`);
           if (batch?.repeatInterval) {
             await wait(batch?.repeatInterval, `${LOGGER_LETTER} Repeat`, batch.repeat, '<interval>');
           }
@@ -55,7 +55,7 @@ const BatchProcessor = (() => {
 
   const start = async (actions: Array<Action>, batch?: Batch) => {
     try {
-      console.group(`${LOGGER_LETTER} #1`);
+      console.group(`${LOGGER_LETTER} #1 (default)`);
       await Actions.start(actions, 1);
       console.groupEnd();
       if (batch) {

apps/acf-options-page/src/app/configs/action/index.tsx

@@ -29,7 +29,7 @@ function Action() {
 
   return (
     <>
-      <Card className='mt-3 shadow-sm'>
+      <Card className='mb-3 shadow-sm'>
         <Card.Header as='h6'>
           <Row>
             <Col className='d-flex align-items-center'>

apps/acf-options-page/src/app/configs/config/config-sidebar.tsx

@@ -2,7 +2,6 @@ import { DropdownToggle } from '@apps/acf-options-page/src/components';
 import { useAppDispatch, useAppSelector } from '@apps/acf-options-page/src/hooks';
 import { addConfig, configSelector, removeConfig, selectConfig, switchConfigRemoveModal, switchConfigReorderModal } from '@apps/acf-options-page/src/store/config';
 import { Plus, ThreeDots, Trash } from '@apps/acf-options-page/src/util';
-import { START_TYPES } from '@dhruv-techapps/acf-common';
 import { Button, Dropdown, ListGroup } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
@@ -19,7 +18,7 @@ export const ConfigSidebar = (props) => {
   return (
     <div className='bg-white border rounded sidebar shadow-sm'>
       <div className='d-flex justify-content-between align-items-center border-bottom p-2'>
-        <Button size='sm' variant='primary' onClick={() => dispatch(addConfig())}>
+        <Button size='sm' variant='primary' onClick={() => dispatch(addConfig())} data-testid='configurations-add'>
           <Plus /> {t('configuration.add')}
         </Button>
         <Dropdown id='configurations-dropdown-wrapper'>
@@ -55,20 +54,20 @@ export const ConfigSidebar = (props) => {
             key={index}
             as='li'
             variant={config.enable ? 'light' : 'dark'}
-            className={`d-flex justify-content-between ps-1 pe-0 ${selectedConfigIndex === index ? 'selected' : ''}`}
+            className={`d-flex justify-content-between ps-2 pe-0 ${selectedConfigIndex === index ? 'selected' : ''}`}
             action
             onClick={() => dispatch(selectConfig(index))}
           >
             <div className='d-flex align-items-center'>
-              <strong title={config.enable ? config.startType + ' start' : 'Disabled'} className={`me-2 ${config.enable ? 'bg-secondary text-dark' : 'bg-dark text-light'}  px-1 bg-opacity-25`}>
-                {config.enable ? (config.startType === START_TYPES.AUTO ? 'A' : 'M') : 'D'}
-              </strong>
               <div>
-                <div className='text-truncate' style={{ width: '383px' }}>{`${config.name || 'configuration - ' + index}`}</div>
-                <small className='text-truncate' style={{ width: '383px' }}>
+                <div className='text-truncate fs-5' style={{ width: '383px' }}>{`${config.name || 'configuration - ' + index}`}</div>
+                <small className='text-truncate text-dark' style={{ width: '383px' }}>
                   {config.url}
                 </small>
               </div>
+              {/*<strong title={config.enable ? config.startType + ' start' : 'Disabled'} className={`me-2 ${config.enable ? 'bg-secondary text-dark' : 'bg-dark text-light'}  px-1 bg-opacity-25`}>
+                {config.enable ? (config.startType === START_TYPES.AUTO ? 'A' : 'M') : 'D'}
+              </strong>*/}
             </div>
             <Button variant='link' onClick={(e) => onRemoveConfig(e, index)}>
               <Trash className='link-danger' />

apps/acf-options-page/src/app/footer.tsx

@@ -15,7 +15,7 @@ function Footer() {
   }
 
   return (
-    <footer className='pt-4 mt-3 mt-md-5 pt-md-5 border-top'>
+    <footer className='pt-3 mt-3 mt-md-3 pt-md-3 border-top'>
       <Container>
         <Row>
           <Col md xs={12} className='mb-3'>

apps/acf-options-page/src/app/header.tsx

@@ -7,13 +7,26 @@ import { useAppDispatch, useAppSelector } from '../hooks';
 import { switchTheme, themeSelector } from '../store/theme.slice';
 import { appSelector } from '../store/app.slice';
 import { switchSettingsModal } from '../store/settings/settings.slice';
+import { useTour } from '@reactour/tour';
+import { useEffect } from 'react';
 
 function Header() {
+  const { setIsOpen } = useTour();
   const theme = useAppSelector(themeSelector);
   const { error } = useAppSelector(appSelector);
   const dispatch = useAppDispatch();
   const { t, i18n } = useTranslation();
 
+  useEffect(() => {
+    const tour = localStorage.getItem('tour');
+    if (!tour) {
+      localStorage.setItem('tour', 'true');
+      setTimeout(() => {
+        setIsOpen(true);
+      }, 1000);
+    }
+  });
+
   const changeLanguage = async (lng) => {
     await i18n.changeLanguage(lng);
     localStorage.setItem('language', lng);
@@ -55,6 +68,9 @@ function Header() {
             <Nav.Link target='_blank' rel='noopener noreferrer' title='practice form' href={APP_LINK.TEST}>
               {t('footer.test')}
             </Nav.Link>
+            <Nav.Link onClick={() => setIsOpen(true)} id='tour'>
+              Tour
+            </Nav.Link>
           </Nav>
           <Nav>
             <Nav.Link target='_blank' rel='noopener noreferrer' title={t('footer.youtube')} href={SOCIAL_LINKS.YOUTUBE}>

apps/acf-options-page/src/main.tsx

@@ -6,6 +6,8 @@ import { BROWSER } from './_helpers';
 import { Provider } from 'react-redux';
 import { store } from './store';
 import { sentryInit } from './sentry';
+import { TourProvider } from '@reactour/tour';
+import { steps } from './tour';
 
 window.EXTENSION_ID = process.env[`NX_${BROWSER}_EXTENSION_ID`] ?? '';
 
@@ -15,7 +17,9 @@ if (process.env.NODE_ENV !== 'development') {
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <Provider store={store}>
-    <App />
-  </Provider>
+  <TourProvider steps={steps}>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </TourProvider>
 );

apps/acf-options-page/src/tour.tsx

@@ -0,0 +1,67 @@
+export const steps = [
+  {
+    selector: '[data-testid=configurations-add]',
+    content: () => (
+      <div>
+        To create a new setup, just click on "New Config".
+        <br />
+        <a href='https://getautoclicker.com/docs/3.x/config-list/add-configuration/' target='_blank' rel='noopener noreferrer'>
+          Add Configuration
+        </a>
+      </div>
+    ),
+  },
+  {
+    selector: 'input[name=url]',
+    content: () => (
+      <div>
+        Every configuration comes with its own special web address where it operates. You can even employ regular expressions to match multiple{' '}
+        <a href='https://getautoclicker.com/docs/3.x/configuration/url/' target='_blank' rel='noopener noreferrer'>
+          URLs
+        </a>
+        .
+      </div>
+    ),
+  },
+  {
+    selector: '#add-action',
+    content: () => (
+      <div>
+        Whether you\'re filling an input field or clicking a button, each is treated as a single action. To include additional actions, simply click on the "Add Action" button.
+        <br />
+        <a href='https://getautoclicker.com/docs/3.x/action/overview/' target='_blank' rel='noopener noreferrer'>
+          Action
+        </a>
+      </div>
+    ),
+  },
+  {
+    selector: '[name=elementFinder]',
+    content: () => (
+      <div>
+        Every component on a webpage, be it a button, link, input field, or any simple UI, is considered an element. The Element Finder feature assists the extension in locating these elements within
+        the page.There are various methods available to locate elements within a webpage.
+        <br />
+        <a href='https://getautoclicker.com/docs/3.x/action/element-finder/' target='_blank' rel='noopener noreferrer'>
+          Element Finder
+        </a>
+      </div>
+    ),
+  },
+  {
+    selector: '[name=value]',
+    content: () => (
+      <div>
+        Values are employed to populate input fields, and if you wish to click a component, you can simply leave the field blank. Explore numerous other options available for customization.
+        <br />
+        <a href='https://getautoclicker.com/docs/3.x/action-value/overview/' target='_blank' rel='noopener noreferrer'>
+          Value
+        </a>
+      </div>
+    ),
+  },
+  {
+    selector: '#tour',
+    content: 'To restart the tour, simply click the link provided here.',
+  },
+];

package.json

@@ -8,6 +8,7 @@
   "private": true,
   "dependencies": {
     "@nx/devkit": "17.2.8",
+    "@reactour/tour": "^3.6.1",
     "@reduxjs/toolkit": "^2.0.1",
     "@sentry/browser": "^7.91.0",
     "@sentry/react": "^7.73.0",