balmet.com

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

NeedsRegistrationModal.js (2838B)

      1 import { __ } from '@wordpress/i18n'
      2 import {
      3     Modal, Button, ButtonGroup,
      4 } from '@wordpress/components'
      5 import {
      6     render, useEffect, useRef,
      7 } from '@wordpress/element'
      8 import { useUserStore } from '../state/User'
      9 import { useState } from '@wordpress/element'
     10 import { User as UserApi } from '../api/User'
     11 
     12 export default function NeedsRegistrationModal({ finished }) {
     13     const [email, setEmail] = useState('')
     14     const submitRef = useRef()
     15 
     16     const registerAndContinue = async (event) => {
     17         event.preventDefault()
     18         await UserApi.registerMailingList(email)
     19         useUserStore.setState({
     20             registration: { email },
     21         })
     22         finished()
     23     }
     24 
     25     useEffect(() => {
     26         UserApi.getMeta('user_email')
     27             .then((value) => setEmail(value ?? ''))
     28         submitRef.current.focus()
     29     }, [])
     30 
     31     return <Modal
     32         className="extendify-sdk"
     33         title={__('One last step...', 'extendify-sdk')}
     34         isDismissible={false}>
     35         <p className="m-0 mb-4 max-w-md">
     36             {__('Register now to receive updates and special offers from Extendify', 'extendify-sdk')}
     37         </p>
     38         <form onSubmit={registerAndContinue} className="flex space-x-4 mb-8">
     39             <div className="relative w-full max-w-xs">
     40                 <input
     41                     id="extendify-email-register"
     42                     value={email}
     43                     required
     44                     onChange={(event) => setEmail(event.target.value)}
     45                     type="text"
     46                     className="extendify-special-input button-focus text-sm h-8 min-h-0 border border-gray-900 special-input placeholder-transparent rounded-none w-full px-2"
     47                     placeholder={__('Email', 'extendify-sdk')} />
     48                 <label htmlFor="extendify-email-register" className="-top-3 bg-white absolute left-1 px-1 transition-all">{__('Email', 'extendify-sdk')}</label>
     49             </div>
     50             <input type="submit" className="hidden" />
     51         </form>
     52 
     53         <ButtonGroup>
     54             <Button ref={submitRef} isPrimary onClick={registerAndContinue}>
     55                 {__('Submit and import', 'extendify-sdk')}
     56             </Button>
     57             <Button isTertiary onClick={finished} style={{
     58                 boxShadow: 'none', margin: '0 4px',
     59             }}>
     60                 {__('Skip and import', 'extendify-sdk')}
     61             </Button>
     62         </ButtonGroup>
     63     </Modal>
     64 }
     65 
     66 export function check() {
     67     return {
     68         id: 'NeedsRegistrationModal',
     69         pass: (useUserStore.getState().registration?.email || useUserStore.getState().apiKey),
     70         allow() {},
     71         deny() {
     72             return new Promise((finished) => {
     73                 render(<NeedsRegistrationModal finished={finished}/>, document.getElementById('extendify-root'))
     74             })
     75         },
     76     }
     77 }