updates (#7931)

frontend/src/HomePage/BlankPage.jsx

@@ -16,6 +16,7 @@ export const BlankPage = function BlankPage({
   showTemplateLibraryModal,
   hideTemplateLibraryModal,
   viewTemplateLibraryModal,
+  canCreateApp,
 }) {
   const { t } = useTranslation();
   const [deploying, setDeploying] = useState(false);
@@ -27,6 +28,8 @@ export const BlankPage = function BlankPage({
     { id: 'whatsapp-and-sms-crm', name: 'Whatsapp and sms crm' },
   ];
 
+  const appCreationDisabled = !canCreateApp();
+
   return (
     <div>
       <div className="page-wrapper blank-page-wrapper">
@@ -53,6 +56,7 @@ export const BlankPage = function BlankPage({
                       data-cy="button-new-app-from-scratch"
                       className="col"
                       fill={'#FDFDFE'}
+                      disabled={appCreationDisabled}
                     >
                       Create new application
                     </ButtonSolid>
@@ -63,12 +67,14 @@ export const BlankPage = function BlankPage({
                         isLoading={isImportingApp}
                         data-cy="button-import-an-app"
                         className="col"
-                        variant="tertiary"
+                        disabled={appCreationDisabled}
+                        variant={!appCreationDisabled ? 'tertiary' : 'primary'}
                       >
                         <label
                           className="cursor-pointer"
                           style={{ visibility: isImportingApp ? 'hidden' : 'visible' }}
                           data-cy="import-an-application"
+                          disabled={appCreationDisabled}
                         >
                           &nbsp;{t('blankPage.importApplication', 'Import an app')}
                           <input
@@ -76,6 +82,7 @@ export const BlankPage = function BlankPage({
                             ref={fileInput}
                             style={{ display: 'none' }}
                             data-cy="import-option-input"
+                            disabled={appCreationDisabled}
                           />
                         </label>
                       </ButtonSolid>
@@ -86,41 +93,45 @@ export const BlankPage = function BlankPage({
                   <EmptyIllustration />
                 </div>
               </div>
-              <div className="hr-text" data-cy="action-option">
+              {!appCreationDisabled && (
-                Or choose from templates
+                <div>
-              </div>
+                  <div className="hr-text" data-cy="action-option">
-              <div className="row" data-cy="app-template-row">
+                    Or choose from templates
-                {staticTemplates.map(({ id, name }) => {
+                  </div>
-                  return (
+                  <div className="row" data-cy="app-template-row">
-                    <div
+                    {staticTemplates.map(({ id, name }) => {
-                      key={id}
+                      return (
-                      className="col-4 app-template-card-wrapper"
-                      onClick={() => {
-                        openCreateAppFromTemplateModal({ id, name });
-                      }}
-                    >
-                      <div
-                        className="template-card cursor-pointer"
-                        data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-app-template-card`}
-                      >
                         <div
-                          className="img-responsive img-responsive-21x9 card-img-top template-card-img"
+                          key={id}
-                          style={{ backgroundImage: `url(assets/images/templates/${id}.png)` }}
+                          className="col-4 app-template-card-wrapper"
-                          data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-app-template-image`}
+                          onClick={() => {
-                        />
+                            openCreateAppFromTemplateModal({ id, name });
-                        <div className="card-body">
+                          }}
-                          <h3
+                        >
-                            className="tj-text-md font-weight-500"
+                          <div
-                            data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-app-template-title`}
+                            className="template-card cursor-pointer"
+                            data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-app-template-card`}
                           >
-                            {name}
+                            <div
-                          </h3>
+                              className="img-responsive img-responsive-21x9 card-img-top template-card-img"
+                              style={{ backgroundImage: `url(assets/images/templates/${id}.png)` }}
+                              data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-app-template-image`}
+                            />
+                            <div className="card-body">
+                              <h3
+                                className="tj-text-md font-weight-500"
+                                data-cy={`${name.toLowerCase().replace(/\s+/g, '-')}-app-template-title`}
+                              >
+                                {name}
+                              </h3>
+                            </div>
+                          </div>
                         </div>
-                      </div>
+                      );
-                    </div>
+                    })}
-                  );
+                  </div>
-                })}
+                </div>
-              </div>
+              )}
               <div className="m-auto text-center mt-4">
                 <button
                   className="see-all-temlplates-link tj-text-sm font-weight-600 bg-transparent border-0"
@@ -139,6 +150,7 @@ export const BlankPage = function BlankPage({
         onHide={hideTemplateLibraryModal}
         onCloseButtonClick={hideTemplateLibraryModal}
         darkMode={darkMode}
+        appCreationDisabled={appCreationDisabled}
       />
     </div>
   );

frontend/src/HomePage/HomePage.jsx

@@ -823,6 +823,7 @@ class HomePageComponent extends React.Component {
                     showTemplateLibraryModal={this.state.showTemplateLibraryModal}
                     viewTemplateLibraryModal={this.showTemplateLibraryModal}
                     hideTemplateLibraryModal={this.hideTemplateLibraryModal}
+                    canCreateApp={this.canCreateApp}
                   />
                 )}
                 {!isLoading && meta.total_count === 0 && appSearchKey && (
@@ -868,6 +869,7 @@ class HomePageComponent extends React.Component {
               onCloseButtonClick={() => this.setState({ showTemplateLibraryModal: false })}
               darkMode={this.props.darkMode}
               openCreateAppFromTemplateModal={this.openCreateAppFromTemplateModal}
+              appCreationDisabled={!this.canCreateApp()}
             />
           </div>
         </div>

frontend/src/HomePage/TemplateLibraryModal/TemplateLibraryModal.jsx

@@ -101,6 +101,7 @@ export default function TemplateLibraryModal(props) {
                         }}
                         isLoading={deploying}
                         className="ms-2"
+                        disabled={props.appCreationDisabled}
                       >
                         {t('homePage.templateLibraryModal.createAppfromTemplate', 'Create application from template')}
                       </ButtonSolid>