Rating feature for bytes

src/app/styles/scrollbar.scss

@@ -1,20 +1,30 @@
-/* width */
+/* Base scrollbar styles */
 ::-webkit-scrollbar {
   width: 10px;
+  /* Affects vertical scrollbar's width and horizontal scrollbar's height */
 }
 
-/* Track */
 ::-webkit-scrollbar-track {
-  background: var(--bg-color); 
+  background: var(--bg-color);
 }
 
-/* Handle */
 ::-webkit-scrollbar-thumb {
-  background: var(--primary-color); /* #888 */
+  background: var(--primary-color);
   border-radius: 5px;
 }
 
-/* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: var(--primary-color);
 }
+
+/* Media query for smaller devices */
+@media screen and (max-width: 768px) {
+  ::-webkit-scrollbar {
+    width: 5px;
+    /* Makes scrollbars thinner on small devices */
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+  }
+}

src/app/tidbits/rating/[byteId]/page.tsx

@@ -0,0 +1,24 @@
+'use client';
+import withSpace from '@/app/withSpace';
+import RatingByteView from '@/components/bytes/View/RatingByteView';
+import FullScreenModal from '@/components/core/modals/FullScreenModal';
+import { SpaceWithIntegrationsFragment } from '@/graphql/generated/generated-types';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+function ByteRatingPage(props: { space: SpaceWithIntegrationsFragment; params: { byteId: string } }) {
+  const router = useRouter();
+
+  function onClose() {
+    router.push(`/tidbits`);
+  }
+  return (
+    <FullScreenModal open={true} onClose={onClose} title={'Ratings'}>
+      <div className="text-left">
+        <RatingByteView byteId={props.params.byteId} space={props.space} />
+      </div>
+    </FullScreenModal>
+  );
+}
+
+export default withSpace(ByteRatingPage);

src/app/tidbits/view/[...byteIdAndStep]/ByteView.module.scss

@@ -8,4 +8,4 @@
     min-width: 767px;
     max-width: 767px;
   }
-}
+    }

src/components/app/Modal/Byte/ByteRatingModal.module.scss

