From 15f4dee690d9b5e6893dbd6db9beebeca988f982 Mon Sep 17 00:00:00 2001
From: Pkpedram <pkpedram80@gmail.com>
Date: Wed, 16 Mar 2022 15:10:55 +0330
Subject: [PATCH] Mobile Contact Page Made

---
 src/components/ShoppingCart/Product/index.js  | 13 ++-
 src/components/ShoppingCart/index.js          |  4 +-
 src/components/header/MobileSideMenu/index.js |  2 +-
 src/components/input/index.js                 |  6 +-
 src/view/contact/index.js                     | 99 +++++++++++++++++--
 5 files changed, 108 insertions(+), 16 deletions(-)

diff --git a/src/components/ShoppingCart/Product/index.js b/src/components/ShoppingCart/Product/index.js
index d7780c1..bae9473 100644
--- a/src/components/ShoppingCart/Product/index.js
+++ b/src/components/ShoppingCart/Product/index.js
@@ -147,13 +147,18 @@ function Product({ product, grades, pushToCart, isMobile }) {
   //   </div>
   return (
     <div className="flex bg-white justify-between items-center border-2 border-gray-300 p-4 rounded-xl m-2 " style={{ width: '90%' }}>
-      <div className="flex items-center">
+      <div className="flex items-center ">
         <div className="text-sm h-10 flex items-center p-2 border-l-2 border-gray-300 text-gray-400"> {product?.product?.book?.category} </div>
         <h1 className="text-lg font-black px-2 text-black40"> {product?.product?.book?.name}</h1>
       </div>
-      <div className="flex items-center">
-        <div className="text-sm text-black40" style={{ transform: 'translateX(-20px)' }} >
-          {product?.product?.price} تومان
+      <div className="flex items-center p-0 ">
+        
+        <div className="text-sm text-black40 flex items-center" style={{ transform: 'translateX(-20px)' }} >
+        {
+          product.count > 1 && <p className="ml-2 text-xs text-red52">{product?.count} عدد</p>
+        }
+          <p>{product?.product?.price} تومان</p>
+          
         </div>
         <div
           className="w-8 h-8 text-white text-sm rounded-full cursor-pointer flex justify-center items-center bg-red52"
diff --git a/src/components/ShoppingCart/index.js b/src/components/ShoppingCart/index.js
index 77bc47d..29a00ed 100644
--- a/src/components/ShoppingCart/index.js
+++ b/src/components/ShoppingCart/index.js
@@ -223,7 +223,7 @@ function ShoppingCart({
 
 
     <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%'}}>
+    <div className={`w-full flex items-center flex-col ${list?.length > 3 && 'overflow-x-hidden overflow-scroll'}`} style={{height: '35%'}}>
     
     {list.map((product, index) => (
             <Product key={index} product={product} />
@@ -259,7 +259,7 @@ function ShoppingCart({
     :
     
   <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">
+   <div className={`w-full flex items-center flex-col ${list?.length > 3 && 'overflow-x-hidden overflow-scroll'}`} style={{height: '35%'}}>
     
     {list.map((product, index) => (
             <Product key={index} product={product} />
diff --git a/src/components/header/MobileSideMenu/index.js b/src/components/header/MobileSideMenu/index.js
index 8162894..ffa2d6b 100644
--- a/src/components/header/MobileSideMenu/index.js
+++ b/src/components/header/MobileSideMenu/index.js
@@ -71,7 +71,7 @@ const MobileSideMenu = ({
             icon: mapIcon,
             activeIcon: mapIconActive,
             title: 'اطلاعات تماس',
-            link: '/contact'
+            link: '/contacts'
         },
         {
             icon: radarIcon,
diff --git a/src/components/input/index.js b/src/components/input/index.js
index 3ea360d..00e46f2 100644
--- a/src/components/input/index.js
+++ b/src/components/input/index.js
@@ -42,8 +42,8 @@ const Input = ({
         }
     };
     return (
-        <div style={style} className={`${className} Login-box-form-item w-full ml-4 h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7  mt-6 relative flex items-center flex-row-reverse`}>
-            <div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 bg-white`}></div>
+        <div style={style} className={`${className} Login-box-form-item w-full h-12 ${borderType ? borderType : 'rounded-lg'} border border-color7  mt-6 relative flex items-center flex-row-reverse`}>
+            <div className={`Login-box-form-item-line w-${gapSize ? gapSize : '20'} h-px absolute top-[-1px] right-7 `}></div>
             <div className="Login-box-form-item-label text-sm text-color19 bg-white absolute right-6 transition-all duration-300 pointer-events-none">
                 {title ? title : 'نام کاربری'}
             </div>
@@ -51,7 +51,7 @@ const Input = ({
                 type={type ? type : 'text'}
                 name="Login-box-form-item-input-name"
                 id={`Login-box-form-item-input-name${id}`}
-                className={`Login-box-form-item-input w-full h-full  px-4 outline-0 rounded text-red52`}
+                className={`Login-box-form-item-input w-full h-full  px-4 outline-0 rounded-lg text-red52`}
                 style={{ direction: direction ? direction : "ltr", backgroundColor: bg }}
                 onFocus={() => focusHandler(id ? id : 0)}
                 onBlur={() => blurHandler(id ? id : 0)}
diff --git a/src/view/contact/index.js b/src/view/contact/index.js
index a3dca3d..633a4af 100644
--- a/src/view/contact/index.js
+++ b/src/view/contact/index.js
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import Button from "../../components/Button";
 import Input from "../../components/input";
 import Map from '../../components/Map'
-
-const ContactUs = () => {
+import { connect } from "react-redux";
+const ContactUs = ({isMobile}) => {
 
 
     const departments = [
@@ -27,15 +27,94 @@ const ContactUs = () => {
         },
     ]
 
+
+    const [phase, setPhase] = useState(1);
+
     return (
+        isMobile ? 
+        <div className="w-full flex flex-col py-20 px-4 pb-40">
+            <h1 className="w-full text-right text-red52 font-bold">تماس با ما</h1>
+            <div className="flex w-full rtl mt-4 justify-between  py-1 bg-gray-100 border border-gray-300 rounded-xl">
+                <button className={`w-1/2 rounded-xl mx-1 h-12 ${phase == 1 ? 'bg-red5B font-bold text-white' : 'text-red5B'}`}
+                onClick={() => setPhase(1)}
+                >
+                    فرم تماس با ما
+                </button>
+                <button className={`w-1/2 rounded-xl mx-1 font-bold h-12 ${phase == 2 ? 'bg-red5B text-white' : 'text-red5B'}`}
+                onClick={() => setPhase(2)}
+                >
+                    اطلاعات تماس
+                </button>
+            </div>
+            {
+                phase == 1 ? 
+                <div className="w-full rtl">
+
+                <form className="flex flex-col w-full">
+                    <Input title='نام' gapSize='8' id={0} style={{ width: '100%' }} />
+                    <Input title='ایمیل' gapSize='8' id={1} style={{ width: '100%', background: 'rgba(249, 249, 249, 0.75)' }} />
+                    <select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52">
+                        {departments.map((item, index) => (
+                            <option key={`Grade__${index}`}>{item.title}</option>
+                        ))}
+                    </select>
+                    <textarea className="w-full border-gray-200 border p-3 rounded-lg text-gray-400 outline-red52" rows='7' cols='70' placeholder="متن پیام را اینجا تایپ کنید">
+
+                    </textarea>
+                    <div className="w-full flex" style={{direction: 'ltr'}}>
+                            <Button title='ارسال پیام' className='w-full'/>
+                    </div>
+                </form>
+            </div>
+                    :
+
+                    <div className="flex flex-col w-full rtl mr-32 mt-4">
+                        <div className="w-full rounded-xl overflow-hidden my-4 " style={{height:'215px'}}>
+                    <Map />
+                    </div>
+                    <div className="flex w-full text-right flex-col mb-4 items-start">
+                        
+                            <div className="w-full p-2 border-b border-gray-200">
+                                <h1 className="text-red52 text-md p-1 pr-0 font-black">آدرس ما</h1>
+                                <p className="text-gray-400 text-sm">تهران خیابان انقلاب بین ابوریحان و فلسطین بن بست سروش پلاک  2</p>
+                            </div>
+                            <div className="w-full p-2 border-b border-gray-200">
+                                <h1 className="text-red52 text-md p-1 pr-0 font-black">شماره تماس</h1>
+                                <p className="text-gray-400 text-sm"> 02163462405 - 02163462406 </p>
+                            </div>
+                    
+                            <div className="w-full p-2 border-b border-gray-200">
+                                <h1 className="text-red52 text-md p-1 pr-0 font-black"> ایمیل سازمانی </h1>
+                                <p className="text-gray-400 text-sm">Info@Azmoonsample.ir</p>
+                            </div>
+                    
+                   
+                        
+                            <div className="w-full p-2 ">
+                                <h1 className="text-red52 text-md p-1 pr-0 font-black"> شماره پیامک </h1>
+                                <p className="text-gray-400  text-sm">300000000008762144</p>
+                                <p className="text-gray-400 text-sm">توجه داشته باشید تمامی پیامک ها از سامانه آزمون از طریق همین سرشماره برای شما ارسال خواهد شد</p>
+                            </div>
+                         
+                    
+                        
+                    </div>
+                   
+                    
+                </div>
+            }
+        </div>
+
+            :
+
         <div className=" w-full text-right" style={{ direction: 'rtl', marginTop: '6.5%', paddingRight: '8.5%' }}>
             <h1 className="w-2/3 border-b border-gray-300 text-3xl font-bold text-red52 py-4">تماس با ما</h1>
             <div className="flex ">
                 <div className="w-1/3">
 
                     <form className="flex flex-col w-full">
-                        <Input title='نام' gapSize='8' id={0} style={{ width: '50%' }} />
-                        <Input title='ایمیل' gapSize='8' id={1} style={{ width: '50%' }} />
+                        <Input title='نام' gapSize='8' id={0} style={{ width: '100%' }} />
+                        <Input title='ایمیل' gapSize='8' id={1} style={{ width: '100%' }} />
                         <select className="bg-white border border-solid border-gray-200 w-full my-4 p-3 rounded-lg text-gray-400 outline-red52">
                             {departments.map((item, index) => (
                                 <option key={`Grade__${index}`}>{item.title}</option>
@@ -87,4 +166,12 @@ const ContactUs = () => {
     );
 };
 
-export default ContactUs;
\ No newline at end of file
+const mapStateToProps = (state) => ({
+    isDark: state.publicApi.isDark,
+    isMobile: state.publicApi.isMobile,
+  });
+  
+  const mapDispatchToProps = {
+  };
+  
+  export default connect(mapStateToProps, mapDispatchToProps)(ContactUs);
\ No newline at end of file