[req-change] Show plan exhausted status message

openwisp · Jan 12, 2024 · acf0ecf · acf0ecf
1 parent cb517a0
commit acf0ecf
Show file tree

Hide file tree

Showing 15 changed files with 108 additions and 5 deletions.
diff --git a/client/actions/actions.test.js b/client/actions/actions.test.js
@@ -9,6 +9,7 @@ import {
   logout as logoutAction,
   setUserData,
   setInternetMode,
+  setPlanExhausted,
 } from "./dispatchers";
 import logout from "./logout";
 import parseOrganizations from "./parse-organizations";
@@ -212,4 +213,12 @@ describe("actions testing", () => {
       type: types.SET_INTERNET_MODE,
     });
   });
+  it("should dispatch setPlanExhausted action", () => {
+    const action = setPlanExhausted(dispatch);
+    action(true);
+    expect(dispatch).toHaveBeenCalledWith({
+      payload: true,
+      type: types.SET_PLAN_EXHAUSTED,
+    });
+  });
 });
diff --git a/client/actions/dispatchers.js b/client/actions/dispatchers.js
@@ -4,6 +4,7 @@ import {
   SET_USER_DATA,
   SET_PAGE_TITLE,
   SET_INTERNET_MODE,
+  SET_PLAN_EXHAUSTED,
 } from "../constants/action-types";
 
 export const authenticate = (dispatch) => (status) => {
@@ -25,3 +26,6 @@ export const setTitle = (dispatch) => (componentTitle, orgName) => {
 export const setInternetMode = (dispatch) => (isEnabled) => {
   dispatch({type: SET_INTERNET_MODE, payload: isEnabled});
 };
+export const setPlanExhausted = (dispatch) => (isEnabled) => {
+  dispatch({type: SET_PLAN_EXHAUSTED, payload: isEnabled});
+};
diff --git a/client/components/status/index.css b/client/components/status/index.css
@@ -68,6 +68,9 @@
   overflow-wrap: break-word;
   word-wrap: break-word;
 }
+#status .plan-exhausted-message {
+  color: #ba2121f7;
+}
 .flex-wrapper {
   flex-wrap: wrap;
   max-width: 1000px;

diff --git a/client/components/status/index.js b/client/components/status/index.js
@@ -4,6 +4,7 @@ import {
   setTitle,
   setUserData,
   setInternetMode,
+  setPlanExhausted,
 } from "../../actions/dispatchers";
 import Component from "./status";
 
@@ -21,6 +22,7 @@ export const mapStateToProps = (state, ownProps) => {
     cookies: ownProps.cookies,
     language: state.language,
     internetMode: state.internetMode,
+    planExhausted: state.planExhausted,
   };
 };
 
@@ -29,5 +31,6 @@ export const mapDispatchToProps = (dispatch) => ({
   setUserData: setUserData(dispatch),
   setTitle: setTitle(dispatch),
   setInternetMode: setInternetMode(dispatch),
+  setPlanExhausted: setPlanExhausted(dispatch),
 });
 export default connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/client/components/status/status.js b/client/components/status/status.js
@@ -561,8 +561,14 @@ export default class Status extends React.Component {
   };
 
   handlePostMessage = async (event) => {
-    const {captivePortalLoginForm, logout, cookies, orgSlug, setInternetMode} =
-      this.props;
+    const {
+      captivePortalLoginForm,
+      logout,
+      cookies,
+      orgSlug,
+      setInternetMode,
+      setPlanExhausted,
+    } = this.props;
     const {setLoading} = this.context;
     const {message, type} = event.data;
     // For security reasons, read https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#security_concern
@@ -581,6 +587,8 @@ export default class Status extends React.Component {
               autoClose: 10000,
             });
             /* enable ttag */
