Merge pull request #231 from DarkSorrow/fix/payment-location-detection

Fix payment selection for non HK user

functions/package.json

@@ -23,6 +23,7 @@
     "axios": "^0.19.0",
     "body-parser": "^1.18.3",
     "cookie-parser": "^1.4.4",
+    "cors": "^2.8.5",
     "date-fns": "^1.30.1",
     "express": "^4.16.4",
     "express-session": "^1.17.0",

src/package.json

@@ -33,6 +33,7 @@
     "body-parser": "^1.18.3",
     "consola": "^2.5.6",
     "cookie-parser": "^1.4.4",
+    "cors": "^2.8.5",
     "cross-env": "^5.2.0",
     "date-fns": "^1.30.1",
     "express": "^4.16.4",

src/pages/civic/index.vue

@@ -214,7 +214,7 @@ import { getAvatarHaloTypeFromUser, checkUserNameValid } from '~/util/user';
 import { IntercomMixinFactory } from '~/mixins/intercom';
 import experimentMixin from '~/mixins/experiment';
 
-import { PAYMENT_METHOD_LIST } from '~/constant';
+import { PAYMENT_METHOD_LIST, LIKE_CO_CLOUD_FN_BASE } from '~/constant';
 
 export default {
   components: {
@@ -385,13 +385,30 @@ 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(
+          `${LIKE_CO_CLOUD_FN_BASE}/apiHttp/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,37 @@
+/**
+ * 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 cacheServerName = req.headers['x-forwarded-server'] || '';
+  const browserLanguage = detectHKBrowserLang(req.headers['accept-language']); // browser language workaround
+  // Check if country is not unknown otherwise fallback to language only check if it's from HK and last is webcall
+  if (ipCountry !== 'ZZ') {
+    store.dispatch(
+      'setIsHK',
+      ipCountry === 'HK' || browserLanguage === 'HK' || ipCity === 'hong kong'
+    );
+  } else if (browserLanguage === 'HK') {
+    store.dispatch('setIsHK', true);
   }
 };

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

@@ -1,7 +1,9 @@
 const axios = require('axios');
 const { Router } = require('express');
+const cors = require('cors');
 
 const { PAYPAL_PDT_HOOK } = require('../../../config/config');
+const { EXTERNAL_URL } = require('../../util/api');
 const {
   apiFetchCivicCSOnline,
   apiCivicLikerTrialEventById,
@@ -22,6 +24,18 @@ router.get('/civic/csonline', async (req, res, next) => {
   }
 });
 
+router.get('/civic/geoip', cors({ origin: EXTERNAL_URL }), (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,
 });