@suportepos/split-checkout 0.3.0 → 0.3.2

package/dist/index.es.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import React__default, { isValidElement, cloneElement, Children, useState, useEffect, useMemo } from "react";
 import { Global, ThemeContext as ThemeContext$1, keyframes, css } from "@emotion/react";
 import emStyled from "@emotion/styled";
+import { CardActions } from "@mui/material";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 function getDefaultExportFromCjs(x) {
@@ -21639,54 +21640,49 @@ const theme = createTheme({
 });
 const BRL$1 = new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" });
 function OrderSummary({ amount, merchantName, sticky, items = [] }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Card,
     {
       elevation: 0,
       sx: {
-        background: "#f9fafb",
         border: `1px solid ${brand.border}`,
         position: "sticky",
         top: 24,
         minWidth: 400,
-        // 🔥 largura mínima
-        height: "100%"
+        // largura mínima
+        height: "100%",
         // estica até alinhar com o outro card
+        display: "flex",
+        flexDirection: "column"
       },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(CardContent, { 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) })
-        ] }),
-        /* @__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) })
+      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) })
+          ] }),
+          /* @__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(
-          Typography,
-          {
-            variant: "caption",
-            color: "text.secondary",
-            sx: { display: "block", mt: 2, textAlign: "center" },
-            children: "Desenvolvido por SuportePOS | Pagamento Seguro"
-          }
-        )
-      ] })
+        /* @__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" }) })
+      ]
     }
   );
 }
@@ -21960,7 +21956,7 @@ function SplitCheckoutForm({
     };
     window.bpSop_silentOrderPost(options);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme, children: /* @__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(Box, { sx: { bgcolor: "background.default", minHeight: "100vh" }, children: /* @__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" }),
@@ -22237,7 +22233,7 @@ function SplitCheckoutForm({
         items: summaryItems
       }
     ) })
-  ] }) }) }) });
+  ] }) }) });
 }
 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"
@@ -22348,7 +22344,7 @@ function SplitPixForm({
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeProvider, { theme, children: /* @__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(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: [
     /* @__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" }),
@@ -22505,7 +22501,7 @@ function SplitPixForm({
         sticky: !isSm
       }
     ) })
-  ] }) }) }) });
+  ] }) }) });
 }
 function CheckoutFlowContent({
   step,
@@ -22601,7 +22597,6 @@ function CheckoutFlowContent({
       alignItems: "stretch",
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Grid, { item: true, xs: 12, md: 7, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Card, { elevation: 0, sx: {
-          background: "#f9fafb",
           border: `1px solid ${brand.border}`,
           position: "sticky",
           top: 24,
@@ -22688,6 +22683,7 @@ function CheckoutFlow(props) {
 });
 export {
   CheckoutFlow,
+  CheckoutFlowContent,
   OrderSummary,
   SplitCheckoutForm as SplitCardForm,
   SplitPixForm,