shoppay

.env

@@ -0,0 +1,54 @@
+//-----------DATABASE---------------------------
+MONGODB_URL=mongodb+srv://m74jji:KFUCTRrnMronoqS9@cluster0.azgcran.mongodb.net/shoppay?retryWrites=true&w=majority
+//-----------NEXT AUTH---------------------------
+JWT_SECRET=hUh-jHD+GP&YnBjsSfBsA#PYAmcNPSKcD#jF!FueWU&+htVD&T
+NEXTAUTH_URL=http://localhost:3000
+BASE_URL=http://localhost:3000
+/-------
+GITHUB_ID=7de316c7508476843776
+GITHUB_SECRET=b9036fe98b382c09af73325832ae4c3af367b9be
+GOOGLE_ID=981614590081-0sgqbb8vama8l4dq5v40f79li4u53qp2.apps.googleusercontent.com
+GOOGLE_SECRET=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
+TWITTER_ID=zezltwcmMtvrb3VcwhAKXgCO7
+TWITTER_SECRET=2mUKN9nudM5oRMQHnCEKCIMv75nIFiGASFEqkl3lwh1f8vNy0p
+T_ID=R19hSVpYcHhERnVkTUllRFk3ZmY6MTpjaQ
+T_SECRET=yQ-CVR4SXNFb03e0fRpFppWQYXoEh0W9vTF51d8ECaUIaWO2ny
+AUTH0_CLIENT_ID=vfIy8Q26ypzJmjtpuMKMwsho9Cjgtg9G
+AUTH0_CLIENT_SECRET=K0SdNK-TOOKP5heFg6YmeSn5n0pvs9tgwNnLHmqweLnGbLBVRRP9g5s-TBiQKiCk
+AUTH0_ISSUER=https://dev-0nrzd0ys.us.auth0.com
+/-------
+
+/---MAILING SERVICE------
+MAILING_SERVICE_CLIENT_ID=277794638280-tqvrfe38gajvocoqsf3oeqdliou4qf45.apps.googleusercontent.com
+MAILING_SERVICE_CLIENT_SECRET=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
+MAILING_SERVICE_REFRESH_TOKEN=1//04Sepe5dWcsGfCgYIARAAGAQSNwF-L9Irb7nk6GLxne0qN1Tei_10IHf2BucAkzUNQc9L7DHH5_o9VpfyR9FEKBOV8K4yVeij9Hw
+SENDER_EMAIL_ADDRESS=web74dev@gmail.com
+
+/---------
+
+
+/---------
+ACTIVATION_TOKEN_SECRET=h-jHD+GP&YnBada5145a1d51ad51ad1jsSfBsA#PYAmcNPSKcD#jF!FueWU&+htVD&T
+RESET_TOKEN_SECRET=h-jHD+GP&YnBada5145a1d51ad51adadad5151ad51adçèç_èçd1jsSfBsA#PYAmcNPSKcD#jF!FueWU&+htVD&T
+/---------
+
+
+
+/---Paypal---------------
+PAYPAL_CLIENT_ID=AVj0vGS28tnu434I4GvAcY8qjVNnNtsJ6sMjnB6tU14Y_apUJBjTFQWNMQLkzDl12vy1vlR0n_VoSwjp
+PAYPAL_CLIENT_SECRET=EK1IW_6QV0_lV-2Gi7VVDnSQLouMcu8WXBLy-_b0A5pVUjIuz6mj5THyk8hnD4X3k7uNLvzYRVRN6IbS	
+/------------------
+
+
+/-----Stripe------
+STRIPE_PUBLIC_KEY=pk_test_51M17SAJCpnpss5lUHKa36Tl2HcBaUmpmZCtaPdBM2pzxlZ7Ud6WNv215xp78KsXOyW2oIRWRalOUS85dKuK4PxD600QFosLtsO
+STRIPE_SECRET_KEY=sk_test_51M17SAJCpnpss5lUUopFF9itIG71kCMGHHSdpGhaR1Ub729pJXH6bNzTUaClJXZJxFmq2HtBCbEtnR3OdDNu6l0A00INGiEwta
+/------------------------
+
+
+
+/------Cloudinary-----
+CLOUDINARY_NAME=dth3fov0u
+CLOUDINARY_KEY=869831689984618
+CLOUDINARY_SECRET=vz_2Gb6OOOw9ZAUkBLn3ilwuedc
+--------------------------

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -0,0 +1,32 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

README.md

@@ -0,0 +1,34 @@
+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).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+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.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+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.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/admin/_base.scss

