setIsVideoOpen(false)}
16 | />
17 | );
18 | };
19 |
20 | export default VideoModal;
21 |
--------------------------------------------------------------------------------
/src/pages/register.js:
--------------------------------------------------------------------------------
1 | import SEO from "@components/seo";
2 | import Footer from "@layout/footer";
3 | import Header from "@layout/header";
4 | import Wrapper from "@layout/wrapper";
5 | import RegisterArea from "@components/login-register/register-area";
6 |
7 | export default function Register() {
8 | return (
9 |
10 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/svg/minus.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Minus = () => {
4 | return (
5 |
12 |
20 | );
21 | };
22 |
23 | export default Minus;
24 |
--------------------------------------------------------------------------------
/public/assets/scss/components/_tab.scss:
--------------------------------------------------------------------------------
1 | @use '../utils' as *;
2 |
3 | /*----------------------------------------*/
4 | /* NAV TAB CSS START
5 | /*----------------------------------------*/
6 |
7 | .tp-tab{
8 | & .nav-tabs{
9 | padding: 0;
10 | margin: 0;
11 | border: 0;
12 |
13 | }
14 | & .nav-item{
15 | padding: 0;
16 | margin: 0;
17 | border: 0;
18 | }
19 | & .nav-link{
20 | padding: 0;
21 | margin: 0;
22 | border: 0;
23 | }
24 | }
--------------------------------------------------------------------------------
/src/components/checkout/order-single-cart-item.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const OrderSingleCartItem = ({ title, quantity, price }) => {
4 | return (
5 |
6 |
7 | {title} × {quantity}
8 |
9 |
10 | ${price}
11 |
12 |
13 | );
14 | };
15 |
16 | export default OrderSingleCartItem;
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # next.js
12 | /.next/
13 | /out/
14 |
15 | # production
16 | /build
17 |
18 | # misc
19 | .DS_Store
20 | *.pem
21 |
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 |
28 | # local env files
29 |
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/src/components/nav-link.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import React from 'react';
3 | import { useRouter } from 'next/router';
4 |
5 | const NavLink = ({ href, children }) => {
6 | const router = useRouter();
7 | const [activeLink, setActiveLink] = React.useState(router.pathname);
8 | console.log(activeLink);
9 | useEffect(() => {
10 | setActiveLink(router.pathname);
11 | }, [router.pathname]);
12 | return (
13 |
12 |
18 | )
19 | }
20 |
21 |
--------------------------------------------------------------------------------
/src/components/load-more-btn/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import LoadMore from '@svg/load-more';
3 |
4 | const LoadMoreBtn = ({handleLoadMore}) => {
5 | return (
6 |
7 |
13 |
16 |
17 | );
18 | };
19 |
20 | export default LoadMoreBtn;
--------------------------------------------------------------------------------
/src/pages/about.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import SEO from "@components/seo";
3 | import ShopCta from "@components/cta";
4 | import AboutArea from "@components/about";
5 | import Footer from "@layout/footer";
6 | import Header from "@layout/header";
7 | import Wrapper from "@layout/wrapper";
8 |
9 | const About = () => {
10 | return (
11 |
12 |
18 | );
19 | };
20 |
21 | export default About;
22 |
--------------------------------------------------------------------------------
/src/components/contact/contact-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import BoxItems from "./box-items";
3 | import FormArea from "./form-area";
4 | import LocationArea from "./location-area";
5 | import TopBar from "./top-bar";
6 |
7 | const ContactArea = () => {
8 | return (
9 |
10 |
18 | );
19 | };
20 |
21 | export default ContactArea;
22 |
--------------------------------------------------------------------------------
/src/components/products/old-new-price.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const OldNewPrice = ({originalPrice,discount}) => {
4 | return (
5 |
6 |
7 | ${originalPrice.toFixed(2)}
8 |
9 |
10 | {" "}
11 | $
12 | {(
13 | Number(originalPrice) -
14 | (Number(originalPrice) * Number(discount)) / 100
15 | ).toFixed(2)}
16 |
17 |
18 | );
19 | };
20 |
21 | export default OldNewPrice;
22 |
--------------------------------------------------------------------------------
/src/redux/features/productSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const initialState = {
4 | product: null,
5 | isShow:false,
6 | };
7 |
8 | export const productSlice = createSlice({
9 | name: "product",
10 | initialState,
11 | reducers: {
12 | setProduct: (state, { payload }) => {
13 | state.product = payload;
14 | state.isShow = true;
15 | },
16 | handleModalShow: (state, { payload }) => {
17 | state.isShow = false;
18 | },
19 | },
20 | });
21 |
22 | export const {setProduct,handleModalShow} = productSlice.actions;
23 | export default productSlice.reducer;
24 |
--------------------------------------------------------------------------------
/src/components/seo.js:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 |
3 | const SEO = ({ pageTitle, font }) => (
4 | <>
5 |
6 | {pageTitle && `${pageTitle} - E-commerce Next js Template`}
7 |
13 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/redux/features/orderApi.js:
--------------------------------------------------------------------------------
1 | import { apiSlice } from "../api/apiSlice";
2 |
3 | export const authApi = apiSlice.injectEndpoints({
4 | overrideExisting:true,
5 | endpoints: (builder) => ({
6 | // getUserOrders
7 | getUserOrders: builder.query({
8 | query: () => `/api/user-order/order-by-user`,
9 | keepUnusedDataFor: 600,
10 | }),
11 | // getUserOrders
12 | getUserOrderById: builder.query({
13 | query: (id) => `/api/user-order/single-order/${id}`,
14 | keepUnusedDataFor: 600,
15 | }),
16 | }),
17 | });
18 |
19 | export const {
20 | useGetUserOrdersQuery,
21 | useGetUserOrderByIdQuery,
22 | } = authApi;
23 |
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "baseUrl": ".",
4 | "paths": {
5 | "@assets/*": ["public/assets/*"],
6 | "@components/*": ["src/components/*"],
7 | "@data/*": ["src/data/*"],
8 | "@hooks/*": ["src/hooks/*"],
9 | "@layout/*": ["src/layout/*"],
10 | "@lib/*": ["src/lib/*"],
11 | "@styles/*": ["src/styles/*"],
12 | "@svg/*": ["src/svg/*"],
13 | "@ui/*": ["src/ui/*"],
14 | "@utils/*": ["src/utils/*"],
15 | "@elements/*": ["src/elements/*"],
16 | "@lib*": ["src/lib/*"],
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/components/product-details/prd-details-description.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // internal
3 |
4 | const PrdDetailsDescription = ({product}) => {
5 | return (
6 |
7 |
8 |
9 |
10 |
{product?.title}
11 |
12 | {product?.description}
13 |
14 |
15 |
16 |
17 |
12 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/utils/remove-backdrop.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { useRouter } from 'next/router';
3 |
4 | function RemoveModalBackdrop() {
5 | const router = useRouter();
6 |
7 | useEffect(() => {
8 | const removeBackdrop = () => {
9 | const modalBackdrop = document.querySelector('.modal-backdrop fade show');
10 | if (modalBackdrop) {
11 | modalBackdrop.remove();
12 | }
13 | };
14 |
15 | router.events.on('routeChangeStart', removeBackdrop);
16 | return () => {
17 | router.events.off('routeChangeStart', removeBackdrop);
18 | };
19 | }, [router]);
20 |
21 | return null;
22 | }
23 |
24 | export default RemoveModalBackdrop;
25 |
--------------------------------------------------------------------------------
/src/components/loader/shop-category-loader.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Loader from "./loader";
3 |
4 | // single loader
5 | function SingleLoader({loading}) {
6 | return (
7 |
8 |
10 | );
11 | }
12 |
13 | const ShopCategoryLoader = ({ loading }) => {
14 | return (
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | };
24 |
25 | export default ShopCategoryLoader;
26 |
--------------------------------------------------------------------------------
/src/svg/line.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Line = () => {
4 | return (
5 |
12 |
27 | );
28 | };
29 |
30 | export default Line;
31 |
--------------------------------------------------------------------------------
/src/components/MicButton.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { CiMicrophoneOn } from "react-icons/ci";
3 |
23 |
24 |
25 | const MicButton = () => {
26 | return (
27 |
28 |
30 | );
31 | };
32 |
33 | export default MicButton;
34 |
--------------------------------------------------------------------------------
/src/svg/plus.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Plus = () => {
4 | return (
5 |
12 |
27 | );
28 | };
29 |
30 | export default Plus;
31 |
--------------------------------------------------------------------------------
/src/components/common/sidebar/cart-sidebar/empty-cart.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import React from "react";
3 | import Link from "next/link";
4 | // internal
5 | import empty_img from "@assets/img/product/cartmini/empty-cart.png";
6 |
7 | const EmptyCart = ({ search_prd = false }) => {
8 | return (
9 |
10 |
11 |
{search_prd ? `Sorry,😥 we can not find this product` : `Your Cart is empty`}
12 | {!search_prd && (
13 |
14 | Go to Shop
15 |
16 | )}
17 |
12 |
27 | );
28 | };
29 |
30 | export default RightArrow;
--------------------------------------------------------------------------------
/src/components/cart/cart-total.js:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React from "react";
3 | // internal
4 | import useCartInfo from "@hooks/use-cart-info";
5 |
6 | const CartTotal = () => {
7 | const { total } = useCartInfo();
8 | return (
9 |
10 |
Cart totals
11 |
12 |
13 | Subtotal ${total.toFixed(2)}
14 |
15 |
16 | Total ${total.toFixed(2)}
17 |
18 |
19 |
20 | Proceed to checkout
21 |
22 |
12 |
27 | );
28 | };
29 |
30 | export default RightArrowTwo;
--------------------------------------------------------------------------------
/src/components/common/scroll-to-top/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import BackToTop from "@lib/back-to-top";
3 |
4 | function BackToTopCom({ className }) {
5 | useEffect(() => {
6 | BackToTop(".back-to-top-wrapper");
7 | },[]);
8 | return (
9 |
10 |
11 |
12 |
14 |
15 |
12 |
27 | );
28 | };
29 |
30 | export default RightArrowThree;
31 |
--------------------------------------------------------------------------------
/src/svg/times.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Times = () => {
4 | return (
5 |
12 |
13 |
28 |
29 | );
30 | };
31 |
32 | export default Times;
--------------------------------------------------------------------------------
/src/components/faq/faq-thumb.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Image from "next/image";
3 | // internal
4 | import thumb from "@assets/img/faq/faq-img-2.jpg";
5 |
6 | const FaqThumb = () => {
7 | return (
8 |
24 | );
25 | };
26 |
27 | export default FaqThumb;
28 |
--------------------------------------------------------------------------------
/src/components/loader/offer-loader.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Loader from "./loader";
3 |
4 | // offer single loader
5 | function OfferSingleLoader({ loading }) {
6 | return (
7 |
11 |
13 | );
14 | }
15 |
16 | const OfferLoader = ({ loading }) => {
17 | return (
18 |
19 |
24 | );
25 | };
26 |
27 | export default OfferLoader;
28 |
--------------------------------------------------------------------------------
/src/components/loader/category-loader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Loader from './loader';
3 |
4 |
5 | // single category loader
6 | function SingleSingleLoader ({loading}){
7 | return (
8 |
12 |
14 | )
15 | }
16 |
17 | const CategoryLoader = ({loading}) => {
18 | return (
19 |
20 |
25 | );
26 | };
27 |
28 | export default CategoryLoader;
--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
1 | import { ToastContainer } from "react-toastify";
2 | import { Elements } from "@stripe/react-stripe-js";
3 | import { loadStripe } from "@stripe/stripe-js";
4 | import { Provider } from "react-redux";
5 | import { store } from "src/redux/store";
6 | if (typeof window !== "undefined") {
7 | require("bootstrap/dist/js/bootstrap");
8 | }
9 | import "../styles/index.scss";
10 |
11 | // stripePromise
12 | const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_KEY);
13 |
14 | function MyApp({ Component, pageProps }) {
15 | return (
16 |
17 |
18 |
20 |
22 | );
23 | }
24 |
25 | export default MyApp;
26 |
--------------------------------------------------------------------------------
/src/layout/menus.js:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import React from 'react';
3 | import menu_data from './menu-data';
4 |
5 | const Menus = () => {
6 | return (
7 |
8 | {menu_data.map((menu, i) => (
9 |
10 |
14 | {menu.submenus.map((sub, i) => (
15 |
16 |
20 | ))}
21 | }
22 |
23 | ))}
24 |
25 |
26 | );
27 | };
28 |
29 | export default Menus;
--------------------------------------------------------------------------------
/src/components/contact/form-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // internal
3 | import ContactForm from "@components/forms/contact-form";
4 |
5 | const FormArea = () => {
6 | return (
7 |
10 |
11 |
12 |
13 |
14 |
Send a message
15 | {/* form start */}
16 |
17 | {/* form end */}
18 |
19 |
20 |
21 |
22 |
24 | );
25 | };
26 |
27 | export default FormArea;
28 |
--------------------------------------------------------------------------------
/src/svg/next-arrow.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const NextArrow = () => {
4 | return (
5 |
12 |
29 | );
30 | };
31 |
32 | export default NextArrow;
--------------------------------------------------------------------------------
/src/svg/prev-arrow.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const PrevArrow = () => {
4 | return (
5 |
12 |
29 | );
30 | };
31 |
32 | export default PrevArrow;
--------------------------------------------------------------------------------
/src/pages/terms.js:
--------------------------------------------------------------------------------
1 | import SEO from "@components/seo";
2 | import Header from "@layout/header";
3 | import Wrapper from "@layout/wrapper";
4 | import SectionTop from "@components/terms-policy/section-top-bar";
5 | import Footer from "@layout/footer";
6 | import TermsArea from "@components/terms-policy/terms-area";
7 |
8 | export default function Terms() {
9 | return (
10 |
11 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/svg/user-2.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const UserTwo = () => {
4 | return (
5 |
12 |
27 | );
28 | };
29 |
30 | export default UserTwo;
31 |
--------------------------------------------------------------------------------
/src/svg/load-more.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const LoadMore = () => {
4 | return (
5 |
12 |
27 | );
28 | };
29 |
30 | export default LoadMore;
31 |
--------------------------------------------------------------------------------
/src/svg/search.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Search = () => {
4 | return (
5 |
12 |
27 | );
28 | };
29 |
30 | export default Search;
31 |
--------------------------------------------------------------------------------
/src/redux/features/coupon/couponSlice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 |
3 | const initialState = {
4 | coupon_info: undefined,
5 | };
6 |
7 | export const couponSlice = createSlice({
8 | name: "coupon",
9 | initialState,
10 | reducers: {
11 | set_coupon: (state, { payload }) => {
12 | state.coupon_info = payload;
13 | localStorage.setItem(
14 | "couponInfo",
15 | JSON.stringify(payload)
16 | );
17 | },
18 | get_coupons: (state, { payload }) => {
19 | const data = localStorage.getItem('couponInfo');
20 | if (data) {
21 | state.coupon_info = JSON.parse(data);
22 | } else {
23 | state.coupon_info = undefined;
24 | }
25 |
26 | },
27 | },
28 | });
29 |
30 | export const { set_coupon,get_coupons } = couponSlice.actions;
31 | export default couponSlice.reducer;
32 |
--------------------------------------------------------------------------------
/src/svg/lists.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Lists = () => {
4 | return (
5 |
12 |
34 | );
35 | };
36 |
37 | export default Lists;
38 |
--------------------------------------------------------------------------------
/src/components/product-details/product-details-price.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const ProductDetailsPrice = ({ price, discount }) => {
4 | return (
5 |
6 | {discount > 0 ? (
7 | <>
8 | ${price}
9 |
10 | $
11 | {(Number(price) - (Number(price) * Number(discount)) / 100).toFixed(
12 | 2
13 | )}
14 |
15 | -{discount}%
16 |
17 | ) : (
18 | <>
19 | ${price}
20 |
21 | )}
22 |
23 | );
24 | };
25 |
26 | export default ProductDetailsPrice;
27 |
--------------------------------------------------------------------------------
/public/assets/scss/utils/_breakpoints.scss:
--------------------------------------------------------------------------------
1 | // Responsive Variables
2 | $xxxxl: 'only screen and (min-width: 1700px) and (max-width: 1899px)';
3 | $xxxl: 'only screen and (min-width: 1600px) and (max-width: 1699px)';
4 | $xxl: 'only screen and (min-width: 1400px) and (max-width: 1599px)';
5 | $xl: 'only screen and (min-width: 1200px) and (max-width: 1399px)';
6 | $lg : 'only screen and (min-width: 992px) and (max-width: 1199px)';
7 | $md:'only screen and (min-width: 768px) and (max-width: 991px)';
8 | $sm: 'only screen and (min-width: 576px) and (max-width: 767px)';
9 | $xsx: 'only screen and (min-width: 270px) and (max-width: 575px)';
10 | $xs3: 'only screen and (min-width: 398px) and (max-width: 575px)';
11 | $xs2: '(max-width: 366px)';
12 | $xs:'(max-width: 575px)';
13 |
14 |
15 |
16 | // responsive variable for wordpress admin bar
17 | $wp-sm: '@media (max-width: 782px)';
18 | $wp-xs: '@media (max-width: 600px)';
--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import {configureStore} from '@reduxjs/toolkit';
2 | import { apiSlice } from './api/apiSlice';
3 | import authSlice from './features/auth/authSlice';
4 | import cartSlice from './features/cartSlice';
5 | import couponSlice from './features/coupon/couponSlice';
6 | import orderSlice from './features/order/orderSlice';
7 | import wishlistSlice from './features/wishlist-slice';
8 | import productSlice from './features/productSlice';
9 |
10 |
11 | export const store = configureStore({
12 | reducer:{
13 | [apiSlice.reducerPath]:apiSlice.reducer,
14 | auth:authSlice,
15 | cart:cartSlice,
16 | wishlist:wishlistSlice,
17 | coupon:couponSlice,
18 | order:orderSlice,
19 | product:productSlice,
20 | },
21 | middleware:(getDefaultMiddleware) =>
22 | getDefaultMiddleware().concat(apiSlice.middleware),
23 | devTools: process.env.NODE_ENV !== "production",
24 | })
25 |
26 |
--------------------------------------------------------------------------------
/src/components/terms-policy/section-top-bar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // internal
3 | import bg from "@assets/img/contact/contact-bg.png";
4 |
5 | const SectionTop = ({ title, subtitle }) => {
6 | return (
7 |
8 |
12 |
13 |
14 |
15 |
16 |
{title}
17 |
{subtitle}
18 |
19 |
20 |
21 |
23 | );
24 | };
25 |
26 | export default SectionTop;
27 |
--------------------------------------------------------------------------------
/src/components/cart/coupon-update.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const CouponUpdateCart = () => {
4 | return (
5 |
6 |
7 |
19 | Apply coupon
20 |
21 |
22 |
23 |
28 | Update cart
29 |
30 |
31 |
11 |
12 |
13 |
14 | {days} Day
15 |
16 |
17 | {hours} Hrs
18 |
19 |
20 | {minutes} Min
21 |
22 |
23 | {seconds} Sec
24 |
25 |
26 |
27 |
12 |
29 | );
30 | };
31 |
32 | export default EmailTwo;
33 |
--------------------------------------------------------------------------------
/src/components/about/about-top-bar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import bg from '@assets/img/about/about-breadcrumb.jpg';
3 |
4 | const AboutTopBar = () => {
5 | return (
6 |
10 |
11 |
12 |
13 |
14 | About us
15 |
16 | Welcome to our
18 |
19 |
20 |
21 |
23 | );
24 | };
25 |
26 | export default AboutTopBar;
27 |
--------------------------------------------------------------------------------
/src/hooks/use-auth-check.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useDispatch } from "react-redux";
3 | import { userLoggedIn } from "src/redux/features/auth/authSlice";
4 |
5 | export default function useAuthCheck() {
6 | const dispatch = useDispatch();
7 | const [authChecked, setAuthChecked] = useState(false);
8 |
9 | useEffect(() => {
10 | const localAuth = localStorage?.getItem("auth");
11 |
12 | if (localAuth) {
13 | const auth = JSON.parse(localAuth);
14 | if (auth?.accessToken && auth?.user) {
15 | dispatch(
16 | userLoggedIn({
17 | accessToken: auth.accessToken,
18 | user: auth.user,
19 | })
20 | );
21 | }
22 | }
23 | setAuthChecked(true);
24 | }, [dispatch, setAuthChecked]);
25 |
26 | return authChecked;
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/about/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // internal
3 | import TextArea from "./text-area";
4 | import Services from "./services";
5 | import AboutGallery from "./about-gallery";
6 | import AboutFaqs from "./about-faqs";
7 | import Teams from "@components/teams";
8 | import Brands from "@components/brands";
9 | import Awards from "@components/awards";
10 | import BreadcrumbTwo from "@components/common/breadcrumb/breadcrumb-2";
11 |
12 | const About = () => {
13 | return (
14 |
15 |
19 | Welcome to our
31 | );
32 | };
33 |
34 | export default About;
35 |
--------------------------------------------------------------------------------
/src/svg/email.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Email = () => {
4 | return (
5 |
12 |
29 | );
30 | };
31 |
32 | export default Email;
33 |
--------------------------------------------------------------------------------
/src/svg/location.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Location = () => {
4 | return (
5 |
12 |
23 | );
24 | };
25 |
26 | export default Location;
27 |
--------------------------------------------------------------------------------
/src/svg/general.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const General = () => {
4 | return (
5 |
12 |
28 | );
29 | };
30 |
31 | export default General;
32 |
--------------------------------------------------------------------------------
/src/pages/policy.js:
--------------------------------------------------------------------------------
1 | import Footer from "@layout/footer";
2 | import Header from "@layout/header";
3 | import Wrapper from "@layout/wrapper";
4 | import SEO from "@components/seo";
5 | import SectionTop from "@components/terms-policy/section-top-bar";
6 | import PolicyArea from "@components/terms-policy/policy-area";
7 |
8 | export default function Policy() {
9 | return (
10 |
11 |
17 | Your privacy is important to us. It is Harry’s policy to respect
18 | your privacy regarding
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/common/breadcrumb/breadcrumb-2.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import bg from "@assets/img/about/about-breadcrumb.jpg";
3 |
4 | const BreadcrumbTwo = ({ subtitle, title }) => {
5 | return (
6 |
10 |
11 |
12 |
13 |
14 | {subtitle && (
15 | {subtitle}
16 | )}
17 | {title &&
{title} }
18 |
19 |
20 |
21 |
23 | );
24 | };
25 |
26 | export default BreadcrumbTwo;
27 |
--------------------------------------------------------------------------------
/src/utils/toast.js:
--------------------------------------------------------------------------------
1 | import { ToastContainer, toast } from 'react-toastify';
2 | import 'react-toastify/dist/ReactToastify.css';
3 |
4 | const notifySuccess = (message) =>
5 | toast.success(message, {
6 | position: 'top-center',
7 | autoClose: 3000,
8 | hideProgressBar: false,
9 | closeOnClick: true,
10 | pauseOnHover: true,
11 | draggable: true,
12 | progress: undefined,
13 | });
14 |
15 | const notifyError = (message) =>
16 | toast.error(message, {
17 | position: 'top-center',
18 | autoClose: 3000,
19 | hideProgressBar: false,
20 | closeOnClick: true,
21 | pauseOnHover: true,
22 | draggable: true,
23 | progress: undefined,
24 | });
25 |
26 |
14 |
21 | );
22 | };
23 |
24 | export default Shapes;
--------------------------------------------------------------------------------
/src/components/contact/top-bar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // internal
3 | import bg from '@assets/img/contact/contact-bg.png';
4 |
5 | const TopBar = ({title,subtitle}) => {
6 | return (
7 |
8 |
12 |
13 |
14 |
15 |
16 |
17 | {title}
18 |
19 |
20 | {subtitle}
21 |
22 |
23 |
24 |
25 |
27 | );
28 | };
29 |
30 | export default TopBar;
31 |
--------------------------------------------------------------------------------
/src/svg/user.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const User = () => {
4 | return (
5 |
12 |
27 | );
28 | };
29 |
30 | export default User;
31 |
--------------------------------------------------------------------------------
/src/components/user-dashboard/my-orders.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import MyOrderItems from "./my-order-items";
3 |
4 | const MyOrders = ({ orderData }) => {
5 | const order_items = orderData?.orders;
6 | return (
7 |
8 | {!order_items ||
9 | (order_items?.length === 0 && (
10 |
14 |
15 |
19 |
You Have no order Yet!
20 |
21 |
22 | ))}
23 | {order_items && order_items?.length > 0 && (
24 |
25 | )}
26 |
6 |
7 |
8 |
9 |
10 |
{title}
11 |
12 |
13 | Home
14 |
15 |
16 |
18 |
{subtitle}
19 |
20 |
21 |
22 |
23 |
25 | );
26 | };
27 |
28 | export default CartBreadcrumb;
29 |
--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // internal
3 | import SEO from "@components/seo";
4 | import Header from "@layout/header";
5 | import Wrapper from "@layout/wrapper";
6 | import HeroBanner from "@components/hero-banner";
7 | import ShopCategoryArea from "@components/shop-category/shop-category";
8 | import ShopProducts from "@components/products";
9 | import OfferPopularProduct from "@components/offer-product";
10 | import ShopBanner from "@components/shop-banner";
11 | import ShopFeature from "@components/shop-feature";
12 | import ShopCta from "@components/cta";
13 | import Footer from "@layout/footer";
14 |
15 |
16 | const HomeShop = () => {
17 | return (
18 |
19 |
30 | );
31 | };
32 |
33 | export default HomeShop;
34 |
--------------------------------------------------------------------------------
/src/components/faq/faq-breadcrumb.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const FaqBreadcrumb = () => {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 |
Frequently Asked Questions
11 |
12 |
13 | Home
14 |
15 |
16 |
18 |
Frequently Asked Questions
19 |
20 |
21 |
22 |
23 |
25 | );
26 | };
27 |
28 | export default FaqBreadcrumb;
29 |
--------------------------------------------------------------------------------
/src/layout/menu-data.js:
--------------------------------------------------------------------------------
1 | const menu_data = [
2 | {
3 | id: 1,
4 | title: 'Home',
5 | link: '/',
6 | },
7 | {
8 | id: 2,
9 | title: 'About Us',
10 | link: '/about'
11 | },
12 | {
13 | id: 3,
14 | title: 'Shop',
15 | link: '/shop'
16 | },
17 | {
18 | id: 4,
19 | hasDropdown: true,
20 | title: 'Pages',
21 | link: '/about',
22 | submenus: [
23 | { title: 'FAQs', link: '/faq' },
24 | { title: 'Privacy & Policy', link: '/policy' },
25 | { title: 'Terms & Conditions', link: '/terms' },
26 | { title: 'Login', link: '/login' },
27 | { title: 'Register', link: '/register' },
28 | { title: 'Forgot Password', link: '/forgot' },
29 | { title: 'My Cart', link: '/cart' },
30 | { title: 'My Wishlist', link: '/wishlist' },
31 | { title: 'Checkout', link: '/checkout' },
32 | { title: 'Error 404', link: '/404' },
33 | ]
34 | },
35 | {
36 | id: 5,
37 | title: 'Contact us',
38 | link: '/contact'
39 | },
40 | ]
41 |
42 | export default menu_data;
43 |
--------------------------------------------------------------------------------
/src/components/common/breadcrumb/shop-breadcrumb.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Home } from "@svg/index";
3 |
4 | const ShopBreadcrumb = () => {
5 | return (
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
15 |
16 | Home
17 |
18 |
19 |
21 |
Products
22 |
23 |
24 |
25 |
26 |
28 | );
29 | };
30 |
31 | export default ShopBreadcrumb;
32 |
--------------------------------------------------------------------------------
/src/components/loader/product-loader.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Loader from "./loader";
3 |
4 | // product single loader
5 | function ProductSingleLoader({ loading }) {
6 | return (
7 |
11 |
13 | );
14 | }
15 |
16 | const ProductLoader = ({ loading }) => {
17 | return (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
3 |
--------------------------------------------------------------------------------
/src/components/forms/search-form.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import Search from "@svg/search";
3 | import { useRouter } from "next/router";
4 |
5 | const SearchForm = () => {
6 | const router = useRouter();
7 | const [searchText, setSearchText] = useState("");
8 | const handleSubmit = (e) => {
9 | e.preventDefault();
10 | if (searchText) {
11 | router.push(`/search?query=${searchText}`, null, { scroll: false });
12 | setSearchText("");
13 | } else {
14 | router.push(`/ `, null, { scroll: false });
15 | setSearchText("");
16 | }
17 | };
18 | return (
19 |
32 | );
33 | };
34 |
35 | export default SearchForm;
36 |
--------------------------------------------------------------------------------
/src/components/user-dashboard/profile-shapes.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Image from "next/image";
3 | // internal
4 | import laptop from "@assets/img/login/laptop.png";
5 | import man from "@assets/img/login/man.png";
6 | import shape_1 from "@assets/img/login/shape-1.png";
7 | import shape_2 from "@assets/img/login/shape-2.png";
8 | import shape_3 from "@assets/img/login/shape-3.png";
9 | import shape_4 from "@assets/img/login/shape-4.png";
10 |
11 | const ProfileShapes = () => {
12 | return (
13 |
14 |
21 | );
22 | };
23 |
24 | export default ProfileShapes;
25 |
--------------------------------------------------------------------------------
/src/components/common/shop-filtering/price-item.js:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 |
3 | const PriceItem = ({ id, min, max }) => {
4 | const router = useRouter();
5 |
6 | // handlePrice
7 | const handlePrice = (min, max) => {
8 | if (min) {
9 | router.push(`/shop?priceMin=${min}&max=${max}`);
10 | } else {
11 | router.push(`/shop?priceMax=${max}`);
12 | }
13 | };
14 | return (
15 |
16 |
29 | ${min}.00 - ${max}.00
30 |
31 | ) : (
32 |
33 | ${max}.00+
34 |
35 | )}
36 |
37 | );
38 | };
39 |
40 | export default PriceItem;
41 |
--------------------------------------------------------------------------------
/src/components/faq/single-faq.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SingleFaq = ({ item }) => {
4 | const { title, desc, id, show, parent } = item || {};
5 | return (
6 |
7 |
8 |
16 | {title}
17 |
19 |
20 |
30 |
12 |
20 | );
21 | };
22 |
23 | export default Heart;
24 |
--------------------------------------------------------------------------------
/src/svg/compare.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Compare = () => {
4 | return (
5 |
12 |
41 | );
42 | };
43 |
44 | export default Compare;
45 |
--------------------------------------------------------------------------------
/public/assets/scss/layout/_logo.scss:
--------------------------------------------------------------------------------
1 | @use '../utils' as *;
2 |
3 | /*----------------------------------------*/
4 | /* 02. LOGO CSS START
5 | /*----------------------------------------*/
6 |
7 |
8 | /* logo css */
9 | .logo{
10 | & .logo-dark{
11 | display: none;
12 | }
13 | }
14 |
15 | .logo{
16 | &-2{
17 | padding-top: 8px;
18 | padding-bottom: 8px;
19 | }
20 | &-border{
21 | position: relative;
22 | padding: 8px 0;
23 | &::after{
24 | position: absolute;
25 | content: '';
26 | right: 23%;
27 | top: 0;
28 | width: 1px;
29 | height: 102%;
30 | background-color: var(--tp-border-1);
31 |
32 | @include rtl{
33 | right: auto;
34 | left: 23%;
35 | }
36 | @media #{$md, $sm, $xs}{
37 | display: none;
38 | }
39 |
40 | @media #{$lg}{
41 | right: 0;
42 |
43 | @include rtl{
44 | right: auto;
45 | left: 0;
46 | }
47 | }
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/product-details/product-details-tab-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PrdDetailsDescription from "./prd-details-description";
3 | import PrdDetailsTabNav from "./prd-details-tab-nav";
4 |
5 | const ProductDetailsTabArea = ({product}) => {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | {/* nav tab */}
13 |
14 | {/* nav tab */}
15 |
16 |
26 |
27 |
28 |
30 | );
31 | };
32 |
33 | export default ProductDetailsTabArea;
34 |
--------------------------------------------------------------------------------
/src/svg/lock.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Lock = () => {
4 | return (
5 |
12 |
34 | );
35 | };
36 |
37 | export default Lock;
38 |
--------------------------------------------------------------------------------
/src/components/product-details/product-quantity.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useDispatch, useSelector } from "react-redux";
3 | import { Minus, Plus } from "@svg/index";
4 | import { decrement, increment } from "src/redux/features/cartSlice";
5 |
6 | const ProductQuantity = () => {
7 | const { orderQuantity } = useSelector((state) => state.cart);
8 | const dispatch = useDispatch();
9 | // handleIncrease
10 | const handleIncrease = () => {
11 | dispatch(increment());
12 | };
13 | // handleDecrease
14 | const handleDecrease = () => {
15 | dispatch(decrement());
16 | };
17 | return (
18 |
19 |
20 |
21 |
23 |
29 |
30 |
32 |
33 |
12 |
17 | );
18 | };
19 |
20 | export default Home;
21 |
--------------------------------------------------------------------------------
/src/components/order/pay-card-element.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { CardElement } from "@stripe/react-stripe-js";
3 |
4 | const PaymentCardElement = ({ stripe, cardError, cart_products,isCheckoutSubmit }) => {
5 | return (
6 |
7 |
23 |
24 |
29 | Place order
30 |
31 |
32 | {cardError && (
33 |
34 | {cardError}
35 |
36 | )}
37 |
24 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/products/quantity.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | // internal
3 | import { Minus, Plus } from "@svg/index";
4 | import { useDispatch, useSelector } from "react-redux";
5 | import { decrement, increment } from "src/redux/features/cartSlice";
6 |
7 |
8 | const Quantity = () => {
9 | const dispatch = useDispatch();
10 | const {orderQuantity} = useSelector(state => state.cart);
11 | const [quantity,setQuantity] = useState(1);
12 | // handleIncrease
13 | const handleIncrease = () => {
14 | dispatch(increment())
15 | }
16 | // handleDecrease
17 | const handleDecrease = () => {
18 | dispatch(decrement())
19 | }
20 | return (
21 |
22 |
23 |
24 |
26 |
32 |
33 |
35 |
36 |
12 |
36 | );
37 | };
38 |
39 | export default Mobile;
40 |
--------------------------------------------------------------------------------
/src/ui/Pagination.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { NextArrow, PrevArrow } from "@svg/index";
3 | import ReactPaginate from "react-paginate";
4 |
5 | const Pagination = ({ handlePageClick, pageCount, focusPage }) => {
6 | return (
7 |
10 | Next{" "}
15 |
17 | }
18 | onPageChange={handlePageClick}
19 | pageRangeDisplayed={3}
20 | marginPagesDisplayed={2}
21 | forcePage={focusPage}
22 | pageCount={pageCount}
23 | pageClassName="page-items"
24 | pageLinkClassName="page-links"
25 | previousClassName="page-items"
26 | previousLinkClassName="page-links"
27 | nextClassName="page-items"
28 | nextLinkClassName="page-links"
29 | breakLabel="..."
30 | breakClassName="page-items"
31 | breakLinkClassName="page-links"
32 | containerClassName="paginasstions"
33 | activeClassName="current"
34 | renderOnZeroPageCount={null}
35 | />
36 | );
37 | };
38 |
39 | export default Pagination;
40 |
--------------------------------------------------------------------------------
/src/components/social/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const social_links = [
4 | {
5 | link: "http://facebook.com",
6 | target: "_blank",
7 | icon: "fa-brands fa-facebook-f",
8 | name: "Facebook",
9 | },
10 | {
11 | link: "http://twitter.com",
12 | target: "_blank",
13 | icon: "fa-brands fa-twitter",
14 | name: "Twitter",
15 | },
16 | {
17 | link: "https://www.linkedin.com/",
18 | target: "_blank",
19 | icon: "fa-brands fa-linkedin-in",
20 | name: "Linkedin",
21 | },
22 | {
23 | link: "https://www.youtube.com/",
24 | target: "_blank",
25 | icon: "fa-brands fa-youtube",
26 | name: "Youtube",
27 | },
28 | ];
29 |
30 | const SocialLinks = () => {
31 | return (
32 | <>
33 | {social_links.map((l, i) => (
34 |
35 |
37 | ))}
38 |
39 | );
40 | };
41 |
42 | export default SocialLinks;
43 |
44 |
45 | export function SocialShare() {
46 | return (
47 | <>
48 | {social_links.slice(0, 3).map((l, i) => (
49 |
50 |
52 | ))}
53 |
54 | );
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/shop-banner/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Link from 'next/link';
3 | // internal
4 | import banner from '@assets/img/banner/banner-1.jpg';
5 | import { RightArrow } from '@svg/index';
6 |
7 | const ShopBanner = () => {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
Apple iPhone 12 Pro
16 |
17 |
19 |
Last call for up to 32% off!
20 |
21 |
22 |
27 |
28 |
29 |
30 |
31 |
33 | );
34 | };
35 |
36 | export default ShopBanner;
--------------------------------------------------------------------------------
/src/pages/email-verify/[token].js:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import React, { useEffect } from "react";
3 | // internal
4 | import ErrorMessage from "@components/error-message/error";
5 | import Loader from "@components/loader/loader";
6 | import { notifySuccess } from "@utils/toast";
7 | import { useConfirmEmailQuery } from "src/redux/features/auth/authApi";
8 |
9 | const EmailVerification = ({ params }) => {
10 | const router = useRouter();
11 | const {data,isLoading,isError,error,isSuccess} = useConfirmEmailQuery(params.token)
12 |
13 | useEffect(() => {
14 | if (isSuccess) {
15 | router.push("/");
16 | notifySuccess("Register Success!");
17 | }
18 | }, [router,isSuccess]);
19 |
20 | return (
21 |
25 | {isLoading ? (
26 |
{data?.message}
29 | ) : (
30 |
12 |
36 | );
37 | };
38 |
39 | export default MobileTwo;
40 |
--------------------------------------------------------------------------------
/src/svg/refund.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Refund = () => {
4 | return (
5 |
12 |
34 | );
35 | };
36 |
37 | export default Refund;
--------------------------------------------------------------------------------
/src/svg/support.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Support = () => {
4 | return (
5 |
12 |
27 | );
28 | };
29 |
30 | export default Support;
31 |
--------------------------------------------------------------------------------
/src/svg/shape-line.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const ShapeLine = () => {
4 | return (
5 |
6 |
11 | );
12 | };
13 |
14 | export default ShapeLine;
15 |
--------------------------------------------------------------------------------
/src/components/product-details/breadcrumb.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import Home from "@svg/home";
4 | // internal
5 |
6 | const ProductDetailsBreadcrumb = ({title}) => {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
20 |
21 |
23 |
24 | Products
25 |
26 |
27 |
29 |
{title}
30 |
31 |
32 |
33 |
34 |
36 | );
37 | };
38 |
39 | export default ProductDetailsBreadcrumb;
40 |
--------------------------------------------------------------------------------
/src/svg/dashboard.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Dashboard = () => {
4 | return (
5 |
12 |
44 | );
45 | };
46 |
47 | export default Dashboard;
48 |
--------------------------------------------------------------------------------
/src/hooks/use-cart-info.js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useSelector } from "react-redux";
3 |
4 | const useCartInfo = () => {
5 | const [quantity, setQuantity] = useState(0);
6 | const [total, setTotal] = useState(0);
7 | const { cart_products } = useSelector((state) => state.cart);
8 |
9 | useEffect(() => {
10 | const cart = cart_products.reduce((cartTotal, cartItem) => {
11 | const { originalPrice, orderQuantity, discount } = cartItem;
12 | if (typeof orderQuantity !== "undefined") {
13 | if (discount && discount > 0) {
14 | // Calculate the item total with discount
15 | const itemTotal = (originalPrice - (originalPrice * discount) / 100) * orderQuantity;
16 | cartTotal.total += itemTotal;
17 | } else {
18 | // Calculate the item total without discount
19 | const itemTotal = originalPrice * orderQuantity;
20 | cartTotal.total += itemTotal;
21 | }
22 | cartTotal.quantity += orderQuantity;
23 | }
24 | return cartTotal;
25 | },
26 | {
27 | total: 0,
28 | quantity: 0,
29 | })
30 | setQuantity(cart.quantity);
31 | setTotal(cart.total);
32 | }, [cart_products])
33 | return {
34 | quantity,
35 | total,
36 | setTotal,
37 | }
38 | }
39 |
40 | export default useCartInfo;
--------------------------------------------------------------------------------
/src/components/common/shop-filtering/single-category.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const SingleCategory = ({ category, index }) => {
4 | return (
5 |
6 |
7 |
8 |
15 | {category}
16 |
17 |
18 |
19 |
20 |
42 |
12 |
36 | );
37 | };
38 |
39 | export default Website;
40 |
--------------------------------------------------------------------------------
/src/components/common/shop-filtering/shop-price.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import PriceItem from "./price-item";
3 |
4 | // price items
5 | const price_items = [
6 | { id: "one", min: 10, max: 49 },
7 | { id: "two", min: 50, max: 99 },
8 | { id: "three", min: 100, max: 199 },
9 | { id: "four", max: 200 },
10 | ];
11 |
12 | const ShopPrice = () => {
13 |
14 | return (
15 |
46 | );
47 | };
48 |
49 | export default ShopPrice;
50 |
--------------------------------------------------------------------------------
/src/components/product-details/product-review-item.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Image from "next/image";
3 |
4 | const ProductReviewItem = ({user,name,date,desc}) => {
5 | return (
6 |
7 |
8 |
9 |
11 |
12 |
{name}
13 |
14 |
15 |
16 |
17 |
18 |
20 |
21 |
23 |
24 |
26 |
27 |
29 |
30 |
32 |
33 |
34 | {date}
35 |
36 |
37 |
38 | {desc}
39 |
40 |
12 |
34 | );
35 | };
36 |
37 | export default Cart;
38 |
--------------------------------------------------------------------------------
/src/svg/shipping-car.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const ShippingCar = () => {
4 | return (
5 |
12 |
41 | );
42 | };
43 |
44 | export default ShippingCar;
45 |
--------------------------------------------------------------------------------
/src/components/login-register/login-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | // internal
4 | import Shapes from "./shapes";
5 | import LoginForm from "@components/forms/login-form";
6 |
7 | const LoginArea = () => {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Hello Again
18 |
Enter your credentials to acces your account.
19 |
20 |
21 | {/* form start */}
22 |
23 | {/* form end */}
24 |
25 |
26 | Don’t have an account?{" "}
27 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
37 | );
38 | };
39 |
40 | export default LoginArea;
41 |
--------------------------------------------------------------------------------
/src/components/login-register/register-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | // internal
4 | import Shapes from "./shapes";
5 | import RegisterForm from "@components/forms/register-form";
6 |
7 | const RegisterArea = () => {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Register Now!
18 |
You can signup with you social account below
19 |
20 |
21 | {/* register form start */}
22 |
23 | {/* register form end */}
24 |
25 |
26 | Already have an account?
28 |
29 |
30 |
31 |
32 |
33 |
34 |
36 | );
37 | };
38 |
39 | export default RegisterArea;
40 |
--------------------------------------------------------------------------------
/src/components/forgot/forgot-area.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | // internal
4 | import Shapes from "@components/login-register/shapes";
5 | import ForgotForm from "@components/forms/forgot-form";
6 |
7 | const ForgotArea = () => {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Forgot Password?
18 |
Enter your email address to request password reset.
19 |
20 |
21 | {/* forgot form start */}
22 |
23 | {/* forgot form end */}
24 |
25 |
26 | Remember your password?
28 |
29 |
30 |
31 |
32 |
33 |
34 |
36 | );
37 | };
38 |
39 | export default ForgotArea;
40 |
--------------------------------------------------------------------------------
/src/svg/eye.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Eye = () => {
4 | return (
5 |
12 |
22 | );
23 | };
24 |
25 | export default Eye;
--------------------------------------------------------------------------------
/src/redux/features/order/orderApi.js:
--------------------------------------------------------------------------------
1 | import { apiSlice } from "../../api/apiSlice";
2 | import { set_client_secret } from "./orderSlice";
3 |
4 |
5 | export const authApi = apiSlice.injectEndpoints({
6 | overrideExisting:true,
7 | endpoints: (builder) => ({
8 | createPaymentIntent: builder.mutation({
9 | query: (data) => ({
10 | url: "api/order/create-payment-intent",
11 | method: "POST",
12 | body: data,
13 | }),
14 |
15 | async onQueryStarted(arg, { queryFulfilled, dispatch }) {
16 | try {
17 | const result = await queryFulfilled;
18 | dispatch(set_client_secret(result.clientSecret));
19 | } catch (err) {
20 | // do nothing
21 | }
22 | },
23 |
24 | }),
25 | addOrder: builder.mutation({
26 | query: (data) => ({
27 | url: "api/order/addOrder",
28 | method: "POST",
29 | body: data,
30 | }),
31 |
32 | async onQueryStarted(arg, { queryFulfilled, dispatch }) {
33 | try {
34 | const result = await queryFulfilled;
35 | if(result){
36 | localStorage.removeItem("couponInfo");
37 | localStorage.removeItem("cart_products");
38 | localStorage.removeItem("shipping_info");
39 | }
40 | } catch (err) {
41 | // do nothing
42 | }
43 | },
44 |
45 | }),
46 | }),
47 | });
48 |
49 | export const {
50 | useCreatePaymentIntentMutation,
51 | useAddOrderMutation,
52 | } = authApi;
53 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "hamart",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@coreui/icons": "^3.0.1",
13 | "@coreui/icons-react": "^2.2.1",
14 | "@hookform/resolvers": "^2.9.10",
15 | "@next/env": "^13.1.6",
16 | "@popperjs/core": "^2.11.6",
17 | "@reduxjs/toolkit": "^1.9.1",
18 | "@stripe/react-stripe-js": "^1.16.4",
19 | "@stripe/stripe-js": "^1.46.0",
20 | "bootstrap": "^5.2.3",
21 | "dayjs": "^1.11.7",
22 | "eslint": "8.28.0",
23 | "eslint-config-next": "13.0.4",
24 | "next": "13.0.4",
25 | "razorpay": "^2.9.2",
26 | "react": "18.2.0",
27 | "react-bootstrap": "^2.8.0",
28 | "react-copy-to-clipboard": "^5.1.0",
29 | "react-dom": "18.2.0",
30 | "react-drag-drop-files": "^2.3.10",
31 | "react-hook-form": "^7.42.1",
32 | "react-icons": "^5.0.1",
33 | "react-modal-video": "^2.0.0",
34 | "react-paginate": "^8.1.4",
35 | "react-redux": "^8.0.5",
36 | "react-slick": "^0.29.0",
37 | "react-spinners": "^0.13.8",
38 | "react-timer-hook": "^3.0.5",
39 | "react-to-print": "^2.14.11",
40 | "react-toastify": "^9.1.1",
41 | "react-tooltip": "^5.3.1",
42 | "react-use": "^17.4.0",
43 | "sass": "^1.56.1",
44 | "shortid": "^2.2.16",
45 | "slick-carousel": "^1.8.1",
46 | "swiper": "^8.4.5",
47 | "yup": "^0.32.11"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/components/cta/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // internal
3 | import bg from "@assets/img/cta/13/cta-bg-1.jpg";
4 |
5 | const ShopCta = () => {
6 | // handleSubmit
7 | const handleSubmit = (e) => {
8 | e.preventDefault();
9 | };
10 | return (
11 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | Subscribe for
24 |
25 |
26 |
38 |
39 |
40 |
42 | );
43 | };
44 |
45 | export default ShopCta;
46 |
--------------------------------------------------------------------------------
/src/redux/features/wishlist-slice.js:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 | import { getLocalStorage, setLocalStorage } from "@utils/localstorage";
3 | import { notifyError, notifySuccess } from "@utils/toast";
4 |
5 | const initialState = {
6 | wishlist: [],
7 | };
8 |
9 | export const wishlistSlice = createSlice({
10 | name: "wishlist",
11 | initialState,
12 | reducers: {
13 | add_to_wishlist: (state, { payload }) => {
14 | const isExist = state.wishlist.some(item => item._id === payload._id);
15 | if(!isExist){
16 | state.wishlist.push(payload);
17 | notifySuccess(`${payload.title} added to wishlist`)
18 | }
19 | else {
20 | state.wishlist = state.wishlist.filter(item => item._id !== payload._id);
21 | notifyError(`${payload.title} removed from wishlist`);
22 | }
23 | setLocalStorage("wishlist_items", state.wishlist);
24 | },
25 | remove_wishlist_product: (state, { payload }) => {
26 | state.wishlist = state.wishlist.filter((item) => item._id !== payload._id);
27 | notifyError(`${payload.title} removed from wishlist`);
28 | setLocalStorage("wishlist_items", state.wishlist);
29 | },
30 | get_wishlist_products: (state, { payload }) => {
31 | state.wishlist = getLocalStorage("wishlist_items");
32 | },
33 | },
34 | });
35 |
36 | export const {
37 | add_to_wishlist,
38 | remove_wishlist_product,
39 | get_wishlist_products,
40 | } = wishlistSlice.actions;
41 | export default wishlistSlice.reducer;
42 |
--------------------------------------------------------------------------------
/src/layout/wrapper.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { useDispatch, useSelector } from "react-redux";
3 | // internal
4 | import Loader from "@components/loader/loader";
5 | import useAuthCheck from "@hooks/use-auth-check";
6 | import BackToTopCom from "@components/common/scroll-to-top";
7 | import { get_wishlist_products } from "src/redux/features/wishlist-slice";
8 | import { get_cart_products } from "src/redux/features/cartSlice";
9 | import { get_coupons } from "src/redux/features/coupon/couponSlice";
10 | import { get_shipping } from "src/redux/features/order/orderSlice";
11 | import ProductModal from "@components/common/modals/product-modal";
12 |
13 | const Wrapper = ({ children }) => {
14 | const { product, isShow } = useSelector((state) => state.product);
15 | const dispatch = useDispatch();
16 | const authChecked = useAuthCheck();
17 | useEffect(() => {
18 | dispatch(get_wishlist_products());
19 | dispatch(get_cart_products());
20 | dispatch(get_coupons());
21 | dispatch(get_shipping());
22 | }, [dispatch]);
23 | return (
24 | <>
25 | {!authChecked ? (
26 |
31 |
33 | ) : (
34 | children
35 | )}
36 |
37 |
11 |
13 | );
14 | }
15 |
16 | function SingleTop({loading}) {
17 | return (
18 |
22 |
24 | );
25 | }
26 |
27 | const ShopLoader = ({ loading }) => {
28 | return (
29 |
30 |
31 |
32 |
33 |
34 | {/* */}
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
16 |
21 |
22 |
24 |
29 |
34 |
35 |
36 |
37 | Reset Filter
38 |
39 |
40 |
41 |
12 |
47 | );
48 | };
49 |
50 | export default DotsTwo;
51 |
--------------------------------------------------------------------------------
/src/components/shop-category/single-category.js:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 | import { useRouter } from "next/router";
4 | import React from "react";
5 |
6 | const SingleCategory = ({ item }) => {
7 | const router = useRouter();
8 | return (
9 |
51 | );
52 | };
53 |
54 | export default SingleCategory;
55 |
--------------------------------------------------------------------------------
/src/svg/dots.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Dots = () => {
4 | return (
5 |
12 |
41 | );
42 | };
43 |
44 | export default Dots;
45 |
--------------------------------------------------------------------------------
/src/svg/payment.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | const Payment = () => {
4 | return (
5 |
12 |
51 | );
52 | };
53 |
54 | export default Payment;
55 |
--------------------------------------------------------------------------------
/src/pages/user-dashboard.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import { useRouter } from "next/router";
3 | // internal
4 | import SEO from "@components/seo";
5 | import Header from "@layout/header";
6 | import Wrapper from "@layout/wrapper";
7 | import Footer from "@layout/footer";
8 | import { useGetUserOrdersQuery } from "src/redux/features/orderApi";
9 | import DashboardArea from "@components/user-dashboard/dashboard-area";
10 | import Loader from "@components/loader/loader";
11 | import ErrorMessage from "@components/error-message/error";
12 |
13 | const UserOrdersPage = () => {
14 | const {
15 | data: orderData,
16 | isError,
17 | isLoading,
18 | error,
19 | refetch,
20 | } = useGetUserOrdersQuery();
21 | const router = useRouter();
22 |
23 | useEffect(() => {
24 | const isAuthenticate = localStorage.getItem("auth");
25 | if (!isAuthenticate) {
26 | router.push("/login");
27 | }
28 | if(orderData){
29 | refetch();
30 | }
31 | }, [router,orderData,refetch]);
32 | let content = null;
33 |
34 | if (isLoading) {
35 | content =
39 |
;
41 | }
42 | if(isError){
43 | content =
51 |
56 | );
57 | };
58 |
59 | export default UserOrdersPage;
60 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | ```
12 |
13 | Open [http://server.udayps.com:3000](http://server.udayps.com:3000) with your browser to see the result.
14 |
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 |
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://server.udayps.com:3000/api/hello](http://server.udayps.com:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 |
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 |
21 | ## Learn More
22 |
23 | To learn more about Next.js, take a look at the following resources:
24 |
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 |
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 |
30 | ## Deploy on Vercel
31 |
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 |
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 |
--------------------------------------------------------------------------------
/src/pages/404.js:
--------------------------------------------------------------------------------
1 | // external
2 | import Link from "next/link";
3 | // internal
4 | import Wrapper from "@layout/wrapper";
5 | import SEO from "@components/seo";
6 | import Header from "@layout/header";
7 | import {ErrorSvg, RightArrowThree} from "@svg/index";
8 | import ShopCta from "@components/cta";
9 | import Footer from "@layout/footer";
10 |
11 | export default function ErrorPage() {
12 | return (
13 |
14 |
18 |
19 |
20 |
21 |
22 |
404
23 |
24 |
26 |
27 |
Oops! Page not found
28 |
29 | Whoops, this is embarassing. Looks like the page you were
30 | looking for was not found.
31 |
32 |
33 | Back to Home
34 |
35 |
36 |
37 |
38 |
39 |
40 |
42 | {/* error area end */}
43 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/svg/heart-2.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const HeartTwo = () => {
4 | return (
5 |
12 |
25 | );
26 | };
27 |
28 | export default HeartTwo;
--------------------------------------------------------------------------------
/src/components/common/sidebar/cart-sidebar/single-cart-item.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Image from "next/image";
3 | import { useDispatch } from "react-redux";
4 | import Link from "next/link";
5 | import { remove_product } from "src/redux/features/cartSlice";
6 |
7 | const SingleCartItem = ({ item }) => {
8 | const { _id, image, originalPrice, title, orderQuantity, discount } =
9 | item || {};
10 | const dispatch = useDispatch();
11 |
12 | // handle remove cart
13 | const handleRemoveProduct = (prd) => {
14 | dispatch(remove_product(prd));
15 | };
16 | return (
17 |
18 |
19 |
23 |
24 |
27 |
28 | {!discount && (
29 | ${originalPrice}
30 | )}
31 | {discount > 0 && (
32 |
33 | ${(originalPrice - (originalPrice * discount) / 100) * orderQuantity}
34 |
35 | )}
36 | x{orderQuantity}
37 |
38 |
39 |
handleRemoveProduct(item)}
42 | >
43 |
45 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Brand:
13 | Apple
14 |
15 |
16 | Style:
17 | GPS
18 |
19 |
20 | Screen Size:
21 | 41 Millimeters
22 |
23 |
24 | Color:
25 | Green Aluminum Case with Clover Sport Band
26 |
27 |
28 | Compatible Devices:
29 | Smartphone
30 |
31 |
32 | Special Feature:
33 |
34 | Activity Tracker, Heart Rate Monitor, Sleep Monitor, Blood
35 | Oxygen
36 |
37 |
38 |
39 | Capacity:
40 | 32GB
41 |
42 |
43 |
44 |
45 |
46 |
47 |
9 |
10 |
11 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
24 |
25 |
26 |
27 |
29 |
30 |
31 | {social_links.map((l, i) => (
32 |
33 |
34 |
36 |
37 | ))}
38 |
39 |
41 |
42 |
43 |
44 |
45 |
46 |
48 | {title}
49 |
50 |
Clock Delivery package
6 |
7 |
8 |
9 |
14 |
15 | It started with a
17 |
18 |
19 |
20 |
25 |
26 | Ut at maximus magna. Vestibulum interdum sapien in facilisis
27 | imperdiet. Pellentesque habitant morbi tristique senectus et
28 | netus et malesuada fames ac turpis egestas. Proin ac placerat
29 | risus. Nullam eget tortor felis. Nulla facilisi.Vestibulum
30 | mattis diam non luctus elementum. Cras sollicitudin, nisi in
31 | semper viverra, felis diam consequat mi, quis tincidunt ligula
32 |
33 |
34 |
35 | Nam nibh diam, varius quis lectus eget, laoreet cursus metus.
36 | morbi augue lectus, dapibus eget justo nec, consectetur auctor
37 | nis luctus neque.!
38 |
39 |
40 |
41 |
42 |
44 | );
45 | };
46 |
47 | export default TextArea;
48 |
--------------------------------------------------------------------------------
/public/assets/scss/layout/_ticket.scss:
--------------------------------------------------------------------------------
1 | @use '../utils' as *;
2 |
3 | /*----------------------------------------*/
4 | /* 26. TICKET CSS START
5 | /*----------------------------------------*/
6 |
7 | .ticket{
8 | &__shape{
9 | &-1{
10 | position: absolute;
11 | top: 0;
12 | left: 0;
13 | z-index: -1;
14 | }
15 | &-2{
16 | position: absolute;
17 | top: 0;
18 | right: 40%;
19 | z-index: -1;
20 | }
21 | &-3{
22 | position: absolute;
23 | bottom: 0;
24 | right: 0;
25 | z-index: -1;
26 | }
27 | }
28 | &__wrapper{
29 | padding: 20px 50px;
30 | position: relative;
31 | z-index: 1;
32 | border-radius: 14px;
33 | overflow: hidden;
34 |
35 | @media #{$xs}{
36 | padding-top: 40px;
37 | padding-bottom: 40px;
38 | }
39 | }
40 | &__title{
41 | font-family: var(--tp-ff-space);
42 | font-weight: 300;
43 | font-size: 20px;
44 | letter-spacing: -0.04em;
45 | color: #FFFFFF;
46 | margin-bottom: 0;
47 | }
48 | &__content{
49 | & p{
50 | font-family: var(--tp-ff-space);
51 | font-weight: 700;
52 | font-size: 20px;
53 | letter-spacing: -0.04em;
54 | color: #FFFFFF;
55 | margin-bottom: 0;
56 | line-height: 1;
57 | }
58 | }
59 | &__inner{
60 | @media #{$sm, $xs}{
61 | margin-bottom: 30px;
62 | }
63 | }
64 | &__icon{
65 | @include rtl{
66 | margin-right: 0;
67 | margin-left: 15px;
68 | }
69 | @media #{$xs}{
70 | margin-bottom: 20px;
71 | }
72 | }
73 | }
--------------------------------------------------------------------------------
/public/assets/img/svg/order-delivery.svg:
--------------------------------------------------------------------------------
1 |