Web: People: Added opportunity to unsubscribe from mailing list on My Profile page (/my?unsubscribe=tips)

packages/asc-web-common/api/settings/index.js

@@ -331,3 +331,19 @@ export function getBuildVersion() {
   };
   return request(options);
 }
+
+export function getTipsSubscription() {
+  const options = {
+    method: "get",
+    url: "/settings/tips/subscription.json",
+  };
+  return request(options);
+}
+
+export function toggleTipsSubscription() {
+  const options = {
+    method: "put",
+    url: "/settings/tips/change/subscription",
+  };
+  return request(options);
+}

products/ASC.People/Client/public/locales/en/Profile.json

@@ -16,6 +16,8 @@
   "ProviderSuccessfullyDisconnected": "Provider successfully disconnected",
   "ShowBackupCodes": "Show backup codes",
   "Subscriptions": "Subscriptions",
+  "SubscriptionEmailTipsToggleLbl": "Email notification with tips and tricks",
+  "SubscriptionTurnOffToast": "You have been successfully unsubscribed from the the mailing list. <1>Subscribe again</1>",
   "TfaLoginSettings": "Login settings",
   "TwoFactorDescription": "Two-factor authentication via a code-generating app was enabled for all users by the admin."
-}
+}

products/ASC.People/Client/src/pages/My/index.js

@@ -5,7 +5,6 @@ import PeopleStore from "../../store/PeopleStore";
 import PropTypes from "prop-types";
 import PageLayout from "@appserver/common/components/PageLayout";
 import toastr from "studio/toastr";
-import Loaders from "@appserver/common/components/Loaders";
 import { withRouter } from "react-router";
 
 import { Provider as PeopleProvider, inject, observer } from "mobx-react";
@@ -16,6 +15,8 @@ import {
 } from "../Profile/Section";
 import { SectionHeaderContent as EditHeaderContent } from "../ProfileAction/Section";
 import EditBodyContent from "../ProfileAction/Section/Body";
