Merge pull request #13 from vtex-apps/fix/ADYENPLAT-37

[ADYENPLAT-37] Fix account info mismatch between Adyen Menu and Seller Details page; Fix bug displaying wrong payouts schedule on initial navigation to Seller Details page
vtex-apps · Jul 13, 2022 · e93aa4b · e93aa4b
2 parents 500fdca + d512bb0
commit e93aa4b
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 63 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- Fixed a bug where the Adyen Menu page got seller's account status from first account listed instead of first active account
+- Fixed a bug where Payouts dropdown in Seller Detail page displayed `Daily` instead of saved payout schedule
+
 ## [0.3.2] - 2022-06-08
 
 ### Added

diff --git a/node/clients/masterdata/account.ts b/node/clients/masterdata/account.ts
@@ -101,7 +101,12 @@ export class Account extends MasterData {
         schema: ACCOUNT_SCHEMA_VERSION,
       })
 
-      return accounts[0] || null
+      if (!accounts.length) return null
+
+      // return first active account if available
+      return (
+        accounts.find(account => account.status === 'Active') ?? accounts[0]
+      )
     } catch (error) {
       return null
     }
@@ -132,6 +137,7 @@ export class Account extends MasterData {
           dataEntity: DATA_ENTITY,
           fields: ['sellerId', 'accountHolderCode', 'accountCode', 'status'],
           pagination: { page: 1, pageSize: 100 },
+          schema: ACCOUNT_SCHEMA_VERSION,
         })
 
       return accounts.data

diff --git a/react/components/sellerPayouts.tsx b/react/components/sellerPayouts.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import React, { useContext, useState } from 'react'
+import React, { useContext, useState, useEffect } from 'react'
 import { useMutation } from 'react-apollo'
 import {
   Box,
@@ -55,74 +55,94 @@ const SellerPayouts: FC<any> = () => {
 
   const [updateAccount] = useMutation(UPDATE_ACCOUNT)
   const [account] = adyenAccountHolder?.accounts || []
+
   const state = useSelectState({
     items: SCHEDULE_OPTIONS,
     itemToString: (item: any) => item.label,
-    initialSelectedItem:
+    initialSelectedItem: SCHEDULE_OPTIONS[0],
+  })
+
+  useEffect(() => {
+    if (!account?.payoutSchedule.schedule) {
+      return
+    }
+
+    const selectedItem: any =
       SCHEDULE_OPTIONS.find(
         i => i.value === account?.payoutSchedule.schedule
-      ) ?? SCHEDULE_OPTIONS[0],
-  })
+      ) ?? SCHEDULE_OPTIONS[0]
+
+    state.selectItem(selectedItem)
+  }, [account?.payoutSchedule.schedule])
+
+  const handleUpdate = async (setContextState: any) => {
+    setIsLoading(true)
+
+    try {
+      const response = await updateAccount({
+        variables: {
+          accountCode: account.accountCode,
+          schedule: state.selectedItem?.value,
+        },
+      })
+
+      account.payoutSchedule.schedule = response.data.updateAccount.schedule
+      setContextState({ adyenAccountHolder })
+    } catch (err) {
+      setIsLoading(false)
+
+      toast.dispatch({
+        type: 'error',
+        message: 'Unable to update payout schedule',
+      })
+
+      return
+    }
+
+    setIsLoading(false)
+    toast.dispatch({
+      type: 'success',
+      message: 'Payout schedule updated',
+    })
+  }
 
   return (
-    <Columns spacing={1}>
-      <Columns.Item>
-        <Box>
-          <Set orientation="vertical" spacing={3} fluid>
-            <Heading>Payouts</Heading>
-            <Paragraph csx={{ width: '60%' }}>
-              Set seller payout schedule.
-            </Paragraph>
-            <Set spacing={3}>
-              <Select
-                items={SCHEDULE_OPTIONS}
-                state={state}
-                label="Schedule"
-                renderItem={(item: any) => item.label}
-              />
-              <Paragraph csx={{ width: '60%' }}>
-                {state.selectedItem?.description}
-              </Paragraph>
-            </Set>
-          </Set>
-        </Box>
-        <Button
-          loading={isLoading}
-          disabled={!adyenAccountHolder}
-          variant="primary"
-          csx={{ marginTop: '20px' }}
-          onClick={async (_e: any) => {
-            setIsLoading(true)
-
-            try {
-              await updateAccount({
-                variables: {
-                  accountCode: account.accountCode,
-                  schedule: state.selectedItem?.value,
-                },
-              })
-            } catch (err) {
-              setIsLoading(false)
-
-              toast.dispatch({
-                type: 'error',
-                message: 'Unable to update payout schedule',
-              })
-
-              return
-            }
-
-            setIsLoading(false)
-            toast.dispatch({
-              type: 'success',
-              message: 'Payout schedule updated',
-            })
-          }}
-        >
-          Save
-        </Button>
-      </Columns.Item>
-    </Columns>
+    <StateContext.Consumer>
+      {({ setContextState }) => (
+        <Columns spacing={1}>
+          <Columns.Item>
+            <Box>
+              <Set orientation="vertical" spacing={3} fluid>
+                <Heading>Payouts</Heading>
+                <Paragraph csx={{ width: '60%' }}>
+                  Set seller payout schedule.
+                </Paragraph>
+                <Set spacing={3}>
+                  <Select
+                    items={SCHEDULE_OPTIONS}
+                    state={state}
+                    label="Schedule"
+                    renderItem={(item: any) => item.label}
+                  />
+                  <Paragraph csx={{ width: '60%' }}>
+                    {state.selectedItem?.description}
+                  </Paragraph>
+                </Set>
+              </Set>
+            </Box>
+            <Button
+              loading={isLoading}
+              disabled={!adyenAccountHolder}
+              variant="primary"
+              csx={{ marginTop: '20px' }}
+              onClick={() => handleUpdate(setContextState)}
+            >
+              Save
+            </Button>
+          </Columns.Item>
+        </Columns>
+      )}
+    </StateContext.Consumer>
   )
 }