Fix add to calendar CTA

opengento · Feb 4, 2025 · 9526ec7 · 9526ec7
1 parent d0df73a
commit 9526ec7
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/src/components/Program/ProgramTile.tsx b/src/components/Program/ProgramTile.tsx
@@ -21,7 +21,7 @@ const ProgramTile = ({
   return (
     <div className="program-tile bg-white rounded-xl flex flex-col justify-between gap-6 p-4 md:p-6 h-full">
       <div className="flex flex-col gap-6">
-        <Session session={session} onPopInClick={onPopInClick} />
+        <Session session={session} showAddToCalendar={false} onPopInClick={onPopInClick} />
         <div className="program-tile-speakers flex flex-col gap-2">
           {speakers.map((speaker) => (
             <Person person={speaker} appearance="program" key={speaker.id} />

diff --git a/src/components/Speakers/Session/Session.tsx b/src/components/Speakers/Session/Session.tsx
@@ -11,10 +11,11 @@ import { BsFillInfoCircleFill } from "react-icons/bs";
 
 interface Session {
   session: SessionProps;
+  showAddToCalendar?: boolean;
   onPopInClick?: () => void;
 }
 
-const Session = ({ session, onPopInClick }: Session) => {
+const Session = ({ session, showAddToCalendar = true, onPopInClick }: Session) => {
   const { t } = useTranslation(["speakers"]);
   return (
     <div className="flex flex-col md:flex-row justify-between">
@@ -58,7 +59,7 @@ const Session = ({ session, onPopInClick }: Session) => {
           ))}
         </div>
       </div>
-      {!!session.eventUrl && (
+      {showAddToCalendar && !!session.eventUrl && (
         <div className="flex flex-col justify-end items-start md:items-end w-full">
           <ButtonLink
             variant="secondary-invert"

diff --git a/src/components/Speakers/Session/SessionPopInContent.tsx b/src/components/Speakers/Session/SessionPopInContent.tsx
@@ -5,6 +5,7 @@ import Person from "@/components/Person/Person";
 import useDataProvider from "@/hooks/useDataProvider";
 import Typography from "@/components/Typography/Typography";
 import { PiCalendarPlus } from "react-icons/pi";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
 
 const SessionPopInContent = ({ session }: { session: SessionProps }) => {
   const dataProvider = useDataProvider();
@@ -13,23 +14,27 @@ const SessionPopInContent = ({ session }: { session: SessionProps }) => {
     .filter((speaker) => session.speakers.includes(speaker.id));
   return (
     <div className="session-pop-in-content flex flex-col gap-6">
-      <Session session={session} />
+      <Session session={session}/>
       <div className="flex flex-col rounded-xl bg-white p-6 gap-6">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           {speakers.map((speaker) => (
-            <Person person={speaker} appearance="program" key={speaker.id} />
+            <Person person={speaker} appearance="program" key={speaker.id}/>
           ))}
         </div>
         <Typography variant="body1">{session.description}</Typography>
       </div>
-      <div className="flex justify-center">
-        <div className="flex flex-row items-center gap-1 bg-primary px-4 py-2 rounded-full hover:cursor-pointer">
-          <PiCalendarPlus size={20} className="text-white" />
-          <span className="text-base text-white font-semibold">
-            Ajouter cette conférence à mon agenda
-          </span>
+      {!!session.eventUrl && (
+        <div className="mx-auto">
+          <ButtonLink
+            variant="secondary-invert"
+            href={session.eventUrl}
+            iconPosition="left"
+            icon={<PiCalendarPlus />}
+          >
+            Ajouter à mon agenda
+          </ButtonLink>
         </div>
-      </div>
+      )}
     </div>
   );
 };