@blocklet/payment-react 1.14.21 → 1.14.23

package/src/theme/index.css

@@ -0,0 +1,240 @@
+:root {
+  /* Light Theme */
+  /* Color */
+  --backgrounds-bg-base: #ffffff;
+  --backgrounds-bg-base-hover: #f9fafb;
+  --backgrounds-bg-base-pressed: #f3f4f6;
+  --backgrounds-bg-component: #f1f3f5;
+  --backgrounds-bg-component-hover: #e5e7eb;
+  --backgrounds-bg-disabled: #f3f4f6;
+  --backgrounds-bg-field: #f9fafb;
+  --backgrounds-bg-field-hover: #f3f4f6;
+  --backgrounds-bg-glass: #ffffffb8;
+  --backgrounds-bg-highlight: #eff6ff;
+  --backgrounds-bg-highlight-hover: #dbeafe;
+  --backgrounds-bg-interactive: #3b82f6;
+  --backgrounds-bg-interactive-hover: #2563eb;
+  --backgrounds-bg-overlay: #03071266;
+  --backgrounds-bg-subtle: #f9fafb;
+  --backgrounds-bg-subtle-hover: #f3f4f6;
+  --backgrounds-bg-subtle-pressed: #e5e7eb;
+  --backgrounds-bg-switch-off: #e5e7eb;
+  --backgrounds-bg-switch-off-hover: #d1d5db;
+  --buttons-button-danger: #e11d48;
+  --buttons-button-danger-hover: #be123c;
+  --buttons-button-danger-pressed: #9f1239;
+  --buttons-button-inverted: #030712;
+  --buttons-button-inverted-hover: #111827;
+  --buttons-button-inverted-pressed: #1f2937;
+  --buttons-button-neutral: #ffffff;
+  --buttons-button-neutral-hover: #f3f4f6;
+  --buttons-button-neutral-pressed: #e5e7eb;
+  --buttons-button-transparent: #ffffff00;
+  --buttons-button-transparent-hover: #f3f4f6;
+  --buttons-button-transparent-pressed: #e5e7eb;
+  --foregrounds-fg-base: #030712;
+  --foregrounds-fg-danger: #e11d48;
+  --foregrounds-fg-disabled: #d1d5db;
+  --foregrounds-fg-interactive: #3b82f6;
+  --foregrounds-fg-interactive-hover: #2563eb;
+  --foregrounds-fg-muted: #9ca3af;
+  --foregrounds-fg-on-color: #ffffff;
+  --foregrounds-fg-on-inverted: #ffffff;
+  --foregrounds-fg-subtle: #4b5563;
+  --others-spacer: #ffffff00;
+  --shadows-card-hover-1: #03071214;
+  --shadows-card-hover-2: #03071214;
+  --shadows-card-hover-3: #0307121a;
+  --shadows-card-rest-1: #03071214;
+  --shadows-card-rest-2: #03071214;
+  --shadows-card-rest-3: #0307120a;
+  --shadows-danger-1: #e11d48;
+  --shadows-error-2: #e11d4826;
+  --shadows-flyout-1: #03071214;
+  --shadows-flyout-2: #03071214;
+  --shadows-interactive-with-active-1: #3b82f6;
+  --shadows-interactive-with-active-2: #3b82f633;
+  --shadows-interactive-with-shadow-1: #1e3a8a80;
+  --shadows-interactive-with-shadow-2: #3b82f6;
+  --shadows-modal-1: #ffffff;
+  --shadows-modal-2: #e5e7eb66;
+  --shadows-modal-3: #03071214;
+  --shadows-modal-4: #03071214;
+  --shadows-modal-5: #03071214;
+  --shadows-switch-background-1: #0307120a;
+  --shadows-switch-background-2: #0307120a;
+  --shadows-switch-background-3: #0307120f;
+  --shadows-switch-background-4: #03071205;
+  --shadows-switch-background-5: #0307120a;
+  --shadows-switch-handle-1: #ffffff;
+  --shadows-switch-handle-2: #ffffff;
+  --shadows-switch-handle-3: #03071205;
+  --shadows-switch-handle-4: #03071205;
+  --shadows-switch-handle-5: #0307120a;
+  --shadows-switch-handle-6: #0307121f;
+  --shadows-switch-handle-7: #03071214;
+  --shadows-tooltip-1: #03071214;
+  --shadows-tooltip-2: #03071214;
+  --stroke-border-base: #eff1f5;
+  --stroke-border-error: #e11d48;
+  --stroke-border-interactive: #3b82f6;
+  --stroke-border-loud: #030712;
+  --stroke-border-strong: #d1d5db;
+  --stroke-sep: #eff1f5;
+  --tags-tag-blue-bg: #dbeafe;
+  --tags-tag-blue-bg-hover: #bfdbfe;
+  --tags-tag-blue-border: #bfdbfe;
+  --tags-tag-blue-icon: #2563eb;
+  --tags-tag-blue-text: #1d4ed8;
+  --tags-tag-green-bg: #d1fae5;
+  --tags-tag-green-bg-hover: #a7f3d0;
+  --tags-tag-green-border: #a7f3d0;
+  --tags-tag-green-icon: #059669;
+  --tags-tag-green-text: #047857;
+  --tags-tag-neutral-bg: #f3f4f6;
+  --tags-tag-neutral-bg-hover: #e5e7eb;
+  --tags-tag-neutral-border: #e5e7eb;
+  --tags-tag-neutral-icon: #6b7280;
+  --tags-tag-neutral-text: #4b5563;
+  --tags-tag-orange-bg: #fef4c7;
+  --tags-tag-orange-bg-hover: #fde68a;
+  --tags-tag-orange-border: #fde68a;
+  --tags-tag-orange-icon: #d97706;
+  --tags-tag-orange-text: #b45309;
+  --tags-tag-purple-bg: #ede9fe;
+  --tags-tag-purple-bg-hover: #ddd6fe;
+  --tags-tag-purple-border: #ddd6fe;
+  --tags-tag-purple-icon: #7c3aed;
+  --tags-tag-purple-text: #6d28d9;
+  --tags-tag-red-bg: #ffe4e6;
+  --tags-tag-red-bg-hover: #fecdd3;
+  --tags-tag-red-border: #fecdd3;
+  --tags-tag-red-icon: #e11d48;
+  --tags-tag-red-text: #be123c;
+  /* Number */
+  --radius-s: 0.25rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-round: 624.9375rem;
+  --stroke-button-secondary-border: #e5e7eb;
+}
+[data-theme='dark'] {
+  /* Dark Theme */
+  /* Color */
+  --backgrounds-bg-base: #1b1b1f;
+  --backgrounds-bg-base-hover: #27282d;
+  --backgrounds-bg-base-pressed: #2e3035;
+  --backgrounds-bg-component: #27282d;
+  --backgrounds-bg-component-hover: #27282d;
+  --backgrounds-bg-disabled: #27282d;
+  --backgrounds-bg-field: #27282d;
+  --backgrounds-bg-field-hover: #2e3035;
+  --backgrounds-bg-glass: #1b1b1fb8;
+  --backgrounds-bg-highlight: #172554;
+  --backgrounds-bg-highlight-hover: #1e3a8a;
+  --backgrounds-bg-interactive: #60a5fa;
+  --backgrounds-bg-interactive-hover: #60a5fa;
+  --backgrounds-bg-overlay: #18181ab2;
+  --backgrounds-bg-subtle: #18181a;
+  --backgrounds-bg-subtle-hover: #1b1b1f;
+  --backgrounds-bg-subtle-pressed: #27282d;
+  --backgrounds-bg-switch-off: #35373c;
+  --backgrounds-bg-switch-off-hover: #464b50;
+  --buttons-button-danger: #9f1239;
+  --buttons-button-danger-hover: #be123c;
+  --buttons-button-danger-pressed: #e11d48;
+  --buttons-button-inverted: #edeef0;
+  --buttons-button-inverted-hover: #ffffff;
+  --buttons-button-inverted-pressed: #edeef0;
+  --buttons-button-neutral: #27282d;
+  --buttons-button-neutral-hover: #35373c;
+  --buttons-button-neutral-pressed: #3c3f44;
+  --buttons-button-transparent: #ffffff00;
+  --buttons-button-transparent-hover: #27282d;
+  --buttons-button-transparent-pressed: #2e3035;
+  --foregrounds-fg-base: #edeef0;
+  --foregrounds-fg-danger: #fb7185;
+  --foregrounds-fg-disabled: #3c3f44;
+  --foregrounds-fg-interactive: #60a5fa;
+  --foregrounds-fg-interactive-hover: #3b82f6;
+  --foregrounds-fg-muted: #696e77;
+  --foregrounds-fg-on-color: #ffffff;
+  --foregrounds-fg-on-inverted: #0a0a0a;
+  --foregrounds-fg-subtle: #adb1b8;
+  --others-spacer: #ffffff;
+  --shadows-card-hover-1: #ffffff1a;
+  --shadows-card-hover-2: #ffffff29;
+  --shadows-card-hover-3: #00000066;
+  --shadows-card-rest-1: #ffffff1a;
+  --shadows-card-rest-2: #ffffff29;
+  --shadows-card-rest-3: #00000066;
+  --shadows-danger-1: #f43f5e1a;
+  --shadows-error-2: #e11d4840;
+  --shadows-flyout-1: #ffffff1a;
+  --shadows-flyout-2: #00000052;
+  --shadows-interactive-with-active-1: #60a5fa;
+  --shadows-interactive-with-active-2: #3b82f640;
+  --shadows-interactive-with-shadow-1: #dbeafe80;
+  --shadows-interactive-with-shadow-2: #60a5fa;
+  --shadows-modal-1: #171717;
+  --shadows-modal-2: #2e303566;
+  --shadows-modal-3: #ffffff1a;
+  --shadows-modal-4: #00000052;
+  --shadows-modal-5: #00000052;
+  --shadows-switch-background-1: #0000001a;
+  --shadows-switch-background-2: #0000001a;
+  --shadows-switch-background-3: #ffffff29;
+  --shadows-switch-background-4: #0000001a;
+  --shadows-switch-background-5: #00000033;
+  --shadows-switch-handle-1: #ffffff;
+  --shadows-switch-handle-2: #ffffff;
+  --shadows-switch-handle-3: #00000029;
+  --shadows-switch-handle-4: #0000001a;
+  --shadows-switch-handle-5: #0000001a;
+  --shadows-switch-handle-6: #0000001a;
+  --shadows-switch-handle-7: #0000001a;
+  --shadows-tooltip-1: #ffffff1a;
+  --shadows-tooltip-2: #00000052;
+  --stroke-border-base: #2e3035;
+  --stroke-border-error: #f43f5e;
+  --stroke-border-interactive: #60a5fa;
+  --stroke-border-loud: #edeef0;
+  --stroke-border-strong: #35373c;
+  --stroke-sep: #2e3035;
+  --tags-tag-blue-bg: #172554;
+  --tags-tag-blue-bg-hover: #1e2a8a;
+  --tags-tag-blue-border: #1e3a8a;
+  --tags-tag-blue-icon: #1d4ed8;
+  --tags-tag-blue-text: #3b82f6;
+  --tags-tag-green-bg: #022c22;
+  --tags-tag-green-bg-hover: #064e3b;
+  --tags-tag-green-border: #064e3b;
+  --tags-tag-green-icon: #047857;
+  --tags-tag-green-text: #10b981;
+  --tags-tag-neutral-bg: #2e3035;
+  --tags-tag-neutral-bg-hover: #35373c;
+  --tags-tag-neutral-border: #3c3f44;
+  --tags-tag-neutral-icon: #7d828a;
+  --tags-tag-neutral-text: #adb1b8;
+  --tags-tag-orange-bg: #451a03;
+  --tags-tag-orange-bg-hover: #78350f;
+  --tags-tag-orange-border: #78350f;
+  --tags-tag-orange-icon: #b45309;
+  --tags-tag-orange-text: #f59e0b;
+  --tags-tag-purple-bg: #2e1064;
+  --tags-tag-purple-bg-hover: #4c1d95;
+  --tags-tag-purple-border: #3c3f44;
+  --tags-tag-purple-icon: #6d28d9;
+  --tags-tag-purple-text: #8b5cf6;
+  --tags-tag-red-bg: #4c0519;
+  --tags-tag-red-bg-hover: #881337;
+  --tags-tag-red-border: #881337;
+  --tags-tag-red-icon: #f43f5e;
+  --tags-tag-red-text: #ff6369;
+  /* number */
+  --radius-s: 0.25rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-round: 624.9375rem;
+  --stroke-button-secondary-border: #27282d;
+}

