newsletter preview changes

AI4Bharat · Nov 22, 2023 · 33dfd4b · 33dfd4b
1 parent 0f12b5c
commit 33dfd4b
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 13 deletions.
diff --git a/src/config/apiendpoint.js b/src/config/apiendpoint.js
@@ -16,6 +16,7 @@ const endpoints = {
   userRoles: "/users/roles/",
   newsletterSubscribe: "/newsletter/subscribe/",
   newsletter: "/newsletter/",
+  preview: "/newsletter/preview/",
 
   //Video
   video: "/video/",

diff --git a/src/containers/Admin/NewsLetterTemplate.jsx b/src/containers/Admin/NewsLetterTemplate.jsx
@@ -1,9 +1,11 @@
 import { Grid, Select, MenuItem, FormControl, InputLabel, Box, TextField, Button } from "@mui/material";
-import { useCallback, useState } from "react";
-import { useDispatch } from "react-redux";
+import { useCallback, useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { APITransport, NewsletterTemplate } from "redux/actions";
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { styled } from '@mui/material/styles';
+import NewsletterPreview from "redux/actions/api/Admin/NewsLetterPreview";
+import clearTemplatePreview from "redux/actions/api/Admin/ClearTemplatePreview";
 
 const VisuallyHiddenInput = styled('input')({
   clip: 'rect(0 0 0 0)',
@@ -27,14 +29,17 @@ const NewsLetter = () => {
   })
   const dispatch = useDispatch();
 
+  const { html } = useSelector(state => state.newsletterPreviewReducer);
+
   const handleTemplateChange = (e) => {
     setTemplateInfo((prev) => ({
       ...prev,
       1: null,
       2: null,
       3: null
     }))
-    setSelectedTemplate(e.target.value)
+    setSelectedTemplate(e.target.value);
+
   };
 
   const handleTemplateSubmit = () => {
@@ -46,7 +51,17 @@ const NewsLetter = () => {
     }
     const templateOneObj = new NewsletterTemplate(payload, selectedTemplate);
     dispatch(APITransport(templateOneObj));
+  };
 
+  const handleTemplatePreview = () => {
+    const payload = {
+      submitter_id: 1,
+      content: selectedTemplate !== 3 ? [templateInfo?.[selectedTemplate]] : templateInfo?.[selectedTemplate],
+      category: "NEW_FEATURE",
+      template_id: selectedTemplate
+    }
+    const templateOneObj = new NewsletterPreview(payload, selectedTemplate);
+    dispatch(APITransport(templateOneObj));
   };
 
   const handleChange = (prop, value) => {
@@ -59,6 +74,10 @@ const NewsLetter = () => {
     }));
   };
 
+  useEffect(() => {
+    dispatch(clearTemplatePreview());
+  }, [selectedTemplate]);
+
   function getBase64(file) {
     return new Promise((resolve, reject) => {
       var reader = new FileReader();
@@ -76,41 +95,51 @@ const NewsLetter = () => {
 
   const templateOne = () => {
     return <Grid container spacing={2}>
-      <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
+      <Grid display="flex" justifyContent="center" alignContent="center" item xs={6} sm={6} md={6} lg={6} xl={6}>
         <TextField placeholder="Header text" value={templateInfo?.[selectedTemplate]?.header || ""} onChange={(e) => handleChange("header", e.target.value)} />
       </Grid>
-      <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
+      <Grid display="flex" justifyContent="center" alignContent="center" item xs={6} sm={6} md={6} lg={6} xl={6}>
         <textarea style={{
           "width": "230px", height: "52px"
         }} placeholder="Enter the paragraph" value={templateInfo?.[selectedTemplate]?.paragraph || ""} onChange={(e) => handleChange("paragraph", e.target.value)} />
       </Grid>
       <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
         <Button variant="contained" onClick={handleTemplateSubmit}>Submit</Button>
+        <Button style={{"marginLeft": "30px"}} variant="contained" onClick={handleTemplatePreview}>Preview</Button>
+      </Grid>
+      <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
+      <div dangerouslySetInnerHTML={{ __html: html }} />
       </Grid>
     </Grid>
   };
 
   const templateTwo = () => {
     return <Grid container spacing={2}>
-      <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
+      <Grid display="flex" justifyContent="center" alignContent="center" item xs={6} sm={6} md={6} lg={6} xl={6}>
         <TextField placeholder="Header text" value={templateInfo?.[selectedTemplate]?.header || ""} onChange={(e) => handleChange("header", e.target.value)} />
       </Grid>
-      <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
+      <Grid display="flex" justifyContent="center" alignContent="center" item xs={6} sm={6} md={6} lg={6} xl={6}>
         <TextField placeholder="Image link" value={templateInfo?.[selectedTemplate]?.image || ""} onChange={(e) => handleChange("image", e.target.value)} />
       </Grid>
-      <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
-        <TextField placeholder="Video link" value={templateInfo?.[selectedTemplate]?.video || ""} onChange={(e) => handleChange("video", e.target.value)} />
+      <Grid display="flex" justifyContent="center" alignContent="center" item xs={6} sm={6} md={6} lg={6} xl={6}>
+        <TextField placeholder="Video link" value={templateInfo?.[selectedTemplate]?.youtube_url || ""} onChange={(e) => handleChange("youtube_url", e.target.value)} />
       </Grid>
-      <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
+      {/* <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
         <TextField placeholder="Youtube link" value={templateInfo?.[selectedTemplate]?.youtube_url || ""} onChange={(e) => handleChange("youtube_url", e.target.value)} />
-      </Grid>
-      <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
+      </Grid> */}
+      <Grid display="flex" justifyContent="center" alignContent="center" item xs={6} sm={6} md={6} lg={6} xl={6}>
         <textarea style={{
           "width": "230px", height: "52px"
         }} placeholder="Enter the paragraph" value={templateInfo?.[selectedTemplate]?.paragraph || ""} onChange={(e) => handleChange("paragraph", e.target.value)} />
       </Grid>
       <Grid display="flex" justifyContent="center" alignContent="center" item xs={12} sm={12} md={12} lg={12} xl={12}>
         <Button variant="contained" onClick={handleTemplateSubmit}>Submit</Button>
+        <Button style={{
+          "marginLeft": "30px"
+        }}variant="contained" onClick={handleTemplatePreview}>Preview</Button>
+      </Grid>
+      <Grid display="flex" justifyContent="center" alignContent="center" item xs={6} sm={6} md={6} lg={6} xl={6}>
+        <div dangerouslySetInnerHTML={{ __html: html }} />
       </Grid>
     </Grid>
   };
@@ -124,7 +153,7 @@ const NewsLetter = () => {
               const file = e.target.files[0]
               getBase64(file)
                 .then(base64Data => {
-                  const base64Substr =  base64Data.substr(base64Data.indexOf(",") + 1);
+                  const base64Substr = base64Data.substr(base64Data.indexOf(",") + 1);
                   handleChange("html", base64Substr.toString());
                 })
                 .catch(error => {

diff --git a/src/redux/actions/api/Admin/ClearTemplatePreview.js b/src/redux/actions/api/Admin/ClearTemplatePreview.js
@@ -0,0 +1,9 @@
+import C from "../../../constants";
+
+const clearTemplatePreview = () => {
+    return {
+        type: C.CLEAR_TEMPLATE_PREVIEW
+    }
+};
+
+export default clearTemplatePreview;
diff --git a/src/redux/actions/api/Admin/NewsLetterPreview.js b/src/redux/actions/api/Admin/NewsLetterPreview.js
@@ -0,0 +1,44 @@
+import API from "../../../api";
+import ENDPOINTS from "../../../../config/apiendpoint";
+import C from "../../../constants";
+
+export default class NewsletterPreview extends API {
+    constructor(payload, templateId, timeout = 2000) {
+        super("POST", timeout, false);
+        this.payload = payload;
+        this.templateId = templateId;
+        this.type = C.GET_TEMPLATE_PREVIEW;
+        this.endpoint = `${super.apiEndPointAuto()}${ENDPOINTS.preview}`;
+    }
+
+    processResponse(res) {
+        super.processResponse(res);
+        if (res) {
+            this.report = res;
+        }
+    }
+
+    apiEndPoint() {
+        return this.endpoint;
+    }
+
+    getBody() {
+        return {
+            ...this.payload
+        }
+    }
+
+    getHeaders() {
+        this.headers = {
+            headers: {
+                "Content-Type": "application/json",
+                "Authorization": `JWT ${localStorage.getItem('token')}`,
+            },
+        };
+        return this.headers;
+    }
+
+    getPayload() {
+        return this.report;
+    }
+}
diff --git a/src/redux/constants.js b/src/redux/constants.js
@@ -120,6 +120,8 @@ const constants = {
     //Admin
     GET_ORG_OWNER_LIST: "GET_ORG_OWNER_LIST",
     GET_ADMIN_REPORTS:"GET_ADMIN_REPORTS",
+    GET_TEMPLATE_PREVIEW: "GET_TEMPLATE_PREVIEW",
+    CLEAR_TEMPLATE_PREVIEW: "CLEAR_TEMPLATE_PREVIEW",
 
     //clear state
     CLEAR_STATE: "CLEAR_STATE",

diff --git a/src/redux/reducers/Admin/NewsLetterPreview.js b/src/redux/reducers/Admin/NewsLetterPreview.js
@@ -0,0 +1,34 @@
+import C from "../../constants";
+
+const initialState = {
+    html: null
+};
+
+const newsletterPreviewReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case C.GET_TEMPLATE_PREVIEW:
+            try {
+                const { html } = action.payload;
+                return {
+                    ...state,
+                    html
+                }
+            } catch (e) {
+                return {
+                    ...state,
+                    html: null,
+                }
+            }
+        case C.CLEAR_TEMPLATE_PREVIEW:
+            return {
+                ...state,
+                html: null,
+            }
+        default:
+            return {
+                ...state
+            }
+    }
+};
+
+export default newsletterPreviewReducer;
diff --git a/src/redux/reducers/index.js b/src/redux/reducers/index.js
@@ -47,6 +47,7 @@ import getTaskQueueStatus from "./Organization/FetchTaskQueueStatus";
 import getSpeakerInfo from "./Project/FetchSpeakerInfo";
 import getSupportedBulkTaskTypes from "./Project/FetchSupportedBulkTaskTypes";
 import getPreviewData from "./Project/FetchPreviewData";
+import newsletterPreviewReducer from "./Admin/NewsLetterPreview";
 
 const rootReducer = {
     apiStatus,
@@ -98,6 +99,7 @@ const rootReducer = {
     getVoiceoverExportTypes,
     getSupportedBulkTaskTypes,
     getPreviewData,
+    newsletterPreviewReducer,
 };
 
 export default rootReducer;