balmet.com

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

ImportButton.js (3631B)

      1 import {
      2     useEffect, useState, useRef,
      3 } from '@wordpress/element'
      4 import { useTemplatesStore } from '../state/Templates'
      5 import { AuthorizationCheck, Middleware } from '../middleware'
      6 import { injectTemplateBlocks } from '../util/templateInjection'
      7 import { useWantedTemplateStore } from '../state/Importing'
      8 import { useUserStore } from '../state/User'
      9 import { useGlobalStore } from '../state/GlobalState'
     10 import { __, sprintf } from '@wordpress/i18n'
     11 import { Templates as TemplatesApi } from '../api/Templates'
     12 import { render } from '@wordpress/element'
     13 import ExtendifyLibrary from '../ExtendifyLibrary'
     14 
     15 const canImportMiddleware = Middleware(['NeedsRegistrationModal', 'hasRequiredPlugins', 'hasPluginsActivated'])
     16 export function ImportButton({ template }) {
     17     const importButtonRef = useRef(null)
     18     const activeTemplateBlocks = useTemplatesStore(state => state.activeTemplateBlocks)
     19     const canImport = useUserStore(state => state.canImport)
     20     const apiKey = useUserStore(state => state.apiKey)
     21     const setOpen = useGlobalStore(state => state.setOpen)
     22     const [importing, setImporting] = useState(false)
     23     const [middlewareChecked, setMiddlewareChecked] = useState(false)
     24     const setWanted = useWantedTemplateStore(state => state.setWanted)
     25     const importTemplates = () => {
     26         AuthorizationCheck(canImportMiddleware.stack).then(() => {
     27             // Give it a bit of time for the importing state to render
     28             setTimeout(() => {
     29                 injectTemplateBlocks(activeTemplateBlocks, template)
     30                     .then(() => setOpen(false))
     31                     .then(() => render(<ExtendifyLibrary/>, document.getElementById('extendify-root')))
     32             }, 100)
     33         })
     34     }
     35 
     36     useEffect(() => {
     37         canImportMiddleware.check(template).then(() => setMiddlewareChecked(true))
     38         return () => canImportMiddleware.reset() && setMiddlewareChecked(false)
     39     }, [template])
     40 
     41     useEffect(() => {
     42         if (!importing && importButtonRef.current) {
     43             importButtonRef.current.focus()
     44         }
     45     }, [importButtonRef, importing, middlewareChecked])
     46 
     47     const importTemplate = () => {
     48         // This was added here to make the call fire before rendering is finished.
     49         // This is because some users would drop this call otherwise.
     50         TemplatesApi.maybeImport(template)
     51         setImporting(true)
     52         setWanted(template)
     53         importTemplates()
     54     }
     55 
     56     if (!middlewareChecked || !Object.keys(activeTemplateBlocks).length) {
     57         return ''
     58     }
     59 
     60     if (!apiKey && !canImport()) {
     61         return <a
     62             ref={importButtonRef}
     63             className="button-extendify-main text-lg sm:text-2xl py-1.5 px-3 sm:py-2.5 sm:px-5"
     64             target="_blank"
     65             href={`https://extendify.com/pricing?utm_source=${window.extendifySdkData.source}&utm_medium=library&utm_campaign=sign_up&utm_content=single_page`}
     66             rel="noreferrer">
     67             {__('Sign up now', 'extendify-sdk')}
     68         </a>
     69     }
     70 
     71     if (importing) {
     72         return <button
     73             type="button"
     74             disabled
     75             className="components-button is-secondary text-lg sm:text-2xl h-auto py-1.5 px-3 sm:py-2.5 sm:px-5"
     76             onClick={() => {}}>
     77             {__('Importing...', 'extendify-sdk')}
     78         </button>
     79     }
     80 
     81     return <button
     82         ref={importButtonRef}
     83         type="button"
     84         className="components-button is-primary text-lg sm:text-2xl h-auto py-1.5 px-3 sm:py-2.5 sm:px-5"
     85         onClick={() => importTemplate()}>
     86         {sprintf(__('Add %s', 'extendify-sdk'), template.fields.type)}
     87     </button>
     88 }