Merge pull request #187 from 0101oak/refactor/entire-project

created one component for featured products && featured products tag
jekabolt · Dec 24, 2024 · 170ff18 · 170ff18
2 parents e9d98f2 + c3fc03b
commit 170ff18
Show file tree

Hide file tree

Showing 37 changed files with 1,613 additions and 1,544 deletions.
diff --git a/src/components/common/copyToClipboard.tsx b/src/components/common/copyToClipboard.tsx
@@ -6,10 +6,10 @@ import { FC, useEffect, useState } from 'react';
 
 interface CopyToClipboardProps {
   text: string;
-  displayText?: string;
+  cutText?: boolean;
 }
 
-export const CopyToClipboard: FC<CopyToClipboardProps> = ({ text, displayText }) => {
+export const CopyToClipboard: FC<CopyToClipboardProps> = ({ text, cutText }) => {
   const [copied, setCopied] = useState(false);
   const [isPrinting, setIsPrinting] = useState(false);
 
@@ -38,15 +38,19 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({ text, displayText })
 
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
-      <div>{displayText || text}</div>
+      <div>{cutText ? text.slice(0, 4) + '...' + text.slice(-4) : text}</div>
       <Tooltip title={copied ? 'Copied!' : 'Copy to clipboard'}>
         <IconButton
           onClick={handleCopy}
           color='primary'
           size='small'
           style={{ padding: 0, paddingLeft: '5px', visibility: isPrinting ? 'hidden' : 'visible' }}
         >
-          {copied ? <CheckCircleOutlineIcon /> : <ContentCopyIcon />}
+          {copied ? (
+            <CheckCircleOutlineIcon fontSize='small' />
+          ) : (
+            <ContentCopyIcon fontSize='small' />
+          )}
         </IconButton>
       </Tooltip>
     </div>

diff --git a/src/components/common/dialog.tsx b/src/components/common/dialog.tsx
@@ -2,6 +2,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import {
   AppBar,
   Button,
+  DialogActions,
   DialogContent,
   DialogProps,
   DialogTitle,
@@ -42,9 +43,14 @@ export function Dialog({ open, children, isSaveButton, title, onClose, save, ...
       }}
       {...props}
     >
-      <IconButton onClick={onClose} sx={{ position: 'absolute', top: '0', right: '0' }}>
-        <CloseIcon />
-      </IconButton>
+      <DialogActions>
+        <IconButton
+          onClick={onClose}
+          sx={{ position: 'absolute', top: '0', right: '0', zIndex: 1000 }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogActions>
       {title && <DialogTitle>{title.toUpperCase()}</DialogTitle>}
       <DialogContent>{children}</DialogContent>
       {isSaveButton && (

diff --git a/src/components/common/media-selector-layout/media-selector-components/fullSizeMediaModal.tsx b/src/components/common/media-selector-layout/media-selector-components/fullSizeMediaModal.tsx
@@ -107,11 +107,7 @@ export const FullSizeMediaModal: FC<FullSizeMediaModalInterface> = ({
                 <Grid>
                   <CopyToClipboard
                     text={(clickedMedia?.[type as MediaKey] as common_MediaInfo)?.mediaUrl || ''}
-                    displayText={
-                      (clickedMedia?.[type as MediaKey] as common_MediaInfo)?.mediaUrl
-                        ? `${(clickedMedia?.[type as MediaKey] as common_MediaInfo)?.mediaUrl?.slice(0, 5)}...${(clickedMedia?.[type as MediaKey] as common_MediaInfo)?.mediaUrl?.slice(-14)}`
-                        : 'NO UUID'
-                    }
+                    cutText={true}
                   />
                 </Grid>
                 <Grid>

diff --git a/src/components/common/productPickerModal.tsx b/src/components/common/productPickerModal.tsx
@@ -160,9 +160,9 @@ export const ProductPickerModal: FC<ProductsPickerData> = ({
         accessorKey: 'productDisplay.productBody.categoryId',
         header: 'Category',
         Cell: ({ cell }) => {
-          const categoryId = cell.getValue() as number; // get the current row's categoryId
-          const category = categories.find((c) => c.id === categoryId); // find the category in the state
-          return <span>{category ? category.name!.replace('CATEGORY_ENUM_', '') : 'Unknown'}</span>; // return the category name or 'Unknown'
+          const categoryId = cell.getValue() as number;
+          const category = categories.find((c) => c.id === categoryId);
+          return <span>{category ? category.name!.replace('CATEGORY_ENUM_', '') : 'Unknown'}</span>;
         },
       },
     ],

diff --git a/src/components/managers/archive/createArchive/createArchive.tsx b/src/components/managers/archive/createArchive/createArchive.tsx
@@ -217,10 +217,7 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, o
                   <Grid size={{ xs: 12 }}>
                     <TruncateText text={archive.itemsInsert?.[id].name} length={60} />
                     {archive.itemsInsert?.[id]?.url && isValidUrl(archive.itemsInsert[id].url) && (
-                      <CopyToClipboard
-                        text={archive.itemsInsert[id].url || ''}
-                        displayText={`${archive.itemsInsert[id].url?.slice(0, 5)}...${archive.itemsInsert[id].url?.slice(-7)}`}
-                      />
+                      <CopyToClipboard text={archive.itemsInsert[id].url || ''} cutText={true} />
                     )}
                   </Grid>
                 </Grid>
@@ -236,7 +233,7 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, o
                 fullWidth
                 value={archive.archive?.heading}
                 onChange={handleTextFieldChange}
-                label='TITLE'
+                label='title'
                 slotProps={{
                   inputLabel: { shrink: true, style: { textTransform: 'uppercase' } },
                 }}
@@ -250,7 +247,7 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, o
                 name='description'
                 value={archive.archive?.text}
                 onChange={handleTextFieldChange}
-                label='DESCRIPTION'
+                label='description'
                 slotProps={{
                   inputLabel: { shrink: true, style: { textTransform: 'uppercase' } },
                   htmlInput: { maxLength: 255 },

diff --git a/src/components/managers/archive/listArchive/listArchive.tsx b/src/components/managers/archive/listArchive/listArchive.tsx
@@ -275,10 +275,7 @@ export const ListArchive: FC<ListArchiveInterface> = ({
                       <Grid item xs={12}>
                         <TruncateText text={item.archiveItem?.name} length={60} />
                         {item.archiveItem?.url && (
-                          <CopyToClipboard
-                            text={item.archiveItem?.url}
-                            displayText={`${item.archiveItem?.url.slice(0, 5)}...${item.archiveItem?.url.slice(-7)}`}
-                          />
+                          <CopyToClipboard text={item.archiveItem?.url} cutText={true} />
                         )}
                       </Grid>
                     </Grid>

diff --git a/src/components/managers/hero/entities/common-entity/common-entity.tsx b/src/components/managers/hero/entities/common-entity/common-entity.tsx
@@ -0,0 +1,59 @@
+import { Box, Grid2 as Grid, TextField, Typography } from '@mui/material';
+import { common_HeroFullInsert } from 'api/proto-http/admin';
+import { SingleMediaViewAndSelect } from 'components/common/media-selector-layout/media-selector-components/singleMediaViewAndSelect';
+import { isValidURL, isValidUrlForHero } from 'features/utilitty/isValidUrl';
+import { ErrorMessage, Field, useFormikContext } from 'formik';
+import styles from 'styles/hero.scss';
+import { Props } from '../interface/interface';
+
+export function CommonEntity({
+  title,
+  prefix,
+  link,
+  exploreLink,
+  size,
+  aspectRatio,
+  onSaveMedia,
+}: Props) {
+  const { errors } = useFormikContext<common_HeroFullInsert>();
+  return (
+    <Grid container>
+      <Grid size={{ xs: 12 }}>
+        <Typography variant='h4' textTransform='uppercase'>
+          {title}
+        </Typography>
+      </Grid>
+      <Grid size={size}>
+        <SingleMediaViewAndSelect
+          link={link}
+          aspectRatio={aspectRatio}
+          isDeleteAccepted={false}
+          saveSelectedMedia={(selectedMedia) => onSaveMedia(selectedMedia)}
+        />
+        {`${errors}.${prefix}.mediaId` && (
+          <ErrorMessage name={`${prefix}.mediaId`} component='div' />
+        )}
+        <Box component='div' className={styles.fields}>
+          <Field
+            as={TextField}
+            name={`${prefix}.exploreLink`}
+            label='EXPLORE LINK'
+            error={
+              (exploreLink && !isValidUrlForHero(exploreLink)) ||
+              (exploreLink && !isValidURL(exploreLink))
+            }
+            helperText={
+              exploreLink && !isValidURL(exploreLink)
+                ? 'Invalid URL format'
+                : exploreLink && !isValidUrlForHero(exploreLink)
+                  ? 'URL is not from the allowed domain but will be saved with a warning'
+                  : ''
+            }
+            fullWidth
+          />
+          <Field as={TextField} name={`${prefix}.exploreText`} label='explore text' fullWidth />
+        </Box>
+      </Grid>
+    </Grid>
+  );
+}
diff --git a/src/components/managers/hero/entities/doubleAdd/doubleAdd.tsx b/src/components/managers/hero/entities/doubleAdd/doubleAdd.tsx