@blocklet/payment-react 1.14.21 → 1.14.22

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

@@ -5,7 +5,7 @@ type Props = CheckoutContext & CheckoutCallbacks & {
     completed?: boolean;
     error?: any;
 };
-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, }: Props): import("react").JSX.Element;
 declare namespace Payment {
     var defaultProps: {
         completed: boolean;
@@ -13,15 +13,6 @@ declare namespace Payment {
     };
 }
 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> & {