Merge pull request #336 from beaverbuilder/subscription-checks

Subscription checks

package.json

@@ -22,9 +22,9 @@
   "dependencies": {
     "@beaverbuilder/app-core": "^0.2.2",
     "@beaverbuilder/box": "0.0.2",
-    "@beaverbuilder/cloud": "^0.4.8",
-    "@beaverbuilder/cloud-ui": "^0.7.3",
-    "@beaverbuilder/fluid": "^0.7.4",
+    "@beaverbuilder/cloud": "^0.4.9",
+    "@beaverbuilder/cloud-ui": "^0.7.4",
+    "@beaverbuilder/fluid": "^0.7.5",
     "@beaverbuilder/fluid-docs": "0.0.3",
     "@beaverbuilder/forms": "^0.3.7",
     "@beaverbuilder/icons": "0.0.2",

packages/@beaverbuilder/fluid/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@beaverbuilder/fluid",
-    "version": "0.7.4",
+    "version": "0.7.5",
     "description": "Common UI environment for Beaver Builder and Assistant projects.",
     "author": "The Beaver Builder Team",
     "license": "GPL-2.0+",

packages/@beaverbuilder/fluid/src/dialogs/dialog/index.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import classname from 'classnames'
+import Button from '../../button'
+import './style.scss'
+
+const Dialog = ( {
+	className,
+	title = '',
+	message = '',
+	buttons = [],
+	isShowing = false,
+	setIsShowing = () => {}
+} ) => {
+
+	if ( ! isShowing ) {
+		return null
+	}
+
+	const getRoot = () => {
+		const root = document.getElementById( 'fluid-dialog-root' )
+		return root ? root : document.body
+	}
+
+	return ReactDOM.createPortal( (
+		<div className={ classname( 'fl-asst-dialog', className ) }>
+			<div className='fl-asst-dialog-window'>
+				{ title &&
+					<div className='fl-asst-dialog-title'>
+						{ title }
+					</div>
+				}
+				<div className='fl-asst-dialog-message'>
+					{ message }
+				</div>
+				<div className='fl-asst-dialog-buttons'>
+					{ buttons.map( ( { label, onClick, ...rest }, i ) =>
+						<Button
+							key={ i }
+							onClick={ () => {
+								if ( onClick ) {
+									onClick( {
+										closeDialog: () => setIsShowing( false )
+									} )
+								}
+							} }
+							{ ...rest }
+						>
+							{ label }
+						</Button>
+					) }
+				</div>
+			</div>
+		</div>
+	), getRoot() )
+}
+
+export default Dialog

packages/@beaverbuilder/fluid/src/dialogs/dialog/style.scss

@@ -0,0 +1,43 @@
+.fl-asst-dialog {
+	background-color: rgba(0,0,0,0.2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: var(--fluid-med-space);
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1000;
+}
+
+.fl-asst-dialog-window {
+	background: var(--fluid-background);
+	border-radius: var(--fluid-radius);
+	box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
+	padding: var(--fluid-lg-space);
+	max-width: 460px;
+	width: 100%;
+}
+
+.fl-asst-dialog-title {
+	font-size: 20px;
+	margin-bottom: var(--fluid-med-space);
+}
+
+.fl-asst-dialog-message {
+	font-size: 14px;
+	line-height: 1.6;
+	margin-bottom: var(--fluid-lg-space);
+}
+
+.fl-asst-dialog-buttons {
+	display: flex;
+	justify-content: flex-end;
+
+	button {
+		margin-left: var(--fluid-sm-space);
+		min-width: 70px !important;
+	}
+}

packages/@beaverbuilder/fluid/src/dialogs/hooks/index.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import Dialog from '../dialog'
+
+export const useDialog = ( options ) => {
+	const [ isShowing, setIsShowing ] = useState( false )
+
+	const showDialog = () => {
+		setIsShowing( true )
+	}
+
+	const DialogComponent = () => {
+		return (
+			<Dialog
+				isShowing={ isShowing }
+				setIsShowing={ setIsShowing }
+				{ ...options }
+			/>
+		)
+	}
+
+	return [ showDialog, DialogComponent ]
+}
+
+export const useAlert = ( options ) => {
+	options.buttons = [
+		{
+			label: 'Ok',
+			isSelected: true,
+			onClick: ( { closeDialog } ) => closeDialog(),
+		}
+	]
+
+	return useDialog( options )
+}
+
+export const useConfirm = ( {
+	onCancel = () => {},
+	onConfirm = () => {},
+	...options
+} ) => {
+	options.buttons = [
+		{
+			label: 'Cancel',
+			onClick: ( { closeDialog } ) => {
+				closeDialog()
+				onCancel()
+			},
+		},
+		{
+			label: 'Ok',
+			isSelected: true,
+			onClick: ( { closeDialog } ) => {
+				closeDialog()
+				onConfirm()
+			},
+		}
+	]
+
+	return useDialog( options )
+}

packages/@beaverbuilder/fluid/src/dialogs/index.js

@@ -0,0 +1,10 @@
+import Dialog from './dialog'
+import DialogRoot from './root'
+import { useDialog, useAlert, useConfirm } from './hooks'
+
+Dialog.DialogRoot = DialogRoot
+Dialog.useDialog = useDialog
+Dialog.useAlert = useAlert
+Dialog.useConfirm = useConfirm
+
+export default Dialog

packages/@beaverbuilder/fluid/src/dialogs/root/index.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const DialogRoot = () => {
+	return (
+		<div id='fluid-dialog-root' />
+	)
+}
+
+export default DialogRoot

packages/@beaverbuilder/fluid/src/index.js

@@ -9,6 +9,7 @@ import Page from './page'
 import Button from './button'
 import Menu from './menu'
 import Collection from './collection'
+import Dialog from './dialogs'
 
 export {
 	Text,
@@ -17,4 +18,5 @@ export {
 	Menu, // Planning to have menu subsumed by button
 	Layout,
 	Collection,
+	Dialog,
 }

src/apps/libraries/ui/libraries/list/index.js

@@ -41,7 +41,7 @@ export default ( {
 
 			{ isAddingNew &&
 				<Layout.Toolbar>
-					<Libraries.LibraryInlineCreate teamId={ teamId } />
+					<Libraries.LibraryInlineCreate team={ team } />
 					<Button
 						onClick={ () => setIsAddingNew( false ) }
 						style={ { marginLeft: 5 } }

src/render/app/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import classname from 'classnames'
 import { useLocation } from 'react-router-dom'
 import { App } from '@beaverbuilder/app-core'
-import { Page, Env } from 'assistant/ui'
+import { Page, Env, Dialog } from 'assistant/ui'
 import { useSystemState } from 'assistant/data'
 import Sidebar from './side-bar'
 import './style.scss'
@@ -39,6 +39,7 @@ const AppMain = () => {
 					/>
 				</div>
 			) }
+			<Dialog.DialogRoot />
 		</div>
 	)
 }

src/system/data/system/index.js

@@ -33,6 +33,13 @@ registerStore( KEY, {
 	selectors,
 } )
 
+if ( cloud.auth.isConnected() ) {
+	cloud.user.get().then( response => {
+		const { setCloudUser } = getDispatch( KEY )
+		setCloudUser( response.data )
+	} )
+}
+
 export const getSystemStore = () => getStore( KEY )
 
 export const useSystemState = shouldUpdate => useStore( KEY, shouldUpdate )

src/system/ui/index.js

@@ -1,6 +1,6 @@
 // Public API
 import './style.scss'
-import { Text, Collection, Menu } from '@beaverbuilder/fluid'
+import { Text, Collection, Menu, Dialog } from '@beaverbuilder/fluid'
 import App from './app'
 import Button from './button'
 import Icon from './icon'
@@ -37,4 +37,5 @@ export {
 	Text,
 	Collection,
 	Menu,
+	Dialog,
 }