feat: implementa cadastro do cliente

pay-flow/src/components/ActionFooter/index.tsx

@@ -1,11 +1,10 @@
 import { useNavigate } from "react-router-dom";
-import { CheckCircle, Trash2, Undo } from "lucide-react";
+import { CheckCircle, Eraser, Undo } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import Button from "../Button";
 import { colors } from "../Style/theme";
-import { Row } from "../Row";
 import { Col } from "../Col";
-import { toast } from "react-toastify";
+import { ButtonGroup, FooterWrapper } from "./style";
 
 interface ActionFooterProps {
   confirmText: string;
@@ -24,40 +23,37 @@ export function ActionFooter({
   const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     onClear();
-    navigate("/checkout");
-    toast.success("Sucesso");
   };
 
   return (
-    <Row>
+    <FooterWrapper>
       <Col xs={8}>
+        <ButtonGroup>
+          <Button
+            text={t("common.cancel")}
+            icon={Undo}
+            onClick={() => navigate("/checkout")}
+          />
+          <Button
+            text={t("common.remove")}
+            icon={Eraser}
+            color={colors.red}
+            onClick={handleClear}
+          />
+        </ButtonGroup>
+      </Col>
+      <Col xs={4}>
         <Button
           text={confirmText}
           icon={CheckCircle}
           type="submit"
           disabled={disabled}
+          fullWidth
           onClick={(e) => e.stopPropagation()}
         >
           {confirmText}
         </Button>
       </Col>
-      <Col xs={2}>
-        <Button
-          text={t("common.cancel")}
-          icon={Undo}
-          onClick={() => navigate("/checkout")}
-        />
-      </Col>
-      <Col xs={2}>
-        <Button
-          text={t("common.remove")}
-          icon={Trash2}
-          color={colors.red}
-          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-            handleClear(event);
-          }}
-        />
-      </Col>
-    </Row>
+    </FooterWrapper>
   );
 }

pay-flow/src/components/ActionFooter/style.ts

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+import { colors } from "../Style/theme";
+import { Row } from "../Row";
+
+export const ButtonGroup = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+export const FooterWrapper = styled(Row)`
+  width: 100%;
+  border-top: 1px solid ${colors.primary};
+  padding-top: 16px;
+  margin-top: 16px;
+`;

pay-flow/src/components/Breadcrumb/style.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { colors } from "../Style/theme";
 import { Link } from "react-router-dom";
-import type { StyleThemeProps } from "../../type/type";
+import type { StyleThemeProps } from "../../types/type";
 
 export const CrumbLink = styled(Link)`
   all: unset;

pay-flow/src/components/Button/index.tsx

@@ -4,21 +4,32 @@ import { Content, IconWrapper, StyledButton } from "./style";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   text: string;
   color?: string;
+  variant?: "solid" | "outline" | "ghost";
   icon?: ElementType;
+  fullWidth?: boolean;
 }
 
 function Button({
   children,
   icon,
   text,
   color,
+  variant = "solid",
+  fullWidth = false,
   type = "button",
   ...props
 }: ButtonProps) {
   const Icon = icon;
 
   return (
-    <StyledButton title={text} color={color} type={type} {...props}>
+    <StyledButton
+      title={text}
+      color={color}
+      type={type}
+      variant={variant}
+      fullWidth={fullWidth}
+      {...props}
+    >
       <Content>
         {Icon && (
           <IconWrapper>

pay-flow/src/components/Button/style.ts

@@ -3,21 +3,31 @@ import { colors } from "../Style/theme";
 
 interface StyledButtonProps {
   color?: string;
+  variant?: "solid" | "outline" | "ghost";
+  fullWidth?: boolean;
 }
 
 export const StyledButton = styled.button<StyledButtonProps>`
-  width: 100%;
+  width: ${({ fullWidth }) => (fullWidth ? "100%" : "fit-content")};
   height: 48px;
-
   border-radius: 14px;
-  border: none;
+  padding: 10px 14px;
+
+  border: ${({ variant, color }) =>
+    variant === "outline" ? `1px solid ${color ?? colors.primary}` : "none"};
+
+  background: ${({ variant, color }) =>
+    variant === "solid" ? (color ?? colors.primary) : "transparent"};
 
-  background: ${({ color }) => (color ? color : colors.primary)};
-  color: ${colors.white};
+  color: ${({ variant, color }) =>
+    variant === "solid" ? colors.white : (color ?? colors.primary)};
 
   font-size: 15px;
   font-weight: 500;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont;
 
   display: flex;
   align-items: center;
