Skip to content

Commit d73738c

Browse files
ErioldDaniel Montoya
Eriold
and
Daniel Montoya
authored
feat(PDYE-994): se agrega caja curso futura con validaciones (#653)
Co-authored-by: Daniel Montoya <daniel.montoya@eclass.cl>
1 parent 8516ff3 commit d73738c

File tree

8 files changed

+125
-33
lines changed

8 files changed

+125
-33
lines changed

‎src/documentation/pages/Organisms/CourseList.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,24 @@ export const ViewCourseList = (): JSX.Element => {
3434
<Code text='<CourseList courses={courses} typeBox="IMAGE_SMALL" />' />
3535
<CourseList courses={[dataFake[18]]} typeBox="IMAGE_SMALL" />
3636

37+
<MyTittle>Caja curso con fecha futura</MyTittle>
38+
<MyText>
39+
Si el curso tiene una fecha futura, se muestra el contenido de la imagen opacada y un aviso
40+
ajustado a la traduccion de proximamante.
41+
</MyText>
42+
<Code
43+
text="//Formato adicional
44+
soonCourse: {
45+
show: true,
46+
text: 'Próximamente',
47+
}"
48+
/>
49+
<MyText>
50+
El componente funciona tanto para back como para front, se agrego con la intencion de que a
51+
futuro pueda controlarse directamente desde back si se requiere
52+
</MyText>
53+
<CourseList courses={[dataFake[21]]} typeBox="TRADITIONAL" />
54+
3755
<MyTittle>Datos a mostrar</MyTittle>
3856
<MyText>
3957
Lo datos que muestra cada curso depende netamente de la información que venga, dejo unos

‎src/organisms/CourseList/Boxes/BoxImage.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { isCourseActive } from '../utils'
88
interface ImageBoxProps {
99
backgroundImg: string
1010
title: string
11-
data?: Type.AcademicList
11+
data?: Type.ExtendAcademicList
1212
size?: 'large' | 'small'
1313
m?: string
1414
}
@@ -33,7 +33,6 @@ export function BoxImage({
3333
large: '286px',
3434
small: '197px',
3535
}
36-
3736
return (
3837
<WithRipples enabled={isCourseActive(data?.action?.enabled ?? false, data?.Profile?.id)}>
3938
<Box

‎src/organisms/CourseList/Boxes/BoxTraditional.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { vars } from '@theme'
77
import { isCourseActive } from '../utils'
88
import * as Type from '../types'
99

10-
export const CourseBoxContext = React.createContext<Partial<Type.AcademicList>>({})
10+
export const CourseBoxContext = React.createContext<Partial<Type.ExtendAcademicList>>({})
1111

1212
interface WithRipplesProps {
1313
enabled: boolean
@@ -18,7 +18,7 @@ function WithRipples({ enabled, children }: WithRipplesProps): JSX.Element {
1818
}
1919

2020
interface IBoxTraditional {
21-
data: Type.AcademicList
21+
data: Type.ExtendAcademicList
2222
modalPaymentText?: Type.PaymentText
2323
}
2424

‎src/organisms/CourseList/Boxes/Boxes.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
1-
import { AcademicList, WrapperCoursesProps } from '../types'
1+
import { ExtendAcademicList, WrapperCoursesProps } from '../types'
22
import { BoxTraditional } from './BoxTraditional'
33
import { BoxImage } from './BoxImage'
44

55
interface IBoxes {
66
type: WrapperCoursesProps['typeBox']
77
modalPaymentText: WrapperCoursesProps['modalPaymentText']
8-
data: AcademicList
8+
data: ExtendAcademicList
9+
soonCourse?: WrapperCoursesProps['soonCourse']
910
}
10-
export const Boxes = ({ type = 'TRADITIONAL', data, modalPaymentText }: IBoxes): JSX.Element => {
11-
const common = { data, modalPaymentText }
11+
export const Boxes = ({
12+
type = 'TRADITIONAL',
13+
data,
14+
modalPaymentText,
15+
soonCourse,
16+
}: IBoxes): JSX.Element => {
17+
const common = { data, modalPaymentText, soonCourse }
1218

1319
const commonImg = {
1420
data,

‎src/organisms/CourseList/CourseList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export function CourseList({
3333
m={m}
3434
w="100%"
3535
>
36-
{courses?.map((course: Type.AcademicList) => (
36+
{courses?.map((course: Type.ExtendAcademicList) => (
3737
<Boxes data={course} type={typeBox} modalPaymentText={modalPaymentText} key={course.id} />
3838
))}
3939
</Box>

‎src/organisms/CourseList/components/Header.tsx‎

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,38 @@ import { Profile } from '@icons'
99
const STUDENT = 4
1010

1111
export function Header(): JSX.Element {
12-
const { background, labels, logo, logoAlt, Profile: profile } = React.useContext(CourseBoxContext)
12+
const {
13+
background,
14+
labels,
15+
logo,
16+
logoAlt,
17+
Profile: profile,
18+
soonCourse,
19+
} = React.useContext(CourseBoxContext)
1320

1421
return (
1522
<Box
1623
as="header"
17-
bgImg={background}
1824
bgPos="center"
1925
bgSize="cover"
2026
height="8.75rem"
2127
borderBottom={vars('borders-light')}
2228
pos="relative"
29+
_before={{
30+
content: '""',
31+
position: 'absolute',
32+
top: 0,
33+
left: 0,
34+
width: '100%',
35+
height: '100%',
36+
backgroundImage: background,
37+
backgroundSize: 'cover',
38+
backgroundPosition: 'center',
39+
opacity: soonCourse?.show ?? false ? 0.3 : 1,
40+
zIndex: -1,
41+
}}
2342
>
24-
<Box p="1rem">
43+
<Box p="1rem" display="flex" gap="0.625rem">
2544
{profile?.id !== STUDENT && (
2645
<Label bg={vars('colors-neutral-white')} m="0 0 .625rem 0">
2746
<Flex>
@@ -42,6 +61,11 @@ export function Header(): JSX.Element {
4261
))}
4362
</Stack>
4463
)}
64+
{soonCourse?.show && soonCourse?.text && (
65+
<Stack direction="row" spacing=".625rem" wrap="wrap">
66+
<Label>{soonCourse.text}</Label>
67+
</Stack>
68+
)}
4569
</Box>
4670

4771
{logo !== undefined && logo.length > 0 && (

‎src/organisms/CourseList/types.d.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { AcademicBox } from '@eclass/api'
22

3-
export type AcademicList = AcademicBox
3+
export type ExtendAcademicList = AcademicBox & {
4+
show?: true
5+
text?: string
6+
}
47

58
interface PaymentText {
69
title: string
@@ -30,6 +33,7 @@ export interface WrapperCoursesProps {
3033

3134
/** Especificación de tipo de caja curso a mostrar. Por default se muestra el tipo TRADITIONAL */
3235
typeBox?: 'TRADITIONAL' | 'TRADITIONAL_LANDSCAPE' | 'IMAGE_LARGE' | 'IMAGE_SMALL'
36+
soonCourse?: Sooncourse
3337
}
3438

3539
export interface FooterProps {

‎src/organisms/CourseList/utils/dataFake.ts‎

Lines changed: 61 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const dataStates: any = {
9494
},
9595
inscripcionFutura: {
9696
...dataBase,
97-
id: 1,
97+
id: 2,
9898
hasFinanzeFreezed: false,
9999
status: {
100100
...dataBase.status,
@@ -125,7 +125,7 @@ export const dataStates: any = {
125125
},
126126
inscripcionFinalizo: {
127127
...dataBase,
128-
id: 1,
128+
id: 3,
129129
hasFinanzeFreezed: false,
130130
status: {
131131
...dataBase.status,
@@ -158,7 +158,7 @@ export const dataStates: any = {
158158
...dataBase,
159159
logo: 'https://cdn.eclass.com/img/productos/logos/logo-utec-square.jpg',
160160
background: 'https://cdn.eclass.com/img/cursos/default1.png',
161-
id: 2,
161+
id: 4,
162162
hasFinanzeFreezed: false,
163163
status: {
164164
...dataBase.status,
@@ -190,7 +190,7 @@ export const dataStates: any = {
190190
},
191191
preInscripcion2: {
192192
...dataBase,
193-
id: 3,
193+
id: 5,
194194
hasFinanzeFreezed: false,
195195
logo: '',
196196
status: {
@@ -224,7 +224,7 @@ export const dataStates: any = {
224224
inscripcion: {
225225
...dataBase,
226226
background: 'https://cdn.eclass.com/img/cursos/default2.png',
227-
id: 4,
227+
id: 6,
228228
hasFinanzeFreezed: false,
229229
status: {
230230
...dataBase.status,
@@ -255,7 +255,7 @@ export const dataStates: any = {
255255
},
256256
inscripcion2: {
257257
...dataBase,
258-
id: 5,
258+
id: 7,
259259
hasFinanzeFreezed: false,
260260
status: {
261261
...dataBase.status,
@@ -290,7 +290,7 @@ export const dataStates: any = {
290290
},
291291
noDisponible: {
292292
...dataBase,
293-
id: 6,
293+
id: 8,
294294
hasFinanzeFreezed: false,
295295
logo: '',
296296
background: 'https://cdn.eclass.com/img/cursos/default2.png',
@@ -327,7 +327,7 @@ export const dataStates: any = {
327327
...dataBase,
328328
background: 'https://cdn.eclass.com/img/cursos/default3.png',
329329
logo: 'https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg',
330-
id: 7,
330+
id: 9,
331331
hasFinanzeFreezed: false,
332332
status: {
333333
...dataBase.status,
@@ -361,7 +361,7 @@ export const dataStates: any = {
361361
...dataBase,
362362
background: 'https://cdn.eclass.com/img/cursos/default3.png',
363363
logo: 'https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg',
364-
id: 57,
364+
id: 10,
365365
hasFinanzeFreezed: false,
366366
Profile: {
367367
id: 1,
@@ -397,7 +397,7 @@ export const dataStates: any = {
397397
},
398398
activado: {
399399
...dataBase,
400-
id: 8,
400+
id: 11,
401401
hasFinanzeFreezed: false,
402402
status: {
403403
...dataBase.status,
@@ -437,7 +437,7 @@ export const dataStates: any = {
437437
},
438438
sinEstudiar: {
439439
...dataBase,
440-
id: 9,
440+
id: 12,
441441
hasFinanzeFreezed: false,
442442
logo: '',
443443
status: {
@@ -478,7 +478,7 @@ export const dataStates: any = {
478478
},
479479
sinEstudiar2: {
480480
...dataBase,
481-
id: 10,
481+
id: 13,
482482
hasFinanzeFreezed: false,
483483
background: 'https://cdn.eclass.com/img/cursos/default2.png',
484484
status: {
@@ -519,7 +519,7 @@ export const dataStates: any = {
519519
},
520520
sinEstudiar3: {
521521
...dataBase,
522-
id: 11,
522+
id: 14,
523523
hasFinanzeFreezed: false,
524524
status: {
525525
...dataBase.status,
@@ -560,7 +560,7 @@ export const dataStates: any = {
560560
sinEstudiar4: {
561561
...dataBase,
562562
logo: 'https://cdn.eclass.com/img/productos/logos/logo-uandes-square.jpg',
563-
id: 12,
563+
id: 15,
564564
hasFinanzeFreezed: false,
565565
status: {
566566
...dataBase.status,
@@ -600,7 +600,7 @@ export const dataStates: any = {
600600
},
601601
continuar: {
602602
...dataBase,
603-
id: 13,
603+
id: 16,
604604
hasFinanzeFreezed: true,
605605
status: {
606606
...dataBase.status,
@@ -641,7 +641,7 @@ export const dataStates: any = {
641641
},
642642
continuar2: {
643643
...dataBase,
644-
id: 14,
644+
id: 17,
645645
hasFinanzeFreezed: false,
646646
status: {
647647
...dataBase.status,
@@ -681,7 +681,7 @@ export const dataStates: any = {
681681
pendiente: {
682682
...dataBase,
683683
background: 'https://cdn.eclass.com/img/cursos/default3.png',
684-
id: 15,
684+
id: 18,
685685
hasFinanzeFreezed: false,
686686
status: {
687687
...dataBase.status,
@@ -718,7 +718,7 @@ export const dataStates: any = {
718718
},
719719
terminado: {
720720
...dataBase,
721-
id: 16,
721+
id: 19,
722722
hasFinanzeFreezed: false,
723723
status: {
724724
...dataBase.status,
@@ -758,7 +758,7 @@ export const dataStates: any = {
758758
terminado2: {
759759
...dataBase,
760760
logo: 'https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg',
761-
id: 17,
761+
id: 20,
762762
hasFinanzeFreezed: false,
763763
Profile: {
764764
id: 1,
@@ -801,7 +801,7 @@ export const dataStates: any = {
801801
},
802802
terminado3: {
803803
...dataBase,
804-
id: 18,
804+
id: 21,
805805
hasFinanzeFreezed: false,
806806
logo: '',
807807
status: {
@@ -837,6 +837,47 @@ export const dataStates: any = {
837837
},
838838
labels: [],
839839
},
840+
proximamente: {
841+
...dataBase,
842+
id: 22,
843+
hasFinanzeFreezed: false,
844+
status: {
845+
...dataBase.status,
846+
id: 3,
847+
name: 'inscripcion',
848+
},
849+
progress: {
850+
...dataBase.progress,
851+
label: 'Tu curso iniciara el Lunes 16 de Enero de 2023',
852+
icon: 'schedule',
853+
},
854+
dateStatus: {
855+
...dataBase.dateStatus,
856+
hasDates: true,
857+
},
858+
information: [
859+
{
860+
icon: 'certificate',
861+
text: 'Certificado por ACHS',
862+
href: '',
863+
},
864+
],
865+
action: {
866+
...dataBase.action,
867+
text: 'Ver informacion del curso',
868+
targetBlank: true,
869+
},
870+
soonCourse: {
871+
show: true,
872+
text: 'Próximamente',
873+
},
874+
labels: [
875+
{
876+
id: 'OBLIGATORY',
877+
text: 'Obligatorio',
878+
},
879+
],
880+
},
840881
}
841882

842883
export const dataFake = Object.keys(dataStates).map((key: string) => dataStates[key])

0 commit comments

Comments
 (0)