From 2a7466fd72ac05cafbb3f54d6afa8a0004e5db25 Mon Sep 17 00:00:00 2001
From: cristian-ungureanu <cristian@themeisle.com>
Date: Wed, 14 Apr 2021 19:16:52 +0300
Subject: [PATCH] feat: improve TC visibility in dashboard [#1286]

---
 dashboard/assets/template-cloud.svg           |  5 ++
 dashboard/src/Components/App.js               | 23 ++++++-
 dashboard/src/Components/Content/Start.js     | 60 ++++++++++++++-----
 .../src/scss/components/_notification.scss    |  2 +-
 languages/neve.pot                            | 40 +++++++++----
 5 files changed, 102 insertions(+), 28 deletions(-)
 create mode 100644 dashboard/assets/template-cloud.svg

diff --git a/dashboard/assets/template-cloud.svg b/dashboard/assets/template-cloud.svg
new file mode 100644
index 0000000000..b5333f9969
--- /dev/null
+++ b/dashboard/assets/template-cloud.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M30.4084 32H1.59154C0.71295 32 0 31.287 0 30.4084V1.59154C0 0.71295 0.71295 0 1.59154 0H30.4084C31.287 0 32 0.71295 32 1.59154V30.4084C32 31.287 31.287 32 30.4084 32Z" fill="#0073AA"/>
+	<path d="M26.462 27.7584V9.8626V5.90894H22.5119H4.61255L8.56256 9.8626H22.5119V23.8084L26.462 27.7584Z" fill="white"/>
+	<path d="M13.5173 18.8573L13.5209 22.7786L17.0353 26.2929L17.0209 15.3538L6.07812 15.3394L9.59249 18.8501L13.5173 18.8573Z" fill="white"/>
+</svg>
diff --git a/dashboard/src/Components/App.js b/dashboard/src/Components/App.js
index af4d5ad3b5..03fc5d640d 100644
--- 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
index 0835de4ca7..3cd08b77b4 100644
--- 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
index aa9a836003..d30cbd47e7 100644
--- 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
index 3058085f37..0698ece17c 100755
--- 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 ""