From 091976fa462ee7ea9ef3c393683d8c3b4d87aaad Mon Sep 17 00:00:00 2001
From: Linh Hoang <linh.hoang@episerver.com>
Date: Thu, 9 May 2024 14:18:34 +0700
Subject: [PATCH] Update readme

Feature: AFORM-4132
Story: AFORM-4124
---
 README.md                                     |  6 +++++-
 .../musicfestival-frontend-react/README.md    |  1 +
 src/@episerver/forms-react/README.md          | 20 +++++++++++++++++++
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 93b2806..a424fd7 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,10 @@ Install from the command line
    npm run setup
 ```
 
+To setup musicfestival: 
+- https://github.com/episerver/content-headless-form-js-sdk/tree/develop/samples/musicfestival-backend-dotnet
+- https://github.com/episerver/content-headless-form-js-sdk/tree/develop/samples/musicfestival-frontend-react
+
 3. Build all projects
 
 ```sh
@@ -87,4 +91,4 @@ Create a form with some elements in MainContentArea of Start page.
 
 ```sh
    http://localhost:3000/
-```
+```
\ No newline at end of file
diff --git a/samples/musicfestival-frontend-react/README.md b/samples/musicfestival-frontend-react/README.md
index 4136303..79fa730 100644
--- a/samples/musicfestival-frontend-react/README.md
+++ b/samples/musicfestival-frontend-react/README.md
@@ -61,6 +61,7 @@ This project uses:
         - `...`
     - `models/` contains models retrieving messages from CMS
     - `pages/` contains all pages of the site
+        - `BuyTicketPage.tsx` render form using data retrieved from Content Graph
     - `authService.js` contains OIDC config
     - `generated.ts` is generated file on folder `graphql/`
     - `...`
diff --git a/src/@episerver/forms-react/README.md b/src/@episerver/forms-react/README.md
index 036ff1e..4f4f833 100644
--- a/src/@episerver/forms-react/README.md
+++ b/src/@episerver/forms-react/README.md
@@ -24,6 +24,26 @@ This is the main component that will be used to render the form from the metadat
 * currentPageUrl - The public url of current page
 * optiGraphUrl - The endpoint url of Optimizely Graph with your singlekey
 
+## FormContainerBlock
+### Description
+This is the main component that will be used to render the form from data received from the Headless Form API
+### Usage
+```js
+<FormContainerBlock 
+    form={formData} 
+    identityInfo={identityInfo} 
+    baseUrl={"/"} 
+    history={history} 
+    currentPageUrl={"http://yourdomain/en/"}
+/>
+```
+### Propperties
+* form - The form data to render form
+* identityInfo - Access token for form submit
+* baseUrl - The base url of Headless Form API
+* history - The instance of useHistory() received from react-router-dom
+* currentPageUrl - The public url of current page
+
 ## FormLogin
 ### Description
 This is a component that will be used to render a login form, it helps to login to Headless Form API