Skip to content

Commit f810dad

Browse files
0101oak0101oak
committed
new proto for hero
1 parent 170ff18 commit f810dad

File tree

10 files changed

+105
-72
lines changed

10 files changed

+105
-72
lines changed

‎proto

‎src/components/managers/hero/entities/common-entity/common-entity.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import styles from 'styles/hero.scss';
77
import { Props } from '../interface/interface';
88

99
export function CommonEntity({
10+
type,
1011
title,
1112
prefix,
1213
link,
@@ -34,10 +35,11 @@ export function CommonEntity({
3435
<ErrorMessage name={`${prefix}.mediaId`} component='div' />
3536
)}
3637
<Box component='div' className={styles.fields}>
38+
<Field as={TextField} name={`${prefix}.headline`} label='headline' fullWidth />
3739
<Field
3840
as={TextField}
3941
name={`${prefix}.exploreLink`}
40-
label='EXPLORE LINK'
42+
label='explore link'
4143
error={
4244
(exploreLink && !isValidUrlForHero(exploreLink)) ||
4345
(exploreLink && !isValidURL(exploreLink))

‎src/components/managers/hero/entities/entities.tsx

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import { Button, Divider, Grid2 as Grid } from '@mui/material';
1+
import { Box, Button, Divider, Grid2 as Grid, TextField } from '@mui/material';
22
import { common_HeroFullInsert, common_MediaFull, common_Product } from 'api/proto-http/admin';
33
import { calculateAspectRatio } from 'features/utilitty/calculateAspectRatio';
4-
import { useFormikContext } from 'formik';
4+
import { Field, useFormikContext } from 'formik';
55
import { FC, useEffect, useState } from 'react';
66
import styles from 'styles/hero.scss';
77
import { removeEntityIndex } from '../utility/arrayHelpers';
@@ -33,7 +33,7 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
3333

3434
const fetchEntities = () => {
3535
const mainAdd =
36-
entities.find((e) => e.mainAdd)?.mainAdd?.singleAdd?.media?.media?.thumbnail?.mediaUrl || '';
36+
entities.find((e) => e.main)?.main?.single?.media?.media?.thumbnail?.mediaUrl || '';
3737

3838
const singleEntities: { [key: number]: string } = {};
3939
const doubleAddEntities: { [key: number]: { left: string; right: string } } = {};
@@ -42,11 +42,11 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
4242
const calculatedAllowedRatios: { [key: number]: string[] } = {};
4343

4444
entities.forEach((e, i) => {
45-
singleEntities[i] = e.singleAdd?.media?.media?.thumbnail?.mediaUrl || '';
45+
singleEntities[i] = e.single?.media?.media?.thumbnail?.mediaUrl || '';
4646

4747
doubleAddEntities[i] = {
48-
left: e.doubleAdd?.left?.media?.media?.thumbnail?.mediaUrl || '',
49-
right: e.doubleAdd?.right?.media?.media?.thumbnail?.mediaUrl || '',
48+
left: e.double?.left?.media?.media?.thumbnail?.mediaUrl || '',
49+
right: e.double?.right?.media?.media?.thumbnail?.mediaUrl || '',
5050
};
5151

5252
productsForEntities[i] = e.featuredProducts?.products || [];
@@ -147,41 +147,56 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
147147
values.entities.map((entity, index) => (
148148
<Grid size={{ xs: 12 }} ref={(el) => (entityRefs.current[index] = el)}>
149149
<Grid container spacing={2} className={styles.entity_container}>
150-
{entity.type === 'HERO_TYPE_MAIN_ADD' && (
150+
{entity.type === 'HERO_TYPE_MAIN' && (
151151
<Grid size={{ xs: 12 }}>
152152
<CommonEntity
153153
title='main add'
154-
prefix={`entities.${index}.mainAdd.singleAdd`}
154+
prefix={`entities.${index}.main.single`}
155155
link={main}
156-
exploreLink={entity.mainAdd?.singleAdd?.exploreLink}
156+
exploreLink={entity.main?.single?.exploreLink}
157157
size={{ xs: 12 }}
158158
aspectRatio={['16:9']}
159159
onSaveMedia={(media: common_MediaFull[]) => saveMedia(media, 'main', index)}
160+
type={entity.type}
160161
/>
162+
<Box component='div' className={styles.fields}>
163+
<Field
164+
as={TextField}
165+
name={`entities.${index}.main.tag`}
166+
label='tag'
167+
fullWidth
168+
/>
169+
<Field
170+
as={TextField}
171+
name={`entities.${index}.main.description`}
172+
label='description'
173+
fullWidth
174+
/>
175+
</Box>
161176
</Grid>
162177
)}
163-
{entity.type === 'HERO_TYPE_SINGLE_ADD' && (
178+
{entity.type === 'HERO_TYPE_SINGLE' && (
164179
<Grid size={{ xs: 12 }}>
165180
<CommonEntity
166181
title='single add'
167-
prefix={`entities.${index}.singleAdd`}
182+
prefix={`entities.${index}.single`}
168183
link={single[index]}
169-
exploreLink={entity.singleAdd?.exploreLink}
184+
exploreLink={entity.single?.exploreLink}
170185
size={{ xs: 12 }}
171186
aspectRatio={allowedRatios[index]}
172187
onSaveMedia={(media: common_MediaFull[]) => saveMedia(media, 'single', index)}
173188
/>
174189
</Grid>
175190
)}
176-
{entity.type === 'HERO_TYPE_DOUBLE_ADD' && (
191+
{entity.type === 'HERO_TYPE_DOUBLE' && (
177192
<Grid size={{ xs: 12 }}>
178193
<Grid container spacing={2}>
179194
<Grid size={{ xs: 12, md: 6 }}>
180195
<CommonEntity
181196
title='double add'
182-
prefix={`entities.${index}.doubleAdd.left`}
197+
prefix={`entities.${index}.double.left`}
183198
link={doubleAdd[index]?.left || ''}
184-
exploreLink={entity.doubleAdd?.left?.exploreLink}
199+
exploreLink={entity.double?.left?.exploreLink}
185200
size={{ xs: 12 }}
186201
aspectRatio={allowedRatios[index] || ['4:5', '1:1']}
187202
onSaveMedia={(media: common_MediaFull[]) =>
@@ -192,9 +207,9 @@ export const Entities: FC<EntitiesProps> = ({ entityRefs, entities, arrayHelpers
192207
<Grid size={{ xs: 12, md: 6 }} sx={{ marginTop: '42px' }}>
193208
<CommonEntity
194209
title=''
195-
prefix={`entities.${index}.doubleAdd.right`}
210+
prefix={`entities.${index}.double.right`}
196211
link={doubleAdd[index]?.right || ''}
197-
exploreLink={entity.doubleAdd?.right?.exploreLink}
212+
exploreLink={entity.double?.right?.exploreLink}
198213
size={{ xs: 12 }}
199214
aspectRatio={allowedRatios[index] || ['4:5', '1:1']}
200215
onSaveMedia={(media: common_MediaFull[]) =>

‎src/components/managers/hero/entities/featured-products-(tags)/featured-prduct-base.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,12 @@ export function FeaturedProductBase({
5151
</Grid>
5252
)}
5353
<Grid size={{ xs: 12 }}>
54-
<Field as={TextField} name={`entities.${index}.${prefix}.title`} label='title' fullWidth />
54+
<Field
55+
as={TextField}
56+
name={`entities.${index}.${prefix}.headline`}
57+
label='headline'
58+
fullWidth
59+
/>
5560
</Grid>
5661
<Grid size={{ xs: 12 }}>
5762
<Field

‎src/components/managers/hero/entities/interface/interface.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export interface EntitiesProps {
99
}
1010

1111
export interface Props {
12+
type?: any;
1213
title: string;
1314
prefix: string;
1415
link: string;

‎src/components/managers/hero/hero.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,15 @@ export const Hero: FC = () => {
6666
nonAllowedDomainUrls.push(`${type} URL is not from allowed domain`);
6767
}
6868
};
69-
if (entity.singleAdd) {
70-
checkUrl(entity.singleAdd.exploreLink, 'Single Add');
69+
if (entity.single) {
70+
checkUrl(entity.single.exploreLink, 'Single Add');
7171
}
72-
if (entity.mainAdd?.singleAdd) {
73-
checkUrl(entity.mainAdd.singleAdd.exploreLink, 'Main Add');
72+
if (entity.main) {
73+
checkUrl(entity.main.single?.exploreLink, 'Main Add');
7474
}
75-
if (entity.doubleAdd) {
76-
checkUrl(entity.doubleAdd.left?.exploreLink, 'Double Add Left');
77-
checkUrl(entity.doubleAdd.right?.exploreLink, 'Double Add Right');
75+
if (entity.double) {
76+
checkUrl(entity.double.left?.exploreLink, 'Double Add Left');
77+
checkUrl(entity.double.right?.exploreLink, 'Double Add Right');
7878
}
7979
if (entity.featuredProducts) {
8080
checkUrl(entity.featuredProducts.exploreLink, 'Featured Products');

‎src/components/managers/hero/selectHeroType.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,10 @@ interface SelectHeroType {
1515
export const SelectHeroType: FC<SelectHeroType> = ({ arrayHelpers, entityRefs }) => {
1616
const { values } = useFormikContext<common_HeroFullInsert>();
1717
const [entityType, setEntityType] = useState<string>('');
18-
const isOtherEntitiesExist = values.entities?.some(
19-
(entity) => entity.type !== 'HERO_TYPE_MAIN_ADD',
20-
);
18+
const isOtherEntitiesExist = values.entities?.some((entity) => entity.type !== 'HERO_TYPE_MAIN');
2119
const [addedEntityIndex, setAddedEntityIndex] = useState<number | null>(null);
2220

23-
const isMainAddExists = values.entities?.some((entity) => entity.type === 'HERO_TYPE_MAIN_ADD');
21+
const isMainAddExists = values.entities?.some((entity) => entity.type === 'HERO_TYPE_MAIN');
2422

2523
const isEntityIncomplete = values.entities?.some((entity) => {
2624
const validateEntity = validationForSelectHeroType[entity.type as common_HeroType];
@@ -57,10 +55,10 @@ export const SelectHeroType: FC<SelectHeroType> = ({ arrayHelpers, entityRefs })
5755
>
5856
{heroTypes
5957
.filter((type) => {
60-
if (type.value === 'HERO_TYPE_MAIN_ADD' && isOtherEntitiesExist) {
58+
if (type.value === 'HERO_TYPE_MAIN' && isOtherEntitiesExist) {
6159
return false;
6260
}
63-
if (type.value === 'HERO_TYPE_MAIN_ADD' && isMainAddExists) {
61+
if (type.value === 'HERO_TYPE_MAIN' && isMainAddExists) {
6462
return false;
6563
}
6664
return true;

‎src/components/managers/hero/utility/mapHeroFunction.ts

Lines changed: 40 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { common_HeroFull } from 'api/proto-http/frontend';
33

44

55
export const heroTypes: { value: common_HeroType; label: string }[] = [
6-
{ value: 'HERO_TYPE_MAIN_ADD', label: 'main add' },
7-
{ value: 'HERO_TYPE_SINGLE_ADD', label: 'single add' },
8-
{ value: 'HERO_TYPE_DOUBLE_ADD', label: 'double add' },
6+
{ value: 'HERO_TYPE_MAIN', label: 'main add' },
7+
{ value: 'HERO_TYPE_SINGLE', label: 'single add' },
8+
{ value: 'HERO_TYPE_DOUBLE', label: 'double add' },
99
{ value: 'HERO_TYPE_FEATURED_PRODUCTS', label: 'featured products' },
1010
{ value: 'HERO_TYPE_FEATURED_PRODUCTS_TAG', label: 'featured products tag' }
1111
]
@@ -14,42 +14,48 @@ export const mapHeroFunction = (hero?: common_HeroFull | undefined): common_Hero
1414
return {
1515
entities: hero?.entities?.map((entity) => ({
1616
type: entity.type,
17-
mainAdd: {
18-
singleAdd: {
19-
mediaId: entity.mainAdd?.singleAdd?.media?.id,
20-
exploreLink: entity.mainAdd?.singleAdd?.exploreLink,
21-
exploreText: entity.mainAdd?.singleAdd?.exploreText,
17+
main: {
18+
single: {
19+
headline: entity.main?.single?.headline,
20+
mediaId: entity.main?.single?.media?.id,
21+
exploreLink: entity.main?.single?.exploreLink,
22+
exploreText: entity.main?.single?.exploreText,
2223
},
24+
tag: entity.main?.tag,
25+
description: entity.main?.description,
2326
},
24-
singleAdd: {
25-
mediaId: entity.singleAdd?.media?.id,
26-
exploreLink: entity.singleAdd?.exploreLink,
27-
exploreText: entity.singleAdd?.exploreText,
27+
single: {
28+
headline: entity.single?.headline,
29+
mediaId: entity.single?.media?.id,
30+
exploreLink: entity.single?.exploreLink,
31+
exploreText: entity.single?.exploreText,
2832
},
29-
doubleAdd: {
33+
double: {
3034
left: {
31-
mediaId: entity.doubleAdd?.left?.media?.id,
32-
exploreLink: entity.doubleAdd?.left?.exploreLink,
33-
exploreText: entity.doubleAdd?.left?.exploreText,
35+
headline: entity.double?.left?.headline,
36+
mediaId: entity.double?.left?.media?.id,
37+
exploreLink: entity.double?.left?.exploreLink,
38+
exploreText: entity.double?.left?.exploreText,
3439
},
3540
right: {
36-
mediaId: entity.doubleAdd?.right?.media?.id,
37-
exploreLink: entity.doubleAdd?.right?.exploreLink,
38-
exploreText: entity.doubleAdd?.right?.exploreText,
41+
headline: entity.double?.right?.headline,
42+
mediaId: entity.double?.right?.media?.id,
43+
exploreLink: entity.double?.right?.exploreLink,
44+
exploreText: entity.double?.right?.exploreText,
3945
},
4046
},
4147
featuredProducts: {
4248
productIds:
4349
entity.featuredProducts?.products
4450
?.map((product) => product.id)
4551
.filter((id): id is number => id !== undefined) || [],
46-
title: entity.featuredProducts?.title,
52+
headline: entity.featuredProducts?.headline,
4753
exploreLink: entity.featuredProducts?.exploreLink,
4854
exploreText: entity.featuredProducts?.exploreText,
4955
},
5056
featuredProductsTag: {
5157
tag: entity.featuredProductsTag?.tag,
52-
title: entity.featuredProductsTag?.products?.title,
58+
headline: entity.featuredProductsTag?.products?.headline,
5359
exploreLink: entity.featuredProductsTag?.products?.exploreLink,
5460
exploreText: entity.featuredProductsTag?.products?.exploreText,
5561
}
@@ -61,39 +67,45 @@ export const emptyHeroForm: common_HeroFullInsert = {
6167
entities: [
6268
{
6369
type: 'HERO_TYPE_UNKNOWN' as common_HeroType,
64-
mainAdd: {
65-
singleAdd: {
70+
main: {
71+
single: {
6672
mediaId: 0,
73+
headline: '',
6774
exploreLink: '',
6875
exploreText: ''
69-
}
76+
},
77+
tag: '',
78+
description: ''
7079
},
71-
singleAdd: {
80+
single: {
81+
headline: '',
7282
mediaId: 0,
7383
exploreLink: '',
7484
exploreText: ''
7585
},
76-
doubleAdd: {
86+
double: {
7787
left: {
88+
headline: '',
7889
mediaId: 0,
7990
exploreLink: '',
8091
exploreText: ''
8192
},
8293
right: {
94+
headline: '',
8395
mediaId: 0,
8496
exploreLink: '',
8597
exploreText: ''
8698
}
8799
},
88100
featuredProducts: {
89101
productIds: [],
90-
title: '',
102+
headline: '',
91103
exploreLink: '',
92104
exploreText: ''
93105
},
94106
featuredProductsTag: {
95107
tag: '',
96-
title: '',
108+
headline: '',
97109
exploreLink: '',
98110
exploreText: ''
99111
}

‎src/components/managers/hero/utility/save-media-config.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@ export const createMediaSaveConfigs = (
1111
) => {
1212
return {
1313
main: (index: number): MediaConfig => ({
14-
fieldPath: `entities.${index}.mainAdd.singleAdd.mediaId`,
14+
fieldPath: `entities.${index}.main.single.mediaId`,
1515
state: setMain,
1616
}),
1717
single: (index: number): MediaConfig => ({
18-
fieldPath: `entities.${index}.singleAdd.mediaId`,
18+
fieldPath: `entities.${index}.single.mediaId`,
1919
state: (url) => setSingle((prev) => ({ ...prev, [index]: url })),
2020
}),
2121
doubleLeft: (index: number): MediaConfig => ({
22-
fieldPath: `entities.${index}.doubleAdd.left.mediaId`,
22+
fieldPath: `entities.${index}.double.left.mediaId`,
2323
state: (url) =>
2424
setDoubleAdd((prev) => ({ ...prev, [index]: { ...prev[index], left: url } })),
2525
}),
2626
doubleRight: (index: number): MediaConfig => ({
27-
fieldPath: `entities.${index}.doubleAdd.right.mediaId`,
27+
fieldPath: `entities.${index}.double.right.mediaId`,
2828
state: (url) =>
2929
setDoubleAdd((prev) => ({ ...prev, [index]: { ...prev[index], right: url } })),
3030
}),

‎src/components/managers/hero/utility/validationForSelectHeroType.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { common_HeroEntityInsert, common_HeroType } from "api/proto-http/admin";
22

33
export const validationForSelectHeroType: Record<common_HeroType, (entity: common_HeroEntityInsert) => boolean> = {
4-
HERO_TYPE_MAIN_ADD: (entity: common_HeroEntityInsert) =>
5-
!entity.mainAdd?.singleAdd?.mediaId,
4+
HERO_TYPE_MAIN: (entity: common_HeroEntityInsert) =>
5+
!entity.main?.single?.mediaId,
66

7-
HERO_TYPE_SINGLE_ADD: (entity: common_HeroEntityInsert) =>
8-
!entity.singleAdd?.mediaId,
7+
HERO_TYPE_SINGLE: (entity: common_HeroEntityInsert) =>
8+
!entity.single?.mediaId,
99

10-
HERO_TYPE_DOUBLE_ADD: (entity: common_HeroEntityInsert) =>
11-
!entity.doubleAdd?.left?.mediaId ||
12-
!entity.doubleAdd?.right?.mediaId,
10+
HERO_TYPE_DOUBLE: (entity: common_HeroEntityInsert) =>
11+
!entity.double?.left?.mediaId ||
12+
!entity.double?.right?.mediaId,
1313

1414
HERO_TYPE_FEATURED_PRODUCTS: (entity: common_HeroEntityInsert) =>
1515
!entity.featuredProducts?.productIds || entity.featuredProducts.productIds.length === 0,

0 commit comments

Comments
 (0)