Merge pull request #5078 from OneCommunityGlobal/auto-populate-optimize-tool-selection-workflow

Uha fix purchase form

Author: one-community

src/components/BMDashboard/Equipment/Add/AddTypeForm.jsx

@@ -6,6 +6,7 @@ import { toast } from 'react-toastify';
 import { useHistory } from 'react-router-dom';
 
 import { addEquipmentType, fetchAllEquipments } from '~/actions/bmdashboard/equipmentActions';
+import BMCharacterLimitHint from '../../shared/BMCharacterLimitHint';
 
 const FuelTypes = {
   dies: 'Diesel',
@@ -15,13 +16,15 @@ const FuelTypes = {
   etha: 'Ethanol',
 };
 
+const DESC_CHAR_LIMIT = 150;
+
 // const [inputText, setInputText] = useState('');
 
 const schema = Joi.object({
   name: Joi.string().required(),
   desc: Joi.string()
     .required()
-    .max(150),
+    .max(DESC_CHAR_LIMIT),
 });
 
 export default function AddTypeForm() {
@@ -46,7 +49,7 @@ export default function AddTypeForm() {
       setName(event.target.value);
     }
     if (event.target.name === 'desc') {
-      setDesc(event.target.value);
+      setDesc(event.target.value.slice(0, DESC_CHAR_LIMIT));
     }
     if (event.target.name === 'fuel') {
       setFuel(event.target.value);
@@ -104,13 +107,16 @@ export default function AddTypeForm() {
           name="desc"
           type="textarea"
           rows={2}
+          maxLength={DESC_CHAR_LIMIT}
           value={desc}
           invalid={errInput === 'desc'}
           onChange={handleChange}
         />
-        <div className="form-footer" style={{ color: desc.length > 150 ? '#dc3545' : 'black' }}>
-          Character {desc.length}/150
-        </div>
+        <BMCharacterLimitHint
+          limit={DESC_CHAR_LIMIT}
+          length={desc.length}
+          summary={`Character ${desc.length}/${DESC_CHAR_LIMIT}`}
+        />
         {/* {!errInput && <FormText>Max 150 characters</FormText>} */}
         <FormFeedback>
           {errType === 'string.max'

src/components/BMDashboard/EquipmentPurchaseRequest/PurchaseForm.jsx

@@ -7,9 +7,12 @@ import Joi from 'joi';
 
 import { boxStyle } from '~/styles';
 import { purchaseEquipment } from '~/actions/bmdashboard/equipmentActions';
+import BMCharacterLimitHint from '../shared/BMCharacterLimitHint';
 
 import stylesPurchaseForm from './PurchaseForm.module.css';
 
+const DESC_CHAR_LIMIT = 150;
+
 export default function PurchaseForm() {
   const bmProjects = useSelector(state => state.bmProjects);
   const equipments = useSelector(state => state.bmInvTypes.list);
@@ -38,7 +41,7 @@ export default function PurchaseForm() {
     estTime: Joi.string().required(),
     desc: Joi.string()
       .required()
-      .max(150),
+      .max(DESC_CHAR_LIMIT),
     makeModel: Joi.string().allow(''),
   });
 
@@ -204,13 +207,14 @@ export default function PurchaseForm() {
         <Input
           id="input-usage-description"
           type="textarea"
+          maxLength={DESC_CHAR_LIMIT}
           value={desc}
           onChange={({ currentTarget }) => {
             setValidationError('');
-            setDesc(currentTarget.value);
+            setDesc(currentTarget.value.slice(0, DESC_CHAR_LIMIT));
           }}
         />
-        <FormText>Max 150 characters</FormText>
+        <BMCharacterLimitHint limit={DESC_CHAR_LIMIT} length={desc.length} />
       </FormGroup>
       <FormGroup>
         <Label for="input-brand">Preferred Make &amp; Model (optional)</Label>