Merge pull request #83 from JooLuiz/enhancement/not-show-validate-but…

…ton-if-empty [Enhancement] Changing the validate button in TextArea and Upload blocks to only be shown if the user has written something or sent a file, respectively
vtex-apps · Feb 9, 2022 · b1319ca · b1319ca
2 parents 6ab5017 + 2bf64e4
commit b1319ca
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 20 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Changing the validate button in TextArea and Upload blocks to only be shown if the user has written something or sent a file, respectively
+
 ## [3.6.0] - 2022-02-09
 
 ### Added

diff --git a/react/TextAreaBlock.tsx b/react/TextAreaBlock.tsx
@@ -302,15 +302,17 @@ const TextAreaBlock: FunctionComponent<TextAreaBlockInterface &
                 }
               />
               <div className={`mt2 flex justify-end ${handles.buttonValidate}`}>
-                <Button
-                  variation="secondary"
-                  size="regular"
-                  onClick={() => {
-                    parseText()
-                  }}
-                >
-                  <FormattedMessage id="store/quickorder.validate" />
-                </Button>
+                {textAreaValue && (
+                  <Button
+                    variation="secondary"
+                    size="regular"
+                    onClick={() => {
+                      parseText()
+                    }}
+                  >
+                    <FormattedMessage id="store/quickorder.validate" />
+                  </Button>
+                )}
               </div>
             </div>
           </div>

diff --git a/react/UploadBlock.tsx b/react/UploadBlock.tsx
@@ -59,7 +59,10 @@ const UploadBlock: FunctionComponent<UploadBlockInterface &
     showAddToCart: false,
   })
 
+  const [showValidateButton, setShowValidateButton] = useState<boolean>(false)
+
   const [refidLoading, setRefIdLoading] = useState<any>()
+  const [productsQueue, setproductsQueue] = useState<any>()
   const { reviewItems, reviewState, showAddToCart } = state
 
   const [
@@ -151,7 +154,7 @@ const UploadBlock: FunctionComponent<UploadBlockInterface &
   const parseText = () => {
     let textAreaValue = ''
 
-    productsArray.forEach(element => {
+    productsQueue.forEach(element => {
       textAreaValue += `${element[0]},${element[1]}\n`
     })
 
@@ -209,6 +212,9 @@ const UploadBlock: FunctionComponent<UploadBlockInterface &
         p[0] = (p[0] || '').toString().trim()
         p[1] = (p[1] || '').toString().trim()
       })
+
+      setShowValidateButton(true)
+      setproductsQueue(productsArray)
     }
 
     reader.onerror = () => {
@@ -222,13 +228,16 @@ const UploadBlock: FunctionComponent<UploadBlockInterface &
     doFile(files)
   }
 
-  const handleReset = () => {}
+  const handleReset = () => {
+    setShowValidateButton(false)
+  }
 
   const backList = () => {
     setState({
       ...state,
       reviewState: false,
     })
+    setShowValidateButton(false)
   }
 
   const callAddToCart = async (items: any) => {
@@ -418,15 +427,17 @@ const UploadBlock: FunctionComponent<UploadBlockInterface &
                 </div>
               </Dropzone>
               <div className={`mt2 flex justify-end ${handles.buttonValidate}`}>
-                <Button
-                  variation="secondary"
-                  size="regular"
-                  onClick={() => {
-                    parseText()
-                  }}
-                >
-                  <FormattedMessage id="store/quickorder.validate" />
-                </Button>
+                {showValidateButton && (
+                  <Button
+                    variation="secondary"
+                    size="regular"
+                    onClick={() => {
+                      parseText()
+                    }}
+                  >
+                    <FormattedMessage id="store/quickorder.validate" />
+                  </Button>
+                )}
               </div>
             </div>
           </div>