15 |
19 |
16 |
18 | Best offers
17 |
20 | {medicines.map((medicine: Medicines) => (
21 |
31 |
22 |
29 | ))}
30 | {name}
35 |32 | {text} 33 |
34 |
8 |
9 |
13 | About Project
14 |
15 |
16 |
17 |
42 | );
43 | };
44 |
45 | export default Footer;
46 |
--------------------------------------------------------------------------------
/src/slices/basketSlice.ts:
--------------------------------------------------------------------------------
1 | import { createSlice } from "@reduxjs/toolkit";
2 | import { Salad } from "../types/itemTypes";
3 |
4 | const initialState = {
5 | items: [],
6 | };
7 |
8 | export const basketSlice = createSlice({
9 | name: "basket",
10 | initialState,
11 | reducers: {
12 | hydrate: (state, action) => {
13 | return action.payload;
14 | },
15 | addToBasket: (state: any, action) => {
16 | state.items = [...state.items, action.payload];
17 | },
18 | removeFromBasket: (state, action) => {
19 | let pos = state.items.findIndex(
20 | (item: Salad) => item.id === action.payload.id
21 | );
22 | let newBasket = [...state.items];
23 |
24 | if (pos > -1) {
25 | newBasket.splice(pos, 1);
26 | }
27 |
28 | state.items = newBasket;
29 | },
30 | removeGroupedFromBasket: (state, action) => {
31 | let newBasket = state.items.filter(
32 | (item: Salad) => item.id !== action.payload.id
33 | );
34 |
35 | state.items = newBasket;
36 | },
37 | clearBasket: (state) => {
38 | state.items = [];
39 | },
40 | },
41 | });
42 |
43 | export const {
44 | addToBasket,
45 | removeFromBasket,
46 | removeGroupedFromBasket,
47 | hydrate,
48 | clearBasket,
49 | } = basketSlice.actions;
50 |
51 | export const selectItems = (state: any) => state.basket.items;
52 | export const selectTotal = (state: any) =>
53 | state.basket.items.reduce(
54 | (total: number, item: Salad) => total + item.price,
55 | 0
56 | );
57 |
58 | export default basketSlice.reducer;
59 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Voyagger",
3 | "short_name": "Voyagger",
4 | "icons": [
5 | {
6 | "src": "/logo-192x192.png",
7 | "sizes": "192x192",
8 | "type": "image/png",
9 | "purpose": "any maskable"
10 | },
11 |
12 | {
13 | "src": "/logo-512x512.png",
14 | "sizes": "512x512",
15 | "type": "image/png",
16 | "purpose": "any"
17 | }
18 | ],
19 | "shortcuts": [
20 | {
21 | "name": "My orders",
22 | "short_name": "My orders",
23 | "description": "View all your medicine and food orders",
24 | "url": "/orders",
25 | "icons": [
26 | {
27 | "src": "/logo-192x192.png",
28 | "sizes": "192x192",
29 | "type": "image/png"
30 | },
31 |
32 | {
33 | "src": "/logo-512x512.png",
34 | "sizes": "512x512",
35 | "type": "image/png"
36 | }
37 | ]
38 | },
39 | {
40 | "name": "Parcel tracking",
41 | "short_name": "Parcel tracking",
42 | "description": "Track all your orders",
43 | "url": "/parcel/orders",
44 | "icons": [
45 | {
46 | "src": "/logo-192x192.png",
47 | "sizes": "192x192",
48 | "type": "image/png"
49 | },
50 |
51 | {
52 | "src": "/logo-512x512.png",
53 | "sizes": "512x512",
54 | "type": "image/png"
55 | }
56 | ]
57 | }
58 | ],
59 |
60 | "theme_color": "#FFFFFF",
61 | "background_color": "#FFFFFF",
62 | "start_url": "/",
63 | "display": "standalone",
64 | "orientation": "portrait"
65 | }
66 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 18 | Made with 🤎 by 19 | 20 | 25 | Avneesh Agarwal 26 | 27 | 28 |
29 | 30 | 31 | 32 |Welcome to Voyagger 👋
2 | 10 | 11 | > Connecting people, Changing lives 12 | 13 | ### 🏠 [Homepage](https://www.voyagger.tech//) 14 | 15 | ### ✨ [Demo](https://www.voyagger.tech//) 16 | 17 | ## Install 18 | 19 | ```sh 20 | yarn install 21 | ``` 22 | 23 | ## Usage 24 | 25 | ```sh 26 | yarn dev 27 | ``` 28 | 29 | ## 🤝 Contributing 30 | 31 | Contributions, issues and feature requests are welcome!
5 | 
8 | Feel free to check [issues page](https://github.com/avneesh0612/Voyagger/issues). 32 | 33 | See [Contribution.MD](https://github.com/avneesh0612/voyagger/blob/main/CONTRIBUTING.md) for details about how to contribute 34 | ## Author 35 | 36 | 👤 **Avneesh Agarwal** 37 | 38 | - Website: https://www.voyagger.tech// 39 | - Twitter: [@avneesh0612](https://twitter.com/avneesh0612) 40 | - Github: [@avneesh0612](https://github.com/avneesh0612) 41 | - LinkedIn: [@avneesh-agarwal-78312b20a](https://linkedin.com/in/avneesh-agarwal-78312b20a) 42 | 43 | ## Show your support 44 | 45 | Give a ⭐️ if this project helped you! 46 | 47 | ## 📝 License 48 | 49 | Copyright © 2021 [Avneesh Agarwal](https://github.com/avneesh0612).
50 | This project is [MIT](https://github.com/avneesh0612/Voyagger/blob/main/LICENSE) licensed. 51 | -------------------------------------------------------------------------------- /src/styles/globals.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap"); 3 | 4 | @tailwind base; 5 | @tailwind components; 6 | @tailwind utilities; 7 | 8 | @layer utilities { 9 | .animation-delay-2000 { 10 | animation-delay: 2.5s; 11 | } 12 | .animation-delay-4000 { 13 | animation-delay: 5s; 14 | } 15 | } 16 | 17 | @layer components { 18 | .sidebar_icon { 19 | @apply h-[40px] md:min-h-[48px] w-[40px] md:min-w-[48px] text-black bg-gray-100 rounded-full p-2; 20 | } 21 | body { 22 | @apply overflow-x-hidden bg-bgmain text-text; 23 | } 24 | } 25 | 26 | .bg-gradient-radial { 27 | background: rgb(248, 93, 73); 28 | background: radial-gradient( 29 | circle, 30 | rgba(248, 93, 73, 1) 50%, 31 | rgba(252, 176, 69, 1) 100% 32 | ); 33 | } 34 | 35 | .green-gradient { 36 | background: linear-gradient(45deg, #4ae491, #49aa75); 37 | } 38 | 39 | .hidescrollbar::-webkit-scrollbar { 40 | display: none; 41 | } 42 | 43 | .react-multi-carousel-item { 44 | margin: 0px 10px; 45 | } 46 | 47 | .hidescrollbar { 48 | -ms-overflow-style: none; 49 | scrollbar-width: none; 50 | } 51 | 52 | ::-webkit-scrollbar { 53 | width: 10px; 54 | } 55 | 56 | ::-webkit-scrollbar-track { 57 | border-radius: 10px; 58 | background-color: #ffffff !important; 59 | } 60 | 61 | ::-webkit-scrollbar-thumb { 62 | border-radius: 10px; 63 | background-color: #fa8072; 64 | } 65 | 66 | html { 67 | scroll-behavior: smooth; 68 | } 69 | -------------------------------------------------------------------------------- /src/components/eats/Main.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Category, Salad } from "../../types/itemTypes"; 3 | import FoodItem from "../FoodItem"; 4 | import OfferProduct from "../OfferProduct"; 5 | 6 | interface MainProps { 7 | salads: [Salad]; 8 | categories: [Category]; 9 | categoryRoute: string; 10 | } 11 | 12 | const Main: React.FC
16 | {categories.map((category: Category) => (
17 |
26 |
18 |
24 | ))}
25 |
27 |
31 |
28 |
30 | Best offers
29 |
32 | {salads.map((salad: Salad) => (
33 |
46 |
34 |
44 | ))}
45 |
20 |
23 |
48 |
49 | );
50 | };
51 |
52 | export default Success;
53 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import { UserProvider } from "@auth0/nextjs-auth0";
2 | import { NextSeo } from "next-seo";
3 | import { AppProps } from "next/app";
4 | import Head from "next/head";
5 | import NextNProgress from "nextjs-progressbar";
6 | import { Toaster } from "react-hot-toast";
7 | import { Provider } from "react-redux";
8 | import { store } from "../app/store";
9 | import StorageService from "../services/StorageService";
10 | import { hydrate } from "../slices/basketSlice";
11 | import "../styles/globals.css";
12 |
13 | const MyApp = ({ Component, pageProps }: AppProps) => {
14 | store.subscribe(() => {
15 | StorageService.set("basket", JSON.stringify(store.getState().basket));
16 | });
17 |
18 | let basket = StorageService.get("basket");
19 | basket = basket ? JSON.parse(basket) : { items: [] };
20 | store.dispatch(hydrate(basket));
21 |
22 | return (
23 |
24 | router.push("/orders")}
42 | className="mt-8 shadow-xl text-prussianblue bg-white bg-opacity-25 w-60 text-center mx-auto rounded-lg p-2 font-semibold backdrop-filter backdrop-blur-xl focus:outline-none"
43 | >
44 | Go to my orders
45 |
46 |
47 |
25 |
30 | 27 | Thank you, your order has been confirmed! 28 |
29 |31 | Thank you for shopping with us. We'll send a confirmation once 32 | item has shipped, if you would like to check the status of your 33 | order(s) please press the link below. 34 |
35 |
57 |
67 | {name}
58 |
59 |
66 |
43 |
50 | );
51 | };
52 |
53 | export default Home;
54 |
55 | export const getServerSideProps = withPageAuthRequired({
56 | async getServerSideProps(context: any) {
57 | const session = getSession(context.req, context.res);
58 |
59 | const userref = doc(db, `users/${session?.user.email}`);
60 |
61 | const userRes = await getDoc(userref);
62 |
63 | const dbuser = {
64 | id: userRes.id,
65 | ...userRes.data(),
66 | };
67 |
68 | const medicinesRef = collection(db, "products/medicine/medicine");
69 |
70 | const allmedicines = await getDocs(medicinesRef);
71 |
72 | const medicines = allmedicines.docs.map(medicine => ({
73 | id: medicine.id,
74 | ...medicine.data(),
75 | }));
76 |
77 | return { props: { dbuser, medicines } };
78 | },
79 | });
80 |
--------------------------------------------------------------------------------
/src/components/Banner.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import React from "react";
3 | import { Carousel } from "react-responsive-carousel";
4 | import "react-responsive-carousel/lib/styles/carousel.min.css";
5 |
6 | const Banner: React.FC = () => {
7 | return (
8 |
45 |
48 |
9 |
10 |
18 |
59 |
60 | );
61 | };
62 |
63 | export default Banner;
64 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "private": true,
3 | "scripts": {
4 | "dev": "next dev",
5 | "build": "next build",
6 | "start": "next start",
7 | "format": "prettier --write \"src/{components,content,docs,pages,styles,utils}/**/*.{js,jsx,ts,tsx,css,scss,json,yaml,md}\"",
8 | "format:check": "prettier --check \"src/{components,content,docs,pages,styles,utils}/**/*.{js,jsx,ts,tsx,css,scss,json,yaml,md}\"",
9 | "lint": "eslint --fix 'src/{components,pages,utils}/**/*.{js,jsx,ts,tsx}'",
10 | "lint:check": "eslint 'src/{components,pages,utils}/**/*.{js,jsx,ts,tsx}'",
11 | "prepare": "husky install",
12 | "pre-commit": "yarn run format && yarn run lint && git add -A .",
13 | "ci": "rm -rf node_modules && yarn install --frozen-lockfile"
14 | },
15 | "dependencies": {
16 | "@auth0/nextjs-auth0": "^1.5.0",
17 | "@heroicons/react": "^1.0.4",
18 | "@reduxjs/toolkit": "^1.6.2",
19 | "@stripe/stripe-js": "^1.19.1",
20 | "axios": "^0.22.0",
21 | "firebase": "^9.1.2",
22 | "firebase-admin": "^9.12.0",
23 | "framer-motion": "^4.1.17",
24 | "lodash": "^4.17.21",
25 | "micro": "^9.3.4",
26 | "mobile-detect": "^1.4.5",
27 | "moment": "^2.29.1",
28 | "next": "latest",
29 | "next-pwa": "^5.3.1",
30 | "next-seo": "^4.28.1",
31 | "nextjs-progressbar": "^0.0.11",
32 | "react": "^17.0.2",
33 | "react-currency-formatter": "^1.1.0",
34 | "react-dom": "^17.0.2",
35 | "react-hot-toast": "^2.1.1",
36 | "react-redux": "^7.2.5",
37 | "react-responsive-carousel": "^3.2.21",
38 | "stripe": "^8.179.0"
39 | },
40 | "devDependencies": {
41 | "@commitlint/cli": "^15.0.0",
42 | "@commitlint/config-conventional": "^15.0.0",
43 | "@types/lodash": "^4.14.175",
44 | "@types/micro": "^7.3.6",
45 | "@types/node": "^16.10.3",
46 | "@types/react": "^17.0.27",
47 | "@types/react-currency-formatter": "^1.1.4",
48 | "@types/stripe": "^8.0.417",
49 | "autoprefixer": "^10.3.7",
50 | "eslint": "<8.0.0",
51 | "eslint-config-google": "^0.14.0",
52 | "eslint-config-next": "^11.1.2",
53 | "eslint-config-prettier": "^8.3.0",
54 | "husky": "^7.0.4",
55 | "postcss": "^8.3.9",
56 | "prettier": "^2.5.0",
57 | "tailwindcss": "^2.2.16",
58 | "typescript": "^4.4.3"
59 | },
60 | "license": "MIT",
61 | "browser": {
62 | "child_process": false
63 | },
64 | "version": "0.1.0"
65 | }
--------------------------------------------------------------------------------
/src/pages/api/webhook.ts:
--------------------------------------------------------------------------------
1 | import * as admin from "firebase-admin";
2 | import { IncomingMessage } from "http";
3 | import { buffer } from "micro";
4 | import stripelib from "stripe";
5 |
6 | const serviceAccount = require("../../../permissions");
7 | const app = !admin.apps.length
8 | ? admin.initializeApp({
9 | credential: admin.credential.cert(serviceAccount),
10 | })
11 | : admin.app();
12 |
13 | // @ts-ignore: ENV vars would be present
14 | const stripe = new stripelib.Stripe(process.env.STRIPE_SECRET_KEY, {
15 | apiVersion: "2020-08-27",
16 | typescript: true,
17 | });
18 | const endpointSecret = process.env.STRIPE_SIGNING_SECRET;
19 | const fulfillOrder = async (session: any) => {
20 | const images = JSON.parse(session.metadata.images).map((image: any) =>
21 | JSON.stringify(image)
22 | );
23 |
24 | return app
25 | .firestore()
26 | .collection("users")
27 | .doc(session.metadata.email)
28 | .collection("orders")
29 | .doc(session.id)
30 | .set({
31 | amount: session.amount_total / 100,
32 | amount_shipping: session.total_details.amount_shipping / 100,
33 | images: images,
34 | timestamp: admin.firestore.FieldValue.serverTimestamp(),
35 | });
36 | };
37 |
38 | const handler = async (
39 | req: IncomingMessage,
40 | res: {
41 | status: (arg0: number) => {
42 | (): any;
43 | new (): any;
44 | send: { (arg0: string): any; new (): any };
45 | json: { (arg0: { ok: boolean }): any; new (): any };
46 | };
47 | json: (arg0: { ok: boolean }) => void;
48 | }
49 | ) => {
50 | if (req.method === "POST") {
51 | const requestBuffer = await buffer(req);
52 | const payload = requestBuffer.toString();
53 | const sig = req.headers["stripe-signature"];
54 |
55 | let event;
56 |
57 | try {
58 | // @ts-ignore
59 | event = stripe.webhooks.constructEvent(payload, sig, endpointSecret);
60 | } catch (err: any) {
61 | return res.status(400).send(`Webhook error: ${err.message}`);
62 | }
63 |
64 | if (event.type === "checkout.session.completed") {
65 | const session = event.data.object;
66 |
67 | return fulfillOrder(session)
68 | .then(() => res.status(200).json({ ok: true }))
69 | .catch(err => res.status(400).send(`Webhook Error: ${err.message}`));
70 | }
71 | res.json({ ok: true });
72 | }
73 | };
74 |
75 | export const config = {
76 | api: {
77 | bodyParser: false,
78 | externalResolver: true,
79 | },
80 | };
81 |
82 | export default handler;
83 |
--------------------------------------------------------------------------------
/src/components/CartItem.tsx:
--------------------------------------------------------------------------------
1 | import { MinusSmIcon, PlusIcon } from "@heroicons/react/solid";
2 | import Image from "next/image";
3 | import Currency from "react-currency-formatter";
4 | import toast from "react-hot-toast";
5 | import { useDispatch } from "react-redux";
6 | import { addToBasket, removeFromBasket } from "../slices/basketSlice";
7 |
8 | interface CartItemProps {
9 | image: string;
10 | name: string;
11 | price: number;
12 | quantity: number;
13 | id: number;
14 | }
15 |
16 | const CartItem: React.FC
19 |
26 |
27 |
34 |
35 |
42 |
43 |
50 |
51 |
58 |
52 |
80 | );
81 | };
82 |
83 | export default CartItem;
84 |
--------------------------------------------------------------------------------
/src/components/parcel/Order.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import toast from "react-hot-toast";
3 |
4 | interface OrderProps {
5 | pickupaddress: string;
6 | zip: string;
7 | recipientphone: string;
8 | recipientsaddress: string;
9 | usermail: string;
10 | username: string;
11 | weight: string;
12 | id: string;
13 | }
14 |
15 | const Order: React.FC
53 |
64 |
54 |
62 | {name}
63 |
65 |
68 |
76 |
79 |
69 | {" "}
70 | {quantity} ×
36 |
41 | Order ID
37 | 38 | #{id} 39 | 40 |
42 |
45 | Status
43 |Order Placed
44 |
46 |
49 | Zip Code
47 |{zip}
48 |
50 |
67 |
68 |
71 |
51 |
54 | Pickup Address:
52 |{pickupaddress}
53 |
55 |
58 | Recipient‘s Phone:
56 |{recipientphone}
57 |
59 |
62 | Recipient‘s address:
60 |{recipientsaddress}
61 |
63 |
66 | Weight:
64 |{weight}
65 |
80 |
91 | {name}
81 |
82 |
90 |
18 |
20 |
26 |
49 |
50 | {orders?.map((order: ParcelType) => (
51 |
56 |
57 | );
58 | };
59 |
60 | export default Orders;
61 |
62 | export const getServerSideProps = withPageAuthRequired({
63 | async getServerSideProps(context) {
64 | const user = getSession(context.req, context.res);
65 |
66 | const parcelOrdersQuery = query(
67 | collection(db, "parcels"),
68 | where("usermail", "==", "user?.user.email")
69 | );
70 |
71 | const ParcelOrders = await getDocs(parcelOrdersQuery);
72 |
73 | const orders = await Promise.all(
74 | ParcelOrders.docs.map(async order => ({
75 | id: order.id,
76 | pickupaddress: order.data().pickupaddress,
77 | recipientphone: order.data().recipientphone,
78 | recipientsaddress: order.data().recipientsaddress,
79 | usermail: order.data().usermail,
80 | username: order.data().username,
81 | weight: order.data().weight,
82 | zip: order.data().zip,
83 | }))
84 | );
85 |
86 | return {
87 | props: {
88 | orders,
89 | user,
90 | },
91 | };
92 | },
93 | });
94 |
--------------------------------------------------------------------------------
/src/pages/food/index.tsx:
--------------------------------------------------------------------------------
1 | import { getSession, withPageAuthRequired } from "@auth0/nextjs-auth0/";
2 | import { NextSeo } from "next-seo";
3 | import React, { useEffect } from "react";
4 | import { db } from "../../../firebase";
5 | import Cart from "../../components/Cart";
6 | import Main from "../../components/eats/Main";
7 | import Header from "../../components/Header";
8 | import { Category, Salad } from "../../types/itemTypes";
9 | import { user } from "../../types/userType";
10 | import {
11 | collection,
12 | query,
13 | getDoc,
14 | getDocs,
15 | updateDoc,
16 | doc,
17 | orderBy,
18 | } from "firebase/firestore";
19 |
20 | interface HomeProps {
21 | salads: [Salad];
22 | categories: [Category];
23 | user: user;
24 | dbuser: user;
25 | category: string;
26 | }
27 |
28 | const Home: React.FC27 | Your Parcels 28 |
29 | 30 |31 | {orders?.length > 0 ? ( 32 | <> 33 | {orders?.length} Order{orders.length > 1 && "s"} 34 | 35 | ) : ( 36 | <> 37 | You don't have any parcels yet. Go visit the{" "} 38 | {" "} 44 | to send some parcels. 45 | 46 | )} 47 |
48 |
52 |
54 | ))}
55 |
53 |
64 | );
65 | };
66 |
67 | export default Home;
68 |
69 | export const getServerSideProps = withPageAuthRequired({
70 | async getServerSideProps(context: any) {
71 | let category = context.query.category;
72 |
73 | if (!category) {
74 | category = "pizza";
75 | }
76 |
77 | const session = getSession(context.req, context.res);
78 |
79 | const userref = doc(db, `users/${session?.user.email}`);
80 |
81 | const userRes = await getDoc(userref);
82 |
83 | const dbuser = {
84 | id: userRes.id,
85 | ...userRes.data(),
86 | };
87 |
88 | const saladsRef = collection(db, `products/food/${category}`);
89 |
90 | const saladsQuery = query(saladsRef, orderBy("active", "desc"));
91 |
92 | const allsalads = await getDocs(saladsQuery);
93 |
94 | const salads = allsalads.docs.map(salad => ({
95 | id: salad.id,
96 | ...salad.data(),
97 | }));
98 |
99 | const categoriesRef = collection(db, "products/food/categories");
100 |
101 | const allcategories = await getDocs(categoriesRef);
102 |
103 | const categories = allcategories.docs.map(salad => ({
104 | id: salad.id,
105 | ...salad.data(),
106 | }));
107 |
108 | return {
109 | props: {
110 | salads,
111 | categories,
112 | category,
113 | dbuser,
114 | },
115 | };
116 | },
117 | });
118 |
--------------------------------------------------------------------------------
/src/components/Order.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import { groupBy } from "lodash";
3 | import moment from "moment";
4 | import Image from "next/image";
5 | import path from "path";
6 | import Currency from "react-currency-formatter";
7 |
8 | interface OrderProps {
9 | id: string;
10 | amount: number;
11 | amountShipping: number;
12 | images: [string];
13 | timestamp: number;
14 | }
15 |
16 | const Order: React.FC
55 |
62 |
41 |
67 |
68 |
42 |
45 |
46 | ORDER PLACED
43 |{moment.unix(timestamp).format("MM/DD/YYYY")}
44 |
47 |
57 |
58 | TOTAL
48 |
49 |
50 |
59 | {images.length} {""} 60 | {images.length === 1 ? "item" : "items"} 61 |
62 | 63 |64 | ORDER #{id} 65 |
66 |
69 |
91 |
70 | {groupedImages.map(group => (
71 |
90 |
72 |
88 | ))}
89 |
73 |
82 | {group[0] > 1 && (
83 |
74 |
81 |
84 | × {group[0]}
85 |
86 | )}
87 |
30 |
79 | );
80 | };
81 |
82 | export default parcelTrack;
83 |
84 | export async function getServerSideProps(context: any) {
85 | const id = context.query.id;
86 |
87 | const parcelRef = doc(db, `parcels/${id}`);
88 |
89 | const parcelRes = await getDoc(parcelRef);
90 |
91 | const parcel = {
92 | id: parcelRes.id,
93 | ...parcelRes.data(),
94 | };
95 |
96 | return {
97 | props: {
98 | parcel,
99 | },
100 | };
101 | }
102 |
--------------------------------------------------------------------------------
/src/pages/orders.tsx:
--------------------------------------------------------------------------------
1 | import { getSession, withPageAuthRequired } from "@auth0/nextjs-auth0/";
2 | import { motion } from "framer-motion";
3 | import moment from "moment";
4 | import { NextSeo } from "next-seo";
5 | import { useRouter } from "next/router";
6 | import { db } from "../../firebase";
7 | import Header from "../components/Header";
8 | import Order from "../components/Order";
9 | import { orderType } from "../types/orderTypes";
10 | import { user } from "../types/userType";
11 | import { getDocs, collection, query, orderBy } from "firebase/firestore";
12 |
13 | interface OrdersProps {
14 | orders: [orderType];
15 | user: user;
16 | }
17 |
18 | const Orders: React.FC
32 |
38 |
77 |
78 |
39 |
44 | Order parcel.ID
40 | 41 | #{parcel.id} 42 | 43 |
45 |
48 | Status
46 |Order Placed
47 |
49 |
52 | Zip Code
50 |{parcel.zip}
51 |
53 |
70 |
76 |
54 |
57 | Pickup Address:
55 |{parcel.pickupaddress}
56 |
58 |
61 | Recipient‘s Phone:
59 |{parcel.recipientphone}
60 |
62 |
65 | Recipient‘s address:
63 |{parcel.recipientsaddress}
64 |
66 |
69 | Weight:
67 |{parcel.weight}
68 |
23 |
26 |
32 |
59 |
60 |
73 |
74 | );
75 | };
76 |
77 | export default Orders;
78 |
79 | export const getServerSideProps = withPageAuthRequired({
80 | async getServerSideProps(context: any) {
81 | const user = getSession(context.req, context.res);
82 |
83 | const stripeOrdersRef = collection(db, `users/${user?.user.email}/orders`);
84 |
85 | const stripeOrdersQuery = query(
86 | stripeOrdersRef,
87 | orderBy("timestamp", "desc")
88 | );
89 |
90 | const stripeOrders = await getDocs(stripeOrdersQuery);
91 |
92 | const orders = await Promise.all(
93 | stripeOrders.docs.map(async order => ({
94 | id: order.id,
95 | amount: order.data().amount,
96 | amountShipping: order.data().amount_shipping,
97 | images: order.data().images,
98 | timestamp: moment(order.data().timestamp.toDate()).unix(),
99 | }))
100 | );
101 | return {
102 | props: {
103 | orders,
104 | user,
105 | },
106 | };
107 | },
108 | });
109 |
--------------------------------------------------------------------------------
/src/pages/books/index.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from "framer-motion";
2 | import Image from "next/image";
3 | import { useRouter } from "next/router";
4 | import Header from "../../components/Header";
5 | import book from "../../types/bookTypes";
6 | import requests from "../../utils/requests";
7 |
8 | interface Booksprops {
9 | books: {
10 | items: [book];
11 | };
12 | routertitle: string;
13 | }
14 |
15 | const Index: React.FC33 | Your orders 34 |
35 | 36 | {user ? ( 37 |38 | {orders?.length > 0 ? ( 39 | <> 40 | {orders?.length} Order{orders.length > 1 && "s"} 41 | 42 | ) : ( 43 | <> 44 | You don't have any order yet. Go visit the{" "} 45 | {" "} 51 | to purchase some items. 52 | 53 | )} 54 |
55 | ) : ( 56 |Please sign in to see your orders.
57 | )} 58 |
61 | {orders?.map((order: orderType) => (
62 |
72 |
20 |
85 | );
86 | };
87 |
88 | export default Index;
89 |
90 | export async function getServerSideProps(context: any) {
91 | let volume = context.query.volume;
92 |
93 | if (!volume) {
94 | volume = "fetchFiction";
95 | }
96 |
97 | // @ts-ignore
98 | const routertitle = requests[volume].title;
99 |
100 | // @ts-ignore
101 | const URL = `https://www.googleapis.com/books/v1${requests[volume]?.url}&maxResults=20`;
102 |
103 | const request = await fetch(URL).then(res => res.json());
104 |
105 | return {
106 | props: {
107 | books: request,
108 | volume,
109 | routertitle,
110 | },
111 | };
112 | }
113 |
--------------------------------------------------------------------------------
/src/pages/food/[id].tsx:
--------------------------------------------------------------------------------
1 | import { getSession, withPageAuthRequired } from "@auth0/nextjs-auth0/";
2 | import { PlusIcon } from "@heroicons/react/solid";
3 | import { NextSeo } from "next-seo";
4 | import Image from "next/image";
5 | import Currency from "react-currency-formatter";
6 | import toast from "react-hot-toast";
7 | import { useDispatch } from "react-redux";
8 | import { db } from "../../../firebase";
9 | import Cart from "../../components/Cart";
10 | import { addToBasket } from "../../slices/basketSlice";
11 | import { Salad } from "../../types/itemTypes";
12 | import { user } from "../../types/userType";
13 | import { doc, getDoc } from "firebase/firestore";
14 |
15 | interface ProductProps {
16 | currentProduct: Salad;
17 | user: user;
18 | dbuser: user;
19 | }
20 |
21 | const Product: React.FC
22 |
27 | {Object.entries(requests).map(([key, { title }]) => (
28 |
39 |
44 | {books.items.map((book: book) => (
45 |
56 | {book.volumeInfo.imageLinks?.thumbnail && (
57 |
63 |
64 |
71 |
72 | )}
73 |
81 | ))}
82 |
83 |
84 | router.push(`/books/?volume=${key}`)} 34 | > 35 | {title} 36 |
37 | ))} 38 |74 | {book?.volumeInfo.title.slice(0, 25)}{" "} 75 | {book?.volumeInfo.title.length > 25 ? "..." : ""} 76 |
77 |78 | {book?.volumeInfo.authors}{" "} 79 |
80 |
50 |
80 | );
81 | };
82 |
83 | export default Product;
84 |
85 | export const getServerSideProps = withPageAuthRequired({
86 | async getServerSideProps(context: any) {
87 | const categoryId = context.query.category;
88 | const session = getSession(context.req, context.res);
89 |
90 | const userref = doc(db, `users/${session?.user.email}`);
91 |
92 | const userRes = await getDoc(userref);
93 |
94 | const dbuser = {
95 | id: userRes.id,
96 | ...userRes.data(),
97 | };
98 |
99 | const pathId = context.query.id;
100 |
101 | const ref = doc(db, `products/food/${categoryId}/${pathId}`);
102 |
103 | const productRes = await getDoc(ref);
104 |
105 | const currentProduct = {
106 | id: productRes.id,
107 | ...productRes.data(),
108 | };
109 |
110 | return { props: { currentProduct, pathId, categoryId, dbuser } };
111 | },
112 | });
113 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { useUser } from "@auth0/nextjs-auth0";
2 | import { motion } from "framer-motion";
3 | import { NextSeo } from "next-seo";
4 | import { useEffect } from "react";
5 | import { db } from "../../firebase";
6 | import Banner from "../components/Banner";
7 | import Footer from "../components/Footer";
8 | import Header from "../components/Header";
9 | import Items from "../components/Items";
10 | import Image from "next/image";
11 | import { updateDoc, doc } from "firebase/firestore";
12 |
13 | const Home: React.FC = () => {
14 | const { user, isLoading } = useUser();
15 |
16 | useEffect(() => {
17 | if (user?.email) {
18 | const updateUser = async () => {
19 | const userRef = doc(db, `users/${user?.email}`);
20 | await updateDoc(userRef, {
21 | email: user?.email,
22 | name: user?.name,
23 | photoURL: user?.picture,
24 | });
25 | };
26 | updateUser();
27 | }
28 | });
29 |
30 | return (
31 | <>
32 | {isLoading ? (
33 |
52 |
78 |
53 |
77 |
54 |
63 |
64 |
76 | {name}
65 |{description}
66 |
67 |
75 |
34 |
35 |
44 |
45 | ) : (
46 |
47 |
48 |
49 |
50 |
57 |
63 | What do you want to do?
64 |
65 |
115 |
116 |
117 | )}
118 |
119 | );
120 | };
121 |
122 | export default Home;
123 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Voyagger
2 |
3 | ## Setting up workflow
4 |
5 | - Fork this repository
6 | - If you have yarn installed
7 |
8 | ```
9 | yarn install
10 | ```
11 |
12 | - If you don't have yarn installed
13 |
14 | ```
15 | npm i -g yarn
16 | yarn install
17 | ```
18 |
19 | ## Environment Variables
20 |
21 | To run this project, you will need to add the following environment variables to your .env file
22 |
23 | Auth0
24 |
25 | ```
26 | AUTH0_SECRET
27 | AUTH0_BASE_URL
28 | AUTH0_ISSUER_BASE_URL
29 | AUTH0_CLIENT_ID
30 | AUTH0_CLIENT_SECRET
31 | ```
32 |
33 | Firebase
34 |
35 | ```
36 | FIREBASE_CONFIG_API_KEY
37 | FIREBASE_AUTH_DOMAIN
38 | FIREBASE_PROJECT_ID
39 | FIREBASE_STORAGE_BUCKET
40 | FIREBASE_MESSAGEING_SENDER_ID
41 | FIREBASE_APP_ID
42 | FIREBASE_MEASUREMENT_ID
43 | ```
44 |
45 | Stripe
46 |
47 | ```
48 | STRIPE_PUBLIC_KEY
49 | STRIPE_SECRET_KEY
50 | STRIPE_SIGNING_SECRET
51 | ```
52 |
53 | Firebase permissions for Stripe webhook
54 |
55 | ```
56 | PERMISSION_TYPE
57 | PERMISSION_PROJECT_ID
58 | PERMISSION_PRIVATE_KEY_ID
59 | PERMISSION_PRIVATE_KEY
60 | PERMISSION_CLIENT_EMAIL
61 | PERMISSION_CLIENT_ID
62 | PERMISSION_AUTH_URI
63 | PERMISSION_TOKEN_URI
64 | PERMISSION_AUTH_PROVIDER_URL
65 | PERMISSION_CLIENT_PROVIDER_URL
66 | HOST=http://localhost:3000
67 | ```
68 |
69 | I created development credentials for making the job of contributing easier, so you can simply copy and paste these into `.env.local` to get your app up and running perfectly
70 |
71 | ```
72 | # Auth0
73 | AUTH0_SECRET='791dbc2bcd85f887912a5c98f26e0e7090442dfa0a1dfe33b5848188fa3839b4'
74 | AUTH0_BASE_URL='http://localhost:3000'
75 | AUTH0_ISSUER_BASE_URL='https://avneesh0612.us.auth0.com'
76 | AUTH0_CLIENT_ID='7SqxihF6VNb0yNCudX2qjmd2vd84Ztsu'
77 | AUTH0_CLIENT_SECRET='r1YTMuh0VZbE_WQnUuA-YIy97aOqMztDVokQwqbBO6PAYx0bMLPKXNHY0MjzQxwQ'
78 |
79 | # Firebase
80 | FIREBASE_MEASUREMENT_ID="G-6YT0T2GW78"
81 | FIREBASE_APP_ID="1:981973597448:web:b2ac192135988df2a340bd"
82 | FIREBASE_MESSAGEING_SENDER_ID="981973597448"
83 | FIREBASE_STORAGE_BUCKET="voyager-developmen.appspot.com"
84 | FIREBASE_PROJECT_ID="voyager-developmen"
85 | FIREBASE_AUTH_DOMAIN="voyager-developmen.firebaseapp.com"
86 | FIREBASE_CONFIG_API_KEY="AIzaSyC61I6HDzJPfxWN7ANmNpUxrcZTWdcSZzk"
87 |
88 | # Stripe
89 | STRIPE_SIGNING_SECRET="whsec_QcwcdZEGlDIsG5BQe9V0iFGotphZAiJ7"
90 | HOST="http://localhost:3000"
91 | STRIPE_SECRET_KEY="sk_test_51JQY90SFCK0n3kd3T7WIc1h0B9vlGsJrwetby1i7hongwgGufUsz8IioqTPMHxix5BZ4uYmfwrCcWKZJAXXPAsh600qPCQO6KJ"
92 | STRIPE_PUBLIC_KEY="pk_test_51JQY90SFCK0n3kd3cbqLphItaBERQdMyIHdlEwx9Gv11laqkYB51T54nPAaf7wsqVLCAG52f5Qc5Yo3JiCewMTvm00yvevpMcs"
93 | STRIPE_SHIPPING_RATE=shr_1JQa0SSFCK0n3kd38NRJOcjE
94 |
95 | # Firebase permissions
96 | PERMISSION_TYPE="service_account"
97 | PERMISSION_PROJECT_ID="voyager-developmen"
98 | PERMISSION_PRIVATE_KEY_ID="4781a8bece41a3cfdea93a0d1019f368d3502ef2"
99 | PERMISSION_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCUTZ749Zkq3p+x\nWmQ/cYKpBVzWjkgNiUeq/AtbIPfpiJut9zY459QQ8AFc+e2lB1OcNl0Jud3y7Tl4\ncImtziov1jQ8X4W3RiBhJ7MD3c9/wXlBMqR1sy0qI31dhm4Pxcpo8XZCjxMyvmZ7\nFB7kp3cQBnveNkUIpvBQH376JmNBID9fBJ15ZBoVdFAYWohbjrSmskeDzAHXNsph\nvBRb38frVg1/5B7RRGw5U9WhKDiKGVkHYeilUngNC8ths8mMal5uxd+6Zm6nPeVu\ngCzPrKxBGgXLqIB5ghO0FGbYIr/yhxYCIMiu6LO0BUrj9zvpH3HFc7KaQAJfjVq5\nFQS/+PjBAgMBAAECggEAQsdzAqrgxg+J/Bv2USUlT0Olas2Vv1amKWWmHWpKh+Om\nKl9LkLM/aEMSchHugyW57fkCyvrhaN6ORt/x9wwDLhg33EmtFfpjYSw1rVOHeIEf\nvw51RLSibTue22rJi5umSbwU4uK3I93dmqVUReTstZAd3dE1I7C8PG/6RtzbS7rw\noDOfP92EcqU0yRimOirU0QEDop146ZVQRBLtDBGPcnKmEt2/QtGTBzdEF4Td70CP\n8Vvoqm5nySqhI/2MKyjCxv0jp64BW1DR8243mmyv3eeigt7m9m1KCYH1ULhPeCfH\nLfJ4NUXzgn1Q2ypFjvvf7ZNL6Tzm4xkWS9MHQLs+2wKBgQDFXgNmof4s2uSkq1ag\nmi4Z81R9PnAoCR+ZUXeqwcfkNjtxhS79PX8PaqVlr8wNk2I7leGtzbfYXSoGN6QN\nZhBJer4FEAvgmn79/jSoCpYJrSg88aarKMvRb7lo/zrGtbCnPJ2T0mDsAY/SVIIP\nP113SY5KKyi6kPrAWpBqafd9vwKBgQDAXDx9drSk5ooSErOgCrAxLkyumwolbqFZ\nXRlWGu1mWMEzk7iPm9t8G65wXqe59rcfOydxN70Gxjqos3PazPrEZWqZW7J8yuxt\ncRDLMzI1wU4ucoeVgAFU4XdY0tLvc+Lh8QzqHLxyd4lJI6q6FUZWD426CuXQtIbN\nP4YvdHIpfwKBgDw7FI6doRPPOTeHkkgwxSDmQUJ3a4LMRfhkBED4Iihi5IEgQ9bE\njaIGybLek0cRU0kb1GNWBGTjCZAcKtRr8Ux7SMICw50niNm6WhduI5uQXFc858AU\nEx83GT4Rpb4+dEqVFQGnkixzzZBCee5tR/i/Wc0InsVQuTU6bhgLfpvBAoGAL8N3\nXavpBP0dkYlFQtsEjuGxNrXWmh7TP45HaUL8aapmJrlqXXZU1IdHFC3ctedV5xJY\nI9u0Owdjr1oHzW+SYMvR4UyMkEIO3MnzYpFOyVw7XnsfwXZsXjgx20NWDxEWaAXj\nsAn8nOujkh6iGNyJf3sTNPvZvq3kvvgkCIqAgl8CgYBYeUVvtnsLSVADWUvWcdYF\neoOeqcsx5QvPcmea98IvQOmdu07tDUfGFuyAFoqIxkqYRsmlVgGBbmkRdufXS3Cu\nnZXKJnMTBpLSWgp4HC4q7wfGVwqnUmf8kuXYSmims2FzxmPQGsE/H7AZ0lwjYOuj\nhQ0NXJaX/xoPCNQ0qyCF7Q==\n-----END PRIVATE KEY-----\n"
100 | PERMISSION_CLIENT_EMAIL="firebase-adminsdk-n5ggx@voyager-developmen.iam.gserviceaccount.com"
101 | PERMISSION_CLIENT_ID="115109409345022971033"
102 | PERMISSION_AUTH_URI="https://accounts.google.com/o/oauth2/auth"
103 | PERMISSION_TOKEN_URI="https://oauth2.googleapis.com/token"
104 | PERMISSION_AUTH__X509_CERT_URL="https://www.googleapis.com/oauth2/v1/certs"
105 | PERMISSION_CLIENT__X509_CERT_URL="https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-n5ggx%40voyager-developmen.iam.gserviceaccount.com"
106 | ```
107 |
108 | ## Starting the development server
109 |
110 | ```
111 | yarn dev
112 | ```
113 |
114 | #### Now you are ready to work on a new features/ fixing issues.
115 |
116 | When you are done, make a pull request and I will merge it soon 🥳🥳
117 |
--------------------------------------------------------------------------------
/src/pages/parcel/index.tsx:
--------------------------------------------------------------------------------
1 | import { withPageAuthRequired } from "@auth0/nextjs-auth0/";
2 | import { motion } from "framer-motion";
3 | import { useRouter } from "next/router";
4 | import React, { useState } from "react";
5 | import toast from "react-hot-toast";
6 | import { db } from "../../../firebase";
7 | import Header from "../../components/Header";
8 | import { user } from "../../types/userType";
9 | import { collection, addDoc } from "firebase/firestore";
10 |
11 | interface parcelProps {
12 | user: user;
13 | }
14 |
15 | const Index: React.FC
66 |
71 |
77 |
82 |
88 |
89 |
90 |
95 |
101 |
106 |
113 |
114 |
66 |
139 | );
140 | };
141 |
142 | export default Index;
143 |
144 | export const getServerSideProps = withPageAuthRequired();
145 |
--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
1 | # Contributor Covenant Code of Conduct
2 |
3 | ## Our Pledge
4 |
5 | We as members, contributors, and leaders pledge to make participation in our
6 | community a harassment-free experience for everyone, regardless of age, body
7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
8 | identity and expression, level of experience, education, socio-economic status,
9 | nationality, personal appearance, race, religion, or sexual identity
10 | and orientation.
11 |
12 | We pledge to act and interact in ways that contribute to an open, welcoming,
13 | diverse, inclusive, and healthy community.
14 |
15 | ## Our Standards
16 |
17 | Examples of behavior that contributes to a positive environment for our
18 | community include:
19 |
20 | * Demonstrating empathy and kindness toward other people
21 | * Being respectful of differing opinions, viewpoints, and experiences
22 | * Giving and gracefully accepting constructive feedback
23 | * Accepting responsibility and apologizing to those affected by our mistakes,
24 | and learning from the experience
25 | * Focusing on what is best not just for us as individuals, but for the
26 | overall community
27 |
28 | Examples of unacceptable behavior include:
29 |
30 | * The use of sexualized language or imagery, and sexual attention or
31 | advances of any kind
32 | * Trolling, insulting or derogatory comments, and personal or political attacks
33 | * Public or private harassment
34 | * Publishing others' private information, such as a physical or email
35 | address, without their explicit permission
36 | * Other conduct which could reasonably be considered inappropriate in a
37 | professional setting
38 |
39 | ## Enforcement Responsibilities
40 |
41 | Community leaders are responsible for clarifying and enforcing our standards of
42 | acceptable behavior and will take appropriate and fair corrective action in
43 | response to any behavior that they deem inappropriate, threatening, offensive,
44 | or harmful.
45 |
46 | Community leaders have the right and responsibility to remove, edit, or reject
47 | comments, commits, code, wiki edits, issues, and other contributions that are
48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
49 | decisions when appropriate.
50 |
51 | ## Scope
52 |
53 | This Code of Conduct applies within all community spaces, and also applies when
54 | an individual is officially representing the community in public spaces.
55 | Examples of representing our community include using an official e-mail address,
56 | posting via an official social media account, or acting as an appointed
57 | representative at an online or offline event.
58 |
59 | ## Enforcement
60 |
61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
62 | reported to the community leaders responsible for enforcement at
63 | avneeshagarwal0612@gmail.com.
64 | All complaints will be reviewed and investigated promptly and fairly.
65 |
66 | All community leaders are obligated to respect the privacy and security of the
67 | reporter of any incident.
68 |
69 | ## Enforcement Guidelines
70 |
71 | Community leaders will follow these Community Impact Guidelines in determining
72 | the consequences for any action they deem in violation of this Code of Conduct:
73 |
74 | ### 1. Correction
75 |
76 | **Community Impact**: Use of inappropriate language or other behavior deemed
77 | unprofessional or unwelcome in the community.
78 |
79 | **Consequence**: A private, written warning from community leaders, providing
80 | clarity around the nature of the violation and an explanation of why the
81 | behavior was inappropriate. A public apology may be requested.
82 |
83 | ### 2. Warning
84 |
85 | **Community Impact**: A violation through a single incident or series
86 | of actions.
87 |
88 | **Consequence**: A warning with consequences for continued behavior. No
89 | interaction with the people involved, including unsolicited interaction with
90 | those enforcing the Code of Conduct, for a specified period of time. This
91 | includes avoiding interactions in community spaces as well as external channels
92 | like social media. Violating these terms may lead to a temporary or
93 | permanent ban.
94 |
95 | ### 3. Temporary Ban
96 |
97 | **Community Impact**: A serious violation of community standards, including
98 | sustained inappropriate behavior.
99 |
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 |
106 | ### 4. Permanent Ban
107 |
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior, harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 |
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 |
115 | ## Attribution
116 |
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 |
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 |
124 | [homepage]: https://www.contributor-covenant.org
125 |
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 |
--------------------------------------------------------------------------------
/src/components/Header.tsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 | import Link from "next/link";
3 | import { ChevronUpIcon, ChevronDownIcon } from "@heroicons/react/outline";
4 | import { motion } from "framer-motion";
5 | import { useState } from "react";
6 | import { useSelector } from "react-redux";
7 | import { useUser } from "@auth0/nextjs-auth0";
8 | import { selectItems } from "../slices/basketSlice";
9 | import { ShoppingBagIcon } from "@heroicons/react/solid";
10 |
11 | function Header() {
12 | const user = useUser();
13 | const items = useSelector(selectItems);
14 |
15 | const [isNavOpen, setIsNavOpen] = useState(false);
16 |
17 | return (
18 |
37 |
45 |
46 | My orders
47 |
48 |
49 |
50 |
58 |
59 | Parcel tracking
60 |
61 |
62 |
63 |
64 |
79 |
65 |
73 | {user.user && Sign out}
74 |
75 | {!user?.user && Sign in}
76 |
77 |
78 |
82 | setIsNavOpen(!isNavOpen)}
110 | />
111 | ) : (
112 | setIsNavOpen(!isNavOpen)}
116 | />
117 | )}
118 |
119 |
120 |
83 |
84 |
85 |
96 |
97 |
98 |
99 |
104 |
105 | {isNavOpen ? (
106 | 101 | {items.length} 102 |
103 |
81 |
171 | Checkout
172 |
173 |
174 | );
175 | };
176 |
177 | export default Cart;
178 |
--------------------------------------------------------------------------------
/src/pages/cart.tsx:
--------------------------------------------------------------------------------
1 | import { getSession, withPageAuthRequired } from "@auth0/nextjs-auth0";
2 | import { ArrowLeftIcon, LocationMarkerIcon } from "@heroicons/react/solid";
3 | import { loadStripe } from "@stripe/stripe-js";
4 | import axios from "axios";
5 | import { motion } from "framer-motion";
6 | import { groupBy } from "lodash";
7 | import { NextSeo } from "next-seo";
8 | import Image from "next/image";
9 | import Link from "next/link";
10 | import { useEffect, useState } from "react";
11 | import Currency from "react-currency-formatter";
12 | import toast from "react-hot-toast";
13 | import { useDispatch, useSelector } from "react-redux";
14 | import { db } from "../../firebase";
15 | import CartItem from "../components/CartItem";
16 | import { clearBasket, selectItems, selectTotal } from "../slices/basketSlice";
17 | import { user } from "../types/userType";
18 | import { doc, getDoc, updateDoc } from "firebase/firestore";
19 |
20 | const stripePromise = loadStripe(process.env.stripe_public_key!);
21 |
22 | interface CartProps {
23 | user?: user;
24 | dbuser: user;
25 | }
26 |
27 | const Cart: React.FC
82 |
133 |
83 | {ssruser?.picture && (
84 |
97 | 94 | {ssruser?.name} 95 |
96 |
98 |
106 | My order
99 |103 | Empty cart 104 |
105 |
107 |
126 | 112 | Your basket is empty 113 |
114 | {groupedItems.map((group, i) => ( 115 |
116 |
124 | ))}
125 |
127 |
129 |
131 |
132 | Total
128 |
129 |
131 |
134 |
142 | Address
135 |seteditShow(!editShow)} 138 | > 139 | Edit 140 |
141 |
143 |
161 |
145 | {editShow ? (
146 |
154 | ) : (
155 |
160 |
156 | {address ? address : "Please add your address"}
157 |
158 | )}
159 |
82 |
176 | Checkout
177 |
178 |
179 | );
180 | };
181 |
182 | export default Cart;
183 |
184 | export const getServerSideProps = withPageAuthRequired({
185 | async getServerSideProps(context: any) {
186 | const session = getSession(context.req, context.res);
187 |
188 | const userRef = doc(db, `users/${session?.user.email}`);
189 |
190 | const userRes = await getDoc(userRef);
191 |
192 | const dbuser = {
193 | id: userRes.id,
194 | ...userRes.data(),
195 | };
196 |
197 | return {
198 | props: {
199 | dbuser,
200 | },
201 | };
202 | },
203 | });
204 |
--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 |
2 |
99 |
--------------------------------------------------------------------------------
84 |
104 |
138 |
105 |
113 | My order
106 |110 | Empty cart 111 |
112 |
114 |
131 | 117 | Your basket is empty 118 |
119 | {groupedItems.map((group, i) => ( 120 |
121 |
129 | ))}
130 |
132 |
134 |
136 |
137 | Total
133 |
134 |
136 |
139 |
147 | Address
140 |seteditShow(!editShow)} 143 | > 144 | Edit 145 |
146 |
148 |
166 |
150 | {editShow ? (
151 |
159 | ) : (
160 |
165 |
161 | {dbuser.address ? address : "Please add your address"}
162 |
163 | )}
164 |