Nada/89550/remove validation ad amount (#7753)

* fix: removed error validation for amount greater than user's balance

* fix: added popup for creating ad greater than balance

* fix: pr comments fixed

* fix: reuse common modal for visibility errors

packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/ad-error-tooltip-modal.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Button, Modal, Text } from '@deriv/components';
+import { observer } from 'mobx-react-lite';
+import { localize, Localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+
+const AdErrorTooltipModal = () => {
+    const { my_ads_store, general_store } = useStores();
+    const { hideModal, is_modal_open } = useModalManagerContext();
+
+    return (
+        <Modal className='p2p-my-ads__modal-error' is_open={is_modal_open} small has_close_icon={false}>
+            <Modal.Body>
+                <Text as='p' color='prominent' size='xs'>
+                    <Localize
+                        i18n_default_text='Your ad is not listed on Buy/Sell because its minimum order is higher than your Deriv P2P available balance ({{balance}} {{currency}}).'
+                        values={{
+                            balance: general_store.advertiser_info.balance_available,
+                            currency: my_ads_store.advert_details?.account_currency,
+                        }}
+                    />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button has_effect text={localize('Ok')} onClick={() => hideModal()} primary large />
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default observer(AdErrorTooltipModal);

packages/p2p/src/components/modal-manager/modals/ad-error-tooltip-modal/index.js

@@ -0,0 +1,3 @@
+import AdErrorTooltipModal from './ad-error-tooltip-modal';
+
+export default AdErrorTooltipModal;

packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/ad-visibility-error-modal.jsx

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Button, Modal, Text } from '@deriv/components';
+import { observer } from 'mobx-react-lite';
+import { localize, Localize } from 'Components/i18next';
+import { useStores } from 'Stores';
+import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { api_error_codes } from '../../../../constants/api-error-codes';
+
+const AdVisibilityErrorModal = ({ error_code }) => {
+    const { my_ads_store } = useStores();
+    const { hideModal, is_modal_open } = useModalManagerContext();
+
+    if (error_code === api_error_codes.AD_EXCEEDS_BALANCE) {
+        return (
+            <Modal
+                className='p2p-my-ads__modal-error'
+                is_open={is_modal_open}
+                small
+                has_close_icon={false}
+                title={localize("Your ad isn't visible to others")}
+            >
+                <Modal.Body>
+                    <Text as='p' color='prominent' size='xs'>
+                        <Localize
+                            i18n_default_text='This could be because your account balance is insufficient, your ad amount exceeds your daily limit, or both. You can still see your ad on <0>My ads</0>.'
+                            components={[<Text key={0} size='xs' weight='bold' />]}
+                        />
+                    </Text>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button has_effect text={localize('Ok')} onClick={() => hideModal()} primary large />
+                </Modal.Footer>
+            </Modal>
+        );
+    } else if (error_code === api_error_codes.AD_EXCEEDS_DAILY_LIMIT) {
+        return (
+            <Modal
+                className='p2p-my-ads__modal-error'
+                is_open={is_modal_open}
+                small
+                has_close_icon={false}
+                title={localize('Your ad exceeds the daily limit')}
+            >
+                <Modal.Body>
+                    <Text as='p' color='prominent' size='xs'>
+                        <Localize
+                            i18n_default_text='Your ad is not listed on <0>Buy/Sell</0> because the amount exceeds your daily limit of {{limit}} {{currency}}.
+                            <1 /><1 />You can still see your ad on <0>My ads</0>. If you’d like to increase your daily limit, please contact us via <2>live chat</2>.'
+                            values={{
+                                limit: my_ads_store.advert_details?.max_order_amount_limit_display,
+                                currency: my_ads_store.advert_details?.account_currency,
+                            }}
+                            components={[
+                                <Text key={0} size='xs' weight='bold' />,
+                                <br key={1} />,
+                                <span
+                                    key={2}
+                                    className='link link--orange'
+                                    onClick={() => window.LC_API.open_chat_window()}
+                                />,
+                            ]}
+                        />
+                    </Text>
+                </Modal.Body>
+                <Modal.Footer>
+                    <Button has_effect text={localize('Ok')} onClick={() => hideModal()} primary large />
+                </Modal.Footer>
+            </Modal>
+        );
+    }
+    return (
+        <Modal
+            className='p2p-my-ads__modal-error'
+            is_open={is_modal_open}
+            small
+            has_close_icon={false}
+            title={localize("Something's not right")}
+        >
+            <Modal.Body>
+                <Text as='p' color='prominent' size='xs'>
+                    <Localize i18n_default_text="Something's not right" />
+                </Text>
+            </Modal.Body>
+            <Modal.Footer>
+                <Button has_effect text={localize('Ok')} onClick={() => hideModal()} primary large />
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+export default observer(AdVisibilityErrorModal);

packages/p2p/src/components/modal-manager/modals/ad-visibility-error-modal/index.js

@@ -0,0 +1,3 @@
+import AdVisibilityErrorModal from './ad-visibility-error-modal';
+
+export default AdVisibilityErrorModal;

packages/p2p/src/components/my-ads/create-ad-form.jsx

@@ -21,6 +21,7 @@ import { useStores } from 'Stores';
 import CreateAdSummary from './create-ad-summary.jsx';
 import CreateAdFormPaymentMethods from './create-ad-form-payment-methods.jsx';
 import { useModalManagerContext } from 'Components/modal-manager/modal-manager-context';
+import { api_error_codes } from '../../constants/api-error-codes.js';
 
 const CreateAdFormWrapper = ({ children }) => {
     if (isMobile()) {
@@ -51,8 +52,17 @@ const CreateAdForm = () => {
             JSON.stringify(should_not_show_auto_archive_message_again.current)
         );
         my_ads_store.setIsAdCreatedModalVisible(false);
-        if (my_ads_store.advert_details?.visibility_status?.includes('advertiser_daily_limit'))
-            general_store.showModal({ key: 'AdExceedsDailyLimitModal', props: {} });
+        if (my_ads_store.advert_details?.visibility_status?.includes(api_error_codes.AD_EXCEEDS_BALANCE)) {
+            general_store.showModal({
+                key: 'AdVisibilityErrorModal',
+                props: { error_code: api_error_codes.AD_EXCEEDS_BALANCE },
+            });
+        } else if (my_ads_store.advert_details?.visibility_status?.includes(api_error_codes.AD_EXCEEDS_DAILY_LIMIT)) {
+            general_store.showModal({
+                key: 'AdVisibilityErrorModal',
+                props: { error_code: api_error_codes.AD_EXCEEDS_DAILY_LIMIT },
+            });
+        }
 
         my_ads_store.setShowAdForm(false);
     };

packages/p2p/src/constants/api-error-codes.js

@@ -10,4 +10,6 @@ export const api_error_codes = Object.freeze({
     ORDER_CREATE_FAIL_RATE_CHANGED: 'OrderCreateFailRateChanged',
     PERMISSION_DENIED: 'PermissionDenied',
     RESTRICTED_COUNTRY: 'RestrictedCountry',
+    AD_EXCEEDS_DAILY_LIMIT: 'advertiser_daily_limit',
+    AD_EXCEEDS_BALANCE: 'advertiser_balance',
 });

packages/p2p/src/constants/modals.js

@@ -1,16 +1,21 @@
 import React from 'react';
 
 export const modals = {
-    AdExceedsDailyLimitModal: React.lazy(() =>
+    AdErrorTooltipModal: React.lazy(() =>
         import(
-            /* webpackChunkName: "ad-exceeds-daily-limit-modal" */ 'Components/modal-manager/modals/ad-exceeds-daily-limit-modal'
+            /* webpackChunkName: "ad-error-tooltip-modal" */ 'Components/modal-manager/modals/ad-error-tooltip-modal'
         )
     ),
     AddPaymentMethodErrorModal: React.lazy(() =>
         import(
             /* webpackChunkName: "add-payment-method-error-modal" */ 'Components/modal-manager/modals/add-payment-method-error-modal'
         )
     ),
+    AdVisibilityErrorModal: React.lazy(() =>
+        import(
+            /* webpackChunkName: "ad-visibility-error-modal" */ 'Components/modal-manager/modals/ad-visibility-error-modal'
+        )
+    ),
     BuySellModal: React.lazy(() =>
         import(/* webpackChunkName: "buy-sell-modal" */ 'Components/modal-manager/modals/buy-sell-modal')
     ),

packages/p2p/src/stores/my-ads-store.js

@@ -234,8 +234,18 @@ export default class MyAdsStore extends BaseStore {
                         if (!response.p2p_advert_create.is_visible) {
                             this.setAdvertDetails(response.p2p_advert_create);
                         }
-                        if (this.advert_details?.visibility_status?.includes('advertiser_daily_limit')) {
-                            this.root_store.general_store.showModal({ key: 'AdExceedsDailyLimitModal', props: {} });
+                        if (this.advert_details?.visibility_status?.includes(api_error_codes.AD_EXCEEDS_BALANCE)) {
+                            this.root_store.general_store.showModal({
+                                key: 'AdVisibilityErrorModal',
+                                props: { error_code: api_error_codes.AD_EXCEEDS_BALANCE },
+                            });
+                        } else if (
+                            this.advert_details?.visibility_status?.includes(api_error_codes.AD_EXCEEDS_DAILY_LIMIT)
+                        ) {
+                            this.root_store.general_store.showModal({
+                                key: 'AdVisibilityErrorModal',
+                                props: { error_code: api_error_codes.AD_EXCEEDS_DAILY_LIMIT },
+                            });
                         }
                         this.setShowAdForm(false);
                     }
@@ -633,7 +643,6 @@ export default class MyAdsStore extends BaseStore {
             offer_amount: [
                 v => !!v,
                 v => !isNaN(v),
-                v => (values.type === buy_sell.SELL ? v <= general_store.advertiser_info.balance_available : !!v),
                 v =>
                     v > 0 &&
                     decimalValidator(v) &&
@@ -694,7 +703,6 @@ export default class MyAdsStore extends BaseStore {
         const getOfferAmountMessages = field_name => [
             localize('{{field_name}} is required', { field_name }),
             localize('Enter a valid amount'),
-            localize('Max available amount is {{value}}', { value: general_store.advertiser_info.balance_available }),
             localize('Enter a valid amount'),
             localize('{{field_name}} should not be below Min limit', { field_name }),
             localize('{{field_name}} should not be below Max limit', { field_name }),