@blocklet/payment-react 1.14.21 → 1.14.23

package/es/payment/form/address.js

@@ -1,49 +1,50 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { Fade, Stack, Typography } from "@mui/material";
+import { Fade, FormLabel, InputAdornment, Stack } from "@mui/material";
 import { Controller, useFormContext } from "react-hook-form";
-import { CountrySelector } from "react-international-phone";
 import FormInput from "../../components/input.js";
-export default function AddressForm({ mode, stripe }) {
+import CountrySelect from "../../components/country-select.js";
+AddressForm.defaultProps = {
+  sx: {}
+};
+export default function AddressForm({ mode, stripe, sx = {} }) {
   const { t } = useLocaleContext();
-  const { control, setValue } = useFormContext();
+  const { control } = useFormContext();
   if (mode === "required") {
-    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t(`payment.checkout.billing.${mode}`) }),
+    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t(`payment.checkout.billing.${mode}`) }),
       /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
-        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, children: [
-          /* @__PURE__ */ jsx(
-            Controller,
-            {
-              name: "billing_address.country",
-              control,
-              render: ({ field }) => /* @__PURE__ */ jsx(
-                CountrySelector,
+        /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
+          FormInput,
+          {
+            name: "billing_address.postal_code",
+            rules: { required: t("payment.checkout.required") },
+            errorPosition: "right",
+            variant: "outlined",
+            placeholder: t("payment.checkout.billing.postal_code"),
+            InputProps: {
+              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+                Controller,
                 {
-                  selectedCountry: field.value,
-                  onSelect: ({ iso2 }) => setValue(field.name, iso2),
-                  buttonStyle: {
-                    width: "64px",
-                    height: "40px",
-                    border: "1px solid #ccc",
-                    marginLeft: -1,
-                    marginTop: -1
-                  }
+                  name: "billing_address.country",
+                  control,
+                  render: ({ field }) => /* @__PURE__ */ jsx(
+                    CountrySelect,
+                    {
+                      ...field,
+                      sx: {
+                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                          borderColor: "transparent"
+                        }
+                      }
+                    }
+                  )
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            FormInput,
-            {
-              name: "billing_address.postal_code",
-              rules: { required: t("payment.checkout.required") },
-              errorPosition: "right",
-              variant: "outlined",
-              placeholder: t("payment.checkout.billing.postal_code")
+              ) })
             }
-          )
-        ] }),
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.state") }),
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -54,6 +55,7 @@ export default function AddressForm({ mode, stripe }) {
             placeholder: t("payment.checkout.billing.state")
           }
         ),
+        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.line1") }),
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -64,6 +66,7 @@ export default function AddressForm({ mode, stripe }) {
             placeholder: t("payment.checkout.billing.line1")
           }
         ),
+        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.billing.city") }),
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -78,42 +81,39 @@ export default function AddressForm({ mode, stripe }) {
     ] }) });
   }
   if (stripe) {
-    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { mb: 1, color: "text.primary", fontWeight: 600 }, children: t(`payment.checkout.billing.${mode}`) }),
-      /* @__PURE__ */ jsx(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0, children: [
-        /* @__PURE__ */ jsx(
-          Controller,
-          {
-            name: "billing_address.country",
-            control,
-            render: ({ field }) => /* @__PURE__ */ jsx(
-              CountrySelector,
+    return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-address cko-payment-form", sx, children: [
+      /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t(`payment.checkout.billing.${mode}`) }),
+      /* @__PURE__ */ jsx(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 0, children: /* @__PURE__ */ jsx(
+        FormInput,
+        {
+          name: "billing_address.postal_code",
+          rules: { required: t("payment.checkout.required") },
+          errorPosition: "right",
+          variant: "outlined",
+          placeholder: t("payment.checkout.billing.postal_code"),
+          wrapperStyle: { height: "40px" },
+          InputProps: {
+            startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx(
+              Controller,
               {
-                selectedCountry: field.value,
-                onSelect: ({ iso2 }) => setValue(field.name, iso2),
-                buttonStyle: {
-                  width: "64px",
-                  height: "40px",
-                  border: "1px solid #ccc",
-                  marginLeft: -1,
-                  marginTop: -1
-                }
+                name: "billing_address.country",
+                control,
+                render: ({ field }) => /* @__PURE__ */ jsx(
+                  CountrySelect,
+                  {
+                    ...field,
+                    sx: {
+                      "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                        borderColor: "transparent"
+                      }
+                    }
+                  }
+                )
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          FormInput,
-          {
-            name: "billing_address.postal_code",
-            rules: { required: t("payment.checkout.required") },
-            errorPosition: "right",
-            variant: "outlined",
-            placeholder: t("payment.checkout.billing.postal_code"),
-            wrapperStyle: { height: "40px" }
+            ) })
           }
-        )
-      ] }) })
+        }
+      ) }) })
     ] }) });
   }
   return null;

