Merge pull request #531 from AI4Bharat/CL-613

updated newletter subscription flow and added unsubscribe page

src/common/UnsubscribeHeader.jsx

@@ -0,0 +1,40 @@
+import { AppBar, Box, Container, Toolbar, Typography } from "@mui/material";
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { headerStyle } from "styles";
+
+const UnsubscribeHeader = () => {
+  const classes = headerStyle();
+  const navigate = useNavigate();
+
+  return (
+    <AppBar position="fixed">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters className={classes.toolbar}>
+          <Box
+            className={classes.logoContainer}
+            onClick={() => navigate("/login")}
+          >
+            <Box className={classes.imageBox}>
+              <img
+                src={"Chitralekha_Logo_Transparent.png"}
+                alt="ai4bharat"
+                className={classes.Logo}
+              />
+              <Typography variant="h4" sx={{ color: "black" }}>
+                Chitralekha
+              </Typography>
+            </Box>
+            <Box>
+              <Typography className={classes.poweredByText}>
+                Powered by EkStep Foundation
+              </Typography>
+            </Box>
+          </Box>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+};
+
+export default UnsubscribeHeader;

src/common/index.js

@@ -44,6 +44,7 @@ import ChitralekhaPortal from "./ChitralekhaPortal";
 import RecorderComponent from "./RecorderComponent";
 import { TabPanel } from "./TabPanel";
 import ShortcutKeys from "./ShortcutKeys";
+import UnsubscribeHeader from "./UnsubscribeHeader";
 
 export {
   AddOrganizationMember,
@@ -92,4 +93,5 @@ export {
   RecorderComponent,
   TabPanel,
   ShortcutKeys,
+  UnsubscribeHeader,
 };

src/config/apiendpoint.js

@@ -15,7 +15,8 @@ const endpoints = {
   confirmResetPassword: "/users/auth/users/reset_password_confirm/",
   languages: "/users/languages/fetch/",
   userRoles: "/users/roles/",
-  newsletterSubscribe: "/newsletter/subscribe/",
+  updateSubscription: "/newsletter/update_subscription/",
+  unSubscribeFromEmail: "/newsletter/unsubscribe",
   newsletter: "/newsletter/",
   preview: "/newsletter/preview/",
 
@@ -37,4 +38,4 @@ const endpoints = {
   task: "/task/",
 };
 
-export default endpoints;
+export default endpoints;

src/config/index.js

@@ -34,7 +34,7 @@ import {
   tamilTagsSuggestionData,
   teluguTagsSuggestionData,
 } from "./noiseTags";
-import { profileOptions } from "./profileConfigs";
+import { categoryConfig, profileOptions } from "./profileConfigs";
 import {
   bgMusicOptions,
   buttonConfig,
@@ -125,4 +125,5 @@ export {
   reopenTableColumns,
   renderTaskListColumnCell,
   org_ids,
+  categoryConfig,
 };

src/config/profileConfigs.js

@@ -39,3 +39,18 @@ export const profileOptions = [
     iterator: availability,
   },
 ];
+
+export const categoryConfig = [
+  {
+    name: "downtime",
+    label: "Downtime",
+  },
+  {
+    name: "release",
+    label: "Release",
+  },
+  {
+    name: "general",
+    label: "General",
+  },
+];

src/containers/UserManagement/DailyEmailToggle.jsx

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+
+//Component
+import { FormControlLabel, Grid, Switch, Tooltip } from "@mui/material";
+
+//APIs
+import { APITransport, ToggleMailsAPI, UpdateProfileAPI } from "redux/actions";
+
+const DailyEmailToggle = () => {
+  const { id } = useParams();
+  const dispatch = useDispatch();
+
+  const loggedInUser = useSelector(
+    (state) => state.getLoggedInUserDetails.data
+  );
+
+  const [dailyEmail, setDailyEmail] = useState(false);
+  const [orgOwnerId, setOrgOwnerId] = useState("");
+
+  useEffect(() => {
+    if (loggedInUser.id) {
+      const {
+        organization: { organization_owner },
+        enable_mail,
+      } = loggedInUser;
+
+      setOrgOwnerId(organization_owner.id);
+      setDailyEmail(enable_mail);
+    }
+  }, [loggedInUser]);
+
+  const handleSwitchToggleEmail = () => {
+    setDailyEmail((prev) => !prev);
+
+    let updateProfileReqBody = {
+      enable_mail: !dailyEmail,
+    };
+
+    const apiObj = new UpdateProfileAPI(updateProfileReqBody, id);
+    dispatch(APITransport(apiObj));
+
+    const mailObj = new ToggleMailsAPI(loggedInUser.id, !dailyEmail);
+    dispatch(APITransport(mailObj));
+  };
+
+  return (
+    <Grid display="flex" justifyContent="center" item xs={12} md={8}>
+      <Tooltip
+        title={`${dailyEmail ? "Disable" : "Enable"} daily mails`}
+        sx={{ marginLeft: "0", marginTop: "8px" }}
+      >
+        <FormControlLabel
+          control={<Switch color="primary" />}
+          checked={dailyEmail}
+          onChange={() => handleSwitchToggleEmail()}
+          disabled={
+            !(
+              loggedInUser.id === +id ||
+              loggedInUser.role === "ADMIN" ||
+              loggedInUser.id === orgOwnerId
+            )
+          }
+        />
+      </Tooltip>
+    </Grid>
+  );
+};
+
+export default DailyEmailToggle;

src/containers/UserManagement/NewsLetterCategories.jsx

@@ -0,0 +1,102 @@
+import { useEffect, useState } from "react";
+import { categoryConfig } from "config";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+
+//Styles
+import { LoginStyle } from "styles";
+
+//Components
+import {
+  Button,
+  Checkbox,
+  FormControlLabel,
+  FormGroup,
+  Grid,
+} from "@mui/material";
+
+//APIs
+import { APITransport, UpdateSubscriptionAPI } from "redux/actions";
+
+const NewsLetterCategories = ({ email }) => {
+  const classes = LoginStyle();
+  const { id } = useParams();
+  const dispatch = useDispatch();
+
+  const loggedInUser = useSelector(
+    (state) => state.getLoggedInUserDetails.data
+  );
+
+  const [selectedCategory, setSelectedCategory] = useState({
+    downtime: true,
+    release: true,
+    general: true,
+  });
+
+  useEffect(() => {
+    if (loggedInUser.subscribed_info) {
+      const {
+        subscribed_info: { categories },
+      } = loggedInUser;
+
+      setSelectedCategory({
+        downtime: categories.includes("Downtime"),
+        release: categories.includes("Release"),
+        general: categories.includes("General"),
+      });
+    }
+  }, [loggedInUser]);
+
+  const handleChange = (event) => {
+    setSelectedCategory({
+      ...selectedCategory,
+      [event.target.name]: event.target.checked,
+    });
+  };
+
+  const handleCategoryUpdate = () => {
+    const categories = ["Downtime", "Release", "General"].filter(
+      (item) => selectedCategory[item.toLowerCase()]
+    );
+
+    const body = {
+      email,
+      user_id: +id,
+      categories,
+    };
+
+    const newsLetterObj = new UpdateSubscriptionAPI(body);
+    dispatch(APITransport(newsLetterObj));
+  };
+
+  return (
+    <Grid container display={"flex"} alignItems={"center"}>
+      <Grid item xs={12} md={8} className={classes.newLetterGridItems}>
+        <FormGroup row>
+          {categoryConfig.map((item) => {
+            return (
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={selectedCategory[item.name]}
+                    onChange={handleChange}
+                    name={item.name}
+                  />
+                }
+                label={item.label}
+              />
+            );
+          })}
+        </FormGroup>
+      </Grid>
+
+      <Grid item xs={12} md={4} className={classes.newLetterGridItems}>
+        <Button variant="contained" onClick={() => handleCategoryUpdate()}>
+          Update
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default NewsLetterCategories;

src/containers/UserManagement/NewsLetterEmail.jsx

@@ -0,0 +1,66 @@
+import { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+import { validateEmail } from "utils/utils";
+
+//Styles
+import { LoginStyle } from "styles";
+
+//Components
+import { Button, Grid, TextField } from "@mui/material";
+
+//APIs
+import { APITransport } from "redux/actions";
+import UpdateNewsLetterEmailAPI from "redux/actions/api/Admin/UpdateNewsLetterEmail";
+
+const NewsLetterEmail = ({ email, setEmail }) => {
+  const classes = LoginStyle();
+  const { id } = useParams();
+  const dispatch = useDispatch();
+
+  const loggedInUser = useSelector(
+    (state) => state.getLoggedInUserDetails.data
+  );
+
+  useEffect(() => {
+    if (loggedInUser.subscribed_info) {
+      const {
+        subscribed_info: { email },
+      } = loggedInUser;
+
+      setEmail(email);
+    }
+
+    //eslint-disable-next-line
+  }, [loggedInUser]);
+
+  const handleEmailUpdate = () => {
+    const newsLetterObj = new UpdateNewsLetterEmailAPI(email, +id);
+    dispatch(APITransport(newsLetterObj));
+  };
+
+  return (
+    <Grid container display={"flex"} alignItems={"center"}>
+      <Grid item xs={12} md={8} className={classes.newLetterGridItems}>
+        <TextField
+          placeholder="[email protected]"
+          onChange={(e) => setEmail(e.target.value)}
+          value={email}
+          sx={{ width: "70%" }}
+        />
+      </Grid>
+
+      <Grid item xs={12} md={4} className={classes.newLetterGridItems}>
+        <Button
+          variant="contained"
+          onClick={() => handleEmailUpdate()}
+          disabled={!validateEmail(email)}
+        >
+          Update
+        </Button>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default NewsLetterEmail;