From 153b95ca6f94b5442425c203fc6819a1dadb5488 Mon Sep 17 00:00:00 2001 From: Wellington Braga Date: Wed, 14 Feb 2024 05:21:13 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20Finaliza=C3=A7=C3=A3o=20da?= =?UTF-8?q?=20tela=20de=20confirma=C3=A7=C3=A3o=20de=20chamado?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/(app)/(form)/template.tsx | 10 +- src/components/Fieldset/index.tsx | 63 +++---- src/components/Fieldset/styles.ts | 88 +++++----- src/components/Modals/ConfirmModal/index.tsx | 5 +- .../common/Buttons/BackButton/index.tsx | 67 ++++---- .../common/Buttons/BackButton/styles.ts | 65 ++++---- .../abrir-chamado/confirmar-chamado/index.tsx | 157 +++++++++--------- src/screens/chamado/index.tsx | 58 ++++--- src/utils/functions/buildTestIds/index.ts | 16 +- 9 files changed, 273 insertions(+), 256 deletions(-) diff --git a/src/app/(app)/(form)/template.tsx b/src/app/(app)/(form)/template.tsx index 274acef6..02e43895 100644 --- a/src/app/(app)/(form)/template.tsx +++ b/src/app/(app)/(form)/template.tsx @@ -4,7 +4,7 @@ import { BackButton } from "@/components"; import { IssuePageContainer } from "@/screens/chamado/styles"; import { Column, Row, TitleComponent } from "@/styles"; import { FormButtons } from "@/components/Form"; -import { ReactNode, useMemo } from "react"; +import { ReactNode, useEffect, useMemo } from "react"; import { usePathname, useRouter } from "next/navigation"; import { FormProvider, useForm } from "react-hook-form"; import { buildTestIds, resetForm } from "@/utils/functions"; @@ -30,6 +30,7 @@ export default function Template({ const pathName = usePathname(); const { push, back } = useRouter(); const shouldOpenModal = useModalStore((state) => state.open); + const setModalCallback = useModalStore((state) => state.setModalCallback); const pagesTitles: PageRouterData[] = [ { page: "/abrir-chamado", @@ -84,8 +85,11 @@ export default function Template({ progressive: true }); - const setModalCallback = useModalStore((state) => state.setModalCallback); - setModalCallback(() => push(nextPageUrl)); + useEffect(() => { + setModalCallback(() => push(`/chamado/${idChamado}`)); + }, []); + + console.log("well actualPage", actualPage); return ( { - return ( -
- - {labelText} - - {children} -
- ); -}; - -export { CustomFieldset }; +import { buildTestIds } from "@/utils/functions"; +import { Fieldset, Legend, LegendText } from "./styles"; + +export type FieldsetProps = { + children: React.ReactNode; + labelText: string; + width?: string; + height?: string; + color?: string; +}; + +const CustomFieldset = ({ + children, + labelText, + height, + width, + color +}: FieldsetProps) => { + return ( +
+ + + {labelText} + + + {children} +
+ ); +}; + +export { CustomFieldset }; diff --git a/src/components/Fieldset/styles.ts b/src/components/Fieldset/styles.ts index d2253f49..aa8e352e 100644 --- a/src/components/Fieldset/styles.ts +++ b/src/components/Fieldset/styles.ts @@ -1,44 +1,44 @@ -import styled from "styled-components"; - -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; -`; - -export const LegendText = styled.span` - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 16px; - - letter-spacing: 0.4px; - - color: #2b4417; - flex: none; - order: 0; - flex-grow: 0; -`; +import styled from "styled-components"; + +export const Fieldset = styled.fieldset<{ + width?: string; + height?: string; + color?: string; +}>` + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + 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; +`; + +export const LegendText = styled.span` + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + letter-spacing: 0.4px; + + color: #2b4417; + flex: none; + order: 0; + flex-grow: 0; +`; diff --git a/src/components/Modals/ConfirmModal/index.tsx b/src/components/Modals/ConfirmModal/index.tsx index 4e24c9bf..e986936f 100644 --- a/src/components/Modals/ConfirmModal/index.tsx +++ b/src/components/Modals/ConfirmModal/index.tsx @@ -9,6 +9,7 @@ import { import { useTheme } from "styled-components"; import { CustomButton } from "@/components"; import { useModalStore } from "@/utils"; +import { buildTestIds } from "@/utils/functions"; interface ConfirmModalProps extends ModalProps { successIcon?: ReactElement; @@ -70,13 +71,14 @@ const ConfirmModal = ({ alt="sinal de confirmação" /> )} - + {changeToVitrine ? successText : confirmationText} {!changeToVitrine && ( {hasBackButton && ( )} void; -} - -export const BackButton = ({ - actionText, - color, - fontWeight, - onClick -}: BackButtonProps) => { - const { back } = useRouter(); - return ( - { - onClick ? onClick() : back(); - }}> - {actionText !== "Login" ? ( - - ) : ( - - )} - - {actionText} - - - ); -}; +import { Container, BackIcon, TextBack } from "./styles"; +import { useRouter } from "next/navigation"; +import { CaretLeft} from "@phosphor-icons/react"; +import { buildTestIds } from "@/utils/functions"; +export interface BackButtonProps { + actionText?: string; + color?: string; + fontWeight?: string; + onClick?: () => void; +} + +export const BackButton = ({ + actionText, + color, + fontWeight, + onClick +}: BackButtonProps) => { + const { back } = useRouter(); + return ( + { + onClick ? onClick() : back(); + }}> + + + {actionText} + + + ); +}; diff --git a/src/components/common/Buttons/BackButton/styles.ts b/src/components/common/Buttons/BackButton/styles.ts index 28db6fb0..b98c44a7 100644 --- a/src/components/common/Buttons/BackButton/styles.ts +++ b/src/components/common/Buttons/BackButton/styles.ts @@ -1,33 +1,32 @@ -import Image from "next/image"; -import styled from "styled-components"; - -interface BackButtonProps { - actionText?: string; - color?: string; - fontWeight?: string; -} - -export const Container = styled.div` - display: flex; - width: fit-content; - width: fit-content; - gap: 10px; - align-items: center; -`; - -export const BackIcon = styled(Image)` - width: 11px; - height: 15px; - margin-top: 2px; -`; - -export const TextBack = styled.span` - font-style: normal; - font-weight: ${({ fontWeight }) => fontWeight || 500}; - font-size: 1.1rem; - display: flex; - line-height: 36px; - align-items: center; - letter-spacing: 0.01em; - color: ${({ color }) => color || "#000000"}; -`; +import Image from "next/image"; +import styled from "styled-components"; + +interface BackButtonProps { + actionText?: string; + color?: string; + fontWeight?: string; +} + +export const Container = styled.div` + display: flex; + width: fit-content; + gap: 4px; + align-items: center; +`; + +export const BackIcon = styled(Image)` + width: 11px; + height: 15px; + margin-top: 2px; +`; + +export const TextBack = styled.span` + font-style: normal; + font-weight: ${({ fontWeight }) => fontWeight || 500}; + font-size: 1.1rem; + display: flex; + line-height: 36px; + align-items: center; + letter-spacing: 0.01em; + color: ${({ color }) => color || "#000000"}; +`; diff --git a/src/screens/abrir-chamado/confirmar-chamado/index.tsx b/src/screens/abrir-chamado/confirmar-chamado/index.tsx index d16b13b9..fe1f1455 100644 --- a/src/screens/abrir-chamado/confirmar-chamado/index.tsx +++ b/src/screens/abrir-chamado/confirmar-chamado/index.tsx @@ -1,78 +1,79 @@ -"use client"; - -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"; - -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); - - return ( - <> - - - - - {ticketData?.resumo} - - - - - {ticketData?.tipo} - - - {ticketData?.prioridade} - - - - - {dataFormatter(ticketData?.data)} - - - - - {ticketData?.descricao} - - - - - ); -}; +"use client"; + +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 { buildTestIds, dataFormatter } from "@/utils/functions"; +import { ConfirmModal } from "@/components"; + +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); + + return ( + <> + + + + + {ticketData?.resumo} + + + + + {ticketData?.tipo} + + + {ticketData?.prioridade} + + + + + {dataFormatter(ticketData?.data)} + + + + + {ticketData?.descricao} + + + + + ); +}; diff --git a/src/screens/chamado/index.tsx b/src/screens/chamado/index.tsx index 122e78a5..ee63dcef 100644 --- a/src/screens/chamado/index.tsx +++ b/src/screens/chamado/index.tsx @@ -1,27 +1,31 @@ -"use client"; - -import { BackButton } from "@/components"; -import { IssuePageContainer } from "./styles"; -import { Row } from "@/styles"; -import { useEffect } from "react"; -import { resetForm } from "@/utils/functions"; - -export interface IssuePageProps { - id: string; -} - -const IssuePage = ({ id }: IssuePageProps) => { - useEffect(() => { - resetForm(); - }, []); - return ( - - - - -
{id}
- - ); -}; - -export { IssuePage }; +"use client"; + +import { BackButton } from "@/components"; +import { IssuePageContainer } from "./styles"; +import { Row } from "@/styles"; +import { useEffect } from "react"; +import { resetForm } from "@/utils/functions"; +import { useRouter } from "next/navigation"; + +export interface IssuePageProps { + id: string; +} + +const IssuePage = ({ id }: IssuePageProps) => { + useEffect(() => { + resetForm(); + }, []); + + const router = useRouter(); + + return ( + + + router.push("/")} actionText="chamados" /> + +
{id}
+ + ); +}; + +export { IssuePage }; diff --git a/src/utils/functions/buildTestIds/index.ts b/src/utils/functions/buildTestIds/index.ts index 2d7a4fb6..ea0f2c35 100644 --- a/src/utils/functions/buildTestIds/index.ts +++ b/src/utils/functions/buildTestIds/index.ts @@ -1,8 +1,8 @@ -interface ITestIds { - "data-testid": string; - "data-cy": string; -} - -export const buildTestIds = (id: string): ITestIds => { - return { "data-testid": id, "data-cy": `[data-cy='${id}']` }; -}; +interface ITestIds { + "data-testid": string; +} + +export const buildTestIds = (id: string): ITestIds => { + id = id.replace(/ /g, "-").toLowerCase(); + return { "data-testid": id }; +};