FSA - Updated installation docs for FSA SPA 4.0

_data/navigation.yml

@@ -550,6 +550,8 @@ docs:
                 - title: "Installing SAP Commerce Cloud for Use with FSA Spartacus ➢"
                   url: /installing-sap-commerce-with-fsa-spartacus/
                   underchildren:
+                    - title: "Installing SAP Commerce Cloud for Use with FSA Spartacus 4.0"
+                      url: /installing-sap-commerce-with-fsa-spartacus-4-0/
                     - title: "Installing SAP Commerce Cloud for Use with FSA Spartacus 3.0"
                       url: /installing-sap-commerce-with-fsa-spartacus-3-0/
                     - title: "Installing SAP Commerce Cloud for Use with FSA Spartacus 2.0"
@@ -559,6 +561,8 @@ docs:
                 - title: "Building the FSA Storefront from Libraries ➢"
                   url: /building-the-fsa-storefront-from-libraries/
                   underchildren:
+                    - title: "Building the FSA Spartacus Storefront using 4.0 Libraries"
+                      url: /building-the-fsa-storefront-from-libraries-4-0/
                     - title: "Building the FSA Spartacus Storefront using 3.0 Libraries"
                       url: /building-the-fsa-storefront-from-libraries-3-0/
                     - title: "Building the FSA Spartacus Storefront using 2.0 Libraries"

_pages/fsa/fsa-release-information.md

@@ -30,10 +30,10 @@ This document describes what is included in all FSA Spartacus libraries since th
 *Release 4.0 libraries published March 2022*
 
 - **[SAP Digital Payments Integration]({{ site.baseurl }}{% link _pages/fsa/features/fsa-checkout.md %})** - With SAP Digital Payments integration, Financial Services Accelerator provides digital payment capabilities to insurance and banking customers, by enabling credit card payments in quotation and application processes.
-- **My Dashboard** - Customers can now see an overview of the most important information from My Account area on a separate summary page called My Dashboard.
+- **[My Dashboard]({{ site.baseurl }}{% link _pages/fsa/features/fsa-my-dashboard.md %})** - Customers can now see an overview of the most important information from My Account area on a separate summary page called My Dashboard.
 - **[Policy Renewal Process]({{ site.baseurl }}{% link _pages/fsa/features/fsa-policy-renewal.md %})** - The system notifies policyholders about their policy renewal options when their existing policies are about to expire. This helps customers decide about the new version of their policies while they are still valid.   
 - **[Quote Comparison]({{ site.baseurl }}{% link _pages/fsa/features/fsa-quote-comparison.md %})** - Customers can compare quotes they created in a separate comparison table, which facilitates the decision-making process when they need to choose between two similar options.
