+
+
+ Congratulations!
+ You’re all set!
+
+
+
+
+ );
+};
+
+export default AIRequestSubmitted;
diff --git a/components/aiModelTraining/components/ChooseClass.tsx b/components/aiModelTraining/components/ChooseClass.tsx
new file mode 100644
index 0000000..e684388
--- /dev/null
+++ b/components/aiModelTraining/components/ChooseClass.tsx
@@ -0,0 +1,180 @@
+import React, { useEffect, useState } from "react";
+import ManVector from "@/utils/images/aiModelTraining/ManVector.svg";
+import WomanVector from "@/utils/images/aiModelTraining/WomanVector.svg";
+import Image from "next/image";
+import { Control, UseFormGetValues } from "react-hook-form/dist/types";
+import { UseFormSetValue, Controller } from "react-hook-form";
+import { Aimodel } from "@/types/user";
+import CustomButton from "@/components/shared/CustomButton";
+import { RootState } from "@/redux/store";
+import { useSelector } from "react-redux";
+import ArrowDownIcon from "@/utils/icons/shared/ArrowDownIcon";
+
+type Props = {
+ getValues: UseFormGetValues
+
+ + Your AI request has been + submitted +
++ Your AI model will begin training automatically once we have verified + your request. You can expect to hear back from us regarding the status + within the next 24 hours. +
+
+
+
+ );
+};
+
+export default ChooseClass;
diff --git a/components/aiModelTraining/components/ModelVerification.tsx b/components/aiModelTraining/components/ModelVerification.tsx
new file mode 100644
index 0000000..2853235
--- /dev/null
+++ b/components/aiModelTraining/components/ModelVerification.tsx
@@ -0,0 +1,181 @@
+import React, { useEffect, useState } from "react";
+import CustomCheckbox from "../../shared/CustomCheckbox";
+import ImagePlaceHolderGalleryIcon from "@/utils/icons/createPost/ImagePlaceHolderGalleryIcon";
+import { ImageState } from "@/types/post";
+import { Aimodel, AimodelRes } from "@/types/user";
+import { UseFormHandleSubmit } from "react-hook-form/dist";
+import CustomLoadingButton from "@/components/shared/CustomLoadingButton";
+import CheckBoxTickCheckedIcon from "@/utils/icons/shared/CheckBoxTickCheckedIcon";
+import { useAuthContext } from "@/context/AuthContext";
+import InputCropSingleImage from "@/components/shared/cropImage/singleCropImage/InputCropSingleImage";
+
+type Props = {
+ frontSite: ImageState | null;
+ backSite: ImageState | null;
+ setBackSite: React.Dispatch
+
+
+ Choose the gender you most biologically resemble this is
+
used for AI training purposes.
+
+ (
+ (
+
+
+ setHoveredClass(1)}
+ onMouseLeave={() => setHoveredClass(null)}
+ onClick={() => {
+ field.onChange((field.value = "Man"));
+ setSelectType("Man");
+ }}
+ >
+
+ )}
+ />
+
+
+ + Man +
+ {hoveredClass === 1 || seletType === "Man" ? ( + + ) : null} + setHoveredClass(2)}
+ onMouseLeave={() => setHoveredClass(null)}
+ onClick={() => {
+ field.onChange((field.value = "Woman"));
+ setSelectType("Woman");
+ }}
+ >
+
+ )}
+ />
+
+
+ + Woman +
+ {hoveredClass === 2 ? ( + + ) : null}{" "} +
+
+ + Why are there only two gender options? +
++ At Witit, we value diversity and inclusiveness and acknowledge that + gender is a personal and complex aspect of ones identity. If you + choose to participate in one of Witit’s offerings for using AI to + generate likeness, In order to accurately generate your likeness, we + ask for your biological gender or for the gender that best + represents you out of these options. However, we recognize that + gender can encompass a range of identities and expressions, and our + current technology is limited in its ability to capture these + nuances. +
++ We use the gender information you provide to help our AI understand + the basic physical characteristics of your appearance, but we + understand that it may not fully represent your gender identity. We + do not showcase your gender anywhere else so you will never be + misrepresented to the public. We are committed to working towards a + future where our technology can better reflect the diversity of + gender identities and expressions, and we appreciate your + understanding in the meantime. +
+
+
+
+ }
+ type="submit"
+ name="Next"
+ className={`w-[60%] py-2 max-w-[370px] mt-2`}
+ handleEvent={() => setCurrentState((preState) => preState + 1)}
+ />
+
+ + AI Yourself Will Cost you{" "} + {450 Credits.} +
+
+
+
+
+
+
+
+
+ We do this to protect you and keep Witit safe. You wouldn’t want
+ someone creating
+
unwanted photos of you on here would you?
+
+
+
+
+
+ ),
+ placeholderTitle: (
+ <>
+ + Upload a photo of yourself holding up 3 fingers +
+ + ), + }} + /> +
+
+
+ ),
+ placeholderTitle: (
+ <>
+ + Upload a photo of yourself holding up 3 fingers +
+ + ), + }} + /> +
+
+
+
+
+ + I agree to be bound by Witit’s{" "} + { + setPolicy("TERMS_OF_SERVICE"); + }} + > + Terms of Service + + , + { + setPolicy("CONTENT_POLICY"); + }} + > + Content Policy + + , and + { + setPolicy("PRIVACY_POLICY"); + }} + > + Privacy Policy. + +
+
+ {
+ handleSubmit(fillVerificationForm)();
+ }}
+ />
+
+
+
+ );
+};
+
+export default ModelVerification;
diff --git a/components/aiModelTraining/components/PhotosQualityRange.tsx b/components/aiModelTraining/components/PhotosQualityRange.tsx
new file mode 100644
index 0000000..490a506
--- /dev/null
+++ b/components/aiModelTraining/components/PhotosQualityRange.tsx
@@ -0,0 +1,90 @@
+import React from "react";
+import Slider from "@mui/material/Slider";
+import { theme } from "@/theme";
+import RangeTrueIcon from "@/utils/icons/setting/aiModelTranning/RangeTrueIcon";
+type Props = {
+ photosLength: number;
+};
+
+const PhotosQualityRange = ({ photosLength }: Props) => {
+ const sldiers = [{ offset: 10 }, { offset: 20 }, { offset: 30 }];
+
+ const SliderComponent = () => {
+ return (
+ <>
+ {sldiers.map((_, index) => (
+ + AI Yourself Will Cost you{" "} + 450 Credits. +
+{errorMessage}
+
+
+
+ );
+};
+export default PhotosQualityRange;
diff --git a/components/aiModelTraining/components/UploadGuidance.tsx b/components/aiModelTraining/components/UploadGuidance.tsx
new file mode 100644
index 0000000..5099ff3
--- /dev/null
+++ b/components/aiModelTraining/components/UploadGuidance.tsx
@@ -0,0 +1,161 @@
+import React from "react";
+import CheckIcon from "@/utils/icons/shared/CheckIcon";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import highQulity from "@/utils/images/aiModelTraining/highQulity.jpg";
+import varietyOfAngles from "@/utils/images/aiModelTraining/varietyOfAngles.jpg";
+import varietyOfLighting from "@/utils/images/aiModelTraining/varietyOfLighting.jpg";
+import varietyOfLocations from "@/utils/images/aiModelTraining/varietyOfLocations.jpg";
+import blurry from "@/utils/images/aiModelTraining/blurry.jpg";
+import multiplePeople from "@/utils/images/aiModelTraining/multiplePeople.jpg";
+import farAway from "@/utils/images/aiModelTraining/farAway.jpg";
+import CoveringFace from "@/utils/images/aiModelTraining/CoveringFace.jpg";
+import selfies from "@/utils/images/aiModelTraining/selfies.jpg";
+import sitting from "@/utils/images/aiModelTraining/sitting.jpg";
+import landscapeOriantation from "@/utils/images/aiModelTraining/landscapeOriantation.jpg";
+import Image from "next/image";
+
+const PhotosToUseList = [
+ { name: "High Quality", image: highQulity },
+ { name: "Varity of Lighting", image: varietyOfLighting },
+ { name: "Varity of Angles", image: varietyOfAngles },
+ { name: "Varity of Locations", image: varietyOfLocations },
+];
+const PhotosToAvoidList = [
+ { name: "Blurry", image: blurry },
+ { name: "Multiple People", image: multiplePeople },
+ { name: "Far Away", image: farAway },
+ { name: "Covering Your Face", image: CoveringFace },
+];
+const CouldProduceMixedResults = [
+ { name: "Selfies", image: selfies },
+ { name: "Sitting", image: sitting },
+ { name: "Landscape Orientation", image: landscapeOriantation },
+];
+
+const UploadGuidance = () => {
+ return (
+
+
+ + Number of qualified photos :{" "} + + {photosLength <= 10 + ? "Low" + : photosLength <= 20 + ? "Medium" + : "Good"} + +
+ +
+
+
+
+
+
+ + By submitting more photos, you can improve the AI Yourself quality and + make it better. +
+
+
+ );
+};
+
+export default UploadGuidance;
+
+const PhotoGuideItem = ({ photo }: any) => {
+ return (
+
+
+
+
+
+
+
+ Photos to use
+
+
+
+ {" "}
+ {PhotosToUseList.map((photo, index) => {
+ return (
+
+
+
+
+ );
+ })}
+
+
+ + For optimal results, please use photos similar in style to those + provided in the above section. +
+
+
+
+
+
+
+
+
+ Photos to Avoid
+
+ {" "}
+
+
+ {PhotosToAvoidList.map((photo, index) => {
+ return (
+
+
+
+ );
+ })}
+
+
+ + For optimal results, please avoid using photos that are similar in + style to those provided in the above section. +
+
+
+
+
+
+ !
+
+ Photos to Avoid
+
+
+
+ {CouldProduceMixedResults.map((photo, index) => {
+ return (
+
+
+ {index < CouldProduceMixedResults.length - 1 ? (
+
+ );
+ })}
+
+
+ ) : null}
+
+ !
+
+
+
+
+ !
+
+ + {CouldProduceMixedResults[2].name} +
++ Utilizing photos similar in style to those provided in the above + section may yield mixed results.photos similar in style to those + provided in the above section. +
+
+
+ );
+};
diff --git a/components/aiModelTraining/index.tsx b/components/aiModelTraining/index.tsx
new file mode 100644
index 0000000..fa83106
--- /dev/null
+++ b/components/aiModelTraining/index.tsx
@@ -0,0 +1,382 @@
+import React, { useEffect, useState } from "react";
+import CustomDialog from "@/components/shared/dialog/CustomDialog";
+import UploadGuidance from "./components/UploadGuidance";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import ChooseClass from "./components/ChooseClass";
+import { useAuthContext } from "@/context/AuthContext";
+import ModelVerification from "./components/ModelVerification";
+import AIRequestSubmitted from "./components/AIRequestSubmitted";
+import CustomButton from "../shared/CustomButton";
+import { useDispatch, useSelector } from "react-redux";
+import { Divider } from "@mui/material";
+import { theme } from "@/theme";
+import { ImageInfo } from "@/types";
+import { uploadImageToStorage } from "@/service/firebase/uploadImage";
+import { ImageState } from "@/types/post";
+import { RootState } from "@/redux/store";
+import { Aimodel } from "@/types/user";
+import { useForm } from "react-hook-form";
+import createAImodelApplication from "@/api/user/CreateAImodelApplication";
+import TermsOfServices from "../footerDialogs/TermsOfServices";
+import PrivacyPolicy from "../footerDialogs/PrivacyPolicy";
+import ContentPolicy from "../footerDialogs/ContentPolicy";
+import ModifyImages from "../shared/cropImage/multipleCropImage/ModifyImages";
+import InputCropMultiImages from "../shared/cropImage/multipleCropImage/InputCropMultiImages";
+import PhotosQualityRange from "./components/PhotosQualityRange";
+import ArrowDownIcon from "@/utils/icons/shared/ArrowDownIcon";
+
+const AIYourselfSteps = [
+ "Guidance",
+ "Upload Images",
+ "Select Gender",
+ "Verification",
+];
+
+type Props = {
+ setIsTrainModelDialogOpen: React.Dispatch+ {photo.name} +
+
+
+ ),
+ title: "Copy Post Link",
+ actionType: "COPY",
+ },
+ ];
+ if (selectedPost && selectedPost.postedBy.userId === user?.userId) {
+ baseMenu.push({
+ startIcon:
+
+ {selectedPost.caption && selectedPost.caption.length > 0 ? (
+
+
+
+
+ {
+ e.stopPropagation();
+ router.push(
+ redirectTouserProfile(
+ selectedPost.postedBy.userId,
+ user?.userId
+ )
+ );
+ }}
+ >
+
+
+
+
+
+
+ {selectedPost.repostedBy === null &&
+ selectedPost.generatedFrom === null ? null : (
+ { + e.stopPropagation(); + router.push( + redirectTouserProfile( + selectedPost.postedBy.userId, + user?.userId + ) + ); + }} + > + {selectedPost.postedBy.userName} +
+ {selectedPost.postedBy.userType === "VERIFIED" ? ( +
+
+ ) : null}
+ {
+ e.stopPropagation();
+ }}
+ >
+ {selectedPost.generatedFrom?.postId !== null &&
+ selectedPost.generatedFrom !== null ? (
+
+ )}
+
+
+ ) : null}
+
+
+ {selectedPost.repostedBy !== null ? (
+ <>
+ Reposted by{" "}
+ {
+ e.stopPropagation();
+ if (
+ selectedPost.repostedBy &&
+ selectedPost.repostedBy.userId !== user?.userId
+ ) {
+ router.push(
+ redirectTouserProfile(
+ selectedPost.repostedBy.userId,
+ user?.userId
+ )
+ );
+ } else {
+ if (user)
+ //to returen same profile
+ router.push("/profile");
+ }
+ }}
+ >
+ {selectedPost.repostedBy.userName}
+
+
+ ) : null}
+ {selectedPost.generatedFrom?.postId !== null &&
+ selectedPost.generatedFrom !== null ? (
+ <>
+ Recreated from Here
+
+ ) : null}
+
+
+
+
+ }
+ handleItemSelect={handleItemSelect}
+ />
+
+ {getRecentTimeFromTimeStamp(selectedPost.createdAt)}
+
+ + {selectedPost.caption} +
+ ) : null} + {/*+ {selectedPost.caption} +
*/} + handlePostClicked(e, selectedPost.postId)}
+ >
+ {selectedPost.image.map((postImage, index) => {
+ if (index < 5) {
+ return (
+
+
+ {
+ setSelectedImageIndex(index);
+ }}
+ className={`${
+ selectedPost.image.length === 1
+ ? "col-span-6 row-span-4"
+ : selectedPost.image.length === 2
+ ? "col-span-3 row-span-4"
+ : selectedPost.image.length === 3
+ ? index === 0
+ ? "col-span-3 row-span-4"
+ : "col-span-3 row-span-2"
+ : selectedPost.image.length === 4
+ ? "col-span-3 row-span-2"
+ : selectedPost.image.length === 5
+ ? index === 0 || index === 1
+ ? "col-span-3 row-span-2"
+ : "col-span-2 row-span-2"
+ : index === 0 || index === 1
+ ? "col-span-3 row-span-2"
+ : "col-span-2 row-span-2"
+ } `}
+ >
+
+ );
+ }
+ })}
+ {isNSFWVisible ? (
+
+ {selectedPost.image.length > 5 && index === 4 ? (
+
+
+ +{selectedPost.image.length - 5}
+
+ ) : null}
+
+ 5
+ ? "opacity-30"
+ : "opacity-100"
+ }`}
+ >
+
+
+
+ {!isNSFWVisible ? (
+
+
+ ) : null}
+
+
+
+ ) => {
+ e.stopPropagation();
+ dispatch(addViewedNSFWPost({ postId: postId }));
+ setIsNSFWVisible(!isNSFWVisible);
+ }}
+ />
+
+
+
+ NSFW
++ Sensitive content, viewer discretion advised. +
+
+ {
+ e.stopPropagation();
+ setIsLoading(true);
+
+ setCreditDialogInfo({
+ userInfo: selectedPost.postedBy,
+ postId: selectedPost.postId,
+ isPostAccessed: selectedPost.userActivity
+ .isAccessToViewPrompt
+ ? true
+ : false,
+ });
+ }}
+ >
+
+ ) : null}
+
+ + {formatLargeNumber(selectedPost.counts.view)} Views +
+ {isLoading && creditDialogInfo?.postId === selectedPost.postId ? ( +
+
+ ) : null}
+ {(selectedPost.isPromptAvailable &&
+ creditDialogInfo?.postId !== selectedPost.postId) ||
+ (!isLoading && creditDialogInfo) ? (
+
+
+
+ ) : null}
+
+ );
+};
+
+export default CirclePost;
diff --git a/components/circle/CirclePostInfoDialog/components/CurrentUserCommentItem.tsx b/components/circle/CirclePostInfoDialog/components/CurrentUserCommentItem.tsx
new file mode 100644
index 0000000..6c1317c
--- /dev/null
+++ b/components/circle/CirclePostInfoDialog/components/CurrentUserCommentItem.tsx
@@ -0,0 +1,121 @@
+import { useAuthContext } from "@/context/AuthContext";
+import Image from "next/image";
+import React, { useEffect, useState } from "react";
+import tempuser from "@/utils/images/tempuser.jpg";
+import { PostComment } from "@/types/post";
+import { type } from "os";
+import { getRecentTimeFromTimeStamp } from "@/service/shared/getRecentTimeFromTimeStamp";
+import { theme } from "@/theme";
+import { useRouter } from "next/router";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { redirectTouserProfile } from "@/service/shared/redirectTouserProfile";
+
+type Props = {
+ comment: PostComment;
+};
+const CurrentUserCommentItem = ({ comment }: Props) => {
+ const router = useRouter();
+ const user = useSelector((state: RootState) => state.user);
+
+ const [initialTime, setInitialTime] = useState("");
+
+ useEffect(() => {
+ setInitialTime(getRecentTimeFromTimeStamp(comment?.createdAt));
+ }, [comment]);
+ return (
+
+
+ {selectedPost.allowGenerations ? (
+
+
+
+ {
+ e.stopPropagation();
+ }}
+ onChange={handleLikeChange}
+ icon={
+ + {formatLargeNumber( + selectedPost.postId === recentInfo.postId + ? recentInfo.like.count + : selectedPost.counts.like + )} +
+
+
+
+ {selectedPost.postedBy.userId !== user?.userId ? (
+
+
+ + {formatLargeNumber(selectedPost.counts.comment)} +
+
+
+ ) : null}
+
+
+ + {formatLargeNumber( + selectedPost.postId === recentInfo.postId + ? recentInfo.repost.count + : selectedPost.counts.repost + )} +
+
+
+ ) : null}
+
+
+ {/* + {formatLargeNumber(selectedPost.counts.recreation)} +
*/} +
+
+ //
+
+
+ {initialTime}
++ {comment.comment.split(" ").map((word, index) => { + const match = word.match(/@(\S+)/); + + if ( + match && + comment.tag.find((text) => text.userName === match[1])?.userId + ) { + const username = match[1]; + return ( + { + comment?.tag?.map((tagInfo, index) => { + if (tagInfo.userName === username && tagInfo.userId) { + router.push( + redirectTouserProfile(tagInfo.userId, user?.userId) + ); + } + }); + }} + > + {word}{" "} + + ); + } else { + return {word} ; + } + })} + {/* {comment.comment.split(" ").map((word, index) => { + if (word.startsWith("@")) { + return ( + { + comment?.tag?.map((tagInfo, index) => { + if (tagInfo.userName === word.split("@")[1]) { + router.push( + redirectTouserProfile(tagInfo.userId, user?.userId) + ); + } + }); + }} + > + {word}{" "} + + ); + } else { + return {word} ; + } + })} */} +
+
+ //
+ );
+};
+
+export default CurrentUserCommentItem;
diff --git a/components/circle/CirclePostInfoDialog/components/FriendInfoItem.tsx b/components/circle/CirclePostInfoDialog/components/FriendInfoItem.tsx
new file mode 100644
index 0000000..97bb1bb
--- /dev/null
+++ b/components/circle/CirclePostInfoDialog/components/FriendInfoItem.tsx
@@ -0,0 +1,35 @@
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { FriendsList } from "@/types/circle";
+import { UserType } from "@/types/user";
+import appConstant from "@/utils/constants/withoutHtml/appConstant";
+import VerifiedIcon from "@/utils/icons/circle/VerifiedIcon";
+import React from "react";
+
+type Props = {
+ friendInfo: FriendsList;
+};
+const FriendInfoItem = ({ friendInfo }: Props) => {
+ return (
+
+ //
+
+ //
+ //
+ // {customDialogType === "CREDITS-VIEWPROMPT" ?
+ //
+
+ // {comment?.commenter?.userName}
+ //
+ //
+ //
+ // + // {getRecentTimeFromTimeStamp(comment?.createdAt)} + //
+ //+ // {comment.comment} + //
+ //
+
+ );
+};
+
+export default FriendInfoItem;
diff --git a/components/circle/CirclePostInfoDialog/components/OtherUserCommentItem.tsx b/components/circle/CirclePostInfoDialog/components/OtherUserCommentItem.tsx
new file mode 100644
index 0000000..0a07880
--- /dev/null
+++ b/components/circle/CirclePostInfoDialog/components/OtherUserCommentItem.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { PostComment } from "@/types/post";
+import { getRecentTimeFromTimeStamp } from "@/service/shared/getRecentTimeFromTimeStamp";
+import appConstant from "@/utils/constants/withoutHtml/appConstant";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { redirectTouserProfile } from "@/service/shared/redirectTouserProfile";
+import { useRouter } from "next/router";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+
+type Props = {
+ comment: PostComment;
+};
+const OtherUserCommentItem = ({ comment }: Props) => {
+ const router = useRouter();
+ const user = useSelector((state: RootState) => state.user);
+
+ return (
+
+
+
+ {friendInfo?.userName}
+ {friendInfo?.userType === UserType.VERIFIED ? (
+
+
+
+ );
+};
+
+export default OtherUserCommentItem;
diff --git a/components/circle/CirclePostInfoDialog/index.tsx b/components/circle/CirclePostInfoDialog/index.tsx
new file mode 100644
index 0000000..5f99fac
--- /dev/null
+++ b/components/circle/CirclePostInfoDialog/index.tsx
@@ -0,0 +1,983 @@
+import React, { useEffect, useRef, useState } from "react";
+import VerificationIcon from "@/utils/icons/circle/VerifiedIcon";
+import CommentQuestionIcon from "@/utils/icons/shared/CommentQuestionIcon";
+import CommentMessageIcon from "@/utils/icons/shared/CommentMessageIcon";
+import AutomodeBlackIcon from "@/utils/icons/shared/AutomodeBlackIcon";
+import { Checkbox, CircularProgress, Divider, IconButton } from "@mui/material";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import SendIcon from "@/utils/icons/circle/SendIcon";
+import { theme } from "@/theme";
+import CustomDialog from "@/components/shared/dialog/CustomDialog";
+import SynchronizeIcon from "@/utils/icons/circle/SynchronizeIcon";
+import Slider from "react-slick";
+import { Favorite, FavoriteBorder } from "@mui/icons-material";
+import { DropDownItem } from "@/types";
+import OutLinedAlertIcon from "@/utils/icons/shared/OutLinedAlertIcon";
+import ShareIcon from "@/utils/icons/shared/ShareIcon";
+import { useAuthContext } from "@/context/AuthContext";
+import { IconDropDown } from "@/components/shared/dropDown/IconDropDown";
+import { Post, PostComment, PromptDetail } from "@/types/post";
+import { getRecentTimeFromTimeStamp } from "@/service/shared/getRecentTimeFromTimeStamp";
+import ThreeVerticalDots from "@/utils/icons/circle/ThreeVerticalDots";
+import { getComments } from "@/api/post/getComments";
+import { RootState } from "@/redux/store";
+import { useDispatch, useSelector } from "react-redux";
+import OtherUserCommentItem from "./components/OtherUserCommentItem";
+import CurrentUserCommentItem from "./components/CurrentUserCommentItem";
+import appConstant from "@/utils/constants/withoutHtml/appConstant";
+import { postComment } from "@/api/post/postComment";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { formatLargeNumber } from "@/service/shared/formatLargeNumber";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import DeleteIcon from "@/utils/icons/shared/DeleteIcon";
+import { UserBaseInfo } from "@/types/user";
+import { useRouter } from "next/router";
+import LinkCopyIcon from "@/utils/icons/shared/LinkCopyIcon";
+import EditIcon from "@/utils/icons/shared/EditIcon";
+import { redirectTouserProfile } from "@/service/shared/redirectTouserProfile";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import { noCommentFound } from "@/utils/images";
+import { useDebounceEffect } from "@/hooks/useDebounceEffect";
+import getAllFriends from "@/api/cricle/getAllFriends";
+import { FriendsList } from "@/types/circle";
+import FriendInfoItem from "./components/FriendInfoItem";
+import OutsideClickHandler from "react-outside-click-handler";
+
+type Res = {
+ status: number;
+ data: PostComment[];
+ error: any;
+};
+type GetCommentsProps = {
+ lastDocId?: string;
+ res?: Res;
+ postId?: string;
+};
+type PostCommentRes = {
+ status: number;
+ data: PostComment;
+ error: any;
+};
+
+type Props = {
+ selectedPost: Post;
+ selectedImageIndex?: number;
+ handleEdit?: (selectedPost: Post) => void;
+ setSelectedPost: React.Dispatch
+
+
+
+
+
+
+
+
+
+ {comment?.commenter?.userName}
+
+
+
+ + {getRecentTimeFromTimeStamp(comment?.createdAt)} +
++ {comment.comment.split(" ").map((word, index) => { + const match = word.match(/@(\S+)/); + + if ( + match && + comment.tag.find((text) => text.userName === match[1])?.userId + ) { + const username = match[1]; + return ( + { + comment?.tag?.map((tagInfo, index) => { + if (tagInfo.userName === username && tagInfo.userId) { + router.push( + redirectTouserProfile(tagInfo.userId, user?.userId) + ); + } + }); + }} + > + {word}{" "} + + ); + } else { + return {word} ; + } + })} +
+
+
+
+ ),
+ nextArrow: (
+
+
+
+ ),
+ };
+
+ const handleLikeChange = (e: React.ChangeEvent
+
+ ),
+ title: "Copy Post Link",
+ actionType: "COPY",
+ },
+ ];
+ if (selectedPost && selectedPost.postedBy.userId === user?.userId) {
+ baseMenu.push({
+ startIcon:
+
+ {selectedPost.caption && selectedPost.caption.length > 0 ? (
+
+
+
+
+
+ {
+ e.stopPropagation();
+ router.push(
+ redirectTouserProfile(
+ selectedPost.postedBy.userId,
+ user?.userId
+ )
+ );
+ }}
+ >
+
+
+
+
+
+
+ {selectedPost.repostedBy === null &&
+ selectedPost.generatedFrom === null ? null : (
+ { + e.stopPropagation(); + router.push( + redirectTouserProfile( + selectedPost.postedBy.userId, + user?.userId + ) + ); + }} + > + {selectedPost.postedBy.userName} +
+ + {selectedPost.postedBy.userType === "VERIFIED" ? ( +
+
+ ) : null}
+ {
+ e.stopPropagation();
+ }}
+ >
+ {selectedPost.generatedFrom?.postId !== null &&
+ selectedPost.generatedFrom !== null ? (
+
+ )}
+
+
+ ) : null}
+
+
+ {selectedPost.repostedBy !== null ? (
+ <>
+ Reposted by{" "}
+ {
+ e.stopPropagation();
+ if (
+ selectedPost.repostedBy &&
+ selectedPost.repostedBy.userId !==
+ user?.userId
+ ) {
+ router.push(
+ redirectTouserProfile(
+ selectedPost.repostedBy.userId,
+ user?.userId
+ )
+ );
+ } else {
+ if (user) router.push("/profile");
+ }
+ }}
+ >
+ {selectedPost.repostedBy.userName}
+
+
+ ) : null}
+ {selectedPost.generatedFrom?.postId !== null &&
+ selectedPost.generatedFrom !== null ? (
+ <>
+ Recreated from{" "}
+ Here
+
+ ) : null}
+
+
+
+
+ }
+ handleItemSelect={handleItemSelect}
+ />
+
+ {getRecentTimeFromTimeStamp(selectedPost.createdAt)}
+
+ + {selectedPost.caption} +
+ ) : null} + +
+ 2
+ ? "text-primary-main"
+ : "text-grey-300 cursor-default"
+ }`}
+ >
+
+ }
+ EndIconStyle=" cursor-pointer text-grey-100"
+ className={` border-none ${
+ lastWord?.word ? "rounded-t-none " : ""
+ } `}
+ onChange={(e: React.ChangeEvent
+
+
+ (slider = slider)}
+ {...sliderSettings}
+ className=" slick_slider_arrow w-[342px] h-[445px] flex flex-row justify-start items-center rounded-md overflow-hidden"
+ >
+ {selectedPost.image.map((postImage, index) => {
+ return (
+
+
+ {selectedPost.image.length > 1 ? (
+
+
+
+ );
+ })}
+ + {currentslide} of {selectedPost.image.length} +
+ ) : null} +
+
+
+ {
+ e.stopPropagation();
+ setIsLoading(true);
+
+ setCreditDialogInfo({
+ userInfo: selectedPost.postedBy,
+ postId: selectedPost.postId,
+ isPostAccessed: selectedPost.userActivity
+ .isAccessToViewPrompt
+ ? true
+ : false,
+ });
+ // setCustomDialogType("CREDITS-VIEWPROMPT");
+ }}
+ >
+
+ ) : null}
+
+ + {formatLargeNumber(selectedPost.counts.view)} Views +
+ + {isLoading ? ( +
+
+ ) : null}
+ {selectedPost.isPromptAvailable && !isLoading ? (
+
+
+
+
{" "}
+ {selectedPost.allowGenerations ? (
+
+
+
+ {
+ e.stopPropagation();
+ }}
+ onChange={handleLikeChange}
+ icon={
+
+ + {formatLargeNumber( + selectedPost.postId === recentInfo.postId + ? recentInfo.like.count + : selectedPost.counts.like + )} +
+
+
+
+ {selectedPost.postedBy.userId !== user?.userId ? (
+
+
+ + {formatLargeNumber(selectedPost.counts.comment)} +
+
+
+ ) : null}
+
+
+ + {formatLargeNumber( + selectedPost.postId === recentInfo.postId + ? recentInfo.repost.count + : selectedPost.counts.repost + )} +
+
+
+ ) : null}
+
+
+ {/* + {formatLargeNumber(selectedPost.counts.recreation)} +
*/} +
+
+
+
+
+
+ Comments
++ ({formatLargeNumber(selectedPost.counts.comment)}) +
+
+
+ )}
+
+ {selectedPost.counts.comment === 0 ||
+ (comments.length === 0 && isCommentsFetched) ? (
+
+ ) : (
+
+ {/* change size of nocommentfound image */}
+
+
+ }
+ title="No Comments Yet"
+ description="Begin the conversation.."
+ />
+
+
+
+ }
+ style={{
+ display: "flex",
+ flexDirection: "column-reverse",
+ gap: "1.25rem",
+ }}
+ scrollableTarget="commentsScrollableDiv"
+ >
+ {comments.map((comment, index) => {
+ return (
+
+ {comment.commenter.userId === user?.userId ? (
+
+ );
+ })}
+
+
+ {lastWord?.word ? (
+
+ ) : null}
+
+
+ {
+ setFriendsList([]);
+ setLastWord({ word: null, tagged: false });
+ setHasMoreFriends(true);
+ }}
+ >
+ {" "}
+
+
+
+ {friendsList.length === 0 && !hasMoreFriends ? (
+
+ )}
+
+
+
+ }
+ scrollableTarget="friendListScrollableDiv"
+ style={
+ hasMoreFriends ? {} : { overflow: "hidden" }
+ }
+ >
+
+ {friendsList.map((friend, index) => (
+
+
+ {
+ const segments =
+ inputComment.split("@");
+ const lastSegment =
+ segments[segments.length - 1];
+ const newComment =
+ inputComment.replace(
+ `@${lastSegment}`,
+ `@${friend.userName}`
+ );
+ setInputComment(newComment);
+ setFriendsList([]);
+ setLastWord({
+ word: null,
+ tagged: false,
+ });
+ setHasMoreFriends(true);
+ setLastWord((prev) => {
+ if (!prev) return null;
+ return { ...prev, tagged: true };
+ });
+ // setHasMoreFriends(true);
+ }}
+ >
+
+ ))}
+
+
+
+
+ {
+ setCustomDialogType(null);
+ }}
+ >
+
+
+
+
+
+
+ Total Credit Balance
+
+
+ 10
+
+
+
+ {/* circle -> viewprompt */}
+
+
+
+
+
+
+ Credit Amount
+
+
+ 6.50
+
+
+
+
+
+
+
+
+
+
+
+ Gerdes
+
+
+ + My favorite color is every color and none of the colors all at + once but also it not even a moment. Does that definitely make + sense? +
+
+ {
+ setCustomDialogType(null);
+ setCustomDrawerType("CREDITDRAWER-VIEWPROMPT");
+ }}
+ />
+
+ + By submitting this request you agree to witit’s +
++ + Privacy Policy + {" "} + and + + Terms of Use + +
+
+
+ {
+ if (!isPromptLoading) getMyPrompt();
+ }}
+ >
+ {isPromptLoading ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ {!selectedImage ? (
+
+
+
+ ),
+ placeholderTitle: <>,
+ }}
+ />
+
+ ) : (
+ {
+ setSelectedImage(null);
+ setIsShowDeleteIcon(false);
+ }}
+ onMouseEnter={() => setIsShowDeleteIcon(true)}
+ onMouseLeave={() => setIsShowDeleteIcon(false)}
+ >
+ {isShowDeleteIcon ? (
+
+ )}
+
+
+ ) : null}
+
+ (
+ ) => {
+ field.onChange(e.target.value);
+ }}
+ placeholder="What you want to create..?"
+ EndIcon={
+ isGetChargeLoading ? (
+
+
+ ) : (
+ 3
+ ? "text-primary-main cursor-pointer"
+ : "text-grey-300 cursor-default"
+ }
+ >
+
+ )
+ }
+ EndIconHandleEvent={() => {
+ if (field.value && field.value.split(" ").length > 3) {
+ handleGetGenerationCharge();
+ }
+ }}
+ className="text-grey-100 hover:text-primary-main rounded-xl bg-grey-900 border-0 h-full py-2 min-h-[60px]"
+ />
+ )}
+ />
+
+
+ {
+ handleChangeDrawerType("FILTER");
+ }}
+ >
+
+
+
+ );
+};
diff --git a/components/create/components/FilterDrawer/components/Creations.tsx b/components/create/components/FilterDrawer/components/Creations.tsx
new file mode 100644
index 0000000..81c1517
--- /dev/null
+++ b/components/create/components/FilterDrawer/components/Creations.tsx
@@ -0,0 +1,358 @@
+import { useGenerationContext } from "@/components/create/context/GenerationContext";
+import CustomButton from "@/components/shared/CustomButton";
+import CustomCheckbox from "@/components/shared/CustomCheckbox";
+import { CustomSlider } from "@/components/shared/CustomSlider";
+import { RootState } from "@/redux/store";
+import { CreationSettings } from "@/types/ai";
+import { imageSizes } from "@/utils/constants/withoutHtml/ai";
+import { aspectRatioList } from "@/utils/constants/withoutHtml/common";
+import CheckBoxEmptyIcon from "@/utils/icons/shared/CheckBoxEmptyIcon";
+import CheckBoxFillCheckedIcon from "@/utils/icons/shared/CheckBoxFillCheckedIcon";
+import CheckBoxTickCheckedIcon from "@/utils/icons/shared/CheckBoxTickCheckedIcon";
+import { ChangeEvent } from "react";
+import { useSelector } from "react-redux";
+
+type Props = {
+ creationSettings: CreationSettings;
+ setCreationSetting: (creationSettings: CreationSettings) => void;
+};
+
+export const Creations = ({ creationSettings, setCreationSetting }: Props) => {
+ const baseModels = useSelector(
+ (state: RootState) => state.models.baseModelList
+ );
+ const { selectedModel } = useGenerationContext();
+
+ const handleCreationSettingChange = (changes: Partial {
+ handleChangeDrawerType("MODEL_SELECTION");
+ }}
+ className="flex gap-3 h-full items-center bg-grey-900 rounded-xl text-common-white text-sm tracking-widest cursor-pointer font-light p-4"
+ >
+ {selectedModel?.modelName}
+
+
+
+
+
+
+ {baseModels.filter((model) => model.modelId === selectedModel?.modelId)
+ .length > 0 && (
+
+ );
+};
diff --git a/components/create/components/FilterDrawer/components/Inpainting.tsx b/components/create/components/FilterDrawer/components/Inpainting.tsx
new file mode 100644
index 0000000..59d7d32
--- /dev/null
+++ b/components/create/components/FilterDrawer/components/Inpainting.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import CustomCheckbox from "@/components/shared/CustomCheckbox";
+import CheckBoxEmptyIcon from "@/utils/icons/shared/CheckBoxEmptyIcon";
+import CheckBoxTickCheckedIcon from "@/utils/icons/shared/CheckBoxTickCheckedIcon";
+import { ChangeEvent } from "react";
+import { InPaintingSettings } from "@/types/ai";
+
+const InPainting = () => {
+ const [isMaskOnly, setIsMaskOnly] = useState(false);
+ return (
+
+
+ )}
+
+ Image Size
+
+ {imageSizes.slice(0, 2).map((item, index) => {
+ return (
+
+
+
+ handleCreationSettingChange({ imageSize: item.tag })
+ }
+ />
+
+ );
+ })}
+
+
+ Aspect Ratio
+
+ {aspectRatioList.map((item, index) => {
+ return (
+
+
+
+ handleCreationSettingChange({ aspectRatio: item.tag })
+ }
+ />
+
+ );
+ })}
+
+
+
+
+
+
+ Prompt Strength
++ This determines how much Witit’s AI should stick too your prompt. + Too much or too little can create and undesirable effect. +
+
+ `${value * 10}%`}
+ aria-label="pretto slider"
+ value={creationSettings.promptStrength}
+ step={1}
+ max={10}
+ min={0}
+ onChange={(event, newVal) =>
+ handleCreationSettingChange({
+ promptStrength: newVal as number,
+ })
+ }
+ />
+
+
+
+
+
+ Defination
++ This will increase the number of iterations our AI will make when + producing your photos. This can change your cost per creation. +
+
+ `${value}%`}
+ aria-label="pretto slider"
+ value={creationSettings.definition}
+ step={10}
+ max={100}
+ min={0}
+ onChange={(event, newVal) =>
+ handleCreationSettingChange({
+ definition: newVal as number,
+ })
+ }
+ />
+
+
+ ) =>
+ handleCreationSettingChange({
+ restoreFace: e.target.checked,
+ })
+ }
+ />
+
+
+
+
+ + handleCreationSettingChange({ + restoreFace: !creationSettings.restoreFace, + }) + } + > + Restore Faces +
++ Runs Another AI Model on top to create the face in the image. +
+
+ ) =>
+ handleCreationSettingChange({
+ preserveFaceDetails: e.target.checked
+ ? { preservationStrength: 0.5, definition: 50 }
+ : null,
+ })
+ }
+ />
+
+
+
+ { + handleCreationSettingChange({ + preserveFaceDetails: creationSettings.preserveFaceDetails + ? null + : { preservationStrength: 0.5, definition: 50 }, + }); + }} + > + Preserve Face Details +
++ Run the AI creation process one more time but only on your face to + ensure high quality results. +
+ {creationSettings.preserveFaceDetails ? ( +
+
+ ) : null}
+
+ `${value * 100}%`}
+ aria-label="pretto slider"
+ value={
+ creationSettings.preserveFaceDetails?.preservationStrength
+ }
+ step={0.1}
+ max={1}
+ min={0}
+ onChange={(event, newVal) => {
+ if (creationSettings.preserveFaceDetails) {
+ handleCreationSettingChange({
+ ...creationSettings,
+ preserveFaceDetails: {
+ ...creationSettings.preserveFaceDetails,
+ preservationStrength: newVal as number,
+ },
+ });
+ }
+ }}
+ />
+
+ + Face Preservation Strength +
++ too much or too little may cause undesirable effects +
+
+ `${value}%`}
+ aria-label="pretto slider"
+ value={creationSettings.preserveFaceDetails?.definition}
+ step={10}
+ max={100}
+ min={0}
+ onChange={(event, newVal) => {
+ if (creationSettings.preserveFaceDetails) {
+ handleCreationSettingChange({
+ ...creationSettings,
+ preserveFaceDetails: {
+ ...creationSettings.preserveFaceDetails,
+ definition: newVal as number,
+ },
+ });
+ }
+ }}
+ />
+
+ + Definition +
++ This will increase the number of iterations our AI will make + when producing your photos. +
+
+ ) =>
+ handleCreationSettingChange({
+ preserveHandDetails: e.target.checked
+ ? { preservationStrength: 0.5, definition: 50 }
+ : null,
+ })
+ }
+ />
+
+
+
+ { + handleCreationSettingChange({ + preserveHandDetails: creationSettings.preserveHandDetails + ? null + : { preservationStrength: 0.5, definition: 50 }, + }); + }} + > + Preserve Hand Details +
++ Run the AI creation process one more time but only on your hand to + ensure high quality results. +
+ {creationSettings.preserveHandDetails ? ( +
+
+ ) : null}
+
+ `${value * 100}%`}
+ aria-label="pretto slider"
+ value={
+ creationSettings.preserveHandDetails?.preservationStrength
+ }
+ step={0.1}
+ max={1}
+ min={0}
+ onChange={(event, newVal) => {
+ if (creationSettings.preserveHandDetails) {
+ handleCreationSettingChange({
+ ...creationSettings,
+ preserveHandDetails: {
+ ...creationSettings.preserveHandDetails,
+ preservationStrength: newVal as number,
+ },
+ });
+ }
+ }}
+ />
+
+ + Hand Preservation Strength{" "} +
++ too much or too little may cause undesirable effects{" "} +
+
+ `${value}%`}
+ aria-label="pretto slider"
+ value={creationSettings.preserveHandDetails?.definition}
+ step={10}
+ max={100}
+ min={0}
+ onChange={(event, newVal) => {
+ if (creationSettings.preserveHandDetails) {
+ handleCreationSettingChange({
+ ...creationSettings,
+ preserveHandDetails: {
+ ...creationSettings.preserveHandDetails,
+ definition: newVal as number,
+ },
+ });
+ }
+ }}
+ />
+
+ + Definition +
++ This will increase the number of iterations our AI will make + when producing your photos. +
+
+
+ );
+};
+
+export default InPainting;
diff --git a/components/create/components/FilterDrawer/components/PowerUpscale.tsx b/components/create/components/FilterDrawer/components/PowerUpscale.tsx
new file mode 100644
index 0000000..f365424
--- /dev/null
+++ b/components/create/components/FilterDrawer/components/PowerUpscale.tsx
@@ -0,0 +1,157 @@
+import { HiResSettings } from "@/types/ai";
+import React from "react";
+import CustomButton from "@/components/shared/CustomButton";
+import CustomCheckbox from "@/components/shared/CustomCheckbox";
+import { CustomSlider } from "@/components/shared/CustomSlider";
+import { imageSizes } from "@/utils/constants/withoutHtml/ai";
+import {
+ ResolutionList,
+ aspectRatioList,
+} from "@/utils/constants/withoutHtml/common";
+import CheckBoxEmptyIcon from "@/utils/icons/shared/CheckBoxEmptyIcon";
+import CheckBoxTickCheckedIcon from "@/utils/icons/shared/CheckBoxTickCheckedIcon";
+import { ChangeEvent } from "react";
+
+type Props = {
+ hiResSettings: HiResSettings | null;
+ setHiResSettings: (creationSettings: HiResSettings | null) => void;
+};
+
+const PowerUpscale = ({ hiResSettings, setHiResSettings }: Props) => {
+ const handleCreationSettingChange = (changes: Partial
+ ) => {
+ setIsMaskOnly(e.target.checked);
+ }}
+ />
+
+
+
+ { + setIsMaskOnly(!isMaskOnly); + }} + > + Recreate Mask Only{" "} +
++ Toggle this checkbox to inpaint 'Only Masked' areas or leave + unchecked for 'Whole Picture' processing. +
+
+
+ );
+};
+
+export default PowerUpscale;
diff --git a/components/create/components/FilterDrawer/components/Recreations.tsx b/components/create/components/FilterDrawer/components/Recreations.tsx
new file mode 100644
index 0000000..bde6654
--- /dev/null
+++ b/components/create/components/FilterDrawer/components/Recreations.tsx
@@ -0,0 +1,228 @@
+import CustomButton from "@/components/shared/CustomButton";
+import { CustomSlider } from "@/components/shared/CustomSlider";
+import CustomToggleSwitch from "@/components/shared/CustomToggleSwitch";
+import { RecreationSettings } from "@/types/ai";
+import { useEffect, useState } from "react";
+
+type Props = {
+ recreationSettings: RecreationSettings | null;
+ setRecreationSetting: (creationSettings: RecreationSettings) => void;
+};
+
+type RecreationItem = {
+ displayName: string;
+ tag: string;
+};
+
+const recreationTypeList: RecreationItem[] = [
+ {
+ displayName: "Copy Depth",
+ tag: "depth",
+ },
+ {
+ displayName: "Copy Pose",
+ tag: "pose",
+ },
+ {
+ displayName: "Copy Edges",
+ tag: "canny",
+ },
+];
+
+export const Recreations = ({
+ recreationSettings,
+ setRecreationSetting,
+}: Props) => {
+ const [isShowAdvanceSettings, setIsShowAdvanceSettings] = useState(
+ recreationSettings?.recreationType ? true : false
+ );
+
+ useEffect(() => {
+ setIsShowAdvanceSettings(recreationSettings?.recreationType ? true : false);
+ }, [recreationSettings?.recreationType]);
+
+ const handleRecreationSettingChange = (
+ changes: Partial
+ ) => {
+ if (e.target.checked) {
+ setHiResSettings({
+ definition: 50,
+ similarityStrength: 0.5,
+ increaseResolution: 1,
+ });
+ } else {
+ setHiResSettings(null);
+ }
+ }}
+ />
+
+
+ {hiResSettings ? (
+
+
+ { + if (hiResSettings) { + setHiResSettings(null); + } else { + setHiResSettings({ + definition: 50, + similarityStrength: 0.5, + increaseResolution: 1, + }); + } + }} + > + Configure Advance Recreation Settings +
+
+
+ ) : null}
+
+
{" "}
+
+
+ Defination
++ This will increase the number of iterations our AI will make + when producing your photos. This can change your cost per + creation. +
+
+ `${value}%`}
+ aria-label="pretto slider"
+ value={hiResSettings?.definition}
+ step={10}
+ max={100}
+ min={0}
+ onChange={(event, newVal) =>
+ handleCreationSettingChange({
+ definition: newVal as number,
+ })
+ }
+ />
+
+
+
{" "}
+
+
+ Similarity Strength
++ This determines how much Witit’s AI should stick too your + prompt. Too much or too little can create and undesirable + effect. +
+
+ {/* reverted */}
+
+ (Math.round(v * 10) / 10) * 100 + "%"}
+ aria-label="pretto slider"
+ value={1 - hiResSettings?.similarityStrength}
+ step={0.1}
+ max={1}
+ min={0}
+ onChange={(event, newVal) =>
+ handleCreationSettingChange({
+ similarityStrength:
+ Math.round((1 - (newVal as number)) * 10) / 10,
+ })
+ }
+ />
+
+
+
+ Increase Resolution
+
+ {ResolutionList.map((item, index) => {
+ return (
+
+
+
+ handleCreationSettingChange({
+ increaseResolution: item.tag,
+ })
+ }
+ />
+
+ );
+ })}
+
+
+ {/*
+ handleToggleAdvanceConfig()}
+ />
+
+ {recreationSettings.recreationType ? (
+ Configure Advance Recreation Settings
+
+
+ ) : null}
+ {recreationSettings.recreationTypeStrength ? (
+ Recreation Type
+
+ {recreationTypeList.map((item, index) => {
+ return (
+
+
+
+ handleRecreationSettingChange({
+ recreationType: item.tag,
+ })
+ }
+ />
+
+ );
+ })}
+
+
+ ) : null}
+
+
+ + Recreation Type Strength +
++ Recreation type provides additional control over how you’d like + to recreate a photo. +
+
+ `${value * 100}%`}
+ aria-label="pretto slider"
+ value={recreationSettings.recreationTypeStrength}
+ step={0.1}
+ max={1}
+ min={0}
+ onChange={(event, newVal) =>
+ handleRecreationSettingChange({
+ recreationTypeStrength: newVal as number,
+ })
+ }
+ />
+
+
+
+
+
+ Recreation Strength
++ Recreation Strength is a value that determines how much Witit’s AI + will take the recreated photo into account. +
+
+ {/* reverted */}
+ (Math.round(v * 10) / 10) * 100 + "%"}
+ marks={false}
+ valueLabelDisplay="auto"
+ aria-label="pretto slider"
+ value={1 - recreationSettings.recreationStrength}
+ step={0.1}
+ max={1}
+ min={0}
+ onChange={(event, newVal) =>
+ handleRecreationSettingChange({
+ recreationStrength:
+ Math.round((1 - (newVal as number)) * 10) / 10,
+ })
+ }
+ />
+
+
+
*/}
+
+ );
+};
diff --git a/components/create/components/FilterDrawer/index.tsx b/components/create/components/FilterDrawer/index.tsx
new file mode 100644
index 0000000..d8849a1
--- /dev/null
+++ b/components/create/components/FilterDrawer/index.tsx
@@ -0,0 +1,180 @@
+import React, { useEffect } from "react";
+import CustomButton from "@/components/shared/CustomButton";
+import { IconButton, List } from "@mui/material";
+import Image from "next/image";
+import { useState } from "react";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import CustomInputTag from "@/components/shared/CustomInputTag";
+import { filterImage } from "@/utils/images";
+import { Creations } from "./components/Creations";
+import { Recreations } from "./components/Recreations";
+import { GenerationSetting } from "@/types/ai";
+import { initialGenerationSetting } from "@/utils/constants/withoutHtml/ai";
+import PowerUpscale from "./components/PowerUpscale";
+import Inpainting from "./components/Inpainting";
+import CustomAccordion from "@/components/shared/CustomAccordion";
+import CustomCheckbox from "@/components/shared/CustomCheckbox";
+import CheckBoxEmptyIcon from "@/utils/icons/shared/CheckBoxEmptyIcon";
+import CheckBoxTickCheckedIcon from "@/utils/icons/shared/CheckBoxTickCheckedIcon";
+import ReverseIcon from "@/utils/icons/shared/ReverseIcon";
+
+const menuOptions = [
+ { name: "Negative Prompts", key: "NEGATIVE_PROMPTS" },
+ { name: "Creations", key: "CREATIONS" },
+ { name: "Recreations", key: "RECREATIONS" },
+ { name: "Power Upscale", key: "POWER_UPSCALE" },
+ { name: "Inpainting", key: "INPAINTING" },
+];
+
+type Props = {
+ handleCloseDrawer: () => void;
+ generationSetting: GenerationSetting;
+ setGenerationSetting: React.Dispatch
+
+ Recreation Type
+
+
+
+
+
+
+
+
+ Recreation Type Strength
++ Recreation type provides additional control over how you’d like + to recreate a photo. +
+
+
+
+
+
+
+ Recreation Strength
++ Recreation Strength is a value that determines how much Witit’s + AI will take the recreated photo into account. +
+
+
+
+
+
+
+ Filters
+
+
+
+
+
+ );
+};
+
+export default FilterDrawer;
diff --git a/components/create/components/GenerationCreditDialog.tsx b/components/create/components/GenerationCreditDialog.tsx
new file mode 100644
index 0000000..9a21e0a
--- /dev/null
+++ b/components/create/components/GenerationCreditDialog.tsx
@@ -0,0 +1,286 @@
+import { Divider, IconButton } from "@mui/material";
+import CustomToggleSwitch from "../../shared/CustomToggleSwitch";
+import CreditIcon from "@/utils/icons/topbar/CreditIcon";
+import { theme } from "@/theme";
+import React, { useEffect, useState } from "react";
+import CustomDialog from "../../shared/dialog/CustomDialog";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import { creditDialogBg } from "@/utils/images";
+import CustomButton from "../../shared/CustomButton";
+import {
+ Control,
+ Controller,
+ UseFormGetValues
+} from "react-hook-form";
+import { AiCharges, PostAiGeneration } from "@/types/ai";
+import RocketIcon from "@/utils/icons/shared/RocketIcon";
+import { CustomImagePreview } from "../../shared/CustomImagePreview";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import CustomLoadingButton from "@/components/shared/CustomLoadingButton";
+import TermsOfServices from "@/components/footerDialogs/TermsOfServices";
+import PrivacyPolicy from "@/components/footerDialogs/PrivacyPolicy";
+import { useGenerationContext } from "../context/GenerationContext";
+import { useAuthContext } from "@/context/AuthContext";
+import CustomInsufficientCredit from "@/components/shared/CustomInsufficientCredit";
+
+type Props = {
+ setIsCreditDialogOpen: React.Dispatch
+
+ handleChangeGenerationSetting({ negativePrompt })
+ }
+ />
+ }
+ />
+
+ handleChangeGenerationSetting({ creationSettings })
+ }
+ />
+ }
+ />
+
+ handleChangeGenerationSetting({ recreationSettings })
+ }
+ />
+ }
+ />
+
+
+ handleChangeGenerationSetting({ hiResSettings })
+ }
+ />
+ }
+ />
+
+
+
+
+
+
+
+
+
+
+ + Make this filter default{" "} +
++ So that next time our AI wil automatically use this setting. +
+
+ handleChanges({ isSet: false })}
+ disableRipple
+ >
+
+ handleChanges({ isSet: true })}
+ />
+
+
+
+ Reset to defaults
+
+
+
+ setIsCreditDialogOpen(false)}
+ >
+
+
+
+
+
+
+
+
+ Total Credit Balance
+
+
+ + {tempCredit + transferableCredit + nonTransferableCredit} +
+
+
+
+
+
+ (
+ {
+ // field.onChange(field.value === 4 ? 8 : 4);
+ // handleChargeChange();
+ // }}
+ // startNumber={4}
+ // endNumber={8}
+ // />
+ )}
+ />
+
+ Number of photos
+
+ {[2, 4, 8].map((item, index) => {
+ return (
+
+
+ //
+ {
+ field.onChange(item);
+ handleChargeChange();
+ }}
+ />
+
+ );
+ })}
+
+ (
+ {
+ field.onChange(!field.value);
+ handleChargeChange();
+ }}
+ startIcon={
+
+
+
+ Super Shoot
++ 10x the number of images created +
++ 10% off with supershoot +
+
+
+ }
+ endIcon={
+
+
+ }
+ />
+ )}
+ />
+
+
+ Total Order Amount
+
+
+ + {calculatedCharge} +
+
+
+
+ handleSubmit()}
+ loading={isButtonLoading}
+ />
+
+ {isnotEnoughCredit && (
+ + By submitting this request you agree to witit’s +
++ { + setPolicy("PRIVACY_POLICYS"); + }} + > + Privacy Policy + + and + { + setPolicy("TERMS_OF_SERVICES"); + }} + > + Terms of Use + +
+
+
+ )}
+ setIsImageHover(true)}
+ onMouseLeave={() => setIsImageHover(false)}
+ >
+ {isImageHover ? (
+
+
+
+ );
+};
diff --git a/components/create/components/Generations/components/GenerationItem/components/ImageContainer/components/ImagePreview.tsx b/components/create/components/Generations/components/GenerationItem/components/ImageContainer/components/ImagePreview.tsx
new file mode 100644
index 0000000..d6d5879
--- /dev/null
+++ b/components/create/components/Generations/components/GenerationItem/components/ImageContainer/components/ImagePreview.tsx
@@ -0,0 +1,54 @@
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { CustomTooltip } from "@/components/shared/CustomTooltip";
+import { Image } from "@/types/post";
+import { GenerationActionList } from "@/utils/constants/withHtml/ai";
+import { Box, Dialog, IconButton } from "@mui/material";
+
+type Props = {
+ handleClose: () => void;
+ aspectRatio: string;
+ imageView: Image;
+ handleImageAction: ({ type }: { type: string }) => void;
+};
+
+export const ImagePreview = ({
+ handleClose,
+ aspectRatio,
+ imageView,
+ handleImageAction,
+}: Props) => {
+ return (
+
+ );
+};
diff --git a/components/create/components/Generations/components/GenerationItem/components/ImageContainer/index.tsx b/components/create/components/Generations/components/GenerationItem/components/ImageContainer/index.tsx
new file mode 100644
index 0000000..6b11c74
--- /dev/null
+++ b/components/create/components/Generations/components/GenerationItem/components/ImageContainer/index.tsx
@@ -0,0 +1,151 @@
+import { GetAiGeneration } from "@/types/ai";
+import { CircularProgress, Grid } from "@mui/material";
+import { useState } from "react";
+import { ImageItem } from "./components/ImageItem";
+import { ImagePreview } from "./components/ImagePreview";
+import { Image } from "@/types/post";
+import { useGenerationContext } from "@/components/create/context/GenerationContext";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { getImageObject } from "@/service/shared/getImageObject";
+import { useAuthContext } from "@/context/AuthContext";
+
+const styles = {
+ responsiveGrid: {
+ xxl: 1,
+ xl: 1,
+ // lg: 5,
+ md: 1,
+ sm: 1,
+ xs: 1,
+ },
+};
+
+type HandleImageActionProps = {
+ type: string;
+ image: Image;
+};
+
+type Props = {
+ generation: GetAiGeneration;
+};
+
+export const ImageContainer = ({ generation }: Props) => {
+ const models = useSelector((state: RootState) => state.models);
+
+ const { setSelectedImage, setPrompt } = useGenerationContext();
+ const { setGenerationPost, setCustomDialogType, generationPost } =
+ useAuthContext();
+ const [imageView, setImageView] = useState {
+ setImageView(image);
+ }}
+ >
+
+ ) : null}
+
+ {GenerationActionList.slice(0, 2).map((item, index) => {
+ return (
+
+ ) => {
+ e.stopPropagation();
+ handleImageAction({ type: item.actionType || "MESSAGE" });
+ }}
+ className=" w-[30px] h-[30px] rounded-lg text-common-white bg-secondary-main hover:bg-primary-main hover:bg-opacity-100 bg-opacity-80 p-0 m-0 "
+ >
+ {item.startIcon}
+
+
+ );
+ })}
+
+ ) => {
+ e.stopPropagation();
+ setIsImageHover(false);
+ }}
+ className="w-[30px] aspect-square flex justify-center items-center rounded-lg bg-secondary-main hover:bg-primary-main hover:bg-opacity-100 bg-opacity-80"
+ >
+ {
+ handleSelect(item, image);
+ }}
+ position={{ vertical: "top", horizontal: "left" }}
+ listItems={GenerationActionList.slice(
+ 2,
+ GenerationActionList.length
+ )}
+ />
+
+
+
+ );
+ }
+ const handleSelect = (item: string, image: Image) => {
+ if (item === "POST") {
+ setCustomDialogType("POST");
+ setGenerationPost({ ...generation, generationImages: [image] });
+ console.log(image);
+ }
+ };
+
+ return (
+ Failed To Generate
+{generation.message}
+
+
+ {generation.generationImages
+ .filter((image) => image.url)
+ .map((image, index) => (
+
+
+ handleImageAction({ type, image })
+ }
+ />
+
+ ))}
+ {Array(generation.remainingGeneration)
+ .fill("")
+ .map((blank, index) => (
+
+
+ ))}
+
+ {imageView ? (
+ {
+ handleImageAction({ type, image: imageView });
+ setImageView(null);
+ }}
+ />
+ ) : null}
+
+ );
+};
diff --git a/components/create/components/Generations/components/GenerationItem/components/ModelContainer.tsx b/components/create/components/Generations/components/GenerationItem/components/ModelContainer.tsx
new file mode 100644
index 0000000..0760378
--- /dev/null
+++ b/components/create/components/Generations/components/GenerationItem/components/ModelContainer.tsx
@@ -0,0 +1,147 @@
+import CustomButton from "@/components/shared/CustomButton";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { useAuthContext } from "@/context/AuthContext";
+import { RootState } from "@/redux/store";
+import { GetAiGeneration } from "@/types/ai";
+import CopyIcon from "@/utils/icons/shared/CopyIcon";
+import RocketIcon from "@/utils/icons/shared/RocketIcon";
+import { IconButton } from "@mui/material";
+import dayjs from "dayjs";
+import { useSelector } from "react-redux";
+
+const sliderSettings = {
+ dots: false,
+ infinite: true,
+ speed: 500,
+ slidesToShow: 5,
+ slidesToScroll: 1,
+ rtl: true,
+ variableWidth: true,
+ prevArrow: (
+
+ ),
+ nextArrow: (
+
+ ),
+};
+
+type Props = {
+ generation: GetAiGeneration;
+};
+
+export const ModelContainer = ({ generation }: Props) => {
+ const user = useSelector((state: RootState) => state.user);
+
+ const { sendNotification } = useAuthContext();
+
+ const handleCopyProps = () => {
+ // Copy profile link
+ navigator.clipboard.writeText(generation.prompt);
+
+ sendNotification({ type: "SUCCESS", message: "Prompt Coppied!!" });
+ };
+
+ return (
+
+
+
+
+ );
+};
diff --git a/components/create/components/Generations/components/GenerationItem/index.tsx b/components/create/components/Generations/components/GenerationItem/index.tsx
new file mode 100644
index 0000000..75a3172
--- /dev/null
+++ b/components/create/components/Generations/components/GenerationItem/index.tsx
@@ -0,0 +1,72 @@
+import { getDayFromTimeStamp } from "@/service/shared/getDayFromTimeStamp";
+import { theme } from "@/theme";
+import { Divider } from "@mui/material";
+import { ImageContainer } from "./components/ImageContainer";
+import { ModelContainer } from "./components/ModelContainer";
+import { GetAiGeneration } from "@/types/ai";
+import React, { useEffect, useState } from "react";
+
+type DayItem = {
+ id: string;
+ day: string;
+};
+
+type Props = {
+ generation: GetAiGeneration;
+ listOfDays: DayItem[];
+ setListOfDays: React.Dispatch
+
+
+ {generation.modelDetails.name}
+
+ {generation.generatedFrom?.image ? (
+
+
+ ) : null}
+
+
+
+ handleCopyProps()}
+ >
+
+
+
+
+ 0
+ ? "border-b border-b-grey-400"
+ : ""
+ }`}
+ >
+
+ {generation.negativePrompt.length > 0 ? (
+ // + {generation.prompt} +
+
+ //
+ // {generation.negativePrompt.map((name, index) => {
+ // return (
+ //
+ //
+
+ //
+ // );
+ // })}
+ //
+ {generation.negativePrompt.map((name, index) => {
+ return (
+
+ ) : null}
+
+
+ );
+ })}
+
+ {name}
+
+
+ {generation.superShoot ? (
+
+
+
+ ) : null}
+ + {dayjs(generation.createdAt).format("hh:mm A")} +
+
+
+ {/* {listOfDays.filter((item) => item.id === generation.Id).length > 0 ? (
+
+
+
+ }
+ title="No Creation yet"
+ description="Haven't made anything yet. Start making cool AI images!"
+ />
+
+ );
+
+ return (
+ <>
+
+
+
+
+ );
+};
diff --git a/components/create/components/ModelSelectionDrawer/components/FriendModels/components/FriendModelItem/components/FriendInfo.tsx b/components/create/components/ModelSelectionDrawer/components/FriendModels/components/FriendModelItem/components/FriendInfo.tsx
new file mode 100644
index 0000000..436075a
--- /dev/null
+++ b/components/create/components/ModelSelectionDrawer/components/FriendModels/components/FriendModelItem/components/FriendInfo.tsx
@@ -0,0 +1,40 @@
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { FriendModel } from "@/types/ai";
+import ArrowDownIcon from "@/utils/icons/shared/ArrowDownIcon";
+import { profilePlaceholderImage } from "@/utils/images";
+import { IconButton } from "@mui/material";
+import React from "react";
+
+type Props = {
+ isOpen: boolean;
+ item: FriendModel;
+};
+
+export const FriendInfo = ({ isOpen, item }: Props) => {
+ return (
+ <>
+
+
+
+ }
+ style={{ display: "flex", flexDirection: "column-reverse" }}
+ scrollableTarget="generationScrollableDiv"
+ >
+ {generations.map((generation, index) => (
+
+
+
+
+
+
+ {item.userName}
++ {item.models.length} {item.models.length > 1 ? "Models" : "Model"} +
+
+
+
+
+
+
+ );
+};
diff --git a/components/create/components/ModelSelectionDrawer/components/FriendModels/index.tsx b/components/create/components/ModelSelectionDrawer/components/FriendModels/index.tsx
new file mode 100644
index 0000000..ecc927f
--- /dev/null
+++ b/components/create/components/ModelSelectionDrawer/components/FriendModels/index.tsx
@@ -0,0 +1,152 @@
+import { getFriendAiModels } from "@/api/ai/getFriendAiModels";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import { useAuthContext } from "@/context/AuthContext";
+import { RootState } from "@/redux/store";
+import SearchIcon from "@/utils/icons/topbar/SearchIcon";
+import React, { ChangeEvent, useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { FriendModelItem } from "./components/FriendModelItem";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { CircularProgress } from "@mui/material";
+import ArrowDownIcon from "@/utils/icons/shared/ArrowDownIcon";
+import { updateModels } from "@/redux/slices/modelSlice";
+
+type Props = {
+ handleScrollTop: () => void;
+};
+
+type LastDoc = {
+ lastDocId: string;
+ searchScore: number;
+};
+
+type GetFriendModelProps = {
+ lastDoc?: LastDoc;
+ search: string;
+};
+
+let docLimit = 10;
+
+export const FriendModelContainer = ({ handleScrollTop }: Props) => {
+ const dispatch = useDispatch();
+
+ const user = useSelector((state: RootState) => state.user);
+ const models = useSelector((state: RootState) => state.models);
+
+ const { sendNotification } = useAuthContext();
+
+ const [hasMoreModel, setHasMoreModel] = useState(true);
+ const [friendSearch, setFriendSearch] = useState("");
+
+ const ref = useRef setIsCollapse(!isCollapse)}
+ >
+
+
+ {item.models.map((model, index) => (
+
+ setSelectedModel({
+ modelId: model.modelId,
+ modelName: model.modelName,
+ classType: model.classType,
+ })
+ }
+ modelName={model.modelName}
+ className="border-grey-600 py-3"
+ />
+ ))}
+
+
+ ) =>
+ setFriendSearch(e.target.value)
+ }
+ />
+
+
+
+
+ }
+ placeholder="Search Model"
+ onChange={(e: ChangeEvent
+
+ Friends Model
+ handleScrollTop()}>
+
+
+
+
+ }
+ scrollableTarget="friendModelScrollableDiv"
+ >
+ {friendModelList.map((item, index) => (
+
+
+ ) : null}
+ {startIcon && startIcon}
+ {modelName}
+
+
+
+ );
+};
+
+export default ModelSelectionDrawer;
diff --git a/components/create/context/GenerationContext.tsx b/components/create/context/GenerationContext.tsx
new file mode 100644
index 0000000..a0942ad
--- /dev/null
+++ b/components/create/context/GenerationContext.tsx
@@ -0,0 +1,105 @@
+import { createContext, useContext, useEffect, useState } from "react";
+import { ImageInfo } from "@/types";
+import appConstant, {
+ defaultImageConstant,
+} from "@/utils/constants/withoutHtml/appConstant";
+import { GetAiGeneration, Model, PostAiGeneration } from "@/types/ai";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { io } from "socket.io-client";
+import { useForm } from "react-hook-form";
+
+type SelectedImage = {
+ imagePreview: string;
+ file: File;
+};
+
+type ContextType = {
+ selectedImage: SelectedImage | null;
+ setSelectedImage: React.Dispatch
+
+ Select Model
+ handleCloseDrawer()}
+ >
+
+
+
+
+
+
+ {models.baseModelList.map((item, index) => (
+
+
+
+ Your Model
+
+ {models.userModelList.map((item, index) => (
+ {
+ if (item.isActive) {
+ setSelectedModel({
+ modelId: item.modelId,
+ modelName: item.modelName,
+ classType: item.classType,
+ });
+ }
+ }}
+ />
+ ))}
+
+
+
+
+
+
+ }
+ className="lg:px-10 px-5 py-3 text-sm bg-primary-main bg-opacity-[0.16] rounded-lg text-primary-light"
+ />
+
+ handleCloseDrawer()}
+ />
+
+ {
+ setisImageHovered(true);
+ }}
+ onMouseLeave={() => {
+ setisImageHovered(false);
+ }}
+ >
+
+
+ ) : null} */}
+
+ )}
+ {/*
+ ) : null} */}
+
+ {post.category.slice(0, 3).map((catName, index) => {
+ const icon = CategoryList.filter(
+ (category) => category.name === catName
+ );
+ const isLastCat =
+ post.category.length <= 3
+ ? index === post.category.length - 1
+ : index === 2;
+ return (
+
+
+ );
+ })}
+
+ ) : null}
+
+ {/* {isImageHovered ? (
+
+ {icon.length > 0 ? (
+ icon[0].startIcon
+ ) : (
+
+
+
+
+ {post.category.map((cat_name, index) => {
+ return (
+ <>
+ {index < 3 ? (
+
+
+ ) : null}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ Jenny Wilson
+
+
+ );
+};
+
+export default ImagePreviewBox;
diff --git a/components/discover/ViewPromptDrawer.tsx b/components/discover/ViewPromptDrawer.tsx
new file mode 100644
index 0000000..81d88a8
--- /dev/null
+++ b/components/discover/ViewPromptDrawer.tsx
@@ -0,0 +1,239 @@
+import CreateIcon from "@/utils/icons/navbar/CreateIcon";
+import AutomodeBlackIcon from "@/utils/icons/shared/AutomodeBlackIcon";
+import CommentQuestionIcon from "@/utils/icons/shared/CommentQuestionIcon";
+import CopyIcon from "@/utils/icons/shared/CopyIcon";
+import DashIcon from "@/utils/icons/shared/DashIcon";
+import React, { useEffect } from "react";
+import CustomButton from "../shared/CustomButton";
+import CustomDrawer from "../shared/drawer/CustomDrawer";
+import { PromptDetail } from "@/types/post";
+import { imageSizes } from "@/utils/constants/withoutHtml/ai";
+import { IconButton } from "@mui/material";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import { useAuthContext } from "@/context/AuthContext";
+import MomentsIcon from "@/utils/icons/profile/MomentsIcon";
+
+type Props = {
+ setPromptDetails: React.Dispatch
+
+ {isNSFWVisible ? (
+
+ ) => {
+ e.stopPropagation();
+ dispatch(addViewedNSFWPost({ postId: postId }));
+ setIsNSFWVisible(!isNSFWVisible);
+ }}
+ />
+
+ ) : (
+
+
+ NSFW
++ Sensitive content, viewer discretion advised. +
+
+
+ )}
+
+
+
+ {
+ setPromptDetails(null);
+ }}
+ >
+
+
+
+
+
+
+
+ Prompt
+
+
+
+
+
+ {/*
+
+
+ handleCopyPrompt()}
+ >
+
+
+ Prompts Used
+
+ {promptDetails.prompt}
+
+
+
+ Model Name
+{promptDetails.modelName}
+
+ {promptDetails.negativePrompt &&
+ promptDetails.negativePrompt.length > 0 ? (
+
+
+
+ ) : null}
+ {promptDetails.creationSettings ? (
+
+
+
+
+ Negative Prompts
++ {promptDetails.negativePrompt.map( + (prompt, index) => + prompt + + (index < promptDetails.negativePrompt.length - 1 + ? ", " + : "") + )} +
+
+
+ ) : null}{" "}
+ {promptDetails.recreationSettings ? (
+
+
+
+
+ Creation Settings
+
+ {/* when imagesize.tag is same as promptDetails.creationSettings.imageSize.toString() that tiem i want tp return imagesize.name
+ write a code */}
+
+
+ value.tag ===
+ promptDetails.creationSettings.imageSize.toString()
+ )?.name || "-"
+ }
+ />
+
+
+
+ ) : null}
+ {promptDetails.hiResSettings ? (
+
+
+
+
+ Recreation Settings
+
+
+ ) : null}
+
+
+
+
+ Power Upscale Settings
+
+ {
+ setPromptDetails(null);
+ }}
+ />
+
*/}
+
+
+ );
+};
diff --git a/components/footerDialogs/ContactUs.tsx b/components/footerDialogs/ContactUs.tsx
new file mode 100644
index 0000000..8cc8417
--- /dev/null
+++ b/components/footerDialogs/ContactUs.tsx
@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+import CustomInputTextField from "../shared/CustomInputTextField";
+import { useAuthContext } from "@/context/AuthContext";
+import CustomDialogCommonTopBar from "../shared/dialog/GlobalDialogs/components/shared/CustomDialogCommonTopBar";
+import { SelectDropDown } from "../shared/dropDown/SelectDropDown";
+import { Controller, useForm } from "react-hook-form";
+import CustomLoadingButton from "../shared/CustomLoadingButton";
+import sendSupportEmail from "@/api/support/sendSupportEmail";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+
+const info = ["General", "Account", "Contact", "NSFW Content", "About Witit"];
+type Props = {
+ onCancel: () => void;
+};
+
+const ContactUs = ({ onCancel }: Props) => {
+ const [isLoading, setIsLoading] = useState{title}
+{value}
+
+
+ );
+};
+
+export default ContactUs;
diff --git a/components/footerDialogs/ContentPolicy.tsx b/components/footerDialogs/ContentPolicy.tsx
new file mode 100644
index 0000000..cacbdf7
--- /dev/null
+++ b/components/footerDialogs/ContentPolicy.tsx
@@ -0,0 +1,111 @@
+
+import React from "react";
+import CustomDialogCommonTopBar from "../shared/dialog/GlobalDialogs/components/shared/CustomDialogCommonTopBar";
+
+type Props = {
+ onCancel: () => void;
+};
+const ContentPolicy = ({ onCancel }: Props) => {
+ return (
+
+
+
+
+
+
+ + Subject +
+
+ {
+ return (
+ <>
+
+ + {errors.message?.message} +
++ We value all of our users, their thoughts, concerns, and support. + However we aren’t able to get back to everyone. We will do our best to + review your message as soon as we can. +
+
+ {
+ handleSubmit(sendContact)();
+ }}
+ />
+
+
+
+ );
+};
+
+export default ContentPolicy;
diff --git a/components/footerDialogs/PrivacyPolicy.tsx b/components/footerDialogs/PrivacyPolicy.tsx
new file mode 100644
index 0000000..5aa3deb
--- /dev/null
+++ b/components/footerDialogs/PrivacyPolicy.tsx
@@ -0,0 +1,124 @@
+import { theme } from "@/theme";
+import { Divider } from "@mui/material";
+import React from "react";
+import CustomDialogCommonTopBar from "../shared/dialog/GlobalDialogs/components/shared/CustomDialogCommonTopBar";
+
+type Props = {
+ onCancel?: () => void;
+};
+const PrivacyPolicy = ({ onCancel }: Props) => {
+ return (
+
+
+ + Introduction: +
++ Witit is a social media platform leveraging artificial intelligence + (“AI”) to enable users to create and share distinctive content, such + as AI-generated photographs. We aim to create a safe, respectful + community and uphold standards for appropriate content. This Content + Policy guides users in understanding the type of content that can be + shared on the platform, in alignment with all applicable laws and + regulations. +
{" "} ++ Prohibited Content: +
++ To maintain a positive user experience, we prohibit sharing of content + that is illegal, harmful, threatening, abusive, harassing, defamatory, + obscene, or offensive, which includes but is not limited to: +
+-
+
- + Content promoting or glorifying hate, violence, or discrimination + based on race, ethnicity, religion, gender, sexual orientation, or + any other characteristic. + +
- Content depicting or glorifying violence or self-harm. +
- Harassing, bullying, or defamatory content. +
- Illegal content or content encouraging illegal activities. +
- + Content infringing on the intellectual property rights of third + parties. + +
+ Witit retains the right to remove any content that violates this + Content Policy and may terminate the accounts of users engaging in + prohibited conduct. +
++ Reporting Prohibited Content: +
++ If you come across content you believe infringes upon this Content + Policy, please report it to us at support@witit.com. We'll review + all reported content and take appropriate action, including, but not + limited to, removing the content or terminating the user's + account. +
++ Disclaimer of Responsibility: +
++ While we aim to provide a safe platform, Witit is not responsible for + content uploaded, posted, or shared by its users. We do not endorse or + guarantee the accuracy, completeness, or reliability of any content. + Users bear the responsibility for their own content and the + repercussions of sharing it. +
{" "} ++ Use of AI-generated Content: +
++ Content created using our AI is subject to the same guidelines as any + other user-generated content on our platform. Users are solely + responsible for how they use and share AI-generated content. +
{" "} ++ Verification and Training Data: +
++ As part of our user verification process, we may use identification + documents and personal photos. However, these are used strictly for + verification and AI training and must not be shared or posted as + content on our platform. +
++ Changes to Content Policy: +
++ Witit reserves the right to amend this Content Policy as required. We + encourage users to review this policy regularly to stay informed about + changes. Continued use of the Witit platform after modifications + implies acceptance of the revised Content Policy. +
++ Contact Information: +
++ Should you have any queries or concerns related to this Content Policy + or the Witit platform, kindly reach out to us at support@witit.com. +
+
+
+ );
+};
+
+export default PrivacyPolicy;
diff --git a/components/footerDialogs/TermsOfServices.tsx b/components/footerDialogs/TermsOfServices.tsx
new file mode 100644
index 0000000..2e4de5f
--- /dev/null
+++ b/components/footerDialogs/TermsOfServices.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import CustomDialogCommonTopBar from "../shared/dialog/GlobalDialogs/components/shared/CustomDialogCommonTopBar";
+type Props = {
+ onCancel?: () => void;
+};
+
+const TermsOfServices = ({ onCancel }: Props) => {
+ return (
+
+
+ + Introduction: +
++ Witit is a social media platform that employs artificial intelligence + (“AI”) to enable users to create and share unique content, such as + AI-generated images. Upholding the privacy and trust of our users is + at the heart of our operations, and this Privacy Policy outlines our + data collection, usage, and sharing practices. +
++ Information Collection and Use: +
++ To deliver our services and enhance the Witit platform, we gather and + utilize personal data. This might encompass information like your + name, email address, payment details, and content you generate, post, + or share on the platform. +
++ We also assemble data regarding your interactions with the platform + and other users, which assists us in improving our services and + ensuring compliance with our Terms of Service. +
++ Information Sharing and Disclosure: +
++ We respect your privacy and do not sell or rent your personal + information to third parties for marketing purposes. However, we may + share your information with affiliates and service providers as + necessary for the provision and operation of our services. +
++ In certain cases, Witit may disclose personal information in + accordance with legal requirements, such as a court order or subpoena, + or in response to a law enforcement agency’s request. We may also + release such data if we believe it necessary to uphold our rights, + safeguard your security or the safety of others, investigate potential + fraudulent activity, or answer a government request. +
++ Security: +
++ Witit takes comprehensive measures, including encryption and secure + servers, to ensure the security of your personal information. + Nonetheless, no method of transmission over the internet or method of + electronic storage is completely secure, hence we cannot guarantee the + absolute security of your data. +
++ User Verification Information: +
++ To maintain the integrity of our platform, we collect identification + documents, such as driver's licenses, during our user + verification process. However, this information is used solely for + verification purposes and is not used or disclosed for any other + purpose. +
++ AI Training Data: +
++ We may use the content you upload to Witit as training data for our + AI. We are committed to handling this data responsibly and will not + use it for purposes beyond improving our AI capabilities. +
++ Off-Platform Content Distribution: +
++ Please note that we are not responsible for any content generated on + Witit that is shared or distributed off our platform. Our commitment + to user privacy extends only to data and content shared within our + platform. +
++ Cookies: +
++ Witit may employ cookies and similar technologies to monitor and + gather data about your usage of the Witit platform. You can manage the + use of cookies via your browser settings. +
++ Changes to Privacy Policy: +
++ Witit may periodically update this Privacy Policy. We recommend you + review this policy regularly to stay informed about our practices. + Your continued use of the Witit platform following any modifications + indicates your acceptance of the updated Privacy Policy. +
++ Contact Information: +
++ For any queries or concerns regarding this Privacy Policy or the Witit + platform, please reach out to us at support@witit.com. Your privacy + matters to us, and we're committed to addressing your concerns + promptly. +
+
+
+ );
+};
+
+export default TermsOfServices;
diff --git a/components/home/ForgetPassword.tsx b/components/home/ForgetPassword.tsx
new file mode 100644
index 0000000..e2bb782
--- /dev/null
+++ b/components/home/ForgetPassword.tsx
@@ -0,0 +1,100 @@
+import CustomButton from "@/components/shared/CustomButton";
+import { ResetAccountPassword } from "@/service/firebase/auth";
+import { useDispatch } from "react-redux";
+import { Controller, useForm } from "react-hook-form";
+import { Box } from "@mui/material";
+import getFirebaseErrorMessage from "@/service/firebase/errorCode";
+import LoginTag from "@/components/shared/LoginTag";
+
+import CustomInputTextField from "../shared/CustomInputTextField";
+import { useAuthContext } from "@/context/AuthContext";
+import { EmailIcon } from "@/utils/icons/shared";
+
+type Props = {
+ setActiveStep: React.Dispatch
+
+ + What is NSFW Content? +
++ NSFW is an abbreviation for the phrases such as: “Not Safe For Wife”, + “Not Suitable For Work”, but mostly used as “Not Safe For Work” +
++ It is an internet slang that is often used to describe internet posts + and content that is mainly involves nudity, sexual activity, heavy + profanity and more... +
++ With Witit, we want to provide a safe place for people to freely + express art or interests that they couldn’t otherwise share on other + platforms. However doing so comes with some requirements, such as + needing to turn on the ability to see and post NSFW content. +
++ NSFW is also not a free pass to post anything you want, we at Witit + just allow you fewer restricts than our social media companions. We + still do not tolerate obscene violence or illegal activity of any + sort. +
++ Accounts that post NSFW content have been marked with a red + verification badge. +
+
+
+
+ );
+}
diff --git a/components/home/ImageSliderAnimationShowBox.tsx b/components/home/ImageSliderAnimationShowBox.tsx
new file mode 100644
index 0000000..0ec5bab
--- /dev/null
+++ b/components/home/ImageSliderAnimationShowBox.tsx
@@ -0,0 +1,130 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { useEffect, useState } from "react";
+
+import Image from "next/image";
+import {
+ image1,
+ image2,
+ image3,
+ image4,
+ image5,
+ image6,
+ image7,
+ image8,
+ image9,
+ image10,
+ image11,
+ image12,
+ image13,
+ image14,
+ image15,
+ image16,
+} from "@/utils/constants/withoutHtml/loginImages";
+import { CustomImagePreview } from "../shared/CustomImagePreview";
+
+const ImageLine = ({ imageList }: { imageList: string[] }) => {
+ return (
+ <>
+
+ {imageList.map((image, index) => {
+ return (
+
+
+
+ );
+ })}
+
+ {imageList.map((image, index) => {
+ return (
+
+
+ );
+};
+
+export const ImageSliderAnimationShowBox = () => {
+ return (
+ <>
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/components/home/LoginBox.tsx b/components/home/LoginBox.tsx
new file mode 100644
index 0000000..4573e28
--- /dev/null
+++ b/components/home/LoginBox.tsx
@@ -0,0 +1,194 @@
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import CustomButton from "@/components/shared/CustomButton";
+import { useState } from "react";
+import { LoginToAccount } from "@/service/firebase/auth";
+import CustomLink from "@/components/shared/CustomLink";
+import { getUser } from "@/api/user/getUser";
+import { useDispatch } from "react-redux";
+import { useRouter } from "next/router";
+import { Controller, useForm } from "react-hook-form";
+import { Box, Stack, Typography } from "@mui/material";
+import getFirebaseErrorMessage from "@/service/firebase/errorCode";
+import LoginTag from "@/components/shared/LoginTag";
+import { useAuthContext } from "@/context/AuthContext";
+import CustomInputTextField from "../shared/CustomInputTextField";
+import { setReduxUser } from "@/redux/slices/userSlice";
+import VisibilityOffIcon from "@/utils/icons/shared/VisibilityOffIcon";
+import { EmailIcon, LockIcon } from "@/utils/icons/shared";
+import appConstant from "@/utils/constants/withoutHtml/appConstant";
+import { VisibilityOff } from "@mui/icons-material";
+
+type Props = {
+ setActiveStep: React.Dispatch+ Some Images which are generate through witit +
+
+
+
+ );
+}
diff --git a/components/home/SignUp.tsx b/components/home/SignUp.tsx
new file mode 100644
index 0000000..678c222
--- /dev/null
+++ b/components/home/SignUp.tsx
@@ -0,0 +1,201 @@
+import CustomButton from "@/components/shared/CustomButton";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+
+import { Box, Dialog, Stack, Typography } from "@mui/material";
+import { useState } from "react";
+
+import { Controller, useForm, useWatch } from "react-hook-form";
+import { signUpToFirebase } from "@/service/firebase/auth";
+import { useDispatch } from "react-redux";
+import getFirebaseErrorMessage from "@/service/firebase/errorCode";
+import CustomCheckbox from "@/components/shared/CustomCheckbox";
+import LoginTag from "@/components/shared/LoginTag";
+
+import CustomInputTextField from "../shared/CustomInputTextField";
+import { useAuthContext } from "@/context/AuthContext";
+import { EmailIcon, LockIcon } from "@/utils/icons/shared";
+
+type Props = {
+ setActiveStep: React.Dispatch
+
+
+ );
+}
diff --git a/components/home/VerifyEmail.tsx b/components/home/VerifyEmail.tsx
new file mode 100644
index 0000000..03a1d28
--- /dev/null
+++ b/components/home/VerifyEmail.tsx
@@ -0,0 +1,90 @@
+import { Box } from "@mui/material";
+import CustomButton from "@/components/shared/CustomButton";
+import { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { useAuthContext } from "@/context/AuthContext";
+import { sendEmail } from "@/service/firebase/auth";
+import getFirebaseErrorMessage from "@/service/firebase/errorCode";
+import LoginTag from "@/components/shared/LoginTag";
+import { ExternalLinkIcon, RefreshIcon } from "@/utils/icons/shared";
+
+export default function VerifyEmail() {
+ let dispatch = useDispatch();
+ const [isEmailSend, setIsEmailSend] = useState
+
+
+ + Already have an account? + setActiveStep(-1)} + className="font-semibold ml-1 leading-6 text-primary-main hover:underline cursor-pointer" + > + Login + +
+
+
+
+
+
+
+ );
+}
diff --git a/components/message/PersonalChat/components/ChatBottomBar.tsx b/components/message/PersonalChat/components/ChatBottomBar.tsx
new file mode 100644
index 0000000..bd3dcd4
--- /dev/null
+++ b/components/message/PersonalChat/components/ChatBottomBar.tsx
@@ -0,0 +1,292 @@
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import { useAuthContext } from "@/context/AuthContext";
+import SendIcon from "@/utils/icons/circle/SendIcon";
+import CreditIcon from "@/utils/icons/topbar/CreditIcon";
+import { CircularProgress, IconButton } from "@mui/material";
+import React, { useEffect, useRef, useState } from "react";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import { Image, ImageState } from "@/types/post";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import sendMessage from "@/api/message/sendMessage";
+import { Message } from "@/types/message";
+import { ReduxUser } from "@/types/user";
+import { uploadImageToStorage } from "@/service/firebase/uploadImage";
+import { createImage } from "@/service/imageCropper/cropImage";
+import CustomCreditMessageDrower from "./CustomCreditMessageDrower";
+import { useMessageContext } from "../../context/MessageContext";
+import { ObjectId } from "bson";
+import { useDispatch } from "react-redux";
+import SelectMultipleImages from "./SelectMultipleImages";
+import { ImageInfo } from "@/types";
+
+type Props = {
+ user: ReduxUser | null;
+ setMessages: React.Dispatch
+
+
+ Verification mail sent to
++ {firebaseUser?.email} +
+ resendEmail()}
+ className={`m-auto flex w-fit flex-row items-center gap-2 text-grey-100 justify-center ${
+ !isEmailSend ? "cursor-pointer" : "cursor-not-allowed"
+ }`}
+ >
+
+ {/* Send a new Link
+|
+
+
*/}
+ + Use different mail +
+
+ {/* {croppingImage?.image?.src != "" ? (
+
+ );
+};
+
+export default ChatBottomBar;
diff --git a/components/message/PersonalChat/components/ChatTopbar.tsx b/components/message/PersonalChat/components/ChatTopbar.tsx
new file mode 100644
index 0000000..2909d8f
--- /dev/null
+++ b/components/message/PersonalChat/components/ChatTopbar.tsx
@@ -0,0 +1,171 @@
+import { IconDropDown } from "@/components/shared/dropDown/IconDropDown";
+import { theme } from "@/theme";
+import MyProfileIcon from "@/utils/icons/navbar/MyProfileIcon";
+import BlockIcon from "@/utils/icons/shared/BlockIcon";
+import LinkCopyIcon from "@/utils/icons/shared/LinkCopyIcon";
+import NormalLeftArrowIcon from "@/utils/icons/shared/NormalLeftArrowIcon";
+import OutLinedAlertIcon from "@/utils/icons/shared/OutLinedAlertIcon";
+import { useMediaQuery } from "@mui/material";
+import { profilePlaceholderImage } from "@/utils/images";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { useMessageContext } from "../../context/MessageContext";
+import { useAuthContext } from "@/context/AuthContext";
+import { useRouter } from "next/router";
+import VerifiedIcon from "@/utils/icons/circle/VerifiedIcon";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { ReduxUser } from "@/types/user";
+
+type Props = {
+ otherUserDetails: ReduxUser | null;
+ isDataLoading: boolean;
+ setIsBlockDialogOpen: React.Dispatch {
+ setisImageHovered(true);
+ }}
+ onMouseLeave={() => {
+ setisImageHovered(false);
+ }}
+ onClick={() => {
+ // setCustomDialogType("CROPSINGLEIMG");
+ }}
+ >
+ {isImageHovered ? (
+
+ ) : null} */}
+ {createPostImages?.length > 0 && (
+ {
+ setCroppingImage(defaultImageConstant);
+ }}
+ >
+
+ ) : null}
+
+
+
+
+ )}
+
+ {createPostImages.map((value, index) => {
+ return (
+ <>
+
+
+
+
+ );
+ })}
+ haldleremoveImages(index)}
+ >
+
+ {
+ setCreatePostImages([]);
+ }}
+ >
+
+
+ {
+ setCustomDialogType("CREDITS-MESSAGE");
+ }}
+ className=" bg-grey-700 text-grey-100 hover:text-primary-main w-[60px] h-[60px] rounded-xl flex items-center justify-center"
+ >
+
+
+ {customDialogType === "CREDITS-MESSAGE" ? (
+
+ {!messageImage && (
+
+
+ )}
+
+
+
+ ) => {
+ if (e.key === "Enter" && !e.shiftKey) {
+ e.preventDefault();
+ if (textMessage || createPostImages.length > 0) {
+ sendMessages();
+ }
+ }
+ }}
+ EndIcon={
+ {
+ if (textMessage || createPostImages.length > 0) {
+ sendMessages();
+ }
+ }}
+ className={
+ textMessage || createPostImages.length > 0
+ ? "text-primary-main cursor-pointer"
+ : "text-grey-300 cursor-default"
+ }
+ >
+ {isLoading ? (
+
+ }
+ className="bg-grey-700 border-none rounded-xl h-fit"
+ onChange={(e: any) => {
+ setTextMessage(e.target.value);
+ }}
+ />
+
+
+
+
+ ),
+ title: "Copy Profile Link",
+ actionType: "Copy Profile Link",
+ },
+ {
+ icon: (
+
+
+ ),
+ title: "Block",
+ actionType: "Block",
+ },
+ {
+ icon: (
+
+
+ ),
+ title: "Report",
+ actionType: "Report",
+ },
+ ];
+
+ if (!user || !selectedUser) {
+ return <>;
+ }
+
+ if (!selectedUser || !otherUserDetails) {
+ return <>;
+ }
+
+ return (
+
+
+ );
+};
+
+export default ChatTopbar;
diff --git a/components/message/PersonalChat/components/CustomCreditMessageDrower.tsx b/components/message/PersonalChat/components/CustomCreditMessageDrower.tsx
new file mode 100644
index 0000000..88c056f
--- /dev/null
+++ b/components/message/PersonalChat/components/CustomCreditMessageDrower.tsx
@@ -0,0 +1,235 @@
+import { useAuthContext } from "@/context/AuthContext";
+import { theme } from "@/theme";
+import { Divider, IconButton } from "@mui/material";
+import React, { useState } from "react";
+import CreditTopBg from "@/utils/images/CreditTopBg.png";
+import Image from "next/image";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import CreditIcon from "@/utils/icons/topbar/CreditIcon";
+import Slider from "react-slick";
+import CustomButton from "@/components/shared/CustomButton";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import sendCredit from "@/api/stripe/sendCredit";
+import { generateArray } from "@/service/manageCredit/createCreditArray";
+import CustomDialog from "@/components/shared/dialog/CustomDialog";
+import { Message } from "@/types/message";
+import TermsOfServices from "@/components/footerDialogs/TermsOfServices";
+import PrivacyPolicy from "@/components/footerDialogs/PrivacyPolicy";
+import CustomInsufficientCredit from "@/components/shared/CustomInsufficientCredit";
+
+var sliderSettings = {
+ centerMode: true,
+ centerPadding: "60px",
+ slidesToShow: 3,
+ speed: 500,
+ swipeToSlide: true,
+ focusOnSelect: true,
+};
+type props = {
+ messageId: string;
+ creatorId: string;
+ messages: Message[];
+ setMessages: React.Dispatch
+
+
+ {isSmallScreen ? (
+
+ setisMessageListOpen(true)}
+ >
+
+ ) : null}
+
+ {/* */}
+
+
+
+
+
+
+
+ {selectedUser.userName}
+ {selectedUser.userType === "VERIFIED" && (
+
+
+ {otherUserDetails.generationSettings.creditPerMessage} credit + / message +
+ )} +
+ {selectedUser?.id !== user?.userId && otherUserDetails?.blockedBy ? (
+ <>
+ ) : (
+
+
+
+
+
+ {
+ setCustomDialogType(null);
+ }}
+ >
+
+
+
+
+
+
+ Total Credit Balance
+
+
+ + {user?.credit && + user.credit.transferableCredit + + user.credit.nonTransferableCredit + + user.credit.tempCredit} +
+
+
+
+
+
+
+
+
+
+ (slider = slider)}
+ {...sliderSettings}
+ className="slick-slider_center-mode w-full flex flex-row"
+ >
+ {finalArray?.map((val, index) => {
+ return (
+
+
+
+
+ );
+ })}
+ {val}
+
+
+ {isnotEnoughCredit && (
+
+ {
+ postCredits();
+ }}
+ />
+
+ + By submitting this request you agree to witit’s +
++ { + setPolicy("PRIVACY_POLICYS"); + }} + > + Privacy Policy + {" "} + and + { + setPolicy("TERMS_OF_SERVICES"); + }} + > + Terms of Use + +
+
+
+ )}
+
+
+ );
+};
+
+export default ImageItem;
diff --git a/components/message/PersonalChat/components/MessageItem.tsx b/components/message/PersonalChat/components/MessageItem.tsx
new file mode 100644
index 0000000..9a93e47
--- /dev/null
+++ b/components/message/PersonalChat/components/MessageItem.tsx
@@ -0,0 +1,41 @@
+import { RootState } from "@/redux/store";
+import { Message } from "@/types/message";
+import dayjs from "dayjs";
+import React, { useEffect } from "react";
+import { useSelector } from "react-redux";
+type Props = {
+ msg: Message;
+};
+const MessageItem = ({ msg }: Props) => {
+ const user = useSelector((state: RootState) => state.user);
+ let bgColor: string = "bg-primary-main";
+ let position: string = "justify-end";
+ let borderStyle = "rounded-br-lg rounded-t-lg";
+
+ if (msg.receiverId !== user?.userId) {
+ bgColor = "bg-primary-main";
+ position = "items-end";
+ borderStyle = "rounded-bl-lg rounded-lg overflow-hidden";
+ } else {
+ bgColor = "bg-grey-700";
+ position = "items-start";
+ borderStyle = "rounded-br-lg rounded-lg overflow-hidden";
+ }
+
+ return (
+
+ {/* {msg.image.map((val) => {
+ return (
+ <>
+
+
+
+
+ );
+ })} */}
+
+ {msg.image.map((postImage, index) => {
+ if (index < 5) {
+ return (
+
+ {isMsg && (
+
+
+ );
+ }
+ })}
+
+ {msg.image.length > 5 && index === 4 ? (
+
+
+ +{msg.image.length - 5}
+
+ ) : null}
+
+ 5
+ ? "opacity-30"
+ : "opacity-100"
+ }`}
+ >
+
+
+ {msg.message}
+
+ )}
+ + {dayjs(msg?.createdAt).format("hh:mm A")} +
+
+
+ );
+};
+
+export default MessageItem;
diff --git a/components/message/PersonalChat/components/SelectMultipleImages.tsx b/components/message/PersonalChat/components/SelectMultipleImages.tsx
new file mode 100644
index 0000000..e3f966f
--- /dev/null
+++ b/components/message/PersonalChat/components/SelectMultipleImages.tsx
@@ -0,0 +1,141 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+import React, { useState, useRef, useEffect, forwardRef } from "react";
+import { ImageInfo } from "@/types";
+import ImagePlaceHolderGalleryIcon from "@/utils/icons/createPost/ImagePlaceHolderGalleryIcon";
+import Lottie from "lottie-react";
+import ImagePlaceholderLottie from "@/utils/lottie/ImagePlaceholderLottie.json";
+import DisplayMultipleImages from "@/service/imageCropper/DisplayMultipleImages";
+import PlusIcon from "@/utils/icons/shared/PlusIcon";
+
+type Props = {
+ setSelectdImgs: (
+ images: {
+ image: ImageInfo;
+ index: number;
+ }[]
+ ) => void;
+ isSmall: boolean;
+ isEnabled: boolean;
+};
+
+const SelectMultipleImages = forwardRef(
+ ({ setSelectdImgs, isSmall, isEnabled }: Props, ref) => {
+ const [multiImages, setMultiImages] = useState<
+ {
+ image: ImageInfo;
+ index: number;
+ }[]
+ >([]);
+
+ const imageInputRef = useRef
+
+ + {msg.message} +
++ {dayjs(msg?.createdAt).format("hh:mm A")}{" "} +
+
+
+ {/* */}
+
+ {isSmall ? (
+ */}
+
+ );
+ }
+);
+
+SelectMultipleImages.displayName = "images";
+
+export default SelectMultipleImages;
diff --git a/components/message/PersonalChat/components/SendCreditItem.tsx b/components/message/PersonalChat/components/SendCreditItem.tsx
new file mode 100644
index 0000000..b29dd5f
--- /dev/null
+++ b/components/message/PersonalChat/components/SendCreditItem.tsx
@@ -0,0 +1,62 @@
+import React from "react";
+import CreditIcon from "@/utils/icons/topbar/CreditIcon";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import dayjs from "dayjs";
+import { Message } from "@/types/message";
+import { useMessageContext } from "../../context/MessageContext";
+
+type Props = {
+ msg: Message;
+};
+const SendCreditItem = ({ msg }: Props) => {
+ const { selectedUser } = useMessageContext();
+ const user = useSelector((state: RootState) => state.user);
+
+ let bgColor: string = "bg-primary-main";
+ let position: string = "justify-end";
+ let creditPosition: string = "flex-row-reverse";
+ let borderStyle = "rounded-br-lg rounded-t-lg";
+
+ if (msg.receiverId !== user?.userId) {
+ bgColor = "bg-primary-main";
+ creditPosition = "flex-row-reverse";
+ position = "items-end";
+ borderStyle = "rounded-bl-lg rounded-t-lg overflow-hidden ";
+ } else {
+ bgColor = "bg-grey-700";
+ position = "items-start";
+ creditPosition = "flex-row-reverse";
+ borderStyle = "rounded-br-lg rounded-t-lg overflow-hidden ";
+ }
+
+ return (
+
+
+ ) : (
+
+
+ )}
+ {/*
+
+
+ {/*
+
*/}
+
+ {isSmall ? (
+
+
+
+ )}
+
+ Drag profile pic here,or
+ browse
+
+
+
+ );
+};
+
+export default SendCreditItem;
diff --git a/components/message/PersonalChat/index.tsx b/components/message/PersonalChat/index.tsx
new file mode 100644
index 0000000..c425ed7
--- /dev/null
+++ b/components/message/PersonalChat/index.tsx
@@ -0,0 +1,434 @@
+import React, { useEffect, useRef, useState } from "react";
+import { CircularProgress } from "@mui/material";
+import appConstant from "@/utils/constants/withoutHtml/appConstant";
+import { useAuthContext } from "@/context/AuthContext";
+import MessageItem from "./components/MessageItem";
+import ImageItem from "./components/ImageItem";
+import SendCreditItem from "./components/SendCreditItem";
+import { Message } from "@/types/message";
+import getMessages from "@/api/message/getMessages";
+import { RootState } from "@/redux/store";
+import { useDispatch, useSelector } from "react-redux";
+import ChatTopbar from "./components/ChatTopbar";
+import ChatBottomBar from "./components/ChatBottomBar";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { io } from "socket.io-client";
+import { useMessageContext } from "../context/MessageContext";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import { messageNotFound } from "@/utils/images/message";
+import { getOtherUser } from "@/api/user/getOtherUser";
+import { ReduxUser } from "@/types/user";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import ConfirmationDialog from "@/components/shared/ConfirmationDialog";
+import { blockOrUnblockUser } from "@/api/user/blockOrUnblockUser";
+import { blockUserIllustrator } from "@/utils/images";
+import ReportDialog from "@/components/shared/ReportDialog";
+import { reportUser } from "@/api/user/reportUser";
+
+const PersonalChat = () => {
+ const [hasMoreMessage, setHasMoreMessage] = useState(true);
+ const [messages, setMessages] = useState
+
+
+ {msg.receiverId === user?.userId && (
+
+ Hurray!! Credits Sent to You.
+ )} + {msg.receiverId !== user?.userId && ( + <> +Oops!! You send Credits.
++ To {selectedUser?.userName} +
+ + )} +
+
+ {msg.credit}
++ {dayjs(msg?.createdAt).format("hh:mm A")} +
+
+ {
+ setIsBlockDialogOpen(false);
+ }}
+ onConform={() => {
+ blockUser();
+ }}
+ title={{
+ titleMain: "Block " + selectedUser?.userName + "?",
+ title2:
+ selectedUser?.userName +
+ " won't be able to send you messages, see your posts, connect with members, or join your circle. They won't receive a notification that you've blocked them.",
+ confirmButton: "Block",
+ }}
+ />
+ ) : null}
+ {selectedUser?.id !== user?.userId &&
+ otherUserDetails?.blockedBy &&
+ otherUserDetails?.blockedBy !== user?.userId && (
+
+
+ }
+ title="User has blocked you"
+ description="it looks like you are unable to view a profile of this user because they blocked you."
+ />
+ )}
+ {selectedUser?.id !== user?.userId &&
+ otherUserDetails?.blockedBy &&
+ otherUserDetails.blockedBy === user?.userId ? (
+
+ {messages.length > 1 && (
+
+ )}
+ {messages.length < 2 && !hasMoreMessage && (
+
+
+
+ }
+ style={{ display: "flex", flexDirection: "column-reverse" }}
+ scrollableTarget="MessagesScrollableDiv"
+ >
+ {messages.map((msg, index) => {
+ return (
+
+ {msg.type === "MESSAGE" &&
+ );
+ })}
+
+
+
+
+ }
+ title="No Chat Found"
+ description="Start Chatting with your witit friends!"
+ />
+
+ )}
+
+
+
+
+ */
+}
+
+{
+ /* ) : null} */
+}
+
+// const [isDragging, setisDragging] = useState(false);
+// const [finalMsgImage, setFinalMsgImage] = useState<{
+// image: ImageInfo;
+// index: number;
+// }>(defaultImageConstant);
+// const {
+// setCustomDialogType,
+// customDialogType,
+// croppingImage,
+// setCroppingImage,
+// } = useAuthContext();
+// const handleDragOver = (event: React.DragEvent
+
+
+ ),
+ placeholderTitle: (
+ <>
+ + Drag profile pic here, +
++ or browse +
+ + ), + }} + /> +
+
+ );
+};
+
+export default RecentMessageItem;
diff --git a/components/message/RecentMessageListDrawer/components/search/components/SearchUserItem.tsx b/components/message/RecentMessageListDrawer/components/search/components/SearchUserItem.tsx
new file mode 100644
index 0000000..48592ce
--- /dev/null
+++ b/components/message/RecentMessageListDrawer/components/search/components/SearchUserItem.tsx
@@ -0,0 +1,40 @@
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { FriendsList } from "@/types/circle";
+import VerifiedIcon from "@/utils/icons/circle/VerifiedIcon";
+import { profilePlaceholderImage } from "@/utils/images";
+import React from "react";
+
+type Props = {
+ profileChat: FriendsList;
+};
+const SearchUserItem = ({ profileChat }: Props) => {
+
+
+ return (
+
+
+
+
+
+
+ {profileChat.receiver?.id === user?.userId &&
+ profileChat.messageStatus === "READ" && (
+
+ {profileChat.receiver.id !== user?.userId
+ ? profileChat.receiver.userName
+ : profileChat.sender.userName}
+ {type === "VERIFIED" && (
+
+
+ {dayjs(profileChat?.createdAt).format("hh:mm A")} +
++ {profileChat.lastMessage} +
+ )} + {profileChat.receiver?.id === user?.userId && + profileChat.messageStatus === "SENT" && ( ++ {profileChat.lastMessage} +
+ )} + {profileChat.sender?.id === user?.userId && + profileChat.messageStatus === "SENT" && ( ++ Sent +
+ )} + {profileChat.sender?.id === user?.userId && + profileChat.messageStatus === "READ" && ( ++ Seen +
+ )} +
+
+ );
+};
+
+export default SearchUserItem;
diff --git a/components/message/RecentMessageListDrawer/components/search/index.tsx b/components/message/RecentMessageListDrawer/components/search/index.tsx
new file mode 100644
index 0000000..a3870e2
--- /dev/null
+++ b/components/message/RecentMessageListDrawer/components/search/index.tsx
@@ -0,0 +1,199 @@
+import getAllFriends from "@/api/cricle/getAllFriends";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import { useAuthContext } from "@/context/AuthContext";
+import { RootState } from "@/redux/store";
+import { theme } from "@/theme";
+import { FriendsList } from "@/types/circle";
+import LeftArrow from "@/utils/icons/message/LeftArrow";
+import SearchIcon from "@/utils/icons/topbar/SearchIcon";
+import { CircularProgress, Divider } from "@mui/material";
+import React, { useEffect, useRef, useState } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useSelector } from "react-redux";
+import SearchUserItem from "./components/SearchUserItem";
+import { useMessageContext } from "@/components/message/context/MessageContext";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import { searchUserNotFound } from "@/utils/images/message";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { useDebounceEffect } from "@/hooks/useDebounceEffect";
+
+type Props = {
+ setisOpenSearchBar: React.Dispatch
+
+
+
+
+
+
+ {profileChat.userName}
+ {profileChat.userType === "VERIFIED" && (
+
+
+
+ {getSearchUserList.length < 1 && !hasMoreSearchUser && (
+
+ ) => {
+ setSearchText(e.target.value);
+ }}
+ StartIcon={
+
+
+
+ {
+ setisOpenSearchBar(false);
+ }}
+ >
+
+ Messages
+
+
+ }
+ placeholder="Search Chat"
+ />
+
+
+
+
+
+ }
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ width: "100%",
+ }}
+ scrollableTarget="RecentMessageScrollableDivTag"
+ >
+ {getSearchUserList?.map((item, index) => {
+ return (
+ {
+ SelectChatProfile(item), setIsMessageBoxOpen(true);
+ }}
+ >
+
+ );
+ })}
+
+
+
+
+ }
+ title="No Chat Found"
+ description="Start Chatting with your witit friends!"
+ />
+
+ )}
+
+ );
+};
+
+export default RecentMessageSearch;
diff --git a/components/message/RecentMessageListDrawer/index.tsx b/components/message/RecentMessageListDrawer/index.tsx
new file mode 100644
index 0000000..5373db1
--- /dev/null
+++ b/components/message/RecentMessageListDrawer/index.tsx
@@ -0,0 +1,210 @@
+import React, { useEffect, useRef, useState } from "react";
+import SendIcon from "@/utils/icons/circle/SendIcon";
+import { CircularProgress, Divider, IconButton } from "@mui/material";
+import { useAuthContext } from "@/context/AuthContext";
+import { theme } from "@/theme";
+import appConstant, {
+ defaultImageConstant,
+} from "@/utils/constants/withoutHtml/appConstant";
+import RecentMessageItem from "./components/RecentMessageItem";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import getrecentmessages from "@/api/message/getrecentmessages";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { io } from "socket.io-client";
+import RecentMessageSearch from "./components/search";
+import TwoUserIcon from "@/utils/icons/message/TwoUserIcon";
+import { useMessageContext } from "../context/MessageContext";
+import { RecentMessage } from "@/types/message";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { searchUserNotFound } from "@/utils/images/message";
+
+type Props = {
+ setIsMessageBoxOpen: React.Dispatch
+ {!isOpenSearchBar && (
+
+ )}
+
+ )}
+ {isOpenSearchBar && (
+
+
+ {recentMessages.length < 1 && !hasMoreMessage && (
+
+
+
+
+
+
+ Messages
+ {
+ setisOpenSearchBar(true);
+ }}
+ >
+
+
+
+
+
+
+ }
+ style={{
+ display: "flex",
+ flexDirection: "column",
+ width: "100%",
+ }}
+ scrollableTarget="RecentMessageScrollableDiv"
+ >
+ {recentMessages.map((item, index) => {
+ return (
+ {
+ setCroppingImage(defaultImageConstant);
+ SelectChatProfile(item);
+ }}
+ >
+
+ );
+ })}
+
+
+
+
+ }
+ title="No Chat Found"
+ description="Start Chatting with your witit friends!"
+ />
+ {
+ handleHover(true);
+ }}
+ onMouseLeave={() => {
+ handleHover(false);
+ }}
+ >
+
+ );
+};
+
+export default PostItem;
diff --git a/components/profile/Feed/components/PostGridView/index.tsx b/components/profile/Feed/components/PostGridView/index.tsx
new file mode 100644
index 0000000..5af2748
--- /dev/null
+++ b/components/profile/Feed/components/PostGridView/index.tsx
@@ -0,0 +1,87 @@
+import { Post } from "@/types/post";
+import PostItem from "./components/PostItem";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { CircularProgress, Grid } from "@mui/material";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import { postNotFoundSloth } from "@/utils/images";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+
+type GetPostsProps = {
+ lastDocId?: string;
+};
+
+type Props = {
+ posts: Post[];
+ getPosts: ({ lastDocId }: GetPostsProps) => void;
+ hasMorePost: boolean;
+ setSelectedPostId: React.Dispatch
+ {post.category.slice(0, 3).map((catName, index) => {
+ const icon = CategoryList.filter(
+ (category) => category.name === catName
+ );
+ const isLastCat =
+ post.category.length <= 3
+ ? index === post.category.length - 1
+ : index === 2;
+ return (
+
+
+ );
+ })}
+
+ ) : null}
+
+ {post.userActivity.isReposted && user?.userId === currentUser?.userId && (
+
+ {icon.length > 0 ? icon[0].startIcon :
+
+
+ )}
+
+ {/* max-w-lg md:max-w-2xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl */}
+ */}
+
+ {posts.map((post, index) => (
+
+
+ ))}
+
+
+ {/* */}
+
+
+
+ );
+};
diff --git a/components/profile/Feed/components/profileFeed/index.tsx b/components/profile/Feed/components/profileFeed/index.tsx
new file mode 100644
index 0000000..64f21fa
--- /dev/null
+++ b/components/profile/Feed/components/profileFeed/index.tsx
@@ -0,0 +1,535 @@
+import React, { useEffect, useState } from "react";
+import { Post, PromptDetail } from "@/types/post";
+import { RootState } from "@/redux/store";
+import { useDispatch, useSelector } from "react-redux";
+import { useAuthContext } from "@/context/AuthContext";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { CircularProgress } from "@mui/material";
+import { deletePost } from "@/api/post/deletePost";
+import { likePost } from "@/api/post/likePost";
+import { doRepost } from "@/api/post/doRepost";
+import { ReduxUser, UserBaseInfo } from "@/types/user";
+import { getPromptOfPost } from "@/api/post/getPromptOfPost";
+import { viewPost } from "@/api/post/viewPost";
+import CirclePost from "@/components/circle/CirclePost";
+import CirclePostInfoDialog from "@/components/circle/CirclePostInfoDialog";
+import ViewPromptDrawer from "@/components/discover/ViewPromptDrawer";
+import ConfirmationDialog from "@/components/shared/ConfirmationDialog";
+import CreditViewPrompt from "@/components/shared/credit/CreditViewPrompt";
+import Creadit from "@/components/shared/credit/Index";
+import { getUserPosts } from "@/api/post/getUserPosts";
+import {
+ addUserPost,
+ deleteUserPost,
+ updateUserPostCommentCount,
+ updateUserPostLikeStatus,
+ updateUserPostRepostStatus,
+ updateUserPostView,
+ updateUserPostViewPrompt,
+} from "@/redux/slices/userPostSlice";
+import { getUser } from "@/api/user/getUser";
+import { useRouter } from "next/router";
+import ReportDialog from "@/components/shared/ReportDialog";
+import { reportPost } from "@/api/post/reportPost";
+import EditPostDialog from "@/components/shared/CustomEditPostDialog/index";
+import EditGenerationPostPrompt from "@/components/shared/CustomEditPostFromGenetation/index";
+
+type LikePostProps = { postId: string; isLiked: boolean; res?: Res };
+
+type Res = {
+ status: number;
+ data: Post[];
+ error: any;
+};
+type GetPostsProps = {
+ lastDocId?: string;
+ search?: string | null;
+ res?: Res;
+};
+
+type Props = {
+ selectedPostId: string | null;
+ hasMorePost: boolean;
+};
+const ProfileFeed = ({ selectedPostId, hasMorePost }: Props) => {
+ const dispatch = useDispatch();
+ const { asPath } = useRouter();
+ const router = useRouter();
+
+ const { sendNotification } = useAuthContext();
+
+ const userPosts = useSelector((state: RootState) => state.userPosts);
+ const user = useSelector((state: RootState) => state.user);
+ const viewedNsfwList = useSelector((state: RootState) => state.viewedNSFW);
+
+ const [hasMoreFeed, setHasMoreFeed] = useState(hasMorePost);
+ const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+ const [deletingPostIndex, setDeletingPostIndex] = useState
+
+
+ }
+ scrollableTarget="postScrollableDiv"
+ style={hasMorePost ? {} : { overflow: "hidden" }}
+ >
+ {/* {
+ setSelectedPostId(post.postId);
+ }}
+ >
+
+
+ {userPosts.length === 0 && !hasMoreFeed ? (
+
+ )}
+
+ {selectedPost ? (
+
+ No Similar Post found
+
+ ) : (
+
+
+
+ }
+ scrollableTarget="similarFeedScrollableDiv"
+ style={hasMoreFeed ? {} : { overflow: "hidden" }}
+ >
+
+ {userPosts.map((post, index) => {
+ return (
+
+
+
+
+ ) => {
+ handleChange(event, post.postId);
+ }}
+ handleRepost={(
+ event: React.MouseEvent
+ ) => {
+ handleRepost(
+ event,
+ post.postId,
+ post.userActivity.isReposted
+ );
+ }}
+ selectedPost={post}
+ setSelectedImageIndex={setSelectedImageIndex}
+ setDeletingPostIndex={setDeletingPostIndex}
+ setCreditDialogInfo={setCreditDialogInfo}
+ handlePostClicked={handlePostClicked}
+ promptDetails={promptDetails}
+ creditDialogInfo={creditDialogInfo}
+ setReportingPostIndex={setReportingPostIndex}
+ />
+
+ );
+ })}
+
+ {/*
+ );
+};
+
+export default Feed;
diff --git a/components/profile/Moments/index.tsx b/components/profile/Moments/index.tsx
new file mode 100644
index 0000000..8464ee4
--- /dev/null
+++ b/components/profile/Moments/index.tsx
@@ -0,0 +1,167 @@
+import React, { useState } from "react";
+import { Checkbox, Divider, Grid } from "@mui/material";
+import Image from "next/image";
+import temp1 from "@/utils/images/temp4.jpg";
+import CreateMomentIcon from "@/utils/icons/profile/CreateMomentIcon";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import LikeIcon from "@/utils/icons/shared/LikeIcon";
+import CasualCategoryIcon from "@/utils/icons/createPost/selectCategoryIcons/CasualCategoryIcon";
+import { theme } from "@/theme";
+import VerifiedIcon from "@/utils/icons/circle/VerifiedIcon";
+import { useAuthContext } from "@/context/AuthContext";
+import { Favorite, FavoriteBorder } from "@mui/icons-material";
+import { ComingSoon } from "@/components/shared/ComingSoon";
+
+const MomentList = ["1", "2", "3", "4", "5", "6"];
+
+const styles = {
+ responsiveGrid: {
+ xxl: 2,
+ xl: 3,
+ lg: 6,
+ md: 6,
+ sm: 6,
+ xs: 6,
+ },
+};
+const Moments = () => {
+ const [isMomentHoverd, setisMomentHoverd] = useState({
+ isHover: false,
+ index: 0,
+ });
+ const { setCustomDialogType } = useAuthContext();
+
+ return (
+ */}
+ {selectedPostId ? (
+
*/}
+
+
+ );
+
+ return (
+
+
+
+
+ {MomentList.map((Moment, index) => {
+ return (
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default Moments;
diff --git a/components/profile/Profile/components/Members/components/Member.tsx b/components/profile/Profile/components/Members/components/Member.tsx
new file mode 100644
index 0000000..8ef35d0
--- /dev/null
+++ b/components/profile/Profile/components/Members/components/Member.tsx
@@ -0,0 +1,43 @@
+import CustomButton from "@/components/shared/CustomButton";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { RootState } from "@/redux/store";
+import { redirectTouserProfile } from "@/service/shared/redirectTouserProfile";
+import { UserBaseInfo, UserType } from "@/types/user";
+import VerifiedIcon from "@/utils/icons/circle/VerifiedIcon";
+import { profilePlaceholderImage, temp1 } from "@/utils/images";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useSelector } from "react-redux";
+type Props = {
+ member: UserBaseInfo;
+};
+
+export const Member = ({ member }: Props) => {
+ const user = useSelector((state: RootState) => state.user);
+ const router = useRouter();
+
+ return (
+ {
+ // setCustomDialogType("CREATEMOMENT");
+ }}
+ >
+
+
+
+ Create New Moment
+
+ setisMomentHoverd({ isHover: true, index: index })
+ }
+ onMouseLeave={() =>
+ setisMomentHoverd({ isHover: false, index: index })
+ }
+ >
+
+
+ {isMomentHoverd.isHover && isMomentHoverd.index === index ? (
+
{" "}
+ {}}
+ className={`bg-gradient-to-b from-[#121315] via-[#17181b00] to-[#17181b00] w-full h-full
+ flex absolute z-20 top-0 right-0 justify-end p-3 rounded-md `}
+ >
+
+ ) : null}
+
+
+
+ {
+ e.stopPropagation();
+ }}
+ icon={
+
+ 123
+
+
+
+
+ 123
+
+ {MomentList.map((image, index) => {
+ return (
+
+
+ {index < 4 ? (
+
+ );
+ })}
+
+
+ ) : null}
+
+ +{MomentList.length - 4}
+
+
+
+
+
+
+
+
+
+
+
+ Gerdes
+
+
+
+
+
+ + 1 min ago +
++ Currently out doing things and stuff. May want to do + more stuff, idk.{" "} +
+ {
+ router.push(redirectTouserProfile(member.userId, user?.userId));
+ }}
+ >
+
+ );
+};
diff --git a/components/profile/Profile/components/Members/index.tsx b/components/profile/Profile/components/Members/index.tsx
new file mode 100644
index 0000000..64f280c
--- /dev/null
+++ b/components/profile/Profile/components/Members/index.tsx
@@ -0,0 +1,166 @@
+import { useEffect, useState } from "react";
+import { Member } from "./components/Member";
+import { UserBaseInfo } from "@/types/user";
+import { getFollowers } from "@/api/user/getFollowers";
+import { getFollowings } from "@/api/user/getFollowings";
+import { CircularProgress } from "@mui/material";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useAuthContext } from "@/context/AuthContext";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import { blockUserIllustrator } from "@/utils/images";
+import { useProfileContext } from "../../context/ProfileContext";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+
+type MemberTab = {
+ name: string;
+ type: "CIRCLE" | "CIRCLING";
+};
+
+const memberTabs: MemberTab[] = [
+ {
+ name: "Circle Members",
+ type: "CIRCLE",
+ },
+ {
+ name: "Circling",
+ type: "CIRCLING",
+ },
+];
+
+type GetMemberProps = {
+ memberType: "CIRCLE" | "CIRCLING";
+ lastDoc?: { lastDocId: string; searchScore: number };
+};
+
+export const Members = () => {
+ const { sendNotification } = useAuthContext();
+ const { currentUser } = useProfileContext();
+
+ const [memberType, setMemberType] = useState<"CIRCLE" | "CIRCLING">("CIRCLE");
+ const [members, setMembers] = useState
+
+
+
+
+
+ {member.userName}
+ {member.userType === UserType.VERIFIED ? ( +
+
+ ) : null}
+
+
+ ) : (
+
+ {memberTabs.map((memberTab, index) => (
+
+
+ {members.length === 0 && !hasMoreMember ? (
+ setMemberType(memberTab.type)} + > + {memberTab.name} +
+ ))} +
+
+
+ }
+ />
+
+
+
+ }
+ scrollableTarget="memberScrollableDiv"
+ >
+
+ {members.map((member, index) => {
+ return
+
+
+ )}
+
+ );
+};
diff --git a/components/profile/Profile/components/Offering/components/CreateOfferDialog.tsx b/components/profile/Profile/components/Offering/components/CreateOfferDialog.tsx
new file mode 100644
index 0000000..37e0755
--- /dev/null
+++ b/components/profile/Profile/components/Offering/components/CreateOfferDialog.tsx
@@ -0,0 +1,714 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import ArrowDownIcon from "@/utils/icons/shared/ArrowDownIcon";
+import { useAuthContext } from "@/context/AuthContext";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import { ImageInfo } from "@/types";
+import appConstant, {
+ defaultImageConstant,
+} from "@/utils/constants/withoutHtml/appConstant";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import CustomButton from "@/components/shared/CustomButton";
+import React, { useEffect, useState } from "react";
+import {
+ CircularProgress,
+ Divider,
+ FormHelperText,
+ IconButton,
+ Slider,
+ styled,
+} from "@mui/material";
+import { theme } from "@/theme";
+import PlusIcon from "@/utils/icons/shared/PlusIcon";
+import EditIcon from "@/utils/icons/shared/EditIcon";
+import DeleteIcon from "@/utils/icons/shared/DeleteIcon";
+import LikeIcon from "@/utils/icons/shared/LikeIcon";
+import temp1 from "@/utils/images/temp1.jpg";
+import Image from "next/image";
+import CasualCategoryIcon from "@/utils/icons/createPost/selectCategoryIcons/CasualCategoryIcon";
+import NormalLeftArrowIcon from "@/utils/icons/shared/NormalLeftArrowIcon";
+import { CustomSlider } from "@/components/shared/CustomSlider";
+import CustomDialog from "@/components/shared/dialog/CustomDialog";
+import ConfirmationDialog from "@/components/shared/ConfirmationDialog";
+import InputCropSingleImage from "@/components/shared/cropImage/singleCropImage/InputCropSingleImage";
+import Lottie from "lottie-react";
+import ImagePlaceholderLottie from "@/utils/lottie/ImagePlaceholderLottie.json";
+import { DeleteOfferImage } from "@/utils/images/offering";
+import { Controller, useForm } from "react-hook-form";
+import { uploadImageToStorage } from "@/service/firebase/uploadImage";
+import { ImageState } from "@/types/post";
+import { CreateOffering, OfferingData } from "@/types/offering";
+import createOffering from "@/api/offering/createOffering";
+import { getImageObject } from "@/service/shared/getImageObject";
+import deleteOffering from "@/api/offering/deleteOffering";
+import { updateOffering } from "@/api/offering/updateOffering";
+import CustomLoadingButton from "@/components/shared/CustomLoadingButton";
+import { useRouter } from "next/router";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+
+type Props = {
+ dialogType:
+ | "VIEWOFFER"
+ | "EDITOFFERING"
+ | "CREATEOFFER"
+ | "CREATEOFFERDETAILS"
+ | null;
+ setDialogType: React.Dispatch<
+ React.SetStateAction<
+ "VIEWOFFER" | "EDITOFFERING" | "CREATEOFFER" | "CREATEOFFERDETAILS" | null
+ >
+ >;
+ openOfferData: OfferingData | null;
+ setOpenOfferData: React.Dispatch
+ {
+ // setDialogType(null), setFinalOfferImage(null);
+ // setCroppingImage({ ...defaultImageConstant, isShowGrid: false });
+ // }}
+ isOpen={dialogType !== null}
+ >
+ {dialogType === "VIEWOFFER" ? (
+
+ ) : dialogType === "CREATEOFFERDETAILS" ? (
+
+
+ ) : (
+
+
+
+
+
+
+ + {openOfferData?.name} +
+
+
+ {
+ setDialogType("EDITOFFERING");
+ }}
+ >
+
+ {
+ setDeleteOfferingId(openOfferData?.offeringId!);
+ }}
+ >
+
+
+
+
+
+
+ handleUpdateLikeStatus({
+ offeringId: openOfferData?.offeringId!,
+ isLike: !openOfferData?.isUserLike,
+ })
+ }
+ >
+
+ {openOfferData?.counts.like}
+
+
+
+
+ {openOfferData?.completeOffers}
+
+
+
+
+
+
+
+
+
+ Min. Credit:
++ {openOfferData?.creditRange.min} +
+
+
+ Avg. Credit:
++ {openOfferData?.creditRange.avg} +
+
+
+ Max. Credit:
++ {openOfferData?.creditRange.max} +
+
+
+ Description:
+-
+
- {openOfferData?.offeringDescription} +
+
+
+
+
+
+
+ {dialogType === "CREATEOFFER" || dialogType === "EDITOFFERING" ? (
+
+ {dialogType === "CREATEOFFER" ? (
+
+
+
+ ) : (
+
+
+ )}
+
+
+ {openOfferData ? "Edit An Offering" : "Create An Offering"}
+
+
+
+
+
+
+ {isOfferImageLoading ? (
+
+
+ ),
+ placeholderTitle: (
+ <>
+
+
+ ) : (
+ + Drag profile pic here, +
++ or{" "} + + browse + +
+ + ), + }} + /> + )} +
+ {
+ return (
+ filedValue.length > 2 ||
+ "Offering name should be at least 3 characters."
+ );
+ },
+ },
+ }}
+ render={({ field }) => (
+
+ Maximum credit should be greater than the maximum credit.
+
+ )}
+
+
+
+ Set Your Offering Credit Range
++ Set Your Offering Credit Range With Minimum and Maximum + credit Values. so that candidate can offer in that valued + credit range. +
+
+
+ {(errors?.creditRange?.max?.message ||
+ errors?.creditRange?.min?.message) && (
+
+ {
+ return (
+ filedValue < getValues("creditRange.max") ||
+ "Minimum credit should be smaller than the maximum credit."
+ );
+ },
+ },
+ }}
+ render={({ field }) => (
+
+ + $ + {( + watch("creditRange.min") * amountPerCredit.withdraw + ).toFixed(2)} +
+
+ {
+ return (
+ filedValue > watch("creditRange.min") ||
+ "Maximum credit should be greater than the maximum credit."
+ );
+ },
+ },
+ }}
+ render={({ field }) => (
+
+ + $ + {( + watch("creditRange.max") * amountPerCredit.withdraw + ).toFixed(2)} +
+
+
+
+ }
+ />
+
+ {
+ return (
+ filedValue.length > 2 ||
+ "Offering description should be at least 3 characters."
+ );
+ },
+ },
+ }}
+ render={({ field }) => (
+
+ ) : (
+ <>
+ )}
+
+ )}
+
+ {deleteOfferingId !== null ? (
+
+ // {
+ // setDeleteOfferingId(null);
+ // }}
+ // >
+ //
+ //
+ //
+ //
+ // Delete Offer
+ //+ // Sure You Want to Delete This Offer From Your Account? + //
+ //+ // You will not be able to recover them again. + //
+ // {
+ setDialogType("VIEWOFFER");
+ setOpenOfferData(offer);
+ }}
+ >
+
+ );
+};
+
+export default OfferingItem;
diff --git a/components/profile/Profile/components/Offering/index.tsx b/components/profile/Profile/components/Offering/index.tsx
new file mode 100644
index 0000000..a52e003
--- /dev/null
+++ b/components/profile/Profile/components/Offering/index.tsx
@@ -0,0 +1,229 @@
+import React, { useEffect, useState } from "react";
+import { CircularProgress, Grid } from "@mui/material";
+import Image from "next/image";
+import temp1 from "@/utils/images/temp1.jpg";
+import CreateOfferIcon from "@/utils/icons/profile/CreateOfferIcon";
+import LikeIcon from "@/utils/icons/shared/LikeIcon";
+import CasualCategoryIcon from "@/utils/icons/createPost/selectCategoryIcons/CasualCategoryIcon";
+import { useAuthContext } from "@/context/AuthContext";
+import CreateOfferDialog from "./components/CreateOfferDialog";
+import { ComingSoon } from "@/components/shared/ComingSoon";
+import { defaultImageConstant } from "@/utils/constants/withoutHtml/appConstant";
+import { getOfferings } from "@/api/offering/getOfferings";
+import { OfferingData } from "@/types/offering";
+import InfiniteScroll from "react-infinite-scroll-component";
+import changeOfferingLikeStatus from "@/api/offering/changeOfferingLikeStatus";
+import { useRouter } from "next/router";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { questionNotFound } from "@/utils/images/question";
+import OfferingItem from "./components/OfferingItem";
+import PlusIcon from "@/utils/icons/shared/PlusIcon";
+
+const styles = {
+ responsiveGrid: {
+ xxl: 3,
+ xl: 4,
+ lg: 6,
+ md: 12,
+ sm: 12,
+ xs: 12,
+ },
+};
+
+type GetData = {
+ lastDocId?: string;
+ lastPendingOffers?: number;
+};
+const Offering = () => {
+ const router = useRouter();
+ const { user } = router.query;
+
+ const {
+ setCustomDialogType,
+ setCroppingImage,
+ firebaseUser,
+ sendNotification,
+ } = useAuthContext();
+
+ const [isOfferHoverd, setisOfferHoverd] = useState({
+ isHover: false,
+ index: 0,
+ });
+ const [dialogType, setDialogType] = useState<
+ "VIEWOFFER" | "CREATEOFFER" | "CREATEOFFERDETAILS" | "EDITOFFERING" | null
+ >(null);
+ const [offeringData, setOfferingData] = useState
+
+
+ {}}
+ className={`bg-gradient-to-b from-[#121315] via-[#17181b00] to-[#17181b00] w-full h-full
+ flex absolute z-20 top-0 right-0 justify-end p-3 rounded-md group-hover:opacity-100 opacity-0 transition-all duration-300`}
+ >
+
+
+
+
+
+ {
+ e.stopPropagation();
+ handleUpdateLikeStatus({
+ offeringId: offer.offeringId,
+ isLike: !offer.isUserLike,
+ });
+ }}
+ >
+
+ {offer.counts.like}
+
+
+
+
+ {offer.completeOffers}
+
+
+
+
+ {offer.name}
++ {offer.creditRange.avg} Credits +
+
+
+ );
+
+ if (offeringData.length === 0 && !hasMoreOffering) {
+ return (
+
+
+
+ }
+ // description=" It looks like nobody has asked a question yet. Lets wait for the first one!"
+ />
+
+ );
+ }
+
+ return (
+
+
+ {offeringData.map((offer, index) => {
+ return (
+
+
+ );
+ })}
+
+
+
+
+
+
+ }
+ scrollableTarget="offeringScrollableDiv"
+ className="w-full"
+ style={{ width: "100%", overflow: hasMoreOffering ? "" : "hidden" }}
+ >
+ {
+ setDialogType("CREATEOFFER");
+ }}
+ className="group bg-primary-main absolute p-3 rounded-full bottom-8 right-8 shadow-md flex items-center gap-3 cursor-pointer"
+ >
+
+
+ );
+};
+
+export default Offering;
diff --git a/components/profile/Profile/components/ProfileInfo.tsx b/components/profile/Profile/components/ProfileInfo.tsx
new file mode 100644
index 0000000..cfcb0a9
--- /dev/null
+++ b/components/profile/Profile/components/ProfileInfo.tsx
@@ -0,0 +1,189 @@
+import { joinOrLeaveCircle } from "@/api/cricle/joinOrLeaveCircle";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { useAuthContext } from "@/context/AuthContext";
+import { RootState } from "@/redux/store";
+import { getFormatedSocialLinks } from "@/service/profile/getFormatedSocialLinks";
+import { ReduxUser, UserType } from "@/types/user";
+import SendIcon from "@/utils/icons/circle/SendIcon";
+import VerifiedIcon from "@/utils/icons/circle/VerifiedIcon";
+import OfferingIcon from "@/utils/icons/profile/OfferingIcon";
+import InstagramIcon from "@/utils/icons/setting/socialMedia/InstagramIcon";
+import TiktokIcon from "@/utils/icons/setting/socialMedia/TiktokIcon";
+import TwitchIcon from "@/utils/icons/setting/socialMedia/TwitchIcon";
+import TwitterIcon from "@/utils/icons/setting/socialMedia/TwitterIcon";
+import YouTubeIcon from "@/utils/icons/setting/socialMedia/YouTubeIcon";
+import { profilePlaceholderImage } from "@/utils/images";
+import { join } from "path";
+import { useEffect } from "react";
+import { useSelector } from "react-redux";
+import { useProfileContext } from "../context/ProfileContext";
+
+type Props = {
+ contentType: "MEMBERS" | "OFFERING";
+ setContentType: React.Dispatch+ Create Offering +
+
+
+
+
+ {/*
+
*/}
+
+
+
+ {currentUser?.userName}
+ {currentUser?.userType === UserType.VERIFIED ? (
+
+
+
+ ) : null}
+ + {currentUser?.generalInfo.bio} +
+ {/* + View More + */} +
+ {socialLinks.map((link, index) => {
+ return (
+ //
+
+ //
+ );
+ })}
+
+
+
+
+ );
+};
diff --git a/components/profile/Profile/components/ProfileLeftSection/index.tsx b/components/profile/Profile/components/ProfileLeftSection/index.tsx
new file mode 100644
index 0000000..0f2d9dd
--- /dev/null
+++ b/components/profile/Profile/components/ProfileLeftSection/index.tsx
@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from "react";
+import { useAuthContext } from "@/context/AuthContext";
+import LinkCopyIcon from "@/utils/icons/shared/LinkCopyIcon";
+import BlockIcon from "@/utils/icons/shared/BlockIcon";
+import OutLinedAlertIcon from "@/utils/icons/shared/OutLinedAlertIcon";
+import { IconDropDown } from "@/components/shared/dropDown/IconDropDown";
+import { Box } from "@mui/material";
+import LogoutIcon from "@/utils/icons/shared/LogoutIcon";
+import { RootState } from "@/redux/store";
+import { useSelector } from "react-redux";
+import { DropDownItem } from "@/types";
+import { blockOrUnblockUser } from "@/api/user/blockOrUnblockUser";
+import { ProfileInfo } from "../ProfileInfo";
+import { Members } from "../Members";
+import Offering from "../Offering";
+import { useProfileContext } from "../../context/ProfileContext";
+import ConfirmationDialog from "@/components/shared/ConfirmationDialog";
+import ReportDialog from "@/components/shared/ReportDialog";
+import { reportUser } from "@/api/user/reportUser";
+
+type Props = {
+ handleUser: () => void;
+};
+
+const ProfileLeftSection = ({ handleUser }: Props) => {
+ const { currentUser, setCurrentUser } = useProfileContext();
+
+ const user = useSelector((state: RootState) => state.user);
+ const { setToLogout, sendNotification } = useAuthContext();
+
+ const [contentType, setContentType] = useState<"MEMBERS" | "OFFERING">(
+ "MEMBERS"
+ );
+ const [menuList, setmenuList] = useState {
+ setContentType("OFFERING");
+ }}
+ >
+
+ {
+ setContentType("MEMBERS");
+ }}
+ >
+
+ {currentUser.counts.followerCount}
+
+ Members
+
{" "}
+ {user?.userId !== currentUser.userId && (
+ {
+ handleJoinOrLeaveCircle();
+ }}
+ >
+ {currentUser.isMyFollowing ? "Leave Circle" : "Join Circle"}
+
+ )}
+ {user?.userId !== currentUser.userId && (
+
+
+ )}
+
+
+
+
+ ),
+ title: "Logout",
+ actionType: "LOG_OUT",
+ });
+ } else {
+ baseMenu.push({
+ startIcon:
+
+ ),
+ title: "Block",
+ actionType: "BLOCK",
+ isMyProfileOption: false,
+ });
+ }
+ }
+ baseMenu.push({
+ startIcon: (
+
+
+ ),
+ actionType: "COPY_PROFILE",
+ title: "Copy Profile Link",
+ isMyProfileOption: false,
+ });
+ setmenuList(baseMenu);
+ }, [currentUser]);
+
+ return (
+ <>
+
+
+
+
+
+ {contentType === "MEMBERS" ?
+
+
+ );
+ }
+
+ if (currentUser.userId !== user?.userId && currentUser.blockedBy) {
+ if (currentUser.blockedBy === user?.userId) {
+ return (
+
+
+ );
+};
+
+export default Profile;
diff --git a/components/profile/Questionnaires/components/OtherUserQuestions.tsx b/components/profile/Questionnaires/components/OtherUserQuestions.tsx
new file mode 100644
index 0000000..11d1623
--- /dev/null
+++ b/components/profile/Questionnaires/components/OtherUserQuestions.tsx
@@ -0,0 +1,125 @@
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import { RootState } from "@/redux/store";
+import { redirectTouserProfile } from "@/service/shared/redirectTouserProfile";
+import { theme } from "@/theme";
+import { QuestionType } from "@/types/question";
+import { profilePlaceholderImage } from "@/utils/images";
+import { Favorite, FavoriteBorder } from "@mui/icons-material";
+import { Checkbox, Divider, IconButton } from "@mui/material";
+import dayjs from "dayjs";
+import { useRouter } from "next/router";
+
+import { useSelector } from "react-redux";
+
+type Props = {
+ questionData: QuestionType;
+
+ handleLikeCount: ({
+ questionId,
+ isLike,
+ }: {
+ questionId: string;
+ isLike: boolean;
+ }) => void;
+
+ questionId: string;
+};
+
+const OtherUserQuestions = ({
+ questionData,
+
+ handleLikeCount,
+}: Props) => {
+ const router = useRouter();
+
+ const user = useSelector((state: RootState) => state.user);
+ if (!user) {
+ return <>;
+ }
+
+ return (
+
+
+
+
+
+
+
+ {contentType === "FEED" ? (
+
+ {profileTabs.map((tab, index) => {
+ return (
+ {
+ setcontentType(tab.type);
+ setSelectedPostId(null);
+ }}
+ className={`w-fit rounded-3xl px-4 py-2 font-light text-sm tracking-wider ${
+ contentType.includes(tab.type)
+ ? ""
+ : "bg-secondary-main text-grey-100 hover:bg-primary-main hover:bg-opacity-25"
+ }`}
+ name={tab.name}
+ startIcon={tab.startIcon}
+ />
+ );
+ })}
+
+
+
+
+ );
+};
+export default OtherUserQuestions;
diff --git a/components/profile/Questionnaires/components/Question.tsx b/components/profile/Questionnaires/components/Question.tsx
new file mode 100644
index 0000000..55c9f3a
--- /dev/null
+++ b/components/profile/Questionnaires/components/Question.tsx
@@ -0,0 +1,238 @@
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import { RootState } from "@/redux/store";
+import { redirectTouserProfile } from "@/service/shared/redirectTouserProfile";
+import { theme } from "@/theme";
+import { QuestionType } from "@/types/question";
+import SendIcon from "@/utils/icons/circle/SendIcon";
+import { profilePlaceholderImage } from "@/utils/images";
+import { Favorite, FavoriteBorder } from "@mui/icons-material";
+import { Checkbox, Divider, IconButton } from "@mui/material";
+import dayjs from "dayjs";
+import { useRouter } from "next/router";
+
+import { useSelector } from "react-redux";
+
+type Props = {
+ questionData: QuestionType;
+ replyQuestion: (questionData: QuestionType) => void;
+ setCommentReplyText: React.Dispatch
+
+
+
+
+
+
+
+ {questionData.reply ? (
+ <>
+ {" "}
+
+
+ {questionData.question}
+
+
+ + Asked By{" "} + { + e.stopPropagation(); + router.push( + redirectTouserProfile( + questionData.questioner.id, + user?.userId + ) + ); + }} + > + {questionData.questioner.userName} + +
+ ++ {" "} + {Math.abs( + dayjs(questionData.createdAt).diff(dayjs(), "day") + ) === 0 + ? 1 + : Math.abs( + dayjs(questionData.createdAt).diff(dayjs(), "day") + )}{" "} + Days Ago +
+
+
+
+
+
+ {
+ handleLikeCount({
+ questionId: questionData.questionId,
+ isLike: e.target.checked,
+ });
+ }}
+ checked={questionData.isUserLike ? true : false}
+ icon={
+ + {questionData.counts.like} +
+hello world
+ + ) : null} +
+
+ );
+};
diff --git a/components/profile/Questionnaires/index.tsx b/components/profile/Questionnaires/index.tsx
new file mode 100644
index 0000000..1354142
--- /dev/null
+++ b/components/profile/Questionnaires/index.tsx
@@ -0,0 +1,307 @@
+import { Question } from "./components/Question";
+import { QuestionType } from "@/types/question";
+import { RootState } from "@/redux/store";
+import { useSelector } from "react-redux";
+import { use, useEffect, useRef, useState } from "react";
+import getQuestions from "@/api/question/getQuestions";
+import { CircularProgress, IconButton } from "@mui/material";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useAuthContext } from "@/context/AuthContext";
+import updateReply from "@/api/question/updateReply";
+import changeQuestionLikeStatus from "@/api/question/changeQuestionLikeStatus";
+import deleteQuestion from "@/api/question/deleteQuestion";
+import OtherUserQuestions from "./components/OtherUserQuestions";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { questionNotFound } from "@/utils/images/question";
+import askQuestion from "@/api/question/askQuestion";
+import ProfileContext, {
+ useProfileContext,
+} from "../Profile/context/ProfileContext";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import SendIcon from "@/utils/icons/circle/SendIcon";
+
+type Parems = {
+ lastDocId?: string | undefined;
+ isLastReplyGiven?: boolean | undefined;
+};
+
+export const Questionnaries = () => {
+ const [questionList, setQusetionList] = useState
+
+
+
+ ) => {
+ setCommentReplyText(event.target.value);
+ }}
+ value={commentReplyText ?? ""}
+ placeholder="What do you want to reply?"
+ EndIcon={
+ {
+ if (commentReplyText && commentReplyText.length > 5) {
+ handleAnswer(questionData);
+ }
+ }}
+ className={
+ commentReplyText && commentReplyText.length > 5
+ ? "text-primary-main cursor-pointer"
+ : "text-grey-300 cursor-default"
+ }
+ >
+
+ }
+ />
+ )}
+
+ {/*
+
+
+
+
+ {questionData.reply &&
+ questionData.reply.length !== null &&
+ questionData.questionId !== questionId && (
+ <>
+
+
+ {questionData.question}
+
+
+ + Asked By{" "} + { + e.stopPropagation(); + router.push( + redirectTouserProfile( + questionData.questioner.id, + user?.userId + ) + ); + }} + > + {questionData.questioner.userName} + +
+ ++ {" "} + {Math.abs( + dayjs(questionData.createdAt).diff(dayjs(), "day") + ) === 0 + ? 1 + : Math.abs( + dayjs(questionData.createdAt).diff(dayjs(), "day") + )}{" "} + Days Ago +
+
+
+
+
+
+ {
+ handleLikeCount({
+ questionId: questionData.questionId,
+ isLike: e.target.checked,
+ });
+ }}
+ checked={questionData.isUserLike ? true : false}
+ icon={
+ + {questionData.counts.like} +
+{questionData.reply}
+
+
+
+ )}
+ {questionData.reply === null &&
+ questionData.questionId !== questionId && (
+ <>
+ { + replyQuestion(questionData); + }} + > + Edit +
+{ + handleDeleteQuestion(questionData.questionId); + }} + > + Delete +
+
+
+
+ )}
+ {questionData.questionId === questionId && (
+ { + replyQuestion(questionData); + }} + > + Reply +
+{ + handleDeleteQuestion(questionData.questionId); + }} + > + Delete +
+
+
*/}
+
+
+
+
+
+
+ Gerdes
+
+
+ + My favorite color is every color and none of the colors all at once + but also it not even a moment. Does that definitely make sense? +
+
+
+
+ }
+ className=" gap-3 w-full flex flex-col"
+ scrollableTarget="questionScrollableDiv"
+ >
+ {questionList.map((question, index) => {
+ return (
+ <>
+ {isOtherUserQuestions ? (
+
+ {questionList.length === 0 && !hasMoreQuestion ? (
+
+
+ }
+ description=" It looks like nobody has asked a question yet. Lets wait for the first one!"
+ />
+ ) : (
+
+ ) => {
+ setAskQuestionText(event.target.value);
+ }}
+ placeholder="What do you want to ask about?"
+ EndIcon={
+ {
+ if (askQuestionText.length > 2) handleAskQuestion();
+ }}
+ className={
+ askQuestionText.length > 2
+ ? "text-primary-main cursor-pointer"
+ : "text-grey-300 cursor-default"
+ }
+ >
+
+ }
+ />
+
+ )}
+
+ );
+};
diff --git a/components/setting/components/Account/components/CreditSettings.tsx b/components/setting/components/Account/components/CreditSettings.tsx
new file mode 100644
index 0000000..417594d
--- /dev/null
+++ b/components/setting/components/Account/components/CreditSettings.tsx
@@ -0,0 +1,265 @@
+import { theme } from "@/theme";
+import CreaditIcon from "@/utils/icons/setting/CreaditIcon";
+import { Button, Divider } from "@mui/material";
+import React, { Dispatch, SetStateAction, useState } from "react";
+import { ReduxUser } from "@/types/user";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+
+import {
+ Control,
+ ControllerProps,
+ FieldErrors,
+ FieldPath,
+ FieldValues,
+ UseFormSetValue,
+} from "react-hook-form";
+import CustomToggleSwitch from "@/components/shared/CustomToggleSwitch";
+import NotCreditShowCrown from "@/utils/icons/setting/NotCreditShowCrown";
+import CustomButton from "@/components/shared/CustomButton";
+import GradientCrown from "@/utils/icons/levelUp/GradientCrown";
+import { useAuthContext } from "@/context/AuthContext";
+
+type Props = {
+ setValue: UseFormSetValue
+
+
+ );
+};
+
+export default CreditSettings;
diff --git a/components/setting/components/Account/index.tsx b/components/setting/components/Account/index.tsx
new file mode 100644
index 0000000..170721e
--- /dev/null
+++ b/components/setting/components/Account/index.tsx
@@ -0,0 +1,591 @@
+import React, {
+ ChangeEvent,
+ Dispatch,
+ SetStateAction,
+ useEffect,
+ useState,
+} from "react";
+import { theme } from "@/theme";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import InstagramIcon from "@/utils/icons/setting/socialMedia/InstagramIcon";
+import TwitterIcon from "@/utils/icons/setting/socialMedia/TwitterIcon";
+import TiktokIcon from "@/utils/icons/setting/socialMedia/TiktokIcon";
+import TwitchIcon from "@/utils/icons/setting/socialMedia/TwitchIcon";
+import YouTubeIcon from "@/utils/icons/setting/socialMedia/YouTubeIcon";
+import WebsiteIcon from "@/utils/icons/setting/socialMedia/WebsiteIcon";
+import EditProfileIcon from "@/utils/icons/setting/EditProfileIcon";
+import LinkIcon from "@/utils/icons/setting/LinkIcon";
+import CustomToggleSwitch from "@/components/shared/CustomToggleSwitch";
+import { CircularProgress, Divider } from "@mui/material";
+import { Controller, useForm } from "react-hook-form";
+import { ReduxUser } from "@/types/user";
+import ImagePlaceHolderGalleryIcon from "@/utils/icons/createPost/ImagePlaceHolderGalleryIcon";
+import { getImageObject } from "@/service/shared/getImageObject";
+import CustomLoadingButton from "@/components/shared/CustomLoadingButton";
+import { convertEmptyToNull } from "@/service/shared/convertEmptyFieldToNull";
+import { uploadImageToStorage } from "@/service/firebase/uploadImage";
+import { updateUser } from "@/api/user/updateUser";
+import { useAuthContext } from "@/context/AuthContext";
+import { useDispatch } from "react-redux";
+import InputCropSingleImage from "@/components/shared/cropImage/singleCropImage/InputCropSingleImage";
+import CreditSettings from "./components/CreditSettings";
+import SettingBottomBar from "../Shared/SettingBottomBar";
+
+type Props = {
+ user: ReduxUser;
+ setCurrentTab: Dispatch
+
+
+
+
+ Credit Settings
+
+ {" "}
+
+ {!user?.generationSettings && (
+
+
+
+
+ + Earn with Witit +
++ With Witit, you can allow others to generate images and By doing + so you can charge credits per transaction and withdrawal those + credits into cash at the rate of $1 for every 150 credits +
+
+
+
+
+ {isAllowedOthers && (
+ <>
+ + Allow others to use your post on their AI +
+
+ (
+ {
+ setIsAllowedOthers(e.target.checked);
+ field.onChange(e.target.checked);
+ if (!e.target.checked) {
+ setValue(
+ "generationSettings.creditPerDerivative",
+ 0
+ );
+ return;
+ }
+ }}
+ />
+ )}
+ />
+
+
+ {
+ return (
+ fieldValue! >= 1 ||
+ "Credit PerDerivative must be greater than 0"
+ );
+ },
+ }),
+ }}
+ render={({ field }) => (
+ {
+ field.onChange(+e.target.value);
+ }}
+ className=" w-[80px] p-2 h-fit text-center border rounded-lg focus:outline-none border-grey-600 bg-grey-800 "
+ />
+ )}
+ />
+
+
+ )}
+
+
+ + Cost per derivative +
++ If someone uses your image when generating their image, + you will get this credit. +
++ { + errors.generationSettings?.creditPerDerivative + ?.message + } +
+
+
+
+ {
+ return (
+ fieldValue! >= 1 ||
+ "Cost per Message must be greater than 0"
+ );
+ },
+ }),
+ }}
+ render={({ field }) => (
+ {
+ field.onChange(+e.target.value);
+ }}
+ className=" w-[80px] p-2 h-fit text-center border rounded-lg focus:outline-none border-grey-600 bg-grey-800 "
+ />
+ )}
+ />
+
+
+
+ Cost per Message
++ You will get this credit when unverified senders sends a + message to you. +
++ {errors.generationSettings?.creditPerMessage?.message} +
+
+
+ {/* + You can set the price for your AI models so when someone uses + your AI model to generate an image, you get credits. +
+ +
+
+ { + setCurrentTab("AI_MODELS"); + }} + > + SET PRICE FOR EACH MODEL +
+
+ {
+ handleSubmit();
+ }}
+ />
+
*/}
+
+
+ )}
+ + Earn cash{" "} + from your AI, posts, prompts or through messaging +
+
+
+
+
+ );
+};
+
+export default ApplicationItem;
diff --git a/components/setting/components/AiModels/components/ModelItem/components/EditModelDialog.tsx b/components/setting/components/AiModels/components/ModelItem/components/EditModelDialog.tsx
new file mode 100644
index 0000000..54059fc
--- /dev/null
+++ b/components/setting/components/AiModels/components/ModelItem/components/EditModelDialog.tsx
@@ -0,0 +1,258 @@
+import { updateAiModelDetails } from "@/api/ai/updateAiModelDetails";
+import CustomButton from "@/components/shared/CustomButton";
+import CustomInputTag from "@/components/shared/CustomInputTag";
+import CustomInputTextField from "@/components/shared/CustomInputTextField";
+import CustomLoadingButton from "@/components/shared/CustomLoadingButton";
+import CustomToggleSwitch from "@/components/shared/CustomToggleSwitch";
+import CustomDialog from "@/components/shared/dialog/CustomDialog";
+import CustomDialogCommonTopBar from "@/components/shared/dialog/GlobalDialogs/components/shared/CustomDialogCommonTopBar";
+import { useAuthContext } from "@/context/AuthContext";
+import { updateModels } from "@/redux/slices/modelSlice";
+import { RootState } from "@/redux/store";
+import { theme } from "@/theme";
+import { UserModel } from "@/types/ai";
+import EditIcon from "@/utils/icons/shared/EditIcon";
+import { Divider } from "@mui/material";
+import React, { ChangeEvent, useContext, useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useDispatch, useSelector } from "react-redux";
+type Props = {
+ model: UserModel;
+ setIsModelDialogOpen: React.Dispatch
+
+ {application.applicationStatus === "REJECTED" ? (
+
+
+ {application.modelName}
++ Created On {dayjs(application.createdAt).format("DD MMM, YYYY")} +
+
+
+ ) : null}
+ + {application.message} +
+
+
+
+
+ + Please note that the training image and model class cannot be + edited. If you wish to retrain the model, kindly delete this one and + train a new model. +
+
+
+
+
+ Banned Words
++ Any words entered into this field will be prohibited to use, + preventing the generation of images containing those words. By not + including banned words, your verification badge will be red, + indicating that nothing is off limits. +
+
+
+
+ (
+ {
+ field.onChange(negativePrompt);
+ }}
+ />
+ )}
+ />
+
+
+
+ Model Name
+
+ (
+ ) => {
+ field.onChange(e.target.value);
+ }}
+ />
+ )}
+ />
+
+
+
+ Earn with Witit
++ With Witit, you can allow others to generate images and By doing + so you can charge credits per transaction and withdrawal those + credits into cash at the rate of $1 for every 150 credits +
+
+
+
+ (
+ {
+ field.onChange(!field.value);
+ setGenerationCostToggle(!field.value);
+ }}
+ />
+ )}
+ />
+
+ {generationCostToggle && (
+ <>
+ Allow others to generate on your AI
+
+
+ {errors.generationSettings?.creditPerPhoto && (
+
+
+ Cost per derivative
++ If someone uses your image when generating their image, + you will get this credit. +
+
+ (
+ ) => {
+ console.log(e.target.value, "555");
+ field.onChange(e.target.value);
+ }}
+ className={`[&>.MuiInputBase-root>.MuiInputBase-input]:text-center py-2 ${
+ errors.generationSettings?.creditPerPhoto
+ ? "border-error-main"
+ : ""
+ } `}
+ />
+ )}
+ />
+
+ + {errors.generationSettings?.creditPerPhoto.message} +
+ )} + + )} +
+
+ {
+ if (model.isActive) {
+ e.stopPropagation();
+ setIsModelDialogOpen(true);
+ }
+ }}
+ >
+
+ {isModelDialogOpen ? (
+
+
+ {model.selectedPhotos.map((image, index) => {
+ return (
+
+
+ );
+ })}
+
+
+
+ {
+ e.stopPropagation();
+ setisDeleteModel(true);
+ }}
+ className="bg-grey-700 text-grey-200 rounded-lg border border-solid border-grey-600 hover:border-error-main hover:text-error-main"
+ >
+
+
+
+ {model.generationSettings.allowGenerationOnModel
+ ? "Public Model"
+ : "Private Model"}
+
+
+
+ {model.modelName}
++ Created On {dayjs(model.createdAt).format("DD MMM, YYYY")} |{" "} + {model.counts.generatedImages} Photos Generated +
+
+
+
+ {/* left side */}
+
+
+ {/* right side */}
+
+
+ )}
+
+
+
+
+
+
+ AI Models
+
+ {models.userModelList.map((data, index) => {
+ return (
+
+ {models.userModelList.length < 1 && (
+
+
+ );
+ })}
+
+
+
+ }
+ title="No Models Found"
+ description="Start train models & enjoy an open and accessible experience!"
+ />
+
+
+ )}
+
+
+ {aiApplications.length < 1 && !hasMoreAiApplication && (
+
+
+
+
+
+
+ Applications
+
+
+
+ }
+ scrollableTarget="aiApplicationsScrollableDiv"
+ className="overflow-auto flex flex-col gap-2 px-6 justify-around"
+ >
+ {aiApplications.map((application, index) => (
+
+
+
+ }
+ title="No Applications Found"
+ description="There are no applications pending. Start train models."
+ />
+
+ {user ? (
+ setIsTrainModelDialogOpen(true)}
+ />
+
+
+ {isTrainModelDialogOpen ? (
+ + {user.allowedModels - models.userModelList.length} Models + remaining Out Of {user.allowedModels} Free Models +
+ ) : null} +
+
+
+ );
+};
+
+export default AiModels;
diff --git a/components/setting/components/BlockProfiles/components/BlockItem.tsx b/components/setting/components/BlockProfiles/components/BlockItem.tsx
new file mode 100644
index 0000000..cbb6ee4
--- /dev/null
+++ b/components/setting/components/BlockProfiles/components/BlockItem.tsx
@@ -0,0 +1,44 @@
+import CustomButton from "@/components/shared/CustomButton";
+import React from "react";
+import { BlockedUser } from "@/types/user";
+import dayjs from "dayjs";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import { profilePlaceholderImage } from "@/utils/images";
+
+type Props = {
+ blockedUser: BlockedUser;
+ unblockUser: (data: { blockedUserId: string }) => Promise
+
+ unblockUser({
+ blockedUserId: blockedUser.blockedUserInfo.userId,
+ })
+ }
+ />
+
+ );
+};
+
+export default BlockItem;
diff --git a/components/setting/components/BlockProfiles/index.tsx b/components/setting/components/BlockProfiles/index.tsx
new file mode 100644
index 0000000..6d9f446
--- /dev/null
+++ b/components/setting/components/BlockProfiles/index.tsx
@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from "react";
+import { CircularProgress, Divider } from "@mui/material";
+import { theme } from "@/theme";
+import BlockItem from "./components/BlockItem";
+import BlocklistIcon from "@/utils/icons/setting/BlocklistIcon";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { BlockedUser } from "@/types/user";
+import { getBlocklist } from "@/api/user/getBlocklist";
+import { useAuthContext } from "@/context/AuthContext";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { blockOrUnblockUser } from "@/api/user/blockOrUnblockUser";
+import { NoDataFound } from "@/components/shared/NoDataFound";
+import { blockUSerNotFound } from "@/utils/images/setting";
+import SettingBottomBar from "../Shared/SettingBottomBar";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+
+type GetBlocklistProps = {
+ lastDocId?: string;
+};
+
+type UnblockUserProps = {
+ blockedUserId: string;
+};
+
+let docLimit = 20;
+
+const BlockProfiles = () => {
+ const user = useSelector((state: RootState) => state.user);
+
+ const { sendNotification } = useAuthContext();
+
+ const [blocklist, setBlocklist] = useState
+
+
+
+
+
+ karlshakur
++ Blocked On {dayjs(blockedUser.createdAt).format("DD MMM, YYYY")} +
+
+
+ )}
+
+
+
+ {blocklist.length < 1 && !hasMoreBlockUsers && (
+
+
+
+
+
+
+ Block Profiles
+
+
+
+ }
+ scrollableTarget="blocklistScrollableDiv"
+ className="overflow-auto flex flex-col gap-4 px-6 pt-3 pb-6"
+ >
+ {blocklist.map((item, index) => (
+
+
+ ))}
+
+
+
+
+
+
+ }
+ title="No Blocked Profiles"
+ />
+
+
+
+ );
+};
+
+export default BlockProfiles;
diff --git a/components/setting/components/LinkBankAccount/components/DetailsPendingStatus.tsx b/components/setting/components/LinkBankAccount/components/DetailsPendingStatus.tsx
new file mode 100644
index 0000000..d94b190
--- /dev/null
+++ b/components/setting/components/LinkBankAccount/components/DetailsPendingStatus.tsx
@@ -0,0 +1,65 @@
+import CustomButton from "@/components/shared/CustomButton";
+import { theme } from "@/theme";
+import DollerIcon from "@/utils/icons/setting/DollerIcon";
+import DocumentPending from "@/utils/icons/setting/DocumentPending";
+import { Divider } from "@mui/material";
+import React, { useState } from "react";
+import { getBankSetupUrl } from "@/api/stripe/getBankSetupUrl";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { useRouter } from "next/router";
+import { useAuthContext } from "@/context/AuthContext";
+import CustomLoadingButton from "@/components/shared/CustomLoadingButton";
+
+const DetailsPendingStatus = () => {
+ const [isLoding, setIsLoading] = useState
+ {
+ handleSubmit();
+ }}
+ />
+
+ );
+};
+
+export default DetailsPendingStatus;
diff --git a/components/setting/components/LinkBankAccount/components/FailedStatus.tsx b/components/setting/components/LinkBankAccount/components/FailedStatus.tsx
new file mode 100644
index 0000000..58cc3ef
--- /dev/null
+++ b/components/setting/components/LinkBankAccount/components/FailedStatus.tsx
@@ -0,0 +1,64 @@
+import { getBankSetupUrl } from "@/api/stripe/getBankSetupUrl";
+import CustomButton from "@/components/shared/CustomButton";
+import CustomLoadingButton from "@/components/shared/CustomLoadingButton";
+import { useAuthContext } from "@/context/AuthContext";
+import { RootState } from "@/redux/store";
+import { theme } from "@/theme";
+import DollerIcon from "@/utils/icons/setting/DollerIcon";
+import CancelIcon from "@/utils/icons/setting/statusDialog/CancelIcon";
+import { Divider } from "@mui/material";
+import { useState } from "react";
+import { useSelector } from "react-redux";
+
+const FailedStatus = () => {
+ const [isLoding, setIsLoading] = useState
+
+
+ {" "}
+
+ Document Pending
++ To verify your account, we require additional information. Please + provide them to proceed with the verification process. +
+
+ {
+ handleSubmit();
+ }}
+ />
+
+ );
+};
+
+export default FailedStatus;
diff --git a/components/setting/components/LinkBankAccount/components/LinkedStatus.tsx b/components/setting/components/LinkBankAccount/components/LinkedStatus.tsx
new file mode 100644
index 0000000..4d05370
--- /dev/null
+++ b/components/setting/components/LinkBankAccount/components/LinkedStatus.tsx
@@ -0,0 +1,59 @@
+import { getBankDashboardUrl } from "@/api/stripe/getBankDashboardUrl";
+import CustomButton from "@/components/shared/CustomButton";
+import CustomLoadingButton from "@/components/shared/CustomLoadingButton";
+import { useAuthContext } from "@/context/AuthContext";
+import { RootState } from "@/redux/store";
+import CheckCircleOverflowIcon from "@/utils/icons/setting/statusDialog/CheckCircleOverflowIcon";
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+
+const LinkedStatus = () => {
+ const [isLoding, setIsLoading] = useState
+
+
+ {" "}
+
+ + Verification Pending +
++ Sorry, we were unable to verify your bank account. please Try Again. +
+
+ {
+ handleSubmit();
+ }}
+ />
+ {}}
+ />
+
+ );
+};
+
+export default LinkedStatus;
diff --git a/components/setting/components/LinkBankAccount/components/NotLinkedStatus.tsx b/components/setting/components/LinkBankAccount/components/NotLinkedStatus.tsx
new file mode 100644
index 0000000..7a35d29
--- /dev/null
+++ b/components/setting/components/LinkBankAccount/components/NotLinkedStatus.tsx
@@ -0,0 +1,59 @@
+import CustomButton from "@/components/shared/CustomButton";
+import BankIcon from "@/utils/icons/setting/BankIcon";
+import React from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { useAuthContext } from "@/context/AuthContext";
+import { getBankSetupUrl } from "@/api/stripe/getBankSetupUrl";
+
+const NotLinkedStatus = () => {
+ const user = useSelector((state: RootState) => state.user);
+ const { sendNotification } = useAuthContext();
+
+
+ if (!user) {
+ return <>;
+ }
+ const handleSubmit = async () => {
+ const url = window.location.protocol + "//" + window.location.host;
+
+ const response = await getBankSetupUrl({
+ returnUrl: url,
+ refreshUrl: url,
+ user_id: user.userId,
+ });
+ if (response.status === 200) {
+ window.open(response.data.url, '_blank');
+ return;
+ }
+ sendNotification({ type: "ERROR", message: response.error });
+ };
+
+ return (
+
+
+
+
+
+ {" "}
+
+ + Bank account linked +
++ Your bank account has been linked successfully. You can withdraw your + credit from your linked bank account now. +
+
+ {
+ handleSubmit();
+ }}
+ />
+
+ );
+};
+
+export default NotLinkedStatus;
diff --git a/components/setting/components/LinkBankAccount/components/PendingStatus.tsx b/components/setting/components/LinkBankAccount/components/PendingStatus.tsx
new file mode 100644
index 0000000..d89510d
--- /dev/null
+++ b/components/setting/components/LinkBankAccount/components/PendingStatus.tsx
@@ -0,0 +1,28 @@
+import CustomButton from "@/components/shared/CustomButton";
+import ClockIcon from "@/utils/icons/setting/statusDialog/ClockIcon";
+import React from "react";
+
+const PendingStatus = () => {
+ return (
+
+
+
+
+ {" "}
+
+ + Bank account not linked +
++ Connect bank account to receive payments from witit. +
+
+ {}} />
+
+
+ );
+};
+
+export default PendingStatus;
diff --git a/components/setting/components/LinkBankAccount/index.tsx b/components/setting/components/LinkBankAccount/index.tsx
new file mode 100644
index 0000000..043bac5
--- /dev/null
+++ b/components/setting/components/LinkBankAccount/index.tsx
@@ -0,0 +1,70 @@
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { useAuthContext } from "@/context/AuthContext";
+import { getBankStatus } from "@/api/stripe/getBankStatus";
+import NotLinkedStatus from "./components/NotLinkedStatus";
+import LinkedStatus from "./components/LinkedStatus";
+import DetailsPendingStatus from "./components/DetailsPendingStatus";
+import PendingStatus from "./components/PendingStatus";
+import { CircularProgress, Divider } from "@mui/material";
+import DollerIcon from "@/utils/icons/setting/DollerIcon";
+import { theme } from "@/theme";
+import SettingBottomBar from "../Shared/SettingBottomBar";
+
+const LinkBankAccount = () => {
+ const [bankStatus, setBankStatus] = useState
+
+
+ {" "}
+
+ + Verification Pending +
++ Your bank linking process has not yet been completed, please + complete it. +
+
+
+
+ );
+};
+
+export default LinkBankAccount;
diff --git a/components/setting/components/NotificationAndNSFW/index.tsx b/components/setting/components/NotificationAndNSFW/index.tsx
new file mode 100644
index 0000000..979ad9e
--- /dev/null
+++ b/components/setting/components/NotificationAndNSFW/index.tsx
@@ -0,0 +1,313 @@
+import { theme } from "@/theme";
+import NotificationIcon from "@/utils/icons/setting/NotificationIcon";
+import { Divider } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import CustomToggleSwitch from "../../../shared/CustomToggleSwitch";
+import NSFWIcon from "@/utils/icons/setting/NSFWIcon";
+import { Interaction } from "@/types/setting";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { ReduxUser } from "@/types/user";
+import { updateUser } from "@/api/user/updateUser";
+import { useAuthContext } from "@/context/AuthContext";
+import SettingBottomBar from "../Shared/SettingBottomBar";
+
+const NotificationAndNSFW = () => {
+ const user = useSelector((state: RootState) => state.user);
+ const { sendNotification } = useAuthContext();
+ const dispatch = useDispatch();
+
+ const interactions: Interaction[] = [
+ {
+ type: "Like",
+ description: "When Someone Likes Your Uploaded Post.",
+ isCheck: user?.pushNotifications?.likes,
+ objectType: "likes",
+ },
+ {
+ type: "Comment",
+ description: "When Someone Comments Your Uploaded Post.",
+ isCheck: user?.pushNotifications?.comments,
+ objectType: "comments",
+ },
+ {
+ type: "Direct Message",
+ description: "When Someone Messages You Directly.",
+ isCheck: user?.pushNotifications?.directMessages,
+ objectType: "directMessages",
+ },
+ {
+ type: "Circle Add",
+ description: "When Someone Joins Your Circle.",
+ isCheck: user?.pushNotifications?.circleAdds,
+ objectType: "circleAdds",
+ },
+ {
+ type: "From Witit",
+ description: "When Witit Sends You Updates.",
+ isCheck: user?.pushNotifications?.fromWitit,
+ objectType: "fromWitit",
+ },
+ ];
+ const [updatedList, setUpdatedList] = useState
+
+
+
+ {bankStatus === "ACCOUNT_NOT_LINKED" &&
+
+ Bank Account
+
+
+ )}
+
+
+
+
+
+
+ );
+};
+
+export default NotificationAndNSFW;
diff --git a/components/setting/components/Shared/SettingBottomBar.tsx b/components/setting/components/Shared/SettingBottomBar.tsx
new file mode 100644
index 0000000..2ec7907
--- /dev/null
+++ b/components/setting/components/Shared/SettingBottomBar.tsx
@@ -0,0 +1,91 @@
+import ContactUs from "@/components/footerDialogs/ContactUs";
+import ContentPolicy from "@/components/footerDialogs/ContentPolicy";
+import PrivacyPolicy from "@/components/footerDialogs/PrivacyPolicy";
+import TermsOfServices from "@/components/footerDialogs/TermsOfServices";
+import CustomDialog from "@/components/shared/dialog/CustomDialog";
+import { useAuthContext } from "@/context/AuthContext";
+import React, { useState } from "react";
+
+const SettingBottomBar = () => {
+ const [isOpenDialogString, setIsOpenDialogString] = useState
+ {/* left side */}
+
+
+
+ {/* right side */}
+
+
+
+
+
+
+
+ Notification Settings
+
+
+
+
+
+ {updatedList.map((item, id) => {
+ return (
+ <>
+
+
+ Pause All Notifications
+
+ {
+ setIsNotification(e.target.checked);
+ handleAllNotification(e.target.checked);
+ if (e.target.checked === true) {
+ setUpdatedList(
+ interactions.map((val) => {
+ val.isCheck = false;
+ return val;
+ })
+ );
+ }
+ }}
+ />
+
+
+
+
+ );
+ })}
+
+
+ {item.type}
++ {item.description} +
+
+ {
+ handleSwitch(id);
+ if (
+ updatedList.find((item) => item.isCheck === true)
+ ) {
+ setIsNotification(false);
+ }
+ fetchData(item);
+ }}
+ />
+
+
+
+
+
+
+
+ NSFW
+
+ {" "}
+
+
+
+
+
+ + Allow others to watch NSFW Content In Your Account +
+
+ {
+ handleNsfw(e.target.checked);
+ }}
+ />
+
+
+
+ + What is NSFW Content? +
++ NSFW is an abbreviation for the phrases such as: “Not Safe For + Wife”, “Not Suitable For Work”, but mostly used as “Not Safe For + Work” +
++ It is an internet slang that is often used to describe internet + posts and content that is mainly involves nudity, sexual + activity, heavy profanity and more... +
++ With Witit, we want to provide a safe place for people to freely + express art or interests that they couldn’t otherwise share on + other platforms. However doing so comes with some requirements, + such as needing to turn on the ability to see and post NSFW + content. +
++ NSFW is also not a free pass to post anything you want, we at + Witit just allow you fewer restricts than our social media + companions. We still do not tolerate obscene violence or illegal + activity of any sort. +
++ Accounts that post NSFW content have been marked with a red + verification badge. +
+
+
+ + How can I view or post NSFW content? +
++ To turn on, off, or manage your NSFW preferences, you must do so + from the desktop version of Witit. This is part of the app + stores terms of service and not a creative decision. You also + must be 18 years of age or older. Please visit and login to your + Witit account at http://Witit.com to get started.{" "} +
+
+
+
+
+ {isOpenDialogString && (
+ { + setIsOpenDialogString("TERMS_OF_SERVICE"); + }} + > + Terms Of Services +
+|
+{ + setIsOpenDialogString("PRIVACY_POLICY"); + }} + > + Privacy Policy +
+|
{" "} +{ + setIsOpenDialogString("CONTENT_POLICY"); + }} + > + Content Policy +
+|
{" "} +{ + setIsOpenDialogString("CONTACT_US"); + }} + > + Contact Us +
+
+
+ {" "}
+ {status?.paymentStatus === "true" && (
+
+ )}
+ {status?.paymentStatus === "false" && (
+
+ {tabs.map((tab, index) => {
+ return (
+
+ {
+ setCurrentTab(tab.type);
+ }}
+ >
+
+
+ );
+ })}
+ + {tab.name} +
+
+
+
+ {status?.paymentStatus && (
+
+ {currentTab === "ACCOUNT" ? (
+
+
+
+
+ }
+ buttonName="Done"
+ title="Payment Successful"
+ description="Your transaction has successfully been completed. Credit has been added to your account."
+ descriptionStyle="text-xs w-full"
+ buttonStyle="bg-primary-main mt-3"
+ titleStyle=" text-primary-main mb-2"
+ handleEvent={() => {
+ dispatch(setPaymentStatus(""));
+ }}
+ />
+
+
+
+ }
+ buttonName="Try Again"
+ title="Ohh No !!"
+ description="We aren’t able to process your payment.
+ Please try again !!"
+ buttonStyle="bg-error-main mt-3"
+ titleStyle=" text-error-main mb-2"
+ handleEvent={() => {
+ dispatch(setPaymentStatus(""));
+ }}
+ />
+
+ )}
+
+ )}
+
+
+ );
+};
+
+export default Settings;
diff --git a/components/shared/CategorySelection.tsx b/components/shared/CategorySelection.tsx
new file mode 100644
index 0000000..8c90779
--- /dev/null
+++ b/components/shared/CategorySelection.tsx
@@ -0,0 +1,93 @@
+import { useAuthContext } from "@/context/AuthContext";
+import { RootState } from "@/redux/store";
+import { theme } from "@/theme";
+import { CategoryList } from "@/utils/constants/withHtml/CategoryList";
+import { Tooltip } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+
+type Props = {
+ sendSelectedCategoryList: (list: string[]) => void;
+ setEmpty?: boolean;
+};
+
+const CategorySelection = ({ sendSelectedCategoryList, setEmpty }: Props) => {
+ const { setDiscoverSearch } = useAuthContext();
+ const [selectedCategoryList, setSelectedCategoryList] = useState
+
+ );
+};
+
+export default CategorySelection;
diff --git a/components/shared/ComingSoon.tsx b/components/shared/ComingSoon.tsx
new file mode 100644
index 0000000..4dbd5db
--- /dev/null
+++ b/components/shared/ComingSoon.tsx
@@ -0,0 +1,11 @@
+import { comingSoon } from "@/utils/images";
+import Image from "next/image";
+import { CustomImagePreview } from "./CustomImagePreview";
+
+export const ComingSoon = () => {
+ return (
+
+ {CategoryList.map((item, index) => {
+ return (
+ <>
+ {index + 1 === CategoryList.length && !user?.NSFW ? null : (
+
+
+ {
+ setDiscoverSearch({ search: null });
+ setSelectedCategoryList((prev) => {
+ if (prev.includes(item.name)) {
+ return prev.filter(
+ (category) => category !== item.name
+ );
+ } else {
+ return [...prev, item.name];
+ }
+ });
+ }}
+ componentsProps={{
+ tooltip: {
+ sx: {
+ paddingX: 1.5,
+ paddingY: 0.8,
+ bgcolor: theme.palette.primary.main,
+ "& .MuiTooltip-arrow": {
+ color: theme.palette.primary.main,
+ },
+ },
+ },
+ }}
+ >
+
+
+ )}
+
+ );
+ })}
+
+
+
+ {item.startIcon}
+
+
+
+ );
+};
diff --git a/components/shared/ConfirmationDialog.tsx b/components/shared/ConfirmationDialog.tsx
new file mode 100644
index 0000000..0bddfad
--- /dev/null
+++ b/components/shared/ConfirmationDialog.tsx
@@ -0,0 +1,94 @@
+import { theme } from "@/theme";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import { IconButton, Divider } from "@mui/material";
+import React from "react";
+import CustomButton from "./CustomButton";
+import CustomDialog from "./dialog/CustomDialog";
+import { CustomImagePreview } from "./CustomImagePreview";
+import deleteImage from "@/utils/images/deleteOffer.svg";
+import Image from "next/image";
+import crossStripsBg from "@/utils/images/crossStripsBg.svg";
+
+type Props = {
+ isOpen?: boolean;
+ onCancel?: () => void;
+ onConform?: () => void;
+ image?: string;
+ title?: {
+ titleMain?: string;
+ title1?: string;
+ title2?: string;
+ confirmButton?: string;
+ };
+};
+const ConfirmationDialog = ({
+ isOpen,
+ onCancel,
+ onConform,
+ title,
+ image,
+}: Props) => {
+ return (
+ <>
+ {" "}
+
+
+ */}
+
+
+
+ {/* + {title && title.titleMain} +
+
+ {image && (
+
+
+
+ )}
+ {title && (
+ + {title.title1} +
+ )} + {title && ( ++ {title.title2} +
+ )} +
+
+
+ {croppingImage?.image?.src && (
+
+ );
+};
+
+export default ImageCropZone;
+// style={{
+// // mediaStyle: { overflow: "initial" },
+// containerStyle: {
+// // position: "absolute",
+// // top: "0",
+// width: "50px",
+// // height: window.innerWidth,
+// // overflow: "hidden",
+// // border: "1px solid black",
+// },
+// mediaStyle: { width: "51px" },
+// cropAreaStyle: {
+// width: "52px",
+// },
+// }}//
diff --git a/components/shared/CropImage/multipleCropImage/InputCropMultiImages.tsx b/components/shared/CropImage/multipleCropImage/InputCropMultiImages.tsx
new file mode 100644
index 0000000..a295b7c
--- /dev/null
+++ b/components/shared/CropImage/multipleCropImage/InputCropMultiImages.tsx
@@ -0,0 +1,146 @@
+/* eslint-disable @next/next/no-img-element */
+"use client";
+import React, { useState, useRef, useEffect, forwardRef } from "react";
+import { ImageInfo } from "@/types";
+import ImagePlaceHolderGalleryIcon from "@/utils/icons/createPost/ImagePlaceHolderGalleryIcon";
+import Lottie from "lottie-react";
+import ImagePlaceholderLottie from "@/utils/lottie/ImagePlaceholderLottie.json";
+import DisplayMultipleImages from "@/service/imageCropper/DisplayMultipleImages";
+
+type Props = {
+ setSelectdImgs: React.Dispatch<
+ React.SetStateAction<
+ {
+ image: ImageInfo;
+ index: number;
+ }[]
+ >
+ >;
+ isSmall: boolean;
+ isEnabled: boolean;
+};
+
+const InputCropMultiImages = forwardRef(
+ ({ setSelectdImgs, isSmall, isEnabled }: Props, ref) => {
+ const [multiImages, setMultiImages] = useState<
+ {
+ image: ImageInfo;
+ index: number;
+ }[]
+ >([]);
+
+ const imageInputRef = useRef
+
+ )}
+
+
+ {/* */}
+
+ {isSmall ? (
+ */}
+
+ );
+ }
+);
+
+InputCropMultiImages.displayName = "images";
+
+export default InputCropMultiImages;
diff --git a/components/shared/CropImage/multipleCropImage/ModifyImages.tsx b/components/shared/CropImage/multipleCropImage/ModifyImages.tsx
new file mode 100644
index 0000000..0774313
--- /dev/null
+++ b/components/shared/CropImage/multipleCropImage/ModifyImages.tsx
@@ -0,0 +1,560 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable jsx-a11y/alt-text */
+import React, { useCallback, useEffect, useState } from "react";
+import { ImageInfo } from "@/types";
+import InputImages from "../../dialog/GlobalDialogs/components/CreatePostDialog/components/InputImages";
+import { Grid, IconButton, Slider } from "@mui/material";
+import appConstant, {
+ defaultImageConstant,
+} from "@/utils/constants/withoutHtml/appConstant";
+import CropLinerIcon from "@/utils/icons/createPost/CropLinerIcon";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import ArrowDownIcon from "@/utils/icons/shared/ArrowDownIcon";
+import CustomButton from "../../CustomButton";
+import CheckIcon from "@/utils/icons/shared/CheckIcon";
+import { theme } from "@/theme";
+import { useAuthContext } from "@/context/AuthContext";
+import getCroppedImg from "@/service/imageCropper/cropImage";
+import DisplayMultipleImages from "@/service/imageCropper/DisplayMultipleImages";
+import ImageCropZone from "../ImageCropZone";
+import InputCropMultiImages from "@/components/shared/cropImage/multipleCropImage/InputCropMultiImages";
+
+type Props = {
+ isNextVisible?: boolean;
+ isCrop: boolean;
+ limit: number;
+ images: {
+ image: ImageInfo;
+ index: number;
+ }[];
+ setStep: React.Dispatch
+
+ ) : (
+
+
+ )}
+ {/*
+
+
+ {/*
+
+
+ Drag profile pic here,or
+ browse
+
+
+
*/}
+
+ {isSmall ? (
+
+
+
+ )}
+
+ Drag profile pic here,or
+ browse
+
+
+ {/* Dragging Images top layer */}
+ {isDraggingNewImage && isCrop ? (
+
+
+ );
+};
+
+export default ModifyImages;
diff --git a/components/shared/CropImage/singleCropImage/CropSingleImageDialog.tsx b/components/shared/CropImage/singleCropImage/CropSingleImageDialog.tsx
new file mode 100644
index 0000000..a4d31fb
--- /dev/null
+++ b/components/shared/CropImage/singleCropImage/CropSingleImageDialog.tsx
@@ -0,0 +1,196 @@
+import React, { useEffect, useState } from "react";
+import CustomDialog from "../../dialog/CustomDialog";
+import { useAuthContext } from "@/context/AuthContext";
+import CloseIcon from "@/utils/icons/shared/CloseIcon";
+import appConstant, {
+ defaultImageConstant,
+} from "@/utils/constants/withoutHtml/appConstant";
+import { theme } from "@/theme";
+import CropLinerIcon from "@/utils/icons/createPost/CropLinerIcon";
+import CheckIcon from "@/utils/icons/shared/CheckIcon";
+import { IconButton, Slider } from "@mui/material";
+import ImageCropZone from "../ImageCropZone";
+
+type Props = {
+ handleEvent?: () => void;
+ type: string;
+ cropperAspectRatio?: string;
+};
+const CropSingleImageDialog = ({ handleEvent, type }: Props) => {
+ const {
+ setCustomDialogType,
+
+ croppingImage,
+ setCroppingImage,
+ } = useAuthContext();
+ const [iszooming, setiszooming] = useState(false);
+ const [isCanceled, setisCanceled] = useState(type);
+
+ return (
+ <>
+
+
+ ) : null}
+
+ {images.length !== 0 && isCrop ? (
+
+
+ ) : null}
+
+ {/* zoom Images */}
+ {
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ croppedPixels: cropPixel,
+ };
+ return {
+ ...prevState,
+ image: updatedImage,
+ };
+ });
+ }}
+ setZoom={(zoom) => {
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ zoom: zoom,
+ };
+
+ return {
+ ...prevState,
+ image: updatedImage,
+ };
+ });
+ }}
+ setCrop={(crop) => {
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ crop: crop,
+ };
+
+ return {
+ ...prevState,
+ image: updatedImage,
+ };
+ });
+ }}
+ />
+
+
+ {iszooming ? (
+
+
+
+ ) : (
+
+ {
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ zoom: newValue as number,
+ };
+
+ return {
+ ...prevState,
+ image: updatedImage,
+ };
+ });
+ }}
+ aria-label="Small"
+ valueLabelDisplay="off"
+ />
+
+ {
+ setiszooming(!iszooming); // setiscrop(false);
+ setCroppingImage((prev) => {
+ return { ...prev, isShowGrid: false };
+ });
+ }}
+ >
+
+ {
+ showCroppedImage(images);
+ setCroppingImage((prev) => {
+ return { ...prev, isShowGrid: false };
+ });
+ setiszooming(false);
+ }}
+ >
+
+
+ {
+ setiszooming(!iszooming); // setiscrop(false);
+ setCroppingImage((prev) => {
+ return { ...prev, isShowGrid: true };
+ });
+ }}
+ >
+
+
+ )}
+
+ {isCrop && (
+ <>
+
+ ) : null}
+
+
+
+
+ )}
+
+
+ Select Ratio
++ All images keep the same ratio. +
+
+ <>
+ {appConstant.aspectRatioList.map((ratio, index) => {
+ return (
+
+ {
+ const updateRatio = images.map((image, index) => {
+ return {
+ ...image,
+ image: { ...image.image, aspectRatio: ratio },
+ };
+ });
+ setImages(updateRatio);
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ aspectRatio: ratio,
+ };
+ return {
+ image: updatedImage,
+ index: prevState.index,
+ };
+ });
+ }}
+ >
+ {ratio.split("/")[0]}:{ratio.split("/")[1]}
+
+ );
+ })}
+
+
+
+ {images.map((file, index) => {
+ return (
+
+ {file && (
+
+ );
+ })}
+ {recentlyAddedPostImageList.map((images, index) => {
+ return (
+
+
+
+ );
+ })}
+ {images.length < limit && (
+
+
+ )}
+
+
+ {isNextVisible !== false ? (
+
+ setisCloseVisible({ isHover: true, index: index })
+ }
+ onMouseLeave={() =>
+ setisCloseVisible({ isHover: false, index: index })
+ }
+ draggable
+ onDragStart={(e) => changeIndexDragStart(e, index)}
+ onDragEnter={(e) => changeIndexDragEnter(e, index)}
+ onDragEnd={changeIndexDrop}
+ className={`flex flex-row w-full aspect-[4/5] overflow-clip justify-center items-center relative border-2 ${
+ index === croppingImage.index && " border-primary-main"
+ } rounded-md border-grey-200`}
+ >
+ {isCloseVisible.isHover &&
+ isCloseVisible.index === index ? (
+ 
{
+ showCroppedImage(images);
+ setCroppingImage({
+ image: images[index].image,
+ index: index,
+ });
+ }}
+ />
+
+ )}
+ {
+ setdeletedIndex(index);
+ setImages(
+ images.filter(
+ (image, deleteIndex) => index !== deleteIndex
+ )
+ );
+ }}
+ className={`bg-grey-800
+ flex absolute z-10 top-0 right-0 w-5 h-5 justify-center items-center rounded-full m-1 opacity-100
+ }`}
+ >
+
+ ) : null}
+
+ {
+ showCroppedImage(images);
+ setCroppingImage({
+ image: images[index].image,
+ index: index,
+ });
+ }}
+ />
+
+
+
+
+
+ }
+ handleEvent={() => {
+ setStep(3);
+ }}
+ />
+
+ {/* titlebar */}
+
+
+
+ Crop Image
+
+ {
+ setisCanceled("");
+ setCroppingImage(defaultImageConstant);
+ setCustomDialogType(null);
+ }}
+ className=" text-common-white p-2 scale-90 rounded-full "
+ >
+
+
+
+
+ {
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ croppedPixels: cropPixel,
+ };
+ return {
+ ...prevState,
+ image: updatedImage,
+ };
+ });
+ }}
+ setZoom={(zoom) => {
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ zoom: zoom,
+ };
+
+ return {
+ ...prevState,
+ image: updatedImage,
+ };
+ });
+ }}
+ setCrop={(crop) => {
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ crop: crop,
+ };
+
+ return {
+ ...prevState,
+ image: updatedImage,
+ };
+ });
+ }}
+ />
+
+
+ {iszooming ? (
+
{" "}
+
+
+ ) : (
+
+ {
+ setCroppingImage((prevState) => {
+ const updatedImage = {
+ ...prevState.image,
+ zoom: newValue as number,
+ };
+
+ return {
+ ...prevState,
+ image: updatedImage,
+ };
+ });
+ }}
+ aria-label="Small"
+ valueLabelDisplay="off"
+ />
+
+ {
+ setiszooming(!iszooming); // setiscrop(false);
+ setCroppingImage((prev) => {
+ return { ...prev, isShowGrid: false };
+ });
+ }}
+ >
+
+ {
+ setCroppingImage((prev) => {
+ return { ...prev, isShowGrid: false };
+ });
+ setiszooming(false);
+ }}
+ >
+
+
+ {
+ setiszooming(!iszooming); // setiscrop(false);
+ setCroppingImage((prev) => {
+ return { ...prev, isShowGrid: true };
+ });
+ }}
+ >
+
+
+ )}
+
+
+
+ SAVE
+
+ {
+ // setCroppingImage(finalImage);
+ // setCropDialog(true);
+ // setCustomDialogType("SINGLCROPPINGIMAGE");
+ }}
+ >
+ {/* {isDragging ? (
+
+
+ ) : null}
+
+ ) : (
+ <>
+ {type === "PROFILEIMG" ||
+ type === "CREATEOFFER" ||
+ type === "UPLOADID" ||
+ type === "MESSAGE" ||
+ type === "AIVERIFICATION" ||
+ type === "CREATE" ? (
+
+
+ ) : null} */}
+
+ {placeholder?.placeholderImg}
+ {placeholder?.placeholderTitle}
+
+
+
+ {!isDragging ? (
+
+
+ ) : null}
+
+ )}
+ {cropDialog === true ? (
+
+ {placeholder?.placeholderImg}
+ {placeholder?.placeholderTitle}
+
+
+
+ {name}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default CustomAccordion;
diff --git a/components/shared/CustomButton.tsx b/components/shared/CustomButton.tsx
new file mode 100644
index 0000000..7988ba3
--- /dev/null
+++ b/components/shared/CustomButton.tsx
@@ -0,0 +1,52 @@
+import { theme } from "@/theme";
+import { Button, IconButton, SvgIconTypeMap } from "@mui/material";
+import { OverridableComponent } from "@mui/material/OverridableComponent";
+
+type Props = {
+ type?: "button" | "reset" | "submit";
+ name?: string;
+ handleEvent?: () => void;
+ startIcon?: React.ReactElement | null;
+ endIcon?: React.ReactElement;
+} & Record{element}
+
+
+
+ ) => {
+ setCaption(event.target.value);
+ }}
+ />
+
+
+
+ + Category +
+ +
+
+ {CategoryList.map((category, index) => {
+ return (
+
+
+ );
+ })}
+
+
+ item === category.name)
+ ? "bg-primary-main text-common-white"
+ : "text-grey-200 bg-grey-800"
+ }
+ `}
+ onClick={() => {
+ setErrorMessage("");
+ handleCategory(category.name);
+ }}
+ >
+
+ + {category.startIcon} +
++ {category.name} +
+
+ {
+ if (getCategory.length < 1) {
+ setErrorMessage("Please Select Category");
+ return;
+ }
+ fetchData();
+ setCustomDialogType(null);
+ }}
+ />
+
+ {errorMessage}
+
+
+ {CategoryList.map((category, index) => {
+ return (
+
+
+ );
+ })}
+
+
+ );
+};
+
+export default GenerationPostCategory;
diff --git a/components/shared/CustomEditPostFromGenetation/index.tsx b/components/shared/CustomEditPostFromGenetation/index.tsx
new file mode 100644
index 0000000..6ede6ab
--- /dev/null
+++ b/components/shared/CustomEditPostFromGenetation/index.tsx
@@ -0,0 +1,272 @@
+import React, { ChangeEvent, useEffect, useState } from "react";
+import { useAuthContext } from "@/context/AuthContext";
+import { CustomImagePreview } from "@/components/shared/CustomImagePreview";
+import GenerationPostCategory from "./GenerationPostCategory";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import NormalLeftArrowIcon from "@/utils/icons/shared/NormalLeftArrowIcon";
+import CustomDialogCommonTopBar from "@/components/shared/dialog/GlobalDialogs/components/shared/CustomDialogCommonTopBar";
+import CustomToggleSwitch from "@/components/shared/CustomToggleSwitch";
+import CustomButton from "@/components/shared/CustomButton";
+import { OwnerPost, Post } from "@/types/post";
+import { getOwnerPost } from "@/api/post/getOwnerPost";
+import CustomDialog from "@/components/shared/dialog/CustomDialog";
+import { updatePost } from "@/api/post/updatePost";
+import EditIcon from "@/utils/icons/shared/EditIcon";
+import RightThikArrowButton from "@/utils/icons/shared/RightThikArrowButton";
+import { updateSimilarDiscoverPost } from "@/redux/slices/discoverSimilarFeedSlice";
+import { updateCirclePost } from "@/redux/slices/circleFeedSlice";
+import { updateUserPost } from "@/redux/slices/userPostSlice";
+
+type Props = {
+ editedValue: Post;
+ isOpenEditPost: boolean;
+ setIsOpenEditPost: React.Dispatch
+ ) => {
+ setDefaultValues({
+ ...defaultValues,
+ caption: e.target.value,
+ });
+ }}
+ placeholder="Write Caption"
+ tag="Caption"
+ multiline
+ rows={3}
+ />
+
+ + Category +
+ item === category.name)
+ ? "bg-primary-main text-common-white"
+ : "text-grey-200 bg-grey-800"
+ }
+ `}
+ onClick={() => {
+ handleCategory(category.name, index);
+ }}
+ >
+
+ {category.startIcon}
++ {category.name} +
+
+ {
+ if (defaultValues?.category && defaultValues.category!.length < 1) {
+ setErrorMessage("Please Select Category");
+ return;
+ }
+ if (defaultValues) {
+ handleSave(defaultValues);
+ return;
+ }
+ }}
+ />
+
+ {errorMessage}
+