@suportepos/split-checkout 0.3.3 → 0.3.5

package/dist/index.es.js

@@ -7909,82 +7909,6 @@ process.env.NODE_ENV !== "production" ? Box.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-process.env.NODE_ENV !== "production" ? {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * @ignore
-   */
-  value: PropTypes.object.isRequired
-} : void 0;
-function useDefaultProps(params) {
-  return useDefaultProps$1(params);
-}
-const Container = createContainer({
-  createStyledComponent: styled("div", {
-    name: "MuiContainer",
-    slot: "Root",
-    overridesResolver: (props, styles2) => {
-      const {
-        ownerState
-      } = props;
-      return [styles2.root, styles2[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles2.fixed, ownerState.disableGutters && styles2.disableGutters];
-    }
-  }),
-  useThemeProps: (inProps) => useDefaultProps({
-    props: inProps,
-    name: "MuiContainer"
-  })
-});
-process.env.NODE_ENV !== "production" ? Container.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * If `true`, the left and right padding is removed.
-   * @default false
-   */
-  disableGutters: PropTypes.bool,
-  /**
-   * Set the max-width to match the min-width of the current breakpoint.
-   * This is useful if you'd prefer to design for a fixed set of sizes
-   * instead of trying to accommodate a fully fluid viewport.
-   * It's fluid by default.
-   * @default false
-   */
-  fixed: PropTypes.bool,
-  /**
-   * Determine the max-width of the container.
-   * The container width grows with the size of the screen.
-   * Set to `false` to disable `maxWidth`.
-   * @default 'lg'
-   */
-  maxWidth: PropTypes.oneOfType([PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", false]), PropTypes.string]),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
-} : void 0;
 function chainPropTypes(propType1, propType2) {
   if (process.env.NODE_ENV === "production") {
     return () => null;
@@ -8026,6 +7950,23 @@ function globalCss(styles2) {
 function internal_createExtendSxProp() {
   return extendSxProp$1;
 }
+process.env.NODE_ENV !== "production" ? {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * @ignore
+   */
+  value: PropTypes.object.isRequired
+} : void 0;
+function useDefaultProps(params) {
+  return useDefaultProps$1(params);
+}
 function getTypeByValue(value) {
   const valueType = typeof value;
   switch (valueType) {
@@ -8375,6 +8316,65 @@ process.env.NODE_ENV !== "production" ? CardContent.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
+const Container = createContainer({
+  createStyledComponent: styled("div", {
+    name: "MuiContainer",
+    slot: "Root",
+    overridesResolver: (props, styles2) => {
+      const {
+        ownerState
+      } = props;
+      return [styles2.root, styles2[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles2.fixed, ownerState.disableGutters && styles2.disableGutters];
+    }
+  }),
+  useThemeProps: (inProps) => useDefaultProps({
+    props: inProps,
+    name: "MuiContainer"
+  })
+});
+process.env.NODE_ENV !== "production" ? Container.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * If `true`, the left and right padding is removed.
+   * @default false
+   */
+  disableGutters: PropTypes.bool,
+  /**
+   * Set the max-width to match the min-width of the current breakpoint.
+   * This is useful if you'd prefer to design for a fixed set of sizes
+   * instead of trying to accommodate a fully fluid viewport.
+   * It's fluid by default.
+   * @default false
+   */
+  fixed: PropTypes.bool,
+  /**
+   * Determine the max-width of the container.
+   * The container width grows with the size of the screen.
+   * Set to `false` to disable `maxWidth`.
+   * @default 'lg'
+   */
+  maxWidth: PropTypes.oneOfType([PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", false]), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+} : void 0;
 function getDividerUtilityClass(slot) {
   return generateUtilityClass("MuiDivider", slot);
 }
@@ -21578,113 +21578,36 @@ process.env.NODE_ENV !== "production" ? TextField.propTypes = {
    */
   variant: PropTypes.oneOf(["filled", "outlined", "standard"])
 } : void 0;
-const brand = {
-  primary: "#6C4CE7",
-  // roxo da plataforma
-  primaryHover: "#5a3ed4",
-  ink: "#111827",
-  muted: "#6b7280",
-  bg: "#f6f7fb",
-  surface: "#ffffff",
-  border: "#e5e7eb",
-  ring: "rgba(108,76,231,.25)"
-};
-const theme = createTheme({
-  palette: {
-    mode: "light",
-    primary: { main: brand.primary },
-    text: { primary: brand.ink, secondary: brand.muted },
-    background: { default: brand.bg, paper: brand.surface }
-  },
-  shape: { borderRadius: 10 },
-  typography: {
-    fontFamily: `"Inter","Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif`,
-    h6: { fontWeight: 700 },
-    button: { textTransform: "none", fontWeight: 700 }
-  },
-  components: {
-    MuiCard: {
-      styleOverrides: {
-        root: {
-          border: `1px solid ${brand.border}`,
-          boxShadow: "0 10px 30px rgba(2,6,23,.06)"
-        }
-      }
-    },
-    MuiTextField: {
-      defaultProps: { size: "medium" }
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          background: "#fff",
-          "& fieldset": { borderColor: brand.border },
-          "&:hover fieldset": { borderColor: brand.primary },
-          "&.Mui-focused fieldset": { borderColor: brand.primary, boxShadow: `0 0 0 3px ${brand.ring}` }
-        },
-        input: { paddingTop: 14, paddingBottom: 14 }
-      }
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: { borderRadius: 12, paddingBlock: 14 },
-        containedPrimary: { boxShadow: "0 10px 24px rgba(108,76,231,.22)" }
-      }
-    },
-    MuiDivider: {
-      styleOverrides: {
-        root: { borderColor: brand.border }
-      }
-    }
-  }
-});
 const BRL$1 = new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" });
-function OrderSummary({ amount, merchantName, sticky, items = [] }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Card,
-    {
-      elevation: 0,
-      sx: {
-        border: `1px solid ${brand.border}`,
-        position: "sticky",
-        top: 24,
-        minWidth: 400,
-        // largura mínima
-        height: "100%",
-        // estica até alinhar com o outro card
-        display: "flex",
-        flexDirection: "column"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { sx: { flexGrow: 1 }, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "subtitle2", color: "text.secondary", sx: { mb: 1 }, children: merchantName }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Enviou uma solicitação de pagamento" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { mb: 2 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.primary", sx: { mb: 0.5 }, children: "Descrição do produto ou serviço" }),
-          items.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { spacing: 1.2, sx: { mb: 1 }, children: items.map((p, i) => {
-            const qty = p.quantity ?? 1;
-            const line = p.unitPrice * qty;
-            return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
-                qty > 1 ? `${qty}× ` : "",
-                p.name
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: BRL$1.format(line) })
-            ] }, p.id ?? `${p.name}-${i}`);
-          }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { mb: 1 }, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "(1) Pagamento" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: BRL$1.format(amount) })
+function OrderSummary({ amount, merchantName, items = [] }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { sx: { flexGrow: 1 }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "subtitle2", color: "text.secondary", sx: { mb: 1 }, children: merchantName }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Enviou uma solicitação de pagamento" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { mb: 2 } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.primary", sx: { mb: 0.5 }, children: "Descrição do produto ou serviço" }),
+      items.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { spacing: 1.2, sx: { mb: 1 }, children: items.map((p, i) => {
+        const qty = p.quantidade ?? 1;
+        const line = p.preco * qty;
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+            qty > 1 ? `${qty}× ` : "",
+            p.nome
           ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { my: 2 } }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h5", sx: { fontWeight: 800 }, children: "Valor total" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h5", sx: { fontWeight: 800 }, children: BRL$1.format(amount) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CardActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "caption", color: "text.secondary", children: "Desenvolvido por SuportePOS | Pagamento Seguro" }) })
