Update StateContext after updating account payout schedule

vtex-apps · Jul 12, 2022 · d512bb0 · d512bb0
1 parent 6905edc
commit d512bb0
Showing 1 changed file with 76 additions and 65 deletions.
diff --git a/react/components/sellerPayouts.tsx b/react/components/sellerPayouts.tsx
@@ -63,75 +63,86 @@ const SellerPayouts: FC<any> = () => {
   })
 
   useEffect(() => {
-    if (account?.payoutSchedule.schedule) {
-      const selectedItem: any =
-        SCHEDULE_OPTIONS.find(
-          i => i.value === account?.payoutSchedule.schedule
-        ) ?? SCHEDULE_OPTIONS[0]
-
-      state.selectItem(selectedItem)
+    if (!account?.payoutSchedule.schedule) {
+      return
     }
+
+    const selectedItem: any =
+      SCHEDULE_OPTIONS.find(
+        i => i.value === account?.payoutSchedule.schedule
+      ) ?? 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>
   )
 }