fix: update feedback molecule

SamagraX-Stencil · Aug 6, 2024 · b5b15cf · b5b15cf
1 parent 2fed2d6
commit b5b15cf
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 251 deletions.
diff --git a/apps/kisai-bot/package.json b/apps/kisai-bot/package.json
@@ -45,9 +45,9 @@
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
-    "next": "12.1.6",
+    "next": "14.0.0",
     "next-pwa": "^5.6.0",
-    "react": "18",
+    "react": "^18.0.0",
     "react-alert": "^7.0.3",
     "react-alert-template-basic": "^1.0.2",
     "react-audio-visualize": "^1.1.3",

diff --git a/apps/kisai-bot/src/pageComponents/feedback-page/index.tsx b/apps/kisai-bot/src/pageComponents/feedback-page/index.tsx
@@ -1,9 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import styles from './index.module.css';
-import Typography from '@mui/material/Typography';
-import { Box } from '@mui/material';
-import Rating from '@mui/material/Rating';
-import Button from '@mui/material/Button';
+
+import Feedback from '@samagra-x/stencil-molecules/lib/feedback';
+
 import { toast } from 'react-hot-toast';
 import { useColorPalates } from '../../providers/theme-provider/hooks';
 import { useConfig } from '../../hooks/useConfig';
@@ -72,126 +70,10 @@ const FeedbackPage: React.FC = () => {
   };
 
   return (
-    <div className={styles.container}>
-      <Box className={styles.main}>
-        <Box>
-          <Typography
-            data-testid="feedback-title"
-            sx={{
-              fontSize: '5vh',
-              fontWeight: 'bold',
-              color: theme.primary.main,
-            }}
-          >
-            {t('label.feedback')}
-          </Typography>
-        </Box>
-
-        {config?.ratingBox && (
-          <Box className={styles.section}>
-            <Typography
-              data-testid="feedback-rating-title"
-              sx={{
-                fontWeight: 'bold',
-                fontSize: '3vh',
-              }}
-            >
-              {t('message.rating')}
-            </Typography>
-
-            <Rating
-              data-testid="feedback-rating-component"
-              name="simple-controlled"
-              value={star}
-              max={config?.ratingMaxStars || 5}
-              onChange={(event, newValue) => {
-                setStar(newValue || 1);
-              }}
-              defaultValue={1}
-              sx={{
-                fontSize: '6vh',
-              }}
-            />
-            <Typography
-              data-testid="feedback-rating-description"
-              sx={{
-                textAlign: 'center',
-                fontSize: '2vh',
-              }}
-            >
-              {t('message.rating_description')}
-            </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}`,
-                },
-              }}
-              onClick={handleFeedback}
-            >
-              {t('label.submit_review')}
-            </Button>
-          </Box>
-        )}
-
-        {config?.reviewBox && (
-          <Box className={styles.section}>
-            <Typography
-              data-testid="feedback-review-title"
-              sx={{
-                m: '1rem',
-                fontWeight: 'bold',
-                fontSize: '3vh',
-              }}
-            >
-              {t('message.review')}
-            </Typography>
-            <textarea
-              data-testid="feedback-review-component"
-              placeholder={t('message.review_description')}
-              value={review}
-              className={styles.textBlock}
-              style={{
-                border: `2px solid ${theme.primary.main}`,
-              }}
-              onChange={(e) => {
-                setReview(e.target.value);
-              }}
-            />
-
-            <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}`,
-                },
-              }}
-              onClick={handleFeedback}
-            >
-              {t('label.submit_review')}
-            </Button>
-          </Box>
-        )}
-      </Box>
-
+    <>
+      <Feedback star={5} showRatingBox={true} />
       <Menu />
-    </div>
+    </>
   );
 };
 

diff --git a/packages/molecules/src/feedback/index.tsx b/packages/molecules/src/feedback/index.tsx
@@ -1,9 +1,6 @@
 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;
@@ -33,32 +30,45 @@ const Feedback: React.FC<FeedbackProps> = ({
   handleFeedback = () => {},
   customStyles = {},
 }) => {
-  const theme = useColorPalates();
-  const config = useUiConfig('component', 'feedback');
-  const [feedbackLoader, setFeedbackLoader] = useState(false);
+  // const [feedbackLoader, setFeedbackLoader] = useState(false);
 
   const handleFeedbackClick = async () => {
     try {
-      setFeedbackLoader(true);
+      // setFeedbackLoader(true);
       await handleFeedback();
-      setFeedbackLoader(false);
+      // setFeedbackLoader(false);
       toast.success('Feedback submitted successfully');
     } catch (error) {
-      setFeedbackLoader(false);
+      // setFeedbackLoader(false);
       toast.error('Error while submitting feedback');
     }
-    };
+  };
 
   return (
-    <div className={styles.container}>
-      <Box className={styles.main}>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: '100vh',
+      }}
+    >
+      <Box
+        style={{
+          textAlign: 'center',
+          width: '100%',
+          maxWidth: '600px',
+          padding: '2rem',
+          borderRadius: '10px',
+        }}
+      >
         <Box>
           <Typography
             data-testid="feedback-title"
             sx={{
               fontSize: '5vh',
               fontWeight: 'bold',
-              color: theme?.primary?.main,
+              color: '#1976d2', // primary.main color
               ...customStyles.heading,
             }}
           >
