From f3f92121e507457f5a370f3e050945d4b6acb22b Mon Sep 17 00:00:00 2001 From: Wellington Braga Date: Thu, 25 Jan 2024 08:21:06 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20Cria=C3=A7=C3=A3o=20da=20t?= =?UTF-8?q?ela=20de=20confirma=C3=A7=C3=A3o=20de=20chamado?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 6 +- package.json | 6 +- .../(app)/(form)/confirmar-chamado/page.tsx | 10 +- src/app/(app)/(form)/template.tsx | 65 +++--- src/app/(app)/chamado/[id]/page.tsx | 5 + src/app/(app)/chamados/page.tsx | 2 +- src/app/(app)/pesquisa/page.tsx | 4 +- src/app/(app)/solicitacoes/page.tsx | 2 +- src/app/layout.tsx | 7 +- src/components/Fieldset/index.tsx | 36 ++-- src/components/Fieldset/styles.ts | 57 +++--- src/components/Form/FormButtons/index.tsx | 7 +- src/components/Modal/index.tsx | 26 --- src/components/Modal/styles.tsx | 43 ---- src/components/Modals/BaseModal/index.tsx | 129 ++++++++++++ src/components/Modals/BaseModal/styles.tsx | 1 + src/components/Modals/ConfirmModal/index.tsx | 103 ++++++++++ src/components/Modals/ConfirmModal/styles.tsx | 70 +++++++ src/components/Modals/index.tsx | 2 + .../common/Buttons/BackButton/styles.ts | 2 +- src/components/index.tsx | 2 +- .../abrir-chamado/confirmar-chamado/index.tsx | 192 +++++++----------- .../abrir-chamado/confirmar-chamado/styles.ts | 53 +---- src/screens/abrir-chamado/index.tsx | 27 +++ src/screens/chamado/index.tsx | 19 +- src/styles/common/index.tsx | 2 +- src/styles/globals.tsx | 3 + src/utils/contexts/TypeCall.tsx | 119 ----------- src/utils/functions/dataFormatter/index.ts | 3 + src/utils/functions/index.ts | 2 + src/utils/functions/resetForm/index.tsx | 15 ++ src/utils/index.tsx | 2 +- src/utils/{contexts => stores}/AppContext.tsx | 0 src/utils/{contexts => stores}/index.tsx | 2 +- src/utils/stores/useModal/index.ts | 17 ++ 35 files changed, 594 insertions(+), 447 deletions(-) create mode 100644 src/app/(app)/chamado/[id]/page.tsx delete mode 100644 src/components/Modal/index.tsx delete mode 100644 src/components/Modal/styles.tsx create mode 100644 src/components/Modals/BaseModal/index.tsx create mode 100644 src/components/Modals/BaseModal/styles.tsx create mode 100644 src/components/Modals/ConfirmModal/index.tsx create mode 100644 src/components/Modals/ConfirmModal/styles.tsx create mode 100644 src/components/Modals/index.tsx delete mode 100644 src/utils/contexts/TypeCall.tsx create mode 100644 src/utils/functions/dataFormatter/index.ts create mode 100644 src/utils/functions/resetForm/index.tsx rename src/utils/{contexts => stores}/AppContext.tsx (100%) rename src/utils/{contexts => stores}/index.tsx (50%) create mode 100644 src/utils/stores/useModal/index.ts diff --git a/.gitignore b/.gitignore index fe1d2660..4fafce9e 100644 --- a/.gitignore +++ b/.gitignore @@ -20,6 +20,7 @@ yarn.lock # misc .DS_Store *.pem +.dccache # debug npm-debug.log* @@ -62,4 +63,7 @@ settings.json *.log storybook-static -coverage/* \ No newline at end of file +coverage/* + +# Snyk +snyk-linux \ No newline at end of file diff --git a/package.json b/package.json index 5f1dfd0d..ec0688b5 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "test-storybook": "test-storybook" }, "dependencies": { + "@phosphor-icons/react": "^2.0.15", "@uidotdev/usehooks": "^2.4.1", "@vercel/analytics": "^1.1.1", "@vercel/speed-insights": "^1.0.2", @@ -34,9 +35,11 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.49.2", "react-hot-toast": "^2.4.1", + "react-modal": "^3.16.1", "sharp": "^0.32.6", "styled-components": "^6.1.0", - "swr": "^2.2.4" + "swr": "^2.2.4", + "zustand": "^4.5.0" }, "devDependencies": { "@babel/eslint-parser": "^7.23.3", @@ -57,6 +60,7 @@ "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "@types/react-modal": "^3.16.3", "@typescript-eslint/eslint-plugin": "^6.4.0", "@typescript-eslint/parser": "^6.11.0", "chromatic": "^10.2.0", diff --git a/src/app/(app)/(form)/confirmar-chamado/page.tsx b/src/app/(app)/(form)/confirmar-chamado/page.tsx index 90d9ec3b..7d79001e 100644 --- a/src/app/(app)/(form)/confirmar-chamado/page.tsx +++ b/src/app/(app)/(form)/confirmar-chamado/page.tsx @@ -1,7 +1,5 @@ -export default function ConfirmDetailsPage() { - return ( -
-

