Merge pull request #2 from vtex-apps/feature/payment-terms

Add organization payment terms
vtex-apps · Oct 25, 2021 · 57b096b · 57b096b
2 parents e970f65 + 6add5e4
commit 57b096b
Show file tree

Hide file tree

Showing 20 changed files with 1,748 additions and 1,663 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
+
+- Organization Payment Terms
+
 ## [0.0.2] - 2021-09-10
 
 ### Fixed

diff --git a/manifest.json b/manifest.json
@@ -31,7 +31,9 @@
       "url": "https://support.vtex.com/hc/requests"
     },
     "type": "free",
-    "availableCountries": ["*"]
+    "availableCountries": [
+      "*"
+    ]
   },
   "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
 }
diff --git a/messages/context.json b/messages/context.json
@@ -66,6 +66,7 @@
   "admin/b2b-organizations.organization-details.created": "admin/b2b-organizations.organization-details.created",
   "admin/b2b-organizations.organization-details.organization-name": "admin/b2b-organizations.organization-details.organization-name",
   "admin/b2b-organizations.organization-details.collections": "admin/b2b-organizations.organization-details.collections",
+  "admin/b2b-organizations.organization-details.paymentTerms": "admin/b2b-organizations.organization-details.paymentTerms",
   "admin/b2b-organizations.organization-details.price-tables": "admin/b2b-organizations.organization-details.price-tables",
   "admin/b2b-organizations.organization-details.assigned-to-org": "admin/b2b-organizations.organization-details.assigned-to-org",
   "admin/b2b-organizations.organization-details.available": "admin/b2b-organizations.organization-details.available",

diff --git a/messages/en.json b/messages/en.json
@@ -66,6 +66,7 @@
   "admin/b2b-organizations.organization-details.created": "Created",
   "admin/b2b-organizations.organization-details.organization-name": "Organization Name",
   "admin/b2b-organizations.organization-details.collections": "Collections",
+  "admin/b2b-organizations.organization-details.paymentTerms": "Payment Terms",
   "admin/b2b-organizations.organization-details.price-tables": "Price Tables",
   "admin/b2b-organizations.organization-details.assigned-to-org": "Assigned to organization",
   "admin/b2b-organizations.organization-details.available": "Available",

diff --git a/messages/es.json b/messages/es.json
@@ -66,6 +66,7 @@
   "admin/b2b-organizations.organization-details.created": "admin/b2b-organizations.organization-details.created",
   "admin/b2b-organizations.organization-details.organization-name": "admin/b2b-organizations.organization-details.organization-name",
   "admin/b2b-organizations.organization-details.collections": "admin/b2b-organizations.organization-details.collections",
+  "admin/b2b-organizations.organization-details.paymentTerms": "admin/b2b-organizations.organization-details.paymentTerms",
   "admin/b2b-organizations.organization-details.price-tables": "admin/b2b-organizations.organization-details.price-tables",
   "admin/b2b-organizations.organization-details.assigned-to-org": "admin/b2b-organizations.organization-details.assigned-to-org",
   "admin/b2b-organizations.organization-details.available": "admin/b2b-organizations.organization-details.available",

diff --git a/messages/pt.json b/messages/pt.json
@@ -66,6 +66,7 @@
   "admin/b2b-organizations.organization-details.created": "admin/b2b-organizations.organization-details.created",
   "admin/b2b-organizations.organization-details.organization-name": "admin/b2b-organizations.organization-details.organization-name",
   "admin/b2b-organizations.organization-details.collections": "admin/b2b-organizations.organization-details.collections",
+  "admin/b2b-organizations.organization-details.paymentTerms": "admin/b2b-organizations.organization-details.paymentTerms",
   "admin/b2b-organizations.organization-details.price-tables": "admin/b2b-organizations.organization-details.price-tables",
   "admin/b2b-organizations.organization-details.assigned-to-org": "admin/b2b-organizations.organization-details.assigned-to-org",
   "admin/b2b-organizations.organization-details.available": "admin/b2b-organizations.organization-details.available",

