payment-kit 1.13.45 → 1.13.47

package/api/dev.ts

@@ -3,4 +3,4 @@ import { setupClient } from 'vite-plugin-blocklet';
 
 import { app } from './src';
 
-setupClient(app);
+setupClient(app, { port: 47069 });

package/api/src/libs/session.ts

@@ -287,7 +287,7 @@ export function getFastCheckoutAmount(
   mode: string,
   currency: TPaymentCurrency,
   includeFreeTrial = false,
-  minimumCycle = 2
+  minimumCycle = 1
 ) {
   if (minimumCycle < 1) {
     // eslint-disable-next-line no-param-reassign

package/api/src/routes/prices.ts

@@ -1,4 +1,4 @@
-import { fromTokenToUnit } from '@ocap/util';
+import { fromTokenToUnit, fromUnitToToken } from '@ocap/util';
 import { Router } from 'express';
 import Joi from 'joi';
 import pick from 'lodash/pick';
@@ -114,20 +114,20 @@ router.get('/:id/upsell', auth, async (req, res) => {
 // update price
 // FIXME: upsell validate https://stripe.com/docs/payments/checkout/upsells
 router.put('/:id', auth, async (req, res) => {
-  const price = await Price.findByPkOrLookupKey(req.params.id as string);
+  const doc = await Price.findByPkOrLookupKey(req.params.id as string);
 
-  if (!price) {
+  if (!doc) {
     return res.status(404).json({ error: 'price not found' });
   }
 
-  if (price.active === false) {
+  if (doc.active === false) {
     return res.status(403).json({ error: 'price archived' });
   }
 
   const updates: Partial<Price> = Price.formatBeforeSave(
     pick(
       req.body,
-      price.locked
+      doc.locked
         ? ['nickname', 'description', 'metadata', 'currency_options', 'upsell']
         : ['type', 'model', 'active', 'livemode', 'nickname', 'recurring', 'description', 'tiers', 'unit_amount', 'transform_quantity', 'metadata', 'lookup_key', 'currency_options', 'upsell'] // prettier-ignore
     )
@@ -135,38 +135,41 @@ router.put('/:id', auth, async (req, res) => {
 
   if (updates.lookup_key) {
     const exist = await Price.findOne({ where: { lookup_key: updates.lookup_key } });
-    if (exist && exist.id !== price.id) {
+    if (exist && exist.id !== doc.id) {
       return res.status(400).json({ error: `lookup_key ${updates.lookup_key} already used by ${exist.id}` });
     }
   }
 
   const currencies = await PaymentCurrency.findAll({ where: { active: true } });
-  const currency = currencies.find((x) => x.id === price.currency_id);
+  const currency = currencies.find((x) => x.id === doc.currency_id);
   if (!currency) {
-    return res.status(400).json({ error: `currency used in price not found or not active: ${price.currency_id}` });
+    return res.status(400).json({ error: `currency used in price not found or not active: ${doc.currency_id}` });
   }
   if (updates.unit_amount) {
     updates.unit_amount = fromTokenToUnit(updates.unit_amount, currency.decimal).toString();
+    if (updates.currency_options) {
+      const exist = updates.currency_options.find((x) => x.currency_id === doc.currency_id);
+      if (exist) {
+        exist.unit_amount = fromUnitToToken(updates.unit_amount as string, currency.decimal);
+      }
+    }
   }
   if (updates.currency_options) {
     updates.currency_options = Price.formatCurrencies(updates.currency_options, currencies);
-    if (updates.currency_options.some((x) => x.currency_id === price.currency_id) === false) {
+    const index = updates.currency_options.findIndex((x) => x.currency_id === doc.currency_id);
+    if (index > -1) {
+      updates.unit_amount = updates.currency_options[index]?.unit_amount;
+    } else {
       updates.currency_options.unshift({
-        currency_id: price.currency_id,
-        unit_amount: price.unit_amount,
+        currency_id: doc.currency_id,
+        unit_amount: doc.unit_amount,
         tiers: null,
         custom_unit_amount: null,
       });
     }
-    if (updates.unit_amount) {
-      const base = price.currency_options.find((x) => x.currency_id === price.currency_id);
-      if (base) {
-        base.unit_amount = updates.unit_amount;
-      }
-    }
   }
 
-  await price.update(Price.formatBeforeSave(updates));
+  await doc.update(Price.formatBeforeSave(updates));
 
   return res.json(await getExpandedPrice(req.params.id as string));
 });

package/api/src/routes/pricing-table.ts

@@ -344,9 +344,11 @@ router.post('/:id/checkout/:priceId', async (req, res) => {
     },
   });
 
+  const currency = await PaymentCurrency.findOne({ where: { livemode: doc.livemode, is_base_currency: true } });
+
   raw.livemode = doc.livemode;
   raw.created_via = 'portal';
-  raw.currency_id = req.currency.id;
+  raw.currency_id = currency?.id;
 
   if (req.query.redirect) {
     raw.success_url = req.query.redirect as string;

package/blocklet.yml

@@ -14,7 +14,7 @@ repository:
   type: git
   url: git+https://github.com/blocklet/payment-kit.git
 specVersion: 1.2.8
-version: 1.13.45
+version: 1.13.47
 logo: logo.png
 files:
   - dist

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payment-kit",
-  "version": "1.13.45",
+  "version": "1.13.47",
   "scripts": {
     "dev": "blocklet dev",
     "eject": "vite eject",
@@ -40,25 +40,25 @@
     ]
   },
   "dependencies": {
-    "@arcblock/did": "^1.18.93",
+    "@arcblock/did": "^1.18.95",
     "@arcblock/did-auth-storage-nedb": "^1.7.1",
-    "@arcblock/did-connect": "^2.8.6",
-    "@arcblock/did-util": "^1.18.93",
-    "@arcblock/ux": "^2.8.6",
+    "@arcblock/did-connect": "^2.8.7",
+    "@arcblock/did-util": "^1.18.95",
+    "@arcblock/ux": "^2.8.7",
     "@blocklet/logger": "1.16.17",
     "@blocklet/sdk": "1.16.17",
-    "@blocklet/ui-react": "^2.8.6",
+    "@blocklet/ui-react": "^2.8.7",
     "@blocklet/uploader": "^0.0.33",
-    "@mui/icons-material": "^5.14.15",
-    "@mui/lab": "^5.0.0-alpha.150",
-    "@mui/material": "^5.14.15",
-    "@mui/styles": "^5.14.15",
-    "@mui/system": "^5.14.15",
-    "@ocap/asset": "^1.18.93",
-    "@ocap/client": "^1.18.93",
-    "@ocap/mcrypto": "^1.18.93",
-    "@ocap/util": "^1.18.93",
-    "@ocap/wallet": "^1.18.93",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/lab": "^5.0.0-alpha.151",
+    "@mui/material": "^5.14.16",
+    "@mui/styles": "^5.14.16",
+    "@mui/system": "^5.14.16",
+    "@ocap/asset": "^1.18.95",
+    "@ocap/client": "^1.18.95",
+    "@ocap/mcrypto": "^1.18.95",
+    "@ocap/util": "^1.18.95",
+    "@ocap/wallet": "^1.18.95",
     "@stripe/react-stripe-js": "^2.3.1",
     "@stripe/stripe-js": "^2.1.10",
     "ahooks": "^3.7.8",
@@ -88,7 +88,7 @@
     "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.47.0",
     "react-international-phone": "^3.1.2",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.18.0",
     "rimraf": "^3.0.2",
     "sequelize": "^6.33.0",
     "sqlite3": "^5.1.6",
@@ -103,12 +103,12 @@
     "@abtnode/types": "1.16.17",
     "@arcblock/eslint-config": "^0.2.4",
     "@arcblock/eslint-config-ts": "^0.2.4",
-    "@did-pay/types": "1.13.45",
+    "@did-pay/types": "1.13.47",
     "@types/cookie-parser": "^1.4.5",
     "@types/cors": "^2.8.15",
     "@types/dotenv-flow": "^3.3.2",
     "@types/express": "^4.17.20",
-    "@types/node": "^18.18.7",
+    "@types/node": "^18.18.8",
     "@types/react": "^18.2.33",
     "@types/react-dom": "^18.2.14",
     "@vitejs/plugin-react": "^2.2.0",
@@ -140,5 +140,5 @@
       "parser": "typescript"
     }
   },
-  "gitHead": "6dacad185a8f180bbb63ec062aa196dc07c56535"
+  "gitHead": "e917c1f665d97114b37ddb566329a1f9c6a9ba6b"
 }

package/src/components/checkout/form/index.tsx

@@ -1,13 +1,12 @@
 import 'react-international-phone/style.css';
 
-import SessionManager from '@arcblock/did-connect/lib/SessionManager';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
-import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { useTheme } from '@arcblock/ux/lib/Theme';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCheckoutSessionExpanded, TCustomer, TPaymentIntent, TPaymentMethodExpanded } from '@did-pay/types';
 import { LoadingButton } from '@mui/lab';
-import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Tooltip, Typography } from '@mui/material';
-import { useSetState } from 'ahooks';
+import { Avatar, Fade, InputAdornment, MenuItem, Select, Stack, Typography } from '@mui/material';
+import { useCreation, useSetState, useSize } from 'ahooks';
 import { PhoneNumberUtil } from 'google-libphonenumber';
 import pWaitFor from 'p-wait-for';
 import { useEffect } from 'react';
@@ -21,6 +20,7 @@ import FormInput from '../../input';
 import AddressForm from './address';
 import PhoneInput from './phone';
 import StripeCheckout from './stripe';
+import UserButtons from './user-buttons';
 
 const phoneUtil = PhoneNumberUtil.getInstance();
 
@@ -72,6 +72,7 @@ export default function PaymentForm({
   onPaid,
   onError,
 }: PageData) {
+  const theme = useTheme();
   const { t } = useLocaleContext();
   const { session, connectApi } = useSessionContext();
   const { control, getValues, setValue, handleSubmit } = useFormContext();
@@ -112,6 +113,17 @@ export default function PaymentForm({
   const paymentCurrency = useWatch({ control, name: 'payment_currency' });
   const paymentCurrencies = paymentMethods.find((x) => x.id === paymentMethod)?.payment_currencies || [];
 
+  const domSize = useSize(document.body);
+
+  const isCloumnLayout = useCreation(() => {
+    if (domSize) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
+
   const payee = getStatementDescriptor(checkoutSession.line_items);
   const buttonText = session.user
     ? t(`checkout.${checkoutSession.mode}`)
@@ -249,16 +261,7 @@ export default function PaymentForm({
         <Stack className="cko-payment-contact">
           <Stack direction="row" sx={{ mb: 1 }} alignItems="center" justifyContent="space-between">
             <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{t('checkout.contact')}</Typography>
-            <Stack direction="row" alignItems="center" justifyContent="space-between">
-              <LocaleSelector showText={false} />
-              {session.user ? (
-                <SessionManager session={session} />
-              ) : (
-                <Tooltip title={t('checkout.login')} arrow>
-                  <SessionManager session={session} />
-                </Tooltip>
-              )}
-            </Stack>
+            {isCloumnLayout ? null : <UserButtons />}
           </Stack>
           <Stack direction="column" className="cko-payment-form" spacing={0}>
             <FormInput

package/src/components/checkout/form/user-buttons.tsx

@@ -0,0 +1,24 @@
+import SessionManager from '@arcblock/did-connect/lib/SessionManager';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import LocaleSelector from '@arcblock/ux/lib/Locale/selector';
+import { Stack, Tooltip } from '@mui/material';
+
+import { useSessionContext } from '../../../contexts/session';
+
+export default function UserButtons() {
+  const { t } = useLocaleContext();
+  const { session } = useSessionContext();
+
+  return (
+    <Stack direction="row" alignItems="center" justifyContent="space-between">
+      <LocaleSelector showText={false} />
+      {session.user ? (
+        <SessionManager session={session} />
+      ) : (
+        <Tooltip title={t('checkout.login')} arrow>
+          <SessionManager session={session} />
+        </Tooltip>
+      )}
+    </Stack>
+  );
+}

package/src/components/checkout/header.tsx

@@ -1,9 +1,11 @@
+import { useTheme } from '@arcblock/ux/lib/Theme';
 import type { TCheckoutSessionExpanded } from '@did-pay/types';
 import { Avatar, Stack, Typography } from '@mui/material';
-import { useLocalStorageState } from 'ahooks';
+import { useCreation, useLocalStorageState, useSize } from 'ahooks';
 
 import { getStatementDescriptor } from '../../libs/util';
 import Livemode from '../livemode';
+import UserButtons from './form/user-buttons';
 
 type Props = {
   checkoutSession: TCheckoutSessionExpanded;
@@ -12,12 +14,27 @@ type Props = {
 export default function PaymentHeader({ checkoutSession }: Props) {
   const [livemode] = useLocalStorageState('livemode', { defaultValue: true });
   const brand = getStatementDescriptor(checkoutSession.line_items);
+  const theme = useTheme();
+
+  const domSize = useSize(document.body);
+
+  const isCloumnLayout = useCreation(() => {
+    if (domSize) {
+      if (domSize?.width <= theme.breakpoints.values.md) {
+        return true;
+      }
+    }
+    return false;
+  }, [domSize, theme]);
 
   return (
-    <Stack className="cko-header" direction="row" spacing={1} alignItems="center">
-      <Avatar variant="square" src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
-      <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
-      {!livemode && <Livemode />}
+    <Stack className="cko-header" direction="row" spacing={1} alignItems="center" justifyContent="space-between">
+      <Stack direction="row" spacing={1} alignItems="center">
+        <Avatar variant="square" src={window.blocklet.appLogo} sx={{ width: 32, height: 32 }} />
+        <Typography sx={{ color: 'text.primary', fontWeight: 600 }}>{brand}</Typography>
+        {!livemode && <Livemode />}
+      </Stack>
+      {isCloumnLayout ? <UserButtons /> : null}
     </Stack>
   );
 }

package/src/components/checkout/pay.tsx

@@ -81,7 +81,7 @@ export default function CheckoutPay({
   if (!checkoutSession) {
     return (
       <PaymentRoot>
-        <Stack direction="row" className="cko-container">
+        <Stack className="cko-container">
           <Stack className="cko-overview">
             <OverviewSkeleton />
           </Stack>
@@ -223,7 +223,7 @@ export function CheckoutPayMain({
   return (
     <FormProvider {...methods}>
       <PaymentRoot>
-        <Stack direction="row" className="cko-container">
+        <Stack className="cko-container">
           <Fade in>
             <Stack className="cko-overview" direction="column">
               <PaymentHeader checkoutSession={state.checkoutSession} />
@@ -269,14 +269,16 @@ export function CheckoutPayMain({
 export const PaymentRoot = styled(Box)`
   box-sizing: border-box;
   display: flex;
-  flex-wrap: nowrap;
+  flex-direction: column;
   justify-content: center;
-  min-height: 0;
+  align-items: center;
+  min-height: 100vh;
+  position: relative;
 
   &:before {
     animation-fill-mode: both;
     background: #ffffff;
-    content: ' ';
+    content: '';
     height: 100%;
     position: fixed;
     right: 0;
@@ -288,21 +290,30 @@ export const PaymentRoot = styled(Box)`
 
   .cko-container {
     width: 100%;
-    max-width: 920px;
+    max-width: 1000px;
     display: flex;
-    align-items: flex-start;
+    flex-direction: row;
     justify-content: space-between;
     position: relative;
-    transform: translateY(max(48px, calc(50vh - 55%)));
+    padding: 0 16px;
   }
 
   .cko-overview {
-    width: 380px;
+    width: 400px;
     min-height: 540px;
+    position: relative;
+  }
+  .cko-header {
+    left: 0;
+    margin-bottom: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: background-color 0.15s ease, box-shadow 0.15s ease-out;
   }
 
   .cko-payment {
-    width: 380px;
+    width: 400px;
     .MuiInputBase-root {
       border-radius: 0;
     }
@@ -337,10 +348,38 @@ export const PaymentRoot = styled(Box)`
     }
   }
 
+  .cko-header {
+  }
+
   .cko-footer {
     position: absolute;
     bottom: 0;
-    left: 0;
+    left: 12px;
     margin: 12px 0;
   }
+
+  @media (max-width: ${({ theme }) => theme.breakpoints.values.md}px) {
+    &:before {
+      display: none;
+    }
+    .cko-container {
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+      min-width: 350px;
+      max-width: 400px;
+    }
+    .cko-overview {
+      width: 100%;
+      min-height: auto;
+    }
+    .cko-payment {
+      width: 100%;
+    }
+
+    .cko-footer {
+      position: static;
+      margin-top: 0;
+    }
+  }
 `;

package/src/components/checkout/product-item.tsx

@@ -23,10 +23,10 @@ ProductItem.defaultProps = {
 };
 
 export default function ProductItem({ item, session, currency, mode, children, onUpsell, onDownsell }: Props) {
-  const { t } = useLocaleContext();
-  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0);
+  const { t, locale } = useLocaleContext();
+  const pricing = formatLineItemPricing(item, currency, session.subscription_data?.trial_period_days || 0, locale);
   const saving = formatUpsellSaving(session, currency);
-  const metered = item.price?.recurring?.usage_type === 'metered' ? ' based on usage' : '';
+  const metered = item.price?.recurring?.usage_type === 'metered' ? t('common.metered') : '';
   const canUpsell = mode === 'normal' && session.line_items.length === 1;
   return (
     <Stack direction="column" alignItems="flex-start" spacing={1} sx={{ width: '100%' }}>
@@ -38,7 +38,7 @@ export default function ProductItem({ item, session, currency, mode, children, o
             description={item.price.product?.description}
             extra={
               item.price.type === 'recurring' && item.price.recurring
-                ? [pricing.quantity, `billed ${formatRecurring(item.upsell_price?.recurring || item.price.recurring)} ${metered}`].filter(Boolean).join(', ') // prettier-ignore
+                ? [pricing.quantity, t('common.billed', { rule: `${formatRecurring(item.upsell_price?.recurring || item.price.recurring, true, 'per', locale)} ${metered}` })].filter(Boolean).join(', ') // prettier-ignore
                 : pricing.quantity
             }
           />
@@ -71,12 +71,12 @@ export default function ProductItem({ item, session, currency, mode, children, o
               onChange={() => onUpsell(item.price_id, item.price.upsell?.upsells_to_id)}
             />
             {t('checkout.upsell.save', {
-              recurring: t(`common.${formatRecurring(item.price.upsell.upsells_to.recurring as PriceRecurring)}`),
+              recurring: formatRecurring(item.price.upsell.upsells_to.recurring as PriceRecurring, true, 'per', locale),
             })}
             <Status label={t('checkout.upsell.off', { saving })} color="primary" variant="outlined" sx={{ ml: 1 }} />
           </Typography>
           <Typography component="span" sx={{ fontSize: 12 }}>
-            {formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label)}
+            {formatPrice(item.price.upsell.upsells_to, currency, item.price.product?.unit_label, 1, true, locale)}
           </Typography>
         </Stack>
       )}
@@ -102,7 +102,7 @@ export default function ProductItem({ item, session, currency, mode, children, o
             })}
           </Typography>
           <Typography component="span" sx={{ fontSize: 12 }}>
-            {formatPrice(item.price, currency, item.price.product?.unit_label)}
+            {formatPrice(item.price, currency, item.price.product?.unit_label, 1, true, locale)}
           </Typography>
         </Stack>
       )}

package/src/components/checkout/summary.tsx

@@ -41,10 +41,10 @@ export default function PaymentSummary({
   onApplyCrossSell,
   onCancelCrossSell,
 }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const [state, setState] = useSetState({ loading: false });
   const { data, runAsync } = useRequest(() => fetchCrossSell(checkoutSession.id));
-  const headlines = formatCheckoutHeadlines(checkoutSession, currency);
+  const headlines = formatCheckoutHeadlines(checkoutSession, currency, locale);
 
   const handleUpsell = async (from: string, to: string) => {
     await onUpsell(from, to);
@@ -82,7 +82,12 @@ export default function PaymentSummary({
 
   return (
     <Fade in>
-      <Stack className="cko-product" direction="column" sx={{ mt: 4 }}>
+      <Stack
+        className="cko-product"
+        direction="column"
+        sx={{
+          mt: 8,
+        }}>
         <Stack className="cko-product-summary" sx={{ mb: 4 }}>
           <Typography sx={{ fontWeight: 500, fontSize: '1.15rem', color: 'text.secondary' }}>
             {headlines.action}
@@ -120,7 +125,15 @@ export default function PaymentSummary({
             direction="column"
             alignItems="flex-end"
             spacing={0.5}
-            sx={{ border: '1px solid #eee', borderRadius: 1, padding: 1, mt: 8, mb: 4 }}>
+            sx={{
+              border: '1px solid #eee',
+              borderRadius: 1,
+              padding: 1,
+              mt: {
+                xs: 4,
+                md: 8,
+              },
+            }}>
             <ProductItem
               item={{ quantity: 1, price: data, price_id: data.id, cross_sell: true } as TLineItemExpanded}
               session={checkoutSession}

package/src/components/livemode.tsx

@@ -10,7 +10,7 @@ export default function Livemode() {
       sx={{
         ml: 2,
         height: 18,
-        lineHeight: 18,
+        lineHeight: 1,
         textTransform: 'uppercase',
         fontSize: '0.8rem',
         fontWeight: 'bold',

package/src/components/portal/invoice/list.tsx

@@ -4,7 +4,6 @@ import type { Paginated, TInvoiceExpanded } from '@did-pay/types';
 import { Box, Button, CircularProgress, Stack, Typography } from '@mui/material';
 import { fromUnitToToken } from '@ocap/util';
 import { useInfiniteScroll } from 'ahooks';
-import React from 'react';
 import { Link } from 'react-router-dom';
 
 import api from '../../../libs/api';
@@ -63,12 +62,23 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
   const grouped = groupByDate(data.list);
 
   return (
-    <Stack direction="column" spacing={3} sx={{ mt: 1 }}>
+    <Stack direction="column" gap={3} sx={{ mt: 1 }}>
       {Object.entries(grouped).map(([date, invoices]) => (
-        <React.Fragment key={date}>
-          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2 }}>{date}</Typography>
+        <Box key={date}>
+          <Typography sx={{ fontWeight: 'bold', color: 'text.secondary', mt: 2, mb: 1 }}>{date}</Typography>
           {invoices.map((invoice) => (
-            <Stack key={invoice.id} direction="row" justifyContent="space-between" spacing={3} flexWrap="nowrap">
+            <Stack
+              key={invoice.id}
+              direction={{
+                xs: 'column',
+                sm: 'row',
+              }}
+              gap={{
+                xs: 0.5,
+                sm: 1.5,
+                md: 4,
+              }}
+              flexWrap="nowrap">
               <Box flex={2}>
                 <Link to={`/customer/invoice/${invoice.id}`}>
                   <Typography component="span">{invoice.number}</Typography>
@@ -91,7 +101,7 @@ export default function CustomerInvoiceList({ customer_id }: Props) {
               </Box>
             </Stack>
           ))}
-        </React.Fragment>
+        </Box>
       ))}
       <Box>
         {hasMore && (

package/src/components/portal/subscription/list.tsx

@@ -99,7 +99,15 @@ export function CurrentSubscriptionsInner({ id, onChange }: Props) {
   return (
     <Stack direction="column" spacing={4} sx={{ mt: 2 }}>
       {data.list.map((subscription) => (
-        <Stack key={subscription.id} direction="row" justifyContent="space-between" spacing={3}>
+        <Stack
+          key={subscription.id}
+          direction="row"
+          justifyContent="space-between"
+          gap={{
+            xs: 1,
+            sm: 3,
+          }}
+          flexWrap="wrap">
           <Stack direction="column" spacing={0.5}>
             <Stack direction="row" spacing={1} alignItems="center">
               <AvatarGroup max={3}>

package/src/components/product/cross-sell-select.tsx

@@ -13,7 +13,7 @@ type Props = {
 };
 
 export default function CrossSellSelect({ data, onSelect }: Props) {
-  const { t } = useLocaleContext();
+  const { t, locale } = useLocaleContext();
   const { products } = useProductsContext();
   const { settings } = useSettingsContext();
 
@@ -41,7 +41,7 @@ export default function CrossSellSelect({ data, onSelect }: Props) {
           <MenuItem key={x.id} value={x.id}>
             <InfoCard
               name={x.name}
-              description={formatProductPrice(x as any, settings.baseCurrency)}
+              description={formatProductPrice(x as any, settings.baseCurrency, locale)}
               logo={x.images[0]}
             />
           </MenuItem>

package/src/components/product/cross-sell.tsx

@@ -14,6 +14,7 @@ import InfoRow from '../info-row';
 import CrossSellSelect from './cross-sell-select';
 
 export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onChange: Function }) {
+  const { locale } = useLocaleContext();
   const { settings } = useSettingsContext();
   const [state, setState] = useSetState({
     loading: false,
@@ -55,7 +56,7 @@ export function CrossSellForm({ data, onChange }: { data: TProductExpanded; onCh
       <Stack spacing={1} direction="row" alignItems="center">
         <InfoCard
           name={to.name}
-          description={formatProductPrice(to as any, settings.baseCurrency)}
+          description={formatProductPrice(to as any, settings.baseCurrency, locale)}
           logo={to.images[0]}
         />
         <IconButton size="small" sx={{ ml: 1 }} onClick={onRemoveUpsell}>