From 8577ff1a3d02aa64fcc13855f503f42039b9c685 Mon Sep 17 00:00:00 2001
From: Josix <josixwang@gmail.com>
Date: Tue, 11 Jul 2023 01:50:07 +0800
Subject: [PATCH] feat(venue): add accommodation page

---
 components/core/header/nav-bar/NavBar.i18n.js |   4 +
 components/core/header/nav-bar/NavBar.vue     |  17 ++-
 .../core/header/nav-bar/NavBarHamburger.vue   |  18 ++-
 .../core/header/nav-bar/nav-bar-items.js      |   4 +
 i18n/venue/accommodation.i18n.js              |  88 ++++++++++++++
 pages/venue/accommodation.vue                 | 114 ++++++++++++++++++
 store/index.js                                |   1 +
 7 files changed, 234 insertions(+), 12 deletions(-)
 create mode 100644 i18n/venue/accommodation.i18n.js
 create mode 100644 pages/venue/accommodation.vue

diff --git a/components/core/header/nav-bar/NavBar.i18n.js b/components/core/header/nav-bar/NavBar.i18n.js
index 9f663612c1..a597f7bfed 100644
--- a/components/core/header/nav-bar/NavBar.i18n.js
+++ b/components/core/header/nav-bar/NavBar.i18n.js
@@ -29,6 +29,8 @@ export default genI18nMessages({
         tickets: 'Ticket Info',
         financialAid: 'Financial Aid',
         venue: 'Venue',
+        venueInfo: 'Venue Info',
+        accommodation: 'Accommodation',
         proposalSystemUrl: 'Proposal System',
         codeOfConduct: 'Code of Conduct',
     },
@@ -60,6 +62,8 @@ export default genI18nMessages({
         tickets: '購票資訊',
         financialAid: '財務補助',
         venue: '會場',
+        venueInfo: '會場資訊',
+        accommodation: '住宿資訊',
         proposalSystemUrl: '投稿系統',
         codeOfConduct: '行為準則',
     },
diff --git a/components/core/header/nav-bar/NavBar.vue b/components/core/header/nav-bar/NavBar.vue
index 975fed1016..719f2f611d 100644
--- a/components/core/header/nav-bar/NavBar.vue
+++ b/components/core/header/nav-bar/NavBar.vue
@@ -56,14 +56,13 @@
             :class="getPageClassesByPath('registration')"
         >
         </nav-bar-item-dropdown>
-        <locale-link
+        <nav-bar-item-dropdown
             v-if="showVenuePage"
-            to="/venue"
-            :class="getPageClassesByPath('venue', true)"
-            customized
+            :label="$t('venue')"
+            :items="venueItems"
+            :class="getPageClassesByPath('venue')"
         >
-            {{ $t('venue') }}
-        </locale-link>
+        </nav-bar-item-dropdown>
         <ext-link
             :href="proposalSystemUrl"
             :class="getPageClassesByPath('proposalSystemUrl', true)"
@@ -115,6 +114,12 @@ export default {
                 this.$store.state.configs.registrationHideItems,
             )
         },
+        venueItems() {
+            return this.generateI18nItems(
+                navBarItems.venue,
+                this.$store.state.configs.venueHideItems,
+            )
+        },
         proposalSystemUrl() {
             return `https://tw.pycon.org/prs/${this.$i18n.locale}/dashboard/`
         },
diff --git a/components/core/header/nav-bar/NavBarHamburger.vue b/components/core/header/nav-bar/NavBarHamburger.vue
index 296777bd7a..20dceea24f 100644
--- a/components/core/header/nav-bar/NavBarHamburger.vue
+++ b/components/core/header/nav-bar/NavBarHamburger.vue
@@ -74,13 +74,13 @@
                 :expanding="expandingItem === 'registration'"
                 @click.native="toggleAccordion('registration')"
             ></nav-bar-item-accordion>
-            <locale-link
+            <nav-bar-item-accordion
                 v-if="showVenuePage"
-                class="core-navBarHamburgerSlideInMenu__item"
-                to="/venue"
-                customized
-                >{{ $t('venue') }}</locale-link
-            >
+                :label="$t('venue')"
+                :items="venueItems"
+                :expanding="expandingItem === 'venue'"
+                @click.native="toggleAccordion('venue')"
+            ></nav-bar-item-accordion>
             <ext-link
                 class="core-navBarHamburgerSlideInMenu__item"
                 :href="proposalSystemUrl"
@@ -140,6 +140,12 @@ export default {
                 this.$store.state.configs.registrationHideItems,
             )
         },
+        venueItems() {
+            return this.generateI18nItems(
+                navBarItems.venue,
+                this.$store.state.configs.venueHideItems,
+            )
+        },
         proposalSystemUrl() {
             return `https://tw.pycon.org/prs/${this.$i18n.locale}/dashboard/`
         },
