fix(PDYE-2075): modal para linkedin y google review

src/atoms/Icons/Star.tsx

@@ -0,0 +1,16 @@
+import { Base, BaseProps } from './Base'
+
+export function Star(props: BaseProps): JSX.Element {
+  return (
+    <Base viewBox="0 0 16px 16px" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M8.464 12.255a1 1 0 0 0-.927 0l-2.452 1.282a1 1 0 0 1-1.45-1.053l.462-2.729a1 1 0 0 0-.286-.881L1.833 6.938a1 1 0 0 1 .554-1.704l2.738-.404a1 1 0 0 0 .75-.545l1.23-2.48a1 1 0 0 1 1.792 0l1.23 2.48a1 1 0 0 0 .75.545l2.738.404a1 1 0 0 1 .553 1.704l-1.977 1.936a1 1 0 0 0-.287.881l.462 2.73a1 1 0 0 1-1.45 1.053l-2.452-1.284Z"
+        clipRule="evenodd"
+      />
+    </Base>
+  )
+}
+
+Star.displayName = 'Star'

src/atoms/Icons/index.tsx

@@ -14,6 +14,7 @@ export * from './Multimedia'
 export * from './Profile'
 export * from './Remote'
 export * from './Schedule'
+export * from './Star'
 export * from './Time'
 export * from './TinyAlertInfo'
 export * from './TinyAlertError'

src/index.ts

@@ -36,6 +36,7 @@ export { Eventos } from './organisms/Events'
 export { Resources } from './organisms/Resources'
 export { CalendarDropdown, EventsList } from './organisms/Calendar'
 export { UserDropdown } from './organisms/User'
+export { ShareAndReviewModal } from './organisms/LinkedinAndReview'
 export type { AccesibleProfileMenuProps, ProfileMenuItem } from './organisms/User'
 
 // Tema

src/organisms/LinkedinAndReview/ShareAndReviewModal.tsx

@@ -0,0 +1,108 @@
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalContentProps,
+  IconButton,
+  IconButtonProps,
+  Flex,
+  FlexProps,
+} from '@chakra-ui/react'
+import { useEffect, useState } from 'react'
+
+import { vars } from '@theme'
+
+import { CustomCloseIcon } from './components/CustomCloseIcon'
+import { InitialShareContent } from './components/InitialShareContent'
+import { AfterShareContent } from './components/AfterShareContent'
+
+const StyledModalContent = ModalContent as React.FC<ModalContentProps>
+const StyledIconButton = IconButton as React.FC<IconButtonProps>
+const StyledFlex = Flex as React.FC<FlexProps>
+
+export interface ShareAndReviewProps {
+  isOpen: boolean
+  onClose: () => void
+  onContinue?: () => void
+  onLeaveReview?: () => void
+}
+
+export const ShareAndReviewModal = ({
+  isOpen,
+  onClose,
+  onContinue,
+  onLeaveReview,
+}: ShareAndReviewProps): JSX.Element => {
+  const [hasClickedLinkedin, setHasClickedLinkedin] = useState(false)
+
+  // Resetear el estado cada vez que se abre o cierra la modal
+  useEffect(() => {
+    if (!isOpen) {
+      setHasClickedLinkedin(false)
+    }
+  }, [isOpen])
+
+  const handleLinkedinClick: () => void = () => {
+    // 1. Ejecutamos la acción original de LinkedIn (abrir la nueva pestaña)
+    if (onContinue) {
+      onContinue()
+    }
+
+    // 2. Aplicamos un pequeño timeout (ej: 400ms) para reemplazar el botón por el texto
+    // Esto da tiempo a que se registre la acción antes de cambiar la UI visualmente
+    setTimeout(() => {
+      setHasClickedLinkedin(true)
+    }, 400)
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} blockScrollOnMount={false} isCentered>
+      <ModalOverlay />
+
+      <StyledModalContent
+        alignSelf="center"
+        maxW="471px"
+        marginInline="16px"
+        borderRadius="8px"
+        p="32px 16px"
+        position="relative"
+        alignItems="center"
+      >
+        <StyledIconButton
+          aria-label="Cerrar"
+          autoFocus={false}
+          bg="transparent"
+          icon={<CustomCloseIcon />}
+          onClick={onClose}
+          variant="ghost"
+          size="sm"
+          h="auto"
+          minW="16px"
+          position="absolute"
+          top="16px"
+          right="16px"
+          _hover={{
+            background: 'none',
+          }}
+          _focus={{
+            boxShadow: 'none',
+          }}
+          _focusVisible={{
+            boxShadow: `0 0 0 3px ${vars('colors-alert-deepSkyBlue')} inset`,
+          }}
+        />
+
+        <StyledFlex direction="column" align="center" textAlign="center" gap="16px">
+          {!hasClickedLinkedin ? (
+            <InitialShareContent
+              handleLinkedinClick={handleLinkedinClick}
+              onLeaveReview={onLeaveReview}
+            />
+          ) : (
+            <AfterShareContent onClose={onClose} onLeaveReview={onLeaveReview} />
+          )}
+        </StyledFlex>
+      </StyledModalContent>
+    </Modal>
+  )
+}

src/organisms/LinkedinAndReview/components/AfterShareContent.tsx

@@ -0,0 +1,70 @@
+import { Text, TextProps, Flex, FlexProps, Image, ImageProps } from '@chakra-ui/react'
+
+import { BtnLink, BtnPrimary } from '@molecules'
+import { vars } from '@theme'
+
+import { Star } from '@/atoms/Icons'
+
+const StyledImage = Image as React.FC<ImageProps>
+const StyledFlex = Flex as React.FC<FlexProps>
+const StyledText = Text as React.FC<TextProps>
+
+export interface AfterShareContentProps {
+  onClose: () => void
+  onLeaveReview?: () => void
+}
+
+export const AfterShareContent = ({
+  onClose,
+  onLeaveReview,
+}: AfterShareContentProps): JSX.Element => {
+  return (
+    <StyledFlex
+      flexDir="column"
+      alignItems="center"
+      gap="16px"
+      sx={{
+        button: {
+          svg: {
+            m: '0',
+          },
+        },
+        '.linkButton': {
+          p: '0',
+        },
+      }}
+    >
+      <StyledImage
+        w="70px"
+        h="70px"
+        alt="cotillón de celebración"
+        src="https://cdn.eclass.com/vendors/apps/front_v8/assets/Common/celebration.webp"
+      />
+      <StyledText
+        as="h6"
+        fontSize="xl"
+        fontWeight="bold"
+        color={vars('colors-neutral-darkCharcoal')}
+        m="0"
+      >
+        ¿Ya lo compartiste en LinkedIn?
+      </StyledText>
+      <StyledText
+        fontSize="md"
+        fontWeight="400"
+        color={vars('colors-neutral-darkCharcoal')}
+        p="0"
+        m="0"
+      >
+        <strong>Ahora cuéntanos qué tal fue aprender con nosotros.</strong> Tu opinión ayuda a otros
+        como tú a dar el primer paso.
+      </StyledText>
+      <BtnPrimary onClick={onLeaveReview} leftIcon={<Star color={vars('colors-neutral-white')} />}>
+        Dejar mi opinión
+      </BtnPrimary>
+      <BtnLink as="button" onClick={onClose}>
+        Quizás más tarde
+      </BtnLink>
+    </StyledFlex>
+  )
+}