@@ -83,7 +93,7 @@ const Feedback: React.FC<FeedbackProps> = ({
               data-testid="feedback-rating-component"
               name="simple-controlled"
               value={star}
-              max={config?.ratingMaxStars || 5}
+              max={5}
               onChange={(event, newValue) => onChangeRating(newValue)}
               defaultValue={1}
               sx={{
@@ -106,13 +116,13 @@ const Feedback: React.FC<FeedbackProps> = ({
               variant="contained"
               sx={{
                 mt: 2,
-                backgroundColor: `${theme?.primary?.main}`,
+                backgroundColor: '#1976d2',
                 fontWeight: 'bold',
                 borderRadius: '10rem',
                 fontSize: '1.5vh',
                 p: 1.5,
                 '&:hover': {
-                  backgroundColor: `${theme?.primary?.dark}`,
+                  backgroundColor: '#115293', // primary.dark color
                 },
                 ...customStyles.submitButton,
               }}
@@ -146,7 +156,7 @@ const Feedback: React.FC<FeedbackProps> = ({
               fullWidth
               onChange={(e) => onChangeReview(e.target.value)}
               sx={{
-                border: `2px solid ${theme?.primary?.main}`,
+                border: '2px solid #1976d2',
                 ...customStyles.review,
               }}
             />
@@ -156,13 +166,13 @@ const Feedback: React.FC<FeedbackProps> = ({
               data-testid="feedback-review-button"
               sx={{
                 mt: 2,
-                backgroundColor: `${theme?.primary?.main}`,
+                backgroundColor: '#1976d2',
                 fontWeight: 'bold',
                 borderRadius: '10rem',
                 fontSize: '1.5vh',
                 p: 1.5,
                 '&:hover': {
-                  backgroundColor: `${theme?.primary?.dark}`,
+                  backgroundColor: '#115293',
                 },
                 ...customStyles.submitButton,
               }}
@@ -177,4 +187,4 @@ const Feedback: React.FC<FeedbackProps> = ({
   );
 };
 
-export default Feedback;
+export default Feedback;
diff --git a/packages/molecules/src/index.ts b/packages/molecules/src/index.ts
@@ -10,7 +10,7 @@ import Navbar, { NewNavbar } from './navbar';
 import Feedback from './feedback';
 import Sidebar, { NewSidebar } from './sidebar';
 import LanguagePicker from './language-picker';
-import { NewLanguagePicker } from './language-picker';
+import { NewLanguagePicker } from './language-picker/languagePicker';
 import BlinkingSpinner from './blinking-spinner';
 import StencilModal from './Modal';
 import LoginInput, { LoginCheckBox } from './login-input';

diff --git a/packages/molecules/src/sidebar/index.tsx b/packages/molecules/src/sidebar/index.tsx
@@ -18,7 +18,7 @@ import {
   ChevronRight,
 } from '@mui/icons-material';
 import configObj from '@samagra-x/stencil-config-manager';
-import { NewLanguagePicker } from '../language-picker';
+import { NewLanguagePicker } from '../language-picker/languagePicker';
 
 type Link = {
   label: string;
@@ -39,7 +39,7 @@ type SidebarPropsBase = {
   profileText?: string;
   links: Link[];
   handleLogOutButton: () => void;
-  style?: SidebarStyle
+  style?: SidebarStyle;
 };
 
 type SidebarPropsWithLangSwitcher = SidebarPropsBase & {
@@ -55,21 +55,20 @@ type SidebarPropsWithoutLangSwitcher = SidebarPropsBase & {
   activeLanguage?: never;
   handleLanguageClick?: never;
 };
-type SidebarStyle = { 
-
+type SidebarStyle = {
   drawer?: React.CSSProperties;
   list?: React.CSSProperties;
   listItem?: React.CSSProperties;
   listItemButton?: React.CSSProperties;
   profileText?: React.CSSProperties;
   languagePicker?: React.CSSProperties;
-
 };
 
-
-type SidebarProps = SidebarPropsWithLangSwitcher | SidebarPropsWithoutLangSwitcher & {
-  style?: SidebarStyle;
-};
+type SidebarProps =
+  | SidebarPropsWithLangSwitcher
+  | (SidebarPropsWithoutLangSwitcher & {
+      style?: SidebarStyle;
+    });
 
 export const Sidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: () => void }) => {
   const [config, setConfig] = useState<{
@@ -224,8 +223,8 @@ const NewSidebar: React.FC<SidebarProps> = ({
   const handleItemClick = () => {
     onToggle();
   };
-
-   return (
+  const { languagePicker = {} } = style;
+  return (
     <div>
       <Drawer open={isOpen} onClose={onToggle} sx={style.drawer}>
         <Box sx={{ width: 250, ...style.list }} role="presentation">
@@ -241,7 +240,7 @@ const NewSidebar: React.FC<SidebarProps> = ({
                       languages={languages}
                       activeLanguage={activeLanguage}
                       handleLanguageClick={handleLanguageClick}
-                      style={style.languagePicker}
+                      // style={{...languagePicker}}
                     />
                   )}
                 </ListItemButton>