@@ -0,0 +1,17 @@
+.ModalContent{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.FeedbackOptionDiv{
+    :hover {
+            border-radius: 0.5rem;
+            border-color: var(--bg-color);
+            background-color: var(--primary-color);
+        }
+}
+
+.ModalHeading{
+    color: var(--heading-color);
+}

src/components/app/Modal/Byte/ByteRatingModal.tsx

@@ -0,0 +1,99 @@
+import EmojiRatings from '@/components/app/Rating/EmojiRatings';
+import FullPageModal from '@/components/core/modals/FullPageModal';
+import { ByteFeedback, ByteRating } from '@/graphql/generated/generated-types';
+import { ClipboardDocumentListIcon, RocketLaunchIcon } from '@heroicons/react/24/outline';
+import { useState } from 'react';
+import styles from './ByteRatingModal.module.scss';
+
+export interface ByteEndRatingModalProps {
+  open: boolean;
+  onClose: () => void;
+  skipByteRating: () => void;
+  setByteRating: (rating: number, feedback?: ByteFeedback) => Promise<void>;
+}
+
+export interface ByteFeedbackOptions {
+  name: string;
+  label: string;
+  image: any;
+}
+
+const feedbackOptions: ByteFeedbackOptions[] = [
+  { name: 'content', label: 'Content', image: ClipboardDocumentListIcon },
+  { name: 'ux', label: 'User Experience', image: RocketLaunchIcon },
+];
+
+export default function ByteRatingModal({ open, onClose, skipByteRating, setByteRating }: ByteEndRatingModalProps) {
+  const [selectedRating, setSelectedRating] = useState<number>();
+  const skipOrCloseModal = async () => {
+    if (selectedRating !== undefined) {
+      await setByteRating(selectedRating!);
+      onClose();
+    } else {
+      skipByteRating();
+    }
+  };
+  const handleFeedbackSelection = async (optionName: string) => {
+    const feedback: ByteFeedback = {};
+    if (optionName === 'content') {
+      feedback.content = true;
+    } else if (optionName === 'ux') {
+      feedback.ux = true;
+    }
+
+    await setByteRating(selectedRating!, feedback);
+    onClose();
+  };
+
+  return (
+    <FullPageModal open={open} onClose={skipOrCloseModal} title={''}>
+      <div className={`${styles.ModalContent}`}>
+        <div className="mt-2 text-center sm:mt-1">
+          <div className="flex flex-row items-center justify-center ">
+            <h1 className={`text-xl font-semibold leading-6 mr-2 ${styles.ModalHeading}`}>Share your feedback about the Byte</h1>
+          </div>
+
+          <div className={`mt-4 flex justify-center`}>
+            <EmojiRatings
+              selectedRating={selectedRating}
+              selectRating={(rating) => {
+                setSelectedRating(rating);
+              }}
+            />
+          </div>
+        </div>
+
+        {selectedRating && (
+          <div className="flex flex-col  items-center mt-8">
+            {selectedRating > 2 ? (
+              <div className="flex flex-row items-center justify-center ">
+                <h2 className="text-xl mr-2  font-semibold leading-6 ">What did you like the most?</h2>
+              </div>
+            ) : (
+              <div className="flex flex-row items-center justify-center ">
+                <h2 className="text-xl  mr-2 font-semibold leading-6">What do you want us to improve upon?</h2>
+              </div>
+            )}
+
+            <div className="grid grid-cols-2 gap-4 mt-8">
+              {feedbackOptions.map((option) => (
+                <div key={option.name} className={`${styles.FeedbackOptionDiv}`}>
+                  <div className={`flex flex-col items-center cursor-pointer p-2`} onClick={() => handleFeedbackSelection(option.name)}>
+                    <option.image height={40} width={40} />
+                    <h2 className="text-md">{option.label}</h2>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <div className="mt-4">
+          <a className="text-md cursor-pointer underline" onClick={() => skipOrCloseModal()}>
+            Skip
+          </a>
+        </div>
+      </div>
+    </FullPageModal>
+  );
+}

src/components/byteCollection/View/ViewByteModal.tsx

@@ -15,6 +15,7 @@ import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import React, { useEffect } from 'react';
 import styles from './ViewByteModal.module.scss';
+import RatingByteView from '@/components/bytes/View/RatingByteView';
 
 const EditByteView: React.ComponentType<any> = dynamic(() => import('@/components/bytes/Edit/EditByteView'), {
   ssr: false, // Disable server-side rendering for this component
@@ -54,6 +55,7 @@ export default function ViewByteModal({
 
   const [editByteModalOpen, setEditByteModalOpen] = React.useState(false);
   const [shareByteModalOpen, setShareByteModalOpen] = React.useState(false);
+  const [ratingByteModalOpen, setRatingByteModalOpen] = React.useState(false);
 
   const { activeStepOrder } = viewByteHelper;
 
@@ -66,6 +68,7 @@ export default function ViewByteModal({
   const threeDotItems: EllipsisDropdownItem[] = [
     { label: 'Edit', key: 'edit' },
     { label: 'Generate Pdf', key: 'generate-pdf' },
+    { label: 'Rating', key: 'rating' },
   ];
 
   if (editByteModalOpen && viewByteHelper.byteRef && byteCollectionType === 'byteCollection') {
@@ -105,6 +108,16 @@ export default function ViewByteModal({
     );
   }
 
+  if (ratingByteModalOpen && viewByteHelper.byteRef) {
+    return (
+      <FullScreenModal open={true} onClose={onClose} title={'Ratings'}>
+        <div className="text-left">
+          <RatingByteView byteId={viewByteHelper.byteRef.id} space={space} />
+        </div>
+      </FullScreenModal>
+    );
+  }
+
   return (
     <FullScreenModal open={true} onClose={onClose} title={viewByteHelper.byteRef?.name || 'Tidbit Details'}>
       <div id="byte-container" className={`flex flex-col  items-center w-full relative inset-0 ${styles.byteContainer} `}>
@@ -120,6 +133,8 @@ export default function ViewByteModal({
                       setEditByteModalOpen(true);
                     } else if (key === 'generate-pdf') {
                       setShareByteModalOpen(true);
+                    } else if (key === 'rating') {
+                      setRatingByteModalOpen(true);
                     }
                   }}
                 />

src/components/bytes/List/ByteCardAdminDropdown.tsx

@@ -39,6 +39,7 @@ export default function ByteCardAdminDropdown({ byte, byteType, project }: ByteC
     return [
       { label: 'Edit', key: 'edit' },
       { label: 'Edit SEO', key: 'editSeo' },
+      { label: 'Ratings', key: 'ratings' },
     ];
   };
 
@@ -79,6 +80,8 @@ export default function ByteCardAdminDropdown({ byte, byteType, project }: ByteC
             onArchivedStatusChange(false);
           } else if (key === 'editSeo') {
             setEditProjectByteSeo(true);
+          } else if (key === 'ratings') {
+            router.push(`tidbits/rating/${byte.id}`);
           }
         }}
       />

src/components/bytes/Rating/ByteRatingsTable.module.scss

@@ -0,0 +1,9 @@
+.agGridWrapper {
+    width: 100%;
+}
+
+.reChartsWrapper {
+    .recharts-wrapper {
+        margin: 0 auto;
+    }
+}