Merge pull request #84 from Jhonatan2022/soporte

Soporte
Jhonatan2022 · Sep 11, 2023 · 0dccb14 · 0dccb14
2 parents 518fb48 + fa9f135
commit 0dccb14
Show file tree

Hide file tree

Showing 39 changed files with 2,450 additions and 116,615 deletions.
diff --git a/Frontend/ReactJS/intro-react/package-lock.json b/Frontend/ReactJS/intro-react/package-lock.json
diff --git a/Frontend/ReactJS/react-hooks/package-lock.json b/Frontend/ReactJS/react-hooks/package-lock.json
diff --git a/Frontend/ReactJS/react-patrones-render/package-lock.json b/Frontend/ReactJS/react-patrones-render/package-lock.json
diff --git a/Frontend/ReactJS/react-routers/package-lock.json b/Frontend/ReactJS/react-routers/package-lock.json
diff --git a/Frontend/ReactJS/store-conf/package-lock.json b/Frontend/ReactJS/store-conf/package-lock.json
diff --git a/Frontend/ReactJS/store-conf/package.json b/Frontend/ReactJS/store-conf/package.json
@@ -3,11 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@paypal/react-paypal-js": "^8.1.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

diff --git a/Frontend/ReactJS/store-conf/public/index.html b/Frontend/ReactJS/store-conf/public/index.html
@@ -2,11 +2,28 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="https://s3-alpha.figma.com/hub/file/1913095808/a7bdc469-cd70-4ea1-bb57-b59204ad8182-cover.png" />
+    <link
+      rel="icon"
+      href="https://s3-alpha.figma.com/hub/file/1913095808/a7bdc469-cd70-4ea1-bb57-b59204ad8182-cover.png"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Web site created using create-react-app" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
     <title>React App</title>
