Shalini dev

public/index.html

@@ -28,21 +28,25 @@
     -->
   <!-- google font api -->
   <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Arbutus+Slab&family=Lora&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Arbutus+Slab&family=Lora&family=Roboto&display=swap"
+    rel="stylesheet">
   <title>Purple Marts</title>
   <style>
     html,
     body,
     #root {
       height: 100vh;
       width: 100%;
-      margin-top: 3%;
     }
 
     .purple {
       background-color: #845e99 !important;
       color: white !important;
     }
+
+    ::selection {
+      background-color: #dbcce4;
+    }
   </style>
 </head>
 

src/components/pages/authentication/components/LoginForm.jsx

@@ -1,7 +1,8 @@
+import React, { useState } from "react";
 import Form from "react-bootstrap/Form";
-import { ApiPostService } from "../../../../services/api/api-services";
+import { useHistory } from "react-router";
 import { Button } from "../../../../styles/widgets/widgets";
-import React, { useState } from "react";
+import { ApiPostService } from "../../../../services/api/api-services";
 
 function LoginForm({
   setShowModal,
@@ -13,6 +14,7 @@ function LoginForm({
   setVerify,
   setUpdate,
 }) {
+  let history = useHistory();
   let initial = {
     email: "",
     password: "",
@@ -44,6 +46,7 @@ function LoginForm({
 
       if (res.success) {
         setShowModal(false);
+        history.push("/");
       } else setError(res.description);
     } else {
       setError("Missing Fields..");

src/components/pages/home/components/Cards.jsx

@@ -0,0 +1,54 @@
+import { Container, Row, Col, Card } from "react-bootstrap";
+import { Text } from "../../../../styles/widgets/widgets";
+import { Cards, CardImg } from "../../../../styles/pages/home-page";
+import { useHistory } from "react-router";
+
+const CardGroup = ({ data }) => {
+  let history = useHistory();
+
+  return (
+    <Container fluid className="my-3">
+      <Text primary align="center">
+        Categories to bag
+      </Text>
+      <Row>
+        {data.map((item) => (
+          <Col lg="3" xs md="6" sm="6" key={item.id}>
+            <Cards
+              className="my-2"
+              onClick={() => history.push("/category/" + item.name)}
+            >
+              <CardImg
+                variant="top"
+                className="img-thumbnail"
+                src={item.image}
+              />
+              <Card.Body>
+                <Card.Link
+                  onClick={() => history.push("/category")}
+                  style={{
+                    textDecoration: "none",
+                    color: "black",
+                    fontWeight: "600",
+                  }}
+                >
+                  {item.name}
+                </Card.Link>
+                <Text
+                  case="capitalize"
+                  size="90%"
+                  space="1px"
+                  style={{ padding: "0" }}
+                >
+                  {item.description}
+                </Text>
+              </Card.Body>
+            </Cards>
+          </Col>
+        ))}
+      </Row>
+    </Container>
+  );
+};
+
+export default CardGroup;

src/components/pages/home/components/Carousel.jsx

@@ -1,11 +1,19 @@
-import { Title, Main } from "../../../../styles/pages/home-page";
+import { Image } from "react-bootstrap";
+import { useHistory } from "react-router-dom";
+import { TitleBox, Main } from "../../../../styles/pages/home-page";
 
 const Carousels = ({ data }) => {
+  let history = useHistory();
+  let promote = [
+    "We have Sale that Brings joy",
+    "Its Sale! you can’t Resist",
+    "Your favorite products made affordable for you",
+  ];
   return (
     <>
       <div
         id="carouselExampleCaptions"
-        className="carousel carousel-dark slide"
+        className="carousel carousel-dark slide mt-3"
         data-bs-ride="carousel"
       >
         <div className="carousel-indicators">
@@ -31,18 +39,22 @@ const Carousels = ({ data }) => {
           ></button>
         </div>
         <div className="carousel-inner">
-          {data && data.map((item, index) => (
+          {data.map((item, index) => (
             <div
               className={`carousel-item ${index === 0 && " active"}`}
               key={item.id}
+              onClick={() => history.push("/offers")}
             >
-              <img src={item.image} className="d-block w-100" alt="..." />
-              <Title className="carousel-caption d-none d-md-block">
+              <Image
+                src={item.image}
+                className="d-block w-100"
+                alt="SALE IS LIVE"
+                height="90%"
+              />
+              <TitleBox className="carousel-caption d-none d-md-block">
                 <Main>{item.description}</Main>
-                <p style={{ color: "white" }}>
-                  Some representative placeholder content for the first slide.
-                </p>
-              </Title>
+                <p style={{ color: "white" }}>{promote[index]} !!!</p>
+              </TitleBox>
             </div>
           ))}
         </div>

src/components/pages/home/components/Grid.jsx

@@ -1,35 +1,55 @@
 import React from "react";
+import { useHistory } from "react-router";
 import { DarkShade } from "../../../../styles/themes/color-theme";
 import { Text } from "../../../../styles/widgets/widgets";
-import { Block, Caption } from "../../../../styles/pages/home-page";
+import { Block } from "../../../../styles/pages/home-page";
 
-const Grid = ({ data }) => {
+const Grid = ({ data, text }) => {
+  let history = useHistory();
   const gridImg = [
     "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTTugCX5kSC9m1XFVcK7BWoZY9HiycolFcoTQ&usqp=CAU",
     "https://m.media-amazon.com/images/I/61R4wTQfJdL._AC_SX425_.jpg",
     "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu5mYIH9y9ovhGwpiqquVjk2g6ivCHrnSO1g&usqp=CAU",
   ];
 
+  function handleClick(category, name) {
+    history.push("/category/" + category + "/" + name);
+  }
+
   return (
     <>
-      <Text primary>DEALS OF THE DAY</Text>
-      <div className="container">
+      <Text primary className="mt-1" align="center">
+        {text}
+      </Text>
+      <div className="container-fluid my-4">
         <div className="row">
           {gridImg.map((img, index) => (
             <div className="col-md-3 mt-4" key={index}>
               <Block
                 style={{
                   backgroundImage: `url(${img})`,
                 }}
+                onClick={() =>
+                  handleClick(data[index].category, data[index].name)
+                }
               >
-                <Caption>Shop { data && data[index].subCategory}</Caption>
+                <Text tags color="white" align="center">
+                  Shop {data[index].name}
+                </Text>
               </Block>
             </div>
           ))}
 
-          <div className="col-md-3 mt-4">
-            <Block style={{ background: DarkShade }}>
-              <Caption>SHOP {data[3].subCategory}S</Caption>
+          <div className="col-md-3 my-4">
+            <Block
+              style={{ background: DarkShade }}
+              onClick={() => handleClick(data[3].category, data[3].name)}
+            >
+              {data && (
+                <Text tags color="white" align="center">
+                  SHOP {data[3].name}S
+                </Text>
+              )}
             </Block>
           </div>
         </div>

src/components/pages/home/components/Sliders.jsx

@@ -1,49 +1,133 @@
-import React, { useState, useEffect } from "react";
 import Slider from "react-slick";
-import { Block, Image } from "../../../../styles/pages/home-page";
+import { useHistory } from "react-router";
+import React, { useState, useEffect } from "react";
 import { Text } from "../../../../styles/widgets/widgets";
+import { Container, Row } from "react-bootstrap";
+import { Block, Image } from "../../../../styles/pages/home-page";
+
 let slides;
 
 function Sliders({ data, text }) {
+  let history = useHistory();
   const [settings, setSettings] = useState(null);
 
   useEffect(() => {
-    if (data.length >= 5) slides = 5;
-    else slides = data.length % 5;
+    if (data.length >= 6) slides = 6;
+    else slides = data.length % 6;
 
     setSettings({
       dots: true,
-      infinite: true,
+      // infinite: true,
       speed: 500,
       slidesToShow: slides,
-      slidesToScroll: 1,
+      slidesToScroll: 5,
       swipeToSlide: true,
     });
   }, [data.length]);
 
+  function handleClick(dataType, category, id) {
+    if (dataType === "SubCategory")
+      history.push("/category/" + category + "/" + id);
+    else if (dataType == "Product") history.push("/offers/");
+  }
+
   return (
     <>
       <center>
-        <Text primary>{text}</Text>
-        <div className="container" style={{ marginTop: "10px" }}>
+        <Text primary className="my-4" align="center">
+          {text}
+        </Text>
+        <Container fluid style={{ marginTop: "10px", marginBottom: "2%" }}>
           <div className="row">
             <Slider {...settings}>
-              {data.length > 0 &&
-                data.map((url) => (
-                  <Block
-                    primary
-                    className="col mt-2"
-                    key={url}
-                    data-bs-toggle="tooltip"
-                    data-bs-placement="right"
-                    title={url.name}
-                  >
-                    <Image src={url.image} alt="Category" />
-                  </Block>
-                ))}
+              {data.map((url) => (
+                <Block
+                  primary
+                  className="col mt-2"
+                  key={url}
+                  data-bs-toggle="tooltip"
+                  data-bs-placement="right"
+                  title={url.name}
+                >
+                  <Image
+                    className="mb-3"
+                    src={url.image}
+                    alt="Image"
+                    onClick={() =>
+                      handleClick(url.dataType, url.category, url.id)
+                    }
+                  />
+                  {url.offerPrice && (
+                    <Row className="mx-1">
+                      <Text
+                        primary
+                        size="70%"
+                        case="capitalize"
+                        className="p-1"
+                        space="1"
+                        color="#393939"
+                        style={{
+                          backgroundColor: "#f3e8f8",
+                          width: "max-content",
+                        }}
+                      >
+                        Popular
+                      </Text>
+                    </Row>
+                  )}
+
+                  <Row className="mx-1">
+                    <Text
+                      className="text-truncate py-1"
+                      case="capitalize"
+                      color="#393939"
+                      size={url.offerPrice ? "80%" : "90%"}
+                      align={!url.offerPrice && "center"}
+                      thickness={url.offerPrice && "200"}
+                      space="1"
+                      onClick={() =>
+                        handleClick(url.dataType, url.category, url.id)
+                      }
+                    >
+                      {url.name}
+                    </Text>
+                  </Row>
+                  {url.offerPrice && (
+                    <>
+                      <Row className="mx-1">
+                        <Text
+                          case="capitalize"
+                          size="80%"
+                          space="1"
+                          color="#956daa"
+                          className="py-0"
+                        >
+                          Now : INR {url.offerPrice}
+                        </Text>
+                      </Row>
+                      <Row className="mx-1">
+                        <Text
+                          case="capitalize"
+                          size="80%"
+                          space="1"
+                          thickness="200"
+                          color="#737373"
+                          className="me-1 py-0"
+                          style={{
+                            textDecoration: "line-through",
+                            float: "right",
+                          }}
+                        >
+                          INR {url.originalPrice}
+                        </Text>
+                      </Row>
+                    </>
+                  )}
+                </Block>
+              ))}
             </Slider>
           </div>
-        </div>
+        </Container>
         <br />
         <br />
       </center>