Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

V3 fix projectinfo #914

Open
wants to merge 2 commits into
base: v3
Choose a base branch
from
Open

V3 fix projectinfo #914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
729629b
Fix check to see if consultants are in the consultant list
idamand Nov 27, 2024
9a54b10
Fix styling on projectinfo
idamand Nov 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 12 additions & 9 deletions src/components/customerCases/customerCase/CustomerCase.tsx
View file
Open in desktop
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 @@ -30,11 +35,9 @@ export default async function CustomerCase({
{customerCase.basicTitle}
</Text>
<hr className={styles.divider} />
{consultantsResult.ok && (
<div className={styles.projectInfoWrapper}>
<CustomerCaseProjectInfo projectInfo={customerCase.projectInfo} />
</div>
)}
<div className={styles.projectInfoWrapper}>
<CustomerCaseProjectInfo projectInfo={customerCase.projectInfo} />
</div>
<div className={styles.mainImageWrapper}>
<SanitySharedImage image={customerCase.image} />
</div>
Expand All @@ -43,7 +46,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
Open in desktop
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
216 changes: 107 additions & 109 deletions src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,147 +20,145 @@ 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}>{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}>{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
Open in desktop
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