Merge branch 'dev' into EAG/FIX/GOBUTTON

hngx-org · Oct 23, 2023 · 026d9c3 · 026d9c3
2 parents a1b2fc7 + 3e0da48
commit 026d9c3
Show file tree

Hide file tree

Showing 26 changed files with 332 additions and 274 deletions.
diff --git a/components/Modals/ComplaintModal.tsx b/components/Modals/ComplaintModal.tsx
@@ -22,12 +22,13 @@ interface ModalProps {
 }
 interface ComplaintModalProps extends ModalProps {
   product: string;
-  user: string;
+  user?: string; //you did not passing the user in your mobile_customer_dashboard component
+  customerID?: string; //you have not added this and yet you were passing it in the component
 }
 //  const token = getAuthTokenFromCookies('UTM_tracker');
 const apiUrl = `https://team-mirage-super-amind2.onrender.com/api/v1/super-admin/feedback/register-complaints/`;
 
-const ComplaintModal: React.FC<ComplaintModalProps> = ({ isOpen, onClose, product, user }) => {
+const ComplaintModal: React.FC<ComplaintModalProps> = ({ isOpen, onClose, product, user, customerID }) => {
   const [description, setDescription] = useState('');
   const [error, setError] = useState<string | null>(null);
 

diff --git a/components/Modals/Notifications.tsx b/components/Modals/Notifications.tsx
@@ -3,7 +3,7 @@ import { FaCheckCircle, FaTimesCircle } from 'react-icons/fa';
 import Image from 'next/image';
 interface Notification {
   id: number;
-  text: 'Good news!, Your order has been shipped and is on its way',
+  text: 'Good news!, Your order has been shipped and is on its way';
   read: boolean;
   date: string;
 }
@@ -26,14 +26,14 @@ const Notifications: React.FC<NotificationsProps> = ({ notificationsRef, unreadN
   }, []);
 
   const timeAgo = (dateString: string): string => {
-    const now: Date = new Date(); 
+    const now: Date = new Date();
     const date = new Date(dateString);
     const diff = now.getTime() - date.getTime();
     const seconds = Math.floor(diff / 1000);
     const minutes = Math.floor(seconds / 60);
     const hours = Math.floor(minutes / 60);
     const days = Math.floor(hours / 24);
-  
+
     if (days > 1) return `${days} days ago`;
     if (days === 1) return '1 day ago';
     if (hours > 1) return `${hours} hours ago`;
@@ -43,7 +43,7 @@ const Notifications: React.FC<NotificationsProps> = ({ notificationsRef, unreadN
     if (seconds > 1) return `${seconds} seconds ago`;
     return 'just now';
   };
-  
+
   const [notifications, setNotifications] = useState<Notification[]>([
     {
       id: 1,
@@ -145,35 +145,32 @@ const Notifications: React.FC<NotificationsProps> = ({ notificationsRef, unreadN
   );
 
   return (
-    <div className={`bg-[#fff] font-manropeEL w-fit h-[60vh] z-[20000] border-[#d8d8d8] overflow-y-scroll scrollbar-none rounded-lg shadow-xl ${loading ? '' : ''}`}
-    ref={notificationsRef}
+    <div
+      className={`bg-[#fff] font-manropeEL w-fit h-[60vh] z-[20000] border-[#d8d8d8] overflow-y-scroll scrollbar-none rounded-lg shadow-xl ${
+        loading ? '' : ''
+      }`}
+      ref={notificationsRef}
     >
       <div className="py-2 bg-white-100 px-4 sticky top-0 flex flex-col justify-between">
         <h1 className="font-[600]">Notifications</h1>
-
-
       </div>
-      <ul className='flex flex-col w-full flex-wrap'>
-        {filteredNotifications.map(notification => (
-          <li 
+      <ul className="flex flex-col w-full flex-wrap">
+        {filteredNotifications.map((notification) => (
+          <li
             key={notification.id}
             className={`h-fit py-4 flex px-4 flex-col border-b ${notification.read ? '' : 'text-white'}`}
           >
             <div className="flex w-full gap-4 m-auto items-center justify-center align-middle">
-
-            <div className="m-auto bg-brand-green-primary w-fit p-2 rounded-full">
-              <Image src="/boxnotify.svg" alt="icon" width={30} height={40} />
-            </div>
-            <div className="flex m-auto items-center gap-2 justify-center w-full flex-col">
-              <p className='font-[400] text-[#5B5F5E] text-sm '>
-                {notification.text}
-              </p>
-              <p className='text-gray-600  w-full float-left text-sm text-left justify-start items-start align-baseline'>
-              {timeAgo(notification.date)}
-              </p>
-            </div>
+              <div className="m-auto bg-brand-green-primary w-fit p-2 rounded-full">
+                <Image src="/boxnotify.svg" alt="icon" width={30} height={40} />
+              </div>
+              <div className="flex m-auto items-center gap-2 justify-center w-full flex-col">
+                <p className="font-[400] text-[#5B5F5E] text-sm ">{notification.text}</p>
+                <p className="text-gray-600  w-full float-left text-sm text-left justify-start items-start align-baseline">
+                  {timeAgo(notification.date)}
+                </p>
+              </div>
             </div>
-
           </li>
         ))}
       </ul>

diff --git a/components/Modals/language-modal.tsx b/components/Modals/language-modal.tsx
@@ -199,7 +199,7 @@ const LanguageModal = ({ isOpen, onCloseModal, onSaveModal, userId }: languageMo
         <>
           <div className="py-32">
             <Loader />
-            <p className="text-center text-green-400 my-3 font-semibold text-lg animate-pulse">Please wait</p>
+            <p className="text-center text-green-400 my-3 font-semibold text-lg animate-pulse"></p>
           </div>
         </>
       ) : (

diff --git a/components/Navbars/TopBar.tsx b/components/Navbars/TopBar.tsx
@@ -238,12 +238,8 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
             {!globalAuth && (
               <div className=" p-2 justify-center relative items-center gap-4 lg:flex-row flex flex-col mt-5  lg:mt-0">
                 <Cart items={cartCount} />
-
-
-
 
-
-{/* {notificationMenu && 
+                {/* {notificationMenu && 
 <div className="absolute z-[300000] mt-4 w-fit" ref={notificationsRef}>
 
 <Notifications notificationsRef={notificationsRef}  unreadNotifications={setUnreadNotifications}/> 
@@ -410,9 +406,7 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
                       height={24}
                       alt="Cart Icon"
                     />
-
-
-      </div>
+                  </div>
                 </div>
                 <div className="auth flex items-center scale-75 gap-1 cursor-pointer" onClick={handleAuthMenu}>
                   <div className="details hidden ">
@@ -503,21 +497,18 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
           </div>
         )}
 
-{notificationMenu && 
-<div className="absolute bg-white-100 top-full w-fit md:2/4 lg:w-1/4 right-0 " ref={notificationsRef}>
-
-<Notifications notificationsRef={notificationsRef}  unreadNotifications={setUnreadNotifications}/> 
- </div>
-}
+        {notificationMenu && (
+          <div className="absolute bg-white-100 top-full w-fit md:2/4 lg:w-1/4 right-0 " ref={notificationsRef}>
+            <Notifications notificationsRef={notificationsRef} unreadNotifications={setUnreadNotifications} />
+          </div>
+        )}
       </nav>
     </>
   );
 
   function AuthUser(): React.ReactNode {
     return (
-
-      <div className='flex gap-4 justify-center items-center align-middle relative'>
-
+      <div className="flex gap-4 justify-center items-center align-middle relative">
         <Link href={'/marketplace/wishlist'}>
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
             <mask
@@ -553,8 +544,7 @@ function TopBar(props: { activePage: string; showDashBorad: boolean }) {
             height={24}
             alt="Cart Icon"
           />
-
-    </div>
+        </div>
 
         <div className="auth flex items-center gap-3 cursor-pointer" onClick={handleAuthMenu}>
           <p className=" font-bold font-manropeEB">

diff --git a/context/PortfolioLandingContext.tsx b/context/PortfolioLandingContext.tsx
@@ -17,6 +17,7 @@ import ProjectSectionModal from '@modules/portfolio/component/modals/project-mod
 import { useQueries, useQueryClient, UseQueryResult } from '@tanstack/react-query';
 import $http from '../http/axios';
 import { AddShopModal } from '@modules/portfolio/component/addShopErrorModal';
+import { useRouter } from 'next/router';
 
 type PortfolioContext = {
   portfolioUrl: string;
@@ -114,6 +115,7 @@ const Portfolio = createContext<PortfolioContext>({
 
 export function PortfolioCtxProvider(props: { children: any }) {
   const queryClient = useQueryClient();
+  const router = useRouter();
   const portfolioUrl = `https://hng6-r5y3.onrender.com/api/v1/portfolio`;
   const { auth } = useAuth();
   const [userId, setUserId] = useState('');
@@ -144,6 +146,10 @@ export function PortfolioCtxProvider(props: { children: any }) {
   });
 
   useEffect(() => {
+    if (auth?.user?.slug === router?.query?.slug) {
+      router.push(`/portfolio/${auth?.user?.slug}/manage`);
+    }
+
     if (auth?.user?.id) {
       setUserId(auth?.user?.id!);
       setSlug(auth?.user?.slug!);

diff --git a/http/checkout.ts b/http/checkout.ts
@@ -3,6 +3,8 @@ import { useAuth } from '../context/AuthContext';
 import $http from './axios';
 import axios from 'axios';
 
+
+
 export const CART_ENDPOINT = "https://zuri-cart-checkout.onrender.com/api/v1/checkout_cart"
 export const STAGING_URL = process.env.NEXT_PUBLIC_APP_STAGING_URL || 'https://staging.zuri.team';
 export const RECENTLY_VIEWED_ENDPOINT = 'https://staging.zuri.team/api/marketplace/v1/recently-viewed';

diff --git a/modules/auth/component/ForgotPassword/ForgotPassword.tsx b/modules/auth/component/ForgotPassword/ForgotPassword.tsx
@@ -105,7 +105,7 @@ const ForgotPassword = () => {
                 <Input
                   id="email"
                   {...form.getInputProps('email')}
-                  type="email"
+                  type="text"
                   placeholder="Enter email"
                   className={`w-full text-black  h-[44px] md:h-[60px] border shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] ${
                     form.errors.email ? 'border-[red]' : 'border-slate-50'

diff --git a/modules/auth/component/guestsignupform.tsx b/modules/auth/component/guestsignupform.tsx
@@ -45,7 +45,7 @@ const Guestsignupform: React.FC = () => {
       notify({
         message: res.message,
         type: 'error',
-        theme: 'light'
+        theme: 'light',
       });
     },
   });
@@ -223,7 +223,15 @@ const Guestsignupform: React.FC = () => {
                 />
               </span>
               <span className="text-gray-200 text-sm mt-1 font-manropeL">
-                I agree with Zuri <Link href="/">Terms of Service</Link> & <Link href="/">Privacy Policy</Link>.
+                I agree with Zuri{' '}
+                <Link href="/" className="text-brand-green-primary hover:text-brand-green-hover">
+                  Terms of Service
+                </Link>{' '}
+                &{' '}
+                <Link href="/" className="text-brand-green-primary hover:text-brand-green-hover">
+                  Privacy Policy
+                </Link>
+                .
               </span>
             </label>
             <style jsx>{`

diff --git a/modules/auth/resendVerification.tsx b/modules/auth/resendVerification.tsx
@@ -17,7 +17,7 @@ function ResendVerification() {
 
   const onresendEmailVerifySuccess = (data: any) => {
     if (data.message) {
-      notify({ message: data.message, type: data.status === 200 ? 'success' : 'error', theme: 'light' });
+      notify({ message: data.message, type: 'success', theme: 'light' });
       if (data.status === 200) {
         router.push(`/auth/verification?email=${email}`);
       }
@@ -29,11 +29,11 @@ function ResendVerification() {
     if (error.response && error.response.message === 'AxiosError: timeout of 30000ms exceeded') {
       const timeoutErrorMessage =
         'Oops! The request timed out. Please try again later. If the problem persists, please contact support.';
-      notify({ message: timeoutErrorMessage });
+      notify({ message: timeoutErrorMessage, type: 'error', theme: 'light' });
       return;
     }
 
-    notify({ message: error.message, type: 'error' });
+    notify({ message: error.message, type: 'error', theme: 'light' });
   };
 
   const { mutate: resendVerify, isLoading: isUserSigningUp } = useAuthMutation(resendVerification, {

diff --git a/modules/portfolio/component/landing/SkeletonLoader.tsx b/modules/portfolio/component/landing/SkeletonLoader.tsx
@@ -1,13 +1,45 @@
 import React from 'react';
 import Wrapper from './placeholders/Wrapper';
+import Button from '@ui/Button';
+import { useRouter } from 'next/router';
 
-const SkeletonLoader = () => {
+type SkeletonLoaderProps = {
+  error: boolean;
+  message: string;
+  pulse: boolean;
+};
+
+const SkeletonLoader = ({ error, message, pulse }: SkeletonLoaderProps) => {
+  const router = useRouter();
+  const isLoading = pulse ? 'animate-pulse' : '';
   return (
-    <div className="mt-10">
-      <div className="backdrop-blur-md relative w-full flex-col justify-center items-center shadow-[0_0px_6px_1px_rgba(0,0,0,0.14)] rounded-b-lg mt h-[400px] animate-pulse">
-        <div className="absolute bottom-28 left-3 w-[140px] sm:w-[180px] md:w-[200px] aspect-square rounded-full bg-gray-100 bg-opacity-25 border-green-400 border-[2px] animate-pulse"></div>
+    <div className="-mt-10">
+      <div
+        className={`backdrop-blur-md relative w-full flex-col justify-center items-center shadow-[0_0px_6px_1px_rgba(0,0,0,0.14)] rounded-b-lg mt h-[300px] ${isLoading}`}
+      >
+        <div
+          className={`absolute bottom-5 left-5 w-[120px] sm:w-[150px] md:w-[180px] aspect-square rounded-full bg-gray-200 bg-opacity-10 ${isLoading}`}
+        ></div>
       </div>
-      <Wrapper className="h-[50px] w-full animate-pulse mt-10" disableEdit={true} />
+      {error ? (
+        <Wrapper className={`h-[200px] w-full mt-10 ${isLoading}`} disableEdit={true}>
+          <div className="flex justify-center items-center flex-col gap-5">
+            <p className="text-red-200 text-sm font-semibold text-center">{message}</p>
+            <button
+              className="border-[1px] py-1 px-3 text-brand-green-primary border-brand-green-primary rounded-lg text-sm"
+              onClick={() => router.reload()}
+            >
+              Retry
+            </button>
+          </div>
+        </Wrapper>
+      ) : (
+        <>
+          <Wrapper className={`h-[200px] w-full ${isLoading} mt-10`} disableEdit={true} />
+          <Wrapper className={`h-[200px] w-full ${isLoading} mt-10`} disableEdit={true} />
+          <Wrapper className={`h-[200px] w-full ${isLoading} mt-10`} disableEdit={true} />
+        </>
+      )}
     </div>
   );
 };

diff --git a/modules/portfolio/component/landing/cover-avatar.tsx b/modules/portfolio/component/landing/cover-avatar.tsx
@@ -32,7 +32,7 @@ const Cover = ({ isLoggedIn, userData }: Props) => {
 
   return (
     <div
-      className={`absolute bottom-28 left-3 w-[140px] sm:w-[180px] md:w-[200px] aspect-square rounded-full bg-gray-100 bg-opacity-25 border-green-400 border-[2px]`}
+      className={`absolute bottom-28 left-3 w-[140px] sm:w-[180px] md:w-[200px] aspect-square object-cover object-center rounded-full bg-gray-100 bg-opacity-25 border-green-400 border-[2px]`}
     >
       {avatar}
     </div>

diff --git a/modules/portfolio/component/landing/external-view.tsx b/modules/portfolio/component/landing/external-view.tsx
@@ -16,7 +16,17 @@ import {
   Certificate,
 } from './Skeleton';
 import Wrapper from './placeholders/Wrapper';
-import { Book, Briefcase, LanguageSquare, LikeTag, PathTool, Personalcard } from 'iconsax-react';
+import {
+  Book,
+  Briefcase,
+  LanguageSquare,
+  LikeTag,
+  PathTool,
+  Personalcard,
+  Profile2User,
+  UserCirlceAdd,
+  Verify,
+} from 'iconsax-react';
 import { useState } from 'react';
 type Props = {
   userSections: any;
@@ -62,7 +72,12 @@ const ExternalView: React.FC<Props> = ({ userSections }) => {
 
               {section?.id === 'certificate' && section?.data?.length > 0 && (
                 <React.Fragment key={i}>
-                  <Wrapper id={section.id} disableEdit={true} title={section.title}>
+                  <Wrapper
+                    id={section.id}
+                    disableEdit={true}
+                    icon={<Verify variant="Bold" size="24" color="#006811" />}
+                    title={section.title}
+                  >
                     {section.data.map((el: any, i: any) => {
                       return <Certificate key={i} data={el} />;
                     })}
@@ -138,7 +153,12 @@ const ExternalView: React.FC<Props> = ({ userSections }) => {
               )}
               {section?.id === 'reference' && section?.data?.length > 0 && (
                 <React.Fragment key={i}>
-                  <Wrapper id={section.id} disableEdit={true} title={section.title}>
+                  <Wrapper
+                    id={section.id}
+                    disableEdit={true}
+                    icon={<UserCirlceAdd variant="Bold" size="24" color="#006811" />}
+                    title={section.title}
+                  >
                     {section?.data.map((el: any, i: number) => {
                       return <Reference key={i} data={el} />;
                     })}
@@ -148,7 +168,12 @@ const ExternalView: React.FC<Props> = ({ userSections }) => {
 
               {section?.id === 'contact' && section?.data?.length > 0 && (
                 <React.Fragment key={i}>
-                  <Wrapper id={section.id} disableEdit={true} title={section.title}>
+                  <Wrapper
+                    id={section.id}
+                    disableEdit={true}
+                    icon={<Profile2User variant="Bold" size="24" color="#006811" />}
+                    title={section.title}
+                  >
                     <Contact key={i} data={section.data} />
                   </Wrapper>
                 </React.Fragment>