@@ -0,0 +1,56 @@
+.btnWrap {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+.btn {
+  min-width: 120px;
+  padding: 10px 15px;
+  font-weight: 600;
+  cursor: pointer;
+  // border-radius: 5px;
+  color: #222;
+  margin-top: 10px;
+  transition: all 0.1s;
+  &__primary {
+    background: $blue-color;
+    color: #fff;
+  }
+  &:hover {
+    background: $blue-color;
+    color: #fff;
+  }
+}
+.header {
+  font-weight: 700;
+  font-size: 20px;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 5px;
+  margin-top: 1rem;
+  margin-bottom: 5px;
+  display: flex;
+  flex-direction: column;
+  .flex {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  span {
+    display: block;
+    font-size: 14px;
+    font-weight: normal;
+  }
+  img {
+    width: 30px;
+  }
+}
+.flex {
+  margin: 1rem 0;
+}
+.header__error {
+  color: $error-color;
+  border-color: $error-color;
+}
+.error_bg {
+  background: $error-color !important;
+}

components/admin/categories/Create.js

@@ -0,0 +1,60 @@
+import { Form, Formik } from "formik";
+import { useState } from "react";
+import styles from "./styles.module.scss";
+import * as Yup from "yup";
+import AdminInput from "../../inputs/adminInput";
+import { toast } from "react-toastify";
+import axios from "axios";
+export default function Create({ setCategories }) {
+  const [name, setName] = useState("");
+  const validate = Yup.object({
+    name: Yup.string()
+      .required("Category name is required.")
+      .min(2, "Category name must be bewteen 2 and 30 characters.")
+      .max(30, "Category name must be bewteen 2 and 30 characters."),
+    /*.matches(
+        /^[a-zA-Z\s]*$/,
+        "Numbers and special charcters are not allowed."
+      ) */
+  });
+  const submitHandler = async () => {
+    try {
+      const { data } = await axios.post("/api/admin/category", { name });
+      setCategories(data.categories);
+      setName("");
+      toast.success(data.message);
+    } catch (error) {
+      toast.error(error.response.data.message);
+    }
+  };
+  return (
+    <>
+      <Formik
+        enableReinitialize
+        initialValues={{ name }}
+        validationSchema={validate}
+        onSubmit={() => {
+          submitHandler();
+        }}
+      >
+        {(formik) => (
+          <Form>
+            <div className={styles.header}>Create a Category</div>
+            <AdminInput
+              type="text"
+              label="Name"
+              name="name"
+              placholder="Category name"
+              onChange={(e) => setName(e.target.value)}
+            />
+            <div className={styles.btnWrap}>
+              <button type="submit" className={`${styles.btn} `}>
+                <span>Add Category</span>
+              </button>
+            </div>
+          </Form>
+        )}
+      </Formik>
+    </>
+  );
+}

components/admin/categories/List.js

@@ -0,0 +1,16 @@
+import ListItem from "./ListItem";
+import styles from "./styles.module.scss";
+
+export default function List({ categories, setCategories }) {
+  return (
+    <ul className={styles.list}>
+      {categories.map((category) => (
+        <ListItem
+          category={category}
+          key={category._id}
+          setCategories={setCategories}
+        />
+      ))}
+    </ul>
+  );
+}

components/admin/categories/ListItem.js

@@ -0,0 +1,77 @@
+import axios from "axios";
+import { useRef } from "react";
+import { useState } from "react";
+import { AiFillDelete, AiTwotoneEdit } from "react-icons/ai";
+import { toast } from "react-toastify";
+import styles from "./styles.module.scss";
+export default function ListItem({ category, setCategories }) {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState("");
+  const input = useRef(null);
+  const handleRemove = async (id) => {
+    try {
+      const { data } = await axios.delete("/api/admin/category", {
+        data: { id },
+      });
+      setCategories(data.categories);
+      toast.success(data.message);
+    } catch (error) {
+      toast.error(error.response.data.message);
+    }
+  };
+  const handleUpdate = async (id) => {
+    try {
+      const { data } = await axios.put("/api/admin/category", {
+        id,
+        name,
+      });
+      setCategories(data.categories);
+      setOpen(false);
+      toast.success(data.message);
+    } catch (error) {
+      toast.error(error.response.data.message);
+    }
+  };
+  return (
+    <li className={styles.list__item}>
+      <input
+        className={open ? styles.open : ""}
+        type="text"
+        value={name ? name : category.name}
+        onChange={(e) => setName(e.target.value)}
+        disabled={!open}
+        ref={input}
+      />
+      {open && (
+        <div className={styles.list__item_expand}>
+          <button
+            className={styles.btn}
+            onClick={() => handleUpdate(category._id)}
+          >
+            Save
+          </button>
+          <button
+            className={styles.btn}
+            onClick={() => {
+              setOpen(false);
+              setName("");
+            }}
+          >
+            Cancel
+          </button>
+        </div>
+      )}
+      <div className={styles.list__item_actions}>
+        {!open && (
+          <AiTwotoneEdit
+            onClick={() => {
+              setOpen((prev) => !prev);
+              input.current.focus();
+            }}
+          />
+        )}
+        <AiFillDelete onClick={() => handleRemove(category._id)} />
+      </div>
+    </li>
+  );
+}

components/admin/categories/styles.module.scss

@@ -0,0 +1,49 @@
+@import "../base";
+.list {
+  margin-top: 1rem;
+  &__item {
+    padding: 10px;
+    background: $blue-color;
+    margin-top: 10px;
+    color: #fff;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    @media (max-width: 800px) {
+      flex-direction: column;
+      gap: 10px;
+    }
+    svg {
+      width: 22px;
+      height: 22px;
+      cursor: pointer;
+      margin-left: 1rem;
+    }
+    input {
+      padding: 1rem;
+      border: none;
+      outline: none;
+      color: #fff;
+      background: transparent;
+    }
+    &_expand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      button:hover {
+        background: $dark-blue-color;
+      }
+    }
+  }
+}
+.open {
+  background: #fff !important;
+  color: #111 !important;
+}
+.date_picker {
+  margin-top: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}