Merge pull request #8492 from CitizenLabDotCo/TAN-2364-show-api-error…

…s-in-voting-edit TAN-2364: Show API errors when there are missing values when configuring voting
CitizenLabDotCo · Jul 26, 2024 · cdb6718 · cdb6718
2 parents 2fdbedc + 7cf42ee
commit cdb6718
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 54 deletions.
diff --git a/front/app/components/VoteInputs/budgeting/AddToBasketButton/index.tsx b/front/app/components/VoteInputs/budgeting/AddToBasketButton/index.tsx
@@ -5,6 +5,7 @@ import {
   Icon,
   colors,
   Tooltip,
+  Box,
 } from '@citizenlab/cl2-component-library';
 import { useSearchParams } from 'react-router-dom';
 
@@ -150,34 +151,39 @@ const AddToBasketButton = ({
     : undefined;
 
   return (
-    <Tooltip
-      disabled={!disabledExplanation}
-      placement="bottom"
-      content={disabledExplanation}
-    >
-      <div>
-        <Button
-          onClick={handleAddRemoveButtonClick}
-          disabled={!buttonEnabled}
-          buttonStyle={buttonStyle}
-          processing={isProcessing}
-          bgColor={ideaInBasket ? colors.green500 : undefined}
-          textColor={ideaInBasket ? colors.white : undefined}
-          textHoverColor={ideaInBasket ? colors.white : undefined}
-          bgHoverColor={ideaInBasket ? colors.green500 : undefined}
-          borderColor={ideaInBasket ? colors.success : undefined}
-          width="100%"
-          className={`e2e-assign-budget-button ${
-            ideaInBasket ? 'in-basket' : 'not-in-basket'
-          }`}
-        >
-          {ideaInBasket && <Icon mb="4px" fill="white" name="check" />}
-          <FormattedMessage {...buttonMessage} />
-          <span aria-hidden>{` (${ideaBudget} ${currency})`}</span>
-          <ScreenReaderCurrencyValue amount={ideaBudget} currency={currency} />
-        </Button>
-      </div>
-    </Tooltip>
+    <Box w="100%">
+      <Tooltip
+        disabled={!disabledExplanation}
+        placement="bottom"
+        content={disabledExplanation}
+      >
+        <div>
+          <Button
+            onClick={handleAddRemoveButtonClick}
+            disabled={!buttonEnabled}
+            buttonStyle={buttonStyle}
+            processing={isProcessing}
+            bgColor={ideaInBasket ? colors.green500 : undefined}
+            textColor={ideaInBasket ? colors.white : undefined}
+            textHoverColor={ideaInBasket ? colors.white : undefined}
+            bgHoverColor={ideaInBasket ? colors.green500 : undefined}
+            borderColor={ideaInBasket ? colors.success : undefined}
+            width="100%"
+            className={`e2e-assign-budget-button ${
+              ideaInBasket ? 'in-basket' : 'not-in-basket'
+            }`}
+          >
+            {ideaInBasket && <Icon mb="4px" fill="white" name="check" />}
+            <FormattedMessage {...buttonMessage} />
+            <span aria-hidden>{` (${ideaBudget} ${currency})`}</span>
+            <ScreenReaderCurrencyValue
+              amount={ideaBudget}
+              currency={currency}
+            />
+          </Button>
+        </div>
+      </Tooltip>
+    </Box>
   );
 };
 

diff --git a/front/app/components/VoteInputs/single/AssignSingleVoteButton/index.tsx b/front/app/components/VoteInputs/single/AssignSingleVoteButton/index.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
 
-import { Button, colors, Tooltip } from '@citizenlab/cl2-component-library';
+import {
+  Button,
+  colors,
+  Tooltip,
+  Box,
+} from '@citizenlab/cl2-component-library';
 import { useSearchParams } from 'react-router-dom';
 
 import useBasket from 'api/baskets/useBasket';
@@ -133,29 +138,31 @@ const AssignSingleVoteButton = ({
   const disabledButtonExplanation = getButtonDisabledExplanation();
 
   return (
-    <Tooltip
-      disabled={!disabledButtonExplanation}
-      placement="bottom"
-      content={disabledButtonExplanation}
-    >
-      <div>
-        <Button
-          buttonStyle={ideaInBasket ? 'primary' : buttonStyle}
-          bgColor={ideaInBasket ? colors.success : undefined}
-          borderColor={ideaInBasket ? colors.success : undefined}
-          disabled={!!disabledButtonExplanation}
-          processing={isProcessing}
-          icon={ideaInBasket ? 'check' : 'vote-ballot'}
-          className="e2e-single-vote-button"
-          onClick={vote}
-          text={
-            ideaInBasket
-              ? formatMessage(messages.selected)
-              : formatMessage(messages.select)
-          }
-        />
-      </div>
-    </Tooltip>
+    <Box w="100%">
+      <Tooltip
+        disabled={!disabledButtonExplanation}
+        placement="bottom"
+        content={disabledButtonExplanation}
+      >
+        <div>
+          <Button
+            buttonStyle={ideaInBasket ? 'primary' : buttonStyle}
+            bgColor={ideaInBasket ? colors.success : undefined}
+            borderColor={ideaInBasket ? colors.success : undefined}
+            disabled={!!disabledButtonExplanation}
+            processing={isProcessing}
+            icon={ideaInBasket ? 'check' : 'vote-ballot'}
+            className="e2e-single-vote-button"
+            onClick={vote}
+            text={
+              ideaInBasket
+                ? formatMessage(messages.selected)
+                : formatMessage(messages.select)
+            }
+          />
+        </div>
+      </Tooltip>
+    </Box>
   );
 };
 

diff --git a/.../projects/project/phase/phaseParticipationConfig/components/inputs/VotingInputs/index.tsx b/.../projects/project/phase/phaseParticipationConfig/components/inputs/VotingInputs/index.tsx
@@ -165,7 +165,7 @@ export default ({
         {voting_method === 'multiple_voting' && (
           <MultipleVotingInputs
             voting_max_total={voting_max_total}
-            apiErrors={undefined}
+            apiErrors={apiErrors}
             voteTermError={voteTermError}
             maxTotalVotesError={maxTotalVotesError}
             maxVotesPerOptionError={maxVotesPerOptionError}
@@ -183,7 +183,7 @@ export default ({
         {voting_method === 'single_voting' && (
           <SingleVotingInputs
             voting_max_total={voting_max_total}
-            apiErrors={undefined}
+            apiErrors={apiErrors}
             maxTotalVotesError={maxTotalVotesError}
             handleMaxVotingAmountChange={handleVotingMaxTotalChange}
           />