release: fixes

- Fix edge cases when the user data has a corrupted format. - Unify image size resize to both DAM and non-DAM contexts - Improve dashboard layout on various screen sizes - Update dependencies.
Codeinwp · Nov 11, 2024 · 18d6b65 · 18d6b65
2 parents 7695bdd + 39d13a6
commit 18d6b65
Show file tree

Hide file tree

Showing 26 changed files with 577 additions and 334 deletions.
diff --git a/.github/workflows/test-php.yml b/.github/workflows/test-php.yml
@@ -8,7 +8,7 @@ concurrency:
   cancel-in-progress: true
 jobs:
   phplint:
-    name: Phplint
+    name: PHPCS on PHP 8.0
     runs-on: ubuntu-latest
     steps:
       - name: Setup PHP version
@@ -17,62 +17,45 @@ jobs:
           php-version: '8.0'
           extensions: simplexml
       - name: Checkout source code
-        uses: actions/checkout@v2
-      - name: Get Composer Cache Directory
-        id: composer-cache
-        run: |
-          echo "::set-output name=dir::$(composer config cache-files-dir)"
-      - name: Setup Composer cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.composer-cache.outputs.dir }}
-          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-composer-
-      - name: Install composer
+        uses: actions/checkout@v4
+      - name: Install Composer dependencies
         run: composer install --prefer-dist --no-progress --no-suggest
       - name: Run PHPCS
-        run: composer run lint
+        run: composer phpcs
   phpunit:
-      name: Phpunit
+      name: PHPUnit tests on ${{ matrix.php-versions }}
       runs-on: ubuntu-latest
+      strategy:
+        fail-fast: false
+        matrix:
+          php-versions: [ '7.4', '8.0', '8.1', '8.2', '8.3' ]
       services:
-        mysql:
-          image: mysql:5.7
+        database:
+          image: mysql:latest
           env:
+            MYSQL_DATABASE: wordpress_tests
             MYSQL_ROOT_PASSWORD: root
           ports:
-            - 3306/tcp
-          options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
+            - 3306:3306
       steps:
         - name: Setup PHP version
           uses: shivammathur/setup-php@v2
           with:
-            php-version: '8.0'
+            php-version: ${{ matrix.php-version }}
             extensions: simplexml, mysql
-            tools: phpunit-polyfills
+            tools: phpunit-polyfills:1.1
+        - name: Install Subversion
+          run: sudo apt-get update && sudo apt-get install -y subversion
         - name: Checkout source code
-          uses: actions/checkout@v2
+          uses: actions/checkout@v4
         - name: Install WordPress Test Suite
-          run: |
-            bash bin/install-wp-tests.sh wordpress_test root root 127.0.0.1:${{ job.services.mysql.ports['3306'] }}
-        - name: Get Composer Cache Directory
-          id: composer-cache
-          run: |
-            echo "::set-output name=dir::$(composer config cache-files-dir)"
-        - name: Setup Composer cache
-          uses: actions/cache@v1
-          with:
-            path: ${{ steps.composer-cache.outputs.dir }}
-            key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-            restore-keys: |
-              ${{ runner.os }}-composer-
-        - name: Install composer
-          run: composer install --prefer-dist --no-progress --no-suggest --no-dev
+          run: composer install-wp-tests
+        - name: Install Composer dependencies
+          run: composer install --prefer-dist --no-progress --no-suggest
         - name: Run phpunit
-          run: phpunit
+          run: composer phpunit
   phpstan:
-    name: PHPStan
+    name: PHPStan on PHP 8.0
     runs-on: ubuntu-latest
     steps:
       - name: Setup PHP version
@@ -81,19 +64,8 @@ jobs:
           php-version: '8.0'
           extensions: simplexml, mysql
       - name: Checkout source code
