feat: disable custom transactions for colony version less then 17 and show an error

src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/ArbitraryTxsForm.tsx

@@ -20,8 +20,11 @@ const ArbitraryTxsForm: FC<ActionFormBaseProps> = ({ getFormOptions }) => {
     <>
       <DecisionMethodField disabled={isFieldDisabled} />
       <CreatedIn readonly />
-      <Description />
-      <ArbitraryTransactionsTable name="transactions" />
+      <Description disabled={isFieldDisabled} />
+      <ArbitraryTransactionsTable
+        name="transactions"
+        disabled={isFieldDisabled}
+      />
     </>
   );
 };

src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/ArbitraryTransactionsTable.tsx

@@ -20,10 +20,12 @@ import { MSG, displayName } from './translation.ts';
 
 interface ArbitraryTransactionsTableProps {
   name: string;
+  disabled?: boolean;
 }
 
 const ArbitraryTransactionsTable: FC<ArbitraryTransactionsTableProps> = ({
   name,
+  disabled,
 }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -90,6 +92,7 @@ const ArbitraryTransactionsTable: FC<ArbitraryTransactionsTableProps> = ({
     isError: !!fieldState.error,
     hasNoDecisionMethods,
     getMenuProps,
+    isFormDisabled: disabled,
   });
 
   return (
@@ -131,7 +134,7 @@ const ArbitraryTransactionsTable: FC<ArbitraryTransactionsTableProps> = ({
             size="small"
             isFullSize={isMobile}
             onClick={openTransactionModal}
-            disabled={hasNoDecisionMethods}
+            disabled={hasNoDecisionMethods || disabled}
           >
             {formatText({ id: 'button.addTransaction' })}
           </Button>

src/components/v5/common/ActionSidebar/partials/forms/ArbitraryTxsForm/partials/ArbitraryTransactionsTable/hooks.tsx

@@ -32,6 +32,7 @@ export const useArbitraryTxsTableColumns = ({
   isError,
   hasNoDecisionMethods,
   getMenuProps,
+  isFormDisabled,
 }): ColumnDef<AddTransactionTableModel, string>[] => {
   const columnHelper = useMemo(
     () => createColumnHelper<AddTransactionTableModel>(),
@@ -77,11 +78,12 @@ export const useArbitraryTxsTableColumns = ({
                   type="button"
                   onClick={openTransactionModal}
                   mode="link"
-                  disabled={hasNoDecisionMethods}
+                  disabled={hasNoDecisionMethods || isFormDisabled}
                   className={clsx(
                     'text-gray-400 no-underline md:hover:text-blue-400',
                     {
                       'text-negative-400': isError,
+                      '!text-gray-300': isFormDisabled,
                     },
                   )}
                 >
@@ -140,6 +142,7 @@ export const useArbitraryTxsTableColumns = ({
       hasNoDecisionMethods,
       openTransactionModal,
       isError,
+      isFormDisabled,
     ],
   );
 

src/components/v5/common/ActionSidebar/partials/hooks.ts

@@ -86,6 +86,7 @@ export const useIsFieldDisabled = () => {
   } = useExtensionData(Extension.StagedExpenditure);
 
   const selectedAction = useActiveActionType();
+  const { colony } = useColonyContext();
 
   const isVotingReputationExtensionEnabled =
     votingReputationExtensionData &&
@@ -112,6 +113,9 @@ export const useIsFieldDisabled = () => {
   ) {
     return true;
   }
+  if (selectedAction === Action.ArbitraryTxs && colony.version < 17) {
+    return true;
+  }
 
   return false;
 };

src/components/v5/shared/ActionTypeNotification/ActionTypeNotification.tsx

@@ -1,13 +1,16 @@
 import { Extension } from '@colony/colony-js';
 import { WarningCircle } from '@phosphor-icons/react';
 import React, { type FC } from 'react';
+import { useCallback } from 'react';
+import { useFormContext } from 'react-hook-form';
 import { defineMessages } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
 
 import { Action } from '~constants/actions.ts';
 import { useActionSidebarContext } from '~context/ActionSidebarContext/ActionSidebarContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
 import { formatText } from '~utils/intl.ts';
+import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
 import NotificationBanner from '~v5/shared/NotificationBanner/index.ts';
 
 import { type ActionTypeNotificationProps } from './types.ts';
@@ -38,6 +41,15 @@ const MSG = defineMessages({
     defaultMessage:
       'Staged payments requires the Staged payments extension to be enabled.',
   },
+  customTransactionsVersionRequiredError: {
+    id: `${displayName}.customTransactionsVersionRequiredError`,
+    defaultMessage:
+      'Custom transactions requires Colony Network version 17 or higher.',
+  },
+  upgradeColony: {
+    id: `${displayName}.upgradeColony`,
+    defaultMessage: 'Upgrade colony',
+  },
   learnMore: {
     id: `${displayName}.learnMore`,
     defaultMessage: 'Learn more',
@@ -81,43 +93,66 @@ export const ActionTypeNotification: FC<ActionTypeNotificationProps> = ({
         return isFieldDisabled
           ? formatText(MSG.stagedExpenditureExtensionNotEnabledError)
           : undefined;
+      case Action.ArbitraryTxs:
+        return isFieldDisabled
+          ? formatText(MSG.customTransactionsVersionRequiredError)
+          : undefined;
       default:
         return undefined;
     }
   };
 
   const notificationTitle = getNotificationTitle();
 
+  const { reset } = useFormContext();
+
+  const handleUpgradeColony = useCallback(() => {
+    reset({
+      [ACTION_TYPE_FIELD_NAME]: Action.UpgradeColonyVersion,
+    });
+  }, [reset]);
+
+  const getCallToAction = () => {
+    if (actionTypeNotificationHref) {
+      return (
+        <a href={actionTypeNotificationHref} target="_blank" rel="noreferrer">
+          {formatText(MSG.learnMore)}
+        </a>
+      );
+    }
+
+    switch (selectedAction) {
+      case Action.CreateDecision:
+        return (
+          <button
+            type="button"
+            onClick={() => {
+              navigate(`extensions/${Extension.VotingReputation}`);
+              toggleActionSidebarOff();
+            }}
+          >
+            {formatText(MSG.viewExtension)}
+          </button>
+        );
+      case Action.ArbitraryTxs:
+        return (
+          <button type="button" onClick={handleUpgradeColony}>
+            {formatText(MSG.upgradeColony)}
+          </button>
+        );
+      default:
+        return null;
+    }
+  };
+
   return (
     <>
       {notificationTitle && (
         <div className={className}>
           <NotificationBanner
             status="error"
             icon={WarningCircle}
-            callToAction={
-              actionTypeNotificationHref ? (
-                <a
-                  href={actionTypeNotificationHref}
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  {formatText(MSG.learnMore)}
-                </a>
-              ) : (
-                selectedAction === Action.CreateDecision && (
-                  <button
-                    type="button"
-                    onClick={() => {
-                      navigate(`extensions/${Extension.VotingReputation}`);
-                      toggleActionSidebarOff();
-                    }}
-                  >
-                    {formatText(MSG.viewExtension)}
-                  </button>
-                )
-              )
-            }
+            callToAction={getCallToAction()}
           >
             {notificationTitle}
           </NotificationBanner>