fix linkt issue

DotCamp · Apr 6, 2024 · 7f37a39 · 7f37a39
1 parent 2601101
commit 7f37a39
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 47 deletions.
diff --git a/admin/js/src/components/ExtensionCardProInfoControl.js b/admin/js/src/components/ExtensionCardProInfoControl.js
@@ -1,5 +1,5 @@
-import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 /**
  * Info control button for pro extension cards.
@@ -11,8 +11,8 @@ function ExtensionCardProInfoControl({ handleClick }) {
 	return (
 		// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions,jsx-a11y/interactive-supports-focus
 		<div
-			role={"button"}
-			className={"pro-block-card-info-button"}
+			role={'button'}
+			className={'pro-block-card-info-button'}
 			onClick={handleClick}
 		>
 			<FontAwesomeIcon icon="fa-solid fa-circle-info" />

diff --git a/admin/js/src/components/ExtensionControlCard.js b/admin/js/src/components/ExtensionControlCard.js
@@ -1,8 +1,8 @@
-import React, { useRef } from "react";
-import { __ } from "@wordpress/i18n";
-import ToggleControl from "$Components/ToggleControl";
-import ProExtensionCardTitle from "$Components/ProExtensionCardTitle";
-import ExtensionCardProInfoControl from "$Components/ExtensionCardProInfoControl";
+import React, { useRef } from 'react';
+import { __ } from '@wordpress/i18n';
+import ToggleControl from '$Components/ToggleControl';
+import ProExtensionCardTitle from '$Components/ProExtensionCardTitle';
+import ExtensionCardProInfoControl from '$Components/ExtensionCardProInfoControl';
 
 /**
  * Menu extension control component.
@@ -37,37 +37,39 @@ function ExtensionControlCard({
 
 	return (
 		<div
-			className={"extension-control"}
-			data-enabled={JSON.stringify(proExtension && !proStatus ? false : status)}
+			className={'extension-control'}
+			data-enabled={JSON.stringify(
+				proExtension && !proStatus ? false : status
+			)}
 			data-initial-animation={JSON.stringify(initialAnimation.current)}
 		>
-			<div className={"extension-title"}>
+			<div className={'extension-title'}>
 				<div
-					className={"extension-title-left-container"}
+					className={'extension-title-left-container'}
 					data-demo={demoUrl !== null}
 				>
 					<div
-						className={"title-icon"}
+						className={'title-icon'}
 						dangerouslySetInnerHTML={{ __html: iconElement }}
 					></div>
-					<div className={"title-text"}>
+					<div className={'title-text'}>
 						{title}
 						<ProExtensionCardTitle isPro={proExtension} />
 					</div>
 					{demoUrl && (
-						<div className={"title-demo"}>
+						<div className={'title-demo'}>
 							<a
 								href={demoUrl}
-								target={"_blank"}
+								target={'_blank'}
 								rel="noreferrer"
-								className={"strip-anchor-styles"}
+								className={'strip-anchor-styles'}
 							>
-								{__("See Demo", "ultimate-blocks")}
+								{__('See Demo', 'ultimate-blocks')}
 							</a>
 						</div>
 					)}
 				</div>
-				<div className={"extension-title-right-container"}>
+				<div className={'extension-title-right-container'}>
 					{proExtension && !proStatus ? (
 						<ExtensionCardProInfoControl
 							handleClick={(e) => {

diff --git a/admin/js/src/components/ExtensionsControlContainer.js b/admin/js/src/components/ExtensionsControlContainer.js
@@ -1,16 +1,16 @@
 // eslint-disable-next-line no-unused-vars
-import React, { useEffect, useState } from "react";
-import ExtensionControlCard from "$Components/ExtensionControlCard";
-import withStore from "$HOC/withStore";
+import React, { useEffect, useState } from 'react';
+import ExtensionControlCard from '$Components/ExtensionControlCard';
+import withStore from '$HOC/withStore';
 import {
 	getExtensions,
 	setExtensionActiveStatus,
-} from "$Stores/settings-menu/slices/extension";
+} from '$Stores/settings-menu/slices/extension';
 import {
 	getProStatus,
 	showProBlockUpsellModal,
-} from "$Stores/settings-menu/slices/app";
-import { toggleExtensionStatus } from "$Stores/settings-menu/actions";
+} from '$Stores/settings-menu/slices/app';
+import { toggleExtensionStatus } from '$Stores/settings-menu/actions';
 
 /**
  * Block controls container.
@@ -20,6 +20,7 @@ import { toggleExtensionStatus } from "$Stores/settings-menu/actions";
  * @param {Object}   props                    component properties
  * @param {Object}   props.extensions         menu data, will be supplied via HOC
  * @param {Function} props.dispatch           store action dispatch function, will be supplied via HOC
+ * @param {Function} props.showUpsell         set target extension type for modal interface
  * @param {Function} props.setExtensionStatus set a block's active status, will be supplied via HOC
  * @param {boolean}  props.proStatus          plugin pro status, will be supplied via HOC
  */