-      ]
-    }
-  );
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: BRL$1.format(line) })
+        ] }, p.id ?? `${p.nome}-${i}`);
+      }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { direction: "row", justifyContent: "space-between", sx: { mb: 1 }, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "(1) Pagamento" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: BRL$1.format(amount) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { my: 2 } }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h5", sx: { fontWeight: 800 }, children: "Valor total" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h5", sx: { fontWeight: 800 }, children: BRL$1.format(amount) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CardActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "caption", color: "text.secondary", children: "Desenvolvido por SuportePOS | Pagamento Seguro" }) })
+  ] });
 }
 function isValidCPF(cpf) {
   cpf = cpf.replace(/\D/g, "");
@@ -21762,20 +21685,20 @@ const UF_LIST = [
 ];
 function SplitCheckoutForm({
   merchantId,
-  orderId,
-  production,
-  amount,
+  codigoPedido,
+  producao,
+  valor,
   splits,
-  summaryItems,
+  produtos,
   merchantName,
-  customer,
+  cliente,
   installmentsOptions = [1, 2, 3, 6, 10, 12],
   onBack,
   onResponse,
   uuid
 }) {
-  const apiUrl = production ? "https://api-conciliapos-stag.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
-  const isSm = useMediaQuery("(max-width:900px)");
+  const apiUrl = producao ? "http://localhost:8003" : "http://localhost:8003";
+  useMediaQuery("(max-width:900px)");
   const [step, setStep] = useState("card");
   const maskCard = (v) => v.replace(/\D/g, "").trim();
   const maskExpiry = (v) => v.replace(/\D/g, "").slice(0, 6).replace(/(\d{2})(\d{0,4})/, (m, mm, yyyy) => yyyy ? `${mm}/${yyyy}` : mm);
@@ -21790,23 +21713,23 @@ function SplitCheckoutForm({
   const [cvv, setCvv] = useState("");
   const [installments, setInstallments] = useState(1);
   const [accessToken, setAccessToken] = useState("");
-  const [cep, setCep] = useState(customer?.cep ? maskCEP(customer.cep) : "");
-  const [address, setAddress] = useState(customer?.address ?? "");
-  const [number, setNumber] = useState(customer?.number ?? "");
-  const [complement, setComplement] = useState(customer?.complement ?? "");
-  const [neighborhood, setNeighborhood] = useState(customer?.neighborhood ?? "");
-  const [city, setCity] = useState(customer?.city ?? "");
-  const [uf, setUf] = useState(customer?.uf ?? "");
-  const [buyerName, setBuyerName] = useState(customer?.buyerName ?? "");
-  const [buyerEmail, setBuyerEmail] = useState(customer?.buyerEmail ?? "");
-  const [buyerPhone, setBuyerPhone] = useState(customer?.buyerPhone ?? "");
-  const [docType, setDocType] = useState(customer?.docType ?? "");
-  const [docNumber, setDocNumber] = useState(customer?.docNumber ?? "");
+  const [cep, setCep] = useState(cliente?.cep ? maskCEP(cliente.cep) : "");
+  const [address, setAddress] = useState(cliente?.endereco ?? "");
+  const [number, setNumber] = useState(cliente?.numero ?? "");
+  const [complement, setComplement] = useState(cliente?.complemento ?? "");
+  const [neighborhood, setNeighborhood] = useState(cliente?.bairro ?? "");
+  const [city, setCity] = useState(cliente?.cidade ?? "");
+  const [uf, setUf] = useState(cliente?.estado ?? "");
+  const [buyerName, setBuyerName] = useState(cliente?.nomeComprador ?? "");
+  const [buyerEmail, setBuyerEmail] = useState(cliente?.emailComprador ?? "");
+  const [buyerPhone, setBuyerPhone] = useState(cliente?.telefoneComprador ?? "");
+  const [docType, setDocType] = useState(cliente?.tipoDoc ?? "");
+  const [docNumber, setDocNumber] = useState(cliente?.numeroDoc ?? "");
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
   useEffect(() => {
     const script = document.createElement("script");
-    if (production) {
+    if (producao) {
       script.src = "https://www.pagador.com.br/post/scripts/silentorderpost-1.0.min.js";
     } else {
       script.src = "https://transactionsandbox.pagador.com.br/post/Scripts/silentorderpost-1.0.min.js";
@@ -21815,7 +21738,7 @@ function SplitCheckoutForm({
     document.body.appendChild(script);
     script.onload = async () => {
       try {
-        const res = await fetch(`${apiUrl}/api/token-cartao?merchantId=${merchantId}&production=${production}`);
+        const res = await fetch(`${apiUrl}/api/token-cartao?merchantId=${merchantId}&producao=${producao}`);
         const data = await res.json();
         setAccessToken(data?.access_token);
       } catch (err) {
@@ -21899,7 +21822,7 @@ function SplitCheckoutForm({
     setLoading(true);
     const options = {
       accessToken,
-      environment: production ? "production" : "sandbox",
+      environment: producao ? "production" : "sandbox",
       language: "PT",
       enableBinQuery: false,
       enableVerifyCard: false,
@@ -21913,15 +21836,15 @@ function SplitCheckoutForm({
             body: JSON.stringify({
               merchantId,
               // ou pegue dinamicamente
-              orderId,
-              paymentToken: response.CardToken ?? response.PaymentToken,
-              amount,
-              installments,
-              buyerName,
-              buyerEmail,
-              buyerPhone,
-              docType,
-              docNumber,
+              codigoPedido,
+              tokenPagamento: response.CardToken ?? response.PaymentToken,
+              valor,
+              parcelas: installments,
+              nomeComprador: buyerName,
+              emailComprador: buyerEmail,
+              telefoneComprador: buyerPhone,
+              tipoDoc: docType,
+              numeroDoc: docNumber,
               splits,
               cep,
               address,
@@ -21930,7 +21853,7 @@ function SplitCheckoutForm({
               neighborhood,
               city,
               state: uf,
-              production,
+              producao,
               uuid
             })
           });
@@ -21938,25 +21861,25 @@ function SplitCheckoutForm({
           onResponse?.(result);
         } catch (err) {
           console.error("Erro chamando backend:", err);
-          onResponse?.({ success: false, message: "Erro ao comunicar backend" });
+          onResponse?.({ successo: false, mensagem: "Erro ao comunicar backend" });
         } finally {
           setLoading(false);
         }
       },
       onError: (err) => {
         console.error("Erro SOP:", err);
-        onResponse?.({ success: false, message: "Erro SOP" });
+        onResponse?.({ successo: false, mensagem: "Erro SOP" });
         setLoading(false);
       },
       onInvalid: (fields) => {
         console.warn("Campos inválidos:", fields);
-        onResponse?.({ success: false, message: "Campos inválidos" });
+        onResponse?.({ successo: false, mensagem: "Campos inválidos" });
         setLoading(false);
       }
     };
     window.bpSop_silentOrderPost(options);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { bgcolor: "background.default", minHeight: "100vh" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 7, size: 7, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { display: step === "card" ? "block" : "none" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", sx: { mb: 2 }, children: "Pagamento com cartão de crédito" }),
@@ -22031,7 +21954,7 @@ function SplitCheckoutForm({
                 children: installmentsOptions.map((n) => /* @__PURE__ */ jsxRuntimeExports.jsxs(MenuItem, { value: n, children: [
                   n,
                   "x de R$ ",
-                  BRL.format(amount / n)
+                  BRL.format(valor / n)
                 ] }, n))
               }
             ),
@@ -22227,36 +22150,36 @@ function SplitCheckoutForm({
     /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 5, size: 5, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       OrderSummary,
       {
-        amount,
+        amount: valor,
         merchantName,
-        sticky: !isSm,
-        items: summaryItems
+        items: produtos
       }
     ) })
-  ] }) }) });
+  ] }) });
 }
 const ContentCopyIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2m0 16H8V7h11z"
 }), "ContentCopy");
 function SplitPixForm({
   merchantId,
-  orderId,
-  production,
-  amount,
+  codigoPedido,
+  producao,
+  valor,
   merchantName = "SUPORTEPOS",
-  summaryItems,
+  produtos,
   splits,
-  customer,
+  cliente,
   onBack,
   onResponse,
   uuid
 }) {
-  const apiUrl = production ? "https://api-conciliapos-stag.suportepos.com.br" : "https://api-conciliapos-stag.suportepos.com.br";
-  const isSm = useMediaQuery("(max-width:900px)");
+  console.log({ cliente });
+  const apiUrl = producao ? "http://localhost:8003" : "http://localhost:8003";
+  useMediaQuery("(max-width:900px)");
   const [copied, setCopied] = useState(false);
-  const [buyerName, setBuyerName] = useState(customer?.buyerName ?? "");
-  const [docType, setDocType] = useState(customer?.docType ?? "");
-  const [docNumber, setDocNumber] = useState(customer?.docNumber ?? "");
+  const [buyerName, setBuyerName] = useState(cliente?.nomeComprador ?? "");
+  const [docType, setDocType] = useState(cliente?.tipoDoc ?? "");
+  const [docNumber, setDocNumber] = useState(cliente?.numeroDoc ?? "");
   const [errors, setErrors] = useState({});
   const [loading, setLoading] = useState(false);
   const [pixData, setPixData] = useState(null);
@@ -22292,18 +22215,18 @@ function SplitPixForm({
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           merchantId,
-          orderId,
-          amount,
-          buyerName,
-          docType,
-          docNumber,
+          codigoPedido,
+          valor,
+          nomeComprador: buyerName,
+          tipoDoc: docType,
+          numeroDoc: docNumber,
           splits,
-          production,
+          producao,
           uuid
         })
       });
       const data = await res.json();
