Dev -> Canary (#384)

* scraped static texts on all pages * got text from modals as well * added common languages offered * setting up redux for manual language selection * hooked dropdown to redux data * feat: lang selection working with dummy data set. Selection persists too * whole of homepage now depends on static text object * interactions, comment box, events and testimonial section all looking good * one testimonial, one events page 🔥 * several changes json object for static text and testing with dummy translations * language is now automatically added to apiCall * fixed bug with comment component translation * more translations, and tweaks to page json structure * testimonial form now translated too * getting started with languages offered page * still setting up multi select on dropdown. checkbox in dropdown is not checking yet * removing language works locally * setup admin lang selector and docked it at the top of campaign edit page * dropdown for language context on admin side now works with admin selected languages * remove log * Now changed to toggles * removed comments and added translation for fallback text * removed logs * edited toggles * add language back in there * sort languages * translated more fallback texts * translated preview mode & events too * paused on admin tans for now * removed comments and limited languages * now loads language list from api * better config log * version number bump * point to dev * Bump BUILD_VERSION to 1.1.1 * user language * remove about * version number resolution * upgrade * Bump BUILD_VERSION to 1.1.4 * en-us * Bump BUILD_VERSION to 1.1.5 * toggling languages works for admins * client side loads from toggle list * dont show ribbon when no list is provided * dash will be provided if only one enabled language * fix nav issue * english cant be toggled, several tweaks to frontend logic * pre testimonial translations setup for homepage area * translated more dialogs * resolved some circular imports * cp for language selectino modal * language modal setup with several bug fixes also done * fixed testimonial form translation & height issues * now added flags * Bump BUILD_VERSION to 1.1.6 * squashed conflicts * Bump BUILD_VERSION to 1.1.7 * added caret * fixed single and no language logic * bump * Bump BUILD_VERSION to 1.1.9 * now looks for language only when data is loaded * removed logs * optional lang * Bump BUILD_VERSION to 1.1.10 * made messenger pull from local storage (#347) * Bump BUILD_VERSION to 1.1.11 * Prevent language override for admin users This change ensures that the user language parameter is not appended to the API call when the user is an admin. This avoids any conflict or unintended behavior for admin-level operations, enhancing the robustness of language handling in the messaging API. * Add optional chaining in various string splitting operations Refactor the code to use optional chaining for string split operations to ensure error prevention on null or undefined values. This change improves the robustness of the code, particularly for scenarios where split might be called on potentially nullable strings. * Bump BUILD_VERSION to 1.1.12 * in the process of setting up custom loading messages to inform user of unsupported languages * resolved conflict with chosen language that is not supported by campaign * separating languages from language obj * initial box now translates * about only available from english * capture weird screen dimensions with media queries * blanket notification now in approuter * tighter media query * eventos * more date objs translated too * No preferred language should fallback to english * Bump BUILD_VERSION to 1.1.13 * Fix: Broken community portal link (#379) * Add dynamic URL support for community portal Updated the COMMUNITY_PORTAL_URL to dynamically generate the base URL depending on the environment. Added a utility function `getCommunityPortalBaseURL` to handle this logic. * Refactor community portal URL logic Consolidate community portal URLs into a single `BASE_URL` constant. This change simplifies URL management and reduces redundancy in the codebase. The `getCommunityPortalBaseURL` function has been removed and replaced with a cleaner variable definition. * Fix incorrect branching condition for production environment The `if (IS_PROD)` condition has been changed to `else if (IS_PROD)` to ensure it is mutually exclusive with previous conditions. This prevents the production URL assignment from being skipped if a prior condition is satisfied. * Bump BUILD_VERSION to 1.1.14 * fixed other, and doubly sending user language * filter instead of map * fixed "other" on sharing modal * Bump BUILD_VERSION to 1.1.15 * translated comment section * news letter trans * translated a few toasts * remove logs * Bump BUILD_VERSION to 1.1.16 * Bump BUILD_VERSION to 1.1.17 * spanish continue * added the link for volunteering * manual bump * Bump BUILD_VERSION to 1.1.19 --------- Co-authored-by: frimpongopoku <[email protected]> Co-authored-by: Version Update Bot <[email protected]> Co-authored-by: Tahiru Abdullai <[email protected]> Co-authored-by: Abdullai Tahiru <[email protected]>
massenergize · Aug 29, 2024 · 1ffe6e5 · 1ffe6e5
1 parent f661475
commit 1ffe6e5
Show file tree

Hide file tree

Showing 25 changed files with 879 additions and 607 deletions.
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3002 react-scripts start",
     "build": "CI=false react-scripts build",
     "build:dev": "NODE_ENV=development REACT_APP_TARGET_ENV=development CI=false react-scripts build",
     "build:canary": "NODE_ENV=canary REACT_APP_TARGET_ENV=canary CI=false react-scripts build",

diff --git a/src/api/messenger.js b/src/api/messenger.js
@@ -28,13 +28,16 @@ export async function apiCall(destinationUrl, dataToSend = {}, relocationPage =
   const data = {
     // __is_prod: IS_PROD || IS_CANARY,
     // __is_admin_site: true,
+    ...(lang && !portalIsAdmin() ? { __user_language: lang } : {}),
     ...dataToSend,
   };
 
   const formData = new FormData();
+  // if (lang && !portalIsAdmin()) formData.append("__user_language", lang);
   Object.keys(data).map((k) => formData.append(k, data[k]));
   if (lang && !portalIsAdmin()) formData.append("__user_language", lang);
 
+
   if (!destinationUrl || destinationUrl.length < 2) {
     return { success: false, error: "Invalid URL passed to apiCall" };
   }

diff --git a/src/assets/styles/tablet-ish.css b/src/assets/styles/tablet-ish.css
@@ -0,0 +1,14 @@
+@media only screen and (min-width: 768px) and (max-width: 1280px) {
+  .lang-s-p-override {
+    right: 0px !important;
+  }
+  .lang-s-ribbon {
+    background: white;
+    /* right:0px; */
+    border-top-left-radius: 50px;
+    border-bottom-left-radius: 50px;
+    padding: 10px;
+    box-shadow: var(--elevate-3);
+    padding-left: 20px;
+  }
+}
diff --git a/src/assets/styles/universal.css b/src/assets/styles/universal.css
@@ -1,5 +1,6 @@
 @import url(./mobile-only.css);
 @import url(pc-only.scss);
+@import url(tablet-ish.css);
 @import url(./elevations.css);
 @import url("https://fonts.googleapis.com/css?family=Google+Sans:200,300,400,400i,500,600,700,900");
 @import url("https://fonts.googleapis.com/css?family=Roboto+Slab:400,700");

diff --git a/src/components/language/LanguageSelector.js b/src/components/language/LanguageSelector.js
@@ -11,8 +11,7 @@ import LanguageSelectionModal from "./LanguageSelectionModal";
 
 const DEFAULT = { name: "--", code: "---" };
 function LanguageSelector() {
-  const campaign = useSelector((state) => state?.campaign);
-  const languages = campaign?.languages || [];
+  const languages = useSelector((state) => state?.usersListOfLanguages);
   const activeLanguage = useSelector((state) => state?.activeLanguage);
   const { modals } = getStaticText();
   const staticT = modals?.languageSelectionModal || {};
@@ -25,7 +24,6 @@ function LanguageSelector() {
     dispatch(toggleUniversalModal(data));
   };
 
-
   const getLangLetters = (code) => code?.split("-")[0] || "";
   const setActiveLanguage = (lang, reload = true) => {
     setActiveLanguageInStorage(lang);
@@ -35,42 +33,48 @@ function LanguageSelector() {
 
   return (
     <div
-      className="touchable-opacity"
-      onClick={() => {
-        if (noLanguages) return;
-        openModal({
-          noFooter: true,
-          show: true,
-          title: staticT?.title?.text || "Choose a Language",
-          component: () => <LanguageSelectionModal languages={languages} selectLanguage={setActiveLanguage} />,
-        });
-      }}
+      className="touchable-opacity lang-s-p-override"
       style={{
         position: "absolute",
         top: 0,
         right: 50,
         display: "flex",
-        flexDirection: "row",
+        flexDirection: "column",
         alignItems: "center",
+        justifyContent: "center",
         fontSize: 18,
         height: "100%",
         fontWeight: "bold",
         color: "var(--app-main-color)",
         textTransform: "uppercase",
       }}
     >
-      {/* <i className="fa fa-globe" style={{ marginRight: 3 }}></i> */}
-      <img
-        alt="flag"
-        src={`https://flagicons.lipis.dev/flags/4x3/${country}.svg`}
-        style={{ objectFit: "contain", marginRight: 4, borderRadius: 2, width: 20 }}
-      />
-      <span>{getLangLetters(activeLanguage)}</span>
-      {!noLanguages && (
-        <>
-          <i style={{ marginLeft: 4 }} className=" fa fa-caret-down" />
-        </>
-      )}
+      <div
+        onClick={() => {
+          if (noLanguages) return;
+          openModal({
+            noFooter: true,
+            show: true,
+            title: staticT?.title?.text || "Choose a Language",
+            component: () => <LanguageSelectionModal languages={languages} selectLanguage={setActiveLanguage} />,
+          });
+        }}
+        className="lang-s-ribbon"
+        style={{ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center" }}
+      >
+        {/* <i className="fa fa-globe" style={{ marginRight: 3 }}></i> */}
+        <img
+          alt="flag"
+          src={`https://flagicons.lipis.dev/flags/4x3/${country}.svg`}
+          style={{ objectFit: "contain", marginRight: 4, borderRadius: 2, width: 20 }}
+        />
+        <span>{getLangLetters(activeLanguage)}</span>
+        {!noLanguages && (
+          <>
+            <i style={{ marginLeft: 4 }} className=" fa fa-caret-down" />
+          </>
+        )}
+      </div>
     </div>
   );
   return (

diff --git a/src/components/pieces/BlanketNotification.js b/src/components/pieces/BlanketNotification.js
@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+
+function BlanketNotification({ render, message, title, durationToReload, reloadText }) {
+  const Canvas = ({ children }) => (
+    <div
+      style={{
+        height: "100vh",
+        width: "100%",
+        background: "antiquewhite",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {children}
+    </div>
+  );
+
+  useEffect(() => {
+    if (durationToReload) {
+      const interval = setInterval(() => {
+        durationToReload--;
+        if (durationToReload === 0) window.location.reload();
+      }, durationToReload * 1000);
+      return () => clearInterval(interval);
+    }
+  }, [durationToReload]);
+
+  if (render) return <Canvas>{render()}</Canvas>;
+  return (
+    <Canvas>
+      <div
+        style={{
+          width: "50%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        {title && <h5 style={{ color: "var(--app-main-color)" }}>{title}</h5>}
+        <p>{message || "..."}</p>
+        {durationToReload && (
+          <span
+            className="touchable-opacity"
+            style={{ fontWeight: "bold", textDecoration: "underline", color: "var(--app-main-color)" }}
+            onClick={() => window.location.reload()}
+          >
+            {reloadText || "Or click to reload now!"}
+          </span>
+        )}
+      </div>
+    </Canvas>
+  );
+}
+
+export default BlanketNotification;
diff --git a/src/config/config.json b/src/config/config.json
@@ -1,3 +1,3 @@
 {
-  "BUILD_VERSION": "1.1.12"
+  "BUILD_VERSION": "1.1.19"
 }
diff --git a/src/redux/actions/actions.js b/src/redux/actions/actions.js
@@ -28,6 +28,8 @@ import {
   ADMIN_UPDATE_OFFERED_LANGUAGES,
   DEFAULT_ENGLISH_CODE,
   PREFERRED_LANGUAGE_STORAGE_KEY,
+  USER_NOTIFICATION,
+  SET_USERS_LIST_OF_LANGUAGES,
 } from "../redux-action-types";
 import { signOut } from "firebase/auth";
 import store from "./../store";
@@ -55,6 +57,12 @@ export const setActiveLanguageInStorage = (isoCode) => {
   localStorage.setItem(PREFERRED_LANGUAGE_STORAGE_KEY, isoCode);
 };
 
+export const setUsersListOfLanguages = (data) => {
+  return { type: SET_USERS_LIST_OF_LANGUAGES, payload: data };
+};
+export const setNotificationBlanket = (data) => {
+  return { type: USER_NOTIFICATION, payload: data };
+};
 export const updateOfferedLanguageAction = (data) => {
   return { type: ADMIN_UPDATE_OFFERED_LANGUAGES, payload: data };
 };
@@ -159,6 +167,30 @@ export const updateUserAction = (payload, cb) => {
   };
 };
 
+const fetchStartupContent = (params) => {
+  const { campaignId, userContent, dispatch, cb, languageCode } = params || {};
+  const languageParams = { __user_language: languageCode };
+  Promise.all([
+    apiCall(CAMPAIGN_INFORMATION_URL, { id: campaignId, ...userContent, ...languageParams }),
+    apiCall(CAMPAIGN_VIEW_URL, {
+      campaign_id: campaignId,
+      url: window.location.href,
+      ...languageParams,
+    }),
+  ])
+    .then((response) => {
+      const [campaignInformation] = response;
+      const data = campaignInformation.data;
+      dispatch(loadCampaignInformation(data));
+      if (data) {
+        dispatch(setNavigationMenuAction(data?.navigation || []));
+        dispatch(setTestimonialsActions(data?.my_testimonials || []));
+        cb && cb(data, campaignInformation?.success);
+      }
+    })
+    .catch((e) => console.log("ERROR_IN_INNIT:", e?.toString()));
+};
+
 export const appInnitAction = (campaignId, cb) => {
   let savedUser = localStorage.getItem(USER_STORAGE_KEY);
   savedUser = JSON.parse(savedUser);
@@ -168,29 +200,35 @@ export const appInnitAction = (campaignId, cb) => {
     dispatch(loadUserObjAction(savedUser)); // use saved user to run a request to bring in the most recent changes to the user
     const userContent = user?.email ? { email: user.email } : {};
 
-    Promise.all([
-      apiCall(CAMPAIGN_INFORMATION_URL, { id: campaignId, ...userContent }),
-      apiCall(CAMPAIGN_VIEW_URL, {
-        campaign_id: campaignId,
-        url: window.location.href,
-      }),
-    ])
-      .then((response) => {
-        const [campaignInformation, campaignViewResponse] = response;
-        const data = campaignInformation.data;
-        // console.log("INSIDE INNIT", data, campaignId);
-        dispatch(loadCampaignInformation(data));
-        if (data) {
-          let activeLang = localStorage.getItem(PREFERRED_LANGUAGE_STORAGE_KEY) || "en-US";
-          const found = findInLanguageList(activeLang, data?.languages);
-          if (!found) activeLang = DEFAULT_ENGLISH_CODE;
-          dispatch(loadActiveLanguageAction(activeLang));
-          dispatch(setNavigationMenuAction(data?.navigation || []));
-          dispatch(setTestimonialsActions(data?.my_testimonials || []));
-          cb && cb(data, campaignInformation?.success);
-        }
-      })
-      .catch((e) => console.log("ERROR_IN_INNIT:", e?.toString()));
+    apiCall("/campaigns.supported_languages.list", { campaign_id: campaignId }).then((response) => {
+      const languages = response?.data || [];
+      dispatch(setUsersListOfLanguages(languages?.filter((l) => l?.is_active)));
+      const prefLang = localStorage.getItem(PREFERRED_LANGUAGE_STORAGE_KEY);
+      const startUpObj = { campaignId, userContent, dispatch, cb, languageCode: DEFAULT_ENGLISH_CODE };
+      if (!prefLang) return fetchStartupContent(startUpObj);
+      const found = findInLanguageList(prefLang, languages);
+      const notActive = !found?.is_active;
+      const languageCode = found ? found?.code : DEFAULT_ENGLISH_CODE;
+      dispatch(loadActiveLanguageAction(languageCode));
+
+      if (notActive) {
+        setActiveLanguageInStorage(DEFAULT_ENGLISH_CODE);
+        return dispatch(
+          setNotificationBlanket({
+            title: "Please Note (Unsupported Language)",
+            durationToReload: 3,
+            message: (
+              <span className="body-font">
+                Your preferred language <b>{found?.name}</b> is no longer supported by this campaign. We have set your
+                language to English. In 3 seconds, this page will reload with all features in English...
+              </span>
+            ),
+          }),
+        );
+      }
+
+      fetchStartupContent({ ...startUpObj, languageCode });
+    });
   };
 };
 

diff --git a/src/redux/reducers/reducers.js b/src/redux/reducers/reducers.js
@@ -25,9 +25,12 @@ import {
   SET_STATIC_TEXT_HEAP,
   SET_TESTIMONIALS,
   SET_USER_OBJ,
+  SET_USERS_LIST_OF_LANGUAGES,
   TOGGLE_UNIVERSAL_MODAL,
   UPDATE_EVENT_OBJ,
   UPDATE_TESTIMONIALS_OBJ,
+  USER_NOTIFICATION,
+
 } from "../redux-action-types";
 
 // import defaultStaticText from "./../../utils/default-static-text.json";
@@ -53,6 +56,18 @@ const DEFAULT_STATIC_TEXT = {
   "it-IT": ITALIAN,
 };
 
+export const reducerForSettingUserLanguageList = (state = [], action = {}) => {
+  if (action.type === SET_USERS_LIST_OF_LANGUAGES) {
+    return action.payload;
+  }
+  return state;
+};
+export const reducerForSettingNotificationBlanket = (state = null, action = {}) => {
+  if (action.type === USER_NOTIFICATION) {
+    return action.payload;
+  }
+  return state;
+};
 export const doNothingReducer = (state = [], action = {}) => {
   if (action.type === DO_NOTHING) {
     return action.payload;

diff --git a/src/redux/reducers/state.js b/src/redux/reducers/state.js
@@ -23,6 +23,10 @@ import {
   universalModalReducer,
   userObjectReducer,
   reducerForCampaignOfferedLanguages,
+  reducerForSettingUserNotification,
+  reducerForSettingNotificationBlanket,
+  reducerForSettingUserLanguageList,
+
 } from "./reducers";
 import { loadCampaignInformation } from "../actions/actions";
 
@@ -49,4 +53,7 @@ export default combineReducers({
   staticTextHeap: staticTextHeapReducer,
   activeLanguage: setActiveLanguageReducer,
   campaignOfferedLanguages: reducerForCampaignOfferedLanguages,
+  blanketNotification: reducerForSettingNotificationBlanket,
+  usersListOfLanguages: reducerForSettingUserLanguageList,
+
 });
diff --git a/src/redux/redux-action-types.js b/src/redux/redux-action-types.js
@@ -23,3 +23,6 @@ export const SET_ACTIVE_LANGUAGE = "SET_ACTIVE_LANGUAGE";
 export const ADMIN_UPDATE_OFFERED_LANGUAGES = "ADMIN_UPDATE_OFFERED_LANGUAGES";
 export const DEFAULT_ENGLISH_CODE = "en-US";
 export const PREFERRED_LANGUAGE_STORAGE_KEY = "PREFERRED_LANGUAGE";
+export const USER_NOTIFICATION = "USER_NOTIFICATION";
+export const SET_USERS_LIST_OF_LANGUAGES = "SET_USERS_LIST_OF_LANGUAGES";
+