diff --git a/packages/js/src/components/modals/SEMrushKeyphrasesTable.js b/packages/js/src/components/modals/SEMrushKeyphrasesTable.js deleted file mode 100644 index cd1ac50edeb..00000000000 --- a/packages/js/src/components/modals/SEMrushKeyphrasesTable.js +++ /dev/null @@ -1,205 +0,0 @@ -/* External dependencies */ -import PropTypes from "prop-types"; -import { Fragment, Component } from "@wordpress/element"; -import { __, sprintf } from "@wordpress/i18n"; -import { isEmpty } from "lodash"; - -/* Yoast dependencies */ -import { makeOutboundLink } from "@yoast/helpers"; - -/* Internal dependencies */ -import AreaChart from "../AreaChart"; -import HelpLink from "../HelpLink"; - -const GetMoreInsightsLink = makeOutboundLink(); - -/** - * The SEMrushKeyphrasesTable component. - */ -class SEMrushKeyphrasesTable extends Component { - /** - * Constructs the Related Keyphrases table. - * - * @param {Object} props The props for the Related Keyphrases table. - * - * @returns {void} - */ - constructor( props ) { - super( props ); - - this.transformTrendDataToChartPoints = this.transformTrendDataToChartPoints.bind( this ); - this.getAreaChartDataTableHeaderLabels = this.getAreaChartDataTableHeaderLabels.bind( this ); - this.mapAreaChartDataToTableData = this.mapAreaChartDataToTableData.bind( this ); - } - - /** - * Transforms the SEMrush Trend data to x/y points for the SVG area chart. - * - * @param {Object} trend Comma separated list of Trend values for a single keyphrase.. - * - * @returns {Array} An array of x/y coordinates objects. - */ - transformTrendDataToChartPoints( trend ) { - const trendArray = trend.split( "," ); - - return trendArray.map( ( value, index ) => ( { x: index, y: parseFloat( value ) } ) ); - } - - /** - * Gets the labels for the data table headers. - * - * @returns {Array} The data table header labels. - */ - getAreaChartDataTableHeaderLabels() { - return [ - __( "Twelve months ago", "wordpress-seo" ), - __( "Eleven months ago", "wordpress-seo" ), - __( "Ten months ago", "wordpress-seo" ), - __( "Nine months ago", "wordpress-seo" ), - __( "Eight months ago", "wordpress-seo" ), - __( "Seven months ago", "wordpress-seo" ), - __( "Six months ago", "wordpress-seo" ), - __( "Five months ago", "wordpress-seo" ), - __( "Four months ago", "wordpress-seo" ), - __( "Three months ago", "wordpress-seo" ), - __( "Two months ago", "wordpress-seo" ), - __( "Last month", "wordpress-seo" ), - ]; - } - - /** - * Adapts the chart y axis data to a more meaningful format for the alternative representation in the data table. - * - * @param {number} y The raw y axis data of the chart. - * - * @returns {number} The formatted y axis data. - */ - mapAreaChartDataToTableData( y ) { - return Math.round( y * 100 ); - } - - /** - * Renders the Related Keyphrases table. - * - * @returns {React.Element} The Related Keyphrases table. - */ - render() { - const { keyphrase, relatedKeyphrases, countryCode, data, renderAction } = this.props; - const url = "https://www.semrush.com/analytics/keywordoverview/?q=" + encodeURIComponent( keyphrase ) + - "&db=" + encodeURIComponent( countryCode ); - - return ( - data && ! isEmpty( data.results ) && - - - - - - - { renderAction && - - - { - data.results.rows.map( ( row, index ) => { - const relatedKeyphrase = row[ 0 ]; - const chartPoints = this.transformTrendDataToChartPoints( row[ 2 ] ); - const areaChartDataTableHeaderLabels = this.getAreaChartDataTableHeaderLabels(); - - return - - - - { - renderAction && - } - ; - } ) - } - -
- { __( "Related keyphrase", "wordpress-seo" ) } - - { __( "Volume", "wordpress-seo" ) } - - - { - /* translators: Hidden accessibility text. */ - __( "Learn more about the related keyphrases volume", "wordpress-seo" ) - } - - - - { __( "Trend", "wordpress-seo" ) } - - - { - /* translators: Hidden accessibility text. */ - __( "Learn more about the related keyphrases trend", "wordpress-seo" ) - } - - - } -
{ relatedKeyphrase }{ row[ 1 ] } - - - { renderAction( relatedKeyphrase, relatedKeyphrases ) } -
-

- - { sprintf( - /* translators: %s expands to Semrush */ - __( "Get more insights at %s", "wordpress-seo" ), - "Semrush" - ) } - -

- - ); - } -} - -SEMrushKeyphrasesTable.propTypes = { - data: PropTypes.object, - keyphrase: PropTypes.string, - relatedKeyphrases: PropTypes.array, - countryCode: PropTypes.string, - renderAction: PropTypes.func, -}; - -SEMrushKeyphrasesTable.defaultProps = { - data: {}, - keyphrase: "", - relatedKeyphrases: [], - countryCode: "us", - renderAction: null, -}; - -export default SEMrushKeyphrasesTable; diff --git a/packages/js/src/components/modals/SEMrushLimitReached.js b/packages/js/src/components/modals/SEMrushLimitReached.js deleted file mode 100644 index dbbc197783e..00000000000 --- a/packages/js/src/components/modals/SEMrushLimitReached.js +++ /dev/null @@ -1,44 +0,0 @@ -/* External dependencies */ -import { __, sprintf } from "@wordpress/i18n"; -import { Fragment } from "@wordpress/element"; - -/* Yoast dependencies */ -import { makeOutboundLink } from "@yoast/helpers"; - -const UpdateSEMrushPlanLink = makeOutboundLink(); - -/** - * Creates the content for the SEMrush limit exceeded modal. - * - * @returns {wp.Element} The SEMrush limit exceeded modal content. - */ -const SEMrushLimitReached = () => { - return ( - -

- { - sprintf( - /* translators: %s : Expands to "Semrush". */ - __( "You've reached your request limit for today. Check back tomorrow or upgrade your plan over at %s.", "wordpress-seo" ), - "Semrush" - ) - } -

- - { - sprintf( - /* translators: %s : Expands to "Semrush". */ - __( "Upgrade your %s plan", "wordpress-seo" ), - "Semrush" - ) - } - - - ); -}; - -export default SEMrushLimitReached; diff --git a/packages/js/src/components/modals/SEMrushLoading.js b/packages/js/src/components/modals/SEMrushLoading.js deleted file mode 100644 index 84142b533c1..00000000000 --- a/packages/js/src/components/modals/SEMrushLoading.js +++ /dev/null @@ -1,29 +0,0 @@ -/* External dependencies */ -import { __, sprintf } from "@wordpress/i18n"; - -/* Yoast dependencies */ -import { SvgIcon } from "@yoast/components"; - -/** - * Creates the loading content for the SEMrush related keywords modal. - * - * @returns {wp.Element} The SEMrush loading content. - */ -const SEMrushLoading = () => { - return ( -

- { - sprintf( - /* translators: %1$s expands to "Yoast SEO", %2$s expands to "Semrush". */ - __( "Please wait while %1$s connects to %2$s to get related keyphrases...", "wordpress-seo" ), - "Yoast SEO", - "Semrush" - ) - } -   - -

- ); -}; - -export default SEMrushLoading; diff --git a/packages/js/src/components/modals/SEMrushMaxRelatedKeyphrases.js b/packages/js/src/components/modals/SEMrushMaxRelatedKeyphrases.js deleted file mode 100644 index 9b109a049e4..00000000000 --- a/packages/js/src/components/modals/SEMrushMaxRelatedKeyphrases.js +++ /dev/null @@ -1,30 +0,0 @@ -/* External dependencies */ -import { __, sprintf } from "@wordpress/i18n"; - -/* Yoast dependencies */ -import { Alert } from "@yoast/components"; - -/** - * Creates the content for the Maximum related keyphrases alert. - * - * @returns {wp.Element} The Maximum related keyphrases alert. - */ -const SEMrushMaxRelatedKeyphrases = () => { - return ( - - { - sprintf( - /* translators: %s: Expands to "Yoast SEO". */ - __( - // eslint-disable-next-line max-len - "You've reached the maximum amount of 4 related keyphrases. You can change or remove related keyphrases in the %s metabox or sidebar.", - "wordpress-seo" - ), - "Yoast SEO" - ) - } - - ); -}; - -export default SEMrushMaxRelatedKeyphrases; diff --git a/packages/js/src/components/modals/SEMrushRequestFailed.js b/packages/js/src/components/modals/SEMrushRequestFailed.js deleted file mode 100644 index 404694b491d..00000000000 --- a/packages/js/src/components/modals/SEMrushRequestFailed.js +++ /dev/null @@ -1,23 +0,0 @@ -/* External dependencies */ -import { __ } from "@wordpress/i18n"; - -/* Yoast dependencies */ -import { Alert } from "@yoast/components"; - -/** - * Creates the content for the SEMrush request failed modal. - * - * @returns {wp.Element} The SEMrush request failed modal content. - */ -const SEMrushRequestFailed = () => { - return ( - - { __( - "We've encountered a problem trying to get related keyphrases. Please try again later.", - "wordpress-seo" - ) } - - ); -}; - -export default SEMrushRequestFailed; diff --git a/packages/js/src/components/modals/SEMrushUpsellAlert.js b/packages/js/src/components/modals/SEMrushUpsellAlert.js deleted file mode 100644 index 8f68515cf16..00000000000 --- a/packages/js/src/components/modals/SEMrushUpsellAlert.js +++ /dev/null @@ -1,43 +0,0 @@ -/* External dependencies */ -import { __, sprintf } from "@wordpress/i18n"; - -/* Yoast dependencies */ -import { Alert } from "@yoast/components"; -import { makeOutboundLink } from "@yoast/helpers"; - -const PremiumLandingPageLink = makeOutboundLink(); - -/** - * Creates the content for the Yoast SEO Premium upsell alert in SEMrush modal. - * - * @returns {wp.Element} The Yoast SEO Premium upsell alert. - */ -const SEMrushUpsellAlert = () => { - return ( - - { - sprintf( - /* translators: %s: Expands to "Yoast SEO". */ - __( - "You’ll reach more people with multiple keyphrases! Want to quickly add these related keyphrases to the %s analyses for even better content optimization?", - "wordpress-seo" - ), - "Yoast SEO" - ) + " " - } - - { - sprintf( - /* translators: %s: Expands to "Yoast SEO Premium". */ - __( "Explore %s!", "wordpress-seo" ), - "Yoast SEO Premium" - ) - } - - - ); -}; - -export default SEMrushUpsellAlert; diff --git a/packages/js/tests/components/SEMrushKeyphrasesTable.test.js b/packages/js/tests/components/SEMrushKeyphrasesTable.test.js deleted file mode 100644 index 668e455a157..00000000000 --- a/packages/js/tests/components/SEMrushKeyphrasesTable.test.js +++ /dev/null @@ -1,132 +0,0 @@ -import { noop } from "lodash"; -import SEMrushKeyphrasesTable from "../../../js/src/components/modals/SEMrushKeyphrasesTable"; -import { render, screen } from "../test-utils"; - -global.window.wpseoAdminL10n = []; -global.window.wpseoAdminL10n[ "shortlinks.semrush.volume_help" ] = "test.com"; - -const testData = { - results: { - columnNames: [ "Keyword", "Search Volume", "Trends" ], - rows: [ - [ "element1", "111", "0.82,0.82,0.82,0.82,0.82,0.82,0.82,0.82,0.82,1.00,1.00,1.00" ], - [ "element2", "222", "1.00,0.67,0.45,0.45,0.37,0.37,0.37,0.37,0.37,0.30,0.37,0.45" ], - [ "element3", "333", "0.82,0.82,0.82,0.82,1.00,1.00,0.82,0.82,0.82,0.82,0.82,0.82" ], - [ "element4", "444", "0.45,0.45,0.45,0.55,0.45,0.55,0.55,0.55,1.00,0.82,0.82,0.45" ], - [ "element5", "555", "0.67,0.67,0.67,0.82,0.82,1.00,1.00,0.82,0.82,1.00,1.00,1.00" ], - [ "element6", "666", "0.00,1.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00" ], - [ "element7", "777", "0.06,1.00,0.20,0.11,0.11,0.11,0.13,0.13,0.13,0.11,0.09,0.07" ], - [ "element8", "888", "0.13,1.00,0.25,0.13,0.13,0.13,0.16,0.16,0.37,0.37,0.16,0.16" ], - [ "element9", "999", "0.00,1.00,0.04,0.01,0.01,0.01,0.01,0.01,0.01,0.02,0.01,0.01" ], - [ "element10", "101010", "0.06,0.02,0.01,0.01,0.01,0.01,0.02,0.01,0.05,0.20,0.05,1.00" ], - ], - }, - status: 200, -}; - -const expectedGraphData = [ - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 1 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 1 ], [ 0.67 ], [ 0.45 ], [ 0.45 ], [ 0.37 ], [ 0.37 ], [ 0.37 ], [ 0.37 ], [ 0.37 ], [ 0.3 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 1 ], [ 1 ], [ 0.82 ], [ 0.82 ], [ 0.82 ], [ 0.82 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 0.45 ], [ 0.45 ], [ 0.45 ], [ 0.55 ], [ 0.45 ], [ 0.55 ], [ 0.55 ], [ 0.55 ], [ 1 ], [ 0.82 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 0.67 ], [ 0.67 ], [ 0.67 ], [ 0.82 ], [ 0.82 ], [ 1 ], [ 1 ], [ 0.82 ], [ 0.82 ], [ 1 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 0 ], [ 1 ], [ 0 ], [ 0 ], [ 0 ], [ 0 ], [ 0 ], [ 0 ], [ 0 ], [ 0 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ .06 ], [ 1 ], [ 0.2 ], [ 0.11 ], [ 0.11 ], [ 0.11 ], [ 0.13 ], [ 0.13 ], [ 0.13 ], [ 0.11 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 0.13 ], [ 1 ], [ 0.25 ], [ 0.13 ], [ 0.13 ], [ 0.13 ], [ 0.16 ], [ 0.16 ], [ 0.37 ], [ 0.37 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 0 ], [ 1 ], [ 0.04 ], [ 0.01 ], [ 0.01 ], [ 0.01 ], [ 0.01 ], [ 0.01 ], [ 0.01 ], [ 0.02 ] ], - }, - { - x: [ [ 0 ], [ 1 ], [ 2 ], [ 3 ], [ 4 ], [ 5 ], [ 6 ], [ 7 ], [ 8 ], [ 9 ] ], - y: [ [ 0.06 ], [ 0.02 ], [ 0.01 ], [ 0.01 ], [ 0.01 ], [ 0.01 ], [ 0.02 ], [ 0.01 ], [ 0.05 ], [ 0.2 ] ], - }, -]; - -describe( "SEMrushKeyphrasesTable", () => { - beforeEach( () => { - render( ); - } ); - - it( "should fill the table with 10 elements", () => { - const tbody = document.querySelector( "tbody" ); - expect( tbody.children ).toHaveLength( 10 ); - } ); - - describe( "search keywords", () => { - test.each( [ - "element1", - "element2", - "element3", - "element4", - "element5", - "element6", - "element7", - "element8", - "element9", - "element10", - ] )( "should have the %s search keyword present", text => { - expect( screen.getByText( text ) ).toBeInTheDocument(); - } ); - } ); - - describe( "search volumes", () => { - test.each( [ - "111", - "222", - "333", - "444", - "555", - "666", - "777", - "888", - "999", - "101010", - ] )( "should have the %s volume present", text => { - expect( screen.getByText( text ) ).toBeInTheDocument(); - } ); - } ); - - it( "should have the right calculated graph points", () => { - const graphElements = document.querySelector( ".yoast-table--nopadding" ); - let elementIndex, expectedValueIndex; - for ( elementIndex = 0; elementIndex < graphElements.length; elementIndex++ ) { - for ( expectedValueIndex = 0; expectedValueIndex < graphElements.length; expectedValueIndex++ ) { - expect( graphElements[ elementIndex ].props.children.props.data[ expectedValueIndex ].x ) - .toBe( expectedGraphData[ elementIndex ].x[ expectedValueIndex ][ 0 ] ); - expect( graphElements[ elementIndex ].props.children.props.data[ expectedValueIndex ].y ) - .toBe( expectedGraphData[ elementIndex ].y[ expectedValueIndex ][ 0 ] ); - } - } - } ); -} );