From 5a2322583b0fe55fa8823d28e3af7be7cc252eb9 Mon Sep 17 00:00:00 2001
From: MaySoMusician <maysomusician@gmail.com>
Date: Thu, 21 Oct 2021 14:27:34 +0900
Subject: [PATCH] Add dialog and arrow to TheInternalBrowserGuard

---
 assets/arrowTopRight.min.svg           |   9 +++
 components/TheInternalBrowserGuard.vue | 106 +++++++++++++++++++++++--
 layouts/default.vue                    |   3 +-
 3 files changed, 110 insertions(+), 8 deletions(-)
 create mode 100644 assets/arrowTopRight.min.svg

diff --git a/assets/arrowTopRight.min.svg b/assets/arrowTopRight.min.svg
new file mode 100644
index 00000000..b7748522
--- /dev/null
+++ b/assets/arrowTopRight.min.svg
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 52.916665 52.916668" xmlns="http://www.w3.org/2000/svg">
+  <g color="#000" fill="#fff">
+    <path style="-inkscape-stroke:none" d="m46.602527 4.7883454-2.535156.1308594C45.977685 42.170338 21.675236 45.447721 10.425557 46.841176c-.197891.03002-.301431.172963-.252371.490604l.226269 1.77957c.05339.312956.219366.273072.376178.254221 12.462264-1.553336 38.242058-5.441143 35.826894-44.5772256z"/>
+    <g fill-rule="evenodd">
+      <path style="-inkscape-stroke:none" d="m39.462918 18.954487 5.262194-16.9427735 6.96775 16.3155975c-4.088566-.611695-8.051805-.459699-12.229944.627176Z" transform="rotate(3.805 52.524321 7.6655455)"/>
+      <path style="-inkscape-stroke:none" d="M44.682375.96265997c-.119221.00433647-.288258.52885683-.412844.90843373L39.007812 18.8125c-.139365.448199.385122.806485.751954.513672 3.943844-1.344444 7.430643-1.30987 11.669921-.601563.394017.261093.886694-.149242.701172-.583984L45.164062 1.8242187c-.148474-.3532203-.376086-.86924135-.481687-.86155873Zm.112547 2.42601193 5.984375 14.0136721c-3.45719-.368107-7.013357-.775143-10.50586.548828z" transform="rotate(3.805 52.524321 7.6655455)"/>
+    </g>
+  </g>
+</svg>
diff --git a/components/TheInternalBrowserGuard.vue b/components/TheInternalBrowserGuard.vue
index 110c0a3d..d3341a72 100644
--- a/components/TheInternalBrowserGuard.vue
+++ b/components/TheInternalBrowserGuard.vue
@@ -1,33 +1,125 @@
 <template>
-  <CBox :mb="1">
-    <CText font-size="0.8rem">{{ userAgent }} </CText>
-  </CBox>
+  <AppModal
+    :is-open="modalOpen"
+    :on-close="() => (modalClosed = true)"
+    :portal-z-index="2999"
+    is-centered
+    size="sm"
+  >
+    <div :class="[$style.Arrow]"><SvgArrowTopRight /></div>
+    <AppModalContent rounded="0.5rem">
+      <AppModalHeader
+        py="8px"
+        background-color="azalea"
+        color="mineShaft"
+        rounded-top="0.5rem"
+        font-size="1.2rem"
+        >{{ browserTypeName }} からようこそ！</AppModalHeader
+      >
+      <AppModalCloseButton />
+      <AppModalBody font-size="0.9rem">
+        <CText :mb="1">アプリのブラウザをご利用ですか？</CText>
+        <CText :mb="2"
+          >オンライン憩いはアプリ内ブラウザだとうまく動作しないことがあります。</CText
+        >
+        <CText
+          >右上のボタンから「{{
+            openBrowserLabel
+          }}」をタップして、ブラウザで開きなおしてください。</CText
+        >
+      </AppModalBody>
+    </AppModalContent>
+    <AppModalOverlay bg="rgba(0,0,0,0.8)" />
+  </AppModal>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
+import {
+  AppModal,
+  AppModalOverlay,
+  AppModalContent,
+  AppModalHeader,
+  AppModalBody,
+  AppModalCloseButton,
+} from '@/components/AppModal'
+import SvgArrowTopRight from '~/assets/arrowTopRight.min.svg?inline'
 
-type Data = {}
+type InAppBrowserType = 'Facebook' | 'Instagram' | 'LINE' | 'Twitter'
+
+type Data = {
+  modalClosed: boolean
+  browserType: InAppBrowserType | null
+}
 
 type Computed = {
   userAgent: string
+  modalOpen: boolean
+  browserTypeName: string
+  openBrowserLabel: string
 }
 
 type Methods = {}
 
 export default Vue.extend<Data, unknown, Computed, Methods>({
-  components: {},
+  components: {
+    AppModal,
+    AppModalOverlay,
+    AppModalContent,
+    AppModalHeader,
+    AppModalBody,
+    AppModalCloseButton,
+    SvgArrowTopRight,
+  },
   data() {
-    return {}
+    return {
+      modalClosed: false,
+      browserType: 'Facebook',
+    }
   },
   computed: {
     userAgent() {
       return process.client ? navigator.userAgent : ''
     },
+    modalOpen() {
+      return !!this.browserType && !this.modalClosed
+    },
+    browserTypeName() {
+      if (!this.browserType) return ''
+
+      const names: Record<InAppBrowserType, string> = {
+        Facebook: 'Facebook',
+        Instagram: 'Instagram',
+        LINE: 'LINE',
+        Twitter: 'Twitter',
+      }
+      return names[this.browserType]
+    },
+    openBrowserLabel() {
+      if (!this.browserType) return ''
+
+      const labels: Record<InAppBrowserType, string> = {
+        Facebook: 'ブラウザで開く',
+        Instagram: 'ブラウザで開く',
+        LINE: '他のアプリで開く',
+        Twitter: 'ブラウザで開く',
+      }
+      return labels[this.browserType]
+    },
   },
   mounted() {},
   methods: {},
 })
 </script>
 
-<style lang="scss" module></style>
+<style lang="scss" module>
+.Arrow {
+  position: fixed;
+  top: 4px;
+  right: 10px;
+  height: auto;
+  width: 20%;
+  max-width: 200px;
+  z-index: 1350;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index 186f242e..303bbcda 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -16,7 +16,6 @@
               max-w="66rem"
               mx="auto"
             >
-              <TheInternalBrowserGuard />
               <!-- main -->
               <Nuxt />
               <!-- /main -->
@@ -76,6 +75,8 @@
               </div>
             </div>
           </transition>
+
+          <TheInternalBrowserGuard />
         </CBox>
       </CColorModeProvider>
     </CThemeProvider>