payment-kit 1.13.18 → 1.13.20

package/src/libs/util.ts

@@ -1,16 +1,20 @@
+/* eslint-disable @typescript-eslint/indent */
 import type {
   LineItem,
+  PriceCurrency,
   PriceRecurring,
   TCheckoutSessionExpanded,
   TLineItemExpanded,
   TPaymentCurrency,
   TPaymentLinkExpanded,
+  TPaymentMethodExpanded,
   TPrice,
   TProductExpanded,
   TSubscriptionItemExpanded,
 } from '@did-pay/types';
 import { BN, fromUnitToToken } from '@ocap/util';
 import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
 
 import dayjs from './dayjs';
 
@@ -128,7 +132,10 @@ export const formatProductPrice = (
 };
 
 export const formatPrice = (price: TPrice, currency: TPaymentCurrency, unit_label?: string, quantity: number = 1) => {
-  const amount = fromUnitToToken(new BN(price.unit_amount).mul(new BN(quantity)), currency.decimal).toString();
+  const amount = fromUnitToToken(
+    new BN(getPriceUintAmountByCurrency(price, currency)).mul(new BN(quantity)),
+    currency.decimal
+  ).toString();
   if (price?.type === 'recurring' && price.recurring) {
     const recurring = formatRecurring(price.recurring, false, '/');
 
@@ -192,12 +199,33 @@ export function formatRecurring(recurring: PriceRecurring, translate: boolean =
   return `every ${recurring.interval_count} ${recurring.interval}s`;
 }
 
+export function getPriceUintAmountByCurrency(price: TPrice, currency: TPaymentCurrency) {
+  const options = getPriceCurrencyOptions(price);
+  const option = options.find((x) => x.currency_id === currency.id);
+  if (option) {
+    return option.unit_amount;
+  }
+
+  return price.unit_amount;
+}
+
+export function getPriceCurrencyOptions(price: TPrice): PriceCurrency[] {
+  if (Array.isArray(price.currency_options)) {
+    return price.currency_options;
+  }
+
+  return [{ currency_id: price.currency_id, unit_amount: price.unit_amount, tiers: null, custom_unit_amount: null }];
+}
+
 export function formatLineItemPricing(
   item: TLineItemExpanded,
   currency: TPaymentCurrency,
   trial: number
 ): { primary: string; secondary?: string } {
-  const amount = fromUnitToToken(new BN(item.price.unit_amount).mul(new BN(item.quantity))).toString();
+  const amount = fromUnitToToken(
+    new BN(getPriceUintAmountByCurrency(item.price, currency)).mul(new BN(item.quantity)),
+    currency.decimal
+  ).toString();
 
   if (item.price.type === 'recurring' && item.price.recurring) {
     if (trial > 0) {
@@ -222,7 +250,7 @@ export function formatLineItemPricing(
   };
 }
 
-export function getCheckoutAmount(items: TLineItemExpanded[] = [], includeFreeTrial = false) {
+export function getCheckoutAmount(items: TLineItemExpanded[], currency: TPaymentCurrency, includeFreeTrial = false) {
   const subtotal = items
     .reduce((acc, x) => {
       if (x.price.type === 'recurring') {
@@ -233,7 +261,7 @@ export function getCheckoutAmount(items: TLineItemExpanded[] = [], includeFreeTr
           return acc;
         }
       }
-      return acc.add(new BN(x.price.unit_amount).mul(new BN(x.quantity)));
+      return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
     }, new BN(0))
     .toString();
 
@@ -247,7 +275,7 @@ export function getCheckoutAmount(items: TLineItemExpanded[] = [], includeFreeTr
           return acc;
         }
       }
-      return acc.add(new BN(x.price.unit_amount).mul(new BN(x.quantity)));
+      return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
     }, new BN(0))
     .toString();
 
@@ -255,31 +283,36 @@ export function getCheckoutAmount(items: TLineItemExpanded[] = [], includeFreeTr
 }
 
 export function formatPaymentLinkPricing(link: TPaymentLinkExpanded, currency: TPaymentCurrency) {
-  const amount = getCheckoutAmount(link.line_items, !!link.subscription_data?.trial_period_days);
-  return formatCheckoutHeadlines({
-    mode: 'payment',
-    status: 'open',
-    payment_status: 'unpaid',
-    currency,
-    amount_total: amount.total,
-    amount_subtotal: amount.subtotal,
-    expires_at: dayjs().add(30, 'days').unix(),
-    ...link,
-  });
+  const amount = getCheckoutAmount(link.line_items, currency, !!link.subscription_data?.trial_period_days);
+  return formatCheckoutHeadlines(
+    {
+      mode: 'payment',
+      status: 'open',
+      payment_status: 'unpaid',
+      currency,
+      amount_total: amount.total,
+      amount_subtotal: amount.subtotal,
+      expires_at: dayjs().add(30, 'days').unix(),
+      ...link,
+    } as any,
+    currency
+  );
 }
 
-export function formatCheckoutHeadlines(session: TCheckoutSessionExpanded): {
+export function formatCheckoutHeadlines(
+  session: TCheckoutSessionExpanded,
+  currency: TPaymentCurrency
+): {
   action: string;
   amount: string;
   then?: string;
   secondary?: string;
 } {
   const items = session.line_items as TLineItemExpanded[];
-  const total = session.amount_total;
   const trial = session.subscription_data?.trial_period_days || 0;
-  const currency = session.currency as TPaymentCurrency;
 
   const brand = getStatementDescriptor(items);
+  const { total } = getCheckoutAmount(items, currency, !!trial);
   const amount = `${fromUnitToToken(total, currency.decimal)} ${currency.symbol}`;
 
   // empty
@@ -313,7 +346,7 @@ export function formatCheckoutHeadlines(session: TCheckoutSessionExpanded): {
           if (x.price.recurring?.usage_type === 'metered') {
             return acc;
           }
-          return acc.add(new BN(x.price.unit_amount).mul(new BN(x.quantity)));
+          return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
         }, new BN(0)),
         currency.decimal
       ),
@@ -360,7 +393,7 @@ export function formatCheckoutHeadlines(session: TCheckoutSessionExpanded): {
         if (x.price.recurring?.usage_type === 'metered') {
           return acc;
         }
-        return acc.add(new BN(x.price.unit_amount).mul(new BN(x.quantity)));
+        return acc.add(new BN(getPriceUintAmountByCurrency(x.price, currency)).mul(new BN(x.quantity)));
       }, new BN(0)),
     currency.decimal
   );
@@ -432,6 +465,29 @@ export function getWebhookStatusColor(status: string) {
   }
 }
 
