Merge pull request #11 from pesto-students/feature/cart

Feature/cart

.eslintrc

@@ -1,3 +1,4 @@
 {
-    "extends": ["react-app"]
+    "extends": ["react-app"],
+
 }

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.4.17",
     "@babel/core": "7.15.8",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-flow": "^7.16.0",
@@ -12,19 +13,24 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.24.0",
     "bcryptjs": "^2.4.3",
+    "bootstrap": "^5.1.3",
     "dotenv": "^10.0.0",
     "feather-icons-react": "^0.5.0",
     "firebase": "^9.4.0",
+    "graphql": "^16.0.1",
     "moment": "^2.29.1",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
+    "react-number-format": "^4.8.0",
+    "react-google-recaptcha": "^2.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
     "styled-components": "^5.3.3",
-    "web-vitals": "^1.0.1",
+    "web-vitals": "2.1.2",
     "yup": "^0.32.11"
   },
   "scripts": {

public/index.html

@@ -14,6 +14,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
+      integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
+      crossorigin="anonymous" referrerpolicy="no-referrer" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

renovate.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "config:base"
+  ]
+}

src/DummyData/FilterOptions.js

@@ -0,0 +1,40 @@
+const filterOptions1 = [
+  {
+    header: "Language",
+    options: [
+      { text: "English ", id: 1 },
+      { text: " Hindi", id: 2 },
+      { text: "Marathi", id: 3 },
+      { text: "Tamil", id: 4 },
+    ],
+  },
+  {
+    header: "Condition",
+    options: [
+      { text: "New ", id: 5 },
+      { text: " Old", id: 6 },
+    ],
+  },
+  {
+    header: "Format",
+    options: [
+      { text: "Audio ", id: 7 },
+      { text: " Hard Copy", id: 8 },
+      { text: "E-Book", id: 9 },
+    ],
+  },
+];
+
+const filterOptions2 = [
+  {
+    header: "Price - Range",
+    options: [
+      { text: "Under $200", id: 10 },
+      { text: "$200-$400", id: 11 },
+      { text: "$400-$600", id: 12 },
+      { text: "Above $600", id: 13 },
+    ],
+  },
+];
+
+export { filterOptions1, filterOptions2 };

src/DummyData/bookData.js

@@ -0,0 +1,79 @@
+const book_card = [
+  {
+    id: 1,
+    name: 'LIFE LOVE BOOKS ',
+    description: 'Love your life',
+    price: 450,
+    currency: '$',
+    img: './images/img1.jpg'
+  },
+  {
+    id: 2,
+    name: 'THINK STRAIGHT ',
+    description: 'How to think straight and avoid distractions',
+    price: 500,
+    currency: '$',
+    img: './images/img2.jpg'
+  },
+  {
+    id: 3,
+    name: 'THE 5 A.M. CLUB ',
+    description: 'Get up early and Elevate your life',
+    price: 350,
+    currency: '$',
+    img: './images/img3.jpg'
+  },
+  {
+    id: 4,
+    name: 'LIMITLESS ',
+    description: 'How to be LIMITLESS',
+    price: 600,
+    currency: '$',
+    img: './images/img4.jpg'
+  },
+  {
+    id: 5,
+    name: 'GMAT',
+    description: 'Get your best score',
+    price: 1000,
+    currency: '$',
+    img: './images/img5.jpg'
+  },
+  {
+    id: 6,
+    name: 'GRE',
+    description: 'Pass the test with high perentage',
+    price: 1500,
+    currency: '$',
+    img: './images/img6.jpg'
+  },
+  {
+    id: 7,
+    type: 3,
+    name: 'Kalki',
+    description: 'Kal Kyu Aaj Kyu nahi?',
+    price: 500,
+    currency: '$',
+    img: './images/img12.jpg'
+  },
+  {
+    id: 8,
+    type: 3,
+    name: 'PrernaDayak Katha ',
+    description: 'Ek katha',
+    price: 550,
+    currency: '$',
+    img: './images/img11.jpg'
+  },
+  {
+    id: 9,
+    type: 4,
+    name: 'Tamil1',
+    description: 'Be healthy , Be Fit',
+    price: 750,
+    currency: '$',
+    img: './images/img10.jpg'
+  }
+];
+
+export default book_card;

src/DummyData/cartData.js

@@ -0,0 +1,24 @@
+const items = [
+  {
+    title: 'LIFE LOVE BOOKS',
+    description: "Love your life , it has to offer a lot more than you expect",
+    stock: 'In Stock',
+    image: './images/img1.jpg',
+    price: '450',
+    quantity: 1
+  },
+  {
+    title: 'THINK STRAIGHT ',
+    description: "Think Straight and achieve whatever you want to",
+    stock: 'In Stock',
+    image: './images/img2.jpg',
+    price: '500',
+    quantity: 2
+  }
+];
+
+const itemsFixPrice = items.map((item) => item.price);
+
+export { itemsFixPrice };
+
+export default items;

