Add more sample forms

README.md

@@ -56,12 +56,23 @@ Install from the command line
    npm run start-backend
 ```
 
+for musicfestival sample site
+
+```sh
+   npm run start-musicfestival-backend
+``` 
 5. Start react site
 
 ```sh
    npm run start-frontend
 ```
 
+for musicfestival sample site
+
+```sh
+   npm run start-musicfestival
+``` 
+
 ### View site on browser
 
 Create a form with some elements in MainContentArea of Start page.

package.json

@@ -34,7 +34,10 @@
     "publish-forms-react": "npm publish -w @episerver/forms-react",
     "publish": "npm run publish-forms-sdk && npm run publish-forms-react",
     "build-musicfestival": "npm run build -w music-festival",
-    "start-musicfestival": "npm start -w music-festival"
+    "start-musicfestival": "npm start -w music-festival",
+    "build-musicfestival-backend": "npm run build -w musicfestival-backend",
+    "start-musicfestival-backend": "npm start -w managementsite musicfestival-backend"
+
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",

samples/musicfestival-backend-dotnet/Startup.cs

@@ -151,7 +151,7 @@ public void ConfigureServices(IServiceCollection services)
             options.EnableOpenApiDocumentation = true;
             options.FormCorsPolicy = new FormCorsPolicy
             {
-                AllowOrigins = new string[] { "http://localhost:3000" }, //Enter '*' to allow any origins, multiple origins separate by comma
+                AllowOrigins = new string[] { _frontendUri }, //Enter '*' to allow any origins, multiple origins separate by comma
                 AllowCredentials = true
             };
             options.OpenIDConnectClients.Add(new()

samples/musicfestival-backend-dotnet/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "musicfestival-backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "dotnet run",
+    "setup": "dotnet restore",
+    "build": "dotnet build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

samples/musicfestival-frontend-react/codegen.yaml

@@ -1,4 +1,4 @@
-schema: https://dev.cg.optimizely.com/content/v2?auth=3yUD03bcVMSICOruZKYBYcfnQu3TXaDIvQF0qvRgjCD3p5W5
+schema: https://dev.cg.optimizely.com/content/v2?auth=INPUT_SINGLE_KEY_HERE
 documents: './src/**/*.graphql'
 generates:
   ./src/generated.ts:

samples/musicfestival-frontend-react/src/graphql/Start.graphql

@@ -119,12 +119,17 @@ query Start(
                 Content
             }
             ... on BuyTicketPage {
-                ContentLink {
-                    Id
-                    WorkId
-                    GuidValue
-                    ProviderName
-                    Url
+                MainContentArea {
+                    ContentLink {
+                    Expanded {
+                        ... on FormContainerBlock {
+                            FormRenderTemplate
+                            ContentLink {
+                                GuidValue
+                            }
+                        }
+                    }
+                    }
                 }
             }
         }

samples/musicfestival-frontend-react/src/pages/BuyTicketPage.tsx

@@ -1,4 +1,4 @@
-import { Form, FormLogin } from '@episerver/forms-react';
+import { Form, FormContainerBlock, FormLogin } from '@episerver/forms-react';
 import { FormCache, FormConstants, IdentityInfo, extractParams } from '@episerver/forms-sdk';
 import { useEffect, useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -12,12 +12,6 @@ type BuyTicketPageProps = {
 }
 
 function BuyTicketPage({ content }: BuyTicketPageProps) {
-    const location = useLocation();
-    const { language } = extractParams(window.location.pathname)
-    const url = `${process.env.REACT_APP_ENDPOINT_GET_FORM_BY_PAGE_URL}${location.pathname}`;
-
-    const { data: pageData, loading } = useFetch(url);
-
     const formCache = new FormCache();
 
     const [identityInfo, setIdentityInfo] = useState<IdentityInfo>({
@@ -33,9 +27,7 @@ function BuyTicketPage({ content }: BuyTicketPageProps) {
     const history = useNavigate()
     return (
         <>
-            {loading && <div className='loading'>Loading...</div>}
-
-            {!loading && pageData &&
+            {content &&
                 <div>
                     <nav className="Page-container PageHeader NavBar">
                         <div className="nav-table">
@@ -45,7 +37,14 @@ function BuyTicketPage({ content }: BuyTicketPageProps) {
                                         onClick={() => {
                                             window.location.href = `${window.location.origin}/en/buy-ticket-now/`;
                                         }}
-                                    >{content?.Name}</button>
+                                    >Buy Ticket Now</button>
+                                </div>
+                                <div className="nav-table-cell">
+                                    <button className="Button buy-ticket-button"
+                                        onClick={() => {
+                                            window.location.href = `${window.location.origin}/en/sample-form/`;
+                                        }}
+                                    >Sample Form</button>
                                 </div>
                                 <div className="nav-table-cell search-button-block">
                                     <SearchButton />
@@ -54,17 +53,14 @@ function BuyTicketPage({ content }: BuyTicketPageProps) {
                         </div>
                     </nav>
                     <main className='Page-container'>
-                        {pageData.childrens.map((c: any) => (
-                            <Form
-                                key={c.reference.key}
-                                formKey={c.reference.key}
-                                language={language ?? "en"}
-                                baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL ?? "/"}
+                        {content.MainContentArea.map((c: any) => (
+                            <FormContainerBlock
+                                form={JSON.parse(c.ContentLink.Expanded.FormRenderTemplate)}
+                                key={c.ContentLink.Expanded.ContentLink.GuidValue}
                                 identityInfo={identityInfo}
+                                baseUrl={process.env.REACT_APP_HEADLESS_FORM_BASE_URL ?? "/"}
                                 history={history}
-                                currentPageUrl={pageData.pageUrl}
-                                optiGraphUrl={process.env.REACT_APP_CONTENT_GRAPH_GATEWAY_URL}
-                            />
+                                currentPageUrl={content.Url} />
                         ))}
                     </main>
                 </div>

src/@episerver/forms-react/src/components/FormContainerBlock.tsx

@@ -4,10 +4,29 @@ import { FormProvider } from "../context/FormProvider";
 import { FormBody } from "./FormBody";
 
 export interface FormContainerProps {
+    /**
+     * The form data to render form
+     */
     form: FormContainer;
+
+    /**
+     * Access token for form submit
+     */
     identityInfo?: IdentityInfo;
+
+    /**
+     * The base url of Headless Form API
+     */
     baseUrl: string;
+
+    /**
+     * The instance of useHistory() received from react-router-dom
+     */
     history?: any;
+
+    /**
+     * The public url of current page
+     */
     currentPageUrl?: string;
 }
 

src/@episerver/forms-react/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./Form";
-export * from "./FormLogin";
+export * from "./FormLogin";
+export * from "./components/FormContainerBlock";