la-flowerita 0.1.0

package/src/components/SignupModal.js

@@ -0,0 +1,306 @@
+import React, { Component } from "react";
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import { NavLink } from "react-router-dom";
+import '../css/newProductModal.css';
+import swal from 'sweetalert';
+import {FaPenSquare} from "react-icons/fa"
+import LoadingIndicator from "./Spinner";
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+class SignupModal extends Component {
+  constructor() {
+    super();
+    this.state = {
+      showModal: false,
+      user: {
+        email: "",
+        password: "",
+        degree: "",
+        name: "", 
+        phone: "",
+        address: "",
+        picture: false,
+        src: false,
+    },
+      ERROR: "",
+    };
+  }
+
+  handleClose = () => {
+    this.setState({ showModal: false });
+  };
+  handleShow = () => {
+    this.setState({ showModal: true });
+  };
+  async signup() {
+    // check inputs
+    var email = this.state.email;
+    var password = this.state.password;
+    var degree = this.state.degree;
+    var name = this.state.name;
+    var phone = this.state.phone;
+    var address = this.state.address;
+    var re_pass = document.getElementById("re_pass").value;
+    if (email == "" || password == "" || degree== undefined || name == "" || phone == "" || address == "") {
+      this.setState({ ERROR: "Please fill all the fields" });
+      return;
+    }
+    if (!email.includes("@")) {
+      this.setState({ ERROR: "Email is not valid." });
+      return;
+    }
+    if(re_pass != password){
+      this.setState({ ERROR: "Passwords don't match each other" });
+      return;
+    }
+    // pass inputs to server
+    let user = { email, password, degree, name, phone, address };
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({user: user}),
+    };
+    var id = 0;
+    trackPromise(
+    fetch("/signup", options).then(res => res.json())
+    .then(
+      (res) => {
+        console.log(res);
+        if (res.status == 200) {
+          id = res.id;
+          if (id != 0) {
+            var message = degree == "Customer" ? "You may login to your account": "To finish the process of signing up you will need to wait for the manager's approval \n You will get an answer to your email.";
+            if (!this.state.picture) {
+              swal("You signedup successfully!", message, "success");
+              return;
+            }
+            if (
+              this.state.picture.type.includes("png") ||
+              this.state.picture.type.includes("jpg")
+            ) {
+              this.setState({ ERROR: "Only types: PNG or JPG" });
+              return;
+            }
+            var myFormData = new FormData();
+            myFormData.append("file", this.state.picture);
+            myFormData.append("id", id);
+      
+            fetch("/addUserProfile", {
+              method: "POST",
+              body: myFormData,
+            }).then(response =>{
+            if (response.status == 200) {
+              swal("You signedup successfully!", message, "success");
+              // document.location.href = "/";
+            }
+           else {
+            swal("Error","Didn't get id","error");
+          }})
+        }
+        }
+        else if(res.status == 409){
+          this.setState({ ERROR: "Email already exists." });
+          return;
+        }
+        else if(res.status == 400){
+          this.setState({ ERROR: "There was an error. Please try again" });
+          return;
+        }
+        else if(res.status == 422){
+          this.setState({ ERROR: "Please fill all the fields correctly." });
+          return;
+        } else if(res.status == 500){
+          this.setState({ ERROR: "There was an error. Please try again" });
+          return;
+        }
+      },
+      // Note: it's important to handle errors here
+      // instead of a catch() block so that we don't swallow
+      // exceptions from actual bugs in components.
+      (error) => {
+        this.setState({
+          ERROR: error
+        });
+        return;
+      }
+    ))
+   
+  }
+
+  renderPreview() {
+    if(this.state.src) {
+      return (
+        <img src={this.state.src} style={{"max-width": "inherit", "max-height": "inherit"}}/>
+      );
+    } else {
+      return (
+        <p>
+          No Preview
+        </p>
+      );
+    }
+  }
+
+  handlePictureSelected(event) {
+    var picture = event.target.files[0];
+    var src     = URL.createObjectURL(picture);
+
+    this.setState({
+      picture: picture,
+      src: src
+    });
+  }
+  inputsHandler = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  radioHandler = (e) => {
+    this.setState({ [e.target.name]: document.querySelector(`input[name=${e.target.name}]:checked`).id});
+  };
+  render() {
+    return (
+      <div>
+        <Button
+          title="Sign Up"
+          class="btn btn-primary btn-lg btn-floating" 
+          style={{display: this.props.showButton,"background-color": "#17c0eb"}}
+          onClick={() => this.handleShow()}
+        >
+        {this.props.menuCollapse ? "" :"SignUp"}<FaPenSquare/>
+        </Button>
+        <Modal
+          style={{ opacity: 1 }}
+          show={this.state.showModal}
+          onHide={() => this.handleClose()}
+        >
+          <Modal.Header>
+            <Modal.Title>
+              <div className="modal-header">
+                {/* <img src="images\login.png"/> */}
+                <h5 className="modal-title" id="exampleModalLabel">
+                  Sign up
+                </h5>
+              </div>
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+          <LoadingIndicator/>
+            <form>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  name="name"
+                  id="name"
+                  className="form-control"
+                  placeholder="Full name"
+                  onChange={this.inputsHandler}
+                  required
+                  autoFocus
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  name="phone"
+                  id="phone"
+                  className="form-control"
+                  placeholder="Phone"
+                  onChange={this.inputsHandler}
+                  required
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  name="address"
+                  id="address"
+                  className="form-control"
+                  placeholder="Address"
+                  onChange={this.inputsHandler}
+                  required
+                />
+              </div>
+              <div className="mb-3">
+              <input type="radio" name="degree" id="Customer" onChange={this.radioHandler}/>
+              <label for="rd1">Customer</label>
+              <input type="radio" name="degree" id="Seller" onChange={this.radioHandler}/>
+              <label for="rd2">Seller</label>
+              <input type="radio" name="degree" id="Manager" onChange={this.radioHandler}/>
+              <label for="rd2">Manager</label>
+              </div>
+              <div className="mb-3">
+              {/* <span><i aria-hidden="true" class="fa fa-envelope"></i></span> */}
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  className="form-control"
+                  placeholder="Email address"
+                  onChange={this.inputsHandler}
+                  required
+                  autoFocus
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  className="form-control"
+                  placeholder="Password"
+                  onChange={this.inputsHandler}
+                  required
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="password"
+                  name="re_pass"
+                  id="re_pass"
+                  className="form-control"
+                  placeholder="Confirm Password"
+                  onChange={this.inputsHandler}
+                  required
+                />
+              </div>
+              <div className="mb-3">
+                <h2>Upload Profile Image</h2>
+                <input 
+                  name="file"  
+                  id="file"
+                  type="file"
+                  onChange={this.handlePictureSelected.bind(this)}
+                />
+                <br/>
+                <div style={{"max-width": "80%", "max-height": "80%"}}>
+                {this.renderPreview()}
+                </div>
+                <hr/>
+              </div>
+            </form>
+          </Modal.Body>
+          <Modal.Footer>
+            <h5>{this.state.ERROR}</h5>
+            <div className="modal-footer">
+              <button
+                className="btn btn-lg btn-primary btn-block"
+                onClick={() => this.signup()}
+                type="submit"
+              >
+                Sign up
+              </button>
+              <NavLink
+                style={{cursor:"pointer"}}
+                onClick={() => this.handleClose()}
+                to="/resetPassword"
+              >
+                forgot pasword ? click here
+              </NavLink>
+            </div>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default SignupModal;

package/src/components/Spinner.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import {ThreeDots} from 'react-loader-spinner'
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+const LoadingIndicator = props => {
+  const { promiseInProgress } = usePromiseTracker();
+
+  return promiseInProgress && 
+    <div
+      style={{
+        width: "100%",
+        height: "100",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }}
+    >
+      <ThreeDots type="ThreeDots" color="#2BAD60" height="100" width="100" />
+   </div>
+};
+
+export default LoadingIndicator;

package/src/components/Wishlist.js

@@ -0,0 +1,195 @@
+import { React, Component } from "react";
+import sampleImage from "../logo.svg";
+import "../css/shoppingCart.css";
+import { FaHeart, FaRegHeart, FaShoppingCart, FaEye } from "react-icons/fa";
+import OrderedProduct from "./OrderedProduct.js";
+import swal from "sweetalert";
+import { Container, Table, Row, Button } from "react-bootstrap";
+import LoadingIndicator from "./Spinner";
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+
+class Wishlist extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      id: -1,
+      totalPrice: 0,
+      products: [],
+      deleted: [],
+      loggedIn: false,
+      onUpdateWishlist: props.onUpdateWishlist,
+      onUpdateCart: props.onUpdateCart
+    };
+  }
+  componentDidMount = async () => {
+    var options = {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    };
+    trackPromise(
+    fetch("/getCurrentWishlist", options)
+      .then((res) => res.json())
+      .then(
+        (result) => {
+          console.log(result);
+          if (result.status == 200) {
+            this.setState({
+              id: result.wishlist._id,
+              products: result.wishlist.products,
+              totalPrice: result.wishlist.products.reduce(
+                (acc, item) => acc + item.price * item.quantity,
+                0
+              ),
+            });
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      ));
+  };
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.products.length != prevState.products.length) {
+      this.state.onUpdateWishlist(this.state.products.length);
+    }
+  }
+
+  async intoWishList() {}
+  async deleteFromWishlist(id) {
+    swal({
+      title: "Are you sure?",
+      text: "Do you want to delete this product from wishlist?",
+      icon: "warning",
+      buttons: true,
+      dangerMode: true,
+    }).then((willDelete) => {
+      if (willDelete) {
+        var options = {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ productId: id }),
+        };
+        trackPromise(
+        fetch("/deleteProductFromWishlist", options)
+          .then((res) => res.json())
+          .then(
+            (result) => {
+              console.log(result);
+              if (result.status == 200) {
+                this.setState({
+                  products: result.wishlist.products,
+                  totalPrice: result.wishlist.products.reduce(
+                    (acc, item) => acc + item.price * item.quantity,
+                    0
+                  ),
+                });
+                swal("Success","Product Deleted Successfully From Wish List", "success")
+              }
+            },
+            (error) => {
+              console.log(error);
+            }
+          ));
+      }
+    });
+  }
+
+  async updateQuantity(e, id) {
+    var quantity = Number(e.target.value);
+    var product = this.state.products.filter((p) => p.id == id);
+    product = product[0];
+    product.quantity = quantity;
+    var products = this.state.products;
+    products.map((p) => {
+      if (p.id == id) p = product;
+    });
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        product: {
+          productId: product.id,
+          price: product.price,
+          quantity: product.quantity,
+        },
+      }),
+    };
+    await fetch("/updateProductInWishlist", options)
+      .then((res) => res.json())
+      .then(
+        (result) => {
+          console.log(result);
+          if (result.status == 200) {
+            this.setState({
+              products: result.wishlist.products,
+              totalPrice: result.wishlist.products.reduce(
+                (acc, item) => acc + item.price * item.quantity,
+                0
+              ),
+            });
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+  }
+
+  async addToCart(id) {
+      var options = {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ productId: id }),
+      };
+      fetch("/addNewProductToCart", options).then(res => res.json()).then(
+        (result) => {
+          if (result.status == 200) {
+            this.state.onUpdateCart(result.cart.products.length);
+            swal("Success","Product Added Successfully To Cart", "success")
+          }
+        },
+        (error) => {
+          console.log(error);
+        }
+      );
+  }
+  render() {
+    return (
+      <div className="productSlider mb-5 mt-5">
+        <Container>
+          <h5 className="text-left mb-4 ps-2">Wish List</h5>
+          <Row>
+            <div className="col-9 wishlistShow">
+              <Table bordered hover responsive="sm">
+                <thead>
+                  <tr>
+                    <th>Product Img</th>
+                    <th>Name</th>
+                    <th>Price</th>
+                    <th>Add To Cart</th>
+                    <th>Delete</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <LoadingIndicator />
+                  {this.state.products.map((product, idx) => (
+                    <OrderedProduct
+                      key={product.id}
+                      isCart={false}
+                      product={product}
+                      onDelete={(id) => this.deleteFromWishlist(id)}
+                      onUpdate={(e, id) => this.updateQuantity(e, id)}
+                      onAdd={(e, id) => this.addToCart(e, id)}
+                    />
+                  ))}
+                </tbody>
+              </Table>
+            </div>
+          </Row>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default Wishlist;

package/src/components/social-config.js

@@ -0,0 +1,17 @@
+const facebook = {
+    appId: "YOUR FB APP ID GOES HERE",
+    cookie: true,
+    xfbml: true,
+    version: "v12.0",
+    scope: "email",
+    return_scopes: false
+  };
+  
+  export const facebookConfig = facebook;
+
+  const google = {
+    client_id: "YOUR_CLIENT_ID.apps.googleusercontent.com",
+    scope: "profile email"
+  };
+  
+  export const googleConfig = google;

package/src/css/about.css

@@ -0,0 +1,12 @@
+.about-section {
+    padding: 50px;
+    text-align: center;
+    background-color: #bacbe6;
+    color: black;
+}
+
+.center {
+    margin: auto;
+    width: 60%;
+    padding: 10px;
+}