package/src/theme/index.tsx

@@ -0,0 +1,271 @@
+import { type ThemeOptions, ThemeProvider, useTheme } from '@mui/material/styles';
+import { create } from '@arcblock/ux/lib/Theme';
+import { cloneDeep, merge } from 'lodash';
+import { Box, CssBaseline } from '@mui/material';
+import React from 'react';
+
+import { typography } from './typography';
+import './index.css';
+import { PaymentThemeOptions } from '../types';
+
+export { typography };
+
+PaymentThemeProvider.defaultProps = {
+  theme: {},
+};
+
+export function PaymentThemeProvider({
+  children,
+  theme: customTheme = {},
+}: {
+  children: React.ReactNode;
+  theme?: PaymentThemeOptions;
+}) {
+  // Add defaultProps for customTheme
+  const { sx: themeSX = {}, ...restTheme } = customTheme || {};
+  const parentTheme = useTheme();
+  const rootStyle = getComputedStyle(document.documentElement);
+
+  const themeOverrides: Partial<ThemeOptions> = {
+    shape: {
+      borderRadius: 8,
+    },
+    components: {
+      MuiOutlinedInput: {
+        styleOverrides: {
+          root: {
+            borderRadius: 'var(--radius-m, 8px)',
+            backgroundColor: 'var(--backgrounds-bg-field)',
+            '&.Mui-disabled': {
+              backgroundColor: 'var(--backgrounds-bg-disabled)',
+            },
+            '.MuiOutlinedInput-notchedOutline': {
+              borderColor: 'var(--stroke-border-base, #EFF1F5)',
+            },
+            '.MuiInputBase-input': {
+              fontSize: '14px',
+              minHeight: '1.65em',
+              lineHeight: '1.65em',
+            },
+          },
+        },
+      },
+      MuiButton: {
+        defaultProps: {
+          size: 'small',
+        },
+        styleOverrides: {
+          root: {
+            fontSize: '1rem',
+            fontWeight: 500,
+            textTransform: 'none',
+          },
+          containedPrimary: {
+            backgroundColor: 'var(--buttons-button-inverted, #010714)',
+            color: 'var(--foregrounds-fg-on-color, #fff)',
+            '&:hover': {
+              backgroundColor: 'var(--buttons-button-inverted-hover, #1f2937)',
+            },
+          },
+          outlinedPrimary: {
+            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)',
+            },
+          },
+          sizeSmall: {
+            height: 32,
+          },
+        },
+      },
+      MuiIconButton: {
+        defaultProps: {
+          size: 'small',
+        },
+        styleOverrides: {
+          root: {
+            textTransform: 'none',
+          },
+          colorPrimary: {
+            backgroundColor: '#fff',
+          },
+        },
+      },
+      MuiToggleButton: {
+        styleOverrides: {
+          root: {
+            textTransform: 'none',
+          },
+        },
+      },
+      MuiTab: {
+        styleOverrides: {
+          root: {
+            textTransform: 'none',
+          },
+        },
+      },
+      MuiTooltip: {
+        defaultProps: {
+          enterTouchDelay: 3000,
+          leaveTouchDelay: 100,
+        },
+      },
+      MuiPopover: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            border: `1px solid ${theme.palette.divider}`,
+            boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+          }),
+        },
+      },
+      MuiCssBaseline: {
+        styleOverrides: {
+          '.base-card': {
+            padding: '20px',
+            borderRadius: 'var(--radius-l)',
+            background: 'var(--backgrounds-bg-base)',
+            boxShadow:
+              '0px 0px 0px 1px var(--shadows-card-rest-1, rgba(2, 7, 19, 0.08)), 0px 1px 2px -1px var(--shadows-card-rest-2, rgba(2, 7, 19, 0.08)), 0px 2px 4px 0px var(--shadows-card-rest-3, rgba(2, 7, 19, 0.04))',
+          },
+          '.base-label': {
+            color: 'var(--foregrounds-fg-base, #010714)',
+            fontSize: '16px',
+            fontWeight: '500',
+            lineHeight: '24px',
+          },
+          a: {
+            textDecoration: 'none !important',
+          },
+        },
+      },
+      // MuiButtonBase: {
+      //    styleOverrides: {
+
+      //    }
+      // },
+      MuiRadio: {
+        styleOverrides: {
+          root: {
+            color: 'var(--stroke-border-base, #EFF1F5)',
+            '&:hover': {
+              background: 'none',
+            },
+            '&.Mui-checked': {
+              color: 'var(--foregrounds-fg-interactive, #0086FF)',
+            },
+          },
+        },
+      },
+      MuiCheckbox: {
+        styleOverrides: {
+          root: {
+            color: 'var(--backgrounds-bg-interactive, #0086FF)',
+            '&.Mui-checked': {
+              color: 'var(--foregrounds-fg-interactive, #0086FF)',
+            },
+          },
+        },
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: {
+            borderColor: 'var(--stroke-border-base, #EFF1F5)',
+          },
+        },
+      },
+      MuiInputBase: {
+        defaultProps: {
+          size: 'small',
+        },
+        styleOverrides: {
+          root: () => ({
+            fontSize: '0.875rem',
+            backgroundColor: 'var(--backgrounds-bg-field, #F9FAFB)',
+          }),
+        },
+      },
+      MuiInputLabel: {
+        defaultProps: {
+          size: 'small',
+        },
+        styleOverrides: {
+          root: () => ({
+            fontSize: '0.875rem',
+          }),
+        },
+      },
+      MuiChip: {
+        styleOverrides: {
+          root: {
+            borderRadius: 'var(--radius-S, 4px)',
+            border: '1px solid transparent',
+            '&.MuiChip-filledSuccess': {
+              color: 'var(--tags-tag-green-text, #007C52)',
+              backgroundColor: 'var(--tags-tag-green-bg, #B7FEE3)',
+              borderColor: 'var(--tags-tag-green-border, #63F9CB)',
+            },
+            '&.MuiChip-filledDefault': {
+              color: 'var(--tags-tag-neutral-text, #007C52)',
+              backgroundColor: 'var(--tags-tag-neutral-bg, #B7FEE3)',
+              borderColor: 'var(--tags-tag-neutral-border, #E5E7EB)',
+            },
+            '&.MuiChip-filledSecondary': {
+              color: 'var(--tags-tag-purple-text, #8118EB)',
+              backgroundColor: ' var(--tags-tag-purple-bg, #EFE9FF)',
+              borderColor: 'var(--tags-tag-purple-border, #E1D6FF)',
+            },
+            '&.MuiChip-filledError': {
+              color: 'var(--tags-tag-red-text, #E40031)',
+              backgroundColor: 'var(--tags-tag-red-bg, #FFE2E6)',
+              borderColor: 'var(--tags-tag-red-border, #FFC8D3)',
+            },
+            '&.MuiChip-filledWarning': {
+              color: 'var(--tags-tag-orange-text, #D24000)',
+              backgroundColor: 'var(--tags-tag-orange-bg, #FFF4BC)',
+              borderColor: 'var(--tags-tag-orange-border, #FFE467)',
+            },
+            '&.MuiChip-filledPrimary,&.MuiChip-filledInfo': {
+              color: 'var(--tags-tag-blue-text, #0051E9)',
+              backgroundColor: 'var(--tags-tag-blue-bg, #D2ECFF)',
+              borderColor: 'var(--tags-tag-blue-border, #AFDDFF)',
+            },
+          },
+        },
+      },
+    },
+  };
+  const mergeTheme = create(
+    merge(
+      cloneDeep({
+        ...parentTheme,
+        typography,
+        palette: {
+          primary: {
+            main: rootStyle.getPropertyValue('--foregrounds-fg-base').trim() || '#030712',
+          },
+          text: {
+            primary: rootStyle.getPropertyValue('--foregrounds-fg-base').trim() || '#030712',
+            secondary: rootStyle.getPropertyValue('--foregrounds-fg-subtle').trim() || '#4b5563',
+            lighter: rootStyle.getPropertyValue('--foregrounds-fg-muted').trim() || '#9ca3af',
+            link: rootStyle.getPropertyValue('--foregrounds-fg-interactive').trim() || '#0086FF',
+          },
+          error: {
+            main: rootStyle.getPropertyValue('--foregrounds-fg-danger').trim() || '#FF003B',
+          },
+        },
+        ...themeOverrides,
+      }),
+      restTheme
+    )
+  );
+
+  return (
+    <ThemeProvider theme={mergeTheme}>
+      <CssBaseline />
+      <Box sx={{ height: '100%', ...themeSX }}>{children}</Box>
+    </ThemeProvider>
+  );
+}