diff --git a/components/core/header/nav-bar/nav-bar-items.js b/components/core/header/nav-bar/nav-bar-items.js
index e3c2701af1..29cd5eab4b 100644
--- a/components/core/header/nav-bar/nav-bar-items.js
+++ b/components/core/header/nav-bar/nav-bar-items.js
@@ -27,4 +27,8 @@ export default Object.freeze({
         { i18nKey: 'tickets', value: '/registration/tickets' },
         { i18nKey: 'financialAid', value: '/registration/financial-aid' },
     ],
+    venue: [
+        { i18nKey: 'venueInfo', value: '/venue' },
+        { i18nKey: 'accommodation', value: '/venue/accommodation' },
+    ],
 })
diff --git a/i18n/venue/accommodation.i18n.js b/i18n/venue/accommodation.i18n.js
new file mode 100644
index 0000000000..06ee9e06fd
--- /dev/null
+++ b/i18n/venue/accommodation.i18n.js
@@ -0,0 +1,88 @@
+import { genI18nMessages } from '~/utils/i18n.utils'
+
+export default genI18nMessages({
+    'en-us': {
+        title: 'Accommodation Guidelines',
+        intro:
+            'PyCon TW has on-site lodging at Academia Sinica Activities' +
+            ' Center, a 3-minute walk to the venue.',
+        roomType: {
+            fieldName: 'Room Type',
+            content: ['Single room: NT$1,500/day', 'Twin room: NT$1,600/day'],
+            remark:
+                'An extra person is available for a single room for $150/day.' +
+                ' An extra bed is available for a twin room for $300/day',
+        },
+        roomFacilities: {
+            fieldName: 'Room Facilities',
+            content:
+                'Room facilities include TV, Wi-Fi, water kettle,' +
+                ' hair dryer, bodywash and shampoo. No disposable toiletries ' +
+                '(toothbrush, comb, razor, shower cap, soap and paper slippers) are provided. ' +
+                'More information on {0}.',
+            linkName: 'the original website',
+        },
+        applicationHowTo: {
+            fieldName: 'Application Process',
+            content:
+                'To apply for on-site lodging, please send an email to {0}' +
+                ' (the venue team of PyCon TW) with the following information by 23:59, July 23:',
+            applicationInfo: [
+                'Check-in and check-out dates',
+                'Number of people',
+                'Room type and number of rooms',
+                'Names and genders of guests',
+            ],
+            remark:
+                'Note: All date / time is represented in the UTC+08 time zone.' +
+                ' Early check-in and late check-out must be noted in advance.',
+        },
+        og: {
+            title: 'Accommodation Guidelines',
+            description:
+                'Stay at the Academia Sinica Activity Center during PyCon TW, ' +
+                'just a 3-minute walk from the venue. Choose from elegant single or double' +
+                ' rooms with optional extra beds, and enjoy amenities like TV, Wi-Fi, and toiletries.' +
+                "Apply by emailing PyCon TW's venue team with your details.",
+        },
+    },
+    'zh-hant': {
+        title: '住宿指引',
+        intro: 'PyCon TW 提供中研院學術活動中心的住宿，距會場約 3 分鐘走路路程，若有需要可以提出申請。',
+        roomType: {
+            fieldName: '房型',
+            content: [
+                '精緻單人房：新台幣 1,500 元/日',
+                '精緻雙人房：新台幣 1,600 元/日',
+            ],
+            remark: '單人房可加一人 150元/日；雙人房可加一床 300元/日',
+        },
+        roomFacilities: {
+            fieldName: '客房設施',
+            content:
+                '客房設施包括電視、無線網路、熱水壺、吹風機、沐浴乳和洗髮精。' +
+                '未提供一次性備品（牙刷、梳子、刮鬍刀、浴帽及紙拖鞋），請住宿人自行攜帶。' +
+                '更多資訊請見 {0}。',
+            linkName: '原住宿提供網站',
+        },
+        applicationHowTo: {
+            fieldName: '申請流程',
+            content:
+                '請於 7 月 23 日 23:59 前寄信至 {0} （PyCon TW 場務組） 並提供以下資訊：',
+            applicationInfo: [
+                '入住和退房日期',
+                '人數',
+                '各房型所需之數目',
+                '入住人員姓名與性別',
+            ],
+            remark: '註：所有使用的時間皆為時區 UTC+08。提早 check-in 和晚 check-out 都需要事先告知。',
+        },
+        og: {
+            title: '住宿指引',
+            description:
+                '在 PyCon TW 期間，您可以入住位於中央研究院活動中心的住宿，距離會場僅有三分鐘步行路程。' +
+                '您可以選擇優雅的單人或雙人房，也可以選擇加床服務，同時享受電視、Wi-Fi和盥洗用品等設施。' +
+                '請透過發送電子郵件至 PyCon TW 的會場團隊，提供您的詳細資料進行申請。',
+        },
+    },
+})
diff --git a/pages/venue/accommodation.vue b/pages/venue/accommodation.vue
new file mode 100644
index 0000000000..d08277ac14
--- /dev/null
+++ b/pages/venue/accommodation.vue
@@ -0,0 +1,114 @@
+<template>
+    <i18n-page-wrapper>
+        <core-h1 :title="$t('title')"></core-h1>
+        <p class="mb-14 text-sm md:text-base">{{ $t('intro') }}</p>
+        <div class="mx-auto w-full lg:w-9/12">
+            <two-col-wrapper class="py-2 lg:py-5">
+                <template #default>
+                    <p>{{ $t('roomType.fieldName') }}</p>
+                </template>
+                <template #right-col>
+                    <ul class="ml-[19px] list-outside list-disc">
+                        <li
+                            v-for="(content, i) in $t('roomType.content')"
+                            :key="`room_type_content_${i}`"
+                        >
+                            {{ content }}
+                        </li>
+                    </ul>
+                    <span>
+                        {{ $t('roomType.remark') }}
+                    </span>
+                </template>
+            </two-col-wrapper>
+
+            <two-col-wrapper>
+                <template #default>
+                    <p>{{ $t('roomFacilities.fieldName') }}</p>
+                </template>
+                <template #right-col>
+                    <i18n path="roomFacilities.content" tag="p">
+                        <ext-link
+                            href="https://dga.sinica.edu.tw/posts/78730"
+                            highlight
+                            underline
+                            >{{ $t('roomFacilities.linkName') }}</ext-link
+                        >
+                    </i18n>
+                </template>
+            </two-col-wrapper>
+            <two-col-wrapper>
+                <template #default>
+                    <p>{{ $t('applicationHowTo.fieldName') }}</p>
+                </template>
+                <template #right-col>
+                    <i18n path="applicationHowTo.content" tag="p">
+                        <ext-link :href="`mailto:${venueTeamEmail}`" highlight
+                            >{{ venueTeamEmail }}
+                        </ext-link>
+                    </i18n>
+                    <ul class="ml-[19px] list-outside list-disc py-2">
+                        <li
+                            v-for="(item, i) in $t(
+                                'applicationHowTo.applicationInfo',
+                            )"
+                            :key="`application_info_${i}`"
+                        >
+                            {{ item }}
+                        </li>
+                    </ul>
+                    <span>
+                        {{ $t('applicationHowTo.remark') }}
+                    </span>
+                </template>
+            </two-col-wrapper>
+        </div>
+    </i18n-page-wrapper>
+</template>
+
+<script>
+import I18nPageWrapper from '@/components/core/i18n/PageWrapper'
+import i18n from '@/i18n/venue/accommodation.i18n'
+import CoreH1 from '@/components/core/titles/H1'
+import TwoColWrapper from '@/components/core/layout/TwoColWrapper'
+import ExtLink from '@/components/core/links/ExtLink.vue'
+
+export default {
+    i18n,
+    name: 'PageVenueHotels',
+    components: {
+        CoreH1,
+        I18nPageWrapper,
+        TwoColWrapper,
+        ExtLink,
+    },
+    data() {
+        return {
+            venueTeamEmail: 'pycon-tw-venue@python.tw',
+        }
+    },
+    head() {
+        return {
+            title: this.$i18n.t('title'),
+            meta: [
+                {
+                    hid: 'og:title',
+                    property: 'og:title',
+                    content: this.$i18n.t('og.title'),
+                },
+                {
+                    hid: 'og:description',
+                    property: 'og:description',
+                    content: this.$i18n.t('og.description'),
+                },
+                {
+                    hid: 'description',
+                    name: 'description',
+                    content: this.$i18n.t('og.description'),
+                },
+            ],
+        }
+    },
+}
+</script>
+<style lang="postcss" scoped></style>
diff --git a/store/index.js b/store/index.js
index 7d7b8d501e..6c3e5242b9 100644
--- a/store/index.js
+++ b/store/index.js
@@ -27,6 +27,7 @@ export const state = () => ({
         eventsHideItems: ['sprints', 'openSpaces'], // ['sprints', 'openSpaces', 'jobs']
         conferenceHideItems: [], // ['keynotes', 'talks', 'tutorials', 'youngInspirers']
         registrationHideItems: [], // ['tickets', 'financialAid']
+        venueHideItems: [], // ['venueInfo', 'accommodation']
     },
 })