New section: Travel reimbursement processes (#533)

* Travel reimbursement process is now in live * Travel reimbursement process is now in live
hackupc · Apr 13, 2024 · dc3a4e5 · dc3a4e5
1 parent 7998d66
commit dc3a4e5
Show file tree

Hide file tree

Showing 6 changed files with 172 additions and 20 deletions.
diff --git a/src/components/IconLabel.vue b/src/components/IconLabel.vue
@@ -35,7 +35,7 @@ defineProps<{
     padding: 6px;
     margin: 0;
     margin-right: 0.25em;
-    background-color: $secondary-color;
+    background-color: $primary-color;
     border-radius: 5px;
     color: #fff;
     font-weight: normal;
@@ -53,15 +53,13 @@ defineProps<{
     height: 2rem;
     padding: 0 12px;
     margin: 4px;
-    background-color: $secondary-light-color;
+    background-color: $primary-color-light;
     border-radius: 3px;
+    color: $primary-color !important;
     font-size: 1rem;
+    font-weight: bold;
     line-height: 2;
     vertical-align: middle;
-
-    a {
-      color: currentcolor !important;
-    }
   }
 }
 </style>
diff --git a/src/components/Panel.vue b/src/components/Panel.vue
@@ -72,8 +72,12 @@ defineProps<Props>()
     }
 
     ::v-deep(a) {
-      color: $highlight-color;
-      text-decoration: underline;
+      color: $links-color;
+      font-weight: bold;
+
+      &:hover {
+        color: color.adjust($links-color-hover, $lightness: -10%);
+      }
     }
 
     ::v-deep(h3) {

diff --git a/src/data/travel.ts b/src/data/travel.ts
@@ -1,19 +1,46 @@
 export interface Travel {
   readonly title: string
+  readonly tag: string
   readonly description: string
+  readonly emoji: string
+  // readonly image: string
 }
 
 export const travels: Travel[] = [
   {
-    title: 'DISCOVER BCN',
-    description: `We will provide you with a flight to start your journey.`,
+    title: 'Get accepted into HackUPC',
+    tag: 'Invited to HackUPC',
+    emoji: 'gift',
+    description: `Congratulations! You are accepted to HackUPC, once you confirm your attendance you will be able to **check if you need travel reimbursement**. Take into account that we provide: \n - **Up to** 50€ for people coming from Spain (outside Catalunya) \n - **Up to** 120€ for people coming from Europe \n - **Up to** 200€ for people coming from outside Europe.`,
   },
   {
-    title: 'Hotel',
-    description: `We will provide you with a hotel to keep you going through the day.`,
+    title: 'Confirm your attendance',
+    tag: 'Pending review',
+    emoji: 'hourglass-start',
+    description: `Now in your [MyHackUPC dashboard](https://my.hackupc.com/reimbursement/dash_board/) it appears a new tab called **Travel**, you can see that you are **Pending review**. \n\n We are reviewing all your demands to be able to give something to everyone, to help you to come to HackUPC. \n\n We will let you know if your demand is accepted or not. \n\n **Please, be patient!**`,
   },
   {
-    title: 'Car',
-    description: `We will provide you with a car to keep you going through the night.`,
+    title: 'Submit your travel details',
+    tag: 'Pending receipt submission',
+    emoji: 'file-invoice-dollar',
+    description: `You've been granted with a **up to** amount!! Now it's time to submit your receipts to demonstrate your expenses at [MyHackUPC dashboard](https://my.hackupc.com/reimbursement/dash_board/). Remember that there are some rules: \n - Your full name should appear in your ticket \n - The total details of the price should appear, also with the total price \n - There should be a 2 way tickets, the way to barcelona and the way back home \n - The tickets should be between the April 26th and the May 10th \n - Only flight, bus or train tickets are allowed \n \n Remember to add your paypal account so we can be able to send you the money!`,
+  },
+  {
+    title: 'Waiting for approval',
+    tag: 'Pending receipt approval',
+    emoji: 'hourglass-half',
+    description: `We have your ticket! We will review that it's following all the rules and we let you know, depending on the demand and our budget, taking in account the ticket price. How much we can give you. \n\n If your ticket it's not approved, you will receive a email with the reason. If you have any problem don't hesitate to contact us sending a email to [[email protected]](mailto:[email protected]). \n\n **Please, be patient!**`,
+  },
+  {
+    title: 'Your travel has been approved',
+    tag: 'Receipt approved',
+    emoji: 'thumbs-up',
+    description: `Now it's your turn!! We have approved your ticket so your travel reimbursement will be granted, if you follow the last steps: \n - Demo a valid your project in our HackUPC judges. \n - Add your devpost link at [MyHackUPC dashboard](https://my.hackupc.com/reimbursement/dash_board/) \n\n Take in account the project should follow our rules, check them out in the [rules and judging section](/rules)`,
+  },
+  {
+    title: 'You have completed all the steps!',
+    tag: 'Travel granted',
+    emoji: 'money-bill-wave',
+    description: `We know that was a lot of steps and rules! But you've completed all of them!! **Congratulations!!** \n\n We will send you the money to your paypal account in the next 60 days after the event. \n\n If you have any problem don't hesitate to contact us sending a email to [[email protected]](mailto:[email protected]) \n\n **Thank you for coming to HackUPC!**`,
   },
 ]
diff --git a/src/main.ts b/src/main.ts
@@ -9,6 +9,7 @@ import {
   faTwitch,
   faTwitter,
   faYoutube,
+  faLinkedin,
 } from '@fortawesome/free-brands-svg-icons'
 import {
   faPlaneArrival,
@@ -28,6 +29,12 @@ import {
   faCode,
   faChalkboardTeacher,
   faMicrochip,
+  faGift,
+  faHourglassStart,
+  faFileInvoiceDollar,
+  faHourglassHalf,
+  faThumbsUp,
+  faMoneyBillWave,
 } from '@fortawesome/free-solid-svg-icons'
 import { createPinia } from 'pinia'
 import { registerSW } from 'virtual:pwa-register'
@@ -73,7 +80,14 @@ library.add(
   faMessage,
   faCode,
   faChalkboardTeacher,
-  faMicrochip
+  faMicrochip,
+  faGift,
+  faLinkedin,
+  faHourglassStart,
+  faHourglassHalf,
+  faThumbsUp,
+  faFileInvoiceDollar,
+  faMoneyBillWave
 )
 
 const app = createApp(App)

diff --git a/src/variables.scss b/src/variables.scss
@@ -15,7 +15,7 @@ $secondary-light-color-intensity: 100;
 $secondary-light-color: color.adjust($secondary-color, $red: $secondary-light-color-intensity, $green: $secondary-light-color-intensity, $blue: $secondary-light-color-intensity);
 $secondary-text-color: #dadada;
 $tertiary-light-color: #88A7B7;
-$highlight-color: $secondary-color;
+$highlight-color: #E3C3FF;
 $header-mobile-bg-color: rgb(40 40 40 / 90%);
 $header-desktop-bg-color: rgb(40 40 40 / 50%);
 

diff --git a/src/views/Travel.vue b/src/views/Travel.vue
@@ -3,12 +3,121 @@ import { travels } from '@/data/travel'
 import Panel from '@/components/Panel.vue'
 import PanelContainer from '@/components/PanelContainer.vue'
 import VueMarkdownIt from 'vue3-markdown-it'
+import { RouterLink, useRoute } from 'vue-router'
+import { computed } from 'vue'
+import IconLabel from '@/components/IconLabel.vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+const route = useRoute()
+
+const currentView = computed<'travel' | 'discover'>(() => {
+  if (
+    route.params?.travelId !== 'travel' &&
+    route.params?.travelId !== 'discover'
+  ) {
+    return 'travel'
+  }
+
+  return route.params.travelId
+})
 </script>
 
 <template>
-  <PanelContainer id="missions">
-    <Panel v-for="travel in travels" :key="travel.title" :title="travel.title">
-      <VueMarkdownIt :source="travel.description" />
-    </Panel>
+  <PanelContainer id="travel">
+    <div class="explore">
+      <div class="explore__list">
+        <RouterLink
+          :to="{
+            name: 'travel',
+            params: { travelId: 'travel' },
+          }"
+          class="button"
+          :class="{ 'button--disabled': currentView === 'travel' }"
+          >Travel reimbursement process</RouterLink
+        >
+        <RouterLink
+          :to="{
+            name: 'travel',
+            params: { travelId: 'discover' },
+          }"
+          class="button"
+          :class="{ 'button--disabled': currentView === 'discover' }"
+          >Discover Barcelona</RouterLink
+        >
+      </div>
+    </div>
+    <template v-if="currentView === 'travel'">
+      <Panel
+        v-for="travel in travels"
+        :key="travel.title"
+        :title="travel.title"
+        size="small"
+      >
+        <IconLabel centered style="margin-bottom: 0.8rem">
+          <template #icon>
+            <FontAwesomeIcon
+              :icon="travel.emoji"
+              class="link__icon"
+            /> </template
+          >{{ travel.tag }}
+        </IconLabel>
+        <VueMarkdownIt :source="travel.description" />
+      </Panel>
+
+      <Panel size="big">
+        <p>
+          <strong>Please remember!! </strong> <br /><br />
+          HackUPC is a hackathon made by students and we have limited money. We
+          are giving out the maximum we can for each person coming from abroad,
+          we want to help everyone a bit, but please take in account that it's a
+          help to pay your trip, we are not covering full price of a trip.
+          <br /><br />
+          In addition, take in mind that everything in the event is covered, so
+          will will have no expenses during the weekend!!.
+          <br /><br />
+          <strong>We hope to see you all at HackUPC! 😄</strong>
+        </p>
+      </Panel>
+    </template>
+
+    <template v-if="currentView === 'discover'">
+      <Panel title="Discover BCN" size="big"> </Panel>
+    </template>
   </PanelContainer>
 </template>
+
+<style lang="scss" scoped>
+@use '@/variables' as *;
+
+.explore {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-end;
+  margin-top: 20px;
+  margin-right: 20px;
+}
+
+.button {
+  display: inline-block;
+  padding: 8px 24px;
+  margin: 0 0.2em 16px;
+  background: $links-color;
+  border-radius: 3px;
+  box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+  color: #000;
+  cursor: url('../assets/img/rocket-fire.png'), auto;
+  font-weight: bold;
+
+  &--disabled {
+    filter: grayscale(0.5);
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  &:hover {
+    background: $links-color-hover;
+    color: #fff;
+  }
+}
+</style>