From 7abdfe871a4871e291c8f365d6c1480d599c9b79 Mon Sep 17 00:00:00 2001
From: Mhd Ramadhan Arvin <38186144+mhdramadhanarvin@users.noreply.github.com>
Date: Sun, 22 Sep 2024 19:09:57 +0700
Subject: [PATCH] Feat/add guideliner (#18)

* feat: add joyride

* feat: add new step in guideline
---
 resources/js/Components/NavIcon.tsx          |  36 ++--
 resources/js/Layouts/AuthenticatedLayout.tsx | 174 ++++++++++++++++++-
 resources/js/Pages/Dashboard.tsx             | 133 +-------------
 resources/js/Pages/Profile/Edit.tsx          |  14 +-
 4 files changed, 201 insertions(+), 156 deletions(-)

diff --git a/resources/js/Components/NavIcon.tsx b/resources/js/Components/NavIcon.tsx
index 4f6944a..1a8f372 100644
--- a/resources/js/Components/NavIcon.tsx
+++ b/resources/js/Components/NavIcon.tsx
@@ -9,24 +9,40 @@ interface NavIconProps {
     active: boolean;
     icon: IconProp;
     notif?: number;
+    className?: string;
 }
 
-export default function NavIcon({ path, active, icon, notif }: NavIconProps) {
+export default function NavIcon({
+    path,
+    active,
+    icon,
+    notif,
+    className,
+}: NavIconProps) {
     useEffect(() => {}, [active]);
 
     return (
         <Link href={path}>
-            {active ? (
-                <div className="bg-white w-10 h-10 rounded-full grid justify-items-center items-center">
+            <div className={`p-0 m-0 ${className}`}>
+                {active ? (
+                    <div className="bg-white w-10 h-10 rounded-full grid justify-items-center items-center">
+                        <Badge
+                            badgeContent={notif}
+                            color="error"
+                            showZero={false}
+                        >
+                            <FontAwesomeIcon
+                                icon={icon}
+                                className="text-commons"
+                            />
+                        </Badge>
+                    </div>
+                ) : (
                     <Badge badgeContent={notif} color="error" showZero={false}>
-                        <FontAwesomeIcon icon={icon} className="text-commons" />
+                        <FontAwesomeIcon icon={icon} />
                     </Badge>
-                </div>
-            ) : (
-                <Badge badgeContent={notif} color="error" showZero={false}>
-                    <FontAwesomeIcon icon={icon} />
-                </Badge>
-            )}
+                )}
+            </div>
         </Link>
     );
 }
diff --git a/resources/js/Layouts/AuthenticatedLayout.tsx b/resources/js/Layouts/AuthenticatedLayout.tsx
index 4ad68da..a476bb6 100644
--- a/resources/js/Layouts/AuthenticatedLayout.tsx
+++ b/resources/js/Layouts/AuthenticatedLayout.tsx
@@ -14,6 +14,13 @@ import NavIcon from "@/Components/NavIcon";
 import CoinIcon from "@/Components/CoinIcon";
 import { useApi } from "@/utils/useApi";
 import { formatedBalance } from "@/utils/manipulation";
+import Joyride, { CallBackProps, STATUS, Step } from "react-joyride";
+import useLocalStorageState from "use-local-storage-state";
+
+interface State {
+    run: boolean;
+    steps: Step[];
+}
 
 export default function Authenticated({
     user,
@@ -36,8 +43,169 @@ export default function Authenticated({
     const notificationsGet: Notification[] = notifData ?? [];
     const unReadNotif = notificationsGet.length;
 
+    // START ONBOARD
+    //const [onBoard, setOnBoard] = useState<boolean>(true);
+    const [onBoard, setOnBoard] = useLocalStorageState<boolean>("onBoard", {
+        defaultValue: true,
+    });
+    const [{ steps: stepsOnBoard }] = useState<State>({
+        run: true,
+        steps: [
+            {
+                content: <span>Selamat Datang di StepCash!</span>,
+                placement: "center",
+                target: "body",
+                styles: {
+                    options: {
+                        width: 200,
+                    },
+                },
+            },
+            {
+                title: <span className="font-semibold">Progress Harian</span>,
+                content: "Progress pencapaian target langkah harian",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".progress span",
+            },
+            {
+                title: <span className="font-semibold">Total Koin</span>,
+                content:
+                    "Jumlah langkah harianmu akan dikonversikan ke koin dan ditampilkan disini",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".totalCoin button",
+            },
+            {
+                title: (
+                    <span className="font-semibold">Sinkrinisasi Manual</span>
+                ),
+                content: "Klik ini untuk sinkronisasi manual data langkah",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".progress div",
+            },
+            {
+                title: <span className="font-semibold">Total Langkah</span>,
+                content: "Jumlah langkah yang kamu lakukan hari ini",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".totalStep",
+            },
+            {
+                title: <span className="font-semibold">Waktu</span>,
+                content: "Waktu yang dihabiskan berjalan kaki hari ini",
+                placement: "right",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".timeSpent",
+            },
+            {
+                title: <span className="font-semibold">Jarak Tempuh</span>,
+                content: "Jumlah jarak tempuh selama berjalan kaki hari ini",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".totalDistance",
+            },
+            {
+                title: <span className="font-semibold">Jumlah Kalori</span>,
+                content: "Jumlah kalori yang dibakar selama aktivitas hari ini",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".totalCalory",
+            },
+            {
+                title: <span className="font-semibold">Halaman Hadiah</span>,
+                content:
+                    "Tukarkan koin yang kamu dapatkan dengan produk pada halaman ini",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".rewards",
+            },
+            {
+                title: (
+                    <span className="font-semibold">Halaman Notifikasi</span>
+                ),
+                content:
+                    "Perkembangan terkait penukaran hadiah kamu akan diinformasikan disini",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".notifications",
+            },
+            {
+                title: <span className="font-semibold">Halaman Profil</span>,
+                content: "Kamu juga bisa mengubah profil kamu pada halaman ini",
+                placement: "top",
+                styles: {
+                    options: {
+                        width: 300,
+                    },
+                },
+                target: ".profile",
+            },
+        ],
+    });
+
+    const handleJoyrideCallback = (data: CallBackProps) => {
+        const { status, type } = data;
+        const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
+
+        if (finishedStatuses.includes(status)) {
+            setOnBoard(false);
+        }
+    };
+    // END ONBOARD
     return (
         <div className="min-h-screen bg-gray-100">
+            <Joyride
+                callback={handleJoyrideCallback}
+                continuous
+                run={onBoard}
+                scrollToFirstStep
+                showProgress
+                showSkipButton
+                steps={stepsOnBoard}
+                styles={{
+                    options: {
+                        zIndex: 10000,
+                    },
+                }}
+            />
             <nav className="bg-white border-b border-gray-100">
                 <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                     <div className="flex justify-between h-16">
@@ -105,7 +273,7 @@ export default function Authenticated({
                             </div>
                         </div>
 
-                        <div className="-me-2 flex items-center sm:hidden">
+                        <div className="-me-2 flex items-center sm:hidden totalCoin">
                             <button className="inline-flex items-center justify-center p-2 rounded-md text-gray-700 text-3xl hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out">
                                 <CoinIcon />
                                 <span className="text-xl font-semibold">
@@ -173,11 +341,13 @@ export default function Authenticated({
                         path={route("dashboard")}
                         icon={faHome}
                         active={route().current("dashboard")}
+                        className="dashboard"
                     />
                     <NavIcon
                         path={route("rewards.index")}
                         icon={faAward}
                         active={route().current("rewards.*")}
+                        className="rewards"
                     />
                     <div className="">
                         <NavIcon
@@ -185,12 +355,14 @@ export default function Authenticated({
                             icon={faBell}
                             active={route().current("notifications.*")}
                             notif={unReadNotif}
+                            className="notifications"
                         />
                     </div>
                     <NavIcon
                         path={route("profile.edit")}
                         icon={faUserCircle}
                         active={route().current("profile.edit")}
+                        className="profile"
                     />
                 </div>
             </footer>
diff --git a/resources/js/Pages/Dashboard.tsx b/resources/js/Pages/Dashboard.tsx
index ee29ee1..ebe59cc 100644
--- a/resources/js/Pages/Dashboard.tsx
+++ b/resources/js/Pages/Dashboard.tsx
@@ -11,8 +11,6 @@ import { CircularProgress, createTheme, ThemeProvider } from "@mui/material";
 import { Head, Link } from "@inertiajs/react";
 import { useQuery } from "react-query";
 import { useState } from "react";
-//import Joyride, { CallBackProps, STATUS, Step } from "react-joyride";
-//import { useSetState } from "react-use";
 
 const theme = createTheme({
     palette: {
@@ -22,117 +20,9 @@ const theme = createTheme({
     },
 });
 
-//interface State {
-//    run: boolean;
-//    steps: Step[];
-//}
-
 export default function Dashboard({ auth }: PageProps) {
     const [loading, setLoading] = useState<boolean>(false);
 
-    // START ONBOARD
-    //const [{ run, steps: stepsOnBoard }, setState] = useSetState<State>({
-    //    run: true,
-    //    steps: [
-    //        {
-    //            content: <h2>Panduan Penggunaan StepCash!</h2>,
-    //            placement: "center",
-    //            target: "body",
-    //            styles: {
-    //                options: {
-    //                    width: 200,
-    //                },
-    //            },
-    //        },
-    //        {
-    //            title: <h1 className="font-semibold">Progress Harian</h1>,
-    //            content: "Progress pencapaian target langkah harian",
-    //            placement: "top",
-    //            styles: {
-    //                options: {
-    //                    width: 300,
-    //                },
-    //            },
-    //            target: ".progress span",
-    //        },
-    //        {
-    //            title: <h1 className="font-semibold">Sinkrinisasi Manual</h1>,
-    //            content: "Klik ini untuk sinkronisasi manual data langkah",
-    //            placement: "top",
-    //            styles: {
-    //                options: {
-    //                    width: 300,
-    //                },
-    //            },
-    //            target: ".progress div",
-    //        },
-    //        {
-    //            title: <h1 className="font-semibold">Total Langkah</h1>,
-    //            content: "Jumlah langkah dalam sehari",
-    //            placement: "top",
-    //            styles: {
-    //                options: {
-    //                    width: 300,
-    //                },
-    //            },
-    //            target: ".totalStep",
-    //        },
-    //        {
-    //            title: <h1 className="font-semibold">Waktu</h1>,
-    //            content: "Waktu yang dihabiskan berjalan kaki dalam sehari",
-    //            placement: "right",
-    //            styles: {
-    //                options: {
-    //                    width: 300,
-    //                },
-    //            },
-    //            target: ".timeSpent",
-    //        },
-    //        {
-    //            title: <h1 className="font-semibold">Jarak Tempuh</h1>,
-    //            content:
-    //                "Jumlah jarak tempuh selama aktivitas fisik dalam sehari",
-    //            placement: "top",
-    //            styles: {
-    //                options: {
-    //                    width: 300,
-    //                },
-    //            },
-    //            target: ".totalDistance",
-    //        },
-    //        {
-    //            title: <h1 className="font-semibold">Jumlah Kalori</h1>,
-    //            content:
-    //                "Jumlah kalori yang dibakar selama aktivitas fisik seharian",
-    //            placement: "top",
-    //            styles: {
-    //                options: {
-    //                    width: 300,
-    //                },
-    //            },
-    //            target: ".totalCalory",
-    //        },
-    //    ],
-    //});
-    //
-    //const handleClickStart = (event: React.MouseEvent<HTMLElement>) => {
-    //    event.preventDefault();
-    //
-    //    setState({
-    //        run: true,
-    //    });
-    //};
-    //
-    //const handleJoyrideCallback = (data: CallBackProps) => {
-    //    const { status, type } = data;
-    //    const finishedStatuses: string[] = [STATUS.FINISHED, STATUS.SKIPPED];
-    //
-    //    if (finishedStatuses.includes(status)) {
-    //        setState({ run: false });
-    //    }
-    //};
-    // END ONBOARD
-
     const fetchData = async () => {
         const response = await fetch(route("dashboard.sync"));
         return await response.json();
@@ -156,31 +46,10 @@ export default function Dashboard({ auth }: PageProps) {
 
     return (
         <AuthenticatedLayout user={auth.user}>
-            {/*
-            <Joyride
-                callback={handleJoyrideCallback}
-                continuous
-                run={run}
-                scrollToFirstStep
-                showProgress
-                showSkipButton
-                steps={stepsOnBoard}
-                styles={{
-                    options: {
-                        zIndex: 10000,
-                    },
-                }}
-            />
-            */}
             <Head title="Dashboard" />
             <div>
                 <h1 className="text-xl">Welcome</h1>
-                <Link
-                    href="https://forms.gle/Rbskp4trHk2TipoD8"
-                    target="_blank"
-                >
-                    <h2 className="text-2xl font-semibold">{auth.user.name}</h2>
-                </Link>
+                <h2 className="text-2xl font-semibold">{auth.user.name}</h2>
             </div>
             <div className="w-full flex justify-center items-center text-center progress">
                 <div
diff --git a/resources/js/Pages/Profile/Edit.tsx b/resources/js/Pages/Profile/Edit.tsx
index 37c01b4..f768e87 100644
--- a/resources/js/Pages/Profile/Edit.tsx
+++ b/resources/js/Pages/Profile/Edit.tsx
@@ -1,6 +1,4 @@
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout";
-import DeleteUserForm from "./Partials/DeleteUserForm";
-import UpdatePasswordForm from "./Partials/UpdatePasswordForm";
 import UpdateProfileInformationForm from "./Partials/UpdateProfileInformationForm";
 import { Head, Link } from "@inertiajs/react";
 import { PageProps } from "@/types";
@@ -36,19 +34,9 @@ export default function Edit({
                             </p>
                         </header>
                         <Link href={route("logout")} method="post" as="button">
-                            <DangerButton> LOGOUT </DangerButton>
+                            <DangerButton>LOGOUT</DangerButton>
                         </Link>
                     </div>
-
-                    {/*
-                    <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
-                        <UpdatePasswordForm className="max-w-xl" />
-                    </div>
-
-                    <div className="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
-                        <DeleteUserForm className="max-w-xl" />
-                    </div>
-                        */}
                 </div>
             </div>
         </AuthenticatedLayout>