Merge pull request #351 from topcoder-platform/PROD-1980_move-work-details-details-to-src-ts

Prod 1980 move work details details to src ts

Author: brooketopcoder

src-ts/tools/index.ts

@@ -1,2 +1,2 @@
 export { default as ToolsRoutes } from './tools.routes'
-export { WorkFeedback, WorkDetailHeader, WorkDetailSummary } from './work'
+export { WorkFeedback, WorkDetailDetails, WorkDetailHeader, WorkDetailSummary } from './work'

src-ts/tools/work/index.ts

@@ -1,3 +1,4 @@
+export * from './work-detail-details'
 export * from './work-detail-header'
 export * from './work-detail-summary'
 export * from './work.routes'

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

@@ -0,0 +1,10 @@
+@import "../../../lib/styles";
+
+.wrap {
+  display: flex;
+  padding-bottom: 32px;
+}
+
+.details-content {
+  flex-grow: 2;
+}

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

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

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

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

src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.module.scss

@@ -0,0 +1,22 @@
+@import '../../../../lib/styles';
+
+.wrap {
+    min-width: 323px;
+    padding-left: $pad-xxxxl;
+  
+    border-left: $border-xs solid $black-10;
+    margin-left: $pad-xxxxl;
+    color: $black-100;
+}
+
+.link {
+    display: block;
+    @include font-roboto;
+    @include font-weight-bold;
+    font-size: 14px;
+    line-height: 14px;
+    color: $turq-160;
+    margin-top: $pad-lg;
+    cursor: pointer;
+    text-transform: uppercase;
+}

src-ts/tools/work/work-detail-details/work-detail-details-sidebar/WorkDetailDetailsSidebar.tsx

@@ -0,0 +1,55 @@
+import { Dispatch, FC, SetStateAction, useState } from 'react'
+
+import { OrderContractModal, PrivacyPolicyModal, TermsModal } from '../../../../lib'
+
+import styles from './WorkDetailDetailsSidebar.module.scss'
+
+interface WorkDetailDetailsSidebarProps {
+}
+
+const WorkDetailDetailsSidebar: FC<WorkDetailDetailsSidebarProps> = (props: WorkDetailDetailsSidebarProps) => {
+    const [isOrderContractModalOpen, setIsOrderContractModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [isPrivacyPolicyModalOpen, setIsPrivacyPolicyModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+    const [isTermsModalOpne, setIsTermsModalOpen]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false)
+
+    return (
+        <>
+            <OrderContractModal isOpen={isOrderContractModalOpen} onClose={() => setIsOrderContractModalOpen(false)} />
+            <PrivacyPolicyModal isOpen={isPrivacyPolicyModalOpen} onClose={() => setIsPrivacyPolicyModalOpen(false)} />
+            <TermsModal isOpen={isTermsModalOpne} onClose={() => setIsTermsModalOpen(false)} />
+
+            <div className={styles['wrap']}>
+                <h4>supporting information</h4>
+                <a
+                    className={styles['link']}
+                    role='button'
+                    tabIndex={0}
+                    onClick={() => setIsOrderContractModalOpen(true)}
+                    rel='noopener noreferrer'
+                >
+                    ORDER CONTRACT
+                </a>
+                <a
+                    className={styles['link']}
+                    role='button'
+                    tabIndex={0}
+                    onClick={() => setIsPrivacyPolicyModalOpen(true)}
+                    rel='noopener noreferrer'
+                >
+                    PRIVACY POLICY
+                </a>
+                <a
+                    className={styles['link']}
+                    role='button'
+                    tabIndex={0}
+                    onClick={() => setIsTermsModalOpen(true)}
+                    rel='noopener noreferrer'
+                >
+                    TERMS
+                </a>
+            </div>
+        </>
+    )
+}
+
+export default WorkDetailDetailsSidebar

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

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