package/src/theme/typography.ts

@@ -0,0 +1,56 @@
+import type { TypographyOptions } from '@mui/material/styles/createTypography';
+
+export const typography: TypographyOptions = {
+  h1: {
+    fontSize: '1.875rem',
+    lineHeight: 1.2,
+    fontWeight: 800,
+    letterSpacing: '-.025em',
+  },
+  h2: {
+    fontSize: '1.5rem',
+    lineHeight: 1.3333333,
+    fontWeight: 700,
+    letterSpacing: '-.025em',
+  },
+  h3: {
+    fontSize: '1.25rem',
+    lineHeight: 1.4,
+    fontWeight: 600,
+    letterSpacing: '-.025em',
+  },
+  h4: {
+    fontSize: '1.125rem',
+    lineHeight: 1.5,
+    fontWeight: 600,
+  },
+  h5: {
+    fontSize: '1rem',
+    lineHeight: 1.75,
+    fontWeight: 400,
+  },
+  h6: {
+    fontSize: '1rem',
+    lineHeight: 1.75,
+    fontWeight: 400,
+  },
+  subtitle1: {
+    fontSize: '1rem',
+    lineHeight: 1.75,
+    fontWeight: 400,
+  },
+  subtitle2: {
+    fontSize: '1rem',
+    lineHeight: 1.75,
+    fontWeight: 400,
+  },
+  body1: {
+    fontSize: '1rem',
+    lineHeight: 1.75,
+  },
+
+  fontWeightLight: 300,
+  fontWeightRegular: 400,
+  fontWeightMedium: 500,
+  fontWeightBold: 700,
+};

