From aa8406ea525d4ba9a0a491b19255b1f91e7ff14a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Thu, 17 Oct 2024 13:13:57 +0000
Subject: [PATCH] refactor: address review comments

---
 src/components/ui/ItemList.astro     |  10 +-
 src/components/widgets/Pricing.astro |   8 +-
 src/pages/registration.astro         | 168 ++++++++++++++++++++++-----
 3 files changed, 151 insertions(+), 35 deletions(-)

diff --git a/src/components/ui/ItemList.astro b/src/components/ui/ItemList.astro
index ad4be607..1b091fee 100644
--- a/src/components/ui/ItemList.astro
+++ b/src/components/ui/ItemList.astro
@@ -7,7 +7,7 @@ import BSlot from '@/components/utils/BSlot.astro';
 const { items = [], classes = {} } = Astro.props;
 
 const {
-  container: containerClass = '',
+  container: containerClass = 'gap-10',
   panel: panelClass = '',
   title: titleClass = '',
   description: descriptionClass = '',
@@ -23,9 +23,9 @@ const mergedIconClasses = twMerge('w-7 h-7 mr-2 rtl:mr-0 rtl:ml-2', defaultIconC
     <div
       class={containerClass}>
       {items.map(({ title, description, icon: IconElement, callsToAction, classes: itemClasses = {} }) => (
-        <div>
-          <div class={twMerge('flex flex-row max-w-md', panelClass, itemClasses?.panel)}>
-            <div class="flex justify-center">
+        <div class="mt-4">
+          <div class={twMerge('flex', panelClass, itemClasses?.panel)}>
+            <div class="flex justify-center items-center">
               {IconElement
                 ? <IconElement class={twMerge(mergedIconClasses, itemClasses?.icon)} />
                 : (
@@ -34,7 +34,7 @@ const mergedIconClasses = twMerge('w-7 h-7 mr-2 rtl:mr-0 rtl:ml-2', defaultIconC
                     </BSlot>
                   )}
             </div>
-            <div class="mt-0.5">
+            <div>
               {title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</h3>}
               {description && (
                 <p
diff --git a/src/components/widgets/Pricing.astro b/src/components/widgets/Pricing.astro
index f786c99c..9367abc9 100644
--- a/src/components/widgets/Pricing.astro
+++ b/src/components/widgets/Pricing.astro
@@ -31,7 +31,7 @@ const iconClasses = 'w-5 h-5 font-bold p-1 text-white';
       prices
       && prices.map(({ title, subtitle, pricing, items, callToAction, ribbonTitle }) => (
         <div class="flex flex-1 justify-center min-w-80">
-          <div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
+          <div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col text-center">
             {ribbonTitle && (
               <div class="absolute right-[-5px] 2xl:right-[-8px] rtl:right-auto rtl:left-[-8px] rtl:2xl:left-[-10px] top-[-5px] 2xl:top-[-10px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
                 <span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
@@ -47,8 +47,8 @@ const iconClasses = 'w-5 h-5 font-bold p-1 text-white';
               <div class="my-8">
                 {(pricing ?? []).map(p => (
                       <div class="flex items-center justify-center text-center mb-1">
-                        <span class={p.variant === 'secondary' ? 'text-muted text-3xl' : 'text-6xl font-extrabold'}>{p.price}</span>
-                        <span class={p.variant === 'secondary' ? 'text-2xl text-muted' : 'text-5xl'}>{p.currency}</span>
+                        <span class={p.variant === 'secondary' ? 'text-muted text-xl' : 'text-4xl font-extrabold'}>{p.price}</span>
+                        <span class={p.variant === 'secondary' ? 'text-lg text-muted' : 'text-3xl'}>{p.currency}</span>
                       </div>
                     <p class={`text-base lowercase text-gray-600 dark:text-slate-400 ${
                       p.variant === 'secondary' ? 'text-xs' : 'leading-6 '}`}>{p.period ?? ''}
@@ -73,7 +73,7 @@ const iconClasses = 'w-5 h-5 font-bold p-1 text-white';
                             </p>
                           )}
                           {description && (
-                            <p class="text-gray-600 dark:text-slate-400">
+                            <p class="text-gray-600 dark:text-slate-400 text-xs">
                               <Fragment set:html={description} />
                             </p>
                           )}
diff --git a/src/pages/registration.astro b/src/pages/registration.astro
index 6f21f1ca..72048dbd 100644
--- a/src/pages/registration.astro
+++ b/src/pages/registration.astro
@@ -1,8 +1,22 @@
 ---
 import Layout from '@/layouts/PageLayout.astro';
 import Pricing from '@/components/widgets/Pricing.astro';
-import ITablerX from 'virtual:icons/tabler/x';
+import WidgetWrapper from '@/components/ui/WidgetWrapper.astro';
+import ItemList from '@/components/ui/ItemList.astro';
+import Headline from '@/components/ui/Headline.astro';
 // import Contact from '@/components/widgets/Contact.astro';
+
+import ITablerX from 'virtual:icons/tabler/x';
+import IClarityInfoStandardLine from 'virtual:icons/clarity/info-standard-line';
+import ITablerFileCheck from 'virtual:icons/tabler/file-check';
+import ITablerTicketOff from 'virtual:icons/tabler/ticket-off';
+import ITablerCalendarMonth from 'virtual:icons/tabler/calendar-month';
+import ITablerCreditCard from 'virtual:icons/tabler/credit-card';
+import ITablerCreditCardRefund from 'virtual:icons/tabler/credit-card-refund';
+import ITablerPigMoney from 'virtual:icons/tabler/pig-money';
+import ITablerPigOff from 'virtual:icons/tabler/pig-off';
+import ITablerPodium from 'virtual:icons/tabler/podium';
+
 const currency = '€';
 const disadvantage = {
   icon: ITablerX,
@@ -10,6 +24,12 @@ const disadvantage = {
     icon: 'bg-red-500'
   }
 };
+const neutral = {
+  icon: IClarityInfoStandardLine,
+  classes: {
+    icon: 'bg-slate-500'
+  }
+};
 ---
 
 <Layout
@@ -47,19 +67,30 @@ const disadvantage = {
         ],
         items: [
           {
-            title: 'Assist a single day'
+            title: 'All workshop sessions',
+            description: '1st of September'
           },
           {
-            title: 'Assist multiple days',
-            description: 'Workshops only take place the 1st of September 2025',
+            title: 'All conference sessions',
+            description: '2nd-4th of September',
             ...disadvantage
           },
           {
-            title: 'Access to workshops'
+            title: 'Reception',
+            description: '1st of September'
           },
           {
-            title: 'Access to talks',
+            title: 'Guided tour',
+            description: '2nd of September',
             ...disadvantage
+          },
+          {
+            title: 'Conference dinner',
+            description: '3rd of September',
+            ...disadvantage
+          },
+          {
+            title: 'Conference bag'
           }
         ]
       },
@@ -86,17 +117,28 @@ const disadvantage = {
         ],
         items: [
           {
-            title: 'Assist a single day'
+            title: 'All workshop sessions',
+            description: '1st of September',
+            ...disadvantage
           },
           {
-            title: 'Assist multiple days'
+            title: 'All conference sessions',
+            description: '2nd-4th of September'
           },
           {
-            title: 'Access to workshops',
-            ...disadvantage
+            title: 'Reception',
+            description: '1st of September'
           },
           {
-            title: 'Access to talks'
+            title: 'Guided tour',
+            description: '2nd of September'
+          },
+          {
+            title: 'Conference dinner',
+            description: '3rd of September'
+          },
+          {
+            title: 'Conference bag'
           }
         ]
       },
@@ -124,16 +166,27 @@ const disadvantage = {
         ribbonTitle: 'Best value',
         items: [
           {
-            title: 'Assist a single day'
+            title: 'All workshop sessions',
+            description: '1st of September'
+          },
+          {
+            title: 'All conference sessions',
+            description: '2nd-4th of September'
+          },
+          {
+            title: 'Reception',
+            description: '1st of September'
           },
           {
-            title: 'Assist multiple days'
+            title: 'Guided tour',
+            description: '2nd of September'
           },
           {
-            title: 'Access to workshops'
+            title: 'Conference dinner',
+            description: '3rd of September'
           },
           {
-            title: 'Access to talks'
+            title: 'Conference bag'
           }
         ]
       },
@@ -148,24 +201,87 @@ const disadvantage = {
         ],
         items: [
           {
-            title: 'Assist a single day'
+            title: 'Conference sessions',
+            description: 'Only the day of the ticket',
+            ...neutral
           },
           {
-            title: 'Assist multiple days',
-            ...disadvantage
-          },
-          {
-            title: 'Access to workshops',
-            description: 'Not applicable: Purchase <i>Workshops Only</i> instead',
-            ...disadvantage
-          },
-          {
-            title: 'Access to talks'
+            title: 'Social event',
+            description: 'Only the day of the ticket',
+            ...neutral
           }
         ]
       }
     ]}
   />
+  <WidgetWrapper bg>
+    <Headline title="Additional information" />
+    <ItemList items={[
+      {
+        description: `
+          We offer a 100€ discount for students. If you register as a student, you must provide proof of your student status
+          (e.g. a student card including the academic year). You are eligible for the "Student fee" if you are a student in the academic year 2024-2025.
+          In case you are not able to provide a proof in time, your student registration will be automatically changed into a
+          regular registration, and you will be charged accordingly.
+        `,
+        icon: ITablerPigMoney
+      },
+      {
+        description: `
+          If you are a MSc/PhD student and the presenting author
+          (i.e., the only one among the authors who is present at the event) of a paper accepted at a workshop/co-located
+          event/main conference, then you need to buy a regular registration, regardless of whether or not you are a student.
+        `,
+        icon: ITablerPigOff
+      },
+      {
+        description: `
+          If you are a PhD student and you have been accepted to participate in the Doctoral Consortium,
+          the participation to the Doctoral Consortium is free of charge. If you want to attend the rest of the
+          workshops and/or conference, you can register as a student.
+        `,
+        icon: ITablerPodium
+      }
+    ]} />
+  </WidgetWrapper>
+  <WidgetWrapper>
+    <Headline title="Cancellation policy" />
+    <ItemList items={[
+      {
+        description: 'The registration of participation is binding.',
+        icon: ITablerFileCheck
+      },
+      {
+        description: `
+          If you cancel your registration no later than 30 days before the start of the conference,
+          and you are not a presenting author of an accepted paper, you get 80% back of the registration fee.
+          In all other cases, the financial responsibilities of the participants remain fully effective.
+        `,
+        icon: ITablerTicketOff
+      },
+      {
+        description: `
+          The registration fees are owed upon registration and are payable within 7 days
+          following submission of the registration (but not later than 7 days before the starting day of the event).
+        `,
+        icon: ITablerCalendarMonth
+      },
+      {
+        description: `
+          Participation is not guaranteed until full payment of the registration fee is received.
+        `,
+        icon: ITablerCreditCard
+      },
+      {
+        description: `
+          Payments will be refunded if the conference is canceled by the organizer. In that case,
+          the organizer will have no further liability to the client.
+          In case the conference must be postponed, registrations remain valid.
+        `,
+        icon: ITablerCreditCardRefund
+      }
+    ]} />
+  </WidgetWrapper>
   {/* <Contact
     id="form"
     inputs={[