Cookie 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/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/delete-popup/DeletePopup.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { useAppDispatch } from '../../../store/hooks';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import { closeDeleteModal } from '../../../store/modalSlice';
 import { useRouter } from 'next/router';
 import useHttp from '../../../hooks/useHttp';
+import { selectDemo } from '../../../store/demoSlice';
+import { deleteInvoice } from '../../../store/demoSlice';
 
 import { PoupWrapper, PopupButtons } from './DeletePopupStyles';
 import { Button } from '../../UI/button/ButtonStyles';
@@ -13,21 +15,27 @@ const DeletePopup: React.FC<{ id: string; invoiceId?: string }> = ({
   invoiceId,
 }) => {
   const dispatch = useAppDispatch();
+  const { isDemoMode } = useAppSelector(selectDemo);
   const router = useRouter();
   const { sendRequest } = useHttp();
 
   const deleteClickHandler = async () => {
-    const cookies = parseCookies();
-    const storedData = JSON.parse(cookies.userData);
-    try {
-      await sendRequest({
-        url: `/api/invoice/delete/${invoiceId}`,
-        method: 'DELETE',
-        body: JSON.stringify({
-          userId: storedData.id,
-        }),
-      });
-    } catch (error) {}
+    if (isDemoMode) {
+      dispatch(deleteInvoice(invoiceId!));
+    } else {
+      const cookies = parseCookies();
+      const storedData = JSON.parse(cookies.userData);
+      try {
+        await sendRequest({
+          url: `/api/invoice/delete/${invoiceId}`,
+          method: 'DELETE',
+          body: JSON.stringify({
+            userId: storedData.id,
+          }),
+        });
+      } catch (error) {}
+    }
+
     dispatch(closeDeleteModal());
     router.push('/');
   };

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,25 +1,35 @@
 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 () => {
+    if (isDemoMode) {
+      // @ts-ignore
+      dispatch(markAsPaid(invoiceId));
+    }
     try {
       const res = await sendRequest({
         url: `/api/invoice/status/${invoiceId}`,

components/shered/form/InvoiceForm.tsx

@@ -11,7 +11,7 @@ import FormInput from '../../UI/form-input/FormInput';
 import { Button } from '../../UI/button/ButtonStyles';
 import DatePicker from '../../UI/date-picker/DatePicker';
 import SelectDropdown from '../../UI/select-dropdown/SelectDropdown';
-import { useAppDispatch } from '../../../store/hooks';
+import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import { closeFormModal } from '../../../store/modalSlice';
 import IconArrowLeft from '../../../public/assets/icon-arrow-left.svg';
 import Ripple from '../../UI/ripple/Ripple';
@@ -22,6 +22,8 @@ import generateData from '../../../libs/generateData';
 import defaultValues from '../../../libs/defaultInvoiceValues';
 import { useRouter } from 'next/router';
 import { parseCookies } from 'nookies';
+import { createInvoice, editInvoice } from '../../../store/demoSlice';
+import { selectDemo } from '../../../store/demoSlice';
 
 import {
   FormSection,
@@ -73,6 +75,7 @@ const InvoiceForm: React.FC<{
 }> = ({ create, edit, data }) => {
   const dispatch = useAppDispatch();
   const { error, isLoading, sendRequest } = useHttp();
+  const { isDemoMode } = useAppSelector(selectDemo);
 
   // refresh page after submiting and etc
   const router = useRouter();
@@ -116,47 +119,59 @@ const InvoiceForm: React.FC<{
 
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
     const generatedData = generateData(data);
-    const cookies = parseCookies();
-    const storedData = JSON.parse(cookies.userData);
+    if (isDemoMode) {
+      if (create) {
+        dispatch(createInvoice(generatedData));
+      } else {
+        dispatch(editInvoice(generatedData));
+      }
+    } else {
+      const cookies = parseCookies();
+      const storedData = JSON.parse(cookies.userData);
 
-    try {
-      await sendRequest({
-        url: create ? '/api/invoice/new' : '/api/invoice/edit',
-        method: create ? 'POST' : 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          ...generatedData,
-          userId: storedData.id,
-        }),
-      });
-      dispatch(closeFormModal());
-    } catch (error) {}
+      try {
+        await sendRequest({
+          url: create ? '/api/invoice/new' : '/api/invoice/edit',
+          method: create ? 'POST' : 'PUT',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            ...generatedData,
+            userId: storedData.id,
+          }),
+        });
+      } catch (error) {}
+    }
+    dispatch(closeFormModal());
     refreshData();
   };
 
   // save as draft handling
 
   const saveAsDraft = async () => {
     const generatedData = generateData(values, 'draft');
-    const cookies = parseCookies();
-    const storedData = JSON.parse(cookies.userData);
+    if (isDemoMode) {
+      dispatch(createInvoice(generatedData));
+    } else {
+      const cookies = parseCookies();
+      const storedData = JSON.parse(cookies.userData);
 
-    try {
-      await sendRequest({
-        url: 'api/invoice/new',
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          ...generatedData,
-          userId: storedData.id,
-        }),
-      });
-      dispatch(closeFormModal());
-    } catch (error) {}
+      try {
+        await sendRequest({
+          url: 'api/invoice/new',
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            ...generatedData,
+            userId: storedData.id,
+          }),
+        });
+      } catch (error) {}
+    }
+    dispatch(closeFormModal());
     refreshData();
   };
   return (

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