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

Refactor contact module according to design #954

Merged
merged 3 commits into from
Dec 11, 2024
Merged

Refactor contact module according to design #954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
afb54c8
Refactor contact module according to design
idamand Dec 6, 2024
7e22640
Fix aria-role
idamand Dec 6, 2024
7d0573e
Merge branch 'v3' into v3-refactor-contact-box-in-customer-case
idamand Dec 11, 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
45 changes: 27 additions & 18 deletions src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { getTranslations } from "next-intl/server";
import { Suspense } from "react";

import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
import Text from "src/components/text/Text";
import { fetchEmployeesByEmails } from "src/utils/employees";
import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
Expand All @@ -8,9 +10,7 @@ import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
import { loadStudioQuery } from "studio/lib/store";

import styles from "./contactInformation.module.css";
import ContactSelector, {
ContactByLocationMap,
} from "./contactSelector/ContactSelector";
import ContactSelector, { ContactByLocationMap } from "./ContactSelector";

interface ContactInformationProps {
language: string;
Expand Down Expand Up @@ -54,21 +54,30 @@ export default async function ContactInformation({
);
const t = await getTranslations("contact_information");
return (
<div className={styles.wrapper}>
<div className={styles.content}>
<div className={styles.titleSection}>
<Text type={"bodyXl"}>{t("help")}</Text>
<Text type="bodyBig">{t("contact_sale")} </Text>
<>
<section className={styles.contactBox}>
<div
className={`${styles.contactBox__inner} ${styles["contactBox__inner--light"]}`}
>
<div className={styles.textContent}>
<Text type="h3" as="h2">
{t("help")}
</Text>
<Text type="bodyBig">{t("contact_sale")} </Text>
</div>
<div className={styles.contactSelectorWrapper}>
<Suspense fallback={<EmployeeCardSkeleton background={"light"} />}>
<ContactSelector
language={language}
locations={locationsWithContact}
contactByLocation={contactByLocation}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shouldn't be awaited, but left a promise to utilise streaming and lazy loading of content (quicker load time)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean? Should I not use Suspense?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like this


const myDataAsPromise = fetchFromSomeWhereWithoutAwait();

// later

<Suspense>
  <MyComponent data={myDataAsPromise} />
</Suspense>


// inside MyComponent

const actualData = use(data); // data refers to promise that was created outside the suspense

This will make the data be streamed from the server to the client but not have it block loading

employeePageSlug={employeePageSlug}
background={"light"}
/>
</Suspense>
</div>
</div>
<div className={styles.contactSection}>
<ContactSelector
language={language}
locations={locationsWithContact}
contactByLocation={contactByLocation}
employeePageSlug={employeePageSlug}
/>
</div>
</div>
</div>
</section>
</>
);
}
75 changes: 75 additions & 0 deletions src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
"use client";

import { useState } from "react";

import EmployeeCard from "src/components/employeeCard/EmployeeCard";
import { Tag } from "src/components/tag";
import { ChewbaccaEmployee } from "src/types/employees";
import { CompanyLocation } from "studio/lib/interfaces/companyDetails";

import styles from "./contactInformation.module.css";

export type ContactByLocationMap = {
[locationId: string]: ChewbaccaEmployee;
};

export interface ContactSelectorProps {
language: string;
locations: CompanyLocation[];
contactByLocation: ContactByLocationMap;
employeePageSlug?: string;
background: "dark" | "light";
}

export default function ContactSelector({
language,
locations,
contactByLocation,
employeePageSlug,
background = "light",
}: ContactSelectorProps) {
const locationIds = Object.keys(contactByLocation);

const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
locationIds[0],
);

if (locationIds.length === 0) {
return;
}

const selectedOrDefaultLocationId = selectedLocationId ?? locationIds[0];
console.log(selectedLocationId);

return (
<>
<div className={styles.contactSelector}>
<div className={styles.tagList} role="tablist">
{locations.map((location) => (
<Tag
key={location._id}
type="button"
role="tab"
background={background}
aria-selected={selectedLocationId === location._id}
aria-controls={`panel-${location._id}`}
id={`tab-${location._id}`}
active={selectedLocationId === location._id}
onClick={() => setSelectedLocationId(location._id)}
text={location.companyLocationName}
/>
))}
</div>
<div className={styles.employeeCard}>
<div>
<EmployeeCard
language={language}
employee={contactByLocation[selectedOrDefaultLocationId]}
employeePageSlug={employeePageSlug}
/>
</div>
</div>
</div>
</>
);
}
76 changes: 59 additions & 17 deletions src/components/customerCases/customerCase/contactInformation/contactInformation.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,74 @@
.wrapper {
display: flex;
.contactBox {
max-width: var(--max-content-width-large);
}

.contactBox__inner {
--_contactBox__background: var(--background-bg-dark);
--_contactBox__color: var(--text-primary-light);

display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

padding: 1.5rem 3rem;
flex-direction: column;
margin: 4rem 0;
justify-content: flex-end;
align-items: flex-start;
gap: var(--Padding-l, 48px);
align-self: stretch;

@media (min-width: 1024px) {
align-items: center;
}
border-radius: var(--radius-small);
background: var(--_contactBox__background);
color: var(--_contactBox__color);
}
.contactBox__inner--light {
--_contactBox__background: var(--background-bg-light-secondary);
--_contactBox__color: var(--text-primary);
}

.content {
.textContent {
height: 100%;
display: flex;
flex-direction: row;
flex-direction: column;
gap: 1rem;
max-width: 960px;

@media (max-width: 1024px) {
flex-direction: column;
gap: 2rem;
}
justify-content: flex-end;
}

.titleSection {
.contactSelectorWrapper {
container-type: inline-size;
container-name: contactSelectorWrapper;
}

.contactSelector {
display: flex;
gap: 1rem;
}

.tagList {
display: flex;
flex-direction: column;
gap: 0.75rem;

align-items: flex-start;
min-width: 120px;
}

.contactSection {
display: flex;
gap: 1.5rem;
.employeeCard {
flex: 1;
}

@media (max-width: 400px) {
.contactBox__inner {
padding: 1rem 1rem;
}
}

@container contactSelectorWrapper (max-width: 350px) {
.contactSelector {
flex-direction: column;
}

.tagList {
flex-direction: row;
}
}
72 changes: 0 additions & 72 deletions ...ponents/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions .../customerCases/customerCase/contactInformation/contactSelector/contactSelector.module.css
View file
Open in desktop

This file was deleted.

Loading