Shopping Cart Mobile Done

src/App.js

@@ -32,6 +32,7 @@ import AdminPanel from './view/admin';
 import AddProduct from './view/addProduct';
 import AddExam from './view/addExam';
 import ChatPage from './view/chatPage';
+import ShoppingCart from './components/ShoppingCart';
 
 let data = [
   {
@@ -702,6 +703,7 @@ function App() {
           <Route path="/messages" element={<Messages />} />
           <Route path="/messages/:id" element={<ChatPage />} />
           <Route path="/services" element={<Services />} />
+          <Route path='shoppingCart' element={<ShoppingCart />} />
           {/* <Route path="/dashboard" element={ <Dashboard
                 ActiveUserFullInfo={ActiveUserFullInfo}
                 UserFullInfoData={UserFullInfoData}

src/components/ShoppingCart/Code/index.js

@@ -13,7 +13,7 @@ function Code({ codeId, setCodeId, userId, factorId }) {
     <form className="flex w-full flex-row border border-red52 border-solid rounded-xl my-3 overflow-hidden">
       <input
         type="text"
-        className="border-0 flex-1 text-right pr-3 font-medium text-tiny bg-gray-200 placeholder:text-blue5F dark:text-white"
+        className="border-0 flex-1 text-right pr-3 font-medium text-tiny bg-white placeholder:text-blue5F dark:text-white"
         placeholder={"کد تخفیف دارید ؟"}
       />
       <button className={"py-4 px-6 text-tiny bg-red52 text-white border border-red52 border-solid"} onClick={setOff}>ثبت کد</button>

src/components/ShoppingCart/index.js

@@ -219,7 +219,45 @@ function ShoppingCart({
   //       />
   //     </div>
   //   </div>
-  return(
+  return(isMobile ? 
+
+
+    <div className="w-full flex flex-col justify-start items-center  bg-gray-200  rtl left-0 pt-24" style={{height: '100vh'}}>
+    <div className="w-full flex items-center flex-col overflow-x-hidden overflow-scroll" style={{height: '35%'}}>
+    
+    {list.map((product, index) => (
+            <Product key={index} product={product} />
+    ))}
+    </div>
+    {/* {console.log(list)} */}
+
+    <div  className="w-full px-5 mb-6">
+    <Code />
+    <div className="flex flex-col w-full border-t border-gray-400 my-2 py-2">
+    <div className="flex justify-between w-full py-2 text-blue-700 text-lg ">
+        <p>جمع مبالغ خدمات</p>
+        <p>{factorInfo?.sumPrice} تومان</p>
+      </div>  
+      <div className="flex justify-between w-full py-2 text-red26 text-lg ">
+        <p> تخفیف </p>
+        <p> {factorInfo?.offPrice} - تومان</p>
+      </div>  
+      <div className="flex justify-between w-full py-2 text-red26 text-lg ">
+        <p>کسر از اعتبار</p>
+        <p>-۰ تومان</p>
+      </div>  
+    </div>
+    <Button
+      title={`پرداخت هزینه : ${factorInfo?.payPrice} تومان`}
+      borderType='rounded-xl'
+      className='h-16 w-full mx-none text-xl'
+      />
+    </div>
+
+  </div>
+
+    :
+    
   <div className="flex flex-col justify-between items-center  bg-gray-200  left-0 pt-24" style={{height: '100vh'}}>
     <div className="w-full flex items-center flex-col">
     

src/components/header/Header.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import './Header.scss';
 import searchIcon from "../../assets/img/Group 1148.svg";
 import moment from "jalali-moment";
@@ -11,7 +11,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import arrowIcon from './MobileSideMenu/arrow-down.svg'
 import exitIcon from '../../assets/img/group-9.svg'
-
+import backIcon from './arrow-left-1.svg';
 const Header = ({
   isMobile, cart
 }) => {
@@ -25,6 +25,7 @@ const Header = ({
   const [menuPopup, setMenuPopup] = useState(false);
   const [subMenu, setSubMenu] = useState(false);
   const location = useLocation();
+  const navigate = useNavigate();
 
   return (
     <>
@@ -57,7 +58,13 @@ const Header = ({
                 </svg>
               </div>
               <Link to='/'>  <img src={logoIcon} className="h-10" /> </Link>
-              <Link to='/shoppingCart'>
+              {
+                location.pathname.includes('messages') ? (
+                  <div  onClick={() => navigate(-1)} className="w-8 h-8 bg-red-100 rounded-md flex items-center justify-center">
+                    <img src={backIcon} className="h-4/5"/>
+                  </div>
+                ): (
+                  <Link to='/shoppingCart'>
                 <div className='flex flex-col'>
                   <div className='absolute left-8 top-3 bg-red52 w-4 h-4 rounded-full text-xs flex items-center justify-center text-white'>{cart?.length}</div>
                   <svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -69,6 +76,8 @@ const Header = ({
 
                 </div>
               </Link>
+                )
+              }
             </div> :
             <>
               {location.pathname.includes('adminpanel') ? <div></div> :

src/components/header/MobileSideMenu/index.js

@@ -65,7 +65,7 @@ const MobileSideMenu = ({
             icon: smsIcon,
             activeIcon: smsIconActive,
             title: 'پشتیبانی',
-            link: ''
+            link: '/messages'
         },
         {
             icon: mapIcon,

src/components/header/arrow-left-1.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 19.9201L8.47997 13.4001C7.70997 12.6301 7.70997 11.3701 8.47997 10.6001L15 4.08008" stroke="#df1452" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/nav/Nav.js

@@ -105,7 +105,7 @@ useEffect(() => {
   if (isMobile) {
 
     return (
-      location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') ? null :
+      location2.pathname.includes('azmoon_list') || location2.pathname.includes('messages') || location2.pathname.includes('shoppingCart') ? null :
       <div className="w-full flex fixed  bg-white justify-center z-20 py-4 bottom-0">
         <div className="flex w-11/12 bg-white justify-between rtl border border-red82OP rounded-xl">
           {

src/view/chatPage/index.js

@@ -1,18 +1,27 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import sendIcon from "../../assets/img/vuesax-linear-direct-left.svg";
 import avatar6 from "../../assets/img/avatar/sarah-brown-tTdC88_6a_I-unsplash.jpg";
 import avatar5 from "../../assets/img/avatar/nicolas-horn-MTZTGvDsHFY-unsplash.jpg";
+import { BsCheck2All, BsTelephone,  } from "react-icons/bs";
+import { connect } from "react-redux";
+
 const ChatPage = ({
     messages,
     user,
     contact,
+    isMobile
 }) => {
+    const messagesEndRef = useRef(null)
+
+    useEffect(() => {
+        messagesEndRef.current.scrollIntoView({behavior: 'smooth'})
+    }, [])
     const textareaHanler=(e)=>{
         e.target.style.height = `3rem`;
         let scHeight = e.target.scrollHeight;
         e.target.style.height = `${scHeight}px`;
       }
-    return(
+    return(isMobile &&
         <div className="w-full flex  flex-col items-center py-20">
             <div className="bg-gray-100 w-11/12 text-right p-3 text-blue3A text-sm">
                 {contact.name}
@@ -27,15 +36,15 @@ const ChatPage = ({
                             <div className={` mt-2 w-full flex items-center ${message.userId == user.id ?'justify-end' : 'justify-start'} text-xs`}>
                             {
                                     message.userId == user.id && 
-                                    <>
-                                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#979797" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                                 
-                    </svg>
+                                     <BsCheck2All
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{marginRight: '-12px'}}>
+                    className="text-lg "
-                        <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#979797" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                    style={
+                       { color: "#979797" }
                         
-                    </svg></>
+                        
+                    }
+                  />
                                 }
                                 <p>{message.sendTime}</p>
                                
@@ -44,7 +53,7 @@ const ChatPage = ({
                         </div>
                 ))
             }
-
+<div ref={messagesEndRef} />
 <div className="Messages-main-box-footer w-full  bg-gray-200 px-4 flex items-center justify-between flex-row-reverse fixed bottom-0 ">
           <textarea
             name="Messages-main-box-footer-textarea"
@@ -132,5 +141,11 @@ ChatPage.defaultProps = {
 
     ]
 }
+const mapStateToProps = (state) => ({
+    isMobile: state.publicApi.isMobile,
+    cart: state.userProduct.list
+  });
+  const mapDispatchToProps = {
+  };
   
-export default ChatPage
+  export default connect(mapStateToProps, mapDispatchToProps)(ChatPage);