Feat/feedback

apps/all-molecule-app/app/molecules/page.tsx

@@ -1,74 +1,88 @@
 'use client'
-import { useCallback, useState } from 'react'
-import { Box, Container, IconButton } from '@mui/material'
-import { useMemo } from 'react'
-import ForumIcon from '@mui/icons-material/Forum'
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'
-import { useColorPalates } from '@samagra-x/stencil-hooks'
+import { useCallback, useState } from 'react';
+import { Box, Container } from '@mui/material';
+import { useMemo } from 'react';
+import ForumIcon from '@mui/icons-material/Forum';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import { useColorPalates } from '@samagra-x/stencil-hooks';
 import {
   JsonToTable,
   List,
   OTPInput,
   ShareButtons,
   VoiceRecorder,
-} from '@samagra-x/stencil-molecules'
-import { Navbar } from '@samagra-x/stencil-molecules'
+  Feedback,
+  Navbar
+} from '@samagra-x/stencil-molecules';
 
 const Components = () => {
-  const [otp, setOtp] = useState('')
-  const theme = useColorPalates()
-  const sampleList = useMemo(
-    () => [
-      {
-        id: 'item1',
-        label: 'Item 1',
-        secondaryLabel: 'Description of Item 1',
-        icon: <ForumIcon style={{ color: theme?.primary?.light }} />,
-
-        items: [
-          {
-            id: 'subitem1-1',
-            label: 'Subitem 1-1',
-          },
-          {
-            id: 'subitem1-2',
-            label: 'Subitem 1-2',
-            isDivider: true,
-          },
-        ],
-        onClick: 'functionNameForItem1',
-        isDivider: false,
-      },
-      {
-        id: 'item2',
-        label: 'Item 2',
-        avatar: 'https://rb.gy/u1ufa2',
-        isDivider: true,
-        secondaryAction: (
-          <IconButton edge="end" aria-label="comments">
-            <DeleteOutlineIcon />
-          </IconButton>
-        ),
-      },
-
-      {
-        id: 'item3',
-        label: 'Item 3',
-        secondaryLabel: 'Description of Item 3',
-        avatar: 'https://rb.gy/u1ufa2',
-        items: [
-          {
-            id: 'subitem3-1',
-            label: 'Subitem 3-1',
-          },
-        ],
-      },
-    ],
-    [theme?.primary?.light]
-  )
+  const [otp, setOtp] = useState('');
+  const [review, setReview] = useState('');
+  const [rating, setRating] = useState<number | null>(0);
+
+  const theme = useColorPalates();
+
+  const [sampleList, setSampleList] = useState([
+    {
+      id: 'item1',
+      label: 'Item 1',
+      secondaryLabel: 'Description of Item 1',
+      icon: <ForumIcon style={{ color: theme?.primary?.light }} />,
+      items: [
+        {
+          id: 'subitem1-1',
+          label: 'Subitem 1-1',
+        },
+        {
+          id: 'subitem1-2',
+          label: 'Subitem 1-2',
+          isDivider: true,
+        },
+      ],
+      onClick: 'functionNameForItem1',
+      isDivider: false,
+    },
+    {
+      id: 'item2',
+      label: 'Item 2',
+      avatar: 'https://rb.gy/u1ufa2',
+      isDivider: true,
+    },
+    {
+      id: 'item3',
+      label: 'Item 3',
+      secondaryLabel: 'Description of Item 3',
+      avatar: 'https://rb.gy/u1ufa2',
+      items: [
+        {
+          id: 'subitem3-1',
+          label: 'Subitem 3-1',
+        },
+      ],
+    },
+  ]);
+
+  const handleDelete = (id: string) => {
+    setSampleList((prevList) => prevList.filter((item) => item.id !== id));
+  };
+
   const setInputMsg = useCallback(() => {
-    //message to be passed to VoiceRecorders
-  }, [])
+    // message to be passed to VoiceRecorders
+  }, []);
+
+  const handleReviewChange = (newReview: string) => {
+    setReview(newReview);
+  };
+
+  const handleRatingChange = (newRating: number | null) => {
+    setRating(newRating);
+  };
+
+  const handleFeedback = async () => {
+    console.log('Feedback submitted:', { review, rating });
+    // Handle feedback submission logic here
+  };
+
   return (
     <Box
       style={{ background: 'lightgray', height: '90vh', overflow: 'scroll' }}
@@ -96,8 +110,11 @@ const Components = () => {
         <h4>List</h4>
         <div className="mt-2 p-5 border">
           {
-            //@ts-ignore
-            <List items={sampleList} />
+            // @ts-ignore
+            <List
+              items={sampleList}
+              onDelete={handleDelete}
+            />
           }
         </div>
       </Container>
@@ -156,8 +173,23 @@ const Components = () => {
           <ShareButtons />
         </div>
       </Container>
+
+      <Container style={{ marginTop: '50px' }}>
+        <h4>Feedback</h4>
+        <div className="mt-2 p-10 border w-25">
+          <Feedback
+            showReviewBox={true}
+            showRatingBox={true}
+            review={review}
+            star={rating}
+            onChangeReview={handleReviewChange}
+            onChangeRating={handleRatingChange}
+            handleFeedback={handleFeedback}
+          />
+        </div>
+      </Container>
     </Box>
-  )
-}
+  );
+};
 
-export default Components
+export default Components;

