Merge pull request #142 from bluewave-labs/banner-popup-axios

created axios for popup and banners
bluewave-labs · Aug 13, 2024 · 015af62 · 015af62
2 parents b8d515c + e5d5295
commit 015af62
Show file tree

Hide file tree

Showing 15 changed files with 145 additions and 30 deletions.
diff --git a/backend/src/controllers/banner.controller.js b/backend/src/controllers/banner.controller.js
@@ -9,7 +9,7 @@ const validatePosition = (value) => {
 };
 
 const validateCloseButtonAction = (value) => {
-  const validActions = ["no-action", "open-url", "open-url-new-tab"];
+  const validActions = ["no action", "open url", "open url in a new tab"];
   return validActions.includes(value);
 };
 

diff --git a/backend/src/controllers/popupController.js b/backend/src/controllers/popupController.js
@@ -9,12 +9,7 @@ const validatePopupSize = (value) => {
 };
 
 const validateCloseButtonAction = (value) => {
-  const validActions = [
-    "no-action",
-    "open-url",
-    "close-popup",
-    "open-url-new-tab",
-  ];
+  const validActions = ["no action", "open url", "open url in a new tab"];
   return validActions.includes(value);
 };
 

diff --git a/backend/src/models/Banner.js b/backend/src/models/Banner.js
@@ -4,7 +4,7 @@ module.exports = (sequelize, DataTypes) => {
             type: DataTypes.STRING,
             allowNull: false,
             validate: {
-              isIn: [["no-action", "open-url", "open-url-new-tab"]],
+              isIn: [["no action", "open url", "open url in a new tab"]],
             },
           },
           position: {

diff --git a/backend/src/models/Popup.js b/backend/src/models/Popup.js
@@ -11,7 +11,7 @@ module.exports = (sequelize, DataTypes) => {
         type: DataTypes.STRING,
         allowNull: false,
         validate: {
-          isIn: [["no-action", "open-url", "close-popup", "open-url-new-tab"]],
+          isIn: [["no action", "open url", "open url in a new tab"]],
         },
       },
       popupSize: {

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -24,8 +24,8 @@ function App() {
     <>
       <Routes>
         <Route path="/" element={isLoggedIn ? <Private Component={Home} /> : <LoginPage />} />
-        <Route path="/home" element={<Private Component={Home} />} />
-        <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />        
+        {/* <Route path="/home" element={<Private Component={Home} />} /> */}
+        {/* <Route path="/" element={isLoggedIn ? <Home/> : <LoginPage />} />         */}
         <Route path="/login" element={<LoginPage />} />        
         <Route path="/signup" element={<CreateAccountPage />} />
         <Route path="/forgot-password" element={<ForgotPasswordPage />} />

diff --git a/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx b/frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx
@@ -4,15 +4,21 @@ import DropdownList from '../../DropdownList/DropdownList';
 import { Radio } from "@mui/material";
 import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
 
-const BannerLeftContent = ({ setIsTopPosition, url, setUrl }) => {
+const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) => {
     const handleSetUrl = (event) => {
         setUrl(event.target.value);
       };
+      const handleActionChange = (newAction) => {
+        setButtonAction(newAction);
+      };
 
     return (
         <div className={styles.container}>
             <h2>Action</h2>
-            <DropdownList actions={['No action', 'Open a URL', 'Open a URL in a new page']} />
+            <DropdownList 
+                actions={['No action', 'Open a URL', 'Open a URL in a new page']} 
+                onActionChange={handleActionChange}
+            />
             <h2>Position</h2>
             <div className={styles.radioContent}>
                 <Radio onClick={() => setIsTopPosition(true)} />

diff --git a/frontend/src/components/DropdownList/DropdownList.jsx b/frontend/src/components/DropdownList/DropdownList.jsx
@@ -1,13 +1,33 @@
 import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import "./DropdownList.css";
 
-const DropdownList = ({ actions = [] }) => {
+const DropdownList = ({ actions = [], onActionChange }) => {
+  const [selectedAction, setSelectedAction] = useState(actions[0] || "");
+
+  useEffect(() => {
+    if (onActionChange) {
+      onActionChange(selectedAction);
+    }
+  }, []);
+
+  const handleChange = (event) => {
+    const newValue = event.target.value;
+    setSelectedAction(newValue);
+    if (onActionChange) {
+      onActionChange(newValue);
+    }
+  };
+
   return (
     <div className="dropdown">
-      <Select defaultValue={actions[0]} className="select">
+      <Select
+        value={selectedAction}
+        onChange={handleChange}
+        className="select"
+      >
         {actions.map((action, index) => (
           <MenuItem key={index} className="menuItem" value={action}>
             {action}
@@ -19,7 +39,8 @@ const DropdownList = ({ actions = [] }) => {
 };
 
 DropdownList.propTypes = {
-  actions: PropTypes.array,
+  actions: PropTypes.arrayOf(PropTypes.string),
+  onActionChange: PropTypes.func, // Function to handle action change
 };
 
 export default DropdownList;
diff --git a/frontend/src/components/PopupPageComponents/PopupAppearance/PopupAppearance.jsx b/frontend/src/components/PopupPageComponents/PopupAppearance/PopupAppearance.jsx
@@ -3,7 +3,10 @@ import styles from './PopupAppearance.module.scss';
 import ColorTextField from '../../ColorTextField/ColorTextField';
 import DropdownList from '../../DropdownList/DropdownList';
 
-const PopupAppearance = ({ data = [] }) => {
+const PopupAppearance = ({ data = [], setPopupSize }) => {
+    const handleActionChange = (newAction) => {
+        setPopupSize(newAction);
+      };
     return (
         <div className={styles.container}>
             {data.map(({ stateName, state, setState }) => (
@@ -17,8 +20,10 @@ const PopupAppearance = ({ data = [] }) => {
                     </div>
                 </div>
             ))}
-            <h2 style={{marginBottom:'1rem'}}>Popup Size</h2>
-            <DropdownList actions={['Small', 'Medium', 'Large']} />
+            <h2 style={{ marginBottom: '1rem' }}>Popup Size</h2>
+            <DropdownList
+                actions={['Small', 'Medium', 'Large']}
+                onActionChange={handleActionChange} />
         </div>
     );
 };

diff --git a/frontend/src/components/PopupPageComponents/PopupContent/PopupContent.jsx b/frontend/src/components/PopupPageComponents/PopupContent/PopupContent.jsx
@@ -3,17 +3,23 @@ import styles from './PopupContent.module.scss';
 import DropdownList from '../../DropdownList/DropdownList';
 import CustomTextField from '../../TextFieldComponents/CustomTextField/CustomTextField';
 
-const PopupContent = ({ actionButtonText, setActionButtonText, setActionButtonUrl, actionButtonUrl }) => {
+const PopupContent = ({ actionButtonText, setActionButtonText, setActionButtonUrl, actionButtonUrl, setButtonAction }) => {
     const handleActionButtonText = (event) => {
         setActionButtonText(event.target.value);
       };
       const handleActionButtonUrl = (event) => {
         setActionButtonUrl(event.target.value);
       };
+      const handleActionChange = (newAction) => {
+        setButtonAction(newAction);
+      };
     return (
         <div className={styles.container}>
             <h2>Action</h2>
-            <DropdownList actions={['No action', 'Open a URL', 'Open a URL in a new page']} />
+            <DropdownList 
+                actions={['No action', 'Open a URL', 'Open a URL in a new page']} 
+                onActionChange={handleActionChange}
+            />
             <h2 style={{ marginBottom: 0 }}>Action button url (can be relative)</h2>
             <CustomTextField TextFieldWidth='241px'
                 value={actionButtonUrl}

diff --git a/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx b/frontend/src/components/templates/GuideTemplate/GuideTemplate.jsx
@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import Button from '../../Button/Button';
 import { useNavigate } from 'react-router-dom';
 
-const GuideTemplate = ({ title = '', handleButtonClick = () => null, activeButton = 0, leftContent = () => null, rightContent = () => null, leftAppearance = () => null }) => {
+const GuideTemplate = ({ title = '', handleButtonClick = () => null, activeButton = 0, leftContent = () => null, rightContent = () => null, leftAppearance = () => null, onSave= () => null }) => {
     const navigate = useNavigate();
     const buttons = ['Content', 'Appearance'];
     return (
@@ -37,7 +37,7 @@ const GuideTemplate = ({ title = '', handleButtonClick = () => null, activeButto
                     </div>
                     <div className={styles.optionButtons}>
                         <Button text='Cancel' buttonType='secondary-grey' onClick={() => {navigate('/');}}/>
-                        <Button text='Save'/>
+                        <Button text='Save'onClick={onSave}/>
                     </div>
                 </div>
             </div>
@@ -53,6 +53,7 @@ GuideTemplate.propTypes = {
     leftContent: PropTypes.func,
     rightContent: PropTypes.func,
     leftAppearance: PropTypes.func,
+    onSave: PropTypes.func,
 };
 
 export default GuideTemplate;
diff --git a/frontend/src/scenes/bannerPage/BannerPage.jsx b/frontend/src/scenes/bannerPage/BannerPage.jsx
@@ -4,26 +4,51 @@ import BannerLeftContent from '../../components/BannerPageComponents/BannerLeftC
 import BannerLeftAppearance from '../../components/BannerPageComponents/BannerLeftAppearance/BannerLeftApperance';
 import { React, useState } from 'react';
 import BannerPreview from '../../components/BannerPageComponents/BannerPreview/BannerPreview';
+import { addBanner } from '../../services/bannerServices';
+import { useNavigate } from 'react-router-dom';
 
 const BannerPage = () => {
-
-    const [backgroundColor, setBackgroundColor] = useState("#");
-    const [fontColor, setFontColor] = useState("#");
+    const navigate = useNavigate();
+    const [backgroundColor, setBackgroundColor] = useState("#F9F5FF");
+    const [fontColor, setFontColor] = useState("#344054");
     const [activeButton, setActiveButton] = useState(0);
     const [isTopPosition, setIsTopPosition] = useState(true);
     const [bannerText, setBannerText] = useState('');
     const [url, setUrl] = useState('');
+    const [buttonAction, setButtonAction] = useState('No action');
 
     const handleButtonClick = (index) => {
         setActiveButton(index);
     };
 
+    const onSave = async () => {
+        const bannerData = { 
+            backgroundColor:backgroundColor,
+            fontColor:fontColor,
+            url:url,
+            position: isTopPosition ? 'top' : 'bottom',
+            closeButtonAction:buttonAction.toLowerCase()
+        };
+        try {
+          const response = await addBanner(bannerData);
+          console.log('Add banner successful:', response);
+          navigate('/banner');
+        } catch (error) {
+          if (error.response && error.response.data) {
+            console.error('An error occurred:', error.response.data.errors[0].msg);
+          } else {
+            console.log('An error occurred. Please check your network connection and try again.');
+          }
+        }
+    }
+
     return (
         <div >
             <HomePageTemplate>
                 <GuideTemplate title='New banner'
                     activeButton={activeButton}
                     handleButtonClick={handleButtonClick}
+                    onSave={onSave}
                     rightContent={() =>
                         <BannerPreview
                             backgroundColor={backgroundColor}
@@ -37,6 +62,7 @@ const BannerPage = () => {
                             setIsTopPosition={setIsTopPosition}
                             url={url}
                             setUrl={setUrl}
+                            setButtonAction={setButtonAction}
                         />}
                     leftAppearance={() => (
                         <BannerLeftAppearance

diff --git a/frontend/src/scenes/popup/CreatePopupPage.jsx b/frontend/src/scenes/popup/CreatePopupPage.jsx
@@ -4,8 +4,11 @@ import { React, useState } from 'react';
 import RichTextEditor from '../../components/RichTextEditor/RichTextEditor';
 import PopupAppearance from '../../components/PopupPageComponents/PopupAppearance/PopupAppearance';
 import PopupContent from '../../components/PopupPageComponents/PopupContent/PopupContent';
+import { addPopup } from '../../services/popupServices';
+import { useNavigate } from 'react-router-dom';
 
 const CreatePopupPage = () => {
+    const navigate = useNavigate();
     const [activeButton, setActiveButton] = useState(0);
 
     const [headerBackgroundColor, setHeaderBackgroundColor] = useState('#F8F9F8');
@@ -19,6 +22,8 @@ const CreatePopupPage = () => {
 
     const [actionButtonUrl, setActionButtonUrl] = useState("https://");
     const [actionButtonText, setActionButtonText] = useState("Take me to subscription page");
+    const [buttonAction, setButtonAction] = useState('No action');
+    const [popupSize, setPopupSize] = useState('Small');
 
 
     const stateList = [
@@ -29,6 +34,32 @@ const CreatePopupPage = () => {
         { stateName: 'Button Text Color', state: buttonTextColor, setState: setButtonTextColor },
     ];
 
+    const onSave = async () => {
+        const popupData = { 
+            popupSize: popupSize.toLowerCase(),
+            url: actionButtonUrl,
+            actionButtonText: actionButtonText,
+            headerBackgroundColor: headerBackgroundColor,
+            headerColor: headerColor,
+            textColor: textColor,
+            buttonBackgroundColor: buttonBackgroundColor,
+            buttonTextColor: buttonTextColor,
+            closeButtonAction:buttonAction.toLowerCase()
+        };
+        console.log(popupData)
+        try {
+          const response = await addPopup(popupData);
+          console.log('Add popup successful:', response);
+          navigate('/popup');
+        } catch (error) {
+          if (error.response && error.response.data) {
+            console.error('An error occurred:', error.response.data.errors[0].msg);
+          } else {
+            console.log('An error occurred. Please check your network connection and try again.');
+          }
+        }
+    }
+
 
     const handleButtonClick = (index) => {
         setActiveButton(index);
@@ -40,6 +71,7 @@ const CreatePopupPage = () => {
                 <GuideTemplate title='New Popup'
                     activeButton={activeButton}
                     handleButtonClick={handleButtonClick}
+                    onSave={onSave}
                     rightContent={() =>
                         <RichTextEditor
                             header={header}
@@ -60,11 +92,12 @@ const CreatePopupPage = () => {
                             setActionButtonText={setActionButtonText}
                             setActionButtonUrl={setActionButtonUrl}
                             actionButtonText={actionButtonText}
-
+                            setButtonAction={setButtonAction}
                         />}
                     leftAppearance={() => (
                         <PopupAppearance
                             data={stateList}
+                            setPopupSize={setPopupSize}
                         />
                     )} />
 

diff --git a/frontend/src/services/bannerServices.js b/frontend/src/services/bannerServices.js
@@ -0,0 +1,12 @@
+import {apiClient} from './apiClient'; 
+
+export const addBanner = async (bannerData) => {
+  try {
+    const response = await apiClient.post('/banner/add_banner', bannerData);
+    console.log(response)
+    return response.data;
+  } catch (error) {
+    console.error('Add Banner error:', error);
+    throw error;
+  }
+};
diff --git a/frontend/src/services/loginServices.js b/frontend/src/services/loginServices.js
@@ -1,7 +1,6 @@
-import {apiClient} from './apiClient';  // Import the existing apiClient
+import {apiClient} from './apiClient'; 
 import axios from 'axios';
 
-// Create a new instance of apiClient with 'auth' appended to the baseURL
 const authClient = axios.create({
   ...apiClient.defaults,
   baseURL: `${apiClient.defaults.baseURL}auth`,

diff --git a/frontend/src/services/popupServices.js b/frontend/src/services/popupServices.js
@@ -0,0 +1,11 @@
+import {apiClient} from './apiClient'; 
+
+export const addPopup = async (popupData) => {
+  try {
+    const response = await apiClient.post('/popup/add_popup', popupData);
+    return response.data;
+  } catch (error) {
+    console.error('Add Popup error:', error.response);
+    throw error;
+  }
+};