@blocklet/payment-react 1.18.37 → 1.18.38

package/lib/checkout/donate.js

@@ -77,11 +77,12 @@ function DonateDetails({
       sx: {
         padding: "6px",
         "&:hover": {
-          backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)",
+          backgroundColor: theme => theme.palette.grey[100],
           transition: "background-color 200ms linear",
           cursor: "pointer"
         },
-        borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)",
+        borderBottom: "1px solid",
+        borderColor: "grey.100",
         display: "flex",
         justifyContent: "space-between",
         alignItems: "center"
@@ -212,12 +213,12 @@ function SupporterAvatar({
         pr: 1,
         ml: -1,
         borderRadius: "8px",
-        backgroundColor: "#f4f4f5",
+        backgroundColor: "grey.100",
         height: "24px",
         ...(showDonateDetails ? {
           cursor: "pointer",
           "&:hover": {
-            backgroundColor: "#e5e7eb"
+            backgroundColor: "grey.200"
           }
         } : {})
       },
@@ -521,7 +522,8 @@ function CheckoutDonateInner({
             display: "flex",
             justifyContent: "center",
             alignItems: "center",
-            backgroundColor: "rgba(255, 255, 255, 0.7)"
+            backgroundColor: "background.paper",
+            opacity: 0.8
           },
           children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.CircularProgress, {})
         }), /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
