Merge pull request #188 from 0101oak/feature/new-proto-hero

new proto for hero
jekabolt · Dec 25, 2024 · a1275d2 · a1275d2
2 parents 170ff18 + f810dad
commit a1275d2
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 72 deletions.
diff --git a/proto b/proto
diff --git a/src/components/managers/hero/entities/common-entity/common-entity.tsx b/src/components/managers/hero/entities/common-entity/common-entity.tsx
@@ -7,6 +7,7 @@ import styles from 'styles/hero.scss';
 import { Props } from '../interface/interface';
 
 export function CommonEntity({
+  type,
   title,
   prefix,
   link,
@@ -34,10 +35,11 @@ export function CommonEntity({
           <ErrorMessage name={`${prefix}.mediaId`} component='div' />
         )}
         <Box component='div' className={styles.fields}>
+          <Field as={TextField} name={`${prefix}.headline`} label='headline' fullWidth />
           <Field
             as={TextField}
             name={`${prefix}.exploreLink`}
-            label='EXPLORE LINK'
+            label='explore link'
             error={
               (exploreLink && !isValidUrlForHero(exploreLink)) ||
               (exploreLink && !isValidURL(exploreLink))

diff --git a/src/components/managers/hero/entities/entities.tsx b/src/components/managers/hero/entities/entities.tsx
@@ -1,7 +1,7 @@
-import { Button, Divider, Grid2 as Grid } from '@mui/material';
+import { Box, Button, Divider, Grid2 as Grid, TextField } from '@mui/material';
 import { common_HeroFullInsert, common_MediaFull, common_Product } from 'api/proto-http/admin';
 import { calculateAspectRatio } from 'features/utilitty/calculateAspectRatio';
-import { useFormikContext } from 'formik';
+import { Field, useFormikContext } from 'formik';
 import { FC, useEffect, useState } from 'react';
 import styles from 'styles/hero.scss';
 import { removeEntityIndex } from '../utility/arrayHelpers';
@@ -33,7 +33,7 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
 
   const fetchEntities = () => {
     const mainAdd =
-      entities.find((e) => e.mainAdd)?.mainAdd?.singleAdd?.media?.media?.thumbnail?.mediaUrl || '';
+      entities.find((e) => e.main)?.main?.single?.media?.media?.thumbnail?.mediaUrl || '';
 
     const singleEntities: { [key: number]: string } = {};
     const doubleAddEntities: { [key: number]: { left: string; right: string } } = {};
@@ -42,11 +42,11 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
     const calculatedAllowedRatios: { [key: number]: string[] } = {};
 
     entities.forEach((e, i) => {
-      singleEntities[i] = e.singleAdd?.media?.media?.thumbnail?.mediaUrl || '';
+      singleEntities[i] = e.single?.media?.media?.thumbnail?.mediaUrl || '';
 
       doubleAddEntities[i] = {
-        left: e.doubleAdd?.left?.media?.media?.thumbnail?.mediaUrl || '',
-        right: e.doubleAdd?.right?.media?.media?.thumbnail?.mediaUrl || '',
+        left: e.double?.left?.media?.media?.thumbnail?.mediaUrl || '',
+        right: e.double?.right?.media?.media?.thumbnail?.mediaUrl || '',
       };
 
       productsForEntities[i] = e.featuredProducts?.products || [];
@@ -147,41 +147,56 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
         values.entities.map((entity, index) => (
           <Grid size={{ xs: 12 }} ref={(el) => (entityRefs.current[index] = el)}>
             <Grid container spacing={2} className={styles.entity_container}>
-              {entity.type === 'HERO_TYPE_MAIN_ADD' && (
+              {entity.type === 'HERO_TYPE_MAIN' && (
                 <Grid size={{ xs: 12 }}>
                   <CommonEntity
                     title='main add'
-                    prefix={`entities.${index}.mainAdd.singleAdd`}
+                    prefix={`entities.${index}.main.single`}
                     link={main}
-                    exploreLink={entity.mainAdd?.singleAdd?.exploreLink}
+                    exploreLink={entity.main?.single?.exploreLink}
                     size={{ xs: 12 }}
                     aspectRatio={['16:9']}
                     onSaveMedia={(media: common_MediaFull[]) => saveMedia(media, 'main', index)}
+                    type={entity.type}
                   />
+                  <Box component='div' className={styles.fields}>
+                    <Field
+                      as={TextField}
+                      name={`entities.${index}.main.tag`}
+                      label='tag'
+                      fullWidth
+                    />
+                    <Field
+                      as={TextField}
+                      name={`entities.${index}.main.description`}
+                      label='description'
+                      fullWidth
+                    />
+                  </Box>
                 </Grid>
               )}
-              {entity.type === 'HERO_TYPE_SINGLE_ADD' && (
+              {entity.type === 'HERO_TYPE_SINGLE' && (
                 <Grid size={{ xs: 12 }}>
                   <CommonEntity
                     title='single add'
-                    prefix={`entities.${index}.singleAdd`}
+                    prefix={`entities.${index}.single`}
                     link={single[index]}
-                    exploreLink={entity.singleAdd?.exploreLink}
+                    exploreLink={entity.single?.exploreLink}
                     size={{ xs: 12 }}
                     aspectRatio={allowedRatios[index]}
                     onSaveMedia={(media: common_MediaFull[]) => saveMedia(media, 'single', index)}
                   />
                 </Grid>
               )}
-              {entity.type === 'HERO_TYPE_DOUBLE_ADD' && (
+              {entity.type === 'HERO_TYPE_DOUBLE' && (
                 <Grid size={{ xs: 12 }}>
                   <Grid container spacing={2}>
                     <Grid size={{ xs: 12, md: 6 }}>
                       <CommonEntity
                         title='double add'
-                        prefix={`entities.${index}.doubleAdd.left`}
+                        prefix={`entities.${index}.double.left`}
                         link={doubleAdd[index]?.left || ''}
-                        exploreLink={entity.doubleAdd?.left?.exploreLink}
+                        exploreLink={entity.double?.left?.exploreLink}
                         size={{ xs: 12 }}
                         aspectRatio={allowedRatios[index] || ['4:5', '1:1']}
                         onSaveMedia={(media: common_MediaFull[]) =>
@@ -192,9 +207,9 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
                     <Grid size={{ xs: 12, md: 6 }} sx={{ marginTop: '42px' }}>
                       <CommonEntity
                         title=''
-                        prefix={`entities.${index}.doubleAdd.right`}
+                        prefix={`entities.${index}.double.right`}
                         link={doubleAdd[index]?.right || ''}
-                        exploreLink={entity.doubleAdd?.right?.exploreLink}
+                        exploreLink={entity.double?.right?.exploreLink}
                         size={{ xs: 12 }}
                         aspectRatio={allowedRatios[index] || ['4:5', '1:1']}
                         onSaveMedia={(media: common_MediaFull[]) =>

diff --git a/src/components/managers/hero/entities/featured-products-(tags)/featured-prduct-base.tsx b/src/components/managers/hero/entities/featured-products-(tags)/featured-prduct-base.tsx
@@ -51,7 +51,12 @@ export function FeaturedProductBase({
         </Grid>
       )}
       <Grid size={{ xs: 12 }}>
-        <Field as={TextField} name={`entities.${index}.${prefix}.title`} label='title' fullWidth />
+        <Field
+          as={TextField}
+          name={`entities.${index}.${prefix}.headline`}
+          label='headline'
+          fullWidth
+        />
       </Grid>
       <Grid size={{ xs: 12 }}>
         <Field

diff --git a/src/components/managers/hero/entities/interface/interface.ts b/src/components/managers/hero/entities/interface/interface.ts
@@ -9,6 +9,7 @@ export interface EntitiesProps {
 }
 
 export interface Props {
+    type?: any;
     title: string;
     prefix: string;
     link: string;

diff --git a/src/components/managers/hero/hero.tsx b/src/components/managers/hero/hero.tsx
@@ -66,15 +66,15 @@ export const Hero: FC = () => {
           nonAllowedDomainUrls.push(`${type} URL is not from allowed domain`);
         }
       };
-      if (entity.singleAdd) {
-        checkUrl(entity.singleAdd.exploreLink, 'Single Add');
+      if (entity.single) {
+        checkUrl(entity.single.exploreLink, 'Single Add');
       }
-      if (entity.mainAdd?.singleAdd) {
-        checkUrl(entity.mainAdd.singleAdd.exploreLink, 'Main Add');
+      if (entity.main) {
+        checkUrl(entity.main.single?.exploreLink, 'Main Add');
       }
-      if (entity.doubleAdd) {
-        checkUrl(entity.doubleAdd.left?.exploreLink, 'Double Add Left');
-        checkUrl(entity.doubleAdd.right?.exploreLink, 'Double Add Right');
+      if (entity.double) {
+        checkUrl(entity.double.left?.exploreLink, 'Double Add Left');
+        checkUrl(entity.double.right?.exploreLink, 'Double Add Right');
       }
       if (entity.featuredProducts) {
         checkUrl(entity.featuredProducts.exploreLink, 'Featured Products');

diff --git a/src/components/managers/hero/selectHeroType.tsx b/src/components/managers/hero/selectHeroType.tsx
@@ -15,12 +15,10 @@ interface SelectHeroType {
 export const SelectHeroType: FC<SelectHeroType> = ({ arrayHelpers, entityRefs }) => {
   const { values } = useFormikContext<common_HeroFullInsert>();
   const [entityType, setEntityType] = useState<string>('');
-  const isOtherEntitiesExist = values.entities?.some(
-    (entity) => entity.type !== 'HERO_TYPE_MAIN_ADD',
-  );
+  const isOtherEntitiesExist = values.entities?.some((entity) => entity.type !== 'HERO_TYPE_MAIN');
   const [addedEntityIndex, setAddedEntityIndex] = useState<number | null>(null);
 
-  const isMainAddExists = values.entities?.some((entity) => entity.type === 'HERO_TYPE_MAIN_ADD');
+  const isMainAddExists = values.entities?.some((entity) => entity.type === 'HERO_TYPE_MAIN');
 
   const isEntityIncomplete = values.entities?.some((entity) => {
     const validateEntity = validationForSelectHeroType[entity.type as common_HeroType];
@@ -57,10 +55,10 @@ export const SelectHeroType: FC<SelectHeroType> = ({ arrayHelpers, entityRefs })
         >
           {heroTypes
             .filter((type) => {
-              if (type.value === 'HERO_TYPE_MAIN_ADD' && isOtherEntitiesExist) {
+              if (type.value === 'HERO_TYPE_MAIN' && isOtherEntitiesExist) {
                 return false;
               }
-              if (type.value === 'HERO_TYPE_MAIN_ADD' && isMainAddExists) {
+              if (type.value === 'HERO_TYPE_MAIN' && isMainAddExists) {
                 return false;
               }
               return true;

diff --git a/src/components/managers/hero/utility/mapHeroFunction.ts b/src/components/managers/hero/utility/mapHeroFunction.ts
@@ -3,9 +3,9 @@ import { common_HeroFull } from 'api/proto-http/frontend';
 
 
 export const heroTypes: { value: common_HeroType; label: string }[] = [
-    { value: 'HERO_TYPE_MAIN_ADD', label: 'main add' },
-    { value: 'HERO_TYPE_SINGLE_ADD', label: 'single add' },
-    { value: 'HERO_TYPE_DOUBLE_ADD', label: 'double add' },
+    { value: 'HERO_TYPE_MAIN', label: 'main add' },
+    { value: 'HERO_TYPE_SINGLE', label: 'single add' },
+    { value: 'HERO_TYPE_DOUBLE', label: 'double add' },
     { value: 'HERO_TYPE_FEATURED_PRODUCTS', label: 'featured products' },
     { value: 'HERO_TYPE_FEATURED_PRODUCTS_TAG', label: 'featured products tag' }
 ]
@@ -14,42 +14,48 @@ export const mapHeroFunction = (hero?: common_HeroFull | undefined): common_Hero
     return {
         entities: hero?.entities?.map((entity) => ({
             type: entity.type,
-            mainAdd: {
-                singleAdd: {
-                    mediaId: entity.mainAdd?.singleAdd?.media?.id,
-                    exploreLink: entity.mainAdd?.singleAdd?.exploreLink,
-                    exploreText: entity.mainAdd?.singleAdd?.exploreText,
+            main: {
+                single: {
+                    headline: entity.main?.single?.headline,
+                    mediaId: entity.main?.single?.media?.id,
+                    exploreLink: entity.main?.single?.exploreLink,
+                    exploreText: entity.main?.single?.exploreText,
                 },
+                tag: entity.main?.tag,
+                description: entity.main?.description,
             },
-            singleAdd: {
-                mediaId: entity.singleAdd?.media?.id,
-                exploreLink: entity.singleAdd?.exploreLink,
-                exploreText: entity.singleAdd?.exploreText,
+            single: {
+                headline: entity.single?.headline,
+                mediaId: entity.single?.media?.id,
+                exploreLink: entity.single?.exploreLink,
+                exploreText: entity.single?.exploreText,
             },
-            doubleAdd: {
+            double: {
                 left: {
-                    mediaId: entity.doubleAdd?.left?.media?.id,
-                    exploreLink: entity.doubleAdd?.left?.exploreLink,
-                    exploreText: entity.doubleAdd?.left?.exploreText,
+                    headline: entity.double?.left?.headline,
+                    mediaId: entity.double?.left?.media?.id,
+                    exploreLink: entity.double?.left?.exploreLink,
+                    exploreText: entity.double?.left?.exploreText,
                 },
                 right: {
-                    mediaId: entity.doubleAdd?.right?.media?.id,
-                    exploreLink: entity.doubleAdd?.right?.exploreLink,
-                    exploreText: entity.doubleAdd?.right?.exploreText,
+                    headline: entity.double?.right?.headline,
+                    mediaId: entity.double?.right?.media?.id,
+                    exploreLink: entity.double?.right?.exploreLink,
+                    exploreText: entity.double?.right?.exploreText,
                 },
             },
             featuredProducts: {
                 productIds:
                     entity.featuredProducts?.products
                         ?.map((product) => product.id)
                         .filter((id): id is number => id !== undefined) || [],
-                title: entity.featuredProducts?.title,
+                headline: entity.featuredProducts?.headline,
                 exploreLink: entity.featuredProducts?.exploreLink,
                 exploreText: entity.featuredProducts?.exploreText,
             },
             featuredProductsTag: {
                 tag: entity.featuredProductsTag?.tag,
-                title: entity.featuredProductsTag?.products?.title,
+                headline: entity.featuredProductsTag?.products?.headline,
                 exploreLink: entity.featuredProductsTag?.products?.exploreLink,
                 exploreText: entity.featuredProductsTag?.products?.exploreText,
             }
@@ -61,39 +67,45 @@ export const emptyHeroForm: common_HeroFullInsert = {
     entities: [
         {
             type: 'HERO_TYPE_UNKNOWN' as common_HeroType,
-            mainAdd: {
-                singleAdd: {
+            main: {
+                single: {
                     mediaId: 0,
+                    headline: '',
                     exploreLink: '',
                     exploreText: ''
-                }
+                },
+                tag: '',
+                description: ''
             },
-            singleAdd: {
+            single: {
+                headline: '',
                 mediaId: 0,
                 exploreLink: '',
                 exploreText: ''
             },
-            doubleAdd: {
+            double: {
                 left: {
+                    headline: '',
                     mediaId: 0,
                     exploreLink: '',
                     exploreText: ''
                 },
                 right: {
+                    headline: '',
                     mediaId: 0,
                     exploreLink: '',
                     exploreText: ''
                 }
             },
             featuredProducts: {
                 productIds: [],
-                title: '',
+                headline: '',
                 exploreLink: '',
                 exploreText: ''
             },
             featuredProductsTag: {
                 tag: '',
-                title: '',
+                headline: '',
                 exploreLink: '',
                 exploreText: ''
             }

diff --git a/src/components/managers/hero/utility/save-media-config.ts b/src/components/managers/hero/utility/save-media-config.ts
@@ -11,20 +11,20 @@ export const createMediaSaveConfigs = (
 ) => {
     return {
         main: (index: number): MediaConfig => ({
-            fieldPath: `entities.${index}.mainAdd.singleAdd.mediaId`,
+            fieldPath: `entities.${index}.main.single.mediaId`,
             state: setMain,
         }),
         single: (index: number): MediaConfig => ({
-            fieldPath: `entities.${index}.singleAdd.mediaId`,
+            fieldPath: `entities.${index}.single.mediaId`,
             state: (url) => setSingle((prev) => ({ ...prev, [index]: url })),
         }),
         doubleLeft: (index: number): MediaConfig => ({
-            fieldPath: `entities.${index}.doubleAdd.left.mediaId`,
+            fieldPath: `entities.${index}.double.left.mediaId`,
             state: (url) =>
                 setDoubleAdd((prev) => ({ ...prev, [index]: { ...prev[index], left: url } })),
         }),
         doubleRight: (index: number): MediaConfig => ({
-            fieldPath: `entities.${index}.doubleAdd.right.mediaId`,
+            fieldPath: `entities.${index}.double.right.mediaId`,
             state: (url) =>
                 setDoubleAdd((prev) => ({ ...prev, [index]: { ...prev[index], right: url } })),
         }),

diff --git a/src/components/managers/hero/utility/validationForSelectHeroType.ts b/src/components/managers/hero/utility/validationForSelectHeroType.ts
@@ -1,15 +1,15 @@
 import { common_HeroEntityInsert, common_HeroType } from "api/proto-http/admin";
 
 export const validationForSelectHeroType: Record<common_HeroType, (entity: common_HeroEntityInsert) => boolean> = {
-    HERO_TYPE_MAIN_ADD: (entity: common_HeroEntityInsert) =>
-        !entity.mainAdd?.singleAdd?.mediaId,
+    HERO_TYPE_MAIN: (entity: common_HeroEntityInsert) =>
+        !entity.main?.single?.mediaId,
 
-    HERO_TYPE_SINGLE_ADD: (entity: common_HeroEntityInsert) =>
-        !entity.singleAdd?.mediaId,
+    HERO_TYPE_SINGLE: (entity: common_HeroEntityInsert) =>
+        !entity.single?.mediaId,
 
-    HERO_TYPE_DOUBLE_ADD: (entity: common_HeroEntityInsert) =>
-        !entity.doubleAdd?.left?.mediaId ||
-        !entity.doubleAdd?.right?.mediaId,
+    HERO_TYPE_DOUBLE: (entity: common_HeroEntityInsert) =>
+        !entity.double?.left?.mediaId ||
+        !entity.double?.right?.mediaId,
 
     HERO_TYPE_FEATURED_PRODUCTS: (entity: common_HeroEntityInsert) =>
         !entity.featuredProducts?.productIds || entity.featuredProducts.productIds.length === 0,
+2 −0		common/common/dict.proto
+34 −28		common/common/hero.proto
+13 −0		frontend/frontend/frontend.proto