google-listings-and-ads/js/src/product-feed/issues-table-card/index.js at develop · mikkamp/google-listings-and-ads · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { createInterpolateElement } from '@wordpress/element';
import { Card, CardHeader } from '@wordpress/components';
import classnames from 'classnames';

/**
 * Internal dependencies
 */
import AppTableCardDiv from '.~/components/app-table-card-div';
import HelpPopover from '.~/components/help-popover';
import AppDocumentationLink from '.~/components/app-documentation-link';
import IssuesTable from '.~/product-feed/issues-table-card/issues-table';
import IssuesTypeNavigation from '.~/product-feed/issues-table-card/issues-type-navigation';
import ReviewRequest from '.~/product-feed/review-request';
import useMCIssuesTotals from '.~/hooks/useMCIssuesTotals';
import useAppSelectDispatch from '.~/hooks/useAppSelectDispatch';
import Text from '.~/components/app-text';
import './index.scss';

const actions = (
	<HelpPopover id="issues-to-resolve">
		{ createInterpolateElement(
			__(
				'Products and stores must meet <link>Google Merchant Center’s requirements</link> in order to get approved. WooCommerce and Google automatically check your product feed to help you resolve any issues. ',
				'google-listings-and-ads'
			),
			{
				link: (
					<AppDocumentationLink
						context="product-feed"
						linkId="issues-to-resolve"
						href="https://support.google.com/merchants/answer/6363310"
					/>
				),
			}
		) }
	</HelpPopover>
);

/**
 * Triggered when edit links are clicked from Issues to resolve table.
 *
 * @event gla_edit_product_issue_click
 * @property {string} code Issue code returned from Google
 * @property {string} issue Issue description returned from Google
 */

/**
 * @fires gla_edit_product_issue_click
 * @fires gla_table_go_to_page with `context: 'issues-to-resolve'`
 * @fires gla_table_page_click with `context: 'issues-to-resolve'`
 * @fires gla_documentation_link_click with `{ context: 'product-feed', link_id: 'issues-to-resolve', href: 'https://support.google.com/merchants/answer/6363310' }`
 */

/**
 * The card rendering the Merchant Center Issues in the Product feed. It doesn't render if there is no issues.
 * It uses useMCIssuesTotals for getting the total of issues.
 *
 * @see useMCIssuesTotals
 * @see IssuesTypeNavigation
 * @see IssuesTable
 * @return {JSX.Element|null} A Card with a Header, a Navigation and a table with issues
 */
const IssuesTableCard = () => {
	const { total } = useMCIssuesTotals();
	const account = useAppSelectDispatch( 'getMCReviewRequest' );

	// We don't want to render if no issues are found
	if ( ! total ) return null;

	return (
		<AppTableCardDiv className="gla-issues-table-card">
			<Card
				className={ classnames( 'woocommerce-table', {
					'has-actions': !! actions,
				} ) }
			>
				<CardHeader>
					{ /* We use this Text component to make it similar to TableCard component. */ }
					<Text variant="title-small" as="h2">
						{ __( 'Issues to resolve', 'google-listings-and-ads' ) }
					</Text>
					{ /* This is also similar to TableCard component implementation. */ }
					<div className="woocommerce-table__actions">
						{ actions }
					</div>
				</CardHeader>
				<IssuesTypeNavigation />
				<ReviewRequest account={ account } />
				<IssuesTable />
			</Card>
		</AppTableCardDiv>
	);
};

export default IssuesTableCard;