@@ -569,12 +571,8 @@ function CheckoutDonateInner({
       variant: donateSettings.appearance?.button?.variant || "outlined",
       sx: {
         ...(!donateSettings.appearance?.button?.variant ? {
-          color: "var(--foregrounds-fg-base, #010714)",
-          borderColor: "var(--stroke-button-secondary-border, #E5E7EB)",
-          "&:hover": {
-            backgroundColor: "var(--buttons-button-neutral-hover, #F3F4F6)",
-            borderColor: "var(--stroke-button-secondary-border, #E5E7EB)"
-          }
+          color: "primary.main",
+          borderColor: "grey.200"
         } : {}),
         // @ts-ignore
         ...(donateSettings.appearance?.button?.sx || {})
@@ -691,7 +689,8 @@ function CheckoutDonateInner({
       sx: {
         ".MuiDialogContent-root": {
           padding: "16px 24px",
-          borderTop: "1px solid var(--stroke-border-base, #EFF1F5)",
+          borderTop: "1px solid",
+          borderColor: "grey.100",
           width: "100%"
         },
         ".ux-dialog_header": {

package/lib/components/blockchain/tx.js

@@ -44,7 +44,9 @@ function TxLink(props) {
         spacing: 1,
         children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
           component: "span",
-          color: "text.link",
+          sx: {
+            color: "text.link"
+          },
           children: text.length > 40 ? [text.slice(0, 6), text.slice(-6)].join("...") : text
         }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.OpenInNewOutlined, {
           fontSize: "small"

package/lib/components/country-select.js

@@ -218,13 +218,13 @@ const CountrySelect = (0, _react.forwardRef)(({
             display: "flex",
             alignItems: "center",
             "&.Mui-selected": {
-              backgroundColor: "rgba(0, 0, 0, 0.04)"
+              backgroundColor: "primary.lighter"
             },
             "&:hover": {
-              backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)"
+              backgroundColor: "grey.100"
             },
             ...(isFocused ? {
-              backgroundColor: "var(--backgrounds-bg-highlight, #eff6ff)",
+              backgroundColor: "grey.100",
               outline: "none"
             } : {})
           },
@@ -387,6 +387,7 @@ const CountrySelect = (0, _react.forwardRef)(({
           position: "absolute",
           bottom: 0,
           m: 0,
+          p: 0,
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
           width: "100%"
@@ -412,7 +413,9 @@ const CountrySelect = (0, _react.forwardRef)(({
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.DialogContent, {
         sx: {
-          p: 0
+          "&.MuiDialogContent-root": {
+            p: 0
+          }
         },
         children: countryListContent
       })]

package/lib/components/over-due-invoice-payment.js

@@ -52,6 +52,7 @@ function OverdueInvoicePayment({
     t,
     locale
   } = (0, _context.useLocaleContext)();
+  const theme = (0, _material.useTheme)();
   const {
     connect,
     session
@@ -415,7 +416,7 @@ function OverdueInvoicePayment({
               onClick: handleViewDetailClick,
               rel: "noreferrer",
               style: {
-                color: "var(--foregrounds-fg-interactive, 0086FF)"
+                color: theme.palette.text.link
               },
               children: getDetailLinkText()
             })]
@@ -443,7 +444,7 @@ function OverdueInvoicePayment({
               rel: "noreferrer",
               onClick: handleViewDetailClick,
               style: {
-                color: "var(--foregrounds-fg-interactive, 0086FF)"
+                color: theme.palette.text.link
               },
               children: getDetailLinkText()
             })]
@@ -460,9 +461,10 @@ function OverdueInvoicePayment({
             sx: {
               py: 1,
               px: 0.5,
-              borderBottom: "1px solid var(--foregrounds-fg-border, #E0E0E0)",
+              borderBottom: "1px solid",
+              borderColor: "grey.200",
               "&:hover": {
-                background: "var(--backgrounds-bg-highlight, #eff6ff)"
+                backgroundColor: () => theme.palette.grey[100]
               },
               mt: 0
             },

package/lib/components/pricing-table.js

@@ -250,7 +250,7 @@ function PricingTable({
               borderRadius: "36px",
               height: "40px",
               boxSizing: "border-box",
-              backgroundColor: "#f1f3f5",
+              backgroundColor: "grey.100",
               border: 0
             },
             onChange: (_, value) => {
@@ -268,11 +268,14 @@ function PricingTable({
                 textTransform: "capitalize",
                 padding: "5px 12px",
                 fontSize: "13px",
-                backgroundColor: x === state.interval ? "#fff !important" : "#f1f3f5 !important",
+                backgroundColor: ({
+                  palette
+                }) => x === state.interval ? `${palette.background.default} !important` : `${palette.grey[100]} !important`,
                 border: "0px",
                 "&.Mui-selected": {
                   borderRadius: "9999px !important",
-                  border: "1px solid #e5e7eb"
+                  border: "1px solid",
+                  borderColor: "divider"
                 }
               },
               children: (0, _util2.formatRecurring)(recurring[x], true, "", locale)
@@ -334,13 +337,13 @@ function PricingTable({
               cursor: "pointer",
               borderWidth: "1px",
               borderStyle: "solid",
-              borderColor: mode === "select" && x.is_selected ? "primary.main" : "#eee",
+              borderColor: mode === "select" && x.is_selected ? "primary.main" : "grey.100",
               borderRadius: 2,
               transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
-              boxShadow: "0px 0px 0px 1px rgba(3, 7, 18, 0.08), 0px 1px 2px -1px rgba(3, 7, 18, 0.08), 0px 2px 4px rgba(3, 7, 18, 0.04)",
+              boxShadow: 2,
               "&:hover": {
-                borderColor: mode === "select" && x.is_selected ? "primary.main" : "#ddd",
-                boxShadow: "0px 0px 0px 1px var(--shadows-card-hover-1, rgba(2, 7, 19, 0.08)),0px 1px 2px -1px var(--shadows-card-hover-2, rgba(2, 7, 19, 0.08)),0px 2px 8px 0px var(--shadows-card-hover-3, rgba(2, 7, 19, 0.10))"
+                borderColor: mode === "select" && x.is_selected ? "primary.main" : "grey.200",
+                boxShadow: 2
               },
               width: {
                 xs: "100%",

package/lib/components/table.js

@@ -79,19 +79,31 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
     overflow: hidden;
   }
   table.MuiTable-root {
-    outline: 1px solid var(--stroke-border-base, #eff1f5);
-    border-radius: var(--radius-m, 8px);
+    outline: 1px solid;
+    outline-color: ${({
+  theme
+}) => theme.palette.grey[100]};
+    border-radius: ${({
+  theme
+}) => `${2 * theme.shape.borderRadius}px`};
     overflow: hidden;
   }
   [class*='MUIDataTable-responsiveBase'] {
-    outline: 1px solid var(--stroke-border-base, #eff1f5);
-    border-radius: var(--radius-m, 8px);
+    outline: 1px solid;
+    outline-color: ${({
+  theme
+}) => theme.palette.grey[100]};
+    border-radius: ${({
+  theme
+}) => `${2 * theme.shape.borderRadius}px`};
   }
 
   th.MuiTableCell-head {
     padding: 8px 16px 8px 16px;
     text-transform: inherit;
-    background: var(--backgrounds-bg-subtle, #f9fafb);
+    background: ${({
+  theme
+}) => theme.palette.grey[50]};
     border-bottom: none;
     &:first-of-type {
       border-top-left-radius: 8px;
@@ -103,7 +115,9 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
   }
 
   tr.MuiTableRow-root:not(.MuiTableRow-footer):hover {
-    background: var(--backgrounds-bg-highlight, #eff6ff);
+    background: ${({
+  theme
+}) => theme.palette.grey[100]};
   }
   tr.MuiTableRow-root:last-of-type td:first-of-type {
     border-bottom-left-radius: 8px;
@@ -114,7 +128,9 @@ const Wrapped = (0, _system.styled)(_Datatable.default)`
   }
 
   tr.MuiTableRow-root:nth-of-type(even) {
-    background: var(--backgrounds-bg-subtle, #f9fafb);
+    background: ${({
+  theme
+}) => theme.palette.grey[50]};
   }
   td.MuiTableCell-root {
     border-bottom: none;

package/lib/history/invoice/list.js

@@ -272,7 +272,7 @@ const InvoiceTable = _react.default.memo(props => {
             size: "small",
             onClick: e => handleLinkClick(e, invoice),
             sx: {
-              color: "var(--foregrounds-fg-interactive, #0086FF) !important"
+              color: "text.link"
             },
             rel: "noreferrer",
             children: t("payment.customer.invoice.pay")

package/lib/payment/donation-form.js

@@ -554,7 +554,8 @@ function DonationForm({
       hideNavMenu: void 0,
       maxWidth: false,
       sx: {
-        borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)"
+        borderBottom: "1px solid",
+        borderColor: "grey.100"
       }
     }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,
@@ -571,11 +572,10 @@ function DonationForm({
             left: 0,
             right: 0,
             zIndex: 999,
-            background: "#fff",
+            backgroundColor: "background.paper",
             padding: "10px",
             textAlign: "center",
             button: {
-              color: "#fff",
               maxWidth: 542
             }
           }
@@ -625,7 +625,9 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     position: relative;
     flex-direction: column;
     display: ${props => props.mode.endsWith("-minimal") ? "none" : "flex"};
-    background: var(--backgrounds-bg-base);
+    background: ${({
+  theme
+}) => theme.palette.background.default};
     min-height: 'auto';
   }
 
@@ -637,7 +639,9 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
 
   .cko-payment-form {
     .MuiFormLabel-root {
-      color: var(--foregrounds-fg-base, #010714);
+      color: ${({
+  theme
+}) => theme.palette.grey.A700};
       font-weight: 500;
       margin-top: 12px;
       margin-bottom: 4px;

package/lib/payment/form/address.js

@@ -172,8 +172,8 @@ function AddressForm({
                     }) => /* @__PURE__ */(0, _jsxRuntime.jsx)(_countrySelect.default, {
                       ...field,
                       sx: {
-                        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                          borderColor: "transparent"
+                        ".MuiOutlinedInput-notchedOutline": {
+                          borderColor: "transparent !important"
                         }
                       }
                     })

package/lib/payment/form/currency.js

@@ -73,29 +73,26 @@ function CurrencySelector({
 const Root = (0, _system.styled)("section")`
   .cko-payment-card {
     position: relative;
-    border: 1px solid var(--stroke-border-interactive, #0086ff);
+    border: 1px solid;
+    border-color: ${({
+  theme
+}) => theme.palette.secondary.main};
     padding: 4px 8px;
     cursor: pointer;
-    background: var(--backgrounds-bg-field, #f9fafb);
+    background: ${({
+  theme
+}) => theme.palette.grey[50]};
   }
 
   .cko-payment-card-unselect {
-    border: 1px solid #ddd;
+    border: 1px solid;
+    border-color: ${({
+  theme
+}) => theme.palette.grey[100]};
     padding: 4px 8px;
     cursor: pointer;
-    background: var(--backgrounds-bg-field, #f9fafb);
-  }
-
-  .cko-payment-card::after {
-    content: '';
-    width: 6px;
-    height: 10px;
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-    border: 1px solid #fff;
-    border-top-color: transparent;
-    border-left-color: transparent;
-    transform: rotate(35deg);
+    background: ${({
+  theme
+}) => theme.palette.grey[50]};
   }
 `;

package/lib/payment/form/index.js

@@ -629,7 +629,7 @@ function PaymentForm({
             size: 16,
             sx: {
               mr: 0.5,
-              color: "var(--foregrounds-fg-on-color, #fff)"
+              color: "primary.contrastText"
             }
           }), state.submitting || state.paying ? t("payment.checkout.processing") : buttonText]
         })

package/lib/payment/form/phone.js

@@ -100,8 +100,8 @@ function PhoneInput({
             onChange: onCountryChange,
             name: countryFieldName,
             sx: {
-              "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                borderColor: "transparent"
+              "&.MuiOutlinedInput-notchedOutline": {
+                borderColor: "transparent !important"
               }
             },
             showDialCode: true

package/lib/payment/index.js

@@ -280,7 +280,7 @@ function PaymentInner({
           }), mode === "standalone" && !isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
             className: "cko-footer",
             sx: {
-              color: "var(--foregrounds-fg-muted, #98A3B1)"
+              color: "text.lighter"
             }
           })]
         })
@@ -314,7 +314,7 @@ function PaymentInner({
       }), mode === "standalone" && isMobile && /* @__PURE__ */(0, _jsxRuntime.jsx)(_footer.default, {
         className: "cko-footer",
         sx: {
-          color: "var(--foregrounds-fg-muted, #98A3B1)"
+          color: "text.lighter"
         }
       })]
     })
@@ -441,7 +441,8 @@ function Payment({
       hideNavMenu: void 0,
       maxWidth: false,
       sx: {
-        borderBottom: "1px solid var(--stroke-border-base, #EFF1F5)"
+        borderBottom: "1px solid",
+        borderColor: "grey.100"
       }
     }) : null, /* @__PURE__ */(0, _jsxRuntime.jsxs)(Root, {
       mode,
@@ -458,11 +459,10 @@ function Payment({
             left: 0,
             right: 0,
             zIndex: 999,
-            background: "#fff",
+            backgroundColor: "background.paper",
             padding: "10px",
             textAlign: "center",
             button: {
-              color: "#fff",
               maxWidth: 542
             }
           },
@@ -472,7 +472,7 @@ function Payment({
             left: 0,
             right: 0,
             zIndex: 999,
-            background: "#fff",
+            backgroundColor: "background.paper",
             marginBottom: 0
           },
           ".cko-payment": {
@@ -533,7 +533,9 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
     position: relative;
     flex-direction: column;
     display: ${props => props.mode.endsWith("-minimal") ? "none" : "flex"};
-    background: var(--backgrounds-bg-base);
+    background: ${({
+  theme
+}) => theme.palette.background.default};
     min-height: 'auto';
   }
   .cko-header {
@@ -587,7 +589,9 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
 
   .cko-payment-form {
     .MuiFormLabel-root {
-      color: var(--foregrounds-fg-base, #010714);
+      color: ${({
+  theme
+}) => theme.palette.grey.A700};
       font-weight: 500;
       margin-top: 12px;
       margin-bottom: 4px;
@@ -623,20 +627,37 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
   }
 
   .product-item {
-    border-radius: var(--radius-l, 12px);
-    border: 1px solid var(--stroke-border-base, #eff1f5);
+    border-radius: ${({
+  theme
+}) => `${2 * theme.shape.borderRadius}px`};
+    border: 1px solid;
+    border-color: ${({
+  theme
+}) => theme.palette.grey[100]};
     .product-item-content {
       padding: 16px;
-      background: var(--backgrounds-bg-subtle, #f9fafb);
-      border-top-left-radius: var(--radius-l, 12px);
-      border-top-right-radius: var(--radius-l, 12px);
+      background: ${({
+  theme
+}) => theme.palette.grey[50]};
+      border-top-left-radius: ${({
+  theme
+}) => `${2 * theme.shape.borderRadius}px`};
+      border-top-right-radius: ${({
+  theme
+}) => `${2 * theme.shape.borderRadius}px`};
     }
     .product-item-upsell {
       margin-top: 0;
       padding: 16px;
-      background: var(--backgrounds-bg-component, #f1f3f5);
-      border-bottom-left-radius: var(--radius-l, 12px);
-      border-bottom-right-radius: var(--radius-l, 12px);
+      background: ${({
+  theme
+}) => theme.palette.grey[100]};
+      border-bottom-left-radius: ${({
+  theme
+}) => `${2 * theme.shape.borderRadius}px`};
+      border-bottom-right-radius: ${({
+  theme
+}) => `${2 * theme.shape.borderRadius}px`};
     }
   }
 
@@ -665,7 +686,10 @@ const Root = exports.Root = (0, _system.styled)(_material.Box)`
       width: 100%;
       height: fit-content;
       flex: none;
-      border-top: 1px solid var(--stroke-border-base, #eff1f5);
+      border-top: 1px solid;
+      border-color: ${({
+  theme
+}) => theme.palette.grey[100]};
       &:before {
         display: none;
       }

package/lib/payment/product-item.js

@@ -109,9 +109,9 @@ function ProductItem({
         variant: "outlined",
         sx: {
           mt: 1,
-          borderColor: "var(--tags-tag-red-border, #FFC8D3)",
-          background: "var(--tags-tag-red-bg, #FFE2E6)",
-          color: "var(--tags-tag-red-text, #E40031)"
+          borderColor: "chip.error.border",
+          backgroundColor: "chip.error.background",
+          color: "chip.error.text"
         }
       }) : null, children]
     }), canUpsell && !item.upsell_price_id && item.price.upsell?.upsells_to && /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
@@ -147,9 +147,9 @@ function ProductItem({
           variant: "outlined",
           sx: {
             ml: 1,
-            borderColor: " var(--tags-tag-orange-border, #FFE467)",
-            background: "var(--tags-tag-orange-bg, #FFF4BC)",
-            color: "var(--tags-tag-orange-text, #D24000)"
+            borderColor: "chip.warning.border",
+            backgroundColor: "chip.warning.background",
+            color: "chip.warning.text"
           }
         })]
       }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {

package/lib/payment/product-skeleton.js

@@ -18,7 +18,8 @@ function ProductSkeleton({
       spacing: 1,
       sx: {
         width: 320,
-        border: "1px solid #eee",
+        border: "1px solid",
+        borderColor: "grey.100",
         borderRadius: 1,
         transition: "border-color 0.3s ease 0s, box-shadow 0.3s ease 0s",
         boxShadow: "0 4px 8px rgba(0, 0, 0, 20%)",

package/lib/payment/success.js

@@ -7,7 +7,6 @@ module.exports = PaymentSuccess;
 var _jsxRuntime = require("react/jsx-runtime");
 var _context = require("@arcblock/ux/lib/Locale/context");
 var _material = require("@mui/material");
-var _system = require("@mui/system");
 var _ufo = require("ufo");
 var _ux = require("@arcblock/ux");
 var _payment = require("../contexts/payment");
@@ -150,7 +149,7 @@ PaymentSuccess.defaultProps = {
   subscriptionId: "",
   subscriptions: []
 };
-const Div = (0, _system.styled)("div")`
+const Div = (0, _material.styled)("div")`
   width: 80px;
   height: 115px;
 
@@ -182,7 +181,7 @@ const Div = (0, _system.styled)("div")`
     content: '';
     height: 100px;
     position: absolute;
-    background: #ffffff;
+    background: ${props => props.theme.palette.background.paper};
     transform: rotate(-45deg);
   }
   .check-icon .icon-line {
@@ -226,7 +225,7 @@ const Div = (0, _system.styled)("div")`
     height: 85px;
     position: absolute;
     transform: rotate(-45deg);
-    background-color: #ffffff;
+    background-color: ${props => props.theme.palette.background.paper};
   }
 
   @keyframes rotate-circle {