-        uses: actions/checkout@v2
-      - name: Get Composer Cache Directory
-        id: composer-cache
-        run: |
-          echo "::set-output name=dir::$(composer config cache-files-dir)"
-      - name: Setup Composer cache
-        uses: actions/cache@v1
-        with:
-          path: ${{ steps.composer-cache.outputs.dir }}
-          key: ${{ runner.os }}-composer-${{ hashFiles('**/composer.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-composer-
-      - name: Install composer
+        uses: actions/checkout@v4
+      - name: Install Composer dependencies
         run: composer install --prefer-dist --no-progress --no-suggest
       - name: PHPStan Static Analysis
         run: composer phpstan
diff --git a/assets/img/bf-bg.jpg b/assets/img/bf-bg.jpg
diff --git a/assets/src/dashboard/parts/components/BlackFridayBanner.js b/assets/src/dashboard/parts/components/BlackFridayBanner.js
@@ -0,0 +1,62 @@
+import { Button } from '@wordpress/components';
+import { close } from '@wordpress/icons';
+import { useEffect, useState } from '@wordpress/element';
+import classNames from 'classnames';
+import { dismissNotice } from '../../utils/api';
+
+export default () => {
+	const { urgency, title, subtitle, cta_link, cta_text, dismiss_key } = optimoleDashboardApp.bf_notices.banner;
+	const [ isVisible, setIsVisible ] = useState( true );
+	const [ shouldRender, setShouldRender ] = useState( true );
+
+	const onClose = () => {
+		dismissNotice( dismiss_key, () => {
+			setIsVisible( false );
+		});
+	};
+
+	useEffect( () => {
+		if ( ! isVisible ) {
+			const timer = setTimeout( () => {
+				setShouldRender( false );
+			}, 300 );
+			return () => clearTimeout( timer );
+		}
+	}, [ isVisible ]);
+
+	const wrapClasses = classNames(
+		'relative flex flex-col items-center text-center xl:flex-row gap-5 justify-between xl:items-center bg-black text-white p-5 py-4 pr-7 box-border rounded-lg mt-5 bg-no-repeat transition-all duration-300',
+		{
+			'opacity-0': ! isVisible,
+			'opacity-100': isVisible
+		}
+	);
+
+	if ( ! shouldRender ) {
+		return null;
+	}
+
+	return (
+		<div className={wrapClasses}
+			style={{
+				backgroundImage: `url(${optimoleDashboardApp.assets_url}/img/bf-bg.jpg)`,
+				backgroundPosition: 'right 0',
+				backgroundSize: 'auto 100%'
+			}}
+		>
+			<Button
+				icon={close}
+				onClick={onClose}
+				label={optimoleDashboardApp.strings.csat.close}
+				className="absolute right-1 top-1 cursor-pointer text-white hover:text-promo-orange"
+			/>
+			<div className="flex flex-col gap-3 xl:items-start items-center">
+				<div className="text-sm lg:text-base border-b border-0 border-dashed uppercase pb-1 font-semibold">{urgency}</div>
+				<div className="text-4xl lg:text-5xl italic uppercase font-extrabold" dangerouslySetInnerHTML={{ __html: title }}/>
+				<div className="text-sm lg:text-base font-extrabold" dangerouslySetInnerHTML={{ __html: subtitle }}/>
+			</div>
+
+			<a href={cta_link} target="_blank" className="bg-promo-orange text-white px-7 py-3 uppercase text-base font-bold grow flex justify-center max-w-[150px] text-center cursor-pointer hover:bg-white hover:text-orange-400 transition-colors">{cta_text}</a>
+		</div>
+	);
+};
diff --git a/assets/src/dashboard/parts/connected/Sidebar.js b/assets/src/dashboard/parts/connected/Sidebar.js
@@ -41,9 +41,7 @@ const Sidebar = () => {
 	});
 
 	return (
-		<div
-			className="flex flex-col mt-8 mb-5 p-0 transition-all ease-in-out duration-700 gap-5 basis-3/12"
-		>
+		<div className="grid md:grid-cols-2 xl:flex xl:flex-col xl:mt-8 xl:mb-5 p-0 transition-all ease-in-out duration-700 gap-5 basis-4/12 2xl:basis-3/12">
 			<div className="bg-white gap-5 flex flex-col text-gray-700 border-0 rounded-lg shadow-md p-8">
 				<TextControl
 					label={ optimoleDashboardApp.strings.logged_in_as }
@@ -73,33 +71,41 @@ const Sidebar = () => {
 
 			{ 'free' === plan ? (
 				<div
-					className="bg-info flex flex-col text-white border-0 rounded-lg shadow-md p-8 bg-promo bg-no-repeat"
+					className="bg-info flex flex-col text-white border-0 rounded-lg overflow-hidden shadow-md bg-promo bg-no-repeat"
 					style={ {
 						backgroundImage: `url( ${ optimoleDashboardApp.assets_url }/img/logo2.png )`
 					} }
 				>
-					<h3 className="mt-0 text-white text-lg">{ optimoleDashboardApp.strings.upgrade.title_long }</h3>
-
-					<ul>
-						{ reasons.map( ( reason, index ) => (
-							<li
-								key={ index }
-								className="flex items-center gap-2"
-							>
-								<Icon icon="yes-alt" className="text-white" />
-								<span className="text-white font-normal text-base">{ reason }</span>
-							</li>
-						) ) }
-					</ul>
-
-					<Button
-						variant="link"
-						className="optml__button flex w-full justify-center font-bold min-h-40 !no-underline !text-white !bg-opaque-black !rounded"
-						href={ optimoleDashboardApp.optimoleHome +  'pricing' }
-						target="_blank"
-					>
-						{ optimoleDashboardApp.strings.upgrade.cta }
-					</Button>
+					{optimoleDashboardApp?.bf_notices?.sidebar && (
+						<a href={optimoleDashboardApp.bf_notices.sidebar.cta_link} className="flex flex-col gap-3 p-3 bg-black !no-underline text-center cursor-pointer hover:opacity-90 transition-opacity" target="_blank">
+							<span className="font-extrabold text-[17px] uppercase italic" dangerouslySetInnerHTML={{ __html: optimoleDashboardApp.bf_notices.sidebar.title }}/>
+							<span className="text-[11px] font-bold" dangerouslySetInnerHTML={{ __html: optimoleDashboardApp.bf_notices.sidebar.subtitle }}/>
+						</a>
+					)}
+
+					<div className="p-8 flex flex-col">
+						<h3 className="mt-0 text-white text-lg">{ optimoleDashboardApp.strings.upgrade.title_long }</h3>
+						<ul>
+							{ reasons.map( ( reason, index ) => (
+								<li
+									key={ index }
+									className="flex items-center gap-2"
+								>
+									<Icon icon="yes-alt" className="text-white" />
+									<span className="text-white font-normal text-base">{ reason }</span>
+								</li>
+							) ) }
+						</ul>
+
+						<Button
+							variant="link"
+							className="optml__button flex w-full justify-center font-bold min-h-40 !no-underline !text-white !bg-opaque-black !rounded"
+							href={ optimoleDashboardApp.optimoleHome +  'pricing' }
+							target="_blank"
+						>
+							{ optimoleDashboardApp.strings.upgrade.cta }
+						</Button>
+					</div>
 				</div>
 			) : (
 				<Button

diff --git a/assets/src/dashboard/parts/connected/index.js b/assets/src/dashboard/parts/connected/index.js
@@ -22,6 +22,7 @@ import Sidebar from './Sidebar';
 import CSAT from './CSAT';
 import { retrieveConflicts } from '../../utils/api';
 import formbricks from '@formbricks/js/app';
+import BlackFridayBanner from '../components/BlackFridayBanner';
 if ( 'undefined' !== typeof window && optimoleDashboardApp.user_data.plan ) {
 	formbricks.init({
 		environmentId: 'clo8wxwzj44orpm0gjchurujm',
@@ -32,9 +33,9 @@ if ( 'undefined' !== typeof window && optimoleDashboardApp.user_data.plan ) {
 			status: optimoleDashboardApp.user_data.status,
 			language: optimoleDashboardApp.language,
 			cname_assigned: optimoleDashboardApp.user_data.is_cname_assigned || 'no',
-			connected_websites: optimoleDashboardApp.user_data.whitelist.length.toString(),
-			traffic: convertToCategory( optimoleDashboardApp.user_data.traffic, 500 ).toString(),
-			images_number: convertToCategory( optimoleDashboardApp.user_data.images_number, 100 ).toString(),
+			connected_websites: optimoleDashboardApp.user_data.whitelist && optimoleDashboardApp.user_data.whitelist.length.toString(),
+			traffic: convertToCategory( optimoleDashboardApp.user_data.traffic || 0, 500 ).toString(),
+			images_number: convertToCategory( optimoleDashboardApp.user_data.images_number || 0, 100 ).toString(),
 			days_since_install: convertToCategory( optimoleDashboardApp.days_since_install ).toString()
 		}
 	});
@@ -144,10 +145,12 @@ const ConnectedLayout = ({
 	}, [ canSave ]);
 
 	return (
-		<>
-			<div className="optml-connected max-w-screen-xl flex flex-col lg:flex-row mx-auto gap-5">
+		<div className="optml-connected 2xl:max-w-screen-xl max-w-screen px-4 mx-auto">
+			{optimoleDashboardApp?.bf_notices?.banner && <BlackFridayBanner/>}
+
+			<div className="flex flex-col xl:flex-row mx-auto gap-5">
 				<div
-					className="flex flex-col justify-between mt-8 mb-5 p-0 transition-all ease-in-out duration-700 relative text-gray-700 basis-9/12"
+					className="flex flex-col justify-between mt-8 xl:mb-5 p-0 transition-all ease-in-out duration-700 relative text-gray-700 basis-8/12 2xl:basis-9/12"
 				>
 					{ 'dashboard' === tab && <Dashboard /> }
 
@@ -171,7 +174,7 @@ const ConnectedLayout = ({
 			</div>
 
 			<CSAT />
-		</>
+		</div>
 	);
 };
 

diff --git a/assets/src/dashboard/utils/api.js b/assets/src/dashboard/utils/api.js
@@ -603,4 +603,26 @@ export const addNotice = ( text )  => {
 	);
 };
 
+export const dismissNotice = ( key, callback = () => {}) => {
+	apiFetch({
+		path: optimoleDashboardApp.routes[ 'dismiss_notice' ],
+		method: 'POST',
+		data: {
+			key
+		}
+	}).then( response => {
+		if ( 'success' !== response.code ) {
+			addNotice( response?.data?.error || optimoleDashboardApp.strings.options_strings.settings_saved_error );
+
+			return;
+		}
+
+		if ( callback ) {
+			callback( response );
+		}
+	}).catch( err => {
+		addNotice( optimoleDashboardApp.strings.options_strings.settings_saved_error );
+	});
+};
+