-- **Agent Enablement** - The On-Behalf-of framework enables financial B2B customers to execute processes on behalf of their customers. At the same time, they have an overview of their customer's portfolio, as well as their own seller portfolio, on the newly added Seller Dashboard and Customer Dashboard.
+- **[Agent Enablement]({{ site.baseurl }}{% link _pages/fsa/features/fsa-agent-enablement.md %})** - The On-Behalf-of framework enables financial B2B customers to execute processes on behalf of their customers. At the same time, they have an overview of their customer's portfolio, as well as their own seller portfolio, on the newly added Seller Dashboard and Customer Dashboard.
 - **[Chatbot]({{ site.baseurl }}{% link _pages/fsa/features/fsa-chatbot.md %})** - The Chatbot feature in Financial Services Accelerator allows financial companies to interact and coordinate with their customers in real-time and easy-to-use interface.
 - **[Quote Replication](https://help.sap.com/viewer/DRAFT/a7d0f0c5faa44002bf81e1a9a91c77e2/2202/en-US/6ca7731b90404da6b863814377b3fe3e.html)** - Quotes created in another system (e.g., PQM) are replicated in the Financial Services Accelerator and shown to the customer. The customer can accept or decline the quote. The customer's decision is then replicated back to the originating system.
 - **[Live Contract Integration Enhancement]({{ site.baseurl }}{% link _pages/fsa/features/agents/fsa-insurance-agent-capabilities.md %})** - The integration between Financial Services Accelerator and Live Contract has been extended so that customers can now directly call an agent of choice from the Find an Agent page.

_pages/fsa/install/building-the-fsa-storefront-from-libraries-4-0.md

@@ -0,0 +1,157 @@
+---
+title: Building the FSA Spartacus Storefront using 4.0 Libraries
+---
+
+The following instructions describe how to build an FSA storefront application using published FSA Spartacus 4.x libraries. 
+If you are building Spartacus from the source, see [Contributor Setup]({{ site.baseurl }}{% link _pages/contributing/contributor-setup.md %}).
+
+***
+
+**Table of Contents**
+
+- This will become a table of contents (this text will be scrapped).
+{:toc}
+
+***
+
+## Prerequisites
+
+Before carrying out the procedures below, ensure the following front-end and back-end requirements are in place.
+
+### Front-End Development Requirements
+
+Your Angular development environment should include the following:
+
+- **Angular CLI**: Version 12.0.5 or later.
+- **node.js**: Version 14.x is recommended.
+- **yarn**: Version 1.22.x or later.
+
+### Back-End Server Requirements
+
+FSA Spartacus uses SAP Commerce and Financial Services Accelerator back end and makes use of the sample data.
+
+- **SAP Commerce Cloud**: Release **2105** is required. Patch version **2105.5** is recommended.
+- **Financial Services Accelerator**: Version **2202** is required.
+
+For more information, see [Installing SAP Commerce Cloud FSA for use with FSA Spartacus]({{ site.baseurl }}{% link _pages/fsa/install/installing-sap-commerce-with-fsa-spartacus.md %}).
+
+### Windows Setup
+
+To successfully install the project in the Windows environment, first make sure that you have installed GitBash.
+
+Next, create the .npmrc file at the root of your Angular project.
+The .npmrc file should contain the following:
+
+```shell
+shell = "{instalation directory}\\Git\\bin\\bash.exe" 
+script-shell = "{instalation directory}\\Git\\bin\\bash.exe" 
+
+
+Example:
+shell = "C:\\Program Files\\Git\\bin\\bash.exe"
+script-shell = "C:\\Program Files\\Git\\bin\\bash.exe"
+```
+
+Once you have configured this, you should execute all the commands in the procedures that follow from the GitBash console.
+
+## Creating a New Angular App
+
+The following procedure describes how to create a new Angular application with the name `mystore`.
+
+1. Open a command line and navigate to the location of your choice.
+2. Using Angular CLI, generate a new Angular application with the following command:
+
+   ```bash
+   ng new mystore --style=scss
+   ```
+
+   When prompted for Angular routing, enter `n` for 'no'.
+
+   The `mystore` folder and the new app are created.
+
+3. Access the newly created `mystore` folder with the following command:
+
+     ```bash
+     cd mystore
+     ```
+
+## FSA Spartacus Project Setup
+
+1. Go to the `package.json` file at the root of your project and add the following dependencies and their respective versions:
+
+    ```json
+    "dependencies": {
+    "@angular/service-worker": "^12.0.5",
+    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
+    "@ng-select/ng-select": "^7.0.1",
+    "@ngrx/effects": "^12.1.0",
+    "@ngrx/router-store": "^12.1.0",
+    "@ngrx/store": "^12.1.0",
+    "@spartacus/asm": "4.2.1",
+    "@spartacus/assets": "4.2.0",
+    "@spartacus/cart": "4.2.1",
+    "@spartacus/cds": "4.2.1",
+    "@spartacus/checkout": "4.2.1",
+    "@spartacus/core": "4.3.0",
+    "@spartacus/digital-payments": "4.2.1",
+    "@spartacus/dynamicforms": "^3.0.1",
+    "@spartacus/fsa-storefront": "^3.0.1",
+    "@spartacus/fsa-styles": "^3.0.0",
+    "@spartacus/organization": "4.2.1",
+    "@spartacus/product": "4.2.1",
+    "@spartacus/product-configurator": "4.2.1",
+    "@spartacus/smartedit": "4.2.1",
+    "@spartacus/storefinder": "4.2.1",
+    "@spartacus/storefront": "4.2.0",
+    "@spartacus/styles": "4.2.1",
+    "@spartacus/tracking": "4.2.1",
+    "@spartacus/user": "4.2.1",
+    "@syncpilot/bpool-guest-lib": "^0.3.2",
+    "angular-oauth2-oidc": "^10.0.1",
+    "blob-util": "^2.0.2",
+    "bootstrap": "^4.3.1",
+    "echarts": "^5.0.2",
+    "file-saver": "^2.0.2",
+    "i18next": "^20.2.2",
+    "i18next-http-backend": "^1.2.2",
+    "ngx-echarts": "6.0.1",
+    "ngx-infinite-scroll": "^8.0.0",
+    "resize-observer-polyfill": "^1.5.1",
+   }
+    ```
+
+2. Install the added dependencies:
+
+```bash
+yarn install
+```
+
+3. Once the installation is finished, delete your app folder and then, on the same location, unpack the following ZIP file, which contains a new app folder with the required structure:
+
+[Download app.zip](https://github.com/SAP/spartacus-financial-services-accelerator/releases)
+
+4. In your `style.css` file add the following code:
+
+```typescript
+@import "~@spartacus/fsa-styles/index";
+```
+
+5. Copy the `fonts` directory from `node_modules` to your `src/assets` directory.
+
+6. Start the server with the following command:
+
+```bash
+ng serve
+```
+
+Your app will be compiled and then started.
+
+To display your storefront, assuming everything is installed locally, browse to `http://localhost:4200`. 
+If you installed Financial SPA sample data with the *financialprocess* extension, the FSA Spartacus storefront for Financial services should appear.
+
+**Note**: If your storefront doesn’t appear, you likely have to accept a privacy certificate. 
+To do so, browse to `https://localhost:9002/occ/v2/financial/cms/pages`, and then accept the privacy certificate. 
+This step is necessary because your browser will block calls to the app which makes calls to `localhost:9002` due to security settings. 
+To see the browser message, right-click in your browser, select **Inspect**, and then click **Console**.
+
+**Congratulations! You've built your first FSA Spartacus storefront.**

_pages/fsa/install/building-the-fsa-storefront-from-libraries.md

@@ -4,6 +4,7 @@ title: Building the FSA Spartacus Storefront from Libraries
 
 The following instructions describe how to build an FSA storefront application using published FSA Spartacus libraries.  
 
+- [Building the FSA Spartacus Storefront using 4.0 Libraries]({{ site.baseurl }}{% link _pages/fsa/install/building-the-fsa-storefront-from-libraries-4-0.md %})
 - [Building the FSA Spartacus Storefront using 3.0 Libraries]({{ site.baseurl }}{% link _pages/fsa/install/building-the-fsa-storefront-from-libraries-3-0.md %})
 - [Building the FSA Spartacus Storefront using 2.0 Libraries]({{ site.baseurl }}{% link _pages/fsa/install/building-the-fsa-storefront-from-libraries-2-0.md %})
 - [Building the FSA Spartacus Storefront using 1.0 Libraries]({{ site.baseurl }}{% link _pages/fsa/install/building-the-fsa-storefront-from-libraries-1-0.md %})