package/src/types/index.ts

@@ -6,6 +6,7 @@ import type {
   TPaymentLink,
   TPaymentMethodExpanded,
 } from '@blocklet/payment-types';
+import { SxProps, ThemeOptions } from '@mui/material';
 import { LiteralUnion } from 'type-fest';
 
 export type CheckoutContext = {
@@ -16,6 +17,7 @@ export type CheckoutContext = {
   customer?: TCustomer;
   mode: LiteralUnion<'standalone' | 'inline' | 'popup', string>;
   action?: string;
+  showCheckoutSummary?: boolean;
 };
 
 export type CheckoutFormData = {
@@ -34,11 +36,15 @@ export type CheckoutFormData = {
   };
 };
 
+export type PaymentThemeOptions = ThemeOptions & {
+  sx?: SxProps;
+};
 export type CheckoutProps = Partial<CheckoutCallbacks> & {
   id: string;
   extraParams?: Record<string, any>;
   action?: string;
   mode?: LiteralUnion<'standalone' | 'inline' | 'popup' | 'inline-minimal' | 'popup-minimal', string>;
+  theme?: 'default' | 'inherit' | PaymentThemeOptions;
 };
 
 export type CheckoutCallbacks = {
@@ -54,3 +60,14 @@ export type PricingRenderProps = {
   quantity: string;
   totalAmount: string;
 };
+
+export type ActionProps = {
+  [key: string]: {
+    color?: string;
+    variant?: string;
+    sx?: {
+      [key: string]: any;
+    };
+    text?: string;
+  };
+};