Merge pull request #386 from topcoder-platform/PROD-1565_work-details

PROD-1565 work details -> qa

Author: brooketopcoder

package-lock.json

@@ -27,6 +27,7 @@
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^9.4.0",
     "@types/jest": "^25.2.3",
+    "@types/lodash": "^4.14.182",
     "@types/node": "^17.0.24",
     "@types/reach__router": "^1.3.10",
     "@types/react": "^18.0.5",

package.json

@@ -3,8 +3,4 @@
 .wrap {
   display: flex;
   padding-bottom: 32px;
-}
-
-.details-content {
-  flex-grow: 2;
-}
+}

src-ts/tools/work/work-detail-details/WorkDetailDetails.module.scss

@@ -1,19 +1,17 @@
 import { FC } from 'react'
 
+import { WorkDetailDetailsPane } from './work-detail-details-pane'
 import { WorkDetailDetailsSidebar } from './work-detail-details-sidebar'
 import styles from './WorkDetailDetails.module.scss'
 
 interface WorkDetailDetailsProps {
-    children: JSX.Element
+    formData: {}
 }
 
 const WorkDetailDetails: FC<WorkDetailDetailsProps> = (props: WorkDetailDetailsProps) => {
-
     return (
         <div className={styles['wrap']}>
-            <div className={styles['details-content']}>
-                {props.children}
-            </div>
+            <WorkDetailDetailsPane formData={props.formData} />
             <WorkDetailDetailsSidebar />
         </div>
     )

src-ts/tools/work/work-detail-details/WorkDetailDetails.tsx

@@ -0,0 +1,25 @@
+@import '../../../../lib/styles';
+
+.paneContent {
+    flex-grow: 2;
+}
+
+.detail {
+    margin-bottom: $pad-xxl;
+    white-space: pre-wrap;
+    @include font-black-100;
+
+    .header {
+        @include font-barlow;
+        display: flex;
+        padding-bottom: $pad-sm;
+    }
+
+    .content {
+        @extend .body-main;
+
+        .detail {
+            padding-left: $pad-xl;
+        }
+    }
+}

src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.module.scss

@@ -0,0 +1,115 @@
+import _ from 'lodash'
+import { FC } from 'react'
+
+import styles from './WorkDetailDetailsPane.module.scss'
+
+interface WorkDetailDetailsPaneProps {
+    formData: any
+}
+
+const WorkDetailDetailsPane: FC<WorkDetailDetailsPaneProps> = ({ formData }: WorkDetailDetailsPaneProps) => {
+    const sections: Array<string> = ['basicInfo', 'websitePurpose', 'pageDetails', 'branding']
+
+    return (
+        <div className={styles['paneContent']}>
+            {sections
+                .filter((section) => {
+                    if (section === 'pageDetails') {
+                        return _.get(formData[section], 'pages[0].pageDetails') !== ''
+                    }
+                    return !!formData[section]
+                })
+                .map((section) => {
+                    return (
+                        <>
+                            {section === 'pageDetails'
+                                ? renderPageDetails(formData, section)
+                                : renderDetails(formData, section)
+                            }
+                        </>
+                    )
+                })}
+        </div>
+    )
+}
+
+function renderPageDetails(formData: any, section: string): Array<JSX.Element> {
+    const items: { pages: [] } = formData[section] || {}
+    const pages: [] = items?.pages || []
+
+    return pages.map((page: { pageDetails?: string, pageName?: string }, index: number) => {
+        return (
+            <div>
+                {page?.pageName && (
+                    <div className={styles['detail']}>
+                        <h4 className={styles['header']}>Page {index + 1} Name</h4>
+                        <p className={styles['content']}>{page?.pageName}</p>
+                    </div>
+                )}
+                {page?.pageDetails && (
+                    <div className={styles['detail']}>
+                        <h4 className={styles['header']}>Page {index + 1} Requirements</h4>
+                        <p className={styles['content']}>{page?.pageDetails}</p>
+                    </div>
+                )}
+            </div>
+        )
+    })
+}
+
+function renderDetails(formData: any, section: string): Array<JSX.Element | Array<JSX.Element>> {
+    let items: any = formData[section] || {}
+    if (formData?.workType?.selectedWorkType === 'Find Me Data') {
+        items = _.omit(items, ['projectTitle', 'assetsUrl', 'goals'])
+    } else {
+        items = _.omit(items, [
+            'findMeProjectTitle',
+            'analysis',
+            'primaryDataChallenge',
+            'primaryDataChallengeOther',
+            'sampleData',
+        ])
+    }
+    return Object.keys(items).map((key) => {
+        if (_.isArray(items[key])) {
+            return _.map(items[key], (item, i) => (
+                <div className={styles['detail']} key={i}>
+                    <h4 className={styles['header']}>
+                        {key} {i + 1}
+                    </h4>
+                    <p className={styles['content']}>
+                        {Object.keys(item).map((subKey) =>
+                            renderOption(item[subKey], subKey)
+                        )}
+                    </p>
+                </div>
+            ))
+        }
+        return renderOption(items[key])
+    })
+}
+
+function renderOption(option: any, title: string = ''): JSX.Element {
+    return (
+        <>
+            {option.option && (
+                <div className={styles['detail']}>
+                    <h4 className={styles['header']}>{option.title || title}</h4>
+                    <p className={styles['content']}>{formatOption(option.option)}</p>
+                </div>
+            )}
+        </>
+    )
+}
+
+function formatOption(option: Array<string> | {}): string {
+    if (_.isArray(option)) {
+        return option.join(', ')
+    }
+    if (_.isObject(option)) {
+        return formatOption(_.get(option, 'option', option))
+    }
+    return option
+}
+
+export default WorkDetailDetailsPane

src-ts/tools/work/work-detail-details/work-detail-details-pane/WorkDetailDetailsPane.tsx

@@ -0,0 +1 @@
+export { default as WorkDetailDetailsPane } from './WorkDetailDetailsPane'

src-ts/tools/work/work-detail-details/work-detail-details-pane/index.ts

@@ -81,7 +81,7 @@ const WorkItem = ({
       return workUtil.isReviewPhaseEnded(work);
     }
   }, [work]);
-  
+
   useEffect(() => {
     if (!work) {
       return;
@@ -123,7 +123,7 @@ const WorkItem = ({
     if (!work) {
       return;
     }
-    
+
     if (work || selectedTab === "messaging") {
       getForumNotifications(work.id);
     }
@@ -133,7 +133,7 @@ const WorkItem = ({
     if (!work) {
       return;
     }
-    
+
     if (isReviewPhaseEnded) {
       getSolutionsCount(work.id);
     }
@@ -242,13 +242,7 @@ const WorkItem = ({
 
             {selectedTab === 'details' && (
               <div>
-                <WorkDetailDetails>
-                  <ReviewTable
-                    formData={_.get(details, "intake-form.form", {})}
-                    enableEdit={false}
-                    enableStepsToggle={false}
-                  />
-                </WorkDetailDetails>
+                <WorkDetailDetails formData={_.get(details, "intake-form.form", {})} />
               </div>
             )}