feat: improve TC visibility in dashboard [Codeinwp#1286]

mghenciu · Apr 14, 2021 · 2a7466f · 2a7466f
1 parent 09d37fc
commit 2a7466f
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 28 deletions.
diff --git a/dashboard/assets/template-cloud.svg b/dashboard/assets/template-cloud.svg
diff --git a/dashboard/src/Components/App.js b/dashboard/src/Components/App.js
@@ -6,11 +6,13 @@ import Loading from './Loading';
 import Snackbar from './Snackbar';
 import { fetchOptions } from '../utils/rest';
 
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { useState, Fragment, useEffect } from '@wordpress/element';
 
-const App = ({ setSettings, toast, currentTab, setTab }) => {
+const App = ({ tier, setSettings, toast, currentTab, setTab }) => {
 	const [loading, setLoading] = useState(true);
 	useEffect(() => {
 		fetchOptions().then((r) => {
@@ -28,6 +30,22 @@ const App = ({ setSettings, toast, currentTab, setTab }) => {
 				<div className="container content">
 					<div className="main">
 						{'starter-sites' !== currentTab && <Notifications />}
+						{tier === 3 && (
+							<div className="notification template-cloud">
+								<p>
+									{__(
+										'Great news! Now you can export your own custom designs to the cloud and then reuse them on other sites.',
+										'neve'
+									)}
+								</p>
+								<Button
+									isSecondary
+									href="themes.php?page=tiob-starter-sites"
+								>
+									{__('Open Templates Cloud', 'neve')}
+								</Button>
+							</div>
+						)}
 						<TabsContent currentTab={currentTab} setTab={setTab} />
 					</div>
 					{'starter-sites' !== currentTab && (
@@ -49,10 +67,11 @@ export default compose(
 		};
 	}),
 	withSelect((select) => {
-		const { getToast, getTab } = select('neve-dashboard');
+		const { getToast, getTab, getLicenseTier } = select('neve-dashboard');
 		return {
 			toast: getToast(),
 			currentTab: getTab(),
+			tier: getLicenseTier(),
 		};
 	})
 )(App);
diff --git a/dashboard/src/Components/Content/Start.js b/dashboard/src/Components/Content/Start.js
@@ -4,10 +4,11 @@ import { tabs } from '../../utils/common';
 
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import { Button, ExternalLink } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
 
 const Start = (props) => {
-	const { setTab } = props;
+	const { setTab, tier } = props;
 	const {
 		showFeedbackNotice,
 		pro,
@@ -81,18 +82,42 @@ const Start = (props) => {
 			</Card>
 
 			{!whiteLabel && (
-				<Card
-					icon={neveDash.assets + 'page.svg'}
-					title={__('Getting Started? Check help and docs', 'neve')}
-					description={__(
-						'Need more details? Please check our full documentation for detailed information on how to use Neve.',
-						'neve'
-					)}
-				>
-					<Button isLink onClick={() => setTab('help')}>
-						{__('Go to docs', 'neve')}
-					</Button>
-				</Card>
+				<>
+					<Card
+						icon={neveDash.assets + 'page.svg'}
+						title={__(
+							'Getting Started? Check help and docs',
+							'neve'
+						)}
+						description={__(
+							'Need more details? Please check our full documentation for detailed information on how to use Neve.',
+							'neve'
+						)}
+					>
+						<Button isLink onClick={() => setTab('help')}>
+							{__('Go to docs', 'neve')}
+						</Button>
+					</Card>
+					<Card
+						icon={neveDash.assets + 'template-cloud.svg'}
+						title="Templates Cloud"
+						description={__(
+							'Import professional page templates or sections with one click and have a website running in seconds.',
+							'neve'
+						)}
+					>
+						{tier !== 3 && (
+							<ExternalLink href="https://themeisle.com/themes/neve/#pricing">
+								{__('Discover Templates Cloud', 'neve')}
+							</ExternalLink>
+						)}
+						{tier === 3 && (
+							<ExternalLink href="https://docs.themeisle.com/article/1091-starter-sites-available-for-import#my-library">
+								{__('Learn how to use Templates Cloud', 'neve')}
+							</ExternalLink>
+						)}
+					</Card>
+				</>
 			)}
 			{showFeedbackNotice && !pro && (
 				<Card
@@ -117,4 +142,9 @@ const Start = (props) => {
 	);
 };
 
-export default Start;
+export default withSelect((select) => {
+	const { getLicenseTier } = select('neve-dashboard');
+	return {
+		tier: getLicenseTier(),
+	};
+})(Start);
diff --git a/dashboard/src/scss/components/_notification.scss b/dashboard/src/scss/components/_notification.scss
@@ -69,7 +69,7 @@
 	}
   }
 
-  button {
+  .components-button {
 		box-shadow: none;
     margin-left: auto;
     background-color: transparent;

diff --git a/languages/neve.pot b/languages/neve.pot
@@ -1830,6 +1830,14 @@ msgstr ""
 msgid "Page Builder Full Width (Neve)"
 msgstr ""
 
+#: dashboard/src/Components/App.js:36
+msgid "Great news! Now you can export your own custom designs to the cloud and then reuse them on other sites."
+msgstr ""
+
+#: dashboard/src/Components/App.js:41
+msgid "Open Templates Cloud"
+msgstr ""
+
 #: dashboard/src/Components/Content/Changelog.js:16
 msgid "Show changelog for"
 msgstr ""
@@ -1863,7 +1871,7 @@ msgid "In the documentation below you will find an easy way to build a great loo
 msgstr ""
 
 #: dashboard/src/Components/Content/Help.js:47
-#: dashboard/src/Components/Content/Start.js:93
+#: dashboard/src/Components/Content/Start.js:95
 msgid "Go to docs"
 msgstr ""
 
@@ -1906,37 +1914,49 @@ msgstr ""
 msgid "View Changelog"
 msgstr ""
 
-#: dashboard/src/Components/Content/Start.js:55
+#: dashboard/src/Components/Content/Start.js:56
 #: dashboard/src/utils/common.js:39
 msgid "Starter Sites"
 msgstr ""
 
-#: dashboard/src/Components/Content/Start.js:65
-#: dashboard/src/Components/Content/Start.js:69
+#: dashboard/src/Components/Content/Start.js:66
+#: dashboard/src/Components/Content/Start.js:70
 msgid "Go to Starter Sites"
 msgstr ""
 
-#: dashboard/src/Components/Content/Start.js:78
+#: dashboard/src/Components/Content/Start.js:79
 msgid "Customizer quick links"
 msgstr ""
 
-#: dashboard/src/Components/Content/Start.js:86
+#: dashboard/src/Components/Content/Start.js:88
 msgid "Getting Started? Check help and docs"
 msgstr ""
 
-#: dashboard/src/Components/Content/Start.js:87
+#: dashboard/src/Components/Content/Start.js:89
 msgid "Need more details? Please check our full documentation for detailed information on how to use Neve."
 msgstr ""
 
-#: dashboard/src/Components/Content/Start.js:102
+#: dashboard/src/Components/Content/Start.js:101
+msgid "Import professional page templates or sections with one click and have a website running in seconds."
+msgstr ""
+
+#: dashboard/src/Components/Content/Start.js:108
+msgid "Discover Templates Cloud"
+msgstr ""
+
+#: dashboard/src/Components/Content/Start.js:113
+msgid "Learn how to use Templates Cloud"
+msgstr ""
+
+#: dashboard/src/Components/Content/Start.js:125
 msgid "Feedback"
 msgstr ""
 
-#: dashboard/src/Components/Content/Start.js:103
+#: dashboard/src/Components/Content/Start.js:126
 msgid "Share your feedback for Neve and get the chance to win the pro version."
 msgstr ""
 
-#: dashboard/src/Components/Content/Start.js:112
+#: dashboard/src/Components/Content/Start.js:135
 msgid "Leave Feedback"
 msgstr ""