@blocklet/payment-react 1.18.39 → 1.18.41

package/es/checkout/donate.js

@@ -633,7 +633,7 @@ function CheckoutDonateInner({
               ))
             }
           ),
-          customers?.length > 0 && t("payment.checkout.donation.gaveTips", { count: customers?.length })
+          customers?.length > 0 && /* @__PURE__ */ jsx(Typography, { variant: "body2", children: t("payment.checkout.donation.gaveTips", { count: customers?.length }) })
         ] }),
         showCloseButton: false,
         disableEscapeKeyDown: true,

package/es/components/status.js

@@ -9,7 +9,6 @@ export default function Status(props) {
       ...props,
       sx: {
         ...props.sx || {},
-        borderRadius: "4px",
         height: 20,
         textTransform: "capitalize"
       }

package/es/components/truncated-text.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { Tooltip } from "@mui/material";
+import { Tooltip, Typography } from "@mui/material";
 import { tooltipClasses } from "@mui/material/Tooltip";
 import { styled } from "@mui/system";
 import { truncateText } from "../libs/util.js";
@@ -17,9 +17,9 @@ export default function TruncatedText({ text = "", maxLength = 100, useWidth = f
   }
   const truncatedText = truncateText(text, maxLength, useWidth);
   if (!truncatedText.endsWith("...")) {
-    return /* @__PURE__ */ jsx("span", { children: truncatedText });
+    return /* @__PURE__ */ jsx(Typography, { children: truncatedText });
   }
-  return /* @__PURE__ */ jsx(CustomTooltip, { title: text, placement: "bottom", enterTouchDelay: 0, children: /* @__PURE__ */ jsx("span", { title: text, children: truncatedText }) });
+  return /* @__PURE__ */ jsx(CustomTooltip, { title: text, placement: "bottom", enterTouchDelay: 0, children: /* @__PURE__ */ jsx(Typography, { children: truncatedText }) });
 }
 TruncatedText.defaultProps = {
   useWidth: false,

package/es/libs/util.d.ts

@@ -76,7 +76,15 @@ export declare function isValidCountry(code: string): boolean;
 export declare function stopEvent(e: React.SyntheticEvent<any>): void;
 export declare function sleep(ms: number): Promise<unknown>;
 export declare function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength?: number): string;
-export declare const getSubscriptionTimeSummary: (subscription: TSubscriptionExpanded) => string;
+export declare const getLineTimeInfo: (time: number, locale?: string) => {
+    time: any;
+    isToday: any;
+};
+export declare const getSubscriptionTimeSummary: (subscription: TSubscriptionExpanded, locale?: string) => {
+    action: string;
+    time: any;
+    isToday: any;
+} | null;
 export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded, actionProps: ActionProps) => {
     action: string;
     variant: string;

package/es/libs/util.js

@@ -639,27 +639,39 @@ export function formatSubscriptionProduct(items, maxLength = 2) {
   const names = items.map((x) => x.price?.product?.name).filter(Boolean);
   return names.slice(0, maxLength).join(", ") + (names.length > maxLength ? ` and ${names.length - maxLength} more` : "");
 }
-export const getSubscriptionTimeSummary = (subscription) => {
-  const lines = [`Start on ${formatToDate(subscription.start_date * 1e3, "en", "YYYY-MM-DD")}`];
-  const getLineTimeMessage = (time) => {
-    const curDay = dayjs().isSame(dayjs(time), "day");
-    const timeFormat = curDay ? "HH:mm:ss" : "YYYY-MM-DD";
-    return `${curDay ? "in" : "on"} ${formatToDate(time, "en", timeFormat)}`;
+export const getLineTimeInfo = (time, locale = "en") => {
+  const isToday = dayjs().isSame(dayjs(time), "day");
+  const timeFormat = isToday ? "HH:mm:ss" : "YYYY-MM-DD";
+  return {
+    time: formatToDate(time, locale, timeFormat),
+    isToday
   };
+};
+export const getSubscriptionTimeSummary = (subscription, locale = "en") => {
   if (subscription.status === "active" || subscription.status === "trialing") {
     if (subscription.cancel_at) {
-      lines.push(`Ended ${getLineTimeMessage(subscription.cancel_at * 1e3)}`);
-    } else if (subscription.cancel_at_period_end) {
-      lines.push(`Ended ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
-    } else {
-      lines.push(`Renew ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
-    }
-  } else if (subscription.status === "past_due") {
-    lines.push(`Ended ${getLineTimeMessage((subscription.cancel_at || subscription.current_period_end) * 1e3)}`);
-  } else if (subscription.status === "canceled") {
-    lines.push(`Ended ${getLineTimeMessage(subscription.canceled_at * 1e3)}`);
-  }
-  return lines.join(",");
+      const endTime = subscription.cancel_at * 1e3;
+      const { time: time2, isToday: isToday2 } = getLineTimeInfo(endTime, locale);
+      return { action: "willEnd", time: time2, isToday: isToday2 };
+    }
+    if (subscription.cancel_at_period_end) {
+      const endTime = subscription.current_period_end * 1e3;
+      const { time: time2, isToday: isToday2 } = getLineTimeInfo(endTime, locale);
+      return { action: "willEnd", time: time2, isToday: isToday2 };
+    }
+    const { time, isToday } = getLineTimeInfo(subscription.current_period_end * 1e3, locale);
+    return { action: "renew", time, isToday };
+  }
+  if (subscription.status === "past_due") {
+    const endTime = (subscription.cancel_at || subscription.current_period_end) * 1e3;
+    const { time, isToday } = getLineTimeInfo(endTime, locale);
+    return { action: "ended", time, isToday };
+  }
+  if (subscription.status === "canceled") {
+    const { time, isToday } = getLineTimeInfo(subscription.canceled_at * 1e3, locale);
+    return { action: "ended", time, isToday };
+  }
+  return null;
 };
 export const getSubscriptionAction = (subscription, actionProps) => {
   if (subscription.status === "active" || subscription.status === "trialing") {

package/es/locales/en.js

@@ -321,17 +321,17 @@ export default flat({
         empty: "There are no invoices",
         next: "No invoices yet, next invoice will be generated on {date}",
         invoiceNumber: "Invoice Number",
-        emptyList: "No Invoice",
+        emptyList: "No Invoices",
         noPaymentRequired: "No Payment Required",
         payBatch: "Pay Due Invoices"
       },
       payment: {
         empty: "There are no payments",
-        emptyList: "No Payment"
+        emptyList: "No Payments"
       },
       refund: {
         empty: "There are no refunds",
-        emptyList: "No Refund"
+        emptyList: "No Refunds"
       },
       subscriptions: {
         plan: "Plan",

package/es/payment/donation-form.js

@@ -326,7 +326,7 @@ function PaymentInner({
             },
             children: [
               /* @__PURE__ */ jsx(HelpOutlineOutlined, { sx: { fontSize: "18px" } }),
-              /* @__PURE__ */ jsx(Typography, { children: renderBenefits() }),
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", children: renderBenefits() }),
               /* @__PURE__ */ jsx(ArrowForwardOutlined, { className: "benefits-arrow", sx: { fontSize: "18px" } })
             ]
           }

package/es/payment/form/currency.js

@@ -5,6 +5,7 @@ export default function CurrencySelector({ value, currencies, onChange }) {
   return /* @__PURE__ */ jsx(
     Root,
     {
+      className: "cko-currency-selector",
       count: currencies.length,
       style: {
         display: currencies.length > 1 ? "grid" : "block",
@@ -56,7 +57,7 @@ const Root = styled("section")`
   .cko-payment-card {
     position: relative;
     border: 1px solid;
-    border-color: ${({ theme }) => theme.palette.secondary.main};
+    border-color: ${({ theme }) => theme.palette.primary.main};
     padding: 4px 8px;
     cursor: pointer;
     background: ${({ theme }) => theme.palette.grey[50]};

package/es/theme/index.js

@@ -53,8 +53,7 @@ export function PaymentThemeProvider({
             border: mode === "dark" ? "#1e3a8a" : "#bfdbfe"
           }
         }
-      },
-      typography
+      }
     });
     const {
       palette,

package/lib/checkout/donate.js

@@ -680,8 +680,11 @@ function CheckoutDonateInner({
             src: (0, _util.getCustomerAvatar)(x.customer?.did, x?.updated_at ? new Date(x.updated_at).toISOString() : "", 24),
             variant: "circular"
           }, x.id))
-        }), customers?.length > 0 && t("payment.checkout.donation.gaveTips", {
-          count: customers?.length
+        }), customers?.length > 0 && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "body2",
+          children: t("payment.checkout.donation.gaveTips", {
+            count: customers?.length
+          })
         })]
       }),
       showCloseButton: false,

package/lib/components/status.js

@@ -13,7 +13,6 @@ function Status(props) {
     ...props,
     sx: {
       ...(props.sx || {}),
-      borderRadius: "4px",
       height: 20,
       textTransform: "capitalize"
     }

package/lib/components/truncated-text.js

@@ -35,7 +35,7 @@ function TruncatedText({
   }
   const truncatedText = (0, _util.truncateText)(text, maxLength, useWidth);
   if (!truncatedText.endsWith("...")) {
-    return /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
+    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       children: truncatedText
     });
   }
@@ -43,8 +43,7 @@ function TruncatedText({
     title: text,
     placement: "bottom",
     enterTouchDelay: 0,
-    children: /* @__PURE__ */(0, _jsxRuntime.jsx)("span", {
-      title: text,
+    children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
       children: truncatedText
     })
   });

package/lib/libs/util.d.ts

@@ -76,7 +76,15 @@ export declare function isValidCountry(code: string): boolean;
 export declare function stopEvent(e: React.SyntheticEvent<any>): void;
 export declare function sleep(ms: number): Promise<unknown>;
 export declare function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength?: number): string;
-export declare const getSubscriptionTimeSummary: (subscription: TSubscriptionExpanded) => string;
+export declare const getLineTimeInfo: (time: number, locale?: string) => {
+    time: any;
+    isToday: any;
+};
+export declare const getSubscriptionTimeSummary: (subscription: TSubscriptionExpanded, locale?: string) => {
+    action: string;
+    time: any;
+    isToday: any;
+} | null;
 export declare const getSubscriptionAction: (subscription: TSubscriptionExpanded, actionProps: ActionProps) => {
     action: string;
     variant: string;

package/lib/libs/util.js

@@ -32,6 +32,7 @@ exports.getCustomerAvatar = getCustomerAvatar;
 exports.getFreeTrialTime = getFreeTrialTime;
 exports.getInvoiceDescriptionAndReason = getInvoiceDescriptionAndReason;
 exports.getInvoiceStatusColor = getInvoiceStatusColor;
+exports.getLineTimeInfo = void 0;
 exports.getPaymentIntentStatusColor = getPaymentIntentStatusColor;
 exports.getPaymentKitComponent = getPaymentKitComponent;
 exports.getPayoutStatusColor = getPayoutStatusColor;
@@ -783,27 +784,75 @@ function formatSubscriptionProduct(items, maxLength = 2) {
   const names = items.map(x => x.price?.product?.name).filter(Boolean);
   return names.slice(0, maxLength).join(", ") + (names.length > maxLength ? ` and ${names.length - maxLength} more` : "");
 }
-const getSubscriptionTimeSummary = subscription => {
-  const lines = [`Start on ${formatToDate(subscription.start_date * 1e3, "en", "YYYY-MM-DD")}`];
-  const getLineTimeMessage = time => {
-    const curDay = (0, _dayjs.default)().isSame((0, _dayjs.default)(time), "day");
-    const timeFormat = curDay ? "HH:mm:ss" : "YYYY-MM-DD";
-    return `${curDay ? "in" : "on"} ${formatToDate(time, "en", timeFormat)}`;
+const getLineTimeInfo = (time, locale = "en") => {
+  const isToday = (0, _dayjs.default)().isSame((0, _dayjs.default)(time), "day");
+  const timeFormat = isToday ? "HH:mm:ss" : "YYYY-MM-DD";
+  return {
+    time: formatToDate(time, locale, timeFormat),
+    isToday
   };
+};
+exports.getLineTimeInfo = getLineTimeInfo;
+const getSubscriptionTimeSummary = (subscription, locale = "en") => {
   if (subscription.status === "active" || subscription.status === "trialing") {
     if (subscription.cancel_at) {
-      lines.push(`Ended ${getLineTimeMessage(subscription.cancel_at * 1e3)}`);
-    } else if (subscription.cancel_at_period_end) {
-      lines.push(`Ended ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
-    } else {
-      lines.push(`Renew ${getLineTimeMessage(subscription.current_period_end * 1e3)}`);
+      const endTime = subscription.cancel_at * 1e3;
+      const {
+        time: time2,
+        isToday: isToday2
+      } = getLineTimeInfo(endTime, locale);
+      return {
+        action: "willEnd",
+        time: time2,
+        isToday: isToday2
+      };
     }
-  } else if (subscription.status === "past_due") {
-    lines.push(`Ended ${getLineTimeMessage((subscription.cancel_at || subscription.current_period_end) * 1e3)}`);
-  } else if (subscription.status === "canceled") {
-    lines.push(`Ended ${getLineTimeMessage(subscription.canceled_at * 1e3)}`);
+    if (subscription.cancel_at_period_end) {
+      const endTime = subscription.current_period_end * 1e3;
+      const {
+        time: time2,
+        isToday: isToday2
+      } = getLineTimeInfo(endTime, locale);
+      return {
+        action: "willEnd",
+        time: time2,
+        isToday: isToday2
+      };
+    }
+    const {
+      time,
+      isToday
+    } = getLineTimeInfo(subscription.current_period_end * 1e3, locale);
+    return {
+      action: "renew",
+      time,
+      isToday
+    };
+  }
+  if (subscription.status === "past_due") {
+    const endTime = (subscription.cancel_at || subscription.current_period_end) * 1e3;
+    const {
+      time,
+      isToday
+    } = getLineTimeInfo(endTime, locale);
+    return {
+      action: "ended",
+      time,
+      isToday
+    };
   }
-  return lines.join(",");
+  if (subscription.status === "canceled") {
+    const {
+      time,
+      isToday
+    } = getLineTimeInfo(subscription.canceled_at * 1e3, locale);
+    return {
+      action: "ended",
+      time,
+      isToday
+    };
+  }
+  return null;
 };
 exports.getSubscriptionTimeSummary = getSubscriptionTimeSummary;
 const getSubscriptionAction = (subscription, actionProps) => {

package/lib/locales/en.js

@@ -328,17 +328,17 @@ module.exports = (0, _flat.default)({
         empty: "There are no invoices",
         next: "No invoices yet, next invoice will be generated on {date}",
         invoiceNumber: "Invoice Number",
-        emptyList: "No Invoice",
+        emptyList: "No Invoices",
         noPaymentRequired: "No Payment Required",
         payBatch: "Pay Due Invoices"
       },
       payment: {
         empty: "There are no payments",
-        emptyList: "No Payment"
+        emptyList: "No Payments"
       },
       refund: {
         empty: "There are no refunds",
-        emptyList: "No Refund"
+        emptyList: "No Refunds"
       },
       subscriptions: {
         plan: "Plan",

package/lib/payment/donation-form.js

@@ -351,6 +351,7 @@ function PaymentInner({
                 fontSize: "18px"
               }
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
+              variant: "body2",
               children: renderBenefits()
             }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_iconsMaterial.ArrowForwardOutlined, {
               className: "benefits-arrow",

package/lib/payment/form/currency.js

@@ -13,6 +13,7 @@ function CurrencySelector({
   onChange
 }) {
   return /* @__PURE__ */(0, _jsxRuntime.jsx)(Root, {
+    className: "cko-currency-selector",
     count: currencies.length,
     style: {
       display: currencies.length > 1 ? "grid" : "block",
@@ -76,7 +77,7 @@ const Root = (0, _system.styled)("section")`
     border: 1px solid;
     border-color: ${({
   theme
-}) => theme.palette.secondary.main};
+}) => theme.palette.primary.main};
     padding: 4px 8px;
     cursor: pointer;
     background: ${({

package/lib/theme/index.js

@@ -70,8 +70,7 @@ function PaymentThemeProvider({
             border: mode === "dark" ? "#1e3a8a" : "#bfdbfe"
           }
         }
-      },
-      typography: _typography.typography
+      }
     });
     const {
       palette,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocklet/payment-react",
-  "version": "1.18.39",
+  "version": "1.18.41",
   "description": "Reusable react components for payment kit v2",
   "keywords": [
     "react",
@@ -54,16 +54,16 @@
     }
   },
   "dependencies": {
-    "@arcblock/did-connect": "^2.13.23",
-    "@arcblock/ux": "^2.13.23",
-    "@arcblock/ws": "^1.20.6",
-    "@blocklet/theme": "^2.13.23",
-    "@blocklet/ui-react": "^2.13.23",
+    "@arcblock/did-connect": "^2.13.29",
+    "@arcblock/ux": "^2.13.29",
+    "@arcblock/ws": "^1.20.8",
+    "@blocklet/theme": "^2.13.29",
+    "@blocklet/ui-react": "^2.13.29",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/system": "^5.16.6",
-    "@ocap/util": "^1.20.6",
+    "@ocap/util": "^1.20.8",
     "@stripe/react-stripe-js": "^2.7.3",
     "@stripe/stripe-js": "^2.4.0",
     "@vitejs/plugin-legacy": "^5.4.1",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.2",
     "@babel/preset-react": "^7.24.7",
-    "@blocklet/payment-types": "1.18.39",
+    "@blocklet/payment-types": "1.18.41",
     "@storybook/addon-essentials": "^7.6.20",
     "@storybook/addon-interactions": "^7.6.20",
     "@storybook/addon-links": "^7.6.20",
@@ -125,5 +125,5 @@
     "vite-plugin-babel": "^1.2.0",
     "vite-plugin-node-polyfills": "^0.21.0"
   },
-  "gitHead": "9e9a5c18fc160094505e902e995f5a5a052d544f"
+  "gitHead": "4232e09576dd8aa8dcfb0e4dd5a1bbbb50480b7f"
 }

package/src/checkout/donate.tsx

@@ -739,7 +739,11 @@ function CheckoutDonateInner({
                     />
                   ))}
                 </AvatarGroup>
-                {customers?.length > 0 && t('payment.checkout.donation.gaveTips', { count: customers?.length })}
+                {customers?.length > 0 && (
+                  <Typography variant="body2">
+                    {t('payment.checkout.donation.gaveTips', { count: customers?.length })}
+                  </Typography>
+                )}
               </Box>
             )
           }

package/src/components/status.tsx

@@ -9,7 +9,6 @@ export default function Status(props: ChipProps) {
       {...props}
       sx={{
         ...(props.sx || {}),
-        borderRadius: '4px',
         height: 20,
         textTransform: 'capitalize',
       }}

package/src/components/truncated-text.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from '@mui/material';
+import { Tooltip, Typography } from '@mui/material';
 import type { TooltipProps } from '@mui/material';
 import { tooltipClasses } from '@mui/material/Tooltip';
 import { styled } from '@mui/system';
@@ -27,11 +27,11 @@ export default function TruncatedText({ text = '', maxLength = 100, useWidth = f
   }
   const truncatedText = truncateText(text, maxLength, useWidth);
   if (!truncatedText.endsWith('...')) {
-    return <span>{truncatedText}</span>;
+    return <Typography>{truncatedText}</Typography>;
   }
   return (
     <CustomTooltip title={text} placement="bottom" enterTouchDelay={0}>
-      <span title={text}>{truncatedText}</span>
+      <Typography>{truncatedText}</Typography>
     </CustomTooltip>
   );
 }

package/src/libs/util.ts

@@ -849,30 +849,40 @@ export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], ma
   );
 }
 
-export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded) => {
-  const lines = [`Start on ${formatToDate(subscription.start_date * 1000, 'en', 'YYYY-MM-DD')}`];
-
-  const getLineTimeMessage = (time: number) => {
-    const curDay = dayjs().isSame(dayjs(time), 'day');
-    const timeFormat = curDay ? 'HH:mm:ss' : 'YYYY-MM-DD';
-    return `${curDay ? 'in' : 'on'} ${formatToDate(time, 'en', timeFormat)}`;
+export const getLineTimeInfo = (time: number, locale = 'en') => {
+  const isToday = dayjs().isSame(dayjs(time), 'day');
+  const timeFormat = isToday ? 'HH:mm:ss' : 'YYYY-MM-DD';
+  return {
+    time: formatToDate(time, locale, timeFormat),
+    isToday,
   };
+};
 
+export const getSubscriptionTimeSummary = (subscription: TSubscriptionExpanded, locale = 'en') => {
   if (subscription.status === 'active' || subscription.status === 'trialing') {
     if (subscription.cancel_at) {
-      lines.push(`Ended ${getLineTimeMessage(subscription.cancel_at * 1000)}`);
-    } else if (subscription.cancel_at_period_end) {
-      lines.push(`Ended ${getLineTimeMessage(subscription.current_period_end * 1000)}`);
-    } else {
-      lines.push(`Renew ${getLineTimeMessage(subscription.current_period_end * 1000)}`);
+      const endTime = subscription.cancel_at * 1000;
+      const { time, isToday } = getLineTimeInfo(endTime, locale);
+      return { action: 'willEnd', time, isToday };
+    }
+    if (subscription.cancel_at_period_end) {
+      const endTime = subscription.current_period_end * 1000;
+      const { time, isToday } = getLineTimeInfo(endTime, locale);
+      return { action: 'willEnd', time, isToday };
     }
-  } else if (subscription.status === 'past_due') {
-    lines.push(`Ended ${getLineTimeMessage((subscription.cancel_at || subscription.current_period_end) * 1000)}`);
-  } else if (subscription.status === 'canceled') {
-    lines.push(`Ended ${getLineTimeMessage(subscription.canceled_at * 1000)}`);
+    const { time, isToday } = getLineTimeInfo(subscription.current_period_end * 1000, locale);
+    return { action: 'renew', time, isToday };
   }
-
-  return lines.join(',');
+  if (subscription.status === 'past_due') {
+    const endTime = (subscription.cancel_at || subscription.current_period_end) * 1000;
+    const { time, isToday } = getLineTimeInfo(endTime, locale);
+    return { action: 'ended', time, isToday };
+  }
+  if (subscription.status === 'canceled') {
+    const { time, isToday } = getLineTimeInfo(subscription.canceled_at * 1000, locale);
+    return { action: 'ended', time, isToday };
+  }
+  return null;
 };
 
 export const getSubscriptionAction = (

package/src/locales/en.tsx

@@ -335,17 +335,17 @@ export default flat({
         empty: 'There are no invoices',
         next: 'No invoices yet, next invoice will be generated on {date}',
         invoiceNumber: 'Invoice Number',
-        emptyList: 'No Invoice',
+        emptyList: 'No Invoices',
         noPaymentRequired: 'No Payment Required',
         payBatch: 'Pay Due Invoices',
       },
       payment: {
         empty: 'There are no payments',
-        emptyList: 'No Payment',
+        emptyList: 'No Payments',
       },
       refund: {
         empty: 'There are no refunds',
-        emptyList: 'No Refund',
+        emptyList: 'No Refunds',
       },
       subscriptions: {
         plan: 'Plan',

package/src/payment/donation-form.tsx

@@ -352,7 +352,7 @@ function PaymentInner({
                       },
                     }}>
                     <HelpOutlineOutlined sx={{ fontSize: '18px' }} />
-                    <Typography>{renderBenefits()}</Typography>
+                    <Typography variant="body2">{renderBenefits()}</Typography>
                     <ArrowForwardOutlined className="benefits-arrow" sx={{ fontSize: '18px' }} />
                   </Box>
                 ))}

package/src/payment/form/currency.tsx

@@ -11,6 +11,7 @@ type Props = {
 export default function CurrencySelector({ value, currencies, onChange }: Props) {
   return (
     <Root
+      className="cko-currency-selector"
       count={currencies.length}
       style={{
         display: currencies.length > 1 ? 'grid' : 'block',
@@ -58,7 +59,7 @@ const Root = styled<any>('section')`
   .cko-payment-card {
     position: relative;
     border: 1px solid;
-    border-color: ${({ theme }) => theme.palette.secondary.main};
+    border-color: ${({ theme }) => theme.palette.primary.main};
     padding: 4px 8px;
     cursor: pointer;
     background: ${({ theme }) => theme.palette.grey[50]};

package/src/theme/index.tsx

@@ -65,7 +65,6 @@ export function PaymentThemeProvider({
           },
         },
       },
-      typography,
     });
 
     const {