Merge pull request #86 from JooLuiz/enhancement/making-review-block-c…

…olumns-hideable [Enhancement] Adding an option as a prop to make the columns of the review block hideable
vtex-apps · Feb 22, 2022 · 874d9a2 · 874d9a2
2 parents 42fe769 + 65757a5
commit 874d9a2
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 23 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]
 
+### Added 
+
+- Adding an option as a prop to make the columns of the review block hideable
+
 ## [3.7.1] - 2022-02-22
 
 ### Fixed

diff --git a/docs/README.md b/docs/README.md
@@ -160,6 +160,12 @@ Especially, the `quickorder-upload` block also can use the following prop:
 | -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
 | `downloadText` | `string` | Defines a text for the spreadsheet download button. Use this prop to explain users how to properly download the spreadsheet model provided by the component. | `undefined`   |
 
+Especially, the `quickorder-upload` and the `quickorder-textarea` block also can use the following prop:
+
+| Prop name      | Type     | Description                                                                                                                                                  | Default value |
+| -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- |
+| `hiddenColumns` | `array of strings (i.e. ["sku", "seller", "quantity"])` | Defines which columns of the review block must be hidden, you might hide more than one column separating the values with comma | `[]`   |
+
 For more on each of the components and their respective functionalities, check out the **Modus Operandi** section below.
 
 ## Modus Operandi

diff --git a/react/TextAreaBlock.tsx b/react/TextAreaBlock.tsx
@@ -48,6 +48,7 @@ const TextAreaBlock: FunctionComponent<TextAreaBlockInterface &
   intl,
   value,
   text,
+  hiddenColumns,
   description,
   componentOnly,
 }: any) => {
@@ -322,6 +323,7 @@ const TextAreaBlock: FunctionComponent<TextAreaBlockInterface &
           <div className={`w-100 ph6 ${handles.reviewBlock}`}>
             <ReviewBlock
               reviewedItems={reviewItems}
+              hiddenColumns={hiddenColumns ?? []}
               onReviewItems={onReviewItems}
               onRefidLoading={onRefidLoading}
             />

diff --git a/react/UploadBlock.tsx b/react/UploadBlock.tsx
@@ -47,6 +47,7 @@ const messages = defineMessages({
 const UploadBlock: FunctionComponent<UploadBlockInterface &
   WrappedComponentProps> = ({
   text,
+  hiddenColumns,
   description,
   downloadText,
   componentOnly,
@@ -444,6 +445,7 @@ const UploadBlock: FunctionComponent<UploadBlockInterface &
           <div className={`w-100 ph6 ${handles.reviewBlock}`}>
             <ReviewBlock
               reviewedItems={reviewItems}
+              hiddenColumns={hiddenColumns ?? []}
               onReviewItems={onReviewItems}
               onRefidLoading={onRefidLoading}
             />

diff --git a/react/components/ReviewBlock.tsx b/react/components/ReviewBlock.tsx
@@ -132,6 +132,7 @@ let orderFormId = ''
 
 const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
   onReviewItems,
+  hiddenColumns,
   reviewedItems,
   onRefidLoading,
   intl,
@@ -409,9 +410,15 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
     }
   }
 
-  const tableSchema = {
-    properties: {
-      line: {
+  const tableSchema: {
+    properties: any
+  } = {
+    properties: {},
+  }
+
+  const createSchema = (columnsToBeHidden: string[]) => {
+    if (columnsToBeHidden.indexOf('line') === -1) {
+      tableSchema.properties.line = {
         type: 'object',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.lineNumber',
@@ -421,8 +428,11 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
         cellRenderer: ({ rowData }: any) => {
           return <div>{parseInt(rowData.line, 10) + 1}</div>
         },
-      },
-      content: {
+      }
+    }
+
+    if (columnsToBeHidden.indexOf('content') === -1) {
+      tableSchema.properties.content = {
         type: 'object',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.content',
@@ -447,34 +457,49 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
 
           return <span>{cellData}</span>
         },
-      },
-      sku: {
+      }
+    }
+
+    if (columnsToBeHidden.indexOf('sku') === -1) {
+      tableSchema.properties.sku = {
         type: 'string',
         title: intl.formatMessage({ id: 'store/quickorder.review.label.sku' }),
         width: 125,
-      },
-      quantity: {
+      }
+    }
+
+    if (columnsToBeHidden.indexOf('quantity') === -1) {
+      tableSchema.properties.quantity = {
         type: 'string',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.quantity',
         }),
         width: 75,
-      },
-      unitMultiplier: {
+      }
+    }
+
+    if (columnsToBeHidden.indexOf('unitMultiplier') === -1) {
+      tableSchema.properties.unitMultiplier = {
         type: 'float',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.multiplier',
         }),
         width: 100,
-      },
-      totalQuantity: {
+      }
+    }
+
+    if (columnsToBeHidden.indexOf('totalQuantity') === -1) {
+      tableSchema.properties.totalQuantity = {
         type: 'float',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.totalQuantity',
         }),
         width: 100,
-      },
-      seller: {
+      }
+    }
+
+    if (columnsToBeHidden.indexOf('seller') === -1) {
+      tableSchema.properties.seller = {
         type: 'string',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.seller',
@@ -501,8 +526,11 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
 
           return rowData?.sellers?.length ? rowData.sellers[0].name : ''
         },
-      },
-      error: {
+      }
+    }
+
+    if (columnsToBeHidden.indexOf('error') === -1) {
+      tableSchema.properties.error = {
         type: 'string',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.status',
@@ -527,8 +555,11 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
 
           return intl.formatMessage({ id: 'store/quickorder.valid' })
         },
-      },
-      delete: {
+      }
+    }
+
+    if (columnsToBeHidden.indexOf('delete') === -1) {
+      tableSchema.properties.delete = {
         type: 'object',
         title: ' ',
         width: 75,
@@ -546,10 +577,12 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
             </div>
           )
         },
-      },
-    },
+      }
+    }
   }
 
+  createSchema(hiddenColumns)
+
   return (
     <div>
       <Table schema={tableSchema} items={reviewItems} fullWidth />
@@ -560,6 +593,7 @@ const ReviewBlock: FunctionComponent<WrappedComponentProps & any> = ({
 ReviewBlock.propTypes = {
   onReviewItems: PropTypes.func,
   reviewItems: PropTypes.array,
+  hiddenColumns: PropTypes.array,
   onRefidLoading: PropTypes.func,
 }
 

diff --git a/store/blocks.json b/store/blocks.json
@@ -34,7 +34,8 @@
     "props": {
       "componentOnly": false,
       "text": "Copy/Paste Skus",
-      "description": "[Sku's Code],[Quantity]"
+      "description": "[Sku's Code],[Quantity]",
+      "hiddenColumns": []
     }
   },
 
@@ -49,7 +50,8 @@
       "componentOnly": false,
       "text": "Upload",
       "description": "Upload a Spreadsheet with two columns (SKU, Quantity) to bulk order",
-      "downloadText": "Click here to download a spreadsheet model"
+      "downloadText": "Click here to download a spreadsheet model",
+      "hiddenColumns": []
     }
   },