Shopping Cart Mobile Done

3 years ago · d10c2169dd
parent fe45ccf20b
commit d10c2169dd
9 changed files with 88 additions and 21 deletions
--- a/src/App.js
+++ b/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}
--- a/src/components/ShoppingCart/Code/index.js
+++ b/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>
--- a/src/components/ShoppingCart/index.js
+++ b/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">
    
--- a/src/components/header/Header.js
+++ b/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> :
--- a/src/components/header/MobileSideMenu/index.js
+++ b/src/components/header/MobileSideMenu/index.js
@ -65,7 +65,7 @@ const MobileSideMenu = ({
            icon: smsIcon,
            activeIcon: smsIconActive,
            title: 'پشتیبانی',
-            link: ''
+            link: '/messages'
        },
        {
            icon: mapIcon,
--- a/src/components/header/arrow-left-1.svg
+++ b/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>
--- a/src/components/nav/Nav.js
+++ b/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">
          {
--- a/src/view/chatPage/index.js
+++ b/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>
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{marginRight: '-12px'}}>
-                        <path d="M7.75 12L10.58 14.83L16.25 9.17004" stroke="#979797" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+                                     <BsCheck2All
+                    className="text-lg "
+                    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);
--- a/src/view/shoppingCart/index.js
+++ b/src/view/shoppingCart/index.js