@@ -67,7 +68,7 @@ function ExtensionsControlContainer({
 	}, [ubExtensions]);
 
 	return (
-		<div className={"controls-container"}>
+		<div className={'controls-container'}>
 			{extensions.map(({ label, name, active, icon, info, pro }) => {
 				return (
 					<ExtensionControlCard
@@ -104,5 +105,5 @@ const actionMapping = () => ({
 export default withStore(
 	ExtensionsControlContainer,
 	selectMapping,
-	actionMapping,
+	actionMapping
 );
diff --git a/admin/js/src/components/UpsellModalSettingsMenu.js b/admin/js/src/components/UpsellModalSettingsMenu.js
@@ -1,26 +1,27 @@
-import React, { useMemo } from "react";
+import React, { useMemo } from 'react';
 import {
 	getModalTargetBlockType,
 	getModalVisibilityStatus,
 	hideProBlockUpsellModal,
 	getCurrentRoutePath,
-} from "$Stores/settings-menu/slices/app";
-import { getBlockById } from "$Stores/settings-menu/slices/blocks";
-import { getExtensionById } from "$Stores/settings-menu/slices/extension";
-import withStore from "$HOC/withStore";
-import UpsellModalBase from "$EditorComponents/Upsell/UpsellModalBase";
-import { getAsset } from "$Stores/settings-menu/slices/assets";
+} from '$Stores/settings-menu/slices/app';
+import { getBlockById } from '$Stores/settings-menu/slices/blocks';
+import { getExtensionById } from '$Stores/settings-menu/slices/extension';
+import withStore from '$HOC/withStore';
+import UpsellModalBase from '$EditorComponents/Upsell/UpsellModalBase';
+import { getAsset } from '$Stores/settings-menu/slices/assets';
 
 /**
  * Upsell modal window for settings menu.
  *
- * @param {Object}   props                  		component properties
- * @param {string}   props.targetBlock      		target block id, will be supplied via HOC
- * @param {boolean}  props.visibility       		modal visibility status, will be supplied via HOC
- * @param {Function} props.closeModalWindow 		close modal window, will be supplied via HOC
- * @param {Function} props.getBlockObject   		get block object, will be supplied via HOC
- * @param {Function} props.getExtensionObject  	get extension object, will be supplied via HOC
- * @param {string}   props.proBuyUrl        		url for pro buy page, will be supplied via HOC
+ * @param {Object}   props                    component properties
+ * @param {string}   props.targetBlock        target block id, will be supplied via HOC
+ * @param {boolean}  props.visibility         modal visibility status, will be supplied via HOC
+ * @param {Function} props.closeModalWindow   close modal window, will be supplied via HOC
+ * @param {Function} props.getBlockObject     get block object, will be supplied via HOC
+ * @param {Function} props.getExtensionObject get extension object, will be supplied via HOC
+ * @param {string}   props.proBuyUrl          url for pro buy page, will be supplied via HOC
+ * @param {string}   props.currentRoutePath   provides the current router
  */
 function UpsellModalSettingsMenu({
 	targetBlock,
@@ -41,12 +42,13 @@ function UpsellModalSettingsMenu({
 	 * @param {Object} blockObject block object
 	 */
 	const prepareUpsellData = (blockObject) => {
-		if (blockObject && typeof blockObject === "object") {
-			const { name, title, info, icon, screenshotUrl, label } = blockObject;
+		if (blockObject && typeof blockObject === 'object') {
+			const { name, title, info, icon, screenshotUrl, label } =
+				blockObject;
 
 			return {
 				[name]: {
-					name: title ?? label ?? "",
+					name: title ?? label ?? '',
 					description: Array.isArray(info) ? info[0] : info,
 					imageUrl: screenshotUrl,
 					icon,
@@ -57,7 +59,7 @@ function UpsellModalSettingsMenu({
 		return null;
 	};
 	const targetBlockObj =
-		currentRoutePath === "extensions"
+		currentRoutePath === 'extensions'
 			? getExtensionObject(targetBlock)
 			: getBlockObject(targetBlock);
 	const currentUpsellData = useMemo(() => {
@@ -93,7 +95,7 @@ const selectMapping = (select) => {
 			select((state) => getBlockById(state, blockId)),
 		getExtensionObject: (blockId) =>
 			select((state) => getExtensionById(state, blockId)),
-		proBuyUrl: select((state) => getAsset(state, "proBuyUrl")),
+		proBuyUrl: select((state) => getAsset(state, 'proBuyUrl')),
 		currentRoutePath: select(getCurrentRoutePath),
 	};
 };