Redux wrapper

components/auth/Auth.tsx

@@ -9,6 +9,7 @@ import useHttp from '../../hooks/useHttp';
 import LoadingSpinner from '../UI/loading/LoadingSpinner';
 import { useAppDispatch } from '../../store/hooks';
 import { login } from '../../store/authSlice';
+import { logoutDemo } from '../../store/demoSlice';
 import Ripple from '../UI/ripple/Ripple';
 import { useRouter } from 'next/router';
 
@@ -72,6 +73,8 @@ const Auth: React.FC = () => {
         })
       );
 
+      dispatch(logoutDemo());
+
       router.push('/');
     } catch (error) {}
   };

components/header/Header.tsx

@@ -16,6 +16,7 @@ import { selectAuth } from '../../store/authSlice';
 import { useAppSelector } from '../../store/hooks';
 import { useAppDispatch } from '../../store/hooks';
 import { logout } from '../../store/authSlice';
+
 import { Button } from '../UI/button/ButtonStyles';
 import Ripple from '../UI/ripple/Ripple';
 import { useRouter } from 'next/router';

components/home/welcome/Welcome.styles.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+export const WelcomeWrapper = styled.div`
+  display: flex;
+  margin-top: 10rem;
+`;
+
+export const TextContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  max-width: 20rem;
+
+  p {
+    font-size: 1.6rem;
+    line-height: normal;
+  }
+
+  h1 {
+    span {
+      color: var(--color-purple);
+    }
+  }
+`;
+
+export const ButtonsWrapper = styled.div`
+  display: flex;
+  gap: 1.6rem;
+`;

components/home/welcome/Welcome.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { WelcomeWrapper, TextContent, ButtonsWrapper } from './Welcome.styles';
+import { Button } from '../../UI/button/ButtonStyles';
+import Ripple from '../../UI/ripple/Ripple';
+import { useRouter } from 'next/router';
+import { useAppDispatch } from '../../../store/hooks';
+import { loginDemo } from '../../../store/demoSlice';
+
+const Welcome: React.FC = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const demoHandler = () => {
+    dispatch(loginDemo());
+    router.push('/');
+  };
+  return (
+    <WelcomeWrapper>
+      <TextContent>
+        <h1>
+          Welcome to <span>Invoice app</span>
+        </h1>
+        <p>Keep track of your invoices.</p>
+        <ButtonsWrapper>
+          <Button
+            className="main_btn"
+            onClick={() => {
+              router.push('/auth');
+            }}
+          >
+            Sing Up
+            <Ripple color={'var(--color-white)'} duration={1000} />
+          </Button>
+          <Button className="main_btn" onClick={demoHandler}>
+            Demo
+            <Ripple color={'var(--color-white)'} duration={1000} />
+          </Button>
+        </ButtonsWrapper>
+      </TextContent>
+    </WelcomeWrapper>
+  );
+};
+
+export default Welcome;

components/ivoice-view/header/InvoiceViewHeader.tsx

@@ -12,7 +12,7 @@ const InvoiceViewHeader: React.FC<{ data: IInvoice }> = ({ data }) => {
         <span>Status</span>
         <Status status={data.status} />
       </HeaderLeft>
-      <ViewButtons isMobile={false} invoiceId={data.id_db} />
+      <ViewButtons isMobile={false} invoiceId={data.id} />
     </HeaderWrapper>
   );
 };

components/ivoice-view/view-buttons/ViewButtons.tsx

@@ -1,38 +1,48 @@
 import React from 'react';
 import { useAppDispatch } from '../../../store/hooks';
 import { openDeleteModal, openFormModal } from '../../../store/modalSlice';
+import { markAsPaid } from '../../../store/demoSlice';
 
 import { ButtonsWrapper } from './ViewButtonsStyles';
 import { Button } from '../../UI/button/ButtonStyles';
 import Ripple from '../../UI/ripple/Ripple';
 import useHttp from '../../../hooks/useHttp';
 import { useRouter } from 'next/router';
+import { useAppSelector } from '../../../store/hooks';
+import { selectDemo } from '../../../store/demoSlice';
+
+//
 
 const ViewButtons: React.FC<{ isMobile: boolean; invoiceId?: string }> = ({
   isMobile,
   invoiceId,
 }) => {
   const dispatch = useAppDispatch();
   const { sendRequest } = useHttp();
+  const { isDemoMode } = useAppSelector(selectDemo);
 
   // refresh page after submiting and etc
   const router = useRouter();
   const refreshData = () => router.replace(router.asPath);
 
   const paidHanlder = async () => {
-    try {
-      const res = await sendRequest({
-        url: `/api/invoice/status/${invoiceId}`,
-        method: 'PATCH',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          status: 'paid',
-        }),
-      });
-    } catch (error) {}
-    refreshData();
+    if (isDemoMode) {
+      dispatch(markAsPaid(invoiceId!));
+    } else {
+      try {
+        const res = await sendRequest({
+          url: `/api/invoice/status/${invoiceId}`,
+          method: 'PATCH',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            status: 'paid',
+          }),
+        });
+      } catch (error) {}
+      refreshData();
+    }
   };
   return (
     <ButtonsWrapper mobile={isMobile}>

data.json

@@ -24,11 +24,11 @@
       {
         "name": "Brand Guidelines",
         "quantity": 1,
-        "price": 1800.90,
-        "total": 1800.90
+        "price": 1800.9,
+        "total": 1800.9
       }
     ],
-    "total": 1800.90
+    "total": 1800.9
   },
   {
     "id": "XM9141",
@@ -55,17 +55,17 @@
       {
         "name": "Banner Design",
         "quantity": 1,
-        "price": 156.00,
-        "total": 156.00
+        "price": 156.0,
+        "total": 156.0
       },
       {
         "name": "Email Design",
         "quantity": 2,
-        "price": 200.00,
-        "total": 400.00
+        "price": 200.0,
+        "total": 400.0
       }
     ],
-    "total": 556.00
+    "total": 556.0
   },
   {
     "id": "RG0314",
@@ -160,8 +160,8 @@
       {
         "name": "Brand Guidelines",
         "quantity": 1,
-        "price": 2500.00,
-        "total": 2500.00
+        "price": 2500.0,
+        "total": 2500.0
       }
     ],
     "total": 4032.33

package.json

@@ -19,15 +19,15 @@
     "framer-motion": "^6.3.3",
     "jose": "^4.8.1",
     "next": "12.1.6",
+    "next-redux-wrapper": "^7.0.5",
     "nookies": "^2.5.2",
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-hook-form": "^7.31.1",
     "react-redux": "^8.0.1",
     "redux": "^4.2.0",
+    "redux-persist": "^6.0.0",
     "styled-components": "^5.3.5",
-    "swr": "^1.3.0",
-    "whatwg-fetch": "^3.6.2",
     "yup": "^0.32.11"
   },
   "devDependencies": {