src/components/Cart/AddressModal.js

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import { Button, Modal, Row, Col, Form } from 'react-bootstrap';
+import { Address } from './styledComponents';
+
+function AddressModal({ show, onHide }) {
+  return (
+    <Address>
+      <Modal size="lg" show={show}>
+        <Modal.Header closeButton onClick={onHide}>
+          <Modal.Title>Please enter your address</Modal.Title>
+        </Modal.Header>
+        <Form>
+          <Modal.Body>
+            <Row>
+              <Col>
+                <Form.Group controlId="First_Name">
+                  <Form.Label>First Name</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Your First Name "
+                    required
+                  />
+                </Form.Group>
+              </Col>
+              <Col>
+                <Form.Group controlId="Last_Name">
+                  <Form.Label>Last Name</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Your Last Name "
+                    required
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <Form.Group controlId="First_Name">
+                  <Form.Label>Email Address</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Your Email Address"
+                    required
+                  />
+                </Form.Group>
+              </Col>
+              <Col>
+                <Form.Group controlId="Last_Name">
+                  <Form.Label>Phone Number</Form.Label>
+                  <Form.Control
+                    type="text"
+                    placeholder="Your Phone Number"
+                    required
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+            <Row>
+              <Col>
+                <Form.Group controlId="First_Name">
+                  <Form.Label>Current Address</Form.Label>
+                  <Form.Control
+                    rows={3}
+                    as="textarea"
+                    placeholder="Your Current Address"
+                    required
+                  />
+                </Form.Group>
+              </Col>
+            </Row>
+          </Modal.Body>
+        </Form>
+        <Modal.Footer>
+          <Button className="closeButton" onClick={onHide} variant="dark">
+            Close
+          </Button>
+          <Button className="payButton" onClick={onHide} variant="dark">
+            Proceed to Pay
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </Address>
+  );
+}
+
+export default AddressModal;

src/components/Cart/CartItem.js

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import NumberFormat from 'react-number-format';
+import { Item, ItemActions, ItemImage, ItemInfo } from './styledComponents';
+
+const CartItem = ({ index, item, changeItemQuantity, deleteItem }) => {
+  const { title, stock, price, quantity, image, description} = item;
+
+  return (
+    <Item>
+      <ItemImage>
+        <img className="img" src={image} alt="" />
+      </ItemImage>
+
+      <ItemInfo>
+        <div className="infoTitle">
+          <h2>{title}</h2>
+          <p>{description}</p>
+        </div>
+
+
+        <ItemActions>
+          <div className="itemQuantity">
+            <select className = "Select"
+              value={quantity}
+              onChange={(event) => changeItemQuantity(event, index)}>
+              <option value="1">Qty: 1</option>
+              <option value="2">Qty: 2</option>
+              <option value="3">Qty: 3</option>
+              <option value="4">Qty: 4</option>
+              <option value="5">Qty: 5</option>
+              <option value="6">Qty: 6</option>
+              <option value="7">Qty: 7</option>
+              <option value="8">Qty: 8</option>
+              <option value="9">Qty: 9</option>
+            </select>
+          </div>
+          <div className="itemActionsDivider">|</div>
+          <i className = "fa-solid fa-trash itemDelete" onClick={deleteItem.bind(this, index)}>
+
+          </i>
+        </ItemActions>
+      </ItemInfo>
+      <div className="Price">
+        <NumberFormat
+          value={price}
+          displayType={'text'}
+          thousandSeparator={true}
+          prefix={'$'}
+          decimalScale={2}
+        />
+      </div>
+    </Item>
+  );
+};
+
+export default CartItem;

src/components/Cart/CartItems.js

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { v4 as uuidv4 } from 'uuid';
+import CartItem from './CartItem';
+import { Items } from './styledComponents';
+
+const CartItems = ({ items, setCartItems, fixedPrice }) => {
+  const changeItemQuantity = (event, index) => {
+    const newItems = [...items];
+    newItems[index].quantity = event.target.value;
+    newItems[index].price = fixedPrice[index] * newItems[index].quantity;
+    setCartItems(newItems);
+  };
+
+  const deleteItem = (indexToDelete) => {
+    const newItems = items.filter((item, index) => {
+      return index !== indexToDelete;
+    });
+    setCartItems(newItems);
+  };
+
+  return (
+    <Items>
+      <h1>Shopping Cart</h1>
+      <hr />
+      <div>
+        {items.map((item, index) => (
+          <CartItem
+            key={uuidv4()}
+            index={index}
+            item={item}
+            changeItemQuantity={changeItemQuantity}
+            deleteItem={deleteItem}
+          />
+        ))}
+      </div>
+    </Items>
+  );
+};
+
+export default CartItems;