atlp-rwanda · key-joshua · Jul 9, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jul 2, 2024
diff --git a/.gitignore b/.gitignore
@@ -7,8 +7,8 @@
 /coverage
 
 # production
-/dist
-
+/build
+dist
 # misc
 .DS_Store
 .env.local

diff --git a/README.md b/README.md
@@ -17,11 +17,13 @@ Our e-commerce web application server, developed by Team Ninjas, facilitates smo
 [![Netlify Status](https://api.netlify.com/api/v1/badges/a3ed5a75-a862-4f3b-ba21-8369180cf3e6/deploy-status)](https://app.netlify.com/sites/e-commerce-ninja-fn-staging/deploys)
 [![Coverage Status](https://coveralls.io/repos/github/atlp-rwanda/e-commerce-ninjas-fe/badge.svg)](https://coveralls.io/github/atlp-rwanda/e-commerce-ninjas-fe)
 [![CircleCI](https://dl.circleci.com/status-badge/img/gh/atlp-rwanda/e-commerce-ninjas-fe/tree/develop.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/atlp-rwanda/e-commerce-ninjas-fe/tree/develop)
+[![CI](https://github.com/atlp-rwanda/e-commerce-ninjas-fe/actions/workflows/ci.yml/badge.svg)](https://github.com/atlp-rwanda/e-commerce-ninjas-fe/actions/workflows/ci.yml)
 
 ## Completed features
 - Setup empty react
 - Setup Redux store
 - Setup StoryBook documentation
+- Sign up page
 
 ## Get started
 - Clone repository
@@ -47,7 +49,7 @@ npm run storybook
 
 ## Folder Structure
 
-- `public`: Contains static files like `index.html` and images.
+- `public`: Contains static files and folder like `index.html` and images.
 - `src`: The main source folder for the React application.
   - `components`: Reusable UI components.
   - `pages`: Different pages/screens of the application.

diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,10 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[[redirects]]
+  from = "/api/*"
+  to = "/index.html"
+  status = 200
+  force = true
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,16 +12,20 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.5",
     "axios": "^1.7.2",
+    "dotenv": "^16.4.5",
+    "formik": "^2.4.6",
     "html-webpack-plugin": "^5.6.0",
     "mini-css-extract-plugin": "^2.9.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
     "react-icons": "^5.2.1",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.24.0",
     "react-spinners": "^0.14.1",
-    "sass": "^1.77.6",
-    "save-dev": "0.0.1-security"
+    "react-toastify": "^10.0.5",
+    "save-dev": "0.0.1-security",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",
@@ -49,6 +53,7 @@
     "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/react-helmet": "^6.1.11",
     "@types/testing-library__react": "^10.2.0",
     "@types/webpack-dev-server": "^4.7.2",
     "@typescript-eslint/eslint-plugin": "^7.14.1",
@@ -68,10 +73,13 @@
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-webpack-plugin": "^4.2.0",
+    "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
+    "image-webpack-loader": "^8.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-test-renderer": "^18.3.1",
+    "sass": "^1.77.6",
     "sass-loader": "^14.2.1",
     "storybook": "^8.1.10",
     "style-loader": "^4.0.0",

diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html   200
diff --git a/public/assets/images/email.png b/public/assets/images/email.png
diff --git a/public/assets/images/failed.png b/public/assets/images/failed.png
diff --git a/public/assets/left-bottom.png → public/assets/images/left-bottom.png b/public/assets/left-bottom.png → public/assets/images/left-bottom.png
diff --git a/public/assets/left-top.png → public/assets/images/left-top.png b/public/assets/left-top.png → public/assets/images/left-top.png
diff --git a/public/assets/images/login-icon.png b/public/assets/images/login-icon.png
diff --git a/public/logo.png → public/assets/images/logo.png b/public/logo.png → public/assets/images/logo.png
diff --git a/public/assets/images/new-message.png b/public/assets/images/new-message.png
diff --git a/public/assets/images/not-found.png b/public/assets/images/not-found.png
diff --git a/public/assets/right-bottom.png → public/assets/images/right-bottom.png b/public/assets/right-bottom.png → public/assets/images/right-bottom.png
diff --git a/public/assets/right-top.png → public/assets/images/right-top.png b/public/assets/right-top.png → public/assets/images/right-top.png
diff --git a/public/assets/images/sign-up.png b/public/assets/images/sign-up.png
diff --git a/public/index.html b/public/index.html
@@ -3,8 +3,8 @@
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="shortcut icon" href="logo.png" type="image/png">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" href="./images/logo.png" type="image/png">
   <title>E-Commerce Ninjas FrontEnd</title>
 </head>
 <body>

diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,16 @@
+@import './styles/Colors.scss';
+@import './styles/Sample.scss';
+@import './styles/style.scss';
+@import './styles/signup.scss';
+@import './styles/LandingPage.scss';
+@import './styles/email.scss';
+@import './styles/AdminHeader.scss';
+@import './styles/Button.scss';
+@import './styles/Categories.scss';
+@import './styles/Footer.scss';
+@import './styles/Input.scss';
+@import './styles/SearchInput.scss';
+@import './styles/SellerHeader.scss';
+@import './styles/Sidebar.scss';
+@import './styles/Header.scss';
+@import "./styles/Product.scss";
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,8 @@
-/* eslint-disable*/
-import React from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import AppRouter from "./router";
-import "./styles/style.scss";
-import Sidebar from "./components/sidebar/Sidebar";
+/* eslint-disable */
+import React from 'react';
+import "./App.scss"
+import { BrowserRouter as Router } from 'react-router-dom';
+import AppRouter from './router';
 
 const App: React.FC = () => (
   <Router>

diff --git a/src/components/Meta.tsx b/src/components/Meta.tsx
@@ -0,0 +1,16 @@
+/* eslint-disable */
+import React from 'react'
+import {Helmet} from 'react-helmet'
+
+interface MetaProps {
+    title: string;
+  }
+
+  export const Meta: React.FC<MetaProps> = (props) => {
+    return (
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>{props.title}</title>
+      </Helmet>
+    );
+  };
diff --git a/src/components/ResendEmail.tsx b/src/components/ResendEmail.tsx
@@ -0,0 +1,73 @@
+/* eslint-disable */
+import React, { useEffect } from "react";
+import { Meta } from "./Meta";
+import Button from "./buttons/Button";
+import { useFormik } from "formik";
+import * as yup from "yup";
+import { toast } from "react-toastify";
+import { useAppDispatch, useAppSelector } from "../store/store";
+import { resendVerificationEmail } from "../store/features/auth/authSlice";
+import { PuffLoader } from "react-spinners";
+
+const validationSchema = yup.object({
+  email: yup.string().email("Invalid email format").required("Email is required"),
+})
+export const ResendEmail = () => {
+  const dispatch = useAppDispatch();
+  const { isSuccess, isError, isLoading, message } = useAppSelector((state) => state.auth)
+  const initialValues = {
+    email: "",
+  };
+  const formik = useFormik({
+    initialValues,
+    validationSchema,
+    onSubmit: (values) => {
+      dispatch(resendVerificationEmail(values));
+    },
+  })
+
+  useEffect(() => {
+    if (isSuccess) {
+      toast.success(message)
+      formik.resetForm()
+    }
+    if (isError) {
+      toast.error(message)
+    }
+  })
+  return (
+    <>
+      <Meta title="Resend Email - E-Commerce Ninjas" />
+      <div className="wrapper">
+        <div className="container">
+          {
+            isLoading ? (
+              <div className="loading-spinner">
+                <PuffLoader size={100} color="#FF6D18" loading={isLoading} />
+                <p>Please wait...</p>
+              </div>
+            ) : (
+              <div className="resend-email">
+                <h2>Resend Email</h2>
+                <p>Please enter your email address below to resend the verification email.</p>
+                <form onSubmit={formik.handleSubmit}>
+                  <input
+                    type="email"
+                    placeholder="Email Address"
+                    required
+                    name="email"
+                    id="email"
+                    onChange={formik.handleChange}
+                    onBlur={formik.handleBlur}
+                    value={formik.values.email}
+                  />
+                  <Button title="Resend" type="submit" />
+                </form>
+              </div>
+            )
+          }
+        </div>
+      </div>
+    </>
+  )
+}
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
@@ -1,9 +1,13 @@
 /* eslint-disable */
+import React from 'react';
 
-import React from "react";
+interface ButtonProps {
+  title: string;
+  type: "button" | "submit" | "reset";
+}
 
-const Button = ({ title }: { title: string }) => (
-  <button type="button">{title}</button>
+const Button: React.FC<ButtonProps> = ({ title, type }) => (
+  <button type={type}>{title}</button>
 );
 
-export default Button;
+export default Button;
diff --git a/src/components/categories/Categories.tsx b/src/components/categories/Categories.tsx
@@ -1,8 +1,9 @@
 /* eslint-disable */
-
 import React from "react";
-import "../../styles/Categories.scss";
-
+import leftButton from '../../../public/assets/left-bottom.png';
+import middle from '../../../public/assets/middle.png';
+import rightButton from '../../../public/assets/right-bottom.png';
+import rightTop from '../../../public/assets/right-top.png';
 function Categories() {
   return (
     <div className="categories__container">
@@ -20,7 +21,7 @@ function Categories() {
         </div>
         <div className="categories__box categories__box__2">
           <img
-            src="left-bottom.png"
+            src={leftButton}
             alt="Product image"
             className="categories__img"
           />
@@ -31,7 +32,7 @@ function Categories() {
         </div>
         <div className="categories__box categories__box__3">
           <img
-            src="middle.png"
+            src={middle}
             alt="Product image"
             className="categories__img"
           />
@@ -51,7 +52,7 @@ function Categories() {
         </div>
         <div className="categories__box categories__box__4">
           <img
-            src="right-top.png"
+            src={rightTop}
             alt="Product image"
             className="categories__img"
           />
@@ -64,7 +65,7 @@ function Categories() {
         </div>
         <div className="categories__box categories__box__5">
           <img
-            src="right-bottom.png"
+            src={rightButton}
             alt="Product image"
             className="categories__img"
           />

diff --git a/src/components/layout/AdminHeader.tsx b/src/components/layout/AdminHeader.tsx
@@ -2,7 +2,6 @@
 import React from "react";
 import { IoIosNotifications } from "react-icons/io";
 import { FaEnvelope } from "react-icons/fa";
-import "../../styles/AdminHeader.scss";
 
 function AdminHeader() {
   return (

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -6,8 +6,6 @@ import { IoLogoFacebook } from "react-icons/io";
 import { FaSquareTwitter } from "react-icons/fa6";
 import { FaLinkedin } from "react-icons/fa6";
 
-import "../../styles/Footer.scss";
-
 function Footer() {
   return (
     <footer className="footer">

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -10,8 +10,7 @@ import { IoLogOutSharp } from "react-icons/io5";
 import { FaUserClock } from "react-icons/fa6";
 import { FaChevronDown } from "react-icons/fa";
 import { NavLink } from "react-router-dom";
-
-import "../../styles/Header.scss";
+import Logo from "../../../public/assets/images/logo.png";
 
 import SearchInput from "../inputs/SearchInput";
 
@@ -34,7 +33,7 @@ function Header() {
       <div className="header__top">
         <div className="header__logo">
           <img
-            src="logo.png"
+            src={Logo}
             alt="Ecommerce logo"
             className="header__logo__img"
           />

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -0,0 +1,15 @@
+/* eslint-disable */
+import React from 'react';
+import Header from './Header';
+import { Outlet } from 'react-router-dom';
+import Footer from './Footer';
+
+export default function Layout() {
+    return (
+        <>
+            <Header />
+            <Outlet />
+            <Footer />
+        </>
+    );
+}
diff --git a/src/components/layout/Sample.tsx b/src/components/layout/Sample.tsx
@@ -6,8 +6,10 @@ import { LiaShippingFastSolid } from "react-icons/lia";
 import { FaHandHoldingUsd } from "react-icons/fa";
 import { GoDotFill } from "react-icons/go";
 import { FaChevronCircleLeft, FaChevronCircleRight } from "react-icons/fa";
-import '../../styles/index.scss';
-
+import leftTop from "../../../public/assets/images/left-top.png";
+import rightTop from "../../../public/assets/images/right-top.png";
+import leftBottom from "../../../public/assets/images/left-bottom.png";
+import rightBottom from "../../../public/assets/images/right-bottom.png";
 const images = [
   '/assets/middle.png',
   '/assets/shoe2.jpeg',
@@ -53,12 +55,14 @@ const Sample: React.FC = () => {
       <div className="sampleImages1">
         <div className="sample1">
           <div className="menShoe">
+            <img src={leftTop} alt="" />
             <div className="text-container">
               <p>Men's Shoes</p>
               <button>View &gt;</button>
             </div>
           </div>
           <div className="phones">
+            <img src={leftBottom} alt="" />
             <div className="text-container">
               <p>Phones</p>
               <button>View &gt;</button>
@@ -84,12 +88,14 @@ const Sample: React.FC = () => {
         </div>
         <div className="sample3">
           <div className="womenShoe">
+            <img src={rightTop} alt="" />
             <div className="text-container">
               <p>Women's Shoes</p>
               <button>View &gt;</button>
             </div>
           </div>
           <div className="accessories">
+            <img src={rightBottom} alt="" />
             <div className="text-container">
               <p>Accessories</p>
               <button>View &gt;</button>