Skip to content

Commit 5dee8a8

Browse files
author
cristian-ungureanu
authored
release: new version
- Remove upsell from Gutenberg tab - Improve no template screen
2 parents 95dbf4b + d0588d6 commit 5dee8a8

File tree

12 files changed

+237
-38
lines changed

12 files changed

+237
-38
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
**Contributors:** [themeisle](https://profiles.wordpress.org/themeisle)
33
**Tags:** neve, templates, patterns, blocks, starter, sites, demo, content, import
44
**Requires at least:** 4.7
5-
**Tested up to:** 5.8
5+
**Tested up to:** 5.9
66
**Requires PHP:** 5.6
77
**Stable tag:** trunk
88
**License:** GPLv3

‎assets/img/layout.jpg‎

5.63 KB
Loading

‎assets/src/Components/App.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,14 @@ import classnames from 'classnames';
33

44
import Onboarding from './Main';
55

6-
const App = ( { onboarding } ) => {
6+
const App = ( { onboarding, userStatus } ) => {
77
const wrapClasses = classnames( [
88
'content-wrap',
99
'starter-sites',
10-
{ 'is-onboarding': onboarding },
10+
{
11+
'is-onboarding': onboarding,
12+
'is-free': ! userStatus,
13+
},
1114
] );
1215
return (
1316
<div className="tiob-wrap">
@@ -25,8 +28,9 @@ const App = ( { onboarding } ) => {
2528
};
2629

2730
export default withSelect( ( select ) => {
28-
const { getOnboardingStatus } = select( 'neve-onboarding' );
31+
const { getOnboardingStatus, getUserStatus } = select( 'neve-onboarding' );
2932
return {
3033
onboarding: getOnboardingStatus(),
34+
userStatus: getUserStatus(),
3135
};
3236
} )( App );

‎assets/src/Components/CloudLibrary/Library.js‎

Lines changed: 95 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import VizSensor from 'react-visibility-sensor';
44
import { chevronLeft, chevronRight, close } from '@wordpress/icons';
55
import { useEffect, useState, Fragment } from '@wordpress/element';
66
import { withDispatch, withSelect } from '@wordpress/data';
7-
import { Spinner, Button } from '@wordpress/components';
7+
import { Spinner, Button, Icon } from '@wordpress/components';
88
import { compose } from '@wordpress/compose';
99
import { __, isRTL } from '@wordpress/i18n';
1010

@@ -14,6 +14,7 @@ import Loading from '../Loading';
1414
import Filters from './Filters';
1515
import PreviewFrame from './PreviewFrame';
1616
import ImportTemplatesModal from './ImportTemplatesModal';
17+
import Logo from '../Icon';
1718

1819
const Library = ( {
1920
isGeneral,
@@ -23,6 +24,7 @@ const Library = ( {
2324
templateModal,
2425
themeStatus,
2526
currentTab,
27+
userStatus,
2628
} ) => {
2729
const [ library, setLibrary ] = useState( {
2830
gutenberg: [],
@@ -192,13 +194,13 @@ const Library = ( {
192194

193195
const handlePreview = ( url ) => {
194196
setPreviewUrl( url );
195-
setPreview(true);
197+
setPreview( true );
196198
};
197199

198200
const handleClose = () => {
199201
setPreviewUrl( '' );
200-
setPreview(false);
201-
}
202+
setPreview( false );
203+
};
202204

203205
const handleImport = ( id ) => {
204206
if ( themeStatus ) {
@@ -216,7 +218,10 @@ const Library = ( {
216218
const previewedItem =
217219
library[ type ] &&
218220
library[ type ].find( ( item ) => previewUrl === item.link );
219-
const wrapClasses = classnames( 'cloud-items', { 'is-grid': isGrid } );
221+
const wrapClasses = classnames( 'cloud-items', {
222+
'is-grid': isGrid || ( ! userStatus && ! isGeneral ),
223+
'is-dummy': ! userStatus && ! isGeneral,
224+
} );
220225

221226
const handlePrevious = () => {
222227
let newIndex = currentPreviewIndex - 1;
@@ -282,6 +287,56 @@ const Library = ( {
282287
} );
283288
};
284289

290+
if ( ! userStatus && ! isGeneral ) {
291+
return (
292+
<div className={ wrapClasses }>
293+
<div className="table">
294+
{ [ ...Array( 12 ) ].map( ( i, n ) => (
295+
<ListItem
296+
sortingOrder={ getOrder() }
297+
onPreview={ handlePreview }
298+
userTemplate={ false }
299+
key={ n }
300+
item={ {} }
301+
grid={ true }
302+
/>
303+
) ) }
304+
</div>
305+
306+
<div className="upsell-modal-overlay">
307+
<div className="upsell-modal">
308+
<div className="upsell-modal-content">
309+
<div className="info">
310+
<h3>
311+
{ __( 'Templates Cloud is a PRO Feature' ) }
312+
</h3>
313+
314+
<p>
315+
{ __(
316+
'Unlock the Templates Cloud features and save your pages or posts in the cloud.'
317+
) }
318+
</p>
319+
320+
<Button
321+
variant="primary"
322+
isPrimary
323+
href="https://themeisle.com/themes/neve/upgrade/?utm_medium=nevedashboard&utm_source=neve&utm_campaign=templatecloud&utm_content=upgradetoprobtn and
324+
https://themeisle.com/themes/neve/neve-upgrade-new/?utm_medium=nevedashboard&utm_source=neve&utm_campaign=templatecloud&utm_content=changeplanbtn"
325+
target="_blank"
326+
>
327+
{ __( 'Upgrade to PRO' ) }
328+
</Button>
329+
</div>
330+
<div className="icon">
331+
<Icon icon={ Logo } />
332+
</div>
333+
</div>
334+
</div>
335+
</div>
336+
</div>
337+
);
338+
}
339+
285340
return (
286341
<div className={ wrapClasses }>
287342
<>
@@ -377,7 +432,28 @@ const Library = ( {
377432
) }
378433
</>
379434
) : (
380-
<Fragment>{ __( 'No templates found.' ) }</Fragment>
435+
<div className="empty-information">
436+
<img
437+
src={
438+
window.tiobDash.assets + '/img/layout.jpg'
439+
}
440+
alt={ __( 'No Templates Found' ) }
441+
/>
442+
<h3>{ __( 'There are no templates yet' ) }</h3>
443+
<p>
444+
{ __(
445+
'You can add a page or post to the cloud by accessing it with the WordPress or Elementor/Beaver editor. Learn more about this in our docs.'
446+
) }
447+
</p>
448+
<Button
449+
variant="secondary"
450+
isSecondary
451+
href="https://docs.themeisle.com/article/1354-neve-template-cloud-library?utm_medium=nevedashboard&utm_source=templatecloud&utm_campaign=neve&utm_content=learnmore"
452+
target="_blank"
453+
>
454+
{ __( 'Learn more' ) }
455+
</Button>
456+
</div>
381457
) ) }
382458
{ previewUrl && (
383459
<PreviewFrame
@@ -426,21 +502,23 @@ const Library = ( {
426502
toImport &&
427503
! isLoading &&
428504
toImport.length > 0 && (
429-
<ImportTemplatesModal
430-
generalTemplates={ true }
431-
isUserTemplate={ ! isGeneral }
432-
templatesData={ toImport }
433-
/>
434-
) }
505+
<ImportTemplatesModal
506+
generalTemplates={ true }
507+
isUserTemplate={ ! isGeneral }
508+
templatesData={ toImport }
509+
/>
510+
) }
435511
</div>
436512
);
437513
};
438514

439515
export default compose(
440516
withDispatch( ( dispatch ) => {
441-
const { setInstallModalStatus, setTemplateModal, setPreviewStatus } = dispatch(
442-
'neve-onboarding'
443-
);
517+
const {
518+
setInstallModalStatus,
519+
setTemplateModal,
520+
setPreviewStatus,
521+
} = dispatch( 'neve-onboarding' );
444522

445523
return {
446524
setPreview: ( status ) => setPreviewStatus( status ),
@@ -454,13 +532,15 @@ export default compose(
454532
getThemeAction,
455533
getCurrentEditor,
456534
getCurrentTab,
535+
getUserStatus,
457536
} = select( 'neve-onboarding' );
458537

459538
return {
460539
templateModal: getTemplateModal(),
461540
themeStatus: getThemeAction().action || false,
462541
editor: getCurrentEditor(),
463542
currentTab: getCurrentTab(),
543+
userStatus: getUserStatus(),
464544
};
465545
} )
466546
)( Library );

‎assets/src/Components/Header.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const TabNavigation = ( { setCurrentTab, currentTab, isFetching } ) => {
1616
const buttons = {
1717
starterSites: __( 'Starter Sites', 'templates-patterns-collection' ),
1818
pageTemplates: __( 'Page Templates', 'templates-patterns-collection' ),
19+
library: __( 'My Library', 'templates-patterns-collection' ),
1920
};
2021

2122
const [ isSyncing, setSyncing ] = useState( false );
@@ -31,14 +32,6 @@ const TabNavigation = ( { setCurrentTab, currentTab, isFetching } ) => {
3132
}, 100 );
3233
};
3334

34-
if (
35-
tiobDash.license &&
36-
tiobDash.license.tier &&
37-
tiobDash.license.tier === 3
38-
) {
39-
buttons.library = __( 'My Library', 'templates-patterns-collection' );
40-
}
41-
4235
const onHashChanged = () => {
4336
const hash = getTabHash(buttons);
4437
if (null === hash) {

‎assets/src/Components/Loading.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Loading = ( { isGrid } ) => {
99
<div className="card-footer">
1010
<p className="title loading" style={ {
1111
height: 14,
12-
'background-color': '#f3f3f3',
12+
backgroundColor: '#f3f3f3',
1313
} } />
1414
</div>
1515
</div>

‎assets/src/Components/StarterSites/Filters.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const Filters = ( {
120120
onlyProSites={ onlyProBuilders }
121121
count={ counted.builders }
122122
/>
123-
{ ! tiobDash.isValidLicense && (
123+
{ ! tiobDash.isValidLicense && editor !== 'gutenberg' && (
124124
<Notification
125125
data={ tiobDash.upsellNotifications.upsell_1 }
126126
editor={ editor }

‎assets/src/scss/_general.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,7 @@ svg.is-loading, button.is-loading svg {
204204
display: flex;
205205
justify-content: flex-end;
206206
align-items: flex-end;
207+
z-index: 1;
207208

208209
button.close-onboarding {
209210
color: #676767;
@@ -220,6 +221,26 @@ svg.is-loading, button.is-loading svg {
220221
}
221222
}
222223

224+
.is-free {
225+
.header-nav {
226+
.components-button {
227+
&[href="#library"] {
228+
&::after {
229+
content: "PRO";
230+
border-radius: 2px;
231+
background: #6EB77A;
232+
color: #FFF;
233+
padding: 2px 5px;
234+
font-size: 10px;
235+
top: -5px;
236+
position: relative;
237+
left: 5px;
238+
}
239+
}
240+
}
241+
}
242+
}
243+
223244
.ob {
224245
width: 100%;
225246
display: flex;
@@ -233,6 +254,7 @@ svg.is-loading, button.is-loading svg {
233254
width: 100%;
234255
display: flex;
235256
justify-content: center;
257+
z-index: 1;
236258

237259
.header-container {
238260
display: flex;

‎assets/src/scss/_library.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,81 @@
224224
grid-column-gap: 20px;
225225
grid-row-gap: 20px;
226226
}
227+
228+
.empty-information {
229+
max-width: 500px;
230+
margin: 0 auto;
231+
text-align: center;
232+
233+
img {
234+
max-width: 150px;
235+
}
236+
237+
h3,
238+
p {
239+
color: #616161;
240+
}
241+
}
242+
243+
&.is-dummy {
244+
margin-top: 25px;
245+
margin-bottom: 25px;
246+
}
247+
248+
.upsell-modal-overlay {
249+
top: 0;
250+
right: auto;
251+
bottom: auto;
252+
left: 0;
253+
width: 100%;
254+
height: 100%;
255+
position: absolute;
256+
background: rgba(0, 0, 0, 0.35);
257+
258+
.upsell-modal {
259+
top: 40%;
260+
right: auto;
261+
bottom: auto;
262+
left: 50%;
263+
min-width: 360px;
264+
max-width: calc(100% - 16px - 16px);
265+
max-height: 90%;
266+
transform: translate(-50%, -50%);
267+
position: absolute;
268+
269+
.upsell-modal-content {
270+
display: flex;
271+
}
272+
273+
.info {
274+
background: #ffffff;
275+
width: 60%;
276+
padding: 100px 25px;
277+
278+
h3 {
279+
font-size: 24px;
280+
line-height: 28.64px;
281+
}
282+
283+
p {
284+
font-size: 15px;
285+
}
286+
}
287+
288+
.icon {
289+
display: flex;
290+
align-items: center;
291+
justify-content: center;
292+
background: #0566d5;
293+
width: 40%;
294+
295+
.ob-logo {
296+
width: 100px;
297+
margin: 0;
298+
}
299+
}
300+
}
301+
}
227302
}
228303

229304
.table-grid {

0 commit comments

Comments
 (0)