feat(static page): new static page (#117)

CHANGELOG.md

@@ -51,6 +51,7 @@
   - Change the payload data as per backend logic
 - App Subscription
   - Add and Edit Tenant URL functionality in detail overlay
+- Data Space
 
 ## 1.5.0
 

src/assets/locales/de/main.json

@@ -59,7 +59,8 @@
     "servicedetail": "Service Details",
     "company-role": "Config - Company Role",
     "usecase-participation": "Config - Use Case Participation",
-    "about": "About"
+    "about": "About",
+    "dataspace": "Data Space"
   },
   "overlays": {
     "invite": "Neuen Geschäftspartner einladen",

src/assets/locales/en/main.json

@@ -58,7 +58,8 @@
     "servicedetail": "Service Details",
     "company-role": "Config - Company Role",
     "usecase-participation": "Config - Use Case Participation",
-    "about": "About"
+    "about": "About",
+    "dataspace": "Data Space"
   },
   "overlays": {
     "invite": "Invite new Business Partner",

src/components/pages/CompanyRoles/index.tsx

@@ -37,23 +37,7 @@ export default function CompanyRoles() {
 
   useEffect(() => {
     CommonService.getCompanyRoles((data: any) => {
-      setLinkArray([
-        {
-          index: 1,
-          title: data.subNavigation.link1Label,
-          navigation: 'intro-id',
-        },
-        {
-          index: 2,
-          title: data.subNavigation.link2Label,
-          navigation: 'data-id',
-        },
-        {
-          index: 3,
-          title: data.subNavigation.link3Label,
-          navigation: 'business-id',
-        },
-      ])
+      setLinkArray(data.subNavigation)
       if (url.indexOf('companyrolesappprovider') > 1) {
         setCompanyRoles(data.appProvider)
       } else if (url.indexOf('companyrolesserviceprovider') > 1) {

src/components/pages/DataSpace/UseCase.scss

@@ -0,0 +1,25 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+@import 'src/components/styles/_colors';
+
+.dataSpace {
+  width: 100%;
+  padding: 0px;
+}

src/components/pages/DataSpace/index.tsx

@@ -0,0 +1,66 @@
+/********************************************************************************
+ * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import './UseCase.scss'
+import StageSection from 'components/shared/templates/StageSection'
+import { StageSubNavigation } from 'components/shared/templates/StageSubNavigation'
+import { useEffect, useState } from 'react'
+import CommonService from 'services/CommonService'
+import { getAssetBase } from 'services/EnvironmentService'
+import { StaticTemplateResponsive } from 'components/shared/templates/StaticTemplateResponsive'
+import { useSelector } from 'react-redux'
+import { languageSelector } from 'features/language/slice'
+
+export default function DataSpace() {
+  const [dataSpace, setDataSpace] = useState<any>()
+  const [linkArray, setLinkArray] = useState<any>()
+  const [isTop, setIsTop] = useState<boolean>(false)
+  const language = useSelector(languageSelector)
+
+  useEffect(() => {
+    CommonService.getDataSpace((data: any) => {
+      setDataSpace(data)
+      setLinkArray(data.subNavigation)
+    })
+  }, [language])
+
+  const onScroll = () => {
+    setIsTop(window.scrollY > 500)
+  }
+
+  window.addEventListener('scroll', onScroll)
+
+  return (
+    <main className="dataSpace">
+      {dataSpace && linkArray && (
+        <>
+          <StageSection
+            title={dataSpace.dataSpace.title}
+            description={dataSpace.dataSpace.description}
+          />
+          <StageSubNavigation fixHeader={isTop} linkArray={linkArray} />
+          <StaticTemplateResponsive
+            sectionInfo={dataSpace.dataSpace.sections}
+            baseUrl={getAssetBase()}
+          />
+        </>
+      )}
+    </main>
+  )
+}

src/components/pages/UseCase/index.tsx

@@ -37,28 +37,7 @@ export default function UseCase() {
   useEffect(() => {
     CommonService.getUseCases((data: any) => {
       setUseCase(data)
-      setLinkArray([
-        {
-          index: 1,
-          title: data.subNavigation.link1Label,
-          navigation: 'intro-id',
-        },
-        {
-          index: 2,
-          title: data.subNavigation.link2Label,
-          navigation: 'core-id',
-        },
-        {
-          index: 3,
-          title: data.subNavigation.link3Label,
-          navigation: 'details-id',
-        },
-        {
-          index: 4,
-          title: data.subNavigation.link4Label,
-          navigation: 'business-id',
-        },
-      ])
+      setLinkArray(data.subNavigation)
     })
   }, [language])
 

src/components/shared/templates/StaticTemplateResponsive/Cards/ImageVideoWrapper.tsx

@@ -36,6 +36,19 @@ export default function ImageVideoWrapper({
   scrollTop: () => void
   showScroll: boolean
 }) {
+  const navigate = (link: { internal: boolean; id: string }) => {
+    if (link.internal) {
+      const element = document.getElementById(link.id)
+      const top = element?.offsetTop
+      window.scrollTo({
+        top: top,
+        behavior: 'smooth',
+      })
+    } else {
+      window.open(link.id, '_blank')
+    }
+  }
+
   return (
     <div className={'imageVideoTextSideBySide'}>
       <div className={'titleDescriptionBody'}>
@@ -47,11 +60,29 @@ export default function ImageVideoWrapper({
             </IconButton>
           )}
         </div>
-        <Trans>
-          <Typography className={'providerDescription'} variant="body1">
-            {provider.description}
-          </Typography>
-        </Trans>
+        <Typography className={'providerDescription'}>
+          <Trans
+            key={provider.description}
+            i18nKey={provider.description}
+            components={[
+              <span key={provider.description}></span>,
+              <br key={provider.description} />,
+            ]}
+          ></Trans>
+        </Typography>
+        {provider.sectionLink && (
+          <>
+            {provider.sectionLink.data.map((link) => (
+              <Typography
+                className={'highlightText'}
+                onClick={() => navigate(link)}
+                key={link.title}
+              >
+                {link.title}
+              </Typography>
+            ))}
+          </>
+        )}
       </div>
       {children}
     </div>

src/components/shared/templates/StaticTemplateResponsive/Cards/LinkButtonGrid.tsx

@@ -47,6 +47,9 @@ export default function LinkButtonGrid({
                 backgroundColor: link.background,
                 width: `${100 / grid}%`,
               }}
+              onClick={() => {
+                window.open(link.navigate, '_blank')
+              }}
             >
               <Typography variant="h5">{link.title}</Typography>
             </Box>
@@ -69,6 +72,9 @@ export default function LinkButtonGrid({
                 backgroundColor: link.background,
                 width: `${100 / grid}%`,
               }}
+              onClick={() => {
+                window.open(link.navigate, '_blank')
+              }}
             >
               <Typography variant="h5">{link.title}</Typography>
             </Box>

src/components/shared/templates/StaticTemplateResponsive/Cards/RenderImage.tsx

@@ -26,10 +26,12 @@ export default function RenderImage({
   url,
   height,
   additionalStyles,
+  width,
 }: {
   url: string
   additionalStyles?: any
   height?: string
+  width?: string
 }) {
   const web = useMediaQuery('(min-width:1025px)')
 
@@ -41,7 +43,7 @@ export default function RenderImage({
           text={''}
           size="custom"
           height={height ? height : '331px'}
-          width="auto"
+          width={width ? width : 'auto'}
           hover={true}
           borderRadius={true}
           shadow={false}

src/components/shared/templates/StaticTemplateResponsive/Cards/TextImageSideBySide.tsx

@@ -45,6 +45,7 @@ export default function TextImageSideBySide({
           additionalStyles={{
             textAlign: 'center',
           }}
+          width="490px"
         />
       }
     />

src/components/shared/templates/StaticTemplateResponsive/StaticTemplate.scss

@@ -69,13 +69,6 @@
     padding-top: 34px;
   }
 
-  .linkGridContainer {
-    display: flex;
-    gap: 30px;
-    place-content: center;
-    margin-top: 60px;
-  }
-
   .linkBox {
     padding: 10px 0px;
     height: 40px;
@@ -203,13 +196,6 @@
     padding-top: 30px;
   }
 
-  .linkGridContainer {
-    display: flex;
-    gap: 30px;
-    place-content: center;
-    margin-top: 60px;
-  }
-
   .linkBox {
     padding: 10px 0px;
     height: 40px;
@@ -325,13 +311,6 @@
     padding-top: 20px;
   }
 
-  .linkGridContainer {
-    display: flex;
-    gap: 30px;
-    place-content: center;
-    margin-top: 60px;
-  }
-
   .linkBox {
     padding: 10px 0px;
     height: 40px;
@@ -493,3 +472,19 @@ iframe {
 strong:hover .tooltiptext {
   visibility: visible !important;
 }
+
+.highlightText {
+  cursor: pointer;
+}
+
+.highlightText:hover {
+  color: #0f71cb;
+}
+
+.linkGridContainer {
+  display: flex;
+  gap: 30px;
+  place-content: center;
+  margin-top: 60px;
+  cursor: pointer;
+}

src/components/shared/templates/StaticTemplateResponsive/StaticTypes.ts

@@ -47,6 +47,13 @@ export type ProviderProps = {
   subTitles?: string[]
   align?: 'left' | 'center' | 'right'
   images?: string[]
+  sectionLink?: {
+    data: {
+      title: string
+      id: string
+      internal: boolean
+    }[]
+  }
 }
 
 export type linkProps = {
@@ -69,4 +76,5 @@ export enum TemplateNames {
   TextCenterAlignedWithLinkButtonGrid = 'TextCenterAlignedWithLinkButtonGrid',
   TextCenterAlignedWithImagesInFlex = 'TextCenterAlignedWithImagesInFlex',
   TextCenterAlignedWithImagesInGrid = 'TextCenterAlignedWithImagesInGrid',
+  LinkButtonGrid = 'LinkButtonGrid',
 }

src/components/shared/templates/StaticTemplateResponsive/index.tsx

@@ -194,6 +194,13 @@ const TemplateConfig = ({
           />
         </>
       )
+    //Grid layout link component
+    case TemplateNames.LinkButtonGrid:
+      return (
+        <>
+          <LinkButtonGrid provider={provider} grid={provider.grid} />
+        </>
+      )
     default:
       //Text in the left and image in the right side
       return (

src/services/CommonService.ts

@@ -137,11 +137,22 @@ const getCompanyRoleUpdateData = (callback: any) => {
     .catch((error) => console.log('Fetching Company Roles Data Failed'))
 }
 
+const getDataSpace = (callback: any) => {
+  let url = `${getAssetBase()}/content/${i18next.language}/dataspace.json`
+  fetch(url)
+    .then((response) => response.json())
+    .then((data) => callback(data))
+    .catch((err) => {
+      console.log(err)
+    })
+}
+
 const CommonService = {
   appToCard,
   isValidPictureId,
   getCompanyRoles,
   getUseCases,
+  getDataSpace,
   fetchLeadPictures,
   getRoleDescription,
   getCompanyRoleUpdateData,