package/es/payment/form/currency.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Avatar, Card, Stack, Typography } from "@mui/material";
+import { Avatar, Card, Radio, Stack, Typography } from "@mui/material";
 import { styled } from "@mui/system";
 export default function CurrencySelector({ value, currencies, onChange }) {
   return /* @__PURE__ */ jsx(
@@ -8,8 +8,9 @@ export default function CurrencySelector({ value, currencies, onChange }) {
       count: currencies.length,
       style: {
         display: currencies.length > 1 ? "grid" : "block",
-        gridTemplateColumns: "50% 50%",
-        width: "100%"
+        width: "100%",
+        gap: 12,
+        gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))"
       },
       children: currencies.map((x, i) => {
         const selected = i === value;
@@ -19,12 +20,30 @@ export default function CurrencySelector({ value, currencies, onChange }) {
             variant: "outlined",
             onClick: () => onChange(i),
             className: selected ? "cko-payment-card" : "cko-payment-card-unselect",
-            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", children: [
-              /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 30, height: 30, marginRight: "10px" } }),
+            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", sx: { position: "relative" }, children: [
+              /* @__PURE__ */ jsx(Avatar, { src: x.logo, alt: x.name, sx: { width: 40, height: 40, marginRight: "12px" } }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx(Typography, { variant: "h5", component: "div", sx: { fontSize: "18px" }, children: x.symbol }),
-                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.secondary", gutterBottom: true, children: x.method.name })
-              ] })
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    variant: "h5",
+                    component: "div",
+                    sx: { fontSize: "16px", color: "text.primary", fontWeight: "500" },
+                    children: x.symbol
+                  }
+                ),
+                /* @__PURE__ */ jsx(Typography, { sx: { fontSize: 14 }, color: "text.lighter", gutterBottom: true, children: x.method.name })
+              ] }),
+              /* @__PURE__ */ jsx(
+                Radio,
+                {
+                  checked: selected,
+                  sx: {
+                    position: "absolute",
+                    right: 0
+                  }
+                }
+              )
             ] })
           },
           x.id
