Reza added cart mobile

src/views/About/index.js

@@ -14,15 +14,14 @@ const maxDesktopSize = 1250;
 const maxMobileSize = 650;
 
 const fontSize = {
-  desktop:{
+  desktop: {
     h1: window.innerWidth > maxDesktopSize ? 30 : window.innerWidth / 40,
     p: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
     h2: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
-    li : window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
-  }
+    li: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 80,
+  },
 };
 
-
 export default class About extends Component {
   state = {
     fury: {
@@ -54,46 +53,62 @@ export default class About extends Component {
   render() {
     const { fury, advantages, keywords } = this.state;
     return (
+      <>
+        {window.innerWidth > 1000 ? (
           <>
             <div className="about d-flex flex-column align-items-center">
-          <Navbar page={'about'} />
+              <Navbar page={"about"} />
               <div className="about__fury d-flex">
                 <div className="about__fury--right d-flex flex-column justify-content-center">
                   <div className="right-top align-self-start">
-                <h1 style={{ fontSize: fontSize.desktop.h1 }}>{fury.title}</h1>
+                    <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+                      {fury.title}
+                    </h1>
                     <p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
                   </div>
                   <div className="right-bottom align-self-end">
-                <h2 style={{ fontSize: fontSize.desktop.h2 }}>{keywords.title}</h2>
+                    <h2 style={{ fontSize: fontSize.desktop.h2 }}>
+                      {keywords.title}
+                    </h2>
                     <ul>
                       {keywords.list.map((item, i) => (
                         <Fragment key={i}>
-                      <li style={{ fontSize: fontSize.desktop.li }}>{item}</li><br/>
+                          <li style={{ fontSize: fontSize.desktop.li }}>
+                            {item}
+                          </li>
+                          <br />
                         </Fragment>
-                    
                       ))}
                     </ul>
                   </div>
                 </div>
                 <div className="about__fury--left d-flex align-items-center">
-              <img className="about__fury--left__1" src={aboutLg} alt="عکس" />
-              <img className="about__fury--left__2" src={aboutMd} alt="عکس" />
-              <img className="about__fury--left__3" src={aboutXs1} alt="عکس" />
-              <img className="about__fury--left__4" src={aboutXs2} alt="عکس" />
+                  <img
+                    className="about__fury--left__1"
+                    src={aboutLg}
+                    alt="عکس"
+                  />
+                  {this.props.absoluteImages.map((item, i) => (
+                    <img src={item.imageUrl} className={item.class} alt="عکس" />
+                  ))}
                 </div>
               </div>
               <div className="about__advantages d-flex">
                 <div className="about__advantages--right d-flex">
-              <img src={pic} alt={'عکس'} />
+                  <img src={pic} alt={"عکس"} />
                 </div>
                 <div className="about__advantages--left">
-              <h1 style={{ fontSize: fontSize.desktop.h1 }}>{advantages.title}</h1>
+                  <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+                    {advantages.title}
+                  </h1>
                   <ul>
                     {advantages.list.map((item, i) => (
                       <Fragment key={i}>
-                      <li style={{ fontSize: fontSize.desktop.li }}>{item}</li><br/>
+                        <li style={{ fontSize: fontSize.desktop.li }}>
+                          {item}
+                        </li>
+                        <br />
                       </Fragment>
-                    
                     ))}
                   </ul>
                 </div>
@@ -101,6 +116,60 @@ export default class About extends Component {
             </div>
             <Footer />
           </>
+        ) : null}
+        {window.innerWidth < 1000 ? (
+          <div className="mobile-about d-flex flex-column">
+            <Navbar page={"about"} />
+            <div className="mobile-about__fury d-flex flex-column">
+              <h1 style={{ fontSize: fontSize.desktop.h1 }}>{fury.title}</h1>
+              <p style={{ fontSize: fontSize.desktop.p }}>{fury.text}</p>
+            </div>
+            <div className="mobile-about__images-- d-flex">
+              {this.props.absoluteImages.map((item, i) => (
+                <img src={item.imageUrl} className={item.class} alt="عکس" />
+              ))}
+            </div>
+            <div className="right-bottom align-self-end">
+              <h2 style={{ fontSize: fontSize.desktop.h2 }}>
+                {keywords.title}
+              </h2>
+              <ul>
+                {keywords.list.map((item, i) => (
+                  <Fragment key={i}>
+                    <li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
+                    <br />
+                  </Fragment>
+                ))}
+              </ul>
+            </div>
+            <div className="mobile-about__video d-flex">
+              <img src={pic} alt={"عکس"} />
+            </div>
+            <div className="mobile-about__advantages--left">
+              <h1 style={{ fontSize: fontSize.desktop.h1 }}>
+                {advantages.title}
+              </h1>
+              <ul>
+                {advantages.list.map((item, i) => (
+                  <Fragment key={i}>
+                    <li style={{ fontSize: fontSize.desktop.li }}>{item}</li>
+                    <br />
+                  </Fragment>
+                ))}
+              </ul>
+            </div>
+          </div>
+        ) : null}
+      </>
     );
   }
 }
+
+About.defaultProps = {
+  absoluteImages: [
+    { class: "about__fury--left__1", imageUrl: aboutLg },
+    { class: "about__fury--left__2", imageUrl: aboutMd },
+    { class: "about__fury--left__3", imageUrl: aboutXs1 },
+    { class: "about__fury--left__4", imageUrl: aboutXs2 },
+  ],
+};

src/views/About/index.scss

@@ -131,3 +131,13 @@
     }
   }
 }
+
+.mobile-about{
+  width: 100vw;
+  max-width: 650px;
+  margin: 0px auto;
+  padding : 0px 10px 40px;
+  direction: rtl;
+  padding-top: 70px;
+  overflow-x: hidden;
+}

src/views/Cart/Table/index.js

@@ -43,6 +43,21 @@ const fontSize = {
 export default function BasicTable(props) {
   const classes = useStyles();
   const {list, handleCounter, handleDelete} = props;
+  const sum = () => {
+    let total = 0;
+    for(let i = 0; i < list.length; i++) {
+      total += list[i].number;
+    }
+    return total;
+  };
+
+  const totalPrice = () => {
+    let total = 0;
+    for(let i = 0; i < list.length; i++) {
+      total += list[i].price * list[i].number;
+    }
+    return total;
+  }
 
   return (
     <>
@@ -60,6 +75,14 @@ export default function BasicTable(props) {
               { list.map((row,i) => (
                 <Item data={row} key={i} handleCounter={handleCounter} handleDelete={handleDelete} />
               ))}
+              <TableRow>
+                <TableCell align="right" component="th" scope="row">
+                  <span style={{ color : 'grey' }}>{sum()} محصول</span>
+                </TableCell>
+                <TableCell align="center">
+                  <span style={{ color : 'grey' }}>مبلغ کل  {totalPrice()}</span>    
+                </TableCell>
+              </TableRow>
             </TableBody>
           </Table>
         </TableContainer> : null 
@@ -94,9 +117,9 @@ const Item = (props) => {
             <span style={{ fontSize: fontSize.mobile.info.span }}>
               {data.options}
             </span>
-            <div className="cart-item__delete d-flex align-items-center justify-content-center">
+            <div className="mobile-cart-table-product__info--delete d-flex align-items-center align-self-end">
               <DeleteOutlineOutlinedIcon
-                style={{ color: "#FC120A", fontSize: 30, marginLeft: 5 }}
+                style={{ color: "#FC120A", fontSize: 25, marginLeft: 0 }}
                 onClick={() => handleDelete(data.id)}
               />
               <span

src/views/Cart/Table/index.scss

@@ -1,11 +1,14 @@
 .mobile-cart-table-product{
   width: 100%;
+  font-family: numeralLight;
   img{
     height: 100px;
     width: 70px;
     border-radius: 10px;
   }
   &__info{
+    width: 100%;
+    margin-left: 10px;
     strong, p , span{
       margin: 0px;
       font-family: numeralLight;
@@ -16,11 +19,16 @@
     span{
       color: #2580EC;
     }
+    &--delete{
+      margin-top: 10px;
+    }
   }
+  
 }
 
 .mobile-cart-table-price{
   text-align: center;
+  font-family: numeralLight;
   &__price{
     strong, span{
       font-family: numeralLight;

src/views/Cart/index.js

@@ -9,6 +9,7 @@ import book1 from "../../assets/images/book1.png";
 import "./index.scss";
 
 const maxDesktopSize = 1250;
+const maxMobileSize = 550;
 
 const fontSize = {
   desktop: {
@@ -20,11 +21,19 @@ const fontSize = {
     span: window.innerWidth > maxDesktopSize ? 10 : window.innerWidth / 95,
   },
   mobile: {
-    h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 18,
-  }
+    h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 13,
+    h2: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 24,
+    h3: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+    strong: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 30,
+    span: window.innerWidth > maxMobileSize ? 10 : window.innerWidth / 34,
+    p: window.innerWidth > maxMobileSize ? 12 : window.innerWidth / 32,
+    input: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 20,
+  },
 };
 export default class Cart extends Component {
   state = {
+    selectedDelivery: { name : '', price : 0},
+    discount: 0,
     totalPrice: null,
     list: [
       {
@@ -79,9 +88,18 @@ export default class Cart extends Component {
   handleDelete = (id) => {
     let list = this.state.list.filter((item) => item.id !== id);
     this.setState({
-      list: list
-    })
+      list: list,
+    });
+  };
+
+  totalPrice = () => {
+    let total = 0;
+    for (let i = 0; i < this.state.list.length; i++) {
+      total += this.state.list[i].price * this.state.list[i].number;
+    }
+    return total - this.state.discount + this.state.selectedDelivery.price;
   };
+
   render() {
     return (
       <>
@@ -98,15 +116,14 @@ export default class Cart extends Component {
                     <thead>
                       <tr>
                         <div className="d-flex align-items-center">
-                        <th style={{ flex: 3, textAlign: 'center'}}>1</th>
-                        <th style={{ flex: 1.5, textAlign: 'center' }}>2</th>
-                        <th style={{ flex: 1.5, textAlign: 'center'}}>3</th>
-                        <th style={{ flex: 1, textAlign: 'center'}}>4</th>
+                          <th style={{ flex: 3, textAlign: "center" }}>1</th>
+                          <th style={{ flex: 1.5, textAlign: "center" }}>2</th>
+                          <th style={{ flex: 1.5, textAlign: "center" }}>3</th>
+                          <th style={{ flex: 1, textAlign: "center" }}>4</th>
                         </div>
                       </tr>
                     </thead>
                     <tbody>
-              
                       {this.state.list.map((item, i) => (
                         <Item
                           handleDelete={this.handleDelete}
@@ -121,7 +138,7 @@ export default class Cart extends Component {
                     <div className="cart__right--price d-flex justify-content-end">
                       <div className="d-flex ml-2">جمع کل سبد خرید</div>
                       <div className="d-flex">
-                        <strong>تومان {this.state.totalPrice}</strong>
+                        <strong>{this.state.totalPrice} تومان </strong>
                       </div>
                     </div>
                   ) : null}
@@ -133,7 +150,7 @@ export default class Cart extends Component {
                     </h2>
                     <div className="d-flex justify-content-between">
                       {this.props.payMethods.map((item, i) => (
-                        <PayMethod data={item} key={i} />
+                        <DeliveryMethod data={item} key={i} parent={this} />
                       ))}
                     </div>
                   </header>
@@ -144,36 +161,195 @@ export default class Cart extends Component {
             <Footer />
           </>
         ) : null}
-        {
-          window.innerWidth < 1000 ?
+        {window.innerWidth < 1000 ? (
           <div className="mobile-cart d-flex flex-column">
             <Navbar />
             <h1 style={{ fontSize: fontSize.mobile.h1 }}>سبد خرید</h1>
             <div className="d-flex">
-              <Table list={this.state.list} handleCounter={this.handleCounter} handleDelete={this.handleDelete} />
+              <Table
+                list={this.state.list}
+                handleCounter={this.handleCounter}
+                handleDelete={this.handleDelete}
+              />
             </div>
+            <div className="mobile-cart__payMethods d-flex flex-column">
+              <h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
+              <p style={{ fontSize: fontSize.mobile.p }}>
+                با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+              </p>
 
+              <div className="d-flex justify-content-between">
+                {this.props.payMethods.map((item, i) => (
+                  <DeliveryMethod data={item} key={i} parent={this} />
+                ))}
+              </div>
+            </div>
+            <DiscoutCode />
+            <Factor parent={this} />
+            <div className="mobile-cart__totalPrice d-flex align-items-center justify-content-center">
+              <h3 style={{ fontSize: fontSize.mobile.h2 }}>
+                جمع کل
+                <br />
+                سبد خرید
+              </h3>
+              <div className="d-flex align-items-center">
+                <strong style={{ fontSize: fontSize.mobile.h1 }}>
+                  {this.totalPrice()}
+                </strong>
+                <span style={{ fontSize: fontSize.mobile.h3 }}>تومان</span>
+              </div>
+            </div>
+            <div className="mobile-cart__payMethods d-flex flex-column">
+              <h2 style={{ fontSize: fontSize.mobile.h2 }}>روشهای ارسال</h2>
+              <p style={{ fontSize: fontSize.mobile.p }}>
+                با توجه به شرایط یکی از دو گزینه زیر را انتخاب کنید
+              </p>
 
-          </div> : null
-        }
-
+              <div className="d-flex justify-content-between">
+                {this.props.payMethods.map((item, i) => (
+                  <DeliveryMethod data={item} key={i} parent={this} />
+                ))}
+              </div>
+            </div>
+            <button className="mobile-cart__submit">پرداخت</button>
+          </div>
+        ) : null}
       </>
-
     );
   }
 }
 
-const PayMethod = (props) => {
+const DeliveryMethod = (props) => {
+  return (
+    <>
+      {window.innerWidth > 1000 ? (
+        <div
+          className="delivery-methods d-flex justify-content-between align-items-center"
+          style={{
+            background:
+              props.parent.state.selectedDelivery === props.data
+                ? "#00ff00"
+                : "white",
+          }}
+          onClick={() =>
+            props.parent.setState({ selectedDelivery: props.data })
+          }
+        >
+          <strong style={{ fontSize: fontSize.desktop.strong }}>
+            {props.data.name}
+          </strong>
+          <div className="d-flex flex-column align-items-center">
+            <h3 style={{ fontSize: fontSize.desktop.h3 }}>
+              {props.data.price}
+            </h3>
+            <span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
+          </div>
+        </div>
+      ) : null}
+      {window.innerWidth < 1000 ? (
+        <div
+          className="mobile-delivery-methods d-flex justify-content-between align-items-center"
+          style={{
+            background:
+              props.parent.state.selectedDelivery === props.data
+                ? "#ccffcc"
+                : "white",
+          }}
+          onClick={() =>
+            props.parent.setState({ selectedDelivery: props.data })
+          }
+        >
+          <strong style={{ fontSize: fontSize.mobile.strong }}>
+            {props.data.name}
+          </strong>
+          <div className="d-flex flex-column align-items-center">
+            <h3 style={{ fontSize: fontSize.mobile.h3 }}>{props.data.price}</h3>
+            <span style={{ fontSize: fontSize.mobile.span }}>تومان</span>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+const DiscoutCode = (props) => {
   return (
-    <div className="payment-methods d-flex justify-content-between align-items-center">
+    <>
+      {window.innerWidth > 1000 ? (
+        <div
+          className="delivery-methods d-flex justify-content-between align-items-center"
+          style={{
+            background:
+              props.parent.state.selectedDelivery === props.data
+                ? "#00ff00"
+                : "white",
+          }}
+          onClick={() =>
+            props.parent.setState({ selectedDelivery: props.data })
+          }
+        >
           <strong style={{ fontSize: fontSize.desktop.strong }}>
             {props.data.name}
           </strong>
           <div className="d-flex flex-column align-items-center">
-        <h3 style={{ fontSize: fontSize.desktop.h3 }}>{props.data.price}</h3>
+            <h3 style={{ fontSize: fontSize.desktop.h3 }}>
+              {props.data.price}
+            </h3>
             <span style={{ fontSize: fontSize.desktop.span }}>تومان</span>
           </div>
         </div>
+      ) : null}
+      {window.innerWidth < 1000 ? (
+        <div className="mobile-discount-code d-flex flex-column">
+          <h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
+          <p style={{ fontSize: fontSize.mobile.p }}>
+            اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
+            بزنید
+          </p>
+          <div className="mobile-discount-code__box d-flex align-items-center">
+            <input style={{ fontSize: fontSize.mobile.input }} type="text" />
+            <button>ثبت کد</button>
+          </div>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+const Factor = (props) => {
+  const { list, parent } = props;
+
+  const totalPrice = () => {
+    let total = 0;
+    for (let i = 0; i < parent.state.list.length; i++) {
+      total += parent.state.list[i].price * parent.state.list[i].number;
+    }
+    return total;
+  };
+  return (
+    <>
+      {window.innerWidth < 1000 ? (
+        <div className="mobile-factor d-flex flex-column">
+          <h2 style={{ fontSize: fontSize.mobile.h2 }}>کد تخفیف</h2>
+          <p style={{ fontSize: fontSize.mobile.p }}>
+            اگر کد تخفیفی دارید آن را در کادر زیر وارد نمائید و دکمه ثبت کد را
+            بزنید
+          </p>
+          <div className="d-flex justify-content-between">
+            <strong>مبلغ سبد خرید</strong>
+            <span>{totalPrice()} تومان</span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>هزینه ارسال</strong>
+            <span>{props.parent.state.selectedDelivery.price} تومان</span>
+          </div>
+          <div className="d-flex justify-content-between">
+            <strong>میزان تخفیف</strong>
+            <span>{props.parent.state.discount} تومان</span>
+          </div>
+        </div>
+      ) : null}
+    </>
   );
 };
 

src/views/Cart/index.scss

@@ -4,6 +4,7 @@
   max-width: 1250px;
   margin: 0px auto;
   padding: 0px 10px;
+  font-family: numeralLight;
   &__right {
     flex: 4;
     padding: 10px 0px 0px;
@@ -14,70 +15,214 @@
       }
     }
     table {
-      tr{
+      tr {
         th {
           font-family: numeralLight;
           color: #afafaf;
         }
       }
-      
     }
   }
   &__left {
     flex: 1.2;
-    box-shadow: 0px 0px 13px #D5D5D5B0;
+    box-shadow: 0px 0px 13px #d5d5d5b0;
     border-radius: 13px;
     margin-right: 30px;
-    &--header{
-      h2{
+    &--header {
+      h2 {
         font-family: numeralBold;
-        color: #2580EC;
+        color: #2580ec;
       }
     }
-    button{
+    button {
       justify-self: flex-end;
       padding: 12px;
       width: 100%;
       font-family: numeralLight;
       color: white;
-      background-color: #6CBE44;
+      background-color: #6cbe44;
       border: 0px;
       border-radius: 10px;
       margin-top: 50px;
     }
-    .payment-methods{
+    .delivery-methods {
       padding: 6px;
       border-radius: 10px;
-      border: 1px solid #88A9FF;
+      border: 1px solid #88a9ff;
       margin-top: 10px;
-      h3, strong, span{
+      h3,
+      strong,
+      span {
         font-family: numeralLight;
         font-weight: 100;
         margin: 0px;
       }
-      strong{
+      strong {
         width: 50%;
-        color: #678EF8;
+        color: #678ef8;
         letter-spacing: -1px;
       }
-      h3, span{
-        color: #02A255;
+      h3,
+      span {
+        color: #02a255;
         font-family: numeralMedium;
       }
     }
   }
 }
 
-.mobile-cart{
+.mobile-cart {
   width: 100vw;
   max-width: 650px;
   margin: 0px auto;
-  padding : 0px 10px 40px;
+  padding: 0px 10px 40px;
   direction: rtl;
   padding-top: 60px;
   overflow-x: hidden;
-  h1{
+  font-family: numeralLight;
+  &__submit{
+    justify-self: flex-end;
+    padding: 12px;
+    width: 100%;
+    font-family: numeralLight;
+    color: white;
+    background-color: #6cbe44;
+    border: 0px;
+    border-radius: 10px;
+    margin-top: 30px;
+  }
+  h1 {
     font-family: numeralBold;
     color: #373737;
   }
+  &__totalPrice{
+    padding: 20px 0px;
+    border-bottom: 1px dotted #A5A5A5;
+    padding-bottom: 20px;
+
+    h3{
+      font-family: numeralLight;
+      color: #00CC69;
+      margin: 0px;
+    }
+    div{
+      margin-right: 20px;
+      strong{
+        font-family: numeralBold;
+        color: #4D4D4F;
+        margin-left: 5px;
+      }
+      span{
+        font-family: numeralLight;
+        color: #848484;
+      }
+    }
+  }
+  &__payMethods {
+    border-bottom: 1px dotted #A5A5A5;
+    margin-top: 20px;
+    padding-bottom: 20px;
+    h2 {
+      font-family: numeralBold;
+      color: #2580ec;
+    }
+    p {
+      font-family: numeralLight;
+      color: #a5a5a5;
+      letter-spacing: -1px;
+    }
+    .mobile-delivery-methods {
+      padding: 6px;
+      border-radius: 10px;
+      border: 1px solid #88a9ff;
+      margin-top: 10px;
+      width: 48%;
+      h3,
+      strong,
+      span {
+        font-family: numeralLight;
+        font-weight: 100;
+        margin: 0px;
+      }
+      strong {
+        // width: 50%;
+        color: #678ef8;
+        letter-spacing: -1px;
+      }
+      h3,
+      span {
+        color: #02a255;
+        font-family: numeralMedium;
+      }
+    }
+    
+  }
+  .mobile-discount-code {
+    border-bottom: 1px dotted #A5A5A5;
+    margin-top: 20px;
+    padding-bottom: 20px;
+    h2 {
+      font-family: numeralBold;
+      color: #2580ec;
+    }
+    p {
+      font-family: numeralLight;
+      color: #a5a5a5;
+      letter-spacing: -1px;
+    }
+    &__box{
+      border: 1px solid #2b95ff;
+      padding: 5px;
+      border-radius: 10px;
+      input {
+        color: #2b95ff;
+        font-family: numeralLight;
+        text-align: center;
+        padding: 5px;
+        border-radius: 10px;
+        border: 0px;
+        flex: 1;
+        direction: ltr;
+        &:focus{
+          outline : none;
+        }
+      }
+      button {
+        border-radius: 10px;
+        background-color: #2b95ff;
+        font-family: numeralLight;
+        color: white;
+        padding: 10px 20px;
+        border: 0px;
+      }
+    }
+    
+  }
+
+  .mobile-factor{
+    border-bottom: 1px dotted #A5A5A5;
+    margin-top: 20px;
+    padding-bottom: 20px;
+    h2 {
+      font-family: numeralBold;
+      color: #2580ec;
+    }
+    p {
+      font-family: numeralLight;
+      color: #a5a5a5;
+      letter-spacing: -1px;
+    }
+    div{
+      margin-bottom: 10px;
+      strong{
+        font-family: numeralLight;
+        color: #373737;
+        font-weight: 300;
+      }
+      span{
+        font-family: numeralLight;
+        color: #373737;
+      }
+    }
+  }
 }