feat: ✨ Criação da tela de confirmação de chamado

welllucky · Feb 4, 2024 · f3f9212 · f3f9212
1 parent bf81617
commit f3f9212
Show file tree

Hide file tree

Showing 35 changed files with 594 additions and 447 deletions.
diff --git 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/*
+coverage/*
+
+# Snyk
+snyk-linux
diff --git 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
@@ -1,7 +1,5 @@
-export default function ConfirmDetailsPage() {
-	return (
-		<div>
-			<h1>ConfirmDetailsPage</h1>
-		</div>
-	);
+import { ConfirmDetailsPage } from "@/screens/abrir-chamado/confirmar-chamado";
+
+export default function ConfirmDetails() {
+  return <ConfirmDetailsPage />;
 }
diff --git 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,35 +19,38 @@ interface PageRouterData {
 export interface IOpenTicketForm {
   resumo: string;
   descricao: string;
+  prioridade: "baixa" | "media" | "alta";
   data: string;
   tipo: string;
 }
 
 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",
       hasBackButton: true
     }
   ];
 
-  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<IOpenTicketForm>({
     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 (
     <FormProvider
@@ -100,7 +104,11 @@ export default function Template({ children }: { children: ReactNode }) {
                 back();
               }
             }}
-            actionText="voltar"
+            actionText={
+              actualPage?.page === pagesTitles[0].page
+                ? "voltar"
+                : previousPageUrl
+            }
           />
         </Row>
         <Column {...buildTestIds("content-column")} height="100%" $gap="12px">
@@ -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
+            }
           />
         </Column>
       </IssuePageContainer>

diff --git a/src/app/(app)/chamado/[id]/page.tsx 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 <IssuePage id={params.id} />;
+}
diff --git 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
@@ -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 <SearchPage searchResults={issueMobileData} />;
+  return <SearchPage searchResults={issueMobileData} />;
 }
diff --git 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
@@ -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
@@ -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 (
-		<Fieldset
-			width={width}
-			height={height}>
-			<Legend>
-				<LegendText>{labelText}</LegendText>
-			</Legend>
-			{children}
-		</Fieldset>
-	);
+  return (
+    <Fieldset width={width} height={height} color={color}>
+      <Legend>
+        <LegendText>{labelText}</LegendText>
+      </Legend>
+      {children}
+    </Fieldset>
+  );
 };
 
 export { CustomFieldset };
diff --git 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
@@ -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")}
         />