@@ -36,32 +55,27 @@ export default function CurrencySelector({ value, currencies, onChange }) {
 const Root = styled("section")`
   .cko-payment-card {
     position: relative;
-    border: 1px solid ${(props) => props.theme.palette.primary.main};
+    border: 1px solid var(--stroke-border-interactive, #0086ff);
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
-  .cko-payment-card::before {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    border: 12px solid ${(props) => props.theme.palette.primary.main};
-    border-top-color: transparent;
-    border-left-color: transparent;
-  }
+  // .cko-payment-card::before {
+  //   content: '';
+  //   position: absolute;
+  //   right: 0;
+  //   bottom: 0;
+  //   border: 12px solid ${(props) => props.theme.palette.primary.main};
+  //   border-top-color: transparent;
+  //   border-left-color: transparent;
+  // }
 
   .cko-payment-card-unselect {
     border: 1px solid #ddd;
     padding: 4px 8px;
-    margin: 8px 0 0;
     cursor: pointer;
-  }
-
-  .cko-payment-card:nth-child(odd),
-  .cko-payment-card-unselect:nth-child(odd) {
-    margin-right: ${(props) => props.count > 1 ? 8 : 0}px;
+    background: var(--backgrounds-bg-field, #f9fafb);
   }
 
   .cko-payment-card::after {

package/es/payment/form/index.d.ts

@@ -2,7 +2,7 @@
 import 'react-international-phone/style.css';
 import { CheckoutCallbacks, CheckoutContext } from '../../types';
 type PageData = CheckoutContext & CheckoutCallbacks;
-declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, mode, action, }: PageData): import("react").JSX.Element;
+declare function PaymentForm({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, onPaid, onError, action, }: PageData): import("react").JSX.Element;
 declare namespace PaymentForm {
     var defaultProps: {};
 }

package/es/payment/form/index.js

@@ -1,11 +1,10 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import "react-international-phone/style.css";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { useTheme } from "@arcblock/ux/lib/Theme";
 import Toast from "@arcblock/ux/lib/Toast";
 import { LoadingButton } from "@mui/lab";
-import { Fade, InputAdornment, Stack, Typography } from "@mui/material";
-import { useCreation, useMemoizedFn, useSetState, useSize } from "ahooks";
+import { Divider, Fade, FormLabel, Stack, Typography } from "@mui/material";
+import { useMemoizedFn, useSetState } from "ahooks";
 import { PhoneNumberUtil } from "google-libphonenumber";
 import pWaitFor from "p-wait-for";
 import { useEffect, useMemo, useState } from "react";
@@ -26,7 +25,6 @@ import {
   getQueryParams,
   getStatementDescriptor
 } from "../../libs/util.js";
-import UserButtons from "./addon.js";
 import AddressForm from "./address.js";
 import CurrencySelector from "./currency.js";
 import PhoneInput from "./phone.js";
@@ -60,12 +58,11 @@ export default function PaymentForm({
   customer,
   onPaid,
   onError,
-  mode,
+  // mode,
   action
 }) {
-  const theme = useTheme();
   const { t } = useLocaleContext();
-  const { session, connect } = usePaymentContext();
+  const { session, connect, payable } = usePaymentContext();
   const subscription = useSubscription("events");
   const { control, getValues, setValue, handleSubmit } = useFormContext();
   const quantityInventoryStatus = useMemo(() => {
@@ -129,15 +126,6 @@ export default function PaymentForm({
     setValue("payment_currency", currencies[paymentCurrencyIndex]?.id);
   }, [paymentCurrencyIndex, currencies, setValue]);
   const paymentMethod = useWatch({ control, name: "payment_method" });
-  const domSize = useSize(document.body);
-  const isColumnLayout = useCreation(() => {
-    if (domSize) {
-      if (domSize?.width <= theme.breakpoints.values.md) {
-        return true;
-      }
-    }
-    return false;
-  }, [domSize, theme]);
   const afterUserLoggedIn = useMemoizedFn(() => {
     if (hasDidWallet(session.user)) {
       handleSubmit(onFormSubmit, onFormError)();
@@ -308,11 +296,55 @@ export default function PaymentForm({
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-contact", children: [
-      /* @__PURE__ */ jsxs(Stack, { direction: "row", sx: { mb: 1 }, alignItems: "center", justifyContent: "space-between", children: [
-        /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontWeight: 600 }, children: t("payment.checkout.contact") }),
-        isColumnLayout || mode !== "standalone" ? null : /* @__PURE__ */ jsx(UserButtons, {})
-      ] }),
-      /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          title: t("payment.checkout.paymentDetails"),
+          sx: {
+            color: "text.primary",
+            fontSize: {
+              xs: "18px",
+              md: "24px"
+            },
+            fontWeight: "700",
+            lineHeight: "32px",
+            mb: 2.5
+          },
+          children: t("payment.checkout.paymentDetails")
+        }
+      ),
+      /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
+        /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
+          Controller,
+          {
+            name: "payment_currency",
+            control,
+            render: () => /* @__PURE__ */ jsx(
+              CurrencySelector,
+              {
+                value: paymentCurrencyIndex,
+                currencies,
+                onChange: setPaymentCurrencyIndex
+              }
+            )
+          }
+        ) }),
+        state.stripePaying && state.stripeContext && /* @__PURE__ */ jsx(
+          StripeCheckout,
+          {
+            clientSecret: state.stripeContext.client_secret,
+            intentType: state.stripeContext.intent_type,
+            publicKey: method.settings.stripe?.publishable_key,
+            customer: state.customer,
+            mode: checkoutSession.mode,
+            onConfirm: onStripeConfirm,
+            onCancel: onStripeCancel
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { mb: 1 }, alignItems: "center", justifyContent: "space-between" }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "column", className: "cko-payment-form", spacing: 0, sx: { flex: 1, overflow: "auto" }, children: [
+        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.name") }),
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -321,12 +353,10 @@ export default function PaymentForm({
             errorPosition: "right",
             rules: {
               required: t("payment.checkout.required")
-            },
-            InputProps: {
-              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: t("payment.checkout.customer.name") })
             }
           }
         ),
+        /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.email") }),
         /* @__PURE__ */ jsx(
           FormInput,
           {
@@ -336,65 +366,43 @@ export default function PaymentForm({
             rules: {
               required: t("payment.checkout.required"),
               validate: (x) => isEmail(x) ? true : t("payment.checkout.invalid")
-            },
-            InputProps: {
-              startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: t("payment.checkout.customer.email") })
             }
           }
         ),
-        checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */ jsx(
-          PhoneInput,
-          {
-            name: "customer_phone",
-            variant: "outlined",
-            errorPosition: "right",
-            placeholder: "Phone number",
-            rules: {
-              required: t("payment.checkout.required"),
-              validate: (x) => {
-                try {
-                  const parsed = phoneUtil.parseAndKeepRawInput(x);
-                  return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
-                } catch {
-                  return t("payment.checkout.invalid");
+        checkoutSession.phone_number_collection?.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FormLabel, { className: "base-label", children: t("payment.checkout.customer.phone") }),
+          /* @__PURE__ */ jsx(
+            PhoneInput,
+            {
+              name: "customer_phone",
+              variant: "outlined",
+              errorPosition: "right",
+              placeholder: "Phone number",
+              rules: {
+                required: t("payment.checkout.required"),
+                validate: (x) => {
+                  try {
+                    const parsed = phoneUtil.parseAndKeepRawInput(x);
+                    return phoneUtil.isValidNumber(parsed) ? true : t("payment.checkout.invalid");
+                  } catch {
+                    return t("payment.checkout.invalid");
+                  }
                 }
               }
             }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          AddressForm,
+          {
+            mode: checkoutSession.billing_address_collection,
+            stripe: method?.type === "stripe",
+            sx: { marginTop: "0 !important" }
           }
         )
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx(AddressForm, { mode: checkoutSession.billing_address_collection, stripe: method?.type === "stripe" }),
-    /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { direction: "column", alignItems: "flex-start", className: "cko-payment-methods", children: [
-      /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary", fontWeight: 600 }, children: t("payment.checkout.method") }),
-      /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { width: "100%" }, children: /* @__PURE__ */ jsx(
-        Controller,
-        {
-          name: "payment_currency",
-          control,
-          render: () => /* @__PURE__ */ jsx(
-            CurrencySelector,
-            {
-              value: paymentCurrencyIndex,
-              currencies,
-              onChange: setPaymentCurrencyIndex
-            }
-          )
-        }
-      ) }),
-      state.stripePaying && state.stripeContext && /* @__PURE__ */ jsx(
-        StripeCheckout,
-        {
-          clientSecret: state.stripeContext.client_secret,
-          intentType: state.stripeContext.intent_type,
-          publicKey: method.settings.stripe?.publishable_key,
-          customer: state.customer,
-          mode: checkoutSession.mode,
-          onConfirm: onStripeConfirm,
-          onCancel: onStripeCancel
-        }
-      )
-    ] }) }),
+    /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
     /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-payment-submit", children: [
       /* @__PURE__ */ jsx(
         LoadingButton,
@@ -405,18 +413,12 @@ export default function PaymentForm({
           className: "cko-submit-button",
           onClick: onAction,
           fullWidth: true,
-          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus,
+          disabled: state.submitting || state.paying || state.stripePaying || !quantityInventoryStatus || !payable,
           loading: state.submitting || state.paying,
           children: state.submitting || state.paying ? t("payment.checkout.processing") : buttonText
         }
       ),
-      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(
-        Typography,
-        {
-          sx: { mt: 1, color: "text.secondary", fontSize: "0.9rem", lineHeight: "1.1rem", textAlign: "center" },
-          children: t("payment.checkout.confirm", { payee })
-        }
-      )
+      ["subscription", "setup"].includes(checkoutSession.mode) && /* @__PURE__ */ jsx(Typography, { sx: { mt: 2.5, color: "text.lighter", fontSize: "0.9rem", lineHeight: "1.1rem" }, children: t("payment.checkout.confirm", { payee }) })
     ] }) }),
     state.customerLimited && /* @__PURE__ */ jsx(
       ConfirmDialog,

package/es/payment/form/phone.js

@@ -1,11 +1,12 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { InputAdornment, MenuItem, Select, Typography } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { InputAdornment } from "@mui/material";
 import omit from "lodash/omit";
 import { useEffect } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
-import { FlagEmoji, defaultCountries, parseCountry, usePhoneInput } from "react-international-phone";
+import { defaultCountries, usePhoneInput } from "react-international-phone";
 import FormInput from "../../components/input.js";
 import { isValidCountry } from "../../libs/util.js";
+import CountrySelect from "../../components/country-select.js";
 export default function PhoneInput({ ...props }) {
   const countryFieldName = props.countryFieldName || "billing_address.country";
   const { control, getValues, setValue } = useFormContext();
@@ -16,6 +17,7 @@ export default function PhoneInput({ ...props }) {
     countries: defaultCountries,
     onChange: (data) => {
       setValue(props.name, data.phone);
+      setValue(countryFieldName, data.country);
     }
   });
   const userCountry = useWatch({ control, name: countryFieldName });
@@ -24,9 +26,9 @@ export default function PhoneInput({ ...props }) {
       setCountry(userCountry);
     }
   }, [userCountry]);
-  const onCountryChange = (e) => {
-    setCountry(e.target.value);
-    setValue(countryFieldName, e.target.value);
+  const onCountryChange = (v) => {
+    setCountry(v);
+    setValue(countryFieldName, v);
   };
   return (
     // @ts-ignore
@@ -39,54 +41,16 @@ export default function PhoneInput({ ...props }) {
         inputRef,
         InputProps: {
           startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", style: { marginRight: "2px", marginLeft: "-8px" }, children: /* @__PURE__ */ jsx(
-            Select,
+            CountrySelect,
             {
-              MenuProps: {
-                style: {
-                  height: "300px",
-                  width: "360px",
-                  top: "10px",
-                  left: "-34px"
-                },
-                transformOrigin: {
-                  vertical: "top",
-                  horizontal: "left"
-                }
-              },
-              sx: {
-                width: "max-content",
-                // Remove default outline (display only on focus)
-                fieldset: {
-                  display: "none"
-                },
-                '&.Mui-focused:has(div[aria-expanded="false"])': {
-                  fieldset: {
-                    display: "block"
-                  }
-                },
-                // Update default spacing
-                ".MuiSelect-select": {
-                  padding: "8px",
-                  paddingRight: "24px !important"
-                },
-                svg: {
-                  right: 0
-                }
-              },
               value: country,
               onChange: onCountryChange,
-              renderValue: (code) => /* @__PURE__ */ jsx(FlagEmoji, { iso2: code, style: { display: "flex" } }),
-              children: defaultCountries.map((c) => {
-                const parsed = parseCountry(c);
-                return /* @__PURE__ */ jsxs(MenuItem, { value: parsed.iso2, children: [
-                  /* @__PURE__ */ jsx(FlagEmoji, { iso2: parsed.iso2, style: { marginRight: "8px" } }),
-                  /* @__PURE__ */ jsx(Typography, { marginRight: "8px", children: parsed.name }),
-                  /* @__PURE__ */ jsxs(Typography, { color: "gray", children: [
-                    "+",
-                    parsed.dialCode
-                  ] })
-                ] }, parsed.iso2);
-              })
+              name: countryFieldName,
+              sx: {
+                "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+                  borderColor: "transparent"
+                }
+              }
             }
           ) })
         },

package/es/payment/index.d.ts

@@ -4,24 +4,17 @@ import { CheckoutCallbacks, CheckoutContext } from '../types';
 type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
+    showCheckoutSummary?: boolean;
 };
-declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, error, mode, onPaid, onError, onChange, goBack, action, }: Props): import("react").JSX.Element;
+declare function Payment({ checkoutSession, paymentMethods, paymentIntent, paymentLink, customer, completed, mode, onPaid, onError, onChange, goBack, action, showCheckoutSummary, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;
         error: null;
+        showCheckoutSummary: boolean;
     };
 }
 export default Payment;
-type MainProps = CheckoutContext & CheckoutCallbacks & {
-    completed?: boolean;
-};
-export declare function PaymentInner({ checkoutSession, paymentMethods, paymentLink, paymentIntent, customer, completed, mode, onPaid, onError, onChange, goBack, action, }: MainProps): import("react").JSX.Element;
-export declare namespace PaymentInner {
-    var defaultProps: {
-        completed: boolean;
-    };
-}
 export declare const Root: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme> & {