+import Link from "@appserver/components/link";
+import { Trans } from "react-i18next";
 
 class My extends React.Component {
   componentDidMount() {
@@ -43,6 +44,7 @@ class My extends React.Component {
     if (linkParams.email_change && linkParams.email_change === "success") {
       toastr.success(t("ChangeEmailSuccess"));
     }
+
     if (!profile) {
       setIsLoading(true);
       setLoadedProfile(false);
@@ -57,8 +59,44 @@ class My extends React.Component {
     this.props.resetProfile();
   }
 
+  componentDidUpdate() {
+    const { tipsSubscription, t, changeEmailSubscription } = this.props;
+    if (location?.search !== "?unsubscribe=tips" || tipsSubscription === null)
+      return;
+
+    if (!tipsSubscription) {
+      window.history.replaceState("", "", window.location.pathname);
+      return;
+    }
+
+    changeEmailSubscription(false)
+      .then(() => {
+        window.history.replaceState("", "", window.location.pathname);
+        toastr.success(
+          <Trans t={t} i18nKey="SubscriptionTurnOffToast" ns="Profile">
+            You have been successfully unsubscribed from the the mailing list.
+            <Link
+              color="#5387AD"
+              isHovered={true}
+              onClick={() => {
+                changeEmailSubscription(true);
+                toastr.clear();
+              }}
+            >
+              Subscribe again
+            </Link>
+          </Trans>,
+          null,
+          0,
+          true,
+          true
+        );
+      })
+      .catch((e) => console.error(e));
+  }
+
   render() {
-    const { profile, tReady, location } = this.props;
+    const { tReady, location } = this.props;
 
     const isEdit = (location && location.search === "?action=edit") || false;
 
@@ -104,6 +142,9 @@ const MyProfile = withRouter(
     setLoadedProfile: peopleStore.loadingStore.setLoadedProfile,
     setIsLoading: peopleStore.loadingStore.setIsLoading,
     setFirstLoad: peopleStore.loadingStore.setFirstLoad,
+    tipsSubscription: peopleStore.targetUserStore.tipsSubscription,
+    changeEmailSubscription:
+      peopleStore.targetUserStore.changeEmailSubscription,
   }))(withTranslation(["Profile", "ProfileAction"])(observer(My)))
 );
 

products/ASC.People/Client/src/pages/Profile/Section/Body/index.js

@@ -5,6 +5,8 @@ import Text from "@appserver/components/text";
 import SocialButton from "@appserver/components/social-button";
 import FacebookButton from "@appserver/components/facebook-button";
 import ToggleContent from "@appserver/components/toggle-content";
+import ToggleButton from "@appserver/components/toggle-button";
+import Box from "@appserver/components/box";
 import Link from "@appserver/components/link";
 import ProfileInfo from "./ProfileInfo/ProfileInfo";
 import toastr from "studio/toastr";
@@ -41,6 +43,14 @@ const ProfileWrapper = styled.div`
   align-items: flex-start;
   flex-direction: row;
   flex-wrap: wrap;
+
+  .toggle-btn {
+    position: relative;
+
+    .toggle-button-text {
+      margin-top: -1px;
+    }
+  }
 `;
 
 const AvatarWrapper = styled.div`
@@ -328,6 +338,12 @@ class SectionBodyContent extends React.PureComponent {
     return !!existProviders;
   };
 
+  onChangeEmailSubscription = (e) => {
+    const checked = e.currentTarget.checked;
+
+    this.props.changeEmailSubscription(checked);
+  };
+
   render() {
     const { resetAppDialogVisible, backupCodesDialogVisible, tfa } = this.state;
     const {
@@ -341,6 +357,7 @@ class SectionBodyContent extends React.PureComponent {
       providers,
       backupCodes,
       personal,
+      tipsSubscription,
     } = this.props;
     const contacts = profile.contacts && getUserContacts(profile.contacts);
     const role = getUserRole(profile);
@@ -403,6 +420,22 @@ class SectionBodyContent extends React.PureComponent {
             </ToggleContent>
           </ToggleWrapper>
         )}
+        {personal && isSelf && (
+          <ToggleWrapper isSelf={true}>
+            <ToggleContent
+              label={t("Subscriptions")}
+              isOpen={true}
+              enableToggle={false}
+            >
+              <ToggleButton
+                className="toggle-btn"
+                label={t("SubscriptionEmailTipsToggleLbl")}
+                onChange={this.onChangeEmailSubscription}
+                isChecked={tipsSubscription}
+              />
+            </ToggleContent>
+          </ToggleWrapper>
+        )}
         {!personal && isSelf && false && (
           <ToggleWrapper isSelf={true}>
             <ToggleContent label={t("Subscriptions")} isOpen={true}>
@@ -507,6 +540,8 @@ export default withRouter(
       targetUser: profile,
       isMe: isSelf,
       setIsEditTargetUser,
+      changeEmailSubscription,
+      tipsSubscription,
     } = targetUserStore;
     const { avatarMax, setAvatarMax } = avatarEditorStore;
     const { providers, setProviders } = usersStore;
@@ -539,6 +574,8 @@ export default withRouter(
       setBackupCodes,
       setIsEditTargetUser,
       personal: auth.settingsStore.personal,
+      changeEmailSubscription,
+      tipsSubscription,
     };
   })(
     observer(

products/ASC.People/Client/src/store/TargetUserStore.js

@@ -8,6 +8,7 @@ const { auth: authStore } = store;
 class TargetUserStore {
   targetUser = null;
   isEditTargetUser = false;
+  tipsSubscription = null;
 
   constructor(peopleStore) {
     this.peopleStore = peopleStore;
@@ -37,6 +38,10 @@ class TargetUserStore {
       return this.setTargetUser(authStore.userStore.user);
     } else {*/
     const user = await api.people.getUser(userName);
+    if (user?.userName === authStore.userStore.user.userName) {
+      const tipsSubscription = await api.settings.getTipsSubscription();
+      this.tipsSubscription = tipsSubscription;
+    }
     this.setTargetUser(user);
     return user;
     //}
@@ -91,6 +96,11 @@ class TargetUserStore {
   setIsEditTargetUser = (isEditTargetUser) => {
     this.isEditTargetUser = isEditTargetUser;
   };
+
+  changeEmailSubscription = async (enabled) => {
+    this.tipsSubscription = enabled;
+    this.tipsSubscription = await api.settings.toggleTipsSubscription();
+  };
 }
 
 export default TargetUserStore;