Fix payment selection for non HK user

src/pages/civic/index.vue

@@ -385,13 +385,28 @@ export default {
       ],
     };
   },
-  mounted() {
-    if (this.getIsHK) {
+  async beforeMount() {
+    let isHK = this.getIsHK;
+    if (isHK === undefined) {
+      isHK = false; // Default not from HK
+      try {
+        const { data: geoData } = await this.$axios.get('/api/civic/geoip');
+        if (geoData.ipCountry || geoData.ipCity) {
+          isHK = geoData.ipCountry === 'HK' || geoData.ipCity === 'hong kong';
+        }
+      } catch (err) {
+        isHK = false;
+      }
+      this.$store.dispatch('setIsHK', isHK);
+    }
+    if (isHK) {
       this.selectedPaymentMethod =
         PAYMENT_METHOD_LIST[PAYMENT_METHOD_LIST.length - 1];
       this.$i18n.locale = 'zh-Hant';
       this.setLocale(this.$i18n.locale);
     }
+  },
+  mounted() {
     const {
       from,
       referrer,

src/plugins/geoip.server.js

@@ -1,14 +1,38 @@
+/**
+ * Parse the accepted language header and check if the first languages are from HK
+ * @param {string|undefined} acceptedLanguage Browser accepted language header
+ * @returns {string|undefined}
+ */
+function detectHKBrowserLang(acceptedLanguage) {
+  if (acceptedLanguage) {
+    const langs = acceptedLanguage.split(',');
+    const len = langs.length > 3 ? 3 : langs.length; // only three first browser language are important
+    for (let i = 0; i < len; i += 1) {
+      const pair = langs[i].split(';');
+      if (pair[0].endsWith('-HK')) {
+        // This check if the language is for HK region
+        return 'HK';
+      }
+    }
+  }
+  return undefined;
+}
+
 export default ({ app, store, req, res, query }) => {
   // gcloud magic geoip headers
   // https://cloud.google.com/appengine/docs/standard/go/reference/request-response-headers#app_engine-specific_headers
   const ipCountry = req.headers['x-appengine-country'];
   const ipCity = req.headers['x-appengine-city'];
   const cacheServerName = req.headers['x-forwarded-server'] || '';
-  if ((ipCountry && ipCountry !== 'ZZ') || ipCity || cacheServerName) {
-    const isHK =
-      ipCountry === 'HK' ||
-      ipCity === 'hong kong' ||
-      cacheServerName.includes('HKG');
-    store.dispatch('setIsHK', isHK);
+  const browserLanguage = detectHKBrowserLang(req.headers['accept-language']); // browser language workaround
+  // Only the cache server of the HKG region causes problem to detect people from HK
+  if (!cacheServerName.includes('HKG')) {
+    store.dispatch(
+      'setIsHK',
+      ipCountry === 'HK' || browserLanguage === 'HK' || ipCity === 'hong kong'
+    );
+  } else if (browserLanguage === 'HK') {
+    // We are in a cache but navigator is installed HK
+    store.dispatch('setIsHK', true);
   }
 };

src/server/api/routes/civic/index.js

@@ -22,6 +22,18 @@ router.get('/civic/csonline', async (req, res, next) => {
   }
 });
 
+router.get('/civic/geoip', (req, res) => {
+  const ipCountry = req.headers['x-appengine-country'];
+  const ipCity = req.headers['x-appengine-city'];
+  const cacheServerName = req.headers['x-forwarded-server'] || '';
+  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
+  res.status(200).json({
+    ipCountry,
+    ipCity,
+    cacheServerName,
+  });
+});
+
 router.get('/civic/trial/events/:id', async (req, res, next) => {
   try {
     const { id } = req.params;

src/store/modules/ui.js

@@ -14,7 +14,7 @@ import { defaultLocale, availableLocales } from '../../locales';
 const initialState = () => ({
   locales: availableLocales,
   locale: defaultLocale,
-  isHK: true,
+  isHK: undefined,
   isSlidingMenuOpen: false,
 });