+            // Change the message on the status page to reflect plan exhaustion
+            setPlanExhausted(true);
           } else {
             /* disable ttag */
             toast.error(gettext(message), {
@@ -933,6 +941,7 @@ export default class Status extends React.Component {
       isAuthenticated,
       userData,
       internetMode,
+      planExhausted,
       settings,
     } = this.props;
     const {links} = statusPage;
@@ -955,7 +964,10 @@ export default class Status extends React.Component {
       rememberMe,
     } = this.state;
     const user_info = this.getUserInfo();
-    const contentArr = t`STATUS_CONTENT`.split("\n");
+    let contentArr = t`STATUS_CONTENT`.split("\n");
+    if (planExhausted) {
+      contentArr = t`STATUS_EXHAUSTED_CONTENT`.split("\n");
+    }
     userInfo.status = user_info.status.value;
     return (
       <>
@@ -1044,7 +1056,12 @@ export default class Status extends React.Component {
                   contentArr.map((text) => {
                     if (text !== "")
                       return (
-                        <p key={text} className="status-content">
+                        <p
+                          key={text}
+                          className={`status-content${
+                            planExhausted ? "plan-exhausted-message" : ""
+                          }`}
+                        >
                           {text}
                         </p>
                       );
@@ -1216,6 +1233,7 @@ Status.contextType = LoadingContext;
 Status.defaultProps = {
   isAuthenticated: false,
   internetMode: false,
+  planExhausted: false,
 };
 Status.propTypes = {
   statusPage: PropTypes.shape({
@@ -1233,6 +1251,7 @@ Status.propTypes = {
   orgName: PropTypes.string.isRequired,
   userData: PropTypes.object.isRequired,
   internetMode: PropTypes.bool,
+  planExhausted: PropTypes.bool,
   cookies: PropTypes.instanceOf(Cookies).isRequired,
   logout: PropTypes.func.isRequired,
   captivePortalLoginForm: PropTypes.shape({
@@ -1266,6 +1285,7 @@ Status.propTypes = {
   }).isRequired,
   setUserData: PropTypes.func.isRequired,
   setInternetMode: PropTypes.func.isRequired,
+  setPlanExhausted: PropTypes.func.isRequired,
   setTitle: PropTypes.func.isRequired,
   navigate: PropTypes.func.isRequired,
 };
diff --git a/client/components/status/status.test.js b/client/components/status/status.test.js
@@ -69,12 +69,14 @@ const createTestProps = (props) => ({
     search: "?macaddr=4e:ed:11:2b:17:ae",
   },
   internetMode: false,
+  planExhausted: false,
   logout: jest.fn(),
   setUserData: jest.fn(),
   userData: {},
   setTitle: jest.fn(),
   navigate: jest.fn(),
   setInternetMode: jest.fn(),
+  setPlanExhausted: jest.fn(),
   ...props,
 });
 
@@ -173,6 +175,7 @@ describe("<Status /> rendering", () => {
       logout: expect.any(Function),
       setUserData: expect.any(Function),
       setInternetMode: expect.any(Function),
+      setPlanExhausted: expect.any(Function),
       setTitle: expect.any(Function),
     });
   });
@@ -569,6 +572,7 @@ describe("<Status /> interactions", () => {
     });
     expect(toast.dismiss).toHaveBeenCalledTimes(1);
     expect(toast.info).toHaveBeenCalledTimes(1);
+    expect(props.setPlanExhausted).toHaveBeenCalledTimes(1);
     expect(props.logout).toHaveBeenCalledTimes(0);
     expect(setLoadingMock).toHaveBeenCalledTimes(1);
     expect(setLoadingMock).toHaveBeenLastCalledWith(false);
@@ -1439,6 +1443,16 @@ describe("<Status /> interactions", () => {
     wrapper.instance().setState({internetMode: true});
     expect(wrapper.find("status-content").length).toEqual(0);
   });
+  it("should not display STATUS_EXHAUSTED_CONTENT when planExhausted is true", () => {
+    const prop = createTestProps();
+    prop.isAuthenticated = true;
+    wrapper = shallow(<Status {...prop} />, {
+      context: {setLoading: jest.fn()},
+      disableLifecycleMethods: true,
+    });
+    wrapper.instance().setState({planExhausted: true});
+    expect(wrapper.find("status-content").length).toEqual(0);
+  });
   it("should return if loginIframe is not loaded", async () => {
     validateToken.mockReturnValue(true);
     const prop = createTestProps();
@@ -1919,7 +1933,6 @@ describe("<Status /> interactions", () => {
     await tick();
     expect(wrapper).toMatchSnapshot();
     const modalWrapper = wrapper.find(Modal).last().shallow();
-    window.console.log(modalWrapper.debug());
     modalWrapper.find("#radio0").simulate("change", {target: {value: "0"}});
     await tick();
     toast.success.mock.calls.pop()[1].onOpen();

diff --git a/client/constants/action-types.js b/client/constants/action-types.js
@@ -6,3 +6,4 @@ export const SET_ORGANIZATION_STATUS = "SET_ORGANIZATION_STATUS";
 export const SET_USER_DATA = "SET_USER_DATA";
 export const SET_PAGE_TITLE = "SET_PAGE_TITLE";
 export const SET_INTERNET_MODE = "SET_INTERNET_MODE";
+export const SET_PLAN_EXHAUSTED = "SET_PLAN_EXHAUSTED";
diff --git a/client/reducers/index.js b/client/reducers/index.js
@@ -2,12 +2,14 @@ import {combineReducers} from "redux";
 
 import language from "./language";
 import internetMode from "./internet-mode";
+import planExhausted from "./plan-exhausted";
 import {organization, organizations} from "./organization";
 
 const rootReducer = combineReducers({
   organizations,
   organization,
   language,
   internetMode,
+  planExhausted,
 });
 export default rootReducer;
diff --git a/client/reducers/plan-exhausted.js b/client/reducers/plan-exhausted.js
@@ -0,0 +1,12 @@
+import {SET_PLAN_EXHAUSTED} from "../constants/action-types";
+
+const planExhausted = (state = false, action) => {
+  switch (action.type) {
+    case SET_PLAN_EXHAUSTED:
+      return action.payload;
+    default:
+      return state;
+  }
+};
+
+export default planExhausted;
diff --git a/i18n/de.po b/i18n/de.po
@@ -564,6 +564,12 @@ msgstr ""
 "Zugang zum Internet. Lassen Sie diese Seite offen, um die bestehende Session zu "
 "schließen."
 
+#: client/components/status/status.js:592
+msgid "STATUS_EXHAUSTED_CONTENT"
+msgstr ""
+"Sie haben den in Ihrem Plan verfügbaren Datenverkehr ausgeschöpft.\n"
+"Aktualisieren Sie Ihren Plan, um weiterhin das Internet nutzen zu können."
+
 #: client/components/status/status.js:723
 msgid "YES"
 msgstr "Ja"

diff --git a/i18n/en.po b/i18n/en.po
@@ -86,6 +86,12 @@ msgstr ""
 "        You can now use the internet.\n"
 "        You may leave this page open in case you want to log out."
 
+#: client/components/status/status.js:592
+msgid "STATUS_EXHAUSTED_CONTENT"
+msgstr ""
+"You have exhausted the traffic available on your plan.\n"
+"Upgrade your plan to continue using the internet."
+
 #: client/components/status/status.js:716
 msgid "LOGOUT_MODAL_CONTENT"
 msgstr "Do you want to automatically log in the next time?"

diff --git a/i18n/fur.po b/i18n/fur.po
@@ -93,6 +93,12 @@ msgstr ""
 "Cumò si pues acedi a internet\n"
 "Ten vierte cheste pagjine par podê sierâ la session ative."
 
+#: client/components/status/status.js:592
+msgid "STATUS_EXHAUSTED_CONTENT"
+msgstr ""
+"Tu âs consumût il trafeg disponibil sul to piaç.\n"
+"Aggjorna il to piaç par continuâ a doprâ internet."
+
 #: client/components/status/status.js:715
 msgid "LOGOUT_MODAL_CONTENT"
 msgstr "Autenticâsi in maniere automatiche la prossime volte?"

diff --git a/i18n/it.po b/i18n/it.po
@@ -93,6 +93,12 @@ msgstr ""
 "        Ora è possibile accedere ad internet.\n"
 "        Puoi lasciare questa pagina aperta per poter chiudere la sessione attiva."
 
+#: client/components/status/status.js:592
+msgid "STATUS_EXHAUSTED_CONTENT"
+msgstr ""
+"Hai esaurito il traffico disponibile sul tuo piano.\n"
+"Aggiorna il tuo piano per continuare a utilizzare Internet."
+
 #: client/components/status/status.js:715
 msgid "LOGOUT_MODAL_CONTENT"
 msgstr "Autenticarsi automaticamente la prossima volta?"

diff --git a/i18n/ru.po b/i18n/ru.po
@@ -99,6 +99,12 @@ msgstr ""
 "Вход выполнен успешно\n"
 "        Теперь вы можете путешествовать по Интернету"
 
+#: client/components/status/status.js:592
+msgid "STATUS_EXHAUSTED_CONTENT"
+msgstr ""
+"Вы исчерпали трафик, доступный на вашем тарифном плане.\n"
+"Обновите свой план, чтобы продолжать пользоваться Интернетом."
+
 #: client/components/status/status.js:715
 msgid "LOGOUT_MODAL_CONTENT"
 msgstr "Вы хотите в следующий раз пройти автоматическую аутентификацию?"

diff --git a/i18n/sl.po b/i18n/sl.po
@@ -73,6 +73,12 @@ msgstr ""
 "Prijava v WiFi je uspela!  NZdaj lahko uporabljate internet.  NTo stran "
 "lahko pustite odprto, če se želite odjaviti."
 
+#: client/components/status/status.js:592
+msgid "STATUS_EXHAUSTED_CONTENT"
+msgstr ""
+"Vyčerpali ste premávku dostupnú vo vašom pláne.\n"
+"Ak chcete naďalej používať internet, inovujte svoj plán."
+
 #: client/components/status/status.js:715
 msgid "LOGOUT_MODAL_CONTENT"
 msgstr "Se želite naslednjič samodejno prijaviti?"