Merge branch 'hotfix/AW-195-locale-from-ip' into 'main'

hotfix/AW-195-locale-from-ip

See merge request witapp/aura-webapp!335

src/api/api.ts

@@ -31,6 +31,7 @@ import {
   Payment,
   UserVideos,
   UserPDF,
+  Locale,
 } from './resources'
 
 const api = {
@@ -86,6 +87,8 @@ const api = {
   getUserVideos: createMethod<UserVideos.PayloadGet, UserVideos.ResponseGet>(UserVideos.createRequest),
   // User PDF
   getUserPDFCompatibility: createMethod<UserPDF.PayloadGet, UserPDF.ResponseGet>(UserPDF.createRequest),
+  // Locale
+  getLocale: createMethod<undefined, Locale.ResponseGet>(Locale.createRequest),
 }
 
 export type ApiContextValue = typeof api

src/api/resources/Locale.ts

@@ -0,0 +1,47 @@
+import routes from "@/routes";
+import { getBaseHeaders } from "../utils";
+
+interface ResponseGetSuccess {
+    ip: string;
+    city: string;
+    region: string;
+    region_code: string;
+    country: string;
+    country_code: string;
+    country_code_iso3: string;
+    country_name: string;
+    country_capital: string;
+    country_tld: string;
+    country_area: string;
+    country_population: string;
+    continent_code: string;
+    in_eu: boolean;
+    postal: string;
+    latitude: number;
+    longitude: number;
+    latlong: string;
+    timezone: string;
+    utc_offset: string;
+    country_calling_code: string;
+    currency: string;
+    currency_name: string;
+    languages: string;
+    asn: string;
+    org: string;
+    hostname: string;
+}
+
+interface ResponseGetError {
+    ip: "127.0.0.1",
+    error: true,
+    reason: "Reserved IP Address",
+    reserved?: true,
+    version?: "IPv4"
+}
+
+export type ResponseGet = ResponseGetSuccess & ResponseGetError;
+
+export const createRequest = (): Request => {
+    const url = new URL(routes.server.userLocale());
+    return new Request(url, { method: "GET", headers: getBaseHeaders() });
+};

src/api/resources/index.ts

@@ -29,3 +29,4 @@ export * as Paywall from "./Paywall";
 export * as Payment from "./Payment";
 export * as UserVideos from "./UserVideos";
 export * as UserPDF from "./UserPDF";
+export * as Locale from "./Locale";

src/components/SubscriptionPage/index.tsx

@@ -13,7 +13,7 @@ import styles from "./styles.module.css";
 import { useEffect, useState } from "react";
 import { ApiError, extractErrorMessage, useApi } from "@/api";
 import { useAuth } from "@/auth";
-import { getClientLocale, getClientTimezone } from "@/locales";
+import { getClientTimezone, language } from "@/locales";
 import Loader from "../Loader";
 import Title from "../Title";
 import ErrorText from "../ErrorText";
@@ -21,7 +21,7 @@ import { EPlacementKeys, IPaywallProduct } from "@/api/resources/Paywall";
 import { usePaywall } from "@/hooks/paywall/usePaywall";
 
 const currency = Currency.USD;
-const locale = getClientLocale() as Locale;
+const locale = language as Locale;
 
 const getPrice = (product: IPaywallProduct | null) => {
   if (!product?.trialPrice) {

src/hooks/paywall/usePaywall.tsx

@@ -6,7 +6,7 @@ import { useDispatch, useSelector } from "react-redux";
 import parse from "html-react-parser";
 import { defaultPaywalls } from "./defaultPaywalls";
 import locales from "@/locales/locales";
-import { ELocalesPlacement, getClientLocale } from "@/locales";
+import { ELocalesPlacement, language } from "@/locales";
 import { useTranslations } from "@/hooks/translations";
 
 interface IUsePaywallProps {
@@ -27,7 +27,7 @@ export function usePaywall({
   placementKey,
   localesPlacement = ELocalesPlacement.V0,
 }: IUsePaywallProps) {
-  const locale = getClientLocale();
+  const locale = language;
   const { translate } = useTranslations(localesPlacement);
   const api = useApi();
   const dispatch = useDispatch();

src/init.tsx

@@ -9,12 +9,12 @@ import { AuthProvider } from "./auth";
 import { ApiContext, createApi } from "./api";
 import { LegalContext, buildLegal } from "./legal";
 import {
-  getClientLocale,
   buildResources,
   fallbackLng,
   getDefaultLocaleByLanguage,
   getTranslationJSON,
   ELocalesPlacement,
+  language,
 } from "./locales";
 import App from "./components/App";
 import metricService from "./services/metric/metricService";
@@ -28,7 +28,6 @@ const environments = import.meta.env;
 
 const init = async () => {
   const api = createApi();
-  const lng = getClientLocale();
   const currentPlacement = localStorage.getItem(
     "locales-placement"
   ) as ELocalesPlacement;
@@ -40,9 +39,9 @@ const init = async () => {
     translationJSON,
   ] = await Promise.all([
     api.getTranslations(null),
-    api.getElements({ locale: lng }),
+    api.getElements({ locale: language }),
     api.getAppConfig({ bundleId: "auraweb" }),
-    getTranslationJSON(currentPlacement, lng),
+    getTranslationJSON(currentPlacement, language),
   ]);
   const resources = buildResources(translationsResponse, translationJSON);
 
@@ -53,7 +52,7 @@ const init = async () => {
     resources,
     fallbackLng,
     postProcess: [`reactPostprocessor`],
-    lng: getDefaultLocaleByLanguage(lng),
+    lng: getDefaultLocaleByLanguage(language),
   };
   await i18nextInstance
     .use(initReactI18next)

src/locales/index.ts

@@ -1,14 +1,29 @@
 import { Translation } from '@/api/resources/Translations.ts'
-import { Translations } from '../api'
+import { createApi, Translations } from '../api'
 import dev from './dev.ts'
 import locales from './locales.ts'
 
-export const getClientLocale = () => {
-  return navigator.language
+// export const getClientLocale = () => {
+//   return navigator.language
+// }
+export const getClientLocale = async () => {
+  const api = createApi();
+  try {
+    const resp = await api.getLocale(undefined)
+    if (resp?.error || !resp?.languages?.length) {
+      return navigator.language
+    }
+    if (resp.country_code === "IN") {
+      return "hi"
+    }
+    return resp.languages.split(',')[0]
+  } catch (error) {
+    return navigator.language
+  }
 }
 
 export const getClientTimezone = () => Intl.DateTimeFormat().resolvedOptions().timeZone
-const language = getClientLocale()
+export const language = await getClientLocale()
 export const fallbackLng = 'en'
 
 const omitKeys = ['href', 'title', 'url_slug', 'type']

src/routes.ts

@@ -150,7 +150,7 @@ const routes = {
       [host, "single-payment", productId].join("/"),
 
     getInformationPartner: () => [host, "get-information-partner"].join("/"),
-    
+
     mikeV1: () => [host, "v1", "mike"].join("/"),
     getBirthPlace: () => [host, "birthPlace"].join("/"),
     // ABDesignV1
@@ -205,6 +205,7 @@ const routes = {
     notFound: () => [host, "404"].join("/"),
   },
   server: {
+    userLocale: () => ["https://ipapi.co", "json"].join("/"),
     appleAuth: (origin: string) =>
       [apiHost, "auth", "apple", `gate?origin=${origin}`].join("/"),
     googleAuth: (origin: string) =>

src/store/user.ts

@@ -1,13 +1,13 @@
 import { createSlice, createSelector } from '@reduxjs/toolkit'
 import type { PayloadAction } from '@reduxjs/toolkit'
 import { User } from '../api'
-import { getClientLocale, getClientTimezone } from '../locales'
+import { getClientTimezone, language } from '../locales'
 
 const initialState: User.User = {
   id: undefined,
   username: "",
   email: '',
-  locale: getClientLocale(),
+  locale: language,
   state: '',
   timezone: getClientTimezone(),
   new_registration: false,
@@ -34,7 +34,7 @@ const userSlice = createSlice({
   name: 'user',
   initialState,
   reducers: {
-    update(state, action: PayloadAction<Partial<User.User>>) { 
+    update(state, action: PayloadAction<Partial<User.User>>) {
       return { ...state, ...action.payload }
     },
   },