-      if (data.copyPasteCode && data.qrCodeSrc) {
+      if (data.codigo_copia_cola && data.qr_code) {
         setPixData(data);
       }
     } catch (err) {
@@ -22321,8 +22244,8 @@ function SplitPixForm({
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
           merchantId,
-          paymentId: pixData?.paymentId,
-          production
+          paymentId: pixData?.payment_id,
+          producao
         })
       });
       const result = await res.json();
@@ -22336,15 +22259,15 @@ function SplitPixForm({
     }
   };
   const copyToClipboard = async () => {
-    if (!pixData?.copyPasteCode) return;
+    if (!pixData?.codigo_copia_cola) return;
     try {
-      await navigator.clipboard.writeText(pixData.copyPasteCode);
+      await navigator.clipboard.writeText(pixData.codigo_copia_cola);
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { bgcolor: "background.default", minHeight: "100%", py: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 7, size: 7, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
       !pixData && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", sx: { mb: 2 }, children: "Preencha seus dados para gerar o PIX" }),
@@ -22439,7 +22362,7 @@ function SplitPixForm({
                   "img",
                   {
                     alt: "QR Code PIX",
-                    src: pixData.qrCodeSrc,
+                    src: pixData.qr_code,
                     style: { width: "100%", height: "100%", objectFit: "contain" }
                   }
                 )
@@ -22463,7 +22386,7 @@ function SplitPixForm({
               mb: 1.5,
               userSelect: "text"
             },
-            children: pixData.copyPasteCode
+            children: pixData.codigo_copia_cola
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -22495,30 +22418,89 @@ function SplitPixForm({
     /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 5, size: 5, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       OrderSummary,
       {
-        amount,
+        amount: valor,
         merchantName,
-        items: summaryItems,
-        sticky: !isSm
+        items: produtos
       }
     ) })
-  ] }) }) });
+  ] }) });
 }
