From 158892bd3e996f31ae634180da9f53c5f54f97df Mon Sep 17 00:00:00 2001
From: Pier-Paolo Mammi <pierpaolo.mammi@gmail.com>
Date: Mon, 6 Jul 2026 11:41:27 +0200
Subject: [PATCH] refactor: move template rendering to own properties and
 functions

---
 .../common/src/ElixFormsComponentAbstract.tsx | 96 ++++++++++++++++---
 .../src/IElixFormsComponentProperties.ts      |  6 ++
 react/scelta-carriera/src/App.jsx             | 90 +++--------------
 .../src/SceltaCarrieraComponent.tsx           |  4 +
 4 files changed, 107 insertions(+), 89 deletions(-)

diff --git a/react/common/src/ElixFormsComponentAbstract.tsx b/react/common/src/ElixFormsComponentAbstract.tsx
index 474a425..d4bc634 100644
--- a/react/common/src/ElixFormsComponentAbstract.tsx
+++ b/react/common/src/ElixFormsComponentAbstract.tsx
@@ -113,6 +113,10 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     return this.createCustomFormFields(formFieldFactory);
   }
 
+  protected renderExtraContent(): JSX.Element | null {
+    return null;
+  }
+
   public override render(): React.ReactElement<IElixFormsComponentProperties> {
     const {
       description,
@@ -120,23 +124,91 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
       environmentMessage,
       hasTeamsContext,
       userDisplayName,
-      additionalFieldsJson
+      additionalFieldsJson,
+      moduleTitle,
+      pageTitle,
+      pageDescription,
+      heroImageSrc
     } = this.props;
 
     const queryParams = new URLSearchParams(window.location.search);
 
     return (
-      <section>
-        {/* className={`${styles.elixFormsReact} ${hasTeamsContext ? styles.teams : ''}`} */}
-        <div>{environmentMessage}</div>
-        <div>{description}</div>
-        <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
-          {this.createMandatoryFormFields(queryParams)}
-          {this.createAdditionalFormFields()}
-          {this.renderCustomFormFields()}
-          <input type="submit" value="Submit"/>
-        </form>
-      </section>
+      <div className="container_12" id="pageBody">
+        <div className="grid_12">
+          <div id="userConsole" className="fe-behaviour">
+            <header>
+              <div className="neutral">
+                <div className="grid_12">
+                  <div className="console_header">
+                    <div className="leftDiv">
+                      <h1>elixForms</h1>
+                      <div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
+                      </div>
+                    </div>
+                    <div className="rightDiv">
+                      <div className="rightDivInside info padding_r">
+                        <div className="clear"></div>
+                      </div>
+                    </div>
+                    <div className="clear"></div>
+                  </div>
+                </div>
+                <div className="clear"></div>
+              </div>
+            </header>
+
+            <div className="grid_12 console_main">
+              <div className="inside">
+                {moduleTitle && (
+                  <div>
+                    <div className="fe-module-header-container">
+                      <h2>{moduleTitle}</h2>
+                    </div>
+                  </div>
+                )}
+                <div className="receipt">
+                  <div className="container">
+                    {pageTitle && <h1>{pageTitle}</h1>}
+                    {heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image" />}
+                    {pageDescription && <p>{pageDescription}</p>}
+                    
+                    {environmentMessage && <div>{environmentMessage}</div>}
+                    {description && <div>{description}</div>}
+                    
+                    <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
+                      {this.createMandatoryFormFields(queryParams)}
+                      {this.createAdditionalFormFields()}
+                      {this.renderCustomFormFields()}
+                      <input type="submit" value="Submit"/>
+                    </form>
+
+                    {this.renderExtraContent()}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="clear"></div>
+
+            <footer className="it-footer">
+              <div className="it-footer-main">
+                <div className="container">
+                  <div className="row clearfix">
+                    <div className="col-sm-12">
+                      <div className="footer-content">
+                        <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
+                        <div className="subfooter-bottom"><div>versione 1.24.0</div></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </footer>
+          </div>
+          <div className="clear"></div>
+        </div>
+      </div>
     );
   }
 
diff --git a/react/common/src/IElixFormsComponentProperties.ts b/react/common/src/IElixFormsComponentProperties.ts
index a8771f0..8b39049 100644
--- a/react/common/src/IElixFormsComponentProperties.ts
+++ b/react/common/src/IElixFormsComponentProperties.ts
@@ -8,6 +8,12 @@ export interface IElixFormsComponentProperties {
   hasTeamsContext: boolean;
   userDisplayName: string;
   additionalFieldsJson?: string;
+  
+  // Layout Properties
+  moduleTitle?: string;
+  pageTitle?: string;
+  pageDescription?: string;
+  heroImageSrc?: string;
 }
 
 // Additional Fields JSON Schema
diff --git a/react/scelta-carriera/src/App.jsx b/react/scelta-carriera/src/App.jsx
index 5fe2af9..e6a4791 100644
--- a/react/scelta-carriera/src/App.jsx
+++ b/react/scelta-carriera/src/App.jsx
@@ -8,83 +8,19 @@ import SceltaCarrieraComponent from './SceltaCarrieraComponent';
 function App() {
   const [count, setCount] = useState(0)
 
-  /** @type {SceltaCarrieraComponent} */
-  var myElixFormsReact = new SceltaCarrieraComponent({
-    description: "This is a custom form created with ElixFormsReact component.",
-    isDarkTheme: false,
-    environmentMessage: "TESTING!",
-    hasTeamsContext: false,
-    userDisplayName: "John Doe",
-  });
-
-  var elixFormsReactRender = myElixFormsReact.render();
-
-  return <>
-      <div className="container_12" id="pageBody">
-        <div className="grid_12">
-          <div id="userConsole" className="fe-behaviour">
-            <header>
-              <div className="neutral">
-                <div className="grid_12">
-                  <div className="console_header">
-                    <div className="leftDiv">
-                      <h1>elixForms</h1>
-                      <div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
-                      </div>
-                    </div>
-                    <div className="rightDiv">
-                      <div className="rightDivInside info padding_r">
-                        <div className="clear"></div>
-                      </div>
-                    </div>
-                    <div className="clear"></div>
-                  </div>
-                </div>
-                <div className="clear"></div>
-              </div>
-            </header>
-
-            <div className="grid_12 console_main">
-              <div className="inside">
-                <div>
-                  <div className="fe-module-header-container">
-                    <h2>Modulo A/13 - Richiesta di Certificato</h2>
-                  </div>
-                </div>
-                <div className="receipt">
-                  <div className="container">
-                    <h1>Scelta Carriera</h1>
-                    <img src={heroImg} alt="Hero Image" className="hero-image" />
-                    <p>Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te.</p>
-                    {elixFormsReactRender}
-                    <p>Altre cose</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div className="clear"></div>
-
-            <footer className="it-footer">
-              <div className="it-footer-main">
-                <div className="container">
-                  <div className="row clearfix">
-                    <div className="col-sm-12">
-                      <div className="footer-content">
-                        <div className="subfooter-top">powered by <span className="highlight">elixForms</span></div>
-                        <div className="subfooter-bottom"><div>versione 1.24.0</div></div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </footer>
-          </div>
-          <div className="clear"></div>
-        </div>
-      </div>
-  </>;
-
+  return (
+    <SceltaCarrieraComponent 
+      description=""
+      isDarkTheme={false}
+      environmentMessage=""
+      hasTeamsContext={false}
+      userDisplayName="John Doe"
+      moduleTitle="Modulo A/13 - Richiesta di Certificato"
+      pageTitle="Scelta Carriera"
+      pageDescription="Benvenuto nella piattaforma di scelta carriera! Esplora le tue opzioni e trova la strada giusta per te."
+      heroImageSrc={heroImg}
+    />
+  );
 }
 
 export default App
diff --git a/react/scelta-carriera/src/SceltaCarrieraComponent.tsx b/react/scelta-carriera/src/SceltaCarrieraComponent.tsx
index 4eac28a..20c6316 100644
--- a/react/scelta-carriera/src/SceltaCarrieraComponent.tsx
+++ b/react/scelta-carriera/src/SceltaCarrieraComponent.tsx
@@ -42,4 +42,8 @@ export default class SceltaCarrieraComponent extends ElixFormsComponentAbstract
       </>
     );
   }
+
+  protected override renderExtraContent(): JSX.Element {
+    return <p>Altre cose</p>;
+  }
 }