+
Edit colors
⤵
@@ -175,7 +158,7 @@ const PageEditColors = ({ page, setPage }: PageEditColorsProps) => {
isSubmitting={isSubmitting.primary}
onClick={() => {
if (showPickers.primary) {
- updateColors({ primary: true });
+ changeColors({ primary: true });
}
setShowPickers({
primary: !showPickers.primary,
@@ -196,7 +179,7 @@ const PageEditColors = ({ page, setPage }: PageEditColorsProps) => {
isSubmitting={isSubmitting.secondary}
onClick={() => {
if (showPickers.secondary) {
- updateColors({ secondary: true });
+ changeColors({ secondary: true });
}
setShowPickers({
primary: false,
@@ -217,7 +200,7 @@ const PageEditColors = ({ page, setPage }: PageEditColorsProps) => {
isSubmitting={isSubmitting.font}
onClick={() => {
if (showPickers.font) {
- updateColors({ font: true });
+ changeColors({ font: true });
}
setShowPickers({
primary: false,
@@ -232,4 +215,4 @@ const PageEditColors = ({ page, setPage }: PageEditColorsProps) => {
);
};
-export default PageEditColors;
+export default memo(EditColors);
diff --git a/src/app/(BioLayout)/edit/[username]/EditInfos.tsx b/src/app/(BioLayout)/edit/[username]/EditInfos.tsx
new file mode 100644
index 0000000..004fccb
--- /dev/null
+++ b/src/app/(BioLayout)/edit/[username]/EditInfos.tsx
@@ -0,0 +1,70 @@
+"use client";
+import { memo, useState } from "react";
+import { PageProps } from "@/types/PageProps";
+import { getAdornmentIcon } from "@/utils/IconsList";
+import DialogEditInfos from "./Dialogs/DialogEditInfos";
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import { DefaultTooltip } from "@/components/Tooltip";
+import { defaultPage } from "@/utils/BioVariables";
+
+const EditInfos = ({ page }: { page: PageProps }) => {
+ const fontColor = page?.fontColor || defaultPage.fontColor;
+ const [dialogEditInfos, setDialogEditInfos] = useState(false);
+
+ return (
+
+ {
+ setDialogEditInfos(true);
+ }}
+ >
+
+
+
+ {page?.uname || "No name~"}
+
+ {page?.adornment ? (
+
+
+
+
+ zoz.bio/{page?.pagename}
+
+
+ {page?.bio}
+
+
+
+
+ );
+};
+
+export default memo(EditInfos);
diff --git a/src/app/(BioLayout)/edit/[username]/EditLink.tsx b/src/app/(BioLayout)/edit/[username]/EditLink.tsx
new file mode 100644
index 0000000..15a9f8d
--- /dev/null
+++ b/src/app/(BioLayout)/edit/[username]/EditLink.tsx
@@ -0,0 +1,124 @@
+import { LinkProps } from "@/types/LinkProps";
+import { PageProps } from "@/types/PageProps";
+import { defaultPage } from "@/utils/BioVariables";
+import { getIcon } from "@/utils/IconsList";
+import clsx from "clsx";
+import Image from "next/image";
+import Link from "next/link";
+import { memo } from "react";
+
+type EditLinkProps = {
+ page: PageProps;
+ link: LinkProps;
+ setFolderOwner: (link: LinkProps) => void;
+ editLink?: (link: LinkProps) => void;
+};
+
+const BannerComponent = ({ link, fontColor }: { link: LinkProps; fontColor: string }) => {
+ const typeCover = link.bannerUrl || "";
+
+ return (
+ <>
+ {typeCover && (
+
+ )}
+
+
+
Edit
+
+
+ );
+};
+
+const LinkComponent = ({ page, link, setFolderOwner }: EditLinkProps) => {
+ const fontColor = page?.fontColor || defaultPage.fontColor;
+ const h2ClassName =
+ "sm:ml-7 flex-1 flex-shrink-0 truncate whitespace-pre-wrap text-center font-bold tracking-wide overflow-visible whitespace-nowrap text-lg sm:text-xl";
+ if (link.isFolder)
+ return (
+
{
+ link.isSelected = true;
+ setFolderOwner(link);
+ }}
+ >
+
+ {/* TODO - UX upgrade */}
+ {link.isSelected ? "Click to go back" : link.label}
+
+
+ );
+ return (
+
+
+ {link.label}
+
+
+ );
+};
+
+const EditLink = ({ page, link, setFolderOwner, editLink }: EditLinkProps) => {
+ const primaryColor = page?.primaryColor || defaultPage.primaryColor;
+ const fontColor = page?.fontColor || defaultPage.fontColor;
+ const cardBlur = page?.cardBlur || defaultPage.cardBlur;
+ const cardHueRotate = page?.cardHueRotate || defaultPage.cardHueRotate;
+
+ const cardStyle = {
+ backgroundColor: `rgb(${primaryColor.r},${primaryColor.g},${primaryColor.b},${primaryColor.a})`,
+ };
+
+ return (
+ <>
+
+
editLink && editLink(link)}
+ >
+
+
+
+
+
+ );
+};
+
+export default memo(EditLink);
diff --git a/src/app/(BioLayout)/edit/[username]/EditLinks.tsx b/src/app/(BioLayout)/edit/[username]/EditLinks.tsx
new file mode 100644
index 0000000..35866b0
--- /dev/null
+++ b/src/app/(BioLayout)/edit/[username]/EditLinks.tsx
@@ -0,0 +1,118 @@
+"use client";
+import BioIFrames from "@/app/(BioLayout)/[username]/BioIFrames";
+import { LinkProps } from "@/types/LinkProps";
+import { PageProps } from "@/types/PageProps";
+import { Cog6ToothIcon, PlusIcon } from "@heroicons/react/20/solid";
+import clsx from "clsx";
+import { memo, useState } from "react";
+import ButtonCard from "./ButtonCard";
+import DialogNewLink from "./Dialogs/DialogNewLink";
+import EditLink from "./EditLink";
+import DialogEditLink from "./Dialogs/DialogEditLink";
+
+type EditLinksProps = {
+ page: PageProps;
+};
+
+const EditLinks = ({ page }: EditLinksProps) => {
+ const [folderOwner, setFolderOwner] = useState
();
+ const [selectedLink, setSelectedLink] = useState();
+ const [dialogNewLink, setDialogNewLink] = useState(false);
+
+ const pageLinks = page?.pageLinks
+ ? folderOwner
+ ? page.pageLinks
+ .filter(link => {
+ return link.folderOwner === folderOwner._id;
+ })
+ .sort(function (a, b) {
+ return a.position - b.position;
+ })
+ : page.pageLinks
+ .filter(link => {
+ return !link.folderOwner;
+ })
+ .sort(function (a, b) {
+ return a.position - b.position;
+ })
+ : [];
+
+ return (
+ <>
+
+
setDialogNewLink(true)}
+ iconAdornment={ console.log("click")}
+ iconAdornment={
+ {
+ link.isSelected = false;
+ setFolderOwner(null);
+ }}
+ editLink={() => {
+ setSelectedLink(folderOwner);
+ }}
+ />
+
+ ) : null}
+ {pageLinks.map((link, idx) =>
+ link.embedded === "none" ? (
+
+ {
+ setSelectedLink(link);
+ }}
+ />
+
+ ) : (
+
+
{
+ setSelectedLink(link);
+ }}
+ >
+ Click to Edit
+
+
setSelectedLink(link)}>
+
+
{
+ setSelectedLink(link);
+ }}
+ page={page}
+ link={selectedLink}
+ />
+ )}
+
+ );
+};
+
+export default memo(EditLinks);
diff --git a/src/app/(BioLayout)/edit/[username]/EditSocials.tsx b/src/app/(BioLayout)/edit/[username]/EditSocials.tsx
new file mode 100644
index 0000000..518e6af
--- /dev/null
+++ b/src/app/(BioLayout)/edit/[username]/EditSocials.tsx
@@ -0,0 +1,31 @@
+"use client";
+import BioIcon from "@/app/(BioLayout)/[username]/BioIcon";
+import { DefaultTooltip } from "@/components/Tooltip";
+import { PageProps } from "@/types/PageProps";
+import { PencilSquareIcon } from "@heroicons/react/24/outline";
+import { memo, useState } from "react";
+import DialogEditSocials from "./Dialogs/DialogEditSocials";
+import { defaultPage } from "@/utils/BioVariables";
+
+const EditSocials = ({ page }: { page: PageProps }) => {
+ const socialMedias = page?.socialMedias?.length > 0 ? page.socialMedias : defaultPage.pageSocialMedias;
+ const [dialogEditSocials, setDialogEditSocials] = useState(false);
+
+ return (
+
+ {
+ setDialogEditSocials(true);
+ }}
+ >
+
+ {socialMedias && socialMedias.map((media, idx) =>
+
+
+ );
+};
+export default memo(EditSocials);
diff --git a/src/app/(BioLayout)/edit/[username]/layout.tsx b/src/app/(BioLayout)/edit/[username]/layout.tsx
new file mode 100644
index 0000000..e3fb0c0
--- /dev/null
+++ b/src/app/(BioLayout)/edit/[username]/layout.tsx
@@ -0,0 +1,37 @@
+// import Script from "next/script";
+import "@/app/(BioLayout)/biolayout.css";
+import "react-toastify/dist/ReactToastify.css";
+import "tippy.js/animations/perspective.css";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/themes/translucent.css";
+import ToastProvider from "@/providers/ToastProvider";
+import { ReactNode } from "react";
+import Analytics from "@/components/Analytics";
+
+// METADATA EXAMPLE - https://nextjs.org/docs/app/api-reference/functions/generate-metadata
+
+export default function BioLayout({ children }: { children: ReactNode }) {
+ //TODO - OG GRAPH IMAGE TWITTER E FB
+ return (
+
+
+
+
+ {pageData ?
+
+ );
+}
diff --git a/src/app/(RootLayout)/about/page.tsx b/src/app/(RootLayout)/about/page.tsx
index 5a29a50..2b2f53a 100644
--- a/src/app/(RootLayout)/about/page.tsx
+++ b/src/app/(RootLayout)/about/page.tsx
@@ -1,3 +1,3 @@
export default function AboutPage() {
- return about page ;
+ return about page ;
}
diff --git a/src/app/(RootLayout)/account/Account.tsx b/src/app/(RootLayout)/account/Account.tsx
index 2e7113e..48b8622 100644
--- a/src/app/(RootLayout)/account/Account.tsx
+++ b/src/app/(RootLayout)/account/Account.tsx
@@ -1,63 +1,20 @@
"use client";
-import { useEffect, useState } from "react";
-import { useQuery } from "@tanstack/react-query";
+import { getAccount, sendConfirmEmail } from "@/services/AccountService";
import { PageProps } from "@/types/PageProps";
import { UserProps } from "@/types/UserProps";
-// import { useToasts } from "../../context/ToastProvider/useToasts";
-import Tabs from "@/components/Tabs";
-// import { Cog6ToothIcon } from "@heroicons/react/20/solid";
-// import { BigHead } from "@bigheads/core";
-import PageEdit from "./PageEdit";
-import DialogNewPage from "./DialogNewPage";
-import AccountTabSettings from "./AccountTabSettings";
-// import { LazyLoadImage } from "@/components/Loadings";
-import BioCard from "@/app/(BioLayout)/[username]/BioCard";
-import { getAccount } from "@/services/AccountService";
-import Tooltip from "@/components/Tooltip/Tooltip";
-
-const accountSettings = (account: UserProps) => {
- return (
-
-
-
- );
-};
-
-const accountSubscription = (account: UserProps) => {
- return (
-
- SOON
-
- );
-};
+import { errorToast, successToast } from "@/utils/toaster";
+import { useQuery } from "@tanstack/react-query";
+import { deleteCookie } from "cookies-next";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { AccountTabs } from "./AccountTabs";
+import { LabelButton } from "@/components/Buttons";
+// TODO - maybe change this to server component
const AccountComponent = () => {
- const [page, setPage] = useState();
const [pages, setPages] = useState();
- const [account, setAccount] = useState();
- const [dialogNewPageOpen, setDialogNewPageOpen] = useState(false);
- // const { errorToast } = useToasts();
-
- const queryAccount = useQuery({
- queryKey: ["getAccount"],
- queryFn: () => getAccount(),
- });
-
- if (queryAccount.isError) {
- const error = queryAccount.error as Error;
- console.log(error);
- // errorToast(error.message);
- }
-
- if (queryAccount.data?.pages && !pages) {
- setPages(queryAccount.data.pages);
- }
- if (queryAccount.data?.user && !account) {
- console.log(account);
- setAccount(queryAccount.data.user);
- }
+ const [account, setAccount] = useState();
+ const router = useRouter();
useEffect(() => {
const scrollContainer = document.getElementById("pages");
@@ -67,110 +24,63 @@ const AccountComponent = () => {
scrollContainer.scrollLeft += evt.deltaY;
});
}
- }); //fix this use effect later add dependency
+ }); //TODO - fix this use effect later add dependency
const addNewPage = (page: PageProps) => {
if (pages) setPages([...pages, page]);
};
- return (
-
- {page ? (
-
pagedit
- ) : (
- //
{
- // setPage(page);
- // setPages(
- // pages?.map(item => {
- // return item.pagename === page?.pagename ? page : item;
- // })
- // );
- // }}
- // />
- <>
-
-
- ↓
- Create a new page or click on the page you want to edit
-
+ // TODO - query cache
+ const queryAccount = useQuery({
+ queryKey: ["getAccount"],
+ queryFn: () => getAccount(),
+ });
-
-
setDialogNewPageOpen(true)}
- className="group mx-1 my-2 flex h-24 w-24 flex-shrink-0 cursor-pointer flex-col items-center justify-center rounded-full bg-secondary/30 ring-4 ring-violet-200/80 hover:bg-secondary/50 hover:ring-white"
- >
- +
- New Page
-
+ if (queryAccount.isError) {
+ if (queryAccount.error === "Unauthorized") {
+ errorToast("Session expired, please sign in again");
+ deleteCookie("zoz_user");
+ router.refresh();
+ router.push("/login");
+ } else {
+ errorToast(queryAccount.error as Error);
+ }
+ }
- {pages
- ? pages.map((page: PageProps, idx: number) => (
-
- {/*
- {page.pagename}
- */}
+ if (queryAccount.data?.pages && !pages) {
+ setPages(queryAccount.data.pages);
+ }
-
- {page.pfpUrl ? (
- setPage(page)}
- >
- {/*
- )}
-
-
- ))
- : null}
-
+ if (queryAccount.data?.user && !account) {
+ setAccount(queryAccount.data.user);
+ }
-
- {/* TODO melhorar essa tabs */}
-
-
+ {account && !account.isEmailConfirmed && (
+
+ {/* TODO - send confirmation email and validade time to be 1min cooldown */}
+
+ We noticed that your email has not been confirmed yet. So your account is limited, and can be suspended
+ without further notice. Check your spam folder if you can't find it, or{" "}
+ {
+ sendConfirmEmail(account.email || "", "aa")
+ .then(() => {
+ successToast("Confirmation email successfully sended, check your inbox or spam directory");
+ })
+ .catch(err => {
+ errorToast(err);
+ });
+ }}
+ />
+
+
)}
+
-
- {account?.email}
- {/*
console.log(1)}
- bgColor="bg-violet-900 bg-opacity-25"
- // onChange={formik.handleChange}
- // onBlur={formik.handleBlur}
- // errors={
- // formik.touched.cpassword && formik.errors.cpassword
- // ? formik.errors.cpassword
- // : undefined
- // }
- />
- console.log(1)}
- bgColor="bg-violet-900 bg-opacity-25"
+
+
-
+
);
};
diff --git a/src/app/(RootLayout)/account/AccountTabSubscriptions.tsx b/src/app/(RootLayout)/account/AccountTabSubscriptions.tsx
new file mode 100644
index 0000000..86f5b50
--- /dev/null
+++ b/src/app/(RootLayout)/account/AccountTabSubscriptions.tsx
@@ -0,0 +1,17 @@
+import BioCard from "@/app/(BioLayout)/[username]/BioCard";
+import { UserProps } from "@/types/UserProps";
+import { memo } from "react";
+
+const AccountTabSubscriptions = ({ account }: { account?: UserProps }) => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default memo(AccountTabSubscriptions);
diff --git a/src/app/(RootLayout)/account/AccountTabs.tsx b/src/app/(RootLayout)/account/AccountTabs.tsx
new file mode 100644
index 0000000..7305a35
--- /dev/null
+++ b/src/app/(RootLayout)/account/AccountTabs.tsx
@@ -0,0 +1,96 @@
+import Tabs from "@/components/Tabs";
+import { Tooltip } from "@/components/Tooltip";
+import { PageProps } from "@/types/PageProps";
+import { UserProps } from "@/types/UserProps";
+import Image from "next/image";
+import { useState } from "react";
+import DialogNewPage from "../../(BioLayout)/edit/[username]/Dialogs/DialogNewPage";
+import AccountTabSettings from "./AccountTabSettings";
+import AccountTabSubscriptions from "./AccountTabSubscriptions";
+import { defaultPage } from "@/utils/BioVariables";
+import { useRouter } from "next/navigation";
+
+type AcountTabsProps = {
+ account: UserProps | undefined;
+ pages: PageProps[] | undefined;
+ addNewPage: (page: PageProps) => void;
+};
+
+export const AccountTabs = ({ account, pages, addNewPage }: AcountTabsProps) => {
+ const [dialogNewPageOpen, setDialogNewPageOpen] = useState(false);
+ const router = useRouter();
+
+ return (
+ <>
+
+
+ ↓
+ Create a new page or click on the page you want to edit
+
+
+
+
setDialogNewPageOpen(true)}
+ className="group mx-1 my-2 flex h-20 w-20 2xl:h-24 2xl:w-24 flex-shrink-0 cursor-pointer flex-col items-center justify-center rounded-full bg-secondary/30 ring-4 ring-violet-200/80 hover:bg-secondary/50 hover:ring-white"
+ >
+ +
+ New Page
+
+
+ {pages
+ ? pages.map((page: PageProps, idx: number) => (
+
+
+ {
+ router.push(`/edit/${page.pagename}`);
+ }}
+ alt="pfp"
+ quality={50}
+ placeholder="empty"
+ loading="lazy"
+ />
+
+
+ ))
+ : null}
+
+
+
+ {/* TODO melhorar essa tabs */}
+
,
+ },
+ {
+ label: "⚠️ Subscriptions",
+ disabled: true,
+ component:
,
+ },
+ {
+ label: "💸 Pages Analytics",
+ disabled: true,
+ component:
,
+ },
+ {
+ label: "😍 🫣 🤓",
+ disabled: true,
+ component:
,
+ },
+ ]}
+ />
+
+
) => void;
};
const AutoCompleteFolders = ({
@@ -24,17 +23,13 @@ const AutoCompleteFolders = ({
selected = "",
setSelected,
}: AutoCompleteFoldersProps) => {
- // const { errorToast } = useToasts();
-
const queryPage = useQuery({
queryKey: ["getFolders"],
queryFn: () => getFolders(pagename),
});
if (queryPage.isError) {
- const error = queryPage.error as Error;
- // errorToast(error.message);
- console.log(error);
+ errorToast(queryPage.error as Error);
}
const list = new Map([]);
@@ -65,4 +60,4 @@ const AutoCompleteFolders = ({
);
};
-export default React.memo(AutoCompleteFolders);
+export default memo(AutoCompleteFolders);
diff --git a/src/app/(RootLayout)/account/DialogEditBadges.tsx b/src/app/(RootLayout)/account/DialogEditBadges.tsx
deleted file mode 100644
index 862dcdf..0000000
--- a/src/app/(RootLayout)/account/DialogEditBadges.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { useEffect, useState } from "react";
-import { useToasts } from "../../context/ToastProvider/useToasts";
-import { PageProps } from "../../types/PageProps";
-import { useFormik } from "formik";
-import ZozDialog from "../../components/Dialogs";
-
-type DialogEditBadgesProps = {
- isOpen: boolean;
- page: PageProps;
- setIsOpen: (value: boolean) => void;
- setPage: (value: PageProps | undefined) => void;
- addNewPage?: (page: PageProps) => void;
-};
-
-const DialogEditBadges = ({ isOpen, page, setIsOpen, setPage }: DialogEditBadgesProps) => {
- const { errorToast, successToast } = useToasts();
- const [badges, setbadges] = useState([]);
-
- useEffect(() => {
- if (isOpen && page && page.badges) {
- setbadges(Object.assign([], page.badges));
- }
- }, [isOpen]);
-
- const formik = useFormik({
- initialValues: {
- badges: [],
- },
- onSubmit: values => {
- if (values.badges.length < 10) {
- pageService
- .saveBadges(badges, page.pagename)
- .then(response => {
- successToast(response.message);
- setPage(response.page);
- setIsOpen(false);
- })
- .catch(error => {
- errorToast(error.message);
- })
- .finally(() => {
- formik.resetForm();
- formik.setSubmitting(false);
- });
- }
- },
- });
-
- return (
-
-
-
- );
-};
-
-export default DialogEditBadges;
diff --git a/src/app/(RootLayout)/account/DialogEditInfos.tsx b/src/app/(RootLayout)/account/DialogEditInfos.tsx
deleted file mode 100644
index efad2ef..0000000
--- a/src/app/(RootLayout)/account/DialogEditInfos.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-import { useEffect, useState } from "react";
-import { useToasts } from "../../context/ToastProvider/useToasts";
-import { PageProps } from "../../types/PageProps";
-import { useFormik } from "formik";
-import { CheckIcon, XMarkIcon } from "@heroicons/react/20/solid";
-import React from "react";
-import { ZozInput } from "../../components/Inputs";
-import ZozDialog from "../../components/Dialogs";
-import pageService from "../../services/page.service";
-import * as yup from "yup";
-
-type DialogEditInfosProps = {
- isOpen: boolean;
- page: PageProps;
- setIsOpen: (value: boolean) => void;
- setPage: (value: PageProps | undefined) => void;
- addNewPage?: (page: PageProps) => void;
-};
-
-const DialogEditInfos = ({ isOpen, setIsOpen, page, setPage }: DialogEditInfosProps) => {
- const { errorToast, successToast } = useToasts();
- const [newPagename, setNewPagename] = useState("");
- const [isPagenameAvailable, setPagenameAvailable] = useState(true);
-
- useEffect(() => {
- if (page?.pagename) setNewPagename(page.pagename);
- }, [isOpen]);
-
- useEffect(() => {
- let pagenameQuery: any;
- if (page?.pagename && newPagename === page.pagename) {
- setPagenameAvailable(true);
- } else {
- pagenameQuery = setTimeout(() => {
- if (newPagename && newPagename.length > 0)
- pageService
- .checkPagename(newPagename)
- .then(response => {
- setPagenameAvailable(response.isAvailable);
- })
- .catch(error => {
- errorToast(error.message);
- });
- }, 300);
- }
- return () => {
- clearTimeout(pagenameQuery);
- };
- }, [newPagename]);
-
- const formik = useFormik({
- initialValues: {
- uname: page?.uname || "",
- bio: page?.bio || "",
- },
- validationSchema: yup.object({
- uname: yup.string().required("Display Name is required"),
- }),
- onSubmit: values => {
- pageService
- .savePageInfos(values.uname, values.bio, page.pagename, newPagename?.length > 1 ? newPagename : page.pagename)
- .then(response => {
- successToast(response.message);
- setPage(response.page);
- setIsOpen(false);
- })
- .catch(error => {
- errorToast(error.message);
- if (error.errors) formik.setErrors(error.errors);
- })
- .finally(() => formik.setSubmitting(false));
- },
- });
-
- return (
-
-
-
- );
-};
-
-export default React.memo(DialogEditInfos);
diff --git a/src/app/(RootLayout)/account/DialogEditSocials.tsx b/src/app/(RootLayout)/account/DialogEditSocials.tsx
deleted file mode 100644
index b9be092..0000000
--- a/src/app/(RootLayout)/account/DialogEditSocials.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useToasts } from "../../context/ToastProvider/useToasts";
-import { PageProps, PagePropsSocialMedia } from "../../types/PageProps";
-import { useFormik } from "formik";
-import { PlusIcon, XMarkIcon } from "@heroicons/react/20/solid";
-import { ZozAutoComplete, ZozInput } from "../../components/Inputs";
-import { getSocialIcon } from "../Page/IconsList";
-import { socialIconsList } from "../Page/IconsList";
-import ZozDialog from "../../components/Dialogs";
-import PageIcon from "../Page/PageIcon";
-import pageService from "../../services/page.service";
-import * as yup from "yup";
-
-type DialogEditSocialsProps = {
- isOpen: boolean;
- page: PageProps;
- setIsOpen: (value: boolean) => void;
- setPage: (value: PageProps | undefined) => void;
- addNewPage?: (page: PageProps) => void;
-};
-
-const DialogEditSocials = ({ isOpen, page, setIsOpen, setPage }: DialogEditSocialsProps) => {
- const { errorToast, successToast } = useToasts();
- const [items, setItems] = useState();
- const [mediaSelected, setMediaSelected] = useState("discord");
-
- useEffect(() => {
- if (isOpen && page && page.socialMedias) {
- setItems(Object.assign([], page.socialMedias));
- }
- }, [isOpen]);
-
- const formik = useFormik({
- initialValues: {
- username: "",
- },
- validationSchema: yup.object({
- username: yup.string().required("Username is a required field"),
- }),
- onSubmit: values => {
- if (values.username && items && items.length < 30) {
- if (items?.some(item => item.key === mediaSelected)) {
- errorToast("This account has already been added!");
- } else {
- const newItems = Object.assign([], items);
- newItems?.push({
- key: mediaSelected,
- username: values.username,
- });
- setItems(newItems);
- }
- formik.resetForm();
- formik.setSubmitting(false);
- }
- },
- });
-
- return (
-
-
-
- );
-};
-
-export default DialogEditSocials;
diff --git a/src/app/(RootLayout)/account/DialogNewLink.tsx b/src/app/(RootLayout)/account/DialogNewLink.tsx
deleted file mode 100644
index 632b8e1..0000000
--- a/src/app/(RootLayout)/account/DialogNewLink.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import { useToasts } from "../../context/ToastProvider/useToasts";
-import { PageProps } from "../../types/PageProps";
-import { useFormik } from "formik";
-import { ZozInput, ZozRadioGroup } from "../../components/Inputs";
-import { LinkProps } from "../../types/LinkProps";
-import ZozDialog from "../../components/Dialogs";
-import linkService from "../../services/link.service";
-import * as yup from "yup";
-import AutoCompleteFolders from "./AutoCompleteFolders";
-
-type DialogNewLinkProps = {
- isOpen: boolean;
- page: PageProps;
- setIsOpen: (value: boolean) => void;
- setPage: (value: PageProps | undefined) => void;
- addNewPage?: (page: PageProps) => void;
-};
-
-const DialogNewLink = ({ isOpen, page, setIsOpen, setPage }: DialogNewLinkProps) => {
- const { errorToast, successToast } = useToasts();
-
- const formik = useFormik({
- initialValues: {
- url: "",
- label: "",
- icon: "",
- embedded: "none",
- isFolder: false,
- folderOwner: "",
- } as LinkProps,
- validationSchema: yup.object({
- label: yup.string().required("Label is a required field"),
- }),
- onSubmit: values => {
- linkService
- .createLink(values, page.pagename)
- .then(response => {
- successToast(response.message);
- setPage(response.page);
- setIsOpen(false);
- formik.resetForm();
- })
- .catch(error => {
- errorToast(error.message);
- if (error.errors) formik.setErrors(error.errors);
- })
- .finally(() => formik.setSubmitting(false));
- },
- });
-
- return (
-
-
-
- );
-};
-
-export default DialogNewLink;
diff --git a/src/app/(RootLayout)/account/PageEdit.tsx b/src/app/(RootLayout)/account/PageEdit.tsx
deleted file mode 100644
index f351478..0000000
--- a/src/app/(RootLayout)/account/PageEdit.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-import React, { useState } from "react";
-import { PageProps, PagePropsSocialMedia, PagePropsStatus } from "../../types/PageProps";
-import { useAuth } from "../../context/AuthProvider/useAuth";
-import { Cog6ToothIcon, PencilSquareIcon, ArrowUpTrayIcon, PlusIcon } from "@heroicons/react/20/solid";
-import { BigHead } from "@bigheads/core";
-import { getBadge, getStatusIcon } from "../Page/IconsList";
-import { defaultPage, setCssVariables } from "../Page/PageVariables";
-import { useToasts } from "../../context/ToastProvider/useToasts";
-import DialogEditInfos from "./DialogEditInfos";
-import SectionCard from "../Page/SectionCard";
-import PageIcon from "../Page/PageIcon";
-import PageInfos from "../Page/PageInfos";
-import pageService from "../../services/page.service";
-import PageEditColors from "./PageEditColors";
-import DialogEditSocials from "./DialogEditSocials";
-import DialogEditBadges from "./DialogEditBadges";
-import DialogNewLink from "./DialogNewLink";
-import PageLinks from "../Page/PageLinks";
-import "../Page/Page.css";
-import { LazyLoadImage } from "../../components/Loading";
-
-const mapSocials = (pageSocialMedias: PagePropsSocialMedia[]) => {
- return (
-
- {pageSocialMedias.map((media, idx) => (
-
- ))}
-
- {pageBadges.map((badge, idx) =>
- getBadge(badge) ? (
-
- {getBadge(badge)?.label}
-
- ) : null
- )}
-
- );
-};
-
-const getPageStatus = (status: PagePropsStatus) => {
- const statusIcon = getStatusIcon(status.key);
- return statusIcon ? (
-
-
-
-
-
-
- )}
-
-
setDialogOpen(true)}>
-
- ← {label}
-
-
-
- {/* Link to Account settings */}
- {auth && auth.email ? (
-
- setPage(undefined)}
- className="text-md bg-opacity-5 opacity-50 rounded-lg font-semibold hover:opacity-90 flex flex-row gap-2"
- >
- ← Click here to go back
-
-
- ) : null}
- {/* Page Background */}
-
-
-
-
- Upload background
-
-
-
-
- {/* Page Primary Card */}
-
-
- {getPageStatus(pageStatus)}
- {getAvatar(pfpUrl, uploadAvatar)}
-
-
-
- {mapBadges(pageBadges)}
-
-
- {mapSocials(pageSocialMedias)}
-
-
-
-
-
setDialogNewLink(true)}
- >
-
-
- {/* Page Other Cards */}
-
-
- );
-};
-
-export default React.memo(PageEdit);
diff --git a/src/app/(RootLayout)/account/page.tsx b/src/app/(RootLayout)/account/page.tsx
index b96b68f..68b5153 100644
--- a/src/app/(RootLayout)/account/page.tsx
+++ b/src/app/(RootLayout)/account/page.tsx
@@ -7,6 +7,7 @@ import Main from "@/components/Main/Main";
export default function AccountPage() {
const cookieStore = cookies();
const userCookie = cookieStore.get("zoz_user");
+ // TODO - userCookie is enought to validate this I think, just test and remove const user
const user = userCookie ? JSON.parse(userCookie?.value) : undefined;
if (user)
@@ -18,4 +19,5 @@ export default function AccountPage() {
);
else return {
+ sendConfirmEmail(email, "aa")
+ .then(() => {
+ successToast("Confirmation email successfully sended, check your inbox or spam directory");
+ })
+ .catch(err => {
+ errorToast(err);
+ });
+ }}
+ />
+ );
+};
+export default memo(ConfirmationButton);
diff --git a/src/app/(RootLayout)/confirm/[token]/page.tsx b/src/app/(RootLayout)/confirm/[token]/page.tsx
new file mode 100644
index 0000000..50168d0
--- /dev/null
+++ b/src/app/(RootLayout)/confirm/[token]/page.tsx
@@ -0,0 +1,61 @@
+import { Link } from "@/components/Buttons";
+import Main from "@/components/Main/Main";
+import Redirect from "@/components/Redirect";
+import { confirmEmail } from "@/services/TokenService";
+import { cookies } from "next/headers";
+import Image from "next/image";
+import ConfirmationButton from "./ConfirmationButton";
+
+export default async function ConfirmPage({ params }: { params: { token: string } }) {
+ const cookieStore = cookies();
+ const userCookie = cookieStore.get("zoz_user");
+ const user = userCookie ? JSON.parse(userCookie?.value) : undefined;
+
+ let confirmated = false;
+ try {
+ const req = await confirmEmail(params.token);
+ confirmated = req.confirmated;
+ } catch (err) {
+ confirmated = false;
+ }
+
+ if (user?.isEmailConfirmed) return
+ Account confirmation
+ {confirmated ? (
+
+ Account has been successfully confirmed{" "}
+ {user ? (
+
+ ) : (
+
+ Token invalid or expired{" "}
+ {user ? (
+
+ )}
+
+ );
+}
diff --git a/src/app/(RootLayout)/confirm/page.tsx b/src/app/(RootLayout)/confirm/page.tsx
index adf5c64..da16bc2 100644
--- a/src/app/(RootLayout)/confirm/page.tsx
+++ b/src/app/(RootLayout)/confirm/page.tsx
@@ -1,3 +1,5 @@
+import Redirect from "@/components/Redirect";
+
export default function ConfirmPage() {
- return confirm page ;
+ return
+
+
+
+ Full customizable page just for you!
+
+
+ You can match your background with the colors your like, choose custom badges and show your favorite songs.
+
+
+
+
+
+ );
+};
+export default Banner;
diff --git a/src/app/(RootLayout)/home/Hero.tsx b/src/app/(RootLayout)/home/Hero.tsx
new file mode 100644
index 0000000..f1b696b
--- /dev/null
+++ b/src/app/(RootLayout)/home/Hero.tsx
@@ -0,0 +1,32 @@
+import { LinkButton } from "@/components/Buttons";
+import Socials from "./Socials";
+import clsx from "clsx";
+import Username from "./Username";
+
+const Hero = () => {
+ return (
+
+
+
+
+ Link all your socials in one place
+
+
+
+ Manage one or more pages with just one account, create links and folders, track the views and engagement of
+ your socials and links and much more.
+
+
+ Create Account
+
+
+ );
+};
+export default Hero;
diff --git a/src/app/(RootLayout)/home/Home.tsx b/src/app/(RootLayout)/home/Home.tsx
index 8112717..6640933 100644
--- a/src/app/(RootLayout)/home/Home.tsx
+++ b/src/app/(RootLayout)/home/Home.tsx
@@ -1,47 +1,13 @@
+import Banner from "./Banner";
+import Hero from "./Hero";
+// import Users from "./Users";
+
export default function Home() {
return (
-
-
-
- Payments tool for software companies
-
-
- From checkout to global sales tax compliance, companies around the world use Flowbite to simplify their
- payment stack.
-
-
- Get started
-
-
-
-
- Speak to Sales
-
-
-
-
+ <>
+
+ {ICONS.map((src, idx) => (
+
+
+
+ ))}
+
+ zoz.bio/
+
+ {usernameInit}
+
+
+ );
+};
+export default Username;
diff --git a/src/app/(RootLayout)/home/Users.tsx b/src/app/(RootLayout)/home/Users.tsx
index 84f6352..f6197f4 100644
--- a/src/app/(RootLayout)/home/Users.tsx
+++ b/src/app/(RootLayout)/home/Users.tsx
@@ -3,14 +3,14 @@ export default function Users() {
-
Our Users
-
+
Our Users
+
Explore the whole collection of open-source web components and elements built with the utility classNamees
from Tailwind
-
+
-
+
- CEO & Web Developer
-
+ CEO & Web Developer
+
Bonnie drives the technical strategy of the flowbite platform and brand.
-
+
-
+ CTO
+
Jese drives the technical strategy of the flowbite platform and brand.
-
+
-
+
- Senior Front-end Developer
-
+ Senior Front-end Developer
+
Michael drives the technical strategy of the flowbite platform and brand.
-
+
-
+
- Marketing & Sale
-
+ Marketing & Sale
+
Lana drives the technical strategy of the flowbite platform and brand.