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

welllucky · Feb 14, 2024 · 153b95c · 153b95c
1 parent bc20f2c
commit 153b95c
Show file tree

Hide file tree

Showing 9 changed files with 273 additions and 256 deletions.
diff --git 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 (
     <FormProvider

diff --git a/src/components/Fieldset/index.tsx b/src/components/Fieldset/index.tsx
@@ -1,28 +1,35 @@
-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 (
-    <Fieldset width={width} height={height} color={color}>
-      <Legend>
-        <LegendText>{labelText}</LegendText>
-      </Legend>
-      {children}
-    </Fieldset>
-  );
-};
-
-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 (
+    <Fieldset
+      {...buildTestIds(`fieldset-container-${labelText}`)}
+      width={width}
+      height={height}
+      color={color}>
+      <Legend {...buildTestIds(`legend-container-${labelText}`)}>
+        <LegendText {...buildTestIds(`legend-text-${labelText}`)}>
+          {labelText}
+        </LegendText>
+      </Legend>
+      {children}
+    </Fieldset>
+  );
+};
+
+export { CustomFieldset };
diff --git 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
@@ -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"
               />
             )}
-        <ConfirmModalText>
+        <ConfirmModalText {...buildTestIds("confirm-modal-text")}>
           {changeToVitrine ? successText : confirmationText}
         </ConfirmModalText>
         {!changeToVitrine && (
           <ConfirmModalButtons $gap="1rem">
             {hasBackButton && (
               <CustomButton
+                {...buildTestIds("confirm-modal-back-button")}
                 text="Voltar"
                 color={theme.colors.neutral.default}
                 $backgroundColor="transparent"
@@ -87,6 +89,7 @@ const ConfirmModal = ({
               />
             )}
             <CustomButton
+              {...buildTestIds("confirm-modal-confirm-button")}
               text="Confirmar"
               color={theme.colors.neutral.default}
               $backgroundColor={theme.colors.green.default}

diff --git a/src/components/common/Buttons/BackButton/index.tsx b/src/components/common/Buttons/BackButton/index.tsx
@@ -1,34 +1,33 @@
-import { Container, BackIcon, TextBack } from "./styles";
-import { useRouter } from "next/navigation";
-import arrowLeft from "@/assets/Icons/png/arrowLeft.png";
-import arrowLeftRed from "@/assets/Icons/png/arrowLeftRed.png";
-export interface BackButtonProps {
-  actionText?: string;
-  color?: string;
-  fontWeight?: string;
-  onClick?: () => void;
-}
-
-export const BackButton = ({
-  actionText,
-  color,
-  fontWeight,
-  onClick
-}: BackButtonProps) => {
-  const { back } = useRouter();
-  return (
-    <Container
-      onClick={() => {
-        onClick ? onClick() : back();
-      }}>
-      {actionText !== "Login" ? (
-        <BackIcon src={arrowLeft} alt="voltar" />
-      ) : (
-        <BackIcon src={arrowLeftRed} alt="voltar" />
-      )}
-      <TextBack fontWeight={fontWeight} color={color}>
-        {actionText}
-      </TextBack>
-    </Container>
-  );
-};
+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 (
+    <Container
+    {...buildTestIds("back-button")}
+      onClick={() => {
+        onClick ? onClick() : back();
+      }}>
+      <CaretLeft size={20} color={color || "black"} alt="voltar" />
+      <TextBack
+      {...buildTestIds("back-button-text")}
+      fontWeight={fontWeight} color={color}>
+        {actionText}
+      </TextBack>
+    </Container>
+  );
+};
diff --git 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<BackButtonProps>`
-  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<BackButtonProps>`
+  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"};
+`;