diff --git a/package.json b/package.json
@@ -31,14 +31,14 @@
   "devDependencies": {
     "@types/node": "12.12.21",
     "@vtex/intl-equalizer": "^2.5.0",
-    "@vtex/prettier-config": "^0.3.5",
-    "eslint": "^7.14.0",
-    "eslint-config-vtex": "^12.8.11",
+    "@vtex/prettier-config": "0.1.4",
+    "eslint": "7.12.1",
+    "eslint-config-vtex": "^14.1.1",
     "eslint-config-vtex-react": "^6.8.3",
-    "husky": "^4.3.0",
-    "lint-staged": "^10.5.1",
-    "prettier": "^2.2.0",
-    "typescript": "^3.9.6"
+    "husky": "4.2.3",
+    "lint-staged": "10.1.1",
+    "prettier": "2.0.2",
+    "typescript": "3.8.3"
   },
   "intl-equalizer": {
     "referenceLocale": "en",

diff --git a/react/admin/CostCenterDetails.tsx b/react/admin/CostCenterDetails.tsx
@@ -161,7 +161,7 @@ const CostCenterDetails: FunctionComponent = () => {
         refetch()
         setLoadingState(false)
       })
-      .catch((error) => {
+      .catch(error => {
         console.error(error)
         toast.dispatch({
           type: 'error',
@@ -181,7 +181,7 @@ const CostCenterDetails: FunctionComponent = () => {
           params: { id: data.getCostCenterById.organization },
         })
       })
-      .catch((error) => {
+      .catch(error => {
         console.error(error)
         toast.dispatch({
           type: 'error',
@@ -206,7 +206,7 @@ const CostCenterDetails: FunctionComponent = () => {
 
   const handleEditAddressModal = (addressId: string) => {
     const editAddress = addresses.find(
-      (address) => address.addressId === addressId
+      address => address.addressId === addressId
     )
 
     if (!editAddress) return
@@ -266,7 +266,7 @@ const CostCenterDetails: FunctionComponent = () => {
     const addressArray = addresses
 
     const addressIndex = addresses.findIndex(
-      (address) => address.addressId === addressId
+      address => address.addressId === addressId
     )
 
     addressArray[addressIndex] = {

diff --git a/react/admin/OrganizationDetails.tsx b/react/admin/OrganizationDetails.tsx
@@ -30,6 +30,7 @@ import GET_ORGANIZATION from '../graphql/getOrganization.graphql'
 import GET_LOGISTICS from '../graphql/getLogistics.graphql'
 import UPDATE_ORGANIZATION from '../graphql/updateOrganization.graphql'
 import GET_COLLECTIONS from '../graphql/getCollections.graphql'
+import GET_PAYMENT_TERMS from '../graphql/getPaymentTerms.graphql'
 import GET_PRICE_TABLES from '../graphql/getPriceTables.graphql'
 import GET_COST_CENTERS from '../graphql/getCostCentersByOrganizationId.graphql'
 import CREATE_COST_CENTER from '../graphql/createCostCenter.graphql'
@@ -55,6 +56,11 @@ interface PriceTable {
   name: string
 }
 
+interface PaymentTerm {
+  id: number
+  name: string
+}
+
 const adminPrefix = 'admin/b2b-organizations.'
 
 const messages = defineMessages({
@@ -109,6 +115,9 @@ const messages = defineMessages({
   collections: {
     id: `${adminPrefix}organization-details.collections`,
   },
+  paymentTerms: {
+    id: `${adminPrefix}organization-details.paymentTerms`,
+  },
   priceTables: {
     id: `${adminPrefix}organization-details.price-tables`,
   },
@@ -172,6 +181,14 @@ const OrganizationDetails: FunctionComponent = () => {
     pageSize: 25,
   })
 
+  const [paymentTermsState, setPaymentTermsState] = useState(
+    [] as PaymentTerm[]
+  )
+
+  const [paymentTermsOptions, setPaymentTermsOptions] = useState(
+    [] as PaymentTerm[]
+  )
+
   const [loadingState, setLoadingState] = useState(false)
   const [newCostCenterModalState, setNewCostCenterModalState] = useState(false)
   const [newCostCenterName, setNewCostCenterName] = useState('')
@@ -194,10 +211,14 @@ const OrganizationDetails: FunctionComponent = () => {
     }
   )
 
-  const { data: collectionsData, refetch: refetchCollections } = useQuery(
-    GET_COLLECTIONS,
-    { ssr: false }
-  )
+  const {
+    data: collectionsData,
+    refetch: refetchCollections,
+  } = useQuery(GET_COLLECTIONS, { ssr: false })
+
+  const { data: paymentTermsData } = useQuery<{
+    getPaymentTerms: PaymentTerm[]
+  }>(GET_PAYMENT_TERMS, { ssr: false })
 
   const { data: priceTablesData } = useQuery(GET_PRICE_TABLES, { ssr: false })
   const { data: logisticsData } = useQuery(GET_LOGISTICS, { ssr: false })
@@ -216,10 +237,10 @@ const OrganizationDetails: FunctionComponent = () => {
 
   useEffect(() => {
     if (!data?.getOrganizationById || statusState) return
-
     setOrganizationNameState(data.getOrganizationById.name)
     setStatusState(data.getOrganizationById.status)
     setCollectionsState(data.getOrganizationById.collections ?? [])
+    setPaymentTermsState(data.getOrganizationById.paymentTerms ?? [])
     setPriceTablesState(data.getOrganizationById.priceTables ?? [])
   }, [data])
 
@@ -253,6 +274,17 @@ const OrganizationDetails: FunctionComponent = () => {
     setCollectionOptions(collections)
   }, [collectionsData])
 
+  useEffect(() => {
+    if (
+      !paymentTermsData?.getPaymentTerms?.length ||
+      paymentTermsOptions.length
+    ) {
+      return
+    }
+
+    setPaymentTermsOptions(paymentTermsData.getPaymentTerms)
+  }, [paymentTermsData])
+
   const handleCostCentersPrevClick = () => {
     if (costCenterPaginationState.page === 1) return
 
@@ -351,14 +383,15 @@ const OrganizationDetails: FunctionComponent = () => {
   const handleUpdateOrganization = () => {
     setLoadingState(true)
 
-    const collections = collectionsState.map((collection) => {
+    const collections = collectionsState.map(collection => {
       return { name: collection.name, id: collection.collectionId }
     })
 
     const variables = {
       id: params?.id,
       status: statusState,
       collections,
+      paymentTerms: paymentTermsState,
       priceTables: priceTablesState,
     }
 
@@ -371,7 +404,7 @@ const OrganizationDetails: FunctionComponent = () => {
         })
         refetch({ id: params?.id })
       })
-      .catch((error) => {
+      .catch(error => {
         setLoadingState(false)
         console.error(error)
         toast.dispatch({
@@ -401,12 +434,37 @@ const OrganizationDetails: FunctionComponent = () => {
     })
 
     const newCollectionList = collectionsState.filter(
-      (collection) => !collectionsToRemove.includes(collection.collectionId)
+      collection => !collectionsToRemove.includes(collection.collectionId)
     )
 
     setCollectionsState(newCollectionList)
   }
 
+  const handleAddPaymentTerms = (rowParams: {
+    selectedRows: PaymentTerm[]
+  }) => {
+    const { selectedRows = [] } = rowParams
+
+    setPaymentTermsState([...paymentTermsState, ...selectedRows])
+  }
+
+  const handleRemovePaymentTerms = (rowParams: {
+    selectedRows: PaymentTerm[]
+  }) => {
+    const { selectedRows = [] } = rowParams
+    const paymentTermsToRemove = [] as number[]
+
+    selectedRows.forEach(row => {
+      paymentTermsToRemove.push(row.id)
+    })
+
+    const newPaymentTerms = paymentTermsState.filter(
+      paymentTerm => !paymentTermsToRemove.includes(paymentTerm.id)
+    )
+
+    setPaymentTermsState(newPaymentTerms)
+  }
+
   const handleAddPriceTables = (rowParams: any) => {
     const { selectedRows = [] } = rowParams
     const newPriceTables = [] as string[]
@@ -415,7 +473,7 @@ const OrganizationDetails: FunctionComponent = () => {
       newPriceTables.push(row.name)
     })
 
-    setPriceTablesState((prevState) => [...prevState, ...newPriceTables])
+    setPriceTablesState(prevState => [...prevState, ...newPriceTables])
   }
 
   const handleRemovePriceTables = (rowParams: any) => {
@@ -427,7 +485,7 @@ const OrganizationDetails: FunctionComponent = () => {
     })
 
     const newPriceTablesList = priceTablesState.filter(
-      (priceTable) => !priceTablesToRemove.includes(priceTable)
+      priceTable => !priceTablesToRemove.includes(priceTable)
     )
 
     setPriceTablesState(newPriceTablesList)
@@ -470,7 +528,7 @@ const OrganizationDetails: FunctionComponent = () => {
         })
         refetchCostCenters({ ...costCenterPaginationState, id: params?.id })
       })
-      .catch((error) => {
+      .catch(error => {
         setNewCostCenterModalState(false)
         setLoadingState(false)
         console.error(error)
@@ -720,6 +778,54 @@ const OrganizationDetails: FunctionComponent = () => {
           />
         </div>
       </PageBlock>
+      <PageBlock variation="half" title={formatMessage(messages.paymentTerms)}>
+        <div>
+          <h4 className="t-heading-4 mt0 mb0">
+            <FormattedMessage id="admin/b2b-organizations.organization-details.assigned-to-org" />
+          </h4>
+          <Table
+            fullWidth
+            schema={getSchema()}
+            items={paymentTermsState}
+            bulkActions={{
+              texts: {
+                rowsSelected: (qty: number) =>
+                  formatMessage(messages.selectedRows, {
+                    qty,
+                  }),
+              },
+              main: {
+                label: formatMessage(messages.removeFromOrg),
+                handleCallback: (rowParams: any) =>
+                  handleRemovePaymentTerms(rowParams),
+              },
+            }}
+          />
+        </div>
+        <div>
+          <h4 className="t-heading-4 mt0 mb0">
+            <FormattedMessage id="admin/b2b-organizations.organization-details.available" />
+          </h4>
+          <Table
+            fullWidth
+            schema={getSchema()}
+            items={paymentTermsOptions}
+            bulkActions={{
+              texts: {
+                rowsSelected: (qty: number) =>
+                  formatMessage(messages.selectedRows, {
+                    qty,
+                  }),
+              },
+              main: {
+                label: formatMessage(messages.addToOrg),
+                handleCallback: (rowParams: any) =>
+                  handleAddPaymentTerms(rowParams),
+              },
+            }}
+          />
+        </div>
+      </PageBlock>
       <PageBlock variation="half" title={formatMessage(messages.priceTables)}>
         <div>
           <h4 className="t-heading-4 mt0 mb0">
@@ -728,7 +834,7 @@ const OrganizationDetails: FunctionComponent = () => {
           <Table
             fullWidth
             schema={getSchema()}
-            items={priceTablesState.map((priceTable) => {
+            items={priceTablesState.map(priceTable => {
               return { name: priceTable }
             })}
             bulkActions={{

diff --git a/react/admin/OrganizationRequestDetails.tsx b/react/admin/OrganizationRequestDetails.tsx
@@ -80,7 +80,7 @@ const OrganizationRequestDetails: FunctionComponent = () => {
         })
         refetch({ id: params?.id })
       })
-      .catch((error) => {
+      .catch(error => {
         setLoadingState(false)
         console.error(error)
         toast.dispatch({