templates-patterns-collection
/
assets
/
src
/
Components
/
CloudLibrary
/
DemoSiteTemplatesImport.js
DemoSiteTemplatesImport.js
3 years ago
FeedbackNotice.js
1 year ago
Filters.js
1 year ago
ImportTemplatesModal.js
1 year ago
Library.js
1 year ago
ListItem.js
1 year ago
PreviewFrame.js
1 year ago
common.js
2 years ago
DemoSiteTemplatesImport.js
288 lines
| 1 | /* global tiobDash */ |
| 2 | import { close, chevronLeft, chevronRight } from '@wordpress/icons'; |
| 3 | import { Spinner, Button, Icon } from '@wordpress/components'; |
| 4 | import { withDispatch, withSelect } from '@wordpress/data'; |
| 5 | import { useEffect, useState } from '@wordpress/element'; |
| 6 | import { __, isRTL } from '@wordpress/i18n'; |
| 7 | import { compose } from '@wordpress/compose'; |
| 8 | |
| 9 | import { fetchLibrary } from './common'; |
| 10 | import ListItem from './ListItem'; |
| 11 | import PreviewFrame from './PreviewFrame'; |
| 12 | import ImportTemplatesModal from './ImportTemplatesModal'; |
| 13 | |
| 14 | const DemoSiteTemplatesImport = ( { |
| 15 | slug, |
| 16 | cancel, |
| 17 | setModal, |
| 18 | site, |
| 19 | editor, |
| 20 | setTemplateModal, |
| 21 | templateModal, |
| 22 | } ) => { |
| 23 | const [ templates, setTemplates ] = useState( [] ); |
| 24 | const [ loading, setLoading ] = useState( true ); |
| 25 | const [ previewUrl, setPreviewUrl ] = useState( '' ); |
| 26 | const [ toImport, setToImport ] = useState( [] ); |
| 27 | |
| 28 | const { title, upsell, utmOutboundLink } = site; |
| 29 | |
| 30 | useEffect( () => { |
| 31 | loadTemplates(); |
| 32 | }, [] ); |
| 33 | |
| 34 | const loadTemplates = () => { |
| 35 | const params = { |
| 36 | per_page: 100, |
| 37 | template_site_slug: slug, |
| 38 | premade: true, |
| 39 | type: editor, |
| 40 | }; |
| 41 | fetchLibrary( true, params ).then( ( r ) => { |
| 42 | setTemplates( r.templates || [] ); |
| 43 | setLoading( false ); |
| 44 | } ); |
| 45 | }; |
| 46 | |
| 47 | const handlePreview = ( url ) => { |
| 48 | setPreviewUrl( url ); |
| 49 | }; |
| 50 | |
| 51 | const doImport = ( templatesToImport ) => { |
| 52 | setToImport( templatesToImport ); |
| 53 | setTemplateModal( true ); |
| 54 | }; |
| 55 | |
| 56 | const handleBulk = ( e ) => { |
| 57 | e.preventDefault(); |
| 58 | |
| 59 | doImport( templates ); |
| 60 | }; |
| 61 | |
| 62 | const handleSingleImport = ( item ) => { |
| 63 | doImport( [ item ] ); |
| 64 | }; |
| 65 | |
| 66 | const launchImport = ( e ) => { |
| 67 | e.preventDefault(); |
| 68 | setModal( true ); |
| 69 | }; |
| 70 | |
| 71 | const currentPreviewIndex = templates.findIndex( |
| 72 | ( item ) => item.link === previewUrl |
| 73 | ); |
| 74 | |
| 75 | const currentPreviewTemplate = templates.find( |
| 76 | ( item ) => item.link === previewUrl |
| 77 | ); |
| 78 | |
| 79 | const handlePrevious = () => { |
| 80 | let newIndex = currentPreviewIndex - 1; |
| 81 | if ( currentPreviewIndex === 0 ) { |
| 82 | newIndex = templates.length - 1; |
| 83 | } |
| 84 | setPreviewUrl( templates[ newIndex ].link ); |
| 85 | }; |
| 86 | |
| 87 | const handleNext = () => { |
| 88 | let newIndex = currentPreviewIndex + 1; |
| 89 | if ( currentPreviewIndex === templates.length - 1 ) { |
| 90 | newIndex = 0; |
| 91 | } |
| 92 | setPreviewUrl( templates[ newIndex ].link ); |
| 93 | }; |
| 94 | |
| 95 | const Templates = () => { |
| 96 | if ( loading ) { |
| 97 | return <Spinner />; |
| 98 | } |
| 99 | if ( templates.length < 1 ) { |
| 100 | return __( 'No templates for this starter site.', 'templates-patterns-collection' ); |
| 101 | } |
| 102 | |
| 103 | return ( |
| 104 | <div className="cloud-items is-grid"> |
| 105 | <div className="table"> |
| 106 | { templates.map( ( item ) => ( |
| 107 | <ListItem |
| 108 | upsell={ upsell } |
| 109 | onPreview={ handlePreview } |
| 110 | userTemplate={ false } |
| 111 | key={ item.template_id } |
| 112 | item={ item } |
| 113 | loadTemplates={ loadTemplates } |
| 114 | onImport={ () => handleSingleImport( item ) } |
| 115 | grid={ true } |
| 116 | /> |
| 117 | ) ) } |
| 118 | </div> |
| 119 | </div> |
| 120 | ); |
| 121 | }; |
| 122 | |
| 123 | return ( |
| 124 | <div className="single-templates-wrapper"> |
| 125 | <div className="top"> |
| 126 | <div className="breadcrumb"> |
| 127 | <Button isTertiary onClick={ cancel }> |
| 128 | <Icon icon={chevronLeft} /> |
| 129 | { __( 'Back to Starter Sites', 'templates-patterns-collection' ) } |
| 130 | </Button> |
| 131 | </div> |
| 132 | <div className="header"> |
| 133 | <div className="text"> |
| 134 | <h1> |
| 135 | { title || '' } |
| 136 | { upsell && ( |
| 137 | <span className="pro-badge"> |
| 138 | <Icon icon="lock" /> |
| 139 | <span> |
| 140 | { __( |
| 141 | 'Premium', |
| 142 | 'templates-patterns-collection' |
| 143 | ) } |
| 144 | </span> |
| 145 | </span> |
| 146 | ) } |
| 147 | </h1> |
| 148 | <p className="description"> |
| 149 | { __( |
| 150 | 'You can import individual pages or bulk-import all of them.', 'templates-patterns-collection' |
| 151 | ) } |
| 152 | </p> |
| 153 | </div> |
| 154 | |
| 155 | <div className="actions"> |
| 156 | { ! upsell && ( |
| 157 | <> |
| 158 | <Button isSecondary onClick={ launchImport }> |
| 159 | { __( 'Import Starter Site', 'templates-patterns-collection' ) } |
| 160 | </Button> |
| 161 | <Button |
| 162 | isPrimary |
| 163 | disabled={ templates.length < 1 } |
| 164 | onClick={ handleBulk } |
| 165 | > |
| 166 | { __( 'Import All Pages', 'templates-patterns-collection' ) } |
| 167 | </Button> |
| 168 | </> |
| 169 | ) } |
| 170 | { upsell && ( |
| 171 | <Button |
| 172 | href={ utmOutboundLink || tiobDash.upgradeURL } |
| 173 | isSecondary |
| 174 | > |
| 175 | { __( 'Upgrade', 'templates-patterns-collection' ) } |
| 176 | </Button> |
| 177 | ) } |
| 178 | </div> |
| 179 | </div> |
| 180 | </div> |
| 181 | <Templates /> |
| 182 | { previewUrl && ( |
| 183 | <PreviewFrame |
| 184 | heading={ currentPreviewTemplate.template_name || null } |
| 185 | previewUrl={ previewUrl } |
| 186 | leftButtons={ |
| 187 | <> |
| 188 | <Button |
| 189 | icon={ close } |
| 190 | onClick={ () => setPreviewUrl( '' ) } |
| 191 | label={ __( |
| 192 | 'Close', |
| 193 | 'templates-patterns-collection' |
| 194 | ) } |
| 195 | /> |
| 196 | { templates.length > 1 && ( |
| 197 | <> |
| 198 | <Button |
| 199 | icon={ |
| 200 | isRTL() ? chevronRight : chevronLeft |
| 201 | } |
| 202 | onClick={ handlePrevious } |
| 203 | /> |
| 204 | <Button |
| 205 | icon={ |
| 206 | isRTL() ? chevronLeft : chevronRight |
| 207 | } |
| 208 | onClick={ handleNext } |
| 209 | /> |
| 210 | </> |
| 211 | ) } |
| 212 | </> |
| 213 | } |
| 214 | rightButtons={ |
| 215 | <> |
| 216 | { ! upsell && ( |
| 217 | <> |
| 218 | <Button |
| 219 | isSecondary |
| 220 | onClick={ launchImport } |
| 221 | > |
| 222 | { __( 'Import Starter Site', 'templates-patterns-collection' ) } |
| 223 | </Button> |
| 224 | <Button |
| 225 | isPrimary |
| 226 | disabled={ templates.length < 1 } |
| 227 | onClick={ () => |
| 228 | handleSingleImport( |
| 229 | currentPreviewTemplate |
| 230 | ) |
| 231 | } |
| 232 | > |
| 233 | { __( 'Import Page', 'templates-patterns-collection' ) } |
| 234 | </Button> |
| 235 | </> |
| 236 | ) } |
| 237 | { upsell && ( |
| 238 | <Button |
| 239 | href={ |
| 240 | utmOutboundLink || tiobDash.upgradeURL |
| 241 | } |
| 242 | isSecondary |
| 243 | > |
| 244 | { __( 'Upgrade', 'templates-patterns-collection' ) } |
| 245 | </Button> |
| 246 | ) } |
| 247 | </> |
| 248 | } |
| 249 | /> |
| 250 | ) } |
| 251 | { templateModal && toImport && ! loading && toImport.length > 0 && ( |
| 252 | <ImportTemplatesModal templatesData={ toImport } /> |
| 253 | ) } |
| 254 | </div> |
| 255 | ); |
| 256 | }; |
| 257 | |
| 258 | export default compose( |
| 259 | withDispatch( ( dispatch ) => { |
| 260 | const { |
| 261 | setSingleTemplateImport, |
| 262 | setImportModalStatus, |
| 263 | setTemplateModal, |
| 264 | } = dispatch( 'neve-onboarding' ); |
| 265 | |
| 266 | const cancel = () => { |
| 267 | setSingleTemplateImport( null ); |
| 268 | }; |
| 269 | |
| 270 | return { |
| 271 | cancel, |
| 272 | setModal: ( status ) => setImportModalStatus( status ), |
| 273 | setTemplateModal, |
| 274 | }; |
| 275 | } ), |
| 276 | withSelect( ( select ) => { |
| 277 | const { getTemplateModal, getCurrentSite, getCurrentEditor } = select( |
| 278 | 'neve-onboarding' |
| 279 | ); |
| 280 | |
| 281 | return { |
| 282 | templateModal: getTemplateModal(), |
| 283 | site: getCurrentSite(), |
| 284 | editor: getCurrentEditor(), |
| 285 | }; |
| 286 | } ) |
| 287 | )( DemoSiteTemplatesImport ); |
| 288 |