#101 frontend

frontend/src/v1/configs/Apis/Feedback_Api/Api_Feedback.js

@@ -0,0 +1,5 @@
+const API_FEED_BACK = {
+    //* Seen Feedback
+    API_SEND_FEED_BACK: "/api/feedback/send",
+};
+export default API_FEED_BACK;

frontend/src/v1/redux/feedback_slice/Api_Redux_Thunk_Feedback.js

@@ -0,0 +1,23 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+import API_FEED_BACK from "../../configs/Apis/Feedback_Api/Api_Feedback";
+
+export const Send_FeedBack_Initial = createAsyncThunk(
+    "FeedBack/Send",
+    async ({ fullname, email, content, subject }, { rejectWithValue }) => {
+        try {
+            const response = await axios.post(
+                `${API_FEED_BACK.API_SEND_FEED_BACK}`,
+                {
+                    fullname, email, content, subject
+                },
+            );
+            return response.data;
+        } catch (error) {
+            if (!error.response) {
+                throw error;
+            }
+            return rejectWithValue(error.response.data);
+        }
+    }
+);

frontend/src/v1/redux/feedback_slice/Feedback_Slice.js

@@ -0,0 +1,35 @@
+import { createSlice } from "@reduxjs/toolkit";
+import {
+    Send_FeedBack_Initial,
+} from "./Api_Redux_Thunk_Feedback";
+const initialState = {
+    loading: false,
+    error: null,
+    feedback_data: null
+};
+const Feedback_User = createSlice({
+    name: "feedback",
+    initialState,
+    reducers: {
+        reset_feedback: (state) => {
+            state.feedback_data = null;
+        }
+    },
+    extraReducers: {
+        //* Seen Feedback
+        [Send_FeedBack_Initial.pending]: (state, action) => {
+            state.loading = true;
+        },
+        [Send_FeedBack_Initial.fulfilled]: (state, action) => {
+            state.loading = false;
+            state.feedback_data = action.payload.element;
+        },
+        [Send_FeedBack_Initial.rejected]: (state, action) => {
+            state.loading = false;
+            state.error = action.payload;
+        },
+    },
+});
+const Feedback_Slice = Feedback_User.reducer;
+export const { reset_feedback } = Feedback_User.actions;
+export default Feedback_Slice;

frontend/src/v1/redux/store.js

@@ -9,6 +9,7 @@ import Cart_Slice from "./cart_slice/Cart_Slice";
 import Payment_Slice from "./payment_slice/payment_slice";
 import Voucher_Slice from "./voucher_slice/voucher_slice";
 import Order_Slice from "./order_slice/order_slice";
+import Feedback_Slice from "./feedback_slice/Feedback_Slice";
 const rootReducer = (state, action) => {
   return AuthenticationSlice(state, action);
 };
@@ -24,6 +25,7 @@ store = configureStore({
     payment_user: Payment_Slice,
     voucher_user: Voucher_Slice,
     order_user: Order_Slice,
+    feedback_user: Feedback_Slice,
     reducer: rootReducer,
   },
 

frontend/src/v1/user_ui/components/Feedback/Feedback.js

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { toast } from 'react-toastify';
+import { Send_FeedBack_Initial } from '../../../redux/feedback_slice/Api_Redux_Thunk_Feedback';
+import { reset_feedback } from "../../../redux/feedback_slice/Feedback_Slice";
+import Loading_Button from '../General_Loading/Loading_Button';
+import SwaleMessage from '../SwaleMessage/SwaleMessage';
+const Feedback = () => {
+  const initialState = {
+    fullname: "",
+    email: "",
+    content: "",
+    subject: "",
+  };
+  const { loading, feedback_data } = useSelector((state) => ({ ...state.feedback_user }))
+  const { profile } = useSelector((state) => ({
+    ...state.auth_user,
+  }));
+  const dispatch = useDispatch();
+  const [state, setState] = useState(initialState);
+  const { fullname, email, content, subject } = state;
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setState({ ...state, [name]: value });
+  };
+
+  const submitHandler = (e) => {
+    e.preventDefault();
+    if (!fullname || !email || !subject || !content) {
+      return toast.error("Please Enter Input 🥲");
+    }
+    dispatch(Send_FeedBack_Initial({ fullname, email, content, subject }))
+  };
+  useEffect(() => {
+    if (feedback_data) {
+      setState({ content: "", subject: "" });
+      SwaleMessage(feedback_data?.msg, "success");
+      setTimeout(() => {
+        dispatch(reset_feedback())
+      }, 1000)
+    }
+  }, [feedback_data])
+
+  useEffect(() => {
+    if (profile) {
+      setState({
+        fullname: profile.name,
+        email: profile.email,
+      });
+    }
+  }, [profile]);
+
+  return (
+    <React.Fragment>
+      <form className="row  form-container" onSubmit={submitHandler}>
+        <div className="col-md-6">
+          <div className="form">
+            <label htmlFor="account-fn">Full Name</label>
+            <input
+              className="form-control"
+              type="type"
+              required
+              value={fullname}
+              name="fullname"
+              onChange={handleChange}
+              disabled={true}
+            />
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div className="form">
+            <label htmlFor="account-pass">Email</label>
+            <input
+              className="form-control"
+              type="type"
+              value={email}
+              name="email"
+              onChange={handleChange}
+              disabled={true}
+            />
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div className="form">
+            <label htmlFor="account-confirm-pass">Subject</label>
+            <input
+              className="form-control"
+              type="type"
+              value={subject || ""}
+              name="subject"
+              onChange={handleChange}
+            />
+          </div>
+        </div>
+        <div className="col-md-6">
+          <div className="form">
+            <label htmlFor="account-confirm-pass">Content</label>
+            <textarea
+              className="form-control"
+              cols="10"
+              rows="5"
+              value={content || ""}
+              name="content"
+              onChange={handleChange}
+            ></textarea>
+          </div>
+        </div>
+        {loading ? <Loading_Button /> : <button type="submit">Send Feedback</button>}
+      </form></React.Fragment>
+  )
+}
+
+export default Feedback

frontend/src/v1/user_ui/imports/General_Global_Import.js

@@ -61,6 +61,9 @@ export { default as Total_Cart } from "../components/Cart_Component/totals/Total
 //* Order_Info
 export { default as Order_Info } from "../components/Order_Info/Order_Info";
 
+//* FeedBack
+export { default as Feedback } from "../components/Feedback/Feedback";
+
 //*Detail order components
 export { default as Order_Item_One } from "../components/Order_Info/components/Order_Item_One"
 export { default as Order_Item_Two } from "../components/Order_Info/components/Order_Item_Two"

frontend/src/v1/user_ui/pages/Authentication_Users/Profile_Users.js

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import Tab_Change_Password from "../../components/Auth_Info/Tab_Change_Password";
 import Tab_Profile_User from "../../components/Auth_Info/Tab_Profile_User";
 import {
+  Feedback,
   Lazy_Loading_Image,
   Metadata,
   Order_Info,
@@ -153,7 +154,7 @@ const Profile_USers = () => {
                 role="tabpanel"
                 aria-labelledby="v-pills-home-tab2"
               >
-                {/* <Feedback /> */}
+                <Feedback />
               </div>
             </div>
           </div>