+const brand = {
+  primary: "#6C4CE7",
+  // roxo da plataforma
+  primaryHover: "#5a3ed4",
+  ink: "#111827",
+  muted: "#6b7280",
+  bg: "#f6f7fb",
+  surface: "#ffffff",
+  border: "#e5e7eb",
+  ring: "rgba(108,76,231,.25)"
+};
+const theme = createTheme({
+  palette: {
+    mode: "light",
+    primary: { main: brand.primary },
+    text: { primary: brand.ink, secondary: brand.muted },
+    background: { default: brand.bg, paper: brand.surface }
+  },
+  shape: { borderRadius: 10 },
+  typography: {
+    fontFamily: `"Inter","Segoe UI",Roboto,Ubuntu,Helvetica,Arial,sans-serif`,
+    h6: { fontWeight: 700 },
+    button: { textTransform: "none", fontWeight: 700 }
+  },
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          border: `1px solid ${brand.border}`,
+          boxShadow: "0 10px 30px rgba(2,6,23,.06)"
+        }
+      }
+    },
+    MuiTextField: {
+      defaultProps: { size: "medium" }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          background: "#fff",
+          "& fieldset": { borderColor: brand.border },
+          "&:hover fieldset": { borderColor: brand.primary },
+          "&.Mui-focused fieldset": { borderColor: brand.primary, boxShadow: `0 0 0 3px ${brand.ring}` }
+        },
+        input: { paddingTop: 14, paddingBottom: 14 }
+      }
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: { borderRadius: 12, paddingBlock: 14 },
+        containedPrimary: { boxShadow: "0 10px 24px rgba(108,76,231,.22)" }
+      }
+    },
+    MuiDivider: {
+      styleOverrides: {
+        root: { borderColor: brand.border }
+      }
+    }
+  }
+});
 function CheckoutFlowContent({
   step,
   setStep,
-  amount,
+  valor,
   merchantName,
-  products,
+  produtos,
   splits,
-  customer,
+  cliente,
   merchantId,
-  orderId,
+  codigoPedido,
   uuid,
-  production,
+  producao,
   onResponse,
   paymentEnabled
 }) {
-  const isSm = useMediaQuery("(max-width:900px)");
+  useMediaQuery("(max-width:900px)");
   const primaryButtons = [];
   const listItems = [];
   if (paymentEnabled?.creditCard) {
@@ -22557,13 +22539,13 @@ function CheckoutFlowContent({
       SplitCheckoutForm,
       {
         merchantId,
-        orderId,
-        production,
-        amount,
+        codigoPedido,
+        producao,
+        valor,
         splits,
-        customer,
+        cliente,
         merchantName,
-        summaryItems: products,
+        produtos,
         onBack: () => setStep("select"),
         onResponse,
         uuid
@@ -22575,54 +22557,36 @@ function CheckoutFlowContent({
       SplitPixForm,
       {
         merchantId,
-        orderId,
-        production,
-        amount,
+        codigoPedido,
+        producao,
+        valor,
         splits,
-        customer,
+        cliente,
         merchantName,
-        summaryItems: products,
+        produtos,
         onBack: () => setStep("select"),
         onResponse,
         uuid
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Grid,
-    {
-      container: true,
-      spacing: 4,
-      justifyContent: "center",
-      alignItems: "stretch",
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 7, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: {
-          border: `1px solid ${brand.border}`,
-          position: "sticky",
-          top: 24,
-          minWidth: 400,
-          // 🔥 largura mínima
-          height: "100%"
-          // estica até alinhar com o outro card
-        }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", sx: { mb: 2 }, children: "Como você quer pagar?" }),
-          noneActive && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: "Nenhum meio de pagamento está disponível no momento." }),
-          primaryButtons.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, sx: { mb: 2 }, children: primaryButtons }),
-          primaryButtons.length > 0 && listItems.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { my: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "ou" }) }),
-          listItems.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(List, { sx: { mt: primaryButtons.length ? 1 : 0 }, children: listItems })
-        ] }) }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 5, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          OrderSummary,
-          {
-            amount,
-            merchantName,
-            sticky: !isSm,
-            items: products
-          }
-        ) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Container, { maxWidth: "lg", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Grid, { container: true, spacing: 3, justifyContent: "center", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 7, size: 7, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: { border: "1px solid #e2e8f0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", sx: { mb: 2 }, children: "Como você quer pagar?" }),
+      noneActive && /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { severity: "warning", sx: { mb: 2 }, children: "Nenhum meio de pagamento está disponível no momento." }),
+      primaryButtons.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { direction: { xs: "column", sm: "row" }, spacing: 2, sx: { mb: 2 }, children: primaryButtons }),
+      primaryButtons.length > 0 && listItems.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Divider, { sx: { my: 1 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", color: "text.secondary", children: "ou" }) }),
+      listItems.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(List, { sx: { mt: primaryButtons.length ? 1 : 0 }, children: listItems })
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 5, size: 5, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      OrderSummary,
+      {
+        amount: valor,
+        merchantName,
+        items: produtos
+      }
+    ) })
+  ] }) });
 }
 const itemStyle = {
   border: `1px solid ${brand.border}`,
@@ -22636,10 +22600,10 @@ const itemStyle = {
 function CheckoutFlow(props) {
   const [step, setStep] = useState("select");
   const amountFromItems = useMemo(
-    () => props.products.reduce((sum, p) => sum + p.unitPrice * (p.quantity ?? 1), 0),
-    [props.products]
+    () => props.produtos.reduce((sum, p) => sum + p.preco * (p.quantidade ?? 1), 0),
+    [props.produtos]
   );
-  const amount = props.amountOverride ?? amountFromItems;
+  const valor = props.valorTotal ?? amountFromItems;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     Box,
     {
@@ -22652,35 +22616,21 @@ function CheckoutFlow(props) {
         py: 4
       },
       children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Container,
+        CheckoutFlowContent,
         {
-          maxWidth: false,
-          sx: {
-            maxWidth: "1000px",
-            // define largura máxima maior
-            width: "100%"
-          },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            CheckoutFlowContent,
-            {
-              ...props,
-              step,
-              setStep,
-              amount,
-              paymentEnabled: {
-                creditCard: true,
-                pix: true
-              }
-            }
-          )
+          ...props,
+          step,
+          setStep,
+          valor,
+          paymentEnabled: {
+            creditCard: true,
+            pix: true
+          }
         }
       )
     }
   ) });
 }
-({
-  border: `1px solid ${brand.border}`
-});
 export {
   CheckoutFlow,
   CheckoutFlowContent,