ConfirmDetailsPage

-
- ); +import { ConfirmDetailsPage } from "@/screens/abrir-chamado/confirmar-chamado"; + +export default function ConfirmDetails() { + return ; } diff --git a/src/app/(app)/(form)/template.tsx b/src/app/(app)/(form)/template.tsx index 9055e92d..e0773623 100644 --- a/src/app/(app)/(form)/template.tsx +++ b/src/app/(app)/(form)/template.tsx @@ -4,16 +4,11 @@ import { BackButton } from "@/components"; import { IssuePageContainer } from "@/screens/chamado/styles"; import { Column, Row, TitleComponent } from "@/styles"; import { FormButtons } from "@/components/Form"; -import { ReactNode, useCallback, useMemo } from "react"; +import { ReactNode, useMemo } from "react"; import { usePathname, useRouter } from "next/navigation"; import { FormProvider, useForm } from "react-hook-form"; -import { buildTestIds } from "@/utils/functions"; -import { - LS_KEY_1_TICKET_RECORD, - LS_KEY_2_TICKET_RECORD, - LS_KEY_3_TICKET_RECORD, - SS_KEY_DATA_WAS_RECOVERY -} from "@/utils/alias"; +import { buildTestIds, resetForm } from "@/utils/functions"; +import { useModalStore } from "@/utils"; interface PageRouterData { page: string; @@ -24,6 +19,7 @@ interface PageRouterData { export interface IOpenTicketForm { resumo: string; descricao: string; + prioridade: "baixa" | "media" | "alta"; data: string; tipo: string; } @@ -31,17 +27,18 @@ export interface IOpenTicketForm { export default function Template({ children }: { children: ReactNode }) { const pathName = usePathname(); const { push, back } = useRouter(); + const shouldOpenModal = useModalStore((state) => state.open); const pagesTitles: PageRouterData[] = [ { page: "/abrir-chamado", title: "O que aconteceu?", hasBackButton: false }, - { - page: "/anexar-midia", - title: "Anexar mídia", - hasBackButton: true - }, + // { + // page: "/anexar-midia", + // title: "Anexar mídia", + // hasBackButton: true + // }, { page: "/confirmar-chamado", title: "Confirmar informações", @@ -49,10 +46,11 @@ export default function Template({ children }: { children: ReactNode }) { } ]; - const actualPage = useMemo( - () => pagesTitles.find((page) => page.page === pathName), - [pathName, pagesTitles] - ); + const idChamado = 2400; + + const actualPage = useMemo(() => { + return pagesTitles.find((page) => page.page === pathName); + }, [pathName, pagesTitles]); const indexPageFinder = useMemo(() => { return pagesTitles.indexOf(actualPage as PageRouterData); @@ -62,24 +60,30 @@ export default function Template({ children }: { children: ReactNode }) { return indexPageFinder === -1 ? "/" : indexPageFinder + 1 >= pagesTitles.length - ? "/" + ? `/chamado/${idChamado}` : pagesTitles[indexPageFinder + 1].page; }, [pagesTitles]); + const previousPageUrl = useMemo(() => { + return indexPageFinder === 0 ? "" : pagesTitles[indexPageFinder - 1].title; + }, [pagesTitles]); + const methods = useForm({ mode: "onChange", - defaultValues: { resumo: "", descricao: "", data: "", tipo: "" }, + defaultValues: { + resumo: "", + descricao: "", + data: "", + tipo: "", + prioridade: "baixa" + }, reValidateMode: "onChange", shouldFocusError: true, progressive: true }); - const resetForm = useCallback(() => { - localStorage.removeItem(LS_KEY_1_TICKET_RECORD); - localStorage.removeItem(LS_KEY_2_TICKET_RECORD); - localStorage.removeItem(LS_KEY_3_TICKET_RECORD); - sessionStorage.removeItem(SS_KEY_DATA_WAS_RECOVERY); - }, [localStorage]); + const setModalCallback = useModalStore((state) => state.setModalCallback); + setModalCallback(() => push(nextPageUrl)); return ( @@ -113,6 +121,11 @@ export default function Template({ children }: { children: ReactNode }) { canNext={methods.formState.isValid} nextPage={nextPageUrl} hasBackButton={actualPage?.hasBackButton} + onClickNextButton={ + actualPage?.page === pagesTitles[pagesTitles.length - 1].page + ? shouldOpenModal + : undefined + } /> diff --git a/src/app/(app)/chamado/[id]/page.tsx b/src/app/(app)/chamado/[id]/page.tsx new file mode 100644 index 00000000..21d2323b --- /dev/null +++ b/src/app/(app)/chamado/[id]/page.tsx @@ -0,0 +1,5 @@ +import { IssuePage, IssuePageProps } from "@/screens"; + +export default function Issue({ params }: { params: IssuePageProps }) { + return ; +} diff --git a/src/app/(app)/chamados/page.tsx b/src/app/(app)/chamados/page.tsx index 7ac6b0d3..f7e21d80 100644 --- a/src/app/(app)/chamados/page.tsx +++ b/src/app/(app)/chamados/page.tsx @@ -2,7 +2,7 @@ import { MyCallsPage } from "@/screens/meus-chamados"; import { Metadata } from "next"; export const metadata: Metadata = { - title: { default: "Meus chamados", template: "%s | Services" }, + title: "Meus chamados", }; export default function Tickets() { diff --git a/src/app/(app)/pesquisa/page.tsx b/src/app/(app)/pesquisa/page.tsx index bc40fdd3..21e8d16e 100644 --- a/src/app/(app)/pesquisa/page.tsx +++ b/src/app/(app)/pesquisa/page.tsx @@ -3,9 +3,9 @@ import { SearchPage } from "@/screens/pesquisa"; import { Metadata } from "next"; export const metadata: Metadata = { - title: { default: "Pesquisa", template: "%s | Services" }, + title: "Pesquisa" }; export default function Search() { - return ; + return ; } diff --git a/src/app/(app)/solicitacoes/page.tsx b/src/app/(app)/solicitacoes/page.tsx index 355b3a5f..0e662135 100644 --- a/src/app/(app)/solicitacoes/page.tsx +++ b/src/app/(app)/solicitacoes/page.tsx @@ -2,7 +2,7 @@ import { RequestsPage } from "@/screens/solicitacoes"; import type { Metadata } from "next"; export const metadata: Metadata = { - title: { default: "Chamados solicitados", template: "%s | Services" }, + title: "Solicitações", }; export default function Requests() { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4d171e4b..154a4196 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -8,11 +8,12 @@ import { SpeedInsights } from "@vercel/speed-insights/next"; const inter = Inter({ subsets: ["latin"] }); export const metadata: Metadata = { - title: "Services", + title: { default: "Services", template: "%s | Services" }, description: - "Desburocratizador de processos de gerenciamento de chamados, bem vindo ao Services.", + "Desburocratizador do gerenciamento de chamados, bem vindo ao Services.", applicationName: "Services", - creator: "SQUAD1 X L3", + creator: "Wellington Braga", + publisher: "L3", authors: [ { name: "Wellington Braga" }, { name: "Larissa Ferreira" }, diff --git a/src/components/Fieldset/index.tsx b/src/components/Fieldset/index.tsx index 74f70c32..28e997c0 100644 --- a/src/components/Fieldset/index.tsx +++ b/src/components/Fieldset/index.tsx @@ -1,28 +1,28 @@ import { Fieldset, Legend, LegendText } from "./styles"; export type FieldsetProps = { - children: React.ReactNode; - labelText: string; - width?: string; - height?: string; + children: React.ReactNode; + labelText: string; + width?: string; + height?: string; + color?: string; }; const CustomFieldset = ({ - children, - labelText, - height, - width, + children, + labelText, + height, + width, + color }: FieldsetProps) => { - return ( -
- - {labelText} - - {children} -
- ); + return ( +
+ + {labelText} + + {children} +
+ ); }; export { CustomFieldset }; diff --git a/src/components/Fieldset/styles.ts b/src/components/Fieldset/styles.ts index a50931e3..8e0d9017 100644 --- a/src/components/Fieldset/styles.ts +++ b/src/components/Fieldset/styles.ts @@ -1,35 +1,44 @@ import styled from "styled-components"; -export const Fieldset = styled.fieldset<{ width?: string; height?: string }>` - display: flex; - flex-direction: column; - align-items: flex-start; - padding: 4px 12px; - width: ${({ width }) => width ?? "fit-content"}; - height: ${({ height }) => height ?? "fit-content"}; - border-radius: 4px; - border: 1px solid ${({ theme }) => theme.colors.neutral["15"]}; - flex: none; - order: 0; - align-self: stretch; - flex-grow: 0; - background-color: none; +export const Fieldset = styled.fieldset<{ + width?: string; + height?: string; + color?: string; +}>` + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + padding: 12px; + width: ${({ width }) => width || "fit-content"}; + height: ${({ height }) => height || "fit-content"}; + border-radius: 4px; + border: 1px solid ${({ theme, color }) => color || theme.colors.neutral["15"]}; + flex: none; + order: 0; + align-self: stretch; + flex-grow: 0; + background-color: none; + overflow-x: hidden; + overflow-y: auto; + text-overflow: ellipsis; + word-break: break-word; `; export const Legend = styled.legend` - padding: 0px 4px 0px 4px; + padding: 0px 4px 0px 4px; `; export const LegendText = styled.span` - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 16px; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; - letter-spacing: 0.4px; + letter-spacing: 0.4px; - color: #2b4417; - flex: none; - order: 0; - flex-grow: 0; + color: #2b4417; + flex: none; + order: 0; + flex-grow: 0; `; diff --git a/src/components/Form/FormButtons/index.tsx b/src/components/Form/FormButtons/index.tsx index 91125924..d75dee85 100644 --- a/src/components/Form/FormButtons/index.tsx +++ b/src/components/Form/FormButtons/index.tsx @@ -53,8 +53,11 @@ const FormButtons = ({ height="40px" disabled={!canNext} onClick={() => { - if (onClickNextButton) onClickNextButton(); - push(nextPage); + if (onClickNextButton) { + onClickNextButton(); + } else { + push(nextPage); + } }} {...buildTestIds("next-button-form-buttons")} /> diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx deleted file mode 100644 index db975a8c..00000000 --- a/src/components/Modal/index.tsx +++ /dev/null @@ -1,26 +0,0 @@ -// import { MessageSuccess, ModalContainer, ModalContet } from "./styles"; -// import imageContiner from "../../Images/MicrosoftTeams-image.png"; -// import { ReactNode } from "react"; -// import Image from "next/image"; - -// interface ModalProps { -// isTrue: boolean; -// message?: string | ReactNode; -// } - -// export const Modal = ({ isTrue, message }: ModalProps) => { -// if (!isTrue) return null; -// return ( -// -// -// Fundo branco centralzado -// {message} -// -// -// ); -// }; diff --git a/src/components/Modal/styles.tsx b/src/components/Modal/styles.tsx deleted file mode 100644 index 0fe873db..00000000 --- a/src/components/Modal/styles.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import styled from "styled-components"; - -interface ModalProps { - isTrue: boolean; -} - -export const ModalContainer = styled.section` - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: 0; - background-color: ${({ theme }) => theme.colors.neutral.opacity}; - z-index: 2; - - display: ${(isTrue) => (isTrue ? "flex" : "none")}; -`; - -export const ModalContet = styled.section` - background-color: ${({ theme }) => theme.colors.green["015"]}; - margin: auto; - width: 30rem; - height: 20rem; - box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.24); - border-radius: 12px; - - & > img { - margin: 1.5rem auto; - display: flex; - } -`; - -export const MessageSuccess = styled.p` - color: ${({theme}) => theme.colors.neutral.white}; - font-size: 20px; - font-family: inter; - font-weight: 600; - display: flex; - flex-direction: column; - text-align: center; - align-items: center; - margin-top: 1.5rem; -`; diff --git a/src/components/Modals/BaseModal/index.tsx b/src/components/Modals/BaseModal/index.tsx new file mode 100644 index 00000000..4bc01a0a --- /dev/null +++ b/src/components/Modals/BaseModal/index.tsx @@ -0,0 +1,129 @@ +import { ReactNode } from "react"; +import ReactModal from "react-modal"; + +interface ContentStyleInterface { + borderRadius?: string; + border?: string; + padding?: string; + maxWidth?: string; + maxHeight?: string; + flexDirection?: + | "row" + | "row-reverse" + | "column" + | "column-reverse" + | "initial"; + justifyContent?: + | "space-between" + | "center" + | "flex-start" + | "flex-end" + | "space-around" + | "space-evenly" + | "initial" + | "inherit" + | "baseline" + | "stretch"; + alignItems?: + | "center" + | "flex-start" + | "flex-end" + | "stretch" + | "baseline" + | "initial" + | "inherit" + | "start" + | "end" + | "self-start" + | "self-end"; + boxShadow?: string; +} + +interface ModalProps { + children?: ReactNode; + isOpen: boolean; + onAfterClose?: () => void; + onAfterOpen?: () => void; + onRequestClose?: () => void; + shouldCloseOnEsc?: boolean; + testId: string; + closeTimeoutMS?: number; + backgroundColor?: string; + style?: { + overlay?: { + show?: boolean; + zIndex?: number; + backgroundColor?: string; + }; + content?: ContentStyleInterface; + }; + shouldFocusAfterRender?: boolean; + shouldReturnFocusAfterClose?: boolean; + shouldCloseOnOverlayClick?: boolean; + contentLabel?: string; + preventScroll?: boolean; +} + +export const CustomModal = ({ + children, + testId, + isOpen, + onAfterClose, + onAfterOpen, + onRequestClose, + closeTimeoutMS, + contentLabel, + shouldReturnFocusAfterClose, + preventScroll = true, + shouldFocusAfterRender = true, + shouldCloseOnEsc = true, + shouldCloseOnOverlayClick = true, + style = { overlay: { show: true } }, + backgroundColor +}: ModalProps) => { + ReactModal.setAppElement("body"); + return ( + + {children} + + ); +}; + +export type { ModalProps }; diff --git a/src/components/Modals/BaseModal/styles.tsx b/src/components/Modals/BaseModal/styles.tsx new file mode 100644 index 00000000..178d3dc1 --- /dev/null +++ b/src/components/Modals/BaseModal/styles.tsx @@ -0,0 +1 @@ +import styled from "styled-components"; diff --git a/src/components/Modals/ConfirmModal/index.tsx b/src/components/Modals/ConfirmModal/index.tsx new file mode 100644 index 00000000..954f6b49 --- /dev/null +++ b/src/components/Modals/ConfirmModal/index.tsx @@ -0,0 +1,103 @@ +import { ReactElement, useCallback, useState } from "react"; +import { CustomModal, ModalProps } from ".."; +import { Check, Question } from "@phosphor-icons/react"; +import { + ConfirmModalWrapper, + ConfirmModalText, + ConfirmModalButtons +} from "./styles"; +import { useTheme } from "styled-components"; +import { CustomButton } from "@/components"; +import { useModalStore } from "@/utils"; + +interface ConfirmModalProps extends ModalProps { + successIcon?: ReactElement; + confirmationIcon?: ReactElement; + successText: string; + confirmationText?: string; + hasBackButton?: boolean; + mode?: "confirm" | "vitrine"; + confirmCallBack?: () => void; +} + +const ConfirmModal = ({ + successIcon, + successText, + confirmationIcon, + confirmationText, + hasBackButton, + mode = "confirm", + confirmCallBack, + ...props +}: ConfirmModalProps) => { + const theme = useTheme(); + const shouldCloseModal = useModalStore((state) => state.close); + const [changeToVitrine, setChangeToVitrine] = useState( + mode === "vitrine" + ); + + const modalCallBack = useCallback(() => { + if (!changeToVitrine) setChangeToVitrine(true); + + setTimeout(() => { + if (confirmCallBack) confirmCallBack(); + shouldCloseModal(); + }, 2000); + }, []); + + return ( + + + {changeToVitrine + ? successIcon ?? ( + + ) + : confirmationIcon ?? ( + + )} + + {changeToVitrine ? successText : confirmationText} + + {!changeToVitrine && ( + + {hasBackButton && ( + + )} + + + )} + + + ); +}; + +export { ConfirmModal }; diff --git a/src/components/Modals/ConfirmModal/styles.tsx b/src/components/Modals/ConfirmModal/styles.tsx new file mode 100644 index 00000000..a964200c --- /dev/null +++ b/src/components/Modals/ConfirmModal/styles.tsx @@ -0,0 +1,70 @@ +import { Row } from "@/styles"; +import styled, { css } from "styled-components"; + +export const ConfirmModalWrapper = styled.div<{ + $shouldHavePaddingBottom?: boolean; + $wasConfirmed?: boolean; +}>` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + gap: 1rem; + padding: 1rem; + text-align: center; + background-color: ${({ theme }) => theme.colors.green["25"]}; + animation-name: modalConfirmTransition; + animation-duration: 2s; + + ${({ $wasConfirmed }) => + $wasConfirmed && + css` + @keyframes modalConfirmTransition { + from { + background-color: ${({ theme }) => theme.colors.green["25"]}; + } + to { + background-color: ${({ theme }) => theme.colors.green.default}; + } + } + `} + + ${({ $shouldHavePaddingBottom }) => + $shouldHavePaddingBottom + ? css` + padding-bottom: 3rem; + ` + : css` + p { + margin-bottom: 0.6rem; + } + `}; +`; + +export const ConfirmModalText = styled.p` + font-size: 1.33rem; + font-weight: 500; + line-height: 1.4rem; + color: ${({ theme }) => theme.colors.neutral.default}; + @media (max-width: 374px) { + font-size: 1.2rem; + } +`; + +export const ConfirmModalButtons = styled(Row)` + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + + @media (max-width: 374px) { + flex-direction: column; + } + + div { + height: 2rem; + width: 10rem; + } +`; diff --git a/src/components/Modals/index.tsx b/src/components/Modals/index.tsx new file mode 100644 index 00000000..a4786288 --- /dev/null +++ b/src/components/Modals/index.tsx @@ -0,0 +1,2 @@ +export * from "./BaseModal"; +export * from "./ConfirmModal"; \ No newline at end of file diff --git a/src/components/common/Buttons/BackButton/styles.ts b/src/components/common/Buttons/BackButton/styles.ts index f6887a3a..277e32ab 100644 --- a/src/components/common/Buttons/BackButton/styles.ts +++ b/src/components/common/Buttons/BackButton/styles.ts @@ -23,7 +23,7 @@ export const BackIcon = styled(Image)` export const TextBack = styled.span` font-style: normal; font-weight: ${({ fontWeight }) => fontWeight || 500}; - font-size: 1.2rem; + font-size: 1.1rem; display: flex; line-height: 36px; align-items: center; diff --git a/src/components/index.tsx b/src/components/index.tsx index c443a8fc..0c7a7605 100644 --- a/src/components/index.tsx +++ b/src/components/index.tsx @@ -7,7 +7,7 @@ export * from "./SearchBar"; export * from "./CallInformation"; export * from "./PageStruct"; export * from "./LoadingScreen"; -// export * from "./Modal"; +export * from "./Modals"; export * from "./SideBarLeft"; export * from "./common"; export * from "./SuportText"; diff --git a/src/screens/abrir-chamado/confirmar-chamado/index.tsx b/src/screens/abrir-chamado/confirmar-chamado/index.tsx index 5e6b1830..b3ba7455 100644 --- a/src/screens/abrir-chamado/confirmar-chamado/index.tsx +++ b/src/screens/abrir-chamado/confirmar-chamado/index.tsx @@ -1,119 +1,79 @@ -// import { useState } from "react"; -// import { BackButton, NavigationBar, Midia, Modal } from "@/components"; +"use client"; -// import { -// ChamadoContent, -// ChamadoText, -// MidiaDiv, -// SreenContainer, -// } from "./styles"; +import { CustomFieldset } from "@/components/Fieldset"; +import { ConfirmDetailsContainer, SectionInfoForm } from "./styles"; +import { useTheme } from "styled-components"; +import { LS_KEY_1_TICKET_RECORD, useModalStore } from "@/utils"; +import { IOpenTicketForm } from "@/app/(app)/(form)/template"; +import { dataFormatter } from "@/utils/functions"; +import { ConfirmModal } from "@/components"; +import { Check } from "@phosphor-icons/react"; -// import { useTypeCall } from "../../../utils/contexts"; -// import { CallInformation } from "../../../components/CallInformation"; -// import { LoadingScreen } from "../../../components/LoadingScreen"; -// import Link from "next/link"; -// import navigationOptions from "@/components/NavBar/data"; +export const ConfirmDetailsPage = () => { + const theme = useTheme(); + const ticketData: IOpenTicketForm = JSON.parse( + localStorage.getItem(LS_KEY_1_TICKET_RECORD) as unknown as string + ); + const isModalOpen = useModalStore((state) => state.isOpen); + const modalCallback = useModalStore((state) => state.modalCallback); -// export const ConfirmacaoScreen = () => { -// const [openModal, setOpenModal] = useState(false); -// const [isLoading, setIsLoading] = useState(false); -// const { tipo, resumo, dataOcorrido, descricao, file } = useTypeCall(); - -// const confirmarChamado = () => { -// setIsLoading(true); - -// const verifyModal = () => { -// if (!openModal) { -// setOpenModal(true); - -// setTimeout(() => { -// window.location.href = "/Chamado"; -// }, 3000); -// } -// }; - -// const data = new Date(dataOcorrido); -// const dataFormatada = data.toLocaleDateString("pt-BR", { timeZone: "UTC" }); - -// const chamadoData = { -// nome: resumo, -// tipo: tipo, -// dataRelato: dataFormatada, -// descricao: descricao, -// empregado_Matricula: 1, -// }; - -// const uploadFile = (idChamado: number) => { -// const matrizFiles = file.find((item) => item) as Blob; -// setIsLoading(true); -// const formData = new FormData(); -// formData.append("files", matrizFiles); - -// // api -// // .post( -// // `/AddMidia?tipoMidia=${file.find( -// // (file) => file.type -// // )}&chamadoIdChamado=${chamadoData}`, -// // JSON.stringify(file), -// // { -// // headers: { -// // Authorization: `Bearer ${usuarioLogado.token}`, -// // "Content-Type": "application/json", -// // }, -// // } -// // ) -// // .then(() => { -// // verifyModal(); -// // }) -// // .catch((err) => { -// // console.error(`ops! ocorreu um erro ${err}`); -// // }) -// // .finally(() => { -// // setIsLoading(false); -// // }); -// }; - -// const message = ( -// <> -// Chamado registrado
com sucesso -// -// ); -// return isLoading ? ( -// -// ) : ( -// -// -// -// -// Confirmar informações -// -// {resumo} -// {tipo} - -// -// {dataFormatada} -// -// {descricao} -// {file.length ? ( -// <> -//

Mídia

-// -// {file.map((file, index) => ( -// -// ))} -// -// -// ) : null} -// -// -// -// -// ); -// }; -// }; + return ( + <> + + + + + {ticketData?.resumo} + + + + + {ticketData?.tipo} + + + {ticketData?.prioridade} + + + + + {dataFormatter(ticketData?.data)} + + + + + {ticketData?.descricao} + + + + + + ); +}; diff --git a/src/screens/abrir-chamado/confirmar-chamado/styles.ts b/src/screens/abrir-chamado/confirmar-chamado/styles.ts index c53be7de..68e2ebcf 100644 --- a/src/screens/abrir-chamado/confirmar-chamado/styles.ts +++ b/src/screens/abrir-chamado/confirmar-chamado/styles.ts @@ -1,48 +1,9 @@ -// import styled from "styled-components"; -// import { ContainerMenu } from "../../../Components/MenuNavegation/styles"; +import { CustomFieldset } from "@/components/Fieldset"; +import { Column, Row } from "@/styles"; +import styled from "styled-components"; -// export const SreenContainer = styled.div` -// width: 100vw; -// height: 100vh; -// padding: 3.2rem; -// align-items: center; -// justify-content: center; -// overflow: auto; -// margin-bottom: 4rem; +export const ConfirmDetailsContainer = styled(Column)` + height: 100%; +`; -// & > ${ContainerMenu} { -// justify-content: flex-end; -// left: 0; -// } -// `; - -// export const ButtonDiv = styled.div``; - -// export const ChamadoText = styled.h1` -// font-style: normal; -// font-weight: 500; -// font-size: 24px; -// line-height: 24px; -// display: flex; -// align-items: center; -// letter-spacing: 0.5px; -// color: #7ac143; -// margin-bottom: 2rem; -// `; - -// export const ChamadoContent = styled.div` -// display: flex; -// flex-direction: column; -// width: 100%; -// gap: 16px; -// `; - -// export const MidiaDiv = styled.div` -// display: flex; -// overflow-x: auto; -// width: 100%; - -// &::-webkit-scrollbar { -// display: none; -// } -// `; +export const SectionInfoForm = styled(Row)``; diff --git a/src/screens/abrir-chamado/index.tsx b/src/screens/abrir-chamado/index.tsx index 78ae30c6..76c1b60f 100644 --- a/src/screens/abrir-chamado/index.tsx +++ b/src/screens/abrir-chamado/index.tsx @@ -30,6 +30,7 @@ const CreateTicketPage = () => { setValue("descricao", parsedData.descricao, { shouldValidate: true }); setValue("data", parsedData.data, { shouldValidate: true }); setValue("tipo", parsedData.tipo, { shouldValidate: true }); + setValue("prioridade", parsedData.prioridade, { shouldValidate: true }); !isDataRecovered && toast.success("Dados recuperados com sucesso!"); sessionStorage.setItem(SS_KEY_DATA_WAS_RECOVERY, "true"); } @@ -48,6 +49,7 @@ const CreateTicketPage = () => { const dataWatch = watch("data", ""); const descriptionWatch = watch("descricao", ""); const typeWatch = watch("tipo", ""); + const priorityWatch = watch("prioridade", "baixa"); return ( @@ -158,6 +160,31 @@ const CreateTicketPage = () => { } }} /> + + value !== "" || "É necessário escolher a prioridade do chamado" + }} + $status={ + !!errors?.prioridade + ? "invalid" + : !errors?.prioridade && priorityWatch.length + ? "valid" + : "none" + } + /> ); }; diff --git a/src/screens/chamado/index.tsx b/src/screens/chamado/index.tsx index b6c2fdab..912c4659 100644 --- a/src/screens/chamado/index.tsx +++ b/src/screens/chamado/index.tsx @@ -1,20 +1,25 @@ "use client"; -import { - BackButton, - CustomSelect, - CustomTextArea, - OutlinedInput -} from "@/components"; +import { BackButton } from "@/components"; import { IssuePageContainer } from "./styles"; import { Row } from "@/styles"; +import { useEffect } from "react"; +import { resetForm } from "@/utils/functions"; -const IssuePage = () => { +export interface IssuePageProps { + id: string; +} + +const IssuePage = ({ id }: IssuePageProps) => { + useEffect(() => { + resetForm(); + }, []); return ( +
{id}
 ); }; diff --git a/src/styles/common/index.tsx b/src/styles/common/index.tsx index 9f7954b9..656ffffe 100644 --- a/src/styles/common/index.tsx +++ b/src/styles/common/index.tsx @@ -46,7 +46,7 @@ export const PageContainer = styled.main` export const TitleComponent = styled.h1<{ isSmallClientMobile?: boolean }>` font-style: normal; font-weight: 600; - font-size: 1.3rem; + font-size: 1.4rem; line-height: 1.5rem; display: flex; align-items: center; diff --git a/src/styles/globals.tsx b/src/styles/globals.tsx index d6193b1e..c2103c49 100644 --- a/src/styles/globals.tsx +++ b/src/styles/globals.tsx @@ -76,6 +76,9 @@ table { border-collapse: collapse; border-spacing: 0; } +textarea { + font-family: Inter, Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +} a{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); diff --git a/src/utils/contexts/TypeCall.tsx b/src/utils/contexts/TypeCall.tsx deleted file mode 100644 index 1463b4c8..00000000 --- a/src/utils/contexts/TypeCall.tsx +++ /dev/null @@ -1,119 +0,0 @@ -/* eslint-disable no-unused-vars */ -import { - ReactNode, - useCallback, - useContext, - useMemo, - useState, - createContext, -} from "react"; - -interface TypeCallContextProps { - resumo: string; - tipo: string; - descricao: string; - code: string; - dataOcorrido: string; - file: Array; - idChamado: string; - changeTipo(value: string): void; - changeResumo(value: string): void; - changeDescricao(value: string): void; - changeDataOcorrido(value: string): void; - changeFile(value: Array): void; - changeCode(value: string): void; -} - -interface TypeCallProviderProps { - children: ReactNode; -} - -export const TypeCallContext = createContext({} as TypeCallContextProps); - -export const TypeCallProvider = ({ children }: TypeCallProviderProps) => { - const [resumo, setResumo] = useState(""); - const [tipo, setTipo] = useState(""); - const [idChamado, setIdChamado] = useState(""); - const [descricao, setDescricao] = useState(""); - const [dataOcorrido, setDataOcorrido] = useState(""); - const [file, setFile] = useState>([]); - const [code, setCode] = useState(""); - - const changeTipo = useCallback((value: string) => { - setTipo(value); - }, []); - - const changeResumo = useCallback((value: string) => { - setResumo(value); - }, []); - - const changeDescricao = useCallback((value: string) => { - setDescricao(value); - }, []); - - const changeDataOcorrido = useCallback((value: string) => { - setDataOcorrido(value); - }, []); - - const changeIdChamado = useCallback((value: string) => { - setIdChamado(value); - }, []); - - const changeFile = useCallback((value: Array) => { - setFile(value); - }, []); - - const changeCode = useCallback((value: string) => { - setCode(value); - }, []); - - const typeCallContextProviderValue = useMemo(() => { - return { - tipo, - resumo, - dataOcorrido, - descricao, - file, - code, - idChamado, - changeResumo, - changeDataOcorrido, - changeDescricao, - changeTipo, - changeFile, - changeCode, - changeIdChamado, - }; - }, [ - tipo, - resumo, - dataOcorrido, - descricao, - file, - code, - idChamado, - changeResumo, - changeDataOcorrido, - changeDescricao, - changeTipo, - changeFile, - changeCode, - changeIdChamado, - ]); - - return ( - - {children} - - ); -}; - -export const useTypeCall = (): TypeCallContextProps => { - const typeCallContext = useContext(TypeCallContext); - - if (!typeCallContext) { - throw new Error("usetypeCall must be used within an typeCallProvider"); - } - - return typeCallContext; -}; diff --git a/src/utils/functions/dataFormatter/index.ts b/src/utils/functions/dataFormatter/index.ts new file mode 100644 index 00000000..cf4baf27 --- /dev/null +++ b/src/utils/functions/dataFormatter/index.ts @@ -0,0 +1,3 @@ +export const dataFormatter = (data: string) => { + return data?.split("-").reverse().join("/"); +}; diff --git a/src/utils/functions/index.ts b/src/utils/functions/index.ts index 26681ad8..df19ca38 100644 --- a/src/utils/functions/index.ts +++ b/src/utils/functions/index.ts @@ -1 +1,3 @@ export * from "./buildTestIds"; +export * from "./dataFormatter"; +export * from "./resetForm"; diff --git a/src/utils/functions/resetForm/index.tsx b/src/utils/functions/resetForm/index.tsx new file mode 100644 index 00000000..92ee69bb --- /dev/null +++ b/src/utils/functions/resetForm/index.tsx @@ -0,0 +1,15 @@ +import { + LS_KEY_1_TICKET_RECORD, + LS_KEY_2_TICKET_RECORD, + LS_KEY_3_TICKET_RECORD, + SS_KEY_DATA_WAS_RECOVERY +} from "@/utils"; + +const resetForm = () => { + localStorage.removeItem(LS_KEY_1_TICKET_RECORD); + localStorage.removeItem(LS_KEY_2_TICKET_RECORD); + localStorage.removeItem(LS_KEY_3_TICKET_RECORD); + sessionStorage.removeItem(SS_KEY_DATA_WAS_RECOVERY); +}; + +export { resetForm }; diff --git a/src/utils/index.tsx b/src/utils/index.tsx index 2b0e21ee..04c1bde9 100644 --- a/src/utils/index.tsx +++ b/src/utils/index.tsx @@ -1,3 +1,3 @@ export * from "./providers"; -export * from "./contexts"; +export * from "./stores"; export * from "./alias"; diff --git a/src/utils/contexts/AppContext.tsx b/src/utils/stores/AppContext.tsx similarity index 100% rename from src/utils/contexts/AppContext.tsx rename to src/utils/stores/AppContext.tsx diff --git a/src/utils/contexts/index.tsx b/src/utils/stores/index.tsx similarity index 50% rename from src/utils/contexts/index.tsx rename to src/utils/stores/index.tsx index ec4eb48d..36bd872c 100644 --- a/src/utils/contexts/index.tsx +++ b/src/utils/stores/index.tsx @@ -1,2 +1,2 @@ -export * from "./TypeCall"; export * from "./AppContext"; +export * from "./useModal"; diff --git a/src/utils/stores/useModal/index.ts b/src/utils/stores/useModal/index.ts new file mode 100644 index 00000000..878b96e0 --- /dev/null +++ b/src/utils/stores/useModal/index.ts @@ -0,0 +1,17 @@ +import { create } from "zustand"; + +type ModalState = { + isOpen: boolean; + modalCallback?: () => void; + open: () => void; + close: () => void; + setModalCallback: (callback: () => void) => void; +}; + +export const useModalStore = create((set) => ({ + isOpen: false, + modalCallback: undefined, + open: () => set({ isOpen: true }), + close: () => set({ isOpen: false }), + setModalCallback: (callback) => set({ modalCallback: callback }) +}));