feat: create subscription confirmed modal

wp-digital-solutions · Jun 9, 2024 · efabebd · efabebd
1 parent 446c63b
commit efabebd
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 5 deletions.
diff --git a/public/assets/subscription-confirmed-image.webp b/public/assets/subscription-confirmed-image.webp
diff --git a/src/components/forms/composites/NewRegistrationForm/index.tsx b/src/components/forms/composites/NewRegistrationForm/index.tsx
@@ -19,6 +19,7 @@ import {
   StepSeparator,
   StepStatus,
   Text,
+  useDisclosure,
   useSteps,
   VStack,
 } from '@chakra-ui/react';
@@ -32,6 +33,7 @@ import { Checkbox } from '@/components/forms/atomics/Checkbox';
 import { Input } from '@/components/forms/atomics/Input';
 import { InputMasked } from '@/components/forms/atomics/InputMasked';
 import { Radio } from '@/components/forms/atomics/Radio';
+import { ModalRegistrationConfirmed } from '@/components/modals/ModalRegistrationConfirmed';
 import { registerUserParticipantsServices } from '@/services/registerUserParticipantsServices';
 import { dayjs } from '@/utils/dayjs';
 import { jsonToFormData } from '@/utils/jsonToFormData';
@@ -40,6 +42,8 @@ import { shalomQRCode } from '@/utils/shalomQRcode';
 
 import { InputFile } from '../../atomics/InputFile';
 
+type ParticipantType = 'SERVO' | 'PARTICIPANTE';
+
 type SignInFormData = {
   fullName: string;
   email: string;
@@ -245,6 +249,7 @@ const FormSchema = z
 
 export function NewRegistrationForm() {
   const EVENT_ID = String(process.env.NEXT_PUBLIC_EVENT_ID);
+  const modalConfirmed = useDisclosure();
 
   const steps = [
     {
@@ -276,6 +281,7 @@ export function NewRegistrationForm() {
     });
   const { errors } = formState;
   const documentType = watch('documentType');
+  const typeValue = watch('type');
 
   const hasError = useMemo(() => {
     for (const key in errors) {
@@ -296,8 +302,9 @@ export function NewRegistrationForm() {
     registerUserParticipantsServices()
       .create(formData)
       .then(() => {
+        reset();
         toast.success('Inscrição realizada com sucesso');
-        // reset();
+        modalConfirmed.onOpen();
       })
       .catch((err: AxiosError) => {
         if (err.response?.status === 409) {
@@ -570,8 +577,8 @@ export function NewRegistrationForm() {
                   <Box>
                     <Text>
                       Participantes: {numberToCurrency(validTicket?.price)}
+                      <Text>Servos: R$ 220,00</Text>
                     </Text>
-                    <Text>Servos: R$ 220,00</Text>
                   </Box>
                   <Text mt="1rem">
                     <Text fontWeight="medium">Chave pix:</Text>{' '}
@@ -638,9 +645,8 @@ export function NewRegistrationForm() {
                 target="_blank"
                 href="https://link.ton.com.br/?id=d67302ce-f1c7-43e6-a13d-9be794710263"
               >
-                <Text color="blue" textDecoration="underline">
-                  R$ 234,52 - Pagar no cartão (Servos)
-                </Text>
+                R$ 234,52 - Pagar no cartão (Servos)
+                <Text color="blue" textDecoration="underline"></Text>
               </Link>
             </Box>
             <br />
@@ -700,6 +706,13 @@ export function NewRegistrationForm() {
         <strong>ATENÇÃO:</strong> A idade Mínima para inscrição de participante
         é de 14 anos e a Máxima é de 30 anos.
       </Text>
+
+      <ModalRegistrationConfirmed
+        isOpen={modalConfirmed.isOpen}
+        onClose={modalConfirmed.onClose}
+        onOpen={modalConfirmed.onOpen}
+        type={typeValue as ParticipantType}
+      />
     </Flex>
   );
 

diff --git a/src/components/modals/ModalRegistrationConfirmed/index.tsx b/src/components/modals/ModalRegistrationConfirmed/index.tsx
@@ -0,0 +1,79 @@
+import { useRef } from 'react';
+import { RiMoneyDollarCircleLine, RiWhatsappLine } from 'react-icons/ri';
+
+import {
+  Box,
+  Button,
+  Icon,
+  Image,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Tooltip,
+  useDisclosure,
+} from '@chakra-ui/react';
+
+import subscriptionConfirmedImage from '../../../../public/assets/subscription-confirmed-image.webp';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onOpen: () => void;
+  type: 'SERVO' | 'PARTICIPANTE';
+}
+
+export function ModalRegistrationConfirmed({
+  isOpen,
+  onClose,
+  onOpen,
+  type,
+}: Props) {
+  // const { isOpen, onOpen, onClose } = useDisclosure();
+  const finalRef = useRef(null);
+
+  return (
+    <>
+      <Modal finalFocusRef={finalRef} isOpen={isOpen} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Inscrição Confirmada!!!🎉</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Box>
+              <Image
+                src={subscriptionConfirmedImage.src}
+                alt="Imagem de inscrição confirmada"
+                w="100%"
+              />
+            </Box>
+          </ModalBody>
+
+          <ModalFooter>
+            <Stack direction="row" width="100%" justify="space-between">
+              <Button onClick={onClose}>Fechar</Button>
+              <Button
+                onClick={handleOpenLink}
+                colorScheme="green"
+                leftIcon={<RiWhatsappLine />}
+              >
+                Entrar no Grupo
+              </Button>
+            </Stack>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+
+  function handleOpenLink() {
+    const servantUrl = 'https://chat.whatsapp.com/JxOldQVBSnlH9xsnceoa16';
+    const participantUrl = 'https://chat.whatsapp.com/E86yx3zd5Ue8X7EdBvWfsD';
+    const finalUrl = type === 'PARTICIPANTE' ? participantUrl : servantUrl;
+    window.open(finalUrl, '_blank');
+  }
+}