From ae617b2e1d14b18249a82b231f13b95edac0a60a Mon Sep 17 00:00:00 2001 From: Denis Date: Mon, 29 Jul 2024 22:49:07 +0300 Subject: [PATCH 1/4] Fixed Quick Payment Dialogs PaymentReceives and BillsPayments Controllers expect 'amount' parameter, but webapp sends 'payment_amount' --- .../QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx | 7 ++++--- .../QuickPaymentReceiveForm.tsx | 5 +++-- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx index 49b51a32b..fe042ff90 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx @@ -3,7 +3,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Formik } from 'formik'; import { Intent } from '@blueprintjs/core'; -import { pick } from 'lodash'; +import { pick, omit } from 'lodash'; import { AppToaster } from '@/components'; import { CreateQuickPaymentMadeFormSchema } from './QuickPaymentMade.schema'; @@ -21,7 +21,7 @@ function QuickPaymentMadeForm({ // #withDialogActions closeDialog, }) { - + const { bill, dialogName, @@ -44,8 +44,9 @@ function QuickPaymentMadeForm({ })); const form = { - ...values, + ...omit(values, ['payment_amount']), vendor_id: values?.vendor?.id, + amount: values?.payment_amount, entries, }; diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx index 082707f26..c31195715 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx @@ -28,7 +28,7 @@ function QuickPaymentReceiveForm({ paymentReceiveNextNumber, preferredDepositAccount }) { - + const { dialogName, invoice, @@ -61,11 +61,12 @@ function QuickPaymentReceiveForm({ })); const form = { - ...omit(values, ['payment_receive_no']), + ...omit(values, ['payment_receive_no', 'payment_amount']), ...(!paymentReceiveAutoIncrement && { payment_receive_no: values.payment_receive_no, }), customer_id: values.customer.id, + amount: values.payment_amount, entries, }; From 783102449f55787e9d754f22585915e8999aaca4 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Mon, 29 Jul 2024 23:15:42 +0200 Subject: [PATCH 2/4] fix: create quick payment received and payment made transactions --- .../QuickPaymentMadeForm.tsx | 20 ++++++--------- .../QuickPaymentMadeFormFields.tsx | 6 ++--- .../QuickPaymentMadeFormDialog/utils.tsx | 1 + .../QuickPaymentReceiveForm.tsx | 25 ++++++++----------- .../QuickPaymentReceiveFormFields.tsx | 6 ++--- .../QuickPaymentReceiveFormDialog/utils.tsx | 1 + 6 files changed, 26 insertions(+), 33 deletions(-) diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx index fe042ff90..8cb6d3294 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx @@ -3,8 +3,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Formik } from 'formik'; import { Intent } from '@blueprintjs/core'; -import { pick, omit } from 'lodash'; - +import { omit } from 'lodash'; import { AppToaster } from '@/components'; import { CreateQuickPaymentMadeFormSchema } from './QuickPaymentMade.schema'; import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider'; @@ -21,28 +20,25 @@ function QuickPaymentMadeForm({ // #withDialogActions closeDialog, }) { - const { bill, dialogName, createPaymentMadeMutate, } = useQuickPaymentMadeContext(); - // Initial form values + // Initial form values. const initialValues = { ...defaultPaymentMade, ...bill, }; - // Handles the form submit. const handleFormSubmit = (values, { setSubmitting, setFieldError }) => { - const entries = [values] - .filter((entry) => entry.id && entry.payment_amount) - .map((entry) => ({ - bill_id: entry.id, - ...pick(entry, ['payment_amount']), - })); - + const entries = [ + { + payment_amount: values.amount, + bill_id: values.id, + }, + ]; const form = { ...omit(values, ['payment_amount']), vendor_id: values?.vendor?.id, diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx index d5e875519..bcb0f473d 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.tsx @@ -124,7 +124,7 @@ function QuickPaymentMadeFormFields({ {/*------------ Amount Received -----------*/} - + {({ form: { values, setFieldValue }, field: { value }, @@ -135,7 +135,7 @@ function QuickPaymentMadeFormFields({ labelInfo={} className={classNames('form-group--payment_amount', CLASSES.FILL)} intent={inputIntent({ error, touched })} - helperText={} + helperText={} > @@ -144,7 +144,7 @@ function QuickPaymentMadeFormFields({ value={value} minimal={true} onChange={(amount) => { - setFieldValue('payment_amount', amount); + setFieldValue('amount', amount); }} intent={inputIntent({ error, touched })} inputRef={(ref) => (paymentMadeFieldRef.current = ref)} diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx index b90e21da8..4c3e105e5 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx @@ -16,6 +16,7 @@ export const defaultPaymentMade = { payment_date: moment(new Date()).format('YYYY-MM-DD'), reference: '', payment_number: '', + amount: '', // statement: '', exchange_rate: 1, branch_id: '', diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx index c31195715..664ab64bb 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx @@ -3,7 +3,7 @@ import React from 'react'; import intl from 'react-intl-universal'; import { Formik } from 'formik'; import { Intent } from '@blueprintjs/core'; -import { pick, defaultTo, omit } from 'lodash'; +import { defaultTo, omit } from 'lodash'; import { AppToaster } from '@/components'; import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider'; @@ -26,14 +26,10 @@ function QuickPaymentReceiveForm({ paymentReceiveAutoIncrement, paymentReceiveNumberPrefix, paymentReceiveNextNumber, - preferredDepositAccount + preferredDepositAccount, }) { - - const { - dialogName, - invoice, - createPaymentReceiveMutate, - } = useQuickPaymentReceiveContext(); + const { dialogName, invoice, createPaymentReceiveMutate } = + useQuickPaymentReceiveContext(); // Payment receive number. const nextPaymentNumber = transactionNumber( @@ -53,13 +49,12 @@ function QuickPaymentReceiveForm({ // Handles the form submit. const handleFormSubmit = (values, { setSubmitting, setFieldError }) => { - const entries = [values] - .filter((entry) => entry.id && entry.payment_amount) - .map((entry) => ({ - invoice_id: entry.id, - ...pick(entry, ['payment_amount']), - })); - + const entries = [ + { + invoice_id: values.id, + payment_amount: values.amount, + }, + ]; const form = { ...omit(values, ['payment_receive_no', 'payment_amount']), ...(!paymentReceiveAutoIncrement && { diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx index b5ebcd358..0825b1cf9 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormFields.tsx @@ -128,7 +128,7 @@ function QuickPaymentReceiveFormFields({ {/*------------ Amount Received -----------*/} - + {({ form: { values, setFieldValue }, field: { value }, @@ -139,7 +139,7 @@ function QuickPaymentReceiveFormFields({ labelInfo={} className={classNames('form-group--payment_amount', CLASSES.FILL)} intent={inputIntent({ error, touched })} - helperText={} + helperText={} > @@ -148,7 +148,7 @@ function QuickPaymentReceiveFormFields({ value={value} minimal={true} onChange={(amount) => { - setFieldValue('payment_amount', amount); + setFieldValue('amount', amount); }} intent={inputIntent({ error, touched })} inputRef={(ref) => (paymentReceiveFieldRef.current = ref)} diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx index 673ad9f49..5b74b8268 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx @@ -15,6 +15,7 @@ export const defaultInitialValues = { payment_receive_no: '', payment_date: moment(new Date()).format('YYYY-MM-DD'), reference_no: '', + amount: '', // statement: '', exchange_rate: 1, branch_id: '', From 4cd0405078992229bde3bbb309be15e7f39c328e Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 30 Jul 2024 11:02:49 +0200 Subject: [PATCH 3/4] fix: quick payment received and payment made form initial values --- .../QuickPaymentMadeForm.tsx | 17 ++++++----------- .../QuickPaymentMadeFormProvider.tsx | 14 +++++++------- .../QuickPaymentMadeFormDialog/utils.tsx | 14 +++++++++++--- .../QuickPaymentReceiveForm.tsx | 14 ++++++++------ .../QuickPaymentReceiveFormProvider.tsx | 13 +++++++------ .../QuickPaymentReceiveFormDialog/utils.tsx | 16 +++++++++++++--- 6 files changed, 52 insertions(+), 36 deletions(-) diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx index 8cb6d3294..503544f04 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeForm.tsx @@ -10,7 +10,7 @@ import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider'; import QuickPaymentMadeFormContent from './QuickPaymentMadeFormContent'; import withDialogActions from '@/containers/Dialog/withDialogActions'; -import { defaultPaymentMade, transformErrors } from './utils'; +import { defaultPaymentMade, transformBillToForm, transformErrors } from './utils'; import { compose } from '@/utils'; /** @@ -20,29 +20,24 @@ function QuickPaymentMadeForm({ // #withDialogActions closeDialog, }) { - const { - bill, - dialogName, - createPaymentMadeMutate, - } = useQuickPaymentMadeContext(); + const { bill, dialogName, createPaymentMadeMutate } = + useQuickPaymentMadeContext(); // Initial form values. const initialValues = { ...defaultPaymentMade, - ...bill, + ...transformBillToForm(bill), }; // Handles the form submit. const handleFormSubmit = (values, { setSubmitting, setFieldError }) => { const entries = [ { payment_amount: values.amount, - bill_id: values.id, + bill_id: values.bill_id, }, ]; const form = { - ...omit(values, ['payment_amount']), - vendor_id: values?.vendor?.id, - amount: values?.payment_amount, + ...omit(values, ['bill_id']), entries, }; diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx index cc444ab6b..b79a31e89 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormProvider.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React from 'react'; +import React, { useMemo } from 'react'; import { DialogContent } from '@/components'; import { useBill, @@ -11,7 +11,6 @@ import { Features } from '@/constants'; import { useFeatureCan } from '@/hooks/state'; import { pick } from 'lodash'; - const QuickPaymentMadeContext = React.createContext(); /** @@ -40,13 +39,14 @@ function QuickPaymentMadeFormProvider({ query, billId, dialogName, ...props }) { isSuccess: isBranchesSuccess, } = useBranches(query, { enabled: isBranchFeatureCan }); + const paymentBill = useMemo( + () => pick(bill, ['id', 'due_amount', 'vendor_id', 'currency_code']), + [bill], + ); + // State provider. const provider = { - bill: { - ...pick(bill, ['id', 'due_amount', 'vendor', 'currency_code']), - vendor_id: bill?.vendor?.display_name, - payment_amount: bill?.due_amount, - }, + bill: paymentBill, accounts, branches, dialogName, diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx index 4c3e105e5..03470ff50 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentMadeFormDialog/utils.tsx @@ -2,15 +2,16 @@ import React from 'react'; import moment from 'moment'; import intl from 'react-intl-universal'; -import { first } from 'lodash'; +import { first, pick } from 'lodash'; +import { useFormikContext } from 'formik'; import { Intent } from '@blueprintjs/core'; import { AppToaster } from '@/components'; -import { useFormikContext } from 'formik'; import { useQuickPaymentMadeContext } from './QuickPaymentMadeFormProvider'; import { PAYMENT_MADE_ERRORS } from '@/containers/Purchases/PaymentMades/constants'; // Default initial values of payment made. export const defaultPaymentMade = { + bill_id: '', vendor_id: '', payment_account_id: '', payment_date: moment(new Date()).format('YYYY-MM-DD'), @@ -20,7 +21,6 @@ export const defaultPaymentMade = { // statement: '', exchange_rate: 1, branch_id: '', - entries: [{ bill_id: '', payment_amount: '' }], }; export const transformErrors = (errors, { setFieldError }) => { @@ -59,3 +59,11 @@ export const useSetPrimaryBranchToForm = () => { } }, [isBranchesSuccess, setFieldValue, branches]); }; + +export const transformBillToForm = (bill) => { + return { + ...pick(bill, ['vendor_id', 'currency_code']), + amount: bill.due_amount, + bill_id: bill.id, + }; +} diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx index 664ab64bb..b2326c525 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveForm.tsx @@ -12,7 +12,11 @@ import QuickPaymentReceiveFormContent from './QuickPaymentReceiveFormContent'; import withSettings from '@/containers/Settings/withSettings'; import withDialogActions from '@/containers/Dialog/withDialogActions'; -import { defaultInitialValues, transformErrors } from './utils'; +import { + defaultInitialValues, + transformErrors, + transformInvoiceToForm, +} from './utils'; import { compose, transactionNumber } from '@/utils'; /** @@ -44,24 +48,22 @@ function QuickPaymentReceiveForm({ payment_receive_no: nextPaymentNumber, }), deposit_account_id: defaultTo(preferredDepositAccount, ''), - ...invoice, + ...transformInvoiceToForm(invoice), }; // Handles the form submit. const handleFormSubmit = (values, { setSubmitting, setFieldError }) => { const entries = [ { - invoice_id: values.id, + invoice_id: values.invoice_id, payment_amount: values.amount, }, ]; const form = { - ...omit(values, ['payment_receive_no', 'payment_amount']), + ...omit(values, ['payment_receive_no', 'invoice_id']), ...(!paymentReceiveAutoIncrement && { payment_receive_no: values.payment_receive_no, }), - customer_id: values.customer.id, - amount: values.payment_amount, entries, }; diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx index 0c17e7ee1..64438f4ed 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/QuickPaymentReceiveFormProvider.tsx @@ -1,5 +1,5 @@ // @ts-nocheck -import React, { useContext, createContext } from 'react'; +import React, { useContext, createContext, useMemo } from 'react'; import { pick } from 'lodash'; import { DialogContent } from '@/components'; import { Features } from '@/constants'; @@ -47,15 +47,16 @@ function QuickPaymentReceiveFormProvider({ isSuccess: isBranchesSuccess, } = useBranches(query, { enabled: isBranchFeatureCan }); + const invoicePayment = useMemo( + () => pick(invoice, ['id', 'due_amount', 'customer_id', 'currency_code']), + [invoice], + ); + // State provider. const provider = { accounts, branches, - invoice: { - ...pick(invoice, ['id', 'due_amount', 'customer', 'currency_code']), - customer_id: invoice?.customer?.display_name, - payment_amount: invoice.due_amount, - }, + invoice: invoicePayment, isAccountsLoading, isSettingsLoading, isBranchesSuccess, diff --git a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx index 5b74b8268..c6e7a8bb9 100644 --- a/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx +++ b/packages/webapp/src/containers/Dialogs/QuickPaymentReceiveFormDialog/utils.tsx @@ -2,7 +2,7 @@ import React from 'react'; import moment from 'moment'; import intl from 'react-intl-universal'; -import { first } from 'lodash'; +import { first, pick } from 'lodash'; import { Intent } from '@blueprintjs/core'; import { AppToaster } from '@/components'; @@ -10,6 +10,7 @@ import { useFormikContext } from 'formik'; import { useQuickPaymentReceiveContext } from './QuickPaymentReceiveFormProvider'; export const defaultInitialValues = { + invoice_id: '', customer_id: '', deposit_account_id: '', payment_receive_no: '', @@ -19,7 +20,6 @@ export const defaultInitialValues = { // statement: '', exchange_rate: 1, branch_id: '', - entries: [{ invoice_id: '', payment_amount: '' }], }; export const transformErrors = (errors, { setFieldError }) => { @@ -45,7 +45,9 @@ export const transformErrors = (errors, { setFieldError }) => { } if (getError('PAYMENT_ACCOUNT_CURRENCY_INVALID')) { AppToaster.show({ - message: intl.get('payment_Receive.error.payment_account_currency_invalid'), + message: intl.get( + 'payment_Receive.error.payment_account_currency_invalid', + ), intent: Intent.DANGER, }); } @@ -65,3 +67,11 @@ export const useSetPrimaryBranchToForm = () => { } }, [isBranchesSuccess, setFieldValue, branches]); }; + +export const transformInvoiceToForm = (invoice) => { + return { + ...pick(invoice, ['customer_id', 'currency_code']), + amount: invoice.due_amount, + invoice_id: invoice.id, + }; +}; From 219e6fb466afe2e89c8b3599660d9dff5460feb4 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Thu, 1 Aug 2024 19:51:25 +0200 Subject: [PATCH 4/4] fix: onboarding page layout on small screens --- .../SetupSubscription.module.scss | 1 + .../SetupSubscription/SubscriptionPlans.tsx | 2 +- packages/webapp/src/style/App.scss | 2 +- .../src/style/pages/Setup/SetupPage.scss | 63 +++++++------------ 4 files changed, 27 insertions(+), 41 deletions(-) diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss b/packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss index 7a3087aa0..f31317e0f 100644 --- a/packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss +++ b/packages/webapp/src/containers/Setup/SetupSubscription/SetupSubscription.module.scss @@ -2,6 +2,7 @@ .root{ margin: 0 auto; padding: 0 40px; + padding-right: 20px; } .periodSwitch { diff --git a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx index 7fa489f0e..6fde58c75 100644 --- a/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx +++ b/packages/webapp/src/containers/Setup/SetupSubscription/SubscriptionPlans.tsx @@ -6,7 +6,7 @@ export function SubscriptionPlans() { const subscriptionPlans = useSubscriptionPlans(); return ( - + {subscriptionPlans.map((plan, index) => ( div { font-size: 13px; - margin-right: 15px; - display: inline; a { color: #fff;