From 3fb4cca2ea687b8d49e214b9e1641b22ffc6992d Mon Sep 17 00:00:00 2001
From: Anantshree Chandola <anantshreechandola23@gmail.com>
Date: Tue, 17 Oct 2023 16:56:54 +0530
Subject: [PATCH] updates (#7931)

---
 frontend/src/HomePage/BlankPage.jsx           | 78 +++++++++++--------
 frontend/src/HomePage/HomePage.jsx            |  2 +
 .../TemplateLibraryModal.jsx                  |  1 +
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/frontend/src/HomePage/BlankPage.jsx b/frontend/src/HomePage/BlankPage.jsx
index 4be5433ea8..c7a8c54a25 100644
--- a/frontend/src/HomePage/BlankPage.jsx
+++ b/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">
-                Or choose from templates
-              </div>
-              <div className="row" data-cy="app-template-row">
-                {staticTemplates.map(({ id, name }) => {
-                  return (
-                    <div
-                      key={id}
-                      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`}
-                      >
+              {!appCreationDisabled && (
+                <div>
+                  <div className="hr-text" data-cy="action-option">
+                    Or choose from templates
+                  </div>
+                  <div className="row" data-cy="app-template-row">
+                    {staticTemplates.map(({ id, name }) => {
+                      return (
                         <div
-                          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`}
+                          key={id}
+                          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`}
                           >
-                            {name}
-                          </h3>
+                            <div
+                              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>
   );
diff --git a/frontend/src/HomePage/HomePage.jsx b/frontend/src/HomePage/HomePage.jsx
index 2b9a4c03b5..84b8130b8a 100644
--- a/frontend/src/HomePage/HomePage.jsx
+++ b/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>
diff --git a/frontend/src/HomePage/TemplateLibraryModal/TemplateLibraryModal.jsx b/frontend/src/HomePage/TemplateLibraryModal/TemplateLibraryModal.jsx
index 5151c670e1..0773a98fc2 100644
--- a/frontend/src/HomePage/TemplateLibraryModal/TemplateLibraryModal.jsx
+++ b/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>