apps/all-molecule-app/tsconfig.json

@@ -13,6 +13,6 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
-  ],
+, "app/molecules/page.tsx"  ],
   "exclude": ["node_modules"]
 }

packages/molecules/src/feedback/index.module.css

@@ -0,0 +1,15 @@
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.main {
+  text-align: center;
+  width: 100%;
+  max-width: 600px;
+  padding: 2rem;
+
+  border-radius: 10px;
+}

packages/molecules/src/feedback/index.tsx

@@ -0,0 +1,181 @@
+import React, { useState } from 'react';
+import { TextField, Button, Box, Typography, Rating } from '@mui/material';
+import { toast } from 'react-hot-toast';
+import { useColorPalates } from '@samagra-x/stencil-hooks';
+import { useUiConfig } from '@samagra-x/stencil-hooks';
+import styles from './index.module.css';
+
+type FeedbackStyles = {
+  heading?: object;
+  rating?: object;
+  review?: object;
+  submitButton?: object;
+};
+
+type FeedbackProps = {
+  showReviewBox?: boolean;
+  showRatingBox?: boolean;
+  star?: number | null;
+  review?: string;
+  onChangeReview?: (newReview: string) => void;
+  onChangeRating?: (newRating: number | null) => void;
+  handleFeedback?: () => void;
+  customStyles?: FeedbackStyles;
+};
+
+const Feedback: React.FC<FeedbackProps> = ({
+  showReviewBox = false,
+  showRatingBox = false,
+  star = 0,
+  review = '',
+  onChangeReview = () => {},
+  onChangeRating = () => {},
+  handleFeedback = () => {},
+  customStyles = {},
+}) => {
+  const theme = useColorPalates();
+  const config = useUiConfig('component', 'feedback');
+
+  const [feedbackLoader, setFeedbackLoader] = useState(false);
+
+  const handleFeedbackClick = async () => {
+    try {
+      setFeedbackLoader(true);
+      await handleFeedback();
+      setFeedbackLoader(false);
+      toast.success('Feedback submitted successfully');
+    } catch (error) {
+      setFeedbackLoader(false);
+      toast.error('Error while submitting feedback');
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <Box className={styles.main}>
+        <Box>
+          <Typography
+            data-testid="feedback-title"
+            sx={{
+              fontSize: '5vh',
+              fontWeight: 'bold',
+              color: theme?.primary?.main,
+              ...customStyles.heading,
+            }}
+          >
+            Feedback
+          </Typography>
+        </Box>
+
+        {showRatingBox && (
+          <Box className="section">
+            <Typography
+              data-testid="feedback-rating-title"
+              sx={{
+                fontWeight: 'bold',
+                fontSize: '3vh',
+                ...customStyles.rating,
+              }}
+            >
+              Rating
+            </Typography>
+
+            <Rating
+              data-testid="feedback-rating-component"
+              name="simple-controlled"
+              value={star}
+              max={config?.ratingMaxStars || 5}
+              onChange={(event, newValue) => onChangeRating(newValue)}
+              defaultValue={1}
+              sx={{
+                fontSize: '6vh',
+                ...customStyles.rating,
+              }}
+            />
+            <Typography
+              data-testid="feedback-rating-description"
+              sx={{
+                textAlign: 'center',
+                fontSize: '2vh',
+                ...customStyles.rating,
+              }}
+            >
+              Please provide a rating.
+            </Typography>
+            <Button
+              data-testid="feedback-rating-button"
+              variant="contained"
+              sx={{
+                mt: 2,
+                backgroundColor: `${theme?.primary?.main}`,
+                fontWeight: 'bold',
+                borderRadius: '10rem',
+                fontSize: '1.5vh',
+                p: 1.5,
+                '&:hover': {
+                  backgroundColor: `${theme?.primary?.dark}`,
+                },
+                ...customStyles.submitButton,
+              }}
+              onClick={handleFeedbackClick}
+            >
+              Submit Review
+            </Button>
+          </Box>
+        )}
+
+        {showReviewBox && (
+          <Box className="section">
+            <Typography
+              data-testid="feedback-review-title"
+              sx={{
+                m: '1rem',
+                fontWeight: 'bold',
+                fontSize: '3vh',
+                ...customStyles.review,
+              }}
+            >
+              Review
+            </Typography>
+            <TextField
+              data-testid="feedback-review-component"
+              placeholder="Write your review here"
+              value={review}
+              multiline
+              rows={4}
+              variant="outlined"
+              fullWidth
+              onChange={(e) => onChangeReview(e.target.value)}
+              sx={{
+                border: `2px solid ${theme?.primary?.main}`,
+                ...customStyles.review,
+              }}
+            />
+            <Button
+              id="reviewBtn"
+              variant="contained"
+              data-testid="feedback-review-button"
+              sx={{
+                mt: 2,
+                backgroundColor: `${theme?.primary?.main}`,
+                fontWeight: 'bold',
+                borderRadius: '10rem',
+                fontSize: '1.5vh',
+                p: 1.5,
+                '&:hover': {
+                  backgroundColor: `${theme?.primary?.dark}`,
+                },
+                ...customStyles.submitButton,
+              }}
+              onClick={handleFeedbackClick}
+            >
+              Submit Review
+            </Button>
+          </Box>
+        )}
+      </Box>
+    </div>
+  );
+};
+
+export default Feedback;