Merge branch 'AFP-8-new-promotion-form' into dev

package.json

@@ -8,6 +8,8 @@
     "@testing-library/user-event": "^12.1.10",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.4.1",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1"

src/component/Main.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Redirect, Switch } from "react-router";
 import AuthRoute from "./AuthRoute";
 import ProductForm from "./ProductForm";
+import PromotionNewFormComponent from './promotionforms/PromotionNewFormComponent'
 
 export default function Main() {
   return (
@@ -10,8 +11,8 @@ export default function Main() {
         <AuthRoute exact path="/products/new">
           <ProductForm />
         </AuthRoute>
-        <AuthRoute exact path="/promos/new">NEW PROMO</AuthRoute>
-        <AuthRoute exact  path="/products">PRODUCTS</AuthRoute>
+        <AuthRoute exact path="/promos/new" component={PromotionNewFormComponent}>NEW PROMO</AuthRoute>
+        <AuthRoute exact path="/products">PRODUCTS</AuthRoute>
         <AuthRoute path="/promos">PROMOS</AuthRoute>
         <AuthRoute exact path="/">
           <Redirect to="/products" />

src/component/promotionforms/PromotionNewFormComponent.jsx

+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import "./promoStyle.css";
+import { NavLink } from 'react-router-dom';
+import Config from '../../config';
+import { useHistory } from 'react-router'
+
+export default function PromotionNewFormComponent () {
+    const { register, handleSubmit, formState: { errors } } = useForm();
+    const history = useHistory();
+    const [serverErrors, setErrors] = useState([]);
+
+    const onSubmit = (data) => {
+        console.log(data)
+
+        fetch(`${Config.promotionsUrl}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(data),
+            })
+            .then(res => res.ok ? history.push("/promos") : setErrors(["There is already an existing Promotion Id"]))
+            .catch(err => setErrors([err.message]))
+    };
+
+    return (
+        <div>
+            <div className="promo-container">
+                <div className="promo-form-container">
+                    <h1 className="promo-form-title">Add Promotion</h1>
+                
+                <form className="promo-form" onSubmit={handleSubmit(onSubmit)}>
+                        {serverErrors.length ? <p className="form-error">{serverErrors}</p> : ""}
+
+                <div className="form-group">
+                    <label>Promotion Id</label>
+                    <input 
+                        {...register("promotionId", {
+                            required: "promotion id is required",
+                            maxLength: { value: 10, message: "You exceeded the maximum value" }
+                        })}
+                        id="promotionId"
+                        className="form-control"
+                                placeholder="eg. PROMO-403"
+                    />
+                            
+                            {errors.promotionId && <p className="form-error">{errors.promotionId.message}</p>}
+                            
+                </div>
+                <div className="form-group">
+                    <label>Product Sku</label>
+                    <input
+                        {...register("productSku", {
+                            required: "product sku required",
+                            maxLength: { value: 10, message: "You exceeded the maximum value" }
+                        })}
+                        id="productSku"
+                        className="form-control"
+                                placeholder="eg. SKU-39SD"
+                    />
+                            {errors.productSku && <p className="form-error">{errors.productSku.message}</p>}
+                    <br></br>
+                </div>
+
+                <div className="form-group">
+                    <label>Enter % off</label>
+                    <div className="input-group">
+                    
+                            <div className="input-group-prepend">
+                    <span className="input-group-text">%</span></div>
+                    <input
+                        {...register("discountPercentage", {
+                            valueAsNumber: true,
+                            required: "% off required",
+                            min: { value: 0, message: "% must be greater than or equal to 0" },
+                            max: { value: 100, message: "% must be less than or equal to 100" },
+                        })}
+                        id="discountPercentage"
+                        className="form-control"
+                                placeholder="20"
+                                type="number"
+                    />
+                            </div>
+                        {errors.discountPercentage && <p className="form-error">{errors.discountPercentage.message}</p>}
+
+                </div>
+
+                <div className="form-group">
+                    <label>Applies at Minimum Quantity</label>
+                    <input 
+                        {...register("minimumQuantity", {
+                            valueAsNumber: true,
+                            required: "minimum quantity is required",
+                            min: { value: 1, message: "discount percentage must be greater than 0" },
+
+                        })}
+                        id="minimumQuantity"
+                        className="form-control"
+                        type="number"
+                        min="1"
+                        placeholder="1"
+                    />
+                            {errors.minimumQuantity && <p className="form-error">{errors.minimumQuantity.message}</p>}
+                    </div>
+                        <input className="promo-submit" type="submit" value="Save Promotion" />
+                        <NavLink className="promo-cancel" to="/promos">Cancel</NavLink>
+            </form>
+                </div>
+            </div>
+        </div>
+    );
+}
+

src/component/promotionforms/promoStyle.css

+.promo-container {
+    
+    margin: 0px auto;
+    padding: 50px;
+    border-radius: 3px;
+    
+    
+}
+
+.promo-form-title {
+    text-align: center;
+    background-color: #212529;
+    color: white;
+    padding: 8px;
+}
+
+.promo-form-container {
+       border: 1px solid #212529;
+}
+
+.promo-form {
+    padding: 50px;
+    
+}
+
+.form-group {
+    padding: 5px;
+}
+
+.promo-submit {
+    background-color: #212529;
+    border: 1px solid black;
+    border-radius: 4px;
+    color: white;
+    min-width: 180px;
+    height: 45px;
+    text-align: center;
+    margin-left: 5px;
+    margin-top: 15px;
+}
+
+.promo-submit:hover {
+    background-color: #212529;
+    filter: brightness(90%);
+}
+
+.promo-cancel {
+    margin-left: 15px;
+}
+
+.form-error {
+    color: red;
+}
\ No newline at end of file

src/config.js

+class Config {
+    static promotionsUrl = "http://localhost:8081/api/promos";
+}
+
+export default Config;
\ No newline at end of file