Merge pull request #174 from 0101oak/feature/care-styles

care styles + dropdown for filter on product page

Author: ijustseeblood

package.json

@@ -103,6 +103,7 @@
     "react-text-truncate": "^0.19.0",
     "react-use-auth": "^2.1.0-14",
     "stream-browserify": "^3.0.0",
+    "swiper": "^11.1.14",
     "uuid": "^11.0.3",
     "yup": "^1.4.0"
   }

src/components/managers/products/genericProductComponent/care/care.scss

@@ -19,9 +19,9 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    padding: 0.5rem;
 
     .care-card-img-container {
+      padding: 0.4rem;
       display: flex;
       justify-content: center;
       flex: 0 0 auto;
@@ -33,7 +33,7 @@
       align-items: center;
       justify-content: center;
       text-align: center;
-      max-width: 100%;
+      max-width: 90%;
       overflow-wrap: break-word;
 
       .text {
@@ -46,11 +46,7 @@
 
   &[data-selected='true'] {
     border-color: var(--mui-primary-main, #000);
-    background-color: var(--mui-action-selected, rgba(0, 0, 0, 0.08));
-  }
-
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.04);
+    border-width: 4px;
   }
 
   &:before {

src/components/managers/products/genericProductComponent/care/care.tsx

@@ -1,4 +1,4 @@
-import { Button, Grid, Typography } from '@mui/material';
+import { Button, Grid2 as Grid, TextField } from '@mui/material';
 import { common_ProductNew } from 'api/proto-http/admin';
 import { useFormikContext } from 'formik';
 import { FC, useState } from 'react';
@@ -8,10 +8,22 @@ interface SelectedInstructions {
   [category: string]: string;
 }
 
-export const Care: FC = () => {
+interface CareInterface {
+  isAddingProduct: boolean;
+  isEditMode?: boolean;
+}
+
+export const Care: FC<CareInterface> = ({ isAddingProduct, isEditMode }) => {
   const [isCareTableOpen, setIsCareTableOpen] = useState(false);
   const { values, setFieldValue } = useFormikContext<common_ProductNew>();
-  const [selectedInstructions, setSelectedInstructions] = useState<SelectedInstructions>({});
+  const [selectedInstructions, setSelectedInstructions] = useState<SelectedInstructions>(() => {
+    const careInstructions = values.product?.productBody?.careInstructions || '';
+    const instructions = careInstructions.split(',').filter(Boolean);
+    return instructions.reduce((acc, code) => {
+      acc[code] = code;
+      return acc;
+    }, {} as SelectedInstructions);
+  });
 
   // ... existing code ...
   const handleSelectCareInstruction = (
@@ -52,15 +64,42 @@ export const Care: FC = () => {
     setIsCareTableOpen(false);
   };
 
+  const handleClearInstructions = () => {
+    setSelectedInstructions({});
+    setFieldValue('product.productBody.careInstructions', '');
+  };
+
   return (
-    <Grid>
-      <Button onClick={handleOpenCareTable}>Care Instructions</Button>
-      {Object.keys(selectedInstructions).length > 0 && (
-        <Grid item xs={12}>
-          <Typography variant='subtitle2'>Selected Instructions:</Typography>
-          <Typography variant='body2'>{Object.values(selectedInstructions).join(', ')}</Typography>
-        </Grid>
-      )}
+    <Grid container>
+      <Grid size={{ xs: 12 }}>
+        <TextField
+          fullWidth
+          variant='outlined'
+          name='product.productBody.careInstructions'
+          label='Care Instructions'
+          value={values.product?.productBody?.careInstructions || ''}
+          slotProps={{
+            input: {
+              readOnly: true,
+              endAdornment: (isAddingProduct || isEditMode) && (
+                <>
+                  <Button
+                    variant='outlined'
+                    onClick={handleClearInstructions}
+                    sx={{ mr: 1 }}
+                    disabled={!values.product?.productBody?.careInstructions}
+                  >
+                    Clear
+                  </Button>
+                  <Button variant='contained' onClick={handleOpenCareTable}>
+                    Select
+                  </Button>
+                </>
+              ),
+            },
+          }}
+        />
+      </Grid>
       <CareInstructions
         isCareTableOpen={isCareTableOpen}
         close={handleCloseCareTable}

src/components/managers/products/genericProductComponent/care/careInstructions.tsx

@@ -1,8 +1,10 @@
+import CloseIcon from '@mui/icons-material/Close';
 import {
   Dialog,
   FormControl,
   FormControlLabel,
-  Grid,
+  Grid2 as Grid,
+  IconButton,
   Radio,
   RadioGroup,
   Typography,
@@ -36,7 +38,7 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
   selectedInstructions,
 }) => {
   const careCategories = Object.keys(careInstruction.care_instructions);
-  const [selectedCare, setSelectedCare] = useState<string | null>(null);
+  const [selectedCare, setSelectedCare] = useState<string | null>('Washing');
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -53,7 +55,7 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
           const isSelected = selectedInstructions[selectionKey] === code;
 
           return (
-            <Grid item xs={4} sm={1.5} key={code}>
+            <Grid size={{ xs: 4, sm: 1.5 }} key={code}>
               <Grid
                 container
                 onClick={() => onSelectCareInstruction(selectedCare!, method, code, subCategory)}
@@ -62,14 +64,14 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
               >
                 <Grid container className={styles['care-card']}>
                   {img && (
-                    <Grid item className={styles['care-card-img-container']}>
+                    <Grid className={styles['care-card-img-container']}>
                       <img src={img} alt={method} style={{ width: isMobile ? '25px' : '50px' }} />
                     </Grid>
                   )}
-                  <Grid item className={styles['care-card-text']}>
+                  <Grid className={styles['care-card-text']}>
                     <Typography
                       variant='overline'
-                      fontSize={isMobile ? '0.3rem' : '0.5rem'}
+                      fontSize={isMobile ? '0.4em' : '0.5em'}
                       className={styles.text}
                     >
                       {method}
@@ -81,9 +83,9 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
           );
         } else {
           return (
-            <Grid item xs={12} key={method}>
+            <Grid size={{ xs: 12 }} key={method}>
               <Typography variant='subtitle1' fontWeight='bold' sx={{ mb: 1 }}>
-                {method}
+                {method.toUpperCase()}
               </Typography>
               <Grid container spacing={2}>
                 {renderCareMethods(codeOrSubMethods, method)}
@@ -108,11 +110,15 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
           m: isMobile ? 0 : 2,
           height: isMobile ? '100%' : 'auto',
           maxHeight: isMobile ? '100%' : '90vh',
+          position: 'relative',
         },
       }}
     >
+      <IconButton onClick={close} sx={{ position: 'absolute', top: 0, right: 0, zIndex: 1 }}>
+        <CloseIcon />
+      </IconButton>
       <Grid container spacing={2} sx={{ p: 2 }}>
-        <Grid item xs={12} sx={{ display: 'flex', justifyContent: 'center' }}>
+        <Grid size={{ xs: 12 }} sx={{ display: 'flex', justifyContent: 'center' }}>
           <FormControl>
             <RadioGroup
               row
@@ -132,7 +138,7 @@ export const CareInstructions: FC<CareInstructionsProps> = ({
           </FormControl>
         </Grid>
         {selectedCare && (
-          <Grid item xs={12}>
+          <Grid size={{ xs: 12 }}>
             <Grid container spacing={2}>
               {renderCareMethods(
                 careInstruction.care_instructions[