Skip to content

Commit

Permalink
feat(customer details): implement new UI design for customer detail (#…
Browse files Browse the repository at this point in the history 
…976)
  • Loading branch information
@kunalgaurav-bmw
kunalgaurav-bmw authored Aug 26, 2024
1 parent 194a81c commit aae4195
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 65 deletions.
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@

## Unreleased

### Feature

- Customer Detail Data Overlay
- implement new UI design for customer detail data overlay

## 2.2.0-RC1

### Change
Expand Down
4 changes: 2 additions & 2 deletions ...pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/CompanyDetailsHelper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const getTitle = (
status: getStatus(),
}}
>
<Typography variant="h3">
<Typography variant="h4">
{t('content.admin.registration-requests.overlay.tab2SubTitle')}
</Typography>
</Trans>
Expand All @@ -85,7 +85,7 @@ export const getIntro = (
selectedCompany: CompanyDetail,
t: typeof i18next.t
) => {
if (activeTab === 1) {
if (activeTab === 2) {
return (
<Trans
values={{
Expand Down
123 changes: 81 additions & 42 deletions src/components/pages/Admin/components/RegistrationRequests/CompanyDetailOverlay/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ import { download } from 'utils/downloadUtils'
import CheckListFullButtons from '../components/CheckList/CheckListFullButtons'
import { getIntro, getTitle } from './CompanyDetailsHelper'
import { useFetchNewDocumentByIdMutation } from 'features/appManagement/apiSlice'
import { KeyValueView } from 'components/shared/basic/KeyValueView'
import { type UniqueIdType } from 'features/admin/registration/types'
import { StatusProgress } from '../registrationTableColumns'

Expand Down Expand Up @@ -196,27 +195,34 @@ const CompanyDetailOverlay = ({
{company?.documents && company.documents.length > 0 ? (
<>
{company.documents.map(
(contract: { documentId: string; documentType: string }) => (
(contract: {
documentId: string
documentType: string
documentSize?: number
}) => (
<Box key={contract.documentId}>
<DropPreviewFile
uploadFile={{
name: contract?.documentType,
status: UploadStatus.UPLOAD_SUCCESS,
}}
translations={{
placeholder: '',
uploadProgress: '',
uploadSuccess: '',
uploadError: '',
}}
onDownload={() => {
void downloadDocument(
contract.documentId,
contract.documentType
)
}}
enableDeleteIcon={false}
/>
<div className={'doc-item'}>
<DropPreviewFile
uploadFile={{
name: contract?.documentType,
status: UploadStatus.UPLOAD_SUCCESS,
size: contract?.documentSize,
}}
translations={{
placeholder: '',
uploadProgress: '',
uploadSuccess: '',
uploadError: '',
}}
onDownload={() => {
void downloadDocument(
contract.documentId,
contract.documentType
)
}}
enableDeleteIcon={false}
/>
</div>
</Box>
)
)}
Expand Down Expand Up @@ -244,7 +250,7 @@ const CompanyDetailOverlay = ({
color="label"
label={getLocaleStr(role.companyRole)}
sx={{
marginRight: '8px',
marginRight: '10px',
}}
/>
)
Expand Down Expand Up @@ -303,12 +309,16 @@ const CompanyDetailOverlay = ({
id={`simple-tab-${activeTab}`}
aria-controls={`simple-tabpanel-${activeTab}`}
/>
<div className="div-container">
{' '}
<div className="tab-divider" />
</div>
<Tab
icon={getStepIcon('2')}
iconPosition="start"
sx={{
fontSize: '14px',
width: '50%',
width: activeTab ? '50%' : '42%',
textTransform: 'capitalize',
color: '#111 !important',
'&.Mui-selected': {
Expand All @@ -319,6 +329,16 @@ const CompanyDetailOverlay = ({
id={`simple-tab-${activeTab}`}
aria-controls={`simple-tabpanel-${activeTab}`}
/>
<>
{selectedRequest && !activeTab && (
<StatusProgress
application={selectedRequest}
trans={t}
type={false}
isProgressOnly={true}
/>
)}
</>
</Tabs>
</Box>
</>
Expand Down Expand Up @@ -346,34 +366,53 @@ const CompanyDetailOverlay = ({
) : (
<DialogContent
sx={{
padding: '0 120px',
marginBottom: 5,
padding: '30px 110px 56px 110px',
width: '100%',
marginBottom: activeTab ? 5 : 0,
}}
>
<TabPanel value={activeTab} index={0}>
<Box sx={{ width: '100%', margin: '50px 0' }}>
<KeyValueView
cols={2.3}
title={t(
<Box sx={{ width: '100%' }} className={'company-details'}>
<Typography className="title" variant="h4">
{t(
'content.admin.registration-requests.overlay.companydatatitle'
)}
items={companyData}
/>
</Typography>
{companyData?.map((detail) => (
<div className="detail" key={detail.key}>
<Typography variant="body2" className="detail-name">
{detail.key}
</Typography>
<div></div>
<Typography variant="label2" className="detail-text">
{detail.value}
</Typography>
</div>
))}
</Box>
<Box ref={modalElement} sx={{ width: '100%' }}>
<KeyValueView
cols={2.3}
title={t('content.admin.registration-requests.overlay.docs')}
items={documentData}
/>
<KeyValueView
cols={2.3}
title={t('content.admin.registration-requests.overlay.roles')}
items={companyRoleData}
/>
<Typography className="title" variant="h4">
{t('content.admin.registration-requests.overlay.docs')}
</Typography>

<div className="document-container">
{documentData?.map((detail) => (
<div key={detail.key}>{detail.value}</div>
))}
</div>
</Box>
<Box
ref={modalElement}
className={'role-details'}
sx={{ width: '100%' }}
>
<Typography className="title" variant="h4">
{t('content.admin.registration-requests.overlay.roles')}
</Typography>
<div>{companyRoleData?.[0]?.value}</div>
</Box>
</TabPanel>
<TabPanel value={activeTab} index={1}>
<TabPanel value={activeTab} index={2}>
<Box sx={{ width: '100%', height }}>
{selectedRequest && (
<div
Expand Down
99 changes: 99 additions & 0 deletions src/components/pages/Admin/components/RegistrationRequests/RegistrationRequests.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,3 +204,102 @@
padding: 0 5px;
}
}

.company-details {
padding: 30px 32px 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 30px;
margin-bottom: 28px;
background-color: #f9f9f9;
overflow: hidden;

.title {
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 40px;
letter-spacing: -0.18px;
margin-bottom: 62px;
}

.detail {
display: flex;
justify-content: flex-start;
margin-bottom: 8px;
}

.detail-name {
min-width: 225px;
padding-right: 48px;
text-align: left;
}

.detail-text {
flex-grow: 1;
text-align: left;
}

@media (max-width: 600px) {
.detail {
flex-direction: column;
}

.detail-name {
padding-right: 0;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
}
}

.document-container {
margin-top: 28px;
margin-bottom: 28px;
}

.doc-item {
margin-bottom: 14px;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 8px;
background-color: #0f71cb0d;

.MuiBox-root {
margin-bottom: 0;
}
}

.role-details {
padding: 30px 32px 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
border-radius: 30px;
background-color: #f9f9f9;

.title {
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 40px;
letter-spacing: -0.18px;
margin-bottom: 62px;
}
}

.div-container {
width: 25px;
padding: 4px 12px;
justify-content: center;
align-items: center;

.tab-divider {
background-color: #dcdcdc;
width: 1px;
height: 100%;
}
}
52 changes: 32 additions & 20 deletions src/components/pages/Admin/components/RegistrationRequests/registrationTableColumns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,15 @@ interface StatusProgressProps {
trans: typeof i18next.t
type?: boolean
onConfirmationCancel?: (applicationId: string, name: string) => void
isProgressOnly?: boolean
}

export const StatusProgress = ({
application,
trans,
type = true,
onConfirmationCancel,
isProgressOnly = false,
}: StatusProgressProps) => {
const t = trans
const groupedItems = _.chain(application.applicationChecklist)
Expand All @@ -64,26 +66,36 @@ export const StatusProgress = ({
statusText: string
) => {
return (
<div
className="progressMain"
style={{
border: `2px solid ${style.border}`,
background: style.background,
}}
>
<Progress
applicationStatus={row.applicationStatus}
items={items}
totalItems={row.applicationChecklist.length}
/>
<Typography
variant="body3"
className="statusText"
sx={{ color: style.color }}
>
{statusText}
</Typography>
</div>
<>
{isProgressOnly ? (
<Progress
applicationStatus={row.applicationStatus}
items={items}
totalItems={row.applicationChecklist.length}
/>
) : (
<div
className="progressMain"
style={{
border: `2px solid ${style.border}`,
background: style.background,
}}
>
<Progress
applicationStatus={row.applicationStatus}
items={items}
totalItems={row.applicationChecklist.length}
/>
<Typography
variant="body3"
className="statusText"
sx={{ color: style.color }}
>
{statusText}
</Typography>
</div>
)}
</>
)
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/pages/AppSubscription/AppSubscriptionDetailOverlay/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/********************************************************************************
* Copyright (c) 2021, 2024 Contributors to the Eclipse Foundation
* Copyright (c) 2024 Contributors to the Eclipse Foundation
*
* See the NOTICE file(s) distributed with this work for additional
* information regarding copyright ownership.
Expand Down
Loading

0 comments on commit aae4195

Please sign in to comment.