Merge pull request #77 from vtex-apps/feature/QUICKORDER-6

[QUICKORDER-6] added some css to shift the tables around
vtex-apps · Dec 21, 2021 · 2a9e407 · 2a9e407
2 parents f416e8d + 2eb4265
commit 2a9e407
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 10 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
+
+- Widened the quickorder table
+
 ## [3.3.1] - 2021-12-17
 
 ### Fixed

diff --git a/messages/es.json b/messages/es.json
@@ -43,6 +43,7 @@
   "store/quickorder.review.label.lineNumber": "#",
   "store/quickorder.review.label.quantity": "Cantidad",
   "store/quickorder.review.label.multiplier": "Multiplicador de unidades",
+  "store/quickorder.review.label.totalQuantity": "Cantidad total",
   "store/quickorder.review.label.seller": "Seller",
   "store/quickorder.review.label.sku": "SKU",
   "store/quickorder.review.label.status": "Estado",

diff --git a/messages/pt.json b/messages/pt.json
@@ -43,6 +43,7 @@
   "store/quickorder.review.label.lineNumber": "#",
   "store/quickorder.review.label.quantity": "Quantidade",
   "store/quickorder.review.label.multiplier": "Multiplicador de Unidade",
+  "store/quickorder.review.label.totalQuantity": "Quantidade total",
   "store/quickorder.review.label.seller": "Seller",
   "store/quickorder.review.label.sku": "SKU",
   "store/quickorder.review.label.status": "Status",

diff --git a/messages/ro.json b/messages/ro.json
@@ -43,6 +43,7 @@
   "store/quickorder.review.label.lineNumber": "#",
   "store/quickorder.review.label.quantity": "Cantitate",
   "store/quickorder.review.label.multiplier": "Multiplicator unitar",
+  "store/quickorder.review.label.totalQuantity": "Cantitate totală",
   "store/quickorder.review.label.seller": "Vanzator",
   "store/quickorder.review.label.sku": "SKU",
   "store/quickorder.review.label.status": "Stare",

diff --git a/react/TextAreaBlock.tsx b/react/TextAreaBlock.tsx
@@ -232,7 +232,7 @@ const TextAreaBlock: StorefrontFunctionComponent<TextAreaBlockInterface &
   return (
     <div>
       {!componentOnly && (
-        <div className={`${handles.textContainer} w-third-l w-100-ns fl-l`}>
+        <div className={`${handles.textContainer} w-20-l w-100-ns fl-l`}>
           <h2
             className={`t-heading-3 mb3 ml5 ml3-ns mt4 ${handles.textContainerTitle}`}
           >
@@ -248,12 +248,12 @@ const TextAreaBlock: StorefrontFunctionComponent<TextAreaBlockInterface &
 
       <div
         className={`${handles.componentContainer} ${
-          !componentOnly ? 'w-two-thirds-l w-100-ns fr-l' : ''
+          !componentOnly ? 'w-80-l w-100-ns fr-l pb6' : ''
         }`}
       >
         {!reviewState && (
           <div className="w-100 mb5">
-            <div className="bg-base t-body c-on-base pa7 br3 b--muted-4">
+            <div className="bg-base t-body c-on-base ph6 br3 b--muted-4">
               <Textarea
                 value={textAreaValue}
                 onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
@@ -276,7 +276,7 @@ const TextAreaBlock: StorefrontFunctionComponent<TextAreaBlockInterface &
         )}
 
         {reviewState && (
-          <div className={`w-100 pa6 ${handles.reviewBlock}`}>
+          <div className={`w-100 ph6 ${handles.reviewBlock}`}>
             <ReviewBlock
               reviewedItems={reviewItems}
               onReviewItems={onReviewItems}

diff --git a/react/UploadBlock.tsx b/react/UploadBlock.tsx
@@ -316,7 +316,7 @@ const UploadBlock: StorefrontFunctionComponent<UploadBlockInterface &
   return (
     <div>
       {!componentOnly && (
-        <div className={`${handles.textContainer} w-third-l w-100-ns fl-l`}>
+        <div className={`${handles.textContainer} w-20-l w-100-ns fl-l`}>
           <h2
             className={`t-heading-3 mb3 ml5 ml3-ns mt4 ${handles.textContainerTitle}`}
           >
@@ -341,13 +341,13 @@ const UploadBlock: StorefrontFunctionComponent<UploadBlockInterface &
       )}
       <div
         className={`${handles.componentContainer} ${
-          !componentOnly ? 'w-two-thirds-l w-100-ns fr-l' : ''
+          !componentOnly ? 'w-80-l w-100-ns fr-l' : ''
         }`}
       >
         {!reviewState && (
           <div className="w-100 mb5">
             <div
-              className={`bg-base t-body c-on-base pa7 br3 b--muted-4 ${handles.dropzoneContainer}`}
+              className={`bg-base t-body c-on-base ph6 pb6 br3 b--muted-4 ${handles.dropzoneContainer}`}
             >
               <Dropzone onDropAccepted={handleFile} onFileReset={handleReset}>
                 <div className="pt7">
@@ -380,7 +380,7 @@ const UploadBlock: StorefrontFunctionComponent<UploadBlockInterface &
         )}
 
         {reviewState && (
-          <div className={`w-100 pa6 ${handles.reviewBlock}`}>
+          <div className={`w-100 ph6 ${handles.reviewBlock}`}>
             <ReviewBlock
               reviewedItems={reviewItems}
               onReviewItems={onReviewItems}

diff --git a/react/components/ReviewBlock.tsx b/react/components/ReviewBlock.tsx
@@ -406,6 +406,7 @@ const ReviewBlock: StorefrontFunctionComponent<WrappedComponentProps & any> = ({
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.lineNumber',
         }),
+        width: 50,
         // eslint-disable-next-line react/display-name
         cellRenderer: ({ rowData }: any) => {
           return <div>{parseInt(rowData.line, 10) + 1}</div>
@@ -440,24 +441,28 @@ const ReviewBlock: StorefrontFunctionComponent<WrappedComponentProps & any> = ({
       sku: {
         type: 'string',
         title: intl.formatMessage({ id: 'store/quickorder.review.label.sku' }),
+        width: 125
       },
       quantity: {
         type: 'string',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.quantity',
         }),
+        width: 75
       },
       unitMultiplier: {
         type: 'float',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.multiplier',
         }),
+        width: 100
       },
       totalQuantity: {
         type: 'float',
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.totalQuantity',
         }),
+        width: 100
       },
       seller: {
         type: 'string',
@@ -467,9 +472,8 @@ const ReviewBlock: StorefrontFunctionComponent<WrappedComponentProps & any> = ({
         cellRenderer: ({ rowData }: any) => {
           if (rowData?.sellers?.length > 1) {
             return (
-              <div className="mb5">
+              <div>
                 <Dropdown
-                  label="Regular"
                   options={rowData.sellers.map((item: any) => {
                     return {
                       label: item.name,
@@ -495,6 +499,7 @@ const ReviewBlock: StorefrontFunctionComponent<WrappedComponentProps & any> = ({
         title: intl.formatMessage({
           id: 'store/quickorder.review.label.status',
         }),
+        width: 75,
         cellRenderer: ({ cellData, rowData }: any) => {
           if (rowData.error) {
             const text = intl.formatMessage(
@@ -518,6 +523,7 @@ const ReviewBlock: StorefrontFunctionComponent<WrappedComponentProps & any> = ({
       delete: {
         type: 'object',
         title: ' ',
+        width: 75,
         // eslint-disable-next-line react/display-name
         cellRenderer: ({ rowData }: any) => {
           return (