feat(PDYE-994): se agrega caja curso futura con validaciones (#653)

Eriold · Daniel Montoya · web-flow · commit d73738c3d44f · 2024-12-02T12:40:58.000-05:00
Co-authored-by: Daniel Montoya &lt;daniel.montoya@eclass.cl&gt;
diff --git a/src/documentation/pages/Organisms/CourseList.tsx b/src/documentation/pages/Organisms/CourseList.tsx
@@ -34,6 +34,24 @@ export const ViewCourseList = (): JSX.Element => {
       <Code text='<CourseList courses={courses} typeBox="IMAGE_SMALL" />' />
       <CourseList courses={[dataFake[18]]} typeBox="IMAGE_SMALL" />
 
+      <MyTittle>Caja curso con fecha futura</MyTittle>
+      <MyText>
+        Si el curso tiene una fecha futura, se muestra el contenido de la imagen opacada y un aviso
+        ajustado a la traduccion de proximamante.
+      </MyText>
+      <Code
+        text="//Formato adicional
+soonCourse: {
+show: true,
+text: 'Próximamente',
+}"
+      />
+      <MyText>
+        El componente funciona tanto para back como para front, se agrego con la intencion de que a
+        futuro pueda controlarse directamente desde back si se requiere
+      </MyText>
+      <CourseList courses={[dataFake[21]]} typeBox="TRADITIONAL" />
+
       <MyTittle>Datos a mostrar</MyTittle>
       <MyText>
         Lo datos que muestra cada curso depende netamente de la información que venga, dejo unos
diff --git a/src/organisms/CourseList/Boxes/BoxImage.tsx b/src/organisms/CourseList/Boxes/BoxImage.tsx
@@ -8,7 +8,7 @@ import { isCourseActive } from '../utils'
 interface ImageBoxProps {
   backgroundImg: string
   title: string
-  data?: Type.AcademicList
+  data?: Type.ExtendAcademicList
   size?: 'large' | 'small'
   m?: string
 }
@@ -33,7 +33,6 @@ export function BoxImage({
     large: '286px',
     small: '197px',
   }
-
   return (
     <WithRipples enabled={isCourseActive(data?.action?.enabled ?? false, data?.Profile?.id)}>
       <Box
diff --git a/src/organisms/CourseList/Boxes/BoxTraditional.tsx b/src/organisms/CourseList/Boxes/BoxTraditional.tsx
@@ -7,7 +7,7 @@ import { vars } from '@theme'
 import { isCourseActive } from '../utils'
 import * as Type from '../types'
 
-export const CourseBoxContext = React.createContext<Partial<Type.AcademicList>>({})
+export const CourseBoxContext = React.createContext<Partial<Type.ExtendAcademicList>>({})
 
 interface WithRipplesProps {
   enabled: boolean
@@ -18,7 +18,7 @@ function WithRipples({ enabled, children }: WithRipplesProps): JSX.Element {
 }
 
 interface IBoxTraditional {
-  data: Type.AcademicList
+  data: Type.ExtendAcademicList
   modalPaymentText?: Type.PaymentText
 }
 
diff --git a/src/organisms/CourseList/Boxes/Boxes.tsx b/src/organisms/CourseList/Boxes/Boxes.tsx
@@ -1,14 +1,20 @@
-import { AcademicList, WrapperCoursesProps } from '../types'
+import { ExtendAcademicList, WrapperCoursesProps } from '../types'
 import { BoxTraditional } from './BoxTraditional'
 import { BoxImage } from './BoxImage'
 
 interface IBoxes {
   type: WrapperCoursesProps['typeBox']
   modalPaymentText: WrapperCoursesProps['modalPaymentText']
-  data: AcademicList
+  data: ExtendAcademicList
+  soonCourse?: WrapperCoursesProps['soonCourse']
 }
-export const Boxes = ({ type = 'TRADITIONAL', data, modalPaymentText }: IBoxes): JSX.Element => {
-  const common = { data, modalPaymentText }
+export const Boxes = ({
+  type = 'TRADITIONAL',
+  data,
+  modalPaymentText,
+  soonCourse,
+}: IBoxes): JSX.Element => {
+  const common = { data, modalPaymentText, soonCourse }
 
   const commonImg = {
     data,
diff --git a/src/organisms/CourseList/CourseList.tsx b/src/organisms/CourseList/CourseList.tsx
@@ -33,7 +33,7 @@ export function CourseList({
       m={m}
       w="100%"
     >
-      {courses?.map((course: Type.AcademicList) => (
+      {courses?.map((course: Type.ExtendAcademicList) => (
         <Boxes data={course} type={typeBox} modalPaymentText={modalPaymentText} key={course.id} />
       ))}
     </Box>
diff --git a/src/organisms/CourseList/components/Header.tsx b/src/organisms/CourseList/components/Header.tsx
@@ -9,19 +9,38 @@ import { Profile } from '@icons'
 const STUDENT = 4
 
 export function Header(): JSX.Element {
-  const { background, labels, logo, logoAlt, Profile: profile } = React.useContext(CourseBoxContext)
+  const {
+    background,
+    labels,
+    logo,
+    logoAlt,
+    Profile: profile,
+    soonCourse,
+  } = React.useContext(CourseBoxContext)
 
   return (
     <Box
       as="header"
-      bgImg={background}
       bgPos="center"
       bgSize="cover"
       height="8.75rem"
       borderBottom={vars('borders-light')}
       pos="relative"
+      _before={{
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        backgroundImage: background,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        opacity: soonCourse?.show ?? false ? 0.3 : 1,
+        zIndex: -1,
+      }}
     >
-      <Box p="1rem">
+      <Box p="1rem" display="flex" gap="0.625rem">
         {profile?.id !== STUDENT && (
           <Label bg={vars('colors-neutral-white')} m="0 0 .625rem 0">
             <Flex>
@@ -42,6 +61,11 @@ export function Header(): JSX.Element {
             ))}
           </Stack>
         )}
+        {soonCourse?.show && soonCourse?.text && (
+          <Stack direction="row" spacing=".625rem" wrap="wrap">
+            <Label>{soonCourse.text}</Label>
+          </Stack>
+        )}
       </Box>
 
       {logo !== undefined && logo.length > 0 && (
diff --git a/src/organisms/CourseList/types.d.ts b/src/organisms/CourseList/types.d.ts
@@ -1,6 +1,9 @@
 import { AcademicBox } from '@eclass/api'
 
-export type AcademicList = AcademicBox
+export type ExtendAcademicList = AcademicBox & {
+  show?: true
+  text?: string
+}
 
 interface PaymentText {
   title: string
@@ -30,6 +33,7 @@ export interface WrapperCoursesProps {
 
   /** Especificación de tipo de caja curso a mostrar. Por default se muestra el tipo TRADITIONAL */
   typeBox?: 'TRADITIONAL' | 'TRADITIONAL_LANDSCAPE' | 'IMAGE_LARGE' | 'IMAGE_SMALL'
+  soonCourse?: Sooncourse
 }
 
 export interface FooterProps {
diff --git a/src/organisms/CourseList/utils/dataFake.ts b/src/organisms/CourseList/utils/dataFake.ts
@@ -94,7 +94,7 @@ export const dataStates: any = {
   },
   inscripcionFutura: {
     ...dataBase,
-    id: 1,
+    id: 2,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -125,7 +125,7 @@ export const dataStates: any = {
   },
   inscripcionFinalizo: {
     ...dataBase,
-    id: 1,
+    id: 3,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -158,7 +158,7 @@ export const dataStates: any = {
     ...dataBase,
     logo: 'https://cdn.eclass.com/img/productos/logos/logo-utec-square.jpg',
     background: 'https://cdn.eclass.com/img/cursos/default1.png',
-    id: 2,
+    id: 4,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -190,7 +190,7 @@ export const dataStates: any = {
   },
   preInscripcion2: {
     ...dataBase,
-    id: 3,
+    id: 5,
     hasFinanzeFreezed: false,
     logo: '',
     status: {
@@ -224,7 +224,7 @@ export const dataStates: any = {
   inscripcion: {
     ...dataBase,
     background: 'https://cdn.eclass.com/img/cursos/default2.png',
-    id: 4,
+    id: 6,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -255,7 +255,7 @@ export const dataStates: any = {
   },
   inscripcion2: {
     ...dataBase,
-    id: 5,
+    id: 7,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -290,7 +290,7 @@ export const dataStates: any = {
   },
   noDisponible: {
     ...dataBase,
-    id: 6,
+    id: 8,
     hasFinanzeFreezed: false,
     logo: '',
     background: 'https://cdn.eclass.com/img/cursos/default2.png',
@@ -327,7 +327,7 @@ export const dataStates: any = {
     ...dataBase,
     background: 'https://cdn.eclass.com/img/cursos/default3.png',
     logo: 'https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg',
-    id: 7,
+    id: 9,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -361,7 +361,7 @@ export const dataStates: any = {
     ...dataBase,
     background: 'https://cdn.eclass.com/img/cursos/default3.png',
     logo: 'https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg',
-    id: 57,
+    id: 10,
     hasFinanzeFreezed: false,
     Profile: {
       id: 1,
@@ -397,7 +397,7 @@ export const dataStates: any = {
   },
   activado: {
     ...dataBase,
-    id: 8,
+    id: 11,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -437,7 +437,7 @@ export const dataStates: any = {
   },
   sinEstudiar: {
     ...dataBase,
-    id: 9,
+    id: 12,
     hasFinanzeFreezed: false,
     logo: '',
     status: {
@@ -478,7 +478,7 @@ export const dataStates: any = {
   },
   sinEstudiar2: {
     ...dataBase,
-    id: 10,
+    id: 13,
     hasFinanzeFreezed: false,
     background: 'https://cdn.eclass.com/img/cursos/default2.png',
     status: {
@@ -519,7 +519,7 @@ export const dataStates: any = {
   },
   sinEstudiar3: {
     ...dataBase,
-    id: 11,
+    id: 14,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -560,7 +560,7 @@ export const dataStates: any = {
   sinEstudiar4: {
     ...dataBase,
     logo: 'https://cdn.eclass.com/img/productos/logos/logo-uandes-square.jpg',
-    id: 12,
+    id: 15,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -600,7 +600,7 @@ export const dataStates: any = {
   },
   continuar: {
     ...dataBase,
-    id: 13,
+    id: 16,
     hasFinanzeFreezed: true,
     status: {
       ...dataBase.status,
@@ -641,7 +641,7 @@ export const dataStates: any = {
   },
   continuar2: {
     ...dataBase,
-    id: 14,
+    id: 17,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -681,7 +681,7 @@ export const dataStates: any = {
   pendiente: {
     ...dataBase,
     background: 'https://cdn.eclass.com/img/cursos/default3.png',
-    id: 15,
+    id: 18,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -718,7 +718,7 @@ export const dataStates: any = {
   },
   terminado: {
     ...dataBase,
-    id: 16,
+    id: 19,
     hasFinanzeFreezed: false,
     status: {
       ...dataBase.status,
@@ -758,7 +758,7 @@ export const dataStates: any = {
   terminado2: {
     ...dataBase,
     logo: 'https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg',
-    id: 17,
+    id: 20,
     hasFinanzeFreezed: false,
     Profile: {
       id: 1,
@@ -801,7 +801,7 @@ export const dataStates: any = {
   },
   terminado3: {
     ...dataBase,
-    id: 18,
+    id: 21,
     hasFinanzeFreezed: false,
     logo: '',
     status: {
@@ -837,6 +837,47 @@ export const dataStates: any = {
     },
     labels: [],
   },
+  proximamente: {
+    ...dataBase,
+    id: 22,
+    hasFinanzeFreezed: false,
+    status: {
+      ...dataBase.status,
+      id: 3,
+      name: 'inscripcion',
+    },
+    progress: {
+      ...dataBase.progress,
+      label: 'Tu curso iniciara el Lunes 16 de Enero de 2023',
+      icon: 'schedule',
+    },
+    dateStatus: {
+      ...dataBase.dateStatus,
+      hasDates: true,
+    },
+    information: [
+      {
+        icon: 'certificate',
+        text: 'Certificado por ACHS',
+        href: '',
+      },
+    ],
+    action: {
+      ...dataBase.action,
+      text: 'Ver informacion del curso',
+      targetBlank: true,
+    },
+    soonCourse: {
+      show: true,
+      text: 'Próximamente',
+    },
+    labels: [
+      {
+        id: 'OBLIGATORY',
+        text: 'Obligatorio',
+      },
+    ],
+  },
 }
 
 export const dataFake = Object.keys(dataStates).map((key: string) => dataStates[key])

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ import { vars } from '@theme'`
`7`	`7`	`import { isCourseActive } from '../utils'`
`8`	`8`	`import * as Type from '../types'`
`9`	`9`
`10`		`-export const CourseBoxContext = React.createContext<Partial<Type.AcademicList>>({})`
	`10`	`+export const CourseBoxContext = React.createContext<Partial<Type.ExtendAcademicList>>({})`
`11`	`11`
`12`	`12`	`interface WithRipplesProps {`
`13`	`13`	`enabled: boolean`
`@@ -18,7 +18,7 @@ function WithRipples({ enabled, children }: WithRipplesProps): JSX.Element {`
`18`	`18`	`}`
`19`	`19`
`20`	`20`	`interface IBoxTraditional {`
`21`		`- data: Type.AcademicList`
	`21`	`+ data: Type.ExtendAcademicList`
`22`	`22`	`modalPaymentText?: Type.PaymentText`
`23`	`23`	`}`
`24`	`24`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export function CourseList({`
`33`	`33`	`m={m}`
`34`	`34`	`w="100%"`
`35`	`35`	`>`
`36`		`- {courses?.map((course: Type.AcademicList) => (`
	`36`	`+ {courses?.map((course: Type.ExtendAcademicList) => (`
`37`	`37`	`<Boxes data={course} type={typeBox} modalPaymentText={modalPaymentText} key={course.id} />`
`38`	`38`	`))}`
`39`	`39`	`</Box>`