Skip to content

Commit

Permalink
V3 fix projectinfo (#914)
Browse files Browse the repository at this point in the history 
* Fix check to see if consultants are in the consultant list

* Fix styling on projectinfo

* Fix linting
  • Loading branch information
@idamand
idamand authored Nov 28, 2024
1 parent d9fc3e0 commit 8d79813
Show file tree
Hide file tree
Showing 4 changed files with 134 additions and 130 deletions.
27 changes: 15 additions & 12 deletions src/components/customerCases/customerCase/CustomerCase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,14 @@ export default async function CustomerCase({
customerCase,
customerCasesPagePath,
}: CustomerCaseProps) {
const consultantsResult = await fetchEmployeesByEmails(
customerCase.projectInfo.consultants.map((e) => e.employeeEmail),
);
let consultantsResult;

if (customerCase.projectInfo.consultants) {
const consultantsEmail = customerCase.projectInfo.consultants.map(
(e) => e.employeeEmail,
);
consultantsResult = await fetchEmployeesByEmails(consultantsEmail);
}

return (
<div className={styles.wrapper}>
Expand All @@ -32,14 +37,12 @@ export default async function CustomerCase({
color={customerCase.clientColors.color}
/>
<hr className={styles.divider} />
{consultantsResult.ok && (
<div className={styles.projectInfoWrapper}>
<CustomerCaseProjectInfo
projectInfo={customerCase.projectInfo}
clientColors={customerCase.clientColors}
/>
</div>
)}
<div className={styles.projectInfoWrapper}>
<CustomerCaseProjectInfo
projectInfo={customerCase.projectInfo}
clientColors={customerCase.clientColors}
/>
</div>
<div className={styles.mainImageWrapper}>
<SanitySharedImage image={customerCase.image} />
</div>
Expand All @@ -48,7 +51,7 @@ export default async function CustomerCase({
<CustomerCaseSection key={section._key} section={section} />
))}
</div>
{consultantsResult.ok && (
{consultantsResult?.ok && (
<CustomerCaseConsultants
language={customerCase.language}
consultants={consultantsResult.value}
Expand Down
5 changes: 3 additions & 2 deletions src/components/customerCases/customerCase/customerCase.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
flex-direction: column;
margin: 4rem 2rem;
align-items: center;
justify-content: center;

@media (max-width: 1024px) {
margin: 2rem 1rem;
Expand Down Expand Up @@ -53,8 +54,8 @@
.projectInfoWrapper {
display: flex;
flex-direction: column;
align-self: center;
width: 100%;
justify-content: center;
align-items: center;
}

.sectionsWrapper {
Expand Down
228 changes: 113 additions & 115 deletions src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,153 +23,151 @@ export default async function CustomerCaseProjectInfo({
}: CustomerCaseProjectInfoProps) {
const t = await getTranslations("customer_case");

const consultantsFirstNames = projectInfo.consultants.map(
(n) => n.employeeFirstName,
);
let consultantsFirstNames;

if (projectInfo.consultants) {
consultantsFirstNames = projectInfo.consultants.map(
(n) => n.employeeFirstName,
);
}

return (
<>
<div className={styles.projectInfo}>
<div className={styles.projectInfoInner}>
{projectInfo.customerSectors && (
<div className={styles.projectInfo}>
<div className={styles.projectInfoInner}>
{projectInfo.customerSectors && (
<div>
<Text className={styles.title} type="labelRegular">
{t("customer").toUpperCase()}
</Text>
<div className={styles.badgeWrapper}>
{projectInfo.customerSectors.map((sector: CustomerSector) => (
<Badge
key={sector._key}
badgeColor={clientColors.color}
textColor={clientColors.badgeText}
>
{sector.customerSector}
</Badge>
))}
</div>
</div>
)}
{consultantsFirstNames && (
<div>
<Text className={styles.title} type="labelRegular">
{t("variants").toUpperCase()}
</Text>
<div className={styles.varianter}>
<Text className={styles.preFancyCharacter}>【 </Text>
{consultantsFirstNames.map((name) => (
<Text
key={name}
type="bodyNormal"
className={styles.dotSeperatorVarianter}
>
{name}
</Text>
))}
<Text className={styles.afterFancyCharacter}> 】</Text>
</div>
</div>
)}
{projectInfo.collaborators && (
<div>
<Text className={styles.title} type="labelRegular">
{t("collaborators").toUpperCase()}
</Text>
<div className={styles.projectInfoItem}>
{projectInfo.collaborators.map((collaborator) => (
<Text
type="bodyNormal"
key={collaborator}
className={styles.dotSeperator}
>
{collaborator}
</Text>
))}
</div>
</div>
)}
{projectInfo.url && (
<div className={styles.urlWrapper}>
<Text className={styles.title} type="labelRegular">
{t("url")}
</Text>
<CustomLink
link={{
_key: "go-to-external-link",
_type: "link",
linkType: LinkType.External,
linkTitle: projectInfo.url,
url: projectInfo.url,
ariaLabel: projectInfo.url,
}}
/>
</div>
)}
</div>
{projectInfo.deliveries && (
<div className={styles.deliveries}>
{projectInfo.deliveries["projectManagement"] && (
<div>
<Text className={styles.title} type="labelRegular">
{t("customer").toUpperCase()}
{t("project_management").toUpperCase()}
</Text>
<div className={styles.badgeWrapper}>
{projectInfo.customerSectors.map((sector: CustomerSector) => (
<Badge
key={sector._key}
badgeColor={clientColors.color}
textColor={clientColors.badgeText}
>
{sector.customerSector}
</Badge>
))}
<div className={styles.projectInfoItem}>
{projectInfo.deliveries["projectManagement"].map(
(projectManagement) => (
<Text
type="bodyNormal"
key={projectManagement.key}
className={styles.dotSeperator}
>
{projectManagement.projectManagementDelivery}
</Text>
),
)}
</div>
</div>
)}
{consultantsFirstNames && (
{projectInfo.deliveries["design"] && (
<div>
<Text className={styles.title} type="labelRegular">
{t("variants").toUpperCase()}
{t("design").toUpperCase()}
</Text>
<div className={styles.varianter}>
<Text className={styles.preFancyCharacter}>【 </Text>
{consultantsFirstNames.map((name) => (
<div className={styles.projectInfoItem}>
{projectInfo.deliveries["design"].map((design) => (
<Text
key={name}
key={design.key}
type="bodyNormal"
className={styles.dotSeperatorVarianter}
className={styles.dotSeperator}
>
{name}
{design.designDelivery}
</Text>
))}
<Text className={styles.afterFancyCharacter}> 】</Text>
</div>
</div>
)}
{projectInfo.collaborators && (
{projectInfo.deliveries["development"] && (
<div>
<Text className={styles.title} type="labelRegular">
{t("collaborators").toUpperCase()}
{t("development").toUpperCase()}
</Text>
<div className={styles.projectInfoItem}>
{projectInfo.collaborators.map((collaborator) => (
{projectInfo.deliveries["development"].map((development) => (
<Text
key={development.key}
type="bodyNormal"
key={collaborator}
className={styles.dotSeperator}
>
{collaborator}
{development.developmentDelivery}
</Text>
))}
</div>
</div>
)}
{projectInfo.url && (
<div className={styles.urlWrapper}>
<Text className={styles.title} type="labelRegular">
{t("url")}
</Text>
<CustomLink
link={{
_key: "go-to-external-link",
_type: "link",
linkType: LinkType.External,
linkTitle: projectInfo.url,
url: projectInfo.url,
ariaLabel: projectInfo.url,
}}
/>
</div>
)}
</div>
<div>
{projectInfo.deliveries && (
<div className={styles.deliveries}>
{projectInfo.deliveries["projectManagement"] && (
<div>
<Text className={styles.title} type="labelRegular">
{t("project_management").toUpperCase()}
</Text>
<div className={styles.projectInfoItem}>
{projectInfo.deliveries["projectManagement"].map(
(projectManagement) => (
<Text
type="bodyNormal"
key={projectManagement.key}
className={styles.dotSeperator}
>
{projectManagement.projectManagementDelivery}
</Text>
),
)}
</div>
</div>
)}
{projectInfo.deliveries["design"] && (
<div>
<Text className={styles.title} type="labelRegular">
{t("design").toUpperCase()}
</Text>
<div className={styles.projectInfoItem}>
{projectInfo.deliveries["design"].map((design) => (
<Text
key={design.key}
type="bodyNormal"
className={styles.dotSeperator}
>
{design.designDelivery}
</Text>
))}
</div>
</div>
)}
{projectInfo.deliveries["development"] && (
<div>
<Text className={styles.title} type="labelRegular">
{t("development").toUpperCase()}
</Text>
<div className={styles.projectInfoItem}>
{projectInfo.deliveries["development"].map(
(development) => (
<Text
key={development.key}
type="bodyNormal"
className={styles.dotSeperator}
>
{development.developmentDelivery}
</Text>
),
)}
</div>
</div>
)}
</div>
)}
</div>
</div>
</>
)}
</div>
);
}
4 changes: 3 additions & 1 deletion src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
flex-direction: row;
gap: 1rem;
width: 100%;
max-width: 960px;

@media (max-width: 425px) {
flex-direction: column;
Expand All @@ -14,7 +15,7 @@
gap: 1.5rem;
display: flex;
flex-direction: column;
max-width: 50%;
width: 50%;
}

.badgeWrapper {
Expand Down Expand Up @@ -69,6 +70,7 @@
flex-direction: column;
gap: 1.5rem;
flex-wrap: wrap;
width: 50%;
}

.preFancyCharacter {
Expand Down

0 comments on commit 8d79813

Please sign in to comment.