+
+    <script
+      src="https://kit.fontawesome.com/f21459c29e.js"
+      crossorigin="anonymous"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+      crossorigin=""
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/Frontend/ReactJS/store-conf/src/Components/App/index.jsx b/Frontend/ReactJS/store-conf/src/Components/App/index.jsx
diff --git a/Frontend/ReactJS/store-conf/src/Components/Footer/index.jsx b/Frontend/ReactJS/store-conf/src/Components/Footer/index.jsx
@@ -0,0 +1,12 @@
+import './styles.css'
+
+function Footer() {
+  return (
+    <div className="Footer">
+      <p className="Footer-title">Conf Merch</p>
+      <p className="Footer-copy">Todos los Izquierdos Reservados</p>
+    </div>
+  );
+}
+
+export { Footer };
diff --git a/Frontend/ReactJS/store-conf/src/Components/Footer/styles.css b/Frontend/ReactJS/store-conf/src/Components/Footer/styles.css
@@ -0,0 +1,4 @@
+.Footer {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/Frontend/ReactJS/store-conf/src/Components/Header/index.jsx b/Frontend/ReactJS/store-conf/src/Components/Header/index.jsx
@@ -0,0 +1,25 @@
+import { useContext } from "react";
+import { Link } from "react-router-dom";
+import { AppContext } from "../../Context";
+import "./styles.css";
+
+function Header() {
+  const { state } = useContext(AppContext);
+  const { cart } = state;
+
+  return (
+    <div className="Header">
+      <h1 className="Header-title">
+        <Link to="/">Conf Merch</Link>
+      </h1>
+      <div className="Header-checkout">
+        <Link to="/checkout">
+          <i className="fa-solid fa-basket-shopping" />
+        </Link>
+        {cart.length > 0 && <div className="Header-alert">{cart.length}</div>}
+      </div>
+    </div>
+  );
+}
+
+export { Header };
diff --git a/Frontend/ReactJS/store-conf/src/Components/Header/styles.css b/Frontend/ReactJS/store-conf/src/Components/Header/styles.css
@@ -0,0 +1,21 @@
+.Header {
+    display: flex;
+    justify-content: space-between;
+  }
+  .Header-checkout {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    justify-items: center;
+    width: 30px;
+    margin: 0 0 0 0.5em;
+  }
+  .Header-alert {
+    color: #33b13a;
+    font-size: 14px;
+    margin-left: 5px;
+  }
+  .Header a {
+    text-decoration: none;
+    color: #33b1ff;
+  }
diff --git a/Frontend/ReactJS/store-conf/src/Components/Layout/index.jsx b/Frontend/ReactJS/store-conf/src/Components/Layout/index.jsx
@@ -0,0 +1,15 @@
+import { Footer } from "../Footer";
+import { Header } from "../Header";
+import "./styles.css";
+
+function Layout({ children }) {
+  return (
+    <div className="Main">
+      <Header />
+      {children}
+      <Footer />
+    </div>
+  );
+}
+
+export { Layout };
diff --git a/Frontend/ReactJS/store-conf/src/Components/Layout/styles.css b/Frontend/ReactJS/store-conf/src/Components/Layout/styles.css
@@ -0,0 +1,15 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap");
+
+body {
+  margin: 0;
+  padding: 0;
+  color: #3c484e;
+  font-family: "Open Sans", sans-serif;
+}
+
+.Main {
+  padding: 10px;
+  grid-template-columns: minmax(auto, 768px);
+  display: grid;
+  justify-content: center;
+}
diff --git a/Frontend/ReactJS/store-conf/src/Components/Map/index.jsx b/Frontend/ReactJS/store-conf/src/Components/Map/index.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
+import "./styles.css";
+
+const position = [51.505, -0.09];
+
+const Map = () => {
+  return (
+    <MapContainer center={position} zoom={13}>
+      <TileLayer
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+      <Marker position={position}>
+        <Popup>
+          A pretty CSS3 popup. <br /> Easily customizable.
+        </Popup>
+      </Marker>
+    </MapContainer>
+  );
+};
+
+export { Map };
diff --git a/Frontend/ReactJS/store-conf/src/Components/Map/styles.css b/Frontend/ReactJS/store-conf/src/Components/Map/styles.css
@@ -0,0 +1,4 @@
+.leaflet-container {
+  width: 100%;
+  height: 500px;
+}
diff --git a/Frontend/ReactJS/store-conf/src/Components/Product/index.jsx b/Frontend/ReactJS/store-conf/src/Components/Product/index.jsx
@@ -0,0 +1,17 @@
+function Product({ product, handleAddToCart }) {
+  return (
+    <div className="Products-item">
+      <img src={product.image} alt={product.title} />
+      <div className="Product-item-info">
+        <h2>
+          {product.title}
+          <span>$ {product.price}</span>
+        </h2>
+        <p>{product.description}</p>
+      </div>
+      <button type="button" onClick={handleAddToCart(product)}>Comprar</button>
+    </div>
+  );
+}
+
+export { Product };
diff --git a/Frontend/ReactJS/store-conf/src/Components/Products/index.jsx b/Frontend/ReactJS/store-conf/src/Components/Products/index.jsx
@@ -0,0 +1,28 @@
+import { useContext } from "react";
+import { Product } from "../Product";
+import { AppContext } from "../../Context";
+import "./styles.css";
+
+function Products() {
+  const {state, addToCart} = useContext(AppContext);
+  const { products } = state;
+
+  const handleAddToCart = product => () => {
+    addToCart(product);
+  }
+
+  return (
+    <div className="Products">
+      <div className="Products-items">
+        {products.map((product) => (
+          <Product 
+            key={product.id} 
+            product={product}
+            handleAddToCart={handleAddToCart} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { Products };
diff --git a/Frontend/ReactJS/store-conf/src/Components/Products/styles.css b/Frontend/ReactJS/store-conf/src/Components/Products/styles.css
@@ -0,0 +1,50 @@
+.Products-items {
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 1.5rem;
+  grid-row-gap: 1.5em;
+  display: grid;
+}
+.Products-item {
+  text-decoration: none;
+  box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06),
+    1px 3px 8px rgba(39, 44, 49, 0.03);
+  border-radius: 5px;
+  margin: 0 0 20px 0;
+  position: relative;
+}
+.Products-item-info {
+  padding: 10px;
+}
+.Products-item-info h2 {
+  font-size: 18px;
+  font-weight: bold;
+  display: flex;
+  justify-content: space-between;
+}
+.Products-item-info h2 span {
+  color: #33b13a;
+}
+.Products-item-info p {
+  font-size: 14px;
+  font-weight: 300;
+}
+.Products-item img {
+  width: 100%;
+  height: 200px;
+  border-radius: 5px 5px 0 0;
+  object-fit: contain;
+}
+.Products-item button {
+  background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
+  width: 100%;
+  padding: 10px;
+  border-radius: 0px 0px 5px 5px;
+  border: 0px;
+  outline: 0;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 300;
+}
+.Products-item button:hover {
+  background-color: rgba(39, 44, 49, 0.06);
+}
diff --git a/Frontend/ReactJS/store-conf/src/Containers/Checkout/index.jsx b/Frontend/ReactJS/store-conf/src/Containers/Checkout/index.jsx
@@ -0,0 +1,49 @@
+import { useContext } from "react";
+import { Link } from "react-router-dom";
+import { AppContext } from "../../Context";
+import "./styles.css";
+
+function Checkout() {
+  const { state, removeFromCart } = useContext(AppContext);
+  const { cart } = state;
+
+  const handleRemove = (product) => () => {
+    removeFromCart(product);
+  };
+
+  const handleSumTotal = () => {
+    const reducer = (accumulator, currentValue) =>
+      accumulator + currentValue.price;
+    const sum = cart.reduce(reducer, 0);
+    return sum;
+  };
+
+  return (
+    <div className="Checkout">
+      <div className="Checkout-content">
+        <h3>{cart.length > 0 ? "Lista de Pedidos:" : "Sin Pedidos..."}</h3>
+        {cart.map((item) => (
+          <div className="Checkout-item" key={item.id}>
+            <div className="Checkout-element">
+              <h4>{item.title}</h4>
+              <span>{item.price}</span>
+            </div>
+            <button type="button" onClick={handleRemove(item)}>
+              <i className="fas fa-trash-alt" />
+            </button>
+          </div>
+        ))}
+      </div>
+      {cart.length > 0 && (
+        <div className="Checkout-sidebar">
+          <h3>{`Precio Total: $ ${handleSumTotal()}`}</h3>
+          <Link to="/checkout/information">
+            <button type="button">Continuar Pedido</button>
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export { Checkout };
diff --git a/Frontend/ReactJS/store-conf/src/Containers/Checkout/styles.css b/Frontend/ReactJS/store-conf/src/Containers/Checkout/styles.css
@@ -0,0 +1,57 @@
+.Checkout {
+  grid-template-columns: 3fr 1fr;
+  grid-gap: 2rem;
+  grid-row-gap: 1.5em;
+  display: grid;
+  padding: 0 0 4em 0;
+}
+.Checkout-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 10px 0 0 0;
+}
+.Checkout-item .fas {
+  margin: 0 0 0 10px;
+  color: rgba(0, 0, 0, 0.4);
+  cursor: pointer;
+}
+.Checkout-item button {
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+.Checkout-element {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid #eee;
+}
+.Checkout-element h4 {
+  margin: 0;
+}
+
+.Checkout-sidebar button {
+  box-shadow: inset 0px 1px 0px 0px #bee2f9;
+  background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
+  background-color: #63b8ee;
+  border-radius: 6px;
+  border: 1px solid #3866a3;
+  display: inline-block;
+  cursor: pointer;
+  color: #14396a;
+  font-family: Arial;
+  font-size: 15px;
+  font-weight: bold;
+  padding: 6px 24px;
+  text-decoration: none;
+  text-shadow: 0px 1px 0px #7cacde;
+  width: 100%;
+  display: block;
+  outline: none;
+}
+
+a {
+  text-decoration: none;
+}