Merged in feat/SW-1555-jobylon-integration (pull request #1484)

Feat/SW-1555 jobylon integration

* feat(SW-1555): Added jobylon feed query

* feat(SW-1555): Added jobylon feed component


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -0,0 +1,57 @@
+import { OpenInNewSmallIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./jobylonCard.module.css"
+
+import type { JobylonItem } from "@/types/trpc/routers/jobylon"
+
+interface JobylonCardProps {
+  job: JobylonItem
+}
+
+export default async function JobylonCard({ job }: JobylonCardProps) {
+  const intl = await getIntl()
+  const lang = getLang()
+  const deadlineText = job.toDate
+    ? intl.formatMessage(
+        { id: "Deadline: {date}" },
+        { date: job.toDate.locale(lang).format("Do MMMM") }
+      )
+    : intl.formatMessage({ id: "Open for application" })
+
+  return (
+    <div className={styles.jobylonCard}>
+      <Subtitle asChild>
+        <h3>{job.title}</h3>
+      </Subtitle>
+
+      <div className={styles.contentWrapper}>
+        <div className={styles.content}>
+          <Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
+          <Caption>
+            {job.locations
+              .map((loc) => `${loc.city}, ${loc.country}`)
+              .join(" | ")}
+          </Caption>
+          <Caption color="uiTextPlaceholder">{deadlineText}</Caption>
+        </div>
+        <Button
+          theme="base"
+          size="small"
+          intent="tertiary"
+          variant="icon"
+          asChild
+        >
+          <a href={job.url} target="_blank" rel="noopener noreferrer">
+            {intl.formatMessage({ id: "View & apply" })}
+            <OpenInNewSmallIcon />
+          </a>
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css

@@ -0,0 +1,21 @@
+.jobylonCard {
+  display: grid;
+  width: 100%;
+  padding: var(--Spacing-x2);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.contentWrapper {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .contentWrapper {
+    grid-template-columns: 1fr auto;
+    gap: var(--Spacing-x2);
+    align-items: end;
+  }
+}

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/index.tsx

@@ -0,0 +1,60 @@
+import { getJobylonFeed } from "@/lib/trpc/memoizedRequests"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+
+import JobylonCard from "./JobylonCard"
+
+import styles from "./jobylonFeed.module.css"
+
+interface JobylonFeedProps {
+  title?: string
+  subtitle?: string
+  link?: { href: string; text: string }
+}
+
+export default async function JobylonFeed({
+  title,
+  subtitle,
+  link,
+}: JobylonFeedProps) {
+  const intl = await getIntl()
+  const allJobs = await getJobylonFeed()
+
+  if (!allJobs) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader
+        link={link}
+        preamble={subtitle}
+        title={title}
+        headingAs="h3"
+        headingLevel="h2"
+      />
+      <div className={styles.content}>
+        <Subtitle type="two">
+          {intl.formatMessage(
+            {
+              id: "{count, plural, one {{count} Result} other {{count} Results}}",
+            },
+            { count: allJobs.length }
+          )}
+        </Subtitle>
+        <ul className={styles.list}>
+          {allJobs.map((job) => (
+            <li key={job.id}>
+              <JobylonCard job={job} />
+            </li>
+          ))}
+        </ul>
+      </div>
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/jobylonFeed.module.css

@@ -0,0 +1,10 @@
+.list {
+  list-style: none;
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.content {
+  display: grid;
+  gap: var(--Spacing-x2);
+}

apps/scandic-web/components/Blocks/DynamicContent/index.tsx

@@ -19,6 +19,8 @@ import SoonestStays from "@/components/Blocks/DynamicContent/Stays/Soonest"
 import UpcomingStays from "@/components/Blocks/DynamicContent/Stays/Upcoming"
 import LoadingSpinner from "@/components/LoadingSpinner"
 
+import JobylonFeed from "./JobylonFeed"
+
 import type { DynamicContentProps } from "@/types/components/blocks/dynamicContent"
 import { DynamicContentEnum } from "@/types/enums/dynamicContent"
 
@@ -45,6 +47,8 @@ function DynamicContentBlocks(props: DynamicContentProps) {
       return (
         <HowItWorks dynamic_content={dynamic_content} firstItem={firstItem} />
       )
+    case DynamicContentEnum.Blocks.components.jobylon_feed:
+      return <JobylonFeed {...dynamic_content} />
     case DynamicContentEnum.Blocks.components.loyalty_levels:
       return (
         <LoyaltyLevels