+export function isPriceCurrencyAligned(list: LineItem[], products: TProductExpanded[], index: number) {
+  const prices = list.map((x) => {
+    const product = getProductByPriceId(products, x.price_id);
+    const price = product?.prices.find((p) => p.id === x.price_id);
+    return price;
+  });
+
+  const current = getPriceCurrencyOptions(prices[index] as TPrice)
+    .map((x) => x.currency_id)
+    .sort();
+
+  for (let i = 0; i < index; i++) {
+    const previous = getPriceCurrencyOptions(prices[i] as TPrice)
+      .map((x) => x.currency_id)
+      .sort();
+    if (isEqual(current, previous) === false) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
 export function isPriceRecurringAligned(list: LineItem[], products: TProductExpanded[], index: number) {
   const prices = list.map((x) => {
     const product = getProductByPriceId(products, x.price_id);
@@ -462,6 +518,16 @@ export function isPriceRecurringAligned(list: LineItem[], products: TProductExpa
   });
 }
 
+export function isPriceAligned(list: LineItem[], products: TProductExpanded[], index: number) {
+  const currency = isPriceCurrencyAligned(list, products, index);
+  const recurring = isPriceRecurringAligned(list, products, index);
+  return {
+    currency,
+    recurring,
+    aligned: currency && recurring,
+  };
+}
+
 export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], maxLength = 2) {
   const names = items.map((x) => x.price.product.name);
   return (
@@ -472,3 +538,32 @@ export function formatSubscriptionProduct(items: TSubscriptionItemExpanded[], ma
 export function formatAmount(amount: string, decimals: number, points = 2) {
   return Number(fromUnitToToken(amount, decimals)).toFixed(points);
 }
+
+export function findCurrency(methods: TPaymentMethodExpanded[], currencyId: string) {
+  for (const method of methods) {
+    for (const currency of method.payment_currencies) {
+      if (currency.id === currencyId) {
+        return currency;
+      }
+    }
+  }
+
+  return null;
+}
+
+export function filterCurrencies(method: TPaymentMethodExpanded, hasSelected: (currency: any) => boolean) {
+  method.payment_currencies = method.payment_currencies.filter((x) => !hasSelected(x));
+  return method;
+}
+
+export function getSupportedPaymentMethods(methods: TPaymentMethodExpanded[], hasSelected: (currency: any) => boolean) {
+  const filtered = cloneDeep(methods).map((x) => filterCurrencies(x, hasSelected));
+  return filtered.filter((x) => x.payment_currencies.length);
+}
+
+export function getSupportedPaymentCurrencies(items: TLineItemExpanded[]) {
+  const currencies = items.reduce((acc, x: any) => {
+    return acc.concat(x.price.currency_options.map((c: any) => c.currency_id));
+  }, []);
+  return Array.from(new Set(currencies));
+}

package/src/locales/en.tsx

@@ -92,6 +92,7 @@ export default flat({
       archived: 'This product has been archived',
       archivedTip:
         'This product can’t be added to new invoices, subscriptions, payment links, or pricing tables. Any existing subscriptions with this product remain active until canceled and any existing payment links or pricing tables are deactivated.',
+      locked: 'This product is locked because at least one of its prices is used by a subscription or a payment.',
       image: {
         label: 'Image',
         add: 'Add image',
@@ -131,6 +132,8 @@ export default flat({
       additional: 'Additional options',
       model: 'Pricing model',
       amount: 'Price',
+      locked: 'This price is locked because it is used by a subscription or a payment.',
+      amountTip: 'Choose recurring for subscriptions and one-time for everything else.',
       duplicate: 'Duplicate price',
       edit: 'Edit price',
       archive: 'Archive price',
@@ -152,8 +155,14 @@ export default flat({
       recurring: {
         interval: 'Billing period',
         metered: 'Usage is metered?',
+        meteredTip:
+          'Metered billing lets you charge customers based on reported usage at the end of each billing period.',
         aggregate: 'Charge for metered usage by',
       },
+      currency: {
+        add: 'Add more currencies',
+        list: 'Currencies',
+      },
     },
     coupon: {
       create: 'Create Coupon',
@@ -186,7 +195,8 @@ export default flat({
       noProducts: 'Payment link must have at least one product',
       noRedirectUrl: 'Payment link must have a redirect url',
       noSubscriptionTrialDays: 'You must specify a trial period for subscription',
-      notAligned: 'The prices on all line items must have the same recurring interval',
+      recurringNotAligned: 'The prices on all line items must have the same recurring interval',
+      currencyNotAligned: 'The prices on all line items must have the same currency settings',
       edit: 'Edit payment link',
       rename: 'Change name',
       archive: 'Archive payment link',
@@ -207,8 +217,48 @@ export default flat({
       refund: 'Refund payment',
     },
     paymentMethod: {
-      name: 'Payment Method',
+      _name: 'Payment Method',
       type: 'Type',
+      add: 'Add payment method',
+      save: 'Save payment method',
+      saved: 'Payment method successfully saved',
+      settings: 'Settings',
+      name: {
+        label: 'Name',
+        tip: 'Consumer facing',
+      },
+      description: {
+        label: 'Description',
+        tip: 'Not consumer facing',
+      },
+      stripe: {
+        publishable_key: {
+          label: 'Publishable Key',
+          tip: 'Publishable Key, See Dashboard > Developers > API Keys',
+        },
+        secret_key: {
+          label: 'Secret Key',
+          tip: 'Secret Key, See Dashboard > Developers > API Keys',
+        },
+        webhook_signing_secret: {
+          label: 'Webhook Signing Secret',
+          tip: 'Webhook Signing Secret, See Dashboard > Developers > Webhooks > Signing Secret',
+        },
+      },
+      arcblock: {
+        chain_id: {
+          label: 'Chain ID',
+          tip: 'Just a name',
+        },
+        api_host: {
+          label: 'API Host',
+          tip: 'The graphql endpoint to send transaction to',
+        },
+        explorer_host: {
+          label: 'Explorer Host',
+          tip: 'The webapp endpoint to view transaction details',
+        },
+      },
     },
     paymentCurrency: {
       name: 'Payment Currency',
@@ -245,6 +295,7 @@ export default flat({
       collectionMethod: 'Billing',
       currentPeriod: 'Current Period',
       trialingPeriod: 'Trial Period',
+      trailEnd: 'Trial ends {date}',
       discount: 'Discount',
       startedAt: 'Started',
       nextInvoice: 'Next Invoice',
@@ -257,6 +308,7 @@ export default flat({
         schedule: 'Scheduled to cancel',
         title: 'Cancel subscription',
         required: 'Custom cancel time is required',
+        will: 'Cancels on {date}',
         at: {
           title: 'Cancel',
           now: 'Immediately ({date})',
@@ -281,6 +333,17 @@ export default flat({
           void: 'Void invoices',
           voidTip: 'For businesses not currently offering services.',
         },
+        until: {
+          never: 'Collection paused',
+          custom: 'Collection paused until {date}',
+        },
+      },
+      usage: {
+        title: 'Usage records',
+        current: 'Usage records for current period',
+        view: 'View usage',
+        vary: 'Varies with usage',
+        used: 'Unit used',
       },
     },
     customer: {
@@ -331,8 +394,11 @@ export default flat({
     payment: 'Pay',
     subscription: 'Subscribe',
     setup: 'Subscribe',
+    continue: 'Confirm {action}',
     connect: 'Connect and {action}',
+    login: 'Login to load and save contact information',
     portal: 'Manage subscriptions',
+    cardPay: '{action} with card',
     completed: {
       payment: 'Thanks for your purchase',
       subscription: 'Thanks for your subscribing',
@@ -341,6 +407,8 @@ export default flat({
     },
     confirm:
       'By confirming your subscription, you allow {payee} to charge your account for this and future payments in accordance with their terms. You can always cancel your subscription.',
+    required: 'Required',
+    invalid: 'Invalid',
     billing: {
       auto: 'Country',
       required: 'Billing address',
@@ -349,12 +417,13 @@ export default flat({
       city: 'City or town',
       line1: 'Address',
       line2: 'Line2',
-      postal_code: 'Postal Code',
+      postal_code: 'Postal code',
     },
     customer: {
       name: 'Name',
       email: 'Email',
       phone: 'Phone',
+      phonePlaceholder: 'Phone number',
       phoneTip: 'In case we need to contact you about your order',
     },
   },

package/src/pages/admin/billing/invoices/detail.tsx

@@ -128,7 +128,7 @@ export default function InvoiceDetail(props: { id: string }) {
           )}
           <InfoRow label={t('admin.invoice.billing')} value={data.collection_method} />
           <InfoRow
-            label={t('admin.paymentMethod.name')}
+            label={t('admin.paymentMethod._name')}
             value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
           />
           <InfoRow
@@ -205,7 +205,10 @@ export default function InvoiceDetail(props: { id: string }) {
       <Box className="section">
         <SectionHeader title={t('admin.events')} />
         <Box className="section-body">
-          <EventList features={{ toolbar: false }} object_id={data.id} />
+          <EventList
+            features={{ toolbar: false }}
+            object_id={[data.id, data.payment_intent_id].filter(Boolean).join(',')}
+          />
         </Box>
       </Box>
     </Root>

package/src/pages/admin/billing/subscriptions/detail.tsx

@@ -18,11 +18,11 @@ import InfoRow from '../../../../components/info-row';
 import InvoiceList from '../../../../components/invoice/list';
 import MetadataEditor from '../../../../components/metadata/editor';
 import SectionHeader from '../../../../components/section/header';
-import Status from '../../../../components/status';
 import SubscriptionActions from '../../../../components/subscription/actions';
 import SubscriptionItemList from '../../../../components/subscription/items';
+import SubscriptionStatus from '../../../../components/subscription/status';
 import api from '../../../../libs/api';
-import { formatError, formatSubscriptionProduct, formatTime, getSubscriptionStatusColor } from '../../../../libs/util';
+import { formatError, formatSubscriptionProduct, formatTime } from '../../../../libs/util';
 
 const fetchData = (id: string): Promise<TSubscriptionExpanded> => {
   return api.get(`/api/subscriptions/${id}`).then((res) => res.data);
@@ -95,7 +95,7 @@ export default function SubscriptionDetail(props: { id: string }) {
               <Typography variant="h5" sx={{ fontWeight: 600 }}>
                 {formatSubscriptionProduct(data.items)}
               </Typography>
-              <Status label={data.status} color={getSubscriptionStatusColor(data.status)} sx={{ ml: 1 }} />
+              <SubscriptionStatus subscription={data} sx={{ ml: 1 }} />
             </Stack>
             <SubscriptionActions data={data} onChange={runAsync} variant="normal" />
           </Stack>
@@ -166,17 +166,17 @@ export default function SubscriptionDetail(props: { id: string }) {
           <InfoRow label={t('admin.subscription.discount')} value={data.discount_id ? data.discount_id : ''} />
           <InfoRow label={t('admin.subscription.collectionMethod')} value={data.collection_method} />
           <InfoRow
-            label={t('admin.paymentMethod.name')}
+            label={t('admin.paymentMethod._name')}
             value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
           />
           <InfoRow
             label={t('admin.paymentCurrency.name')}
             value={<Currency logo={data.paymentCurrency.logo} name={data.paymentCurrency.symbol} />}
           />
-          {data.payment_details?.tx_hash && (
+          {data.payment_details?.arcblock?.tx_hash && (
             <InfoRow
               label={t('common.txHash')}
-              value={<TxLink hash={data.payment_details?.tx_hash} method={data.paymentMethod} />}
+              value={<TxLink hash={data.payment_details.arcblock?.tx_hash} method={data.paymentMethod} />}
             />
           )}
         </Stack>

package/src/pages/admin/customers/customers/detail.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/no-unstable-nested-components */
+import DidAddress from '@arcblock/ux/lib/DID';
 import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
 import Toast from '@arcblock/ux/lib/Toast';
 import type { TCustomerExpanded } from '@did-pay/types';
@@ -7,10 +8,12 @@ import { Alert, Box, Button, CircularProgress, Stack, Typography } from '@mui/ma
 import { styled } from '@mui/system';
 import { useRequest, useSetState } from 'ahooks';
 import { isEmpty } from 'lodash';
+import { FlagEmoji } from 'react-international-phone';
 import { Link, useNavigate } from 'react-router-dom';
 
 import Copyable from '../../../../components/copyable';
 import CustomerActions from '../../../../components/customer/actions';
+import EditCustomer from '../../../../components/customer/edit';
 import EventList from '../../../../components/event/list';
 import InfoMetric from '../../../../components/info-metric';
 import InfoRow from '../../../../components/info-row';
@@ -35,12 +38,11 @@ export default function CustomerDetail(props: { id: string }) {
     },
     editing: {
       metadata: false,
-      product: false,
+      customer: false,
     },
     loading: {
       metadata: false,
-      price: false,
-      product: false,
+      customer: false,
     },
   });
 
@@ -54,9 +56,9 @@ export default function CustomerDetail(props: { id: string }) {
     return <CircularProgress />;
   }
 
-  const createUpdater = (key: string) => async (updates: TCustomerExpanded) => {
+  const onUpdateMetadata = async (updates: TCustomerExpanded) => {
     try {
-      setState((prev) => ({ loading: { ...prev.loading, [key]: true } }));
+      setState((prev) => ({ loading: { ...prev.loading, metadata: true } }));
       await api.put(`/api/customers/${props.id}`, updates).then((res) => res.data);
       Toast.success(t('common.saved'));
       runAsync();
@@ -64,11 +66,24 @@ export default function CustomerDetail(props: { id: string }) {
       console.error(err);
       Toast.error(formatError(err));
     } finally {
-      setState((prev) => ({ loading: { ...prev.loading, [key]: false } }));
+      setState((prev) => ({ loading: { ...prev.loading, metadata: false } }));
+    }
+  };
+
+  const onUpdateInfo = async (updates: TCustomerExpanded) => {
+    try {
+      setState((prev) => ({ loading: { ...prev.loading, customer: true } }));
+      await api.put(`/api/customers/${props.id}`, updates).then((res) => res.data);
+      Toast.success(t('common.saved'));
+      runAsync();
+    } catch (err) {
+      console.error(err);
+      Toast.error(formatError(err));
+    } finally {
+      setState((prev) => ({ loading: { ...prev.loading, customer: false } }));
     }
   };
 
-  const onUpdateMetadata = createUpdater('metadata');
   const onChange = (action: string) => {
     if (action === 'remove') {
       navigate('/admin/customers');
@@ -120,12 +135,14 @@ export default function CustomerDetail(props: { id: string }) {
             variant="outlined"
             color="inherit"
             size="small"
-            onClick={() => setState((prev) => ({ editing: { ...prev.editing, product: true } }))}>
+            disabled={state.editing.customer}
+            onClick={() => setState((prev) => ({ editing: { ...prev.editing, customer: true } }))}>
             <Edit fontSize="small" sx={{ mr: 0.5 }} />
             {t('common.edit')}
           </Button>
         </SectionHeader>
         <Stack>
+          <InfoRow label={t('common.did')} value={<DidAddress did={data.did} />} />
           <InfoRow label={t('admin.customer.name')} value={data.name} />
           <InfoRow label={t('admin.customer.phone')} value={data.phone} />
           <InfoRow label={t('admin.customer.email')} value={data.email} />
@@ -136,7 +153,16 @@ export default function CustomerDetail(props: { id: string }) {
             label={t('admin.customer.address.label')}
             value={
               <Stack direction="column">
-                <InfoRow label={t('admin.customer.address.country')} value={data.address?.country} />
+                <InfoRow
+                  label={t('admin.customer.address.country')}
+                  value={
+                    data.address?.country ? (
+                      <FlagEmoji iso2={data.address?.country} style={{ display: 'flex', width: 24 }} />
+                    ) : (
+                      ''
+                    )
+                  }
+                />
                 <InfoRow label={t('admin.customer.address.state')} value={data.address?.state} />
                 <InfoRow label={t('admin.customer.address.city')} value={data.address?.city} />
                 <InfoRow label={t('admin.customer.address.line1')} value={data.address?.line1} />
@@ -145,6 +171,14 @@ export default function CustomerDetail(props: { id: string }) {
               </Stack>
             }
           />
+          {state.editing.customer && (
+            <EditCustomer
+              data={data}
+              loading={state.loading.customer}
+              onSave={onUpdateInfo}
+              onCancel={() => setState((prev) => ({ editing: { ...prev.editing, customer: false } }))}
+            />
+          )}
         </Stack>
       </Box>
       <Box className="section">

package/src/pages/admin/payments/intents/detail.tsx

@@ -127,12 +127,12 @@ export default function PaymentIntentDetail(props: { id: string }) {
         </Stack>
       </Box>
       <Box className="section">
-        <SectionHeader title={t('admin.paymentMethod.name')} />
+        <SectionHeader title={t('admin.paymentMethod._name')} />
         <Stack>
           <InfoRow label={t('common.id')} value={data.paymentMethod.id} />
           <InfoRow label={t('admin.paymentMethod.type')} value={data.paymentMethod.type} />
           <InfoRow
-            label={t('admin.paymentMethod.name')}
+            label={t('admin.paymentMethod._name')}
             value={<Currency logo={data.paymentMethod.logo} name={data.paymentMethod.name} />}
           />
           <InfoRow
@@ -141,7 +141,12 @@ export default function PaymentIntentDetail(props: { id: string }) {
           />
           <InfoRow
             label={t('common.txHash')}
-            value={<TxLink hash={data.payment_details?.tx_hash || data.metadata?.txHash} method={data.paymentMethod} />}
+            value={
+              <TxLink
+                hash={data.payment_details?.arcblock?.tx_hash || data.metadata?.txHash}
+                method={data.paymentMethod}
+              />
+            }
           />
         </Stack>
       </Box>