Make add available for free users, but prevent adding geospatial and custom layers

src/editor/components/Main.js

@@ -208,11 +208,9 @@ export default class Main extends Component {
   }
 
   render() {
-    const { currentUser } = this.props;
     const scene = this.state.sceneEl;
     const isEditor = !!this.state.inspectorEnabled;
     const sceneData = AFRAME.scenes[0].getAttribute('metadata', 'sceneTitle');
-    const isProUser = currentUser && currentUser.isPro;
 
     return (
       <div>
@@ -299,7 +297,7 @@ export default class Main extends Component {
             <Compass32Icon />
           </Button>
         )}
-        {isProUser && this.state.inspectorEnabled && (
+        {this.state.inspectorEnabled && (
           <div id="layerWithCategory">
             <AddLayerButton onClick={this.toggleAddLayerPanel} />
           </div>

src/editor/components/MainWrapper.js

@@ -1,9 +1,7 @@
-import { useAuthContext } from '../contexts/index.js';
 import Main from './Main';
 
 const MainWrapper = (props) => {
-  const { currentUser } = useAuthContext();
-  return <Main {...props} currentUser={currentUser} />;
+  return <Main {...props} />;
 };
 
 export default MainWrapper;

src/editor/components/components/AddLayerPanel/AddLayerPanel.component.jsx

@@ -1,10 +1,14 @@
 import { useState, useEffect } from 'react';
+import { useAuthContext } from '../../../contexts/index.js';
+
 import styles from './AddLayerPanel.module.scss';
 import classNames from 'classnames';
 import { Button } from '../Button';
 import { Chevron24Down, Load24Icon, Plus20Circle } from '../../../icons';
 import { Dropdown } from '../Dropdown';
 import CardPlaceholder from '../../../../../ui_assets/card-placeholder.svg';
+import LockedCard from '../../../../../ui_assets/locked-card.svg';
+
 import { LayersOptions } from './LayersOptions.js';
 
 import {
@@ -21,6 +25,8 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   // set the first Layers option when opening the panel
   const [selectedOption, setSelectedOption] = useState(LayersOptions[0].value);
   const [groupedMixins, setGroupedMixins] = useState([]);
+  const { currentUser } = useAuthContext();
+  const isProUser = currentUser && currentUser.isPro;
 
   useEffect(() => {
     // call getGroupedMixinOptions once time for getting mixinGroups
@@ -69,6 +75,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
       name: 'Mapbox',
       img: '',
       icon: '',
+      requiresPro: true,
       description:
         'Create entity with mapbox component, that accepts a long / lat and renders a plane with dimensions that (should be) at a correct scale.',
       id: 1,
@@ -78,6 +85,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
       name: 'Street from streetmixStreet',
       img: '',
       icon: '',
+      requiresPro: true,
       description:
         'Create an additional Streetmix street in your 3DStreet scene without replacing any existing streets.',
       id: 2,
@@ -87,6 +95,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
       name: 'Entity from extruded SVG',
       img: '',
       icon: '',
+      requiresPro: true,
       description:
         'Create entity with svg-extruder component, that accepts a svgString and creates a new entity with geometry extruded from the svg and applies the default mixin material grass.',
       id: 3,
@@ -96,6 +105,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
       name: '3D Tiles',
       img: '',
       icon: '',
+      requiresPro: true,
       description:
         'Adds an entity to load and display 3d tiles from Google Maps Tiles API 3D Tiles endpoint. This will break your scene and you cannot save it yet, so beware before testing.',
       id: 4,
@@ -104,6 +114,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
     {
       name: 'Create custom model',
       img: '',
+      requiresPro: true,
       icon: '',
       description:
         'Create entity with model from path for a glTF (or Glb) file hosted on any publicly accessible HTTP server.',
@@ -113,6 +124,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
     {
       name: 'Create primitive geometry',
       img: '',
+      requiresPro: true,
       icon: '',
       description:
         'Create entity with A-Frame primitive geometry. Geometry type could be changed in properties panel.',
@@ -141,7 +153,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   };
 
   let selectedCards;
-  if (selectedOption === 'Layers: Streets & Intersections') {
+  if (selectedOption === 'Pro Layers') {
     selectedCards = layersData;
   } else {
     selectedCards = getSelectedMixinCards(selectedOption);
@@ -268,8 +280,12 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
     Events.emit('entitycreated', newEntity);
   };
 
-  const cardClick = (card) => {
-    if (card.mixinId) {
+  const cardClick = (card, isProUser) => {
+    if (card.requiresPro && !isProUser) {
+      STREET.notify.errorMessage(
+        `A Pro account is required for this entity. Please contact [email protected] for pro access.`
+      );
+    } else if (card.mixinId) {
       createEntity(card.mixinId);
     } else if (card.handlerFunction) {
       card.handlerFunction();
@@ -288,7 +304,6 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
         <div className={styles.button}>
           <Plus20Circle />
           <p className={styles.buttonLabel}>Add New Entity</p>
-          <p className={styles.badge}>Pro</p>
         </div>
         <Dropdown
           placeholder="Layers: Maps & Reference"
@@ -306,17 +321,29 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
             className={styles.card}
             onMouseEnter={() => card.mixinId && cardMouseEnter(card.mixinId)}
             onMouseLeave={() => card.mixinId && cardMouseLeave(card.mixinId)}
-            onClick={() => cardClick(card)}
+            onClick={() => cardClick(card, isProUser)}
             title={card.description}
           >
-            <div
-              className={styles.img}
-              style={{
-                backgroundImage: `url(${card.img || CardPlaceholder})`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'center'
-              }}
-            />
+            {' '}
+            {card.requiresPro && !isProUser ? (
+              <div
+                className={styles.img}
+                style={{
+                  backgroundImage: `url(${LockedCard})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center'
+                }}
+              />
+            ) : (
+              <div
+                className={styles.img}
+                style={{
+                  backgroundImage: `url(${card.img || CardPlaceholder})`,
+                  backgroundSize: 'cover',
+                  backgroundPosition: 'center'
+                }}
+              />
+            )}
             <div className={styles.body}>
               {card.icon ? <img src={card.icon} /> : <Load24Icon />}
               <p className={styles.description}>{card.name}</p>

src/editor/components/components/AddLayerPanel/LayersOptions.js

@@ -1,15 +1,15 @@
 const LayersOptions = [
-  {
-    value: 'Layers: Streets & Intersections',
-    label: 'Layers: Streets & Intersections',
-    onClick: () => console.log('Layers: Streets & Intersections')
-  },
   {
     value: 'Models: Personal Vehicles',
     label: 'Models: Personal Vehicles',
     mixinGroups: ['vehicles', 'vehicles-rigged'],
     onClick: () => console.log('Models: Personal Vehicles')
   },
+  {
+    value: 'Pro Layers',
+    label: 'Pro Layers',
+    onClick: () => console.log('Layers: Streets & Intersections')
+  },
   {
     value: 'Models: Transit Vehicles',
     label: 'Models: Transit Vehicles',