move configuration values out of configService.js​ file #9 (#12)

Author: gokulsm

.github/workflows/contoso-traders-provisioning-deployment.yml

@@ -324,7 +324,7 @@ jobs:
         with:
           tokenPrefix: "{{"
           tokenSuffix: "}}"
-          files: ./src/ContosoTraders.Ui.Website/src/services/configService.js
+          files: ./src/ContosoTraders.Ui.Website/.env
         env:
           CARTS_API_ENDPOINT: ${{ steps.get-cartsApiEndpoint.outputs.cartsApiEndpoint }}
           PRODUCTS_API_ENDPOINT: ${{ steps.get-productsApiEndpoint.outputs.productsApiEndpoint }}

src/ContosoTraders.Ui.Website/.env

@@ -0,0 +1,6 @@
+REACT_APP_APIUrl = 'https://{{PRODUCTS_API_ENDPOINT}}/v1'
+REACT_APP_APIUrlShoppingCart = 'https://{{CARTS_API_ENDPOINT}}/v1'
+REACT_APP_USEB2C = ''
+REACT_APP_B2CAUTHORITY = 'https://login.microsoftonline.com/common'
+REACT_APP_B2CCLIENTID = '9db8d08a-d9b6-4e4c-8b46-a3898f985735'
+REACT_APP_B2CSCOPES = ["User.Read"]

src/ContosoTraders.Ui.Website/.gitignore

@@ -11,7 +11,6 @@
 
 # misc
 .DS_Store
-.env
 .env.local
 .env.development.local
 .env.test.local

src/ContosoTraders.Ui.Website/package-lock.json

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { CartService } from "./services";
 import Meeting from './pages/home/components/videoCall/Meeting';
 
-import { Header, Footer, Appbar } from "./shared";
+import { Header, Footer, Appbar, HeaderMessage } from "./shared";
 import {
   Home,
   List,
@@ -23,7 +23,7 @@ import {
 
 import "./i18n";
 import "./main.scss";
-
+import warningIcon from './assets/images/original/Contoso_Assets/Icons/information_icon.svg'
 
 class App extends Component {
   constructor() {
@@ -89,6 +89,7 @@ class App extends Component {
       <div className="App">
         <Fragment>
           <div className="mainHeader">
+            <HeaderMessage type="warning" icon={warningIcon} message="This Is A Demo Store For Testing Purposes — No Orders Shall Be Fulfilled."/>
             <Appbar quantity={quantity} />
             {this.props.history.location.pathname === '/' || this.props.history.location.pathname === '/new-arrivals' ?
               <Header quantity={quantity} />

src/ContosoTraders.Ui.Website/src/App.js

@@ -198,6 +198,24 @@ body {
   background-color: #F8F8F8 !important;
   border: 1px solid #EFEFEF !important;
 }
+/* Header Message */
+.headerMessageDiv{
+  height: 55px;
+  font-family: 'Poppins';
+  letter-spacing: 0.42px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.headerMessageDiv.warning{
+  background-color: #F0A428;
+  color: #fff;
+}
+.headerMessageDiv.error{
+  background-color: #E81D1D;
+  color: #fff;
+}
 /* //Appbar */
 .appbar{
   box-shadow: none !important;

src/ContosoTraders.Ui.Website/src/assets/images/original/Contoso_Assets/Icons/information_icon.svg

@@ -4,12 +4,12 @@ require("dotenv").config();
 const settingsUrl = "/api/settings";
 
 // Note: The '{PRODUCTS_API_ENDPOINT}', '{CARTS_API_ENDPOINT}' tokens will be substituted by github workflow.
-const APIUrl = 'https://{{PRODUCTS_API_ENDPOINT}}/v1';
-const APIUrlShoppingCart = 'https://{{CARTS_API_ENDPOINT}}/v1';
-const UseB2C = '';//process.env.REACT_APP_USEB2C;
-const B2cAuthority = "https://login.microsoftonline.com/common";//process.env.REACT_APP_B2CAUTHORITY;
-const B2cClientId =  "9db8d08a-d9b6-4e4c-8b46-a3898f985735";//process.env.REACT_APP_B2CCLIENTID;
-const B2cScopes = ["User.Read"];//process.env.REACT_APP_B2CSCOPES;
+const APIUrl = process.env.REACT_APP_APIUrl;
+const APIUrlShoppingCart = process.env.REACT_APP_APIUrlShoppingCart;
+const UseB2C = process.env.REACT_APP_USEB2C;
+const B2cAuthority = process.env.REACT_APP_B2CAUTHORITY;
+const B2cClientId =  process.env.REACT_APP_B2CCLIENTID;
+const B2cScopes = process.env.REACT_APP_B2CSCOPES;
 const userEmail = localStorage.getItem('state') ? JSON.parse(localStorage.getItem('state')).userName : null;
 
 const _HeadersConfig = (token, devspaces = undefined) => {

src/ContosoTraders.Ui.Website/src/index.css

@@ -15,7 +15,7 @@ const Footer = () => {
             <Link to="/">
                 <Logo />
             </Link>
-            <p  className='mt-2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <p  className='mt-2'>We are proud to announce the launch of one of our latest innovations: Contoso Traders eCommerce store. Our journey of building India’s biggest unicorn start-up has been full of successes, but also failures and learning from them.</p>
         </Grid>
         <Grid item xs={2} className='section-2'>
             <ul>

src/ContosoTraders.Ui.Website/src/services/configService.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+function HeaderMessage(props) {
+    const { type, icon, message } = props
+    return ( 
+        <div className={`headerMessageDiv ${type}`}>
+            <img className='icon' src={icon} alt=""/>
+            <p className='message m-0'>{message}</p>
+        </div> 
+    );
+}
+
+export default HeaderMessage;

src/ContosoTraders.Ui.Website/src/shared/footer/footer.js

@@ -6,7 +6,7 @@ import Footer from './footer/footer';
 import LoadingSpinner from './loadingSpinner/loadingSpinner'
 import UploadFile from './uploadFile/uploadFile'
 import Card from './card/card'
-
+import HeaderMessage from './header/headermessage';
 export {
     Header,
     Appbar,
@@ -16,4 +16,5 @@ export {
     UploadFile,
     Card,
     Categories,
+    HeaderMessage,
 };