@@ -28,12 +38,18 @@ export const StyledButton = styled.button<StyledButtonProps>`
   transition: all 0.25s ease;
 
   &:hover {
-    filter: brightness(0.96);
+    ${({ variant, color }) =>
+      variant === "ghost"
+        ? `
+          background: ${color ?? colors.primary}15;
+        `
+        : `
+          filter: brightness(0.96);
+        `}
   }
 
   &:active {
     transform: scale(0.98);
-    filter: brightness(0.92);
   }
 
   &:focus {

pay-flow/src/components/Card/index.tsx

@@ -7,17 +7,25 @@ import {
   CardActions,
 } from "./style";
 import { useTheme } from "../../contexts/Theme/useTheme";
-import { Plus, Search } from "lucide-react";
+import { Plus, Search, Trash } from "lucide-react";
 
 interface CardProps {
   title?: string;
   titlePadding?: number;
   onSearch?: (e: MouseEvent<HTMLButtonElement>) => void;
   onAdd?: (e: MouseEvent<HTMLButtonElement>) => void;
+  onDelete?: (e: MouseEvent<HTMLButtonElement>) => void;
   children: ReactNode;
 }
 
-function Card({ title, titlePadding, children, onSearch, onAdd }: CardProps) {
+function Card({
+  title,
+  titlePadding,
+  children,
+  onSearch,
+  onAdd,
+  onDelete,
+}: CardProps) {
   const { theme } = useTheme();
 
   const handleSearch = (event: MouseEvent<HTMLButtonElement>) => {
@@ -30,9 +38,14 @@ function Card({ title, titlePadding, children, onSearch, onAdd }: CardProps) {
     onAdd?.(event);
   };
 
+  const handleDelete = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onDelete?.(event);
+  };
+
   return (
     <CardContainer theme={theme} clickable={!!onSearch}>
-      {(onSearch || onAdd) && (
+      {(onSearch || onAdd || onDelete) && (
         <CardActions>
           {onSearch && (
             <AddButton type="button" onClick={handleSearch} theme={theme}>
@@ -44,6 +57,11 @@ function Card({ title, titlePadding, children, onSearch, onAdd }: CardProps) {
               <Plus size={16} />
             </AddButton>
           )}
+          {onDelete && (
+            <AddButton type="button" onClick={handleDelete} theme={theme}>
+              <Trash size={16} />
+            </AddButton>
+          )}
         </CardActions>
       )}
       {title && (

pay-flow/src/components/CashierCard/style.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { colors } from "../Style/theme";
-import type { StyleThemeProps } from "../../type/type";
+import type { StyleThemeProps } from "../../types/type";
 
 export const RowItem = styled.div<StyleThemeProps>`
   display: flex;

pay-flow/src/components/CashierFormCard/style.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { colors } from "../Style/theme";
-import type { StyleThemeProps } from "../../type/type";
+import type { StyleThemeProps } from "../../types/type";
 
 export const RowItem = styled.div<StyleThemeProps>`
   display: flex;

pay-flow/src/components/CustomerCard/index.tsx

@@ -3,12 +3,10 @@ import { Label, RowItem, Value } from "./style";
 import { CreditCard, Mail, Phone, User } from "lucide-react";
 import { useTheme } from "../../contexts/Theme/useTheme";
 import Card from "../Card";
-import { formatPhoneInternational } from "../../utils/phone";
 import { formatEmpty } from "../../utils/formatEmpty";
 import type { Customer } from "../../contexts/Customer/CustomerProvider";
 import { useCheckout } from "../../contexts/Checkout/useCheckout";
-import { maskCpfCnpj } from "../../utils/mask";
-import type { CountryCode } from "libphonenumber-js";
+import { maskCpfCnpj, maskPhone } from "../../utils/mask";
 
 interface CustomerCardProps {
   previewCustomer?: Customer;
@@ -44,13 +42,7 @@ function CustomerCard({
       <RowItem theme={theme}>
         <Phone size={16} />
         <Label>{t("customer.phone")}</Label>
-        <Value>
-          {formatPhoneInternational(
-            activeCustumer?.phone,
-            activeCustumer?.country as CountryCode,
-            "–",
-          )}
-        </Value>
+        <Value>{maskPhone(activeCustumer?.phone, "–")}</Value>
       </RowItem>
       <RowItem theme={theme}>
         <Mail size={16} />

pay-flow/src/components/CustomerCard/style.ts

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { colors } from "../Style/theme";
-import type { StyleThemeProps } from "../../type/type";
+import type { StyleThemeProps } from "../../types/type";
 
 export const RowItem = styled.div<StyleThemeProps>`
   display: flex;