[Cleanup] Adjusting Plan Alert Messages For All "Advance Settings"

src/components/AdvancedSettingsPlanAlert.tsx

@@ -15,6 +15,7 @@ import { Link } from './forms';
 import CommonProps from '../common/interfaces/common-props.interface';
 import { MdInfoOutline } from 'react-icons/md';
 import { Icon } from './icons/Icon';
+import { useShouldDisableAdvanceSettings } from '$app/common/hooks/useShouldDisableAdvanceSettings';
 
 interface Props extends CommonProps {
   message?: string;
@@ -25,29 +26,31 @@ export function AdvancedSettingsPlanAlert(props: Props) {
 
   const user = useCurrentUser();
 
+  const showPlanAlert = useShouldDisableAdvanceSettings();
+
+  if (!showPlanAlert) {
+    return <></>;
+  }
+
   return (
-    <>
-      <div className={props.className}>
-        <Alert className="mb-4" type="warning" disableClosing>
-          <div className="flex items-center">
-            <Icon element={MdInfoOutline} className="mr-2" size={20} />
+    <div className={props.className}>
+      <Alert className="mb-4" type="warning" disableClosing>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <Icon element={MdInfoOutline} size={20} />
 
             <span>
               {props.message ? props.message : t('start_free_trial_message')}
             </span>
-
-            {user?.company_user && (
-              <Link
-                className="ml-10"
-                external
-                to={user.company_user.ninja_portal_url}
-              >
-                {t('plan_change')}
-              </Link>
-            )}
           </div>
-        </Alert>
-      </div>
-    </>
+
+          {user?.company_user && (
+            <Link external to={user.company_user.ninja_portal_url}>
+              {t('plan_change')}
+            </Link>
+          )}
+        </div>
+      </Alert>
+    </div>
   );
 }

src/pages/settings/bank-accounts/common/components/BankAccountsPlanAlert.tsx

@@ -0,0 +1,42 @@
+/**
+ * Invoice Ninja (https://invoiceninja.com).
+ *
+ * @link https://github.com/invoiceninja/invoiceninja source repository
+ *
+ * @copyright Copyright (c) 2022. Invoice Ninja LLC (https://invoiceninja.com)
+ *
+ * @license https://www.elastic.co/licensing/elastic-license
+ */
+
+import { useCurrentUser } from '$app/common/hooks/useCurrentUser';
+import { Alert } from '$app/components/Alert';
+import { Link } from '$app/components/forms';
+import { Icon } from '$app/components/icons/Icon';
+import { useTranslation } from 'react-i18next';
+import { MdInfoOutline } from 'react-icons/md';
+
+export function BankAccountsPlanAlert() {
+  const [t] = useTranslation();
+
+  const user = useCurrentUser();
+
+  return (
+    <div>
+      <Alert className="mb-4" type="warning" disableClosing>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-2">
+            <Icon element={MdInfoOutline} size={20} />
+
+            <span>{t('upgrade_to_connect_bank_account')}</span>
+          </div>
+
+          {user?.company_user && (
+            <Link external to={user.company_user.ninja_portal_url}>
+              {t('plan_change')}
+            </Link>
+          )}
+        </div>
+      </Alert>
+    </div>
+  );
+}

src/pages/settings/bank-accounts/create/Create.tsx

@@ -11,7 +11,6 @@
 import { Card, Element } from '$app/components/cards';
 import { InputField } from '$app/components/forms';
 import { enterprisePlan } from '$app/common/guards/guards/enterprise-plan';
-import { proPlan } from '$app/common/guards/guards/pro-plan';
 import { isHosted } from '$app/common/helpers';
 import { useTitle } from '$app/common/hooks/useTitle';
 import { BankAccount } from '$app/common/interfaces/bank-accounts';
@@ -21,6 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { Settings } from '../../../../components/layouts/Settings';
 import { useBlankBankAccountQuery } from '../common/queries';
 import { useHandleCreate } from './hooks/useHandleCreate';
+import { BankAccountsPlanAlert } from '../common/components/BankAccountsPlanAlert';
 
 export function Create() {
   const [t] = useTranslation();
@@ -68,9 +68,11 @@ export function Create() {
       title={t('new_bank_account')}
       breadcrumbs={pages}
       docsLink="en/basic-settings/#create_bank_account"
-      disableSaveButton={!enterprisePlan() && !proPlan() && isHosted()}
+      disableSaveButton={!enterprisePlan() && isHosted()}
       onSaveClick={handleSave}
     >
+      {!enterprisePlan() && isHosted() && <BankAccountsPlanAlert />}
+
       <Card onFormSubmit={handleSave} title={t('new_bank_account')}>
         <Element leftSide={t('account_name')}>
           <InputField

src/pages/settings/bank-accounts/index/BankAccounts.tsx

@@ -18,12 +18,12 @@ import { MdRefresh, MdRuleFolder } from 'react-icons/md';
 import { endpoint, isHosted, isSelfHosted } from '$app/common/helpers';
 import { request } from '$app/common/helpers/request';
 import { enterprisePlan } from '$app/common/guards/guards/enterprise-plan';
-import { AdvancedSettingsPlanAlert } from '$app/components/AdvancedSettingsPlanAlert';
 import { useNavigate } from 'react-router-dom';
 import { toast } from '$app/common/helpers/toast/toast';
 import { Icon } from '$app/components/icons/Icon';
 import { proPlan } from '$app/common/guards/guards/pro-plan';
 import { ConnectAccounts } from '../common/components/ConnectAccounts';
+import { BankAccountsPlanAlert } from '../common/components/BankAccountsPlanAlert';
 
 export function BankAccounts() {
   useTitle('bank_accounts');
@@ -57,11 +57,7 @@ export function BankAccounts() {
       breadcrumbs={pages}
       docsLink="/docs/advanced-settings/#bank_accounts"
     >
-      {!enterprisePlan() && isHosted() && (
-        <AdvancedSettingsPlanAlert
-          message={t('upgrade_to_connect_bank_account') as string}
-        />
-      )}
+      {!enterprisePlan() && isHosted() && <BankAccountsPlanAlert />}
 
       <DataTable
         resource="bank_account"

src/pages/settings/client-portal/ClientPortal.tsx

@@ -49,10 +49,10 @@ export function ClientPortal() {
       onCancelClick={onCancel}
       disableSaveButton={showPlanAlert}
     >
-      {showPlanAlert && <AdvancedSettingsPlanAlert />}
-
       <Tabs tabs={tabs} className="mt-6" />
 
+      <AdvancedSettingsPlanAlert />
+
       <div className="my-4">
         <Outlet />
       </div>

src/pages/settings/company/components/CustomFields.tsx

@@ -11,9 +11,9 @@
 import { Card } from '$app/components/cards';
 import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany';
 import { useHandleCustomFieldChange } from '$app/common/hooks/useHandleCustomFieldChange';
-import { CustomFieldsPlanAlert } from '$app/components/CustomFieldsPlanAlert';
 import { Field } from '$app/pages/settings/custom-fields/components';
 import { useTranslation } from 'react-i18next';
+import { AdvancedSettingsPlanAlert } from '$app/components/AdvancedSettingsPlanAlert';
 
 export function CustomFields() {
   const [t] = useTranslation();
@@ -24,7 +24,7 @@ export function CustomFields() {
 
   return (
     <>
-      <CustomFieldsPlanAlert />
+      <AdvancedSettingsPlanAlert />
 
       <Card title={t('custom_fields')}>
         <div className="px-6">

src/pages/settings/custom-fields/CustomFields.tsx

@@ -13,9 +13,9 @@ import { Settings } from '../../../components/layouts/Settings';
 import { useTitle } from '$app/common/hooks/useTitle';
 import { Navigate, Outlet, useLocation } from 'react-router-dom';
 import { Tabs } from '$app/components/Tabs';
-import { CustomFieldsPlanAlert } from '$app/components/CustomFieldsPlanAlert';
 import { useHandleCompanySave } from '../common/hooks/useHandleCompanySave';
 import { useDiscardChanges } from '../common/hooks/useDiscardChanges';
+import { AdvancedSettingsPlanAlert } from '$app/components/AdvancedSettingsPlanAlert';
 
 export function CustomFields() {
   useTitle('custom_fields');
@@ -60,7 +60,7 @@ export function CustomFields() {
 
       <Tabs tabs={modules} />
 
-      <CustomFieldsPlanAlert />
+      <AdvancedSettingsPlanAlert />
 
       <Outlet />
     </Settings>

src/pages/settings/e-invoice/EInvoice.tsx

@@ -13,8 +13,6 @@ import { Settings } from '$app/components/layouts/Settings';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Card, Element } from '$app/components/cards';
 import { InputField, SelectField } from '$app/components/forms';
-import { AdvancedSettingsPlanAlert } from '$app/components/AdvancedSettingsPlanAlert';
-import { useShouldDisableAdvanceSettings } from '$app/common/hooks/useShouldDisableAdvanceSettings';
 import { SettingsLabel } from '$app/components/SettingsLabel';
 import { PropertyCheckbox } from '$app/components/PropertyCheckbox';
 import { useDisableSettingsField } from '$app/common/hooks/useDisableSettingsField';
@@ -108,8 +106,6 @@ export function EInvoice() {
 
   const { isCompanySettingsActive } = useCurrentSettingsLevel();
 
-  const showPlanAlert = useShouldDisableAdvanceSettings();
-
   const [errors, setErrors] = useAtom(companySettingsErrorsAtom);
 
   const [formData, setFormData] = useState(new FormData());
@@ -209,8 +205,6 @@ export function EInvoice() {
         onSave();
       }}
     >
-      {showPlanAlert && <AdvancedSettingsPlanAlert />}
-
       <PEPPOLPlanBanner />
 
       {Boolean(!company?.legal_entity_id) && (

src/pages/settings/e-invoice/common/components/PEPPOLPlanBanner.tsx

@@ -34,10 +34,14 @@ export function PEPPOLPlanBanner() {
 
   return (
     <Alert className="mb-4" type="warning" disableClosing>
-      <div className="flex items-center">
-        <Icon element={MdInfoOutline} className="mr-2" size={20} />
-
-        <span>{t('peppol_plan_warning')}</span>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <div>
+            <Icon element={MdInfoOutline} size={20} />
+          </div>
+
+          <span>{t('peppol_plan_warning')}</span>
+        </div>
 
         {currentUser?.company_user && (
           <Link

src/pages/settings/email-settings/EmailSettings.tsx

@@ -71,7 +71,7 @@ export function EmailSettings() {
       onCancelClick={onCancel}
       disableSaveButton={showPlanAlert}
     >
-      {showPlanAlert && <AdvancedSettingsPlanAlert />}
+      <AdvancedSettingsPlanAlert />
 
       <Card title={t('settings')}>
         <Element

src/pages/settings/generated-numbers/GeneratedNumbers.tsx

@@ -48,11 +48,10 @@ export function GeneratedNumbers() {
       onSaveClick={onSave}
       onCancelClick={onCancel}
       disableSaveButton={showPlanAlert}
-
     >
       <Tabs tabs={tabs} className="mt-6" />
 
-      {showPlanAlert && <AdvancedSettingsPlanAlert />}
+      <AdvancedSettingsPlanAlert />
 
       <div className="my-4">
         <Outlet />

src/pages/settings/group-settings/create/Create.tsx

@@ -65,7 +65,7 @@ export function Create() {
       onSaveClick={handleSave}
       disableSaveButton={isFormBusy || !groupSettings || showPlanAlert}
     >
-      {showPlanAlert && <AdvancedSettingsPlanAlert />}
+      <AdvancedSettingsPlanAlert />
 
       {groupSettings && (
         <Card title={t('new_group')}>

src/pages/settings/group-settings/index/GroupSettings.tsx

@@ -17,6 +17,7 @@ import { route } from '$app/common/helpers/route';
 import { useTitle } from '$app/common/hooks/useTitle';
 import { useActions } from '../common/hooks/useActions';
 import { EntityStatus } from '$app/components/EntityStatus';
+import { AdvancedSettingsPlanAlert } from '$app/components/AdvancedSettingsPlanAlert';
 
 export function GroupSettings() {
   const { documentTitle } = useTitle('online_payments');
@@ -53,6 +54,8 @@ export function GroupSettings() {
       breadcrumbs={pages}
       docsLink="en/advanced-settings/#group_settings"
     >
+      <AdvancedSettingsPlanAlert />
+
       <DataTable
         columns={columns}
         resource="group"

src/pages/settings/invoice-design/pages/custom-designs/index/CustomDesigns.tsx

@@ -10,15 +10,15 @@
 
 import { enterprisePlan } from '$app/common/guards/guards/enterprise-plan';
 import { proPlan } from '$app/common/guards/guards/pro-plan';
+import { AdvancedSettingsPlanAlert } from '$app/components/AdvancedSettingsPlanAlert';
 import { DataTable } from '$app/components/DataTable';
 import { EntityStatus } from '$app/components/EntityStatus';
 import { Inline } from '$app/components/Inline';
-import { CustomDesignsPlanAlert } from '../components/CustomDesignsPlanAlert';
 
 export default function CustomDesigns() {
   return (
     <>
-      <CustomDesignsPlanAlert />
+      <AdvancedSettingsPlanAlert />
 
       <DataTable
         endpoint="/api/v1/designs?custom=true"